/* Katteb Chat — design tokens. Poe's structure in Katteb's homepage palette:
   slate-50 ground, white cards with slate-200 borders, blue-600 primary,
   amber-400 as the small accent. Class names are kept stable (.glass, .pastel,
   .btn-dark…) so every page restyles from here. */

:root {
  --bg: #F8FAFC;              /* slate-50 */
  --surface: #FFFFFF;
  --surface-strong: #FFFFFF;
  --surface-soft: #F1F5F9;    /* slate-100 */
  --border: #E2E8F0;          /* slate-200 */
  --border-ink: #E2E8F0;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px rgba(15, 23, 42, .05);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, .12);
  --ink: #0F172A;             /* slate-900 */
  --ink-2: #475569;           /* slate-600 */
  --ink-3: #94A3B8;           /* slate-400 */
  --accent: #2563EB;          /* blue-600 */
  --accent-ink: #1D4ED8;      /* blue-700 */
  --accent-soft: #EFF6FF;     /* blue-50 */
  --accent-tint: #DBEAFE;     /* blue-100 */
  --amber: #FBBF24;
  --ok: #10B981;
  --warn: #F59E0B;
  --danger: #EF4444;
}

html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; }
[dir="rtl"] body { font-family: 'Cairo', 'Plus Jakarta Sans', system-ui, sans-serif; }

