/* ============================================================
   KINDRED - monochrome, pro.  Pure black / pure white + one accent
   that is itself monochrome (white on black, black on white).
   ============================================================ */
:root {
  /* motion (researched): decelerate in, standard move, gentle spring */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --t-micro: 0.14s;
  --t-base: 0.24s;
  --t-modal: 0.4s;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  --maxw: 720px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;
}

/* ---------------- DARK (default) ---------------- */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-elev: #0c0c0d;
  --surface: rgba(255,255,255,0.065);
  --surface-2: rgba(255,255,255,0.045);
  --surface-press: rgba(255,255,255,0.12);
  --field: #161618;
  --field-focus: #1c1c1f;
  --hairline: rgba(255,255,255,0.09);
  --hairline-str: rgba(255,255,255,0.16);
  --text: #ffffff;
  --text-2: #9b9ba3;
  --text-3: #636369;
  --accent: #ffffff;
  --accent-ink: #000000;
  --user-pill: rgba(255,255,255,0.09);
  --user-ink: #ffffff;
  --danger: #ff5a68;
  --good: #35d07f;
  --shadow: 0 16px 50px -16px rgba(0,0,0,0.85);
  --shadow-sm: 0 6px 20px -10px rgba(0,0,0,0.7);
  --blur: 24px;
}

/* ---------------- LIGHT ---------------- */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --surface: rgba(0,0,0,0.045);
  --surface-2: rgba(0,0,0,0.03);
  --surface-press: rgba(0,0,0,0.09);
  --field: #f1f1f3;
  --field-focus: #ececef;
  --hairline: rgba(0,0,0,0.09);
  --hairline-str: rgba(0,0,0,0.14);
  --text: #0a0a0b;
  --text-2: #6a6a73;
  --text-3: #9a9aa2;
  --accent: #0a0a0b;
  --accent-ink: #ffffff;
  --user-pill: rgba(0,0,0,0.065);
  --user-ink: #0a0a0b;
  --danger: #e5384a;
  --good: #16a34a;
  --shadow: 0 16px 50px -16px rgba(0,0,0,0.22);
  --shadow-sm: 0 6px 20px -12px rgba(0,0,0,0.18);
  --blur: 22px;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    color-scheme: light;
    --bg:#fff; --bg-elev:#fff; --surface:rgba(0,0,0,0.045); --surface-2:rgba(0,0,0,0.03); --surface-press:rgba(0,0,0,0.09);
    --field:#f1f1f3; --field-focus:#ececef; --hairline:rgba(0,0,0,0.09); --hairline-str:rgba(0,0,0,0.14);
    --text:#0a0a0b; --text-2:#6a6a73; --text-3:#9a9aa2; --accent:#0a0a0b; --accent-ink:#fff;
    --user-pill:rgba(0,0,0,0.065); --user-ink:#0a0a0b; --danger:#e5384a; --good:#16a34a;
    --shadow:0 16px 50px -16px rgba(0,0,0,0.22); --shadow-sm:0 6px 20px -12px rgba(0,0,0,0.18);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overscroll-behavior-y: none; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  line-height: 1.5; letter-spacing: -0.011em; user-select: none;
  transition: background var(--t-base) var(--ease-std), color var(--t-base) var(--ease-std);
}
input, textarea { user-select: text; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
::selection { background: color-mix(in srgb, var(--text) 22%, transparent); }
.icon { width: 22px; height: 22px; display: block; }

/* ============================================================ APP + CHAT */
.app { height: 100%; }
.chat { display: flex; flex-direction: column; height: 100dvh; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px;
  padding: calc(var(--safe-t) + 7px) 12px 7px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(var(--blur)); backdrop-filter: saturate(1.4) blur(var(--blur));
}
.topbar::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--hairline); opacity:0; transition: opacity var(--t-base); }
.topbar.scrolled::after { opacity: 1; }
.tb-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: var(--text); transition: background var(--t-micro), transform var(--t-micro) var(--ease-spring); }
.tb-btn:active { transform: scale(.86); background: var(--surface); }
.tb-model { justify-self: center; display: inline-flex; align-items: center; gap: 5px; max-width: 80%; padding: 7px 12px; border-radius: var(--r-pill);
  transition: background var(--t-micro), transform var(--t-micro) var(--ease-spring); }
