/* ================================================================
   Global Communication Shell
   Desktop: right-edge drawer. Mobile: full-screen bottom sheet.
   ================================================================ */

/* ----------------------------------------------------------------
   Shell container
   ---------------------------------------------------------------- */
:root {
  --comms-shell-desktop-width: 380px;
  --comms-shell-desktop-top: 35px;
  --comms-shell-tablet-top: 65px;
  --comms-chat-bg: #070914;
  --comms-header-bg: #111624;
  --comms-header-hover-bg: #171d2e;
}

.comms-shell {
  position: fixed;
  z-index: 1050;
  background: var(--comms-chat-bg);
  color: #ccc;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
  border-left: 1px solid #222;
  box-shadow: -4px 0 20px rgba(0,0,0,0.5);
}

/* Skip drawer + layout transitions on first paint (e.g. auto-open after navigation); launcher toggle keeps animations. */
body.comms-shell-instant-drawer .comms-shell {
  transition: none;
}

/* Desktop: right-edge drawer */
@media (min-width: 768px) {
  .comms-shell {
    top: var(--comms-shell-tablet-top);
    right: 0;
    bottom: 0;
    width: var(--comms-shell-desktop-width);
    transform: translateX(100%);
  }
  .comms-shell.comms-shell-open {
    transform: translateX(0);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  body.comms-shell-instant-drawer #game-body {
    transition: none;
  }

  #game-body {
    transition: padding-right 0.25s ease;
  }

  body.comms-shell-body-open #game-body {
    padding-right: calc(var(--comms-shell-desktop-width) + 20px);
  }
}

@media (min-width: 992px) {
  body.comms-shell-instant-drawer #game-content {
    transition: none;
  }

  .comms-shell {
    top: var(--comms-shell-desktop-top);
  }

  #game-content {
    transition: width 0.25s ease;
  }

  body.comms-shell-body-open #game-content.col-md-10 {
    width: calc(83.33333333% - var(--comms-shell-desktop-width));
  }

  body.comms-shell-body-open #game-content.col-md-7 {
    width: calc(58.33333333% - var(--comms-shell-desktop-width));
  }
}

/* Mobile: immersive bottom sheet covering full viewport */
@media (max-width: 767px) {
  .comms-shell {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    border-left: none;
    border-top: none;
    border-radius: 0;
    transform: translateY(100%);
  }
  .comms-shell.comms-shell-open {
    transform: translateY(0);
  }

  /* Suppress surrounding page chrome while shell is open */
  body.comms-shell-body-open #nav-small,
  body.comms-shell-body-open #nav-large,
  body.comms-shell-body-open #game-body,
  body.comms-shell-body-open #left-sidebar {
    display: none !important;
  }
  /* Background scroll lock. position:fixed (paired with inline top:-Npx
     set by JS) is the actual scroll-lock; it preserves the page's prior
     scroll position so closing the shell restores it. overflow:hidden is
     retained as belt-and-suspenders for any browser that doesn't apply
     the position rule cleanly. left/right=0 keeps the body laid out at
     viewport width once it leaves normal flow. */
  body.comms-shell-body-open {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }
}

.comms-shell-closed {
  pointer-events: none;
}
.comms-shell-open {
  pointer-events: auto;
}

/* ----------------------------------------------------------------
   Header (tabs + close)
   ---------------------------------------------------------------- */
.comms-shell-header {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
  min-height: 42px;
  padding: 0 8px;
  flex-shrink: 0;
  background: var(--comms-header-bg);
}
.comms-shell-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #222;
  pointer-events: none;
  z-index: 0;
}

/* Mobile: add safe-area padding for notch devices */
@media (max-width: 767px) {
  .comms-shell-header {
    padding-top: max(8px, env(safe-area-inset-top));
  }
}

.comms-shell-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex-wrap: nowrap;
  flex: 1;
  justify-content: center;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  z-index: 1;
}
.comms-shell-tabs::-webkit-scrollbar {
  display: none;
}

