/* Shared KeepTalking app chrome: the left rail (Chat · Call), the stacked lime toast, skeleton
   loaders and the motion tokens every app page uses. Pages load this + /kt-ui.js. */
:root{
  /* ONE palette for the whole app — every page maps its own tokens onto these (see the
     "design system" block at the end of each page's <style>). Neutrals carry a faint green
     tint; lime is the only brand colour and always takes dark text. Status colours are
     deliberately not lime, so "success" never reads as "click me". */
  --kt-bg:#0b0c0a;--kt-s1:#121411;--kt-s2:#1a1d18;--kt-s3:#23271f;
  --kt-line:#242922;--kt-line-2:#363d31;
  --kt-t1:#f2f4ee;--kt-t2:#a6ad9f;--kt-t3:#6e7568;
  --kt-brand:#d4ff5c;--kt-brand-hi:#c6f53f;--kt-brand-text:#d4ff5c;--kt-on-brand:#0b0c0a;
  --kt-brand-soft:rgba(212,255,92,.12);--kt-brand-line:rgba(212,255,92,.45);
  --kt-ok:#4ade9b;--kt-ok-soft:rgba(74,222,155,.12);--kt-bad:#ff6b6b;--kt-bad-soft:rgba(255,107,107,.12);
  --kt-warn:#ffb547;--kt-warn-soft:rgba(255,181,71,.12);--kt-info:#7cc4ff;--kt-info-soft:rgba(124,196,255,.12);
  --kt-bub-out:#26301a;
  --kt-font:"Hanken Grotesk",-apple-system,"Segoe UI",Roboto,sans-serif;--kt-display:"Bricolage Grotesque","Hanken Grotesk",sans-serif;
  --kt-rail-w:64px;
  --kt-lime:var(--kt-brand);--kt-lime-2:#b9e04a;--kt-lime-3:#8fae35;--kt-ink-on-lime:var(--kt-on-brand);
  --kt-rail-bg:var(--kt-s1);--kt-rail-line:var(--kt-line);--kt-rail-ink:var(--kt-t2);--kt-rail-hi:var(--kt-t1);--kt-rail-on:var(--kt-s3);
  --kt-skel-a:rgba(166,173,159,.13);--kt-skel-b:rgba(166,173,159,.24);
  --kt-ease:cubic-bezier(.22,1,.36,1);--kt-spring:cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="light"]{
  --kt-bg:#f4f6ee;--kt-s1:#ffffff;--kt-s2:#f1f3ec;--kt-s3:#e7eadf;
  --kt-line:#e2e5da;--kt-line-2:#cdd2c2;
  --kt-t1:#151a11;--kt-t2:#59624f;--kt-t3:#7f8875;
  --kt-brand-text:#4b6a00;--kt-brand-soft:rgba(150,190,20,.16);--kt-brand-line:rgba(105,140,10,.45);
  --kt-ok:#1f8a4c;--kt-ok-soft:rgba(31,138,76,.1);--kt-bad:#c62828;--kt-bad-soft:rgba(198,40,40,.08);
  --kt-warn:#9a6500;--kt-warn-soft:rgba(154,101,0,.1);--kt-info:#1a6b9f;--kt-info-soft:rgba(26,107,159,.1);
  --kt-bub-out:#ecf6cf;
  --kt-skel-a:rgba(21,26,17,.08);--kt-skel-b:rgba(21,26,17,.15);
  --kt-lime-3:#7f9d24;
}

/* ── rail ─────────────────────────────────────────────────────────────────────────────── */
.kt-rail{view-transition-name:kt-rail;position:fixed;left:0;top:0;bottom:0;width:var(--kt-rail-w);z-index:40;background:var(--kt-rail-bg);
  border-right:1px solid var(--kt-rail-line);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0 14px}
.kt-rail a,.kt-rail button{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:var(--kt-rail-ink);text-decoration:none;background:none;border:0;cursor:pointer;
  transition:background .2s var(--kt-ease),color .2s var(--kt-ease),transform .15s var(--kt-ease)}
.kt-rail a:hover,.kt-rail button:hover{background:var(--kt-rail-on);color:var(--kt-rail-hi)}
.kt-rail a:active,.kt-rail button:active{transform:scale(.92)}
.kt-rail a.on{background:var(--kt-rail-on);color:var(--kt-rail-hi)}
.kt-rail a.on::before{content:"";position:absolute;left:-10px;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--kt-lime)}
.kt-rail svg{width:22px;height:22px}
.kt-rail .kt-logo{width:34px;height:34px;border-radius:9px;background:var(--kt-lime);color:var(--kt-ink-on-lime);
  font:700 16px/1 "JetBrains Mono",monospace;margin-bottom:10px;box-shadow:0 0 0 0 rgba(212,255,92,.0);transition:box-shadow .3s var(--kt-ease),transform .15s}
