/* Navo AI (ai.navo24.com). Product UI on Navo DS tokens from /navo-ds.css (DS v1.36 copy shipped with navo24.com). */
:root { --side-w: 272px; --panel-w: 400px; --top-h: 56px; --read-w: 768px; --ease: cubic-bezier(.2,.8,.2,1); }
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: clip; }
body.ai { margin: 0; font-family: var(--font-sans); color: var(--text-primary); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; overflow: hidden; display: flex; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Lucide icons (v1.47.0, the DS pin) as masks: colour follows currentColor */
.ic { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ic-panel-left { --i: url(/icons/panel-left.svg); } .ic-panel-right { --i: url(/icons/panel-right.svg); }
.ic-square-pen { --i: url(/icons/square-pen.svg); } .ic-arrow-up { --i: url(/icons/arrow-up.svg); }
.ic-mic { --i: url(/icons/mic.svg); } .ic-mic-off { --i: url(/icons/mic-off.svg); } .ic-audio-lines { --i: url(/icons/audio-lines.svg); }
.ic-x { --i: url(/icons/x.svg); } .ic-gauge { --i: url(/icons/gauge.svg); } .ic-copy { --i: url(/icons/copy.svg); } .ic-map { --i: url(/icons/map.svg); } .ic-square-pen { --i: url(/icons/square-pen.svg); } .ic-check { --i: url(/icons/check.svg); } .ic-link { --i: url(/icons/link.svg); }
.ic-square { --i: url(/icons/square.svg); } .ic-map { --i: url(/icons/map.svg); } .ic-sparkles { --i: none; background: url(/brand/navo-mark-color.svg) center / contain no-repeat; -webkit-mask: none; mask: none; border-radius: 50%; }
.ic-message-square { --i: url(/icons/message-square.svg); } .ic-trash-2 { --i: url(/icons/trash-2.svg); }
.ic-external-link { --i: url(/icons/external-link.svg); } .ic-globe { --i: url(/icons/globe.svg); }
.ic-paperclip { --i: url(/icons/paperclip.svg); } .ic-chevron-down { --i: url(/icons/chevron-down.svg); } .ic-chevron-up { --i: url(/icons/chevron-up.svg); } .ic-chevron-right { --i: url(/icons/chevron-right.svg); }
.ic-plane { --i: url(/icons/plane.svg); } .ic-truck { --i: url(/icons/truck.svg); } .ic-train-front { --i: url(/icons/train-front.svg); }
.ic-file-text { --i: url(/icons/file-text.svg); } .ic-locate { --i: url(/icons/locate.svg); } .ic-grip-horizontal { --i: url(/icons/grip-horizontal.svg); }
.ic-minimize-2 { --i: url(/icons/minimize-2.svg); } .ic-maximize-2 { --i: url(/icons/maximize-2.svg); } .ic-message-square-text { --i: url(/icons/message-square-text.svg); }
.ic-arrow-right-left { --i: url(/icons/arrow-right-left.svg); } .ic-arrow-right { --i: url(/icons/arrow-right.svg); } .ic-map-pin { --i: url(/icons/map-pin.svg); }
.ic-ship { --i: url(/icons/ship.svg); } .ic-route { --i: url(/icons/route.svg); } .ic-anchor { --i: url(/icons/anchor.svg); }
.ic-container { --i: url(/icons/container.svg); } .ic-dollar-sign { --i: url(/icons/dollar-sign.svg); } .ic-calendar { --i: url(/icons/calendar.svg); }
.ic-search { --i: url(/icons/search.svg); }

/* icon button (ghost) */
.ib { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-secondary); cursor: pointer; flex: none; transition: background .15s, color .15s; }
.ib:hover { background: var(--bg-track); color: var(--text-primary); }
.ib:focus-visible, .cp-send:focus-visible, .side-new:focus-visible, .app:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ib[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); }

/* ── Left sidebar: navigation + chat history ─────────────────────────────── */
.side { width: 0; flex: none; overflow: hidden; background: var(--bg-sunken); border-right: 1px solid var(--border-subtle-line); display: flex; flex-direction: column; transition: width .25s var(--ease); }
body.side-open .side { width: var(--side-w); }
.side > * { min-width: var(--side-w); }
.side-top { height: var(--top-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-4) 0 var(--sp-6); }
.side-logo img { height: 22px; width: auto; display: block; }
.side-new { margin: var(--sp-2) var(--sp-4) var(--sp-5); height: 40px; display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-5); border: 1px solid transparent; border-radius: var(--r-pill); background: var(--bg-base); box-shadow: var(--shadow-surface-rest); font-size: var(--fs-2); font-weight: var(--fw-medium); cursor: pointer; width: auto; min-width: 0; }
.side-new:hover { box-shadow: var(--shadow-surface-hover); }
.side-h { padding: var(--sp-5) var(--sp-6) var(--sp-3); font-size: var(--fs-1); font-weight: var(--fw-semibold); color: var(--text-tertiary); }
.side-apps a { display: flex; align-items: center; gap: var(--sp-4); margin: 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-float); color: var(--text-primary); text-decoration: none; font-size: var(--fs-2); }
.side-apps a:hover { background: var(--bg-track); }
.side-apps img { width: 22px; height: 22px; flex: none; }
.side-list { flex: 1; overflow-y: auto; padding: 0 var(--sp-4) var(--sp-5); }
.hist { display: flex; align-items: center; gap: var(--sp-2); border-radius: var(--r-float); }
.hist a { flex: 1; min-width: 0; padding: var(--sp-4) var(--sp-4); font-size: var(--fs-2); color: var(--text-primary); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist:hover { background: var(--bg-track); }
.hist.on { background: var(--bg-base); box-shadow: var(--shadow-surface-rest); }
.hist.on a { font-weight: var(--fw-medium); }
.hist .ib { width: 32px; height: 32px; opacity: 0; }
.hist:hover .ib, .hist .ib:focus-visible { opacity: 1; }
.hist .ib .ic { width: 16px; height: 16px; }
.side-empty { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-1); color: var(--text-tertiary); }
.side-foot { border-top: 1px solid var(--border-subtle-line); padding: var(--sp-4); }
.side-link { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-float); color: var(--text-secondary); text-decoration: none; font-size: var(--fs-2); }
.side-link:hover { background: var(--bg-track); color: var(--text-primary); }
.scrim { display: none; }

