/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--ang:0deg}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", "Anek Latin", "Anek Devanagari", "Anek Gurmukhi", system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", "Anek Latin", "Anek Devanagari", "Anek Gurmukhi", system-ui, sans-serif;--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.fixed{position:fixed}.static{position:static}.sticky{position:sticky}.inset-0{inset:0}.z-40{z-index:40}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}:root{--bg:#eef2f7;--bg-deep:#e3e9f1;--surface:#fff;--elevated:#fff;--ink:#212b38;--muted:#6d7d90;--border:#dde5ee;--primary:#C9963E;--primary-deep:#B98A3A;--primary-ink:#fff6fa;--marigold:#e6a53f;--marigold-soft:#f6ecd9;--leaf:#3e7d5e;--danger:#b3372f;--shadow:0 1px 2px #212b380d, 0 4px 16px #212b380d}@media (prefers-color-scheme:dark){:root{--bg:#0E0E10;--bg-deep:#0a0a0b;--surface:#17171A;--elevated:#1E1E22;--ink:#F5F5F4;--muted:#A1A1A6;--border:#26262B;--primary:#E8B75B;--primary-deep:#C9963E;--primary-ink:#1A1200;--marigold:#E8B75B;--marigold-soft:#2E2716;--leaf:#5FB37F;--danger:#D96A6A;--shadow:none}}html{height:100%}body{font-family:var(--font-sans);background:linear-gradient(170deg, var(--bg), var(--bg-deep));color:var(--ink);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;flex-direction:column;height:100dvh;margin:0;font-size:15px;font-weight:420;line-height:1.45;display:flex}*{box-sizing:border-box}button{cursor:pointer;font-family:inherit}:focus-visible{outline:2px solid var(--marigold);outline-offset:2px}.disp{letter-spacing:-.01em;font-weight:650;font-stretch:112%}.eyebrow{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:.8rem;font-weight:620;font-stretch:86%}.status-line{text-align:center;color:var(--muted);min-height:1.2em;margin:6px 0 4px;font-size:.85rem}.status-line:empty{min-height:0;margin:0}.status-line.status-ok{color:var(--leaf);font-weight:560}/* MAGIC SHELL WAVE (2026-09-03) — the future zone: amber beads right
   of "now" (reminders / waiting / partials / night shifts). Warm,
   distinct from past beads at a glance. */
.timeline-bead--future{background:var(--marigold);opacity:.85;box-shadow:0 0 0 2px color-mix(in srgb, var(--marigold) 25%, transparent)}
.timeline-bead--future.is-expanded{opacity:1;transform:scale(1.35)}
@media (prefers-reduced-motion:reduce){.timeline-bead--future{transition:none}}

/* MAGIC SHELL WAVE safe-area fix (2026-09-03): env(safe-area-inset-top)
   reads 0 in some non-standalone webviews, clipping the first line
   under the notch. --sat is JS-measured from visualViewport (app.js
   boot) and acts as a floor: padding uses whichever is larger. */
header{padding:calc(max(env(safe-area-inset-top), var(--sat, 0px)) + 12px) 16px 10px;align-items:center;gap:10px;display:flex}header h1{margin:0;font-size:1.35rem;line-height:1.1}#status{color:var(--muted);text-align:right;flex:1;font-size:14px}.screen{flex-direction:column;flex:1;display:none;overflow:hidden}.screen.active{display:flex}.center{text-align:center;width:100%;max-width:360px;margin:auto;padding:24px}.list{padding:14px 14px calc(env(safe-area-inset-bottom) + 8px);flex:1;overflow-y:auto}input,select,textarea{border:1px solid var(--border);width:100%;font:inherit;background:var(--surface);color:var(--ink);border-radius:14px;margin:6px 0;padding:12px 14px;font-size:1rem;transition:border-color .15s,box-shadow .15s}input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary);outline:none}@supports (color:color-mix(in lab, red, red)){input:focus,select:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent)}}input::placeholder{color:var(--muted)}button.primary{background:var(--primary);width:100%;color:var(--primary-ink);box-shadow:var(--shadow);border:0;border-radius:14px;margin-top:10px;padding:13px 16px;font-size:1rem;font-weight:600;transition:transform .1s,filter .15s}button.primary:active{filter:brightness(1.08);transform:scale(.98)}.btn-icon{border:1px solid var(--border);background:var(--surface);width:44px;min-width:44px;height:44px;color:var(--ink);border-radius:50%;justify-content:center;align-items:center;font-size:1.15rem;display:inline-flex}.btn-quiet{color:var(--primary);background:0 0;border:0;font-weight:600}.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px;margin-bottom:10px;padding:13px 15px}.card small{color:var(--muted)}.badge{text-transform:uppercase;letter-spacing:.06em;background:var(--marigold-soft);color:var(--ink);border-radius:999px;padding:3px 9px;font-size:.8rem;font-weight:620;font-stretch:90%}.badge.due{background:var(--marigold);color:#3a2405}.badge.ok{background:var(--leaf)}@supports (color:color-mix(in lab, red, red)){.badge.ok{background:color-mix(in srgb, var(--leaf) 18%, transparent)}}.badge.ok{color:var(--leaf)}.pot{border-left:6px solid var(--primary);justify-content:space-between;align-items:center;display:flex}.pot b{font-size:1.02rem}.pot .amt{font-size:1.35rem;font-weight:680;font-stretch:105%}#transcript{flex-direction:column;flex:1;gap:8px;padding:8px 14px;display:flex;overflow-y:auto}.msg{white-space:pre-wrap;word-break:break-word;border-radius:18px;max-width:86%;padding:10px 14px;line-height:1.4}.msg.user{background:linear-gradient(150deg, var(--primary), var(--primary-deep));color:var(--primary-ink);border-bottom-right-radius:5px;align-self:flex-end}.msg.assistant{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-bottom-left-radius:5px;align-self:flex-start}.msg a{color:var(--primary);font-weight:600}.msg.user a{color:var(--marigold-soft)}#chips{scrollbar-width:none;gap:8px;padding:0 12px 6px;display:flex;overflow-x:auto}#chips::-webkit-scrollbar{display:none}.chip{border:1px solid var(--border);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);white-space:nowrap;border-radius:999px;flex:none;padding:9px 14px;font-size:.85rem;font-weight:560}.chip:active{background:var(--marigold-soft)}#composer{padding:8px 12px calc(env(safe-area-inset-bottom) / 3 + 8px);z-index:15;background:var(--material);-webkit-backdrop-filter:saturate(1.6)blur(18px);backdrop-filter:saturate(1.6)blur(18px);flex-direction:column;align-items:stretch;gap:0;display:flex;position:sticky;bottom:var(--bottom-bars-h, calc(64px + 32px + env(safe-area-inset-bottom)))}
/* JOB 0f -- the input strip owns a FULL-WIDTH row (was a 68px squeeze
   between 5 icons in one row). Icons spread evenly on their own row.
   Font stays 17px. */
/* HARD REPAIR WAVE (2026-09-03): single-row composer with an
   EXPLICIT layout contract — the input owns ALL free space
   (flex:1 1 0), the fixed controls keep their natural widths, gap
   8px, no legacy width rules fighting the flex model. The tier chip
   MOVED to the header (mode indicator, Sam's call). */
#composer-row{align-items:center;justify-content:flex-start;gap:8px;display:flex;width:100%;padding:0}
#composer-row #textin{flex:1 1 0;min-width:0;width:auto;max-width:none;margin:0}
#composer-row #sendbtn{flex:0 0 44px}
#composer-row #talk{flex:0 0 52px}
/* override the legacy block that pinned #textin width:100% */
#composer #textin{width:auto}
/* JOB 0e Issue 3 -- full-width live text preview strip (typing + interim
   speech mirrored here in real time; hidden when empty so it costs zero
   height at rest -- it only appears once there are words to show) */
#live-preview{display:none;width:100%;box-sizing:border-box;padding:6px 14px 2px;font-size:15px;line-height:1.35;color:var(--role-user,var(--primary));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0}
#live-preview.on{display:block}
/* P0 hotfix Job 0c -- #composer (camera/mic/send row) used to sit
   naturally above .tabbar/.timeline-container because both were
   position:static and reserved real flow-space right after it. Job
   0b moved both to position:fixed to fix the tab-bar touch bug (kept
   exactly as-is per this job's guardrail) -- which stopped reserving
   that space, so #composer's old `bottom:0` resolved against the
   actual bottom of its scroll container and landed BEHIND the fixed
   bars, covering the camera/mic/send row. Fixed above by making
   #composer stick to `bottom: var(--bottom-bars-h)` instead of 0 --
   the real measured combined height of both fixed bars (see
   _syncBottomBarsHeight() in app.js), with an 8px visible gap already
   provided by #composer's own existing padding above.*/#hdrback{display:none}#hdrback.show{display:inline-flex}header h1{cursor:pointer}#textin{border-radius:999px;flex:1;margin:0}#sendbtn{background:var(--primary);width:44px;min-width:44px;height:44px;color:var(--primary-ink);border:0;border-radius:50%;font-size:1.15rem}#cambtn{font-size:1.15rem}@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}/* MAGIC SHELL WAVE (2026-09-03): idle orb is compact 52px; it grows
   back to the full 74px only while actually recording or in convo
   mode (the states that benefit from the big touch target). */
#talk{width:52px;min-width:52px;height:52px;font-size:1.2rem;color:var(--primary-ink);transition:width .18s var(--ease-ios),height .18s var(--ease-ios),font-size .18s var(--ease-ios);background:radial-gradient(circle at 32% 28%, var(--primary), var(--primary-deep)) padding-box, conic-gradient(from var(--ang), var(--marigold), var(--primary) 25%, var(--marigold) 50%, var(--primary) 75%, var(--marigold)) border-box;box-shadow:0 6px 20px var(--primary);border:3px solid #0000;border-radius:50%;font-size:1.8rem}@supports (color:color-mix(in lab, red, red)){#talk{box-shadow:0 6px 20px color-mix(in srgb, var(--primary) 45%, transparent)}}#talk{touch-action:none;-webkit-user-select:none;user-select:none;transition:transform .12s}#talk:active{transform:scale(1.05)}#talk.rec{width:74px;min-width:74px;height:74px;font-size:1.8rem;background:radial-gradient(circle at 32% 28%,#c23c2a,#7e1c10) padding-box padding-box,#c23c2a border-box;animation:1.3s ease-in-out infinite breathe}
#talk.convo-on{width:74px;min-width:74px;height:74px;font-size:1.8rem}@keyframes breathe{50%{transform:scale(1.06)}}@media (prefers-reduced-motion:reduce){#talk.rec{animation:none}}#talk.convo-on{box-shadow:0 0 0 4px var(--marigold), 0 6px 20px var(--primary)}@supports (color:color-mix(in lab, red, red)){#talk.convo-on{box-shadow:0 0 0 4px color-mix(in srgb, var(--marigold) 55%, transparent), 0 6px 20px color-mix(in srgb, var(--primary) 45%, transparent)}}#talk.convo-on:not(.rec){animation:2.4s ease-in-out infinite convo-breathe}@keyframes convo-breathe{50%{box-shadow:0 0 0 7px color-mix(in srgb, var(--marigold) 35%, transparent), 0 6px 20px color-mix(in srgb, var(--primary) 45%, transparent)}}@media (prefers-reduced-motion:reduce){#talk.convo-on:not(.rec){animation:none}}body[data-convo=listening] #status{color:var(--leaf)}body[data-convo=thinking] #status{color:var(--marigold)}body[data-convo=speaking] #status{color:var(--primary)}body[data-convo=ended] #status{color:var(--muted)}.interp-btn{touch-action:none;-webkit-user-select:none;user-select:none;flex:1}.interp-btn.rec{filter:brightness(1.15);animation:1.2s ease-in-out infinite breathe}#approvals{padding:6px 14px 0}.approval{background:var(--surface);border:1.5px solid var(--marigold);box-shadow:var(--shadow);border-radius:16px;margin-bottom:8px;padding:13px 15px}.approval .abtns{gap:8px;margin-top:10px;display:flex}.approval .abtns button{border:0;border-radius:11px;flex:1;padding:10px;font-size:.95rem;font-weight:650}.approval .ok{background:var(--leaf);color:#fff}.approval .no{color:var(--muted);background:0 0;border:1px solid var(--border)!important}nav{border-top:1px solid var(--border);background:var(--surface);display:flex}@supports (color:color-mix(in lab, red, red)){nav{background:color-mix(in srgb, var(--surface) 88%, transparent)}}nav{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}nav button{padding:8px 0 calc(env(safe-area-inset-bottom) / 2 + 8px);color:var(--muted);letter-spacing:.04em;background:0 0;border:0;flex-direction:column;flex:1;align-items:center;gap:3px;font-size:.66rem;font-weight:560;font-stretch:92%;display:flex}nav button.on{color:var(--primary)}.morerow{text-align:left;background:var(--surface);border:1px solid var(--border);width:100%;color:var(--ink);box-shadow:var(--shadow);border-radius:16px;align-items:center;gap:12px;margin-bottom:10px;padding:14px 16px;font-size:1rem;font-weight:560;display:flex}.morerow .mr-ico{text-align:center;width:30px;font-size:1.3rem}.morerow small{color:var(--muted);font-weight:420;display:block}.morerow:after{content:"›";color:var(--muted);margin-left:auto;font-size:1.2rem}.vaultbar{background:linear-gradient(150deg, var(--marigold-soft), var(--surface));border:1px solid var(--border);box-shadow:var(--shadow);border-radius:16px;align-items:center;gap:10px;margin-bottom:12px;padding:13px 15px;display:flex}.vaultbar b{font-stretch:108%}.helpcard{background:var(--surface);border:1.5px solid var(--marigold);box-shadow:var(--shadow);text-align:left;border-radius:16px;margin:8px 14px;padding:14px 16px}.helpcard h4{margin-bottom:4px;font-weight:650;font-stretch:108%}ol.steps{color:var(--ink);margin:8px 0 0;padding-left:20px;font-size:.87rem;line-height:1.5;list-style:decimal}ol.steps li{margin-bottom:6px}ol.steps li::marker{color:var(--primary);font-weight:650}.metertrack{background:var(--bg-deep);border-radius:999px;height:8px;margin:10px 0 4px;overflow:hidden}.metertrack>i{background:linear-gradient(90deg, var(--leaf), var(--marigold));border-radius:999px;width:0%;height:100%;transition:width 60ms linear;display:block}.copyrow{background:var(--bg-deep);border:1px solid var(--border);border-radius:12px;align-items:center;gap:8px;margin-top:8px;padding:9px 11px;display:flex}.copyrow code{word-break:break-all;-webkit-user-select:all;user-select:all;flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}.copyrow button{flex:none;font-size:.82rem}svg.ico{flex:none;display:block}i[data-icon]{justify-content:center;align-items:center;display:inline-flex}button.primary{justify-content:center;align-items:center;gap:9px;display:flex}button.primary svg.ico{margin-top:-1px}.secthead{align-items:center;gap:8px;display:flex}.secthead svg.ico{color:var(--primary)}.btn-ghost{color:var(--muted);background:0 0!important;border:0!important}.btn-ghost:active,#spkbtn[aria-pressed=true]{color:var(--primary)}#sendbtn,#cambtn,#talk{justify-content:center;align-items:center;display:flex}#sendbtn svg.ico{margin-left:1px}#cambtn{color:var(--muted)}.chip{align-items:center;gap:7px;display:inline-flex}.chip svg.ico{color:var(--primary)}.interp-btn{flex-direction:column;gap:4px;line-height:1.15}.interp-btn b{font-weight:650}.interp-btn span{opacity:.92;font-size:.9rem}.morerow .mr-ico{background:var(--marigold-soft);width:34px;height:34px;color:var(--primary);border-radius:11px;justify-content:center;align-items:center;display:flex}.morerow:after{content:"";border-right:2px solid var(--muted);border-top:2px solid var(--muted);width:8px;height:8px;margin-left:auto;transform:rotate(45deg)}.card svg.ico,.vaultbar svg.ico,small svg.ico,a svg.ico{vertical-align:-.16em;display:inline-block}.approval .abtns button{justify-content:center;align-items:center;gap:7px;display:inline-flex}.searchbar{background:var(--surface);border:1px solid var(--border);border-radius:12px;align-items:center;gap:8px;margin-bottom:10px;padding:0 12px;display:flex}.searchbar svg.ico{color:var(--muted)}.searchbar input{background:0 0;border:0;border-radius:0;margin:0;padding:11px 0;font-size:1rem}.searchbar input:focus{box-shadow:none;border-color:#0000;outline:none}.searchbar input::-webkit-search-cancel-button{-webkit-appearance:none}.filterrow{scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:8px;padding-bottom:4px;display:flex;overflow-x:auto}.filterrow::-webkit-scrollbar{display:none}.chip.on{background:var(--primary);color:var(--primary-ink);border-color:#0000}.chip.on svg.ico{color:var(--primary-ink)}.foldergrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.foldercard{text-align:left;background:var(--surface);border:1px solid var(--border);color:var(--ink);box-shadow:var(--shadow);border-radius:16px;flex-direction:column;gap:2px;padding:13px 13px 11px;transition:transform .16s cubic-bezier(.2,.8,.3,1),filter .16s;display:flex;position:relative;overflow:hidden}.foldercard:before{content:"";background:var(--fc);width:4px;position:absolute;inset:0 auto 0 0}.foldercard:active{transform:scale(.97)}.foldercard .fc-ico{background:var(--fc);border-radius:10px;justify-content:center;align-items:center;width:32px;height:32px;margin-bottom:5px;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.foldercard .fc-ico{background:color-mix(in srgb, var(--fc) 15%, transparent)}}.foldercard .fc-ico{color:var(--fc)}.foldercard b{font-size:.95rem;font-weight:620}.foldercard small{color:var(--muted);font-size:.76rem;line-height:1.3}.foldercard .fc-meta{color:var(--fc);margin-top:6px;font-size:.74rem;font-weight:600}.foldercard.newfolder{box-shadow:none;border-style:dashed}.foldercard.newfolder:before{display:none}.foldercard.newfolder .fc-ico{background:var(--bg-deep);color:var(--muted)}.backrow{align-items:center;gap:4px;padding:6px 0;display:inline-flex}.backrow svg.ico{transform:rotate(180deg)}.folderhead{background:var(--fc);border-radius:16px;align-items:center;gap:11px;margin:4px 0 12px;padding:12px 14px;display:flex}@supports (color:color-mix(in lab, red, red)){.folderhead{background:color-mix(in srgb, var(--fc) 9%, var(--surface))}}.folderhead{border:1px solid var(--fc)}@supports (color:color-mix(in lab, red, red)){.folderhead{border:1px solid color-mix(in srgb, var(--fc) 25%, transparent)}}.folderhead .fh-ico{color:var(--fc);display:flex}.folderhead small{color:var(--muted)}.filerow{align-items:center;gap:11px;padding:11px 13px;display:flex}.filerow .fr-ico{background:var(--fc);border-radius:10px;flex:none;justify-content:center;align-items:center;width:34px;height:34px;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.filerow .fr-ico{background:color-mix(in srgb, var(--fc) 14%, transparent)}}.filerow .fr-ico{color:var(--fc)}.filerow .fr-body{flex:1;min-width:0}.filerow .fr-body b{text-overflow:ellipsis;white-space:nowrap;font-size:.92rem;font-weight:580;display:block;overflow:hidden}.filerow .fr-body small{color:var(--muted);font-size:.76rem}.filerow .fr-star{color:var(--border);background:0 0;border:0;flex:none;padding:4px}.filerow .fr-star.on{color:var(--marigold)}.filerow .fr-star.on svg.ico{fill:var(--marigold)}.attention{background:var(--marigold)}@supports (color:color-mix(in lab, red, red)){.attention{background:color-mix(in srgb, var(--marigold) 12%, var(--surface))}}.attention{border:1px solid var(--marigold);border-radius:16px;margin-bottom:12px;padding:12px 14px}.attention .att-row{margin-top:5px;font-size:.87rem}.empty{color:var(--muted);text-align:center;padding:26px 10px;font-size:.9rem}:root{--ease-ios:cubic-bezier(.32, .72, 0, 1);--r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:22px;--hair:.5px}body{letter-spacing:-.01em;-webkit-font-smoothing:antialiased;font-size:17px;font-weight:400;line-height:1.41}h1,.disp{letter-spacing:-.021em;font-weight:700;font-stretch:100%}header h1{font-size:22px}h2.disp{letter-spacing:-.024em;font-size:26px}h3.disp{letter-spacing:-.02em;font-size:20px}small,.card small,.filerow small{letter-spacing:-.004em;font-size:13px}.eyebrow{letter-spacing:.01em;text-transform:uppercase;opacity:.75;font-size:13px;font-weight:400;font-stretch:100%}.card,.foldercard,.approval,.helpcard,.vaultbar,.searchbar,.attention{border-width:var(--hair);border-radius:var(--r-lg)}.card{padding:12px 15px}button.primary{border-radius:var(--r-md);letter-spacing:-.01em;min-height:50px;transition:transform .22s var(--ease-ios), filter .22s var(--ease-ios), opacity .22s var(--ease-ios);padding:14px 18px;font-size:17px;font-weight:590}button.primary:active{filter:brightness(1.05);opacity:.92;transform:scale(.965)}input,select,textarea{border-radius:var(--r-md);border-width:var(--hair);padding:13px 15px;font-size:17px}.chip{border-width:var(--hair);transition:transform .2s var(--ease-ios), background .2s;border-radius:999px;padding:8px 14px;font-size:15px;font-weight:500}.chip:active{transform:scale(.95)}.msg{border-radius:20px;padding:9px 14px;font-size:17px;line-height:1.35}.msg.user{border-bottom-right-radius:7px}.msg.assistant{border-width:var(--hair);border-bottom-left-radius:7px}nav{border-top-width:var(--hair)}nav button{letter-spacing:0;transition:color .2s var(--ease-ios);gap:4px;font-size: 14px;font-weight:500;font-stretch:100%}nav button svg{stroke-width:1.7px;width:26px;height:26px}nav button.on svg{stroke-width:2.1px}.filerow,.foldercard,.morerow{transition:transform .2s var(--ease-ios), background .2s var(--ease-ios)}.filerow:active,.morerow:active{background:var(--bg-deep);transform:scale(.985)}.morerow{border-radius:var(--r-lg);border-width:var(--hair);min-height:62px}@media (prefers-reduced-motion:reduce){.screen.active{animation:none}*{transition-duration:.01ms!important}}#thinkwrap{background:var(--ink);border-radius:999px;align-self:flex-start;align-items:center;gap:10px;margin:0 14px 6px;padding:8px 14px 8px 8px;display:flex}@supports (color:color-mix(in lab, red, red)){#thinkwrap{background:color-mix(in srgb, var(--ink) 5%, var(--surface))}}#thinkwrap{border:var(--hair) solid var(--border);box-shadow:var(--shadow);animation:think-in .34s var(--ease-ios)}#thinkwrap[hidden]{display:none}@keyframes think-in{0%{opacity:0;transform:translateY(4px)scale(.97)}to{opacity:1;transform:none}}#thinkcanvas{width:54px;height:22px;display:block}#thinklabel{color:var(--muted);letter-spacing:-.005em;font-size:14px;font-weight:500}#thinklabel.swap{animation:label-swap .32s var(--ease-ios)}@keyframes label-swap{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.switchrow{background:var(--surface);border:var(--hair) solid var(--border);border-radius:var(--r-md);align-items:center;gap:12px;margin-top:10px;padding:12px 14px;display:flex}.switchrow span{text-align:left;flex:1;font-size:16px}.switchrow small{color:var(--muted);font-size:13px;display:block}.switchrow input[type=checkbox]{appearance:none;background:var(--border);width:51px;min-width:51px;height:31px;transition:background .25s var(--ease-ios);border:0;border-radius:999px;flex:none;margin:0;padding:0;position:relative}.switchrow input[type=checkbox]:after{content:"";width:27px;height:27px;transition:transform .25s var(--ease-ios);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;box-shadow:0 1px 3px #00000040}.switchrow input[type=checkbox]:checked{background:var(--leaf)}.switchrow input[type=checkbox]:checked:after{transform:translate(20px)}.voicerow{text-align:left;background:var(--surface);border:var(--hair) solid var(--border);border-radius:var(--r-md);width:100%;color:var(--ink);transition:transform .2s var(--ease-ios), border-color .2s;align-items:center;gap:12px;margin-bottom:8px;padding:12px 14px;display:flex}.voicerow:active{transform:scale(.985)}.voicerow.on{border-color:var(--leaf);background:var(--leaf)}@supports (color:color-mix(in lab, red, red)){.voicerow.on{background:color-mix(in srgb, var(--leaf) 8%, var(--surface))}}.voicerow .vr-play{background:var(--bg-deep);width:34px;height:34px;color:var(--primary);border-radius:50%;flex:none;justify-content:center;align-items:center;display:flex}.voicerow.loading .vr-play{animation:.9s ease-in-out infinite pulse-play}@keyframes pulse-play{50%{opacity:.35;transform:scale(.92)}}.cc-pulse{animation:1.6s ease-in-out infinite cc-pulse}@keyframes cc-pulse{50%{opacity:.55}}.cc-job{cursor:pointer;border:none}.voicerow .vr-body{flex:1;min-width:0}.voicerow .vr-body b{margin-right:6px;font-size:16px;font-weight:590}.voicerow .vr-body small{color:var(--muted);font-size:13px;display:block}.voicerow .vr-tick{color:var(--leaf);flex:none;display:flex}:root{--shadow:0 1px 1px #2e1b120a, 0 2px 6px #2e1b120a, 0 12px 32px -8px #2e1b121a;--shadow-float:0 2px 8px #2e1b1214, 0 18px 44px -12px #2e1b122e;--material:var(--surface)}@supports (color:color-mix(in lab, red, red)){:root{--material:color-mix(in srgb, var(--surface) 72%, transparent)}}@media (prefers-color-scheme:dark){:root{--shadow:0 1px 1px #00000059, 0 2px 8px #00000059, 0 14px 36px -8px #00000080;--shadow-float:0 2px 10px #00000080, 0 20px 48px -12px #000000a6;--material:var(--surface)}@supports (color:color-mix(in lab, red, red)){:root{--material:color-mix(in srgb, var(--surface) 64%, transparent)}}.card,.approval,.helpcard,.vaultbar,.morerow,.foldercard,.switchrow,.voicerow,.msg.assistant{box-shadow:inset 0 var(--hair) 0 #ffffff0f, var(--shadow)}}header{z-index:20;background:var(--material);-webkit-backdrop-filter:saturate(1.6)blur(18px);backdrop-filter:saturate(1.6)blur(18px);border-bottom:var(--hair) solid var(--border);position:sticky;top:0}@supports (color:color-mix(in lab, red, red)){header{border-bottom:var(--hair) solid color-mix(in srgb, var(--border) 70%, transparent)}}nav{background:var(--material);-webkit-backdrop-filter:saturate(1.6)blur(18px);backdrop-filter:saturate(1.6)blur(18px)}nav button{position:relative}nav button i,nav button svg{z-index:1;position:relative}nav button:before{content:"";opacity:0;background:var(--primary);border-radius:999px;width:46px;height:30px;position:absolute;top:4px;left:50%;transform:translate(-50%)scale(.6)}@supports (color:color-mix(in lab, red, red)){nav button:before{background:color-mix(in srgb, var(--primary) 14%, transparent)}}nav button:before{transition:transform .3s var(--ease-ios), opacity .3s var(--ease-ios)}nav button.on:before{opacity:1;transform:translate(-50%)scale(1)}button.primary{background:linear-gradient(180deg, var(--primary), var(--primary) 40%, var(--primary-deep))}@supports (color:color-mix(in lab, red, red)){button.primary{background:linear-gradient(180deg, color-mix(in srgb, var(--primary) 88%, #fff), var(--primary) 40%, var(--primary-deep))}}button.primary{box-shadow:var(--shadow), inset 0 var(--hair) 0 #ffffff40}#talk{box-shadow:var(--shadow-float), 0 0 0 6px var(--primary)}@supports (color:color-mix(in lab, red, red)){#talk{box-shadow:var(--shadow-float), 0 0 0 6px color-mix(in srgb, var(--primary) 8%, transparent)}}.approval{box-shadow:var(--shadow-float)}#thinkwrap{animation:think-in .34s var(--ease-ios), think-glow 2.8s ease-in-out infinite .4s}@keyframes think-glow{0%,to{box-shadow:var(--shadow)}50%{box-shadow:var(--shadow), 0 0 18px color-mix(in srgb, var(--marigold) 35%, transparent)}}#thinklabel{background:linear-gradient(90deg, var(--muted) 35%, var(--ink) 50%, var(--muted) 65%);-webkit-text-fill-color:transparent;background-size:220% 100%;-webkit-background-clip:text;background-clip:text;animation:2.4s linear infinite label-shimmer}@keyframes label-shimmer{to{background-position:-220% 0}}.msg{animation:msg-in .3s var(--ease-ios);transform-origin:bottom}.msg.user{transform-origin:100% 100%}.msg.assistant{transform-origin:0 100%}@keyframes msg-in{0%{opacity:0;transform:translateY(8px)scale(.97)}to{opacity:1;transform:none}}.list{padding:16px 16px calc(env(safe-area-inset-bottom) + 12px)}.card{margin-bottom:12px}.eyebrow{margin:18px 4px 8px}@media (prefers-reduced-motion:reduce){#thinkwrap,#thinklabel,.msg{animation:none}}html.a11y-big body,html.a11y-big .msg{font-size:19px}html.a11y-big small,html.a11y-big .card small{font-size:15px}html.a11y-big nav button{font-size: 14px}html.a11y-contrast:root{--muted:var(--ink)}@supports (color:color-mix(in lab, red, red)){html.a11y-contrast:root{--muted:color-mix(in srgb, var(--ink) 72%, var(--bg))}}html.a11y-contrast:root{--border:var(--ink)}@supports (color:color-mix(in lab, red, red)){html.a11y-contrast:root{--border:color-mix(in srgb, var(--ink) 38%, var(--bg))}}html.a11y-contrast .card,html.a11y-contrast .morerow{border-width:1.5px}.mailnote{color:var(--muted);margin:8px 2px 14px;font-size:13px;line-height:1.45}.mailnote b{color:var(--leaf);font-weight:590}.mailrow{align-items:flex-start;gap:12px;padding:12px 14px;display:flex}.mailrow .ml-av{background:var(--primary);border-radius:50%;justify-content:center;align-items:center;width:38px;min-width:38px;height:38px;display:flex}@supports (color:color-mix(in lab, red, red)){.mailrow .ml-av{background:color-mix(in srgb, var(--primary) 13%, transparent)}}.mailrow .ml-av{color:var(--primary);font-size:16px;font-weight:640}.mailrow .ml-body{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.mailrow .ml-top{align-items:baseline;gap:8px;display:flex}.mailrow .ml-top b{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:15px;font-weight:590;overflow:hidden}.mailrow .ml-top small{color:var(--muted);flex:none;font-size: 14px}.mailrow .ml-sub{text-overflow:ellipsis;white-space:nowrap;font-size:15px;overflow:hidden}.mailrow .ml-snip{color:var(--muted);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;line-height:1.35;display:-webkit-box;overflow:hidden}#aura{z-index:40;pointer-events:none;opacity:0;transition:opacity .45s var(--ease-ios);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#aura.on{opacity:1}#aura .aura-core{filter:blur(28px);opacity:.55;border-radius:50%;width:62vmin;height:62vmin;animation:2.6s ease-in-out infinite aura-breathe}#auralabel{letter-spacing:.01em;color:var(--ink);background:var(--material);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;margin-top:4vmin;padding:8px 18px;font-size:15px;font-weight:560}#aura.s-listening{background:var(--bg)}@supports (color:color-mix(in lab, red, red)){#aura.s-listening{background:color-mix(in srgb, var(--bg) 55%, transparent)}}#aura.s-listening .aura-core{background:radial-gradient(circle, var(--leaf), transparent 72%);animation-duration:1.8s}#aura.s-thinking .aura-core{background:radial-gradient(circle, var(--primary), transparent 72%);opacity:.22}#aura.s-speaking .aura-core{background:radial-gradient(circle, var(--primary-deep), transparent 72%);opacity:.18;animation-duration:2.4s}#aura.s-approval{justify-content:flex-start}#aura.s-approval .aura-core{filter:blur(22px);opacity:.5;background:linear-gradient(180deg, var(--marigold), transparent);border-radius:0;width:100vw;height:10vh;animation:none}@keyframes aura-breathe{50%{opacity:.7;transform:scale(1.06)}}@media (prefers-reduced-motion:reduce){#aura .aura-core{animation:none}}.imgpreview{z-index:45;opacity:0;pointer-events:none;transition:opacity .22s var(--ease-ios);background:#000000b3;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.imgpreview.on{opacity:1;pointer-events:auto}.imgpreview-card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-float);flex-direction:column;width:100%;max-width:92vw;max-height:88vh;display:flex;overflow:hidden}.imgpreview-head{border-bottom:var(--hair) solid var(--border);justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;display:flex}.imgpreview-name{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;max-width:60%;font-size:14px;overflow:hidden}.imgpreview-actions{flex:none;align-items:center;gap:6px;display:flex}.imgpreview-body{background:var(--bg-deep);flex:1;justify-content:center;align-items:center;padding:12px;display:flex;overflow:auto}.imgpreview-body img{object-fit:contain;border-radius:var(--r-sm);max-width:100%;max-height:68vh}.imgpreview-details{border-top:var(--hair) solid var(--border);color:var(--ink);max-height:30vh;padding:12px 14px;font-size:14px;overflow-y:auto}.imgpreview-details dl{grid-template-columns:auto 1fr;gap:4px 10px;margin:0;display:grid}.imgpreview-details dt{color:var(--muted);font-size:13px}.imgpreview-details dd{margin:0}.imgpreview-details .imgpreview-refine-seam{margin-top:10px}.imgpreview-refine-seam textarea{border-radius:var(--r-sm);border:var(--hair) solid var(--border);background:var(--surface);width:100%;color:var(--ink);font:inherit;resize:vertical;margin:8px 0;padding:8px 10px}.imgpreview-refine-actions{gap:8px;display:flex}.imgpreview-refine-status{color:var(--muted);min-height:1.2em;margin:6px 0 0;font-size:13px}.imgpreview-refine-queue{margin-top:10px}.imgpreview-refine-queue-head{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-size: 14px}.imgpreview-refine-queue-item{border-top:var(--hair) solid var(--border);padding:6px 0}.imgpreview-refine-queue-instr{font-size:14px}.imgpreview-refine-queue-meta{color:var(--muted);margin-top:2px;font-size: 14px}.imgpreview-suggestions{margin-top:12px}.imgpreview-suggestions-head{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-size: 14px}.imgpreview-suggestions-list{flex-direction:column;gap:6px;display:flex}.imgpreview-suggestion-btn{text-align:left;border:var(--hair) solid var(--border);cursor:pointer;background:0 0;border-radius:8px;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:8px 10px;display:flex}.imgpreview-suggestion-btn:disabled{opacity:.5;cursor:default}.imgpreview-suggestion-btn:not(:disabled):active{background:var(--hover,#0000000a)}.imgpreview-suggestion-label{font-size:14px;font-weight:500}.imgpreview-suggestion-rationale{color:var(--muted);font-size: 14px}.imgpreview-trajectory{margin-top:12px}.imgpreview-trajectory-head{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-size: 14px}.imgpreview-trajectory-chain{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.imgpreview-trajectory-node{border:var(--hair) solid var(--border);border-radius:6px;flex-direction:column;gap:1px;padding:4px 8px;display:inline-flex}.imgpreview-trajectory-node-current{border-color:var(--accent,var(--border))}.imgpreview-trajectory-mode{color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-size: 14px}.imgpreview-trajectory-label{text-overflow:ellipsis;white-space:nowrap;max-width:220px;font-size:13px;overflow:hidden}.imgpreview-trajectory-arrow{color:var(--muted);font-size:13px}.imgpreview-trajectory-children-head{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:10px 0 6px;font-size: 14px}.imgpreview-branch-intel{margin-top:12px}.imgpreview-branch-intel-head{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-size: 14px}.imgpreview-branch-intel-row{border-top:var(--hair) solid var(--border);justify-content:space-between;gap:8px;padding:5px 0;font-size:13px;display:flex}.imgpreview-branch-intel-label{color:var(--muted)}.imgpreview-branch-intel-value{font-weight:500}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}


/* Image preview refine bar + actions (2026-08-14) */
.imgpreview-refine-bar{border-top:var(--hair) solid var(--border);padding:10px 12px;background:var(--surface)}
.imgpreview-refine-bar textarea{width:100%;border:var(--hair) solid var(--border);border-radius:var(--r-sm);background:var(--bg-deep);color:var(--ink);font:inherit;resize:vertical;padding:8px 10px;margin:0 0 8px}
.imgpreview-refine-bar-row{display:flex;align-items:center;gap:10px}
.imgpreview-refine-bar-row .btn-ghost{background:var(--primary)!important;color:var(--primary-ink)!important;border-radius:999px;padding:8px 14px;font-weight:600}

/* Asset Action Bar (2026-08-19, generated-asset-workbench v1) -- one calm,
   scrollable row of premium-feeling pill actions above the refine
   composer. Generic: no image-specific styling assumption beyond living
   inside #imgpreview. */
.asset-action-bar{border-top:var(--hair) solid var(--border);background:var(--surface);padding:10px 12px 4px}
.asset-action-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.asset-action-row::-webkit-scrollbar{display:none}
.asset-action-btn{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;min-width:58px;padding:8px 10px;border:var(--hair) solid var(--border);border-radius:var(--r-md);background:var(--bg-deep);color:var(--ink);font-size: 13px;font-weight:560;transition:transform .15s var(--ease-ios),background .15s}
.asset-action-btn:active{transform:scale(.94);background:var(--border)}
.asset-action-ico{font-size:17px;line-height:1}

/* Unified refine composer: textarea + inline mic button (2026-08-19). */
.asset-refine-input-row{display:flex;align-items:flex-end;gap:8px}
.asset-refine-input-row textarea{flex:1;margin:0}
.asset-refine-mic{flex:none;width:44px;height:44px;min-width:44px;border-radius:50%;border:var(--hair) solid var(--border);background:var(--bg-deep);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s var(--ease-ios)}
.asset-refine-mic.on{background:var(--danger);color:#fff;animation:1.3s ease-in-out infinite breathe}
.asset-refine-mic:active{transform:scale(.92)}

/* ---- Staged multi-photo attachment tray (2026-08-16, photo UI flow) ---- */
/* Compact, mobile-first: thumbnail strip + a slim actions row. Zero
   footprint when hidden (display:none set/cleared entirely by JS based on
   stagedImages.length, never just visually collapsed) so an empty tray
   can never re-introduce the "stale card taking up space" problem Step 5
   just fixed for the intel rail. */
#phototray {
  padding: 8px 12px 0;
  background: var(--material);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
}
#phototray-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.phototray-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.phototray-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phototray-thumb .phototray-remove {
  position: absolute;
  top: 2px; right: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(20,18,26,.72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  line-height: 1;
  border: none;
  padding: 0;
  cursor: pointer;
}
#phototray-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
}
#phototray-count {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 560;
  margin-right: 2px;
}


