.chat-visual{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card);min-width:0;overflow:hidden}
.chat-visual-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.chat-visual-head h3{margin:0;color:var(--text);font-size:15px;line-height:1.4;font-weight:700;overflow-wrap:anywhere}
.chat-visual-head p,.chat-visual-note,.chat-visual-records,.chat-visual-captured{margin:5px 0 0;color:var(--dim);font-size:12px;line-height:1.5}
.chat-visual-status{flex-shrink:0;font-size:10px;font-weight:700;padding:4px 7px;border:1px solid var(--line);border-radius:6px;color:var(--dim)}
.chat-visual-status.is-stale{color:var(--warn);border-color:var(--warn)}
.chat-visual-readout{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin:18px 0 0}
.chat-visual-readout span{font-size:11px;color:var(--dim);overflow-wrap:anywhere}
.chat-visual-readout b{min-width:0;max-width:100%;overflow-wrap:anywhere;font-family:var(--mono);font-size:20px;font-weight:650;color:var(--text)}
.chat-visual-plot{display:block;width:100%;height:auto;max-height:240px;overflow:visible}
.chat-visual-line{fill:none;stroke:var(--act);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.chat-visual-baseline,.chat-visual-cursor{stroke:var(--line);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.chat-visual-point{fill:var(--act);stroke:var(--card);stroke-width:2;vector-effect:non-scaling-stroke}
.chat-visual-axis{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--dim);font-family:var(--mono)}
.chat-visual-scrubber{display:flex;align-items:center;gap:12px;margin:8px 0 12px;font-size:11px;color:var(--dim)}
.chat-visual-scrubber span{flex-shrink:0}.chat-visual-scrubber input[type=range]{appearance:auto;-webkit-appearance:auto;min-width:0;flex:1;height:36px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;accent-color:var(--act)}
.chat-visual-captured{color:var(--faint);font-size:10px;margin-top:10px}
.chat-visual footer{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px;margin-top:14px}
.chat-visual-data{flex-basis:100%;font-size:12px;color:var(--dim)}
.chat-visual-data summary{cursor:pointer;min-height:32px;padding:6px 0}
.chat-visual-data>div{max-height:240px;overflow:auto;overscroll-behavior:contain}
.chat-visual-data table{width:100%;border-collapse:collapse;font-size:11px;font-family:var(--mono)}
.chat-visual-data caption{text-align:left;margin:6px 0;font-family:var(--font);color:var(--dim)}
.chat-visual-data th,.chat-visual-data td{padding:7px 4px;text-align:left;border-bottom:1px solid var(--line)}
.chat-visual-data th:last-child,.chat-visual-data td:last-child{text-align:right}
.chat-visual-error{padding:12px;color:var(--dim);border:1px solid var(--line);border-radius:10px;font-size:13px}
@media(max-width:359px){.chat-visual{padding:12px}.chat-visual-head{gap:6px}.chat-visual-readout b{font-size:17px}}
@media(forced-colors:active){.chat-visual-line,.chat-visual-baseline,.chat-visual-cursor{stroke:CanvasText}.chat-visual-point{fill:CanvasText}}
/* Categorical colours for Chat figures, validated (OKLab CVD/normal-vision
   separation) against each theme's card surface: #171E2B dark, #FFFFFF light.
   Light slots 3–5 are under 3:1, so every figure carries a value legend or
   labels and a data table. */
:root{--viz-1:#3987e5;--viz-2:#d95926;--viz-3:#199e70;--viz-4:#c98500;--viz-5:#d55181;--viz-6:#008300;--viz-7:#9085e9;--viz-8:#e66767}
html[data-theme="light"]{--viz-1:#2a78d6;--viz-2:#eb6834;--viz-3:#1baf7a;--viz-4:#eda100;--viz-5:#e87ba4;--viz-6:#008300;--viz-7:#4a3aa7;--viz-8:#e34948}
.chat-visual-status.is-analyst{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
/* Candles: Pantau's lens colours, a soft band behind blue and orange turns. */
.cc-plot,.cf-plot{position:relative;margin-top:10px}
.cc-svg{display:block;width:100%;height:190px}
.cc-band{fill:var(--bar);opacity:.13}
.cc-wick{stroke:var(--bar);stroke-width:1;vector-effect:non-scaling-stroke}
.cc-body{fill:var(--bar)}
.cc-body.is-down{fill:color-mix(in srgb,var(--bar) 55%,var(--card));stroke:var(--bar);stroke-width:1;vector-effect:non-scaling-stroke}
.cc-last{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.cc-price{position:absolute;right:0;padding:1px 5px;border-radius:5px;background:color-mix(in srgb,var(--card) 82%,transparent);color:var(--dim);font:600 10px/1.4 var(--mono);pointer-events:none}
.cc-price.is-hi{top:0}.cc-price.is-lo{bottom:0}
.cf-plot.is-line .cc-price{right:auto;left:0}
.cc-readout small{flex-basis:100%;font-size:11px;color:var(--dim)}
.cc-phrase{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--text)!important}
.cc-phrase::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--bar);flex:0 0 auto}
.cc-ohlc{font-family:var(--mono)}
.cc-key,.cf-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0;padding:0;list-style:none;font-size:11px;color:var(--dim)}
.cc-key{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.cc-key li,.cf-key li{display:inline-flex;align-items:center;gap:6px}
.cc-key i{width:9px;height:9px;border-radius:2px;background:var(--bar)}
.cf-key i{width:12px;height:3px;border-radius:2px}
/* Figures. */
.cf-svg{display:block;width:100%;height:auto;max-height:220px;overflow:visible}
.cf-bar,.cf-slice,.cf-dot{cursor:pointer}
.cf-bar.is-on,.cf-dot.is-on{filter:brightness(1.18)}
.cf-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cf-dot{stroke:var(--card);stroke-width:2;vector-effect:non-scaling-stroke}
.cf-slice{stroke:var(--card);stroke-width:2}
.cf-slice.is-on{opacity:.82}
.cf-total{fill:var(--text);font:700 13px var(--mono)}
.cf-xlabels{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin-top:4px;font:10px var(--mono);color:var(--faint);text-align:center}
.cf-xlabels span{overflow:hidden;white-space:nowrap;text-overflow:clip}
.cf-round{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);align-items:center;gap:14px;margin-top:12px}
.cf-pie{width:100%;height:auto;display:block}
.cf-legend{margin:0;padding:0;list-style:none;display:grid;gap:7px;font-size:12px}
.cf-legend li{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:center;gap:8px;color:var(--text);cursor:pointer}
.cf-legend li i{width:10px;height:10px;border-radius:3px}
.cf-legend li span{min-width:0;overflow-wrap:anywhere}
.cf-legend li b{font:600 12px var(--mono)}
.cf-legend li small{min-width:44px;text-align:right;color:var(--dim);font:11px var(--mono)}
.cf-legend li.is-on span{font-weight:700}
.cf-hbars{display:grid;gap:8px;margin-top:12px}
.cf-hrow{display:grid;grid-template-columns:minmax(64px,34%) minmax(0,1fr) auto;align-items:center;gap:10px;font-size:12px;cursor:pointer}
.cf-hlabel{min-width:0;color:var(--text);overflow-wrap:anywhere}
.cf-htrack{position:relative;height:14px}
.cf-hbar{position:absolute;top:2px;height:10px;border-radius:0 4px 4px 0}
.cf-hbar.is-neg{border-radius:4px 0 0 4px}
.cf-hbar.is-multi{height:4px}.cf-hbar.is-multi:nth-of-type(2){top:7px}.cf-hbar.is-multi:nth-of-type(3){top:12px}
.cf-hzero{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--line)}
.cf-hvalue{font:600 11.5px var(--mono);color:var(--text);text-align:right;white-space:nowrap}
.cf-hrow.is-on .cf-hlabel{font-weight:700}
@media(max-width:400px){.cf-round{grid-template-columns:minmax(0,1fr)}.cf-pie{max-width:180px;margin:0 auto}.cf-hrow{grid-template-columns:minmax(56px,32%) minmax(0,1fr) auto;gap:8px}}
@media(forced-colors:active){.cc-body,.cf-bar,.cf-slice{fill:CanvasText}.cc-wick,.cf-line{stroke:CanvasText}}
/* Trade plan card: one stock's levels aligned in columns, with distances
   and R multiples computed by the app. */
