/* Oski app. Tokens are the fleet app's measured values (frontend/index.html :root and its dark blocks), so the two
   apps read as one product; the mockup (oski-app-20261027/mockup) uses the same palette. Light is the bare rule, dark
   is set twice: by the OS when the person chose System, and by the selector when they chose Dark. */
:root{
  --ground:#F7F7F5; --surface:#FFFFFF; --surface-2:#F3F3F0; --ink:#171817; --ink-2:#54554F; --ink-3:#6B6C67;
  --sep:rgba(0,0,0,.07); --fill:rgba(0,0,0,.04); --accent:#c67139; --accent-btn:#8c491a; --on-accent:#fff6ec;
  --accent-soft:rgba(198,113,57,.14); --sage:#728157; --status-warn:#8a5a00; --alarm:#b3261e; --ok-text:#1e7e34; --shadow:0 1px 2px rgba(20,20,18,.08);
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,system-ui,sans-serif;
  --serif:ui-serif,'New York',Georgia,serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#151718; --surface:#151718; --surface-2:#1A1C1D; --ink:#F5F3EE; --ink-2:#A7A49E; --ink-3:#8A8882;
    --sep:rgba(255,255,255,.07); --fill:rgba(255,255,255,.05); --accent:#d67f48; --accent-btn:#d67f48;
    --on-accent:#2a1508; --accent-soft:rgba(246,160,107,.14); --sage:#8fa073; --status-warn:#ff9f0a; --alarm:#ff6b61; --ok-text:#30d158;
    --shadow:0 3px 10px rgba(0,0,0,.35); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#151718; --surface:#151718; --surface-2:#1A1C1D; --ink:#F5F3EE; --ink-2:#A7A49E; --ink-3:#8A8882;
  --sep:rgba(255,255,255,.07); --fill:rgba(255,255,255,.05); --accent:#d67f48; --accent-btn:#d67f48;
  --on-accent:#2a1508; --accent-soft:rgba(246,160,107,.14); --sage:#8fa073; --status-warn:#ff9f0a; --alarm:#ff6b61; --ok-text:#30d158;
  --shadow:0 3px 10px rgba(0,0,0,.35); color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--ink);font:400 15px/1.45 var(--sans);-webkit-text-size-adjust:100%}
a{color:inherit;text-decoration:none}
#app{display:flex;min-height:100vh;min-height:100dvh}

/* side menu */
#nav{width:260px;flex-shrink:0;padding:20px 14px;display:flex;flex-direction:column;gap:18px;background:var(--surface-2);
  border-right:1px solid var(--sep);position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px}
.mark{width:32px;height:32px;border-radius:10px;background:var(--accent-btn);color:var(--on-accent);display:grid;
  place-items:center;font:600 17px/1 var(--serif)}
.brand-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.brand-name{font:600 18px/1.1 var(--serif)}
.status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ink-3);flex-shrink:0}
.primary{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:12px;
  background:var(--accent-btn);color:var(--on-accent);font-weight:600}
.nav-pages{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:10px;color:var(--ink-2)}
.nav-item:hover{color:var(--ink);background:var(--fill)}
.nav-item[aria-current="page"]{background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font-weight:600}
.nav-item svg,.primary svg{flex-shrink:0}
.nav-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.pref{display:flex;align-items:center;gap:8px;padding:0 12px;font-size:13px;color:var(--ink-2)}
.pref select{margin-left:auto;min-height:32px;border-radius:8px;border:1px solid var(--sep);background:var(--surface);
  color:var(--ink);font:inherit;padding:0 6px}

/* page */
#main{flex:1;min-width:0;display:flex;flex-direction:column}
.bar{display:flex;align-items:center;gap:12px;padding:20px 28px 12px;position:sticky;top:0;background:var(--ground);z-index:2}
.icon-btn{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--sep);background:var(--surface);
  color:var(--ink);place-items:center;cursor:pointer;flex-shrink:0}
.titles{min-width:0}
#page-title{margin:0;font:600 26px/1.15 var(--serif)}
#page-subtitle{margin:4px 0 0;color:var(--ink-2);font-size:14px}
#page-subtitle:empty{display:none}
#page{padding:12px 28px 40px;max-width:760px}

/* the honest state: shown wherever a page has no live source */
.state{border:1px dashed var(--sep);border-radius:14px;padding:20px;background:var(--surface)}
.state h2{margin:0 0 6px;font-size:16px}
.state p{margin:0;color:var(--ink-2)}
.state .tag{display:inline-block;margin-bottom:10px;padding:2px 8px;border-radius:8px;background:var(--accent-soft);
  color:var(--status-warn);font-size:12px;font-weight:600}