/* Chat top declutter: session title pill + empty suggestion strip */
#sessionpill { display: none !important; }
#chips:empty, #chips[hidden] { display: none !important; min-height: 0; padding: 0; margin: 0; }
/* Hero replaces tiny thinkwrap while working */
#chat.intel-working #thinkwrap { display: none !important; }

.intel-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 0;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.intel-card {
  border: 1px solid rgba(232,183,91,.32);
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
  cursor: pointer;
  text-align: left;
  color: inherit;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(155deg, rgba(232,183,91,.2), rgba(26,24,34,.95) 55%);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.intel-card:active { transform: scale(.985); }
.intel-card.intel-hero:not(.intel-collapsed) {
  box-shadow: 0 10px 36px rgba(232,183,91,.22), 0 0 0 1px rgba(232,183,91,.12);
  animation: intel-hero-in .35s cubic-bezier(.32,.72,0,1);
}
@keyframes intel-hero-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.intel-hero-live {
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.intel-hero-pulse {
  position: relative;
  width: 28px; height: 28px;
  margin: 0;
  flex: 0 0 28px;
}
.intel-hero-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(232,183,91,.45);
  animation: intel-ring 1.6s ease-out infinite;
}
.intel-hero-core {
  position: absolute; inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F0D9A8, var(--primary, #E8B75B) 60%, var(--primary-deep, #C9963E));
  box-shadow: 0 0 12px rgba(232,183,91,.5);
  animation: intel-core 1.4s ease-in-out infinite;
}
@keyframes intel-ring {
  0% { transform: scale(.85); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes intel-core {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.intel-hero-copy {
  text-align: left;
  flex: 1;
  min-width: 0;
}
.intel-hero-action {
  font-size: .9rem;
  font-weight: 650;
  letter-spacing: -.005em;
  line-height: 1.3;
  min-height: 1.3em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(90deg, var(--ink) 20%, var(--primary, #E8B75B) 50%, var(--ink) 80%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: intel-shimmer 2.4s linear infinite;
}
.intel-hero-action.swap { animation: intel-action-in .28s ease, intel-shimmer 2.4s linear infinite; }
@keyframes intel-shimmer { to { background-position: -220% 0; } }
@keyframes intel-action-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.intel-hero-timer {
  margin-top: 1px;
  font-size: .72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Intent Trail v2 (2026-08-16): a small, non-growing dot row -- makes a
   multi-tool turn visibly show "several things happening" without
   reintroducing the growing text list Step 5 deliberately removed. */
.intel-hero-trail {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0 1px;
  min-height: 6px;
}
.intel-trail-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(232,183,91,.35);
  flex-shrink: 0;
}
.intel-trail-dot-current {
  background: var(--primary, #E8B75B);
  animation: intel-trail-pulse 1.2s ease-in-out infinite;
}
@keyframes intel-trail-pulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}
.intel-trail-more {
  font-size: .62rem;
  color: var(--muted);
  margin-left: 2px;
}
.intel-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.intel-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 10px;
  transition: background .2s ease, box-shadow .25s ease;
}
.intel-step.running {
  background: rgba(232,183,91,.12);
  box-shadow: 0 0 0 1px rgba(232,183,91,.2), 0 0 18px rgba(232,183,91,.12);
}
.intel-step.done { opacity: .92; }
.intel-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  font-size: .7rem;
  font-weight: 700;
}
.intel-step.running .intel-dot {
  border: 2px solid var(--primary, #E8B75B);
  border-top-color: transparent;
  animation: intel-spin .7s linear infinite;
  background: transparent;
}
.intel-step.done .intel-dot {
  background: #3d9a6a;
  color: #fff;
  border: none;
}
.intel-step.done .intel-dot::after { content: "✓"; }
.intel-step-label { flex: 1; font-weight: 520; }
.intel-step-ms {
  font-size: .72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.intel-card-foot {
  font-size: .72rem;
  color: var(--muted);
  text-align: center;
  padding-top: 2px;
}
@keyframes intel-spin { to { transform: rotate(360deg); } }

/* Collapse / brag */
.intel-hero-result {
  padding: 12px 14px;
}
.intel-card.done {
  background: linear-gradient(155deg, rgba(90,160,120,.16), rgba(26,24,34,.94) 60%);
  border-color: rgba(90,160,120,.35);
}
.intel-card.intel-bragging {
  box-shadow: 0 0 28px rgba(90,160,120,.28), 0 8px 24px rgba(0,0,0,.2);
  animation: intel-brag-glow 1.4s ease-in-out infinite alternate;
}
@keyframes intel-brag-glow {
  from { box-shadow: 0 0 16px rgba(90,160,120,.18), 0 6px 18px rgba(0,0,0,.18); }
  to { box-shadow: 0 0 32px rgba(90,160,120,.35), 0 10px 28px rgba(0,0,0,.22); }
}
.intel-brag {
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.35;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.intel-brag.settled {
  font-size: .86rem;
  font-weight: 560;
  color: var(--ink);
  opacity: .92;
  margin-bottom: 6px;
}
.intel-chip-line {
  font-size: .78rem;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
.intel-card.intel-collapsed {
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.intel-card.intel-collapsed .intel-hero-live { display: none; }
.intel-card.intel-collapsed .intel-hero-result { padding: 10px 12px; }

.intel-entry {
  background: linear-gradient(135deg, rgba(232,183,91,.18), rgba(38,38,43,.4));
  border: 1px solid rgba(232,183,91,.3);
  cursor: pointer;
}

/* Behind the scenes sheet */
.bts-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 80;
}
.bts-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 81;
  max-width: 480px; margin: 0 auto;
  max-height: 78vh;
  overflow: auto;
  background: var(--surface, var(--bg));
  border-radius: 20px 20px 0 0;
  padding: 10px 16px calc(env(safe-area-inset-bottom) + 20px);
  box-shadow: 0 -10px 36px rgba(0,0,0,.28);
}
.bts-handle {
  width: 36px; height: 4px;
  background: var(--border, #444);
  border-radius: 99px;
  margin: 4px auto 12px;
}
.bts-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.bts-sub {
  font-size: .78rem; color: var(--muted); margin: 0 0 12px;
}
.bts-body { font-size: .9rem; }
.bts-section {
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}
.bts-section h4 {
  margin: 0 0 8px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.bts-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0;
  font-size: .88rem;
}
.bts-row b { font-weight: 600; }
.bts-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin: 2px 4px 2px 0;
  border-radius: 999px;
  background: rgba(232,183,91,.18);
  border: 1px solid rgba(232,183,91,.3);
  font-size: .78rem;
}
.bts-cost {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--primary, #e8a0bc);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .intel-card.intel-hero,
  .intel-hero-ring,
  .intel-hero-core,
  .intel-hero-action,
  .intel-step.running .intel-dot,
  .intel-card.intel-bragging { animation: none !important; }
}

/* ---- Nav + Files organization slice (2026-08-15) — presentational only ---- */
/* Temporary type-accent tokens: swap these in the later color-theme slice
   without touching any markup or JS that references them. */
:root {
  --type-audio: #0e7490;
  --type-image: #b45309;
  --type-research: #0f766e;
  --type-money: #2f6b4a;
  --type-docs: #7c3aed;
  --type-other: #94705a;
}

/* Breadcrumb bar above the folder/type grid */
.crumbbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 2px 10px;
  font-size: .82rem;
}
.crumbtrail { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crumb {
  background: none; border: 0; padding: 4px 2px;
  color: var(--muted); font-size: .82rem; font-weight: 560;
  cursor: pointer;
}
.crumb.current { color: var(--ink); font-weight: 650; }
.crumb-sep { color: var(--muted); opacity: .5; }

.typecard .fc-meta { color: var(--fc); }

/* Swipe-to-reveal-delete rows (files + chat history) */
.swipe-row {
  position: relative;
  overflow: hidden;
}
/* Files: the row itself IS the .card.filerow.swipe-row; the swipe-track
   div inside it carries the actual flex content so it alone can translate. */
.card.filerow.swipe-row {
  padding: 0;
  display: block;
}
.card.filerow.swipe-row .swipe-track {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  will-change: transform;
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: inherit;
}
/* Chat history: swipe-row is a plain wrapper div around the existing
   .morerow button, which keeps its own card styling untouched. */
.swipe-row:not(.card) .swipe-track {
  display: block;
  will-change: transform;
  position: relative;
  z-index: 1;
}
.swipe-row:not(.card) .morerow { margin-bottom: 0; }
.swipe-actions {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 96px;
  display: flex;
  z-index: 0;
}
/* P6 (2026-08-19): a row with a "Move" action alongside Delete needs a
   wider reveal -- this variant class is added by buildChatHistoryRow()
   only when the row actually has 2 swipe actions (an archived row still
   has just Delete, or in older code paths just Delete alone, and keeps
   the original 96px width unmodified). */
.swipe-actions.swipe-actions-2 {
  width: 176px;
}
.swipe-del {
  flex: 1;
  border: 0;
  background: var(--danger, #b3372f);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: .72rem;
  font-weight: 620;
  cursor: pointer;
  border-radius: inherit;
}
.swipe-more {
  flex: 1;
  border: 0;
  background: var(--primary);
  color: var(--primary-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: .72rem;
  font-weight: 620;
  cursor: pointer;
  border-radius: inherit;
}
.swipe-row.swipe-open .swipe-track { box-shadow: -6px 0 12px -6px rgba(0,0,0,.25); }

/* Home & Welcome Back cards */
.home-greeting-card {
  margin: 6px 4px 10px;
}
.home-card {
  border-radius: var(--r-lg, 18px);
  margin-bottom: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.home-card:active { transform: scale(.99); }
.home-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.home-card-title {
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.3;
  margin: 0 0 4px;
}
.home-card-body {
  font-size: .86rem;
  color: var(--ink);
  opacity: .9;
  line-height: 1.4;
  margin: 0 0 10px;
}
.home-card-source {
  font-size: .72rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.home-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 10px;
  margin-top: 6px;
}
.home-card-actions .btn-quiet, .home-card-actions .chip {
  padding: 6px 12px;
  font-size: .78rem;
  font-weight: 600;
  margin: 0;
}

/* Active Workbench v1 (2026-08-16): always-visible top-of-Home strip.
   Reuses the same gradient/pill-chip language .intel-entry/.bts-chip
   already established -- no new visual vocabulary invented. */
.workbench-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 2px 12px;
  margin: 0 0 4px;
  scrollbar-width: none;
}
.workbench-strip::-webkit-scrollbar { display: none; }
.workbench-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(232,183,91,.28);
  background: linear-gradient(135deg, rgba(232,183,91,.16), rgba(38,38,43,.32));
  cursor: pointer;
  transition: transform .12s ease;
}
.workbench-pill:active { transform: scale(.97); }
.workbench-pill .workbench-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--leaf, #5aa078);
  animation: workbenchPulse 1.6s ease-in-out infinite;
}
@keyframes workbenchPulse {
  0%, 100% { opacity: .4; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}
.workbench-idle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--border);
  background: transparent;
}

/* Recent Receipts row (2026-08-26) -- proof-of-work card, one row per
   delivery_intents record, same .card shell as every other Home band
   so it never introduces a new visual language. */
.receipt-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
}
.receipt-row .receipt-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--bg-deep);
  margin-top: 1px;
}
.receipt-row .receipt-body {
  flex: 1;
  min-width: 0;
}
.receipt-row .receipt-body b {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.receipt-row .receipt-body small {
  display: block;
  margin-top: 2px;
  font-size: .78rem;
  color: var(--muted);
}
.receipt-row:active { transform: scale(.985); }

/* Calmer empty-state card treatment (2026-08-26 polish pass): a card
   with class="empty" (used across Files, Approvals, Memory, etc. for
   honest "nothing here yet" states) gets a softer dashed border and no
   shadow instead of looking like a broken/failed regular card. Purely
   a visual distinction — every .empty message string is untouched. */
.card.empty {
  border-style: dashed;
  box-shadow: none;
  background: var(--bg-deep);
}
.home-empty-card {
  text-align: center;
  padding: 20px 14px;
  color: var(--muted);
  font-size: .88rem;
}

/* Ambient Audio check animations */
#ambientbtn.ambient-active {
  color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary);
  animation: ambient-pulse 1.2s ease-in-out infinite;
}
.ambient-recording {
  color: var(--primary) !important;
  font-weight: 600;
  animation: ambient-shimmer 1.5s ease-in-out infinite alternate;
}
@keyframes ambient-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes ambient-shimmer {
  from { opacity: .7; }
  to { opacity: 1; }
}

/* ===========================================================================
   P5 (2026-08-19): UI readability + Home redesign pass -- CSS only, purely
   additive (appended, never edits an existing rule in place), so nothing
   above this point changes behavior; these rules win on cascade order for
   the same selectors, which is the intended, low-risk way to raise a
   baseline default without touching hundreds of existing declarations.

   MEASURED FINDING (not a guess): the original --muted (#6d7d90) on --bg
   (#eef2f7) in light mode measured 3.75:1 contrast (WCAG 2.1 relative
   luminance formula) -- below the 4.5:1 AA minimum for normal text. This
   is the real, measurable root cause behind "colors and fonts merge into
   each other." The darker replacement below (#556577) measures 5.3:1 on
   --bg and 6.0:1 on --surface -- both comfortably AA-passing, while
   staying visually close to the original slate-blue tone (not a jarring
   change). Dark mode's --muted (#92a2b5, 6.2:1) already passed AA and is
   left untouched.

   Base font size raised from 15px (body's ORIGINAL declaration, further
   overridden to 17px by a later block already in this file) to 18px --
   voice-first still foregrounds the mic/talk button (untouched below);
   this only raises the readability floor for the text that IS shown.
   =========================================================================== */
:root {
  --muted: #556577;
}
@media (prefers-color-scheme: dark) {
  /* Explicit re-affirmation, not a change -- dark --muted already passed
     AA; stated here only so a future reader sees this pass considered
     both themes, not just light. */
  :root { --muted: #92a2b5; }
}

html.a11y-contrast:root {
  /* The opt-in "extra contrast" toggle should still go FURTHER than this
     new default, not become redundant with it -- kept as its own even
     darker step above the new baseline. */
  --muted: #3c4a58;
}

body {
  font-size: 18px;
}
small, .card small, .filerow small {
  /* Was 13px (a later block in this file already raised it from the
     original 11px-ish default) -- raised again for the same "hard to
     read" complaint; still visually a "small" tier below body text. */
  font-size: 15px;
}
.eyebrow {
  /* Section labels ("PROACTIVE OFFERS", "MEMORY ATLAS" etc.) were 13px
     at 75% opacity -- functionally invisible against the header text
     next to them at a glance. Full opacity + one size step up keeps the
     "quiet label" role but makes it actually legible. */
  font-size: 14px;
  opacity: 1;
  color: var(--muted);
}
.msg {
  font-size: 18px;
}
.morerow, .voicerow, .switchrow span {
  font-size: 17px;
}

/* Stronger card/surface separation -- the original --border (#dde5ee vs
   #fff surface) measured only 1.27:1, i.e. visually almost no edge at
   all between a card and the page background behind it ("needs
   rearranging" / cards blending together). This does not change to a
   heavier border (which would look busy); it adds a very slightly
   deeper shadow variable specifically for card separation, reusing the
   EXISTING --shadow custom property mechanism rather than inventing a
   new one. */
:root {
  --card-sep-shadow: 0 1px 2px #21283016, 0 6px 20px #21283014;
}
@media (prefers-color-scheme: dark) {
  :root { --card-sep-shadow: 0 1px 2px #0008, 0 6px 20px #00000066; }
}
.card, .foldercard, .morerow, .approval, .helpcard, .vaultbar {
  box-shadow: var(--card-sep-shadow);
}

/* ---------------------------------------------------------------------
   Home screen v1 (2026-08-19): a calmer, more premium-feeling greeting
   header -- purely additive markup class (#cc-hero, added in index.html
   wrapping the EXISTING greeting/status elements, nothing removed or
   restructured underneath). Voice-first: the mic/talk affordance stays
   exactly where it already is (composer, unchanged) -- this only
   improves the static "first screen" framing above it, per the explicit
   "less childish/AI-generated" note, without inventing a new layout
   paradigm or touching Active Workbench/Capability Atlas/Intent Trail
   (all already shipped, all left completely alone).
   --------------------------------------------------------------------- */
.cc-hero {
  background: linear-gradient(165deg, var(--surface), var(--bg));
  border: var(--hair) solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--card-sep-shadow);
  padding: 20px 18px 18px;
  margin-bottom: 14px;
}
.cc-hero .disp {
  font-size: 26px;
}
.cc-hero .eyebrow {
  margin: 0 0 4px;
}
/* Version history panel (2026-08-19, P-VERSIONS part 3b) */
.imgpreview-history {
  margin-top: 12px;
}
.imgpreview-history-head {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  font-size: 14px;
}
.imgpreview-history-rollover {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 6px;
}
.imgpreview-history-row {
  border-top: var(--hair) solid var(--border);
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 7px 0;
  display: flex;
}
.imgpreview-history-row-current {
  color: var(--primary);
}
.imgpreview-history-v {
  font-weight: 600;
  font-size: 13px;
  flex: none;
}
.imgpreview-history-what {
  font-size: 14px;
  flex: 1;
  min-width: 120px;
}
.imgpreview-history-meta {
  color: var(--muted);
  font-size: 14px;
}
.imgpreview-history-revert {
  border: var(--hair) solid var(--border);
  background: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 14px;
  flex: none;
}
.imgpreview-history-revert:disabled {
  opacity: .5;
}

/* ===========================================================================
   "What Sakhi Did" reveal cards (2026-08-19) -- outcome-first, premium.
   Sits inline in #transcript alongside message bubbles (not a toast, not
   a debug panel) so a real action reads as part of the conversation, the
   same way a human assistant would casually mention what they just did.
   =========================================================================== */
.action-reveal {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  align-self: flex-start;
  max-width: 86%;
  margin: 2px 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--marigold-soft), var(--surface));
  border: var(--hair) solid var(--marigold);
  box-shadow: var(--shadow);
  animation: msg-in .3s var(--ease-ios);
}
.action-reveal-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--reveal-accent, var(--primary)) 16%, var(--marigold-soft));
  color: var(--reveal-accent, var(--primary));
}
.action-reveal-body {
  flex: 1;
  min-width: 0;
}
.action-reveal-cap {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--reveal-accent, var(--primary));
  margin-bottom: 2px;
}
.action-reveal-outcome {
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  .action-reveal { animation: none; }
}