/* ── Main shell ──────────────────────────────────────────────────────────── */
.shell { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.top { height: var(--top-h); flex: none; display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-5); }
body.side-open .top-side, body.side-open .top-new { display: none; }
.top-title { flex: 1; min-width: 0; font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: var(--sp-3); }
.top-r { display: flex; gap: var(--sp-2); }
.stage { flex: 1; min-height: 0; position: relative; display: flex; }

/* chat column */
.chat { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-canvas); }
.chat-head { display: none; }
.scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.log { max-width: var(--read-w); margin: 0 auto; padding: var(--sp-6) var(--sp-8) var(--sp-10); }
.dock { flex: none; padding: 0 var(--sp-8) var(--sp-7); }
.dock .composer { max-width: var(--read-w); margin: 0 auto; }
body[data-state="empty"] .dock { display: none; }
body:not([data-state="empty"]) .hello { display: none; }

/* empty state */
.hello { min-height: 100%; max-width: var(--read-w); margin: 0 auto; padding: var(--sp-10) var(--sp-8) var(--sp-12); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--sp-6); }
.hello-logo { height: 40px; width: auto; }
.hello-h { margin: var(--sp-5) 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-9); line-height: var(--lh-1); letter-spacing: -0.015em; }
.hello-p { margin: 0; font-size: var(--fs-3); color: var(--text-secondary); line-height: var(--lh-3); max-width: 560px; }
.hello-box { width: 100%; margin-top: var(--sp-4); }
.apps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-4); width: 100%; max-width: 720px; margin-top: var(--sp-6); }
.app { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-decoration: none; color: var(--text-primary); font-size: var(--fs-2); font-weight: var(--fw-medium); padding: var(--sp-4) var(--sp-2); border-radius: var(--r-float); line-height: var(--lh-2); }
.app img { width: 56px; height: 56px; transition: transform .2s var(--ease); }
.app:hover img { transform: scale(1.06); }
.app small { display: block; font-size: var(--fs-1); font-weight: var(--fw-regular); color: var(--text-tertiary); }
.sugg { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); max-width: 680px; margin-top: var(--sp-4); }
.chip { height: 36px; padding: 0 var(--sp-6); border: 1px solid transparent; border-radius: var(--r-pill); background: var(--bg-track); color: var(--text-secondary); font-size: var(--fs-2); cursor: pointer; }
.chip:hover { color: var(--text-primary); background: var(--accent-wash); }

/* composer */
.composer { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-5) var(--sp-4) var(--sp-7); background: var(--bg-base); border-radius: var(--r-card); box-shadow: var(--shadow-surface-rest), 0 0 0 1px var(--border-subtle-line); text-align: left; }
.composer:focus-within { box-shadow: var(--shadow-surface-hover), 0 0 0 1px var(--accent-wash-border); }
.cp-in { border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: var(--fs-3); line-height: var(--lh-3); color: var(--text-primary); max-height: 220px; min-height: 28px; padding: var(--sp-2) 0; }
.cp-in::placeholder { color: var(--text-tertiary); }
.cp-row { display: flex; align-items: center; gap: var(--sp-2); }
.cp-note { flex: 1; font-size: var(--fs-1); color: var(--text-tertiary); }
.cp-send { width: 40px; height: 40px; border: 0; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--accent); color: #fff; cursor: pointer; transition: background .15s, box-shadow .15s; }
.cp-send:hover { background: var(--accent-hover); box-shadow: var(--shadow-accent-hover); }
.cp-send:disabled { background: var(--bg-track); color: var(--text-disabled); box-shadow: none; cursor: default; }
.cp-mic.on { background: var(--badge-error-bg); color: var(--badge-error-text); }

/* messages */
.msg { margin: 0 0 var(--sp-9); }
.msg.user { display: flex; flex-direction: column; align-items: flex-end; }
.msg.user .bub { max-width: 80%; background: var(--bg-track); border-radius: var(--r-card); padding: var(--sp-5) var(--sp-7); font-size: var(--fs-3); line-height: var(--lh-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.ai { display: flex; gap: var(--sp-6); align-items: flex-start; }
.msg.ai .av { width: 28px; height: 28px; flex: none; margin-top: 2px; }
.msg.ai .body { flex: 1; min-width: 0; }
.msg.ai .acts { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); opacity: 0; transition: opacity .15s; }
.msg.ai:hover .acts, .msg.ai:last-child .acts { opacity: 1; }
.msg.ai .acts .ib { width: 32px; height: 32px; }
.msg.ai .acts .ic { width: 16px; height: 16px; }
.msg.user .acts { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); opacity: 0; transition: opacity .15s; }
.msg.user:hover .acts, .msg.user:focus-within .acts { opacity: 1; }
.msg.user .acts .ib { width: 28px; height: 28px; }
.msg.user .acts .ic { width: 15px; height: 15px; }
.msg.user [data-edit] { display: none; }
.msg.user:nth-last-child(2) [data-edit], .msg.user:last-child [data-edit] { display: inline-flex; }
body.viewing .msg.user [data-edit] { display: none !important; }
.msg.user.editing .bub, .msg.user.editing .acts { display: none; }
.edit-box { width: min(100%, 640px); background: var(--bg-track); border-radius: var(--r-card); padding: var(--sp-5) var(--sp-6); }
.edit-box textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: var(--fs-3); line-height: var(--lh-3); color: inherit; }
.edit-box .edit-acts { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-4); }
.msg.ai.on-cv [data-cv] { color: var(--accent, #113EC9); }
@media (hover: none) { .msg.user .acts, .msg.ai .acts { opacity: 1; } }
.think { display: inline-flex; align-items: center; gap: var(--sp-4); color: var(--text-tertiary); font-size: var(--fs-2); }
.think::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
.err { color: var(--badge-error-text); font-size: var(--fs-2); }
.note { margin: 0 0 var(--sp-8); text-align: center; font-size: var(--fs-1); color: var(--text-tertiary); }

/* rich answer (markdown) */
.md { font-size: var(--fs-3); line-height: var(--lh-4); overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 var(--sp-6); }
.md h1, .md h2, .md h3, .md h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: var(--lh-1); margin: var(--sp-9) 0 var(--sp-5); }
.md h1 { font-size: var(--fs-6); } .md h2 { font-size: var(--fs-5); } .md h3, .md h4 { font-size: var(--fs-4); }
.md ul, .md ol { margin: 0 0 var(--sp-6); padding-left: var(--sp-9); }
.md li { margin: var(--sp-2) 0; } .md li::marker { color: var(--text-tertiary); }
.md a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.md strong { font-weight: var(--fw-semibold); }
.md code { font-family: var(--font-mono); font-size: .88em; background: var(--bg-track); border-radius: var(--radius-4, 4px); padding: 1px 5px; }
.md pre { margin: 0 0 var(--sp-6); background: var(--n-950); color: var(--n-50); border-radius: var(--r-float); padding: var(--sp-6); overflow-x: auto; }
.md pre code { background: none; padding: 0; color: inherit; font-size: var(--fs-1); }
.md blockquote { margin: 0 0 var(--sp-6); padding: var(--sp-2) var(--sp-6); border-left: 3px solid var(--accent); color: var(--text-secondary); }
.md hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--sp-8) 0; }
.md .tw { margin: 0 0 var(--sp-6); overflow-x: auto; border-radius: var(--r-float); box-shadow: 0 0 0 1px var(--border-default); }
.md table { border-collapse: collapse; width: 100%; font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.md th, .md td { text-align: left; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-default); vertical-align: top; }
.md th { background: var(--bg-sunken); font-weight: var(--fw-semibold); color: var(--text-secondary); font-size: var(--fs-1); }
.md tr:last-child td { border-bottom: 0; }

/* ── Canvas mode: visual on the left, narrow chat on the right ───────────── */
.canvas { position: relative; flex: 1; min-width: 0; background: var(--bg-sunken); overflow: hidden; }
.panel-tab { display: none; }
body.canvas .chat { flex: none; width: var(--panel-w); border-left: 1px solid var(--border-subtle-line); transition: margin-right .25s var(--ease); }
body.canvas .chat-head { display: flex; align-items: center; justify-content: space-between; height: 48px; flex: none; padding: 0 var(--sp-3) 0 var(--sp-7); font-size: var(--fs-2); font-weight: var(--fw-semibold); color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle-line); }
body.canvas .log { padding: var(--sp-6) var(--sp-6) var(--sp-8); }
body.canvas .dock { padding: 0 var(--sp-5) var(--sp-5); }
body.canvas .hello { padding: var(--sp-8) var(--sp-6); gap: var(--sp-5); }
body.canvas .hello-h { font-size: var(--fs-6); }
body.canvas .hello-logo { height: 28px; }
/* Side panel (canvas): no product icons, suggestions right away (Stefan 27.10). Icons only on the main screen. */
body.canvas .apps { display: none; }
body.canvas .app img { width: 44px; height: 44px; }
body.canvas .msg.user .bub { max-width: 90%; }
body.canvas .md { font-size: var(--fs-2); }
body.canvas.panel-closed .chat { margin-right: calc(-1 * var(--panel-w)); }
body.canvas.panel-closed .panel-tab { display: inline-flex; position: absolute; right: var(--sp-6); top: var(--sp-6); z-index: 5; align-items: center; gap: var(--sp-3); height: 40px; padding: 0 var(--sp-6); border: 1px solid transparent; border-radius: var(--r-pill); background: var(--bg-base); box-shadow: var(--shadow-surface-rest); font-size: var(--fs-2); font-weight: var(--fw-medium); cursor: pointer; }
body.canvas.panel-closed .panel-tab:hover { box-shadow: var(--shadow-surface-hover); }
/* With the chat panel slid away, the composer floats over the canvas so a question can still be asked. */
body.canvas.panel-closed .canvas .composer { position: absolute; left: 50%; bottom: var(--sp-8); transform: translateX(-50%); width: min(640px, calc(100% - 48px)); z-index: 6; }

.cv-map { position: absolute; inset: 0; }
.cv-map .maplibregl-ctrl-attrib { font-size: 10px; }
.cv-hud { position: absolute; left: var(--sp-7); top: var(--sp-7); bottom: var(--sp-7); z-index: 4; display: flex; flex-direction: column; gap: var(--sp-4); width: min(360px, calc(100% - 48px)); pointer-events: none; overflow: hidden; }
body.panel-closed .cv-hud { bottom: 140px; }
.cv-hud > * { flex: none; }
.cv-card { background: var(--glass-card-bg-strong); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-radius: var(--r-card); box-shadow: var(--shadow-surface-rest), 0 0 0 1px var(--glass-card-border); padding: var(--sp-6) var(--sp-7); pointer-events: auto; animation: rise .35s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cv-eyebrow { font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); display: flex; align-items: center; gap: var(--sp-3); }
.cv-eyebrow .ic { width: 14px; height: 14px; }
.cv-q { margin-top: var(--sp-3); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-5); line-height: var(--lh-1); letter-spacing: -0.01em; }
.cv-steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.cv-steps li { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-2); color: var(--text-tertiary); }
.cv-steps li::before { content: ""; width: 10px; height: 10px; flex: none; border-radius: 50%; border: 2px solid var(--border-strong); }
.cv-steps li.now { color: var(--text-primary); font-weight: var(--fw-medium); }
.cv-steps li.now::before { border-color: var(--accent); background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
.cv-steps li.done { color: var(--text-secondary); }
.cv-steps li.done::before { border-color: var(--accent); background: var(--accent); }
.cv-facts { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cv-fact { display: inline-flex; align-items: center; gap: var(--sp-3); height: 32px; padding: 0 var(--sp-5); border-radius: var(--r-pill); background: var(--bg-base); box-shadow: var(--shadow-surface-rest); font-size: var(--fs-1); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; animation: rise .35s var(--ease) both; }
.cv-fact .ic { width: 14px; height: 14px; color: var(--accent); }
.cv-rates { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-6); }
.cv-rates .cv-eyebrow { margin-bottom: var(--sp-2); }
.cv-price { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-2) 0; border-top: 1px solid var(--border-subtle-line); }
.cv-price:nth-child(2) { border-top: 0; }
.cv-price b { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 600; font-variant-numeric: tabular-nums; }
.cv-price span { font-size: var(--fs-1); color: var(--text-secondary); }
.cv-idle { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; pointer-events: none; }
.cv-idle div { text-align: center; color: var(--text-secondary); font-size: var(--fs-2); background: var(--glass-card-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: var(--sp-6) var(--sp-8); border-radius: var(--r-card); }
.mk { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(11,13,16,.3); }
.mk.o { background: var(--accent); } .mk.d { background: var(--brand-red); }
.mk.lft .mk-l { left: auto; right: 18px; }
.mk-l { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); white-space: nowrap; font: 600 12px/1 var(--font-sans); color: var(--text-primary); background: var(--bg-base); padding: 4px 8px; border-radius: var(--r-pill); box-shadow: var(--shadow-1); }
.ship { z-index: 3; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-base); box-shadow: var(--shadow-2); display: grid; place-items: center; color: var(--accent); }
.ship .ic { width: 16px; height: 16px; }
.radar { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; z-index: 2; pointer-events: none; }
.radar::before, .radar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ring 2.2s ease-out infinite; }
.radar::after { animation-delay: 1.1s; }
@keyframes ring { from { transform: scale(1); opacity: .7; } to { transform: scale(40); opacity: 0; } }