#scrim{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:9}

@media (max-width:760px){
  #nav{position:fixed;left:0;top:0;bottom:0;z-index:10;transform:translateX(-100%);transition:transform .2s ease;
    box-shadow:none;width:min(300px,86vw)}
  #app.nav-open #nav{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)}
  .icon-btn{display:grid}
  .bar{padding:12px 16px 8px}
  #page{padding:8px 16px 32px}
  #page-title{font-size:22px}
}
@media (prefers-reduced-motion:reduce){#nav{transition:none}}
.ic{display:inline-flex;align-items:center}

/* sign-in (V2), after the approved Login mockup */
#auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.auth-top{display:flex;justify-content:flex-end;padding:12px 16px}
.auth-top .pref{padding:0}
.auth-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:16px 16px 48px}
.hero{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.hero h1{margin:0;font:600 34px/1.15 var(--serif);text-wrap:balance;max-width:560px}
.hero p{margin:0;max-width:420px;font-size:16px;color:var(--ink-2)}
.mark.big{width:52px;height:52px;border-radius:16px;font-size:28px}
.card{width:100%;max-width:400px;padding:28px;display:flex;flex-direction:column;gap:14px;background:var(--surface);
  border:1px solid var(--sep);border-radius:20px;box-shadow:0 1px 2px rgba(20,20,18,.06),0 8px 24px rgba(20,20,18,.08)}
.card h2{margin:0;font:600 22px/1.2 var(--serif)}
.card p{margin:0}
.email-form,.google{display:flex;flex-direction:column;gap:14px;margin:0}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.field input{min-height:46px;padding:0 14px;border-radius:12px;border:1px solid var(--sep);background:var(--surface);
  color:var(--ink);font:400 16px/1 var(--sans)}
.field input:focus-visible,.btn-primary:focus-visible,.btn-secondary:focus-visible,.link-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary,.btn-secondary{min-height:48px;border-radius:12px;font:600 16px/1 var(--sans);cursor:pointer;display:flex;
  align-items:center;justify-content:center;gap:10px}
.btn-primary{border:0;background:var(--accent-btn);color:var(--on-accent)}
.btn-secondary{border:1px solid var(--sep);background:var(--surface);color:var(--ink)}
.btn-primary:disabled,.btn-secondary:disabled{opacity:.5;cursor:not-allowed}
.divider{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3)}
.divider span{flex:1;height:1px;background:var(--sep)}
.divider em{font-style:normal}
.note{padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:13px;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.small{font-size:13px}
.form-err{color:var(--alarm);font-size:14px;font-weight:600}
.card-end{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.link-btn{border:0;background:none;padding:0;color:var(--accent-btn);font:inherit;cursor:pointer;text-decoration:underline;
  min-height:44px;text-align:left}
.ts{min-height:65px}
#sign-out{padding:0 12px;font-size:13px;color:var(--ink-2)}
@media (max-width:760px){.hero h1{font-size:28px}.card{padding:20px}}

/* Session page (V3), after the approved Main mockup */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#main{height:100vh;height:100dvh}
#page.chat{max-width:none;flex:1;min-height:0;display:flex;flex-direction:column;padding:0}
.chat-pill{display:flex;justify-content:flex-end;padding:0 28px 6px}
.pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:15px;background:var(--surface-2);
  font-size:13px;color:var(--ink-2)}
.pill[data-state="online_ready"] .dot,.pill[data-state="working"] .dot{background:var(--sage)}
.pill[data-state="unreachable"] .dot{background:var(--alarm)}
.pill[data-state="working"] .dot{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.conv{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:22px;padding:20px 24px 24px;width:100%;
  max-width:820px;margin:0 auto}
.msg{font-size:17px;line-height:1.47;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.user{align-self:flex-end;max-width:75%;background:var(--fill);background-color:color-mix(in srgb,var(--ink) 7%,var(--surface));
  border-radius:20px;padding:10px 18px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.msg.agent{max-width:680px}
.msg.activity{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}
.pending{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.send-state{font-size:12px;color:var(--ink-3)}
.pending[data-state="rejected"] .send-state{color:var(--alarm);font-weight:600}
.chat-empty{margin:auto 0;text-align:center;color:var(--ink-2)}
.chat-empty h2{margin:0 0 6px;font:600 22px/1.2 var(--serif);color:var(--ink)}
.composer{position:sticky;bottom:0;padding:0 16px 12px;background:linear-gradient(180deg,transparent 0%,var(--ground) 30%)}
.composer-bar{max-width:780px;margin:0 auto;display:flex;align-items:flex-end;gap:6px;min-height:52px;padding:6px 8px 6px 6px;
  border-radius:26px;background:var(--surface);border:1px solid var(--sep);box-shadow:0 1px 2px rgba(20,20,18,.06),0 8px 24px rgba(20,20,18,.10)}
.composer textarea{flex:1;min-width:0;min-height:40px;max-height:200px;resize:none;border:0;outline:none;background:transparent;
  color:var(--ink);font:400 17px/1.4 var(--sans);padding:9px 4px}
.cbtn{width:40px;height:40px;flex-shrink:0;border-radius:50%;border:0;background:transparent;color:var(--ink-2);display:grid;
  place-items:center;cursor:pointer}
.cbtn:disabled{opacity:.45;cursor:not-allowed}
.cbtn.send{width:36px;height:36px;margin:2px;background:var(--accent-btn);color:var(--on-accent)}
.composer .form-err{max-width:780px;margin:6px auto 0}
.disclaimer{margin:8px 0 0;text-align:center;font-size:12px;color:var(--ink-3)}
@media (max-width:760px){.conv{padding:12px 16px 16px}.chat-pill{padding:0 16px 4px}.msg{font-size:16px}.msg.user{max-width:85%}
  .composer{padding:0 10px 10px}}
.chat-loading{margin:auto 0;text-align:center;color:var(--ink-3)}
.status[data-state="online_ready"] .dot,.status[data-state="working"] .dot{background:var(--sage)}
.status[data-state="unreachable"] .dot{background:var(--alarm)}

/* V4 pages */
.rows{display:flex;flex-direction:column;border:1px solid var(--sep);border-radius:14px;background:var(--surface);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--sep);flex-wrap:wrap}
.row:first-child{border-top:0}
.row-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px}
.tag{display:inline-block;padding:2px 8px;border-radius:8px;background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:600}
.small-btn{min-height:40px;padding:0 14px;font-size:14px}
#page > .muted.small{margin-top:12px}
.tabs{display:flex;gap:4px;padding:3px;border-radius:12px;background:var(--surface-2);margin-bottom:18px;overflow-x:auto}
.tab{flex:1;min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);font:600 14px/1 var(--sans);
  cursor:pointer;white-space:nowrap;padding:0 12px}
.tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.tab-body{display:flex;flex-direction:column;gap:14px}
.card-form{display:flex;flex-direction:column;gap:14px;max-width:420px}
.card-form select{min-height:46px;border-radius:12px;border:1px solid var(--sep);background:var(--surface);color:var(--ink);font:400 16px var(--sans);padding:0 10px}
.kv{display:flex;flex-direction:column;gap:4px}
.stack{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
h2.sec{margin:8px 0 0;font:600 18px/1.2 var(--serif)}
.danger{margin-top:12px;padding:16px;border:1px solid var(--sep);border-radius:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.form-msg{margin:0;font-size:14px;color:var(--ink-2)}
.form-msg:empty{display:none}
@media (max-width:760px){.tabs{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.tab{white-space:normal;line-height:1.2;padding:6px 8px}}

/* Email page (V5), after the approved Email mockup */
#page:has(.mail-grid){max-width:1100px}
.mail-grid{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;margin-top:12px}
.mail-list{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--sep);border-radius:16px;overflow:hidden}
.mail-row{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border:0;border-top:1px solid var(--sep);
  background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;min-height:44px}
.mail-row:first-child{border-top:0}
.mail-row[aria-current="true"]{background:var(--surface-2)}
.mail-top{display:flex;gap:8px;width:100%}
.mail-top .small{margin-left:auto}
.badge{font-size:12px;font-weight:600;color:var(--accent-btn)}
.mail-pane{flex:2 1 420px;min-width:0;display:flex;flex-direction:column;gap:16px;padding:22px;background:var(--surface);border:1px solid var(--sep);border-radius:16px}
.mail-pane:empty{display:none}
.mail-head{display:flex;flex-direction:column;gap:4px}
.mail-head h2{margin:0;font-size:20px}
.mail-text{margin:0;font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.draft{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;background:var(--ground);border:1px dashed rgba(140,73,26,.35)}
.draft-h{font-size:13px;font-weight:600;color:var(--accent-btn)}
.draft-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.draft-edit{width:100%;border-radius:12px;border:1px solid var(--sep);background:var(--surface);color:var(--ink);font:400 15px/1.5 var(--sans);padding:10px}
.acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ok-msg{margin:0;color:var(--ok-text);font-weight:600}
.pad{padding:16px;margin:0}
@media (max-width:760px){.mail-pane{padding:16px}}