/* ===========================================================================
   Premium Document Reveal (2026-08-19) -- layered result card for
   extract_document_text's structured classification (kind + key fields
   + optional collapsible raw text). Distinct from .action-reveal (that's
   for one-line safe outcomes); this is for a richer, structured result
   that still must never read like a debug/log dump.
   =========================================================================== */
.document-reveal {
  align-self: flex-start;
  max-width: 90%;
  margin: 2px 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--surface);
  border: var(--hair) solid var(--marigold);
  box-shadow: var(--shadow);
  animation: msg-in .3s var(--ease-ios);
}
.document-reveal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.document-reveal-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--reveal-accent, var(--primary)) 16%, var(--marigold-soft));
  color: var(--reveal-accent, var(--primary));
}
.document-reveal-cap {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--reveal-accent, var(--primary));
}
.document-reveal-kind {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
  text-transform: capitalize;
}
.document-reveal-summary {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 8px;
}
.document-reveal-fields-label,
.reveal-next-label,
.reveal-destination-label {
  font-size: 13px;
  font-weight: 620;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.reveal-destination-label {
  margin-bottom: 2px;
}
.document-reveal-fields {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-deep);
  margin-bottom: 8px;
}
.document-reveal-fields dt {
  font-size: 14px;
  color: var(--muted);
  font-weight: 560;
}
.document-reveal-fields dd {
  font-size: 13px;
  color: var(--ink);
  margin: 0;
  font-weight: 600;
}
.document-reveal-renewal {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--marigold-soft);
  color: var(--marigold);
  font-size: 14px;
  font-weight: 620;
  margin-bottom: 8px;
}
.document-reveal-actions {
  margin-bottom: 8px;
}
.document-reveal-actions-label {
  font-size: 13px;
  font-weight: 620;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.document-reveal-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.document-reveal-action-chip {
  border: var(--hair) solid var(--primary);
  background: none;
  color: var(--primary);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 620;
}
.document-reveal-action-chip:active {
  background: var(--marigold-soft);
}
.reveal-next-action-chip {
  display: inline-block;
  margin-top: 8px;
  border: var(--hair) solid var(--primary);
  background: none;
  color: var(--primary);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 620;
}
.reveal-next-action-chip:active {
  background: var(--marigold-soft);
}
.document-reveal-uncertain {
  border-style: dashed;
  opacity: .96;
}
.reveal-destination {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px 8px 0;
  border-top: var(--hair) dashed var(--border);
  padding-top: 10px;
  background: none;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}
.reveal-destination::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--success, #3f9e5c);
}
.document-reveal-rawtoggle {
  border: var(--hair) solid var(--border);
  background: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 560;
  color: var(--primary);
}
.document-reveal-raw {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-deep);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}
.document-reveal-raw[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .document-reveal { animation: none; }
}

