/* HolaReply Desk (app.holareply.com/desk). White, navy, Geist with Plus Jakarta Sans headings: the approved mockup of 3 October 2026 in the new brand of 17 October 2026. */
@font-face { font-family: "Geist"; src: url("geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("plus-jakarta-sans.woff2") format("woff2"); font-weight: 600 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("plus-jakarta-sans-ext.woff2") format("woff2"); font-weight: 600 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
	--accent: #1A2370; --accent-50: #EEF0FA; --accent-100: #DDE0F2; --accent-deep: #0E1140;
	--ink: #0e1140; --ink-2: #394355; --muted: #5d6677; --line: #e4e7ee; --soft: #f5f6f9; --ground: #f7f8fa; --side: #fcfcfd;
	--amber-bg: #fef0c7; --amber: #7a2e0b; --green-bg: #dff5e9; --green: #05603a; --red-bg: #fde7e5; --red: #9f1d14; --grey-bg: #eef0f4; --grey: #434c5e;
	--sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, Consolas, monospace;
	--head: "Plus Jakarta Sans", "Geist", ui-sans-serif, system-ui, sans-serif; --focus: #3d4bc7;
	color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; text-wrap: balance; font-family: var(--head); }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Scroll bars blend half into the page, so they are there but quiet. */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, #c9cfda 50%, #fff) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, #c9cfda 50%, #fff); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #c9cfda; border: 2px solid transparent; background-clip: padding-box; }
[hidden] { display: none !important; }
.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i-lg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header: big logo left; one row right: Inbox | Manage, bell, gear (fixed by Maqsood, 28 Sep). */
.top { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--ink); text-decoration: none; }
.mark { width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: none; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stores { position: relative; }
.stores summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.stores summary::-webkit-details-marker { display: none; }
.stores-menu { position: absolute; top: 46px; left: 0; min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(14, 21, 37, .25); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.stores-menu button { width: 100%; text-align: left; border: 0; background: none; padding: 9px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.stores-menu button:hover { background: var(--soft); }
.stores-menu .on { color: var(--accent); font-weight: 600; }
.stores-add { display: flex; align-items: center; gap: 8px; padding: 9px 10px; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; color: var(--accent); font-weight: 600; text-decoration: none; }
.stores-add:hover { background: var(--soft); }
.right { display: flex; align-items: center; gap: 6px; }
.seg { display: flex; background: #f0f2f6; border-radius: 11px; padding: 3px; gap: 2px; }
.seg a { height: 34px; padding: 0 14px; border-radius: 8px; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--muted); text-decoration: none; }
.seg a[aria-current] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(14, 21, 37, .08), 0 0 0 1px rgba(14, 21, 37, .04); }
.pill { font-size: 11.5px; font-weight: 600; background: var(--grey-bg); color: var(--grey); border-radius: 999px; padding: 0 7px; line-height: 18px; }
.ib { position: relative; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); display: inline-grid; place-items: center; cursor: pointer; text-decoration: none; }
.ib:hover { background: var(--soft); }
.ib[aria-current] { background: var(--accent-50); color: var(--accent); }

/* Body: a side menu and the page. */
.app { display: flex; flex-wrap: wrap; min-height: calc(100% - 64px); }
.side { flex: 0 0 248px; border-right: 1px solid var(--line); background: var(--side); padding: 16px 10px; display: flex; flex-direction: column; gap: 18px; }
.cap { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 0 10px 6px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nv { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.nv:hover { background: var(--soft); }
.nv[aria-current] { background: var(--accent-50); color: var(--accent); }
.nv .ct { margin-left: auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.page { flex: 999 1 560px; min-width: 0; background: var(--ground); padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 18px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; font-weight: 800; }
.page-head p { color: var(--muted); }
.page-head .end { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card h2 { font-size: 15px; font-weight: 700; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.row > .card { flex: 1 1 320px; }

.btn { height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--soft); }
.btn-p { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-p:hover { background: var(--accent-deep); }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13px; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--muted); }
.btn-danger { color: var(--red); }
.btn-wide { width: 100%; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; }

.field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.input { height: 42px; padding: 0 12px; border: 1px solid #cfd4de; border-radius: 10px; background: #fff; width: 100%; }
.input:focus { border-color: var(--accent); outline: 2px solid var(--accent-100); }
.code-input { font-family: var(--mono); font-size: 26px; letter-spacing: .35em; text-align: center; height: 58px; }
.form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-row .field { flex: 1 1 200px; }

.b { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.b-blue { background: var(--accent-100); color: var(--accent); }
.b-green { background: var(--green-bg); color: var(--green); }
.b-amber { background: var(--amber-bg); color: var(--amber); }
.b-grey { background: var(--grey-bg); color: var(--grey); }

.notice { border-radius: 10px; padding: 10px 14px; background: var(--accent-50); border: 1px solid var(--accent-100); color: var(--ink); }
.notice.warn { background: #fff8e8; border-color: #f6e0a8; color: #6b2a08; }

.av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--ink); flex: none; }
.av-1 { background: #c2410c; } .av-2 { background: #0e7490; } .av-3 { background: #3d4bc7; } .av-4 { background: #1f7a5c; } .av-5 { background: #2f6b5a; } .av-6 { background: #1A2370; }

.list { display: flex; flex-direction: column; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.item:first-child { border-top: 0; }
.item-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.item-main strong { font-weight: 600; }
.item-main span { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.item-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meter { height: 8px; border-radius: 99px; background: var(--grey-bg); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; }

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 56px 20px; color: var(--muted); }
.empty .bubble { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-50); color: var(--accent); display: grid; place-items: center; }
.empty h2 { color: var(--ink); font-size: 18px; }
.empty p { max-width: 46ch; }

/* Sign-in pages. */
.bare { min-height: 100%; background: var(--ground); display: grid; place-items: center; padding: 32px 16px; }
.sign { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 24px 60px -30px rgba(14, 21, 37, .25); }
.sign-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.sign-logo img { width: 30px; height: 30px; border-radius: 8px; }
.sign h1 { font-size: 24px; font-weight: 800; }
.sign p { color: var(--ink-2); }
.sign .small { font-size: 13px; color: var(--muted); }
.sign form { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 760px) {
	.top { padding: 0 10px 0 14px; }
	.brand-name { display: none; }
	.side { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px; }
	.side .nav { flex-direction: row; flex-wrap: wrap; }
	.side .cap { display: none; }
	.page { padding: 18px 16px 32px; }
}

/* The inbox: views · list · conversation · customer. */
.i-s { width: 14px; height: 14px; }
.i-accent { color: var(--accent); }
.small { font-size: 12.5px; }
.kbd { font-family: var(--mono); font-size: 10.5px; line-height: 17px; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; color: var(--muted); background: #fff; display: inline-block; }
.kbd-on { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .35); }
.b-red { background: var(--red-bg); color: var(--red); }
.b-xs { height: 18px; font-size: 10.5px; padding: 0 6px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 3px #d1fadf; flex: none; display: inline-block; margin: 0 4px; }
.hash { color: var(--muted); width: 16px; text-align: center; }
.ibx { flex: 1 1 100%; display: flex; flex-wrap: wrap; min-height: calc(100vh - 64px); min-width: 0; }
.views { flex: 0 0 232px; border-right: 1px solid var(--line); background: var(--side); padding: 14px 10px; display: flex; flex-direction: column; gap: 18px; }
.list { flex: 0 0 372px; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; height: calc(100vh - 64px); position: sticky; top: 64px; }
.list-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.list-head h1 { font-size: 17px; font-weight: 700; }
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--muted); margin: 0; }
.search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--ink); }
.search:focus-within { border-color: var(--accent); background: #fff; }
.rows { flex: 1; overflow: auto; }
.cv { display: flex; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.cv:hover { background: var(--soft); }
.cv.on { background: var(--accent-50); }
.cv:focus-visible { outline-offset: -2px; }
.cv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cv-top { display: flex; align-items: center; gap: 6px; }
.cv-top strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv.unread .cv-top strong { font-weight: 700; }
.cv.unread .cv-top strong::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 6px; vertical-align: 2px; }
.cv-time { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cv-sub { font-size: 12.5px; color: var(--muted); }
.cv-text { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv.unread .cv-text { color: var(--ink); }
.cv-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.cv-badges:empty { display: none; }
.keys { padding: 9px 16px; border-top: 1px solid var(--line); display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.empty.small { padding: 40px 20px; }

.thread { flex: 999 1 440px; min-width: 0; display: flex; flex-direction: column; height: calc(100vh - 64px); position: sticky; top: 64px; background: #fff; }
.thread-empty { justify-content: center; }
.th-head { padding: 12px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.th-head .back { display: none; }
.th-who { display: flex; flex-direction: column; min-width: 0; }
.th-who h2 { font-size: 16px; font-weight: 700; }
.th-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.select { height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-weight: 500; font-size: 13px; }
.reason { margin: 12px 20px 0; padding: 10px 12px; border-radius: 10px; background: #fff8e8; border: 1px solid #f6e0a8; display: flex; gap: 10px; align-items: flex-start; color: #6b2a08; }
.reason .i { margin-top: 2px; }
.notice.slim { margin: 10px 20px 0; padding: 8px 12px; }
/* The customer panel's note when the chat has no email or phone, with "Ask for email" under it. */
.notice.no-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; font-size: 13px; }
.msgs { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.msg-row { display: flex; gap: 10px; align-items: flex-end; }
.msg-row.me { flex-direction: column; align-items: flex-end; gap: 5px; }
.msg { max-width: min(78%, 620px); padding: 10px 13px; border-radius: 14px; overflow-wrap: anywhere; }
.msg-v { background: var(--soft); border-bottom-left-radius: 4px; }
.msg-a { background: var(--accent-50); border: 1px solid var(--accent-100); border-bottom-right-radius: 4px; }
.msg-t { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.msg-time { font-size: 11.5px; color: var(--muted); }
.msg-by { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.av-sm { width: 28px; height: 28px; font-size: 11px; }
.av-lg { width: 44px; height: 44px; font-size: 15px; }
.ev { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12px; color: var(--muted); text-align: center; }
.ev::before, .ev::after { content: ""; height: 1px; background: var(--line); flex: 1; max-width: 120px; }
.note { align-self: stretch; background: #fffbf0; border: 1px dashed #ebcb7a; border-radius: 12px; padding: 10px 13px; display: flex; gap: 10px; overflow-wrap: anywhere; }
.note-by { display: block; font-size: 12px; color: #7a4b00; font-weight: 600; margin-bottom: 2px; }
.composer { margin: 0 20px 16px; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(14, 21, 37, .04), 0 8px 24px -12px rgba(14, 21, 37, .12); }
.composer:focus-within { border-color: var(--accent); }
.composer textarea { display: block; width: 100%; border: 0; outline: 0; resize: vertical; min-height: 76px; padding: 12px 14px; border-radius: 14px 14px 0 0; background: transparent; }
.composer-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.grow { flex: 1; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }

.customer { flex: 0 0 300px; border-left: 1px solid var(--line); background: var(--side); height: calc(100vh - 64px); position: sticky; top: 64px; overflow: auto; }
.customer .sec { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.customer .cap { padding: 0; }
.who-big { display: flex; gap: 12px; align-items: center; }
.who-text { display: flex; flex-direction: column; min-width: 0; }
.kv { display: flex; align-items: center; gap: 8px; color: var(--ink-2); overflow-wrap: anywhere; }
.kv .i { color: var(--muted); }
.sel { user-select: all; }
.quote { color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
.pillbox { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font-weight: 500; flex-wrap: wrap; }
.pillbox .muted { margin-left: auto; font-weight: 400; font-size: 12px; }
.stack { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.row-btns { display: flex; gap: 6px; }
.input-sm { height: 34px; font-size: 13px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: #fff; cursor: pointer; }
.chip:hover { border-color: #cfd4de; }
.chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-50); }
.tag-add { display: flex; gap: 6px; margin: 0; }
.fresh { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--ink); color: #fff; border-radius: 999px; padding: 9px 16px; display: flex; gap: 10px; align-items: center; box-shadow: 0 12px 30px -10px rgba(14, 21, 37, .5); z-index: 10; }
.fresh[hidden] { display: none; }
.fresh .link-btn { color: #9db7ff; }

@media (max-width: 1280px) { .customer { flex-basis: 100%; height: auto; position: static; border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 1000px) {
	.views { display: none; }
	.list { flex: 1 1 100%; height: auto; position: static; border-right: 0; }
	.thread { flex-basis: 100%; height: auto; min-height: calc(100vh - 64px); position: static; }
	.ibx.has-c .list { display: none; }
	.ibx:not(.has-c) .thread { display: none; }
	.th-head .back { display: inline-grid; }
}

/* The customer panel: lead, orders, this visit, earlier conversations. */
.sec-head { display: flex; justify-content: space-between; align-items: center; }
.num { font-variant-numeric: tabular-nums; }
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.stages span { height: 5px; border-radius: 9px; background: var(--line); }
.stages span.on { background: var(--accent); }
.stages.lost span { background: var(--red-bg); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; display: flex; flex-direction: column; }
.tile span { font-size: 11.5px; color: var(--muted); }
.tile strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.list-mini { display: flex; flex-direction: column; }
.mini { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); }
.mini:first-child { border-top: 0; }
.mini:hover { color: var(--accent); }
.mini-end { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.pages { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); overflow-wrap: anywhere; }

/* Ctrl K and the keyboard shortcuts sheet (the approved mockup). */
.pal-shade { position: fixed; inset: 0; z-index: 50; background: rgba(14, 21, 37, .38); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.pal { width: 100%; max-width: 640px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(14, 21, 37, .45), 0 0 0 1px rgba(14, 21, 37, .06); overflow: hidden; display: flex; flex-direction: column; max-height: 70vh; }
.pal-top { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.pal-input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 17px; background: transparent; }
.pal-list { overflow: auto; padding: 4px 0 8px; }
.pal-group { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 10px 20px 4px; }
.pal-item { display: flex; align-items: center; gap: 11px; width: calc(100% - 12px); min-height: 40px; padding: 0 14px; margin: 0 6px; border: 0; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; color: var(--ink); }
.pal-item.on { background: var(--accent-50); color: var(--accent); }
.pal-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-none { padding: 18px 20px; color: var(--muted); }
.pal-foot { display: flex; gap: 16px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); background: #fafbfc; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.sheet { width: 100%; max-width: 420px; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(14, 21, 37, .45); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; max-height: 80vh; overflow: auto; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-head h2 { font-size: 16px; font-weight: 700; }
.sc { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef0f4; font-size: 13px; }
.sc:last-child { border-bottom: 0; }
.sc-keys { display: inline-flex; gap: 4px; }
.search input { cursor: pointer; }

/* Manage: overview, unanswered questions, plan and usage. */
.seg-sm a { height: 30px; padding: 0 12px; font-size: 13px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kpi { gap: 6px; }
.kpi-l { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.kpi-n { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-s { font-size: 12px; color: var(--muted); }
.kpi-s.up { color: var(--green); font-weight: 600; }
.card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.dot-ai { background: var(--accent); }
.dot-team { background: #9aa3b2; }
.row > .grow-2 { flex: 999 1 560px; }
.stack-cards { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.chart { display: flex; gap: 10px; height: 200px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; color: var(--muted); text-align: right; min-width: 22px; font-variant-numeric: tabular-nums; }
.bars { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--line); }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.bar-ai { background: var(--accent); }
.bar-team { background: #9aa3b2; border-radius: 3px 3px 0 0; }
.chart-x { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding-left: 32px; }
.hbars { display: flex; flex-direction: column; gap: 12px; }
.hbar { display: flex; flex-direction: column; gap: 5px; }
.hbar-l { display: flex; justify-content: space-between; font-size: 13px; }
.meter > span.amber { background: var(--ink-2); }
.meter-lg { height: 10px; }
.tip { padding: 12px; border-radius: 10px; background: var(--accent-50); font-size: 12.5px; color: var(--ink-2); }
.big { display: flex; align-items: baseline; gap: 8px; }
.big strong { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tiles-4 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.help { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; color: var(--muted); }
.help .i { margin-top: 2px; }
.opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-50); }
.opt input { accent-color: var(--accent); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.plan { border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.plan.now { border: 2px solid var(--accent); padding: 19px; background: var(--accent-50); }
.plan-top { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.price { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.feats { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); flex: 1; }
.feats li { display: flex; gap: 8px; align-items: flex-start; }
.feats .i { margin-top: 2px; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 600; font-size: 11.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; padding: 0 10px 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.area { height: auto; padding: 10px 12px; resize: vertical; }
.gap { padding: 14px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.gap:first-child { border-top: 0; }
.gap-top { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.gap-answer summary { list-style: none; cursor: pointer; width: max-content; }
.gap-answer summary::-webkit-details-marker { display: none; }
.gap-answer[open] summary { display: none; }
.gap-answer form { background: var(--soft); border-radius: 12px; padding: 14px; }
.h-0 { height: 0%; }
.h-1 { height: 5%; }
.h-2 { height: 10%; }
.h-3 { height: 15%; }
.h-4 { height: 20%; }
.h-5 { height: 25%; }
.h-6 { height: 30%; }
.h-7 { height: 35%; }
.h-8 { height: 40%; }
.h-9 { height: 45%; }
.h-10 { height: 50%; }
.h-11 { height: 55%; }
.h-12 { height: 60%; }
.h-13 { height: 65%; }
.h-14 { height: 70%; }
.h-15 { height: 75%; }
.h-16 { height: 80%; }
.h-17 { height: 85%; }
.h-18 { height: 90%; }
.h-19 { height: 95%; }
.h-20 { height: 100%; }
.w-0 { width: 0%; }
.w-1 { width: 5%; }
.w-2 { width: 10%; }
.w-3 { width: 15%; }
.w-4 { width: 20%; }
.w-5 { width: 25%; }
.w-6 { width: 30%; }
.w-7 { width: 35%; }
.w-8 { width: 40%; }
.w-9 { width: 45%; }
.w-10 { width: 50%; }
.w-11 { width: 55%; }
.w-12 { width: 60%; }
.w-13 { width: 65%; }
.w-14 { width: 70%; }
.w-15 { width: 75%; }
.w-16 { width: 80%; }
.w-17 { width: 85%; }
.w-18 { width: 90%; }
.w-19 { width: 95%; }
.w-20 { width: 100%; }

/* Phones: views as chips, a compact conversation header, the reply box
   always at hand, 44 px targets, 16 px inputs (no zoom on iOS). */
.view-chips { display: none; }
.only-phone { display: none; }
@media (hover: none) { .search .kbd, .keys, .kbd-on { display: none; } }
@media (max-width: 1000px) {
	.view-chips { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
	.view-chips::-webkit-scrollbar { display: none; }
	.view-chips .chip { height: 36px; flex: none; text-decoration: none; }
	.only-phone { display: inline-grid; }
	.th-head { padding: 8px 12px; gap: 6px; position: sticky; top: 64px; background: #fff; z-index: 4; }
	.th-who { flex: 1; }
	.th-who .small { display: none; }
	.th-actions { margin-left: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.th-actions::-webkit-scrollbar { display: none; }
	.th-actions .select, .th-actions .btn { height: 40px; flex: none; }
	.reason { margin: 10px 12px 0; }
	.msgs { padding: 14px 12px; overflow: visible; }
	.msg { max-width: 86%; }
	.msg-row:not(.me) { flex-wrap: wrap; }
	.msg-row:not(.me) .msg-time { width: 100%; padding-left: 38px; }
	.composer { position: sticky; bottom: 0; margin: 0; border-radius: 16px 16px 0 0; border-bottom: 0; background: #fff; z-index: 4; padding-bottom: env(safe-area-inset-bottom, 0px); }
	.composer textarea { min-height: 56px; font-size: 16px; }
	.composer-bar .check { font-size: 12.5px; }
	.customer .sec { padding: 16px; }
	.btn, .btn-sm, .chip { min-height: 40px; }
	.input, .input-sm, .search input, .select, .pal-input { font-size: 16px; }
	.pal-shade { padding-top: 8px; }
	.pal { max-height: 86vh; }
}

.short { display: none; }
@media (max-width: 1000px) {
	.composer textarea { height: 64px; min-height: 0; }
	.composer-bar > .muted.small { display: none; }
	.composer-bar { gap: 6px; }
	.composer-bar .grow { display: none; }
	.composer-bar .btn { flex: 1; }
	.long { display: none; }
	.short { display: inline; }
}

/* Live chat (Business): the take-over bar and a locked button on other plans. */
.live-bar { margin: 12px 20px 0; padding: 10px 12px; border-radius: 10px; background: var(--green-bg); border: 1px solid #b7e8cd; display: flex; gap: 10px; align-items: center; color: #05603a; }
.btn-locked { color: var(--muted); }
@media (max-width: 1000px) { .live-bar { margin: 10px 12px 0; } }

/* The bell. */
.bell { position: relative; }
.bell summary { list-style: none; cursor: pointer; }
.bell summary::-webkit-details-marker { display: none; }
.bell-n { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #d92d20; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; border: 2px solid #fff; box-sizing: content-box; }
.bell-menu { position: absolute; right: 0; top: 48px; width: min(360px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(14, 21, 37, .28); z-index: 20; }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
.bell-head form { margin: 0; }
.bell-empty { padding: 18px 14px; font-size: 13px; }
.bell-item { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.bell-item:hover { background: var(--soft); }
.bell-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: transparent; }
.bell-item.unread .bell-dot { background: var(--accent); }
.bell-text { display: flex; flex-direction: column; min-width: 0; }
.bell-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-text span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) { .bell-menu { position: fixed; top: 64px; right: 12px; } }

/* Saved replies in the reply box. */
.sr-menu { position: relative; }
.sr-menu summary { list-style: none; }
.sr-menu summary::-webkit-details-marker { display: none; }
.sr-pop { position: absolute; bottom: 44px; left: 0; width: min(380px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(14, 21, 37, .28); padding: 10px; display: flex; flex-direction: column; gap: 8px; z-index: 6; }
.sr-list { max-height: 240px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.sr-item { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 9px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.sr-item:hover, .sr-item:focus-visible { background: var(--accent-50); }
.sr-item strong { font-weight: 600; }
.sr-item span { font-size: 12.5px; color: var(--muted); }
.sr-none { padding: 6px 10px; }
.sr-save { display: flex; gap: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.sr-save .input { flex: 1; }

/* Sources under AI answers; copy buttons. */
.msg-src { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; font-size: 12px; max-width: min(78%, 620px); }
/* One line each, however long the page title: the full title is in title="" (inbox.php). */
.msg-src a, .chip-s { display: inline-block; max-width: 100%; height: 22px; line-height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-src a:hover { border-color: var(--accent); color: var(--accent); }
/* The follow-up question an answer asked, under its sources. */
.msg-fu { max-width: min(78%, 620px); font-size: 12.5px; color: var(--ink-2); text-align: right; overflow-wrap: anywhere; }
.ib-sm { width: 28px; height: 28px; margin-left: auto; }
.kv a.sel { color: var(--ink-2); text-decoration: none; }
.kv a.sel:hover { color: var(--accent); }

.hours { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.hours-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hours-row .check { width: 120px; }
.input-time { width: 120px; height: 36px; }
.hours-list { margin: 0; padding-left: 18px; }
.attention { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.attention h2 { margin: 0 0 4px; font-size: 15px; }
.attention p { margin: 0; }

/* Integrations. */
.steps { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; max-width: 640px; }
.inline-form .input { flex: 1 1 280px; }
code { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; background: var(--grey-bg); padding: 1px 5px; border-radius: 5px; }

/* Settings, Support and the Desk logo. */
.tabs { align-self: flex-start; flex-wrap: wrap; }
.form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.form > label:not(.check) { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 560px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.form h2 { margin: 8px 0 0; font-size: 15px; }
.area { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; }
.w-label { width: 90px; }
.check.feature { align-items: flex-start; font-size: 14px; }
.check.feature input { margin-top: 4px; }
.check.indent { margin-left: 24px; }
.logo-preview { max-width: 120px; max-height: 60px; border-radius: 8px; border: 1px solid var(--line); background: #fff; padding: 4px; }
.mark-img { object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 2px; }
.health { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.health li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line); }
.health li:first-child { border-top: 0; }
.health li > div { flex: 1; min-width: 0; }
.health-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--green); }
.health-warn .health-dot { background: #f2a93b; }
.health-bad .health-dot { background: var(--red); }
.report { margin: 0; padding: 12px; background: var(--grey-bg); border-radius: 10px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Proactive messages: the editor's cards. */
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* Overview and Reports (approved 6 October 2026): blue, white and grey only. */
.ov-head .when { color: var(--muted); }
.card.summary { flex-direction: row; gap: 14px; align-items: flex-start; }
.summary > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.summary-i { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-50); color: var(--accent); display: grid; place-items: center; flex: none; }
.summary p { font-size: 15.5px; line-height: 1.55; max-width: 900px; }
.summary .cap { margin-bottom: 4px; }
.cap { font: 600 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cap-accent { color: var(--accent); }
a.kpi { text-decoration: none; color: var(--ink); }
a.kpi:hover { border-color: #c3c9d4; }
.kpi-d { font-size: 12px; color: var(--ink-2); }
.kpi-d b { color: var(--accent); }
.kpi-d.worse b { color: var(--ink); }
.kpi-u { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.spark { width: 100%; height: 30px; display: block; }
.spark .line { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark .area { fill: var(--accent-50); stroke: none; }
.spark .flat { fill: none; stroke: #c3c9d4; stroke-width: 1.5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.more { font-weight: 600; font-size: 13px; white-space: nowrap; }
.next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.next { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.next strong { font-size: 15px; }
.next p { color: var(--ink-2); flex: 1; }
.next .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.calm { color: var(--ink-2); }

/* When shoppers ask: 7 days x 24 hours. Open hours white, closed grey, a thin grey line under open hours. */
.hm-wrap { margin: 0 -4px; padding: 0 4px 4px; }
@media (max-width: 1100px) { .hm-wrap { overflow-x: auto; } }
.hm-card.sheet { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; max-height: 70vh; overflow: auto; z-index: 40; }
.hm { position: relative; min-width: 720px; display: flex; flex-direction: column; gap: 4px; }
.hm-row { display: grid; grid-template-columns: 44px repeat(24, minmax(0, 1fr)); gap: 3px; height: 34px; }
.hm-hours { height: 18px; font: 500 11px/18px var(--mono); color: var(--muted); }
.hm-day { font-size: 12px; font-weight: 600; color: var(--ink-2); line-height: 27px; }
.hm-c { position: relative; height: 27px; border: 0; border-radius: 5px; padding: 0; cursor: pointer; background: #eef0f4; }
.hm-c.open { background: #fff; box-shadow: inset 0 0 0 1px #d5dae3; }
.hm-c.open::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px; background: #c5cdd9; }
.hm-c.l1 { background: #DDE0F2; box-shadow: none; }
.hm-c.l2 { background: #AEB5DD; box-shadow: none; }
.hm-c.l3 { background: #4B57A8; box-shadow: none; }
.hm-c.l4 { background: var(--accent); box-shadow: none; }
.hm-c.on { box-shadow: 0 0 0 2px var(--ink); z-index: 1; }
.hm-c:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.hm-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ink-2); }
.hm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sw-open { background: #fff; box-shadow: inset 0 0 0 1px #c3c9d4; }
.sw-closed { background: #eef0f4; }
.sw-line { width: 18px; height: 2px; border-radius: 2px; background: #c5cdd9; }
.sw-1 { background: #DDE0F2; } .sw-2 { background: #AEB5DD; } .sw-3 { background: #4B57A8; } .sw-4 { background: var(--accent); }
.hm-scale { gap: 3px !important; }
.hm-card { position: absolute; z-index: 20; width: 344px; max-width: calc(100vw - 48px); background: #fff; border: 1px solid #d5dae3; border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(14, 21, 37, .28), 0 2px 6px rgba(14, 21, 37, .06); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.hm-card .top-line { display: flex; gap: 8px; align-items: flex-start; }
.hm-card .top-line > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.hm-card .pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--soft); color: var(--ink-2); }
.pill-open { background: var(--accent-50); color: var(--accent-deep); }
.pill-closed { background: #eef0f4; color: var(--ink-2); }
.pill-soft { font-weight: 500; }
.hm-card .count { display: flex; align-items: center; gap: 12px; }
.hm-card .count > strong { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-card .count > div { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); }
.hm-card .scale { display: flex; gap: 3px; }
.hm-card .scale span { flex: 1; height: 8px; border-radius: 3px; background: #eef0f4; }
.hm-card .scale .s1 { background: #DDE0F2; } .hm-card .scale .s2 { background: #AEB5DD; } .hm-card .scale .s3 { background: #4B57A8; } .hm-card .scale .s4 { background: var(--accent); }
.hm-card .scale .me { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ink); }
.hm-card .small { font-size: 11px; color: var(--muted); }
.hm-card .quiet { padding: 10px 12px; border-radius: 10px; background: var(--soft); color: var(--ink-2); }
.hm-card .nudge { padding: 10px 12px; border-radius: 10px; background: var(--accent-50); color: var(--accent-deep); }
.sbar { height: 10px; border-radius: 99px; background: #eef0f4; overflow: hidden; display: flex; }
.sbar > span { display: block; height: 100%; }
.c-ai { background: var(--accent); } .c-team { background: var(--ink-2); } .c-none { background: #c3c9d4; } .c-mid { background: #9aa3b2; } .c-pale { background: #d5dae3; } .c-2 { background: #4B57A8; } .c-3 { background: #AEB5DD; } .c-ink { background: var(--ink); }
.handled { display: grid; grid-template-columns: 12px 1fr auto; gap: 6px 8px; align-items: center; font-size: 13px; }
.handled i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.handled i.ring { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.hm-card .links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 600; }
.hm-card .foot { border-top: 1px solid #eef0f4; padding-top: 10px; font-size: 11px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.hm-empty { position: absolute; left: 50%; top: 128px; transform: translate(-50%, -50%); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px -12px rgba(14, 21, 37, .22); padding: 14px 18px; max-width: 420px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.hm-example { position: absolute; right: 0; top: -2px; background: var(--ink); color: #fff; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; border-top: 1px solid #eef0f4; padding-top: 14px; }
.facts > div { display: flex; flex-direction: column; gap: 2px; }
.facts strong { font-size: 15px; }
.facts span:last-child { font-size: 12px; color: var(--muted); }
.ended { display: flex; flex-direction: column; }
.ended > div { display: grid; grid-template-columns: 12px 1fr auto 46px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #eef0f4; }
.ended i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ended .pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.path { font-family: var(--mono); font-size: 12.5px; }
.switch { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px 0 6px; border-radius: 99px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-weight: 600; font-size: 13px; }
.switch .track { width: 36px; height: 22px; border-radius: 99px; background: #c3c9d4; position: relative; }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(14, 21, 37, .3); transition: left .15s; }
.switch[aria-checked="true"] .track { background: var(--accent); }
.switch[aria-checked="true"] .track::after { left: 17px; }

/* A new store: first steps and what it can already answer. */
.setup { list-style: none; margin: 0; padding: 0; }
.setup li { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #eef0f4; }
.setup .tick { width: 24px; height: 24px; border-radius: 99px; background: var(--accent); color: #fff; display: grid; place-items: center; }
.setup .todo { width: 24px; height: 24px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px #9aa3b2; }
.setup small, .ready small { display: block; color: var(--muted); font-size: 13px; }
.ready { list-style: none; margin: 0; padding: 0; }
.ready li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 0; border-top: 1px solid #eef0f4; }
.ready small { grid-column: 1 / -1; font-size: 12px; }
.soon { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.soon > div { border: 1px dashed #c3c9d4; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.soon span { color: var(--muted); font-size: 13px; }
.kpi-n.zero { color: #9aa3b2; }

/* Reports: the hub and each report. */
.crumbs { font-size: 13px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--muted); }
.crumbs b { color: var(--ink); font-weight: 600; }
.range { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.range .input { height: 32px; width: 150px; }
.short p { font-size: 17px; line-height: 1.55; letter-spacing: -0.01em; max-width: 900px; }
.hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.hub > a { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); }
.hub > a:hover { border-color: #c3c9d4; }
.hub strong { font-size: 28px; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hub p { color: var(--ink-2); flex: 1; }
.hub .go { font-weight: 600; font-size: 13px; color: var(--accent); }
.mini { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.mini > span { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; }
.mini.grey > span { background: #9aa3b2; }
.vb { display: flex; align-items: flex-end; gap: 12px; height: 200px; border-bottom: 1px solid var(--line); padding: 0 4px; }
.vb > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-width: 0; }
.vb b { font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.vb .cols { flex: 1; display: flex; align-items: flex-end; gap: 3px; }
.vb .cols > span { flex: 1; border-radius: 4px 4px 0 0; background: var(--accent); }
.vb .cols > span.ghost { background: #eef0f4; }
.vb-x { display: flex; gap: 12px; padding: 0 4px; font: 500 11px/1.3 var(--mono); color: var(--muted); }
.vb-x > span { flex: 1; text-align: center; min-width: 0; }
.steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.steps-list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid #eef0f4; }
.steps-list .n { width: 28px; height: 28px; border-radius: 99px; background: var(--accent-50); color: var(--accent-deep); font-weight: 700; font-size: 13px; display: grid; place-items: center; }
.steps-list li:first-child .n { background: var(--accent); color: #fff; }
.steps-list li > div { display: flex; flex-direction: column; gap: 6px; }
.steps-list .head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.steps-list .head strong { font-size: 15px; }
.steps-list p { color: var(--ink-2); }
.who-sales { background: var(--accent-50); color: var(--accent-deep); }
.who-support { background: #eef0f4; color: var(--ink-2); }
.who-owner { background: var(--ink); color: #fff; }
.play { display: flex; flex-direction: column; gap: 18px; }
.play > div { display: flex; flex-direction: column; gap: 8px; }
.play .pill { align-self: flex-start; }
.play ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.howcount { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.split > div { display: flex; flex-direction: column; gap: 2px; }
.split strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.split span:last-child { color: var(--muted); font-size: 13px; }
.inline-set { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.inline-set .input { width: 72px; height: 32px; }
.nowrap { white-space: nowrap; }
.meter > .c-ai, .vb .cols > .c-ai { background: var(--accent); }
.meter > .c-team, .vb .cols > .c-team { background: var(--ink-2); }
.meter > .c-ink, .vb .cols > .c-ink { background: var(--ink); }
.meter > .c-mid, .vb .cols > .c-mid { background: #9aa3b2; }
.meter > .c-pale, .vb .cols > .c-pale { background: #d5dae3; }
.meter > .c-none, .vb .cols > .c-none { background: #c3c9d4; }
.meter > .c-2, .vb .cols > .c-2 { background: #4B57A8; }
.meter > .c-3, .vb .cols > .c-3 { background: #AEB5DD; }
.kpis-6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Any website: the start pages and the trial bar (approved 7 October 2026). */
.trial-bar { background: var(--ink); color: #fff; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 9px 20px; font-size: 13.5px; }
.trial-bar span { color: #c3c9d4; }
.trial-bar a { color: #fff; font-weight: 600; margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }
.start { min-height: 100%; background: var(--ground); display: flex; flex-direction: column; }
.start-top { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px; background: #fff; border-bottom: 1px solid var(--line); }
.start-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.start-logo img { width: 32px; height: 32px; border-radius: 9px; }
.start-top .who { font-size: 14px; color: var(--muted); }
.start-main { width: 100%; max-width: 780px; margin: 0 auto; padding: 36px 20px 64px; display: flex; flex-direction: column; gap: 20px; }
.start-steps { display: flex; gap: 20px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.start-steps li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.start-steps .n { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--grey-bg); color: var(--ink-2); }
.start-steps .on { color: var(--ink); font-weight: 600; }
.start-steps .on .n { background: var(--accent); color: #fff; }
.start-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.start-card h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.start-card h2 { font-size: 19px; }
.start-card p { color: var(--ink-2); }
.start-card form { display: flex; flex-direction: column; gap: 14px; }
.start-card .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.start-card label.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.start-card .input { height: 46px; font-size: 15px; }
.start-card .btn { height: 46px; font-size: 14.5px; }
.start-card .agree { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.start-card .agree input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.code-line { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.code-line code { flex: 1 1 420px; min-width: 0; overflow-x: auto; white-space: nowrap; background: var(--ink); color: #e8edff; border-radius: 10px; padding: 13px 14px; font-size: 13px; }
.start .result { border-radius: 12px; padding: 14px 16px; background: var(--soft); color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.start .result.ok { background: var(--accent-50); color: var(--accent-deep); }
.platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.platforms > div { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--ink-2); }
.platforms b { display: block; color: var(--ink); margin-bottom: 2px; }
.start-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Any website: sign-up and the code, the form beside why websites switch it on (approved 10 October 2026).
   Only the button is blue; the right side is grey type so the form draws the eye. */
.su { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: #fff; }
.su-left { display: flex; flex-direction: column; padding: 26px 56px 32px; }
.su-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.su-top .who { font-size: 14px; color: var(--muted); }
.su-top .who a, .su-other a, .su-fine a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.su-body { flex: 1; display: flex; align-items: center; }
.su-form { width: 100%; max-width: 480px; margin: 40px auto; font-size: 15px; }
.su-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 13px; font-weight: 600; }
.su-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(5, 96, 58, .16); }
.su-form h1 { margin-top: 18px; font-size: clamp(32px, 3vw, 43px); line-height: 1.04; letter-spacing: -0.045em; font-weight: 750; }
.su-form h1 span { color: var(--muted); }
.su-lede { margin-top: 14px; font-size: 17px; color: var(--muted); }
.su-form .notice { margin-top: 18px; }
.su-f { margin-top: 26px; display: grid; gap: 12px; }
.su-f label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.su-in { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; }
.su-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(26, 35, 112, .12); }
.su-in .i-lg { color: #8a93a3; }
.su-in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; }
.su-in input::placeholder { color: #8a93a3; }
.su-go { height: 54px; border-radius: 14px; font-size: 16.5px; gap: 10px; box-shadow: 0 14px 28px -14px rgba(26, 35, 112, .8); }
[dir="rtl"] .su-go span { display: inline-block; transform: scaleX(-1); }
.su-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-2); }
.su-checks li { display: flex; align-items: center; gap: 7px; }
.su-checks li::before, .su-vs .yes::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305603a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.su-fine { margin-top: 16px; font-size: 13px; color: var(--muted); }
.su-works { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.su-works p { margin-bottom: 12px; font: 600 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8a93a3; }
.su-works div { display: flex; flex-wrap: wrap; gap: 8px; }
.su-works span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 10px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 550; color: var(--ink-2); }
.su-works em { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font: 700 10px var(--sans); font-style: normal; color: #fff; }
.wk-wix { background: #111; } .wk-sq { background: #222; } .wk-wf { background: #4353ff; } .wk-fr { background: #0055ff; } .wk-gtm { background: #246fdb; } .wk-html { background: #e34c26; }
.su-other { margin-top: 16px; font-size: 13.5px; color: var(--muted); }
.su-right { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 56px; background: #f6f6f4; border-inline-start: 1px solid var(--line); color: #5b5860; }
.su-head, .su-vs, .su-big, .su-how { width: 100%; max-width: 640px; }
.su-eb { font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8b8790; }
.su-head h2 { margin-top: 8px; font-size: clamp(26px, 2.3vw, 33px); line-height: 1.1; letter-spacing: -0.035em; font-weight: 650; color: #5b5860; }
.su-head p:not(.su-eb) { margin-top: 12px; max-width: 34em; font-size: 16px; color: #67636b; }
.su-vs { border-radius: 20px; background: #fff; border: 1px solid #e3e3ea; overflow: hidden; font-size: 14px; }
.su-vs-h, .su-vs-r { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 14px; padding: 14px 18px; align-items: start; }
.su-vs-h { padding-block: 12px; background: #f7f7f9; font: 600 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #8b8790; }
.su-vs-h .yes { color: var(--green); }
.su-vs-r { border-top: 1px solid #eceaea; }
.su-vs-r b { font-weight: 600; color: #5b5860; }
.su-vs-r .no { display: flex; gap: 8px; color: #8b8790; }
.su-vs-r .no::before { content: "✕"; flex: none; font-size: 12px; line-height: 1.7; color: #c4404a; }
.su-vs-r .yes { display: flex; gap: 8px; color: #37353a; font-weight: 500; }
.su-vs-r .yes::before { width: 17px; height: 17px; margin-top: 2px; background-size: 10px; }
.su-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.su-big div, .su-how li { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #e3e3ea; }
.su-big strong { display: block; font-size: 26px; font-weight: 650; letter-spacing: -0.035em; line-height: 1; color: #5b5860; }
.su-big span { display: block; margin-top: 8px; font-size: 13px; color: #67636b; }
.su-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.su-how .n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #f1f1f5; color: var(--ink); font-weight: 700; font-size: 13px; }
.su-how b { display: block; margin-top: 10px; font-size: 14.5px; font-weight: 600; color: #5b5860; }
.su-how small { display: block; margin-top: 3px; font-size: 12.5px; color: #67636b; }
@media (max-width: 1080px) {
	.su { grid-template-columns: 1fr; }
	.su-left { padding: 20px 24px 8px; }
	.su-form { margin: 32px auto 28px; }
	.su-right { padding: 44px 24px 48px; border-inline-start: 0; border-top: 1px solid var(--line); align-items: center; }
}
@media (max-width: 640px) {
	.su-left { padding: 16px 16px 4px; }
	.su-top .start-logo { font-size: 18px; }
	.su-top .who { font-size: 12.5px; text-align: end; }
	.su-form h1 { font-size: 34px; }
	.su-right { padding: 36px 16px 40px; gap: 20px; }
	.su-vs-h { display: none; }
	.su-vs-r { grid-template-columns: 1fr; gap: 6px; }
	.su-big, .su-how { grid-template-columns: 1fr; }
}

.reads { list-style: none; margin: 0; padding: 0; }
.reads li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #eef0f4; }
.reads label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* On/off settings as rows: a title, a short line and a switch (approved 10 October 2026).
   The switch is a checkbox with role="switch"; dark when on, so only Save is blue. */
.stack { display: flex; flex-direction: column; gap: 16px; }
.sw-group { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-width: 0; }
.sw-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--line); }
.sw-head h2 { margin: 0; font-size: 15.5px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw-head p { margin-top: 3px; font-size: 13px; color: var(--muted); max-width: 64ch; }
.sw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 15px 20px; }
.sw-row + .sw-row, .sw-sub + .sw-row { border-top: 1px solid #eef0f4; }
.sw-t { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.sw-d { margin-top: 3px; font-size: 13px; color: var(--muted); max-width: 64ch; }
.b-soft { background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.sw-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex: none; }
.sw-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.sw-switch .sw-on, .sw-switch .sw-off { font-size: 12.5px; font-weight: 500; color: #b4bac6; transition: color .15s; }
.sw-switch input:checked ~ .sw-on, .sw-switch input:not(:checked) ~ .sw-off { font-weight: 700; color: var(--ink); }
.sw-track { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #d3d8e2; transition: background .15s; }
.sw-track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(14, 21, 37, .25); transition: transform .15s; }
.sw-switch input:checked ~ .sw-track { background: var(--ink); }
.sw-switch input:checked ~ .sw-track::after { transform: translateX(18px); }
[dir="rtl"] .sw-switch input:checked ~ .sw-track::after { transform: translateX(-18px); }
.sw-switch input:focus-visible ~ .sw-track { outline: 2px solid var(--ink); outline-offset: 2px; }
.sw-row.sw-dep-off .sw-text { opacity: .55; }
.sw-row.sw-dep-off .sw-switch { opacity: .5; pointer-events: none; }
.sw-sub { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.form > .sw-row { width: 100%; padding: 12px 0; border-top: 1px solid #eef0f4; }
.form > .sw-row + .sw-row { border-top: 1px solid #eef0f4; }
.form > .sw-sub { width: 100%; padding: 0 0 4px; }
.stack > .sw-row, .stretch { width: 100%; }
.stack > .sw-row { padding: 12px 0; border-top: 1px solid #eef0f4; }
.day-switch { min-width: 150px; justify-content: flex-start; }
.day-switch strong { font-size: 14px; color: var(--ink); }
.sw-sub > label:not(.check) { display: flex; flex-direction: column; gap: 6px; max-width: 560px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.savebar { position: fixed; left: 50%; bottom: 22px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--ink); color: #fff; box-shadow: 0 18px 40px -16px rgba(14, 21, 37, .55); transform: translateX(-50%); }
.savebar .btn-ghost { background: none; border-color: transparent; color: #c3c9d4; }
@media (max-width: 640px) {
	.sw-row { padding: 14px 16px; gap: 14px; }
	.sw-head, .sw-sub { padding-inline: 16px; }
	.savebar { left: 16px; right: 16px; transform: none; justify-content: space-between; }
}

/* Forms made easy (approved 10 October 2026): drop zones, meters, search and
   pages, cards and segments for choices, one line per day, the live preview. */
.drop { width: 100%; display: grid; place-items: center; gap: 10px; padding: 30px 20px; border: 1.5px dashed #c9cfda; border-radius: 14px; background: #fbfbfd; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.drop:hover, .drop.over, .logo-box:hover, .logo-box.over { border-color: var(--ink-2); background: #f3f4f7; }
.drop-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.drop b { font-size: 15px; font-weight: 600; }
.drop b u { text-decoration: none; border-bottom: 1.5px solid var(--ink); }
.drop small { color: var(--muted); font-size: 12.5px; }
.drop-types { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.drop-types span { padding: 3px 9px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font: 600 11.5px var(--mono); color: var(--ink-2); }
.fmeters { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fmeter { padding: 12px 14px; border: 1px solid #eef0f4; border-radius: 12px; }
.fmeter p { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.fmeter p b { color: var(--ink); }
.fmeter progress { width: 100%; height: 6px; margin-top: 8px; appearance: none; border: 0; border-radius: 99px; background: var(--soft); overflow: hidden; }
.fmeter progress::-webkit-progress-bar { background: var(--soft); border-radius: 99px; }
.fmeter progress::-webkit-progress-value { background: var(--ink); border-radius: 99px; }
.fmeter progress::-moz-progress-bar { background: var(--ink); border-radius: 99px; }
.kb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kb-search { position: relative; flex: 1 1 260px; }
.kb-search .i { position: absolute; inset-inline-start: 12px; top: 11px; color: #8a93a3; }
.kb-search .input { width: 100%; padding-inline-start: 36px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; font-size: 13px; }
.pg-links { display: flex; flex-wrap: wrap; gap: 4px; }
.pg-links a { min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.pg-links a[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.sec-h { display: flex; align-items: flex-start; gap: 12px; }
.sec-h .step { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #eef0f4; color: var(--ink); font-weight: 700; font-size: 13px; }
.sec-h h2 { margin: 2px 0 0; }
.sec-h p { margin-top: 2px; font-size: 13px; }
.field-q { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.field-q > p { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pick { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.pick-o { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.pick-o input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-o strong { font-size: 13.5px; padding-inline-end: 18px; }
.pick-o small { font-size: 12px; color: var(--muted); }
.pick-o:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14, 21, 37, .08); }
.pick-o:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.pick-o:has(input:checked)::after { content: ""; position: absolute; top: 9px; inset-inline-end: 9px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 10px no-repeat; }
.pick-pv { position: relative; display: block; height: 60px; border-radius: 8px; background: var(--soft); overflow: hidden; }
.pick-pv i, .pick-pv b { position: absolute; display: block; }
.pick-pv b { right: 8px; bottom: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.pick-pv i { background: #fff; border: 1px solid #d9dde6; border-radius: 4px; }
.pv-line i { right: 26px; bottom: 10px; width: 70px; height: 10px; }
.pv-card i { right: 26px; bottom: 10px; width: 80px; height: 34px; }
.pv-center i { left: 30%; top: 10px; width: 40%; height: 40px; }
.pv-chat i { right: 8px; bottom: 26px; width: 64px; height: 26px; }
.pv-bar i { left: 6px; right: 6px; bottom: 6px; height: 12px; }
.pv-bar b { display: none; }
.segs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 11px; background: var(--soft); border: 1px solid var(--line); }
.segs label { position: relative; padding: 7px 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.segs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segs label:has(input:checked) { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(14, 21, 37, .1); }
.segs label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
.day-row { width: 100%; padding: 12px 0; margin: 0; }
.day-row + .day-row { border-top: 1px solid #e2e5eb; }
.day-row .day-closed { display: none; font-style: normal; font-size: 13px; color: #8a93a3; }
.day-row.closed .input-time, .day-row.closed > .muted { opacity: .4; }
.day-row.closed .day-closed { display: inline; }
.look-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.look-pv { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--soft); }
.look-cap { font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8a93a3; }
.lk { --lk: #1A2370; --lk-g: var(--lk); --lk-on: #fff; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 16px 30px -18px rgba(14, 21, 37, .35); }
.lk-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #eef0f4; color: var(--ink); }
.lk.lk-brand .lk-h { background: var(--lk-g); color: var(--lk-on); border-bottom-color: transparent; }
.lk-av { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; overflow: hidden; background: var(--lk-g); color: var(--lk-on); font-weight: 700; }
.lk-av img { width: 100%; height: 100%; object-fit: cover; }
.lk-b { display: grid; gap: 8px; padding: 12px; background: #fbfbfd; }
.lk-b span { max-width: 88%; padding: 8px 11px; border-radius: 14px; font-size: 12.5px; }
.lk-v { justify-self: end; background: var(--lk-g); color: var(--lk-on); }
.lk-a { background: #fff; border: 1px solid var(--line); }
.lk.lk-dark { background: #141923; border-color: #2a3140; }
.lk.lk-dark .lk-b { background: #141923; }
.lk.lk-dark .lk-a { background: #181e2a; border-color: #2a3140; color: #eef1f6; }
.lk.lk-dark .lk-h { color: #eef1f6; border-bottom-color: #222936; }
.lk-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.lk-bar.left { flex-direction: row-reverse; }
.lk-bubble { padding: 7px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; }
.lk-bubble:empty { display: none; }
.lk-lb { --lk-r: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 52px; height: 52px; padding: 0 14px; border-radius: var(--lk-r); background: var(--lk-g); color: var(--lk-on); font-weight: 700; box-shadow: 0 12px 24px -10px var(--lk); }
.lk-lb [data-preview-label]:empty { display: none; }
.lk-ic { width: 24px; height: 24px; }
/* Sharp in the preview: square, outlined, a hard shadow, the second colour's squares. */
.lk.lk-sharp { border-radius: 0; border-color: #151524; background: #fbfaf6; box-shadow: 8px 8px 0 rgba(21, 21, 36, .08); }
.lk.lk-sharp .lk-h { background: var(--lk-g); color: var(--lk-on); border-bottom-color: transparent; }
.lk.lk-sharp .lk-av { border-radius: 0; background: none; border: 1px solid rgba(255, 255, 255, .25); color: var(--lk-on); }
.lk.lk-sharp .lk-b { background: #fbfaf6; }
.lk.lk-sharp .lk-b span { border-radius: 0; }
.lk.lk-sharp .lk-a { border-color: #e4e1d6; }
.lk.lk-sharp .lk-a::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: var(--lk-ac, var(--lk)); }
.lk.lk-sharp.lk-dark, .lk.lk-sharp.lk-dark .lk-b { background: #141923; }
.lk-lb.lk-sharp { border-radius: 0; box-shadow: 5px 5px 0 rgba(21, 21, 36, .12); }
.lk-lb.lk-sharp [data-preview-label] { padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .2); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.lk-lb.lk-words { flex-direction: row-reverse; }
.lk-lb.lk-sharp.lk-words [data-preview-label] { padding: 0 10px 0 0; border-left: 0; border-right: 1px solid rgba(255, 255, 255, .2); }
.st-code { max-width: 320px; }
.form > label.drop { max-width: none; }
.kb-delete { display: flex; justify-content: flex-end; margin-top: -6px; }
.radius { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; }
.radius input[type="range"] { flex: 1; accent-color: var(--ink); }
.radius output { min-width: 52px; font: 600 13px var(--mono); }
.logo-up { width: 100%; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.logo-box { width: 96px; height: 96px; overflow: hidden; border-radius: 18px; border: 1.5px dashed #c9cfda; background: #fbfbfd; display: grid; place-items: center; color: #8a93a3; cursor: pointer; }
.logo-box img { width: 100%; height: 100%; object-fit: contain; }
.rules { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.rules li::before { content: "\2713"; margin-inline-end: 8px; color: var(--green); font-weight: 700; }
@media (max-width: 980px) {
	.look-grid { grid-template-columns: 1fr; }
	.look-pv { position: static; }
}
@media (max-width: 640px) {
	.fmeters { grid-template-columns: 1fr; }
}

/* Settings › Look: the chat button (shape, icon, text). */
.bset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.bset legend { font-weight: 700; margin-bottom: 8px; }
.bshape { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.bdemo { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--accent); flex: none; }
.bdemo-round { width: 24px; padding: 0; justify-content: center; border-radius: 8px; }
.bdemo i { width: 10px; height: 10px; border-radius: 3px; background: #fff; }
.bdemo b { width: 26px; height: 5px; border-radius: 3px; background: #fff; opacity: .85; }
.bicons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.bicon { position: relative; display: grid; place-items: center; height: 48px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; color: var(--muted); }
.bicon:has(input:checked) { border-color: var(--accent); background: var(--accent-50); color: var(--accent); }
.bicon input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bicon .i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.blogo { font-size: 11px; font-weight: 700; }

/* Settings: the brand colour picker with its code beside it. */
.colour { display: flex; align-items: center; gap: 10px; }
.colour input[type="color"] { width: 56px; height: 40px; padding: 3px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.colour code { font-size: 13px; color: var(--muted); }
/* Knowledge base › Files: what was read from a file, and a new version. */
.file-preview { margin: 0; max-height: 320px; overflow: auto; padding: 12px 14px; background: var(--grey-bg); border-radius: 10px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.file-replace { position: relative; }
.file-replace summary { list-style: none; cursor: pointer; }
.file-replace summary::-webkit-details-marker { display: none; }
.file-replace[open] form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: min(320px, 80vw); padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(14, 21, 37, .12); }
.item-main a { color: var(--accent); }

/* What HolaReply reads: one chat, several websites (ADR 0017, mockup of 12 October 2026). */
.reads-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.reads-side { display: grid; gap: 16px; min-width: 0; }
.sites { align-self: stretch; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 10px; min-width: 0; }
.site.main { background: var(--soft); }
.site-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.site-h .dom { font-weight: 650; overflow-wrap: anywhere; }
.site-h form { margin: 0; }
.fav { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--ink); flex: none; }
.fav.f1 { background: var(--accent); }
.fav.f2 { background: #7a52d1; }
.site-sections { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0; }
.site-sections .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.site-sections .chip { position: relative; }
.site-sections .chip:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-50); font-weight: 600; }
.site-sections .chip:not(:has(input:checked)) { border-color: var(--line); color: var(--ink-2); background: #fff; font-weight: 500; }
.site-sections .chip:has(input:focus-visible) { outline: 2px solid var(--accent-100); }
.code-sm code { flex: 1 1 260px; padding: 9px 11px; font-size: 12.5px; }
.site-note { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.sites-count { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.sites-count a { color: var(--accent); font-weight: 600; }
.lock-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-50); color: var(--accent); display: grid; place-items: center; }
.lock-card h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.msg-src a small { color: var(--muted); font-size: 11px; }
@media (max-width: 900px) {
	.reads-grid { grid-template-columns: 1fr; }
}

/* Copy buttons: "Copied" as a small tip above the button for a moment (desk.js). */
[data-copy] { position: relative; }
.copy-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s, transform .15s; z-index: 5; }
.copy-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.copied .copy-tip { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .copy-tip { transition: none; } }

/* Pages without the chat (Settings, Look; the approved mockup of 12 Oct 2026, Desk\HiddenPages). */
.hp > .muted { font-size: 13.5px; max-width: 72ch; }
.hp-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-preset { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; border: 1px dashed #b9c3d6; border-radius: 999px; padding: 4px 12px; font-size: 13.5px; color: var(--ink-2); background: #fff; cursor: pointer; position: relative; }
.hp-preset span::before { content: "+ "; }
.hp-preset:has(input:checked) { border-style: solid; border-color: var(--accent); background: var(--accent-50); color: var(--accent); font-weight: 600; }
.hp-preset:has(input:checked) span::before { content: "✓ "; }
.hp-preset:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp-ui { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.hp-search { position: relative; width: 100%; max-width: 640px; }
.hp-in { display: flex; align-items: center; gap: 10px; border: 1px solid #cfd4de; border-radius: 12px; padding: 0 12px; background: #fff; }
.hp-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(26, 35, 112, .12); }
.hp-in .i { color: var(--muted); }
.hp-q { flex: 1; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; font-weight: 500; }
.hp-drop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 6; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 16px 32px -16px rgba(14, 21, 37, .3); overflow: hidden; }
.hp-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; align-items: center; border-top: 1px solid var(--line); cursor: pointer; }
.hp-opt:first-child { border-top: 0; }
.hp-opt:hover, .hp-opt.hl { background: var(--soft); }
.hp-opt b { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-opt code, .hp-chip code { font: 12.5px var(--mono); color: var(--muted); background: none; padding: 0; border-radius: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-opt code { display: block; }
.hp-add { font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.hp-typed { background: #fbfcff; }
.hp-typed b { color: var(--accent); }
.hp mark { background: #fff1b8; color: inherit; border-radius: 3px; padding: 0 1px; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-chips:empty { display: none; }
.hp-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--soft); border-radius: 10px; padding: 5px 6px 5px 12px; font-size: 14px; max-width: 100%; min-width: 0; }
.hp-chip .hp-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-chip code.hp-l { color: var(--ink); }
.hp-n { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hp-x { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); background: #fff; border: 1px solid var(--line); flex: none; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; }
.hp-x:hover { color: var(--red); border-color: #f1c4c0; }
.hp-plain textarea { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; font-size: 13px; }
.hp-foot { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
@media (max-width: 640px) {
	.hp-x { width: 32px; height: 32px; }
	.hp-chip { font-size: 13.5px; }
}

/* Settings › General: the welcome screen and the conversation starters (ADR 0018). */
.form > .grid-2 { width: 100%; max-width: 760px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-2 > label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pic-up { width: 100%; max-width: 760px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; }
.pic-up .help { display: block; margin: 2px 0 6px; }
.pic-t { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pic-box { position: relative; width: 96px; height: 96px; overflow: hidden; border-radius: 18px; border: 1.5px dashed #c9cfda; background: #fbfbfd; display: grid; place-items: center; color: #8a93a3; cursor: pointer; }
.pic-box:hover, .pic-box.over { border-color: var(--ink-2); background: #f3f4f7; }
.pic-box img { width: 100%; height: 100%; object-fit: cover; }
.pic-box:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.pic-sm { width: 64px; height: 64px; border-radius: 12px; }
.st-row { width: 100%; max-width: 760px; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start; }
.st-fields { display: grid; gap: 8px; min-width: 0; }
.st-top { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 8px; }
.st-fields .area { min-height: 64px; }
.st-fields .st-btns { min-height: 78px; }
@media (max-width: 640px) {
	.form > .grid-2, .st-top { grid-template-columns: 1fr; }
	.st-row { grid-template-columns: 1fr; }
}

/* The template gallery (Settings, Look; mockup "Chat templates", approved 15 Oct 2026). */
.tg-card { display: grid; gap: 16px; }
.tg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.tg-head p { margin-top: 4px; max-width: 60ch; }
.tg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tg-t { display: grid; gap: 8px; align-content: start; padding: 8px 8px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.tg-t:hover { border-color: #b9bed4; transform: translateY(-1px); }
.tg-t.on { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 35, 112, .12); }
.tg-n { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 4px; }
.tg-n b { font-size: 14px; }
.tg-n .tag { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--grey-bg); color: var(--grey); }
.tg-n .tag-on { background: var(--green-bg); color: var(--green); }
.tg-l { padding: 0 4px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.tg-undo { margin: 0; }
.tg-custom { margin: 6px 0 -4px; font-size: 18px; }
@media (max-width: 1100px) { .tg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A small picture of each template. */
.tpm { height: 150px; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: #fff; border: 1px solid #e4e7ee; font-size: 0; }
.tpm-h { display: flex; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid #eef0f4; }
.tpm-h i { width: 16px; height: 16px; border-radius: 4px; background: #1a2370; }
.tpm-h b { width: 54px; height: 6px; border-radius: 3px; background: currentColor; opacity: .55; }
.tpm-b { flex: 1; display: grid; gap: 6px; align-content: start; padding: 8px; }
.tpm-b em { width: 70%; height: 9px; border-radius: 3px; background: currentColor; opacity: .7; }
.tpm-b s { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px; border-radius: 6px; background: #f3f5fb; text-decoration: none; }
.tpm-b s i { width: 9px; height: 9px; border-radius: 3px; background: #1a2370; }
.tpm-in { height: 16px; margin: 0 8px 8px; border: 1px solid #dfe3ea; border-radius: 7px; }
.tpm-holareply { color: #0e1140; } .tpm-holareply .tpm-h i, .tpm-holareply .tpm-b s i { background: #1a2370; }
.tpm-sharp { background: #fbfaf6; border-color: #151524; border-radius: 0; color: #151524; } .tpm-sharp .tpm-h { background: #151524; color: #fbfaf6; border: 0; }
.tpm-sharp .tpm-h i { background: none; border: 1px solid rgba(255,255,255,.4); border-radius: 0; } .tpm-sharp .tpm-b s { background: #fff; border: 1px solid #151524; border-radius: 0; } .tpm-sharp .tpm-b s i { background: #ed8223; border-radius: 0; } .tpm-sharp .tpm-in { border-color: #151524; border-radius: 0; }
.tpm-garden { background: #11221a; border-color: #11221a; color: #e9efe2; } .tpm-garden .tpm-h { border-color: rgba(236,240,226,.12); } .tpm-garden .tpm-h i { background: #92bd4a; }
.tpm-garden .tpm-b s { background: #f4f1e8; } .tpm-garden .tpm-b s i { background: #4f8a3a; } .tpm-garden .tpm-in { border-color: rgba(236,240,226,.25); }
.tpm-minimal { color: #222; } .tpm-minimal .tpm-h i { background: #222; border-radius: 50%; } .tpm-minimal .tpm-b s { background: none; border-bottom: 1px solid #eee; border-radius: 0; padding-left: 0; } .tpm-minimal .tpm-b s i { display: none; } .tpm-minimal .tpm-in { border: 0; border-bottom: 1px solid #ccc; border-radius: 0; }
.tpm-midnight { background: #0b0d14; border-color: #23263a; color: #e6e8f0; } .tpm-midnight .tpm-h { border-color: #23263a; } .tpm-midnight .tpm-h i, .tpm-midnight .tpm-b s i { background: #6d4dff; }
.tpm-midnight .tpm-b s { background: #161a28; border: 1px solid #2a2f45; } .tpm-midnight .tpm-in { background: #161a28; border-color: #2a2f45; }
.tpm-soft { background: #fff7f5; border-color: #f3d7d1; border-radius: 18px; color: #5b3a3a; } .tpm-soft .tpm-h { border-color: #f6e2dd; } .tpm-soft .tpm-h i { background: #c2557a; border-radius: 50%; }
.tpm-soft .tpm-b s { background: #fde8e4; border-radius: 999px; } .tpm-soft .tpm-b s i { background: #c2557a; border-radius: 50%; } .tpm-soft .tpm-in { border-color: #f3d7d1; border-radius: 999px; background: #fff; }
.tpm-boutique { background: #f6f1e7; border-color: #d9cfbd; border-radius: 4px; color: #3b2b1c; } .tpm-boutique .tpm-h { border-color: #d9cfbd; } .tpm-boutique .tpm-h i { background: #6b4e31; border-radius: 50%; }
.tpm-boutique .tpm-b s { background: #fbf8f2; border: 1px solid #d9cfbd; border-radius: 2px; } .tpm-boutique .tpm-b s i { background: #b08a5a; border-radius: 50%; } .tpm-boutique .tpm-in { border-color: #d9cfbd; border-radius: 2px; }
.tpm-bold { background: #ffe58a; border: 2px solid #111; color: #111; } .tpm-bold .tpm-h { background: #111; border: 0; color: #ffd23f; } .tpm-bold .tpm-h i { background: #ffd23f; border-radius: 50%; }
.tpm-bold .tpm-b em { height: 11px; opacity: 1; } .tpm-bold .tpm-b s { background: #fff; border: 2px solid #111; } .tpm-bold .tpm-b s i { background: #ff4f3f; border-radius: 50%; } .tpm-bold .tpm-in { background: #fff; border: 2px solid #111; }

/* The setup guide (start pages and /desk/setup, 17 Oct 2026): the steps down the side, one step a page. */
.start-guide { width: 100%; max-width: 1160px; margin: 0 auto; padding: 32px 20px 64px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.start-guide .start-main { max-width: none; margin: 0; padding: 0; }
.start-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px; }
.start-count { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.start-guide .start-steps { flex-direction: column; gap: 2px; flex-wrap: nowrap; }
.start-guide .start-steps li { padding: 7px 8px; border-radius: 10px; font-size: 14px; }
.start-guide .start-steps li a { color: var(--ink-2); text-decoration: none; }
.start-guide .start-steps li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.start-guide .start-steps li.on { background: var(--accent-50); color: var(--accent-deep); font-weight: 650; }
.start-guide .start-steps li.on .n { background: var(--accent); color: #fff; }
.start-guide .start-steps li.done .n { background: var(--green-bg); color: var(--green); }
.start-skip { font-size: 13px; color: var(--muted); text-underline-offset: 3px; }
.guide-head { display: flex; flex-direction: column; gap: 6px; }
.guide-head h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.guide-head p { color: var(--ink-2); max-width: 65ch; }
.guide-foot { padding-top: 6px; }
.guide-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.guide-skip { font-size: 14px; color: var(--muted); text-underline-offset: 3px; }
.guide-set { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.guide-set legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding: 0; }
.guide-opt, .guide-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.guide-opt:has(input:checked), .guide-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.guide-opt:has(input:focus-visible), .guide-card:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.guide-opt input, .guide-card input { margin-top: 3px; flex: none; accent-color: var(--accent); }
.guide-opt > span, .guide-card > span { display: flex; flex-direction: column; gap: 3px; }
.guide-opt small, .guide-card small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.guide-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tag-new { display: inline; margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--green); }
.guide-ex { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); }
.guide-ex h2 { font-size: 15px; }
.start-card .guide-q, .guide-q { align-self: flex-end; max-width: 80%; display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 14px 14px 4px 14px; background: var(--accent); color: #fff; font-size: 14px; }
.guide-q span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.guide-cmp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.guide-cmp-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-cmp-1 { grid-template-columns: minmax(0, 1fr); }
.guide-cmp > div { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 14px; }
.guide-cmp b { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.guide-cmp small { color: var(--muted); font-size: 12.5px; }
.guide-fu { padding: 8px 10px; border-radius: 10px; background: var(--accent-50); border: 1px solid var(--accent-100); font-size: 13.5px; }
.guide-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.guide-people li { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 14px; }
.start-card .guide-invite, .guide-invite { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.guide-test { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.guide-test li span { display: block; color: var(--ink-2); font-size: 14px; }
.guide-note { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; }
.guide-note h2 { font-size: 16px; }
@media (max-width: 1000px) {
	.start-guide { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 20px; }
	.start-top .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
	.start-rail { position: static; }
	.start-guide .start-steps { flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
	.start-guide .start-steps li { flex: none; }
	.start-guide .start-steps li:not(.on) > a, .start-guide .start-steps li:not(.on) > span:last-child { display: none; }
	.guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.guide-cards-3, .guide-cmp, .guide-cmp-2, .guide-invite { grid-template-columns: 1fr; }
}

/* The setup guide's footer stays on screen: Back, Skip and Save and continue in a white bar (17 Oct 2026). */
.start:has(.guide-foot) { padding-bottom: 84px; }
.start-card .guide-foot, .guide-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; padding: 12px max(24px, calc((100vw - 760px) / 2)) calc(12px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -10px 26px -20px rgba(14, 17, 64, .45); flex-direction: row; }
.guide-foot .btn { height: 44px; padding: 0 20px; }

/* How the chat looks: the choices beside the real chat (/desk/setup/preview). */
.look-live { display: flex; flex-direction: column; gap: 16px; }
.look-ctl { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.look-box { padding: 20px; gap: 12px; }
.look-box h2 { font-size: 16px; }
.look-tg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.look-tg .tg-t { padding: 6px 6px 10px; }
.look-tg .tpm { height: 92px; }
.look-tg .tg-t:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26, 35, 112, .12); }
.look-tg .tg-t:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.look-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.look-grid2 .field-q p { font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.swatch { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.swatch:hover, .swatch:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
.swatch-1a2370 { background: #1a2370; } .swatch-2b50d8 { background: #2b50d8; } .swatch-0f766e { background: #0f766e; } .swatch-4f8a3a { background: #4f8a3a; }
.swatch-c2557a { background: #c2557a; } .swatch-6d4dff { background: #6d4dff; } .swatch-e85d04 { background: #e85d04; } .swatch-222222 { background: #222222; }
.swatches .colour { margin-left: 4px; }
@media (max-width: 700px) {
	.look-tg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.look-grid2 { grid-template-columns: 1fr; }
	.guide-foot { padding-left: 16px; padding-right: 16px; }
	.guide-foot .guide-skip { display: none; }
}

/* The setup guide, every step (17 Oct 2026): the left 60% scrolls (the steps along the top, the step), the right 40% is fixed and full height (the live chat or the step's examples). */
.split { --pane: 40vw; min-height: 100vh; background: var(--ground); }
.split-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.split-skip:focus { top: 12px; }
.split :focus-visible, .split-skip:focus-visible { outline: 3px solid #6d2ef2; outline-offset: 2px; }
.split-left { width: calc(100% - var(--pane)); min-height: 100vh; display: flex; flex-direction: column; }
.split-head { position: sticky; top: 0; z-index: 20; background: rgba(247, 248, 250, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.split-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 32px 10px; }
.split-top .start-logo { font-size: 18px; } .split-top .start-logo img { width: 28px; height: 28px; }
.split-top .who { font-size: 14px; color: var(--muted); }
.split-later { font-size: 14px; color: var(--ink-2); text-underline-offset: 3px; }
.split-steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0 32px 12px; overflow-x: auto; }
.split-steps li { flex: none; }
.split-steps a, .split-steps li > span { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; border: 1px solid transparent; }
.split-steps .n { width: 20px; height: 20px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--grey-bg); color: var(--ink-2); font-size: 11.5px; }
.split-steps .done .n { background: var(--green-bg); color: var(--green); }
.split-steps li > span.on { background: var(--accent); color: #fff; }
.split-steps span.on .n { background: rgba(255, 255, 255, .2); color: #fff; }
.split-steps a:hover { border-color: var(--line); color: var(--ink); background: #fff; }
.split-bar { height: 3px; background: var(--grey-bg); } .split-bar i { display: block; height: 100%; background: var(--accent); }
.split-main { flex: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 28px 32px 120px; display: flex; flex-direction: column; gap: 20px; }
.split-count { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: -10px; }
.split .guide-foot, .split .start-card .guide-foot { right: var(--pane); padding-left: max(32px, calc((100vw - var(--pane) - 820px) / 2 + 32px)); padding-right: max(32px, calc((100vw - var(--pane) - 820px) / 2 + 32px)); }
.split-pane { position: fixed; top: 0; right: 0; z-index: 25; width: var(--pane); height: 100vh; display: flex; flex-direction: column; background: #eceef3; border-left: 1px solid var(--line); }
.split-pane:focus { outline: none; }
.split-pane-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.split-pane-cap { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.split-pane-cap::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 3px #d1fadf; }
.split-pane-tools { display: flex; gap: 8px; align-items: center; }
.pane-btn { min-height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.pane-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.split-stage { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: stretch; }
.split-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.split-stage.phone { padding: 18px 0; align-items: center; }
.split-stage.phone iframe { width: 360px; max-width: calc(100% - 24px); height: min(760px, 100%); border: 10px solid var(--ink); border-radius: 36px; }
.split-pane-note { padding: 10px 16px; font-size: 12.5px; color: var(--muted); background: #fff; border-top: 1px solid var(--line); }
/* Examples in the pane (How it answers, Prove it is yours). */
.ex-chat, .ex-code { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.ex-h { margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ex-h:first-child { margin-top: 0; }
.ex-h b { color: var(--accent); }
.ex-q { align-self: flex-end; max-width: 82%; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--accent); color: #fff; font-size: 14px; }
.ex-a { align-self: flex-start; max-width: 88%; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--soft); border: 1px solid var(--line); color: var(--ink); font-size: 14px; line-height: 1.5; }
.ex-more { flex-direction: column; gap: 10px; }
.ex-note { align-self: flex-start; font-size: 12.5px; color: var(--green); background: var(--green-bg); padding: 5px 10px; border-radius: 99px; }
.ex-fu { align-self: flex-start; max-width: 88%; flex-direction: column; gap: 8px; padding: 10px 13px; border-radius: 12px; background: var(--accent-50); border: 1px solid var(--accent-100); font-size: 13.5px; }
.ex-fu b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ex-fu span { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-fu i { font-style: normal; border: 1px solid var(--accent-100); background: #fff; border-radius: 99px; padding: 4px 10px; font-size: 12.5px; }
.split-pane [data-tone], .split-pane [data-style] { display: none; }
.split:has(input[name="tone"][value="auto"]:checked) .split-pane [data-tone~="auto"],
.split:has(input[name="tone"][value="professional"]:checked) .split-pane [data-tone~="professional"],
.split:has(input[name="tone"][value="friendly"]:checked) .split-pane [data-tone~="friendly"],
.split:has(input[name="tone"][value="playful"]:checked) .split-pane [data-tone~="playful"],
.split:has(input[name="style"][value="auto"]:checked) .split-pane [data-style~="auto"],
.split:has(input[name="style"][value="guide"]:checked) .split-pane [data-style~="guide"],
.split:has(input[name="style"][value="direct"]:checked) .split-pane [data-style~="direct"] { display: block; }
.split:has(input[name="tone"][value="auto"]:checked) .split-pane div[data-tone~="auto"],
.split:has(input[name="style"][value="auto"]:checked) .split-pane div[data-style~="auto"],
.split:has(input[name="style"][value="guide"]:checked) .split-pane div[data-style~="guide"] { display: flex; }
.split-pane .ex-h b[data-tone], .split-pane .ex-h b[data-style] { display: none; }
.split:has(input[name="tone"][value="auto"]:checked) .ex-h b[data-tone="auto"],
.split:has(input[name="tone"][value="professional"]:checked) .ex-h b[data-tone="professional"],
.split:has(input[name="tone"][value="friendly"]:checked) .ex-h b[data-tone="friendly"],
.split:has(input[name="tone"][value="playful"]:checked) .ex-h b[data-tone="playful"],
.split:has(input[name="style"][value="auto"]:checked) .ex-h b[data-style="auto"],
.split:has(input[name="style"][value="guide"]:checked) .ex-h b[data-style="guide"],
.split:has(input[name="style"][value="direct"]:checked) .ex-h b[data-style="direct"] { display: inline; }
.ex-code pre { margin: 0; padding: 16px; border-radius: 12px; background: var(--ink); color: #e8edff; font-size: 13px; line-height: 1.6; overflow-x: auto; }
.ex-code pre code { background: none; color: inherit; padding: 0; border: 0; font-size: inherit; white-space: pre; }
.ex-code mark { display: block; margin: 2px -6px; padding: 2px 6px; border-radius: 6px; background: #9d6bff; color: #fff; }
.ex-steps { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 14px; }
@media (max-width: 1100px) {
	.split { --pane: 0px; }
	.split-left { width: 100%; }
	.split-main { padding: 20px 20px 110px; }
	.split-pane { position: relative; order: -1; width: 100%; height: 600px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; z-index: 1; }
	.split-top, .split-steps { padding-left: 20px; padding-right: 20px; }
	.split .guide-foot, .split .start-card .guide-foot { right: 0; padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 640px) { .split-pane { height: 540px; } .split .guide-foot .guide-skip { display: none; } }
@media (prefers-reduced-motion: reduce) { .split *, .split-pane * { transition: none !important; animation: none !important; } }
.look-label { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); max-width: 420px; }
/* The gear menu (17 Oct 2026): your account and the quick starts (the chatbot's now, the call agent's later). */
.gear-menu { width: min(320px, calc(100vw - 24px)); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.gear-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.gear-item:hover, .gear-item:focus-visible, .gear-item[aria-current] { background: var(--accent-50); }
.gear-item .i { margin-top: 2px; flex: none; color: var(--accent); }
.gear-item span { display: flex; flex-direction: column; gap: 2px; }
.gear-item strong { font-size: 14px; }
.gear-item small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.gear-h { margin: 6px 12px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }