/* Combat-GPT — chat surface: three-column layout, answer cards, composer and
 * the source viewer panel.
 *
 * The provenance gutter (.answer[data-standing]) is the signature device: the
 * left rule on every answer states its evidential standing before a word is
 * read — brass for cited support, slate for instructor-verified, grey for
 * consulted-only, dashed for no supporting passage, red for an error or a
 * stopped answer.
 */

/* ===================================================================== *
 * 1. Layout
 * ===================================================================== */

.chat-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  height: calc(100vh - var(--header-height) - var(--footer-height));
  min-height: 0;
}
.chat-layout--viewer-open { grid-template-columns: 272px minmax(0, 1fr) 420px; }
.chat-layout--rail-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
.chat-layout--rail-collapsed.chat-layout--viewer-open { grid-template-columns: 52px minmax(0, 1fr) 420px; }

/* ===================================================================== *
 * 2. Left rail
 * ===================================================================== */

.chat-rail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-surface-sunk);
  border-right: 1px solid var(--color-border);
}

.chat-rail__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.chat-rail__collapse {
  flex: none;
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--text-sm);
}
.chat-rail__collapse:hover { background: var(--color-surface-alt); color: var(--color-text); }
.chat-rail__new { flex: 1; }

.chat-rail__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
}
.chat-rail__section-label { margin-bottom: var(--space-2); }

.chat-layout--rail-collapsed .chat-rail__new,
.chat-layout--rail-collapsed .chat-rail__body { display: none; }
.chat-layout--rail-collapsed .chat-rail__top { justify-content: center; padding: var(--space-3) 0; }

.conversation-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--space-5); }
.conversation-list__item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-list__item:hover { background: var(--color-surface); color: var(--color-text); }
.conversation-list__item--active {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
  font-weight: 600;
}

.me-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
}
.me-card__name { font-weight: 650; margin-bottom: 2px; }
.me-card__course { color: var(--color-text-muted); font-size: var(--text-xs); margin-bottom: var(--space-3); }
.me-card__prefs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.me-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.me-card__stat b { display: block; font-size: var(--text-md); font-weight: 650; line-height: 1.2; }
.me-card__stat span { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.3; display: block; }

/* ===================================================================== *
 * 3. Centre column
 * ===================================================================== */

.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.message-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-6) var(--space-5) var(--space-5);
  scroll-behavior: smooth;
}
.message-thread__inner {
  max-width: calc(var(--measure) + 6rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.turn { display: flex; flex-direction: column; gap: var(--space-3); }

.question {
  align-self: flex-end;
  max-width: 85%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-header-bg);
  color: var(--color-header-text);
  border-radius: var(--radius-md) var(--radius-md) 2px var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* --- The answer card and its provenance gutter ------------------------ */

.answer {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border-strong);
  border-radius: 2px var(--radius-md) var(--radius-md) 2px;
  padding: var(--space-4) var(--space-5);
}
.answer[data-standing="supported"] { border-left-color: var(--color-accent); }
.answer[data-standing="verified"] { border-left-color: var(--color-header-bg); }
.answer[data-standing="consulted"] { border-left-color: var(--color-border-strong); }
.answer[data-standing="none"] {
  border-left-style: dashed;
  border-left-color: var(--color-border-strong);
  background: var(--color-surface-sunk);
}
.answer[data-standing="error"] { border-left-color: var(--color-danger); }
.answer[data-standing="stopped"] { border-left-color: var(--color-text-faint); }

.answer__body {
  font-size: var(--text-base);
  line-height: 1.65;
  max-width: var(--measure);
  overflow-wrap: anywhere;
}
.answer__body > :first-child { margin-top: 0; }
.answer__body > :last-child { margin-bottom: 0; }
.answer__body h1, .answer__body h2, .answer__body h3 { font-size: var(--text-md); margin: var(--space-4) 0 var(--space-2); }
.answer__body ul, .answer__body ol { margin: 0 0 var(--space-3); padding-left: 1.35em; }
.answer__body li { margin-bottom: var(--space-1); }
.answer__body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-alt);
  padding: 1px 4px;
  border-radius: 3px;
}
.answer__body pre {
  background: var(--color-surface-alt);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.answer__body pre code { background: none; padding: 0; }
.answer__body table { font-size: var(--text-sm); margin: var(--space-3) 0; display: block; overflow-x: auto; }
.answer__body th, .answer__body td { border: 1px solid var(--color-border); padding: var(--space-1) var(--space-2); text-align: left; }
.answer__body blockquote {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

.answer__cursor {
  display: inline-block;
  width: 0.45em; height: 1em;
  background: var(--color-accent);
  vertical-align: text-bottom;
  animation: cursor-blink 1s step-end infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }

.answer__thinking {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- No supporting passage ------------------------------------------- */

.no-evidence {
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}
.no-evidence__title { font-weight: 650; margin-bottom: var(--space-2); }
.no-evidence__hints { margin: var(--space-2) 0 0; padding-left: 1.2em; font-size: var(--text-sm); color: var(--color-text-muted); }
.no-evidence__hints li { margin-bottom: var(--space-1); }

/* --- Citation strip --------------------------------------------------- */

.citation-strip { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.citation-strip__label { margin-bottom: var(--space-2); }
.citation-strip--consulted { border-top-style: dashed; }
.citation-strip--consulted .citation-strip__label { color: var(--color-text-faint); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--text-xs); }

.citation-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.citation-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  max-width: 100%;
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.citation-chip:hover { background: var(--color-accent-wash); border-color: var(--color-accent); }
.citation-chip__index { font-weight: 650; color: var(--color-accent-strong); flex: none; }
.citation-chip__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.citation-chip__locator { color: var(--color-text-muted); white-space: nowrap; }
.citation-chip--static { cursor: default; }
.citation-chip--static:hover { background: var(--color-surface); border-color: var(--color-border-strong); }
.citation-chip--consulted .citation-chip__index { color: var(--color-text-faint); }

/* --- Badges ----------------------------------------------------------- */

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--color-accent-wash);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent-strong);
  cursor: help;
}
.verified-badge__mark { font-weight: 700; }