.comms-tab {
  background: transparent;
  border: 0;
  color: #898993;
  padding: 0 13px;
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.comms-tab:hover {
  color: #d8d8df;
  background: var(--comms-header-hover-bg);
}
.comms-tab.comms-tab-active {
  color: #fff;
  background: var(--comms-chat-bg);
  margin-bottom: -1px;
  z-index: 2;
}
.comms-tab.comms-tab-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--comms-chat-bg);
}

.comms-tab-badge {
  display: none;
  background: #e74c3c;
  color: #fff;
  font-size: 0.7em;
  padding: 0 5px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: top;
}

.comms-shell-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  text-align: center;
  color: #e4e4ea;
  font-weight: 700;
  font-size: 0.95em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.comms-shell-collapse,
.comms-shell-settings,
.comms-shell-settings-spacer {
  background: transparent;
  border: none;
  color: #888;
  width: 28px;
  min-height: 42px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex: 0 0 28px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.comms-shell-settings-spacer {
  cursor: default;
  pointer-events: none;
}
.comms-shell-collapse:hover,
.comms-shell-settings:hover,
.comms-shell-collapse:focus,
.comms-shell-settings:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
  outline: none;
}

/* ----------------------------------------------------------------
   Scope context bar (objective only)
   ---------------------------------------------------------------- */
.comms-scope-context {
  flex-shrink: 0;
  border-bottom: 1px solid #1a1a2e;
}

/* ----------------------------------------------------------------
   Objective bar (hidden for Global scope via JS)
   ---------------------------------------------------------------- */
.comms-shell-objective {
  padding: 5px 12px;
  background: var(--comms-header-bg);
  font-size: 0.85em;
}
.comms-shell-objective.comms-objective-empty {
  padding: 3px 12px;
  opacity: 0.5;
}
.comms-shell-objective.comms-objective-empty .comms-objective-text {
  font-style: italic;
  font-size: 0.9em;
}

.comms-objective-display {
  display: flex;
  align-items: center;
  gap: 6px;
}

.comms-objective-icon {
  color: #e67e22;
}

.comms-objective-text {
  flex: 1;
  color: #bbb;
}

.comms-objective-edit-btn {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0 4px;
}
.comms-objective-edit-btn:hover {
  color: #3498db;
}

.comms-objective-form {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.comms-objective-input {
  flex: 1;
  min-width: 120px;
  background: #111;
  border: 1px solid #333;
  color: #ccc;
  padding: 3px 6px;
  font-size: 0.9em;
  border-radius: 3px;
}
.comms-objective-save,
.comms-objective-clear,
.comms-objective-cancel {
  background: #1a1a2e;
  border: 1px solid #333;
  color: #ccc;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.85em;
}
.comms-objective-save:hover { border-color: #3498db; color: #3498db; }
.comms-objective-clear:hover { border-color: #e74c3c; color: #e74c3c; }

/* ----------------------------------------------------------------
   Message stream (dominant area)
   ---------------------------------------------------------------- */
.comms-shell-messages {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.comms-chat-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.comms-shell--settings-open .comms-chat-main {
  display: none;
}

.comms-shell--settings-open .comms-shell-tabs,
.comms-shell--settings-open .comms-scope-context,
.comms-shell--settings-open .comms-shell-compose,
.comms-shell--settings-open .comms-shell-status,
.comms-shell--settings-open .comms-shell-settings {
  display: none !important;
}

.comms-settings-pane {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--comms-chat-bg);
}

.comms-settings-pane[hidden] {
  display: none !important;
}

.comms-settings-pane-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid #262838;
  background: var(--comms-header-bg);
}

.comms-settings-pane-back {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #c8c9d2;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comms-settings-pane-back:hover,
.comms-settings-pane-back:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

.comms-settings-pane-title {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  color: #e4e4ea;
  flex: 1;
  min-width: 0;
}

.comms-settings-pane-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 16px;
  -webkit-overflow-scrolling: touch;
}

/* In-chat user card (anchored to message pane; does not use Bootstrap modal / body scroll-lock) */
.comms-user-card-layer {
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  overflow: visible;
}

.comms-user-card {
  /* absolute: fixed breaks inside transformed #comms-shell (drawer uses transform) + overflow:hidden clips */
  position: absolute;
  display: none;
  width: min(300px, calc(100vw - 24px));
  max-width: min(300px, calc(100vw - 24px));
  background: #11121b;
  border: 1px solid #303241;
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  text-align: left;
  z-index: 30;
}

.comms-user-card:not([hidden]) {
  display: block;
}

.comms-user-card-inner {
  position: relative;
  padding: 12px 14px 14px;
}

.comms-user-card-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #9b9ca7;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.comms-user-card-close:hover,
.comms-user-card-close:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}

/* Same inline rhythm as chat lines: seals immediately before the identity name */
.comms-user-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0 28px 10px 0;
}

