/* InstaMD Companion — patient app.
 *
 * Styling follows the instamd-chi-pin design system (its globals.css): the
 * same design tokens, type scale, light/dark themes, control geometry and
 * accessibility rules. A colour is declared ONCE, in :root below, and every
 * component speaks a token — nothing further down may introduce a literal.
 * Laid out as a regular responsive web page (no phone-frame mock-up). */

/* ============================================================
   DESIGN TOKENS — ported from chi-pin. The only place a colour may be declared.
   ============================================================ */
:root{
  color-scheme:light;

  /* Brand — navy. */
  --color-primary:#06225f;
  --color-primary-hover:#0a3187;
  --color-primary-subtle:#e8eefa;
  --color-primary-border:#cbd9f1;

  /* Accent — cyan. Only ever a GROUND (with --color-on-accent) or an accent on
     the dark navy; never text on a light surface (2.60:1 on white).
     --color-accent-strong is the same hue dropped to clear 3:1 for non-text
     indicators on pale grounds (focus ring, progress fill, tab underline). */
  --color-accent:#14a8fe;
  --color-accent-strong:#0f89d0;
  --color-accent-subtle:#e6f5ff;
  --color-on-accent:#04203f;

  /* AI / physician-tagged surfaces — purple. */
  --color-ai:#5b41e0;
  --color-ai-subtle:#eeebfd;
  --color-ai-border:#d6cefa;
  --color-ai-text:#4230b4;

  /* Surfaces. */
  --color-bg:#f1f4f9;
  --color-surface:#ffffff;
  --color-surface-subtle:#f8fafd;
  --color-overlay:rgba(8,18,36,.42);

  /* Borders — subtle: hairlines inside a container; DEFAULT: the edge of a
     container; strong: boundary of an interactive control (3:1 on surface). */
  --color-border-subtle:#edf1f7;
  --color-border:#dce3ed;
  --color-border-strong:#7f8ca1;

  /* Text. Faint is exempt from AA and restricted to non-informational text. */
  --color-text:#0c1524;
  --color-text-secondary:#33405a;
  --color-text-tertiary:#5c6980;
  --color-text-faint:#93a0b5;
  --color-text-inverse:#ffffff;

  /* Status — each tone names a ground, a hairline and an ink. */
  --color-success:#097a51;
  --color-success-subtle:#e4f6ee;
  --color-success-border:#bfe8d6;
  --color-success-text:#076844;

  --color-warning:#9b5c04;
  --color-warning-subtle:#fdf2e0;
  --color-warning-border:#f3dfbb;
  --color-warning-text:#8a5104;

  --color-error:#c62a20;
  --color-error-subtle:#fcebea;
  --color-error-border:#f6cfcc;
  --color-error-text:#9b2019;

  /* Info — the deep end of the cyan ramp; the token every piece of cyan TEXT
     reaches for (7.17:1 on white). */
  --color-info:#0a5b93;
  --color-info-subtle:#e6f5ff;
  --color-info-border:#bee4fb;

  --color-disabled:#f1f3f7;
  --color-disabled-text:#7f8899;

  /* Focus — accent dropped to clear 3:1 on white; the glow is decorative. */
  --color-focus:#0f89d0;
  --color-focus-glow:rgba(20,168,254,.14);

  /* Radius */
  --radius-sm:6px;
  --radius:8px;
  --radius-lg:14px;
  --radius-full:999px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(12,21,36,.04);
  --shadow:0 1px 2px rgba(12,21,36,.06),0 8px 24px -12px rgba(12,21,36,.18);
  --shadow-lg:0 30px 70px -20px rgba(6,34,95,.5);

  /* Layout */
  --control-h:36px;
  --topbar-height:58px;
  --topbar-bg:rgba(255,255,255,.92);
  --content-w:760px;

  --scrollbar-thumb:#c7d0de;
  --scrollbar-thumb-hover:#a9b5c8;

  /* Type — IBM Plex, loaded in index.html. */
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ----------------------------------------------------------------
     Bridge: the names this app's markup and scripts already speak, each
     pointing at a token above. Redefining the tokens for dark carries every
     one of these with it.
     ---------------------------------------------------------------- */
  --navy:var(--color-primary); --cyan:var(--color-accent); --ink:var(--color-text);
  --ink-2:var(--color-text-secondary); --muted:var(--color-text-tertiary);
  --line:var(--color-border); --line-2:var(--color-border-subtle);
  --bg:var(--color-bg); --card:var(--color-surface); --soft:var(--color-accent-subtle);
  --ok:var(--color-success); --warn:var(--color-warning); --danger:var(--color-error);
  --phys:var(--color-ai); --physsoft:var(--color-ai-subtle);
  --oksoft:var(--color-success-subtle); --warnsoft:var(--color-warning-subtle); --dangersoft:var(--color-error-subtle);
  --r:var(--radius); --font:var(--font-sans); --mono:var(--font-mono);
}

