/* Colour tokens; dark values mirror the light ones. */
:root {
  --paper:#fff; --bg:#f4f4f5; --ink:#0b0b0c; --muted:#6b6e75; --line:#dcdce0;
  --red:#e30611; --red-soft:#ffe8e9; --red-dark:#a5050e;
  --ok:#0a7d4a; --ok-soft:#e6f4ec; --blue:#2c4a7c; --blue-soft:#e9eef7;
  --warn:#b8860b; --warn-bg:#fdf8ec; --band:rgba(184,134,11,.28);
  --bubble:#f4f4f5; --user:#ffe8e9; --shadow:0 1px 2px rgba(0,0,0,.04);
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#151518; --bg:#0b0b0c; --ink:#f2f2f4; --muted:#9a9da4; --line:#2e2f33;
    --red:#ff3b45; --red-soft:#2a1315; --red-dark:#ff6a72;
    --ok:#4cc48a; --ok-soft:#10261b; --blue:#8fb0e8; --blue-soft:#141d2c;
    --warn:#e0b262; --warn-bg:#231d10; --band:rgba(224,178,98,.3);
    --bubble:#1d1e22; --user:#2a1315; --shadow:none;
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --paper:#151518; --bg:#0b0b0c; --ink:#f2f2f4; --muted:#9a9da4; --line:#2e2f33;
  --red:#ff3b45; --red-soft:#2a1315; --red-dark:#ff6a72;
  --ok:#4cc48a; --ok-soft:#10261b; --blue:#8fb0e8; --blue-soft:#141d2c;
  --warn:#e0b262; --warn-bg:#231d10; --band:rgba(224,178,98,.3);
  --bubble:#1d1e22; --user:#2a1315; --shadow:none;
  color-scheme:dark;
}

* { box-sizing:border-box }
[hidden] { display:none !important }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden }
button, input, select { font:inherit; color:inherit }
a { color:var(--blue) }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px }
.n, .num, td.n, .tile .v { font-variant-numeric:tabular-nums }

.wrap { max-width:1640px; margin:0 auto; padding:22px 16px 48px }

.link { background:none; border:0; padding:0; color:var(--red); cursor:pointer; font-size:inherit;
  text-decoration:underline; text-underline-offset:2px }

.tabs { display:flex; gap:4px; margin:0 0 14px; border-bottom:1px solid var(--line) }
.tab { appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  padding:10px 16px; font-size:14.5px; font-weight:600; color:var(--muted); cursor:pointer;
  margin-bottom:-1px }
.tab:hover { color:var(--ink) }
.tab.on { color:var(--ink); border-bottom-color:var(--red) }
.import-link { margin-left:auto; text-decoration:none }

/* ---------- three-column stage ---------- */
.stage { display:grid; gap:14px; align-items:start;
  grid-template-columns:280px minmax(0,1fr) 420px; grid-template-areas:"pick main agent" }
.picker { grid-area:pick }
.main { grid-area:main; min-width:0 }
.agent { grid-area:agent; min-width:0 }
@media (max-width:1239.98px) {
  .stage { grid-template-columns:280px minmax(0,1fr); grid-template-areas:"pick main" "pick agent" }
}
@media (max-width:899.98px) {
  .stage { grid-template-columns:minmax(0,1fr); grid-template-areas:"pick" "main" "agent" }
}

/* ---------- picker ---------- */
.picker { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:14px;
  display:flex; flex-direction:column; min-width:0; position:sticky; top:12px }
.picker input[type=search], .picker select { width:100%; font-size:13px; padding:7px 10px;
  border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink);
  margin-bottom:8px }
.picker .note { font-size:11.5px; color:var(--muted); margin:10px 0 0; line-height:1.4 }
.check { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted);
  margin:0 0 8px; cursor:pointer }
.list { min-height:160px; max-height:calc(100vh - 290px); overflow:auto;
  border-top:1px solid var(--line); overscroll-behavior:contain }
@media (max-width:899.98px) {
  .picker { position:static }
  .list { max-height:48vh }
}
.row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start;
  width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line);
  padding:8px 6px; cursor:pointer; font-size:13px; line-height:1.3; border-radius:0 }