.kt-rail .kt-logo:hover{background:var(--kt-lime);color:var(--kt-ink-on-lime);box-shadow:0 0 22px -2px rgba(212,255,92,.55)}
.kt-rail .kt-sp{flex:1}
/* account at the foot of the rail: avatar + balance (account.js renders #acct, kt-ui moves it here) */
/* the avatar + balance slot keeps its size before they load, so theme/settings never jump */
.kt-rail #ktAcct{min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.kt-rail #acct{position:static;display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px}
.kt-rail #acct .who{width:40px;height:40px;padding:0;border:0;background:none;justify-content:center;border-radius:50%;cursor:pointer}
.kt-rail #acct .who span:not(.av){display:none}
.kt-rail #acct .who img,.kt-rail #acct .av{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px var(--kt-s1),0 0 0 3px var(--kt-line-2)}
.kt-rail #acct .bal{order:2;font:600 10.5px/1 var(--kt-font);font-variant-numeric:tabular-nums;padding:4px 6px;border-radius:6px;border:0;
  background:var(--kt-s2);color:var(--kt-t2);max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt-rail #acct .bal.neg{background:var(--kt-bad-soft);color:var(--kt-bad)}
.kt-rail #acct .signin{font-size:11px;padding:6px 8px}
.kt-rail .kt-tip{position:absolute;left:58px;top:50%;white-space:nowrap;pointer-events:none;z-index:2;
  background:#0d0f0c;color:#f2f4ee;border:1px solid rgba(255,255,255,.08);
  font:600 13px/1 "Hanken Grotesk",system-ui,sans-serif;letter-spacing:.005em;padding:9px 12px;border-radius:9px;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.55),0 2px 6px -2px rgba(0,0,0,.35);
  opacity:0;transform:translate(-6px,-50%) scale(.96);transform-origin:left center;
  transition:opacity .14s var(--kt-ease),transform .18s var(--kt-ease);transition-delay:0s}
.kt-rail .kt-tip::before{content:"";position:absolute;left:-5px;top:50%;width:9px;height:9px;background:inherit;
  border-left:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);transform:translateY(-50%) rotate(45deg);border-radius:0 0 0 2px}
.kt-rail a:hover .kt-tip,.kt-rail button:hover .kt-tip,.kt-rail a:focus-visible .kt-tip,.kt-rail button:focus-visible .kt-tip{
  opacity:1;transform:translate(0,-50%) scale(1);transition-delay:.12s}
.kt-rail .kt-badge{position:absolute;top:4px;right:3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--kt-brand);
  color:var(--kt-on-brand);font:700 10.5px/17px "Hanken Grotesk",sans-serif;text-align:center}
.kt-rail .kt-badge:empty{display:none}
body.kt-has-rail,body[data-kt-rail]{padding-left:var(--kt-rail-w)}
/* the rail's column is painted from the first frame, before kt-ui.js builds the rail — no shift */
body[data-kt-rail]:not(.kt-has-rail)::before{content:"";position:fixed;left:0;top:0;bottom:0;width:var(--kt-rail-w);
  background:var(--kt-s1);border-right:1px solid var(--kt-line);z-index:39}
/* phones: the rail becomes a bottom tab bar, and hides inside an open conversation */
@media(max-width:760px){
  body.kt-has-rail #hellobar{left:0}
  .kt-rail{top:auto;bottom:var(--hellobar-h,0px);right:0;width:auto;height:calc(58px + env(safe-area-inset-bottom));flex-direction:row;justify-content:space-around;
    padding:6px 10px env(safe-area-inset-bottom);border-right:0;border-top:1px solid var(--kt-rail-line);gap:0}
  .kt-rail .kt-logo,.kt-rail .kt-sp,.kt-rail #ktTheme{display:none}
  .kt-rail #acct .bal{display:none}
  .kt-rail #ktAcct{min-height:0}
  .kt-rail .kt-tip{display:none}
  .kt-rail a.on::before{left:12px;right:12px;top:-6px;bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px}
  body.kt-has-rail,body[data-kt-rail]{padding-left:0}
  body[data-kt-rail]:not(.kt-has-rail)::before{display:none}
  body.kt-has-rail:not(.kt-in-thread){--kt-rail-b:58px}
  html.kt-in-thread .kt-rail,body.kt-in-thread .kt-rail{display:none}
}

