:root {
  --dock-h: 214px;
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f1f3f9;
  --line: #e3e6ef;
  --text: #141824;
  --muted: #5d6478;
  --faint: #8a90a2;
  --accent: #3355ff;
  --accent-ink: #ffffff;
  --accent-soft: #e9edff;
  --good: #0f8a5f;
  --good-soft: #e3f5ec;
  --warn: #b25e00;
  --warn-soft: #fff1df;
  --bad: #c62f3b;
  --bad-soft: #fde8ea;
  --shadow: 0 1px 2px rgba(20, 24, 36, .05), 0 6px 24px rgba(20, 24, 36, .06);
  --radius: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1118;
    --surface: #161a24;
    --surface-2: #1d2230;
    --line: #2a3142;
    --text: #eef0f6;
    --muted: #a3aabd;
    --faint: #767e93;
    --accent: #7b93ff;
    --accent-ink: #0b0e16;
    --accent-soft: #232b48;
    --good: #4fd19c;
    --good-soft: #15302a;
    --warn: #f3b25e;
    --warn-soft: #36291a;
    --bad: #ff7f89;
    --bad-soft: #3a1c22;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1118; --surface: #161a24; --surface-2: #1d2230; --line: #2a3142; --text: #eef0f6;
  --muted: #a3aabd; --faint: #767e93; --accent: #7b93ff; --accent-ink: #0b0e16; --accent-soft: #232b48;
  --good: #4fd19c; --good-soft: #15302a; --warn: #f3b25e; --warn-soft: #36291a; --bad: #ff7f89; --bad-soft: #3a1c22;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* min-height, not height: a body fixed at the window's height ends the sticky top bar after one screen. */
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; color: inherit; }
.hidden { display: none !important; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 24px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink); transform: rotate(-8deg);
}
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.brand-tag { color: var(--faint); font-size: 13px; }
.plan-toggle { display: none; }

/* ---------- layout ---------- */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px;
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
}
.thread-wrap { display: flex; flex-direction: column; min-height: calc(100vh - 57px - var(--dock-h)); padding-top: 28px; }
body { padding-bottom: var(--dock-h); }
body.dock-collapsed { --dock-h: 42px; }