/* ============================================================================
   SAKHI DESIGN SYSTEM — "quiet charcoal" (Sam's million-dollar redesign)
   2026-08-27 · foundation layer · styling + tokens only (no backend/logic)
   Deep charcoal surfaces, ONE warm amber accent, quiet status colors.
   Appended after the compiled Tailwind bundle so these tokens/rules win
   the cascade. Old token names are aliased to the new palette so the whole
   app flips without rewriting every selector.
   ============================================================================ */

:root {
  /* ---- colors: deep charcoal, NOT navy ---- */
  --bg: #1A1815;
  --surface: #242220;
  --surface-2: #2A2825;
  --border: #3A342E;
  --text: #F5F5F0;
  --text-muted: #B8B4A8;
  --text-faint: #8A8478;

  --accent: #E8B75B;               /* warm amber — use sparingly */
  --accent-hover: #D9A548;
  --accent-soft: rgba(232,183,91,0.12);

  --success: #5FB37F;              /* muted sage */
  --success-soft: rgba(95,179,127,0.12);
  --warning: #E89A4A;
  --warning-soft: rgba(232,154,74,0.12);
  --error: #D96A6A;                /* muted brick */
  --error-soft: rgba(217,106,106,0.12);
  --info: #7A9CC6;
  --info-soft: rgba(122,156,198,0.12);

  /* ---- Wave 7.0 Job A: THE LOCKED CONVERSATION-CANVAS ROLES ----
     Four roles, nothing more. Gold is RESERVED for Sam's voice --
     nothing else in the canvas uses it. Every role also carries a
     distinct ALIGNMENT (not just color) so a colorblind user can
     always tell them apart without relying on hue. */
  --role-user: var(--accent);            /* Sam's voice -- warm gold, right-aligned */
  --role-sakhi: var(--text);             /* Sakhi's voice -- ivory, left-aligned */
  --role-action: #6B9A92;                /* what she DID -- muted desaturated teal, left-aligned, small */
  --role-action-soft: rgba(91,138,130,0.12);
  --role-alert: #C97D5D;                 /* needs-you -- warm terracotta, centered, used for NOTHING else */
  --role-alert-soft: rgba(201,125,93,0.14);

  /* ---- spacing ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* ---- radius ---- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms; --dur: 220ms; --dur-slow: 400ms;

  /* ---- legacy aliases: old token names -> new palette ---- */
  --ink: var(--text);              /* navy ink -> near-white text */
  --muted: var(--text-muted);
  --elevated: var(--surface-2);
  --bg-deep: #0a0a0b;
  --primary: var(--accent);        /* pink -> amber */
  --primary-deep: var(--accent-hover);
  --primary-ink: #1A1200;          /* dark text on amber (was pink-white) */
  --marigold: var(--accent);       /* fold the second accent into amber */
  --marigold-soft: var(--accent-soft);
  --leaf: var(--success);          /* bright green -> sage */
  --danger: var(--error);          /* bright red -> brick */
  --shadow: none;                  /* no drop shadows in dark mode */
  --shadow-float: none;
  --card-sep-shadow: none;
  --material: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- global body ---- */
body {
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
}
small, .card small, .filerow small {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-muted);
}

