:root{color-scheme:dark;--c-surface:rgba(0,75,104,.88);--c-surface-strong:rgba(0,56,79,.97);--c-surface-hover:rgba(6,101,135,.92);--c-surface-selected:rgba(114,228,255,.20);--c-cyan-bright:#72e4ff;--c-cyan-strong:#36d6ff;--c-cyan-soft:#a6efff;--c-success:#72e4ff;--c-warning:#f0c45a;--c-danger:#ffffff;--c-border:rgba(114,228,255,.24);--c-border-strong:rgba(114,228,255,.48);--c-shadow:0 18px 56px rgba(0,18,28,.34);--c-glow:0 0 32px rgba(114,228,255,.19);--c-drop:rgba(0,18,28,.25);--c-cyan-35:rgba(114,228,255,.42);--c-edge-2:rgba(255,255,255,.30);--c-lift-2:rgba(255,255,255,.08);--c-scrim-2:rgba(0,18,28,.72);--c-veil:rgba(0,56,79,.62);--c-pill:rgba(0,66,92,.62);--c-compose:rgba(0,70,97,.88);--c-app:#014461;--c-sunk:#003b55;--c-panel:#004b68;--c-panel-70:#004b68bd;--c-panel-90:#004b68eb;--c-field:#075b78;--c-hover:#066587;--c-raised:#075f80;--c-raised-60:#0877a0a8;--c-track:#08617f;--c-selected:#086e91;--c-glow-bg:#00749a;--c-accent-deep:#007fae;--c-accent-mid:#1bbbe9;--c-accent-bright:#72e4ff;--c-line:#14708f;--c-line-strong:#278cac;--c-ink:#ffffff;--c-ink-2:#eef8fd;--c-ink-3:#e8f5fc;--c-ink-4:#e8f5fc;--c-ink-5:#e8f5fc;--c-ink-on-accent:#041019;--c-ink-wash:#f6fdff14;--c-cyan:#72e4ff;--c-cyan-08:#72e4ff1f;--c-cyan-10:#72e4ff29;--c-cyan-16:#72e4ff3d;--c-cyan-20:#72e4ff4a;--c-cyan-24:#72e4ff5c;--c-cyan-26:#72e4ff66;--c-cyan-30:#72e4ff73;--c-cyan-48:#72e4ffad;--c-cyan-wash:#08a8db45;--c-scrim:#00131eb8;--c-lift:#ffffff12;--c-edge:#ffffff26;--c-edge-strong:#ffffff3b;--c-edge-hover:#ffffff52;--c-bad:#ffffff;--c-bad-bg:#0a2a40;--c-bad-edge:#42dcff;--c-good:#72e4ff;--c-good-bg:#075b78;--c-warn:#f6cf6f;--c-warn-bg:#4b3814;--c-warn-edge:#ffd58a66;--c-shade-2:#00131e33;--c-shade-8:#00131eb8;--c-shade-10:#00131ee0;}
:root[data-theme="light"]{color-scheme:light;--c-surface:rgba(255,255,255,.92);--c-surface-strong:#ffffff;--c-surface-hover:#e5f8ff;--c-surface-selected:#bdeeff;--c-cyan-bright:#00bce8;--c-cyan-strong:#008fc7;--c-cyan-soft:#006f9e;--c-success:#007faa;--c-warning:#8a6100;--c-danger:#041019;--c-border:#c8e9f5;--c-border-strong:#8fd4ed;--c-shadow:0 18px 50px rgba(0,80,112,.12);--c-glow:0 0 26px rgba(0,188,232,.12);--c-drop:rgba(0,80,112,.12);--c-cyan-35:#00aee65c;--c-edge-2:#006f9e2b;--c-lift-2:#00aee60f;--c-scrim-2:#00384f99;--c-veil:#f4fcffed;--c-pill:#edfaff;--c-compose:#ffffff;--c-app:#f8fdff;--c-sunk:#effaff;--c-panel:#ffffff;--c-panel-70:#ffffffdf;--c-panel-90:#fffffff5;--c-field:#e8f8ff;--c-hover:#e5f8ff;--c-raised:#d7f3ff;--c-raised-60:#eaf9ff;--c-track:#c8ebf7;--c-selected:#bdeeff;--c-glow-bg:#bfeeff;--c-accent-deep:#006f9e;--c-accent-mid:#009ed9;--c-accent-bright:#00c8ff;--c-line:#c8e9f5;--c-line-strong:#8fd4ed;--c-ink:#041019;--c-ink-2:#0e2230;--c-ink-3:#102a3a;--c-ink-4:#102a3a;--c-ink-5:#102a3a;--c-ink-on-accent:#041019;--c-ink-wash:#004b680a;--c-cyan:#008fc7;--c-cyan-08:#00aee614;--c-cyan-10:#00aee61f;--c-cyan-16:#00aee62e;--c-cyan-20:#00aee63d;--c-cyan-24:#00aee64d;--c-cyan-26:#00aee657;--c-cyan-30:#00aee666;--c-cyan-48:#008fc78f;--c-cyan-wash:#c9f3ff;--c-scrim:#00384f99;--c-lift:#00aee60d;--c-edge:#006f9e14;--c-edge-strong:#006f9e29;--c-edge-hover:#006f9e3d;--c-bad:#041019;--c-bad-bg:#e8f8ff;--c-bad-edge:#0a80c4;--c-good:#007faa;--c-good-bg:#d7f3ff;--c-warn:#8a6100;--c-warn-bg:#fdf3de;--c-warn-edge:#8a61004d;--c-shade-2:#004b680d;--c-shade-8:#004b681f;--c-shade-10:#004b6830;}
@media(prefers-color-scheme:light){:root[data-theme="system"]{color-scheme:light;--c-surface:rgba(255,255,255,.92);--c-surface-strong:#ffffff;--c-surface-hover:#e5f8ff;--c-surface-selected:#bdeeff;--c-cyan-bright:#00bce8;--c-cyan-strong:#008fc7;--c-cyan-soft:#006f9e;--c-success:#007faa;--c-warning:#8a6100;--c-danger:#041019;--c-border:#c8e9f5;--c-border-strong:#8fd4ed;--c-shadow:0 18px 50px rgba(0,80,112,.12);--c-glow:0 0 26px rgba(0,188,232,.12);--c-drop:rgba(0,80,112,.12);--c-cyan-35:#00aee65c;--c-edge-2:#006f9e2b;--c-lift-2:#00aee60f;--c-scrim-2:#00384f99;--c-veil:#f4fcffed;--c-pill:#edfaff;--c-compose:#ffffff;--c-app:#f8fdff;--c-sunk:#effaff;--c-panel:#ffffff;--c-panel-70:#ffffffdf;--c-panel-90:#fffffff5;--c-field:#e8f8ff;--c-hover:#e5f8ff;--c-raised:#d7f3ff;--c-raised-60:#eaf9ff;--c-track:#c8ebf7;--c-selected:#bdeeff;--c-glow-bg:#bfeeff;--c-accent-deep:#006f9e;--c-accent-mid:#009ed9;--c-accent-bright:#00c8ff;--c-line:#c8e9f5;--c-line-strong:#8fd4ed;--c-ink:#041019;--c-ink-2:#0e2230;--c-ink-3:#102a3a;--c-ink-4:#102a3a;--c-ink-5:#102a3a;--c-ink-on-accent:#041019;--c-ink-wash:#004b680a;--c-cyan:#008fc7;--c-cyan-08:#00aee614;--c-cyan-10:#00aee61f;--c-cyan-16:#00aee62e;--c-cyan-20:#00aee63d;--c-cyan-24:#00aee64d;--c-cyan-26:#00aee657;--c-cyan-30:#00aee666;--c-cyan-48:#008fc78f;--c-cyan-wash:#c9f3ff;--c-scrim:#00384f99;--c-lift:#00aee60d;--c-edge:#006f9e14;--c-edge-strong:#006f9e29;--c-edge-hover:#006f9e3d;--c-bad:#041019;--c-bad-bg:#e8f8ff;--c-bad-edge:#0a80c4;--c-good:#007faa;--c-good-bg:#d7f3ff;--c-warn:#8a6100;--c-warn-bg:#fdf3de;--c-warn-edge:#8a61004d;--c-shade-2:#004b680d;--c-shade-8:#004b681f;--c-shade-10:#004b6830;}}
:root{font:17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--c-ink);background:var(--c-app)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 100% 100%,var(--c-glow-bg) 0,transparent 60%),var(--c-app)}button,a,summary,textarea{-webkit-tap-highlight-color:transparent}button,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:1;cursor:wait;color:var(--c-ink-3)}button,a,summary{touch-action:manipulation}a{color:var(--c-cyan)}button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--c-cyan);outline-offset:4px}.app{height:100dvh;margin:auto;display:flex;flex-direction:column;padding:0 24px}.app>header{height:88px;flex-shrink:0;display:flex;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;font-size:23px}.brand .judeai-logo,#welcome .judeai-logo{border-radius:20%}.quiet{border:1px solid var(--c-cyan-16);border-radius:14px;background:var(--c-panel-70);padding:10px 16px;min-height:44px}main{flex:1;overflow:auto;min-height:0;padding:0 12px 20px;--measure:min(100%,860px);scrollbar-color:var(--c-cyan-30) transparent;overscroll-behavior:contain}#welcome{height:100%;max-width:var(--measure);margin:0 auto;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}h1{font-size:clamp(24px,4vw,34px);font-weight:500;margin:0;text-align:center}#messages{max-width:var(--measure);margin:0 auto}
.turn{max-width:90%;margin:22px 0;overflow-wrap:anywhere;white-space:pre-wrap}.turn p{margin:0 0 10px}.turn.user{margin-left:auto;width:fit-content;background:var(--c-raised);border:1px solid var(--c-cyan-08);padding:14px 20px;border-radius:24px}.turn.assistant{padding:4px 0}.by{color:var(--c-cyan);font-size:15px;font-weight:600;margin-bottom:12px}.turn details{white-space:normal}.turn details p{white-space:pre-wrap}.compose{flex-shrink:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}#form{max-width:min(100%,900px);margin:0 auto;border:1px solid var(--c-cyan-24);border-radius:26px;background:linear-gradient(130deg,var(--c-raised-60),var(--c-panel-90));box-shadow:inset 0 1px 0 var(--c-ink-wash),0 12px 40px var(--c-shade-2);padding:16px 20px}textarea{width:100%;border:0;background:transparent;resize:none;min-height:62px;max-height:140px;outline:none;padding:0}textarea::placeholder{color:var(--c-ink-3)}.actions{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}details{color:var(--c-ink-2);font-size:14px}summary{cursor:pointer;min-height:32px;padding:4px 0}details p{max-width:660px;margin:6px 0}#status{margin:0 8px 10px;font-size:14px;color:var(--c-ink-2);min-height:22px}#latest{float:right;margin-top:-52px;position:relative}.foot{font-size:12px;text-align:center;color:var(--c-ink-3);margin:8px 0 0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}@media(max-width:600px){.app{padding:0 14px}.app>header{height:72px}.brand{font-size:21px}main{padding:0 4px 16px}.turn{max-width:96%}#form{padding:14px 16px;border-radius:23px}.quiet{font-size:14px}#welcome{min-height:140px}#welcome .judeai-logo{width:68px;height:68px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.permission-control{max-width:min(100%,900px);margin:6px auto 0;display:flex;justify-content:flex-start;position:relative}.permission-control>button{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--c-ink-3);padding:5px 8px;min-height:34px;border-radius:9px;font-size:12px}.permission-control>button:hover{color:var(--c-ink);background:var(--c-cyan-08)}.permission-control>button[data-mode="bypass"]{color:var(--c-cyan-soft);background:var(--c-cyan-08)}.permission-control .ji{width:15px;height:15px}.permission-control .caret{width:12px}.permission-control .popover{left:0;bottom:38px;top:auto;width:min(330px,calc(100vw - 32px));padding:7px}.permission-option{display:block;width:100%;text-align:left;border:0;background:transparent;border-radius:9px;padding:10px;color:var(--c-ink)}.permission-option:hover,.permission-option:focus-visible{background:var(--c-cyan-08)}.permission-option strong,.permission-option small{display:block}.permission-option small{color:var(--c-ink-3);font-size:11px;margin-top:2px}.permission-option.current{background:var(--c-cyan-08);color:var(--c-cyan-soft)}