.tb-model:active { transform: scale(.95); background: var(--surface); }
.tb-model__name { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-model__chev { width: 16px; height: 16px; color: var(--text-3); flex: none; transition: opacity var(--t-micro); }
.tb-model.nochev .tb-model__chev { opacity: 0; }

/* scroll + thread */
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.scroll::-webkit-scrollbar { width: 0; }
.thread { max-width: var(--maxw); margin: 0 auto; padding: 14px 18px 8px; display: flex; flex-direction: column; min-height: 100%; }

/* ---------------- EMPTY / HERO ---------------- */
.hero { margin: auto; text-align: center; padding: 8vh 6px 10vh; display: flex; flex-direction: column; align-items: center; animation: rise .6s var(--ease-out) both; }
.hero__orb { width: 72px; height: 72px; border-radius: 50%; margin-bottom: 22px; position: relative;
  background: radial-gradient(circle at 36% 30%, #ffffff 0%, #d7d7dd 32%, #9a9aa2 68%, #6c6c73 100%);
  box-shadow: 0 0 40px -6px color-mix(in srgb, var(--text) 30%, transparent), inset -6px -8px 14px rgba(0,0,0,0.28), inset 4px 5px 10px rgba(255,255,255,0.5);
  animation: floaty 6s var(--ease-std) infinite alternate; }
:root[data-theme="light"] .hero__orb { background: radial-gradient(circle at 36% 30%, #ffffff 0%, #dedee4 30%, #8f8f98 72%, #5c5c64 100%); box-shadow: 0 0 36px -8px rgba(0,0,0,0.25), inset -6px -8px 14px rgba(0,0,0,0.22), inset 4px 5px 10px rgba(255,255,255,0.9); }
@keyframes floaty { to { transform: translateY(-7px); } }
.hero__title { font-size: 29px; font-weight: 680; letter-spacing: -0.035em; margin: 0 0 8px; }
.hero__sub { color: var(--text-2); max-width: 320px; margin: 0 0 26px; font-size: 16px; line-height: 1.45; }
.hero__mem { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 20px; padding: 6px 13px; border-radius: var(--r-pill); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 550; animation: rise .5s var(--ease-out) both; }
.hero__mem .d { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }

.suggest { width: 100%; max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.cta { padding: 15px 28px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 16px; font-weight: 600;
  transition: transform var(--t-micro) var(--ease-spring), opacity var(--t-micro); box-shadow: var(--shadow-sm); }
.cta:active { transform: scale(.95); }

/* ---------------- MESSAGES ---------------- */
.msg { display: flex; flex-direction: column; animation: msgin .34s var(--ease-out) both; }
.msg + .msg { margin-top: 22px; }
.msg--ai + .msg--user, .msg--user + .msg--ai { margin-top: 26px; }
@keyframes msgin { from { opacity: 0; transform: translateY(9px); } }

/* user: subtle pill, right */
.msg--user { align-items: flex-end; }
.msg--user .pill { max-width: 84%; background: var(--user-pill); color: var(--user-ink); padding: 11px 16px; border-radius: 21px;
  font-size: 16.5px; line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
.msg--user .pill:empty { display: none; }
.pill__imgs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-bottom: 8px; }
.pill__imgs:last-child { margin-bottom: 0; }
.pill__img { width: 150px; max-width: 60vw; border-radius: 14px; display: block; }
.pill__files { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; margin-bottom: 8px; }
.pill__files:last-child { margin-bottom: 0; }
.pill__file { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 14px; background: var(--user-pill); font-size: 14px; max-width: 70vw; }
.pill__file svg { width: 17px; height: 17px; color: var(--text-2); flex: none; }
.pill__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* assistant: NO bubble, full-width confident text */
.msg--ai { align-items: stretch; }
.ai-text { font-size: 16.5px; line-height: 1.62; color: var(--text); word-wrap: break-word; overflow-wrap: anywhere; }
.ai-text > *:first-child { margin-top: 0; } .ai-text > *:last-child { margin-bottom: 0; }
.ai-text p { margin: 0 0 11px; }
.ai-text strong { font-weight: 680; } .ai-text em { font-style: italic; }
.ai-text code { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: .87em; background: var(--surface); padding: 2px 6px; border-radius: 6px; }
.ai-text pre { background: var(--surface); padding: 14px 16px; border-radius: 13px; overflow-x: auto; margin: 11px 0; border: 1px solid var(--hairline); }
.ai-text pre::-webkit-scrollbar { height: 0; }
.ai-text pre code { background: none; padding: 0; font-size: 13.5px; line-height: 1.55; }
.ai-text ul, .ai-text ol { margin: 10px 0; padding-left: 22px; } .ai-text li { margin: 5px 0; }
.ai-text a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-3); }
.ai-text h1,.ai-text h2,.ai-text h3 { font-weight: 680; letter-spacing: -0.02em; margin: 16px 0 8px; line-height: 1.3; }
.ai-text h1 { font-size: 1.3em; } .ai-text h2 { font-size: 1.18em; } .ai-text h3 { font-size: 1.06em; }

/* streaming caret */
.caret { display: inline-block; width: 9px; height: 18px; vertical-align: -3px; margin-left: 2px; border-radius: 2px; background: var(--text);
  animation: caret 1.05s var(--ease-std) infinite; }
@keyframes caret { 0%,45%{opacity:1} 55%,100%{opacity:0} }

/* thinking indicator: breathing pearl + shimmering timer */
.thinking { display: inline-flex; align-items: center; gap: 10px; height: 28px; }
.thinking__orb { width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 36% 30%, #ffffff 0%, #cbcbd2 52%, #87878f 100%);
  box-shadow: 0 0 16px -2px color-mix(in srgb, var(--text) 42%, transparent);
  animation: breathe 1.35s var(--ease-std) infinite; }
@keyframes breathe { 0%,100% { transform: scale(.82); opacity: .72; } 50% { transform: scale(1); opacity: 1; } }
.thinking__t { font-size: 15px; font-variant-numeric: tabular-nums;
  background: linear-gradient(90deg, var(--text-3) 32%, var(--text) 50%, var(--text-3) 68%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 1.7s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.act-time { margin-left: auto; align-self: center; padding-right: 5px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* action row under assistant */
.ai-actions { display: flex; gap: 2px; margin-top: 9px; opacity: 0; transform: translateY(-3px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.ai-actions.show { opacity: 1; transform: none; }
.act { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--text-3);
  transition: background var(--t-micro), color var(--t-micro), transform var(--t-micro) var(--ease-spring); }
.act:hover { color: var(--text-2); } .act:active { transform: scale(.85); background: var(--surface); }
.act.done { color: var(--good); }
.act .icon { width: 18px; height: 18px; }

/* scroll-to-bottom button */
.tobottom { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 86px); z-index: 19;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-elev); border: 1px solid var(--hairline-str); color: var(--text); box-shadow: var(--shadow-sm);
  transform: translateX(-50%) scale(.6); opacity: 0; pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring); }
.tobottom.show { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: auto; }
.tobottom:active { transform: translateX(-50%) scale(.88); }
.tobottom svg { width: 20px; height: 20px; }

/* ============================================================ COMPOSER */
.composer { position: sticky; bottom: 0; z-index: 20; padding: 6px 14px calc(var(--safe-b) + 11px);
  background: linear-gradient(180deg, transparent, var(--bg) 46%); }
.composer__inner { max-width: var(--maxw); margin: 0 auto; position: relative; }
.composer__field { display: flex; flex-direction: column; gap: 6px; padding: 6px;
  background: var(--field); border: 1px solid var(--hairline); border-radius: 26px;
  transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); }
.composer__field:focus-within { background: var(--field-focus); border-color: var(--hairline-str); }
.composer__row { display: flex; align-items: flex-end; gap: 6px; }
.attachbtn { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2);
  background: var(--surface); transition: transform var(--t-micro) var(--ease-spring), background var(--t-micro), color var(--t-micro); }
.attachbtn svg { width: 22px; height: 22px; transition: transform var(--t-base) var(--ease-spring); }
.attachbtn:active { transform: scale(.86); }
.attachbtn.open { color: var(--text); } .attachbtn.open svg { transform: rotate(45deg); }
.composer__input { flex: 1; border: none; outline: none; resize: none; background: none; color: var(--text);
  font-size: 16.5px; line-height: 1.4; max-height: 42dvh; padding: 10px 4px 10px 6px; font-family: inherit; }

/* attachment previews */
.attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 6px 2px; }
.att { position: relative; animation: rise .3s var(--ease-out) both; }
.att__thumb { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; display: block; border: 1px solid var(--hairline); }
.att__file { display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 14px 0 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hairline); max-width: 200px; }
.att__file svg { width: 20px; height: 20px; color: var(--text-2); flex: none; }
.att__name { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att__x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); color: var(--bg);
  display: grid; place-items: center; box-shadow: 0 2px 5px rgba(0,0,0,.4); transition: transform var(--t-micro) var(--ease-spring); }
.att__x:active { transform: scale(.82); }
.att__x svg { width: 12px; height: 12px; }

/* attach menu popover */
.attachmenu { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30; min-width: 176px;
  background: var(--bg-elev); border: 1px solid var(--hairline-str); border-radius: 16px; padding: 6px; box-shadow: var(--shadow);
  transform-origin: bottom left; animation: menuin .22s var(--ease-out) both; }
@keyframes menuin { from { opacity: 0; transform: translateY(8px) scale(.94); } }
.attachmenu__opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 11px;
  font-size: 15.5px; font-weight: 500; color: var(--text); transition: background var(--t-micro); }
.attachmenu__opt:active { background: var(--surface); }
.attachmenu__opt .icon { width: 20px; height: 20px; color: var(--text-2); }
.composer__input::placeholder { color: var(--text-3); }
.send { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: var(--accent); color: var(--accent-ink);
  transition: transform var(--t-base) var(--ease-spring), opacity var(--t-base), background var(--t-base); }
.send:disabled { opacity: .32; transform: scale(.86); }
.send:not(:disabled):active { transform: scale(.84); }
.send__icon { width: 20px; height: 20px; transition: opacity var(--t-micro), transform var(--t-micro); }
.send__stop { position: absolute; width: 13px; height: 13px; border-radius: 3.5px; background: currentColor; opacity: 0; transform: scale(.4); transition: opacity var(--t-micro), transform var(--t-base) var(--ease-spring); }
.send.is-streaming .send__icon { opacity: 0; transform: scale(.4); }
.send.is-streaming .send__stop { opacity: 1; transform: scale(1); }
.composer__hint { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px; font-size: 12px; color: var(--text-3); animation: rise var(--t-base) var(--ease-out); }
.composer__hint .d { width: 5px; height: 5px; border-radius: 50%; background: var(--text-2); }

