/* The conversation, the drawer, and the few real controls.
 *
 * Replaces `trading.css` (1,456 lines) and `committee.css` (471), which
 * between them styled a three-rail workspace that no longer exists — 212 of
 * their 288 classes had no element left to match. Dead map is worse than no
 * map: the next person to touch this cannot tell which rules are load-bearing.
 *
 * Same language as surface.css: hairlines, type, and left-edge accents. The
 * seat chip that used to be a pill and the memo that used to be a tinted box
 * are both rules now, for the same reason everything else is.
 */

/* ---- messages ------------------------------------------------------------ */

.message { display: grid; gap: 8px; max-width: 76ch; }

/* Your own words. Set apart by weight and a rule, not by a bubble — a chat
 * bubble is a lot of pixels spent restating who is speaking. */
.message.you {
  max-width: 62ch;
  justify-self: end;
  text-align: right;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  border-right: 2px solid var(--line-strong);
  padding-right: 14px;
}

.message-head {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.seat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.seat-dot {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--seat-color, var(--muted));
  color: #05070a;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
}

.message-role {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.message-time {
  margin-left: auto;
  font-size: 10px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.message-text {
  font-size: 14px;
  line-height: 1.68;
  color: var(--muted);
  /* The seat's colour as a hairline on the left edge. One pixel of identity
   * instead of a coloured panel. */
  border-left: 2px solid var(--seat-color, var(--line));
  padding-left: 14px;
}
.message-text strong { color: var(--text); font-weight: 600; }
.message-text .act { display: block; margin-top: 14px; }

/* When a specialist takes over. Drawn only on a handoff, so the advisor's own
 * turns read as continuous conversation. */
.handoff-line {
  font-size: 11px;
  color: var(--dim);
  padding-left: 14px;
  border-left: 2px solid var(--seat-color, var(--line));
}
.handoff-line em { font-style: normal; }

/* ---- evidence ------------------------------------------------------------
 * The address the gate will resolve, shown inline under the claim it supports.
 * Monospaced because these are identifiers, not prose. */

.evidence-list { display: grid; gap: 3px; margin-top: 12px; }
.evidence-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  padding: 3px 0;
  border-top: 1px solid var(--line);
}
.evidence-item .src { color: var(--muted); }
.evidence-item .asof { font-variant-numeric: tabular-nums; }

/* ---- the memo ------------------------------------------------------------
 * The artifact the meeting produces. Dissent is rendered as standing, not as
 * a losing vote, because that is what it is. */

.vote {
  display: grid;
  gap: 7px;
  padding-left: 14px;
  border-left: 2px solid var(--electric-blue-line);
  max-width: 76ch;
}
.vote.split { border-left-color: var(--amber-line, rgba(245, 193, 93, 0.42)); }

.vote-head { display: flex; align-items: baseline; gap: 12px; }
.vote-outcome {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
}
.vote-flag {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--amber, #f5c15d);
}
.vote-line { margin: 0; font-size: 13px; line-height: 1.65; color: var(--muted); }
.vote-dissent {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--dim);
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.pending {
  font-size: 12px;
  color: var(--dim);
  padding-left: 14px;
  border-left: 2px solid var(--line);
}
.pending.bad { color: var(--danger); border-left-color: var(--danger-line); }

/* ---- drawer --------------------------------------------------------------
 * For things that are genuinely modal — a ticket, a build. Navigation never
 * uses this; a drawer you navigate in is a second, worse router. */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  z-index: 60;
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 100vw);
  background: var(--panel-soft);
  border-left: 1px solid var(--line);
  z-index: 61;
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: var(--shadow);
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  height: 52px;
  border-bottom: 1px solid var(--line);
}
.drawer-head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer-body { overflow-y: auto; padding: 26px 24px 40px; display: grid; gap: 30px; }

.text-action {
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: 11px;
  color: var(--dim); cursor: pointer;
}
.text-action:hover { color: var(--text); }

/* ---- the few real inputs -------------------------------------------------
 * A rule with text on it. Same treatment as the ask field, so a form never
 * looks like a different product from the rest of the app. */

.recall-input,
.recall-select {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 7px 0;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
}
.recall-input:focus,
.recall-select:focus { outline: none; border-bottom-color: var(--muted); }
.recall-select { color: var(--muted); }
.recall-select option { background: var(--panel); color: var(--text); }
textarea.recall-input { resize: vertical; line-height: 1.6; }

/* ---- the desk working -----------------------------------------------------
 * The pending line is now a live status, not a placeholder: it names who has
 * just spoken while the rest of the desk is still going, and it carries the
 * only way to stop. */

.pending-stop {
  margin-left: 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.pending-stop:hover { color: var(--danger); }

/* ---- clarifications ------------------------------------------------------
 * The desk asking the client something. This was generated server-side and
 * dropped on the floor by the client for as long as it existed. */

.clarify {
  margin: 22px 0 8px;
  padding-left: 13px;
  border-left: 2px solid var(--electric-blue-line);
  display: grid;
  gap: 14px;
}
.clarify-head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.clarify-q { display: grid; gap: 5px; justify-items: stretch; }
.clarify-input { margin-top: 4px; }
.clarify-text { font-size: 14px; line-height: 1.6; color: var(--text); }
.clarify-why { font-size: 12px; line-height: 1.6; color: var(--dim); }

.stream-notice {
  margin-top: 18px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--dim);
}

/* ---- intake: the correction loop -----------------------------------------
 * Same rule-with-text-on-it as every other input, so the surface where you
 * check the desk understood you does not look like a different product. */

.intake-input {
  width: 100%;
  margin-top: 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 7px 0;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  resize: vertical;
}
.intake-input:focus { outline: none; border-bottom-color: var(--muted); }
.intake-input::placeholder { color: var(--dim); }

.intake-go {
  margin-top: 12px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 6px 13px;
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.intake-go:hover:not(:disabled) { border-color: var(--muted); }
.intake-go:disabled { color: var(--dim); cursor: default; }

.intake-out { display: grid; gap: 26px; margin-top: 8px; }

/* The sign-in affordance on the landing. Its own class rather than reusing the
 * intake button: that one sits inside a panel with room around it, and this one
 * has to hold its own on an otherwise empty page. */
.signin-go {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 9px 20px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.signin-go:hover { border-color: var(--muted); }

/* An assumed value must not read like a stated one. The left mark is the same
 * state-mark vocabulary the rest of the app uses, in the "we made this up"
 * register rather than the "this is a fact" one. */
.row.assumed { position: relative; padding-left: 11px; }
.row.assumed::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 12px;
  margin-top: -6px;
  background: var(--electric-blue-line);
}

.risk-slider {
  width: 100%;
  appearance: none;
  background: none;
  height: 18px;
  cursor: pointer;
}
.risk-slider::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--line-strong);
}
.risk-slider::-webkit-slider-thumb {
  appearance: none;
  width: 11px; height: 11px;
  margin-top: -5px;
  border-radius: 999px;
  background: var(--text);
}
.risk-slider::-moz-range-track { height: 1px; background: var(--line-strong); }
.risk-slider::-moz-range-thumb {
  width: 11px; height: 11px; border: 0; border-radius: 999px; background: var(--text);
}

@media (max-width: 640px) {
  .drawer { width: 100vw; border-left: 0; }
  .message.you { max-width: 100%; }
}