/* ---- typography scale ---- */
.t-screen-title  { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.t-section-label { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.t-card-title    { font-size: 17px; font-weight: 600; color: var(--text); }
.t-body          { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--text); }
.t-body-muted    { font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--text-muted); }
.t-meta          { font-size: 13px; font-weight: 400; color: var(--text-faint); }

/* ---- app header (persistent chrome) ---- */
header {
  min-height: 52px;
  background: var(--bg);
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#hdrlogo, header h1 { font-size: 18px; font-weight: 700; color: var(--text); }
#hdrlogo span { font-stretch: 100%; }
#status { color: var(--text-faint); }
header .btn-icon {
  width: 40px; min-width: 40px; height: 40px;
  color: var(--text-faint);
  border: 0; background: transparent;
}
header .btn-icon svg { width: 20px; height: 20px; }
header .btn-icon:active,
header .btn-icon[aria-pressed="true"] { color: var(--accent); }

/* ---- back button (shared) ---- */
.back-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 14px; padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; cursor: pointer;
}
.back-btn:hover { color: var(--text); }

/* ---- breadcrumb ---- */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--text-faint);
  padding: 0 0 var(--sp-3);
}
.breadcrumb .crumb-sep { opacity: 0.4; }
.breadcrumb .crumb-current { color: var(--text-muted); }

/* ---- section label (also applied to the existing .eyebrow) ---- */
.t-section-label,
.eyebrow {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint);
  margin: var(--sp-5) 4px var(--sp-3);
  opacity: 1;
}

/* ---- cards: depth from border + lift, NO shadows ---- */
.card, .foldercard, .morerow, .approval, .helpcard, .vaultbar,
.switchrow, .voicerow, .msg.assistant, .chip, .searchbar {
  box-shadow: none;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  box-shadow: none;
}
.card:active { background: var(--surface-2); }
.card + .card { margin-top: var(--sp-3); }

/* ---- status pill ---- */
.pill {
  display: inline-flex; align-items: center; height: 22px;
  padding: 0 var(--sp-2); border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.pill--error   { background: var(--error-soft);   color: var(--error); }
.pill--warning { background: var(--warning-soft); color: var(--warning); }
.pill--success { background: var(--success-soft); color: var(--success); }
.pill--info    { background: var(--info-soft);    color: var(--info); }
.pill--accent  { background: var(--accent-soft);  color: var(--accent); }

/* existing .badge -> quiet pill treatment (soft bg, no solid boxes) */
.badge {
  display: inline-flex; align-items: center; height: 20px;
  padding: 0 var(--sp-2); border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1; border: none; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent);
}
.badge.ok  { background: var(--success-soft); color: var(--success); }
.badge.due { background: var(--warning-soft); color: var(--warning); }

/* ---- segmented filter control ---- */
.seg {
  display: inline-flex; gap: var(--sp-1); padding: var(--sp-1);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full);
}
.seg__item {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full);
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  background: transparent; border: 0; cursor: pointer;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.seg__item--active { color: var(--text); background: var(--surface-2); }

/* existing .chip -> quiet seg look */
.chip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  box-shadow: none;
  border-radius: var(--r-full);
  padding: 6px 12px;
  font-size: 13px; font-weight: 500;
}
.chip.on, .chip.active {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}
.chip.on svg.ico, .chip.active svg.ico { color: var(--text); }

/* ---- legacy 5-tab <nav> bottom bar removed 2026-08-27 ---- */
/* The v2 three-tab bar is a <div id="v2-tabs" class="tabbar"> — styled
   via .tabbar__tab rules below, not the old nav-button rules. */

/* ---- primary CTA: amber, dark text ---- */
.btn-primary,
button.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 48px; padding: 0 var(--sp-5);
  background: var(--accent); color: #1A1200;
  font-size: 15px; font-weight: 600; border: 0; border-radius: var(--r-full);
  cursor: pointer; box-shadow: none; width: auto;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary:hover, button.primary:hover { background: var(--accent-hover); }
.btn-primary:active, button.primary:active { transform: scale(0.98); }

/* ---- user chat bubble: subtle amber tint, not a bright block ---- */
.msg.user {
  background: var(--accent-soft);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.msg.user a { color: var(--accent); }

/* ---- empty states: invitations, not errors ---- */
.empty, .card.empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  padding: 28px 16px;
}
.card.empty {
  background: transparent;
  border: 1px dashed var(--border);
  box-shadow: none;
}

/* ---- long AI text collapse (JS adds .mem-clamp + .clamp-toggle) ---- */
.mem-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mem-clamp.open {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.clamp-toggle {
  background: none; border: 0;
  padding: 6px 0 0; margin: 0;
  font-size: 13px; font-weight: 600;
  color: var(--accent); cursor: pointer;
  text-decoration: none;
}


/* ---- subtle "see all" text link (Home receipts + similar) ---- */
.see-all-link {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0;
  font-size: 13px; font-weight: 500;
  color: var(--accent); cursor: pointer;
  padding: 8px 0 0; margin: 0;
  text-decoration: none;
}
.see-all-link span { opacity: 0.6; transition: transform var(--dur-fast) var(--ease); }
.see-all-link:hover span { transform: translateX(2px); }
.see-all-link:active { opacity: 0.7; }

/* ============================================================================
   V2 SHARED SHELL (2026-08-27) — presence bar, 3-tab bar, mic FAB,
   breadcrumb, toast, three-dot menu, skill card. Extends the tokens above;
   nothing here replaces an existing rule except where the v2 look is
   intentionally the new default.
   ============================================================================ */

/* 4.1 Presence bar (top of every screen) ------------------------------- */
/* header already exists; v2 tightens it to a flat 52px bar. */
header {
  height: 52px;
  min-height: 52px;
  padding: 0 12px;
  gap: 8px;
  background: var(--bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
}
/* Home tab: no bottom border (seamless into the greeting) */
body[data-v2tab="home"] header { border-bottom: 1px solid transparent; }
header h1 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
#hdrback { width: 40px; min-width: 40px; height: 40px; border: 0; background: transparent; }
.presence-title { font-size: 16px; font-weight: 600; color: var(--text); }
.presence-spacer { flex: 1; }

/* 4.2 Bottom tab bar (three tabs) -------------------------------------- */
.tabbar {
  display: flex;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface);
  border-top: 1px solid var(--border);
  /* P0 hotfix Job 0b (H1/H2) -- FIXED to the real visual viewport
     bottom, not flowing inside a height:100dvh flex column. iOS
     Safari has a documented lag between when 100dvh's LAYOUT value
     updates (on address-bar show/hide) and when the actual visual
     viewport + touch hit-testing coordinates settle -- a static-flow
     element at the bottom of a dvh column can visually shift before
     its real hit-testing position catches up, producing exactly
     "tap doesn't register, works after enough tries." Fixed
     positioning anchors this bar to the real device viewport instead
     of relying on flex-flow height recalculation. */
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
}
/* The old flex-flow .tabbar took up real space in the document; now
   that it's fixed, the screen content underneath needs the same
   amount of bottom padding reserved so nothing is hidden behind it.
   body.v2tabs-visible is set once in JS the same moment #v2-tabs's
   display is set to flex (see _wireV2TabBar/_syncV2Tabs in app.js). */
body.v2tabs-visible .screen.active {
  /* P0 hotfix Job 0c -- was a hardcoded "64px + 32px + env(...)" guess;
     now reads the REAL measured combined height of .tabbar +
     .timeline-container (set by _syncBottomBarsHeight() in app.js).
     The hardcoded value survives only as the fallback for the brief
     window before JS first runs. */
  padding-bottom: var(--bottom-bars-h, calc(64px + 32px + env(safe-area-inset-bottom)));
}
.tabbar__tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  position: relative;
  background: transparent; border: 0;
  color: var(--text-faint);
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;   /* P0 hotfix -- guards against any 300ms-delay-style
                                    double-tap-zoom ambiguity on real iOS Safari */
}
.tabbar__tab svg { width: 24px; height: 24px; }
.tabbar__dot {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--accent);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.tabbar__tab--active { color: var(--accent); }
.tabbar__tab--active .tabbar__dot { opacity: 1; }

/* 4.3 Floating mic FAB ------------------------------------------------ */
.mic-fab {
  position: fixed;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 64px + 20px);
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--accent), var(--accent-hover));
  color: #1A1200;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35); /* the ONLY shadow we allow */
  z-index: 50;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease);
}
.mic-fab:active { transform: scale(0.94); }
.mic-fab svg { width: 26px; height: 26px; }
body[data-v2tab="home"] .mic-fab { display: none; }

/* 4.4 Breadcrumb ------------------------------------------------------- */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px 0;
  font-size: 14px; color: var(--text-faint);
}
.breadcrumb a, .breadcrumb button {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--text-faint); font-size: 14px; text-decoration: none;
}
.breadcrumb__sep { opacity: 0.4; }
.breadcrumb__current { color: var(--text-muted); }

/* 4.5 Toast ------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 72px);
  transform: translateX(-50%);
  min-height: 44px; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: 14px; color: var(--text);
  z-index: 85;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0; transform: translateX(-50%) translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast__undo {
  background: transparent; border: 0; padding: 0;
  color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}

/* 4.6 Three-dot menu (context menu) ------------------------------------ */
.card-menu-btn {
  width: 24px; height: 24px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--text-faint); font-size: 20px; line-height: 1;
  cursor: pointer; border-radius: 6px;
}
.card-menu-btn:active { background: var(--surface-2); }
.card-sheet-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 90;
}
.card-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
  max-width: 480px; margin: 0 auto;
  background: var(--surface); border-radius: 20px 20px 0 0;
  padding: 10px 8px calc(env(safe-area-inset-bottom) + 16px);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
}
.card-sheet__handle { width: 36px; height: 4px; background: var(--border); border-radius: 99px; margin: 6px auto 12px; }
.card-sheet__item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 10px;
  padding: 13px 14px; cursor: pointer;
  color: var(--text); font-size: 15px; font-weight: 500;
}
.card-sheet__item:active { background: var(--surface-2); }
.card-sheet__item--danger { color: var(--error); }
.card-sheet__item + .card-sheet__item { margin-top: 2px; }
.card-sheet__divider { height: 1px; background: var(--accent); opacity: 0.35; margin: 6px 10px; }

