/* shell.css — Task 9 reskin: header, sidebar chat list, credits/model
 * chips, and the exhaustion sign-in modal. Loaded after style.css/
 * harness.css/media-voice.css so its rules win the cascade on equal-
 * specificity id/class selectors those files already own (#messages,
 * #input-area, .sidebar-section-label). Uses only --hf-* tokens already on
 * the page (handfish tokens.css) plus classes those three files already
 * define (.hf-btn family, .hf-label, .harness-empty, .hf-scrollbar), same
 * discipline harness.css documents for itself.
 *
 * Design intent (Razor is blunt, precise, no decoration): the terminal
 * theme already gives every element hard rectangular edges (--hf-radius-sm
 * is 0) and all-monospace type. This file leans into that rather than
 * fighting it — no rounded pills, no gradients, no drop shadows beyond what
 * the theme's own tokens already define. The one deliberate signature
 * touch is the chat list: active/hover rows read like a selected line in a
 * terminal file picker (a lit left rule, not a filled pill), and the
 * credits/model chips render in bracket notation like a CLI status line
 * rather than a rounded badge.
 */

/* ============================================================
 * Header — wordmark, model chip, credits chip, share.
 * ============================================================ */
#chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hf-space-3);
  flex-shrink: 0;
  padding: var(--hf-space-2) var(--hf-space-4);
  background: var(--hf-bg-surface);
  border-bottom: 1px solid var(--hf-border);
  min-height: var(--hf-control-height-lg, 2.25rem);
}

#chat-header-title {
  display: flex;
  align-items: center;
  gap: var(--hf-space-3);
  min-width: 0;
  flex: 1;
}

#chat-header-wordmark {
  font-size: var(--hf-size-sm);
  font-weight: var(--hf-weight-bold);
  text-transform: var(--hf-text-transform-heading);
  letter-spacing: var(--hf-tracking-wide);
  color: var(--hf-accent);
  white-space: nowrap;
}

#chat-header-actions {
  display: flex;
  align-items: center;
  gap: var(--hf-space-2);
  flex-shrink: 0;
}

/* Bracket-notation status readouts (model in use, credits) — a CLI status
 * line, not a rounded badge. Deliberately square (radius-sm is 0 under the
 * terminal theme already; the explicit value here is the fallback for any
 * other theme this shell ever runs under). */
.chip {
  font-family: var(--hf-font-family-mono);
  font-size: var(--hf-size-xs);
  color: var(--hf-text-dim);
  background: var(--hf-bg-elevated);
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius-sm);
  padding: 2px var(--hf-space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

#credits-chip {
  color: var(--hf-text-normal);
}

#credits-chip.exhausted {
  color: var(--hf-red);
  border-color: color-mix(in srgb, var(--hf-red) 45%, var(--hf-border));
}

#share-btn .btn-label {
  margin-left: var(--hf-space-1);
}

/* ============================================================
 * Sidebar — chat list is the hero; New chat sits inline with its label.
 * ============================================================ */
#sidebar-chats .sidebar-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hf-space-2);
}

#new-chat-btn {
  color: var(--hf-accent);
}

#chats-list {
  list-style: none;
  margin: 0;
  padding: 0 var(--hf-space-2) var(--hf-space-2);
  max-height: 45vh;
  overflow-y: auto;
}

.chat-item {
  position: relative;
  border-radius: var(--hf-radius-sm);
  border-left: 2px solid transparent;
  display: flex;
  align-items: center;
}

.chat-item a {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--hf-space-2);
  padding: var(--hf-space-1) var(--hf-space-2) var(--hf-space-1) calc(var(--hf-space-2) - 2px);
  color: var(--hf-text-normal);
  text-decoration: none;
  font-size: var(--hf-size-sm);
}

.chat-item:hover {
  background: color-mix(in srgb, var(--hf-color-2) 50%, transparent 50%);
}

.chat-item.active {
  border-left-color: var(--hf-accent);
  background: color-mix(in srgb, var(--hf-color-3) 50%, transparent 50%);
}

.chat-item.active a {
  color: var(--hf-text-bright);
  font-weight: var(--hf-weight-semibold);
}

.chat-item-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item-time {
  flex-shrink: 0;
  font-size: var(--hf-size-xs);
  color: var(--hf-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Per-row delete — same .harness-icon-btn affordance the library rows use. */
.chat-item .chat-item-delete {
  flex-shrink: 0;
  margin-right: var(--hf-space-1);
}

#chat-delete-actions {
  display: flex;
  gap: var(--hf-space-2);
  margin-top: var(--hf-space-3);
}

/* ============================================================
 * Centered conversation column (Claude/ChatGPT convention) — the existing
 * per-message renderer in chat.js/style.css is untouched; this just caps
 * and centers the column it already renders into.
 * ============================================================ */
/* The SCROLL CONTAINER spans the full column; only its CONTENT is capped.
 *
 * Capping #messages itself also capped its scrollbar, which then sat at the
 * right edge of the 780px column — floating in the middle of a wide window
 * (measured: right edge at x=990 on a 1200px viewport, 210px short of the
 * page). #messages is the scrolling element, so the cap has to move off it
 * and onto its children to put the scrollbar back on the page edge while the
 * conversation stays the same width in the same place.
 *
 * Direct-child selector, not `.message`: the column also holds thought
 * blocks, system lines, idle thoughts and the DM welcome header, and they
 * must all stay on the same measure. */
#messages {
  width: 100%;
  box-sizing: border-box;
}

#messages > * {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

#input-area {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: var(--hf-radius-sm) var(--hf-radius-sm) 0 0;
}

/* Empty-state welcome for a brand-new chat — CSS-only (:empty), no JS:
 * chat.js always clears #messages to empty before repopulating it from a
 * real 'scrollback' frame, so this only ever shows before that frame lands
 * (a genuinely new chat) or during the sub-second window before ANY frame
 * has landed yet — never fights with real content.
 *
 * #messages is flex:1, so an EMPTY one still fills the column and would
 * push this below the fold. Collapse it to flex:0 while empty (it has no
 * content to show anyway) and let #welcome take the space instead. */
#welcome {
  display: none;
}

#messages:empty {
  flex: 0;
}

#messages:empty + #welcome {
  display: block;
  flex: 1;
  overflow-y: auto;
  padding: var(--hf-space-6) var(--hf-space-4);
}

#welcome-inner {
  max-width: 640px;
  margin: 0 auto;
  color: var(--hf-text-dim);
  font-size: var(--hf-size-sm);
  line-height: 1.6;
}

#welcome-inner h2 {
  margin: 0 0 var(--hf-space-4);
  font-size: var(--hf-size-lg);
  color: var(--hf-text-bright);
}

#welcome-inner p {
  margin: 0 0 var(--hf-space-3);
}

#welcome-inner .welcome-label {
  color: var(--hf-text-bright);
  margin-top: var(--hf-space-4);
}

#welcome-inner ul {
  margin: 0 0 var(--hf-space-3);
  padding-left: var(--hf-space-4);
}

#welcome-inner li {
  margin-bottom: var(--hf-space-2);
}

#welcome-inner strong {
  color: var(--hf-text-bright);
  font-weight: var(--hf-weight-semibold);
}

/* ============================================================
 * Exhaustion modal (402 credits.exhausted -> in-place sign-in).
 * .hf-dialog/.hf-dialog-title/.hf-dialog-body/.hf-dialog-close are
 * handfish's own native-<dialog> primitives (dialogs.css) — this only adds
 * content-specific spacing on top.
 * ============================================================ */
#exhaustion-modal .hf-dialog-body p {
  margin: 0 0 var(--hf-space-3);
  line-height: var(--hf-leading-normal);
}

/* Specificity note: a bare #exhaustion-cta (1 id) loses to the
 * `#exhaustion-modal .hf-dialog-body p` rule above (1 id + 1 class + 1
 * element) under normal cascade rules, since #exhaustion-cta IS a <p> — so
 * this repeats the same ancestor chain rather than reaching for
 * !important. */
#exhaustion-modal .hf-dialog-body p#exhaustion-cta {
  margin-bottom: var(--hf-space-4);
}

#exhaustion-signin-toggle a,
#exhaustion-signin-link {
  color: var(--hf-link-color);
  cursor: pointer;
}

#exhaustion-signin-form {
  display: flex;
  flex-direction: column;
  gap: var(--hf-space-2);
}

#exhaustion-signin-actions {
  display: flex;
  align-items: center;
  gap: var(--hf-space-2);
  margin-top: var(--hf-space-1);
}

#exhaustion-signin-status.error {
  color: var(--hf-red);
}

#exhaustion-signin-status.success {
  color: var(--hf-green);
}

/* ============================================================
 * Mobile / responsive
 * ============================================================ */
@media (max-width: 768px) {
  #chat-header {
    padding: var(--hf-space-2) var(--hf-space-3);
  }

  #input-area {
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  #chat-header-wordmark {
    display: none;
  }

  #model-chip {
    display: none !important;
  }

  #share-btn .btn-label {
    display: none;
  }

  .chip {
    max-width: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-item,
  #new-chat-btn,
  #share-btn {
    transition: none;
  }
}