/* ---------------------------------------------------------------- cards */
.glass { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.glass-strong { background: var(--surface-strong); }
.glass-soft   { background: var(--surface-soft); border-color: transparent; box-shadow: none; }
.glass-hover  { transition: background .15s, box-shadow .2s, border-color .15s; }
.glass-hover:hover { border-color: #CBD5E1; box-shadow: var(--shadow-lg); }
.blob { display: none; }

.pastel { background: linear-gradient(120deg, #DBEAFE 0%, #EFF6FF 60%, #FEF3C7 100%); }
.pastel-soft { background: var(--accent-soft); }

.pill { border-radius: 9999px; }
.btn-dark { background: var(--accent); color: #fff; border-radius: 9999px; font-weight: 600; transition: background .15s, transform .1s; }
.btn-dark:hover { background: var(--accent-ink); }
.btn-dark:active { transform: scale(.98); }
.btn-dark:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-ghost { background: var(--surface); border: 1px solid var(--border); border-radius: 9999px; font-weight: 600; color: var(--ink); }
.btn-ghost:hover { background: var(--surface-soft); }
.btn-accent { background: var(--accent); color: #fff; border-radius: 9999px; font-weight: 600; }
.btn-accent:hover { background: var(--accent-ink); }

.chip { border-radius: 9999px; font-size: 13px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); transition: all .15s; white-space: nowrap; }
.chip:hover { background: var(--surface-soft); color: var(--ink); }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip.on-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-tint); }

.input { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; font-size: 15px; color: var(--ink); outline: none; transition: box-shadow .15s, border-color .15s; }
.input:focus { border-color: #93C5FD; box-shadow: 0 0 0 4px rgba(37, 99, 235, .12); }
.input::placeholder { color: var(--ink-3); }
.label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }

/* ----------------------------------------------------------------- rail */
.rail { width: 68px; background: var(--surface); border-inline-end: 1px solid var(--border); position: sticky; top: 0; z-index: 45; }   /* sticky (not relative: that overrode Tailwind's .sticky and let the rail scroll away on long pages); z-index so its menus float above the transformed panel */
.rail-btn { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--ink-2); position: relative; transition: background .15s, color .15s; }
.rail-btn:hover { background: var(--surface-soft); color: var(--ink); }
.rail-btn.on { background: var(--accent-soft); color: var(--accent-ink); }
.rail-btn svg { width: 22px; height: 22px; }
.rail-lang { font-size: 13px; font-weight: 800; letter-spacing: .02em; font-family: 'Plus Jakarta Sans', 'Cairo', system-ui, sans-serif; }
.rail-btn .dot { position: absolute; top: 6px; inset-inline-end: 6px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
/* Agents is the newest thing in the product and the easiest to miss, so it is
   marked everywhere it appears: a dot on the rail, an accent chip on the home
   row, a badge in the mobile nav. */
.rail-btn .dot.dot-new { min-width: 8px; width: 8px; height: 8px; border-radius: 50%; padding: 0; background: #F59E0B; box-shadow: 0 0 0 2px var(--bg, #F8FAFC); }
.rail-agents { color: var(--accent-ink); }
.rail-agents:hover { background: var(--accent-soft); }
.nav-agents { background: var(--accent-soft); color: var(--accent-ink); }
.nav-agents svg { color: var(--accent-ink); }
.chip-agents { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip-agents:hover { background: var(--accent-ink); color: #fff; }
.chip-agents svg { color: #fff; }
.chip-new { background: rgba(255,255,255,.22); color: #fff; border-radius: 9999px; font-size: 9.5px; font-weight: 800; padding: 1px 6px; letter-spacing: .02em; }
.nav-agents .chip-new { background: var(--accent); color: #fff; }
.rail-btn[data-tip]:hover::after { content: attr(data-tip); position: absolute; inset-inline-start: calc(100% + 10px); top: 50%; transform: translateY(-50%); background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 8px; white-space: nowrap; z-index: 50; pointer-events: none; }
.panel { width: 300px; max-width: 86vw; background: var(--surface); border-inline-end: 1px solid var(--border); }
.nav-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-weight: 600; color: var(--ink); position: relative; }
.nav-card svg { width: 20px; height: 20px; color: var(--ink-2); flex: none; }
.nav-card:hover { background: var(--surface-soft); }
.nav-card.on { background: var(--accent-soft); color: var(--accent-ink); }
.nav-card.on svg { color: var(--accent-ink); }

/* ------------------------------------------------------------- messages */
.msg-user { background: var(--accent); color: #fff; border-radius: 20px 20px 4px 20px; box-shadow: var(--shadow); }
.msg-user a { color: #fff; text-decoration: underline; }
.msg-time { font-size: 11px; opacity: .7; margin-top: 4px; text-align: end; }
.msg-assistant { background: var(--surface); border: 1px solid var(--border); border-radius: 4px 20px 20px 20px; box-shadow: var(--shadow); }
.msg-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.action-btn { width: 36px; height: 36px; border-radius: 9999px; border: 1px solid var(--border); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); transition: all .15s; }
.action-btn:hover { background: var(--surface-soft); color: var(--ink); }
.action-btn.on { color: var(--accent-ink); border-color: var(--accent-tint); background: var(--accent-soft); }
.action-btn svg { width: 16px; height: 16px; }
.compare-row { display: flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.compare-row:hover { border-color: #93C5FD; box-shadow: var(--shadow); }
.compare-row .lbl { padding: 10px 14px; color: var(--ink-2); font-weight: 600; font-size: 14px; border-inline-end: 1px solid var(--border); }
.compare-row .mdl { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 600; font-size: 14px; }
.compare-row .go { padding: 10px 14px; color: var(--ink-3); }
.thinking { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; user-select: none; }
.cursor-blink::after { content: "\258D"; margin-inline-start: 2px; color: var(--accent); animation: kblink 1s steps(2) infinite; }
@keyframes kblink { 50% { opacity: 0; } }

.prose { color: var(--ink); line-height: 1.7; font-size: 15.5px; word-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: .7em 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-weight: 700; line-height: 1.3; margin: 1.3em 0 .5em; }
.prose h1 { font-size: 1.45em; } .prose h2 { font-size: 1.28em; } .prose h3 { font-size: 1.12em; } .prose h4 { font-size: 1em; }
.prose ul, .prose ol { margin: .6em 0; padding-inline-start: 1.5em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li { margin: .28em 0; } .prose li > p { margin: .2em 0; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote { border-inline-start: 3px solid var(--accent-tint); padding-inline-start: 14px; color: var(--ink-2); margin: .9em 0; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.4em 0; }
.prose img { max-width: 100%; border-radius: 14px; }
.prose strong { font-weight: 700; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--accent-soft); color: var(--accent-ink); border-radius: 6px; padding: .12em .38em; direction: ltr; unicode-bidi: embed; }
.prose pre { direction: ltr; text-align: left; margin: .9em 0; border-radius: 14px; overflow: hidden; background: #0F172A; border: 1px solid #1E293B; }
.prose pre { max-width: 100%; min-width: 0; }
.prose pre code { display: block; padding: 14px 16px; background: transparent; color: #E2E8F0; font-size: 13px; line-height: 1.6; overflow-x: auto; border-radius: 0; scrollbar-width: thin; scrollbar-color: #64748B #1E293B; }
/* A bar the reader can see: overlay scrollbars on macOS hide until touched, which read as "the code is cut off". */
.prose pre code::-webkit-scrollbar { height: 10px; }
.prose pre code::-webkit-scrollbar-track { background: #1E293B; }
.prose pre code::-webkit-scrollbar-thumb { background: #64748B; border-radius: 6px; border: 2px solid #1E293B; }
.prose pre code::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.msg-assistant { min-width: 0; max-width: 100%; }
/* A minimised reply: the first few lines, fading out, with a button to open it again. */
.kc-collapsed { max-height: 8.5em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; background: #1E293B; color: #94A3B8; font-size: 12px; font-family: ui-monospace, monospace; direction: ltr; }
.code-head button { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; color: #E2E8F0; background: rgba(255,255,255,.08); border-radius: 8px; padding: 4px 10px; }
.code-head button:hover { background: rgba(255,255,255,.16); }
.kc-streaming .code-head button[data-act="preview"], .kc-streaming .code-head button[data-act="editor"] { opacity: .35; cursor: wait; background: rgba(255,255,255,.06) !important; }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; margin: .9em 0; font-size: .93em; display: block; overflow-x: auto; }
.prose table thead th { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; text-align: start; padding: 9px 12px; }
.prose table td { padding: 9px 12px; border-top: 1px solid var(--border); vertical-align: top; }
.prose table thead th:first-child { border-start-start-radius: 12px; } .prose table thead th:last-child { border-start-end-radius: 12px; }

.editor-pane { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: #fff; }

/* ------------------------------------------------------------ composer */
.composer { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); }
.composer:focus-within { border-color: #93C5FD; box-shadow: 0 0 0 4px rgba(37, 99, 235, .10), var(--shadow-lg); }
.composer textarea { resize: none; background: transparent; outline: none; width: 100%; font-size: 16px; line-height: 1.55; color: var(--ink); max-height: 220px; }
.composer textarea::placeholder { color: var(--ink-3); }
.send-btn { width: 38px; height: 38px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; transition: transform .1s, background .15s; }
.send-btn:hover { background: var(--accent-ink); } .send-btn:active { transform: scale(.95); }
.send-btn:disabled { background: var(--surface-soft); color: var(--ink-3); cursor: not-allowed; }
.send-btn.stop { background: var(--danger); color: #fff; }
.tool-btn { width: 36px; height: 36px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); transition: background .15s, color .15s; }
.tool-btn:hover { background: var(--surface-soft); color: var(--ink); }
.tool-btn.on { background: var(--accent-soft); color: var(--accent-ink); }
.tool-btn svg { width: 20px; height: 20px; }
.mic-btn.rec { background: #FEE2E2; color: var(--danger); animation: kpulse 1.2s infinite; }
@keyframes kpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35);} 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0);} }

/* -------------------------------------------------------------- home */
.model-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 9999px; background: var(--surface); border: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--ink); transition: all .15s; white-space: nowrap; }
[dir="rtl"] .model-chip { padding: 6px 6px 6px 12px; }
.model-chip:hover { border-color: #93C5FD; background: var(--accent-soft); }
.model-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.model-chip.on .logo-sm { background: #fff; }
.bot-tile { border-radius: 18px; text-align: center; width: 92px; cursor: pointer; transition: transform .15s; flex: none; }
.bot-tile:hover { transform: translateY(-2px); }
.bot-tile .logo { width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); position: relative; }
.bot-tile .logo svg, .bot-tile .logo img { width: 36px; height: 36px; }
.bot-tile.on .logo { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.bot-tile .name { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-tile .badge-new { position: absolute; top: -6px; inset-inline-end: -6px; }
.tile { border-radius: 14px; padding: 8px 12px; text-align: center; font-weight: 600; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: all .15s; border: 1px solid transparent; }
.tile:hover { background: var(--surface); border-color: var(--border); }
.tile .ico { width: 32px; height: 32px; border-radius: 10px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); }
.tile.on { background: var(--accent-soft); border-color: var(--accent-tint); color: var(--accent-ink); }

.logo-sm { width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); flex: none; }
.logo-sm svg, .logo-sm img { width: 15px; height: 15px; }
.logo-img { display: inline-block; object-fit: contain; }
.avatar { border-radius: 9999px; background: linear-gradient(135deg, #2563EB, #7C3AED); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- misc */
.scroll-x { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-y { scrollbar-width: thin; scrollbar-color: #CBD5E1 transparent; }
.scroll-y::-webkit-scrollbar { width: 6px; } .scroll-y::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 6px; }
.toast { background: var(--ink); color: #fff; border-radius: 14px; padding: 12px 16px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow-lg); }
.toast.ok { background: #065F46; } .toast.err { background: #991B1B; }
.skeleton { background: linear-gradient(90deg, #F1F5F9, #E2E8F0, #F1F5F9); background-size: 200% 100%; animation: kshim 1.2s infinite; border-radius: 10px; }
@keyframes kshim { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.badge { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; padding: 3px 7px; }
.badge-official { background: var(--accent-soft); color: var(--accent-ink); }
.badge-new { background: var(--accent); color: #fff; }
.badge-lock { background: #FEF3C7; color: #92400E; }
.day-pill { display: inline-block; background: var(--surface-soft); color: var(--ink-2); font-size: 12px; font-weight: 600; border-radius: 9999px; padding: 6px 14px; }
.marquee { display: flex; gap: 10px; width: max-content; animation: kmarq 60s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes kmarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .marquee { animation-name: kmarq-rtl; }
@keyframes kmarq-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } .cursor-blink::after { animation: none; } }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
[x-cloak] { display: none !important; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }

/* ------------------------------------------------------------- dialogs */
.dialog { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-lg); }
.dialog-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-ink); }
.dialog-icon.danger { background: #FEE2E2; color: #B91C1C; }
.btn-danger { background: #DC2626; color: #fff; border-radius: 9999px; font-weight: 600; }
.btn-danger:hover { background: #B91C1C; }
.menu { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink); text-align: start; }
.menu-item:hover { background: var(--surface-soft); }
.menu-item svg { width: 18px; height: 18px; color: var(--ink-2); flex: none; }
.menu-item.danger { color: #B91C1C; } .menu-item.danger svg { color: #B91C1C; }
.model-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; text-align: start; width: 100%; transition: background .12s, border-color .12s; }
.model-row:hover { background: var(--surface-soft); }
.model-row.on { border-color: var(--accent); background: var(--accent-soft); }
/* Premium model on a free account: still listed, still clickable (the click sells
   the plan), just visibly not included. */
.model-row.is-locked .logo-sm, .model-row.is-locked .line-clamp-2 { opacity: .55; }
.model-chip.is-locked { opacity: .7; }
.model-chip.is-locked.on { opacity: 1; }
.model-row .logo-sm { width: 40px; height: 40px; border-radius: 12px; }
.model-row .logo-sm img { width: 22px; height: 22px; }
.lang-toggle { font-size: 12px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--border); border-radius: 9999px; padding: 6px 10px; background: var(--surface); }
.lang-toggle:hover { background: var(--surface-soft); color: var(--ink); }
.nav-drawer { background: var(--surface); }
@media (max-width: 1023px) { .rail { display: none; } }

/* --------------------------------------------------------------- mobile */
/* The shell is a plain, non-scrolling, full-height box. `svh` is the *small* viewport
   height: it does not change when the iOS URL bar collapses, so nothing shifts while you
   swipe (`dvh` does change, which was the old jitter). Because the document itself never
   scrolls, the URL bar stays put and svh matches the real viewport.
   The on-screen keyboard is handled by `interactive-widget=resizes-content` in the viewport
   meta, not by JS: trying to resize this box from visualViewport fought Safari's own
   scroll-the-focused-input behaviour and threw the composer off screen. */
.kc-shell { height: 100vh; }
@supports (height: 100svh) { .kc-shell { height: 100svh; } }
@supports (height: 100dvh) { .h-screen { height: 100dvh; } }
@media (max-width: 640px) {
  .msg-assistant { padding-left: 14px; padding-right: 14px; }
  .compare-row .lbl { padding: 9px 10px; font-size: 13px; }
  .compare-row .mdl { padding: 9px 10px; font-size: 13px; }
  .bot-tile { width: 84px; } .bot-tile .logo { width: 64px; height: 64px; }
  .action-btn { width: 34px; height: 34px; }
}

/* ---------------------------------------------------- first-paint layout */
/* The Chats panel is part of the initial layout on desktop (no Alpine wait); a
   remembered "collapsed" choice is applied via <html class="kc-nopanel">. */
@media (min-width: 1024px) { .kc-nopanel .panel.panel-desktop { display: none !important; } }
/* The wordmark is the home hero: as wide as the column allows, capped so it stays a
   logo rather than a banner. */
.hero-logo { width: 100%; max-width: 420px; height: auto; aspect-ratio: 1279 / 422; }
.chips-row { min-height: 48px; }
/* The featured row is one line at every width — the models and More read as one
   set, and a lone chip wrapping underneath looked like a layout bug. Centred
   while it fits; `safe` keeps the first chip reachable once it does not, because
   plain centring pushes the overflow out of reach on the scroll side. Names are
   never clipped: the row scrolls instead, as it already did on phones. */
.chips-row { justify-content: safe center; }
.chips-row::-webkit-scrollbar { height: 0; }
/* Between tablet and laptop it is close: buying a little padding back is what
   lets the whole set land on screen without scrolling at all. */
@media (min-width: 640px) and (max-width: 1180px) {
  .chips-row { gap: 4px; }
  .chips-row .model-chip { padding: 6px 9px 6px 4px; font-size: 12.5px; }
  [dir="rtl"] .chips-row .model-chip { padding: 6px 4px 6px 9px; }
  .chips-row .model-chip .logo-sm { width: 22px; height: 22px; }
}
.panel.panel-open { transform: none !important; }

/* ------------------------------------------------- phones: Poe-like density */
@media (max-width: 639px) {
  .hero-logo { max-width: 250px; }
  .chips-row { min-height: 38px; }
  .model-chip { font-size: 13px; padding: 4px 10px 4px 4px; gap: 6px; background: transparent; border-color: transparent; }
  [dir="rtl"] .model-chip { padding: 4px 4px 4px 10px; }
  .model-chip.on { background: var(--accent); border-color: var(--accent); }
  .model-chip .logo-sm { width: 26px; height: 26px; }
  .model-chip .logo-sm img { width: 15px; height: 15px; }
  .composer { border-radius: 18px; }
  /* Never below 16px on a phone: iOS Safari zooms the page into any smaller field
     on focus and leaves it zoomed and shifted afterwards. Same for form fields. */
  .composer textarea { font-size: 16px; min-height: 48px; }
  .input, select.input, textarea.input { font-size: 16px; }
  .tool-btn { width: 32px; height: 32px; } .tool-btn svg { width: 18px; height: 18px; }
  .send-btn { width: 34px; height: 34px; }
  .chip { font-size: 12px; padding: 6px 10px; }
  .bot-tile { width: 86px; } .bot-tile .logo { width: 60px; height: 60px; border-radius: 18px; margin-bottom: 6px; }
  .bot-tile .logo img { width: 30px; height: 30px; } .bot-tile .name { font-size: 12px; }
  .msg-user { font-size: 14.5px; } .prose { font-size: 15px; }
}

/* Nothing on the page may drag sideways: only rows that scroll on purpose (.scroll-x) do. */
html, body { overflow-x: clip; overscroll-behavior-x: none; }   /* clip, not hidden: hidden turns <body> into a scroll container and kills position:sticky on long pages */
.scroll-x { overscroll-behavior-x: contain; }

/* ---- Kashier checkout overlay (assets/pay.js) */
#kc-pay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; }
#kc-pay .kc-pay-bg { position: absolute; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
#kc-pay .kc-pay-box { position: relative; width: min(480px, 100%); height: min(780px, 100%); background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(2,6,23,.45); display: flex; flex-direction: column; }
#kc-pay .kc-pay-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; font-weight: 700; color: #334155; background: #F8FAFC; border-bottom: 1px solid #E2E8F0; }
#kc-pay .kc-pay-x { margin-inline-start: auto; width: 30px; height: 30px; border-radius: 10px; color: #64748B; font-size: 14px; line-height: 30px; text-align: center; }
#kc-pay .kc-pay-x:hover { background: #E2E8F0; color: #0F172A; }
#kc-pay .kc-pay-body { position: relative; flex: 1; min-height: 0; background: #fff; }
#kc-pay iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; }
#kc-pay .kc-pay-spin { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin: -16px; border: 3px solid #E2E8F0; border-top-color: #2563EB; border-radius: 50%; animation: kcspin .8s linear infinite; }
@keyframes kcspin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { #kc-pay .kc-pay-box { width: 100%; height: 100%; border-radius: 0; } }
html.kc-pay-open { overflow: hidden; }

/* ---- active model chip in the composer */
.composer-model { padding: 5px 10px 5px 6px; border-radius: 9999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 12px; line-height: 1; transition: filter .15s; }
[dir="rtl"] .composer-model { padding: 5px 6px 5px 10px; }
.composer-model:hover { filter: brightness(.97); }
.composer-model:disabled { opacity: .6; cursor: default; }
.composer-model img { width: 20px; height: 20px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.06); }

/* ---- segmented on/off toggle used in the video params row (matches .input height) */
.seg-toggle { width: 100%; height: 39px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: background .15s, border-color .15s, color .15s; }
.seg-toggle .seg-dot { width: 34px; height: 20px; border-radius: 999px; background: var(--border); position: relative; transition: background .15s; flex-shrink: 0; }
.seg-toggle .seg-dot::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.seg-toggle.on { border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); }
.seg-toggle.on .seg-dot { background: var(--accent); }
.seg-toggle.on .seg-dot::after { transform: translateX(14px); }
[dir="rtl"] .seg-toggle.on .seg-dot::after { transform: translateX(-14px); }

/* ---- compact composer chips + tool buttons so the cost estimate never clips */
.chip-sm { padding: 5px 9px !important; font-size: 11.5px !important; }
/* The tool strip has to show every chip. It wraps to a second line rather than
   scrolling, because a chip you cannot see is a feature you do not know exists. */
/* The tools row stays one line at every width: wrapping pushed the chips under
   the model button and left the send button floating against a two-line block.
   Any overflow scrolls instead, with the edge faded so a clipped chip reads as
   "there is more", not as a bug. */
.composer-chips { flex-wrap: nowrap; }
.composer-chips { -webkit-mask-image: linear-gradient(to right, #000 94%, transparent 100%); mask-image: linear-gradient(to right, #000 94%, transparent 100%); }
[dir="rtl"] .composer-chips { -webkit-mask-image: linear-gradient(to left, #000 94%, transparent 100%); mask-image: linear-gradient(to left, #000 94%, transparent 100%); }
.composer .tool-btn { width: 34px; height: 34px; }
.composer .tool-btn svg { width: 18px; height: 18px; }
.composer .composer-model { max-width: 46%; }

/* ---- Katteb Agents: ready-made job template cards */
.tpl-card { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); text-align: start; transition: border-color .15s, background .15s; }
.tpl-card:hover { border-color: #93C5FD; background: var(--accent-soft); }
.tpl-logo { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-soft); flex: none; }

/* ---- Katteb Agents reveal + waiting list */
.wl-video { box-shadow: 0 26px 70px rgba(15,23,42,.18); }
.wl-video video { aspect-ratio: 16/9; object-fit: cover; }

/* Indeterminate progress for a model that is working but has not written yet.
   Deliberately not a percentage: we do not know how far along a research model
   is, and a bar that pretends to would be a lie. */
.kc-indet { height: 3px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; position: relative; }
.kc-indet::after {
  content: ""; position: absolute; inset-block: 0; inline-size: 38%;
  border-radius: 999px; background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: kc-indet 1.5s ease-in-out infinite;
}
@keyframes kc-indet { 0% { inset-inline-start: -40%; } 100% { inset-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) { .kc-indet::after { animation-duration: 4s; } }

/* Two-way choice at the top of the paywall: monthly plan or pay-as-you-go. */
.kc-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: var(--surface-soft); }
.kc-tabs button { flex: 1; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 700;
  color: var(--ink-2); transition: background .15s, color .15s, box-shadow .15s; }
.kc-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Dialogs that can outgrow the screen.
   iOS reports vh against the LARGE viewport, the one that pretends the browser
   toolbars are not there, so a sheet anchored to the bottom at 92vh runs off the
   top of the visible area and its title is cut. dvh is the height you can
   actually see, and it tracks the toolbars as they collapse. vh stays first as
   the fallback for browsers without dvh. */
.sheet-tall { max-height: 92vh; max-height: 92dvh; }
.sheet-mid  { max-height: 85vh; max-height: 85dvh; }
/* On a phone the sheet sits on the bottom edge, so the safe area belongs inside it. */
@media (max-width: 639px) {
  .sheet-tall, .sheet-mid { padding-bottom: max(env(safe-area-inset-bottom), 12px); }
}

/* ------------------------------------------------------ auth pages */
/* The join/verify/forgot/reset frame. A bordered, sticky bar so the card
   below it reads as page content rather than as the whole page. */
.auth-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* ---------------------------------------------------------------- public directory pages */
.seo-body { background: var(--bg, #F8FAFC); }
.seo-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding-inline: 20px; }
.seo-head { background: rgba(255,255,255,.82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.seo-foot { background: var(--surface); border-top: 1px solid var(--border); margin-top: 56px; }
.seo-h1 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; line-height: 1.18; letter-spacing: -.01em; }
.seo-lead { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.seo-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; }
.seo-tile { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.seo-tile:hover { border-color: #93C5FD; box-shadow: 0 8px 24px rgba(37,99,235,.10); }
.seo-tile img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.seo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; }
.seo-kv { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed rgba(15,23,42,.10); font-size: 14.5px; }
.seo-kv:last-child { border-bottom: 0; }
.seo-step { display: flex; gap: 12px; align-items: flex-start; }
.seo-step b { flex: none; width: 26px; height: 26px; border-radius: 9999px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-size: 13px; }
.seo-faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
.seo-faq p { color: var(--ink-2); line-height: 1.75; padding-bottom: 12px; margin: 0; }
.seo-faq details { border-bottom: 1px solid var(--border); }