/* This Mac is an instrument panel, not a stack of SaaS form fields. */
#plugin-detail:has(.device-explainer){max-width:920px;margin:0 auto;padding:4px 0 42px}#plugin-detail:has(.device-explainer)>.plugin-title{margin:16px 0 4px}#plugin-detail:has(.device-explainer)>.plugin-title h2{font-size:clamp(26px,4vw,38px);font-weight:520;letter-spacing:-1.2px}#plugin-detail:has(.device-explainer)>.page-note{font-size:13px;letter-spacing:.01em;color:var(--c-ink-3);margin:0 0 14px}.device-explainer{border-top:1px solid var(--c-cyan-16);border-bottom:1px solid var(--c-cyan-16);padding:9px 0;margin:14px 0 26px}.device-explainer summary{color:var(--c-ink-3);font-size:12px;letter-spacing:.02em}.device-explainer p{font-size:12px;color:var(--c-ink-3);margin:6px 0 3px}.section-kicker{margin:28px 0 10px;font-size:10px!important;font-weight:650!important;letter-spacing:.17em;text-transform:uppercase;color:var(--c-cyan-soft)}.device-row{position:relative!important;padding:18px 18px 18px 22px!important;border:1px solid var(--c-cyan-24)!important;border-radius:16px!important;background:linear-gradient(120deg,var(--c-panel-90),var(--c-raised-60))!important;box-shadow:inset 0 1px 0 var(--c-ink-wash),0 12px 32px var(--c-shade-2)}.device-row:before{content:"";position:absolute;left:10px;top:25px;width:6px;height:6px;border-radius:50%;background:var(--c-success);box-shadow:0 0 12px var(--c-success)}.device-row .cap-text{padding-left:5px}.device-row .cap-title{font-size:16px;font-weight:560;letter-spacing:-.2px}.device-row .cap-note{font-size:11px}.device-actions button,.device-actions select{min-height:38px;border-radius:9px!important;font-size:12px!important}.cap-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:14px 0!important;border:0!important;border-bottom:1px solid var(--c-cyan-16)!important}.cap-row .cap-title{font-size:14px;font-weight:520;letter-spacing:-.1px}.cap-row .cap-note{font-size:11px;line-height:1.35;max-width:520px}.cap-choices{display:grid;grid-template-columns:repeat(3,54px);border:1px solid var(--c-cyan-24);border-radius:9px;overflow:hidden;background:var(--c-panel-70)}.cap-choices button{min-height:34px;border:0;border-right:1px solid var(--c-cyan-16);background:transparent;color:var(--c-ink-3);padding:4px;font-size:11px}.cap-choices button:last-child{border-right:0}.cap-choices button[aria-pressed="true"]{background:linear-gradient(150deg,var(--c-accent-deep),var(--c-accent-mid));color:var(--c-ink-on-accent);box-shadow:inset 0 1px 0 var(--c-edge)}.cap-choices button:disabled{opacity:1;cursor:not-allowed;color:var(--c-ink-3);background:transparent}.pair-panel{margin-top:28px;padding:16px 0;border-top:1px solid var(--c-cyan-16)}.pair-panel .section-kicker{margin:0 0 10px}.pair-action{border:0;background:transparent;color:var(--c-cyan-soft);padding:8px 0;font-size:13px;letter-spacing:.01em}.pair-action:hover{text-decoration:underline;text-underline-offset:4px}@media(max-width:650px){.cap-row{grid-template-columns:1fr;gap:10px}.cap-choices{grid-template-columns:repeat(3,1fr);width:100%}.device-row{align-items:flex-start!important}.device-actions{width:100%;padding-left:5px}.device-actions button{flex:1}.permission-control{padding-left:2px}}
header>#open-library{margin-right:-4px;padding:8px}header>#open-library .pill-text{display:none}
.header-actions #new .pill-text{display:none}.profile{display:grid;place-items:center;width:44px;padding:0;border-radius:50%}dialog{color:inherit;width:min(440px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--c-cyan-26);border-radius:24px;background:linear-gradient(145deg,var(--c-raised),var(--c-panel) 65%);box-shadow:0 24px 70px var(--c-shade-8)}dialog::backdrop{background:var(--c-scrim);backdrop-filter:blur(8px)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading h2{font-size:22px;margin:0}.panel-heading button{font-size:25px;line-height:1}dialog>button{display:block;width:100%;margin:12px 0}dialog p{font-size:15px}.primary{min-height:48px;border:1px solid var(--c-cyan-48);border-radius:14px;background:linear-gradient(130deg,var(--c-accent-deep),var(--c-accent-mid));padding:12px 16px}.muted{color:var(--c-ink-3);font-size:14px}.panel-actions{display:flex;gap:10px;flex-wrap:wrap}.panel-actions button{flex:1}#search-setting label{display:flex;align-items:center;gap:12px;min-height:48px}input[type=checkbox]{accent-color:var(--c-cyan);width:22px;height:22px}button:focus-visible,input:focus-visible{outline:2px solid var(--c-cyan);outline-offset:4px}@media(prefers-reduced-transparency:reduce){dialog{background:var(--c-panel)}dialog::backdrop{backdrop-filter:none}}@media(max-width:360px){.brand{font-size:18px;gap:7px}.brand .judeai-logo{width:32px;height:32px}.header-actions{gap:6px}.header-actions #new{padding:8px}}

.callback{max-width:520px;margin:12vh auto;padding:24px;text-align:center}.callback img{border-radius:16px}.callback h1{margin:24px 0}

#attachments,.turn-photos{display:flex;gap:8px;max-width:100%;margin-bottom:8px}
#attachments{flex-wrap:wrap;min-width:0}
#attachments:empty,#attachments[hidden],.file-names[hidden]{display:none}
.turn-photos{overflow-x:auto}
/* One attachment pill follows the file from composer to conversation. */
.attachment,.attachment.pill{position:relative;display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;width:max-content;max-width:min(100%,280px);min-width:0;flex:0 1 auto;height:auto;min-height:48px;padding:6px 10px 6px 6px;overflow:hidden;border:1px solid var(--cmp-pill-edge,var(--j-border));border-radius:var(--j-radius-pill,999px);background:var(--cmp-pill,var(--c-pill));color:var(--cmp-ink,var(--j-text));text-decoration:none;white-space:normal}
.attachment.pill::before{content:none}
a.attachment:hover,.attachment.pill:hover{border-color:var(--cmp-edge-focus,var(--j-border-strong));background:var(--cmp-hover,var(--j-surface-hover))}
.attachment .attachment-thumb{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;min-width:0;overflow:hidden;border-radius:50%;background:var(--cmp-hover,var(--c-veil));color:var(--cmp-ink-2,var(--j-text-2))}
.attachment .attachment-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.attachment .attachment-type{display:grid;place-items:center;width:100%;height:100%;border:0;background:transparent;color:inherit;font-size:9px;font-weight:700;letter-spacing:.02em;box-shadow:none}
.attachment button{position:relative;top:auto;right:auto;display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--cmp-ink-2,var(--j-text-2));font:inherit;line-height:1;cursor:pointer}
.attachment button::before{content:"";position:absolute;inset:-6px}
.attachment button:hover{background:var(--cmp-hover,var(--j-surface-hover));color:var(--cmp-ink,var(--j-text))}
.attachment:focus-visible,.attachment button:focus-visible{outline:2px solid var(--cmp-edge-focus,var(--c-cyan));outline-offset:-2px}
.attachment .attachment-retry{flex-basis:auto;width:auto;min-width:44px;padding:0 6px;font-size:11px}
.attachment .attachment-error{color:var(--c-bad);white-space:normal;overflow-wrap:anywhere}
.attachment:has(.attachment-error){border-color:var(--c-bad-edge)}
.attachment progress{position:absolute;left:46px;bottom:3px;width:max(8px,calc(100% - 58px));height:2px;overflow:hidden;appearance:none;-webkit-appearance:none;border:0;border-radius:999px;background:var(--cmp-hover,var(--c-track));accent-color:var(--c-cyan)}
.attachment progress::-webkit-progress-bar{background:var(--cmp-hover,var(--c-track));border-radius:999px}
.attachment progress::-webkit-progress-value{background:var(--c-cyan);border-radius:999px}
.attachment progress::-moz-progress-bar{background:var(--c-cyan);border-radius:999px}
.dragging{outline:2px solid var(--c-cyan)}.turn-photos img{height:auto;max-height:260px;max-width:100%}

.photo-preview{padding:0;border:0;background:none;max-width:100%;flex-shrink:0;border-radius:12px}#photo-view{width:min(1000px,calc(100vw - 28px))}#full-photo{display:block;max-width:100%;max-height:75dvh;object-fit:contain;margin:auto}

.document-name{display:grid;gap:2px;min-width:0;padding:9px 10px 10px;background:var(--c-selected);overflow:hidden}.document-name strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:620}.document-name small{color:var(--c-ink-3);font-size:11px}
.attachment .document-name{flex:1 1 auto;min-width:0;padding:0;background:transparent;line-height:1.2}
.attachment .document-name strong,.attachment .document-name a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-size:13px;font-weight:620;text-decoration:none}
.attachment .document-name a:focus-visible{outline:2px solid var(--c-cyan);outline-offset:-2px}
.turn>.attachment-error{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:13px;overflow-wrap:anywhere}
.attachment .document-name small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--cmp-ink-2,var(--j-text-2));font-size:11px}
.attachment .document-name .attachment-error{white-space:normal;color:var(--c-bad)}
.file-answer{background:var(--c-cyan-wash);border:1px solid var(--c-cyan-20);border-radius:18px;padding:14px!important}
.file-names{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;max-width:100%;min-width:0;font-size:14px;color:var(--c-ink-2);margin-top:8px}

#request-queue{padding:12px;border:1px solid var(--c-line-strong);border-radius:16px;background:var(--c-panel);margin:12px 0}#queue-items{padding-left:24px;max-height:200px;overflow:auto}#queue-items li{padding:6px 0;overflow-wrap:anywhere}#queue-items span{display:inline-block;max-width:75%;vertical-align:middle}#queue-items button{margin-left:8px}

