/* Kohli — the Finance screen.
 *
 * Its own file because it is the only part of the app that needs a colour
 * scale rather than a colour: a heatmap has to say "up a lot" and "up a
 * little" apart, which nothing else here does. Everything else on the page
 * borrows the app's existing furniture — .card, .crow, .segmented, .label —
 * on purpose, so a screen full of numbers still reads as the same app.
 *
 * Green and red are used here in the one way this project allows colour: they
 * mean something exact and nothing else uses them for decoration. They are
 * also never the ONLY signal — every tile and every row carries the figure
 * itself with its sign, so the page still works for somebody who cannot tell
 * the two colours apart.
 */

:root {
  /* A separate pair from --green/--destructive. Those are "done" and
     "dangerous"; these are "the market went up" and "the market went down",
     and they need four steps each rather than one. */
  --up:    #16A34A;
  --down:  #DC2626;
  /* Softened one step across the board (was .16/.30/.46/.64). The heatmap is
     the only block of saturated colour in an otherwise monochrome app, and at
     full strength an ordinary trading day read as an alarm. The four steps
     still separate cleanly — what does the work is the ratio between them, not
     their absolute strength — and every tile carries the figure with its sign,
     so no meaning here rests on the colour alone. */
  --up-1:  rgba(22, 163, 74, 0.12);
  --up-2:  rgba(22, 163, 74, 0.22);
  --up-3:  rgba(22, 163, 74, 0.36);
  --up-4:  rgba(22, 163, 74, 0.52);
  --down-1: rgba(220, 38, 38, 0.12);
  --down-2: rgba(220, 38, 38, 0.22);
  --down-3: rgba(220, 38, 38, 0.36);
  --down-4: rgba(220, 38, 38, 0.52);
}

:root[data-appearance="dark"] {
  --up:    #4ADE80;
  --down:  #F87171;
  --up-1:  rgba(74, 222, 128, 0.11);
  --up-2:  rgba(74, 222, 128, 0.20);
  --up-3:  rgba(74, 222, 128, 0.32);
  --up-4:  rgba(74, 222, 128, 0.46);
  --down-1: rgba(248, 113, 113, 0.11);
  --down-2: rgba(248, 113, 113, 0.20);
  --down-3: rgba(248, 113, 113, 0.32);
  --down-4: rgba(248, 113, 113, 0.46);
}

.tone-up   { color: var(--up); }
.tone-down { color: var(--down); }
.tone-flat { color: var(--text-2); }

/* ============ the bar across the top ============ */

.fin-markets { margin: 0 0 14px; }

.fin-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 14px;
  font-size: 0.76em;
  color: var(--text-2);
}
.fin-status-when { margin-left: auto; text-align: right; flex-shrink: 0; }

.fin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
}
/* Open and closed, said in a dot AND in the word beside it. */
.fin-dot.on  { background: var(--up); }
.fin-dot.off { background: var(--text-3); }

.fin-sections {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 2px 16px;
  scrollbar-width: none;
}
.fin-sections::-webkit-scrollbar { display: none; }

.fin-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--separator);
  background: transparent;
  color: var(--text-2);
  font-size: 0.82em;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.fin-section.on {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 600;
}
.fin-section i {
  font-style: normal;
  font-size: 0.82em;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--fill);
  color: var(--text);
}
.fin-section.on i { background: rgba(255, 255, 255, 0.24); color: var(--on-accent); }
:root[data-appearance="dark"] .fin-section.on i { background: rgba(0, 0, 0, 0.22); }

/* ============ indices ============ */

.fin-indices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.fin-index {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 13px 10px;
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--card-edge);
  background: var(--card);
  text-align: left;
  min-width: 0;
  overflow: hidden;
}
.fin-index:active { background: var(--pressed); }
.fin-index > b {
  font-size: 0.74em;
  font-weight: 600;
  color: var(--text-2);
  max-width: 100%;
}
.fin-index-price { font-size: 1.12em; font-weight: 650; letter-spacing: -0.02em; }
.fin-index-change { font-size: 0.76em; font-weight: 600; }
.fin-index.tone-up .fin-index-change   { color: var(--up); }
.fin-index.tone-down .fin-index-change { color: var(--down); }
.fin-index.tone-flat .fin-index-change { color: var(--text-2); }

