/* Invaris Brokerage — the investment committee surface.
 *
 * The product is chat-first: the operator works in conversation with a team of
 * role-specialized models that join when their expertise is needed. This file
 * styles that surface in the Coherence idiom (same tokens, same hairlines,
 * same weight scale) so it reads as one product with the foundation layer.
 *
 * The design commitment here: a committee member is always *attributed*. Every
 * message carries a seat, and every claim in it is either evidence-linked or
 * visibly unsupported. A team of models that speak in an undifferentiated
 * voice is a team you cannot hold to account.
 */

/* ---- conversation ------------------------------------------------------ */

.conversation {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.68);
}

.messages {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 26px 26px;
  scroll-behavior: smooth;
}

.entry-hero {
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 12vh 20px 0;
  text-align: center;
}

.entry-hero strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -0.01em;
}

.entry-hero p {
  margin: 0;
  max-width: 46ch;
  color: var(--dim);
  font-size: 12px;
}

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

/* The guided-repair tell: a specialist takes the floor inline, in the same
 * stream. A quiet line and a changed label are the only signal — the operator
 * is still in one conversation, not being handed between products. */
.handoff-line {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 0 -4px;
  color: var(--dim);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.06em;
}

.handoff-line::before,
.handoff-line::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.handoff-line em {
  color: var(--seat-color, var(--muted));
  font-style: normal;
  font-weight: 800;
}

.message {
  display: grid;
  gap: 7px;
  max-width: 78ch;
}

.message.operator {
  justify-self: end;
  max-width: 62ch;
}

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

.seat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.06em;
}

.seat-dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--seat-color, var(--electric-blue));
  color: #05070a;
  font-size: 9px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
}

.message-role {
  color: var(--dim);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.message-time {
  margin-left: auto;
  color: var(--dim);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.message-text {
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--seat-color, var(--line-strong));
  border-radius: 9px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  line-height: 1.62;
}

.message.operator .message-text {
  border-left-width: 1px;
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
}

.message.system .message-text {
  border-style: dashed;
  border-left-width: 1px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

/* Evidence attached to a claim (FR-LLM-04). A committee member's assertion is
 * shown with what it rests on, so an unsupported claim is visibly unsupported
 * rather than merely unchallenged. */
.evidence-list {
  display: grid;
  gap: 4px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}

.evidence-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
}

.evidence-item .src {
  color: var(--electric-blue);
}

.evidence-item .asof {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.evidence-item.unresolved .src {
  color: var(--danger);
  text-decoration: line-through;
}

/* ---- committee roster (right rail) ------------------------------------- */

.roster {
  display: grid;
  gap: 4px;
}

.seat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
}

.seat:hover {
  background: rgba(255, 255, 255, 0.05);
}

.seat.speaking {
  border-color: var(--seat-color, var(--electric-blue-line));
  background: rgba(255, 255, 255, 0.05);
}

.seat-identity {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.seat-name {
  color: var(--text);
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seat-role {
  color: var(--dim);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seat-state {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--dim);
}

.seat.speaking .seat-state {
  background: var(--seat-color, var(--electric-blue));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--seat-color, var(--electric-blue)) 22%, transparent);
}

.seat-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 0 8px 34px;
}

.tool-chip {
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 9px;
}

/* FR-TOOL-02: a TRADING-class tool is never callable by a model. It is shown
 * struck through in the roster so the boundary is legible in the product, not
 * only in the code. */
.tool-chip.trading {
  border-color: var(--danger-line);
  color: var(--danger);
  text-decoration: line-through;
}

/* ---- committee vote ---------------------------------------------------- */

.vote {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--electric-blue-line);
  border-radius: 9px;
  background: var(--electric-blue-soft);
}

.vote-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.vote-title {
  color: var(--text);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vote-tally {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.vote-rows {
  display: grid;
  gap: 3px;
}

.vote-row {
  display: grid;
  grid-template-columns: 130px auto minmax(0, 1fr);
  gap: 9px;
  align-items: baseline;
  font-size: 11px;
}

.vote-row .who {
  color: var(--muted);
  font-weight: 740;
}

.vote-row .verdict {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.vote-row .verdict.for {
  color: var(--electric-green);
}

.vote-row .verdict.against {
  color: var(--danger);
}

.vote-row .verdict.abstain {
  color: var(--amber);
}

.vote-row .why {
  color: var(--dim);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dissent is never averaged away. FR-LLM-10: agreement is not evidence and
 * disagreement is a signal to abstain, so a split vote is rendered as a
 * warning rather than rounded to a majority. */
.vote.split {
  border-color: rgba(245, 193, 93, 0.5);
  background: var(--amber-soft);
}

.vote-note {
  color: var(--muted);
  font-size: 10px;
}

/* ---- composer ---------------------------------------------------------- */

.composer {
  display: grid;
  gap: 9px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(18px);
}

.composer textarea {
  width: 100%;
  min-height: 52px;
  max-height: 180px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #000;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  resize: none;
}

.composer textarea:focus {
  outline: none;
  border-color: var(--electric-blue-line);
}

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.composer-hint {
  color: var(--dim);
  font-size: 10px;
}

.turn-stage {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

.turn-stage .pulse {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--electric-blue);
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .turn-stage .pulse { animation: none; }
  .messages { scroll-behavior: auto; }
}

/* Standing chips sit ahead of tools on the roster: standing is what decides
 * whether a seat is asked at all, so it reads first. */
.tool-chip.standing {
  border-color: var(--electric-blue-line);
  color: var(--electric-blue);
}