/* =============================================================================
   TradeAI — the chat surface over the journal, the sizing maths and the playbooks
   -----------------------------------------------------------------------------
   This sheet holds layout and nothing else. Every AI-surface primitive on the
   page — the composer, the thinking block, the tool rows, the stream, the
   context cards, the pills — comes from kit-ai.css, and every control comes
   from kit.css / tools-shared.css. What is left is the two-column workspace
   those parts sit inside, plus the handful of pieces the kit has no name for:
   a conversation rail, a message row, and the grouped suggestion board.

   Three things carry the Beautiful UI feel and are worth protecting when this
   is edited: separation is a shadow hairline rather than a border, so nothing
   shifts by a pixel when an element gains one; the accent appears only on
   things you can click; and every figure in an answer is mono with tabular
   numerals so columns of numbers line up without a table doing the work.
   ========================================================================== */

/* =============================================================================
   1. PAGE FRAME
   ========================================================================== */

html[data-ui='v2'][data-v2] .tai-page {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s5);
}

html[data-ui='v2'][data-v2] .tai-head {
  margin-bottom: 0;
}

/* The head is deliberately short. A chat page that opens with three paragraphs
   of preamble wastes the space the conversation needs. */
html[data-ui='v2'][data-v2] .tai-head .mit-sub {
  max-width: 62ch;
}

/* =============================================================================
   2. WORKSPACE — rail + conversation
   -----------------------------------------------------------------------------
   Both columns own their scrolling. The page itself must not grow with the
   conversation, or the composer walks off the bottom of the screen.
   ========================================================================== */

html[data-ui='v2'][data-v2] .tai-workspace {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--v2-s5);
  align-items: stretch;
  height: clamp(560px, calc(100vh - 300px), 860px);
  min-height: 0;
}

html[data-ui='v2'][data-v2] .tai-rail,
html[data-ui='v2'][data-v2] .tai-main {
  min-width: 0;
  min-height: 0;
}

/* ---------------------------------------------------------------- the rail -- */

html[data-ui='v2'][data-v2] .tai-rail {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s4);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--v2-s1);
}

html[data-ui='v2'][data-v2] .tai-new {
  width: 100%;
  justify-content: center;
}

html[data-ui='v2'][data-v2] .tai-rail-label {
  margin: 0 0 var(--v2-s2);
}

html[data-ui='v2'][data-v2] .tai-convos {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* A conversation row is a hairline-free target until you touch it: the list
   should read as a list, not as a stack of cards. */
html[data-ui='v2'][data-v2] .tai-convo {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--v2-s2) var(--v2-s3);
  border: 0;
  border-radius: var(--v2-r-md);
  background: transparent;
  color: var(--v2-ink-2);
  font-family: var(--v2-sans);
  cursor: pointer;
  transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease);
}
html[data-ui='v2'][data-v2] .tai-convo:hover { background: var(--v2-hover); color: var(--v2-ink); }
html[data-ui='v2'][data-v2] .tai-convo:focus-visible { outline: none; box-shadow: var(--v2-ring); }
html[data-ui='v2'][data-v2] .tai-convo[aria-current='true'] {
  background: var(--v2-sunk-2);
  color: var(--v2-ink);
  box-shadow: var(--v2-hairline);
}

html[data-ui='v2'][data-v2] .tai-convo-title {
  display: block;
  font-size: var(--v2-t-sm);
  font-weight: 550;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-ui='v2'][data-v2] .tai-convo-meta {
  display: block;
  margin-top: 2px;
  font-family: var(--v2-mono);
  font-size: var(--v2-t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink-3);
}

/* ---- context block ------------------------------------------------------
   The honest statement of scope. It sits at the bottom of the rail because it
   is reference, not navigation, but it is never collapsed away: what the page
   can see is the first thing a sceptical reader should be able to check. */

html[data-ui='v2'][data-v2] .tai-context {
  margin-top: auto;
  padding-top: var(--v2-s4);
}
html[data-ui='v2'][data-v2] .tai-context-note {
  margin: 0 0 var(--v2-s3);
  font-size: var(--v2-t-xs);
  line-height: 1.55;
  color: var(--v2-ink-3);
}
html[data-ui='v2'][data-v2] .tai-context-list {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
}

/* .mi-ai-context is written for an <a>; these rows are buttons that route
   somewhere real, so the button's own defaults have to be undone. */