/* The line sits along the bottom of the card, under the figures, so the card
   is one object rather than a number next to a picture. */
.fin-index .fin-spark {
  width: 100%;
  height: 26px;
  margin-top: 4px;
  opacity: 0.85;
}

.fin-spark { display: block; height: 26px; }
.fin-spark-gap { display: block; width: 68px; height: 26px; flex-shrink: 0; }

/* ============ the heatmap ============ */

.fin-heat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }

/* Same spec as the shared section label (pages.css); only the padding differs,
   because this one sits inside an already-padded section. */
.fin-heat-label {
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-2);
  padding: 0 2px 6px;
}

/* Auto-fill rather than a fixed count: six tiles fit a large phone in two
   rows and a small one in three, without a breakpoint deciding for it. */
.fin-heat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

.fin-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  padding: 6px 4px;
  border-radius: var(--radius);
  border: 0.5px solid var(--card-edge);
  background: var(--fill);
  overflow: hidden;
}
.fin-tile b {
  font-size: 0.72em;
  font-weight: 650;
  letter-spacing: -0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-tile small { font-size: 0.66em; font-weight: 600; opacity: 0.9; }
.fin-tile:active { transform: scale(0.97); }

.fin-tile.heat-flat { background: var(--fill); color: var(--text-2); }
.fin-tile.heat-none { background: transparent; color: var(--text-3); }

.fin-tile.heat-up-1 { background: var(--up-1); color: var(--up); border-color: transparent; }
.fin-tile.heat-up-2 { background: var(--up-2); color: var(--up); border-color: transparent; }
/* Past halfway the fill is dark enough that the label has to stop being the
   same colour as it, or a strong day is unreadable — which is the failure
   mode of every heatmap that colours text and background from one scale. */
.fin-tile.heat-up-3 { background: var(--up-3); color: var(--text); border-color: transparent; }
.fin-tile.heat-up-4 { background: var(--up-4); color: var(--text); border-color: transparent; }

.fin-tile.heat-down-1 { background: var(--down-1); color: var(--down); border-color: transparent; }
.fin-tile.heat-down-2 { background: var(--down-2); color: var(--down); border-color: transparent; }
.fin-tile.heat-down-3 { background: var(--down-3); color: var(--text); border-color: transparent; }
.fin-tile.heat-down-4 { background: var(--down-4); color: var(--text); border-color: transparent; }

/* ============ movers ============ */

.fin-movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fin-movers-col {
  border-radius: var(--radius-lg);
  border: 0.5px solid var(--card-edge);
  background: var(--card);
  padding: 10px 4px 6px;
  min-width: 0;
}
.fin-movers-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px 8px;
  font-size: 0.72em;
  font-weight: 600;
  color: var(--text-2);
}
.fin-movers-head .icon { width: 15px; height: 15px; }
.fin-movers-col:first-child .fin-movers-head .icon { color: var(--up); }
.fin-movers-col:last-child .fin-movers-head .icon  { color: var(--down); }

.fin-mover {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 9px;
  background: transparent;
  text-align: left;
  min-width: 0;
}
.fin-mover:active { background: var(--pressed); }
.fin-mover-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fin-mover-main b { font-size: 0.8em; font-weight: 550; }
.fin-mover-main small { font-size: 0.72em; color: var(--text-2); }

.fin-chip {
  font-size: 0.72em;
  font-weight: 650;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.fin-chip.tone-up   { background: var(--up-1); color: var(--up); }
.fin-chip.tone-down { background: var(--down-1); color: var(--down); }
.fin-chip.tone-flat { background: var(--fill); color: var(--text-2); }

/* ============ watchlist rows ============ */

.fin-rows { padding: 2px 0; }

.fin-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: transparent;
  text-align: left;
  min-width: 0;
}
.fin-row + .fin-row { border-top: 0.5px solid var(--separator); }
.fin-row:active { background: var(--pressed); }