.chat-plan{margin:16px 0;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);min-width:0}
.chat-plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.chat-plan-head h3{margin:0;font-size:15px;font-weight:750;color:var(--text)}
.chat-plan-head small{display:block;margin-top:2px;font-size:11.5px;color:var(--dim)}
.chat-plan-side{flex:0 0 auto;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:750;letter-spacing:.02em;text-transform:uppercase;border:1px solid currentColor}
.chat-plan-side.is-buy{color:var(--up)}.chat-plan-side.is-sell{color:var(--down)}.chat-plan-side.is-hold{color:var(--dim)}
.chat-plan-rows{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:14px;row-gap:0;margin:0}
.chat-plan-rows>div{display:contents}
.chat-plan-rows dt,.chat-plan-rows dd{margin:0;padding:8px 0;border-top:1px solid var(--lineS);font-size:13px}
.chat-plan-rows>div:first-child dt,.chat-plan-rows>div:first-child dd{border-top:0}
.chat-plan-rows dt{color:var(--dim)}
.chat-plan-rows dd{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--text);text-align:right;white-space:nowrap}
.chat-plan-rows dd.is-value{text-align:left;font-weight:650}
.chat-plan-rows dd.is-up{color:var(--up)}.chat-plan-rows dd.is-down{color:var(--down)}.chat-plan-rows dd.is-dim{color:var(--faint)}
.chat-plan-words{display:grid;gap:6px;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--lineS);font-size:12.5px;line-height:1.5;color:var(--text)}
.chat-plan-words p{margin:0}
.chat-plan-words b{color:var(--dim);font-weight:650;margin-right:6px}
.chat-plan footer{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:360px){.chat-plan{padding:12px}.chat-plan-rows{column-gap:9px}.chat-plan-rows dt,.chat-plan-rows dd{font-size:12px}}
/* Markdown tables in answers. */
.cm-table-wrap{margin:10px 0 0;overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--lineS);border-radius:12px}
.cm-table{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.4}
.cm-table th,.cm-table td{padding:8px 10px;text-align:left;border-top:1px solid var(--lineS);white-space:nowrap}
.cm-table thead th{border-top:0;color:var(--dim);font-size:11px;font-weight:650;background:var(--cardS)}
.cm-table td.is-num,.cm-table th.is-num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.cm-table td:first-child{font-weight:650;color:var(--text)}
/* A free account's questions left today. */
.chat-quota{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;margin:4px 0 0;color:var(--faint);font-size:11.5px;text-align:center}
.chat-quota button{min-height:32px;padding:0 4px;color:var(--act);font-size:11.5px;font-weight:700;background:none}
/* Data tables fit the card: full words when it is wide, short headers,
   dates and colour swatches when it is narrow (a phone). */
.chat-visual{container-type:inline-size}
.chat-visual-data summary{display:inline-flex;align-items:center;gap:6px}
.cv-ic{width:14px;height:14px;flex:0 0 auto}
.fit-n{display:none}
.cc-swatch{display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:2px;background:var(--bar);vertical-align:middle}
.chat-visual-data td{white-space:nowrap}
@container (max-width:440px){
  .chat-visual-data .fit-w{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .chat-visual-data .fit-n{display:inline}
  .cc-table th,.cc-table td{padding:6px 3px}
  .cc-table td:last-child,.cc-table th:last-child{text-align:center;width:18px}
  .cc-table .cc-swatch{margin:0}
}
/* Chat is home. The menu opens a drawer with every page and conversation,
   as a chat app's sidebar does; on a desktop the rail does that job. */
.chat-menu-btn{position:relative;margin-left:-8px}
.chat-menu-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--act);box-shadow:0 0 0 2px var(--ink)}
@media(min-width:1100px){.chat-menu-btn{display:none}}
.chat-drawer-wrap{position:fixed;inset:0;z-index:72;display:flex}
.chat-drawer{position:relative;display:flex;flex-direction:column;gap:6px;width:min(86vw,330px);height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(12px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));background:var(--card);border-right:1px solid var(--line);
  box-shadow:12px 0 40px color-mix(in srgb,var(--ink) 40%,transparent);animation:chatDrawerIn .22s var(--e-out)}
@keyframes chatDrawerIn{from{transform:translateX(-24px);opacity:.6}}
.chat-drawer-head{display:flex;align-items:center;gap:10px;padding:2px 2px 8px}
.chat-drawer-head b{flex:1;font-size:16px;letter-spacing:.06em;color:var(--text)}
.chat-drawer-new,.chat-drawer-pages button,.chat-drawer-chats button,.chat-drawer-foot button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;
  padding:0 12px;border-radius:12px;background:none;color:var(--text);font-size:14px;font-weight:600;text-align:left}
.chat-drawer-new{background:var(--accentTintSoft);color:var(--act);font-weight:700}
.chat-drawer-new svg,.chat-drawer-foot svg{width:18px;height:18px;flex:0 0 auto}
.chat-drawer-pages,.chat-drawer-chats{margin:0;padding:0;list-style:none}
.chat-drawer-ic{display:inline-flex;width:20px;height:20px;color:var(--dim)}.chat-drawer-ic svg{width:20px;height:20px}
.chat-drawer-pages span:nth-child(2){flex:1}
.chat-drawer-pages small{color:var(--faint);font:600 12px var(--mono)}
.chat-drawer-chats button{font-weight:500;color:var(--dim)}
.chat-drawer-chats button span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-drawer-chats button[aria-current="true"]{background:var(--btn);color:var(--text)}
.chat-unread-dot{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--actFill);color:var(--onAct);font:700 11px/20px var(--mono);text-align:center}
.chat-drawer-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--lineS)}
.chat-drawer-foot button{color:var(--dim);font-weight:500}
@media(hover:hover){.chat-drawer-pages button:hover,.chat-drawer-chats button:hover,.chat-drawer-foot button:hover{background:var(--btn)}}
@media(prefers-reduced-motion:reduce){.chat-drawer{animation:none}}
/* The first unread answer, as in a messaging app. */
.chat-unread-mark{display:flex;align-items:center;gap:10px;margin:4px 0;color:var(--act);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;scroll-margin-top:72px}
.chat-unread-mark::before,.chat-unread-mark::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--act) 45%,transparent)}
/* Motion: a sent message and the answer bubble rise in once; the answer's
   charts, plan and buttons follow when it lands. Elements already on the
   page never replay it. The live answer types at a steady pace behind a
   soft caret. Reduced motion turns all of it off. */
@keyframes chatRise{from{opacity:0;transform:translateY(8px)}}
@keyframes chatCaret{0%,45%{opacity:1}50%,100%{opacity:0}}
.cm-user.is-new,.cm-live{animation:chatRise .32s var(--e-out) both}
.cm-extras.is-new>*{animation:chatRise .36s var(--e-out) both}
.cm-extras.is-new>*:nth-child(2){animation-delay:.06s}.cm-extras.is-new>*:nth-child(n+3){animation-delay:.12s}
.cm-extras:empty{display:none}
.chat-stream.is-typing>:last-child::after{content:"";display:inline-block;width:7px;height:.95em;margin-left:3px;border-radius:2px;vertical-align:-1px;
  background:var(--act);animation:chatCaret 1s steps(1) infinite}
.chat-think+.cm-text,.chat-think+.chat-stream{margin-top:10px}
.cm-ai .chat-think{margin:0 0 4px}
@media(prefers-reduced-motion:reduce){.cm-user.is-new,.cm-live,.cm-extras.is-new>*{animation:none}.chat-stream.is-typing>:last-child::after{animation:none}}