.comms-user-card-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.05em;
  font-weight: 700;
  color: #3498db;
  line-height: 1.25;
  word-break: break-word;
}

.comms-user-card-seals {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  flex-shrink: 0;
}

.comms-user-card-seals.hidden {
  display: none !important;
}

.comms-user-card-seals .comms-msg-seal {
  vertical-align: middle;
}

.comms-user-card-self-settings {
  display: none;
  margin: 0 0 12px;
}

.comms-user-card-self-settings .btn {
  margin-bottom: 0;
}

.comms-user-card-readonly-note {
  display: none;
  margin: 0 0 12px;
  font-size: 0.82em;
  color: #b8b9c2;
  line-height: 1.35;
}

.comms-user-card--self .comms-user-card-readonly-note {
  display: none;
}

.comms-user-card--readonly:not(.comms-user-card--self) .comms-user-card-actions {
  display: none;
}

.comms-user-card--readonly:not(.comms-user-card--self) .comms-user-card-readonly-note {
  display: block;
}

.comms-user-card--self .comms-user-card-actions {
  display: none;
}

.comms-user-card--self .comms-user-card-self-settings {
  display: block;
}

.comms-user-card-actions .btn {
  margin-bottom: 7px;
}

.comms-user-card-actions .btn:last-child {
  margin-bottom: 0;
}

/* Narrow shell / mobile: bottom sheet within message column */
.comms-user-card.comms-user-card--mobile-sheet {
  width: calc(100% - 16px);
  max-width: none;
  left: 8px !important;
  right: 8px;
}

.comms-messages-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 10px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #555866 var(--comms-chat-bg);
}

.comms-messages-list::-webkit-scrollbar {
  width: 8px;
}

.comms-messages-list::-webkit-scrollbar-track {
  background: var(--comms-chat-bg);
}

.comms-messages-list::-webkit-scrollbar-thumb {
  background: #555866;
  border: 2px solid var(--comms-chat-bg);
  border-radius: 8px;
}

.comms-messages-list::-webkit-scrollbar-thumb:hover {
  background: #737684;
}

.comms-message {
  position: relative;
  color: #d7d7df;
  font-size: 0.9em;
  line-height: 1.35;
  padding: 2px 28px 3px 0;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.comms-message + .comms-message { margin-top: 2px; }

/* Animation for messages arriving via the message-poll catch-up (other
   users posting live, or several messages flushing in after the browser
   tab returns from being hidden). JS adds .comms-message-incoming on
   the appended element and removes it on animationend, so each row
   fades in once and never animates again. Keep the duration short and
   the transform subtle — chat scrollback should feel "live" not
   "decorated." Pending self-sends and bulk re-renders deliberately
   skip this class so the user's own outgoing messages feel instant
   and scope-switch initial paints don't flicker per-row. */
@keyframes comms-msg-incoming {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.comms-message.comms-message-incoming {
  animation: comms-msg-incoming 180ms ease-out;
}

/* The .comms-message-pending class is still applied in JS as a DOM hook
   for findPendingMessageEl / replacePendingMessage, but it intentionally
   carries no visual styling. The optimistic row should be visually
   indistinguishable from a confirmed message — the goal of the optimistic
   render is to make the send feel instant, and a faded "pending" state
   would communicate uncertainty about whether the message landed. The
   server's response either replaces the pending DOM with the confirmed
   row (success) or removes it and surfaces a status message (failure);
   either way, the user sees a definitive outcome rather than a faded
   "in flight" state. */

.comms-msg-actions-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: #161621;
  color: #8f9099;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  line-height: 20px;
  padding: 0;
}
.comms-message:hover .comms-msg-actions-btn,
.comms-message:focus-within .comms-msg-actions-btn {
  opacity: 1;
}
.comms-msg-actions-btn:hover,
.comms-msg-actions-btn:focus {
  color: #fff;
  border-color: #333849;
  outline: none;
}

/* Touch / long-press path. Devices without hover (phones, most
   tablets) can't use the desktop hover affordance, so JS detects a
   long-press on the message body and opens the report modal
   directly — there's no kebab reveal step on touch.

   Both iOS suppressions below are required:
   - -webkit-touch-callout: none stops the system "Copy / Look Up /
     Share" popup from appearing.
   - user-select: none stops iOS from starting a text-selection
     range when our long-press fires. Without this, on iOS Safari
     the system selects the long-pressed message text (and often
     extends the range across adjacent rows) at the same moment
     our modal opens — the user sees both the modal and a giant
     selection range plus iOS's "Copy / Translate / Speak" toolbar.

   Hide the kebab entirely on touch: there is no hover, and
   :focus-within can sticky-fire from a tap-into-the-row, briefly
   flashing the kebab next to the just-opened modal. The desktop
   hover rule still works on devices that report (hover: hover).

   Long-press emphasis: JS adds .comms-message--long-pressing to
   the target row at the moment the timer fires (i.e. the same
   moment the report modal opens), and clears it when the modal
   closes. Mirrors Twitch / iOS native context-menu UX where the
   selected item is visually distinguished while the action menu
   is shown.

   Gated to (hover: none) so desktop chat keeps normal text
   selection — desktop users can still highlight and copy messages.
   Trade-off accepted: touch users can no longer select chat text
   for copying. If that becomes a problem, the path is to add a
   "Copy text" action to the report flow, not to relax these rules. */
@media (hover: none) {
  .comms-messages-list .comms-message {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .comms-messages-list .comms-msg-actions-btn {
    display: none;
  }
  .comms-message.comms-message--long-pressing {
    background: var(--comms-header-hover-bg);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(120, 145, 200, 0.25);
  }
}

.comms-msg-actions-menu {
  position: absolute;
  top: 22px;
  right: 0;
  z-index: 2;
  min-width: 150px;
  padding: 4px;
  background: #262632;
  border: 1px solid #3a3a46;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}
.comms-msg-actions-menu button {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: #e4e4ea;
  text-align: left;
  padding: 6px 8px;
  border-radius: 3px;
  font-size: 0.9em;
}
.comms-msg-actions-menu button:hover,
.comms-msg-actions-menu button:focus {
  background: #333342;
  outline: none;
}
.comms-msg-actions-menu .fa {
  margin-right: 6px;
  color: #e6a817;
}

.comms-report-modal,
.comms-identity-modal {
  z-index: 1090;
}
.modal-backdrop.comms-shell-modal-backdrop {
  z-index: 1085;
}
.comms-report-modal .modal-content,
.comms-identity-modal .modal-content {
  background: #11121b;
  color: #e2e2ea;
  border: 1px solid #303241;
}
.comms-report-modal .modal-header,
.comms-report-modal .modal-footer,
.comms-identity-modal .modal-header,
.comms-identity-modal .modal-footer {
  border-color: #303241;
}
.comms-report-modal .close,
.comms-identity-modal .close {
  color: #fff;
  opacity: 0.75;
}
.comms-report-intro {
  margin-bottom: 10px;
  color: #c8c9d2;
}
.comms-report-preview {
  margin: 0 0 14px;
  padding: 10px;
  background: #080912;
  border: 1px solid #2a2c39;
  border-radius: 4px;
}
.comms-report-preview-author {
  color: #3498db;
  font-weight: 700;
  margin-bottom: 4px;
}
.comms-report-preview-text {
  color: #e0e0e6;
  overflow-wrap: anywhere;
}
.comms-report-modal .form-control {
  background: #0b0c13;
  border-color: #333849;
  color: #e2e2ea;
}
.comms-report-mute-note {
  color: #9b9ca7;
  margin-top: 8px;
  margin-bottom: 0;
}
.comms-report-modal-error {
  margin-top: 10px;
  color: #e74c3c;
  font-weight: 600;
}

.comms-settings-section h5 {
  color: #e4e4ea;
  font-weight: 700;
  margin: 0 0 10px;
}
.comms-settings-empty {
  color: #9b9ca7;
  margin: 0;
}

.comms-muted-author-group {
  padding: 10px 0;
  border-top: 1px solid #262838;
}
.comms-muted-author-group:first-child {
  border-top: none;
}
.comms-muted-author-group-title {
  font-weight: 700;
  color: #3498db;
  font-size: 1em;
  margin: 0 0 8px;
  word-break: break-word;
  line-height: 1.25;
}
.comms-muted-author-channel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 6px 12px;
}
.comms-muted-author-channel-row + .comms-muted-author-channel-row {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #1e202c;
}
.comms-muted-author-channel-label {
  color: #9b9ca7;
  font-size: 0.85em;
  min-width: 0;
}
.comms-settings-pane-status {
  margin-top: 10px;
  color: #5fbf7a;
  font-weight: 600;
}

.comms-date-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #8f9099;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 10px 0 7px;
  text-align: center;
}
.comms-date-divider:first-child {
  margin-top: 2px;
}
.comms-date-divider::before,
.comms-date-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid #20202b;
}
.comms-date-divider span {
  white-space: nowrap;
}