.row:hover { background:var(--bg) }
.row:focus-visible { outline:2px solid var(--red); outline-offset:-2px }
.row.on { background:var(--red-soft) }
.row b { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-weight:600; overflow-wrap:anywhere }
.row code { display:block; color:var(--muted); font-family:inherit; font-size:11.5px; line-height:1.35; margin-top:2px;
  font-variant-numeric:tabular-nums }
.row-empty, .row-more { padding:10px 6px; color:var(--muted); font-size:12.5px }
.delta { color:var(--red); font-weight:700; font-size:12px; white-space:nowrap;
  font-variant-numeric:tabular-nums }
.delta.good { color:var(--ok) }
.badge { display:inline-block; min-width:26px; text-align:center; padding:1px 7px; border-radius:999px;
  background:var(--ok-soft); color:var(--ok); font-weight:700; font-size:12px;
  font-variant-numeric:tabular-nums }
.tag { display:inline-block; font-size:10.5px; padding:0 6px; border:1px solid var(--line);
  border-radius:999px; color:var(--muted); margin:3px 4px 0 0; line-height:1.6; white-space:nowrap }
.tag.svc { border-color:var(--warn); color:var(--warn) }

.chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px }
.chip { font-size:12px; padding:5px 10px; border:1px solid var(--line); border-radius:999px;
  background:var(--paper); color:var(--ink); cursor:pointer; line-height:1.3; text-align:left }
.chip:hover:not(:disabled) { border-color:var(--red) }
.chip.on { background:var(--red); border-color:var(--red); color:#fff }
.chip:disabled { opacity:.45; cursor:default }

/* ---------- card ---------- */
.card { background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px; margin-bottom:14px; min-width:0 }
@media (max-width:599.98px) { .card { padding:14px 12px } }
.card h2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-size:18px; line-height:1.3; margin:0 0 2px; letter-spacing:-.015em; overflow-wrap:anywhere }
.card .sub { color:var(--muted); font-size:12.5px; margin:0 0 14px }
.card h3 { font-size:15px; margin:22px 0 8px; letter-spacing:-.01em }
.card .note { font-size:12px; color:var(--muted); margin:8px 0 0 }
.empty-line { color:var(--muted); font-size:13px; margin:10px 0 }

.four { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:6px }
@container main (min-width:760px) { .four { grid-template-columns:repeat(4,minmax(0,1fr)) } }
.four .tile { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:12px;
  padding:11px 12px 11px 15px; min-height:82px; background:var(--paper) }
.four .tile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--line) }
.four .tile.our::before { background:var(--red) }
.four .tile.mkt::before { background:var(--ok) }
.four .tile.paid::before { background:var(--blue) }
.four .tile .v { font-size:21px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  overflow-wrap:anywhere }
.four .tile .k { font-size:11.5px; color:var(--muted); line-height:1.3; margin-top:3px }
.four .tile.warn { border-color:var(--red); background:var(--red-soft) }
.four .tile.warn::before { background:var(--red) }
.four .tile.warn .v { color:var(--red) }
.four .tile.good { border-color:var(--ok); background:var(--ok-soft) }
.four .tile.good::before { background:var(--ok) }
.four .tile.good .v { color:var(--ok) }
.four .tile .v.txt { font-size:15px; letter-spacing:0 }
@media (max-width:399.98px) { .four .tile .v { font-size:18px } }

/* ---------- tables ---------- */
.tbl { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100% }
table { width:100%; border-collapse:collapse; font-size:13px }
td, th { padding:7px 8px; vertical-align:top; text-align:left }
th { font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; border-bottom:1px solid var(--line); white-space:nowrap }
td { border-bottom:1px solid var(--line) }
tr:last-child td { border-bottom:0 }
th.r, td.n { text-align:right }
td.n { font-variant-numeric:tabular-nums; white-space:nowrap }
table.offers { min-width:560px }
table.offers td:first-child { font-weight:600 }
.mech { display:inline-block; font-size:11px; padding:1px 7px; border:1px solid var(--line);
  border-radius:999px; margin:0 4px 3px 0; white-space:nowrap }
.cond { color:var(--muted); font-size:11.5px }
.susp { color:var(--warn); font-size:11.5px; font-weight:400 }
tr.cheap, tr.cheap td { background:var(--ok-soft) }
table.salon-t { min-width:480px }
tr.susp-row td { color:var(--muted) }
tr.susp-row td:first-child { font-weight:400 }