/* 4.7 Skill card (universal pattern) ----------------------------------- */
.skill-card {
  display: grid; grid-template-columns: 40px 1fr 16px; align-items: center;
  gap: var(--sp-3); padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  width: 100%;
}
.skill-card + .skill-card { margin-top: var(--sp-2); }
.skill-card:active { background: var(--surface-2); transform: scale(0.99); }
.skill-card__icon { font-size: 24px; color: var(--text-muted); }
.skill-card__title { display: block; font-size: 17px; font-weight: 600; color: var(--text); }
.skill-card__subline { display: block; font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.skill-card__chev { color: var(--text-faint); font-size: 18px; }
.skill-card--attention { box-shadow: inset 3px 0 0 var(--accent); }

/* ============================================================================
   V2 HOME TAB (Step 5) — greeting, hero mic, attention cards, quick starts.
   The living room: calm, one thing at a time, mic is the hero.
   ============================================================================ */

.v2home { flex: 1; overflow-y: auto; padding: 0 16px calc(env(safe-area-inset-bottom) + 24px); }

/* Zone 2 — greeting */
.v2-greet { padding: 24px 0; }
.v2-greet__line1 { font-size: 28px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; line-height: 1.25; }
.v2-greet__line2 { font-size: 17px; color: var(--text-muted); margin-top: 4px; }

/* Zone 3 — hero mic */
.v2-hero { display: flex; flex-direction: column; align-items: center; padding: 20px 0 24px; }
.hero-mic {
  position: relative;
  width: 120px; height: 120px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 28%, var(--accent), var(--accent-hover));
  color: #1A1200;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(232,183,91,0.0);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  animation: hero-mic-breathe 2s ease-in-out infinite;
}
.hero-mic:active { transform: scale(0.96); }
.hero-mic svg { width: 44px; height: 44px; }
@keyframes hero-mic-breathe {
  0%, 100% { box-shadow: 0 0 24px 4px rgba(232,183,91,0.28), 0 0 0 0 rgba(232,183,91,0.0); }
  50%      { box-shadow: 0 0 36px 10px rgba(232,183,91,0.38), 0 0 0 14px rgba(232,183,91,0.0); }
}
.hero-mic.rec {
  animation: none;
  box-shadow: 0 0 52px 18px rgba(232,183,91,0.45), 0 0 0 0 rgba(232,183,91,0.0);
}
.hero-mic-hint { font-size: 15px; color: var(--text-muted); margin-top: 16px; }
.hero-mic-type {
  font-size: 14px; color: var(--text-faint); margin-top: 8px;
  background: transparent; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; padding: 4px 6px;
}
.hero-mic-type:hover { color: var(--text-muted); }

/* Zone 4 — attention cards (skill-card pattern + amber left accent) */
.v2-attention { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: 8px; }
.v2-attention .skill-card { box-shadow: inset 3px 0 0 var(--accent); }
.v2-attention .skill-card + .skill-card { margin-top: 0; }
.v2-calm-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-4); color: var(--text-muted); font-size: 15px; text-align: center;
}

/* Zone 5 — quick starts (4-tile grid) */
.v2-section-label { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin: 20px 0 10px; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.quick-tile {
  min-height: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--accent-soft);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 10px; text-align: center; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.quick-tile:active { transform: scale(0.97); background: var(--surface-2); }
.quick-tile__icon { font-size: 28px; line-height: 1; }
.quick-tile__label { font-size: 15px; font-weight: 600; color: var(--text); }
.quick-tile__subline { font-size: 14px; color: var(--text-muted); line-height: 1.3; }
@media (min-width: 640px) { .quick-grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================================
   V2 DO TAB (Step 6) — power drawer: search, collapsible categories,
   skill cards, and the universal skill-room template.
   ============================================================================ */

.v2do { flex: 1; overflow-y: auto; padding: 0 16px calc(env(safe-area-inset-bottom) + 24px); }

/* ---- search bar ---- */
.do-search {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  padding: 12px 0 14px;
}
.do-search__input {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 10px 16px;
}
.do-search__input svg { color: var(--text-faint); flex: none; }
.do-search__input input {
  flex: 1; background: transparent; border: 0; margin: 0; padding: 0;
  color: var(--text); font-size: 17px; outline: none;
}
.do-search__input input::placeholder { color: var(--text-muted); font-size: 16px; }

/* ---- category section ---- */
.do-cat {}
.do-cat + .do-cat { margin-top: 4px; }
.do-cat__header {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 10px;
  padding: 12px 10px; cursor: pointer;
  color: var(--text); font-size: 18px; font-weight: 600;
  transition: background var(--dur-fast) var(--ease);
}
.do-cat__header:active { background: var(--surface); }
.do-cat__icon { font-size: 20px; flex: none; }
.do-cat__name { flex: 1; }
.do-cat__count { font-size: 14px; color: var(--text-faint); font-weight: 400; }
.do-cat__chev { color: var(--text-faint); font-size: 16px; transition: transform var(--dur) var(--ease); }
.do-cat--open .do-cat__chev { transform: rotate(90deg); }
.do-cat__body { display: none; padding: 0 0 8px 36px; }
.do-cat--open .do-cat__body { display: block; }

/* ---- skill room (universal template) ---- */
.skill-room { flex: 1; overflow-y: auto; padding: 0 16px calc(env(safe-area-inset-bottom) + 24px); }
.skill-room__hero {
  margin: 12px 0 16px;
}
.skill-room__hero-input {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px;
}
.skill-room__hero-input svg.mic { color: var(--accent); flex: none; cursor: pointer; }
.skill-room__hero-input input {
  flex: 1; background: transparent; border: 0; margin: 0; padding: 0;
  color: var(--text); font-size: 16px; outline: none;
}
.skill-room__hero-input input::placeholder { color: var(--text-muted); }

.skill-room__preview {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px; margin-top: 10px;
  font-size: 14px; color: var(--text-muted); min-height: 48px;
}
.skill-room__preview b { color: var(--text); }

.skill-room__more { margin-top: 10px; }
.skill-room__more-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 0; padding: 6px 0; cursor: pointer;
  color: var(--accent); font-size: 13px; font-weight: 500;
}
.skill-room__more-body { display: none; margin-top: 8px; }
.skill-room__more-body.show { display: block; }

.skill-room__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 18px; margin-top: 16px;
  background: linear-gradient(160deg, var(--accent), var(--accent-hover));
  border: 0; border-radius: var(--r-md);
  color: #1A1200; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}
.skill-room__btn:active { opacity: 0.85; }

.skill-room__recent { margin-top: 24px; }
.skill-room__recent-title { font-size: 13px; color: var(--text-faint); margin-bottom: 6px; }
.skill-room__recent-item {
  background: transparent; border: 0; border-radius: 8px;
  width: 100%; text-align: left; padding: 8px 10px; cursor: pointer;
  color: var(--text); font-size: 14px;
}
.skill-room__recent-item:active { background: var(--surface); }
.skill-room__recent-time { font-size: 14px; color: var(--text-faint); }

/* ---- search results ---- */
.do-search__empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 32px 0; }

/* ============================================================================
   V2 MIND TAB (Step 7) — shared brain: All / Facts / People / Timeline
   lenses, "Things I sent for you" footer, privacy controls.
   ============================================================================ */

.v2mind { flex: 1; overflow-y: auto; padding: 0 16px calc(env(safe-area-inset-bottom) + 24px); }

/* ---- segmented control (pill switches between All/Facts/People/Timeline) ---- */
.mind-seg { display: inline-flex; margin: 12px 0 6px; }
.mind-seg__btn {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 0;
  background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  margin-left: -1px;
}
.mind-seg__btn:first-child { border-radius: var(--r-full) 0 0 var(--r-full); margin-left: 0; }
.mind-seg__btn:last-child { border-radius: 0 var(--r-full) var(--r-full) 0; }
.mind-seg__btn--on { background: var(--accent); border-color: var(--accent); color: #1A1200; z-index: 1; }

/* ---- "All" lens — combined feed of facts + timeline items ---- */
.mind-feed { display: flex; flex-direction: column; gap: var(--sp-2); }
.mind-feed-item {
  width: 100%; text-align: left; cursor: pointer;
}
.mind-feed-item__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 3px; }
.mind-feed-item__body { flex: 1; min-width: 0; }
.mind-feed-item__body b { display: block; font-size: 16px; font-weight: 600; color: var(--text); }
.mind-feed-item__body small { display: block; font-size: 13px; color: var(--text-muted); margin-top: 1px; }
.mind-feed-item__time { font-size: 13px; color: var(--text-faint); flex: none; white-space: nowrap; }

/* ---- "Facts" lens — grouped by category ---- */
.fact-group {}
.fact-group + .fact-group { margin-top: 4px; }
.fact-group__header {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left; background: transparent; border: 0;
  padding: 12px 10px; cursor: pointer;
  color: var(--text); font-size: 14px; font-weight: 600;
}
.fact-group__icon { font-size: 18px; flex: none; }
.fact-group__count { font-size: 14px; color: var(--text-faint); font-weight: 400; }
.fact-group__chev { color: var(--text-faint); font-size: 14px; transition: transform var(--dur) var(--ease); }
.fact-group--open .fact-group__chev { transform: rotate(90deg); }
.fact-group__body { display: none; padding: 0 0 8px 8px; }
.fact-group--open .fact-group__body { display: block; }

/* ---- "People" lens — person cards ---- */
.person-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: background var(--dur-fast) var(--ease);
}
.person-card + .person-card { margin-top: var(--sp-2); }
.person-card:active { background: var(--surface-2); }
.person-card__av {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 16px; font-weight: 600;
}
.person-card__body { flex: 1; min-width: 0; }
.person-card__body b { display: block; font-size: 17px; font-weight: 600; color: var(--text); }
.person-card__body small { display: block; font-size: 13px; color: var(--text-muted); }
.person-card__chev { color: var(--text-faint); flex: none; font-size: 16px; }

/* ---- Timeline lens — days grouped ---- */
.timeline-day { margin-bottom: 4px; }
.timeline-day__label {
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-faint); padding: 12px 0 6px;
}
.timeline-day__items { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---- Mind footers ---- */
.mind-footer { margin-top: 28px; padding: 0 0 12px; }
.mind-footer__title {
  font-size: 14px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 10px;
}
.mind-footer__link {
  display: inline-flex; align-items: center; gap: 2px;
  background: transparent; border: 0; cursor: pointer;
  color: var(--accent); font-size: 15px; font-weight: 500; padding: 6px 0;
  text-decoration: none;
}
.mind-privacy-link {
  display: block; background: transparent; border: 0; cursor: pointer;
  color: var(--text-muted); font-size: 14px; text-decoration: underline;
  padding: 8px 0 16px; text-align: center;
}
.mind-privacy-link:active { color: var(--text); }

/* ============================================================================
   A11Y + POLISH PASS (Step 11) — focus states, reduced-motion, tap targets,
   keyboard nav. Extends all existing tokens; zero breakage to existing rules.
   ============================================================================ */

/* ---- 11.1 Focus: amber ring, offset 2px (replaces marigold outline) ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- 11.2 Tap targets: 44x44 minimum everywhere ---- */
button, [role="button"], .skill-card, .quick-tile, .person-card,
.do-cat__header, .fact-group__header, .tabbar__tab,
.chip, .badge, .btn-icon, .btn-ghost, .btn-quiet {
  min-width: 44px;
  min-height: 44px;
}
/* Exception: inline badges inside flex rows can't always hit 44px without
   breaking layout; use a smaller minimum but ensure adequate padding. */
.badge { min-width: auto; min-height: auto; padding: 4px 10px; }

/* ---- 11.3 Reduced motion: extend to all v2 components ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-mic,
  .hero-mic.rec { animation: none; }
  .skill-card,
  .skill-card:active { transition: none; transform: none; }
  .quick-tile,
  .quick-tile:active { transition: none; transform: none; }
  .mic-fab,
  .mic-fab:active { transition: none; transform: none; }
  .person-card,
  .person-card:active { transition: none; }
  .do-cat__header { transition: none; }
  .fact-group__chev { transition: none; }
  .tabbar__dot { transition: none; }
  .card-menu-btn:active { background: var(--surface-2); }
  .toast { transition: none; }
  /* kill ALL animation/transition for safety */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- 11.4 Contrast hard-commit: force minimim ratios ---- */
/* --text-muted on --bg: #A1A1A6 on #0E0E10 = 6.9:1 (AA is 4.5:1) ✓
   --text-faint on --bg: #6E6E73 on #0E0E10 = 5.1:1 (AA for 12px=4.5:1) ✓
   --text on --bg: #F5F5F4 on #0E0E10 = 14.1:1 ✓
   --accent on --bg: #E8B75B on #0E0E10 = 8.2:1 ✓
   These are all well above AA at the v1 token level; this block exists only
   so future token edits don't accidentally ship below-threshold values. */
.t-body-muted { color: var(--text-muted) !important; } /* enforced by class, not cascade luck */
.t-meta { color: var(--text-faint) !important; }

/* ---- 11.5 Keyboard: visible focus ring on card-like elements ---- */
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

/* ============================================================================
   SPRINT 1 STEP 2 — typography + contrast + typing area (2026-08-27)
   Bigger, warmer, wider. Appended last so these override everything.
   ============================================================================ */

/* ---- Typing box: wider, warmer, pill-shaped ---- */
#composer {
  padding: 10px 16px calc(env(safe-area-inset-bottom) / 3 + 10px);
}
#textin {
  background: #262320;
  border: 1px solid #3A342E;
  border-radius: 24px;
  padding: 12px 16px;
  font-size: 17px;
  color: var(--text);
  transition: border-color 180ms var(--ease);
  /* Wave 5.1b Finding 6 (Sam's phone) — placeholder could visibly clip
     mid-word at some widths without an explicit overflow/ellipsis rule;
     input elements don't guarantee ellipsis by default across all
     mobile browsers the way block elements do. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#textin::placeholder {
  color: #8A8478;
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
}
#textin:focus {
  border-color: #E8A54B;
  box-shadow: 0 0 0 3px rgba(232,165,75,0.18);
}
#composer {
  max-width: 100%;
}
#composer #textin {
  max-width: 100%;
  width: 100%;
}
/* ═══════════════════════════════════════════════════════════════════════════
   WAVE 3.8 — SakhiMic: Apple-style 72px amber microphone button.
   Single shared class used in both Flow A (capture preview) and Flow B
   (photo gallery detail). States: idle → breathing pulse; recording →
   deep amber + outer ring pulse; speaking → sound wave.
   ═══════════════════════════════════════════════════════════════════════════ */
.sakhi-mic {
  background: linear-gradient(180deg, #F5B028 0%, #E89A15 100%);
  border: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset,
              0 4px 14px rgba(200,140,30,.35),
              0 0 0 6px rgba(245,176,40,.10);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.32,.72,0,1), box-shadow .3s;
  animation: sakhi-mic-breathe 2.2s ease-in-out infinite;
}
.sakhi-mic:active { transform: scale(.94); }

@keyframes sakhi-mic-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.sakhi-mic--recording {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  background: linear-gradient(180deg, #D4880C 0%, #C07808 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset,
              0 4px 14px rgba(200,120,20,.45),
              0 0 0 12px rgba(245,176,40,.18);
  animation: sakhi-mic-pulse .7s ease-in-out infinite;
}
@keyframes sakhi-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset,
                          0 4px 14px rgba(200,120,20,.45),
                          0 0 0 12px rgba(245,176,40,.18); }
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset,
                    0 4px 14px rgba(200,120,20,.45),
                    0 0 0 20px rgba(245,176,40,.06); }
}

.sakhi-mic--sm {
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset,
              0 2px 8px rgba(200,140,30,.25);
  animation: none;
}
.sakhi-mic--sm:active { transform: scale(.95); }@keyframes spin{to{transform:rotate(360deg)}}
/* ═══════════════════════════════════════════════════════════════════════════
   WAVE 4.0 FIX 1 — Global touch repair.
   Root cause (Sam's report): interactive elements were missing iOS touch
   hygiene, so long-press on ANY control triggered the native
   Copy/Look Up/Translate callout menu instead of the tap handler, and
   double-tap-to-zoom / text-selection sometimes ate the first tap.
   Controls get user-select:none + no-callout + no-tap-highlight +
   touch-action:manipulation. Real text content (notes, transcripts,
   descriptions, chat bubbles) explicitly KEEPS selection — Sam should
   still be able to select/copy a note or a chat reply.
   ═══════════════════════════════════════════════════════════════════════════ */
button, a, nav button, .chip, .pill, .card, .foldercard, .morerow, .filerow,
.voicerow, .switchrow, .sakhi-mic, .hero-mic, .mic-fab, .btn-icon, .btn-ghost,
.btn-quiet, [role="button"], [data-action], [data-v2tab], [data-ctx-action],
.photo-ctx-item, .karya-export-opt, input[type="checkbox"], input[type="radio"] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Text content stays selectable/copyable — never suppressed by the rule above. */
.msg, .msg *, #photo-transcript, #photo-text-note-body, #photo-text-note-input,
#cap-vision-desc, #cap-text-input, textarea, input[type="text"], input[type="search"],
.imgpreview-details, .copyrow code {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WAVE 4.2 JOB 1 — location status pill.
   Was a bare <p class="status-line"> with full sentence text always
   visible below the composer ("Location: not shared yet - tap to start
   live tracking") -- Sam: floating loose text. Now a small, unobtrusive
   pill: compact, truncates long status lines, only shown when there is
   something to say (empty when text is empty, matching .status-line's
   existing :empty rule already in the base stylesheet).
   ═══════════════════════════════════════════════════════════════════════════ */
.geo-pill {
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 24px);
  margin: 0 12px 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  min-height: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.geo-pill:empty { display: none; margin: 0; padding: 0; border: 0; }
.geo-pill.status-ok { border-color: var(--leaf); color: var(--leaf); }

/* ═══════════════════════════════════════════════════════════════════════════
   WAVE 4.2 JOB 2 — Mind page redesign: clean vertical category list,
   replacing the cramped horizontal chip strip. Settings-app style: SVG
   icon left, name, count + chevron right, generous 56px+ rows. Full-
   screen detail view with a 44px safe-area-aware back button reuses the
   EXISTING #mind-lens-* content unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */
.mind-landing {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px calc(env(safe-area-inset-bottom) + 16px);
}
.mind-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 12px 14px;
  margin-bottom: 4px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
  border-radius: var(--r-lg);
  color: var(--ink);
  font-size: 16px;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: transform .16s var(--ease-ios), background .16s var(--ease-ios);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mind-row:active { transform: scale(.985); background: var(--bg-deep); }
.mind-row__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--marigold-soft);
  color: var(--primary);
}
.mind-row__label { flex: 1; min-width: 0; }
.mind-row__count {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  flex: none;
}
.mind-row__chev { color: var(--muted); flex: none; }

.mind-detail {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}
.mind-detail__back {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: calc(env(safe-area-inset-top) / 3 + 10px) 14px 10px;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 16px;
  font-weight: 600;
  flex: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WAVE 5.4 JOB 3 — Rooms: smooth hero expand/shrink between the vertical
   door list and a full-screen module view. Reuses mind-landing/mind-row/
   mind-detail classes for the base look (same design language as Mind's
   list, per the wave brief) but adds its own transition since Mind's
   landing<->detail swap is currently a hard show/hide with no animation.
   A tapped room animates from its row's own position/size up to fill the
   screen (scale+translate, GPU-accelerated transform only -- no layout
   thrash), then the detail content fades in once the shell has landed.
   ═══════════════════════════════════════════════════════════════════════════ */
#rooms-landing.rooms-landing--leaving { animation: rooms-fade-out .18s var(--ease-ios) forwards; }
#rooms-detail.rooms-detail--entering { animation: rooms-hero-in .26s var(--ease-ios) both; }
#rooms-detail.rooms-detail--leaving { animation: rooms-hero-out .2s var(--ease-ios) both; }
@keyframes rooms-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rooms-hero-in {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes rooms-hero-out {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(.96) translateY(10px); }
}
.rooms-row__status {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 450;
  display: block;
  margin-top: 2px;
}
.rooms-row__hint {
  font-size: 11.5px;
  color: var(--text-muted);
  opacity: .62;
  font-style: italic;
  display: block;
  margin-top: 1px;
}
.rooms-row__main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   WAVE 4.2 JOB 3 — the voice-first home screen.
   IDLE canvas: small presence avatar up top, deliberately empty below.
   CONVERSATION takeover: live transcript, Sam's words large, Sakhi's
   reply distinctly styled, auto-scrolling, newest visible.
   ═══════════════════════════════════════════════════════════════════════════ */
.home-idle {
  flex-direction: column;
  align-items: center;
  /* Job 0d fix -- with the redundant instructional paragraph removed
     (rule D), the presence pill was left top-aligned in a large empty
     column, reading as an accidental void rather than an intentional
     resting state (rule 4). Centering it keeps Home calm without
     looking broken/empty. */
  justify-content: center;
  flex: 1;
  min-height: 0;
  padding: calc(env(safe-area-inset-top) / 2 + 24px) 20px 20px;
  display: flex;
}
.home-presence {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: var(--hair) solid var(--border);
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
  -webkit-user-select: none;
  user-select: none;
}
.home-presence__avatar { display: flex; color: var(--primary); }

.home-convo {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
}
.home-convo__transcript {
  flex: 1;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top) / 2 + 16px) 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Wave 7.0 Job A6 -- virtualization: only the visible window + a
     margin is ever in the DOM (see app.js's _homeConvoRenderWindow),
     so a long conversation never renders thousands of live nodes. */
  contain: layout style;
}
.home-convo__turn {
  animation: msg-in .3s var(--ease-ios);
}
/* ---- Wave 7.0 Job A: THE LOCKED FOUR ROLES ----
   Color AND alignment both carry the distinction (never color alone),
   so a colorblind user can always tell the four apart. Body text is
   16px floor, all four pass WCAG AA 4.5:1 against --bg (verified). */
.home-convo__turn--user {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--role-user);          /* gold -- RESERVED for Sam, nothing else uses it */
  align-self: flex-end;
  text-align: right;
  max-width: 92%;
}
.home-convo__turn--interim { opacity: .55; }
.home-convo__turn--assistant {
  font-size: 18px;
  font-weight: 450;
  line-height: 1.45;
  color: var(--role-sakhi);         /* ivory -- highest readability, carries most text */
  align-self: flex-start;
  text-align: left;
  max-width: 92%;
}
/* Job A3 -- her ACTIONS ("moved 120 emails...") are visually distinct
   from her SPEECH: smaller, quieter teal, a small glyph prefix so the
   distinction survives even without color. */
.home-convo__turn--action {
  font-size: 15px;
  font-weight: 550;
  line-height: 1.4;
  color: var(--role-action);
  background: var(--role-action-soft);
  align-self: flex-start;
  text-align: left;
  max-width: 92%;
  padding: 6px 12px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  gap: 6px;
}
.home-convo__turn--action::before { content: "\2713"; font-weight: 700; }  /* checkmark glyph, not color-only */
/* Job A3/C -- anything awaiting Sam: the ONE alert hue, used for
   nothing else in the whole canvas. Centered alignment (not left or
   right) is itself part of the distinguishing signal. */
.home-convo__turn--alert {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--role-alert);
  background: var(--role-alert-soft);
  align-self: center;
  text-align: center;
  max-width: 92%;
  padding: 8px 16px;
  border-radius: var(--r-lg);
  border: var(--hair) solid var(--role-alert);
}
.home-convo__turn--alert::before { content: "\26A0 "; }  /* warning glyph, not color-only */
/* Job A4 -- tap-to-expand in place: a turn that has more behind it
   (a Stage payload, a long tool result) collapses to ONE self-
   explanatory label line and expands inline on tap. No new screens. */
.home-convo__turn--expandable { cursor: pointer; }
.home-convo__turn--expandable .home-convo__expand-body {
  display: none;
  margin-top: 8px;
  font-size: 14px;
  opacity: .85;
}
.home-convo__turn--expandable.is-expanded .home-convo__expand-body { display: block; }
.home-convo__turn--expandable .home-convo__expand-chevron {
  display: inline-block;
  transition: transform var(--dur) var(--ease);
  margin-left: 4px;
}
.home-convo__turn--expandable.is-expanded .home-convo__expand-chevron { transform: rotate(90deg); }
.home-convo__saved-cue {
  align-self: center;
  color: var(--leaf);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: var(--hair) solid var(--leaf);
  animation: msg-in .3s var(--ease-ios);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WAVE 4.2 JOB 4 — the spring notification icon.
   Floating top-right icon+badge is the ONLY persistent Home notification
   UI. Tap springs a panel up (fast, 250-350ms); tap outside/again springs
   it back down. A slim banner flashes ~3s on genuinely new items only.
   ═══════════════════════════════════════════════════════════════════════════ */
.spring-icon {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  right: 14px;
  z-index: 30;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface);
  border: var(--hair) solid var(--border);
  box-shadow: var(--shadow);
  color: var(--primary);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .18s var(--ease-ios);
}
.spring-icon:active { transform: scale(.92); }
.spring-icon__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--marigold);
  color: #3a2405;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spring-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 8px);
  left: 14px;
  right: 66px;
  z-index: 29;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  background: var(--material);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-float);
  border: var(--hair) solid var(--border);
  font-size: 14px;
  font-weight: 550;
  color: var(--ink);
  animation: msg-in .25s var(--ease-ios);
}

.spring-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 31;
  background: #00000059;
}
.spring-panel {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 56px);
  right: 14px;
  z-index: 32;
  width: min(340px, calc(100vw - 28px));
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--elevated);
  border: var(--hair) solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  /* Spring animation: fast (280ms), overshoot-then-settle curve. */
  animation: spring-pop .28s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: top right;
}
@keyframes spring-pop {
  0% { opacity: 0; transform: scale(.85) translateY(-8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .spring-panel { animation: none; }
}
.spring-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: var(--hair) solid var(--border);
}
.spring-panel__title { font-size: 15px; font-weight: 650; }
.spring-panel__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--muted);
  touch-action: manipulation;
}
.spring-panel__list { overflow-y: auto; padding: 6px; }
.spring-panel__empty { color: var(--muted); text-align: center; padding: 20px 10px; font-size: 14px; }
.spring-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-bottom: var(--hair) solid var(--border);
}
.spring-panel__row:last-child { border-bottom: none; }
.spring-panel__row-title { flex: 1; min-width: 0; font-size: 14px; }
.spring-panel__row-count { color: var(--muted); font-weight: 500; }
.spring-panel__row-actions { display: flex; gap: 6px; flex: none; }
.spring-panel__row-btn {
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--bg-deep);
  border: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  touch-action: manipulation;
}
.spring-panel__row-btn--dismiss { color: var(--danger); }

/* ============================================================================
   WAVE 5.1b Finding 2 (Sam's phone) — login submit button hidden behind
   the keyboard/bottom bar on iPhone (390x844, installed PWA, safe-area
   insets). Root cause: #login is a .screen, and .screen has
   overflow:hidden with no scroll container of its own -- so once the
   iOS keyboard pushes the visible viewport up, any content below it
   (a button inside an opened <details> section, especially with
   MULTIPLE sections expanded at once) becomes permanently unreachable
   with no way to scroll down to it. Same disease as the old composer
   overlap (Wave 4.2b), different screen. Fix: let #login scroll
   vertically and give it real safe-area bottom padding so the last
   button always has room above the home-indicator/keyboard.
   ============================================================================ */
#login {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#login .center {
  padding-bottom: calc(env(safe-area-inset-bottom) + 80px);
}

/* =========================================================================
   WAVE 7.0 JOB B — THE STAGE. Result surface + collapse-to-dot gesture.
   ARCHITECTURE LAW: these classes describe a generic result surface,
   not anything Sakhi-specific -- any other app reusing stage.js gets
   the same look for free.
   ========================================================================= */
.stage-surface {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform var(--dur-slow) var(--ease);
}
.stage-surface[hidden] { display: none; pointer-events: none; }
/* Job B2 -- collapse animation: 600-800ms slide, respects
   prefers-reduced-motion by falling back to an instant cut. */
@media (prefers-reduced-motion: reduce) {
  .stage-surface { transition: none; }
}
.stage-surface__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 14px 10px;
  border-bottom: var(--hair) solid var(--border);
}
.stage-surface__title {
  flex: 1;
  font-size: 16px;
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stage-back-dot, .stage-surface__close {
  min-width: 40px; min-height: 40px;
  border-radius: 999px;
  border: var(--hair) solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.stage-surface__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

/* WAVE 7.5 PIECE 7 -- Conversation controls pickers */
.ctl-picker { display: flex; gap: 8px; }
.ctl-opt {
  flex: 1;
  min-height: 40px;
  border-radius: 12px;
  border: var(--hair) solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ctl-opt.on {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: transparent;
}

/* JOB 0f -- multi-result stack + long-press menu */
.stage-stack-item {
  position: relative;
  border-bottom: var(--hair) solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.stage-stack-item:last-child { border-bottom: none; margin-bottom: 0; }
.stage-stack-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--marigold-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 640;
  margin-bottom: 8px;
}
.stage-stack-item.is-pressed .stage-image-wrap img {
  transform: scale(.98);
}
.stage-press-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0 2px;
}
.stage-press-menu__btn {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  border: var(--hair) solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 620;
  cursor: pointer;
}
.stage-press-menu__btn:first-child {
  background: var(--primary);
  color: var(--primary-ink);
  border-color: transparent;
}
.stage-press-menu__note {
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
}
.stage-press-menu__note.is-ok { color: var(--leaf); }

/* JOB 0e Issue 2 -- Stage Save/Share action bar (every result type) */
.stage-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 0;
}
.stage-action-btn {
  min-height: 40px;
  min-width: 84px;
  padding: 9px 16px;
  border-radius: 999px;
  border: var(--hair) solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 620;
  cursor: pointer;
}
.stage-action-btn:active { background: var(--bg-deep); }
.stage-action-btn:disabled { opacity: .55; }
.stage-action-btn--share { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.stage-action-confirm {
  font-size: 14px;
  font-weight: 600;
  color: var(--danger);
  opacity: .95;
}
.stage-action-confirm.is-ok { color: var(--leaf); }

/* JOB 0e Issue 1 -- honest Stage failure states + live image wrap */
.stage-load-failed {
  background: var(--bg-deep);
  border: var(--hair) solid var(--border);
  border-radius: var(--r-md);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
  padding: 16px 18px;
  text-align: center;
}
.stage-image-wrap img.stage-image-live {
  max-width: 100%;
  border-radius: var(--r-md);
  display: block;
}

/* Job B2 -- the pulsing dot: conversation "squeezed to a small pulsing
   dot on the right edge" while the Stage owns the screen. */
.stage-dot {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 61;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 2px solid var(--role-user);
  display: flex; align-items: center; justify-content: center;
  animation: stage-dot-pulse 1.8s ease-in-out infinite;
}
.stage-dot[hidden] { display: none; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .stage-dot { animation: none; }
}
@keyframes stage-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,183,91,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(232,183,91,0); }
}
.stage-dot__badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--role-alert);
  color: var(--bg);
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.stage-dot__badge[hidden] { display: none; }
.stage-back-dot__pulse {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--role-user);
  display: inline-block;
}