/* Compact reading layout; keep interactive targets and input text accessible. */
:root{font-size:16px;line-height:1.45;-webkit-text-size-adjust:100%}
.app>header{height:68px}.brand{font-size:20px}.brand .judeai-logo{width:36px;height:36px}.turn{margin:12px 0}.turn p{margin-bottom:7px}.turn.user{padding:10px 14px;border-radius:18px}.by{margin-bottom:7px;font-size:14px}.file-answer{padding:10px!important}.turn-photos img{max-height:110px;max-width:160px}.turn-photos{margin:7px 0 0;gap:8px}#form{padding:10px 14px;border-radius:20px}textarea{font-size:16px;min-height:38px;max-height:110px}.compose #status:empty{display:none}.foot{margin-top:5px;font-size:11px}#latest{min-height:36px;padding:6px 10px;font-size:13px;margin-top:-42px}
@media(max-width:600px){:root{font-size:15px}.app{padding:0 12px}.app>header{height:58px;gap:8px}.brand{font-size:18px;gap:8px}.brand .judeai-logo{width:32px;height:32px}.header-actions{gap:6px}.header-actions .quiet{padding:7px 10px}#form{padding:9px 12px}.turn{margin:10px 0}.turn.user{padding:9px 12px}.turn-photos img{max-height:100px;max-width:140px}.foot{font-size:10px}.compose{padding-bottom:max(8px,env(safe-area-inset-bottom))}}

input[type=text],select{font:inherit;color:inherit;background:var(--c-field);border:1px solid var(--c-line-strong);border-radius:10px;padding:8px;box-sizing:border-box}.header-actions{gap:6px}@media(max-width:600px){header .brand strong{font-size:16px}.header-actions .quiet{padding:6px 9px}header .brand{gap:6px}}

/* The composer is one input surface; focus follows its rounded outer edge. */
#message:focus,#message:focus-visible{outline:none;box-shadow:none}#form:focus-within{border-color:var(--c-cyan-48);box-shadow:inset 0 1px 0 var(--c-ink-wash),0 0 0 1px var(--c-cyan-10)}

.run-card{border:1px solid var(--edge,var(--c-line-strong));border-radius:12px;padding:10px 12px;margin:6px 0;display:grid;gap:6px}
.run-card .head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.run-card .state{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.run-card .state.RUNNING,.run-card .state.QUEUED{color:var(--c-cyan)}.run-card .state.COMPLETED{color:var(--c-good)}
.run-card .state.FAILED,.run-card .state.FAILED_RECOVERY_REQUIRED{color:var(--c-bad)}.run-card .state.CANCELLED,.run-card .state.CANCEL_REQUESTED{color:var(--c-warn)}
.run-card .facts{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.run-card .actions{display:flex;gap:6px}

/* ---- Control language, from the JudeAI UI pack. Hierarchy from spacing, grouping and pills; not from boxes.
   Spacing 4 8 12 16 24 32. Radii 8 rows, 12 controls, 20 panels, 999 pills. Composer 30. ---- */
:root{--j-bg-0:var(--c-app);--j-bg-1:var(--c-sunk);--j-bg-2:var(--c-sunk);--j-surface:var(--c-surface);--j-surface-strong:var(--c-surface-strong);
  --j-surface-hover:var(--c-surface-hover);--j-surface-selected:var(--c-surface-selected);--j-text:var(--c-ink);--j-text-2:var(--c-ink-2);--j-text-3:var(--c-ink-4);
  --j-cyan:var(--c-cyan-bright);--j-cyan-strong:var(--c-cyan-strong);--j-cyan-soft:var(--c-cyan-soft);--j-success:var(--c-success);--j-warning:var(--c-warning);--j-danger:var(--c-danger);
  --j-border:var(--c-border);--j-border-strong:var(--c-border-strong);--j-shadow:var(--c-shadow);--j-glow:var(--c-glow);
  --j-space-1:4px;--j-space-2:8px;--j-space-3:12px;--j-space-4:16px;--j-space-5:24px;--j-space-6:32px;
  --j-radius-sm:8px;--j-radius-control:12px;--j-radius-panel:20px;--j-radius-pill:999px;--j-hit:44px;--j-fast:120ms;--j-normal:160ms}
.ji{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ji.caret{width:14px;height:14px}
.pill{display:inline-flex;align-items:center;gap:var(--j-space-2);min-height:36px;padding:0 14px;border:1px solid var(--j-border);border-radius:var(--j-radius-pill);background:var(--c-pill);color:var(--j-text);font-size:14px;white-space:nowrap;transition:background var(--j-normal),border-color var(--j-normal)}
.pill:hover{border-color:var(--j-border-strong);background:var(--j-surface-hover)}
.pill.compact{min-height:38px;padding:0 14px;font-size:13px;color:var(--j-text-2);background:var(--c-veil)}
.pill.icon-pill{padding:0 var(--j-space-3)}
.pill.round{width:var(--j-hit);height:var(--j-hit);padding:0;justify-content:center;border-radius:50%}
.icon-btn{display:inline-grid;place-items:center;width:var(--j-hit);height:var(--j-hit);padding:0;border:1px solid var(--j-border);border-radius:50%;background:transparent;color:var(--j-text-2);transition:background var(--j-normal),border-color var(--j-normal)}
.icon-btn:hover{background:var(--j-surface-hover);border-color:var(--j-border-strong);color:var(--j-text)}
.icon-btn.subtle{border-color:transparent;color:var(--j-text-3)}
.icon-btn.subtle:hover{color:var(--j-text);background:var(--j-surface-selected)}
.icon-btn.accent{background:linear-gradient(180deg,var(--c-accent-bright),var(--c-accent-mid));color:var(--c-ink-on-accent);border-color:var(--c-edge-2)}
.icon-btn.accent:hover{filter:brightness(1.06)}
.app>header{height:64px}.header-actions{gap:var(--j-space-2)}
.compose{max-width:820px;margin:0 auto;width:100%}
#form{max-width:min(100%,900px);margin:0 auto;display:block;border:1px solid var(--j-border-strong);border-radius:30px;background:var(--c-compose);box-shadow:0 12px 34px var(--c-drop);padding:6px 8px}
#form:focus-within{border-color:var(--j-cyan);box-shadow:0 12px 34px var(--c-drop),var(--j-glow)}
#form .row{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto 44px;align-items:center;gap:var(--j-space-2);min-height:48px}
#form .row>*{align-self:center}
#form .icon-btn{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;flex:none}
#form textarea{min-width:0;min-height:44px;max-height:140px;padding:12px var(--j-space-1);font-size:16px;line-height:1.35;background:transparent;border:0;resize:none;outline:none;color:var(--j-text)}
#form textarea::placeholder{color:var(--j-text-3)}
#form .row>.pop-anchor{display:inline-flex}
.chip{display:inline-flex;align-items:center;gap:var(--j-space-1);margin:var(--j-space-1) 0 var(--j-space-2) var(--j-space-2);padding:0 var(--j-space-1) 0 var(--j-space-3);min-height:28px;border:1px solid var(--j-border);border-radius:var(--j-radius-pill);font-size:12px;color:var(--j-text-2)}
.chip button{display:grid;place-items:center;width:24px;height:24px;border:0;background:none;color:inherit;font-size:15px;line-height:1;border-radius:50%}
.chip button:hover{background:var(--j-surface-selected)}
/* ---- One popover for every menu: anchored on desktop, a sheet on phones. ---- */
.pop-anchor{position:relative}
.popover{position:absolute;bottom:calc(100% + var(--j-space-2));left:0;width:min(292px,calc(100vw - 24px));padding:var(--j-space-2);border:1px solid var(--j-border);border-radius:16px;background:var(--j-surface-strong);box-shadow:var(--j-shadow),var(--j-glow);backdrop-filter:blur(18px);z-index:20;overflow:hidden;
  transform-origin:bottom left;animation:pop var(--j-normal) ease-out}
#engine-menu .popover,#privacy .popover{left:auto;right:0;transform-origin:bottom right}
@keyframes pop{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.popover{animation:none}.pill,.icon-btn{transition:none}}
.menu-section{padding:var(--j-space-2) var(--j-space-3) var(--j-space-1);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--j-text-3)}
.menu-row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;width:100%;min-height:48px;padding:8px 12px;border:0;border-radius:var(--j-radius-sm);background:transparent;color:var(--j-text);text-align:left;font:inherit;cursor:pointer}
.menu-row:hover,.menu-row:focus-visible{background:var(--j-surface-hover);outline:none}
.menu-row[aria-checked="true"],.menu-row[aria-selected="true"]{background:var(--j-surface-selected)}
.menu-row .ji{color:var(--j-cyan-soft)}
.menu-text{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.menu-title{font-size:14px}.menu-hint{font-size:12px;color:var(--j-text-3);margin-top:2px}
.menu-check{width:16px;height:16px;color:var(--j-cyan);visibility:hidden}
.menu-row[aria-checked="true"] .menu-check,.menu-row[aria-selected="true"] .menu-check{visibility:visible}
.menu-note{margin:var(--j-space-2) var(--j-space-3) var(--j-space-1);font-size:12px;color:var(--j-text-3);line-height:1.4}
.menu-note a{color:var(--j-cyan-soft)}
input[type=checkbox]{width:20px;height:20px;margin:0;justify-self:center}
.run-card{border:1px solid var(--j-border-strong);border-radius:var(--j-radius-panel);background:var(--j-surface);padding:var(--j-space-4);box-shadow:var(--j-shadow);max-width:320px}
@media(max-width:600px){
  .pill-text{display:none}.pill.icon-pill{width:var(--j-hit);padding:0;justify-content:center;border-radius:50%}
  .app>header{height:56px}.compose{margin:0}
  /* Secondary controls leave the row before the input can be squeezed: the shield moves into the + menu,
     the runtime pill tightens, and the input keeps at least 120px. */
  #form{padding:4px 6px;border-radius:28px}#form .row{min-height:44px;grid-template-columns:44px minmax(120px,1fr) auto 44px}
  /* Secondary controls leave the row before the input can be squeezed. The shield moves into
     the + menu and the runtime pill lifts onto its own line above the input, which is what the
     layout spec asks for: never solve narrow width by wrapping critical controls. */
  #form .row>#privacy{display:none}#form .row>#privacy.sheet-open{display:block;position:static;width:0;height:0;overflow:visible}
  #form .row>#privacy.sheet-open>#privacy-btn{display:none}
  #form{display:grid;gap:2px}
  #form .row{grid-template-columns:44px minmax(0,1fr) 44px}
  #form .row>#engine-menu{grid-row:1;grid-column:1/-1;justify-self:start;margin:0 0 0 48px;order:-1;height:30px}
  #form{padding-top:6px}
  .pill.compact{height:30px;min-height:30px;padding:0 10px;font-size:12px}
  #form .row>#engine-menu .pill.compact{background:transparent;border-color:transparent;padding-left:0;color:var(--j-text-3)}
  #form textarea{font-size:16px;padding:8px 2px;min-height:40px}
  .popover{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;border-radius:var(--j-radius-panel) var(--j-radius-panel) 0 0;padding:var(--j-space-3) var(--j-space-3) max(var(--j-space-4),env(safe-area-inset-bottom));transform-origin:bottom center;animation:sheet 180ms ease-out}
  .popover::before{content:"";display:block;width:36px;height:4px;margin:0 auto var(--j-space-3);border-radius:2px;background:var(--c-cyan-35)}
  @keyframes sheet{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
  .scrim{position:fixed;inset:0;background:var(--c-scrim-2);z-index:39}
  body>.popover{z-index:40}
  .run-card{max-width:none}
}



/* ---- One control scale. Every control is the same height; hierarchy comes from fill and
   colour, not size. Visual 36px, hit area 44px, icon 18px, fully round. ---- */
:root{--j-ctl:36px;--j-icon:18px}
.pill,.pill.round,.pill.icon-pill,.icon-btn,#send,#form .icon-btn{position:relative;height:var(--j-ctl);min-height:var(--j-ctl);box-sizing:border-box}
.icon-btn,#send,#form .icon-btn,.pill.round,.pill.icon-pill{width:var(--j-ctl);padding:0;border-radius:50%;font-size:0}
.pill{border-radius:999px;font-size:14px;padding:0 14px;gap:var(--j-space-2)}
.pill.compact{height:var(--j-ctl);min-height:var(--j-ctl);font-size:13px;padding:0 12px}
.ji{width:var(--j-icon);height:var(--j-icon)}
.ji.caret{width:13px;height:13px}
/* The touch target stays 44px without the control looking 44px. */
.pill::before,.icon-btn::before,#send::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,var(--j-hit));height:var(--j-hit)}
.menu-row::before{content:none}
#form .row{grid-template-columns:var(--j-ctl) minmax(0,1fr) auto auto var(--j-ctl)}
#form textarea{min-height:var(--j-ctl)}
@media(max-width:600px){
  #form .row{grid-template-columns:var(--j-ctl) minmax(0,1fr) var(--j-ctl)}
  #form .row>#engine-menu{height:var(--j-ctl);margin-left:calc(var(--j-ctl) + var(--j-space-2))}
  #form .row>#engine-menu .pill.compact{padding-left:0}
}

.run-card.approval{margin-top:var(--j-space-2);border-color:var(--j-warning);background:var(--j-surface-strong)}
.run-card.approval .state{color:var(--j-warning)}
.run-card .actions .pill{font-size:13px}

/* One line that pulses while Jude works, and the result in its place when it is done.
   The run card put a job scheduler in the conversation; the machinery belongs behind a click. */
.run{margin:10px 0 16px;display:grid;justify-items:start;gap:8px}
.doing{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--fg)}
.doing .spark{color:var(--accent,var(--c-cyan));font-size:13px;animation:jude-pulse 1.4s ease-in-out infinite}
.doing.done .spark{animation:none}
.doing .step{font-size:13px;color:var(--c-ink-3)}
.run-actions{display:flex;gap:14px;align-items:baseline}
.run .detail{font-size:12px;color:var(--c-ink-3);background:none;border:0;padding:0 2px;cursor:pointer}
.run .detail:hover{opacity:1;text-decoration:underline}
@keyframes jude-pulse{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.doing .spark{animation:none;opacity:.8}}

/* The file gets the width it needs. It used to wrap one word per line in a 270px box. */
.file-result{flex-basis:100%;max-width:640px;border:1px solid var(--edge,var(--c-line-strong));border-radius:12px;padding:10px 14px}
.file-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.file-text{min-width:0;display:grid;gap:2px}
.file-name{font-size:15px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.file-meta{font-size:13px;color:var(--c-ink-3)}
.file-actions{display:flex;gap:10px;flex-shrink:0}
@media (max-width:600px){.file-result{max-width:100%}.file-actions{width:100%}}

/* A paused request is a footnote, not the page. */
#request-queue{font-size:13px;color:var(--c-ink-2);border:0;padding:0;margin:4px 0}
#request-queue summary{cursor:pointer}
#request-queue ol{margin:4px 0 0;padding-left:18px}

/* The deck, rendered from the file itself, beside the conversation. */
#preview-pane{position:fixed;top:0;right:0;bottom:0;width:var(--preview-width,min(46vw,760px));background:var(--bg,var(--c-app));
  border-left:1px solid var(--edge,var(--c-line-strong));display:flex;flex-direction:column;z-index:40;
  padding-top:env(safe-area-inset-top,0px)}
#preview-pane>header{display:flex;align-items:baseline;gap:12px;padding:14px 16px;border-bottom:1px solid var(--edge,var(--c-line-strong))}
#preview-pane header b{flex:1;min-width:0;overflow-wrap:anywhere;font-size:14px}
#preview-count{font-size:13px;color:var(--c-ink-3)}
#preview-body{flex:1;display:grid;grid-template-columns:132px 1fr;gap:12px;padding:12px;overflow:hidden}
#preview-rail{overflow-y:auto;display:grid;gap:8px;align-content:start}
#preview-rail img{width:100%;border:1px solid var(--edge,var(--c-line-strong));border-radius:6px;cursor:pointer;display:block}
#preview-rail img.on{outline:2px solid var(--accent,var(--c-cyan))}
#preview-stage{overflow:auto;display:grid;place-items:start center}
.preview-slide{width:100%;height:auto;border-radius:8px}
@media (max-width:900px){#preview-pane{width:100%;border-left:0}
  #preview-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  #preview-rail{grid-auto-flow:column;grid-auto-columns:110px;overflow-x:auto;overflow-y:hidden}}

/* What it has cost so far, under the working line. Real numbers only. */
.meter{display:flex;gap:14px;font-size:12px;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.meter span:empty{display:none}

/* A thumbnail is a placeholder until its own slide has loaded, so the rail is never a
   half-built deck with broken pictures in it. */
#preview-rail .thumb{padding:0;border:1px solid var(--edge,var(--c-line-strong));border-radius:6px;background:none;
  cursor:pointer;display:block;aspect-ratio:16/9;overflow:hidden;position:relative}
#preview-rail .thumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .2s}
#preview-rail .thumb.loading img{opacity:0}
#preview-rail .thumb.loading{background:linear-gradient(100deg,var(--c-panel) 30%,var(--c-raised) 50%,var(--c-panel) 70%);
  background-size:220% 100%;animation:jude-shimmer 1.2s linear infinite}
#preview-rail .thumb.missing{background:var(--c-panel)}
#preview-rail .thumb.on{outline:2px solid var(--accent,var(--c-cyan))}
@keyframes jude-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){#preview-rail .thumb.loading{animation:none}}

/* What has been asked for while the work is still going. */
.direction{font-size:13px;color:var(--c-ink-2);margin:2px 0}
.direction summary{cursor:pointer;color:var(--c-ink-3)}
.direction p{margin:4px 0 0 14px}

/* Answers are written in markdown and maths. The page used to print the markers. */
.turn h4.answer-head{font-size:15px;font-weight:700;margin:14px 0 4px}
.turn p.answer-item{margin:2px 0 2px 14px}
.turn code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--c-lift-2);padding:1px 5px;border-radius:5px}

/* The chat list filters, matching the composer's controls rather than native selects. */
.panel-filters{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 4px}
.panel-filters .pop-anchor{position:relative}
.panel-filters .popover{min-width:200px}
.menu-row.on .menu-title{font-weight:600}
.menu-row.on::after{content:'✓';margin-left:auto;font-size:13px}

/* A typed answer. Maths, tables and code are the only things allowed to be wider than the
   column, and each scrolls inside its own box so the page never scrolls sideways. */
.turn h1,.turn h2,.turn h3,.turn h4{font-size:1.05rem;font-weight:600;margin:1.1rem 0 .35rem;color:var(--c-ink)}
.turn h1{font-size:1.25rem}.turn h2{font-size:1.15rem}
.turn ul,.turn ol{margin:.4rem 0 .4rem 1.2rem;padding:0}
.turn li{margin:.25rem 0}
.turn blockquote{margin:.6rem 0;padding:.1rem 0 .1rem .8rem;border-left:2px solid var(--c-line);color:var(--c-ink-3)}
.turn pre{overflow-x:auto;background:var(--c-app);border:1px solid var(--c-line);border-radius:8px;padding:.7rem .8rem;margin:.6rem 0}
.turn pre code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;color:var(--c-ink-2)}
.table-scroll{overflow-x:auto;margin:.6rem 0}
.turn table{border-collapse:collapse;font-size:.9rem}
.turn th,.turn td{border:1px solid var(--c-line);padding:.35rem .6rem;text-align:left}
.turn th{background:var(--c-sunk);color:var(--c-ink);font-weight:600}
.maths{font-size:1.05em}
/* MathML shrinks under a fraction or a limit, so a display equation reads smaller than the
   prose around it. It is the thing being read here, so it is set larger, not equal. */
