/* ============================================================
   gap-messages-edge-states-2026-05-05 — styles.css
   PURE MUTATION states. No new components.

   Each state morphs the existing messages page by changing
   element values, toggling is-active classes, and swapping
   which conversation/thread/context is shown. This stylesheet
   only contains:
     1. The .state-only visibility primitive
     2. body[data-state="empty"] hide-everything-but-empty rules
     3. Two micro-rules for muted disabled composer + failed
        message-bubble status, both still on existing elements

   Anything fancier than this is an indication the state is
   trying to invent new design — push back and use existing
   components instead.
   ============================================================ */

/* ─── Visibility primitive ─────────────────────────────────── */
.state-only { display: none !important; }
body[data-state="empty"] .state-only--empty { display: revert !important; }


/* ─── Empty state: hide all conversation/thread/context content,
       let the existing #messages-empty + the two state-only
       placeholders carry the empty story ─────────────────────── */
body[data-state="empty"] .conversation-list,
body[data-state="empty"] .conversation-thread,
body[data-state="empty"] .conversation-context {
  display: none !important;
}
/* The existing #messages-empty card is hidden in baseline; reveal it. */
body[data-state="empty"] #messages-empty {
  display: block !important;
}
body[data-state="empty"] #messages-empty[hidden] {
  /* Browsers respect display:block above the [hidden] attr — extra safety */
}


/* ─── Role-closed: composer is still rendered but visually
       disabled (pure attribute-driven state, no new elements) ── */
body[data-state="role-closed"] .composer textarea[disabled] {
  background: rgba(1, 56, 44, 0.04);
  color: rgba(1, 56, 44, 0.45);
  cursor: not-allowed;
}
body[data-state="role-closed"] .composer__send {
  opacity: 0.4;
  pointer-events: none;
}


/* ─── Message-failed: the existing .message-bubble__status text
       gets data-failed=true; tint it red. No new elements. ──── */
.message-bubble__status[data-failed="true"] {
  color: #DC2626;
  font-weight: 600;
}

/* ============================================================
   MessagesStateStrip — prototype-only floating chip strip
   Pinned bottom-right. Lets reviewers flip between the 9
   designed states without hand-editing ?state=<slug>.
   Color tokens come per-chip via --chip-accent inline.
   ============================================================ */