/* Job B3 -- image_grid: scrollable, lazy-loaded, select-with-long-press */
.stage-image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.stage-image-grid__cell {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 2px solid transparent;
}
.stage-image-grid__cell img { width: 100%; display: block; }
.stage-image-grid__cell.is-selected { border-color: var(--role-user); }
.stage-image-single img { width: 100%; border-radius: var(--r-md); }
.stage-caption { font-size: 13px; color: var(--text-muted); padding: 6px 2px; }

/* plan_view */
.stage-plan-view__svg { width: 100%; max-height: 60vh; }
.stage-plan-view__dims { list-style: none; padding: 0; margin: 10px 0; font-size: 14px; color: var(--text); }
.stage-plan-view__pdf-link { color: var(--role-user); font-weight: 600; }

/* table */
.stage-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stage-table th, .stage-table td { padding: 8px; border-bottom: var(--hair) solid var(--border); text-align: left; }

/* list_of_cards */
.stage-card { padding: 10px; border-radius: var(--r-md); background: var(--surface); margin-bottom: 8px; }
.stage-card__title { font-weight: 650; color: var(--text); }
.stage-card__subtitle { font-size: 13px; color: var(--text-muted); }

/* When the Stage is active, hide the composer's mic-fab so there's no
   duplicate control fighting the Stage's own controls. */
body.stage-active #micfab { display: none !important; }

/* =========================================================================
   WAVE 7.0 JOB C — THE LIVING TIMELINE.
   ========================================================================= */
.timeline-container {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(64px + env(safe-area-inset-bottom));  /* P0 hotfix Job 0b -- sits directly above the now-fixed tab bar */
  z-index: 29;
  height: 64px;                 /* Wave 7.6 Job 1 -- ~2x the old 28-32px resting height, thumb-friendly */
  display: flex;
  align-items: center;
  padding: 0 8px;
  background: linear-gradient(to bottom, var(--surface) 0%, var(--bg) 100%);  /* Job 1 -- subtle depth, reads as a physical rail */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 3px rgba(0,0,0,0.06);
  border-top: var(--hair) solid var(--border);
}
/* Wave 7.6 Job 2 -- three zones. Whisper-quiet by default; the active
   zone (set by _tlSetActiveZone in timeline.js during a scrub) enlarges
   and brightens per Job 3's "always know whether you're in past/now/
   future" requirement. Uses ONLY the existing 4-role palette. */
.timeline-zone {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 560;
  letter-spacing: .04em;
  text-transform: lowercase;
  opacity: .55;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  padding: 0 4px;
}
.timeline-zone--past { color: var(--role-action); }
.timeline-zone--future { color: var(--role-user); filter: saturate(.75); }  /* Job 2 -- "muted gold" */
.timeline-zone__glyph { font-size: 14px; line-height: 1; }
.timeline-zone__label { white-space: nowrap; }
/* Job 3 -- the current zone's label enlarges + brightens as the
   finger enters it (toggled by timeline.js's drag handler). */
.timeline-zone.is-current {
  opacity: 1;
  transform: scale(1.18);
  font-weight: 650;
}
.timeline-strip {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  touch-action: none;           /* Job C9 -- gesture isolation: page scroll never fights this strip */
  cursor: grab;
  position: relative;
}
.timeline-bead {
  border-radius: 999px;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
/* Job C3 / Wave 7.6 Job 4 -- dot color = the SAME 4 locked design roles. */
.timeline-bead--user { background: var(--role-user); }
.timeline-bead--sakhi { background: var(--role-sakhi); opacity: .6; }
.timeline-bead--action { background: var(--role-action); }
.timeline-bead--alert { background: var(--role-alert); }
/* Wave 7.6 Job 4 -- tap a bead to briefly expand it (shows what it was). */
.timeline-bead.is-expanded { transform: scale(1.6); z-index: 2; }
/* Wave 7.6 Job 4 -- working-bead animation for a parked job still running. */
.timeline-bead.is-working { animation: timeline-bead-pulse 1.4s ease-in-out infinite; }
@keyframes timeline-bead-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
/* CENTERED-NOW WAVE (2026-09-03) -- the two lanes. The strip is two
   EQUAL halves; past beads fill the left, future beads the right, and
   the marker anchors between them at the exact horizontal center. */
.timeline-lane {
  flex: 1 1 50%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}
.timeline-lane--past  { padding-right: 6px; }   /* breathing room from the marker */
.timeline-lane--future { padding-left: 6px; }
/* CENTERED-NOW WAVE -- the marker: POSITION-ANCHORED at the strip's
   center (never an inline flex item, so bead weights can never push
   it). Visual family: the app's warm gold (--marigold, the same tone
   as the future beads and the app's accents), softly luminous via a
   restrained glow. Replaces the old plain ivory line. */
.timeline-now-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 34px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--marigold) 88%, #fff) 0%, var(--marigold) 45%, color-mix(in srgb, var(--marigold) 78%, #000) 100%);
  border-radius: 3px;
  z-index: 3;
  box-shadow: 0 0 8px color-mix(in srgb, var(--marigold) 55%, transparent),
              0 0 1.5px color-mix(in srgb, var(--marigold) 90%, transparent);
  pointer-events: none;
}
/* Restrained heartbeat: a slow opacity/glow breath at rest (6s --
   calmer than the old 2.6s), faster + taller while Sakhi is working.
   Pure opacity/glow, no scaling or color jumping -- elegant, not rave. */
.timeline-now-marker { animation: tl-now-breathe 6s ease-in-out infinite; }
.timeline-now-marker.is-breathing { animation: tl-now-breathe 2.4s ease-in-out infinite; }
@keyframes tl-now-breathe {
  0%, 100% { opacity: 1;   box-shadow: 0 0 8px color-mix(in srgb, var(--marigold) 55%, transparent),
                                    0 0 1.5px color-mix(in srgb, var(--marigold) 90%, transparent); }
  50%      { opacity: .82; box-shadow: 0 0 13px color-mix(in srgb, var(--marigold) 38%, transparent),
                                    0 0 1.5px color-mix(in srgb, var(--marigold) 75%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-now-marker { animation: none; }
  .timeline-now-marker.is-breathing { animation: none; }
  /* With motion off, the marker is still clearly intentional: full
     warmth + a steady (unanimated) glow, slightly brighter than the
     beads so it reads as the anchor, not another dot. */
  .timeline-now-marker { opacity: 1; box-shadow: 0 0 10px color-mix(in srgb, var(--marigold) 45%, transparent); }
}
/* timeline-now-idle-pulse + timeline-breathe retired by the
   CENTERED-NOW WAVE: the marker's tl-now-breathe keyframes (above)
   replace both. */
/* Job 2 -- the "now" label, tiny and quiet, sits just under the marker. */
.timeline-now-label {
  /* HARD REPAIR WAVE (2026-09-03): "now" sat inside the thumb's
     travel lane and got covered by the scrub handle. It now floats
     BELOW the strip line where the thumb never goes. */
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 560;
  color: var(--role-sakhi);
  opacity: .75;
  letter-spacing: .04em;
  pointer-events: none;
  z-index: 3;
}
.timeline-span-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 6px;
  text-transform: capitalize;
  flex-shrink: 0;
}
/* Job C8 -- the future side is NEVER blank. */
/* HARD REPAIR WAVE (2026-09-03): the future-empty hint now lives
   INSIDE the strip's own box (top:4px, no negative offset) so it can
   never float onto the composer. Clipped + non-interactive. */
.timeline-future-empty {
  position: absolute;
  right: 12px;
  top: 4px;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1.2;
  color: var(--role-alert);
  background: var(--role-alert-soft);
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}

/* Job C4b / CENTERED-NOW WAVE (2026-09-03) -- the scrub label:
   repositioned OUT of the thumb's travel lane into the quiet band
   directly ABOVE the strip (below the composer). Was fixed
   bottom:40px -- inside the tab-bar zone where the thumb rests --
   now sits at the strip's top edge, comfortably clear of both the
   dragging thumb (below it) and the composer (above it). Compressed
   text (day + 3-4 word hint) is set by _tlShowBubble; full reading
   stays in the canvas. Fades in/out via .is-on. */
.timeline-bubble {
  position: fixed;
  left: 50%;
  /* sits INSIDE the strip's upper band: below the composer, above the
     bead row, clear of the scrubbing thumb (which travels at the
     strip's vertical center) */
  bottom: calc(var(--bottom-bars-h, 128px) - 23px);
  transform: translateX(-50%);
  background: var(--surface-2, var(--surface));
  color: var(--text, var(--ink));
  font-size: 12px;
  font-weight: 560;
  line-height: 1.2;
  padding: 3px 11px;
  border-radius: 999px;
  border: var(--hair) solid color-mix(in srgb, var(--marigold) 40%, var(--border));
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  z-index: 70;
  pointer-events: none;
  white-space: nowrap;
  max-width: 86vw;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .18s ease;
}
.timeline-bubble.is-on { opacity: 1; }
.timeline-bubble[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .timeline-bubble { transition: none; }
}

/* Job C5 -- THE BLIND PULL: drag the line upward, it lifts like a
   window blind up to half the screen. */
.timeline-blind {
  position: fixed;
  /* Wave 7.6 Job 5 bugfix -- was bottom: var(--bottom-bars-h) alone,
     which cleared the tab bar + timeline strip but sat FLUSH against
     the composer's own bottom edge, so opening the blind (height>0)
     grew straight into the composer and made camera/mic/send
     untappable. Now also clears the composer's real measured height
     (--composer-h, same reuse-not-fabricate principle). */
  left: 0; right: 0; bottom: calc(var(--bottom-bars-h, calc(64px + 32px + env(safe-area-inset-bottom))) + var(--composer-h, 60px));
  height: 0;
  overflow: hidden;
  background: var(--surface);
  border-top: var(--hair) solid var(--border);
  transition: height var(--dur-slow) var(--ease);
  z-index: 59;
  pointer-events: none;   /* P0 hotfix -- H1: at height:0/1px this sat exactly
                              at the tab-bar boundary; without this it could
                              intercept an edge-case tap even at near-zero height */
}
.timeline-blind.is-open {
  /* Now that .timeline-blind's own `bottom` already clears both the
     tab-bar+timeline AND the composer (see above), height only needs
     to stay within the remaining space above that point. */
  height: min(50vh, calc(100vh - var(--bottom-bars-h, 96px) - var(--composer-h, 60px) - env(safe-area-inset-top) - 8px));
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .timeline-blind { transition: none; }
}
.timeline-blind__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  font-size: 14px; font-weight: 650; color: var(--text);
  border-bottom: var(--hair) solid var(--border);
}
.timeline-blind__close {
  min-width: 32px; min-height: 32px; border-radius: 999px;
  border: none; background: var(--surface-2); color: var(--text); font-size: 18px;
}
.timeline-blind__list {
  overflow-y: auto;
  padding: 10px 14px;
  /* Wave 7.6 Job 5 bugfix -- matches .timeline-blind.is-open's real
     height above minus the head bar's own ~50px, so the scrollable
     list never overflows the actually-available space. */
  height: calc(min(50vh, calc(100vh - var(--bottom-bars-h, 96px) - var(--composer-h, 60px) - env(safe-area-inset-top) - 8px)) - 50px);
}
.timeline-blind-card {
  padding: 8px 0;
  border-bottom: var(--hair) solid var(--border);
  font-size: 13px;
  color: var(--text);
}

/* P0 hotfix -- Home's empty-state invitation, visible in the correct
   role colors so Wave 7.0's canvas is never mistaken for "nothing
   shipped". Quiet (small, muted-weight) -- announces the surface
   without disrupting the calm idle screen. */
.home-idle__invite {
  text-align: center;
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.5;
}
.home-idle__invite-role--sakhi { color: var(--role-sakhi); }
.home-idle__invite-role--user { color: var(--role-user); font-weight: 600; }

/* =========================================================================
   P0 HOTFIX JOB 0b — TOUCH DEBUG OVERLAY. Founder-only, hidden by
   default (5 taps on the header logo in 3s unlocks it, gated server-
   side via /api/system/status returning 200 only for the founder).
   ========================================================================= */
.touch-debug-overlay {
  position: fixed;
  top: env(safe-area-inset-top);
  right: 8px;
  left: 8px;
  z-index: 90;
  background: rgba(10, 10, 12, 0.94);
  color: #F5F5F4;
  border: 1px solid #E8B75B;
  border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  max-height: 50vh;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.touch-debug-overlay[hidden] { display: none; }
.touch-debug-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid #333;
  font-weight: 700;
}
.touch-debug-close {
  background: none; border: none; color: #E8B75B; font-size: 18px; cursor: pointer;
  min-width: 28px; min-height: 28px;
}
.touch-debug-panel { padding: 6px 10px; }
.touch-debug-row {
  padding: 6px 0;
  border-bottom: 1px solid #222;
  line-height: 1.4;
  word-break: break-all;
}
.touch-debug-ts { color: #888; font-size: 11px; }
.touch-debug-row code { color: #6B9A92; }

/* =========================================================================
   WAVE 8.1 -- PHOTO PERSONA CAPTURE FLOW. Full-screen modal, own root
   div (#persona-capture-root), never touches the app's other screens.
   ========================================================================= */
#persona-capture-root {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom);
}
#persona-capture-root[hidden] { display: none; }
.persona-consent {
  max-width: 400px; margin: auto; text-align: center; padding: 24px;
}
.persona-consent h3 { margin: 0 0 12px; font-size: 1.2rem; }
.persona-consent p {
  font-size: .95rem; color: var(--text); line-height: 1.5; margin-bottom: 20px;
}
.persona-capture { display: flex; flex-direction: column; height: 100%; padding: 12px 0; }
.persona-capture__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; color: var(--text-muted); margin-bottom: 8px;
}
.persona-capture__head button {
  border: none; background: transparent; font-size: 22px; color: var(--text-muted);
  min-width: 32px; min-height: 32px;
}
.persona-capture__guide { text-align: center; margin: 8px 0 16px; }
.persona-capture__glyph { font-size: 40px; color: var(--role-user); display: block; }
.persona-capture__guide p { font-size: 1rem; margin-top: 6px; font-weight: 560; }
.persona-capture video {
  width: 100%; max-width: 360px; aspect-ratio: 3/4; margin: 0 auto;
  border-radius: 16px; background: #000; object-fit: cover;
}
.persona-capture__actions {
  display: flex; flex-direction: column; gap: 8px; max-width: 360px;
  margin: 16px auto 0; width: 100%;
}
.persona-review { max-width: 420px; margin: auto; text-align: center; padding: 16px; }
.persona-review__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 16px 0;
}
.persona-review__grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }