/* ════════════════════════════════════════════════════════════════════
   styles/chat-agent-mode.css — AGENT MODE (Command Center inside Chat)

   Driven by body.ce-agent-on (toggled by src/chat-agent-mode.js).
   Scoped to the standard chat surface only — story/director modes share
   the DOM and must never see these rules (mode-scoping golden rule).
   ════════════════════════════════════════════════════════════════════ */

/* First-paint guard: agent-mode elements render nothing until the mode
   is on (deferred JS can't hide them before paint). */
body:not(.ce-agent-on) #camControls,
body:not(.ce-agent-on) #camMeter { display: none !important; }

/* ── No cross-bleed between the two tab worlds (per K) ────────────────
   Chat conversation tabs (#ceChatTabs + .ce-tab-pane) belong to normal
   chat; agent mission tabs (#camTabs + .cam-pane) belong to agent mode.
   Each is HIDDEN on the other surface — but both keep RUNNING in the
   background (chat streams write to their captured panes; agent missions
   run server-side), so the user can have a chat tab generating, flip into
   agent mode, run a mission, and flip back with everything still alive. */
body.ce-agent-on #chatEngine #ceChatTabs,
body.ce-agent-on #chatEngine .ce-tab-pane { display: none !important; }
body:not(.ce-agent-on) #chatEngine .cam-pane { display: none !important; }

/* ── Tool buttons: smooth, staggered collapse ──────────────────────── */
body:not(.in-story-mode):not(.director-default-on) #chatEngine .ce-tool-btn {
  transition:
    max-width  .24s cubic-bezier(.4, 0, .2, 1),
    opacity    .18s ease,
    transform  .24s cubic-bezier(.4, 0, .2, 1),
    margin     .24s cubic-bezier(.4, 0, .2, 1),
    padding    .24s cubic-bezier(.4, 0, .2, 1);
  max-width: 48px;
}
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceFileBtn,
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceWebBtn,
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceVoiceModeBtn,
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceSkillBtn {
  max-width: 0 !important;
  opacity: 0 !important;
  transform: scale(.55);
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  pointer-events: none;
  overflow: hidden;
}
/* Stagger so the row folds left-to-right toward the agent button. */
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceFileBtn      { transition-delay: 0s; }
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceWebBtn       { transition-delay: .04s; }
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceVoiceModeBtn { transition-delay: .08s; }
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceSkillBtn     { transition-delay: .12s; }

/* The robot (Tabler) icon carries internal padding, so render it ~22px to
   visually match the 17px paperclip/globe/star siblings. Overrides the
   global `.ce-tool-btn svg { width:17px }` rule. */
#chatEngine #ceAgentModeBtn svg {
  width: 22px !important;
  height: 22px !important;
}

/* Agent button: active glow while the mode is on. */
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceAgentModeBtn {
  background: rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 0 0 1px rgba(255, 255, 255, .22),
    0 0 18px rgba(140, 210, 255, .25);
}

/* ── Meta row: mode selector + History/New chat out; the MODEL PILLS
   STAY (per K — they are the agent brain selector, read at dispatch via
   window.__ceModelAPI). Agent controls + live meter slot in. ────────── */
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceModeSelector,
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceMetaCenter,
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine .ce-meta-actions {
  display: none !important;
}

/* Per-turn cost pill ("∞ FREE" / coin count, the .ce-send-cost wrapper
   inside the send button) is meaningless in agent mode — billing is the
   live mission meter. */
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine .ce-send-cost,
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceSendCost {
  display: none !important;
}

/* Input bar: subtle mission accent while the mode is on. */
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine .ce-input-row {
  box-shadow: 0 0 0 1px rgba(140, 210, 255, .18), 0 6px 30px rgba(0, 0, 0, .25);
}

/* The meta row must stay ONE line in agent mode (per K) — the 8 fixed
   tab chips live in a flex:1 scroller that shrinks/scrolls, so nothing
   else is ever pushed to a second row. */
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine .ce-input-meta {
  flex-wrap: nowrap !important;
}
/* Pin everything EXCEPT the tab scroller at its natural size, and keep the
   model-pill group on one line — only #camTabs (flex:1) absorbs the squeeze.
   Without this, nowrap shrank the pill group and wrapped GPT/Claude/Gemini. */
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #ceModelGroup {
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
}
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #camControls,
body.ce-agent-on:not(.in-story-mode):not(.director-default-on) #chatEngine #camHistory {
  flex: 0 0 auto !important;
}