/* ============================================================ SCRIM + SHEET */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--t-modal) var(--ease-std); }
.scrim.show { opacity: 1; }
.sheet, .picker { position: fixed; z-index: 50; left: 0; right: 0; background: var(--bg-elev); }
.sheet { bottom: 0; max-height: 93dvh; border-radius: 24px 24px 0 0; box-shadow: var(--shadow); border-top: 1px solid var(--hairline);
  transform: translateY(101%); transition: transform var(--t-modal) var(--ease-out); display: flex; flex-direction: column; }
.sheet.show { transform: translateY(0); }
.sheet__grip { width: 36px; height: 5px; border-radius: 3px; background: var(--text-3); opacity: .45; margin: 9px auto 0; flex: none; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px 10px; flex: none; }
.sheet__head h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.sheet__body { overflow-y: auto; padding: 2px 16px calc(var(--safe-b) + 28px); -webkit-overflow-scrolling: touch; }
.sheet__body::-webkit-scrollbar { width: 0; }

.group { margin-bottom: 24px; }
.group__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); margin: 0 4px 9px; }
.card { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.card__foot { color: var(--text-3); font-size: 12.5px; margin: 0; padding: 2px 16px 14px; line-height: 1.45; }
.hr { height: 1px; background: var(--hairline); margin-left: 16px; }

.row { display: flex; align-items: center; gap: 12px; padding: 15px 16px; width: 100%; text-align: left; }
.row--stack { flex-direction: column; align-items: stretch; gap: 11px; }
.row--tap { transition: background var(--t-micro); } .row--tap:active { background: var(--surface); }
.row--split { gap: 10px; } .row--danger .row__title { color: var(--danger); }
.row__main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.row__title { font-size: 16px; font-weight: 500; }
.row__sub { font-size: 13px; color: var(--text-2); line-height: 1.4; }
.row__note { font-size: 12.5px; color: var(--text-3); margin: 0; line-height: 1.45; }
.row__value { margin-left: auto; color: var(--text-2); font-size: 15px; max-width: 52%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chev { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); background: var(--surface); padding: 2px 6px; border-radius: 5px; vertical-align: middle; margin-left: 5px; }

.input { width: 100%; padding: 13px 14px; border-radius: var(--r-sm); border: 1px solid var(--hairline-str); background: var(--bg); color: var(--text); font-size: 16px; outline: none; transition: border-color var(--t-micro); }
.input:focus { border-color: var(--text-3); }
.keyfield { position: relative; display: flex; align-items: center; }
.keyfield .input { padding-right: 46px; }
.keyfield__eye { position: absolute; right: 6px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--text-3); border-radius: 8px; }
.keyfield__eye:active { background: var(--surface); }