.comms-msg-time {
  color: #777a86;
  font-size: 0.9em;
  margin-right: 5px;
  white-space: nowrap;
}

.comms-msg-seal {
  font-size: 0.9em;
  margin-right: 3px;
  vertical-align: -1px;
}
img.comms-msg-seal {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  vertical-align: -2px;
}

.comms-msg-author {
  color: #3498db;
  font-weight: 700;
}

button.comms-msg-author-trigger.comms-msg-author {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  text-decoration: none;
}

button.comms-msg-author-trigger.comms-msg-author:hover {
  color: #5dade2;
}

button.comms-msg-author-trigger.comms-msg-author:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

.comms-msg-colon {
  color: #888b96;
  font-weight: 700;
  margin-right: 2px;
}

.comms-msg-body {
  color: #e0e0e6;
}

.comms-loading,
.comms-empty {
  color: #555;
  text-align: center;
  padding: 20px 0;
}

/* ----------------------------------------------------------------
   Compose bar
   ---------------------------------------------------------------- */
.comms-shell-compose {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #222;
  flex-shrink: 0;
  padding: 6px 12px 8px;
  background: var(--comms-header-bg);
}

.comms-compose-context {
  font-size: 0.75em;
  color: #9698a3;
  padding: 0 0 4px;
  font-weight: 600;
}
.comms-compose-context strong {
  color: #e6a817;
}

.comms-compose-row {
  display: flex;
  gap: 0;
}

/* Mobile: respect bottom safe area for home indicator */
@media (max-width: 767px) {
  .comms-shell-compose {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
}

.comms-compose-input {
  flex: 1;
  background: #111;
  border: 1px solid #333;
  border-right: none;
  color: #ccc;
  padding: 6px 10px;
  font-size: 0.9em;
  border-radius: 3px 0 0 3px;
  outline: none;
}
.comms-compose-input:focus {
  border-color: #3498db;
}

.comms-compose-send {
  background: #3498db;
  border: 1px solid #3498db;
  color: #fff;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.9em;
  border-radius: 0 3px 3px 0;
}

/* Mobile compose overrides — placed AFTER the base rules above so source
   order in the cascade puts these last for matching viewports.
   IMPORTANT: input font-size must be >= 16px in CSS pixels to prevent
   iOS Safari's auto-zoom-on-focus. When the computed font-size is
   below 16px, iOS zooms the page on input tap (and never zooms back),
   pushing the Send button out of the visual viewport. Using 16px
   explicitly (not em) avoids inheriting the shell's smaller base. */
@media (max-width: 767px) {
  .comms-compose-input {
    font-size: 16px;
    padding: 10px 12px;
    min-height: 44px;
  }
  .comms-compose-send {
    font-size: 16px;
    padding: 10px 18px;
    min-height: 44px;
    min-width: 64px;
    font-weight: 600;
  }
  .comms-objective-input {
    font-size: 16px;
    min-height: 44px;
  }
}
.comms-compose-send:hover {
  background: #2980b9;
}

/* Cooldown indicator: when the Send button is in its post-send rate-limit
   window, JS adds .comms-compose-send-cooldown and sets the
   --comms-cooldown-fill custom property to a percentage (100% just after
   send, 0% when cooldown expires). The pseudo-element renders a thin bar
   along the bottom whose width tracks the fill percent — visually, the
   bar depletes as the user gets closer to being able to send again. The
   100ms width transition smooths the 100ms JS tick so the bar drains
   continuously rather than stepping. The disabled-state opacity reduction
   is the secondary signal — together they say "wait" without text. */
.comms-compose-send {
  position: relative;
  overflow: hidden;
}
.comms-compose-send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.comms-compose-send-cooldown::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--comms-cooldown-fill, 100%);
  background: rgba(255, 255, 255, 0.75);
  pointer-events: none;
  transition: width 100ms linear;
}

/* ----------------------------------------------------------------
   Status / read-only
   ---------------------------------------------------------------- */
.comms-shell-status {
  flex-shrink: 0;
  padding: 0 12px;
}
.comms-status-msg {
  color: #e74c3c;
  font-size: 0.8em;
  padding: 4px 0;
}
.comms-status-success {
  color: #5fbf7a;
}
.comms-status-error {
  color: #e74c3c;
}
.comms-read-only {
  color: #888;
  font-size: 0.8em;
  text-align: center;
  padding: 8px 0;
}

/* ----------------------------------------------------------------
   Launcher badges (in top nav)
   ---------------------------------------------------------------- */
.comms-launcher {
  cursor: pointer;
  position: relative;
}

.comms-launcher-badge {
  display: none;
  position: absolute;
  top: 6px;
  right: 2px;
  background: #e74c3c;
  color: #fff;
  font-size: 0.6em;
  padding: 0 4px;
  border-radius: 8px;
  line-height: 1.4;
  min-width: 14px;
  text-align: center;
}

/* ----------------------------------------------------------------
   Silence banner — replaces compose when the viewer is silenced in
   the active scope. Persistent (not toast) so the user can read the
   reason and expiry while deciding what to do. Tabs show a subtle
   dot when their scope has an active silence on the viewer.
   ---------------------------------------------------------------- */
.comms-shell-silence-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(180, 120, 40, 0.12);
  color: #e8c98c;
  font-size: 13px;
  line-height: 1.4;
}

.comms-shell-silence-icon {
  flex: 0 0 auto;
  color: #d39d4a;
  font-size: 16px;
  margin-top: 1px;
}

.comms-shell-silence-body {
  flex: 1 1 auto;
  min-width: 0;
}

.comms-shell-silence-headline {
  font-weight: 600;
  color: #f2dca0;
  word-break: break-word;
}

.comms-shell-silence-reason {
  margin-top: 4px;
  color: #d8c69a;
  word-break: break-word;
}

.comms-tab.comms-tab-silenced::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: #d39d4a;
  vertical-align: middle;
}

/* ----------------------------------------------------------------
   Utility
   ---------------------------------------------------------------- */
.hidden { display: none !important; }