/* ── toast: stacked lime card, bottom-right ──────────────────────────────────────────── */
.kt-toasts{position:fixed;right:22px;bottom:calc(22px + var(--kt-rail-b,0px) + var(--hellobar-h,0px));z-index:9999;display:flex;flex-direction:column;
  align-items:flex-end;gap:16px;pointer-events:none;max-width:min(420px,calc(100vw - 32px))}
.kt-toast{position:relative;pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:14px;
  background:var(--kt-lime);color:var(--kt-ink-on-lime);border-radius:22px;padding:12px 20px 12px 12px;min-width:260px;
  font:500 14.5px/1.4 "Hanken Grotesk",system-ui,sans-serif;margin-bottom:34px;
  box-shadow:0 15px 0 -7px var(--kt-lime-2),0 30px 0 -14px var(--kt-lime-3),0 44px 50px -22px rgba(0,0,0,.65);
  animation:kt-toast-in .5s var(--kt-spring) both}
.kt-toast .kt-ti{flex:none;width:40px;height:40px;border-radius:12px;background:#0b0d08;color:var(--kt-lime);display:grid;place-items:center}
.kt-toast .kt-ti svg{width:20px;height:20px}
.kt-toast .kt-tx{min-width:0}
.kt-toast .kt-tx b{display:block;font-weight:700;font-size:13px;opacity:.75;margin-bottom:1px}
.kt-toast .kt-spark{position:absolute;right:-12px;bottom:-40px;width:16px;height:16px;color:var(--kt-lime);animation:kt-twinkle 1.6s ease-in-out infinite}
.kt-toast.err{background:#ff8a80;box-shadow:0 15px 0 -7px #e8716a,0 30px 0 -14px #c25a54,0 44px 50px -22px rgba(0,0,0,.65)}
.kt-toast.err .kt-ti{color:#ff8a80}.kt-toast.err .kt-spark{color:#ff8a80}
.kt-toast.out{animation:kt-toast-out .3s var(--kt-ease) forwards}
@keyframes kt-toast-in{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes kt-toast-out{to{opacity:0;transform:translateX(30px) scale(.96)}}
@keyframes kt-twinkle{0%,100%{transform:scale(.7) rotate(0);opacity:.6}50%{transform:scale(1.1) rotate(20deg);opacity:1}}
@media(max-width:760px){.kt-toasts{right:16px;left:16px;align-items:stretch}}

/* ── skeletons ───────────────────────────────────────────────────────────────────────── */
.kt-skel{position:relative;overflow:hidden;background:var(--kt-skel-a);border-radius:8px}
.kt-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--kt-skel-b),transparent);animation:kt-shimmer 1.3s infinite}
@keyframes kt-shimmer{to{transform:translateX(100%)}}

/* ── motion helpers ──────────────────────────────────────────────────────────────────── */
.kt-fade-in{animation:kt-fade .28s var(--kt-ease) both}
.kt-slide-in{animation:kt-slide .34s var(--kt-ease) both}
.kt-rise{animation:kt-rise .3s var(--kt-ease) both}
@keyframes kt-fade{from{opacity:0}to{opacity:1}}
@keyframes kt-slide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes kt-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .kt-toast,.kt-toast.out,.kt-fade-in,.kt-slide-in,.kt-rise,.kt-skel::after,.kt-toast .kt-spark{animation:none!important}
}

/* ── confirm dialog (replaces the browser's native confirm) ─────────────────────────── */
.kt-dlg-back{position:fixed;inset:0;z-index:10000;background:rgba(5,9,12,.62);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;
  animation:kt-fade .18s ease both}