/* segmented control */
.segment { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; background: var(--surface); border-radius: 13px; }
.segment__opt { position: relative; z-index: 2; padding: 9px 4px; border-radius: 10px; font-size: 14px; font-weight: 550; color: var(--text-2); transition: color var(--t-base); }
.segment__opt.active { color: var(--accent-ink); }
.segment__thumb { position: absolute; z-index: 1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 10px; background: var(--accent); transition: transform var(--t-modal) var(--ease-spring); }

/* provider grid */
.provgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.provchip { padding: 12px 10px; border-radius: 12px; background: var(--surface); border: 1px solid transparent; color: var(--text-2);
  font-size: 14.5px; font-weight: 550; text-align: center; transition: transform var(--t-micro) var(--ease-spring), background var(--t-micro), color var(--t-micro), border-color var(--t-micro); }
.provchip:active { transform: scale(.95); }
.provchip.sel { background: var(--accent); color: var(--accent-ink); }

/* toggle */
.toggle { width: 51px; height: 31px; border-radius: 999px; background: var(--surface-press); position: relative; flex: none; transition: background var(--t-base) var(--ease-std); }
.toggle__knob { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: transform var(--t-base) var(--ease-spring); }
.toggle[aria-checked="true"] { background: var(--good); }
.toggle[aria-checked="true"] .toggle__knob { transform: translateX(20px); }

.pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-size: 14.5px; font-weight: 550; transition: transform var(--t-micro) var(--ease-spring), background var(--t-micro); }
.pill:active { transform: scale(.93); }
.pill .icon { width: 17px; height: 17px; }
.pill--wide { flex: 1; }
.btn { padding: 13px 20px; border-radius: 13px; font-size: 16px; font-weight: 600; transition: transform var(--t-micro) var(--ease-spring), opacity var(--t-micro); }
.btn:active { transform: scale(.95); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { background: var(--surface); color: var(--text); }
.btn--danger { background: var(--danger); color: #fff; }

/* ============================================================ PICKER (full-screen slide) */
.picker { top: 0; bottom: 0; display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform var(--t-modal) var(--ease-out); z-index: 60; background: var(--bg); }
.picker.show { transform: translateX(0); }
.picker__head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: calc(var(--safe-t) + 8px) 12px 10px; border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
.picker__head h2 { margin: 0; text-align: center; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--text); transition: background var(--t-micro), transform var(--t-micro) var(--ease-spring); }
.iconbtn:active { transform: scale(.86); background: var(--surface); }
.iconbtn--spacer { pointer-events: none; }
.picker__search { display: flex; align-items: center; gap: 9px; margin: 12px 16px; padding: 11px 14px; background: var(--surface); border-radius: 13px; color: var(--text-3); }
.picker__search .icon { width: 18px; height: 18px; flex: none; }
.picker__input { flex: 1; border: none; outline: none; background: none; color: var(--text); font-size: 16px; }
.picker__input::placeholder { color: var(--text-3); }
.picker__list { flex: 1; overflow-y: auto; padding: 0 12px calc(var(--safe-b) + 24px); -webkit-overflow-scrolling: touch; }
.picker__list::-webkit-scrollbar { width: 0; }

.mopt { display: flex; align-items: center; gap: 12px; padding: 15px 14px; width: 100%; text-align: left; transition: background var(--t-micro); border-radius: 12px; }
.mopt:active { background: var(--surface); }
.mopt + .mopt { border-top: 1px solid var(--hairline); border-radius: 0; }
.mopt__main { flex: 1; min-width: 0; }
.mopt__name { font-size: 15.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mopt__meta { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.mopt__check { width: 21px; height: 21px; flex: none; color: var(--text); opacity: 0; transform: scale(.5); transition: opacity var(--t-micro), transform var(--t-base) var(--ease-spring); }
.mopt.sel .mopt__check { opacity: 1; transform: scale(1); }
.mopt.sel .mopt__name { font-weight: 650; }
.picker__empty { text-align: center; color: var(--text-3); padding: 42px 20px; font-size: 14px; line-height: 1.5; }
.spinner { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid var(--hairline-str); border-top-color: var(--text); animation: spin .7s linear infinite; margin: 40px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* memory list */
.memlist { padding-top: 6px; }
.memcard { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 14px; padding: 13px 15px; margin-bottom: 9px; animation: rise .32s var(--ease-out) both; }
.memcard__top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.memtag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; color: var(--text-2); background: var(--surface); }
.memcard__date { font-size: 11.5px; color: var(--text-3); margin-left: auto; }
.memcard__text { font-size: 15px; line-height: 1.5; }
.memcard__del { margin-left: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--text-3); flex: none; }
.memcard__del:active { background: var(--surface); color: var(--danger); }

/* ============================================================ TOAST + CONFIRM */
.toastwrap { position: fixed; left: 0; right: 0; bottom: calc(var(--safe-b) + 142px); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; background: var(--accent); color: var(--accent-ink); padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow); display: flex; align-items: center; gap: 9px; max-width: 90vw; animation: toastin .4s var(--ease-spring) both; }
.toast.out { animation: toastout .28s var(--ease-std) forwards; }
.toast__ic { width: 16px; height: 16px; flex: none; }
@keyframes toastin { from { opacity: 0; transform: translateY(14px) scale(.92); } }
@keyframes toastout { to { opacity: 0; transform: translateY(8px) scale(.96); } }

.confirm { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 26px; background: rgba(0,0,0,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease-std); }
.confirm.show { opacity: 1; pointer-events: auto; }
.confirm__card { background: var(--bg-elev); border: 1px solid var(--hairline-str); border-radius: 22px; padding: 24px; max-width: 330px; width: 100%; box-shadow: var(--shadow); transform: scale(.9); transition: transform var(--t-base) var(--ease-spring); text-align: center; }
.confirm.show .confirm__card { transform: scale(1); }
.confirm__card h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.confirm__card p { margin: 0 0 20px; color: var(--text-2); font-size: 15px; line-height: 1.45; }
.confirm__actions { display: flex; gap: 10px; }
.confirm__actions .btn { flex: 1; }

/* ============================================================ WELCOME / ONBOARDING */
.welcome { position: fixed; inset: 0; z-index: 120; background: var(--bg); display: flex; flex-direction: column;
  padding: calc(var(--safe-t) + 16px) 0 calc(var(--safe-b) + 24px); animation: wfade .5s var(--ease-out); }
.welcome.closing { animation: wout .45s var(--ease-std) forwards; }
@keyframes wfade { from { opacity: 0; } }
@keyframes wout { to { opacity: 0; transform: scale(1.02); } }
.welcome__skip { position: absolute; top: calc(var(--safe-t) + 14px); right: 18px; z-index: 2; padding: 8px 10px; font-size: 15px; font-weight: 500; color: var(--text-3); border-radius: 10px; }
.welcome__skip:active { background: var(--surface); }
.welcome__view { flex: 1; overflow: hidden; }
.welcome__track { display: flex; height: 100%; transition: transform var(--t-modal) var(--ease-out); }
.wslide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 34px; text-align: center; }
.wart { height: 240px; display: grid; place-items: center; margin-bottom: 8px; }
.wh { font-size: 32px; font-weight: 720; letter-spacing: -0.04em; margin: 0 0 12px; }
.wp { font-size: 17px; line-height: 1.5; color: var(--text-2); max-width: 330px; margin: 0; }
.welcome.ready .welcome__track > .wslide.active .wh { animation: rise .55s var(--ease-out) both .08s; }
.welcome.ready .welcome__track > .wslide.active .wp { animation: rise .55s var(--ease-out) both .16s; }
.welcome.ready .welcome__track > .wslide.active .wart { animation: rise .55s var(--ease-out) both; }