/* ── Voice mode ──────────────────────────────────────────────────────────── */
.voice { position: fixed; inset: 0; z-index: 50; background: var(--bg-canvas); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-8); padding: var(--sp-9); text-align: center; }
.voice-orb { width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; transition: transform .12s linear; }
.voice-orb img { width: 100%; height: 100%; }
.voice[data-mode="listen"] .voice-orb { animation: breathe 2.4s ease-in-out infinite; }
.voice[data-mode="think"] .voice-orb { animation: spin 2.4s linear infinite; }
.voice[data-mode="speak"] .voice-orb { animation: talk .5s ease-in-out infinite alternate; }
@keyframes breathe { 0%, 100% { transform: scale(.94); } 50% { transform: scale(1.04); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes talk { from { transform: scale(.96); } to { transform: scale(1.08); } }
.voice-state { font-size: var(--fs-4); font-weight: var(--fw-medium); }
.voice-said { min-height: 48px; max-width: 560px; color: var(--text-secondary); font-size: var(--fs-3); line-height: var(--lh-3); }
.voice-row { display: flex; gap: var(--sp-7); }
.vb { width: 56px; height: 56px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bg-track); cursor: pointer; }
.vb:hover { background: var(--border-default); }
.vb.off { background: var(--badge-error-bg); color: var(--badge-error-text); }
.vb-x { background: var(--n-950); color: #fff; }
.vb-x:hover { background: var(--n-800); }
.vb .ic { width: 24px; height: 24px; }

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .side { position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; box-shadow: var(--shadow-4); }
  body.side-open .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(11,13,16,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  body.side-open .top-side, body.side-open .top-new { display: inline-grid; }
  :root { --panel-w: min(400px, 100vw); }
  body.canvas .chat { position: absolute; right: 0; top: 0; bottom: 0; z-index: 8; background: var(--bg-canvas); box-shadow: var(--shadow-4); }
}
@media (max-width: 640px) {
  .apps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hello { padding: var(--sp-8) var(--sp-6); }
  .hello-h { font-size: var(--fs-6); }
  .log, .dock { padding-left: var(--sp-6); padding-right: var(--sp-6); }
  .msg.ai .av { display: none; }
  .cv-hud { left: var(--sp-5); top: var(--sp-5); width: calc(100% - 140px); bottom: auto; }
  body.canvas .cv-q { font-size: var(--fs-3); }
  body.canvas .cv-steps { display: none; }
  .cv-facts { flex-wrap: nowrap; overflow-x: auto; pointer-events: auto; scrollbar-width: none; }
  .cv-fact { flex: none; }
  .cv-rates { display: none; }
  .cv-map .maplibregl-ctrl-bottom-left { display: none; }
  body.canvas.panel-closed .panel-tab { right: var(--sp-5); top: var(--sp-5); padding: 0 var(--sp-5); }
  body.canvas.panel-closed .canvas .composer { bottom: var(--sp-5); width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── Sidebar apps dropdown (Stefan 27.10) ── */
.side-toggle { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 2 * var(--sp-4)); margin: 0 var(--sp-4); padding: var(--sp-5) var(--sp-4) var(--sp-3); border: 0; background: none; cursor: pointer; border-radius: var(--r-float); font: inherit; font-size: var(--fs-1); font-weight: var(--fw-semibold); color: var(--text-tertiary); text-align: left; }
.side-toggle:hover { color: var(--text-primary); }
.side-toggle:focus-visible, .side-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-toggle .ic { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.side-apps.closed .side-toggle .ic { transform: rotate(-90deg); }
.side-apps.closed .side-apps-list { display: none; }
.side-apps-list a.more { display: none; }
.side-apps.all .side-apps-list a.more { display: flex; }
.side-more { display: flex; align-items: center; gap: var(--sp-4); width: calc(100% - 2 * var(--sp-4)); margin: 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 0; background: none; border-radius: var(--r-float); color: var(--text-secondary); font: inherit; font-size: var(--fs-2); cursor: pointer; text-align: left; }
.side-more:hover { background: var(--bg-track); color: var(--text-primary); }
.side-more .ic { width: 22px; height: 16px; transition: transform .2s var(--ease); }
.side-apps.all .side-more .ic { transform: rotate(180deg); }

/* ── Attachments in the composer ── */
.cp-atts { display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: var(--sp-2) 0 var(--sp-3); }
.att { position: relative; display: flex; align-items: center; gap: var(--sp-3); height: 56px; border-radius: var(--r-float); background: var(--bg-track); box-shadow: 0 0 0 1px var(--border-subtle-line); }
.att.img { width: 56px; overflow: hidden; }
.att.img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att.file { padding: 0 34px 0 var(--sp-4); max-width: 240px; }
.att.file > .ic { width: 22px; height: 22px; color: var(--accent); }
.att.file span { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-2); line-height: 1.25; font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att.file small { color: var(--text-tertiary); font-weight: 400; }
.att-x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(11,13,16,.64); color: #fff; cursor: pointer; opacity: .9; }
.att-x:hover { opacity: 1; background: var(--n-950); }
.att-x .ic { width: 12px; height: 12px; }
.composer.drop { box-shadow: var(--shadow-surface-hover), 0 0 0 2px var(--accent); }
.cp-clip .ic { width: 18px; height: 18px; }
.msg.user { flex-direction: column; align-items: flex-end; gap: var(--sp-3); }
.msg-atts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); max-width: 80%; }
.msg-atts img { max-width: 220px; max-height: 180px; border-radius: var(--r-float); display: block; box-shadow: 0 0 0 1px var(--border-subtle-line); }
.att-chip { display: inline-flex; align-items: center; gap: var(--sp-3); height: 36px; padding: 0 var(--sp-5); border-radius: var(--r-pill); background: var(--bg-track); font-size: var(--fs-2); }
.att-chip .ic { width: 16px; height: 16px; color: var(--accent); }
.msg.flash .bub, .msg.flash .md { animation: flash 1.4s var(--ease); border-radius: var(--r-float); }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 4px var(--accent-wash-border); background-color: var(--accent-wash); } 100% { box-shadow: none; } }

/* ── Canvas card v2: same type and palette as the chat (Stefan 27.10: the old card looked foreign) ── */
.cv-hud { transition: none; will-change: transform; }
.cv-hud.dragging { cursor: grabbing; user-select: none; }
.cv-hud.dragging .cv-card { box-shadow: var(--shadow-surface-hover), 0 0 0 1px var(--glass-card-border); }
.cv-card { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.cv-top { display: flex; align-items: center; gap: var(--sp-3); margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)) 0 calc(-1 * var(--sp-3)); }
.cv-grip { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-float); color: var(--text-tertiary); cursor: grab; touch-action: none; }
.cv-grip:hover { background: var(--bg-track); color: var(--text-primary); }
.cv-grip .ic { width: 16px; height: 16px; }
.cv-top .cv-eyebrow { flex: 1; font-size: var(--fs-1); font-weight: var(--fw-semibold); letter-spacing: 0; text-transform: none; color: var(--text-secondary); }
.cv-eyebrow .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.1s ease-in-out infinite; }
.cv-ib { width: 28px; height: 28px; }
.cv-ib .ic { width: 15px; height: 15px; }
.cv-q { display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); margin-left: calc(-1 * var(--sp-3)); border: 0; border-radius: var(--r-float); background: none; text-align: left; cursor: pointer; font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--fs-3); line-height: var(--lh-3); letter-spacing: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.cv-q:hover { background: var(--bg-track); }
.cv-q .ic { width: 15px; height: 15px; margin-top: 4px; flex: none; color: var(--text-tertiary); opacity: 0; transition: opacity .15s; }
.cv-q:hover .ic { opacity: 1; }
.cv-card.fold { padding-bottom: var(--sp-4); }
.cv-card.fold .cv-q { font-size: var(--fs-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cv-steps { margin-top: var(--sp-4); gap: var(--sp-3); }
.cv-steps li { font-size: var(--fs-2); gap: var(--sp-3); }
.cv-steps li::before { width: 8px; height: 8px; }
.cv-steps li.done::before { border-color: var(--n-400, #9AA1AC); background: var(--n-400, #9AA1AC); }
.cv-sum-steps { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-1, 2px) var(--sp-3); margin-left: calc(-1 * var(--sp-3)); border: 0; border-radius: var(--r-pill); background: none; color: var(--text-tertiary); font: inherit; font-size: var(--fs-1); cursor: pointer; }
.cv-sum-steps:hover { background: var(--bg-track); color: var(--text-primary); }
.cv-sum-steps .ic { width: 14px; height: 14px; }
.cv-route { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--border-subtle-line); display: flex; flex-direction: column; gap: var(--sp-4); }
.cv-modes { display: flex; gap: var(--sp-2); padding: 3px; border-radius: var(--r-pill); background: var(--bg-track); }
.cv-mode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 30px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-secondary); font: inherit; font-size: var(--fs-1); font-weight: var(--fw-medium); cursor: pointer; }
.cv-mode .ic { width: 14px; height: 14px; }
.cv-mode:hover { color: var(--text-primary); }
.cv-mode.on { background: var(--bg-base); color: var(--accent); box-shadow: var(--shadow-surface-rest); }
.cv-mode.wait { animation: pulse 1.1s ease-in-out infinite; }
.cv-ends { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-2); font-weight: var(--fw-medium); flex-wrap: wrap; }
.cv-ends .ic { width: 14px; height: 14px; color: var(--text-tertiary); }
.cv-ends .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cv-ends .dot.o { background: var(--accent); } .cv-ends .dot.d { background: var(--brand-red); }
.cv-total { display: flex; align-items: baseline; gap: var(--sp-5); flex-wrap: wrap; }
.cv-total b { font-family: var(--font-sans); font-size: var(--fs-4); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.cv-total span { font-size: var(--fs-1); color: var(--text-tertiary); }
.cv-via, .cv-note { font-size: var(--fs-1); color: var(--text-secondary); }
.cv-note { color: var(--badge-warning-text, #8A5A00); }
.cv-legs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cv-leg { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-3); margin-left: calc(-1 * var(--sp-3)); width: calc(100% + 2 * var(--sp-3)); border: 0; border-radius: var(--r-float); background: none; font: inherit; font-size: var(--fs-1); text-align: left; cursor: pointer; color: var(--text-primary); }
.cv-leg .ic { width: 16px; height: 16px; color: var(--mc); }
.cv-leg-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-medium); }
.cv-leg-m { color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-leg:hover { background: var(--bg-track); }
.cv-leg.on { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--mc); }
.cv-acts { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.cv-acts .mini { display: inline-flex; align-items: center; gap: var(--sp-2); height: 30px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill); background: var(--bg-track); color: var(--text-primary); font: inherit; font-size: var(--fs-1); font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; }
.cv-acts .mini:hover { background: var(--accent-wash); color: var(--accent); }
.cv-acts .mini .ic { width: 14px; height: 14px; }
.cv-hint { margin-top: var(--sp-4); font-size: var(--fs-1); color: var(--text-secondary); }
.cv-try { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.cv-try button { height: 28px; padding: 0 var(--sp-4); border: 0; border-radius: var(--r-pill); background: var(--bg-track); color: var(--text-primary); font: inherit; font-size: var(--fs-1); cursor: pointer; }
.cv-try button:hover { background: var(--accent-wash); color: var(--accent); }
.cv-fact { border: 0; font: inherit; cursor: default; color: var(--text-primary); }
.cv-fact[data-fact] { cursor: pointer; }
.cv-fact[data-fact]:hover { box-shadow: var(--shadow-surface-hover); color: var(--accent); }
.cv-price { width: 100%; border: 0; border-top: 1px solid var(--border-subtle-line); background: none; font: inherit; cursor: pointer; text-align: left; color: inherit; }
.cv-price:hover b { color: var(--accent); }
.cv-price b { font-family: var(--font-sans); font-size: var(--fs-4); }
.mk.t { width: 10px; height: 10px; border-width: 2px; background: var(--n-700); }
.mk.t .mk-l { font-size: 11px; padding: 3px 6px; }
@media (max-width: 640px) {
  .cv-hud { transform: none !important; }
  .cv-grip { display: none; }
  .cv-legs, .cv-acts { display: none; }
  .att.file { max-width: 180px; }
}

/* Ranade has no Cyrillic: fall back to the sans, never to a browser serif (Stefan 27.10 screenshot). */
:root { --font-display: "Ranade", "Switzer", system-ui, sans-serif; }

.ship.done { opacity: 0; transition: opacity .6s; }
.cv-fold-sum { display: flex; align-items: center; gap: var(--sp-3); width: 100%; margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-3); margin-left: calc(-1 * var(--sp-3)); width: calc(100% + 2 * var(--sp-3)); border: 0; border-radius: var(--r-float); background: var(--bg-track); font: inherit; font-size: var(--fs-2); color: var(--text-primary); cursor: pointer; text-align: left; }
.cv-fold-sum:hover { background: var(--accent-wash); }
.cv-fold-sum b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cv-fold-sum span { flex: 1; min-width: 0; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-fold-sum .ic { width: 15px; height: 15px; flex: none; color: var(--accent); }
.cv-fold-sum .ic:last-child { color: var(--text-tertiary); }
.cv-top + .cv-q { margin-top: var(--sp-3); }

/* Embedded drawer (ai-launcher.js on distance./map./loading.navo24.com, Stefan 27.10.2026) */
body.embed .side, body.embed .top-side, body.embed [data-act="canvas"] { display: none !important; }
/* Embedded drawer look = tracking.navo24.com AI drawer (Stefan 28.10.2026): grey intro card with the app's hint,
   pill field + blue Ask, History / Open in Navo AI / New chat pills, disclaimer line. The launcher draws the head. */
body.embed { background: #fff; }
body.embed .top, body.embed .hello-logo, body.embed .hello-h, body.embed .hello-p, body.embed .apps, body.embed .sugg, body.embed .hello-box,
body.embed .cp-clip, body.embed .cp-mic, body.embed .cp-voice, body.embed .cp-note:empty, body.embed .tabs { display: none !important; }
body.embed .chat { background: #fff; }
body.embed .hello { min-height: 0; max-width: none; padding: 18px; align-items: stretch; justify-content: flex-start; text-align: left; gap: 0; }
body.embed .log { max-width: none; padding: 18px 18px 24px; }
.emb-intro { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: #f2f7fa; font-size: 13.5px; line-height: 1.5; color: #3b4a59; }
.emb-intro b { color: #0b2a45; font-weight: 600; }
.emb-q { all: unset; cursor: pointer; } .emb-q:hover { color: #1f3fc4; text-decoration: underline; } .emb-q:focus-visible { outline: 2px solid #1f3fc4; outline-offset: 1px; border-radius: 4px; }
body.embed .dock, body.embed[data-state="empty"] .dock { display: flex !important; flex-direction: column; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid #edf1f5; background: #fff; }
body.embed .composer { max-width: none; margin: 0; flex-direction: row; align-items: center; gap: 8px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
body.embed .composer:focus-within { box-shadow: none; }
body.embed .cp-in { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 11px 16px; font-size: 14px; line-height: 22px; border: 1px solid #d5dde5; border-radius: 22px; background: #fff; }
body.embed .cp-in:focus { border-color: #1f3fc4; box-shadow: 0 0 0 3px rgba(31,63,196,.12); }
body.embed .cp-row { flex: none; }
body.embed .cp-send { width: auto; height: 44px; padding: 0 22px; background: #1f3fc4; font: 600 15px/1 inherit; font-family: inherit; }
body.embed .cp-send:disabled { background: #1f3fc4; color: #fff; opacity: .55; }
body.embed .cp-send .ic-arrow-up { display: none; } body.embed .cp-send:has(.ic-arrow-up)::after { content: 'Ask'; }
body.embed .cp-send:has(.ic-square) { padding: 0; width: 44px; }
.emb-foot { display: none; } body.embed .emb-foot { display: flex; flex-direction: column; gap: 8px; }
.emb-tools { display: flex; gap: 8px; }
.emb-pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; border: 1px solid #d5dde5; border-radius: 999px; background: #fff; color: #0b2a45; font: 500 13px/1 inherit; font-family: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; }
.emb-pill:hover { background: #eef6f9; } .emb-pill:focus-visible { outline: 2px solid #1f3fc4; outline-offset: 2px; }
.emb-note { font-size: 11.5px; color: #7a8794; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Container position on its tracked route (28.10) */
.ship.now { color: var(--accent); box-shadow: 0 0 0 6px rgba(17,62,201,.14), var(--shadow-2); }
@media (max-width: 700px) { .mk.t .mk-l { display: none; } .ship.now { width: 24px; height: 24px; } }

/* ── History page /history with search (Stefan 28.10.2026) ── */
.side .side-hlink, .side .side-hlink:hover { text-decoration: none; }
.side > .side-hlink { min-width: 0; }
.side-hlink { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: calc(var(--side-w) - 2 * var(--sp-4)); margin: 0 var(--sp-4); padding: var(--sp-5) var(--sp-4) var(--sp-3); border-radius: var(--r-float); text-decoration: none; }
.side-hlink { color: var(--text-tertiary); }
.side-hlink:hover { color: var(--text-primary); }
.side-hlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-hlink .ic { width: 16px; height: 16px; }
body.hp-on .side-hlink { color: var(--text-primary); }
.hp { flex: 1; min-width: 0; overflow-y: auto; background: var(--bg-canvas); }
body.hp-on .chat, body.hp-on .canvas { display: none !important; }
body.hp-on .top-r { visibility: hidden; }
.hp-in { max-width: var(--read-w); margin: 0 auto; padding: var(--sp-8) var(--sp-8) var(--sp-12); }
.hp-h { margin: 0 var(--sp-4) var(--sp-6); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-6); }
.hp-search { display: flex; align-items: center; gap: var(--sp-4); height: 48px; padding: 0 var(--sp-6); background: var(--bg-base); border-radius: var(--r-pill); box-shadow: var(--shadow-surface-rest), 0 0 0 1px var(--border-subtle-line); }
.hp-search:focus-within { box-shadow: var(--shadow-surface-rest), 0 0 0 2px var(--accent); }
.hp-search .ic { width: 18px; height: 18px; color: var(--text-tertiary); }
.hp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: var(--fs-3); color: var(--text-primary); }
.hp-meta { margin: var(--sp-6) var(--sp-4) var(--sp-3); font-size: var(--fs-1); color: var(--text-tertiary); }
.hp-row { display: flex; align-items: center; gap: var(--sp-3); border-radius: var(--r-float); border-bottom: 1px solid var(--border-subtle-line); }
@media (hover: hover) { .hp-row:hover { background: var(--bg-track); } }
.hp-row a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1, 2px); padding: var(--sp-5) var(--sp-4); color: var(--text-primary); text-decoration: none; }
.hp-row a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-float); }
.hp-t { display: flex; justify-content: space-between; gap: var(--sp-5); font-size: var(--fs-2); font-weight: var(--fw-medium); }
.hp-t span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-t time { flex: none; font-weight: 400; font-size: var(--fs-1); color: var(--text-tertiary); }
.hp-s { font-size: var(--fs-1); color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp mark { background: var(--accent-wash); color: inherit; border-radius: 3px; padding: 0 1px; }
.hp-row .ib { width: 32px; height: 32px; opacity: 0; margin-right: var(--sp-3); }
.hp-row:hover .ib, .hp-row .ib:focus-visible { opacity: 1; }
.hp-row .ib .ic { width: 16px; height: 16px; }
@media (max-width: 640px) { .hp-in { padding: var(--sp-6) var(--sp-5); } .hp-row .ib { opacity: 1; width: 40px; height: 40px; margin-right: 0; } }

/* Flags and carrier logos on the canvas (Stefan 28.10.2026) */
.flag { width: 16px; height: 12px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(11,13,16,.1); flex: none; vertical-align: -1px; }
.mk-l { display: inline-flex; align-items: center; gap: 6px; }
.cv-ends .flag { margin-right: -2px; }
.cv-leg-n .flag { width: 14px; height: 10px; margin-right: 4px; }
.cv-car { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.cv-via.cv-car { display: flex; }
.cv-logo { width: 56px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--border-subtle-line); overflow: hidden; }
.cv-logo.dark { background: #0B0D10; }
.cv-logo img { max-width: 48px; max-height: 18px; object-fit: contain; }
.cv-logo.sq { width: 26px; }
.cv-logo.sq img { width: 26px; height: 26px; max-width: none; max-height: none; object-fit: cover; }
.cv-price { align-items: center; }


/* ── App mode: Navo mobile app (iOS/Android shell, Stefan 28.10.2026) ─────────── */
.tabs, section.av, .ap, .ac { display: none; } /* section.av: the in-app view; img.av is the AI avatar in messages (Stefan 28.10 bug: the avatar flew to the top-left corner) */
body.app-mode { --tabs-h: 64px; }
body.app-mode .side, body.app-mode .scrim, body.app-mode .top-side, body.app-mode [data-act="canvas"], body.app-mode .side-foot { display: none !important; }
body.app-mode .shell { height: calc(100dvh - var(--tabs-h) - env(safe-area-inset-bottom)); }
body.app-mode .top { padding-top: env(safe-area-inset-top); height: calc(var(--top-h) + env(safe-area-inset-top)); }
body.app-mode .tabs { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--bg-base); border-top: 1px solid var(--border-subtle-line); }
.tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); border: 0; background: transparent; color: var(--text-tertiary); font: inherit; font-size: var(--fs-1); font-weight: var(--fw-medium); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tabs button .ic { width: 22px; height: 22px; }
.tabs button[aria-current] { color: var(--accent); }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: var(--r-float); }
body.app-mode .apps .app { cursor: pointer; }
/* Apps and Contact tabs: full screens above the chat */
body.app-mode .ap:not([hidden]), body.app-mode .ac:not([hidden]) { display: block; position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); z-index: 20; overflow-y: auto; background: var(--bg-canvas); padding-top: env(safe-area-inset-top); }
.ap-in { max-width: var(--read-w); margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-10); }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-5); }
.ap-grid .app { flex-direction: row; text-align: left; gap: var(--sp-5); padding: var(--sp-5); border: 0; background: var(--bg-base); border-radius: var(--r-card); box-shadow: var(--shadow-surface-rest); font: inherit; font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--text-primary); }
.ap-grid .app img { width: 44px; height: 44px; }
.ac-p { margin: 0 var(--sp-4) var(--sp-7); color: var(--text-secondary); font-size: var(--fs-2); }
.ac-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.ac-row { display: flex; align-items: center; gap: var(--sp-5); width: 100%; padding: var(--sp-6); border: 0; background: var(--bg-base); border-radius: var(--r-card); box-shadow: var(--shadow-surface-rest); color: var(--text-primary); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.ac-row > .ic:first-child { width: 22px; height: 22px; color: var(--accent); }
.ac-row > .ic:last-child { width: 18px; height: 18px; color: var(--text-tertiary); margin-left: auto; }
.ac-row span { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-2); }
.ac-row small { color: var(--text-secondary); font-size: var(--fs-1); }
.ac-legal { margin: var(--sp-9) var(--sp-4) 0; font-size: var(--fs-1); color: var(--text-tertiary); line-height: 1.5; }
.ac-legal a { color: var(--text-secondary); }
/* In-app view: a Navo app full screen under its own header, tabs stay below */
body.app-mode section.av:not([hidden]) { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: 0; bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); z-index: 30; background: var(--bg-canvas); }
.av-top { display: flex; align-items: center; gap: var(--sp-3); flex: none; height: calc(var(--top-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--sp-4) 0; border-bottom: 1px solid var(--border-subtle-line); background: var(--bg-base); }
.av-mark { width: 24px; height: 24px; flex: none; }
.av-title { flex: 1; min-width: 0; font-size: var(--fs-3); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-frame { flex: 1; width: 100%; border: 0; background: var(--bg-canvas); }
.av-load { height: 2px; flex: none; overflow: hidden; }
.av.loading .av-load span { display: block; height: 100%; width: 40%; background: var(--accent); animation: avload 1s var(--ease) infinite; }
@keyframes avload { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (min-width: 900px) { body.app-mode .tabs { left: 50%; right: auto; transform: translateX(-50%); width: 560px; bottom: var(--sp-5); border: 0; border-radius: var(--r-pill); box-shadow: var(--shadow-3); height: 60px; padding: 0; } body.app-mode { --tabs-h: 84px; } }
.ic-layout-grid { --i: url(/icons/layout-grid.svg); } .ic-phone { --i: url(/icons/phone.svg); } .ic-mail { --i: url(/icons/mail.svg); }
.ic-history { --i: url(/icons/history.svg); } .ic-message-circle { --i: url(/icons/message-circle.svg); } .ic-chevron-left { --i: url(/icons/chevron-left.svg); }
.ic-rotate-cw { --i: url(/icons/rotate-cw.svg); } .ic-headset { --i: url(/icons/headset.svg); }
body.app-mode.canvas.panel-closed .canvas .composer { bottom: var(--sp-5); }
body.app-mode .cv-hud { top: var(--sp-5); }
body.app-mode .apps { display: none; } /* Stefan 28.10: в приложении на главном только сниппеты, приложения во вкладке Apps */
.ac-legal a { text-decoration: underline; }

/* ── Plans & usage (Stefan 28.10.2026): in-app pricing, limits, checkout and "talk to a manager" ── */
.side-plan { display: flex; align-items: center; gap: var(--sp-4); width: 100%; margin-bottom: var(--sp-3); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--border-subtle-line); border-radius: var(--radius-8); background: var(--bg-base); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.side-plan:hover { border-color: var(--accent); }
.side-plan > .ic:first-child { width: 18px; height: 18px; color: var(--accent); flex: none; }
.side-plan > .ic:last-child { width: 16px; height: 16px; color: var(--text-tertiary); margin-left: auto; flex: none; }
.side-plan span { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-1); }
.side-plan b { font-weight: var(--fw-semibold); }
.side-plan small { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-plan small:empty { display: none; }
.pl-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.pl-wrap[hidden] { display: none; }
.pl-scrim { position: absolute; inset: 0; background: rgba(10, 20, 40, .45); }
.pl { position: relative; width: min(980px, 100%); max-height: calc(100dvh - 48px); overflow: auto; background: var(--bg-base); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.25); padding: var(--sp-9) var(--sp-9) var(--sp-8); }
.pl-x { position: absolute; top: 26px; right: 22px; }
.pl h2 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: 26px; }
.pl-sub { margin: 0 0 var(--sp-7); color: var(--text-secondary); font-size: var(--fs-2); }
.pl-use { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-7); padding: var(--sp-6); border-radius: var(--radius-8); background: var(--bg-canvas); font-size: var(--fs-2); }
.pl-use b { font-weight: var(--fw-semibold); }
.pl-bar { flex: 1 1 220px; height: 8px; border-radius: 4px; background: var(--bg-track); overflow: hidden; }
.pl-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.pl-bar.warn i { background: #d9822b; }
.pl-int { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: var(--sp-6); border-radius: 999px; background: var(--bg-canvas); }
.pl-int button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: var(--fs-1); color: var(--text-secondary); cursor: pointer; }
.pl-int button[aria-pressed="true"] { background: var(--bg-base); color: var(--text-primary); box-shadow: var(--shadow-surface-rest); }
.pl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.pl-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-7) var(--sp-6); border: 1px solid var(--border-subtle-line); border-radius: 12px; }
.pl-card.pop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pl-card.cur { background: var(--bg-canvas); }
.pl-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: var(--fw-semibold); }
.pl-card h3 { margin: 0; font-size: var(--fs-3); }
.pl-price { font-size: 28px; font-weight: var(--fw-semibold); font-family: var(--font-display); }
.pl-price small { font-size: var(--fs-1); font-weight: normal; color: var(--text-secondary); font-family: inherit; }
.pl-card p { margin: 0; font-size: var(--fs-1); color: var(--text-secondary); line-height: 1.45; }
.pl-card .mini-btn { margin-top: auto; justify-content: center; }
.pl-costs { margin: var(--sp-7) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); font-size: var(--fs-1); color: var(--text-secondary); }
.pl-costs b { color: var(--text-primary); }
.pl-note { margin: var(--sp-5) 0 0; font-size: var(--fs-1); color: var(--text-tertiary); }
.pl-sales { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-7); padding: var(--sp-6); border-radius: 12px; background: var(--bg-canvas); }
.pl-sales div { flex: 1 1 260px; font-size: var(--fs-2); }
.pl-sales div p { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--fs-1); }
.pl-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-7); }
.pl-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-1); color: var(--text-secondary); }
.pl-form label.wide { grid-column: 1 / -1; }
.pl-form input, .pl-form textarea, .pl-form select { font: inherit; font-size: var(--fs-2); padding: 10px 12px; border: 1px solid var(--border-subtle-line); border-radius: var(--radius-8); background: var(--bg-base); color: var(--text-primary); }
.pl-form textarea { min-height: 96px; max-height: 240px; resize: vertical; }
.pl-form input:focus, .pl-form textarea:focus, .pl-form select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.pl .mini-btn { min-height: 38px; padding-left: 18px; padding-right: 18px; }
.pl-use, .pl-sales { margin-left: 0; margin-right: 0; }
.pl-form .row { grid-column: 1 / -1; display: flex; gap: var(--sp-4); align-items: center; }
.pl-msg { font-size: var(--fs-1); color: var(--text-secondary); }
.pl-msg.err { color: #c0392b; }
.limit-box { display: block; margin-top: var(--sp-3); }
.limit-box .mini-btn { margin: var(--sp-3) var(--sp-3) 0 0; }
@media (max-width: 860px) { .pl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pl { padding: var(--sp-8) var(--sp-6); } .pl-grid, .pl-form { grid-template-columns: 1fr; } }

/* Public chat links (Stefan 28.10.2026): copy button only when a chat is open; read-only banner */
body[data-state="empty"] .top-share, body.embed .top-share { display: none; }
.shared-note { margin-top: var(--sp-4); }

/* App mode: plans button in the top bar (the sidebar with "Plans & usage" is hidden there) */
.top-plan { display: none; }
body.app-mode .top-plan { display: inline-flex; }
body.embed .top-plan { display: none !important; }

/* Mobile app, Ask + Map (Stefan 28.10): the bottom tabs switch text and map, so the map has no Chat button.
   The card shows the start of the answer and leads to the full text in Ask; a dot marks the tab with news. */
body.app-mode .panel-tab, body.app-mode.canvas .chat-head [data-act="panel"] { display: none !important; }
body.app-mode .tabs button { position: relative; }
body.app-mode .tabs button.dot::after { content: ""; position: absolute; top: 9px; left: calc(50% + 9px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-base); }
.cv-ans { display: none; }
body.app-mode .cv-ans { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border-subtle-line); border-radius: var(--r-float); background: var(--bg-base); text-align: left; cursor: pointer; font: inherit; color: var(--text-secondary); }
body.app-mode .cv-ans-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-2); line-height: var(--lh-3); }
body.app-mode .cv-ans-go { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); font-weight: var(--fw-semibold); color: var(--accent); }
body.app-mode .cv-ans-go .ic { width: 14px; height: 14px; }