.maths.display{display:block;overflow-x:auto;margin:1rem 0;text-align:center;font-size:1.3em}
.maths math{color:var(--c-ink)}
.maths-source{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;color:var(--c-ink-2);
  background:var(--c-app);border:1px solid var(--c-line);border-radius:6px;padding:.1rem .35rem}
.citation{font-size:.9rem;color:var(--c-ink-3);margin:.3rem 0}
.citation a{color:var(--c-cyan)}
.evidence{margin:.6rem 0;padding:.5rem .7rem;border-left:2px solid var(--c-line-strong);background:var(--c-sunk);border-radius:0 8px 8px 0}
.evidence p{margin:.15rem 0}
.evidence-source{font-size:.82rem;color:var(--c-ink-4)}
.callout{display:block;margin:.6rem 0;padding:.5rem .7rem;border-radius:8px;border:1px solid var(--c-line);background:var(--c-sunk)}
.callout-kind{display:inline-block;margin-right:.5rem;font-size:.7rem;letter-spacing:.08em;font-weight:700;
  padding:.1rem .4rem;border-radius:4px;background:var(--c-line);color:var(--c-ink-2)}
.callout.known .callout-kind{background:var(--c-good-bg);color:var(--c-good)}
.callout.derived .callout-kind{background:var(--c-raised);color:var(--c-cyan)}
.callout.hypothesis .callout-kind{background:var(--c-warn-bg);color:var(--c-warn)}
.callout.refuted .callout-kind{background:var(--c-bad-bg);color:var(--c-bad)}

/* The run actions row is the anchor for the detail panel. Without a positioned ancestor an
   absolutely placed panel resolves against the whole document, which in a long conversation
   means somewhere above the top of the page. */
.run-actions{position:relative}

.turn.assistant>p:first-of-type{font-size:15.5px}

/* Chats are the application shell. Header and footer are fixed; only the history scrolls. */
#rail{display:flex;flex-direction:column;min-height:0;gap:10px;padding:0 14px 10px 0;
  border-right:1px solid var(--c-line)}
.rail-head{flex:0 0 auto;display:flex;flex-direction:column;gap:8px}
.rail-id{display:flex;align-items:center;gap:2px;position:relative;min-height:36px}
/* One JudeAI mark on screen at a time. It belongs at the top of the list while the list is
   open, which on a phone covers the header entirely, and the header keeps it otherwise. */
.rail-brand{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
.rail-brand .judeai-logo{border-radius:20%;flex:0 0 auto}
.rail-brand strong{font-size:16px;font-weight:600;letter-spacing:-.01em}
/* With the list open the list is the top left of the application: it carries the mark, the
   search and the way back. A second bar above it was an empty 88px band with two controls
   floating in it, and the conversation started halfway down the window. */
@media(min-width:901px){body.with-rail>.app>header{display:none}}
@media(max-width:900px){body.with-rail header>.brand{visibility:hidden}}
/* This is a skip target, focused by script. A browser ring around the whole conversation
   looked like a border nobody drew. */
#chat:focus,#chat:focus-visible{outline:none}
.rail-id .icon-btn{width:32px;height:32px;min-height:32px;padding:0}
.rail-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:42px;
  border:1px solid var(--c-cyan-26);border-radius:12px;padding:9px 14px;font-size:14.5px;
  background:linear-gradient(130deg,var(--c-accent-deep),var(--c-accent-mid))}