.kv { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin:0 0 10px }
.kv div { border:1px solid var(--line); border-radius:10px; padding:8px 10px }
.kv b { display:block; font-size:16px; font-variant-numeric:tabular-nums }
.kv span { display:block; font-size:11.5px; color:var(--muted); line-height:1.3 }

.lnk { background:none; border:0; padding:0; color:var(--blue); cursor:pointer; text-align:left;
  font-size:inherit; text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--blue) 40%, transparent);
  text-underline-offset:2px; overflow-wrap:anywhere }
.lnk:hover { text-decoration-color:currentColor }

.rcpt { border:1px solid var(--line); border-radius:12px; margin:0 0 10px; overflow:hidden }
.rcpt-h { font-size:12px; color:var(--muted); padding:6px 10px; background:var(--bg);
  border-bottom:1px solid var(--line) }
table.rc { min-width:520px; font-size:12.5px }
table.rc td:first-child { overflow-wrap:anywhere }
/* the discounts column must not squeeze the product name into a word per line */
table.rc td.c-name, table.salon-t td.c-name { min-width:170px }
table.rc td.c-full .disc { white-space:normal }
tr.hl, tr.hl td { background:var(--red-soft); font-weight:600 }
.disc { display:inline-block; font-size:11px; padding:0 6px; border-radius:999px;
  background:var(--bg); border:1px solid var(--line); margin:0 4px 2px 0; white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; vertical-align:top }

.bars { display:grid; gap:6px; margin-bottom:12px }
.bar-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(60px,40%) 42px; gap:8px;
  align-items:center; font-size:13px }
.bar-row > span:first-child { overflow-wrap:anywhere }
.bar { height:10px; background:var(--line); border-radius:5px; overflow:hidden }
.bar i { display:block; height:100%; background:var(--blue) }
.bar.a i { background:var(--red) }
.bar-row .num { text-align:right; color:var(--muted) }
ul.plain { list-style:none; margin:0; padding:0 }
ul.plain li { display:flex; justify-content:space-between; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--line); font-size:13px }
ul.plain li:last-child { border-bottom:0 }
ul.plain li .num { color:var(--muted); white-space:nowrap }

.terms { font-size:13px; line-height:1.5; padding:10px 12px; border-radius:10px;
  background:var(--bg); margin:10px 0 0; overflow-wrap:anywhere }
.terms div + div { margin-top:4px }
.two { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px }
.two > div { min-width:0 }
#psum .card h3:first-child { margin-top:0 }
#psum tr[data-promo] { cursor:pointer }
#psum tr[data-promo]:hover td { background:var(--bg) }
#psum tr.on td { background:var(--red-soft) }
.total { margin-top:12px; padding:10px 13px; border-radius:11px; background:var(--red-soft);
  font-size:13.5px; border-left:3px solid var(--red) }

/* Narrow middle column (phones, and 1240-1500px screens where the card is ~550px wide):
   table rows become small cards so prices never hide behind a horizontal scroll.
   Keyed to the column width, not the screen. */
.main { container-type:inline-size; container-name:main }
@container main (max-width:680px) {
  table.stack { min-width:0 !important }
  table.stack thead { display:none }
  table.stack tr { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px;
    padding:8px 8px; border-bottom:1px solid var(--line) }
  table.stack tr:last-child { border-bottom:0 }
  table.stack td { border:0; padding:1px 0; min-width:0 }
  table.stack td[data-l]::before { content:attr(data-l) " "; color:var(--muted); font-size:11px;
    font-weight:400 }
  table.stack .c-site { grid-row:1; grid-column:1 }
  table.stack .c-link { grid-row:1; grid-column:2 }
  table.stack .c-mech { grid-row:2; grid-column:1 / -1; padding:3px 0 }
  table.stack .c-base { grid-row:3; grid-column:1; text-align:left }
  table.stack .c-best { grid-row:3; grid-column:2 }
  table.stack .c-name, table.stack .c-full { grid-column:1 / -1 }
  table.stack .c-a { text-align:left }
  .disc { white-space:normal }
}
@media (max-width:599.98px) {
  #model { max-width:112px }
}

/* ---------- agent ---------- */
.agent { background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:14px 14px 14px; display:flex; flex-direction:column; position:sticky; top:12px;
  height:calc(100vh - 24px); min-height:420px }
@media (max-width:1239.98px) { .agent { position:static; height:auto } }
.agent .head { display:flex; align-items:center; gap:8px; margin-bottom:10px; min-width:0 }
.who { min-width:0; flex:1 }
.who b { display:block; font-size:15px; line-height:1.25; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis }
.who span { display:block; color:var(--muted); font-size:11.5px; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; min-height:1.2em }
#model { font-size:12px; padding:5px 6px; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); color:var(--ink); max-width:140px; min-width:0 }
.icon { width:30px; height:30px; flex:0 0 auto; display:inline-flex; align-items:center;
  justify-content:center; border:1px solid var(--line); border-radius:8px; background:var(--paper);
  color:var(--muted); cursor:pointer; padding:0 }
.icon:hover { color:var(--ink) }
#chips { min-height:28px }
/* The panel is a fixed-height column: only the message list may shrink and scroll.
   Without this the chip block was squeezed to one row and messages covered the rest. */
.agent > .head, .agent > #chips, .agent > #status { flex:0 0 auto }
.agent > #msgs { flex:1 1 auto; min-height:0 }
#chips .muted { font-size:12px; color:var(--muted) }
#status { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted);
  margin:0 0 8px; min-height:18px }
#status.idle { visibility:hidden }
#status i { width:7px; height:7px; border-radius:50%; background:var(--red); flex:0 0 auto;
  animation:pulse 1.2s ease-in-out infinite }
#status b { font-weight:400; opacity:.75; font-variant-numeric:tabular-nums }
@keyframes pulse { 50% { opacity:.25 } }
@media (prefers-reduced-motion: reduce) { #status i { animation:none } }

#msgs { flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:8px;
  border-top:1px solid var(--line); padding-top:10px; overscroll-behavior:contain }