.approx-note {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-warning-wash);
  color: var(--color-warning);
  font-size: var(--text-xs);
  cursor: help;
}

/* --- Guidance note (a note, not an answer) ---------------------------- */

.guidance-note {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-note-wash);
  border: 1px dashed #9fb4c6;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.guidance-note__label { color: var(--color-note); margin-bottom: var(--space-2); }
.guidance-note__q { font-weight: 600; margin-bottom: var(--space-1); }
.guidance-note__a { color: var(--color-text-muted); }
.guidance-note__a > :first-child { margin-top: 0; }
.guidance-note__a > :last-child { margin-bottom: 0; }
.guidance-note__meta { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); }

/* --- Inline error and ambiguity cards --------------------------------- */

.inline-error {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-danger-wash);
  border: 1px solid #e0b4b1;
  border-radius: var(--radius-md);
}
.inline-error__title { font-weight: 650; color: var(--color-danger); margin-bottom: var(--space-1); }
.inline-error__message { font-size: var(--text-sm); color: var(--color-text); }
.inline-error__actions { margin-top: var(--space-3); display: flex; gap: var(--space-3); }

.choice-card {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.choice-card__title { font-weight: 650; margin-bottom: var(--space-1); }
.choice-card__hint { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.choice-card__options { display: flex; flex-direction: column; gap: var(--space-2); }
.choice-option {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  background: var(--color-surface-sunk);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.choice-option:hover { background: var(--color-accent-wash); border-color: var(--color-accent); }

/* --- Collapsible detail sections -------------------------------------- */

.detail-sections { margin-top: var(--space-4); border-top: 1px solid var(--color-border); }

.detail-section { border-bottom: 1px solid var(--color-border); }
.detail-section:last-child { border-bottom: none; }

.detail-section__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  text-align: left;
}
.detail-section__toggle:hover { color: var(--color-text); }
.detail-section__caret { flex: none; font-size: 0.7em; transition: transform var(--duration-fast) var(--ease-out); }
.detail-section__toggle[aria-expanded="true"] .detail-section__caret { transform: rotate(90deg); }
.detail-section__count { font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--color-text-faint); }

.detail-section__panel { padding: 0 0 var(--space-4); }

.reasoning-text {
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
  background: var(--color-surface-sunk);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  max-height: 22rem;
  overflow-y: auto;
}
.reasoning-caveat { font-size: var(--text-xs); color: var(--color-text-faint); margin-bottom: var(--space-2); }
.detail-empty { font-size: var(--text-sm); color: var(--color-text-faint); }

.trace-table { font-size: var(--text-xs); }
.trace-table th {
  text-align: left;
  padding: 0 var(--space-3) var(--space-1) 0;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  white-space: nowrap;
}
.trace-table td { padding: 2px var(--space-3) 2px 0; vertical-align: top; border-top: 1px solid var(--color-border); }
.trace-table tr.trace-row--lane td { color: var(--color-text-muted); font-style: italic; }
.trace-verified-line {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- Footer ----------------------------------------------------------- */

.answer__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.answer__footer-sep { color: var(--color-border-strong); }
.served-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 600;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}
.served-pill--supported { background: var(--color-accent-wash); color: var(--color-accent-strong); }
.served-pill--verified { background: var(--color-header-bg); color: var(--color-header-text); }
.served-pill--none { background: var(--color-surface-alt); color: var(--color-text-muted); }
.served-pill--stopped { background: var(--color-surface-alt); color: var(--color-text-faint); }

/* --- Feedback --------------------------------------------------------- */

.answer__actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
}
.feedback-btn:hover { background: var(--color-surface-alt); color: var(--color-text); }
.feedback-btn[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-wash);
  color: var(--color-accent-strong);
}
.feedback-sent { font-size: var(--text-xs); color: var(--color-success); }