/* ---------- hero ---------- */
.hero { padding: 48px 0 24px; max-width: 640px; }
.hero h1 { font-size: 38px; line-height: 1.12; letter-spacing: -.03em; margin: 0 0 12px; }
.hero p { color: var(--muted); font-size: 16px; margin: 0 0 22px; }
.examples { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.example {
  text-align: left; padding: 10px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  box-shadow: var(--shadow); transition: transform .12s, border-color .12s;
}
.example:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ---------- thread ---------- */
.thread { list-style: none; margin: 0; padding: 0 0 24px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.thread > li { display: flex; flex-direction: column; }
.msg { max-width: 640px; animation: rise .22s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg.user {
  align-self: flex-end; background: var(--accent); color: var(--accent-ink);
  padding: 10px 14px; border-radius: 16px 16px 4px 16px; font-weight: 500;
}
.msg.bot { display: flex; gap: 10px; align-items: flex-start; }
.avatar {
  flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; font-weight: 800; font-size: 13px;
}
.bubble { padding: 4px 0; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; animation: rise .22s ease-out;
}
.card h3 { margin: 0 0 4px; font-size: 15px; }
.card .sub { margin: 0 0 12px; color: var(--muted); font-size: 13px; }

/* questions */
.question { max-width: 720px; }
.question + .question { margin-top: -4px; }
.q-prompt { font-weight: 600; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.q-num {
  font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft);
  padding: 2px 7px; border-radius: 999px;
}
.options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.option {
  text-align: left; padding: 10px 12px; border-radius: 11px;
  background: var(--surface-2); border: 1.5px solid transparent;
  transition: border-color .12s, background .12s, transform .12s;
}
.option:hover:not(:disabled) { border-color: var(--accent); background: var(--surface); transform: translateY(-1px); }
.option .o-label { font-weight: 600; display: block; }
.option .o-desc { color: var(--muted); font-size: 12.5px; display: block; margin-top: 2px; }
.option.picked { border-color: var(--accent); background: var(--accent-soft); }
.question.answered .option:not(.picked) { opacity: .4; }
.option:disabled { cursor: default; }

/* search progress */
.progress-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.progress-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.progress-list .p-site { font-weight: 600; min-width: 96px; }
.progress-list .p-state { color: var(--muted); }
.progress-list .p-best { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent);
  animation: spin .8s linear infinite; flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.status-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 10px; color: var(--accent-ink); }
.status-dot.done { background: var(--good); }
.status-dot.error, .status-dot.blocked { background: var(--bad); }
.status-dot.skipped { background: var(--faint); }

/* offers */
.offers-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.offers-head h3 { margin: 0; font-size: 16px; }
.offers-head .sub { margin: 0; }
.offers { display: flex; flex-direction: column; gap: 10px; }
.offer {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) 200px; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow); transition: border-color .12s, transform .12s;
  animation: rise .25s ease-out both;
}
.offer:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.offer.flight { grid-template-columns: minmax(0, 1fr) 200px; }
.offer.flight .offer-media { display: none; }
.offer-media {
  border-radius: 10px; overflow: hidden; background: var(--surface-2); aspect-ratio: 1 / 1;
  display: grid; place-items: center; color: var(--accent); text-align: center;
}
.offer-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.times { font-weight: 800; font-size: 17px; letter-spacing: -.01em; line-height: 1.2; }
.times small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); margin-top: 4px; }
.offer-body { min-width: 0; }
.offer-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.tag {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); text-transform: uppercase; letter-spacing: .03em;
}
.tag.best { background: var(--good-soft); color: var(--good); }
.tag.site { background: var(--accent-soft); color: var(--accent); }
.tag.ad { background: var(--warn-soft); color: var(--warn); }
.tag.over { background: var(--bad-soft); color: var(--bad); }
/* A departure just after midnight belongs to the night before: said on the leg. */
.leg-night { grid-column: 1 / -1; grid-row: 1; margin-bottom: -6px; font-size: 12px; font-weight: 600; color: var(--warn); }
.leg-night::before { content: "\263E  "; }
/* A card waits for an answer: Clicky has not started, so no line says it is working. */
body.asking #thread > li:has(> .thinking-log.busy),
#thread > li:has(> .question:not(.answered):not(.other-pending)) ~ li:has(> .thinking-log) { display: none; }
/* The trip-wide payment approval: one line per booking, then the total. */
.confirm-items { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; max-height: 46vh; overflow: auto; }
.confirm-items li { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.confirm-items li > span:first-child { min-width: 0; }
.confirm-items b { font-size: 13.5px; font-weight: 600; }
.confirm-items small { display: block; color: var(--muted); font-size: 12px; }
.ci-amt { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13.5px; }
.confirm-total { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.confirm-total strong { font-size: 18px; font-variant-numeric: tabular-nums; }
/* Everyone else on the trip, one compact row each. */
.companions { display: grid; gap: 8px; margin-bottom: 4px; }
.companion { display: grid; grid-template-columns: minmax(96px, auto) 1fr 1fr; gap: 8px; align-items: center; }
.companion-who { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.companion input { min-width: 0; }
@media (max-width: 520px) { .companion { grid-template-columns: 1fr 1fr; } .companion-who { grid-column: 1 / -1; } }
.clamp2, .ri-name { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.offer-title { margin: 0; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.offer-sub { margin: 2px 0 6px; color: var(--muted); font-size: 13px; }
.offer-points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
.offer-points li { font-size: 13px; color: var(--muted); padding-left: 14px; position: relative; overflow-wrap: anywhere; }
.offer-points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.offer-points li.rating { color: var(--text); font-weight: 600; }
.offer-points li.rating::before { background: var(--good); }
.offer-compare { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.compare-chip { font-size: 12px; color: var(--muted); background: var(--surface-2); padding: 2px 8px; border-radius: 6px; }
.compare-chip b { color: var(--text); }
.offer-price {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px;
  border-left: 1px dashed var(--line); padding-left: 14px; text-align: right;
}
.price { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price-note { font-size: 12px; color: var(--muted); text-wrap: balance; }
.unit { font-size: 12px; color: var(--faint); margin-bottom: 8px; }
.offer.chosen { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.offers.decided .offer:not(.chosen) { opacity: .45; }
.offers.decided .choose { display: none; }

.primary {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px;
  padding: 9px 16px; font-weight: 600; transition: filter .12s, transform .12s;
}
.primary:hover { filter: brightness(1.07); }
.primary:active { transform: scale(.98); }
.primary:disabled { opacity: .5; cursor: not-allowed; }
.ghost { background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font-weight: 500; }
.ghost:hover { border-color: var(--accent); }

/* notices */
.notice { border-left: 3px solid var(--warn); background: var(--warn-soft); }
.notice.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.notice.good { border-left-color: var(--good); background: var(--good-soft); }

/* review / booking forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.form-grid input, .form-grid select, .vgs-field, .companion input {
  font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 11px; min-height: 40px;
}
.form-grid input:focus, .companion input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.form-grid .wide { grid-column: 1 / -1; }
.section-title { font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 8px; }
.pay-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.saved { color: var(--good); font-weight: 600; font-size: 13px; }
.book-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.timeline li { display: flex; gap: 8px; }
.timeline .when { color: var(--faint); font-variant-numeric: tabular-nums; min-width: 44px; }

/* typing */
.typing { display: flex; gap: 4px; padding: 6px 0 6px 38px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* composer */
.composer {
  position: sticky; bottom: var(--dock-h); display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 0 20px; background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.composer textarea {
  flex: 1; resize: none; font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; max-height: 160px;
  box-shadow: var(--shadow);
}
.composer textarea:focus { outline: none; border-color: var(--accent); }
.send {
  width: 46px; height: 46px; border-radius: 14px; border: 0; background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; flex: none;
}

/* ---------- plan sidebar ---------- */
.plan { padding-top: 28px; }
.plan-inner {
  position: sticky; top: 85px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
}
.plan h2 { margin: 0 0 12px; font-size: 16px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 14px; font-size: 13.5px; }
.facts dt { color: var(--faint); }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.facts .pending { color: var(--faint); font-weight: 400; font-style: italic; }
.picked { display: flex; flex-direction: column; gap: 8px; }
.pick { border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; background: var(--surface-2); }
.pick .k { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.pick .v { font-weight: 600; font-size: 14px; margin: 2px 0; overflow-wrap: anywhere; }
.pick .p { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.pick .p b { color: var(--text); }
.pick.empty { border-style: dashed; background: transparent; color: var(--faint); font-size: 13px; }
.total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.total-row strong { font-size: 22px; letter-spacing: -.02em; }
.fine { color: var(--faint); font-size: 11.5px; margin: 12px 0 0; }

/* dialog */
.dialog { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); padding: 22px; width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(10, 12, 20, .45); }
.dialog h3 { margin: 0 0 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; padding: 0 16px; }
  .plan { position: fixed; inset: 57px 0 auto 0; padding: 12px 16px; z-index: 9; display: none; }
  .plan.open { display: block; }
  .plan-inner { position: static; max-height: calc(100vh - 90px); overflow: auto; }
  .plan-toggle { display: inline-block; }
  .sites { display: none; }
  .topbar { padding: 10px 16px; }
  .brand-tag { display: none; }
  .plan-toggle { margin-left: auto; }
}
@media (max-width: 640px) {
  .hero { padding-top: 16px; }
  .hero h1 { font-size: 28px; }
  .offer { grid-template-columns: 76px minmax(0, 1fr); }
  .offer.flight { grid-template-columns: minmax(0, 1fr); }
  .leg-line { gap: 6px; }
  .leg-end b { font-size: 15px; }
  .offer-price { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between;
                 border-left: 0; border-top: 1px dashed var(--line); padding: 10px 0 0; flex-wrap: wrap; }
  .unit { margin: 0; }
  .offer-points { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .times { font-size: 14px; }
}


/* ---------- live trip total (top right) ---------- */
.trip-total { margin-left: auto; text-align: right; line-height: 1.15; min-width: 150px; }
.tt-label { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.tt-amount { font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: color .3s; }
.tt-amount.flash { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { color: var(--accent); transform: scale(1.06); } 100% { color: var(--text); transform: none; } }
.tt-notes { font-size: 11px; color: var(--muted); margin-top: 2px; max-width: 360px; }
.tt-notes .inc { color: var(--good); }
.tt-notes .exc { color: var(--faint); }        /* not-included: small and gray */
.tt-notes .row { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-notes .exc::before { content: "⚠ "; }

/* ---------- agent activity dock (bottom) ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 11; height: var(--dock-h);
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(20, 24, 36, .06);
  display: flex; flex-direction: column;
}
.dock-head { display: flex; align-items: center; gap: 12px; padding: 8px 24px; min-height: 42px; }
.dock-title { font-weight: 800; font-size: 13px; letter-spacing: .02em; }
.dock-now { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-toggle { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px; font-size: 12px; color: var(--muted); }
body.dock-collapsed .dock-body { display: none; }
.dock-body {
  position: relative; flex: 1; display: grid; grid-template-columns: .8fr .9fr 2.3fr; gap: 0 48px;
  padding: 0 24px 12px; max-width: 1240px; width: 100%; margin: 0 auto; min-height: 0;
}
.dock-col { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; padding-top: 18px; }
.col-label { position: absolute; top: 0; left: 0; font-size: 10.5px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.site-nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 8px; }
.dock-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.dock-wires path { fill: none; stroke: var(--line); stroke-width: 1.5; transition: stroke .3s; }
.dock-wires path.live { stroke: var(--accent); stroke-dasharray: 5 6; animation: flow .7s linear infinite; }
.dock-wires path.wait { stroke: var(--warn); stroke-dasharray: 5 6; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -11; } }

.node {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; min-width: 0;
  background: var(--surface); border: 1.5px solid var(--line); transition: border-color .25s, background .25s, box-shadow .25s;
}
.node .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.node-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.node b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-text { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node[data-state="thinking"], .node[data-state="active"] {
  border-color: var(--accent); background: var(--accent-soft); animation: glow 1.1s ease-in-out infinite;
}
.node[data-state="thinking"] .dot, .node[data-state="active"] .dot { background: var(--accent); animation: blinkdot .8s ease-in-out infinite; }
.node[data-state="waiting"] { border-color: var(--warn); background: var(--warn-soft); animation: warnblink 1s steps(2, start) infinite; }
.node[data-state="waiting"] .dot { background: var(--warn); }
.node[data-state="done"] { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); }
.node[data-state="done"] .dot { background: var(--good); }
.node[data-state="blocked"], .node[data-state="error"] { border-color: var(--bad); background: var(--bad-soft); }
.node[data-state="blocked"] .dot, .node[data-state="error"] .dot { background: var(--bad); }
.node[data-state="off"] { opacity: .45; border-style: dashed; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent); }
                  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); } }
@keyframes blinkdot { 50% { opacity: .25; } }
@keyframes warnblink { 50% { border-color: var(--line); } }
@media (prefers-reduced-motion: reduce) {
  .node, .node .dot, .dock-wires path, .tt-amount.flash { animation: none !important; }
}

@media (max-width: 980px) {
  .trip-total { min-width: 0; }
  .tt-notes { display: none; }
  .tt-amount { font-size: 19px; }
  .plan-toggle { margin-left: 0; }
}
@media (max-width: 640px) {
  :root { --dock-h: 186px; }
  .dock-head { padding: 6px 16px; }
  .dock-body { grid-template-columns: .9fr .9fr 1.3fr; gap: 0 18px; padding: 0 12px 10px; }
  .site-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
  .node { padding: 4px 7px; }
  .node-text { display: none; }
  .brand-tag { display: none; }
}

/* review: remember me, forget, sign-in buttons */
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.check input { accent-color: var(--accent); }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; font-size: 12.5px; padding: 0; }
.link:hover { color: var(--bad); }
.signin-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ghost.small { padding: 5px 10px; font-size: 13px; }

/* mobile: the agent dock becomes a one-line status bar; tap to see the layers stacked */
@media (max-width: 640px) {
  body:not(.dock-open) { --dock-h: 42px; }
  body:not(.dock-open) .dock-body { display: none; }
  body.dock-open { --dock-h: 340px; }
  body.dock-open .dock-body { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; padding: 0 16px 12px; }
  body.dock-open .dock-wires { display: none; }
  .dock-col { padding-top: 16px; }
  .col-label { white-space: normal; }
  .site-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .node-text { display: block; }
  .dock-now { font-size: 12px; }
}

/* language toggle */
.lang-toggle {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 8px;
  padding: 4px 9px; font-size: 12.5px; font-weight: 600; margin-left: auto;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--text); }
.trip-total { margin-left: 14px; }
@media (max-width: 980px) { .lang-toggle { margin-left: 6px; } }
[hidden]{display:none!important}.home-tabs{display:flex;gap:5px;margin-left:auto}.home-tabs button{border:0;border-radius:8px;background:transparent;color:var(--muted);padding:9px 13px;font-size:13px;white-space:nowrap}.home-tabs [aria-selected=true]{background:var(--accent-soft);color:var(--accent);font-weight:700}.workspace-panel{height:calc(100dvh - 80px);background:white}.workspace-panel iframe{border:0;width:100%;height:100%;display:block}.video-panel{padding:32px 6%;overflow:auto;text-align:center;background:var(--bg)}.video-panel h1{font-size:28px}.video-panel p{color:var(--muted)}.video-panel video{display:block;width:min(1100px,100%);max-height:70vh;background:#fff;border:1px solid var(--line);border-radius:12px;margin:24px auto}.chat-demo-bar{padding:8px 24px;font-size:12px;color:var(--muted);display:flex;gap:20px;border-bottom:1px solid var(--line)}.chat-demo-bar a{color:var(--accent)}.chat-demo{--dock-h:0px}.thinking-log{margin:18px 0;color:var(--muted);font-size:14px;max-width:760px}.thinking-log summary{cursor:pointer;list-style:none;padding:8px 0;display:flex;gap:10px;align-items:center;color:#8a90a2;width:max-content}.thinking-log summary:before{content:'›';font-size:19px;transition:transform .15s}.thinking-log[open] summary:before{transform:rotate(90deg)}.thinking-log.busy summary span{animation:thinking-pulse 1.5s ease-in-out infinite}.thinking-body{border-left:2px solid var(--line);margin-left:6px;padding:8px 18px}.thinking-note{font-size:11px;color:var(--faint);margin:0 0 10px}.thinking-now{background:var(--surface-2);padding:12px;border-radius:8px;font-size:12px;line-height:1.7;margin:0 0 14px}.activity-entries{list-style:none;margin:0;padding:0;max-height:255px;overflow:auto;font-size:12px}.activity-entries li{padding:6px 0;display:flex;gap:12px}.activity-entries li span{font-variant-numeric:tabular-nums;color:var(--faint)}.demo-answer{display:block!important}.demo-answer p{margin-top:0}.demo-answer button{margin-top:8px}@keyframes thinking-pulse{50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.thinking-log.busy summary span{animation:none}}@media(max-width:760px){.topbar{flex-wrap:wrap}.home-tabs{order:4;width:100%;margin:0}.home-tabs button{flex:1}.workspace-panel{height:calc(100dvh - 130px)}.brand-tag{display:none}.chat-demo-bar{padding:8px 16px}.thinking-body{padding:8px 10px}}

/* ---------- stay map (hotel-map.js): covers the chat column above the composer ---------- */
.map-overlay {
  position: fixed; top: 65px; z-index: 40; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 48px rgba(20, 24, 36, .22); overflow: hidden;
}
.map-overlay[hidden] { display: none; }
.map-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.map-title { font-size: 15px; white-space: nowrap; }
.map-search { flex: 1; min-width: 200px; }
.map-search gmp-place-autocomplete { width: 100%; }
.map-canvas { flex: 1; min-height: 0; }
.map-status { margin: 0; padding: 6px 12px; font-size: 13px; color: var(--muted); }
.map-status:empty { display: none; }
.map-pin {
  background: var(--surface); color: var(--text); border: 2px solid var(--accent); border-radius: 999px;
  padding: 3px 9px; font: 600 13px/1.2 Inter, system-ui, sans-serif; box-shadow: var(--shadow); white-space: nowrap;
}
.map-pin b { color: var(--accent); }
.map-pin.best { background: var(--accent); color: var(--accent-ink); }
.map-pin.best b { color: var(--accent-ink); }
.map-info { max-width: 260px; font: 13px/1.45 Inter, system-ui, sans-serif; color: #141824; }
.map-info img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.map-info .sub { color: #5d6478; }
.map-price { font-weight: 700; font-size: 15px; }
.map-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.offers-head .map-open { margin-left: auto; }
@media (max-width: 720px) {
  .map-overlay { top: 60px; }
  .map-bar { padding: 8px; }
}

/* ---------- live "searching now" panel (bottom right) ---------- */
.search-live {
  position: fixed; right: 16px; bottom: calc(var(--dock-h) + 14px); z-index: 13;
  width: 288px; max-width: calc(100vw - 32px); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 40px rgba(20, 24, 36, .20);
  overflow: hidden;
}
.search-live[hidden] { display: none; }
.live-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.live-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: live-pulse 1.3s ease-out infinite; }
.search-live.done .live-pulse { background: var(--good); animation: none; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.live-title { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-progress { font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.live-close { border: none; background: none; color: var(--faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.live-close::before { content: "×"; }
.live-list { list-style: none; margin: 0; padding: 6px; max-height: 44vh; overflow-y: auto; }
.live-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; font-size: 13px; }
.live-row + .live-row { margin-top: 1px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); }
.live-row.searching { color: var(--text); }
.live-row.searching .live-dot { background: var(--accent); animation: live-blink .9s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: .3; } }
.live-row.done .live-dot { background: var(--good); }
.live-row.blocked .live-dot, .live-row.error .live-dot { background: var(--warn); }
.live-row.skipped { color: var(--faint); }
.live-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-stat { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-row.done .live-stat { color: var(--good); }
.live-row.blocked .live-stat, .live-row.error .live-stat { color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .live-pulse, .live-row.searching .live-dot { animation: none; } }
@media (max-width: 720px) {
  .search-live { right: 10px; left: 10px; width: auto; bottom: calc(var(--dock-h) + 10px); }
  .live-list { max-height: 36vh; }
}

/* ---------- 7:3 split: chat | trip total (top half) + live sites (bottom half) ---------- */
:root, body, body.dock-collapsed, body.dock-open, body:not(.dock-open) { --dock-h: 0px; }
#dock { display: none !important; }
.layout { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); max-width: none; gap: 24px; padding: 0 24px; }
.side {
  position: sticky; top: 57px; height: calc(100dvh - 98px); padding: 14px 0;   /* below the top bar and the chat-mode bar */
  display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
}
.side-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.cost-card { padding: 18px 20px; overflow-y: auto; }
.side-label { font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.cost-card .tt-amount { font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 6px; }
.cost-card .tt-notes { font-size: 12px; max-width: none; margin: 0 0 14px; }
.cost-card .tt-notes .row { white-space: normal; margin-bottom: 2px; }
.cost-card .picked { margin-bottom: 14px; }
.cost-card .facts { margin-bottom: 8px; }
.cost-card .total-row { display: none; }            /* the big number above is the total */
.side .search-live { position: static; width: auto; max-width: none; box-shadow: var(--shadow); }
.side .live-list { max-height: none; flex: 1; overflow-y: auto; }
.side .live-row { font-size: 14px; padding: 8px 10px; }
.search-live.idle .live-pulse { background: var(--faint); animation: none; }
.live-row.waiting { color: var(--muted); }
.live-row.waiting .live-stat { color: var(--faint); font-weight: 500; }
.plan-toggle { display: none !important; }          /* the trip panel is always on screen now */
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .side { position: static; height: auto; grid-template-rows: auto auto; padding: 0 0 16px; display: grid; }
  .plan.side { inset: auto; }
}

/* ---------- attachments: clip button, chips, files in the bubble, drop overlay ---------- */
.composer { flex-wrap: wrap; }
.attach-chips { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.attach-chips[hidden] { display: none; }
.attach {
  width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); display: grid; place-items: center; flex: none; cursor: pointer; box-shadow: var(--shadow);
}
.attach:hover { color: var(--accent); border-color: var(--accent); }
.composer.sending .send { opacity: .5; pointer-events: none; }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font-size: 12.5px;
}
.fc-thumb { width: 26px; height: 26px; object-fit: cover; border-radius: 6px; flex: none; }
.fc-icon { font-size: 15px; line-height: 1; flex: none; }
.fc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.fc-size { color: var(--faint); white-space: nowrap; }
.fc-remove { border: 0; background: none; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.fc-remove:hover { color: var(--bad); }
.msg.user.with-files { display: flex; flex-direction: column; gap: 6px; }
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.msg.user .file-chip { background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--text); }
.file-chip.unread { opacity: .6; text-decoration: line-through; }
body.drop-on .thread-wrap::after {
  content: attr(data-drop); position: fixed; inset: 70px auto 90px 24px; width: calc(70% - 36px); z-index: 30;
  display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-soft) 85%, transparent); color: var(--accent);
  font-size: 18px; font-weight: 700; pointer-events: none;
}

/* ---------- offer lists: what was searched, flight legs, filler section ---------- */
.trip-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -2px 0 12px;
  font-size: 13px; color: var(--muted); }
.trip-summary > span + span:not(.trip-type)::before { content: "·"; margin-right: 12px; color: var(--faint); }
.trip-summary .trip-type + span::before { content: none; }
.trip-type { font-size: 12.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: .01em; }
.trip-type.round { background: var(--accent-soft); color: var(--accent); }
.trip-type.oneway { background: var(--warn-soft); color: var(--warn); }
.ts-route { font-weight: 700; color: var(--text); }
.ts-cap { font-weight: 600; color: var(--good); }
.ts-need { font-weight: 600; color: var(--good); }
.over-note { color: var(--warn); font-weight: 700; }

.legs { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 8px; }
.leg { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 10px; }
.leg + .leg { padding-top: 8px; border-top: 1px dashed var(--line); }
.leg-head { display: flex; flex-direction: column; gap: 1px; }
.leg-kind { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.leg-kind.back { color: var(--good); }
.leg-date { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.leg-line { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 12px; }
.leg-end { display: flex; flex-direction: column; line-height: 1.15; }
.leg-end.arr { text-align: right; }
.leg-end b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.leg-end b sup { font-size: 10px; color: var(--warn); margin-left: 2px; }
.leg-end small { font-size: 12px; color: var(--muted); font-weight: 600; }
.leg-mid { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.leg-mid small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.leg-track { position: relative; width: 100%; height: 2px; background: var(--line); border-radius: 2px; }
.leg-track::before, .leg-track::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--faint); box-sizing: border-box; }
.leg-track::before { left: -2px; }
.leg-track::after { right: -2px; }
.leg-track.stops { background: repeating-linear-gradient(90deg, var(--faint) 0 5px, transparent 5px 9px); }
.leg-later { font-size: 12.5px; color: var(--muted); font-style: italic; }

.offers-divider { font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: 10px; margin: 6px 0 -2px; }
.offers-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.offer.outside { opacity: .82; }

/* ---------- review: what is booked, card on file, one Book button ---------- */
.review-items { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.review-items li { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: var(--surface-2); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; }
.ri-k { font-weight: 700; font-size: 12.5px; color: var(--muted); }
.ri-v { min-width: 0; overflow-wrap: anywhere; }
.ri-v small { display: block; color: var(--muted); font-size: 12px; }
.card-on-file { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; background: var(--surface); }
.card-on-file b { display: block; font-size: 14px; }
.card-on-file small { display: block; color: var(--muted); font-size: 12px; }
.cof-icon { font-size: 20px; }
.book-btn { padding: 11px 20px; font-size: 15px; }
@media (max-width: 640px) {
  .leg { grid-template-columns: 1fr; gap: 4px; }
  .leg-head { flex-direction: row; gap: 8px; align-items: baseline; }
  .review-items li { grid-template-columns: minmax(0, 1fr) auto; }
  .review-items .ri-k { grid-column: 1 / -1; }
  .book-row { flex-direction: column; align-items: stretch; }
}

/* ---------- booked: the confirmation ---------- */
.booked-card { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); }
.bk-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.bk-head h3 { margin: 0; }
.bk-head .sub { margin: 2px 0 0; }
.bk-check { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--good); color: var(--surface); font-weight: 800; font-size: 18px; animation: rise .3s ease-out both; }
.bk-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bk-items li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  background: var(--surface-2); border-radius: 10px; padding: 9px 12px; font-size: 13.5px; }
.bk-kind { font-weight: 700; font-size: 12.5px; color: var(--muted); }
.bk-what { min-width: 0; overflow-wrap: anywhere; }
.bk-what small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.bk-code { color: var(--text); font-weight: 700; letter-spacing: .03em; }
.bk-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.bk-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line); color: var(--good); font-weight: 600; font-size: 13.5px; }
.bk-total strong { color: var(--text); font-size: 20px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .bk-items li { grid-template-columns: minmax(0, 1fr) auto; }
  .bk-items .bk-kind { grid-column: 1 / -1; }
}

/* ---------- live panel: many travel sites at once, visibly (bottom right) ---------- */
.live-head { padding: 12px 14px; align-items: center; }
.live-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.live-heading .live-title { font-size: 14px; flex: none; }
.live-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-progress { font-size: 13px; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.search-live.done .live-progress { color: var(--good); background: var(--good-soft); }
.search-live.idle .live-progress { display: none; }
.live-track { position: relative; height: 3px; background: var(--surface-2); overflow: hidden; }
.live-bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); transition: width .45s ease; }
.search-live.done .live-bar { background: var(--good); }
/* while sites are still working, a light sheen runs along the bar */
.search-live.running .live-track::after { content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
  animation: live-sweep 1.4s ease-in-out infinite; }
@keyframes live-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

.live-row { gap: 10px; transition: background-color .6s ease; }
.search-live.running .live-row { animation: live-in .3s ease-out both; }
@keyframes live-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.live-row .live-dot { display: none; }
.live-mark { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: hsl(var(--mark-h) 55% 38%); background: hsl(var(--mark-h) 70% 93%); }
.live-row.waiting .live-mark, .live-row.skipped .live-mark { filter: grayscale(1); opacity: .6; }
.live-icon { flex: none; width: 14px; height: 14px; display: grid; place-items: center; order: 3; }
.live-stat { order: 4; }
.live-row.searching .live-icon { border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%;
  animation: live-spin .8s linear infinite; }
@keyframes live-spin { to { transform: rotate(360deg); } }
.live-row.searching .live-stat { color: var(--accent); }
/* Still finishing the other search (flights while the stays are searched): quieter than this search's rows. */
.live-row.busy { color: var(--muted); }
.live-row.busy .live-icon { border: 2px solid var(--line); border-top-color: var(--accent-soft); border-radius: 50%;
  animation: live-spin 1.4s linear infinite; }
.live-row.busy .live-stat { color: var(--muted); }
.live-row.done .live-icon::before { content: "✓"; font-size: 12px; font-weight: 800; color: var(--good); }
.live-row.blocked .live-icon::before, .live-row.error .live-icon::before { content: "!"; font-size: 12px; font-weight: 800; color: var(--warn); }
.live-row.landed { animation: live-land 1.2s ease-out; }
@keyframes live-land { from { background: var(--good-soft); } to { background: transparent; } }
.live-row.best { background: var(--good-soft); }
.live-row.best .live-name { font-weight: 700; }
.live-row.best .live-stat::before { content: attr(data-lowest); margin-right: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--good); color: var(--surface); font-size: 10.5px; font-weight: 800; vertical-align: 1px; }
.live-row.best .live-mark { box-shadow: 0 0 0 2px var(--good); }
.live-best { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.live-best:empty { display: none; }
.live-best b { color: var(--good); font-size: 14px; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .search-live.running .live-track::after, .live-row.searching .live-icon, .live-row.busy .live-icon, .search-live.running .live-row, .live-row.landed { animation: none; }
}

/* ---------- multi-city badge, per-leg airline ---------- */
.trip-type.multi { background: var(--good-soft); color: var(--good); }
.leg-airline { font-size: 11.5px; color: var(--muted); font-weight: 600; }

/* ---------- map <-> list switch (floats over the chat until a stay is chosen) ---------- */
.map-fab { position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 45;   /* above the map it closes */
  border: 0; border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 14px; cursor: pointer;
  background: var(--text); color: var(--bg); box-shadow: 0 8px 24px rgba(20, 24, 36, .28); }
.map-fab[hidden] { display: none; }
.map-fab:hover { filter: brightness(1.08); }
.map-input { width: 100%; font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); }
.map-overlay .leaflet-container { font: inherit; background: #e8eaee; }
.map-overlay .leaflet-div-icon, .map-overlay .leaflet-marker-icon { background: none; border: 0; }
.map-overlay .leaflet-marker-icon .map-pin { white-space: nowrap; transform: translate(-50%, -100%); display: inline-block; }

/* =====================================================================================
   Design v2: same layout, one level up. Gradient accent, softer depth, livelier states.
   ===================================================================================== */
:root {
  --grad: linear-gradient(135deg, #3b6cff 0%, #7c4dff 55%, #e0479e 100%);
  --grad-soft: linear-gradient(135deg, rgba(59, 108, 255, .10), rgba(124, 77, 255, .10) 55%, rgba(224, 71, 158, .08));
  --accent: #4f5bff;
  --accent-soft: #eceeff;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(20, 24, 54, .04), 0 4px 12px rgba(20, 24, 54, .05), 0 18px 40px -18px rgba(40, 50, 120, .18);
  --shadow-hover: 0 2px 4px rgba(20, 24, 54, .05), 0 10px 24px rgba(20, 24, 54, .08), 0 28px 60px -24px rgba(60, 70, 160, .28);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0d14; --surface: #131722; --surface-2: #1a1f2d; --line: #262c3d;
    --accent: #8b97ff; --accent-soft: #232845;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -12px rgba(0, 0, 0, .55);
    --shadow-hover: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 48px -18px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  --bg: #0b0d14; --surface: #131722; --surface-2: #1a1f2d; --line: #262c3d;
  --accent: #8b97ff; --accent-soft: #232845;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -12px rgba(0, 0, 0, .55);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, .4), 0 22px 48px -18px rgba(0, 0, 0, .7);
}
body {
  background:
    radial-gradient(1100px 520px at 0% -8%, rgba(79, 91, 255, .10), transparent 60%),
    radial-gradient(900px 480px at 100% -6%, rgba(224, 71, 158, .07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  letter-spacing: -.003em;
}
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* top bar */
.topbar { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(160%) blur(14px); }
.logo { background: var(--grad); color: #fff; box-shadow: 0 6px 16px -6px rgba(79, 91, 255, .7); }
.brand-name { font-size: 19px; }
.home-tabs { background: var(--surface-2); padding: 4px; border-radius: 12px; gap: 2px; }
.home-tabs button { border-radius: 9px; padding: 7px 14px; font-weight: 600; }
.home-tabs [aria-selected=true] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(20, 24, 54, .12); }
.lang-toggle { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 10px; font-weight: 700; font-size: 12px; }
.chat-demo-bar { display: none !important; }
.theme-toggle { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--muted); }
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-sun { display: none; }
:root[data-theme="dark"] .theme-sun { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }
@media (max-width: 760px) { .theme-toggle { margin-left: auto; } }

/* hero */
.hero { padding: 64px 0 28px; max-width: 700px; }
.hero h1 { font-size: 48px; letter-spacing: -.035em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px; }
.hero p { font-size: 17px; max-width: 560px; }
.examples { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.example { border-radius: 999px; padding: 11px 18px; font-weight: 500; }
.example::before { content: "\2708\FE0E"; margin-right: 8px; color: var(--accent); }
.example:hover { box-shadow: var(--shadow-hover); }

/* chat */
.msg.user { background: var(--grad); color: #fff; box-shadow: 0 8px 20px -10px rgba(79, 91, 255, .7); padding: 11px 16px; border-radius: 18px 18px 6px 18px; }
.avatar { background: var(--grad); color: #fff; border-radius: 10px; box-shadow: 0 4px 12px -4px rgba(79, 91, 255, .6); }
.bubble { padding: 6px 0; font-size: 15.5px; }
.card { border-radius: 18px; border-color: color-mix(in srgb, var(--line) 80%, transparent); }

/* questions */
.q-prompt { font-size: 15.5px; }
.q-num { background: var(--grad); color: #fff; }
.option { background: var(--surface); border: 1.5px solid var(--line); border-radius: 13px; padding: 11px 13px; }
.option:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.option.picked { background: var(--grad-soft); border-color: var(--accent); position: relative; }
.option.picked::after { content: "\2713"; position: absolute; top: 8px; right: 10px; font-weight: 800; color: var(--accent); }

/* offers */
.offer { border-radius: 18px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.offer:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.price { font-size: 26px; }
.tag.best { background: linear-gradient(135deg, #16a36a, #0f8a5f); color: #fff; }

/* buttons */
.primary { background: var(--grad); color: #fff; border-radius: 12px; padding: 10px 18px; box-shadow: 0 8px 20px -10px rgba(79, 91, 255, .8); }
.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ghost { border-radius: 12px; background: var(--surface); }
.send { background: var(--grad); color: #fff; border-radius: 16px; box-shadow: 0 8px 20px -10px rgba(79, 91, 255, .8); }
.composer textarea { border-radius: 16px; box-shadow: var(--shadow); padding: 13px 16px; }
.composer textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow); }

/* side: trip total */
.side-card { border-radius: 20px; }
.cost-card .tt-amount { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 44px; }

/* booked */
.bk-check { background: linear-gradient(135deg, #22c37f, #0f8a5f); box-shadow: 0 8px 20px -8px rgba(15, 138, 95, .7); }
.book-btn { padding: 13px 24px; font-size: 16px; border-radius: 14px; }
.map-fab { background: var(--grad); color: #fff; box-shadow: 0 12px 30px -10px rgba(79, 91, 255, .8); }

/* ---------- live panel: AI agents searching many travel sites at once ---------- */
/* relative only to hold the ring; the old floating offsets (right/bottom) would shift it out of line */
.search-live, .side .search-live { position: relative; isolation: isolate; inset: auto; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.search-live.running::before {
  content: ""; position: absolute; inset: -2px; border-radius: 22px; z-index: -2;
  background: conic-gradient(from var(--spin), #3b6cff, #7c4dff, #e0479e, #3b6cff);
  animation: live-ring 3s linear infinite;
}
.search-live.running::after { content: ""; position: absolute; inset: 0; border-radius: 20px; background: var(--surface); z-index: -1; }
@keyframes live-ring { to { --spin: 360deg; } }
.search-live.running { box-shadow: 0 18px 50px -20px rgba(79, 91, 255, .55); border-color: transparent; overflow: visible; }
.live-heading .live-title { font-size: 15px; }
.search-live.running .live-title { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.live-agents { display: flex; align-items: center; gap: 5px; padding: 9px 14px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.live-agents:empty { display: none; }
.live-agent { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; font-weight: 800;
  background: var(--surface-2); color: var(--faint); transition: background .3s, color .3s; }
.live-agent.working { background: var(--grad); color: #fff; animation: agent-bob 1.1s ease-in-out infinite; }
.live-agent.finished { background: var(--good-soft); color: var(--good); }
.live-agent:nth-child(3n+2).working { animation-delay: .18s; }
.live-agent:nth-child(3n+3).working { animation-delay: .36s; }
@keyframes agent-bob { 50% { transform: translateY(-3px); } }
.live-agents-label { font-size: 12px; color: var(--muted); font-weight: 700; margin-left: 6px; }
.live-row { position: relative; overflow: hidden; }
.live-row.searching::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 35%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: lane 1.3s ease-in-out infinite;
}
.live-row:nth-child(2n).searching::after { animation-delay: .35s; }
.live-row:nth-child(3n).searching::after { animation-delay: .7s; }
@keyframes lane { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.live-row.done::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--good); opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  .search-live.running::before, .live-agent.working, .live-row.searching::after { animation: none; }
}

.live-row.earlier { opacity: .7; }
.live-row.earlier .live-icon::before { content: "\2713"; font-size: 12px; font-weight: 800; color: var(--good); }
.live-row.earlier .live-stat { color: var(--good); }

/* Phones: the side column sits below the whole chat, so while a search runs its panel floats above
   the message box as a compact strip (title, the agents, progress); the full list is back below once done. */
@media (max-width: 720px) {
  .side .search-live.running {
    position: fixed; left: 12px; right: 12px; bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    z-index: 40; max-height: 46vh;
  }
  .side .search-live.running .live-list, .side .search-live.running .live-best { display: none; }
  .side .search-live.running .live-agents { padding-bottom: 12px; }
}

/* ---------- workspace tabs: "Your trip" (the trip from the chat on one page) and the intro video ---------- */
.workspace-panel { height: auto; min-height: calc(100dvh - 80px); background: var(--bg); }
.tv-wrap { max-width: 1120px; margin: 0 auto; padding: 28px 24px 64px; }
.tv-empty { max-width: 460px; margin: 12vh auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tv-empty-mark { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; font-size: 24px; color: #fff;
  background: var(--grad); box-shadow: 0 12px 30px -10px rgba(79, 91, 255, .8); margin-bottom: 10px; }
.tv-empty h2 { margin: 0; font-size: 22px; }
.tv-empty p { color: var(--muted); margin: 0 0 14px; line-height: 1.6; }

.tv-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-bottom: 18px; }
.tv-hero-main { background: var(--grad-soft), var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px;
  box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tv-stage { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.tv-stage.review, .tv-stage.booking { background: var(--warn-soft); color: var(--warn); }
.tv-stage.done { background: var(--good-soft); color: var(--good); }
.tv-title { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; overflow-wrap: anywhere;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tv-chips span { font-size: 13px; padding: 5px 10px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.tv-cost { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px; }
.tv-total { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv-lines { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tv-lines:empty { display: none; }
.tv-lines li { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.tv-lines b { color: var(--text); }
.tv-budget { margin: 6px 0 0; font-size: 13px; color: var(--good); font-weight: 600; }
.tv-budget.over { color: var(--warn); }

.tv-paid { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: var(--good-soft); margin-bottom: 18px; }
.tv-paid .bk-check { color: #fff; font-weight: 800; }
.tv-paid b { display: block; color: var(--text); }
.tv-paid small { color: var(--muted); }

.tv-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.tv-grid h2 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 0 0 12px; }
.tv-days { list-style: none; margin: 0; padding: 0; position: relative; }
.tv-days::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 18px; width: 2px; background: var(--line); }
.tv-day { position: relative; padding: 0 0 16px 44px; }
.tv-day::before { content: ""; position: absolute; left: 9px; top: 4px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--accent); }
.tv-day-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.tv-day-head b { font-size: 15px; }
.tv-day-head span { font-size: 13px; color: var(--muted); }
.tv-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tv-event { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.tv-event.open { border-style: dashed; box-shadow: none; background: transparent; }
.tv-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: var(--accent-soft); }
.tv-event.stay .tv-ico { background: var(--good-soft); }
.tv-ev-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tv-ev-main b { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.tv-ev-main small { font-size: 12.5px; color: var(--muted); }
.tv-event.open .tv-ev-main small { color: var(--faint); }
.tv-free { position: relative; padding: 0 0 16px 44px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; color: var(--muted); }
.tv-free::before { content: ""; position: absolute; left: 12px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tv-free small { color: var(--faint); }

.tv-picks { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tv-picks h2 { margin-bottom: 0; }
.tv-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  padding: 16px 18px; overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.tv-card.empty { border-style: dashed; box-shadow: none; background: transparent; align-items: flex-start; }
.tv-card.empty .tv-card-head { align-self: stretch; }
.tv-card.empty p { margin: 2px 0 6px; color: var(--muted); font-size: 14px; }
.tv-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tv-kind { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.tv-card.stay .tv-kind { color: var(--good); }
.tv-price { font-size: 18px; font-weight: 800; }
.tv-photo { display: block; width: calc(100% + 36px); max-width: none; margin: -16px -18px 6px; height: 150px; object-fit: cover; background: var(--surface-2); }
.tv-name { margin: 0; font-size: 16px; font-weight: 700; }
.tv-sub { margin: 0; font-size: 13px; color: var(--muted); }
.tv-via { font-size: 12.5px; color: var(--muted); }
.tv-part { display: flex; flex-direction: column; gap: 4px; }
.tv-part + .tv-part { border-top: 1px dashed var(--line); padding-top: 8px; }
.tv-card .legs { margin: 4px 0; }
.tv-code { align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 8px;
  background: var(--good-soft); color: var(--good); font-variant-numeric: tabular-nums; }
.tv-notes { margin: 0; font-size: 13px; color: var(--muted); }
.tv-muted { color: var(--muted); margin: 0; }

/* the trip tab shows a dot once something is chosen, green once it is booked */
#trip-tab.has-trip::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); margin-left: 6px; vertical-align: middle; }
#trip-tab.booked::after { background: var(--good); }

.video-panel { padding: 40px 24px 64px; }
.video-panel h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.video-panel p { line-height: 1.6; }
.video-panel video { background: #000; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); width: min(1120px, 100%); max-height: 72vh; }
.video-panel a { color: var(--accent); font-weight: 600; }

@media (max-width: 860px) {
  .tv-hero, .tv-grid { grid-template-columns: 1fr; }
  .tv-title { font-size: 30px; }
  .tv-wrap { padding: 20px 16px 48px; }
  .video-panel { padding: 24px 16px 48px; }
  .video-panel h1 { font-size: 24px; }
}

/* ---------- every price in the chat is the lowest found: a green badge says so ---------- */
.lowest-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; line-height: 1.2;
  color: var(--good); background: var(--good-soft); padding: 4px 9px 4px 5px; border-radius: 999px; white-space: nowrap; cursor: help; }
.lb-check { flex: none; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 900;
  color: #fff; background: linear-gradient(135deg, #22c37f, #0f8a5f); }
.offer-price .lowest-badge { margin: 2px 0 8px; }
.offer-price .unit { margin-bottom: 4px; }
.offer.chosen .lowest-badge { background: var(--good); color: var(--accent-ink); }
.offer.chosen .lowest-badge .lb-check { background: rgba(255, 255, 255, .25); }
.compare-label { font-size: 12px; color: var(--faint); align-self: center; }
.compare-chip s { color: var(--faint); text-decoration-thickness: 1.5px; }
.map-info .lowest-badge { margin: 6px 0 2px; color: #0f8a5f; background: #e3f5ec; }
.ri-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ri-low { font-size: 11px; font-weight: 700; color: var(--good); white-space: nowrap; }
.lowest-line { display: flex; align-items: center; gap: 7px; margin: 8px 0 4px; font-size: 13px; font-weight: 600; color: var(--good); }
.tv-card .lowest-badge { margin-top: 2px; }
@media (max-width: 720px) {
  .offer-price .lowest-badge { margin: 0; order: 3; }
}

/* ---------- a price, everywhere: the highest found for the same thing struck at top left, ours, the saving ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.price-tag { position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums; }
.price-tag.has-was { padding-top: 20px; }
.pt-was { position: absolute; top: 0; left: 0; font-size: 13px; font-weight: 600; color: var(--faint); line-height: 1.2; padding: 0 3px; }
.pt-was::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; border-top: 1.5px solid var(--bad);
  transform: rotate(-16deg); opacity: .85; }
.price-tag .pt-now { font-size: 28px; line-height: 1.05; letter-spacing: -.025em; }
.pt-save { font-size: 12px; font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(135deg, #22c37f, #0f8a5f); box-shadow: 0 6px 14px -8px rgba(15, 138, 95, .9); }
.price-tag .lowest-badge { margin: 0 0 6px; }
.price-tag.has-was .lowest-badge { background: none; padding: 0; font-weight: 600; }
.offer-price { align-items: center; text-align: center; min-width: 196px; }
.offer-price .price-note, .offer-price .unit { text-align: center; }
.offer-price .choose { margin-top: 2px; }
/* small: the map's cards, "Your trip", the side panel */
.price-tag.small { align-self: auto; align-items: flex-end; gap: 3px; }
.price-tag.small.has-was { padding-top: 16px; }
.price-tag.small .pt-was { left: auto; right: 0; font-size: 12px; }
.price-tag.small .pt-now { font-size: 19px; }
.price-tag.small .pt-save { font-size: 11px; padding: 2px 8px; }
.price-tag.small .lowest-badge { margin: 0; font-size: 11.5px; }
.map-info .price-tag { align-items: flex-start; margin: 6px 0 2px; }
.map-info .price-tag.small .pt-was { left: 0; right: auto; color: #8a90a2; }
.map-info .price-tag .pt-now { color: #141824; }
.map-info .price-tag.has-was .lowest-badge { color: #0f8a5f; }
.tv-card-head .price-tag { margin-left: auto; }
.pick-price { display: inline-flex; align-items: baseline; gap: 6px; }
.pick-price s, .ri-was { color: var(--faint); font-size: .85em; font-weight: 500; text-decoration-color: var(--bad); text-decoration-thickness: 1.5px; }
.ri-amt > span:first-child { display: inline-flex; align-items: baseline; gap: 6px; }
.saved-total { color: var(--good); font-weight: 700; }
@media (max-width: 720px) {
  .offer-price { min-width: 0; }
  .offer-price .price-tag { align-self: auto; align-items: flex-start; }
  .offer-price .price-tag.has-was { padding-top: 18px; }
}
/* a site's name keeps its room; a long status (a site searching flights and stays) gives way first */
.live-name { flex: 0 1 auto; min-width: 5.5em; }
.live-stat { flex: 1 1 0; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================================
   Craft pass: one line-icon set instead of emoji, calmer badges, tighter type, depth on
   hover. Same layout, same blue gradient.
   ===================================================================================== */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss03"; }
.ico { display: inline-flex; width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; }
.ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* badges: sentence case, one weight; the lowest price green like its saving, the site a quiet outline */
.tag { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.tag.best { background: linear-gradient(135deg, #22c37f, #0f8a5f); color: #fff; }
.tag.site { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* cards: a hairline at rest, lifted on hover */
.offer { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.offer:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.offer-title { letter-spacing: -.01em; }
.offer-media .media-ico { width: 30px; height: 30px; color: var(--faint); }
.leg-kind { letter-spacing: .06em; font-size: 10.5px; }
.offer-compare { align-items: center; }
.compare-chip { border-radius: 6px; }

/* review, booked card, payment card */
.ri-k, .bk-kind { display: inline-flex; align-items: center; gap: 6px; }
.ri-k .ico, .bk-kind .ico { color: var(--accent); width: 15px; height: 15px; }
.cof-icon { display: grid; place-items: center; width: 36px; height: 26px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.cof-icon .ico { width: 18px; height: 18px; }

/* "Your trip" */
.tv-ico { color: var(--accent); }
.tv-ico .ico { width: 16px; height: 16px; }
.tv-event.stay .tv-ico { color: var(--good); }
.tv-kind { display: inline-flex; align-items: center; gap: 6px; }
.tv-kind .ico { width: 14px; height: 14px; }
.tv-lines li > span { display: inline-flex; align-items: center; gap: 7px; }
.tv-empty-mark .ico { width: 26px; height: 26px; }
.map-fab { display: inline-flex; align-items: center; gap: 8px; }
.map-fab .ico { width: 17px; height: 17px; }

/* each site's own logo: on a white tile (logos are drawn for light backgrounds), crisp at small sizes */
.live-mark.has-logo { background: #fff; padding: 3px; box-shadow: inset 0 0 0 1px rgba(20, 24, 54, .08); }
.live-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 3px; }
.tag.site { display: inline-flex; align-items: center; gap: 5px; }
.tag.site .site-logo { width: 13px; height: 13px; border-radius: 3px; background: #fff; object-fit: contain; }
/* before any search the lineup shows in full color; during one, a site waiting its turn is greyed */
.search-live.idle .live-row.waiting .live-mark { filter: none; opacity: 1; }


/* =====================================================================================
   From the Figma spec ("Clicky — UI refresh"): offer cards with a tinted price panel, the
   airline and its site on one line, quiet "Also on" prices, score badges, a bigger struck
   price, gradient question numbers, calmer live rows. Same layout and blue gradient.
   ===================================================================================== */
.offer { padding: 0; gap: 0; border-radius: 16px; overflow: hidden; align-items: stretch; }
.offer.flight { grid-template-columns: minmax(0, 1fr) 216px; }
.offer:not(.flight) { grid-template-columns: 146px minmax(0, 1fr) 216px; }
.offer-media { margin: 14px 0 14px 14px; width: 132px; height: 132px; aspect-ratio: auto; align-self: start; border-radius: 12px; }
.offer-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.offer.flight .offer-body { gap: 12px; }
.offer-tags { align-items: center; gap: 8px; margin: 0; flex-wrap: nowrap; min-width: 0; }
.offer.flight .offer-tags .offer-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer.flight .tag.site { margin-left: auto; }
.tag { font-size: 12px; }
.tag.best { padding: 2px 8px; border-radius: 6px; flex: none; }
.tag.site { padding: 3px 8px 3px 4px; border-radius: 8px; font-size: 12.5px; flex: none; }
.tag.site .site-logo { width: 16px; height: 16px; border-radius: 4px; }
.offer-title { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.offer-sub { margin: 0; font-size: 12.5px; }
/* flight legs */
.legs { gap: 12px; margin: 0; }
.leg { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
.leg + .leg { padding-top: 12px; border-top: 1px solid var(--line); }
.leg-kind { font-size: 10.5px; letter-spacing: .06em; }
.leg-mid small { font-size: 12.5px; color: var(--faint); }
.leg-track { height: 1.5px; }
.leg-track::before, .leg-track::after { width: 7px; height: 7px; top: -2.75px; border-width: 1.5px; }
/* "Also on": the dearer sites, struck through, as quiet text under a hairline */
.offer-compare { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line); gap: 4px 14px; }
.offer-compare:empty { display: none; }
.compare-label, .compare-chip { font-size: 12.5px; }
.compare-label { color: var(--faint); }
.compare-chip { background: none; padding: 0; border-radius: 0; color: var(--muted); }
.compare-chip s { color: var(--faint); margin-left: 2px; }
/* the price panel: tinted, full height, the button across it */
.offer-price { padding: 16px; gap: 6px; justify-content: center; border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.offer-price .choose { width: 100%; margin-top: 4px; }
.offer-price .price-note { font-size: 12.5px; color: var(--muted); }
.offer-price .unit { font-size: 12.5px; color: var(--faint); margin: 0; }
.price-tag .pt-now { font-size: 28px; font-weight: 800; }
/* the highest price found for the same thing: big enough to read at a glance, struck in red */
.price-tag.has-was { padding-top: 30px; }
.pt-was { font-size: 19px; font-weight: 600; color: var(--muted); letter-spacing: -.01em; line-height: 24px; }
.pt-was::after { border-top-width: 2.25px; border-radius: 2px; top: 50%; transform: rotate(-16deg); opacity: 1; }
.price-tag.small.has-was { padding-top: 22px; }
.price-tag.small .pt-was { font-size: 14.5px; line-height: 18px; }
.price-tag.small .pt-was::after { border-top-width: 1.75px; }
/* stays: the score as a badge with its word */
.offer-points li.rating { padding-left: 0; display: inline-flex; align-items: center; gap: 6px; }
.offer-points li.rating::before { display: none; }
.score { background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 12.5px; line-height: 18px; padding: 0 6px; border-radius: 6px; }
/* questions */
.q-num { background: var(--grad); color: #fff; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; }
.option { border-radius: 12px; padding: 10px 12px; }
.option.picked { background: var(--accent-soft); border-color: var(--accent); }
/* live panel rows */
.side .live-row { padding: 7px 8px; border-radius: 10px; }
.live-mark { width: 24px; height: 24px; border-radius: 7px; }
.live-row.best .live-mark { box-shadow: none; }
.live-row.best .live-stat::before { background: var(--good); color: var(--accent-ink); letter-spacing: .04em; font-size: 10px; text-transform: uppercase; }
@media (max-width: 720px) {
  .offer.flight, .offer:not(.flight) { grid-template-columns: minmax(0, 1fr); }
  .offer-media { display: none; }
  .offer-price { border-left: 0; border-top: 1px solid var(--line); }
  .offer-price .choose { width: auto; }
}


/* the struck price: the line on the price itself */
.pt-was { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pt-was::after { content: none; }
.pt-was-price { position: relative; }
.pt-was-price::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; border-top: 2.25px solid var(--bad);
  border-radius: 2px; transform: rotate(-16deg); }
.price-tag.small .pt-was-price::after { border-top-width: 1.75px; }

/* "Other": a dashed tile; its box opens across the card's full width under the options */
.option.other { border-style: dashed; background: transparent; }
.option.other .o-label { color: var(--accent); }
.other-form { display: none; grid-column: 1 / -1; gap: 8px; align-items: center; }
.question.other-open:not(.answered) .other-form { display: flex; }
.question.other-open:not(.answered) .option.other { border-style: solid; border-color: var(--accent); }
.other-input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--text); font: inherit; }
.other-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.other-send { flex: none; width: auto; padding: 10px 16px; border-radius: 12px; }
.question.other-pending .other-form { opacity: .6; }
.option.other.picked .o-desc { color: var(--text); }

/* shown just in case: a card that misses something the traveler asked for says so */
.tag.over { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); font-weight: 700; white-space: normal; }
.tag.jic { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); font-weight: 600; white-space: normal; }

/* ---------- questions: several picks each, one Continue per round ---------- */
.q-hint { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--muted); white-space: nowrap; }
.answer-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 10px 0 4px; }
.answer-bar .ab-count { color: var(--muted); font-size: 13px; }
.answer-bar button { width: auto; padding: 10px 22px; }
.answer-bar button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- web version: each part booked on its site ---------- */
.bk-items.handoff li { grid-template-columns: 76px minmax(0, 1fr) auto auto; }
.handoff-go { display: inline-block; padding: 9px 14px; border-radius: 10px; text-decoration: none; white-space: nowrap; font-weight: 700; }
@media (max-width: 640px) { .bk-items.handoff li { grid-template-columns: minmax(0, 1fr) auto; } .handoff-go { grid-column: 1 / -1; text-align: center; } }