@media (max-width:1239.98px) { #msgs { flex:none; min-height:180px; max-height:70vh } }
.msgs-empty { color:var(--muted); font-size:13px; margin:auto 0; text-align:center; padding:20px 10px }
.msg { max-width:92%; padding:8px 12px; border-radius:14px; font-size:14px; line-height:1.5;
  white-space:pre-wrap; overflow-wrap:anywhere }
.msg.user { align-self:flex-end; background:var(--user); color:var(--ink);
  border-bottom-right-radius:4px }
.msg.bot { align-self:flex-start; background:var(--bubble); color:var(--ink);
  border:1px solid var(--line); border-bottom-left-radius:4px }
.msg.err { align-self:flex-start; background:var(--red-soft); color:var(--red-dark);
  border:1px solid var(--red); border-bottom-left-radius:4px }
.step { font-size:11.5px; color:var(--muted); line-height:1.4; overflow-wrap:anywhere; padding:0 2px }
.step a { color:var(--muted) }
.sitecheck { align-self:flex-start; max-width:92%; box-sizing:border-box; min-width:0; overflow-wrap:anywhere; border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:10px; padding:8px 12px; font-size:13px; line-height:1.4; background:var(--paper) }
.sitecheck-h { color:var(--muted); font-size:12px; margin-bottom:4px }
.sitecheck a { font-weight:600; color:var(--ink) }
.sitecheck ul { margin:2px 0 6px; padding-left:18px }
.step.ctx { align-self:center; text-align:center; padding:2px 10px; border-top:1px dashed var(--line);
  width:100% }
.think { align-self:flex-start; max-width:92%; min-width:0 }
.think summary { cursor:pointer; color:var(--muted); font-size:12px; list-style:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.think summary::-webkit-details-marker { display:none }
.think summary::before { content:"▸ " }
.think[open] summary::before { content:"▾ " }
.think div { margin-top:6px; font-size:12px; line-height:1.5; color:var(--muted); max-height:220px;
  overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--bg);
  border-radius:8px; padding:6px 9px }

/* One block per question: its steps, reasoning and answer stay together. */
#msgs .turn { display:flex; flex-direction:column; gap:8px }
#msgs .msg.user .subj { display:block; font-size:11px; opacity:.7; margin-top:2px; font-weight:400 }

/* ---------- desktop: app layout ----------
   From 1240px the page is exactly one screen high: header on top, three columns below, each
   scrolling on its own. Before this the list and the agent ran far below a short card and the
   middle column did not use the width of wide screens. */
@media (min-width:1240px) {
  .wrap { max-width:2400px; height:100vh; height:100dvh; display:flex; flex-direction:column;
    padding-bottom:14px; box-sizing:border-box }
  .stage { flex:1 1 auto; min-height:0; align-items:stretch;
    grid-template-columns:clamp(280px, 17vw, 360px) minmax(0,1fr) clamp(400px, 26vw, 560px) }
  .picker, .agent { position:static; top:auto; height:auto; min-height:0 }
  .picker .list { flex:1 1 auto; min-height:0; max-height:none }
  .main { overflow:auto; min-height:0; overscroll-behavior:contain; border-radius:16px }
}

/* Promo summaries: fit the card at any width instead of a fixed 360px minimum. */
table.sum { width:100%; table-layout:fixed }
table.sum th, table.sum td { overflow-wrap:anywhere }
table.sum th { white-space:normal; hyphens:auto }
table.sum .c-share { width:34% }
@media (max-width:599.98px) {
  table.sum { font-size:12.5px }
  table.sum th, table.sum td { padding-left:4px; padding-right:4px }
}

/* Desktop: every pixel of height goes to the columns (720px screens in stores). */
@media (min-width:1240px) {
  .wrap { padding-top:10px }
  .tabs { margin-bottom:10px }
  .tab { padding-top:6px; padding-bottom:7px }
}
/* List filters as a 2x2 grid: one row less, more rows of the list visible. */
#filters, #pfilters { display:grid; grid-template-columns:1fr 1fr; gap:5px }
#filters .chip, #pfilters .chip { justify-content:center; text-align:center; padding-left:6px; padding-right:6px }
#pfilters .chip:last-child:nth-child(odd) { grid-column:1 / -1 }

/* No jumps: scroll areas always keep room for their scrollbar, so content width does not change
   when a long card or list gets one. */
.main, .list, #msgs { scrollbar-gutter:stable }
@media (min-width:1240px) {
  .wrap { padding-top:14px }
  /* The visible pane fills the column: a short card reaches the bottom instead of floating. */
  .main > [id^="pane"]:not([hidden]) { min-height:100%; display:flex; flex-direction:column }
  #card { flex:1 0 auto; margin-bottom:0 }
  #paneMarket > :not(#card) { flex:0 0 auto }
}

/* Our rows in the competitor table */
table.offers tr.ours td { background:var(--red-soft); font-weight:600 }
table.offers tr.ours td.c-site { box-shadow:inset 3px 0 0 var(--red) }
table.offers tr.ours.salon td { background:var(--blue-soft) }
table.offers tr.ours.salon td.c-site { box-shadow:inset 3px 0 0 var(--blue) }
table.offers tr.ours .cond { font-weight:400 }
@container main (max-width:680px) {
  /* stacked rows are grids: paint the whole row, not each cell with gaps between them */
  table.offers tr.ours { background:var(--red-soft); box-shadow:inset 3px 0 0 var(--red) }
  table.offers tr.ours.salon { background:var(--blue-soft); box-shadow:inset 3px 0 0 var(--blue) }
  table.offers tr.ours td, table.offers tr.ours.salon td, table.offers tr.ours td.c-site,
  table.offers tr.ours.salon td.c-site { background:transparent; box-shadow:none }
}

/* Verdict under the tiles: who is cheaper and on what terms */
#verdict { margin:4px 0 10px }
.vd { font-size:13.5px; margin:6px 0 4px }
.vd.good b { color:var(--ok) }
.vd.warn b { color:var(--red) }
.vs-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px }
.vs { font-size:12.5px; border:1px solid var(--line); border-radius:8px; padding:3px 8px; background:var(--paper) }
.vs i { font-style:normal; color:var(--muted) }
/* Price path: shelf -> promos -> paid */
.path-h { font-size:12px; color:var(--muted); margin:8px 0 4px }
.path { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:10px }
.pp { font-size:13px; border-radius:8px; padding:4px 9px; background:var(--bg); border:1px solid var(--line) }
.pp i { font-style:normal; color:var(--muted); font-size:12px }
.pp.paid { font-weight:700; border-color:var(--blue) }
.pp.good { color:var(--ok); border-color:var(--ok) }
.step-arrow { color:var(--muted) }
.tag.good { color:var(--ok); border-color:var(--ok) }