.messages-state-strip {
  position: fixed;
  bottom: 18px;
  right: 18px;
  left: 18px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(1, 56, 44, 0.10);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(1, 56, 44, 0.10), 0 1px 0 rgba(1, 56, 44, 0.04);
  font-size: 11.5px;
  max-width: max-content;
  margin-left: auto;
}
.messages-state-strip__label {
  flex-shrink: 0;
  padding: 0 4px 0 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(1, 56, 44, 0.5);
}
.messages-state-strip__chips {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.messages-state-strip__chips::-webkit-scrollbar { display: none; }
.messages-state-strip__chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 500;
  color: rgba(1, 56, 44, 0.72);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  white-space: nowrap;
}
.messages-state-strip__chip:hover {
  background: color-mix(in srgb, var(--chip-accent, #059669) 8%, transparent);
  color: color-mix(in srgb, var(--chip-accent, #059669) 90%, #01382c);
}
.messages-state-strip__chip.is-active {
  background: var(--chip-accent, #059669);
  color: #ffffff;
  border-color: var(--chip-accent, #059669);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--chip-accent, #059669) 35%, transparent);
}
.messages-state-strip__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip-accent, #059669);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-accent, #059669) 20%, transparent);
  flex-shrink: 0;
}
.messages-state-strip__chip.is-active .messages-state-strip__dot {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

@media (max-width: 720px) {
  .messages-state-strip {
    bottom: 12px;
    right: 12px;
    left: 12px;
    padding: 6px 8px;
    gap: 8px;
  }
  .messages-state-strip__label { display: none; }
  .messages-state-strip__chip { padding: 5px 10px; font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════
   Responsive squeeze: between ~1120px and ~1300px the 3-column
   messages layout (conversation-list + active thread + right
   context sidebar) starts strangling the message bubbles. Hide
   the right context sidebar below 1300px so the thread keeps
   readable width. Below 1120px the parent breakpoint already
   drops to a single block — this only handles the in-between.
   (Ticket: t1778229614515)
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 1120px) and (max-width: 1299px) {
  body[data-page="messages"] .page-grid--messages {
    grid-template-columns: minmax(300px, 1.05fr) minmax(0, 1.6fr);
  }
  body[data-page="messages"] .page-grid--messages > .messages-detail {
    display: none;
  }
}

/* Make the active message bubble fluid — never wider than its column,
   no overflow at any viewport. Pairs with the responsive squeeze above. */
body[data-page="messages"] .message-bubble {
  max-width: min(640px, 100%);
}
body[data-page="messages"] .conversation-thread,
body[data-page="messages"] .messages-pane,
body[data-page="messages"] .messages-pane__body,
body[data-page="messages"] .thread-scroll {
  min-width: 0;
}

/* ════════════════════════════════════════════════════════════════
   Context-sidebar toggle on the filter bar — when active, hide the
   right .messages-detail aside and let the conversation column +
   active thread expand to fill the freed space.
   (Ticket: t1778250338630)
   ──────────────────────────────────────────────────────────────── */
body[data-page="messages"] .messages-context-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
body[data-page="messages"] .messages-context-toggle.is-active {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
  border-color: rgba(5, 150, 105, 0.28);
}

/* Desktop only — collapsing the context sidebar in the in-between
   1120-1299px range is a no-op because that range already hides
   .messages-detail (see the responsive squeeze block above). On
   ≥1300px screens, fall back from 3-col to 2-col grid. */
@media (min-width: 1300px) {
  body[data-page="messages"] .page-grid--messages.messages-context-collapsed {
    grid-template-columns: minmax(300px, 1.05fr) minmax(0, 1.6fr);
  }
  body[data-page="messages"] .page-grid--messages.messages-context-collapsed > .messages-detail {
    display: none;
  }
}

/* Conversation-context timeline — replaces inline-styled dots that
   were misaligned. Grid-based row keeps the dot centered against
   the strong title's first line at any zoom. (Ticket: t1778254330919) */
body[data-page="messages"] .ctx-timeline-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding-top: 4px;
}
body[data-page="messages"] .ctx-timeline-row + .ctx-timeline-row {
  padding-top: 8px;
}
body[data-page="messages"] .ctx-timeline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* Vertically centre against the title (font-size 0.78rem * line-height 1.4
     ≈ 17.5px → centre at 8.75px → top offset (8.75 - 3) ≈ 6px) */
  margin-top: 6px;
  justify-self: center;
  flex-shrink: 0;
}
body[data-page="messages"] .ctx-timeline-dot--active { background: #059669; }
body[data-page="messages"] .ctx-timeline-dot--pending { background: rgba(1, 56, 44, 0.12); }
body[data-page="messages"] .ctx-timeline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body[data-page="messages"] .ctx-timeline-text strong {
  font-size: 0.78rem;
  line-height: 1.4;
  font-weight: 600;
  color: #01382C;
}
body[data-page="messages"] .ctx-timeline-text span {
  font-size: 0.72rem;
  line-height: 1.4;
  color: rgba(1, 56, 44, 0.55);
}

/* Empty thread-pane card needs visible padding from its outer pane —
   was sticking flush to the .messages-pane edges. Bump the pane's
   inner padding and give the empty card a breathing margin so the
   empty illustration/copy floats inside its container.
   (Ticket: t1778261394007) */
body[data-state="empty"] .messages-pane {
  padding: 28px;
}
body[data-state="empty"] #thread-pane-empty,
body[data-state="empty"] #context-aside-empty {
  margin: 0 auto;
  max-width: 480px;
}
body[data-state="empty"] #thread-pane-empty .surface-card__body,
body[data-state="empty"] #context-aside-empty .surface-card__body {
  padding: 32px 28px;
}