/* Dark — same semantic hierarchy, every pairing measured to the same AA
   targets. Applied by the inline script in index.html before first paint
   (stored choice in localStorage "instamd-theme", else system preference). */
:root[data-theme='dark']{
  color-scheme:dark;

  --color-primary:#79b8ff;
  --color-primary-hover:#9acbff;
  --color-primary-subtle:#0f2742;
  --color-primary-border:#28405f;

  --color-accent:#5cc2ff;
  --color-accent-strong:#5cc2ff;
  --color-accent-subtle:#0c2a41;
  --color-on-accent:#04203f;

  --color-ai:#a99bff;
  --color-ai-subtle:#1e1840;
  --color-ai-border:#342c63;
  --color-ai-text:#a99bff;

  --color-bg:#0b1118;
  --color-surface:#111923;
  --color-surface-subtle:#18222e;
  --color-overlay:rgba(0,0,0,.58);

  --color-border-subtle:#19222d;
  --color-border:#202b38;
  --color-border-strong:#5f6e84;

  --color-text:#d0d8e2;
  --color-text-secondary:#a3afbd;
  --color-text-tertiary:#8391a3;
  --color-text-faint:#5f6e84;
  --color-text-inverse:#07111f;

  --color-success:#62d69a;
  --color-success-subtle:#102c22;
  --color-success-border:#1e4a38;
  --color-success-text:#62d69a;

  --color-warning:#f0b44d;
  --color-warning-subtle:#332611;
  --color-warning-border:#59421d;
  --color-warning-text:#f0b44d;

  --color-error:#ff8178;
  --color-error-subtle:#371b1d;
  --color-error-border:#5c2c2f;
  --color-error-text:#ff8178;

  --color-info:#7db9ff;
  --color-info-subtle:#142942;
  --color-info-border:#284a6b;

  --color-disabled:#202a36;
  --color-disabled-text:#6f7e90;

  --color-focus:#5cc2ff;
  --color-focus-glow:rgba(92,194,255,.18);

  --shadow-sm:0 1px 2px rgba(0,0,0,.28);
  --shadow:0 1px 2px rgba(0,0,0,.28),0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.6);

  --topbar-bg:rgba(17,25,35,.92);
  --scrollbar-thumb:#2b3a4c;
  --scrollbar-thumb-hover:#3b4d63;
}

/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%;margin:0}
body{font-family:var(--font);font-size:14px;line-height:1.45;color:var(--ink);background:var(--bg);
 -webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
a{color:var(--color-primary)}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.012em;font-weight:600}
h1{font-size:22px;line-height:28px} h2{font-size:15px;line-height:21px} h3{font-size:15px}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:13px;line-height:19px}
.mono,code,kbd{font-family:var(--mono);font-variant-numeric:tabular-nums}
::placeholder{color:var(--color-text-tertiary);opacity:1}
/* Numeric data is scanned, not read. */
.tabular,input[type=number],.otp input{font-variant-numeric:tabular-nums}

/* A visible focus state, always: 2px ring held 2px off the control. */
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:4px}
@media (forced-colors:active){:focus-visible{outline-color:Highlight}}