.fin-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.fin-row-main b { font-size: 0.92em; font-weight: 550; }
.fin-row-main small { font-size: 0.74em; color: var(--text-2); }

.fin-row .fin-spark { width: 68px; flex-shrink: 0; opacity: 0.9; }

.fin-row-figures {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  min-width: 72px;
}
.fin-row-figures b { font-size: 0.92em; font-weight: 600; letter-spacing: -0.01em; }
.fin-row-figures small { font-size: 0.75em; font-weight: 600; }

/* ============ one company ============ */

.fin-detail-head { padding: 2px 2px 14px; }
.fin-detail-price { font-size: 2.1em; font-weight: 650; letter-spacing: -0.03em; }
.fin-detail-change {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92em;
  font-weight: 600;
  margin-top: 2px;
}
.fin-detail-head.tone-up .fin-detail-change   { color: var(--up); }
.fin-detail-head.tone-down .fin-detail-change { color: var(--down); }
/* The mark keeps its own quiet colour rather than the red or green of the
   day's move — it is beside the figure, not part of it. */
.fin-detail-change .ai-dot { color: var(--text-3); }
.fin-detail-when { font-size: 0.74em; color: var(--text-2); margin-top: 4px; }

/* ---------- the chart ----------
 *
 * One card holding, top to bottom: the OHLC strip, the canvas, the row of
 * indicator readings, the range chips, the style control and the house mark.
 * They are one card rather than five stacked blocks because they are one
 * instrument — changing any of them changes what the canvas shows, and a
 * control that looks like it belongs to the page rather than to the chart
 * reads as though it might change the page.
 */
.fin-chart-card {
  border-radius: var(--radius-card);
  border: 0.5px solid var(--card-edge);
  background: var(--card);
  padding: 10px 10px 8px;
  margin-bottom: 18px;
}

/* Open, high, low, close, volume. Deliberately small and deliberately
   monospaced-by-numbers: this row changes under a moving finger, and
   proportional digits make the whole strip jitter sideways as the values
   change width. */
.fin-ohlc {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 2px 4px 8px;
  font-variant-numeric: tabular-nums;
  min-height: 26px;
}
.fin-ohlc-when {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: -0.005em;
}
.fin-ohlc-cell { display: flex; align-items: baseline; gap: 3px; }
.fin-ohlc-cell small { font-size: 0.66em; color: var(--text-3); font-weight: 600; }
.fin-ohlc-cell b { font-size: 0.76em; font-weight: 600; }
.fin-ohlc-cell.tone-up b   { color: var(--up); }
.fin-ohlc-cell.tone-down b { color: var(--down); }

.fin-canvas-wrap { position: relative; }

/* The canvas sizes itself from this box, so the height lives here and not in
   JavaScript. Taller than the old 168px SVG because there are now strips
   underneath it — with volume and RSI both on, the price itself would
   otherwise be squeezed into eighty pixels. */
.fin-canvas {
  display: block;
  width: 100%;
  height: 300px;
}
@media (min-height: 780px) {
  .fin-canvas { height: 360px; }
}

.fin-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-3);
  font-size: 0.82em;
  text-align: center;
  padding: 0 24px;
}
.fin-chart-empty .icon { width: 26px; height: 26px; }

/* ---------- what the indicators currently read ---------- */

.fin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 2px 4px;
  min-height: 20px;
}
.fin-chips-none { font-size: 0.72em; color: var(--text-3); line-height: 1.4; }

.fin-chip-ind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  font-variant-numeric: tabular-nums;
}
.fin-chip-ind:active { background: var(--fill-strong); }
.fin-chip-ind small { font-size: 0.66em; font-weight: 600; color: var(--text-2); }
.fin-chip-ind b { font-size: 0.7em; font-weight: 600; }

/* The dot carries the colour the line is drawn in, so a reading can be matched
   to a line without a legend.

   These values are a copy. The originals live in DESCRIBE in
   js/indicators.js, because the canvas has to be given them as strings — a
   canvas cannot read a CSS custom property. Changing one means changing both,
   which is why each is named after the indicator rather than the colour. */