/* slide art */
.worb { width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff 0%, #dcdce2 32%, #9a9aa2 68%, #6a6a72 100%);
  box-shadow: 0 0 60px -6px color-mix(in srgb, var(--text) 32%, transparent), inset -8px -11px 20px rgba(0,0,0,0.3), inset 6px 7px 14px rgba(255,255,255,0.55);
  animation: floaty 5.5s var(--ease-std) infinite alternate; }
:root[data-theme="light"] .worb { box-shadow: 0 0 56px -8px rgba(0,0,0,.22), inset -8px -11px 20px rgba(0,0,0,.22), inset 6px 7px 14px rgba(255,255,255,.95); }
.wnotes { display: flex; flex-direction: column; gap: 12px; }
.wnote { padding: 13px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hairline); font-size: 15px; color: var(--text);
  box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(10px); }
.welcome.ready .wslide.active .wnote { animation: wnote .5s var(--ease-out) forwards; }
.welcome.ready .wslide.active .wnote:nth-child(1) { animation-delay: .15s; }
.welcome.ready .wslide.active .wnote:nth-child(2) { animation-delay: .3s; }
.welcome.ready .wslide.active .wnote:nth-child(3) { animation-delay: .45s; }
@keyframes wnote { to { opacity: 1; transform: none; } }
.wshield { width: 132px; height: 132px; border-radius: 34px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm); }
.wshield svg { width: 72px; height: 72px; color: var(--text); }

.welcome__foot { padding: 0 28px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.welcome__dots { display: flex; gap: 8px; }
.welcome__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); transition: width var(--t-base) var(--ease-spring), background var(--t-base); }
.welcome__dots i.on { width: 22px; background: var(--text); }
.welcome__cta { width: 100%; max-width: 420px; padding: 16px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink);
  font-size: 17px; font-weight: 650; transition: transform var(--t-micro) var(--ease-spring); }
.welcome__cta:active { transform: scale(.96); }

/* ============================================================ util */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .05ms !important; }
}
@media (min-width: 820px) { .thread { padding-top: 24px; } }