.rail-search input{width:100%;box-sizing:border-box;padding:.45rem .65rem;border-radius:10px;
  border:1px solid var(--c-line-strong);background:var(--c-field);color:inherit;font:inherit;font-size:14px}
.rail-search input:focus-visible{outline:none;border-color:var(--c-cyan)}
.rail-nav{display:flex;flex-direction:column;gap:1px}
.rail-nav-row{display:flex;align-items:center;gap:9px;width:100%;min-height:34px;padding:6px 8px;
  border:0;border-radius:9px;background:transparent;color:var(--c-ink-2);font:inherit;font-size:14px;text-align:left}
.rail-nav-row .ji{width:16px;height:16px;flex:0 0 auto}
.rail-nav-row:hover{background:var(--c-hover)}
.rail-nav-row.on{background:var(--c-raised);color:var(--c-ink)}
.rail-nav-row.sub{padding-left:31px;font-size:13.5px;color:var(--c-ink-3);min-height:30px}
.rail-sub{display:flex;flex-direction:column;gap:1px}
.rail-empty{margin:2px 0 2px 31px;font-size:12.5px;color:var(--c-ink-4)}
.rail-bulk{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:12.5px;
  border:1px solid var(--c-line-strong);border-radius:11px;padding:7px}
.rail-bulk .quiet{min-height:30px;padding:4px 9px;font-size:12.5px;border-radius:9px}
.rail-bulk .danger{color:var(--c-bad);border-color:var(--c-bad-edge)}
#rail-note{flex:0 0 auto;margin:0;font-size:12.5px;color:var(--c-ink-3)}
/* One quiet line about the allowance, with at most two plain actions. It sits with the
   status line, above the composer, and never covers the conversation. */
.allowance{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:min(100%,900px);
  clear:both;margin:0 auto 8px;padding:0 8px;font-size:13.5px;color:var(--c-ink-2)}
.allowance .quiet{min-height:32px;padding:5px 12px;font-size:13px}
#rail-note:empty{display:none}
#rail-list{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;
  scrollbar-color:var(--c-cyan-26) transparent}
#rail-list:focus-visible{outline:2px solid var(--c-cyan);outline-offset:2px;border-radius:10px}
.rail-group{margin:0 0 4px}
.rail-group>summary{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--c-ink-4);padding:7px 8px 4px;min-height:26px}
.rail-group-count{color:var(--c-ink-5)}
.rail-row{position:relative;display:flex;align-items:center;gap:2px;border:0;border-radius:9px}
.rail-row:hover{background:var(--c-hover)}
.rail-row.current{background:var(--c-selected)}
.rail-row.picked{box-shadow:inset 0 0 0 1px var(--c-cyan)}
.rail-tick{flex:0 0 auto;margin-left:7px;width:17px;height:17px}
.rail-open{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding:7px 8px;
  border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.rail-open:focus-visible{outline:2px solid var(--c-cyan);outline-offset:-2px;border-radius:9px}
.rail-line{display:flex;align-items:baseline;gap:6px;min-width:0}
.rail-pin{flex:0 0 auto;color:var(--c-cyan);font-size:11px}
.rail-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.3}
.rail-kind{font-size:11.5px;color:var(--c-ink-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-kind.work{color:var(--c-cyan)}
.rail-state{flex:0 0 auto;font-size:10px;border-radius:999px;padding:1px 6px;margin-right:2px;
  border:1px solid var(--c-cyan-30);color:var(--c-cyan)}
.rail-state.bad{border-color:var(--c-bad-edge);color:var(--c-bad)}
.rail-state.wait{border-color:var(--c-warn-edge);color:var(--c-warn)}
.rail-more{flex:0 0 auto;width:28px;height:28px;margin-right:4px;border:0;border-radius:8px;
  background:transparent;color:var(--c-ink-4);font-size:15px;line-height:1;cursor:pointer;opacity:0}
.rail-row:hover .rail-more,.rail-more:focus-visible,.rail-row.current .rail-more{opacity:1}
.rail-more:hover,.rail-more:focus-visible{background:var(--c-field);color:var(--c-ink);outline:none}
.rail-foot{flex:0 0 auto;display:flex;flex-direction:column;gap:1px;padding-top:8px;border-top:1px solid var(--c-line)}
.menu-row.chosen .menu-title::after{content:" ✓";color:var(--c-cyan)}
/* One ring, one size, one stroke. The header circles were drawn at two sizes with the glyph
   off centre, because a pill and a round button were each setting their own height. */
header .pill.icon-pill,header .icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;
  min-height:40px;padding:0;border-radius:50%;border:1px solid var(--c-edge);background:transparent}
header .pill.icon-pill:hover,header .icon-btn:hover{background:var(--c-lift);border-color:var(--c-edge-hover)}
header .pill.icon-pill .ji,header .icon-btn .ji{width:17px;height:17px;stroke-width:1.6;color:var(--c-ink)}
header>#open-library{margin-right:0}
/* New chat: the mark is a circle, the label sits beside it. */
.rail-primary{justify-content:flex-start;gap:10px;background:transparent;border-color:var(--c-edge)}
.rail-primary:hover{background:var(--c-lift)}
.rail-new-mark{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--c-edge-strong);flex:0 0 auto}
.rail-new-mark .ji{width:13px;height:13px}
/* The account is a person, so it is shown as one: initials, name, and what the account is. */
.rail-account{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 8px;
  border:0;border-radius:10px;background:transparent;color:inherit;font:inherit;text-align:left}
.rail-account:hover{background:var(--c-hover)}
.rail-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  background:var(--c-selected);border:1px solid var(--c-edge);font-size:11.5px;letter-spacing:.02em}
.rail-avatar.jude-icon{border:0;border-radius:8px;background:none;overflow:hidden}
.rail-avatar.signed-out{border:1px solid var(--c-cyan-30);background:transparent;color:var(--c-cyan)}.rail-avatar .person-icon{width:18px;height:18px}
.rail-avatar .judeai-logo{width:100%;height:100%}
.rail-who{display:flex;flex-direction:column;min-width:0}
#rail-account-label{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-plan{font-size:11.5px;color:var(--c-ink-4)}
/* Temporary chat looks like JudeAI, because it is JudeAI. One sentence in the welcome state
   and a dotted ring on the way in; nothing else changes. */
#welcome-note{margin:0;max-width:34ch;text-align:center;font-size:14px;color:var(--c-ink-3)}
#rail-temporary.on{background:var(--c-raised);color:var(--c-ink)}
#save-temporary{align-self:stretch;margin:0 0 6px}
/* Plugins: a calm list in the conversation pane. No tiles, no gradients, one action a row. */
#plugins-page{overflow:auto;padding:8px 12px 24px;max-width:min(100%,860px);margin:0 auto}
.page-head{display:block}
.page-head h1{font-size:26px;font-weight:600;margin:6px 0 6px;text-align:left}
.page-note{margin:0 0 10px;font-size:13.5px;color:var(--c-ink-3);max-width:62ch}
#plugin-find{width:100%;box-sizing:border-box;margin:6px 0 4px;padding:.5rem .7rem;border-radius:10px;
  border:1px solid var(--c-line-strong);background:var(--c-field);color:inherit;font:inherit;font-size:14px}
#plugin-find:focus-visible{outline:none;border-color:var(--c-cyan)}
#plugins-note{margin:6px 0;font-size:13px;color:var(--c-ink-3)}
#plugins-note:empty{display:none}
.plugin-group{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--c-ink-4);margin:18px 0 4px}
.plugin-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 8px;border:0;
  border-radius:10px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.plugin-row:hover{background:var(--c-hover)}
.plugin-mark{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:9px;
  border:1px solid var(--c-edge);font-size:15px;font-weight:600;color:var(--c-ink-on-accent)}
.plugin-glyph{width:19px;height:19px}
.plugin-title{display:flex;align-items:center;gap:12px;margin:12px 0 2px}
.plugin-title h2{margin:0}
.plugin-text{display:flex;flex-direction:column;min-width:0;flex:1}
.plugin-name{font-size:14.5px}
.plugin-note{font-size:12.5px;color:var(--c-ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plugin-state{flex:0 0 auto;font-size:12.5px;color:var(--c-ink-4)}
#plugin-detail h2{font-size:22px;font-weight:600;margin:12px 0 2px}
#plugin-detail h3{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-4);margin:18px 0 6px}
#plugin-detail>button.quiet{margin:8px 0}
.cap-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--c-line)}
.cap-text{display:flex;flex-direction:column;min-width:0;flex:1}
.cap-title{font-size:14px}
.cap-note{font-size:12.5px;color:var(--c-ink-4)}
.cap-choice{font:inherit;font-size:13px;color:inherit;background:var(--c-field);border:1px solid var(--c-line-strong);
  border-radius:9px;padding:6px 8px;min-height:36px}
.cap-secret{display:block;width:100%;box-sizing:border-box;margin:6px 0 10px;padding:.5rem .7rem;
  border-radius:10px;border:1px solid var(--c-line-strong);background:var(--c-field);color:inherit;font:inherit}
#plugin-detail .primary{width:auto;min-width:200px}

/* Plugins are an action surface, not faint catalogue metadata. */
#plugins-page{max-width:min(100%,980px);font-size:17px}
.page-head h1{font-size:32px;font-weight:650;letter-spacing:-.02em}
#plugin-find{min-height:52px;font-size:17px;color:var(--c-ink);border-color:var(--c-cyan-30)}
#plugin-find::placeholder{color:var(--c-ink-2);opacity:1}
.plugin-group{font-size:13px;font-weight:700;color:var(--c-cyan-soft);letter-spacing:.09em}
.plugin-row{min-height:64px;padding:12px;border-radius:12px}
.plugin-name{font-size:17px;font-weight:600;color:var(--c-ink)}
.plugin-note,.plugin-state{font-size:15px;color:var(--c-ink-2)}
#plugin-detail{max-width:760px;margin:0 auto;padding:8px 0 48px}
#plugin-detail h2{font-size:32px;line-height:1.15;letter-spacing:-.02em}
#plugin-detail h3{font-size:15px;color:var(--c-cyan-soft);letter-spacing:.06em}
#plugin-detail>.page-note,.cap-note{font-size:17px;line-height:1.55;color:var(--c-ink-2)}
#plugin-detail>button.quiet{font-size:16px;border-color:var(--c-cyan-30)}
#plugin-detail:has(.device-explainer)>.page-note,.device-explainer summary,.device-explainer p{font-size:16px;color:var(--c-ink-2)}
.section-kicker{font-size:13px!important;color:var(--c-cyan-soft)}
.device-row .cap-title,.cap-row .cap-title{font-size:17px}
.device-row .cap-note,.cap-row .cap-note{font-size:15px;color:var(--c-ink-2)}
.device-actions button,.device-actions select,.cap-choices button{font-size:14px!important;min-height:42px}
/* Usage and billing: plain rows, one thin line where something is running down. */
#usage-page{overflow:auto;padding:8px 12px 24px;max-width:min(100%,760px);margin:0 auto}
#usage-note{margin:6px 0;font-size:13px;color:var(--c-ink-3)}
#usage-note:empty{display:none}
.usage-block{border-top:1px solid var(--c-line);padding:14px 0 4px}
.usage-block:first-of-type{border-top:0}
.usage-block h2{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--c-ink-4);margin:0 0 8px}
.usage-row{display:flex;align-items:center;gap:12px;min-height:34px}
.usage-label{flex:1;font-size:15px}
.usage-value{font-size:14px;color:var(--c-ink-3)}
.usage-row .quiet{min-height:32px;padding:5px 12px;font-size:13px}
.usage-note{margin:4px 0 10px;font-size:12.5px;color:var(--c-ink-4)}
.usage-track{display:block;height:3px;border-radius:2px;background:var(--c-track);margin:2px 0 12px;overflow:hidden}
.usage-fill{display:block;height:100%;background:var(--c-cyan);border-radius:2px}
.menu-head{display:flex;flex-direction:column;padding:8px 12px 10px;border-bottom:1px solid var(--c-line);margin-bottom:4px}
.menu-head b{font-size:14px}
.menu-head span{font-size:12px;color:var(--c-ink-4)}
/* The dial: bottom left, in the list's foot while the list is open and in the corner of the
   window while it is not. It shows what pressing it gives you, not what you already have. */
.dial{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;padding:0;
  border:1px solid var(--c-line);border-radius:50%;background:transparent;color:var(--c-ink-3)}
.dial:hover{background:var(--c-hover);color:var(--c-ink)}
.dial .ji{width:17px;height:17px}
.dial.corner{position:fixed;left:18px;bottom:max(18px,env(safe-area-inset-bottom));z-index:30;
  background:var(--c-surface-strong)}
@media(max-width:900px){.dial.corner{display:none}}
.rail-foot{flex-direction:row;flex-wrap:wrap;align-items:center}
.rail-foot .rail-account{flex:1;min-width:0}
.settings-head{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--c-ink-4);margin:14px 0 6px}
.theme-choices{display:flex;gap:6px;margin-bottom:10px}
.theme-pick{flex:1;min-height:38px;border:1px solid var(--c-line-strong);border-radius:10px;
  background:transparent;color:inherit;font:inherit;font-size:14px}
.theme-pick.on{border-color:var(--c-cyan);color:var(--c-ink);background:var(--c-cyan-08)}
/* A menu opened from inside the chat list has to sit above it. The list is fixed at 45 on a
   phone, so a sheet at 39 opened underneath it and looked like nothing had happened. */
.scrim{z-index:58}
body .popover{z-index:59}
.rail-scrim{position:fixed;inset:0;z-index:44;background:var(--c-scrim)}
@media(pointer:coarse){.rail-more{opacity:1}}

/* The shell makes room for the list rather than covering the conversation with it, and the
   list slides in and out of that space instead of appearing and vanishing. */
@media(min-width:901px){
  .app{display:grid;grid-template-columns:0 minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto;transition:grid-template-columns .22s ease}
  .app>header{grid-column:1/-1}
  #rail{grid-column:1;grid-row:2;overflow:hidden;opacity:0;visibility:hidden;
    transition:opacity .16s ease,visibility 0s linear .22s}
  #chat{grid-column:2;grid-row:2}
  .compose{grid-column:2;grid-row:3}
  body:not(.with-rail) #rail{padding:0;border-right:0}
  body.with-rail .app{grid-template-columns:296px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  body.with-rail #rail{grid-row:1}body.with-rail #chat{grid-row:1}body.with-rail .compose{grid-row:2}
  body.with-rail #rail{padding-top:14px}
  body.with-rail #rail{opacity:1;visibility:visible;transition:opacity .18s ease .04s}
  .rail-scrim{display:none!important}
}
@media(max-width:900px){
  #rail{position:fixed;z-index:45;top:0;bottom:0;left:0;width:min(340px,92vw);height:100dvh;
    padding:max(12px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));
    background:var(--c-app);box-shadow:0 0 60px var(--c-shade-10);
    transform:translateX(-101%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  body.with-rail #rail{transform:none;visibility:visible;transition:transform .22s ease}
}
@media(prefers-reduced-motion:reduce){.app,#rail{transition:none!important}}

/* A sheet opened from inside a modal lives in that modal, so it must fill the modal rather
   than the viewport, and sit above its content. */
dialog>.popover{position:absolute;left:0;right:0;bottom:0;width:auto;z-index:41}
dialog>.scrim{position:absolute;inset:0;z-index:40}

/* This Mac, the approval card and the door.

   These use the palette's own tokens. An earlier version of this block invented names that do
   not exist (--c-text, --c-surface-2, --c-accent), every one of them fell back to nothing, and
   the result was grey text on a grey field that nobody could read. */

/* The pairing code is read off the screen and typed into a terminal, so it is set large and
   spaced, in full-contrast ink. */
.pair-code{font:600 28px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;
  color:var(--c-ink);background:var(--c-field);border:1px solid var(--c-line-strong);
  border-radius:12px;padding:14px 18px;margin:10px 0;display:inline-block}
.bridge-block{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin:8px 0 14px}
.bridge-steps{flex:1 1 260px;min-width:0;overflow-x:auto;margin:0;padding:12px 14px;
  background:var(--c-field);border:1px solid var(--c-line-strong);border-radius:12px;
  font:13px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--c-ink)}
.device-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--c-line)}
.device-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* A proposal waiting for the person. Set apart from the answer, because it is not one: it is
   something that has not happened yet. */
.approve-card{margin:12px 0;padding:14px 16px;border:2px solid var(--c-cyan);border-radius:14px;
  background:var(--c-field)}
.approve-what{margin:0 0 8px;font-weight:600;color:var(--c-ink)}
.approve-detail{margin:0 0 10px;padding:10px 12px;overflow-x:auto;border-radius:10px;
  background:var(--c-sunk);border:1px solid var(--c-line-strong);
  font:13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--c-ink)}
.approve-row{display:flex;gap:8px;flex-wrap:wrap}

/* The door is door.css. */

/* Finished slides appear in the conversation without an extra reveal click. */
.file-result{width:min(100%,640px);padding:0;overflow:hidden;box-sizing:border-box;background:var(--c-panel)}
.file-row{padding:14px 16px;gap:12px}
.file-row+.file-row{border-top:1px solid var(--c-line-strong)}
.file-row.has-cover{display:grid;grid-template-columns:minmax(0,1fr);padding:0}
.file-row.has-cover .file-text{padding:0 16px}
.file-row.has-cover .file-actions{padding:0 16px 14px}
.file-cover{display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:0;overflow:hidden;background:var(--c-raised);cursor:zoom-in}
.file-cover img{display:block;width:100%;height:100%;object-fit:contain}
.file-actions .quiet{font:inherit;font-size:13px;line-height:1.3;padding:8px 12px;min-height:36px;border-radius:8px;text-decoration:none;border:1px solid var(--c-line-strong);background:transparent;color:var(--fg)}
.file-actions .quiet:hover{border-color:var(--c-cyan);background:var(--c-raised)}

/* Answers keep the structure the person asked for and arrive at a calm reading pace. */
.answer-list{margin:8px 0 14px;padding-left:1.4em}
.answer-list li{margin:6px 0;padding-left:.25em}
.answer-list li>p{margin:0}
.typing-cursor{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.16em;background:var(--c-cyan);animation:jude-cursor .8s steps(1,end) infinite}
@keyframes jude-cursor{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.typing-cursor{display:none}}
.file-name{font-size:14px;line-height:1.45}
.file-meta{font-size:12px;line-height:1.5}
#preview-pane>header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:18px 20px}
#preview-name{grid-column:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#preview-count{grid-column:1;font-size:12px}
.preview-actions{grid-column:2;grid-row:1/3;align-self:center;display:flex;gap:8px}
.preview-actions button{font-size:13px;padding:8px 12px;white-space:nowrap}
#preview-body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 100px;gap:18px;padding:20px}
#preview-stage{grid-row:1;align-items:center;overflow:auto}
#preview-rail{grid-row:2;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:4px;align-items:center}
#preview-rail .thumb{flex:0 0 142px;height:80px;aspect-ratio:16/9}
#preview-rail .thumb img{border:0;border-radius:0}
.preview-slide{border-radius:3px;box-shadow:0 12px 36px var(--c-shade-2)}
@media(max-width:600px){#preview-body{padding:12px;gap:12px}.file-result{width:100%}}
.file-content-cover{display:block;width:100%;padding:12px 16px;text-align:left;white-space:pre-wrap;overflow:hidden;max-height:104px;border:0;border-bottom:1px solid var(--c-line-strong);background:var(--c-raised);color:var(--fg);font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;cursor:zoom-in;overflow-wrap:anywhere}
.file-content-cover:hover{background:var(--c-field)}
#preview-pane.content-view #preview-body{grid-template-rows:minmax(0,1fr)}
#preview-pane.content-view #preview-rail{display:none}
#preview-pane.content-view #preview-stage{display:block}
.file-content{width:100%;font-size:13px;line-height:1.65;color:var(--fg)}
.file-content pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}
.file-content table{border-collapse:collapse;width:100%;text-align:left}
.file-content th,.file-content td{padding:9px 12px;border-bottom:1px solid var(--c-line-strong);vertical-align:top;overflow-wrap:anywhere;max-width:32ch}
.file-content th{position:sticky;top:0;background:var(--c-raised);font-weight:600}

/* A live device is useful context, not an alert. Keep it as a quiet rail row in Jude blue. */
.rail-hands{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:7px 5px;
  border:0;border-top:1px solid var(--c-cyan-16);border-radius:0;background:transparent;
  font-size:12px;color:var(--c-ink-2)}
.rail-hands-dot{width:6px;height:6px;border-radius:50%;background:var(--c-cyan);box-shadow:0 0 10px var(--c-cyan-32);flex:none}
#rail-hands-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-hands-stop{flex:none;padding:4px 7px;border-radius:7px;border:0;
  background:transparent;color:var(--c-ink-3);font-size:12px;cursor:pointer}
.rail-hands-stop:hover{background:var(--c-lift)}
.rail-hands-stop:focus-visible{outline:2px solid var(--c-cyan);outline-offset:2px}
#status[data-tone="working"]{border-color:transparent!important;background:transparent!important;color:var(--c-ink-2)!important;padding-left:24px!important;position:relative}
#status[data-tone="working"]:before{content:"";position:absolute;left:7px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:var(--c-cyan);box-shadow:0 0 0 0 var(--c-cyan-32);animation:jude-thinking 1.25s ease-in-out infinite}
@keyframes jude-thinking{0%,100%{opacity:.35;transform:scale(.72);box-shadow:0 0 0 0 var(--c-cyan-08)}50%{opacity:1;transform:scale(1);box-shadow:0 0 0 5px var(--c-cyan-08)}}
.message-tools{display:flex;gap:8px;margin-top:8px}.message-tools .quiet{min-height:32px;padding:4px 10px;font-size:12px}.turn.assistant:hover .message-tools,.message-tools:focus-within{opacity:1}#voice.listening{color:var(--c-cyan);border-color:var(--c-cyan-48);box-shadow:var(--c-glow)}@media(max-width:600px){#engine{padding-inline:10px}.message-tools{opacity:1}}
.response-meta{margin-top:9px;color:var(--c-ink-3);font-size:12px;font-weight:500;letter-spacing:.01em;white-space:normal}

/* Effort is a real stepped control: click its track for Fast, Standard, High or Max;
   click the header to open the full engine menu. */
#engine.pill.compact{width:190px;height:54px;min-height:54px;padding:7px 12px 8px;
  display:grid;grid-template-columns:22px minmax(0,1fr) auto 14px;grid-template-rows:20px 12px;
  column-gap:5px;row-gap:4px;border-radius:17px;background:linear-gradient(145deg,var(--c-compose),var(--c-veil));
  border-color:var(--j-border-strong);box-shadow:inset 0 1px 0 #fff1;color:var(--j-text)}
#engine .effort-bolt{grid-column:1;grid-row:1;color:var(--j-cyan);font-size:17px;line-height:20px;text-align:center}
#engine .effort-model{grid-column:2;grid-row:1;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:550;line-height:20px}
#engine .effort-level{grid-column:3;grid-row:1;color:var(--j-cyan);font-size:14px;font-weight:600;line-height:20px}
#engine .caret{grid-column:4;grid-row:1;align-self:center}
#engine .effort-track{--effort-pos:50%;grid-column:1/-1;grid-row:2;position:relative;display:block;height:10px;
  border-radius:999px;background:radial-gradient(circle at 22% 50%,#fff9 0 1px,transparent 1.5px),
  radial-gradient(circle at 58% 50%,#fff8 0 1px,transparent 1.5px),var(--c-line-strong);overflow:visible}
#engine[data-effort="fast"] .effort-track{--effort-pos:6%}
#engine[data-effort="standard"] .effort-track{--effort-pos:34%}
#engine[data-effort="high"] .effort-track{--effort-pos:66%}
#engine[data-effort="max"] .effort-track{--effort-pos:94%}
#engine[data-effort="fixed"] .effort-track{opacity:.28}
#engine .effort-fill{position:absolute;inset:0 auto 0 0;width:var(--effort-pos);border-radius:inherit;
  background:linear-gradient(90deg,var(--c-accent-bright),var(--j-cyan));box-shadow:0 0 12px var(--c-cyan-35)}
#engine .effort-thumb{position:absolute;left:var(--effort-pos);top:50%;width:16px;height:16px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--j-text);box-shadow:0 1px 5px #0006,0 0 0 1px var(--j-border)}
#engine:focus-visible{outline:2px solid var(--j-cyan);outline-offset:3px}
#form .row{min-height:60px}
@media(max-width:600px){
  #form .row>#engine-menu{height:50px;margin-left:calc(var(--j-ctl) + var(--j-space-2))}
  #form .row>#engine-menu .pill.compact,#engine.pill.compact{width:176px;height:50px;min-height:50px;padding:5px 10px 7px;
    background:linear-gradient(145deg,var(--c-compose),var(--c-veil));border-color:var(--j-border-strong);color:var(--j-text)}
  #form{padding-top:7px}#form .row{min-height:48px}
}

/* ---- Usage & billing ---------------------------------------------------------------
   Account value, consumption and money controls share one calm hierarchy. All colour uses
   the Jude tokens so the same information remains legible in dark, light and system themes. */
#usage-page{max-width:none;padding:8px 12px 24px;background:
  radial-gradient(circle at 92% 2%,var(--c-cyan-10),transparent 29rem)}
#usage-body.billing-dashboard{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;
  width:min(1080px,calc(100% - 40px));margin:0 auto 72px}
.billing-dashboard .usage-block{position:relative;margin:0;padding:24px;border:1px solid var(--j-border);
  border-radius:22px;background:linear-gradient(145deg,var(--j-surface),var(--c-panel-70));
  box-shadow:0 18px 55px var(--c-drop),inset 0 1px var(--c-edge);overflow:hidden}
.billing-dashboard .usage-block>h2{margin:0 0 18px;color:var(--j-text);font-size:15px;font-weight:680;
  letter-spacing:.01em;text-transform:none}
.billing-dashboard .usage-block>h2:after{content:'';display:block;width:28px;height:2px;margin-top:10px;
  border-radius:99px;background:linear-gradient(90deg,var(--c-accent-bright),var(--j-success))}
.billing-hero{isolation:isolate;min-height:154px;padding:30px!important;background:
  radial-gradient(circle at 85% 0,var(--c-cyan-20),transparent 18rem),
  linear-gradient(135deg,var(--c-raised),var(--c-panel))!important}
.billing-hero:before{content:'';position:absolute;z-index:-1;inset:0;background:
  linear-gradient(118deg,transparent 0 62%,var(--c-cyan-08) 62% 63%,transparent 63%)}
.billing-eyebrow{display:flex;align-items:center;gap:8px;color:var(--j-cyan-soft);font-size:11px;font-weight:760;
  letter-spacing:.16em;text-transform:uppercase}
.billing-eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--j-success);
  box-shadow:0 0 14px var(--j-success)}
.billing-hero-main{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:25px}
.billing-hero h2{margin:0;color:var(--j-text);font-size:clamp(25px,4vw,38px);font-weight:690;letter-spacing:-.04em}
.billing-hero-copy{margin:8px 0 0;color:var(--j-text-3);font-size:14px}
.billing-plan-price{flex:none;text-align:right;color:var(--j-text);font-size:20px;font-weight:680;letter-spacing:-.02em}
.billing-plan-price small{display:block;margin-top:6px;color:var(--j-success);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase}
.billing-section-intro{margin:-7px 0 19px;color:var(--j-text-3);font-size:13px;line-height:1.55}
.membership-grid,.credit-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.membership-card,.credit-pack{display:flex;flex-direction:column;min-height:158px;padding:18px;border:1px solid var(--j-border);
  border-radius:17px;background:var(--c-shade-2);transition:border-color .18s,transform .18s,background .18s}
.membership-card:hover,.credit-pack:hover{transform:translateY(-2px);border-color:var(--j-border-strong);background:var(--j-surface-hover)}
.membership-card h3,.credit-pack strong{margin:0;color:var(--j-text);font-size:15px;font-weight:670}
.membership-card .plan-price{margin:19px 0 4px;color:var(--j-text);font-size:24px;font-weight:690;letter-spacing:-.035em}
.membership-card .plan-price small{font-size:12px;font-weight:500;color:var(--j-text-3)}
.membership-card p,.credit-pack small{margin:0 0 17px;color:var(--j-text-3);font-size:12px;line-height:1.45}
.membership-card button,.credit-pack button{width:100%;margin-top:auto;min-height:38px;border:1px solid var(--j-border-strong)!important;
  border-radius:11px!important;background:linear-gradient(180deg,var(--c-cyan-20),var(--c-cyan-08))!important;
  color:var(--j-text)!important;font-weight:650;cursor:pointer}
.membership-card button:hover,.credit-pack button:hover{border-color:var(--j-cyan)!important;background:var(--c-cyan-20)!important}
.membership-card.active{border-color:var(--j-success);box-shadow:inset 0 0 0 1px var(--c-cyan-08)}
.billing-status{align-self:flex-start;margin-bottom:18px;padding:5px 8px;border:1px solid var(--j-success);
  border-radius:99px;color:var(--j-success);background:var(--c-cyan-08);font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.billing-two-up{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:18px}
.billing-dashboard .usage-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;
  min-height:42px;padding:4px 0;border-bottom:1px solid var(--j-border)}
.billing-dashboard .usage-row:last-child{border-bottom:0}
.billing-dashboard .usage-label{color:var(--j-text);font-size:14px;font-weight:560}
.billing-dashboard .usage-value{color:var(--j-text-3);font-size:13px}
.billing-dashboard .usage-note{color:var(--j-text-3);font-size:12px;line-height:1.55}
.billing-dashboard .usage-track{display:block;height:7px;margin:10px 0 18px;border-radius:99px;background:var(--c-track);overflow:hidden}
.billing-dashboard .usage-fill{display:block;height:100%;border-radius:inherit;background:
  linear-gradient(90deg,var(--c-accent-mid),var(--j-cyan) 65%,var(--j-success));box-shadow:0 0 14px var(--c-cyan-20)}
.billing-dashboard button.quiet{min-height:34px;padding:0 13px;border:1px solid var(--j-border);border-radius:10px;
  background:var(--c-cyan-08);color:var(--j-text);font-weight:620;white-space:nowrap}
.billing-dashboard button.quiet:hover{border-color:var(--j-border-strong);background:var(--c-cyan-20)}
.billing-dashboard button:focus-visible,.billing-dashboard a:focus-visible{outline:2px solid var(--j-cyan);outline-offset:3px}
.spend-cap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px;border:1px solid var(--j-border);
  border-radius:15px;background:var(--c-shade-2)}
.spend-cap b{display:block;color:var(--j-text);font-size:14px}.spend-cap small{display:block;margin-top:5px;color:var(--j-text-3)}
.credit-pack-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.credit-pack{min-height:128px}
.credit-pack strong{font-size:20px;letter-spacing:-.025em}.credit-pack small{margin-top:4px}
.billing-trust{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:4px 5px;color:var(--j-text-3);font-size:11px}
.billing-trust p{margin:0;line-height:1.5}.billing-trust nav{display:flex;flex:none;gap:16px}.billing-trust a{color:var(--j-cyan-soft);text-decoration:none}
.billing-trust a:hover{text-decoration:underline;text-underline-offset:3px}
.billing-limit-dialog{width:min(430px,calc(100% - 28px));padding:0;border:1px solid var(--j-border-strong);border-radius:20px;
  background:var(--j-surface-strong);color:var(--j-text);box-shadow:var(--j-shadow)}
.billing-limit-dialog::backdrop{background:var(--c-scrim-2);backdrop-filter:blur(5px)}
.billing-limit-dialog form{padding:24px}.billing-limit-dialog h2{margin:0 0 8px;font-size:20px}.billing-limit-dialog p{margin:0 0 20px;
  color:var(--j-text-3);font-size:13px;line-height:1.5}.billing-limit-dialog label{display:block;margin-bottom:8px;font-size:12px;font-weight:650}
.billing-limit-dialog .limit-field{display:flex;align-items:center;border:1px solid var(--j-border);border-radius:12px;background:var(--c-field)}
.billing-limit-dialog .limit-field span{padding-left:13px;color:var(--j-text-3)}.billing-limit-dialog input{width:100%;min-width:0;padding:12px 13px 12px 7px;
  border:0;outline:0;background:transparent;color:var(--j-text);font:inherit}.billing-limit-dialog .limit-error{min-height:18px;margin:7px 0 4px;color:var(--j-danger);font-size:11px}
.billing-limit-dialog menu{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:18px 0 0;padding:0}.billing-limit-dialog menu button{min-height:38px;
  padding:0 14px;border:1px solid var(--j-border);border-radius:10px;background:var(--c-cyan-08);color:var(--j-text);font-weight:620}
.billing-limit-dialog menu .remove{margin-right:auto;border-color:var(--c-bad-edge);background:transparent;color:var(--j-danger)}
.billing-limit-dialog menu .save{border-color:var(--j-border-strong);background:linear-gradient(180deg,var(--c-accent-mid),var(--c-accent-deep))}
#usage-note:not(:empty){position:sticky;z-index:5;bottom:18px;width:min(680px,calc(100% - 40px));margin:16px auto;
  padding:12px 16px;border:1px solid var(--j-border-strong);border-radius:12px;background:var(--j-surface-strong);
  color:var(--j-text);box-shadow:var(--j-shadow);backdrop-filter:blur(14px)}
@media(max-width:780px){#usage-body.billing-dashboard{width:min(calc(100% - 24px),1080px);gap:12px}.billing-dashboard .usage-block{padding:18px}
  .billing-hero{padding:22px!important}.billing-hero-main{align-items:flex-start;flex-direction:column}.billing-plan-price{text-align:left}
  .membership-grid{grid-template-columns:1fr}.billing-two-up{grid-template-columns:1fr}.credit-pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .billing-trust{align-items:flex-start;flex-direction:column}.billing-trust nav{flex-wrap:wrap}}
@media(max-width:420px){.credit-pack-grid{grid-template-columns:1fr}.billing-dashboard .usage-row{grid-template-columns:1fr auto}
  .billing-dashboard .usage-row>button{grid-column:1/-1;width:100%}.spend-cap{align-items:flex-start;flex-direction:column}.spend-cap button{width:100%}}
@media(prefers-reduced-motion:reduce){.membership-card,.credit-pack{transition:none}.membership-card:hover,.credit-pack:hover{transform:none}}

/* Billing chooser - intentionally mirrors the restrained comparison layout used by Chat.
   No status colour, hero artwork or promotional glass competes with the plan decision. */
#usage-page{padding:0 0 32px;background:var(--c-app)}
#usage-page>.page-head{display:none}
#usage-body.billing-dashboard{display:block;width:min(1220px,calc(100% - 40px));margin:0 auto 64px}
.billing-chooser{padding:20px 0 36px;border-bottom:1px solid var(--c-line)}
.billing-chooser-top{display:flex;align-items:center;justify-content:space-between;min-height:38px}
.billing-back{border:0;background:transparent;color:var(--c-ink-2);padding:8px 0;font-size:13px}
.billing-back:hover{color:var(--c-ink)}
.billing-current{color:var(--c-ink-3);font-size:12px}
.billing-chooser h1{margin:0 0 30px;text-align:center;color:var(--c-ink);font-size:32px;font-weight:430;letter-spacing:-.025em}
.billing-audience{display:grid;grid-template-columns:1fr 1fr;width:min(470px,100%);margin:auto;padding:5px;border-radius:23px;background:var(--c-lift)}
.billing-audience button{min-height:50px;border:0;border-radius:19px;background:transparent;color:var(--c-ink-3);font-weight:500}
.billing-audience button.selected{background:var(--c-panel);color:var(--c-ink);box-shadow:0 1px 0 var(--c-edge)}
.billing-membership{padding:30px 0 38px}
.billing-pending{max-width:620px;margin:0 auto 18px;text-align:center}
.plan-comparison-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0!important;border:1px solid var(--c-line-strong);border-radius:18px;overflow:hidden;background:transparent}
.plan-comparison-grid .membership-card{min-height:690px;margin:0;padding:38px 34px;border:0;border-right:1px solid var(--c-line-strong);border-radius:0;background:color-mix(in srgb,var(--c-panel) 42%,transparent);box-shadow:none;transform:none}
.plan-comparison-grid .membership-card:last-child{border-right:0}
.plan-comparison-grid .membership-card:hover{transform:none;background:color-mix(in srgb,var(--c-panel) 62%,transparent);border-color:var(--c-line-strong)}
.plan-comparison-grid .membership-card.active{border-color:var(--c-line-strong);box-shadow:inset 0 2px 0 var(--c-ink-3)}
.plan-comparison-grid .membership-card h2{margin:0;color:var(--c-ink);font-size:30px;font-weight:430;letter-spacing:-.025em}
.plan-comparison-grid .plan-price{margin:34px 0 26px;color:var(--c-ink);font-size:58px;font-weight:400;letter-spacing:-.045em}
.plan-comparison-grid .plan-price small{font-size:14px;font-weight:400;color:var(--c-ink-3);letter-spacing:0}
.plan-comparison-grid .plan-strap{min-height:58px;margin:0 0 24px;color:var(--c-ink);font-size:17px;font-weight:560;line-height:1.45}
.plan-comparison-grid .plan-action,.business-plan-card .plan-action{display:grid;place-items:center;width:100%;min-height:52px;margin:0 0 36px;padding:0 18px;border:1px solid var(--c-line-strong)!important;border-radius:26px!important;background:var(--c-lift)!important;color:var(--c-ink)!important;text-decoration:none;font:inherit;font-size:16px;font-weight:520;cursor:pointer}
.plan-comparison-grid .plan-action:hover,.business-plan-card .plan-action:hover{background:var(--c-edge)!important;border-color:var(--c-edge-hover)!important}
.plan-features{display:grid;gap:22px;margin:0;padding:0;list-style:none;color:var(--c-ink-2);font-size:16px;line-height:1.45}
.plan-features li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.plan-features li:before{content:'✦';color:var(--c-ink-2);font-size:15px;line-height:1.5}
.max-plan-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.max-switch{display:grid;grid-template-columns:1fr 1fr;width:140px;padding:4px;border-radius:18px;background:var(--c-lift)}
.plan-comparison-grid .max-switch button{width:auto;min-height:34px;margin:0;padding:0 12px;border:0!important;border-radius:15px!important;background:transparent!important;color:var(--c-ink-3)!important;font-size:14px;font-weight:500}
.plan-comparison-grid .max-switch button.selected{background:var(--c-panel)!important;color:var(--c-ink)!important}
.business-plans{padding-top:0}.business-plan-card{max-width:560px;min-height:330px;margin:0 auto;padding:34px;border:1px solid var(--c-line-strong);border-radius:18px;background:color-mix(in srgb,var(--c-panel) 42%,transparent)}
.business-plan-card h2{margin:0 0 24px;font-size:25px;font-weight:520}.business-plan-card .plan-price{margin:0 0 16px;font-size:23px}.business-plan-card p{color:var(--c-ink-2);line-height:1.55}
.billing-dashboard>.billing-two-up,.billing-dashboard>.usage-block,.billing-dashboard>.billing-trust{margin-top:18px}
.billing-dashboard .usage-block{border-radius:16px;background:transparent;box-shadow:none}
.billing-dashboard .usage-block>h2:after{background:var(--c-cyan)}
.billing-dashboard .usage-fill{background:var(--c-cyan);box-shadow:none}
.billing-dashboard button.quiet{background:transparent}
.credit-pack{background:transparent}
@media(max-width:780px){
  #usage-body.billing-dashboard{width:min(100% - 24px,1220px)}
  .billing-current{display:none}
  .billing-chooser h1{font-size:26px}
  .plan-comparison-grid{grid-template-columns:1fr}
  .plan-comparison-grid .membership-card{min-height:0;border-right:0;border-bottom:1px solid var(--c-line-strong)}
  .plan-comparison-grid .membership-card:last-child{border-bottom:0}
}

/* Three intentional appearances. Dark keeps the original textured midnight atmosphere;
   Light is crisp ice; Electric carries the brighter logo blue without replacing either. */
:root[data-theme="dark"]{
  color-scheme:dark;--c-app:#071722;--c-sunk:#06131d;--c-panel:#092536;
  --c-panel-70:#092536bd;--c-panel-90:#092536eb;--c-field:#0b2d40;--c-hover:#10384d;
  --c-raised:#0d3145;--c-raised-60:#0d3145a8;--c-track:#123a4d;--c-selected:#12445d;
  --c-glow-bg:#086396;--c-accent-deep:#086396;--c-accent-mid:#13a7e6;--c-accent-bright:#63ddff;
  --c-line:#17445b;--c-line-strong:#28627d;--c-surface:rgba(9,37,54,.88);
  --c-surface-strong:rgba(7,23,34,.97);--c-surface-hover:rgba(16,56,77,.92);
  --c-surface-selected:rgba(99,221,255,.14);--c-compose:rgba(9,37,54,.88);
  --c-pill:rgba(9,37,54,.72);--c-veil:rgba(7,23,34,.68);--c-cyan:#63ddff;
  --c-cyan-bright:#63ddff;--c-cyan-strong:#13a7e6;--c-cyan-soft:#a9efff;
  --c-glow:0 0 32px rgba(19,167,230,.16);--c-glow-bg:#086396;
}
/* The JudeAI logo is drawn inline from one SVG symbol (#judeai-logo in index.html), so it
   shows even when an image request is refused. */
.logo-sprite{position:absolute;width:0;height:0;overflow:hidden}
.judeai-logo{display:block;flex:0 0 auto;overflow:hidden}

/* Personal sidebar controls retain the JudeAI surface and a consistent keyboard layout. */
#sidebar-settings{width:min(720px,calc(100vw - 32px));max-width:720px;padding:24px;box-sizing:border-box}
#sidebar-settings h2{margin:0 0 10px}#sidebar-settings>p{line-height:1.5;margin:0 0 18px;color:var(--muted,#a9c8d6)}
.sidebar-settings-list{max-height:58vh;overflow:auto;margin-bottom:18px;padding-right:6px}
#sidebar-settings .settings-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(100px,180px) 40px 40px;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #183b4b}
#sidebar-settings label{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px}
#sidebar-settings input[type=checkbox]{width:18px;height:18px;flex:none;margin:0;accent-color:#54d9ff}
#sidebar-settings input[type=text]{min-width:0;width:100%;box-sizing:border-box;font-size:14px;padding:10px}
#sidebar-settings .settings-row button{min-width:0;padding:8px;font-size:18px}
#sidebar-settings>button{margin-right:8px}
.rail-nav details>summary{cursor:pointer}.rail-nav details>div{padding-left:10px}
@media(max-width:560px){#sidebar-settings{padding:16px}#sidebar-settings .settings-row{grid-template-columns:minmax(100px,1fr) 36px 36px}#sidebar-settings .settings-row>input{grid-row:2;grid-column:1/-1}.sidebar-settings-list{max-height:55vh}}

/* A preview reserves its own workspace; expanding it never changes the chat. */
body.previewing{--preview-width:min(46vw,760px)}
@media(min-width:901px){
  body.previewing:not(.preview-expanded) .app{width:calc(100% - var(--preview-width));margin-left:0;margin-right:var(--preview-width);min-width:0}
  body.previewing .compose,body.previewing #chat{min-width:0}
}
#preview-pane>header{flex-shrink:0;align-items:center}
#preview-body{min-height:0;min-width:0;padding-bottom:max(12px,env(safe-area-inset-bottom))}
#preview-stage{min-height:0;min-width:0}
#preview-stage .preview-slide{width:100%;height:100%;min-height:0;object-fit:contain}
#preview-pane:fullscreen,body.preview-expanded #preview-pane{inset:0;width:100%;height:100dvh;border-left:0}
body.previewing #versions-dock,body.previewing #versions-panel{display:none!important}
@media(max-width:600px){
  #preview-pane>header{padding:12px;gap:8px}
  #preview-name{grid-column:1/-1}
  #preview-count{grid-row:2}
  .preview-actions{grid-column:2;grid-row:2;gap:6px}
  .preview-actions button{padding:8px}
  #preview-body{grid-template-rows:minmax(0,1fr) 78px}
  #preview-rail .thumb{flex-basis:110px;height:62px}
}