.fin-chip-ind i, .fin-ind-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-3);
}
.ind-ma50 i,  .fin-ind-swatch.ind-ma50  { background: #f0a33c; }
.ind-ma200 i, .fin-ind-swatch.ind-ma200 { background: #8f7ae5; }
.ind-ema20 i, .fin-ind-swatch.ind-ema20 { background: #3aa9f5; }
.ind-boll i,  .fin-ind-swatch.ind-boll  { background: #7f8c9b; }
.ind-vwap i,  .fin-ind-swatch.ind-vwap  { background: #25b07a; }
.ind-rsi i,   .fin-ind-swatch.ind-rsi   { background: #c58af9; }
.ind-macd i,  .fin-ind-swatch.ind-macd  { background: #3aa9f5; }
.ind-volume i, .fin-ind-swatch.ind-volume {
  background: linear-gradient(90deg, var(--up) 50%, var(--down) 50%);
}

.fin-ranges { margin: 4px 0 8px; }

.fin-chart-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fin-chart-tools .fin-styles { flex: 1; margin: 0; min-width: 0; }

.fin-ind-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  font-size: 0.78em;
  font-weight: 600;
  flex-shrink: 0;
}
.fin-ind-btn:active { background: var(--fill-strong); }
.fin-ind-btn .icon { width: 15px; height: 15px; }
.fin-ind-btn.on { background: var(--accent); color: var(--on-accent); }
.fin-ind-btn i {
  font-style: normal;
  font-size: 0.85em;
  opacity: 0.75;
}

/* ---------- choosing indicators ---------- */

.fin-ind-list { margin: 0 16px 16px; overflow: hidden; }

.fin-ind-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 13px 15px;
  text-align: left;
  background: transparent;
}
.fin-ind-row + .fin-ind-row { border-top: 0.5px solid var(--separator); }
.fin-ind-row:active { background: var(--pressed); }
/* Greyed, but the explanation underneath stays legible — the reason a toggle
   is off is the interesting part, and dimming it to 30% hides exactly the
   sentence somebody needs. */
.fin-ind-row[disabled] { opacity: 1; }
.fin-ind-row[disabled] .fin-ind-title { color: var(--text-3); }
.fin-ind-row[disabled] .fin-ind-swatch { opacity: 0.3; }

.fin-ind-swatch { margin-top: 6px; }
.fin-ind-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.fin-ind-title { font-size: 0.9em; font-weight: 550; }
.fin-ind-explain { font-size: 0.76em; color: var(--text-2); line-height: 1.4; }
.fin-ind-mark { width: 20px; flex-shrink: 0; color: var(--accent); margin-top: 3px; }
.fin-ind-mark .icon { width: 18px; height: 18px; }
.fin-ind-row.on .fin-ind-title { font-weight: 650; }

/* ---------- the house mark ----------
 *
 * Silver artwork on transparency, so one file works on both themes. It is
 * lifted slightly in the dark theme: the same silver that reads as a quiet
 * grey on white almost disappears against #0E0E10.
 */
.fin-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 2px 2px 16px;
  margin-bottom: 2px;
}
.fin-brand-mark {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.85;
}
.fin-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fin-brand-text b {
  font-size: 0.86em;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
}
.fin-brand-text small { font-size: 0.72em; color: var(--text-3); }

/* Under the chart. Small, one line, and the same convention every charting
   platform uses for the name of whoever draws it. */
.fin-brand-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px 2px;
  border-top: 0.5px solid var(--separator);
  margin-top: 8px;
}
.fin-brand-strip span { font-size: 0.66em; color: var(--text-3); }
.fin-brand-word {
  height: 13px;
  width: auto;
  opacity: 0.75;
  flex-shrink: 0;
}

.fin-brand-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
}
.fin-brand-foot .fin-brand-word { height: 17px; opacity: 0.6; }
.fin-brand-foot .fin-source { text-align: center; }

:root[data-appearance="dark"] .fin-brand-mark { opacity: 1; }
:root[data-appearance="dark"] .fin-brand-word { opacity: 0.9; }

/* SYRIX's read of one company sits between the chart and the figures, so the
   sentence about what the chart shows is next to the chart it is about. */
.fin-note { margin-bottom: 18px; }

.fin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--separator);
  border: 0.5px solid var(--card-edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 18px;
}
.fin-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 10px;
  background: var(--card);
  min-width: 0;
}
.fin-stat small { font-size: 0.68em; color: var(--text-2); }
.fin-stat b {
  font-size: 0.86em;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============ finding a company ============ */

.fin-results { min-height: 40px; }
.fin-results-note {
  padding: 14px 20px 18px;
  font-size: 0.82em;
  color: var(--text-2);
  text-align: center;
}

.fin-source { padding-bottom: 26px; }

/* ============ the home-screen widget ============ */

.fin-widget-rows { display: flex; flex-direction: column; }
.fin-widget-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  background: transparent;
  text-align: left;
  min-width: 0;
}
.fin-widget-row + .fin-widget-row { border-top: 0.5px solid var(--separator); }
.fin-widget-row:active { background: var(--pressed); }
.fin-widget-row .fin-widget-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fin-widget-row .fin-widget-main b { font-size: 0.88em; font-weight: 550; }
.fin-widget-row .fin-widget-main small { font-size: 0.72em; color: var(--text-2); }