/* Skip link — hidden until focused. */
.skip{position:absolute;left:-9999px;top:12px;z-index:70;background:var(--color-primary);
 color:var(--color-text-inverse);padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;text-decoration:none}
.skip:focus{left:12px}

.scrollbar-thin,.phone .body{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}
.phone .body::-webkit-scrollbar{width:8px;height:8px}
.phone .body::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--radius-full)}
.phone .body::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}
.phone .body::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   CONTROLS — chi-pin geometry: 13px/500, radius 8, 36px standing height.
   ============================================================ */
/* Inputs: 13px, 8px 10px, 1px border; focus = accent border + 3px glow. */
input,select,textarea{font:inherit;font-size:13px;line-height:20px;color:var(--ink);background:var(--card);
 border:1px solid var(--line);border-radius:var(--radius);padding:7px 10px;width:100%;min-height:var(--control-h)}
input:hover,select:hover,textarea:hover{border-color:var(--color-border-strong)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;
 border-color:var(--color-focus);box-shadow:0 0 0 3px var(--color-focus-glow)}
@media (forced-colors:active){
 input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid Highlight;outline-offset:1px}
}
input:disabled,select:disabled{background:var(--color-disabled);color:var(--color-disabled-text)}
label.f{display:block;font-size:11.5px;line-height:16px;font-weight:600;letter-spacing:.01em;color:var(--ink-2);margin-bottom:5px}
.field{margin-bottom:12px}

/* Buttons. `.btn` alone is the primary action (this app's markup convention);
   `.sec` is chi-pin's default outlined button, `.ghost`, `.phys` = ai, `.danger`. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:500;
 padding:7px 12px;min-height:var(--control-h);border-radius:var(--radius);white-space:nowrap;
 border:1px solid var(--color-primary);background:var(--color-primary);color:var(--color-text-inverse);
 transition:background-color .1s ease,border-color .1s ease,color .1s ease}
.btn:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.btn.sec{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn.sec:hover:not(:disabled){background:var(--line-2);border-color:var(--color-border-strong)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--color-primary)}
.btn.ghost:hover:not(:disabled){background:var(--line-2);border-color:transparent}
.btn.phys{background:var(--color-ai);border-color:var(--color-ai);color:var(--color-text-inverse)}
.btn.phys:hover:not(:disabled){filter:brightness(1.08)}
.btn.danger{background:var(--color-error);border-color:var(--color-error);color:var(--color-text-inverse)}
.btn.sm{padding:4px 9px;font-size:12px;min-height:30px}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}

/* Icon button (theme toggle) — chi-pin IconButton, outlined, sm. */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;
 border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);color:var(--ink-2);
 box-shadow:var(--shadow-sm);transition:border-color .1s ease,background-color .1s ease,color .1s ease}
.icon-btn:hover{border-color:var(--color-primary);background:var(--color-primary-subtle);color:var(--ink)}
.icon-btn svg{width:16px;height:16px}
.icon-btn .i-sun{display:none}
:root[data-theme='dark'] .icon-btn .i-sun{display:block}
:root[data-theme='dark'] .icon-btn .i-moon{display:none}

/* Toggle chips (`.pill`) — chi-pin .chip: 12px/500, 3px 10px, round; pressed = navy. */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:5px 10px;
 min-height:30px;border-radius:var(--radius-full);border:1px solid var(--line);background:var(--card);color:var(--ink-2);
 transition:border-color .1s ease,background-color .1s ease}
.pill:hover{border-color:var(--color-border-strong)}
.pill.on{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}

/* Status pills (`.tag`) — chi-pin .pill: 11.5px/500, 2px 9px, ground + hairline + ink. */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;line-height:16px;font-weight:500;padding:2px 9px;
 border-radius:var(--radius-full);border:1px solid var(--color-primary-border);background:var(--color-primary-subtle);
 color:var(--color-primary);white-space:nowrap}