html[data-ui='v2'][data-v2] .tai-ctx {
  width: 100%;
  text-align: left;
  border: 0;
  font-family: var(--v2-sans);
  cursor: pointer;
  align-items: flex-start;
}
html[data-ui='v2'][data-v2] .tai-ctx:focus-visible { outline: none; box-shadow: var(--v2-hairline), var(--v2-ring); }
html[data-ui='v2'][data-v2] .tai-ctx[disabled] { cursor: default; opacity: 1; }
html[data-ui='v2'][data-v2] .tai-ctx[disabled]:hover { background: var(--v2-surface); }
html[data-ui='v2'][data-v2] .tai-ctx-body { min-width: 0; flex: 1 1 auto; }
html[data-ui='v2'][data-v2] .tai-ctx-value {
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}

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

html[data-ui='v2'][data-v2] .tai-main {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s3);
}

html[data-ui='v2'][data-v2] .tai-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--v2-s6);
  padding: var(--v2-s2) var(--v2-s4) var(--v2-s4) 0;
}
html[data-ui='v2'][data-v2] .tai-thread:focus-visible { outline: none; box-shadow: var(--v2-ring); }

/* =============================================================================
   3. MESSAGES
   ========================================================================== */

html[data-ui='v2'][data-v2] .tai-msg {
  display: flex;
  gap: var(--v2-s3);
  max-width: 78ch;
}
html[data-ui='v2'][data-v2] .tai-msg--user {
  margin-left: auto;
  max-width: 60ch;
  justify-content: flex-end;
}

html[data-ui='v2'][data-v2] .tai-bubble {
  padding: var(--v2-s3) var(--v2-s4);
  border-radius: var(--v2-r-lg);
  background: var(--v2-sunk-2);
  box-shadow: var(--v2-hairline);
  font-size: var(--v2-t-md);
  line-height: 1.55;
  color: var(--v2-ink);
  overflow-wrap: anywhere;
}

html[data-ui='v2'][data-v2] .tai-avatar {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: var(--v2-r-sm);
  display: grid;
  place-items: center;
  background: var(--v2-accent-soft);
  color: var(--v2-accent-text);
  box-shadow: var(--v2-hairline);
}

html[data-ui='v2'][data-v2] .tai-msg-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--v2-s3);
}

html[data-ui='v2'][data-v2] .tai-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-s2);
}

/* ---- the answer body ---------------------------------------------------- */

html[data-ui='v2'][data-v2] .tai-answer {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s4);
}
html[data-ui='v2'][data-v2] .tai-answer:empty { display: none; }
html[data-ui='v2'][data-v2] .tai-answer p {
  margin: 0;
  font-size: var(--v2-t-md);
  line-height: 1.6;
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .tai-answer strong { color: var(--v2-ink); font-weight: 600; }
html[data-ui='v2'][data-v2] .tai-answer ul {
  margin: 0;
  padding-left: var(--v2-s5);
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
  font-size: var(--v2-t-sm);
  line-height: 1.55;
  color: var(--v2-ink-2);
}

/* The one concrete suggestion each answer ends with. An accent rule rather
   than a tinted box: it is advice, not an alert. */
html[data-ui='v2'][data-v2] .tai-do {
  margin: 0;
  padding-left: var(--v2-s3);
  border-left: 2px solid var(--v2-accent-line);
  font-size: var(--v2-t-sm);
  line-height: 1.6;
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .tai-do strong { color: var(--v2-ink); }

/* Sample-size honesty, wherever a figure rests on too few trades. */
html[data-ui='v2'][data-v2] .tai-caveat {
  margin: 0;
  font-size: var(--v2-t-xs);
  line-height: 1.6;
  color: var(--v2-ink-3);
}

html[data-ui='v2'][data-v2] .tai-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--v2-s4);
  padding: var(--v2-s4);
  border-radius: var(--v2-r-lg);
  background: var(--v2-surface);
  box-shadow: var(--v2-e1);
}
html[data-ui='v2'][data-v2] .tai-stat-note {
  font-size: var(--v2-t-xs);
  line-height: 1.45;
  color: var(--v2-ink-3);
}

/* Numbers in an answer table are mono and right-aligned; text columns are not. */
html[data-ui='v2'][data-v2] .tai-answer .mi-table td.mi-mono,
html[data-ui='v2'][data-v2] .tai-answer .mi-table th.mi-num { text-align: right; }
html[data-ui='v2'][data-v2] .tai-answer .mi-table { font-size: var(--v2-t-sm); }