/* ============ Ask SYRIX ============
 *
 * At the bottom of every Finance section and every company page. It is a card
 * like the ones above it rather than a floating button or a second chat
 * window, because it is part of reading the page: you look at the chart, you
 * wonder something, you ask, and the answer arrives under the chart instead of
 * on a screen that has replaced it.
 *
 * Nothing here is a new visual language. The mark, the thinking dots, the
 * markdown bubble and the source pills are all lifted straight out of
 * css/syrix.css so a reply on this screen looks like a reply anywhere else.
 */
.fin-ask {
  margin: 18px 16px 4px;
  padding: 14px 14px 6px;
  border-radius: var(--radius-card);
  background: var(--card);
  border: 0.5px solid var(--card-edge);
}

.fin-ask-head { display: flex; align-items: center; gap: 10px; }
.fin-ask-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--text);
  flex-shrink: 0;
}
.fin-ask-mark .icon { width: 15px; height: 15px; }
.fin-ask-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fin-ask-title b { font-size: 0.96em; font-weight: 600; letter-spacing: -0.015em; }
.fin-ask-title small {
  font-size: 0.74em;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The suggestions scroll sideways rather than wrapping to three rows — four
   full questions stacked would be taller than the answer they produce. */
.fin-ask-chips {
  display: flex;
  gap: 7px;
  margin: 12px -14px 0;
  padding: 0 14px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fin-ask-chips::-webkit-scrollbar { display: none; }
.fin-ask-chip {
  flex-shrink: 0;
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  border: 0.5px solid var(--separator);
  background: transparent;
  color: var(--text);
  font-size: 0.78em;
  white-space: nowrap;
}
.fin-ask-chip:active { background: var(--pressed); transform: scale(0.97); }

.fin-ask-out {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 0.5px solid var(--separator);
}
.fin-ask-q {
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 9px;
}
/* .syrix-bubble already carries the markdown rules; this only undoes the
   bubble's own background, which belongs in a thread and not in a card. */
.fin-ask-answer {
  padding: 0;
  background: none;
  border: 0;
  max-width: 100%;
  font-size: 0.94em;
}
.fin-ask-working {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 0 6px;
  color: var(--text-2);
  font-size: 0.86em;
}
.fin-ask-error {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.84em;
  color: var(--text-2);
  line-height: 1.45;
}
.fin-ask-error .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }

.fin-ask-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
}
.fin-ask-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--fill);
  color: var(--text);
  font-size: 0.9em;
}
.fin-ask-input::placeholder { color: var(--text-3); }
.fin-ask-send {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
}
.fin-ask-send .icon { width: 18px; height: 18px; }
.fin-ask-send:active { transform: scale(0.9); }
.fin-ask-send.stop { background: var(--fill-strong); color: var(--text); }

.fin-ask .card-note { padding: 10px 0 8px; }