.tag.ok{background:var(--color-success-subtle);border-color:var(--color-success-border);color:var(--color-success-text)}
.tag.warn{background:var(--color-warning-subtle);border-color:var(--color-warning-border);color:var(--color-warning-text)}
.tag.danger{background:var(--color-error-subtle);border-color:var(--color-error-border);color:var(--color-error-text)}
.tag.info{background:var(--color-info-subtle);border-color:var(--color-info-border);color:var(--color-info)}
.tag.phys{background:var(--color-ai-subtle);border-color:var(--color-ai-border);color:var(--color-ai-text)}

.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* A field inside a row (Ask: input + Send) shrinks with the row instead of forcing a scroll. */
.row>input,.row>select{flex:1 1 160px;min-width:0;width:auto}
.stack{display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-sm)}
.bar{height:8px;background:var(--line);border-radius:var(--radius-full);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--color-accent-strong)}
.hidden{display:none!important}

/* ============================================================
   SHELL — a full-width web page: topbar, tab nav, centred content column.
   ============================================================ */
body{display:flex;justify-content:center;padding:0;min-height:100vh}
.phone{width:100%;height:100vh;height:100dvh;background:var(--bg);overflow:hidden;display:flex;flex-direction:column;position:relative}
/* Topbar — a three-column grid (spacer · brand · actions). The brand is placed
   in the middle track, so it sits on the page's centre line whatever the
   actions on the right take up; both sides only start to differ once the
   actions no longer fit their half, and the brand ellipsises before anything
   overlaps. */
.phone .top{order:0;min-height:var(--topbar-height);padding:10px max(18px,calc((100% - var(--content-w))/2));
 padding-top:calc(10px + env(safe-area-inset-top,0px));
 border-bottom:1px solid var(--line);background:var(--topbar-bg);
 backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
 display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:12px}
