/* ChatSurface composer — shared across every host surface (workboard, the
   agentic-AI panel, univchat, lx-univai, hospital/health/patient dashboards).
   Each host's own CSS may already point real theme tokens at these names
   (see healtharea/assets/dashboard.css, univchat/univchat.css, etc. for
   .hc-cs-body overrides); the --cs-* variables below are this component's
   OWN self-contained fallback theme, so a host that does nothing still gets
   a coherent, correctly-contrasted light/dark look instead of stray
   hardcoded light-only colours bleeding through a dark glass panel. */

/* composer.js appends .cs-composer into the container, then (if transcript_render
   is on) transcript.js appends .cs-transcript after it into the same container —
   so without this, the input box renders ABOVE the message list in every host
   that mounts both into one flex column. order fixes it universally; it's a
   no-op wherever the parent isn't display:flex. */
.cs-transcript { order: 1; }
.cs-composer { order: 2; }

.cs-composer {
  --cs-text:        #1c1a17;
  --cs-text-muted:  #6b6b6b;
  --cs-border:      #d8d8d8;
  --cs-surface:     #ffffff;
  --cs-surface-2:   #f1f1f1;
  --cs-surface-3:   #e6e6e6;
  --cs-accent:      #1b6fd6;
  --cs-accent-text: #ffffff;
  --cs-danger:      #d63b3b;
  --cs-danger-soft: #ffb4b4;
  --cs-focus:       rgba(27, 111, 214, 0.45);

  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  color: var(--cs-text);
}

@media (prefers-color-scheme: dark) {
  .cs-composer {
    --cs-text:        rgba(255, 255, 255, 0.92);
    --cs-text-muted:  rgba(255, 255, 255, 0.55);
    --cs-border:      rgba(255, 255, 255, 0.16);
    --cs-surface:     #1b1f27;
    --cs-surface-2:   rgba(255, 255, 255, 0.08);
    --cs-surface-3:   rgba(255, 255, 255, 0.14);
    --cs-accent:      #5b9bf3;
    --cs-accent-text: #0b0d12;
    --cs-danger:      #e58c82;
    --cs-danger-soft: rgba(229, 140, 130, 0.35);
    --cs-focus:       rgba(91, 155, 243, 0.55);
  }
}

/* Explicit site-wide dark toggle (data-theme="dark" on <html>) wins over the
   OS preference, matching every other theme file in this repo. Wrapped in
   :where() so its specificity stays at a single class — a host override like
   themes/meridian/css/univai.css's ".hc-cs-body .cs-composer" (two classes)
   must always win over this generic fallback, regardless of which
   stylesheet loads last. */
:where([data-theme="dark"]) .cs-composer {
  --cs-text:        rgba(255, 255, 255, 0.92);
  --cs-text-muted:  rgba(255, 255, 255, 0.55);
  --cs-border:      rgba(255, 255, 255, 0.16);
  --cs-surface:     #1b1f27;
  --cs-surface-2:   rgba(255, 255, 255, 0.08);
  --cs-surface-3:   rgba(255, 255, 255, 0.14);
  --cs-accent:      #5b9bf3;
  --cs-accent-text: #0b0d12;
  --cs-danger:      #e58c82;
  --cs-danger-soft: rgba(229, 140, 130, 0.35);
  --cs-focus:       rgba(91, 155, 243, 0.55);
}
:where([data-theme="light"]) .cs-composer {
  --cs-text:        #1c1a17;
  --cs-text-muted:  #6b6b6b;
  --cs-border:      #d8d8d8;
  --cs-surface:     #ffffff;
  --cs-surface-2:   #f1f1f1;
  --cs-surface-3:   #e6e6e6;
  --cs-accent:      #1b6fd6;
  --cs-accent-text: #ffffff;
  --cs-danger:      #d63b3b;
  --cs-danger-soft: #ffb4b4;
  --cs-focus:       rgba(27, 111, 214, 0.45);
}

/* Closed by default (composer.js sets [hidden] unless optionsOpen: true) — holds
   the advanced/opt-in controls (agent mode, plan first, trust auto-approve,
   context budget/mode) so the message box isn't buried under checkboxes. */
.cs-options-panel { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.cs-options-panel[hidden] { display: none; }
.cs-options-toggle { font-size: 14px; line-height: 1; }
.cs-options-toggle.is-active { background: var(--cs-surface-3); color: var(--cs-accent); }

.cs-flags-row { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--cs-text-muted); }
.cs-flag { display: inline-flex; align-items: center; gap: 4px; }
.cs-flag input[type="checkbox"] { accent-color: var(--cs-accent); }
.cs-context-budget input {
  width: 80px;
  background: var(--cs-surface);
  color: var(--cs-text);
  border: 1px solid var(--cs-border);
  border-radius: 4px;
  padding: 2px 4px;
}
.cs-context-mode { display: flex; gap: 10px; font-size: 12px; color: var(--cs-text-muted); }

.cs-starter-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.cs-input-row { position: relative; display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; }
.cs-input {
  flex: 1 1 80px;
  min-width: 80px;
  resize: none;
  min-height: 32px;
  max-height: 160px;
  padding: 6px 8px;
  background: var(--cs-surface);
  color: var(--cs-text);
  border: 1px solid var(--cs-border);
  border-radius: 6px;
  font: inherit;
}
.cs-input::placeholder { color: var(--cs-text-muted); }
.cs-input:focus-visible {
  outline: 2px solid var(--cs-focus);
  outline-offset: 1px;
}

.cs-btn {
  flex-shrink: 0;
  border: 1px solid transparent;
  background: var(--cs-surface-2);
  color: var(--cs-text);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}
.cs-btn:hover { background: var(--cs-surface-3); }
.cs-btn:disabled { opacity: 0.5; cursor: default; }
.cs-mic-active { background: var(--cs-danger-soft); }
.cs-send-btn { background: var(--cs-accent); color: var(--cs-accent-text); }
.cs-send-btn:hover { background: var(--cs-accent); filter: brightness(1.08); }
.cs-stop-btn { background: var(--cs-danger); color: #fff; }
.cs-stop-btn:hover { background: var(--cs-danger); filter: brightness(1.08); }

.cs-attach-preview { display: flex; gap: 6px; flex-wrap: wrap; }
.cs-attach-chip {
  background: var(--cs-surface-2);
  color: var(--cs-text);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
}
.cs-attach-remove { border: none; background: none; color: var(--cs-text-muted); cursor: pointer; margin-left: 4px; }
.cs-attach-remove:hover { color: var(--cs-danger); }

.cs-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 4px;
  width: min(320px, 100%);
  z-index: 20;
  background: var(--cs-surface);
  color: var(--cs-text);
  border: 1px solid var(--cs-border);
  border-radius: 4px;
  max-width: 320px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.cs-autocomplete-opt { padding: 4px 8px; cursor: pointer; font-size: 12px; }
.cs-autocomplete-opt.cs-active, .cs-autocomplete-opt:hover { background: var(--cs-surface-2); }