.feedback-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + var(--space-2));
  z-index: 20;
  width: min(340px, 100%);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.feedback-popover__label { margin-bottom: var(--space-2); }
.feedback-popover__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }

/* ===================================================================== *
 * 4. Composer
 * ===================================================================== */

.composer {
  flex: none;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.composer__inner { max-width: calc(var(--measure) + 6rem); margin: 0 auto; }

.composer__controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.composer__control-group { display: flex; align-items: center; gap: var(--space-2); }
.composer__explainer {
  flex: 1 1 100%;
  min-height: 1.2em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.composer__row { display: flex; gap: var(--space-3); align-items: flex-end; }
.composer__textarea { flex: 1; min-height: 52px; max-height: 200px; }
.composer__hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.composer__stop { border-color: var(--color-danger); color: var(--color-danger); font-weight: 600; }
.composer__stop:hover { background: var(--color-danger-wash); }

.examples { max-width: var(--measure); }
.examples__label { margin-bottom: var(--space-3); }
.examples__list { display: flex; flex-direction: column; gap: var(--space-2); }
.example-btn {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.example-btn:hover { border-color: var(--color-accent); background: var(--color-accent-wash); }
.example-btn small { display: block; margin-top: 2px; color: var(--color-text-faint); font-size: var(--text-xs); }

.thread-intro { padding: var(--space-6) 0 var(--space-4); }
.thread-intro__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.thread-intro__text { color: var(--color-text-muted); font-size: var(--text-sm); max-width: var(--measure); margin-bottom: var(--space-5); }

/* ===================================================================== *
 * 5. Source viewer panel
 * ===================================================================== */

.viewer-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-panel);
  animation: viewer-slide-in var(--duration-normal) var(--ease-out);
}
@keyframes viewer-slide-in {
  from { transform: translateX(16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.viewer-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.viewer-panel__title { font-weight: 650; font-size: var(--text-sm); line-height: 1.4; }
.viewer-panel__subtitle { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

.viewer-panel__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-sunk);
}
.viewer-panel__status--found { color: var(--color-success); }
.viewer-panel__status--not-found { color: var(--color-warning); }
.viewer-panel__status--unknown { color: var(--color-text-faint); }

.viewer-panel__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--space-4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--color-surface-sunk);
}
.viewer-panel__body img {
  border: 1px solid var(--color-border-strong);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.viewer-panel__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.viewer-panel__page-label { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ===================================================================== *
 * 6. Narrow screens
 * ===================================================================== */

@media (max-width: 1180px) {
  .chat-layout--viewer-open { grid-template-columns: 272px minmax(0, 1fr) 360px; }
  .chat-layout--rail-collapsed.chat-layout--viewer-open { grid-template-columns: 52px minmax(0, 1fr) 360px; }
}

@media (max-width: 1024px) {
  .chat-layout,
  .chat-layout--viewer-open { grid-template-columns: 52px minmax(0, 1fr); }
  .chat-layout .chat-rail__new,
  .chat-layout .chat-rail__body { display: none; }
  .chat-layout--rail-open { grid-template-columns: 272px minmax(0, 1fr); }
  .chat-layout--rail-open .chat-rail__new,
  .chat-layout--rail-open .chat-rail__body { display: block; }
  .chat-layout--rail-open .chat-rail__new { display: inline-flex; }

  .chat-layout--viewer-open .viewer-panel {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    z-index: 25;
  }
  .message-thread { padding: var(--space-5) var(--space-4) var(--space-4); }
  .composer { padding: var(--space-3) var(--space-4) var(--space-4); }
}