html[data-ui='v2'][data-v2] .tai-thin {
  margin-left: var(--v2-s2);
  color: var(--v2-warn);
  font-size: var(--v2-t-xs);
  white-space: nowrap;
}

/* =============================================================================
   4. SUGGESTIONS
   -----------------------------------------------------------------------------
   Three headed groups rather than one wall of chips: the grouping is the only
   thing that tells a first-time reader what this page actually knows about.
   ========================================================================== */

html[data-ui='v2'][data-v2] .tai-suggest {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s5);
}
html[data-ui='v2'][data-v2] .tai-suggest-group {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s3);
}
html[data-ui='v2'][data-v2] .tai-suggest-head {
  display: flex;
  align-items: baseline;
  gap: var(--v2-s3);
}
html[data-ui='v2'][data-v2] .tai-suggest-note {
  margin: 0;
  font-size: var(--v2-t-xs);
  color: var(--v2-ink-3);
}

html[data-ui='v2'][data-v2] .tai-welcome {
  display: flex;
  flex-direction: column;
  gap: var(--v2-s3);
  max-width: 68ch;
}
html[data-ui='v2'][data-v2] .tai-welcome p {
  margin: 0;
  font-size: var(--v2-t-md);
  line-height: 1.6;
  color: var(--v2-ink-2);
}
html[data-ui='v2'][data-v2] .tai-welcome-lead {
  font-size: var(--v2-t-lg) !important;
  color: var(--v2-ink) !important;
  letter-spacing: var(--v2-tight);
}

/* =============================================================================
   5. COMPOSER
   ========================================================================== */

html[data-ui='v2'][data-v2] .tai-composer-wrap {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--v2-s2);
}

html[data-ui='v2'][data-v2] .tai-composer .mi-ai-composer-input {
  max-height: 160px;
}

html[data-ui='v2'][data-v2] .tai-scope {
  font-family: var(--v2-mono);
  font-variant-numeric: tabular-nums;
}

/* The plain sentence. It is not a footnote — it sits where the eye lands after
   the send button, because that is the moment the claim matters. */
html[data-ui='v2'][data-v2] .tai-honesty {
  margin: 0;
  font-size: var(--v2-t-xs);
  line-height: 1.6;
  color: var(--v2-ink-3);
  max-width: 90ch;
}
html[data-ui='v2'][data-v2] .tai-honesty strong { color: var(--v2-ink-2); font-weight: 600; }

/* =============================================================================
   6. NARROW SCREENS
   -----------------------------------------------------------------------------
   Below 900px the rail stops being a column: conversations become a horizontal
   strip and the context rows a two-up grid, so the conversation keeps the
   full width it needs.
   ========================================================================== */

@media (max-width: 900px) {
  html[data-ui='v2'][data-v2] .tai-workspace {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    gap: var(--v2-s4);
  }
  html[data-ui='v2'][data-v2] .tai-rail {
    overflow: visible;
    padding-right: 0;
    gap: var(--v2-s3);
  }
  html[data-ui='v2'][data-v2] .tai-convos {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--v2-s1);
  }
  html[data-ui='v2'][data-v2] .tai-convo { width: auto; flex: 0 0 auto; max-width: 220px; }
  html[data-ui='v2'][data-v2] .tai-context { margin-top: 0; padding-top: 0; }
  html[data-ui='v2'][data-v2] .tai-context-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  html[data-ui='v2'][data-v2] .tai-main {
    height: clamp(460px, 68vh, 760px);
  }
  html[data-ui='v2'][data-v2] .tai-thread { padding-right: 0; }
}

@media (max-width: 640px) {
  html[data-ui='v2'][data-v2] .tai-msg { gap: var(--v2-s2); }
  html[data-ui='v2'][data-v2] .tai-msg--user { max-width: 100%; }
  html[data-ui='v2'][data-v2] .tai-stats { grid-template-columns: minmax(0, 1fr); padding: var(--v2-s3); }
  html[data-ui='v2'][data-v2] .tai-avatar { display: none; }
}

/* =============================================================================
   7. REDUCED MOTION
   -----------------------------------------------------------------------------
   The module already skips the staged reveal and prints the answer whole; this
   removes what is left, including the caret the kit puts on a live stream.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html[data-ui='v2'][data-v2] .tai-convo,
  html[data-ui='v2'][data-v2] .tai-ctx { transition: none; }
  html[data-ui='v2'][data-v2] .tai-msg { animation: none; }
}