.kt-dlg{width:100%;max-width:420px;background:var(--kt-s2);color:var(--kt-t1);border:1px solid rgba(255,255,255,.07);border-radius:20px;padding:22px 22px 18px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);font-family:"Hanken Grotesk",system-ui,sans-serif;animation:kt-dlg-in .32s var(--kt-spring) both}
html[data-theme="light"] .kt-dlg{background:#fff;border-color:var(--kt-line)}
.kt-dlg .kt-dh{display:flex;gap:14px;align-items:flex-start}
.kt-dlg .kt-di{flex:none;width:40px;height:40px;border-radius:12px;background:var(--kt-lime);color:#0b0d08;display:grid;place-items:center}
.kt-dlg.danger .kt-di{background:var(--kt-bad);color:#fff}
.kt-dlg .kt-di svg{width:20px;height:20px}
.kt-dlg h3{font-size:17px;font-weight:700;margin:2px 0 6px}
.kt-dlg p{font-size:14px;line-height:1.5;color:var(--kt-t2)}
.kt-dlg .kt-da{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.kt-dlg button{font:600 14px "Hanken Grotesk",system-ui,sans-serif;border:0;border-radius:999px;padding:10px 18px;cursor:pointer;transition:filter .15s,transform .12s}
.kt-dlg button:active{transform:scale(.97)}
.kt-dlg button:focus-visible{outline:2px solid var(--kt-lime);outline-offset:2px}
.kt-dlg button:focus:not(:focus-visible){outline:none}
.kt-dlg .kt-no{background:var(--kt-s3);color:inherit}
.kt-dlg .kt-yes{background:var(--kt-lime);color:#0b0d08}
.kt-dlg.danger .kt-yes{background:var(--kt-bad);color:#fff}
.kt-dlg button:hover{filter:brightness(1.08)}
.kt-dlg-back.out{animation:kt-fade .16s ease reverse forwards}
@keyframes kt-dlg-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

/* ── shared components: one chip, one status tag, one button, one overline ───────────── */
.kt-tag{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:6px;font:500 12px/1 var(--kt-font);
  white-space:nowrap;background:var(--kt-s3);color:var(--kt-t2);border:0;text-transform:none;letter-spacing:0}
.kt-tag.ok{background:var(--kt-ok-soft);color:var(--kt-ok)}.kt-tag.bad{background:var(--kt-bad-soft);color:var(--kt-bad)}
.kt-tag.warn{background:var(--kt-warn-soft);color:var(--kt-warn)}.kt-tag.info{background:var(--kt-info-soft);color:var(--kt-info)}
.kt-over{font:600 11px/16px var(--kt-font);text-transform:uppercase;letter-spacing:.08em;color:var(--kt-t3)}
/* every native dropdown: one chevron, with breathing room on the right */
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:36px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a6ad9f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 14px center!important;background-size:12px!important}

/* the free-plan strip inside the app: a quiet neutral bar, so the page's own lime action stays the
   brightest thing on screen (the marketing landing keeps its lime version) */
body.kt-has-rail #hellobar{left:var(--kt-rail-w);background:var(--kt-s2);color:var(--kt-t1);border-top:1px solid var(--kt-line);box-shadow:none}
body.kt-has-rail #hellobar::before{display:none}
body.kt-has-rail #hellobar .hb-badge{background:var(--kt-brand-soft);color:var(--kt-brand-text)}
body.kt-has-rail #hellobar .hb-prices .pp{background:var(--kt-s3);border-color:var(--kt-line);color:var(--kt-t2)}
body.kt-has-rail #hellobar .hb-prices .pp b{color:var(--kt-t1)}
body.kt-has-rail #hellobar .hb-cta{background:var(--kt-brand);color:var(--kt-on-brand)}

/* inside the app shell the shell owns the rail, the account chip and the free-plan strip */
html.kt-frame body.kt-has-rail,html.kt-frame body[data-kt-rail]{padding-left:0!important}
html.kt-frame body[data-kt-rail]::before{display:none!important}
html.kt-frame #acct,html.kt-frame #hellobar{display:none!important}
html.kt-frame{--kt-rail-w:0px}

/* phones, inside the app: no promo strip under the tab bar — the screen is for the conversation */
@media(max-width:760px){body.kt-has-rail #hellobar{display:none!important}}

/* phones: a native tab bar — icon + label, one active style (lime), 16px inputs so iOS never zooms */
@media(max-width:760px){
  .kt-rail{height:calc(60px + env(safe-area-inset-bottom));padding:4px 6px env(safe-area-inset-bottom)}
  .kt-rail a,.kt-rail button{width:auto;min-width:64px;height:52px;border-radius:12px;display:flex;flex-direction:column;gap:3px;justify-content:center}
  .kt-rail svg{width:22px;height:22px}
  .kt-rail .kt-tip{display:block!important;position:static;transform:none!important;opacity:1!important;background:none;border:0;box-shadow:none;
    padding:0;font:600 10.5px/1 var(--kt-font);color:inherit;white-space:nowrap}
  .kt-rail .kt-tip::before{display:none}
  .kt-rail a.on{background:none;color:var(--kt-brand-text)}
  .kt-rail a.on::before{display:none}
  .kt-rail a:hover,.kt-rail button:hover{background:none}
  .kt-rail #ktAcct{min-width:64px;align-items:center;justify-content:center}
  .kt-rail #acct .who img,.kt-rail #acct .av{width:28px;height:28px}
  input,textarea,select{font-size:16px!important}
}