.phone .top .top-brand{grid-column:2;min-width:0;text-align:center}
.phone .top .brand{font-size:15px;font-weight:600;letter-spacing:-.012em;color:var(--ink);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone .top .brand-sub{line-height:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone .top .top-acts{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px}
/* Tabs — chi-pin .tab-btn: muted 13px/500, active = navy text + accent underline. */
.phone .tabs{order:1;display:flex;gap:4px;border-bottom:1px solid var(--line);background:var(--card);
 padding:0 max(18px,calc((100% - var(--content-w))/2));overflow-x:auto;scrollbar-width:none}
.phone .tabs::-webkit-scrollbar{display:none}
.phone .tabs button{flex-shrink:0;border:0;background:none;padding:10px 12px;color:var(--muted);font-size:13px;font-weight:500;
 border-bottom:2px solid transparent;border-radius:0;white-space:nowrap;transition:color .15s,border-color .15s}
.phone .tabs button:hover{color:var(--ink)}
.phone .tabs button.on{color:var(--color-primary);border-bottom-color:var(--color-accent-strong);font-weight:600}
.phone .tabs button:focus-visible{outline-offset:-2px}
.phone .body{order:2;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
 padding:20px 18px calc(40px + env(safe-area-inset-bottom,0px));background:var(--bg)}
.phone .body>*{width:100%;max-width:var(--content-w);margin-left:auto;margin-right:auto}
#p-verify>.stack{max-width:460px;margin:0 auto}

/* ---- Breakpoints: laptop > 900 · tablet 641–900 · phone <= 640 · small phone <= 440 ---- */
@media (max-width:900px){
  .phone .top,.phone .tabs{padding-left:16px;padding-right:16px}
  .phone .body{padding:16px 16px calc(32px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px){
  .phone .top{padding-left:12px;padding-right:12px;column-gap:8px}
  .phone .tabs{padding:0 12px}
  .phone .body{padding:14px 12px calc(28px + env(safe-area-inset-bottom,0px))}
  .phone .top .demo-reset{display:none}
  /* iOS Safari zooms the page into any field under 16px; keep the layout put. */
  input,select,textarea{font-size:16px}
}
/* The quota also shows on Home and Ask, so the topbar drops it on narrow phones
   to keep the brand on the centre line. */
@media (max-width:560px){.phone .top .tag{display:none}}
@media (max-width:440px){
  .phone .tabs button{flex:1;padding:12px 4px;font-size:12px;text-align:center}
}
@media (max-width:360px){h1{font-size:20px;line-height:26px}}
/* Fingers, not pointers: 44px controls and larger tap targets on touch devices. */
@media (pointer:coarse){
  :root{--control-h:44px}
  .btn.sm{min-height:36px}
  .pill{min-height:36px;padding:7px 12px}
  .icon-btn{width:40px;height:40px}
  .phone .tabs button{padding:12px 10px}
}
.ptab{display:none} .ptab.on{display:block}

/* ============================================================
   SCREENS
   ============================================================ */
/* chat */
.chat{display:flex;flex-direction:column;gap:8px}
.msg{max-width:88%;padding:10px 12px;border-radius:var(--radius-lg);font-size:13px;line-height:19px}
.msg.me{align-self:flex-end;background:var(--color-primary);color:var(--color-text-inverse);border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px;box-shadow:var(--shadow-sm)}
.msg .meta{font-size:11px;color:var(--muted);margin-top:6px}
.msg.me .meta{color:var(--color-text-inverse);opacity:.78}

/* chart timeline */
.tl{border-left:2px solid var(--line);margin-left:8px;padding-left:14px;display:flex;flex-direction:column;gap:10px}
.tl .it{position:relative;cursor:pointer}
.tl .it::before{content:"";position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--color-accent-strong)}
.tl .it.pending::before{background:var(--color-warning)}
.tl .it.phys::before{background:var(--color-ai)}

/* verify + intake */
.otp{display:flex;gap:6px} .otp input{flex:1 1 0;min-width:0;width:auto;text-align:center;font-size:20px;padding:8px 0;min-height:44px}
.upl{border:1.5px dashed var(--color-border-strong);border-radius:var(--radius);padding:12px;text-align:center;cursor:pointer;
 background:var(--card);font-size:13px;color:var(--ink-2);transition:border-color .1s ease,background-color .1s ease}
.upl:hover{border-color:var(--color-primary);background:var(--color-primary-subtle)}
.upl.done{border-style:solid;border-color:var(--color-success-border);background:var(--color-success-subtle);color:var(--color-success-text)}
.q{margin-bottom:12px}
/* Context eyebrow — chi-pin .eyebrow: info ink, never bare cyan on white. */
.q .ctx{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--color-info);
 background:var(--color-info-subtle);border:1px solid var(--color-info-border);display:inline-block;padding:2px 8px;
 border-radius:var(--radius-sm);margin-bottom:5px}

/* upgrade dialog — chi-pin .modal geometry. */
.sheet{position:fixed;inset:0;background:var(--color-overlay);display:flex;align-items:center;justify-content:center;
 padding:20px;z-index:60;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.sheet>div{background:var(--card);border:1px solid var(--line);width:100%;max-width:440px;max-height:88vh;overflow:auto;
 border-radius:16px;padding:20px;box-shadow:var(--shadow-lg)}

/* toast — chi-pin: bottom-right, ink ground, accent dot. */
.toast{position:fixed;bottom:18px;right:18px;transform:translateY(8px);background:var(--color-text);color:var(--color-surface);
 font-size:13px;padding:11px 14px;border-radius:10px;opacity:0;transition:.18s;pointer-events:none;max-width:400px;z-index:300;
 box-shadow:var(--shadow);display:flex;gap:9px;align-items:center}
.toast.on{opacity:1;transform:translateY(0)}
.toast::before{content:"";width:7px;height:7px;border-radius:var(--radius-full);background:var(--color-accent);flex:none}
@media (max-width:640px){.toast{left:18px;right:18px;max-width:none}}

/* local demo only — sits in the topbar actions; removed in live mode by api.js */
.demo-reset{border:1px solid var(--line);background:var(--card);color:var(--muted);
 border-radius:var(--radius-full);padding:5px 10px;font-size:12px;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}