/* ════════════════════════════════════════════════════════════════════════
   MESSAGES — two-pane Messenger layout (desktop) + Nebula backdrop.

   Loaded LAST (after cinema-overrides.css) so these overrides win.
   - Mobile (<1024px): the existing single-view swap is UNTOUCHED (list ↔ thread).
   - Desktop (≥1024px): list + conversation become ONE two-pane screen (the mock).
   - The Nebula is a TAMED ambient backdrop scoped to the chat surface; ALL text
     sits on solid glass / solid bubbles → WCAG AA+ holds at any backdrop intensity.
   Self-contained — delete this file + its <link> + the JS module to fully revert.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Nebula backdrop scoped inside the chat surface ── */
.chat-screen { position: relative; }
#messages-nebula-canvas { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
.chat-screen__view, .chat-screen__empty { position: relative; z-index: 1; }

/* Glass chrome so names / search / headers / composer stay legible over the nebula. */
.chat-screen__list { background: rgba(8, 12, 20, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.chat-screen__head { background: rgba(6, 10, 18, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.chat-compose      { background: rgba(6, 10, 18, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Thread pane: a translucent wash lets the nebula breathe through while keeping any
   bare text legible (message bubbles are already solid → AA on their own). */
.chat-screen__thread { background: linear-gradient(rgba(3, 5, 11, 0.34), rgba(3, 5, 11, 0.52)); }

/* Empty state hidden by default everywhere (only the desktop two-pane shows it). */
.chat-screen__empty { display: none; }

/* ── DESKTOP: one two-pane screen (conversation list + conversation, side by side) ── */
@media (min-width: 1024px) {
  #app-shell .main-content > .content-section.chat-screen.active { flex-direction: row; align-items: stretch; }
  .chat-screen__view { max-width: none; align-self: stretch; }
  .chat-screen__list  { flex: 0 0 340px; max-width: 340px; border-right: 1px solid rgba(255, 255, 255, 0.08); }
  .chat-screen__list[hidden] { display: flex !important; }     /* the list is ALWAYS visible */
  .chat-screen__thread { flex: 1 1 auto; }
  #chat-list-back, #chat-thread-back { display: none; }         /* mobile-only nav — not needed side-by-side */

  /* Right pane shows the empty state when no conversation is open (thread hidden). */
  .chat-screen__empty { flex: 1 1 auto; align-items: center; justify-content: center; text-align: center; padding: 40px; }
  .chat-screen__thread[hidden] ~ .chat-screen__empty { display: flex; }
  .chat-screen__empty-inner { max-width: 320px; color: var(--text-tertiary, #5f6f86); }
  .chat-screen__empty-inner svg { color: var(--accent-primary, #64d2ff); opacity: 0.65; margin-bottom: 14px; }
  .chat-screen__empty-inner h3 { font-size: 1.15rem; color: var(--text-secondary, #9aa8bd); margin: 0 0 6px; font-weight: 700; }
  .chat-screen__empty-inner p { font-size: 0.85rem; line-height: 1.55; margin: 0; }
  .chat-screen__empty-inner b { color: var(--text-primary, #e7eef7); }
}

@media (prefers-reduced-motion: reduce) {
  #messages-nebula-canvas { /* the JS freezes time; nothing extra needed */ }
}

/* ── Shared backdrop control: ARG·U·S wordmark + intensity slider (top-right).
   Used by BOTH the Argus aurora (#argus-panel) and the Messages nebula (.chat-screen).
   Same position on both surfaces. Persisted to localStorage by each module. ── */
.bfield-ctrl {
  position: absolute; top: 10px; right: 14px; z-index: 6;
  display: flex; align-items: center; gap: 11px;
  padding: 6px 12px 6px 14px; border-radius: 999px;
  background: rgba(6, 10, 18, 0.6); border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  pointer-events: auto;
}
.bfield-wm { font: 800 12px/1 ui-monospace, monospace; letter-spacing: 3px; color: #e9f0f8; user-select: none; }
.bfield-wm b { color: #5ad6ff; }
.bfield-range { width: 94px; accent-color: #5ad6ff; cursor: pointer; }
@media (max-width: 600px) { .bfield-ctrl { gap: 8px; padding: 5px 10px; } .bfield-range { width: 60px; } }

/* ── Navbar backdrop-intensity slider (sits to the LEFT of the account). One control
   for the active surface's living backdrop: aurora on Argus, nebula on Messages. ── */
.cp-brand-name b { color: #5ad6ff; font-weight: inherit; }   /* the special cyan "U" */
.bfield-nav { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px;
  padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09); }
.bfield-nav__icon { color: var(--text-tertiary, #5f6f86); flex: none; }
.bfield-nav .bfield-range { width: 88px; vertical-align: middle; }
/* Only meaningful where a living backdrop exists: overview (Argus), chat (Messages), and the workspace
   surfaces (Inbox / My Briefs / Dispatches) which all mount the same ArgusConceptField aurora. Same navbar
   slot/level on every one of them. */
body:not([data-section="overview"]):not([data-section="chat"]):not([data-section="activity-inbox"]):not([data-section="my-briefs"]):not([data-section="dispatches"]) #backdrop-intensity-ctrl { display: none; }
@media (max-width: 640px) { .bfield-nav { gap: 6px; padding: 4px 8px; margin-right: 4px; } .bfield-nav .bfield-range { width: 56px; } }

/* ── Chat destination: the right (empty) pane becomes the ARGUS chat — the SAME session as
   the War Room / Argus tab. chat-argus.js moves the single #argus-workspace node here when
   no person-DM is open; opening a DM lets its thread view cover this pane. ── */
body.chat-argus-mounted #chat-empty-pane { align-items: stretch; justify-content: stretch; text-align: left; padding: 0; overflow: hidden; background: linear-gradient(rgba(3, 5, 11, 0.62), rgba(3, 5, 11, 0.80)); }
/* Force the relocated Argus chat visible + full-bleed, overriding shell.css's
   `body:not([data-section="overview"]) .argus-panel { display:none }` (same as the War Room). */
body.chat-argus-mounted #chat-empty-pane #argus-workspace { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100%; height: 100%; background: transparent; }
body.chat-argus-mounted #chat-empty-pane .argus-panel { display: grid !important; height: 100%; padding-top: 12px; }
body.chat-argus-mounted #chat-empty-pane #argus-panel-close { display: none !important; }
body.chat-argus-mounted #chat-empty-pane #argus-rightpanel { display: none !important; }