:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#17243c;background:#f2f5fa;font-synthesis:none;--bg:#f2f5fa;--panel:#fff;--ink:#17243c;--muted:#68758a;--line:#e0e6ef;--accent:#244ccd;--soft:#eaf0ff;--bubble:#fff;--mine:#244ccd;--mine-text:#fff;--size:16px;--radius:20px;color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #ecae35;outline-offset:3px}button{color:inherit}a{color:var(--accent)}svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button svg{pointer-events:none}h1,h2,h3,p{margin:0}h1{font-size:30px;letter-spacing:-1px}h2{font-size:23px;letter-spacing:-.6px}h3{font-size:17px}small,.meta{font-size:12px;color:var(--muted)}.muted{color:var(--muted);line-height:1.6;font-size:14px}.eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.7px;color:var(--muted)}.icon-btn{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:13px;background:transparent;flex-shrink:0}.icon-btn:hover{background:var(--soft);color:var(--accent)}.btn{border:1px solid var(--line);border-radius:13px;padding:12px 17px;min-height:46px;background:var(--panel);font-size:14px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.btn:hover{border-color:var(--accent)}.primary{background:var(--accent);border-color:var(--accent);color:#fff}.subtle{background:var(--soft);color:var(--accent);border-color:transparent}.danger{color:#c03143}.full{width:100%}.row{display:flex;align-items:center;gap:10px}.spread{justify-content:space-between}.stack{display:flex;flex-direction:column;gap:16px}.label{font-size:14px;font-weight:600;display:block;margin-bottom:8px}.field{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;color:var(--ink);background:var(--panel);min-height:46px}.field::placeholder{color:var(--muted)}textarea.field{min-height:100px;resize:vertical}.brand{display:flex;align-items:center;gap:11px;font-size:23px;letter-spacing:-.8px;font-weight:700}.brand-mark{display:flex;background:var(--accent);color:#fff;width:40px;height:40px;border-radius:13px;align-items:center;justify-content:center}.brand-mark svg{width:25px;height:25px}.app-shell{display:grid;grid-template-columns:248px minmax(0,1fr);height:100dvh;max-width:1600px;margin:auto;background:var(--panel)}.sidebar{border-right:1px solid var(--line);padding:30px 20px;display:flex;flex-direction:column;gap:30px;background:var(--panel)}.sidebar nav{display:flex;flex-direction:column;gap:7px}.nav-button{border:0;background:transparent;color:var(--muted);text-align:left;display:flex;align-items:center;gap:12px;padding:14px;border-radius:13px;font-weight:600;font-size:14px;min-height:48px}.nav-button.active{background:var(--soft);color:var(--accent)}.sidebar-note{margin-top:auto;padding:18px 14px;border-top:1px solid var(--line)}.sidebar-note p{margin-top:8px}.main{min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;background:var(--bg)}.topbar{min-height:88px;padding:18px 30px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:var(--panel);gap:12px}.identity{min-width:0;display:flex;align-items:center;gap:12px}.avatar{width:44px;height:44px;display:grid;place-items:center;font-family:Georgia,serif;font-style:italic;font-size:26px;background:var(--soft);color:var(--accent);border-radius:50%;flex-shrink:0}.identity h1{font-size:18px;letter-spacing:-.4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45vw}.identity p{margin-top:4px;font-size:12px;color:var(--muted)}.top-actions{display:flex;gap:3px}.chat-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 28px;background:var(--panel);border-bottom:1px solid var(--line)}.pill{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--line);border-radius:30px;background:var(--panel);font-size:13px;min-height:40px;color:var(--muted)}.pill svg{width:16px;height:16px}.pill.active{color:var(--accent);background:var(--soft);border-color:var(--soft)}.chat-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;padding:15px max(24px,calc((100% - 820px)/2));scrollbar-width:thin}.chat-scroll.ruled{background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% 32px}.chat-scroll.dots{background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:20px 20px}.date-divider{text-align:center;margin:20px 0 24px}.date-divider span{background:var(--bg);border:1px solid var(--line);border-radius:25px;padding:6px 12px;font-size:12px;color:var(--muted)}.message{display:flex;justify-content:flex-start;gap:4px;align-items:center;margin:5px 0;position:relative}.message.mine{justify-content:flex-end}.message.group-start{margin-top:20px}.bubble{max-width:78%;background:var(--bubble);border:1px solid var(--line);border-radius:18px 18px 18px 5px;padding:11px 14px;min-width:82px;box-shadow:0 2px 2px #16285003}.mine .bubble{background:var(--mine);color:var(--mine-text);border-color:var(--mine);border-radius:18px 18px 5px 18px}.message-text{font-size:var(--size);line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}.message-text a{color:inherit;text-decoration:underline;text-underline-offset:3px}.bubble-footer{display:flex;justify-content:flex-end;align-items:center;gap:6px;font-size:12px;opacity:.7;margin-top:5px}.message .bookmark-action{width:36px;height:40px;opacity:0;color:var(--muted);border:0;background:transparent;border-radius:9px;flex-shrink:0}.message:hover .bookmark-action,.bookmark-action:focus-visible,.bookmark-action.saved{opacity:1}.mine .bookmark-action{order:-1}.bookmark-action.saved{color:var(--accent)}.bookmark-action svg{width:16px;height:16px}.reaction{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:15px;font-size:13px;padding:3px 7px;margin:5px 3px 0 0;color:var(--ink)}.reply{font-size:13px;border-left:3px solid currentColor;padding:7px 10px;background:#0000000b;border-radius:4px;margin-bottom:8px;white-space:pre-wrap}.reply strong{display:block;margin-bottom:4px}.media-tile{display:flex;align-items:center;gap:10px;min-height:66px;border-radius:10px;background:#7b8aad16;padding:10px;max-width:100%;margin:5px 0;text-align:left;font-size:14px}.media-tile span{overflow-wrap:anywhere}.media-tile small{color:inherit;opacity:.7;display:block;margin-top:3px}.media-button{border:0;color:inherit;width:100%;cursor:pointer}.media-photo{max-width:100%;max-height:340px;display:block;border-radius:10px;object-fit:contain}.bubble audio{max-width:100%;width:240px}.bubble video{max-width:100%;max-height:320px}.window-edge{text-align:center;padding:14px 0;color:var(--muted);font-size:12px}.window-edge button{font-size:13px;min-height:42px}.read-footer{background:var(--panel);border-top:1px solid var(--line);padding:10px 28px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);gap:12px}.progress-track{height:3px;background:var(--line);width:85px;border-radius:3px;overflow:hidden}.progress-track i{display:block;height:100%;background:var(--accent)}.mobile-nav{display:none}.content-scroll{flex:1;min-height:0;overflow:auto;padding:30px}.content-wrap{max-width:850px;margin:0 auto}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px}.section-head p{margin-top:7px}.card{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:22px}.empty-state{text-align:center;padding:60px 20px}.empty-state svg{width:36px;height:36px;color:var(--muted);margin-bottom:15px}.empty-state h3{margin-bottom:8px}.empty-state p{max-width:340px;margin:0 auto 18px}.filters{display:grid;grid-template-columns:1fr 1fr;gap:12px}.filters .wide{grid-column:1/-1}.searchbox{position:relative}.searchbox svg{position:absolute;left:14px;top:14px;color:var(--muted)}.searchbox input{padding-left:44px}.results-count{font-size:13px;color:var(--muted);margin:20px 0 12px}.result{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel);padding:17px;margin-bottom:9px;border-radius:15px;color:var(--ink)}.result:hover{border-color:var(--accent)}.result-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:8px}.result p{font-size:15px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.result mark,.message mark{background:#ffe19a;color:#17243c;border-radius:3px}.flash .bubble{outline:none}.result-note{border-top:1px solid var(--line);padding-top:10px;margin-top:12px;font-size:14px;color:var(--muted)}.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}.stat-num{font-size:29px;letter-spacing:-1px;font-weight:650;display:block;margin:9px 0}.stat-grid .card{padding:18px}.stat-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.chart-row{display:grid;grid-template-columns:75px 1fr 55px;gap:10px;align-items:center;font-size:13px;margin-top:17px;border:0;background:transparent;color:inherit;width:100%;text-align:left;padding:5px 0}.bar-track{height:10px;background:var(--soft);border-radius:4px;overflow:hidden}.bar-track i{display:block;background:var(--accent);height:100%;border-radius:4px;min-width:2px}.hours{display:flex;align-items:flex-end;gap:4px;height:120px;margin-top:22px}.hour-bar{flex:1;background:var(--accent);min-height:3px;border-radius:3px 3px 0 0;position:relative}.hour-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:9px}.word{display:inline-flex;align-items:center;gap:8px;margin:12px 7px 0 0;padding:8px 10px;border-radius:10px;background:var(--bg);font-size:14px}.word b{font-size:12px;color:var(--muted);font-weight:500}.settings-group{margin-bottom:18px}.setting-row{padding:17px 0;border-bottom:1px solid var(--line)}.setting-row:last-child{border-bottom:0;padding-bottom:0}.setting-row:first-child{padding-top:0}.setting-row p{margin-top:5px}.setting-row select{max-width:180px}.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}.switch{width:46px;height:27px;border-radius:20px;background:var(--line);position:relative;border:0;flex-shrink:0}.switch[aria-checked=true]{background:var(--accent)}.switch:after{content:'';position:absolute;width:21px;height:21px;background:white;border-radius:50%;top:3px;left:3px;transition:transform .15s}.switch[aria-checked=true]:after{transform:translateX(19px)}.welcome{min-height:100dvh;max-width:1200px;margin:auto;padding:34px 40px;display:flex;flex-direction:column}.welcome-top{display:flex;justify-content:space-between;align-items:center}.welcome-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:75px;padding:60px 0}.welcome h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(38px,5vw,64px);line-height:1.08;font-weight:400;letter-spacing:-2px;margin:18px 0 20px}.welcome h1 em{color:var(--accent)}.welcome-copy{max-width:450px;font-size:16px;line-height:1.7;color:var(--muted)}.import-card{padding:34px;background:var(--panel);border:1px solid var(--line);border-radius:26px;box-shadow:0 20px 70px #18327009}.import-card .big-icon{color:var(--accent);width:52px;height:52px;background:var(--soft);border-radius:16px;padding:13px;margin-bottom:22px}.import-card h2{margin-bottom:10px}.import-card .btn{margin-top:25px}.import-note{margin-top:15px;font-size:12px;line-height:1.6;color:var(--muted);text-align:center}.welcome-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}.privacy-inline{display:flex;align-items:center;gap:7px}.privacy-inline svg{width:15px;height:15px}.onboarding-count{font-family:Georgia,serif;font-size:45px;color:var(--accent);margin:15px 0}.memory-date{display:flex;gap:14px;align-items:center;background:var(--soft);border:0;border-radius:18px;padding:22px;margin-bottom:24px}.memory-date .day{font-family:Georgia,serif;font-size:42px;color:var(--accent)}.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.gallery-card{border:1px solid var(--line);background:var(--panel);border-radius:16px;overflow:hidden}.gallery-cover{height:160px;background:var(--soft);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden}.gallery-cover img{width:100%;height:100%;object-fit:cover}.gallery-cover svg{color:var(--accent);width:30px;height:30px}.gallery-body{padding:12px}.gallery-body p{font-size:13px;margin-bottom:6px}.gallery-body button{width:100%;margin-top:9px;min-height:38px;padding:7px;font-size:12px}.info-note{font-size:13px;line-height:1.6;color:var(--muted);border-left:3px solid var(--accent);padding:9px 12px;margin-bottom:22px}.focus-mode .sidebar,.focus-mode .mobile-nav,.focus-mode .chat-tools,.focus-mode .read-footer{display:none}.focus-mode.app-shell{grid-template-columns:1fr}.focus-mode .topbar{min-height:64px;padding-top:10px;padding-bottom:10px}.focus-mode .identity p{display:none}dialog{border:1px solid var(--line);border-radius:22px;padding:0;color:var(--ink);background:var(--panel);width:min(460px,calc(100vw - 28px));max-height:85dvh;overflow:auto;box-shadow:0 25px 100px #0003}dialog::backdrop{background:#0a183777;backdrop-filter:blur(4px)}.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}.modal-head h2{font-size:20px}.modal-body{padding:24px;display:flex;flex-direction:column;gap:19px}.modal-actions{display:flex;gap:10px;justify-content:flex-end}.modal-body img,.modal-body video{max-width:100%;border-radius:12px}.modal-body audio{width:100%}#toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%) translateY(10px);background:#17243c;color:white;border-radius:14px;padding:13px 20px;font-size:14px;max-width:min(90vw,550px);width:max-content;box-shadow:0 8px 30px #0002;z-index:9999;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}[hidden]{display:none!important}body[data-theme=dark]{--bg:#111927;--panel:#182333;--ink:#edf1f8;--muted:#a0aec2;--line:#2a384c;--accent:#9aafff;--soft:#273752;--bubble:#223045;--mine:#385aca;--mine-text:#fff;color-scheme:dark}body[data-theme=dark] .primary,body[data-theme=dark] .brand-mark{background:var(--accent);border-color:var(--accent);color:#fff}body[data-theme=dark] .switch[aria-checked=true]{background:var(--accent)}body[data-theme=dark] .welcome h1 em{color:var(--accent)}body[data-theme=dark] .import-card{box-shadow:none}body[data-theme=dark] .bar-track i,body[data-theme=dark] .hour-bar{background:var(--accent)}
@media(min-width:1000px){.chat-scroll{padding-top:22px}.bubble{max-width:66%}}
@media(max-width:760px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.topbar{min-height:78px;padding:14px 15px;padding-top:max(14px,env(safe-area-inset-top))}.identity{gap:10px}.identity h1{font-size:17px;max-width:44vw}.avatar{width:39px;height:39px}.top-actions{gap:0}.top-actions .icon-btn{width:40px}.chat-tools{padding:8px 14px}.chat-tools .pill{font-size:12px;padding:7px 10px}.chat-scroll{padding:10px 12px}.bubble{max-width:82%;padding:10px 12px}.message .bookmark-action{opacity:.55;width:36px;min-width:36px}.message .bookmark-action.saved{opacity:1}.read-footer{padding:8px 16px;font-size:12px}.read-footer .progress-track{width:55px}.mobile-nav{display:flex;justify-content:space-around;background:var(--panel);border-top:1px solid var(--line);padding:6px 6px max(6px,env(safe-area-inset-bottom));flex-shrink:0;gap:2px}.mobile-nav .nav-button{padding:8px 6px;gap:5px;flex-direction:column;flex:1;font-size:12px;min-height:55px;border-radius:12px}.mobile-nav .nav-button svg{width:21px;height:21px}.content-scroll{padding:23px 17px}.section-head{margin-bottom:20px}.section-head h2{font-size:24px}.card{padding:18px;border-radius:17px}.stat-grid{gap:8px}.stat-grid .card{padding:13px 10px}.stat-grid .muted{font-size:12px}.stat-num{font-size:23px}.stat-two{grid-template-columns:1fr}.welcome{padding:24px}.welcome-grid{grid-template-columns:1fr;gap:34px;padding:50px 0 40px}.welcome h1{font-size:45px;max-width:340px}.welcome-copy{font-size:15px}.import-card{padding:26px}.welcome-bottom{flex-direction:column;gap:9px}.welcome-top .pill{font-size:12px}.media-grid{grid-template-columns:repeat(2,1fr);gap:10px}.gallery-cover{height:135px}.setting-row{gap:12px}.setting-row select{max-width:145px;font-size:14px}.filters{gap:10px}.field{min-width:0}dialog{margin:auto auto 16px;border-radius:24px;width:calc(100vw - 24px)}.modal-body{padding:22px}.result{padding:15px}.read-footer .row{gap:6px}.focus-mode .topbar{padding-top:max(10px,env(safe-area-inset-top))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

@media(max-width:760px){
 .mobile-nav .nav-button{position:relative;isolation:isolate;background:transparent!important;overflow:visible}
 .mobile-nav .nav-button::before{content:"";position:absolute;z-index:-1;top:4px;left:50%;width:38px;height:30px;border-radius:15px;background:var(--brand-soft);opacity:0;transform:translateX(-50%) scaleX(.34) scaleY(.84);transform-origin:center;transition:opacity .16s ease,transform .2s cubic-bezier(.2,.78,.18,1)}
 .mobile-nav .nav-button.active{color:var(--brand)}
 .mobile-nav .nav-button.active::before{opacity:1;transform:translateX(-50%) scaleX(1) scaleY(1)}
 .mobile-nav .nav-button.nav-leaving::before{animation:antara-nav-out .18s cubic-bezier(.2,.7,.2,1) both}
 .mobile-nav .nav-button.nav-entering::before{animation:antara-nav-in .2s cubic-bezier(.16,.82,.18,1) both}
 .mobile-nav .nav-button.nav-entering svg{animation:antara-nav-icon .2s cubic-bezier(.16,.82,.18,1)}
 .mobile-nav .nav-button span{position:relative;z-index:1;white-space:nowrap}
}
@keyframes antara-nav-out{from{opacity:1;transform:translateX(-50%) scaleX(1) scaleY(1)}to{opacity:0;transform:translateX(-50%) scaleX(.22) scaleY(.78)}}
@keyframes antara-nav-in{0%{opacity:0;transform:translateX(-50%) scaleX(.18) scaleY(.78)}65%{opacity:1;transform:translateX(-50%) scaleX(1.08) scaleY(1)}100%{opacity:1;transform:translateX(-50%) scaleX(1) scaleY(1)}}
@keyframes antara-nav-icon{0%{transform:translateY(1px) scale(.96)}65%{transform:translateY(-1px) scale(1.05)}100%{transform:none}}
@media(max-width:760px){.bubble{max-width:calc(100% - 45px)}}

/* Antara v2 — multi-chat inbox and unified color system */
:root{--canvas:#eef2f8;--surface:#ffffff;--surface-raised:#ffffff;--text:#14213a;--text-soft:#6c788e;--hairline:#dde4ef;--brand:#3158d4;--brand-strong:#2447bc;--brand-soft:#e9efff;--sent:#3158d4;--received:#ffffff;--danger:#c53c50;--shadow:0 18px 55px rgba(29,48,90,.09);--shadow-soft:0 6px 24px rgba(29,48,90,.06)}
body{color:var(--text);background:var(--canvas);min-height:100dvh}
button,input,select,textarea,dialog{color:var(--text)}
input,select,textarea{caret-color:var(--brand)}
option{color:var(--text);background:var(--surface)}
h1,h2,h3,h4,strong,.label,.stat-num{color:inherit}
.muted,.meta,small{color:var(--text-soft)}
.app-shell{background:var(--surface)}
.main,.chat-scroll,.content-scroll{background-color:var(--canvas)}
.sidebar,.topbar,.chat-tools,.read-footer,.mobile-nav,.card,.result,.gallery-card,.btn,.field,dialog{background-color:var(--surface);border-color:var(--hairline)}
.bubble{background:var(--received);border-color:var(--hairline);box-shadow:var(--shadow-soft)}
.mine .bubble{background:var(--sent);border-color:var(--sent);color:#fff}
.brand-mark,.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.subtle,.nav-button.active,.pill.active{background:var(--brand-soft);color:var(--brand)}
.danger{color:var(--danger)}
.date-divider span{background:var(--canvas);border-color:var(--hairline);color:var(--text-soft)}
.reaction{background:var(--surface-raised);border-color:var(--hairline);color:var(--text)}
.brand-button{border:0;background:transparent;padding:0;text-align:left;cursor:pointer;color:var(--text)}
.back-button{margin-left:-8px;color:var(--text-soft)}

.inbox-shell{width:min(100%,780px);height:100dvh;margin:0 auto;background:var(--surface);display:flex;flex-direction:column;box-shadow:0 0 0 1px var(--hairline)}
.inbox-head{display:flex;justify-content:space-between;align-items:flex-end;padding:calc(24px + env(safe-area-inset-top)) 24px 18px;background:var(--surface);border-bottom:1px solid var(--hairline)}
.inbox-head h1{font-family:Georgia,'Times New Roman',serif;font-size:40px;font-weight:500;letter-spacing:-1.7px;margin-top:5px}
.add-chat{min-height:44px;border:0;border-radius:15px;background:var(--brand);color:#fff;display:flex;align-items:center;gap:8px;padding:0 15px;font-size:14px;font-weight:700;box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 22%,transparent)}
.add-chat svg{width:18px;height:18px}
.inbox-main{flex:1;min-height:0;overflow-y:auto;background:var(--surface);padding:15px 15px 110px}
.inbox-search{height:48px;display:flex;align-items:center;gap:11px;background:var(--canvas);border:1px solid transparent;border-radius:16px;padding:0 15px;color:var(--text-soft);transition:border-color .16s,background .16s}
.inbox-search:focus-within{border-color:var(--brand);background:var(--surface)}
.inbox-search svg{width:19px;height:19px}
.inbox-search input{border:0;outline:0;background:transparent;min-width:0;flex:1;font-size:16px;color:var(--text)}
.inbox-search input::placeholder{color:var(--text-soft)}
.inbox-caption{display:flex;justify-content:space-between;padding:17px 5px 9px;color:var(--text-soft);font-size:12px;font-weight:650;letter-spacing:.2px}
.thread-list{display:flex;flex-direction:column}
.thread-row{display:flex;align-items:center;border-bottom:1px solid var(--hairline);position:relative;border-radius:17px;transition:background .15s,transform .15s}
.thread-row:hover{background:var(--canvas)}
.thread-row:active{transform:scale(.993)}
.thread-open{display:flex;align-items:center;gap:14px;flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:13px 4px;color:var(--text)}
.thread-avatar{width:54px;height:54px;display:grid;place-items:center;border-radius:19px;flex:0 0 auto;background:hsl(var(--avatar-hue) 70% 92%);color:hsl(var(--avatar-hue) 54% 35%);font-family:Georgia,serif;font-size:24px;font-weight:600}
.thread-row.pinned .thread-avatar:after{content:'•';position:absolute;margin:42px 0 0 42px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:white;border:3px solid var(--surface);font-size:0}
.thread-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:7px}
.thread-line{display:flex;align-items:center;gap:10px;min-width:0}
.thread-line strong{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.thread-line time{font-size:12px;color:var(--text-soft);white-space:nowrap}
.thread-preview{font-size:14px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.thread-count{font-size:11px;font-weight:700;color:var(--brand);background:var(--brand-soft);border-radius:999px;padding:3px 7px;white-space:nowrap}
.thread-menu{width:38px;height:42px;color:var(--text-soft);font-weight:800;letter-spacing:1px}
.inbox-nav{position:absolute;z-index:20;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(calc(100% - 28px),520px);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:7px;background:color-mix(in srgb,var(--surface) 93%,transparent);border:1px solid var(--hairline);border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(18px)}
.inbox-nav button{border:0;background:transparent;color:var(--text-soft);border-radius:16px;min-height:56px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:12px}
.inbox-nav button.active{color:var(--brand);background:var(--brand-soft)}
.inbox-nav svg{width:20px;height:20px}
.import-thread{border:1px solid var(--hairline);border-radius:16px;padding:15px;display:grid;grid-template-columns:1fr;gap:12px;background:var(--canvas)}
.import-thread strong{font-size:16px}.import-thread p{margin-top:5px}
.source-badge{display:inline-flex;align-items:center;width:max-content;margin:0 8px 7px 0;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:750;letter-spacing:.15px;background:var(--brand-soft);color:var(--brand)}
.source-badge.whatsapp{background:#dff7e8;color:#197346}
body[data-theme=dark] .source-badge.whatsapp{background:#173b2c;color:#7ee1a9}
.global-result{max-height:none}

/* Stage 10.3 palette bridge — keep legacy UI tokens palette-aware in light mode.
   Dark mode already maps these aliases; light mode now mirrors that contract. */
body:not([data-theme=dark]){
 --bg:var(--canvas);
 --panel:var(--surface);
 --ink:var(--text);
 --muted:var(--text-soft);
 --line:var(--hairline);
 --accent:var(--brand);
 --soft:var(--brand-soft);
 --bubble:var(--received);
 --mine:var(--sent);
}

body[data-theme=dark]{--canvas:#0b111d;--surface:#121b2b;--surface-raised:#192438;--text:#f2f5fb;--text-soft:#a8b4c8;--hairline:#27344a;--brand:#8ca8ff;--brand-strong:color-mix(in srgb,var(--brand) 78%,#fff 22%);--brand-soft:#223252;--sent:#365cc9;--received:#192438;--danger:#ff8292;--shadow:0 18px 65px rgba(0,0,0,.38);--shadow-soft:0 8px 25px rgba(0,0,0,.18);--bg:var(--canvas);--panel:var(--surface);--ink:var(--text);--muted:var(--text-soft);--line:var(--hairline);--accent:var(--brand);--soft:var(--brand-soft);--bubble:var(--received);--mine:var(--sent)}
body[data-theme=dark] .thread-avatar{background:hsl(var(--avatar-hue) 35% 24%);color:hsl(var(--avatar-hue) 75% 80%)}
body[data-theme=dark] .result mark,body[data-theme=dark] .message mark{background:#725b20;color:#fff2c5}
body[data-theme=dark] #toast{background:#eef3ff;color:#12213d}
body[data-theme=dark] .media-tile{background:#ffffff12}
body[data-theme=dark] .primary,body[data-theme=dark] .brand-mark,body[data-theme=dark] .add-chat{background:var(--brand);border-color:var(--brand);color:#fff}

@media(max-width:760px){.inbox-shell{width:100%;box-shadow:none}.inbox-head{padding-left:19px;padding-right:16px}.inbox-head h1{font-size:36px}.inbox-main{padding-left:12px;padding-right:12px}.add-chat span{display:none}.add-chat{width:44px;padding:0;justify-content:center}.thread-open{padding:12px 2px}.thread-avatar{width:51px;height:51px;border-radius:18px}.thread-menu{width:35px}.back-button{display:inline-flex}.identity h1{max-width:38vw}.inbox-nav{position:fixed}}
@media(min-width:761px){.back-button{display:none}}

/* Antara v3 — inline media and adaptive atmosphere themes */
:root{--sent-auto-text:#fff;--received-auto-text:#172033;--sent-start:#3158d4;--sent-end:#5478e8;--received-start:#fff;--received-end:#f7f9ff}
body[data-palette=midnight]{--brand:#526fdd;--brand-soft:#e9edff;--sent-start:#3158d4;--sent-end:#657ee8;--received-start:#fff;--received-end:#eef2fb}
body[data-palette=rose]{--brand:#be4e78;--brand-soft:#fde8f0;--sent-start:#b83f70;--sent-end:#e183a6;--received-start:#fff8fb;--received-end:#f8dce8;--canvas:#fff4f8;--surface:#fffafd}
body[data-palette=sakura]{--brand:#e04f8a;--brand-soft:#ffe5f1;--sent-start:#ff6ca6;--sent-end:#ff9fc2;--received-start:#fff7fb;--received-end:#ffe0ee;--canvas:#fff3f8}
body[data-palette=matcha]{--brand:#587d5b;--brand-soft:#e5efe1;--sent-start:#557b59;--sent-end:#84a878;--received-start:#fbfff8;--received-end:#e4eedb;--canvas:#f3f7ed}
body[data-palette=sunset]{--brand:#c65b43;--brand-soft:#ffeadb;--sent-start:#d44d45;--sent-end:#f39a54;--received-start:#fffaf3;--received-end:#ffe0bd;--canvas:#fff5e9}
body[data-palette=cyber]{--brand:#5a45db;--brand-soft:#ece8ff;--sent-start:#5940d9;--sent-end:#00a6ba;--received-start:#f7f5ff;--received-end:#dff9f7;--canvas:#f2f0fa}
body[data-palette=mono]{--brand:#3f4650;--brand-soft:#e9eaed;--sent-start:#30343b;--sent-end:#666c75;--received-start:#fff;--received-end:#e9eaec;--canvas:#f3f3f4}
body[data-theme=dark][data-palette=midnight]{--brand:#9bafff;--brand-soft:#283453;--sent-start:#3455bd;--sent-end:#654ec6;--received-start:#222d42;--received-end:#182236}
body[data-theme=dark][data-palette=rose]{--canvas:#170f16;--surface:#21151e;--surface-raised:#2c1d28;--brand:#ff9bbe;--brand-soft:#47263a;--sent-start:#9e3862;--sent-end:#6d3f78;--received-start:#352331;--received-end:#261a25}
body[data-theme=dark][data-palette=sakura]{--canvas:#190f16;--surface:#24151e;--surface-raised:#301c29;--brand:#ff9dc1;--brand-soft:#4a2638;--sent-start:#bd4777;--sent-end:#834b8e;--received-start:#392433;--received-end:#291a25}
body[data-theme=dark][data-palette=matcha]{--canvas:#10150f;--surface:#182017;--surface-raised:#222c20;--brand:#a9d29f;--brand-soft:#293c29;--sent-start:#456d4b;--sent-end:#687c49;--received-start:#293527;--received-end:#1d281d}
body[data-theme=dark][data-palette=sunset]{--canvas:#180f0c;--surface:#241714;--surface-raised:#30201b;--brand:#ffae78;--brand-soft:#4a2d20;--sent-start:#a8423b;--sent-end:#9b5d32;--received-start:#3a2921;--received-end:#291c18}
body[data-theme=dark][data-palette=cyber]{--canvas:#090b17;--surface:#101426;--surface-raised:#181f37;--brand:#a99cff;--brand-soft:#29284e;--sent-start:#4932ba;--sent-end:#087f90;--received-start:#242440;--received-end:#152d37}
body[data-theme=dark][data-palette=mono]{--canvas:#111214;--surface:#191b1e;--surface-raised:#24272b;--brand:#d1d5db;--brand-soft:#303338;--sent-start:#3e4248;--sent-end:#60646b;--received-start:#2d3034;--received-end:#222428}
.bubble{background:linear-gradient(145deg,var(--received-start),var(--received-end));color:var(--received-auto-text);border-color:color-mix(in srgb,var(--received-start) 72%,var(--hairline))}.mine .bubble{background:linear-gradient(145deg,var(--sent-start),var(--sent-end));color:var(--sent-auto-text);border-color:transparent}.mine .bubble .muted,.bubble .muted{color:inherit;opacity:.75}
body[data-gradient=vivid] .bubble{background:linear-gradient(135deg,var(--received-start) 8%,var(--received-end) 92%)}body[data-gradient=vivid] .mine .bubble{background:linear-gradient(135deg,var(--sent-start) 5%,var(--sent-end) 95%)}body[data-gradient=off] .bubble{background:var(--received-start)}body[data-gradient=off] .mine .bubble{background:var(--sent-start)}
body[data-bubble=rounded] .bubble{border-radius:25px}body[data-bubble=rounded] .mine .bubble{border-radius:25px}body[data-bubble=compact] .bubble{border-radius:13px;padding:8px 11px}.message:has(.inline-sticker):not(:has(.message-text)) .bubble{background:transparent;border:0;box-shadow:none;padding:2px}
.inline-visual{display:block;border:0;background:transparent;padding:0;margin:0;max-width:min(72vw,380px);cursor:zoom-in}.inline-visual img{display:block;width:100%;max-height:440px;object-fit:cover;border-radius:14px}.inline-sticker{width:min(42vw,190px)}.inline-sticker img{object-fit:contain;border-radius:0;filter:drop-shadow(0 5px 9px #0002)}
.inline-player{position:relative}.inline-player video{display:block;width:min(72vw,420px);max-height:440px;border-radius:14px;background:#000}.media-expand{position:absolute;right:8px;top:8px;border:0;border-radius:999px;padding:7px 10px;background:#111b;color:#fff;font-size:11px}.inline-audio{display:flex;align-items:center;gap:8px;min-width:min(70vw,300px)}.inline-audio>svg{width:22px;flex:0 0 auto}.inline-audio audio{min-width:0;flex:1;width:220px}.speed-button{border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:6px 8px;font-weight:750}.missing-media{border:1px dashed currentColor;background:#ffffff12}
.theme-picker{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px}.theme-card{min-width:0;display:grid;grid-template-columns:44px 1fr 20px;gap:10px;align-items:center;text-align:left;border:1px solid var(--hairline);background:var(--surface);color:var(--text);border-radius:15px;padding:10px}.theme-card.selected{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 18%,transparent)}.theme-card>svg{width:18px;color:var(--brand)}.theme-card strong,.theme-card small{display:block}.theme-card small{font-size:11px;margin-top:3px}.theme-swatch{width:44px;height:38px;border-radius:12px;padding:7px;display:flex;gap:3px;background:var(--swatch-bg)}.theme-swatch b{display:block;flex:1;border-radius:7px;background:var(--swatch-a)}.theme-swatch b+ b{background:var(--swatch-b)}[data-swatch=midnight]{--swatch-bg:#e9edff;--swatch-a:#3158d4;--swatch-b:#657ee8}[data-swatch=rose]{--swatch-bg:#fde8f0;--swatch-a:#b83f70;--swatch-b:#e183a6}[data-swatch=sakura]{--swatch-bg:#ffe5f1;--swatch-a:#ff6ca6;--swatch-b:#ff9fc2}[data-swatch=matcha]{--swatch-bg:#e5efe1;--swatch-a:#557b59;--swatch-b:#84a878}[data-swatch=sunset]{--swatch-bg:#ffeadb;--swatch-a:#d44d45;--swatch-b:#f39a54}[data-swatch=cyber]{--swatch-bg:#ece8ff;--swatch-a:#5940d9;--swatch-b:#00a6ba}[data-swatch=mono]{--swatch-bg:#e9eaed;--swatch-a:#30343b;--swatch-b:#777}
@media(max-width:520px){.theme-picker{grid-template-columns:1fr}.inline-visual,.inline-player video{max-width:calc(100vw - 92px)}.inline-audio{min-width:min(70vw,260px)}}

/* Antara v5 — compact conversation rhythm and real collections */
.message{margin:2px 0;align-items:flex-end}.message.group-start{margin-top:10px}.bubble{min-width:0;padding:7px 10px;border-radius:16px 16px 16px 5px}.mine .bubble{border-radius:16px 16px 5px 16px}.message-text{line-height:1.38}.bubble-footer{margin-top:2px;font-size:11px;line-height:1;white-space:nowrap}.compact-text .bubble{display:block;max-width:min(78%,680px)}.compact-text .message-text{display:inline}.compact-text .bubble-footer{display:inline-flex;margin:0 0 1px 8px;vertical-align:bottom}.sticker-message .bubble{background:transparent!important;border:0!important;box-shadow:none!important;padding:0;overflow:visible}.sticker-message .inline-sticker{width:min(34vw,140px);max-width:140px}.sticker-message .inline-sticker img{width:auto;max-width:140px;max-height:140px;object-fit:contain}.sticker-message .bubble-footer{position:absolute;right:4px;bottom:3px;margin:0;padding:4px 6px;border-radius:8px;background:#111a;color:#fff;opacity:1;box-shadow:0 1px 4px #0002}.sticker-message .bubble{position:relative}.sticker-message.mine .bubble-footer{right:4px}.sticker-message .bookmark-action{align-self:center}
.collection-select-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:9px}.collection-add{font-size:25px;padding:0}.new-collection-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-top:10px}.compact-note{min-height:76px!important}.collection-chips{flex-wrap:nowrap;overflow-x:auto;max-width:100%;min-width:0;padding:2px 1px 8px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.collection-chips::-webkit-scrollbar{display:none}.collection-chips .pill{white-space:nowrap}.collection-manager{display:flex;flex-direction:column;gap:9px}.collection-manage-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center}.collection-manage-row .icon-btn{border:1px solid var(--hairline)}
@media(max-width:760px){.bubble{padding:7px 10px;max-width:calc(100% - 45px)}.message.group-start{margin-top:9px}.sticker-message .inline-sticker,.sticker-message .inline-sticker img{max-width:128px}.sticker-message .inline-sticker{width:min(36vw,128px)}}

/* Antara v6 — WhatsApp-like grouping, fixed timestamps and curved tails */
.message{width:100%;gap:0}.message.group-start{margin-top:9px}.message:not(.group-start){margin-top:2px}.bubble{position:relative;overflow:visible;padding:7px 10px 19px;min-height:37px}.compact-text .bubble{display:block}.compact-text .message-text{display:block}.bubble-footer,.compact-text .bubble-footer{position:absolute;right:9px;bottom:6px;display:flex;margin:0;font-size:11px;line-height:1;opacity:.7}.time-spacer{display:inline-block;width:48px;height:1px;vertical-align:baseline}.message .bookmark-action{position:absolute;z-index:2;top:50%;transform:translateY(-50%);margin:0;opacity:.42}.message:not(.mine) .bookmark-action{right:0}.message.mine .bookmark-action{left:0;order:initial}.message .bubble{margin-right:42px}.message.mine .bubble{margin-right:0;margin-left:42px}
.message:not(.mine).group-first .bubble{border-radius:17px 17px 17px 6px}.message:not(.mine).group-middle .bubble{border-radius:6px 17px 17px 6px}.message:not(.mine).group-last .bubble{border-radius:6px 17px 17px 4px}.message:not(.mine).group-single .bubble{border-radius:17px 17px 17px 4px}.message.mine.group-first .bubble{border-radius:17px 17px 6px 17px}.message.mine.group-middle .bubble{border-radius:17px 6px 6px 17px}.message.mine.group-last .bubble{border-radius:17px 6px 4px 17px}.message.mine.group-single .bubble{border-radius:17px 17px 4px 17px}
.message.group-last:not(.sticker-message) .bubble:after,.message.group-single:not(.sticker-message) .bubble:after{content:'';position:absolute;z-index:0;bottom:-1px;width:13px;height:16px;background:var(--received-end);filter:drop-shadow(0 2px 1px rgba(20,32,55,.08))}.message:not(.mine).group-last .bubble:after,.message:not(.mine).group-single .bubble:after{left:-8px;border-bottom-right-radius:13px;clip-path:polygon(38% 0,100% 0,100% 100%,75% 91%,51% 73%,31% 48%,12% 22%)}.message.mine.group-last .bubble:after,.message.mine.group-single .bubble:after{right:-8px;background:var(--sent-end);border-bottom-left-radius:13px;clip-path:polygon(0 0,62% 0,88% 22%,69% 48%,49% 73%,25% 91%,0 100%)}
body[data-gradient=off] .message:not(.mine) .bubble:after{background:var(--received-start)}body[data-gradient=off] .message.mine .bubble:after{background:var(--sent-start)}.sticker-message .bubble{margin-left:42px;margin-right:42px;padding:0;min-height:0}.sticker-message .bubble-footer{right:4px;bottom:3px}.sticker-message .time-spacer{display:none}
@media(max-width:760px){.bubble{padding:6px 10px 18px;max-width:calc(100% - 40px)}.message .bubble{margin-right:38px}.message.mine .bubble{margin-right:0;margin-left:38px}.message .bookmark-action{width:34px;min-width:34px}.message.group-start{margin-top:8px}}

/* Antara v7 — inline clock and native media bubbles */
.bubble{padding:6px 10px;min-height:34px}.bubble-footer,.compact-text .bubble-footer{right:9px;bottom:7px}.time-spacer{width:49px;height:0}.message-text{line-height:1.36}.media-message .bubble{padding:0!important;min-height:0;background:transparent!important;border:0!important;box-shadow:none!important}.media-message .inline-visual,.media-message .inline-player{display:block;overflow:hidden;border-radius:inherit}.media-message .inline-visual img,.media-message .inline-player video{display:block;border-radius:inherit}.media-message .bubble-footer{right:6px;bottom:6px;padding:4px 6px;border-radius:8px;background:rgba(12,15,20,.68);color:#fff;opacity:1;backdrop-filter:blur(5px)}.media-message.group-last .bubble:after,.media-message.group-single .bubble:after{background:rgba(12,15,20,.76)!important}.media-message:has(.missing-media) .bubble{padding:6px 10px!important;background:linear-gradient(145deg,var(--received-start),var(--received-end))!important;border:1px solid var(--hairline)!important}.media-message.mine:has(.missing-media) .bubble{background:linear-gradient(145deg,var(--sent-start),var(--sent-end))!important}
body[data-bubble=modern] .message:not(.mine).group-first .bubble{border-radius:17px 17px 17px 6px}body[data-bubble=modern] .message:not(.mine).group-middle .bubble{border-radius:6px 17px 17px 6px}body[data-bubble=modern] .message:not(.mine).group-last .bubble{border-radius:6px 17px 17px 4px}body[data-bubble=modern] .message:not(.mine).group-single .bubble{border-radius:17px 17px 17px 4px}body[data-bubble=modern] .message.mine.group-first .bubble{border-radius:17px 17px 6px 17px}body[data-bubble=modern] .message.mine.group-middle .bubble{border-radius:17px 6px 6px 17px}body[data-bubble=modern] .message.mine.group-last .bubble{border-radius:17px 6px 4px 17px}body[data-bubble=modern] .message.mine.group-single .bubble{border-radius:17px 17px 4px 17px}
body[data-bubble=rounded] .message:not(.mine) .bubble{border-radius:25px}body[data-bubble=rounded] .message.mine .bubble{border-radius:25px}body[data-bubble=rounded] .message:not(.mine).group-middle .bubble,body[data-bubble=rounded] .message:not(.mine).group-last .bubble{border-top-left-radius:9px}body[data-bubble=rounded] .message.mine.group-middle .bubble,body[data-bubble=rounded] .message.mine.group-last .bubble{border-top-right-radius:9px}body[data-bubble=rounded] .bubble{padding:8px 13px}body[data-bubble=rounded] .bubble-footer{right:12px;bottom:8px}
body[data-bubble=compact] .message:not(.mine) .bubble,body[data-bubble=compact] .message.mine .bubble{border-radius:9px}body[data-bubble=compact] .message:not(.mine).group-middle .bubble,body[data-bubble=compact] .message:not(.mine).group-last .bubble{border-top-left-radius:3px}body[data-bubble=compact] .message.mine.group-middle .bubble,body[data-bubble=compact] .message.mine.group-last .bubble{border-top-right-radius:3px}body[data-bubble=compact] .bubble{padding:4px 8px;min-height:29px}body[data-bubble=compact] .message-text{line-height:1.27}body[data-bubble=compact] .bubble-footer{right:7px;bottom:5px;font-size:10px}body[data-bubble=compact] .time-spacer{width:44px}
body[data-bubble=rounded] .media-message .bubble,body[data-bubble=compact] .media-message .bubble{padding:0!important}@media(max-width:760px){.bubble{padding:6px 10px;min-height:34px}.media-message .bubble{max-width:min(calc(100vw - 92px),430px)}}
.media-message:has(.missing-media) .bubble{padding-bottom:18px!important}
.tail-lock{display:inline-block;max-width:100%;white-space:nowrap;vertical-align:baseline}.tail-lock .time-spacer{display:inline-block}

/* Antara v10 — iPhone-style captioned media and breathable message rhythm */
.message{margin:6px 0}.message:not(.group-start){margin-top:6px}.message.group-start{margin-top:14px}
.captioned-media-message .bubble{padding:3px 3px 0;min-height:0;overflow:visible;width:fit-content;max-width:min(78%,430px)}
.captioned-media-message .captioned-media-stack{display:grid;gap:3px;overflow:hidden;border-radius:14px 14px 4px 4px}
.captioned-media-message .captioned-media-stack .inline-visual,.captioned-media-message .captioned-media-stack .inline-player{display:block;width:100%;max-width:none;margin:0;border-radius:0;overflow:hidden}
.captioned-media-message .captioned-media-stack img,.captioned-media-message .captioned-media-stack video{display:block;width:100%;max-width:none;max-height:440px;object-fit:cover;border-radius:0}
.captioned-media-message .media-caption{padding:7px 9px 8px}
.captioned-media-message .message-text{line-height:1.36}
.captioned-media-message .bubble-footer{right:10px;bottom:9px}
.captioned-media-message .time-spacer{width:50px}
.captioned-media-message .media-expand{right:8px;top:8px}
body[data-bubble=rounded] .captioned-media-message .bubble,body[data-bubble=compact] .captioned-media-message .bubble{padding:3px 3px 0}
body[data-bubble=rounded] .captioned-media-message .captioned-media-stack{border-radius:22px 22px 5px 5px}
body[data-bubble=rounded] .captioned-media-message .media-caption{padding:8px 11px 10px}
body[data-bubble=compact] .captioned-media-message .captioned-media-stack{border-radius:7px 7px 2px 2px}
body[data-bubble=compact] .captioned-media-message .media-caption{padding:5px 7px 7px}
@media(max-width:760px){.message{margin:6px 0}.message:not(.group-start){margin-top:6px}.message.group-start{margin-top:14px}.captioned-media-message .bubble{max-width:calc(100% - 40px)}.captioned-media-message .captioned-media-stack img,.captioned-media-message .captioned-media-stack video{max-height:62vh}}

/* Antara v11 — guided local-first onboarding */
.onboarding-card{display:flex;flex-direction:column;gap:14px}.onboarding-card h2{margin:0}.step-kicker{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--accent)}.source-grid,.guide-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.source-card,.guide-choice{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:17px;padding:14px;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:10px;text-align:left;min-width:0}.source-card:hover,.guide-choice:hover{border-color:var(--accent);transform:translateY(-1px)}.source-card>svg,.guide-choice>svg{width:17px;color:var(--muted)}.source-card strong,.source-card small,.guide-choice strong,.guide-choice small{display:block}.source-card small,.guide-choice small{font-size:11px;color:var(--muted);margin-top:3px}.source-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff}.source-icon svg{width:21px}.whatsapp .source-icon{background:linear-gradient(145deg,#1fbd68,#0c8c4a)}.instagram .source-icon{background:linear-gradient(145deg,#7648d9,#d23d83 55%,#f19742)}.local-proof{display:flex;align-items:center;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--line);border-radius:17px;background:var(--panel);max-width:450px}.local-proof>svg{color:var(--accent);width:25px;height:25px}.local-proof strong,.local-proof small{display:block}.local-proof strong{font-size:14px}.local-proof small{margin-top:3px;font-size:12px;color:var(--muted);line-height:1.45}.guide-intro{display:flex;gap:12px;padding:14px;border-radius:16px;background:var(--soft);align-items:flex-start}.guide-intro strong{font-size:14px}.guide-intro p{margin-top:4px}.guide-shield{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--panel);color:var(--accent);flex:none}.guide-choice-grid.compact .guide-choice{grid-template-columns:38px minmax(0,1fr);padding:11px}.guide-choice-grid.compact .guide-choice>svg{display:none}.guide-footnote{font-size:12px;line-height:1.55;color:var(--muted);text-align:center}.device-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.device-card{border:1px solid var(--line);border-radius:17px;background:var(--bg);color:var(--ink);padding:20px 14px;display:flex;flex-direction:column;align-items:center;gap:7px}.device-card:hover{border-color:var(--accent)}.device-card>svg{width:27px;height:27px;color:var(--accent)}.device-card small{font-size:12px;color:var(--muted)}.guide-tabs{display:flex;gap:8px}.guide-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}.guide-steps li{display:grid;grid-template-columns:29px 1fr;gap:11px;align-items:flex-start;padding:8px 0}.guide-steps li>span{width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--accent);font-size:12px;font-weight:800}.guide-steps p{font-size:14px;line-height:1.55;padding-top:3px}.guide-note{border-left:3px solid var(--accent);padding:11px 13px;background:var(--soft);border-radius:4px 13px 13px 4px}.guide-note.warning{border-left-color:#e18b2b}.guide-note strong{font-size:14px}.guide-note p{font-size:13px;line-height:1.5;color:var(--muted);margin-top:4px}.official-link{display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;text-decoration:none;padding:8px}.official-link svg{width:15px}.import-error{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:15px}.import-error>svg{color:var(--accent);width:25px}.import-error p{margin-top:5px}.help-settings{display:flex;align-items:center;justify-content:space-between;gap:18px}.help-settings p{margin-top:6px}
@media(max-width:760px){.welcome-grid{padding-top:34px}.welcome h1{font-size:40px}.source-grid,.guide-choice-grid{grid-template-columns:1fr}.onboarding-card{gap:13px}.source-card{padding:12px}.local-proof{margin-top:17px}.help-settings{align-items:flex-start;flex-direction:column}.help-settings .btn{width:100%}.guide-steps li{padding:6px 0}.guide-choice-grid.compact{grid-template-columns:1fr 1fr}.guide-choice-grid.compact .guide-choice{font-size:12px}.guide-choice-grid.compact small{font-size:10px}}
@media(max-width:390px){.device-grid,.guide-choice-grid.compact{grid-template-columns:1fr}.welcome{padding-left:18px;padding-right:18px}.welcome h1{font-size:37px}}

/* Antara v12 — import progress and pre-save report */
.import-progress{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}.progress-orbit{width:58px;height:58px;border-radius:19px;background:var(--soft);color:var(--accent);display:grid;place-items:center;animation:import-pulse 1.4s ease-in-out infinite}.progress-orbit svg{width:27px;height:27px}.import-progress h3{margin-top:3px}.import-progress-track{height:7px;border-radius:999px;background:var(--line);overflow:hidden;width:100%}.import-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--brand-strong));transition:width .18s ease}.import-progress .meta{font-variant-numeric:tabular-nums}.import-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.import-summary>div{padding:12px 8px;text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:14px}.import-summary strong,.import-summary span{display:block}.import-summary strong{font-size:20px;color:var(--accent)}.import-summary span{font-size:10px;color:var(--muted);margin-top:3px}.import-report-card{border:1px solid var(--line);border-radius:17px;padding:15px;display:flex;flex-direction:column;gap:13px;background:var(--bg)}.import-report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.import-report-head h3{margin-top:7px}.import-report-head p{margin-top:4px}.import-message-count{font-size:21px;text-align:right;color:var(--accent)}.import-message-count small{display:block;font-size:10px;color:var(--muted);font-weight:500}.import-facts,.media-facts,.media-readiness{display:flex;flex-wrap:wrap;gap:7px}.import-facts span,.media-facts span,.media-readiness span{font-size:11px;padding:6px 8px;border-radius:9px;background:var(--panel);border:1px solid var(--line)}.media-readiness{justify-content:space-between}.media-readiness .missing{color:#b24a3f;border-color:color-mix(in srgb,#b24a3f 35%,var(--line));background:color-mix(in srgb,#b24a3f 8%,var(--panel))}.import-actions{position:sticky;bottom:-24px;background:var(--panel);padding:13px 0 2px;z-index:3}.import-actions .primary{flex:1}@keyframes import-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.94);opacity:.76}}@media(prefers-reduced-motion:reduce){.progress-orbit{animation:none}.import-progress-track i{transition:none}}
@media(max-width:420px){.import-summary strong{font-size:17px}.import-summary span{font-size:9px}.import-report-card{padding:13px}.import-report-head{align-items:center}.import-facts,.media-facts{gap:5px}.import-facts span,.media-facts span{font-size:10px}}

/* Antara v13 — local privacy and storage management */
.privacy-hero,.backup-summary,.danger-confirm{display:flex;gap:14px;align-items:flex-start;padding:16px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--accent) 8%,var(--panel));margin-bottom:18px}.privacy-hero>svg,.backup-summary>span>svg,.danger-confirm>svg{width:25px;height:25px;flex:0 0 auto;color:var(--accent)}.privacy-hero p,.backup-summary p,.danger-confirm p{margin:5px 0 0;line-height:1.5}.storage-meter{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--bg)}.storage-meter-head{display:flex;justify-content:space-between;gap:12px;align-items:end}.storage-meter-head span{font-size:12px;color:var(--muted);text-align:right}.storage-meter>i{display:block;height:7px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:13px}.storage-meter>i>b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--sent-end))}.storage-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0 20px}.storage-facts>div{display:flex;flex-direction:column;gap:3px;padding:13px;border:1px solid var(--line);border-radius:15px;background:var(--panel)}.storage-facts strong{font-size:20px}.storage-facts span{font-size:12px;color:var(--muted)}.privacy-section{padding:17px 0;border-top:1px solid var(--line)}.privacy-section h3{margin:0 0 7px}.privacy-section .btn+.btn{margin-top:9px}.restore-options{display:grid;gap:10px;margin-bottom:12px}.restore-option{width:100%;text-align:left;padding:16px;border:1px solid var(--line);border-radius:17px;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;gap:5px}.restore-option small{color:var(--muted);line-height:1.45;font-size:13px}.restore-option:active{transform:scale(.985)}.restore-option.danger-zone{border-color:color-mix(in srgb,#ef4444 35%,var(--line))}.confirm-check{display:flex;gap:10px;align-items:flex-start;margin:16px 0;padding:13px;border:1px solid var(--line);border-radius:14px;font-size:14px;line-height:1.4}.confirm-check input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--accent)}
@media(max-width:420px){.storage-meter-head{align-items:flex-start;flex-direction:column}.storage-meter-head span{text-align:left}.privacy-hero,.backup-summary,.danger-confirm{padding:14px}}

/* Antara v14 — long-chat performance and resilient mobile reading */
.chat-scroll{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}.message{content-visibility:auto;contain-intrinsic-size:auto 64px}.gallery-card,.thread-row{content-visibility:auto;contain-intrinsic-size:auto 76px}#connection-status{position:fixed;z-index:120;left:50%;top:calc(10px + env(safe-area-inset-top));transform:translateX(-50%);padding:8px 13px;border-radius:999px;background:#242938;color:#fff;font-size:12px;font-weight:750;box-shadow:0 8px 28px #0004;white-space:nowrap}#connection-status[hidden]{display:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 62%,#fff);outline-offset:2px}.chat-scroll[aria-busy=true]{cursor:progress}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Antara v15 — install, updates and release diagnostics */
#update-banner{position:fixed;z-index:125;left:50%;bottom:calc(82px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:9px 10px 9px 14px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:16px;background:var(--panel);color:var(--ink);box-shadow:0 14px 42px #1115;font-size:13px;font-weight:750;white-space:nowrap}#update-banner[hidden]{display:none}#update-banner button{border:0;border-radius:11px;background:var(--accent);color:#fff;padding:8px 11px;font-weight:800}.settings-divider{display:flex;align-items:center;gap:10px;margin:19px 0 11px;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:1.3px}.settings-divider:after{content:'';height:1px;flex:1;background:var(--line)}.about-brand{display:flex;align-items:center;gap:12px}.about-brand .brand-mark{width:50px;height:50px;border-radius:16px}.about-brand strong,.about-brand small{display:block}.about-brand strong{font-size:22px}.about-brand small{margin-top:3px;color:var(--muted);font-size:12px}.about-copy{margin:17px 0;line-height:1.6}.compat-list{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-bottom:16px}.compat-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 13px;background:var(--bg);font-size:13px}.compat-row+.compat-row{border-top:1px solid var(--line)}.compat-row strong{font-size:11px}.compat-row .ok{color:#168252}.compat-row .warn{color:#bb6b19}
@media(max-width:420px){#update-banner{max-width:calc(100vw - 24px);white-space:normal;width:max-content}.help-settings .settings-actions{width:100%;grid-template-columns:1fr 1fr}}
.diagnostic-score{display:flex;flex-direction:column;gap:4px;padding:15px;border-radius:16px;margin-bottom:12px;border:1px solid var(--line)}.diagnostic-score.ready{background:color-mix(in srgb,#22a66a 10%,var(--panel));border-color:color-mix(in srgb,#22a66a 36%,var(--line))}.diagnostic-score.blocked{background:color-mix(in srgb,#d55d4c 9%,var(--panel));border-color:color-mix(in srgb,#d55d4c 35%,var(--line))}.diagnostic-score span{font-size:12px;color:var(--muted)}.diagnostic-problems{padding:13px;border:1px solid color-mix(in srgb,#d55d4c 35%,var(--line));border-radius:14px;margin:12px 0}.diagnostic-problems p{font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin-top:7px}


/* Antara v16 — adaptive time navigation */
.chat-stage{position:relative;display:flex;min-height:0;overflow:hidden}.chat-stage>.chat-scroll{flex:1;min-width:0}.stage6-tools{position:relative;z-index:18}.sticky-date{max-width:min(58vw,280px)}.sticky-date span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.time-rail{position:absolute;z-index:32;right:0;top:12px;bottom:12px;width:44px;display:flex;justify-content:flex-end;pointer-events:none}.time-rail-handle{pointer-events:auto;touch-action:none;align-self:stretch;width:18px;padding:0;border:0;border-left:5px solid transparent;border-right:5px solid transparent;background-clip:padding-box;border-radius:999px;background:color-mix(in srgb,var(--accent) 45%,var(--line));opacity:.55;cursor:ew-resize}.time-rail-handle:hover,.time-rail.open .time-rail-handle,.time-rail.dragging .time-rail-handle{opacity:1;width:18px}.time-rail.dragging{width:44px}.time-rail.dragging .time-panel{opacity:1;transform:none;visibility:visible}
.time-panel{pointer-events:auto;position:absolute;right:13px;top:0;bottom:0;width:min(270px,72vw);display:flex;flex-direction:column;padding:14px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 18px 50px #1114;backdrop-filter:blur(18px);opacity:0;transform:translateX(18px) scale(.98);visibility:hidden;transition:.18s ease}
.time-rail.open .time-panel,.time-rail:focus-within .time-panel{opacity:1;transform:none;visibility:visible}.time-panel-head{display:flex;flex-direction:column;gap:2px;padding:1px 4px 10px}.time-panel-head strong{font-size:14px}.time-panel-head small{color:var(--muted);font-size:10px}.time-entries{position:relative;min-height:0;flex:1;overflow:hidden}.time-entry{position:absolute;top:var(--time-pos);left:0;transform:translateY(-50%);display:grid;grid-template-columns:72px 1fr;align-items:center;gap:8px;width:100%;min-height:25px;padding:2px 4px;border:0;border-radius:9px;background:transparent;color:var(--ink);text-align:left;font-size:11px;font-weight:750}.time-entry:hover,.time-entry:focus-visible{background:color-mix(in srgb,var(--accent) 10%,transparent)}.time-entry i{display:block;height:5px;width:calc(var(--density) * 100%);min-width:8px;border-radius:999px;background:var(--accent);opacity:.72}.time-tooltip{position:absolute;right:calc(100% + 9px);top:50%;transform:translateY(-50%);min-width:125px;padding:9px 11px;border-radius:12px;background:#202431;color:#fff;box-shadow:0 10px 30px #0004}.time-tooltip strong,.time-tooltip span{display:block}.time-tooltip span{margin-top:2px;font-size:10px;opacity:.72}
.return-position{position:absolute;z-index:40;left:50%;bottom:56px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;max-width:calc(100% - 30px);padding:9px 13px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:999px;background:var(--panel);color:var(--ink);box-shadow:0 10px 32px #1114;font-size:11px;font-weight:800;white-space:nowrap}.return-position svg{width:14px;height:14px}
.jump-menu{display:grid;gap:8px}.jump-option{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid var(--line);border-radius:15px;background:var(--bg);color:var(--ink);text-align:left}.jump-option>svg{width:20px;height:20px;color:var(--accent)}.jump-option span,.jump-option strong,.jump-option small{display:block}.jump-option span{flex:1}.jump-option small{margin-top:2px;color:var(--muted);font-size:11px}
.archive-calendar{min-width:min(340px,80vw)}.calendar-nav{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:8px;margin-bottom:12px}.calendar-title{border:0;background:transparent;color:var(--ink);font-weight:850;font-size:16px}.calendar-week,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.calendar-week{margin-bottom:6px;color:var(--muted);font-size:10px;text-align:center;font-weight:800}.calendar-day,.calendar-empty{aspect-ratio:1;min-width:0}.calendar-day{position:relative;border:0;border-radius:12px;background:transparent;color:color-mix(in srgb,var(--ink) 45%,transparent);font-weight:700}.calendar-day.has-chat{background:color-mix(in srgb,var(--accent) 7%,var(--bg));color:var(--ink)}.calendar-day:disabled{cursor:default;opacity:.42}.calendar-day.active{background:var(--accent);color:#fff}.calendar-day i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--accent);left:50%;bottom:4px;transform:translateX(-50%)}.calendar-day.active i{background:#fff}.calendar-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin:13px 0 0;color:var(--muted);font-size:10px}.calendar-hint i{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.year-chips{display:flex;gap:7px;overflow:auto;padding-bottom:10px}.month-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.month-picker button{padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font-weight:750}.month-picker button.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg))}
@media(hover:hover) and (pointer:fine){.time-rail:hover .time-panel{opacity:1;transform:none;visibility:visible}}
@media(max-width:700px){.time-rail{right:0}.time-panel{right:11px;width:min(245px,76vw)}.time-tooltip{right:12px;left:12px;min-width:0;max-width:none;transform:none;pointer-events:none;z-index:4}.return-position{bottom:62px}.archive-calendar{min-width:0}.stage6-tools{gap:7px}}
@media(prefers-reduced-motion:reduce){.time-panel{transition:none}}


/* Antara v16.1 — quieter timeline and mobile reading polish */
.time-rail{width:28px;right:0}
.time-rail-handle{width:14px;border-left-width:6px;border-right-width:6px;background:color-mix(in srgb,var(--accent) 34%,var(--line));opacity:.28}
.time-rail-handle:hover,.time-rail.open .time-rail-handle,.time-rail.dragging .time-rail-handle{width:14px;opacity:.8}
.time-rail.dragging{width:32px}
.time-panel{right:10px;width:min(250px,68vw);padding:12px;border-radius:18px}
.time-panel-head{padding:0 3px 8px}
.time-entries{margin-block:4px}
.time-entry{grid-template-columns:64px 1fr;gap:7px;min-height:22px;padding:1px 3px;font-size:10.5px}
.time-entry i{height:4px}
@media(max-width:760px){
 .time-rail{top:8px;bottom:8px;width:24px}
 .time-rail-handle{width:12px;border-left-width:5px;border-right-width:5px;opacity:.22}
 .time-rail-handle:hover,.time-rail.open .time-rail-handle,.time-rail.dragging .time-rail-handle{width:12px}
 .time-rail.dragging{width:28px}
 .time-panel{right:8px;top:6px;bottom:6px;width:min(244px,66vw);padding:11px}
 .time-panel-head strong{font-size:13px}
 .time-panel-head small{font-size:9px}
 .time-entry{grid-template-columns:60px 1fr;min-height:21px;font-size:10px}
 .chat-scroll{scrollbar-width:none}
 .chat-scroll::-webkit-scrollbar{display:none}
}

/* Stage 6.1: the chat window is already bounded, so avoid speculative intrinsic heights
   changing during fling scroll and fighting anchor restoration. */
.chat-scroll .message{content-visibility:visible;contain-intrinsic-size:none}


/* Stage 6.1 — floating time control */
.time-rail{top:8px;bottom:8px;width:52px;right:0;display:block}
.time-rail-handle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:38px!important;height:38px;padding:0;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--panel) 92%,transparent);box-shadow:0 5px 18px #1113;opacity:.9;transition:opacity .25s ease,transform .16s ease,box-shadow .16s ease;cursor:grab;touch-action:none}
.time-rail-handle .hourglass{font-size:19px;line-height:1;filter:saturate(.7)}
.time-rail-handle.idle{opacity:.32}
.time-rail-handle:active,.time-rail.dragging .time-rail-handle{opacity:1;transform:translateY(-50%) scale(1.06);box-shadow:0 7px 22px #1115;cursor:grabbing}
.time-rail.open{width:52px}
.time-panel{right:48px;top:6px;bottom:6px;width:min(250px,68vw)}
.time-entries{margin-block:8px}
.time-entry{min-height:24px}
@media(max-width:760px){
 .time-rail{top:8px;bottom:8px;width:50px}
 .time-rail-handle{right:6px;width:38px!important;height:38px}
 .time-panel{right:48px;top:4px;bottom:4px;width:min(244px,70vw)}
 .time-entries{margin-block:10px}
 .time-entry{grid-template-columns:60px 1fr;min-height:24px}
}

/* Stage 6.1 — reliable touch hold and readable timeline */
.time-rail-handle,.time-rail-handle *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.time-rail-handle{-webkit-tap-highlight-color:transparent;overscroll-behavior:contain}
.time-panel{-webkit-user-select:none;user-select:none}
.time-entries{margin-block:14px}
.time-entry{min-height:20px}
@media(max-width:760px){
 .time-panel{top:8px;bottom:8px;padding:12px}
 .time-panel-head{padding-bottom:10px}
 .time-entries{margin-block:16px}
 .time-entry{min-height:20px}
}

/* Stage 6.1 — keep timeline labels legible when timestamps cluster */
.time-entry{height:22px;min-height:22px}
@media(max-width:760px){
 .time-entry{height:22px;min-height:22px}
}


/* Antara Stage 7.1 — Rediscover / Explore */
.explore-loading{padding:22px}.explore-loading p{margin-top:5px}
.explore-hero{position:relative;overflow:hidden;padding:25px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--panel)),var(--panel));margin-bottom:28px}
.explore-hero:after{content:'⌛';position:absolute;right:20px;top:50%;transform:translateY(-50%) rotate(8deg);font-size:62px;opacity:.1}
.explore-hero h3{font-size:28px;margin:6px 0}.explore-hero p{color:var(--muted);font-size:13px}
.explore-section{margin:0 0 30px}.explore-title{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:12px}.explore-title h3,.explore-coming h3{font-size:18px;margin-top:3px}
.explore-memories{display:grid;gap:9px}.explore-memory{width:100%;display:grid;grid-template-columns:58px 1fr 20px;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink);text-align:left}.explore-memory>svg{width:17px;color:var(--muted)}.memory-year{display:grid;place-items:center;min-height:50px;border-radius:14px;background:color-mix(in srgb,var(--accent) 11%,var(--bg));color:var(--accent);font-size:13px;font-weight:900}.explore-memory strong,.explore-memory small{display:block}.explore-memory small{margin-top:3px;color:var(--muted);font-size:10px}.explore-memory p{margin-top:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.explore-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.explore-facts button{min-width:0;padding:16px 13px;border:1px solid var(--line);border-radius:18px;background:var(--panel);color:var(--ink);text-align:left}.explore-facts strong,.explore-facts span,.explore-facts small{display:block}.explore-facts strong{font-size:22px;color:var(--accent)}.explore-facts span{margin-top:4px;font-size:11px;font-weight:800}.explore-facts small{margin-top:7px;color:var(--muted);font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.explore-coming{padding:18px;border:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:18px}.explore-coming p{margin-top:7px;line-height:1.5}
@media(max-width:700px){.explore-hero{padding:20px}.explore-hero h3{font-size:24px}.explore-facts{grid-template-columns:1fr 1fr}.explore-facts button:last-child:nth-child(odd){grid-column:1/-1}.explore-memory{grid-template-columns:52px 1fr 17px;padding:12px}.explore-title .btn{padding:8px 10px;font-size:11px}}
@media(max-width:380px){.explore-facts{grid-template-columns:1fr}.explore-facts button:last-child:nth-child(odd){grid-column:auto}.explore-title{align-items:center}.explore-title h3{font-size:16px}}

.explore-loading small{display:block;line-height:1.45}.message.jump-target{outline:2px solid color-mix(in srgb,var(--accent) 72%,transparent);outline-offset:3px;border-radius:16px}.message.jump-target .bubble{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}

/* Stage 7.2 — Explore time map */
.explore-year-strip{display:flex;gap:8px;overflow:auto;padding:2px 0 10px;scrollbar-width:none}.explore-year-strip::-webkit-scrollbar{display:none}.explore-year-strip span{font-size:12px;color:var(--muted);white-space:nowrap}
.explore-calendar-map{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:8px}.explore-calendar-map button{min-width:0;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:16px;padding:12px 10px;text-align:left;display:grid;grid-template-columns:1fr auto;gap:3px 6px;cursor:pointer}.explore-calendar-map button strong{text-transform:capitalize}.explore-calendar-map button span,.explore-calendar-map button small{font-size:11px;color:var(--muted)}.explore-calendar-map button i{grid-column:1/-1;height:5px;border-radius:999px;background:linear-gradient(90deg,var(--accent) calc(var(--density)*100%),var(--line) 0)}.explore-map-hint{font-size:12px;margin:10px 2px 0}
.explore-journey{position:relative;display:grid}.explore-journey:before{content:"";position:absolute;left:11px;top:18px;bottom:18px;width:1px;background:var(--line)}.explore-journey button{position:relative;z-index:1;border:0;background:transparent;color:var(--text);padding:10px 0;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;text-align:left;cursor:pointer}.journey-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--surface);justify-self:center}.explore-journey button span:nth-child(2){display:grid;gap:2px}.explore-journey small{color:var(--muted)}.explore-journey em{font-size:10px;font-style:normal;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 7px}
@media(max-width:760px){.explore-calendar-map{grid-template-columns:repeat(3,minmax(0,1fr))}.explore-journey button{grid-template-columns:22px 1fr auto;gap:8px}.explore-journey em{font-size:9px}}

/* Stage 7.3 — rediscovery moments */
.random-moment-card{border:1px solid var(--line);border-radius:20px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--card)}.random-moment-card h3{margin:4px 0}.random-moment-card p{margin:0;max-width:560px}.random-moment-card .btn{white-space:nowrap}
.moment-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:10px}.moment-cards button{border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--text);padding:13px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;text-align:left;cursor:pointer}.moment-cards button>span:nth-child(2){display:grid;gap:3px;min-width:0}.moment-cards small{color:var(--muted)}
@media(max-width:760px){.random-moment-card{align-items:stretch;flex-direction:column}.random-moment-card .btn{width:100%}.moment-cards{grid-template-columns:1fr}}

/* Stage 7.4 — archive insights */
.insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.insight-card{border:1px solid var(--line);background:var(--card);border-radius:17px;padding:14px;display:grid;gap:5px}.insight-card>span,.insight-card small{color:var(--muted);font-size:12px}.insight-card strong{font-size:22px;letter-spacing:-.02em}.insight-media{margin-top:10px;border:1px solid var(--line);background:var(--card);border-radius:17px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:16px}.insight-media>div:first-child{display:grid}.insight-media>div:first-child strong{font-size:22px}.insight-media>div:first-child span{font-size:12px;color:var(--muted)}.insight-media-types{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.insight-media-types span{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:5px 8px}.insight-years{display:grid;gap:8px;margin-top:10px}.insight-years button{display:grid;grid-template-columns:48px 1fr 64px;gap:10px;align-items:center;border:0;background:transparent;color:var(--text);padding:4px 0;text-align:left;cursor:pointer}.insight-years i{height:6px;border-radius:999px;background:var(--line);overflow:hidden}.insight-years i b{display:block;height:100%;background:var(--accent);border-radius:inherit}.insight-years strong{text-align:right;font-size:12px}
@media(max-width:760px){.insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.insight-media{align-items:flex-start;flex-direction:column}.insight-media-types{justify-content:flex-start}.insight-years button{grid-template-columns:44px 1fr 58px}}

/* Stage 8.1 — Memory selection */
.memory-selection-bar{display:flex;align-items:center;gap:8px;min-height:62px;padding:8px max(18px,calc((100% - 900px)/2));background:var(--panel);border-bottom:1px solid var(--line);z-index:18}.selection-count{display:flex;align-items:baseline;gap:5px;white-space:nowrap}.memory-selection-bar strong{font-size:20px;font-variant-numeric:tabular-nums;min-width:18px}.selection-count span{font-size:13px;color:var(--muted)}.selection-spacer{flex:1}.selection-create{display:flex;align-items:center;gap:8px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--accent);font:inherit;font-weight:750;padding:9px 13px;border-radius:12px;white-space:nowrap}.selection-create svg{width:20px;height:20px}.selection-create:disabled{opacity:.4}.selection-stage.is-selecting .message{cursor:pointer}.selection-stage.is-selecting .message .bookmark-action{display:none}.selection-stage.is-selecting .message::before{content:'';position:absolute;inset:-3px -100vw;z-index:-1;background:transparent}.selection-stage.is-selecting .message.selected-memory-message::before{background:color-mix(in srgb,var(--accent) 11%,transparent)}.selection-stage.is-selecting .message.selected-memory-message .bubble{outline:none}.memory-select-toggle{width:26px;height:26px;flex:0 0 26px;align-self:center;border:2px solid color-mix(in srgb,var(--muted) 55%,transparent);border-radius:50%;background:var(--panel);display:grid;place-items:center;color:transparent;font-weight:800;padding:0;z-index:1}.memory-select-toggle.selected{background:var(--accent);border-color:var(--accent);color:#fff}.memory-select-toggle span{line-height:1;font-size:14px}.mine .memory-select-toggle{order:-2}
@media(max-width:760px){.memory-selection-bar{min-height:64px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top))}.memory-selection-bar .selection-close{width:42px;height:42px}.memory-selection-bar strong{font-size:19px}.selection-create{width:auto;height:42px;padding:0 12px;justify-content:center}.selection-create span{display:inline;font-size:13px}.selection-create svg{width:19px;height:19px}.selection-stage.is-selecting .message{gap:9px;align-items:center}.selection-stage.is-selecting .message::before{inset:-4px -20px}.memory-select-toggle{width:24px;height:24px;flex-basis:24px}.selection-stage.is-selecting .bubble{max-width:78%}}

/* Stage 8.9 — persistent Memory selection navigation */
.memory-selection-bar{display:block;padding:0;background:var(--panel)}
.memory-selection-primary{display:flex;align-items:center;gap:8px;min-height:62px;padding:8px max(18px,calc((100% - 900px)/2))}
.selection-nav-actions{display:flex;align-items:center;gap:2px}
.selection-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px max(18px,calc((100% - 900px)/2));border-top:1px solid var(--line)}
.selection-search-row .chat-search-box{min-width:0}
.memory-reader-date{display:flex;align-items:center;gap:10px;margin:10px 0 6px;color:var(--muted);font-size:11px;font-weight:750;text-align:center}
.memory-reader-date::before,.memory-reader-date::after{content:'';height:1px;flex:1;background:var(--line)}
.memory-reader-date span{white-space:nowrap}
@media(max-width:760px){
 .memory-selection-bar{padding:0;padding-top:max(0px,env(safe-area-inset-top))}
 .memory-selection-primary{min-height:64px;padding:8px 10px}
 .selection-search-row{grid-template-columns:minmax(0,1fr) auto;padding:7px 10px}
 .selection-nav-actions{gap:0}
 .selection-nav-actions .icon-btn{width:38px;height:38px}
 .memory-selection-bar.search-open .selection-nav-actions{display:none}
 .memory-reader-date{margin:9px 0 5px}
}

/* Stage 8.2 — Memory composer */
.memory-composer{display:grid;gap:18px}.memory-compose-summary{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.memory-composer label{display:grid;gap:7px}.memory-composer textarea{resize:vertical;min-height:88px}.memory-compose-preview{display:grid;gap:8px}.memory-compose-message{position:relative;display:grid;gap:3px;padding:10px 48px 10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.memory-compose-message strong{font-size:13px}.memory-compose-message span{font-size:14px;line-height:1.4;overflow-wrap:anywhere}.memory-compose-message small{position:absolute;right:10px;bottom:9px;color:var(--muted);font-size:11px}.memory-compose-more{margin:2px 0 0;text-align:center}@media(max-width:760px){.memory-compose-summary{align-items:flex-start;flex-direction:column;gap:2px}.memory-composer{gap:16px}}

/* Stage 8.3 — Memory Library */
.memory-library-section{display:grid;gap:12px;margin:22px 0 30px}.library-section-title h3{margin:2px 0 3px}.library-section-title p{margin:0}.memory-library-card{display:grid;gap:14px;margin-bottom:0}.memory-library-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.memory-library-head h3{margin:4px 0 3px;font-size:20px}.memory-library-head p{margin:0}.memory-library-excerpt{display:grid;gap:7px}.memory-library-line{display:grid;grid-template-columns:minmax(70px,auto) 1fr;gap:10px;padding:9px 11px;border-radius:10px;background:color-mix(in srgb,var(--panel) 76%,var(--line));font-size:13px;line-height:1.4}.memory-library-line strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.memory-library-line span{overflow-wrap:anywhere}.memory-library-excerpt>small{padding-left:4px}.memory-library-note{margin:0;padding:11px 13px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:0 9px 9px 0;line-height:1.5}.memory-open-chat{justify-self:start}.bookmark-library-card{margin-bottom:13px}@media(max-width:760px){.memory-library-section{margin-top:18px}.memory-library-line{grid-template-columns:1fr;gap:2px}.memory-library-head h3{font-size:18px}.memory-open-chat{width:100%;justify-content:center}}

/* Stage 8.9 — Memory edit QA refinements */
.memory-members{display:grid;gap:12px}.memory-members-list{display:grid;gap:7px;max-height:min(58vh,520px);overflow:auto;padding-right:2px}.memory-member-date{position:sticky;top:0;z-index:1;padding:8px 4px 4px;background:var(--panel);font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.memory-member-item{display:grid;grid-template-columns:minmax(0,1fr) 42px;align-items:center;gap:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.memory-member-jump{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:10px 12px;border:0;background:none;color:inherit;text-align:left;min-width:0}.memory-member-jump strong{font-size:12px}.memory-member-jump span{grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.memory-member-jump small{grid-column:2;grid-row:1;color:var(--muted)}.memory-member-remove{font-size:22px}.memory-members-button{position:relative}.memory-members-badge{position:absolute;right:-1px;top:-3px;min-width:16px;height:16px;padding:0 3px;border-radius:9px;background:var(--accent);color:var(--panel);font-size:9px;font-weight:800;line-height:16px;text-align:center}
@media(max-width:760px){.memory-selection-primary{gap:4px;padding-inline:8px}.selection-count{min-width:0}.selection-count strong{font-size:24px}.selection-count span{font-size:11px}.selection-spacer{display:none}.selection-nav-actions{margin-left:auto}.selection-create{flex:0 0 auto;min-width:0;padding-inline:11px}.selection-create span{white-space:nowrap}.memory-selection-primary>.selection-close{flex:0 0 36px}.memory-selection-primary .icon-btn{flex:0 0 36px;width:36px;height:38px}.memory-selection-primary .selection-nav-actions{gap:0}.memory-selection-primary .selection-nav-actions .icon-btn{width:36px}.memory-selection-primary .memory-members-button{display:none}}
@media(max-width:390px){.selection-create{padding-inline:9px}.selection-create span{font-size:12px}.memory-selection-primary{gap:2px}.memory-selection-primary .icon-btn{flex-basis:34px;width:34px}}

/* Stage 8.9 — full Memory editor */
.memory-editor{display:grid;gap:16px}.memory-editor label{display:grid;gap:7px}.memory-editor textarea{resize:vertical;min-height:88px}.memory-edit-preview{display:grid;gap:8px;padding-top:2px}.memory-edit-message{display:grid;gap:5px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.memory-edit-message>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.memory-edit-message strong{font-size:13px}.memory-edit-message small{font-size:10px;color:var(--muted);text-align:right}.memory-edit-message>span{font-size:13px;line-height:1.4;overflow-wrap:anywhere}.memory-edit-actions{justify-content:space-between}
@media(max-width:760px){.memory-edit-message>div{align-items:flex-start;flex-direction:column;gap:2px}.memory-edit-message small{text-align:left}.memory-edit-actions{display:grid;grid-template-columns:1fr 1.3fr}.memory-edit-actions .btn{justify-content:center}}

/* Stage 8.4 — Memory Reader */
.memory-library-card[data-action="open-memory-reader"]{cursor:pointer}.memory-reader{display:grid;gap:20px}.memory-reader-head h3{font-size:26px;line-height:1.15;margin:5px 0}.memory-reader-head p{margin:0}.memory-reader-head blockquote{margin:16px 0 0;padding:13px 15px;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;background:color-mix(in srgb,var(--accent) 7%,transparent);font-size:14px;line-height:1.55}.memory-reader-thread{display:grid;gap:7px;padding:16px 12px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 88%,var(--line))}.memory-reader-message{display:flex;flex-direction:column;align-items:flex-start;max-width:82%}.memory-reader-message.mine{justify-self:end;align-items:flex-end}.memory-reader-sender{font-size:11px;color:var(--muted);margin:0 8px 3px}.memory-reader-bubble{min-width:72px;max-width:100%;padding:9px 11px 6px;border-radius:14px;background:var(--received-start);overflow-wrap:anywhere}.memory-reader-message.mine .memory-reader-bubble{background:var(--sent-start)}.memory-reader-bubble time{display:block;text-align:right;margin-top:3px;font-size:10px;color:var(--muted)}.memory-reader-bubble .media-tile{max-width:280px}.memory-reader-actions{display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:-1px;padding-top:8px;background:var(--panel)}@media(max-width:760px){.memory-reader-head h3{font-size:23px}.memory-reader-thread{margin:0 -4px;padding:14px 8px}.memory-reader-message{max-width:88%}.memory-reader-actions{display:grid;grid-template-columns:1fr 1.4fr}.memory-reader-actions .btn{justify-content:center}}

/* Stage 8.4 media polish — chat + Memory Reader */
.captioned-media-message .bubble{
  padding:1px 1px 0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.captioned-media-message .captioned-media-stack{
  gap:0;
  border-radius:14px 14px 0 0;
}
.captioned-media-message .media-caption{
  margin-top:0;
  padding:8px 10px 9px;
  border-radius:0 0 14px 14px;
  background:linear-gradient(145deg,var(--received-start),var(--received-end));
}
.captioned-media-message.mine .media-caption{
  background:linear-gradient(145deg,var(--sent-start),var(--sent-end));
}
.captioned-media-message .bubble-footer{
  right:10px;
  bottom:9px;
}
.captioned-media-message .captioned-media-stack .inline-visual,
.captioned-media-message .captioned-media-stack .inline-player{
  border-radius:14px 14px 0 0;
}
.captioned-media-message .captioned-media-stack img,
.captioned-media-message .captioned-media-stack video{
  border-radius:14px 14px 0 0;
}

.memory-reader-message.media-only,
.memory-reader-message.sticker-only{
  max-width:min(88%,430px);
}
.memory-reader-standalone-media{
  position:relative;
  width:fit-content;
  max-width:100%;
  background:transparent;
}
.memory-reader-standalone-media .inline-visual,
.memory-reader-standalone-media .inline-player{
  display:block;
  margin:0;
  border-radius:14px;
  overflow:hidden;
  max-width:min(72vw,340px);
}
.memory-reader-message.sticker-only .memory-reader-standalone-media .inline-visual{
  max-width:180px;
  border-radius:0;
}
.memory-reader-standalone-media img,
.memory-reader-standalone-media video{
  display:block;
  max-width:100%;
  max-height:58vh;
  border-radius:inherit;
}
.memory-reader-standalone-media>time{
  position:absolute;
  right:7px;
  bottom:7px;
  margin:0;
  padding:3px 6px;
  border-radius:8px;
  background:rgba(12,15,20,.68);
  color:#fff;
  font-size:10px;
  backdrop-filter:blur(5px);
}
.memory-reader-message.sticker-only .memory-reader-standalone-media>time{
  position:static;
  display:block;
  width:100%;
  padding:2px 2px 0;
  background:transparent;
  color:var(--muted);
  text-align:right;
  backdrop-filter:none;
}
.memory-reader-media-shell{
  display:grid;
  gap:0;
  width:fit-content;
  max-width:min(78vw,360px);
}
.memory-reader-media{
  overflow:hidden;
  border-radius:14px 14px 0 0;
}
.memory-reader-media .inline-visual,
.memory-reader-media .inline-player{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  border-radius:0;
}
.memory-reader-media img,
.memory-reader-media video{
  display:block;
  width:100%;
  max-height:58vh;
  object-fit:cover;
  border-radius:0;
}
.memory-reader-caption{
  position:relative;
  padding:8px 10px 18px;
  border-radius:0 0 14px 14px;
  background:var(--received-start);
}
.memory-reader-message.mine .memory-reader-caption{
  background:var(--sent-start);
}
.memory-reader-caption time{
  position:absolute;
  right:9px;
  bottom:5px;
  margin:0;
  font-size:10px;
  color:var(--muted);
}
@media(max-width:760px){
  .memory-reader-standalone-media .inline-visual,
  .memory-reader-standalone-media .inline-player,
  .memory-reader-media-shell{
    max-width:min(82vw,340px);
  }
}

/* Stage 8.5 — Jelajah to Memory */
.explore-memory{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.explore-memory-copy{min-width:0;display:grid;gap:3px}
.discovery-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.discovery-actions button{border:1px solid var(--line);border-radius:999px;padding:7px 10px;background:var(--panel);color:var(--text);font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.discovery-actions .discovery-save{display:inline-flex;align-items:center;gap:5px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));border-color:color-mix(in srgb,var(--accent) 28%,var(--line));color:var(--accent)}
.discovery-actions svg{width:14px;height:14px}
.moment-cards>article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.moment-card-copy{display:grid;gap:3px;min-width:0}
.moment-card-copy small{color:var(--muted)}
@media(max-width:760px){
 .explore-memory{grid-template-columns:auto minmax(0,1fr)}
 .explore-memory .discovery-actions{grid-column:1/-1;width:100%;justify-content:flex-end}
 .moment-cards>article{grid-template-columns:auto minmax(0,1fr)}
 .moment-cards>article .discovery-actions{grid-column:1/-1;width:100%;justify-content:flex-end}
 .discovery-actions button{padding:7px 11px}
}

/* Stage 8.5 — structural rediscovery pools */
.rediscovery-pools{display:grid;gap:12px;margin-top:14px}
.rediscovery-pool{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.rediscovery-pool-icon{font-size:24px}
.rediscovery-pool>div:not(.session-result){display:grid;gap:3px}
.rediscovery-pool small,.rediscovery-pool p{margin:0}
.session-result{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:12px;margin-top:3px;border-top:1px solid var(--line)}
.session-result[hidden]{display:none}
.session-result-copy{display:grid;gap:2px}
.session-result-copy span,.session-result-copy small{color:var(--muted)}
.first-media-block{margin-top:18px}
.explore-title.compact{margin-bottom:10px}
.first-media-grid{display:grid;gap:9px}
.first-media-grid>article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.first-media-grid>article>div{display:grid;gap:2px}
.first-media-grid small{color:var(--muted)}
@media(max-width:760px){
 .rediscovery-pool{grid-template-columns:auto minmax(0,1fr)}
 .rediscovery-pool>.btn{grid-column:1/-1;width:100%}
 .session-result{grid-template-columns:1fr}
 .session-result .discovery-actions{justify-content:flex-start}
 .session-reroll{width:100%}
 .first-media-grid>article{grid-template-columns:auto minmax(0,1fr)}
 .first-media-grid>article .discovery-actions{grid-column:1/-1;justify-content:flex-end}
}


/* Stage 8.7 — compact chat navigation, in-chat search and floating date */
.collapsible-tools{position:relative;display:block;padding:0;border-bottom:0;background:transparent;z-index:35;min-height:18px}
.collapsible-tools .utility-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;max-height:0;overflow:hidden;opacity:0;padding:0 28px;background:var(--panel);border-bottom:0 solid var(--line);transform:translateY(-6px);transition:max-height .2s ease,opacity .16s ease,padding .2s ease,transform .2s ease,border-width .2s ease}
.collapsible-tools.open .utility-actions{max-height:64px;opacity:1;padding:9px 28px 14px;transform:none;border-bottom-width:1px}
.utility-handle{position:absolute;z-index:3;left:50%;bottom:-14px;transform:translateX(-50%);width:50px;height:28px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:0 0 15px 15px;background:color-mix(in srgb,var(--panel) 96%,transparent);color:var(--muted);display:grid;place-items:center;box-shadow:0 5px 14px #1112}
.utility-handle svg{width:16px;height:16px}.utility-handle:hover{color:var(--accent);background:var(--panel)}
.chat-search-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:8px 28px;z-index:35}
.chat-search-box{display:flex;align-items:center;gap:8px;min-width:0;height:44px;padding:0 5px 0 13px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:14px;background:var(--bg)}
.chat-search-box>svg{width:18px;height:18px;color:var(--muted)}.chat-search-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);font:inherit}
.chat-search-close{width:36px;height:36px}.chat-search-nav{display:flex;align-items:center;gap:4px;white-space:nowrap}.chat-search-nav .icon-btn{width:38px;height:38px}.chat-search-nav span{min-width:82px;text-align:center;color:var(--muted);font-size:12px;font-weight:750}
.floating-chat-date{position:absolute;z-index:31;left:50%;top:12px;transform:translate(-50%,-7px);max-width:calc(100% - 90px);padding:7px 13px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--panel) 88%,transparent);color:var(--ink);box-shadow:0 8px 24px #1112;backdrop-filter:blur(12px);font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.floating-chat-date.show{opacity:1;transform:translate(-50%,0)}
.message.search-current .bubble{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent),var(--shadow-soft)}
.message mark{padding:1px 2px;border-radius:5px;background:color-mix(in srgb,#ffd54a 66%,transparent);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.message mark.current-search-match{background:#ffd54a;color:#17243c;box-shadow:0 0 0 2px color-mix(in srgb,#ffd54a 35%,transparent)}
/* Jump emphasis follows the actual bubble/media shape instead of the full message row. */
.message.jump-target{outline:0!important;border-radius:0!important}
.message.jump-target .bubble{outline:2px solid color-mix(in srgb,var(--brand) 72%,transparent);outline-offset:3px;border-radius:inherit;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.focus-mode .collapsible-tools,.focus-mode .chat-search-tools{display:none}
@media(max-width:760px){
 .collapsible-tools{min-height:16px}
 .collapsible-tools .utility-actions{padding-inline:12px}
 .collapsible-tools.open .utility-actions{padding:8px 12px 13px}
 .utility-actions .pill{flex:1;justify-content:center;min-width:0;padding:7px 8px;font-size:11px}
 .utility-actions .sticky-date{max-width:44vw}
 .utility-handle{width:48px;height:27px;bottom:-13px}
 .chat-search-tools{grid-template-columns:minmax(0,1fr);padding:7px 10px;gap:5px}
 .chat-search-box{height:42px}
 .chat-search-nav{justify-content:center;height:34px}
 .chat-search-nav .icon-btn{width:40px;height:34px}
 .floating-chat-date{top:10px;max-width:calc(100% - 70px);font-size:11.5px;padding:6px 11px}
}
@media(prefers-reduced-motion:reduce){.collapsible-tools .utility-actions,.floating-chat-date{transition:none}}

/* Stage 8.7 mobile refinement: keep the utility affordance quiet and out of the controls. */
.collapsible-tools .utility-handle{width:34px;height:16px;bottom:-8px;border-radius:0 0 10px 10px;opacity:.48;box-shadow:0 3px 8px #1111;transition:opacity .16s ease,transform .16s ease}
.collapsible-tools .utility-handle svg{width:12px;height:12px}
.collapsible-tools .utility-handle:hover,.collapsible-tools .utility-handle:focus-visible{opacity:1}
.collapsible-tools.open .utility-handle{left:auto;right:12px;bottom:50%;transform:translateY(50%);width:28px;height:28px;border-radius:10px;opacity:.72}
@media(max-width:760px){
 .collapsible-tools.open .utility-actions{padding-right:48px}
 .collapsible-tools .utility-handle{width:32px;height:14px;bottom:-7px}
 .collapsible-tools.open .utility-handle{right:8px;bottom:50%;width:28px;height:28px}
}

/* Stage 8.7 search QA: make the active occurrence unmistakable and flash its bubble. */
.message mark.current-search-match{
  background:var(--brand);
  color:#fff;
  outline:2px solid color-mix(in srgb,var(--brand) 58%,#fff);
  outline-offset:1px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);
  font-weight:800;
  animation:antara-search-word-glow 1.8s cubic-bezier(.22,.78,.18,1) both;
}
.message.search-jump-target .bubble{
  outline:0!important;
  animation:antara-search-bubble-glow 1.8s cubic-bezier(.22,.78,.18,1) both!important;
}
@keyframes antara-search-bubble-glow{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent),var(--shadow-soft);filter:brightness(1)}
  14%{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 84%,transparent),0 0 18px 5px color-mix(in srgb,var(--brand) 30%,transparent),var(--shadow-soft);filter:brightness(1.055)}
  66%{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 72%,transparent),0 0 15px 4px color-mix(in srgb,var(--brand) 22%,transparent),var(--shadow-soft);filter:brightness(1.035)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent),var(--shadow-soft);filter:brightness(1)}
}
@keyframes antara-search-word-glow{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent);filter:brightness(1)}
  16%{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 26%,transparent),0 0 11px color-mix(in srgb,var(--brand) 24%,transparent);filter:brightness(1.08)}
  68%{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 18%,transparent),0 0 8px color-mix(in srgb,var(--brand) 16%,transparent);filter:brightness(1.04)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent);filter:brightness(1)}
}
@media(prefers-reduced-motion:reduce){
 .message.search-jump-target .bubble{animation:none!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 72%,transparent),0 0 14px 4px color-mix(in srgb,var(--brand) 22%,transparent),var(--shadow-soft)!important}
 .message mark.current-search-match{animation:none}
}

/* Stage 8.7 reading polish: the collapsed handle yields visual priority to the conversation. */
.collapsible-tools:not(.open) .utility-handle.quiet{opacity:.18;transform:translateX(-50%) scale(.88)}
.collapsible-tools:not(.open) .utility-handle.scroll-hidden{opacity:0;transform:translateX(-50%) translateY(-5px) scale(.82);pointer-events:none}


/* Stage 8.8 — Instagram metadata + adaptive visual media grids */
.message-media-grid{display:grid;gap:2px;overflow:hidden;border-radius:14px;max-width:min(72vw,360px);aspect-ratio:1/1}.message-media-grid.jump-target-grid{outline:2px solid color-mix(in srgb,var(--brand) 78%,transparent);outline-offset:3px;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.message-media-grid-cell{position:relative;min-width:0;min-height:0;overflow:hidden;background:color-mix(in srgb,var(--panel) 80%,var(--line))}
.message-media-grid-cell .inline-visual,.message-media-grid-cell .inline-player{width:100%;height:100%;max-width:none;margin:0;border-radius:0;display:block}
.message-media-grid-cell img,.message-media-grid-cell video{width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0;display:block}
.message-media-grid-cell .media-expand{display:none}
.message-media-grid-2{grid-template-columns:1fr 1fr;aspect-ratio:1.35/1}
.message-media-grid-3{grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr}
.message-media-grid-3 .message-media-grid-cell:first-child{grid-row:1/3}
.message-media-grid-4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.message-media-grid-video{position:absolute;left:9px;top:9px;display:grid;place-items:center;width:27px;height:27px;border-radius:999px;background:#111a;color:#fff;font-size:11px;pointer-events:none}
.message-media-grid-more{position:absolute;inset:0;display:grid;place-items:center;background:#1118;color:#fff;font-size:28px;font-weight:800;pointer-events:none}
.message-share{display:grid;gap:3px;margin:4px 0 6px;padding:9px 11px;border-left:3px solid color-mix(in srgb,var(--accent) 72%,transparent);border-radius:7px;background:color-mix(in srgb,var(--panel) 38%,transparent);font-size:13px;overflow-wrap:anywhere}
.message-share-label{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.68}
.message-share a{color:inherit;font-weight:700}
.call-event,.unavailable-media{display:flex;align-items:center;gap:9px;padding:7px 2px 8px}
.call-event-icon,.unavailable-media-icon{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--panel) 35%,transparent)}
.call-event-icon svg{width:17px;height:17px}
.call-event span:last-child,.unavailable-media span:last-child{display:grid;gap:1px}
.call-event strong,.unavailable-media strong{font-size:13px}
.call-event small,.unavailable-media small{font-size:11px;opacity:.68}
.message-reactions{display:flex;gap:3px;flex-wrap:wrap;position:relative;margin:3px 0 -12px;z-index:2}
.message-reactions .reaction{display:inline-flex;align-items:center;justify-content:center;min-width:27px;height:24px;padding:1px 6px;border:2px solid var(--bg);border-radius:999px;background:var(--panel);box-shadow:0 2px 7px #1112;font-size:14px;line-height:1}
.message.mine .message-reactions{justify-content:flex-end}
@media(max-width:760px){.message-media-grid{max-width:min(78vw,340px)}.message-media-grid-more{font-size:24px}}

/* Stage 8.8 QA — gallery and reacted media refinements */
.content-scroll .media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;max-width:none;aspect-ratio:auto;overflow:visible;border-radius:0}
.content-scroll .gallery-card{border:0;border-radius:8px;background:transparent;overflow:hidden}
.content-scroll .gallery-cover{height:auto;aspect-ratio:1/1;border-radius:8px;background:var(--soft)}
.content-scroll .gallery-cover img{display:block;width:100%;height:100%;object-fit:cover}
.content-scroll .gallery-body{padding:7px 2px 10px}
.content-scroll .gallery-body p{margin:0 0 2px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content-scroll .gallery-body .meta{font-size:10px}
.content-scroll .gallery-body .btn{margin-top:5px;min-height:30px;padding:5px 7px;font-size:10px}
.media-message .bubble{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible}
.media-message .message-reactions{position:absolute;right:5px;bottom:-10px;margin:0}
.message:not(.mine).media-message .message-reactions{right:auto;left:5px}
.media-message .bubble-footer{right:7px;bottom:6px;padding:2px 5px;border-radius:7px;background:#1119;color:#fff}
.unavailable-media{max-width:260px}
@media(max-width:760px){
 .content-scroll .media-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
 .content-scroll .gallery-cover{border-radius:6px}
 .content-scroll .gallery-body{padding:5px 1px 8px}
 .content-scroll .gallery-body .btn{min-height:28px}
 .message-media-grid{max-width:min(82vw,360px)}
}

/* Stage 8.8 QA — keep media reactions clear of timestamps */
.media-message .message-reactions,.message.mine.media-message .message-reactions{left:5px;right:auto;bottom:-10px}

/* Stage 8.8 QA — portrait videos use their natural aspect ratio without side letterboxing */
.inline-player.portrait-video{width:min(72vw,340px);max-width:calc(100vw - 92px)}
.inline-player.portrait-video video{width:100%;height:auto;max-height:min(68dvh,560px);aspect-ratio:auto;object-fit:contain;background:transparent}
.media-message .inline-player.portrait-video{overflow:hidden;border-radius:14px}

/* Stage 8.8 QA — compact Instagram call event */
.call-event{min-width:190px;padding:4px 1px 5px}
.call-event-icon{flex-basis:36px;width:36px;height:36px}
.call-event strong{font-size:14px}
.call-event small{font-size:11px}

/* Stage 8.8 QA — Instagram-style call event cards */
.message:has(.call-event) .bubble{min-width:230px;padding:12px 14px;background:color-mix(in srgb,var(--panel) 86%,#6f7480 14%);color:var(--text);border:1px solid color-mix(in srgb,var(--line) 72%,transparent);box-shadow:none}
.message.mine:has(.call-event) .bubble{background:color-mix(in srgb,var(--panel) 84%,#747985 16%)}
.call-event{min-width:0;padding:0;gap:11px}
.call-event-icon{flex:0 0 42px;width:42px;height:42px;background:color-mix(in srgb,var(--text) 13%,transparent)}
.call-event-icon svg{width:21px;height:21px}
.call-event strong{font-size:15px;line-height:1.2}
.call-event small{margin-top:2px}
.message:has(.call-event) .bubble-footer{position:static;display:block;margin:-15px 0 0 53px;padding:0;background:transparent;color:inherit;opacity:.72;font-size:11px;text-align:left}

/* Stage 8.8 QA — give call title, duration, and timestamp breathing room */
.call-event>span:last-child{display:flex;flex-direction:column;justify-content:center;line-height:1.2}
.call-event strong{display:block;margin-bottom:5px}
.call-event small{display:block;margin:0 0 4px;line-height:1.25}
.message:has(.call-event) .bubble-footer{margin-top:-2px}


/* Stage 8.9 — message context menu */
.message.context-selected .bubble{outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:3px}
.message-context-layer{position:fixed;inset:0;z-index:120;background:#1115;backdrop-filter:blur(2px);opacity:0;transition:opacity .14s ease}
.message-context-layer.open{opacity:1}
.message-context-menu{position:absolute;left:0;right:0;bottom:0;padding:10px max(14px,env(safe-area-inset-right)) max(14px,calc(env(safe-area-inset-bottom) + 10px)) max(14px,env(safe-area-inset-left));border-radius:22px 22px 0 0;background:var(--panel);box-shadow:0 -16px 44px #1114;transform:translateY(12px);transition:transform .16s ease}
.message-context-layer.open .message-context-menu{transform:translateY(0)}
.message-context-preview{padding:8px 8px 13px;border-bottom:1px solid var(--line)}
.message-context-preview>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.message-context-preview strong{font-size:14px}.message-context-preview span{font-size:11px;color:var(--muted);white-space:nowrap}.message-context-preview p{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.message-context-actions{display:grid;padding-top:7px}.message-context-actions button{display:flex;align-items:center;gap:13px;width:100%;min-height:48px;padding:9px 8px;border:0;border-radius:12px;background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer}.message-context-actions button:hover{background:var(--soft)}.message-context-actions button>span{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--soft);font-size:15px}.message-context-actions strong{font-size:14px}
.context-nearby-thread{display:grid;gap:8px;max-height:min(62dvh,620px);overflow:auto;padding:4px 2px 14px}.context-nearby-thread .memory-reader-message{margin:0}.context-nearby-thread .context-focus{padding:5px;border-radius:16px;background:color-mix(in srgb,var(--accent) 10%,transparent);outline:2px solid color-mix(in srgb,var(--accent) 34%,transparent)}
@media(min-width:761px){.message-context-layer{background:transparent;backdrop-filter:none}.message-context-menu.desktop{left:12px;right:auto;bottom:auto;width:310px;max-height:calc(100dvh - 24px);overflow:auto;padding:9px;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 48px #1115;transform:scale(.97);transform-origin:top left}.message-context-layer.open .message-context-menu.desktop{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.message-context-layer,.message-context-menu{transition:none}}


/* Stage 8.9 QA — keep long-press native selection out of the archive UI. */
.message .bubble{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.context-nearby-thread .context-focus{padding:0;background:transparent;outline:0}
.context-nearby-thread .context-focus .memory-reader-bubble,
.context-nearby-thread .context-focus .memory-reader-media-shell,
.context-nearby-thread .context-focus .memory-reader-standalone-media{
 outline:2px solid color-mix(in srgb,var(--brand) 48%,transparent);
 outline-offset:3px;
 border-radius:inherit;
}


/* Stage 8.9 QA — context target follows the exact chat bubble silhouette. */
.context-nearby-thread .context-focus .memory-reader-bubble,
.context-nearby-thread .context-focus .memory-reader-media-shell,
.context-nearby-thread .context-focus .memory-reader-standalone-media{outline:0}
.context-nearby-thread .context-focus .memory-reader-bubble{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 48%,transparent)}
.context-nearby-thread .context-focus:not(.mine).group-first .memory-reader-bubble{border-radius:17px 17px 17px 6px}
.context-nearby-thread .context-focus:not(.mine).group-middle .memory-reader-bubble{border-radius:6px 17px 17px 6px}
.context-nearby-thread .context-focus:not(.mine).group-last .memory-reader-bubble{border-radius:6px 17px 17px 4px}
.context-nearby-thread .context-focus:not(.mine).group-single .memory-reader-bubble{border-radius:17px 17px 17px 4px}
.context-nearby-thread .context-focus.mine.group-first .memory-reader-bubble{border-radius:17px 17px 6px 17px}
.context-nearby-thread .context-focus.mine.group-middle .memory-reader-bubble{border-radius:17px 6px 6px 17px}
.context-nearby-thread .context-focus.mine.group-last .memory-reader-bubble{border-radius:17px 6px 4px 17px}
.context-nearby-thread .context-focus.mine.group-single .memory-reader-bubble{border-radius:17px 17px 4px 17px}


/* Stage 8.9 — Context Reader v2 */
.context-reader-controls{display:grid;gap:12px;margin:-2px 0 12px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--panel) 88%,var(--soft))}
.context-reader-controls>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:12px}.context-reader-controls .eyebrow{font-size:10px}.context-reader-controls strong{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.context-range-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.context-range-picker button{min-width:0;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--muted);font:600 13px/1 inherit;cursor:pointer}.context-range-picker button.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 24%,transparent)}
.context-nearby-thread{scroll-behavior:auto;overscroll-behavior:contain}
.context-reader-actions{position:sticky;bottom:-1px;z-index:3;display:grid;grid-template-columns:1fr 1.18fr;gap:9px;margin:8px -2px -2px;padding:11px 2px 2px;background:linear-gradient(180deg,transparent,var(--panel) 22%)}.context-reader-actions .btn{justify-content:center;min-height:48px}.context-memory-btn{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
@media(max-width:520px){.context-reader-controls{padding:11px}.context-reader-controls>div:first-child{align-items:flex-start;flex-direction:column;gap:3px}.context-range-picker{gap:5px}.context-range-picker button{height:36px;border-radius:10px;font-size:12px}.context-reader-actions{grid-template-columns:1fr 1.22fr}.context-reader-actions .btn{padding-left:10px;padding-right:10px;font-size:13px}}

/* Stage 8.9 QA — reliable range state and clearer target. */
.context-range-picker button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 24%,transparent)}
.context-nearby-thread .context-focus .memory-reader-bubble{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 68%,transparent),0 0 0 5px color-mix(in srgb,var(--brand) 12%,transparent)}


/* Stage 8.10 — immersive Media Viewer */
body.media-viewer-open{overflow:hidden}.media-viewer{position:fixed;inset:0;z-index:220;background:#07080b;color:#fff;display:grid;grid-template:72px 1fr auto/72px 1fr 72px;overflow:hidden;touch-action:pan-y}.media-viewer-top{grid-column:1/-1;display:grid;grid-template-columns:48px minmax(0,1fr) auto 48px;align-items:center;gap:10px;padding:10px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));z-index:4;background:linear-gradient(#000b,transparent);transition:opacity .18s}.media-viewer-icon{width:44px;height:44px;border:0;border-radius:50%;background:#ffffff12;color:#fff;display:grid;place-items:center;font:700 18px/1 inherit}.media-viewer-icon svg{width:21px}.media-viewer-meta{min-width:0;display:grid;gap:2px}.media-viewer-meta strong,.media-viewer-meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-viewer-meta strong{font-size:14px}.media-viewer-meta span,.media-viewer-count{font-size:11px;color:#ffffffa8}.media-viewer-count{white-space:nowrap}.media-viewer-stage{grid-column:1/-1;grid-row:1/-1;display:grid;place-items:center;min-width:0;min-height:0;padding:72px 0 86px;overflow:hidden}.media-viewer-stage img,.media-viewer-stage video{display:block;max-width:100vw;max-height:calc(100dvh - 120px);width:auto;height:auto;object-fit:contain}.media-viewer-stage video{background:#000}.media-viewer-zoom{width:100%;height:100%;display:grid;place-items:center;overflow:auto;touch-action:pan-x pan-y}.media-viewer-zoom img{transform-origin:center;transition:transform .18s ease;user-select:none;-webkit-user-drag:none}.media-viewer-zoom.zoomed{cursor:zoom-out}.media-viewer-audio{width:min(520px,86vw);display:grid;gap:18px;justify-items:center;padding:28px;border-radius:24px;background:#ffffff0d}.media-viewer-audio svg{width:42px;height:42px}.media-viewer-audio audio{width:100%}.media-viewer-missing{display:grid;justify-items:center;gap:12px;text-align:center;max-width:320px;padding:24px}.media-viewer-missing svg{width:48px;height:48px;color:#ffffff80}.media-viewer-missing span{font-size:13px;color:#ffffff9c;line-height:1.5}.media-viewer-nav{grid-row:2;align-self:center;z-index:3;width:46px;height:60px;margin:8px;border:0;border-radius:15px;background:#0007;color:#fff;font-size:42px;line-height:1}.media-viewer-nav.prev{grid-column:1}.media-viewer-nav.next{grid-column:3}.media-viewer-nav:disabled{opacity:.18}.media-viewer-bottom{grid-column:1/-1;z-index:4;align-self:end;display:grid;justify-items:center;gap:7px;padding:36px 18px max(16px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#000d);transition:opacity .18s}.media-viewer-caption{max-width:min(720px,92vw);border:0;background:none;color:#fff;text-align:center;font:inherit}.media-viewer-caption span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}.media-viewer-caption small{display:block;margin-top:4px;color:#ffffff8c}.media-viewer.caption-open .media-viewer-caption span{-webkit-line-clamp:unset;max-height:32dvh;overflow:auto}.media-viewer-message-index{font-size:11px;color:#ffffff8c}.media-viewer.chrome-hidden .media-viewer-top,.media-viewer.chrome-hidden .media-viewer-bottom,.media-viewer.chrome-hidden .media-viewer-nav{opacity:0;pointer-events:none}.media-viewer-menu{position:absolute;z-index:8;right:max(14px,env(safe-area-inset-right));top:64px;width:min(300px,calc(100vw - 28px));padding:7px;border-radius:16px;background:#18191eeF;box-shadow:0 18px 55px #0009;border:1px solid #ffffff18}.media-viewer-menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:9px 11px;border:0;border-radius:11px;background:none;color:#fff;text-align:left;font:inherit}.media-viewer-menu button:hover{background:#ffffff10}.media-viewer-menu span{font-weight:650}.media-viewer.no-caption .media-viewer-bottom{padding-top:12px}
@media(max-width:760px){.media-viewer{grid-template-columns:1fr;grid-template-rows:68px 1fr auto}.media-viewer-top{grid-column:1;grid-row:1}.media-viewer-stage{grid-column:1;grid-row:1/-1;padding:68px 0 78px}.media-viewer-nav{display:none}.media-viewer-bottom{grid-column:1;grid-row:3}.media-viewer-stage img,.media-viewer-stage video{max-height:calc(100dvh - 100px)}}
@media(prefers-reduced-motion:reduce){.media-viewer-zoom img,.media-viewer-top,.media-viewer-bottom{transition:none}}


/* Stage 8.10 QA — touch-first media viewer */
.media-viewer-stage{touch-action:none}
.media-viewer-zoom{overscroll-behavior:contain;justify-content:safe center;align-content:safe center}
.media-viewer-zoom.zoomed{display:block;overflow:auto;-webkit-overflow-scrolling:touch;padding:0}
.media-viewer-zoom.zoomed img{display:block;margin:0;max-width:none!important;max-height:none!important;transition:none}
.video-viewer-trigger{position:relative;cursor:pointer}.video-viewer-trigger video{pointer-events:none}.video-open-overlay{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0!important;border-radius:inherit!important;background:transparent!important;color:transparent!important;font-size:0!important}.video-open-overlay::after{content:"▶";display:grid;place-items:center;position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;background:#0009;color:#fff;font-size:19px;padding-left:3px;box-shadow:0 3px 18px #0006}


/* Stage 8.10 QA — hide underlying chat reflow and smooth viewer navigation. */
.media-viewer.viewer-transitioning{pointer-events:none}
.media-viewer.viewer-transitioning::after{content:"";position:absolute;inset:0;z-index:20;background:#07080b;opacity:.01}


/* Stage 8.10 QA — true edge-to-edge immersive viewer */
.media-viewer{display:block;touch-action:none}
.media-viewer-stage{position:absolute;inset:0;padding:0!important;display:grid;place-items:center;touch-action:none;background:#000}
.media-viewer-stage img,.media-viewer-stage video{width:100vw;height:100dvh;max-width:none!important;max-height:none!important;object-fit:contain;border-radius:0!important}
.media-viewer-zoom{position:absolute;inset:0;width:auto;height:auto;overflow:hidden;display:grid;place-items:center;touch-action:none}
.media-viewer-zoom img{width:100vw;height:100dvh;object-fit:contain;transform-origin:center center;will-change:transform;transition:transform .16s ease}
.media-viewer-zoom.zoomed{display:grid;overflow:hidden;cursor:grab}
.media-viewer-zoom.zoomed img{width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;transition:none}
.media-viewer-top{position:absolute;left:0;right:0;top:0;z-index:6}
.media-viewer-bottom{position:absolute;left:0;right:0;bottom:0;z-index:6}
.media-viewer-nav{position:absolute;z-index:5;top:50%;transform:translateY(-50%)}.media-viewer-nav.prev{left:8px}.media-viewer-nav.next{right:8px}
.media-viewer.chrome-hidden .media-viewer-top,.media-viewer.chrome-hidden .media-viewer-bottom,.media-viewer.chrome-hidden .media-viewer-nav{opacity:0;pointer-events:none}
.media-viewer.menu-open .media-viewer-top{opacity:1;pointer-events:auto}
.media-viewer-menu-backdrop{position:absolute;inset:0;z-index:7;border:0;background:transparent;padding:0}
.media-viewer-menu{z-index:9}
@media(max-width:760px){.media-viewer-stage,.media-viewer-zoom{inset:0}.media-viewer-stage img,.media-viewer-stage video,.media-viewer-zoom img{width:100vw;height:100dvh;max-height:none!important}.media-viewer-nav{display:none}}


/* Stage 8.10 QA — persistent gesture surface above media, controls above gesture surface. */
.media-viewer-gesture-layer{position:absolute;inset:0;z-index:3;touch-action:none;background:transparent}
.media-viewer-top,.media-viewer-bottom{z-index:6}
.media-viewer-menu-backdrop{z-index:7}.media-viewer-menu{z-index:9}
.media-viewer-stage{z-index:1}
.media-viewer-video{position:relative;z-index:2;pointer-events:none}
.media-viewer.chrome-hidden .media-viewer-video{pointer-events:none}
.media-viewer:not(.chrome-hidden) .media-viewer-video{pointer-events:auto}
.media-viewer:not(.chrome-hidden) .media-viewer-gesture-layer{z-index:1}
.media-viewer:not(.chrome-hidden) .media-viewer-video{z-index:4}
.media-viewer-zoom{pointer-events:none}
.media-viewer-zoom img{pointer-events:none}


/* Stage 8.10 QA — viewer owns gestures; video playback uses a dedicated control above it. */
.media-viewer-gesture-layer{z-index:3!important;pointer-events:auto!important}
.media-viewer-video{z-index:2!important;pointer-events:none!important}
.media-viewer:not(.chrome-hidden) .media-viewer-gesture-layer{z-index:3!important}
.media-viewer:not(.chrome-hidden) .media-viewer-video{z-index:2!important;pointer-events:none!important}
.media-viewer-play{position:absolute;z-index:6;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border:0;border-radius:50%;background:#0009;color:#fff;font:700 22px/1 system-ui;display:grid;place-items:center;padding-left:3px}
.media-viewer-play.playing{opacity:0;pointer-events:none}
.media-viewer.chrome-hidden .media-viewer-play:not(.playing){opacity:.88}


/* Stage 8.10 recording diagnosis — stable gesture ownership. */
.media-viewer-gesture-layer{z-index:5!important;pointer-events:auto!important}
.media-viewer-top,.media-viewer-bottom{z-index:7!important;pointer-events:none}
.media-viewer-top button,.media-viewer-bottom button{pointer-events:auto}
.media-viewer-play{z-index:8!important;pointer-events:auto!important}
.media-viewer-menu-backdrop{z-index:9!important;pointer-events:auto!important}
.media-viewer-menu{z-index:10!important;pointer-events:auto!important}
.media-viewer:not(.chrome-hidden) .media-viewer-gesture-layer{z-index:5!important}
.media-viewer-video{z-index:2!important;pointer-events:none!important}


/* Stage 8.10 root-input fix — no transparent fullscreen gesture overlay. */
.media-viewer-gesture-layer{display:none!important}
.media-viewer{touch-action:none}
.media-viewer-stage,.media-viewer-zoom,.media-viewer-stage img,.media-viewer-stage video{pointer-events:none!important}
.media-viewer-top,.media-viewer-bottom{pointer-events:none!important}
.media-viewer-top button,.media-viewer-bottom button{pointer-events:auto}
.media-viewer.chrome-hidden .media-viewer-top button,.media-viewer.chrome-hidden .media-viewer-bottom button{pointer-events:none!important}
.media-viewer-play{pointer-events:auto!important;z-index:12!important}
.media-viewer-menu,.media-viewer-menu-backdrop{pointer-events:auto!important}

/* Stage 8.9 — Memory Library discovery controls */
.memory-library-controls{display:grid;gap:14px;margin:18px 0 14px}.memory-library-search{display:grid;gap:7px}.memory-library-filter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.memory-library-filter-row label{display:grid;gap:7px}.memory-library-controls .searchbox{width:100%}.memory-library-controls .searchbox .field{width:100%}
@media(max-width:760px){.memory-library-controls{padding:16px;margin-top:14px}.memory-library-filter-row{grid-template-columns:1fr 1fr;gap:8px}.memory-library-filter-row .field{font-size:13px;padding-left:10px;padding-right:8px}}

.memory-library-picker{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;cursor:pointer}.memory-library-picker svg{width:15px;height:15px;flex:0 0 auto;opacity:.72}.memory-library-picker span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.memory-library-choice-menu .jump-option{justify-content:space-between}.memory-library-choice-menu .jump-option.active{border-color:var(--accent);background:var(--accent-soft)}.memory-choice-radio{box-sizing:border-box;display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border:2px solid var(--muted);border-radius:50%;background:transparent}.memory-library-choice-menu .jump-option.active .memory-choice-radio{border-color:var(--accent)}.memory-choice-radio i{display:block;width:10px;height:10px;border-radius:50%;background:var(--accent)}.memory-library-choice-intro{margin:-4px 0 18px;color:var(--muted);font-size:14px;line-height:1.45}.memory-library-choice-menu{gap:10px}.memory-library-choice-menu .jump-option{min-height:78px;padding:15px 16px;border-radius:18px;align-items:center}.memory-choice-copy{display:grid;gap:5px;min-width:0;text-align:left}.memory-choice-copy strong{font-size:16px;line-height:1.2}.memory-choice-copy small{color:var(--muted);font-size:12.5px;line-height:1.35;font-weight:500}.memory-choice-radio{box-sizing:border-box;display:block;width:22px!important;height:22px!important;min-width:22px;max-width:22px;flex:0 0 22px!important;padding:0!important;border:2px solid var(--muted)!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important}.memory-library-choice-menu .jump-option.active .memory-choice-radio{border-color:var(--accent)!important}.memory-choice-radio.selected{background:radial-gradient(circle at 50% 50%,var(--accent) 0 5px,transparent 5.5px)!important}.memory-library-choice-actions{margin-top:18px}

/* Stage 8.9 — Today memories live inside Explore */
.explore-memory-entry{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:12px;text-align:left;color:var(--ink);cursor:pointer}
.explore-memory-entry-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--soft);color:var(--accent)}
.explore-memory-entry-icon svg{width:20px;height:20px}.explore-memory-entry strong,.explore-memory-entry small{display:block}.explore-memory-entry small{margin-top:4px;color:var(--muted);line-height:1.4}.explore-memory-entry-arrow{font-size:28px;color:var(--muted);line-height:1}
.memory-date-picker-button{margin:12px 0 22px}.memory-year-group{margin-top:24px}.memory-year-group .explore-title{align-items:center}.memory-year-group .result{margin-top:8px}
@media(max-width:760px){.memory-year-group .explore-title{align-items:flex-start;gap:10px}.memory-year-group .explore-title .btn{font-size:11px;padding:8px 10px;min-height:38px}}

.memory-year-memories{display:grid;gap:8px;margin:10px 0 12px}.memory-year-memory{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--accent) 7%,var(--card));color:var(--ink);text-align:left;cursor:pointer}.memory-year-memory strong{font-size:14px}.memory-year-memory small{color:var(--muted)}

/* Stage 8.9 — Gallery 2.0 */
.gallery-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding:2px 0;border-bottom:1px solid var(--line)}.gallery-tabs::-webkit-scrollbar{display:none}.gallery-tabs button{flex:0 0 auto;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);padding:10px 13px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.gallery-tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
.gallery-swipe-zone{touch-action:pan-y;min-height:160px}.gallery-grid-2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}.gallery-tile{position:relative;min-width:0;aspect-ratio:1;background:var(--soft);overflow:hidden}.gallery-tile.audio{aspect-ratio:1}.gallery-tile-open{width:100%;height:100%;border:0;padding:0;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}.gallery-tile img,.gallery-tile video{width:100%;height:100%;object-fit:cover;display:block}.gallery-media-placeholder{display:grid;place-items:center;gap:6px;font-size:11px}.gallery-media-placeholder svg{width:25px;height:25px}.gallery-play{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:#0008;color:#fff;font-size:13px;pointer-events:none}.gallery-more{position:absolute;top:5px;right:5px;width:28px;height:28px;border:0;border-radius:999px;background:#0008;color:#fff;font-weight:800;cursor:pointer;z-index:2}.gallery-links{display:grid;gap:8px}.gallery-link-row{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}.gallery-link-row>a{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;padding:12px 48px 12px 12px;color:var(--ink);text-decoration:none}.gallery-link-row strong,.gallery-link-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gallery-link-row small{margin-top:3px;color:var(--muted)}.gallery-link-icon{width:38px;height:38px;border-radius:11px;background:var(--soft);display:grid;place-items:center}.gallery-link-icon svg{width:18px}.gallery-more-results{margin-top:18px}
@media(max-width:760px){.gallery-grid-2{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery-tabs{margin-left:-4px;margin-right:-4px}.gallery-tabs button{padding-left:11px;padding-right:11px}}

/* Stage 8.9 Gallery QA — edge-to-edge media canvas */
@media(max-width:760px){
 .content-scroll:has(.gallery-swipe-zone){padding-left:0;padding-right:0}
 .content-scroll:has(.gallery-swipe-zone)>.content-wrap>.section-head,
 .content-scroll:has(.gallery-swipe-zone)>.content-wrap>.gallery-tabs,
 .content-scroll:has(.gallery-swipe-zone)>.content-wrap>.info-note{margin-left:17px;margin-right:17px}
 .content-scroll:has(.gallery-swipe-zone)>.content-wrap>.gallery-tabs{width:calc(100% - 34px)}
 .gallery-grid-2{gap:2px}
 .gallery-links{padding-left:17px;padding-right:17px}
 .gallery-more-results{width:calc(100% - 34px);margin-left:17px;margin-right:17px}
}

/* Stage 8.9 Gallery QA — inline voice rows */
.gallery-audio-row{display:grid;grid-template-columns:38px minmax(90px,1fr) minmax(180px,2fr);align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card)}.gallery-audio-meta{min-width:0}.gallery-audio-meta strong,.gallery-audio-meta small{display:block}.gallery-audio-meta small{margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gallery-audio-row audio{width:100%;min-width:0;height:36px}
@media(max-width:760px){.gallery-audio-row{grid-template-columns:38px minmax(0,1fr);padding:11px 17px;border-left:0;border-right:0;border-radius:0}.gallery-audio-row audio{grid-column:1/-1;height:38px}.content-scroll:has(.gallery-swipe-zone) .gallery-links:has(.gallery-audio-row){padding-left:0;padding-right:0;gap:2px}}

/* Stage 8.9 Gallery QA — chronological date groups */
.gallery-day-group{position:relative}.gallery-date-divider{display:flex;align-items:center;justify-content:center;padding:14px 12px 9px}.gallery-date-divider span{padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--canvas);color:var(--muted);font-size:11px;font-weight:700}.floating-gallery-date{position:sticky;top:8px;margin:0 auto -34px;z-index:12;width:max-content;max-width:calc(100% - 34px);pointer-events:none}
@media(max-width:760px){.gallery-date-divider{padding-top:13px}.gallery-day-group:first-child .gallery-date-divider{padding-top:8px}}

/* Stage 8.9 edited-message metadata */
.bubble-footer .edited-label{font-size:.92em;opacity:.78}.bubble-footer .footer-dot{margin:0 2px;opacity:.62}

/* Edited messages reserve their own metadata row */
.compact-text .bubble:has(.edited-label){padding-bottom:22px}
.compact-text .bubble:has(.edited-label) .bubble-footer{display:flex;position:absolute;right:9px;bottom:6px;margin:0}

.boot-shell{position:fixed;inset:0;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:32px;background:var(--bg);color:var(--ink);text-align:center}
.boot-brand{display:flex;align-items:center;justify-content:center;gap:18px;font-size:40px;line-height:1;font-weight:800;letter-spacing:-1.6px}
.boot-brand .brand-mark{width:64px;height:64px;border-radius:21px;display:grid;place-items:center;background:var(--accent);color:#fff;box-shadow:0 18px 44px color-mix(in srgb,var(--accent) 24%,transparent)}
.boot-brand .brand-mark svg{width:34px;height:34px}
.boot-loader{width:min(260px,64vw);height:4px;overflow:hidden;border-radius:999px;background:var(--line)}
.boot-loader i{display:block;width:42%;height:100%;border-radius:inherit;background:var(--accent);animation:antara-boot 1.05s ease-in-out infinite}
.boot-shell p{font-size:15px;text-align:center}
@keyframes antara-boot{0%{transform:translateX(-115%)}55%{transform:translateX(95%)}100%{transform:translateX(245%)}}
@media (prefers-reduced-motion:reduce){.boot-loader i{animation:none;width:100%;opacity:.55}}

.selection-stage.is-selecting .message.selected-memory-message.jump-target::before{background:transparent}

.content-scroll{touch-action:pan-y}


.primary-pager-viewport{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden;position:relative}
.primary-pager-track{display:flex;flex:1;min-width:0;min-height:0;width:100%;position:relative}
.primary-pager-page{display:flex;flex:0 0 100%;min-width:0;min-height:0;position:relative;overflow:hidden}
.primary-pager-page[hidden]{display:none}
.primary-page-surface{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column;position:relative;overflow:hidden;width:100%}
#surface{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column;position:relative;overflow:hidden}
.tab-transition-old{display:flex;flex-direction:column;overflow:hidden;background:var(--canvas)}
.search-filter-button{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.search-filter-button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-filter-button svg{width:17px;height:17px;color:var(--muted)}


.search-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 12px}
.search-filters .wide{grid-column:1/-1}
.search-filter-group{min-width:0}
.search-filter-group .label,.search-query-field .label{margin-bottom:7px}
.search-filter-button{width:100%;min-height:46px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.search-filter-button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-filter-button svg{width:17px;height:17px;flex:0 0 17px;color:var(--muted)}
@media(max-width:420px){.search-filters{gap:12px 8px}.search-filter-button{padding:10px}.search-filter-button span{font-size:13px}}


/* Stage 9 swipe polish — keep transformed pages inside the app viewport and hide transient mobile scrollbars. */
.main{overflow:hidden}
@media(max-width:760px){
 .content-scroll,.chat-scroll{scrollbar-width:none;-ms-overflow-style:none}
 .content-scroll::-webkit-scrollbar,.chat-scroll::-webkit-scrollbar{display:none;width:0;height:0}
}


/* Stage 9.2 — Personalization & Settings Experience */
.settings-preview{position:relative;overflow:hidden;margin-bottom:18px;border:1px solid var(--hairline);border-radius:24px;background:var(--canvas);min-height:250px;box-shadow:var(--shadow-soft)}
.settings-preview.dots{background-image:radial-gradient(color-mix(in srgb,var(--hairline) 82%,transparent) 1px,transparent 1px);background-size:20px 20px}
.settings-preview.ruled{background-image:linear-gradient(color-mix(in srgb,var(--hairline) 72%,transparent) 1px,transparent 1px);background-size:100% 30px}
.settings-preview-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid color-mix(in srgb,var(--hairline) 74%,transparent);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(8px)}
.settings-preview-top span{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.settings-preview-top small{font-size:11px;color:var(--text-soft)}
.settings-preview-chat{display:flex;flex-direction:column;gap:11px;padding:24px 18px 26px}
.settings-preview-message{position:relative;display:grid;gap:3px;width:fit-content;max-width:min(78%,430px);padding:9px 11px 18px;font-size:var(--size);line-height:1.35;box-shadow:0 3px 10px #0000000a}
.settings-preview-message>small{font-size:9px;font-weight:800;opacity:.72;color:inherit}
.settings-preview-message>time{position:absolute;right:9px;bottom:5px;font-size:9px;opacity:.66}
.settings-preview-message.received{align-self:flex-start;background:linear-gradient(145deg,var(--received-start),var(--received-end));color:var(--received-auto-text);border:1px solid color-mix(in srgb,var(--received-start) 72%,var(--hairline));border-radius:17px 17px 17px 5px}
.settings-preview-message.sent{align-self:flex-end;background:linear-gradient(145deg,var(--sent-start),var(--sent-end));color:var(--sent-auto-text);border-radius:17px 17px 5px 17px}
body[data-gradient=vivid] .settings-preview-message.received{background:linear-gradient(135deg,var(--received-start) 8%,var(--received-end) 92%)}
body[data-gradient=vivid] .settings-preview-message.sent{background:linear-gradient(135deg,var(--sent-start) 5%,var(--sent-end) 95%)}
body[data-gradient=off] .settings-preview-message.received{background:var(--received-start)}
body[data-gradient=off] .settings-preview-message.sent{background:var(--sent-start)}
body[data-bubble=rounded] .settings-preview-message{border-radius:25px}
body[data-bubble=compact] .settings-preview-message{border-radius:9px;padding:6px 9px 15px}
.settings-section-head{margin-bottom:18px}.settings-section-head h3{margin-top:4px}.settings-section-head p{margin-top:7px}
.settings-choice-block{padding:17px 0;border-top:1px solid var(--hairline)}
.settings-section-head+.settings-choice-block{border-top:0;padding-top:0}
.settings-choice-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:10px}
.settings-choice-head>strong{font-size:14px}.settings-choice-head>small{font-size:11px;color:var(--text-soft)}
.settings-appearance .theme-picker{margin-bottom:0}
.settings-segment{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border:1px solid var(--hairline);border-radius:14px;background:var(--canvas)}
.settings-segment button{min-width:0;border:0;border-radius:10px;padding:10px 8px;background:transparent;color:var(--text-soft);font-size:12px;font-weight:750}
.settings-segment button.selected{background:var(--surface-raised);color:var(--brand);box-shadow:0 2px 8px #0000000d}
.bubble-style-picker,.gradient-style-picker,.background-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.visual-choice{min-width:0;display:grid;gap:8px;justify-items:center;border:1px solid var(--hairline);border-radius:15px;padding:11px 8px;background:var(--surface);color:var(--text)}
.visual-choice.selected{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 17%,transparent)}
.visual-choice>strong{font-size:11px}
.bubble-shape-demo{width:62px;height:42px;position:relative;display:block}
.bubble-shape-demo i,.bubble-shape-demo b{position:absolute;display:block;width:42px;height:18px;background:var(--received-start)}
.bubble-shape-demo i{left:0;top:2px}.bubble-shape-demo b{right:0;bottom:2px;background:var(--sent-start)}
.bubble-shape-demo.modern i{border-radius:10px 10px 10px 3px}.bubble-shape-demo.modern b{border-radius:10px 10px 3px 10px}
.bubble-shape-demo.rounded i,.bubble-shape-demo.rounded b{border-radius:13px}
.bubble-shape-demo.compact i,.bubble-shape-demo.compact b{border-radius:5px;height:15px}
.gradient-demo,.background-demo{display:block;width:100%;height:42px;border-radius:11px;border:1px solid color-mix(in srgb,var(--hairline) 76%,transparent)}
.gradient-demo.soft{background:linear-gradient(145deg,var(--sent-start),var(--sent-end))}
.gradient-demo.vivid{background:linear-gradient(135deg,var(--sent-start) 5%,var(--sent-end) 95%)}
.gradient-demo.off{background:var(--sent-start)}
.background-demo{background-color:var(--canvas)}
.background-demo.dots{background-image:radial-gradient(var(--hairline) 1px,transparent 1px);background-size:11px 11px}
.background-demo.ruled{background-image:linear-gradient(var(--hairline) 1px,transparent 1px);background-size:100% 11px}
.identity-choice-list{display:grid;gap:8px}
.identity-choice{width:100%;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:11px;border:1px solid var(--hairline);border-radius:14px;background:var(--surface);padding:12px;text-align:left;color:var(--text)}
.identity-choice.selected{border-color:var(--brand);background:color-mix(in srgb,var(--brand-soft) 72%,var(--surface))}
.identity-choice strong,.identity-choice small{display:block}.identity-choice small{margin-top:3px;color:var(--text-soft);font-size:11px}
.identity-dot{width:17px;height:17px;border:2px solid var(--hairline);border-radius:50%;position:relative}
.identity-choice.selected .identity-dot{border-color:var(--brand)}.identity-choice.selected .identity-dot:after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--brand)}
.settings-link-card{display:flex;align-items:center;justify-content:space-between;gap:18px}
.settings-link-card p{margin-top:5px}.settings-actions.compact{margin-top:0}
@media(max-width:760px){
 .settings-preview{border-radius:20px;min-height:230px}.settings-preview-chat{padding:20px 14px 22px}
 .settings-preview-message{max-width:82%}
 .settings-choice-head{align-items:flex-start;flex-direction:column;gap:3px}
 .theme-picker{grid-template-columns:1fr 1fr}
 .settings-segment button{padding:9px 5px;font-size:11px}
 .visual-choice{padding:10px 6px}.bubble-shape-demo{width:54px}
 .settings-link-card{align-items:flex-start;flex-direction:column}.settings-link-card>.btn,.settings-link-card>.settings-actions{width:100%}
 .settings-link-card .settings-actions .btn{flex:1}
}
@media(max-width:420px){
 .theme-picker{grid-template-columns:1fr}
 .bubble-style-picker,.gradient-style-picker,.background-picker{gap:6px}
 .visual-choice{padding-inline:5px}.visual-choice>strong{font-size:10px}
 .settings-segment{gap:2px}.settings-segment button{font-size:10.5px}
}


/* Stage 9.2 follow-up — sticky preview, compact palette, clearer gradients */
.settings-preview{position:sticky;top:8px;z-index:18}
.palette-select-row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center}
.palette-select-row .theme-swatch{width:52px;height:42px}
.palette-select-row select{width:100%;max-width:none}
body[data-gradient=soft] .bubble{background:linear-gradient(145deg,color-mix(in srgb,var(--received-start) 76%,var(--surface)),color-mix(in srgb,var(--received-end) 68%,var(--surface)))}
body[data-gradient=soft] .mine .bubble{background:linear-gradient(145deg,color-mix(in srgb,var(--sent-start) 82%,var(--surface)),color-mix(in srgb,var(--sent-end) 72%,var(--surface)))}
body[data-gradient=soft] .settings-preview-message.received{background:linear-gradient(145deg,color-mix(in srgb,var(--received-start) 76%,var(--surface)),color-mix(in srgb,var(--received-end) 68%,var(--surface)))}
body[data-gradient=soft] .settings-preview-message.sent{background:linear-gradient(145deg,color-mix(in srgb,var(--sent-start) 82%,var(--surface)),color-mix(in srgb,var(--sent-end) 72%,var(--surface)))}
.gradient-demo.soft{background:linear-gradient(145deg,color-mix(in srgb,var(--sent-start) 76%,var(--surface)),color-mix(in srgb,var(--sent-end) 62%,var(--surface)))}
.gradient-demo.vivid{background:linear-gradient(120deg,var(--sent-start) 0%,var(--sent-end) 100%)}
@media(max-width:760px){
 .settings-preview{top:6px;min-height:190px}
 .settings-preview-chat{padding-top:14px;padding-bottom:16px}
 .settings-preview-message{font-size:calc(var(--size) * .9)}
}


/* Stage 9.2 — contextual preview + Antara palette picker */
.settings-preview{transition:transform .22s cubic-bezier(.2,.78,.18,1),opacity .18s ease,filter .18s ease}
.settings-preview.preview-dismissed{transform:translateY(calc(-100% - 12px)) scale(.985);opacity:0;filter:blur(2px);pointer-events:none}
.antara-palette-picker{position:relative}
.palette-trigger{width:100%;display:grid;grid-template-columns:52px minmax(0,1fr) 24px;align-items:center;gap:11px;border:1px solid var(--hairline);border-radius:15px;background:var(--surface);color:var(--text);padding:10px 11px;text-align:left}
.palette-trigger:hover,.antara-palette-picker.open .palette-trigger{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 14%,transparent)}
.palette-trigger>span:nth-child(2) strong,.palette-trigger>span:nth-child(2) small{display:block}
.palette-trigger>span:nth-child(2) small{font-size:11px;color:var(--text-soft);margin-top:3px}
.palette-chevron{justify-self:end;color:var(--text-soft);font-size:18px;line-height:1;transition:transform .16s ease}
.antara-palette-picker.open .palette-chevron{transform:rotate(180deg)}
.palette-menu{position:absolute;z-index:50;top:calc(100% + 7px);left:0;right:0;display:grid;gap:5px;max-height:min(52vh,360px);overflow:auto;padding:7px;border:1px solid var(--hairline);border-radius:17px;background:color-mix(in srgb,var(--surface-raised) 96%,transparent);box-shadow:0 18px 45px #0002;backdrop-filter:blur(14px)}
.palette-menu[hidden]{display:none}
.palette-option{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;align-items:center;gap:10px;width:100%;border:0;border-radius:12px;background:transparent;color:var(--text);padding:8px;text-align:left}
.palette-option:hover{background:var(--canvas)}
.palette-option.selected{background:color-mix(in srgb,var(--brand-soft) 74%,var(--surface))}
.palette-option strong,.palette-option small{display:block}
.palette-option small{font-size:10.5px;color:var(--text-soft);margin-top:2px}
.palette-option>svg{width:17px;color:var(--brand)}
@media(max-width:760px){
 .settings-preview.preview-dismissed{transform:translateY(calc(-100% - 8px)) scale(.985)}
 .palette-menu{position:fixed;left:14px;right:14px;top:auto;bottom:calc(76px + env(safe-area-inset-bottom));max-height:46vh;border-radius:20px;padding:8px;box-shadow:0 20px 60px #0004}
}
@media(prefers-reduced-motion:reduce){
 .settings-preview{transition:none}
}

.palette-menu{scrollbar-width:none;-ms-overflow-style:none}
.palette-menu::-webkit-scrollbar{display:none;width:0;height:0}


/* Stage 9 retained chat polish — clean no-tail bubbles + unified media sizing.
   This block intentionally sits on top of the pre-Midnight-Orbit visual baseline. */

/* Keep all chat bubbles tail-free across sender/group states. */
.chat-stage .message .bubble::before,
.chat-stage .message .bubble::after,
.chat-stage .captioned-media-message .media-caption::before,
.chat-stage .captioned-media-message .media-caption::after{
 content:none!important;
 display:none!important;
}

/* Media sizing remains orientation-driven and theme-agnostic. */
.chat-stage{
 --chat-media-wide:min(72vw,420px);
 --chat-media-narrow:min(55vw,310px);
 --chat-media-tall:min(48vw,270px);
}

/* Standalone media-only bubbles. */
.chat-stage .media-message .bubble>.inline-visual.media-landscape,
.chat-stage .media-message .bubble>.inline-player.media-landscape{
 width:var(--chat-media-wide)!important;
 max-width:calc(100vw - 92px)!important;
}
.chat-stage .media-message .bubble>.inline-visual.media-portrait,
.chat-stage .media-message .bubble>.inline-player.media-portrait{
 width:var(--chat-media-narrow)!important;
 max-width:calc(100vw - 92px)!important;
}
.chat-stage .media-message .bubble>.inline-visual.media-tall,
.chat-stage .media-message .bubble>.inline-player.media-tall{
 width:var(--chat-media-tall)!important;
 max-width:calc(100vw - 108px)!important;
}

.chat-stage .media-message .bubble>.inline-visual.media-landscape img,
.chat-stage .media-message .bubble>.inline-visual.media-portrait img,
.chat-stage .media-message .bubble>.inline-visual.media-tall img,
.chat-stage .media-message .bubble>.inline-player.media-landscape video,
.chat-stage .media-message .bubble>.inline-player.media-portrait video,
.chat-stage .media-message .bubble>.inline-player.media-tall video{
 display:block!important;
 width:100%!important;
 height:auto!important;
 min-height:0!important;
 max-width:none!important;
 aspect-ratio:auto!important;
 object-fit:contain!important;
 background:transparent!important;
}
.chat-stage .media-message .bubble>.inline-player.media-portrait video,
.chat-stage .media-message .bubble>.inline-player.media-tall video{
 max-height:min(68dvh,560px)!important;
}
.chat-stage .media-message .bubble>.inline-player.media-landscape video{
 max-height:none!important;
}

/* Captioned media keeps the original Antara wrapper, but uses the same
   landscape / portrait / extreme-portrait buckets as media-only messages. */
.chat-stage .captioned-media-message .bubble{
 width:var(--chat-media-wide)!important;
 max-width:calc(100% - 46px)!important;
 box-sizing:border-box!important;
}
.chat-stage .captioned-media-message .bubble:has(.media-portrait){
 width:var(--chat-media-narrow)!important;
}
.chat-stage .captioned-media-message .bubble:has(.media-tall){
 width:var(--chat-media-tall)!important;
 max-width:calc(100% - 54px)!important;
}
.chat-stage .captioned-media-message .bubble:has(.message-media-grid){
 width:var(--chat-media-wide)!important;
}

.chat-stage .captioned-media-message .captioned-media-stack,
.chat-stage .captioned-media-message .captioned-media-stack .inline-visual,
.chat-stage .captioned-media-message .captioned-media-stack .inline-player,
.chat-stage .captioned-media-message .captioned-media-stack img,
.chat-stage .captioned-media-message .captioned-media-stack video,
.chat-stage .captioned-media-message .media-caption{
 width:100%!important;
 min-width:0!important;
 max-width:100%!important;
 box-sizing:border-box!important;
}
.chat-stage .captioned-media-message .captioned-media-stack img,
.chat-stage .captioned-media-message .captioned-media-stack video{
 display:block!important;
 height:auto!important;
 aspect-ratio:auto!important;
 object-fit:contain!important;
 background:transparent!important;
}
.chat-stage .captioned-media-message .bubble:has(.media-portrait) video,
.chat-stage .captioned-media-message .bubble:has(.media-tall) video{
 max-height:min(68dvh,560px)!important;
}
.chat-stage .captioned-media-message .bubble:not(:has(.media-portrait)) video{
 max-height:none!important;
}

/* Preserve existing multi-media grid geometry. */
.chat-stage .message-media-grid .inline-visual,
.chat-stage .message-media-grid .inline-player,
.chat-stage .message-media-grid img,
.chat-stage .message-media-grid video{
 width:100%!important;
 height:100%!important;
 max-width:none!important;
 max-height:none!important;
 object-fit:cover!important;
}

/* Extreme portrait screenshots retain their full frame with a clearer rounded silhouette. */
.chat-stage .inline-visual.media-tall,
.chat-stage .inline-player.media-tall,
.chat-stage .inline-visual.media-tall img,
.chat-stage .inline-player.media-tall video{
 border-radius:22px!important;
}
.chat-stage .captioned-media-message .bubble:has(.media-tall) .captioned-media-stack,
.chat-stage .captioned-media-message .bubble:has(.media-tall) .inline-visual,
.chat-stage .captioned-media-message .bubble:has(.media-tall) .inline-player,
.chat-stage .captioned-media-message .bubble:has(.media-tall) img,
.chat-stage .captioned-media-message .bubble:has(.media-tall) video{
 border-radius:22px 22px 0 0!important;
}


/* Stage 9 QA — Memory member scrollbar + focused jump glow */

/* Keep Memory member list scrollable while hiding native scrollbar chrome. */
.memory-members-list{
 scrollbar-width:none!important;
 -ms-overflow-style:none!important;
}
.memory-members-list::-webkit-scrollbar{
 width:0!important;
 height:0!important;
 display:none!important;
}

/* Deep-link emphasis now wraps the actual message bubble/media surface. */
.chat-stage .bubble.jump-target{
 outline:0!important;
 animation:antara-jump-glow 2.75s cubic-bezier(.22,.78,.18,1) both!important;
}
.chat-stage .message-media-grid.jump-target-grid{
 outline:0!important;
 animation:antara-jump-glow 2.75s cubic-bezier(.22,.78,.18,1) both!important;
}

@keyframes antara-jump-glow{
 0%{
  box-shadow:
   0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent),
   0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent);
  filter:brightness(1);
 }
 14%{
  box-shadow:
   0 0 0 2px color-mix(in srgb,var(--brand) 82%,transparent),
   0 0 18px 5px color-mix(in srgb,var(--brand) 28%,transparent);
  filter:brightness(1.055);
 }
 68%{
  box-shadow:
   0 0 0 2px color-mix(in srgb,var(--brand) 76%,transparent),
   0 0 16px 4px color-mix(in srgb,var(--brand) 24%,transparent);
  filter:brightness(1.04);
 }
 100%{
  box-shadow:
   0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent),
   0 0 0 0 color-mix(in srgb,var(--brand) 0%,transparent);
  filter:brightness(1);
 }
}

@media(prefers-reduced-motion:reduce){
 .chat-stage .bubble.jump-target,
 .chat-stage .message-media-grid.jump-target-grid{
  animation:none!important;
  box-shadow:
   0 0 0 2px color-mix(in srgb,var(--brand) 76%,transparent),
   0 0 14px 4px color-mix(in srgb,var(--brand) 22%,transparent)!important;
 }
}


/* Stage 9 QA — hide native scrollbar on the Pesan Memory dialog itself. */
dialog:has(.memory-members){
 scrollbar-width:none!important;
 -ms-overflow-style:none!important;
}
dialog:has(.memory-members)::-webkit-scrollbar{
 width:0!important;
 height:0!important;
 display:none!important;
}


/* Stage 9 QA — remove the collapsed utility spacer below the default header.
   Open-state layout stays unchanged; only the closed 16px band is removed. */
@media(max-width:760px){
 .collapsible-tools:not(.open){
  min-height:0!important;
  height:0!important;
 }
}


/* Stage 9 QA — enlarge the utility handle touch target without changing its visual size. */
@media(max-width:760px){
 .collapsible-tools .utility-handle::before{
  content:"";
  position:absolute;
  inset:-10px -8px;
  border-radius:16px;
 }
}


/* Stage 9 QA — seamless media clusters + restore grid video viewer hit area. */
.message-media-grid{
 gap:0!important;
}
.message-media-grid-cell .media-expand{
 display:block!important;
 z-index:2!important;
 cursor:pointer!important;
}
.message-media-grid-cell .video-open-overlay::after{
 content:none!important;
 display:none!important;
}
.message-media-grid-cell .message-media-grid-video,
.message-media-grid-cell .message-media-grid-more{
 z-index:3!important;
 pointer-events:none!important;
}


/* Stage 9 QA — eliminate subpixel seams inside media grids.
   Cells overlap by one device-independent pixel; the grid's outer clip keeps
   the cluster silhouette unchanged. */
.message-media-grid{
 gap:0!important;
 background:transparent!important;
}
.message-media-grid-cell{
 background:transparent!important;
}
.message-media-grid-2 .message-media-grid-cell:nth-child(2),
.message-media-grid-4 .message-media-grid-cell:nth-child(even),
.message-media-grid-3 .message-media-grid-cell:not(:first-child){
 margin-left:-1px!important;
}
.message-media-grid-3 .message-media-grid-cell:nth-child(3),
.message-media-grid-4 .message-media-grid-cell:nth-child(n+3){
 margin-top:-1px!important;
}
.message-media-grid-cell .inline-visual,
.message-media-grid-cell .inline-player,
.message-media-grid-cell img,
.message-media-grid-cell video{
 min-width:calc(100% + 1px)!important;
 min-height:calc(100% + 1px)!important;
}


/* Stage 9 QA — true seamless media-grid internals.
   Portrait-video rules outside grids apply rounded corners to each tile; neutralize
   every inner radius so only the outer grid owns the silhouette. Also undo the
   previous overlap experiment now that the actual source is known. */
.message-media-grid{
 gap:0!important;
 overflow:hidden!important;
 border-radius:14px!important;
}
.message-media-grid-cell{
 margin:0!important;
 background:transparent!important;
 overflow:hidden!important;
 border-radius:0!important;
}
.message-media-grid-cell .inline-visual,
.message-media-grid-cell .inline-player,
.message-media-grid-cell .inline-player.portrait-video,
.message-media-grid-cell img,
.message-media-grid-cell video{
 width:100%!important;
 height:100%!important;
 min-width:0!important;
 min-height:0!important;
 max-width:none!important;
 max-height:none!important;
 margin:0!important;
 border:0!important;
 border-radius:0!important;
 outline:0!important;
 box-shadow:none!important;
 object-fit:cover!important;
}


/* Stage 9 QA — media-grid photo orientation classes must never own inner corners.
   This outranks the retained standalone media-tall radius without affecting
   standalone portrait/tall media outside a grid. */
.chat-stage .message-media-grid-cell .inline-visual.media-landscape,
.chat-stage .message-media-grid-cell .inline-visual.media-portrait,
.chat-stage .message-media-grid-cell .inline-visual.media-tall,
.chat-stage .message-media-grid-cell .inline-visual.media-landscape img,
.chat-stage .message-media-grid-cell .inline-visual.media-portrait img,
.chat-stage .message-media-grid-cell .inline-visual.media-tall img{
 border-radius:0!important;
 overflow:hidden!important;
}


/* Stage 10.1 — Temporal Glass: conversation header
   Presentation-only port of the approved floating header experiment.
   Hard-scoped to the opt-in UI theme so Classic remains production-identical. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"][data-theme=dark] .topbar{
  position:absolute!important;
  top:calc(env(safe-area-inset-top, 0px) + 8px)!important;
  left:10px!important;
  right:10px!important;
  z-index:80!important;
  min-height:72px!important;
  margin:0!important;
  padding:9px 12px!important;
  gap:9px!important;
  border:1px solid rgba(255,255,255,.115)!important;
  border-radius:26px!important;
  background:rgba(7,12,17,.30)!important;
  box-shadow:
   0 16px 38px rgba(0,0,0,.20),
   0 3px 12px rgba(0,0,0,.10)!important;
  backdrop-filter:blur(28px) saturate(1.24)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.24)!important;
  overflow:hidden!important;
  isolation:isolate!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .topbar::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:
   radial-gradient(115% 185% at 10% -36%,rgba(255,255,255,.19),transparent 47%),
   radial-gradient(80% 115% at 92% -26%,rgba(255,255,255,.075),transparent 44%),
   linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.014) 40%,transparent 100%),
   linear-gradient(180deg,rgba(20,27,34,.34),rgba(7,11,16,.17))!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .topbar::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.15),
   inset 0 -1px 0 rgba(0,0,0,.15)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .topbar>*{
  position:relative!important;
  z-index:1!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .identity{
  gap:9px!important;
  min-width:0!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .avatar{
  width:44px!important;
  height:44px!important;
  font-size:24px!important;
  flex:0 0 44px!important;
  border:1px solid color-mix(in srgb,var(--brand) 27%,rgba(255,255,255,.12))!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.17),
   0 6px 16px rgba(0,0,0,.15)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .identity h1{
  font-size:17.5px!important;
  line-height:1.12!important;
  letter-spacing:-.35px!important;
  max-width:43vw!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .identity p{
  margin-top:3px!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  color:rgba(226,232,240,.69)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .top-actions{
  gap:1px!important;
  flex:0 0 auto!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .topbar .icon-btn{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  padding:7px!important;
  border-radius:14px!important;
  background:transparent!important;
  color:rgba(241,245,249,.91)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .topbar .icon-btn svg{
  width:22px!important;
  height:22px!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .topbar .icon-btn:active{
  background:rgba(255,255,255,.065)!important;
  transform:scale(.96);
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-viewport{
  z-index:1!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage>.chat-scroll{
  padding-top:10px!important;
  scroll-padding-top:96px!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .main{
  background:transparent!important;
 }
}


/* Stage 10.1 QA — Temporal Glass must be a UI theme, not a dark-mode-only skin.
   Light/system-light gets the same floating header geometry with adaptive glass
   material. Dark mode keeps the approved darker material above. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .topbar{
  position:absolute!important;
  top:calc(env(safe-area-inset-top, 0px) + 8px)!important;
  left:10px!important;
  right:10px!important;
  z-index:80!important;
  min-height:72px!important;
  margin:0!important;
  padding:9px 12px!important;
  gap:9px!important;
  border:1px solid rgba(255,255,255,.66)!important;
  border-radius:26px!important;
  background:rgba(248,250,252,.42)!important;
  box-shadow:
   0 16px 38px rgba(30,41,59,.12),
   0 3px 12px rgba(30,41,59,.07)!important;
  backdrop-filter:blur(28px) saturate(1.20)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.20)!important;
  overflow:hidden!important;
  isolation:isolate!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .topbar::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:
   radial-gradient(115% 185% at 10% -36%,rgba(255,255,255,.86),transparent 47%),
   radial-gradient(80% 115% at 92% -26%,rgba(255,255,255,.42),transparent 44%),
   linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08) 40%,transparent 100%),
   linear-gradient(180deg,rgba(255,255,255,.26),rgba(238,242,247,.16))!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .topbar::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.88),
   inset 0 -1px 0 rgba(100,116,139,.10)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .topbar>*{
  position:relative!important;
  z-index:1!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .identity{
  gap:9px!important;
  min-width:0!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .avatar{
  width:44px!important;
  height:44px!important;
  font-size:24px!important;
  flex:0 0 44px!important;
  border:1px solid color-mix(in srgb,var(--brand) 22%,rgba(255,255,255,.72))!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.72),
   0 6px 16px rgba(30,41,59,.10)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .identity h1{
  font-size:17.5px!important;
  line-height:1.12!important;
  letter-spacing:-.35px!important;
  max-width:43vw!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .identity p{
  margin-top:3px!important;
  font-size:11.5px!important;
  line-height:1.2!important;
  color:color-mix(in srgb,var(--text-soft) 88%,transparent)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .top-actions{
  gap:1px!important;
  flex:0 0 auto!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .topbar .icon-btn{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  padding:7px!important;
  border-radius:14px!important;
  background:transparent!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .topbar .icon-btn svg{
  width:22px!important;
  height:22px!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .topbar .icon-btn:active{
  background:rgba(255,255,255,.34)!important;
  transform:scale(.96);
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-viewport{
  z-index:1!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage>.chat-scroll{
  padding-top:10px!important;
  scroll-padding-top:96px!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .main{
  background:transparent!important;
 }
}


/* Stage 10.1 QA — direct theme hook smoke marker.
   No layout/behavior change; guarantees the header scope does not depend on pager DOM. */
body[data-ui-theme="temporal-glass"] .topbar{
 --temporal-glass-header-active:1;
}


/* Stage 10.1 QA — keep Temporal Glass conversation chrome chat-only.
   The shared topbar lives outside the persistent pager, so hide it whenever
   the active primary page is not Percakapan. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .main:not(:has(.primary-pager-page.is-active[data-primary-page="chat"])) > .topbar{
  display:none!important;
 }

 /* The utility affordance is a second floating chrome layer below the header.
    It remains presentation-only and consumes no chat-flow space. */
 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] #surface{
  position:relative!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools{
  position:absolute!important;
  top:calc(env(safe-area-inset-top, 0px) + 84px)!important;
  left:10px!important;
  right:10px!important;
  z-index:70!important;
  min-height:0!important;
  height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
  pointer-events:none!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools:not(.open) .utility-actions{
  max-height:0!important;
  opacity:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  transform:translateY(-18px)!important;
  pointer-events:none!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools .utility-handle{
  pointer-events:auto!important;
  z-index:3!important;
  left:50%!important;
  right:auto!important;
  top:-3px!important;
  bottom:auto!important;
  width:38px!important;
  height:15px!important;
  transform:translateX(-50%)!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open{
  height:0!important;
  min-height:0!important;
  pointer-events:auto!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-actions{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  max-height:72px!important;
  opacity:1!important;
  margin:8px 0 0!important;
  padding:9px 10px 10px!important;
  gap:7px!important;
  transform:none!important;
  overflow:visible!important;
  pointer-events:auto!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-handle{
  top:66px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
 }

 /* Ensure the chat viewport itself does not create a competing layer above the
    utility controls. Header stays highest, utility drawer second, chat below. */
 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .chat-stage{
  position:relative!important;
  z-index:1!important;
 }
}


/* Stage 10.2 — Temporal Glass utility drawer + chat search
   Presentation-only port of the previously approved glass chrome.
   Scoped to the active chat page and opt-in UI theme. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools .utility-actions{
  transform-origin:50% 0!important;
  transition:
   max-height .34s cubic-bezier(.22,.78,.18,1),
   opacity .22s ease,
   transform .34s cubic-bezier(.22,.78,.18,1),
   padding .34s cubic-bezier(.22,.78,.18,1),
   margin .34s cubic-bezier(.22,.78,.18,1),
   border-color .24s ease,
   box-shadow .24s ease!important;
  will-change:max-height,opacity,transform!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools:not(.open) .utility-actions{
  max-height:0!important;
  opacity:0!important;
  margin:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  transform:translateY(-16px) scaleY(.92)!important;
  border-color:transparent!important;
  box-shadow:none!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-actions{
  max-height:72px!important;
  opacity:1!important;
  margin:8px 0 0!important;
  padding-top:9px!important;
  padding-bottom:10px!important;
  transform:translateY(0) scaleY(1)!important;
  border-radius:20px!important;
  overflow:visible!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools .utility-handle{
  transition:
   top .34s cubic-bezier(.22,.78,.18,1),
   width .28s cubic-bezier(.22,.78,.18,1),
   height .28s cubic-bezier(.22,.78,.18,1),
   opacity .2s ease,
   background .24s ease,
   transform .28s cubic-bezier(.22,.78,.18,1)!important;
  backdrop-filter:blur(20px) saturate(1.16)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.16)!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools .utility-handle svg{
  width:12px!important;
  height:12px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-handle{
  width:34px!important;
  height:14px!important;
  opacity:.82!important;
 }

 /* Search replaces the utility drawer in the same second chrome layer. */
 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools{
  position:absolute!important;
  top:calc(env(safe-area-inset-top, 0px) + 92px)!important;
  left:10px!important;
  right:10px!important;
  z-index:70!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:6px!important;
  margin:0!important;
  padding:9px 10px 8px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  animation:antara-temporal-search-in .24s cubic-bezier(.22,.78,.18,1) both!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools::before,
 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-actions::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  border-radius:inherit!important;
  pointer-events:none!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-actions{
  position:relative!important;
  z-index:1!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-box{
  height:42px!important;
  padding:0 5px 0 12px!important;
  border-radius:14px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools .chat-search-nav{
  height:32px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  padding-top:1px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools .chat-search-nav .icon-btn{
  width:38px!important;
  height:30px!important;
  min-height:30px!important;
  border-radius:11px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools .chat-search-nav span{
  min-width:86px!important;
 }

 @keyframes antara-temporal-search-in{
  from{opacity:0;transform:translateY(-12px) scaleY(.94)}
  to{opacity:1;transform:translateY(0) scaleY(1)}
 }

 /* Dark material */
 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools .utility-handle{
  border:1px solid rgba(255,255,255,.11)!important;
  border-top:0!important;
  border-radius:0 0 12px 12px!important;
  color:rgba(235,240,245,.68)!important;
  background:linear-gradient(180deg,rgba(13,19,25,.42),rgba(7,11,16,.30))!important;
  box-shadow:
   inset 0 -1px 0 rgba(255,255,255,.07),
   0 5px 14px rgba(0,0,0,.14)!important;
  opacity:.76!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-actions,
 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools{
  border:1px solid rgba(255,255,255,.105)!important;
  background:rgba(7,12,17,.31)!important;
  box-shadow:
   0 14px 34px rgba(0,0,0,.18),
   inset 0 1px 0 rgba(255,255,255,.11),
   inset 0 -1px 0 rgba(0,0,0,.13)!important;
  backdrop-filter:blur(26px) saturate(1.22)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.22)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-actions::before,
 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools::before{
  background:
   radial-gradient(110% 170% at 12% -45%,rgba(255,255,255,.13),transparent 48%),
   linear-gradient(180deg,rgba(255,255,255,.035),transparent 55%)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-actions .pill{
  min-height:38px!important;
  padding:7px 9px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.035)!important;
  color:rgba(239,243,247,.84)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-box{
  border:1px solid rgba(255,255,255,.085)!important;
  background:rgba(255,255,255,.038)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-box input{
  color:rgba(244,247,249,.94)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-box input::placeholder{
  color:rgba(226,232,240,.52)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools .chat-search-nav .icon-btn,
 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-close{
  color:rgba(239,243,247,.78)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools .chat-search-nav span{
  color:rgba(226,232,240,.62)!important;
 }

 /* Light material */
 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools .utility-handle{
  border:1px solid rgba(255,255,255,.74)!important;
  border-top:0!important;
  border-radius:0 0 12px 12px!important;
  color:color-mix(in srgb,var(--text-soft) 86%,transparent)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(241,245,249,.46))!important;
  box-shadow:
   inset 0 -1px 0 rgba(100,116,139,.10),
   0 5px 14px rgba(30,41,59,.09)!important;
  opacity:.84!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-actions,
 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools{
  border:1px solid rgba(255,255,255,.72)!important;
  background:rgba(248,250,252,.50)!important;
  box-shadow:
   0 14px 34px rgba(30,41,59,.11),
   inset 0 1px 0 rgba(255,255,255,.88),
   inset 0 -1px 0 rgba(100,116,139,.09)!important;
  backdrop-filter:blur(26px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.18)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-actions::before,
 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools::before{
  background:
   radial-gradient(110% 170% at 12% -45%,rgba(255,255,255,.78),transparent 48%),
   linear-gradient(180deg,rgba(255,255,255,.26),transparent 58%)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-actions .pill{
  min-height:38px!important;
  padding:7px 9px!important;
  border:1px solid rgba(255,255,255,.66)!important;
  background:rgba(255,255,255,.32)!important;
  color:var(--text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-box{
  border:1px solid rgba(255,255,255,.68)!important;
  background:rgba(255,255,255,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.76)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-box input{
  color:var(--text)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-box input::placeholder{
  color:var(--text-soft)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools .chat-search-nav .icon-btn,
 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-close{
  color:var(--text-soft)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools .chat-search-nav span{
  color:var(--text-soft)!important;
 }
}

@media(max-width:760px) and (prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools .utility-actions,
 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools .utility-handle{
  transition:none!important;
 }
 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools{
  animation:none!important;
 }
}


/* Stage 10.2 QA — synchronize external conversation header with pager swipe.
   JS only mirrors the existing gesture transform; UX/navigation state is unchanged. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .main.temporal-chat-chrome-swipe > .topbar{
  display:flex!important;
  will-change:transform!important;
 }

 /* Light Temporal Glass needs a stronger matte edge/read than Classic white chrome. */
 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .topbar{
  border-color:rgba(148,163,184,.34)!important;
  background:rgba(236,241,245,.58)!important;
  box-shadow:
   0 18px 42px rgba(71,85,105,.16),
   0 3px 12px rgba(71,85,105,.08),
   inset 0 1px 0 rgba(255,255,255,.88)!important;
  backdrop-filter:blur(30px) saturate(1.10) contrast(1.03)!important;
  -webkit-backdrop-filter:blur(30px) saturate(1.10) contrast(1.03)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .topbar::before{
  background:
   radial-gradient(115% 185% at 10% -36%,rgba(255,255,255,.72),transparent 46%),
   radial-gradient(85% 120% at 92% -24%,rgba(255,255,255,.30),transparent 45%),
   linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.035) 42%,transparent 100%),
   linear-gradient(180deg,rgba(226,232,240,.34),rgba(203,213,225,.20))!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open .utility-actions,
 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .chat-search-tools{
  border-color:rgba(148,163,184,.30)!important;
  background:rgba(236,241,245,.60)!important;
  box-shadow:
   0 16px 36px rgba(71,85,105,.14),
   inset 0 1px 0 rgba(255,255,255,.90),
   inset 0 -1px 0 rgba(100,116,139,.10)!important;
  backdrop-filter:blur(28px) saturate(1.10) contrast(1.03)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.10) contrast(1.03)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools .utility-handle{
  border-color:rgba(148,163,184,.30)!important;
  background:linear-gradient(180deg,rgba(241,245,249,.82),rgba(226,232,240,.62))!important;
  box-shadow:
   inset 0 -1px 0 rgba(100,116,139,.11),
   0 6px 15px rgba(71,85,105,.11)!important;
 }

 /* Incoming messages in light Temporal Glass get a little more separation from
    the pale conversation canvas without changing sender semantics or geometry. */
 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .message:not(.mine):not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
  background:linear-gradient(
   145deg,
   color-mix(in srgb,var(--received-start) 88%,var(--brand-soft)),
   color-mix(in srgb,var(--received-end) 82%,var(--hairline))
  )!important;
  border-color:color-mix(in srgb,var(--brand) 14%,var(--hairline))!important;
  box-shadow:
   0 5px 14px rgba(71,85,105,.09),
   inset 0 1px 0 rgba(255,255,255,.72)!important;
 }
}


/* Stage 10.2 QA — unified palette-aware wrapped focus language.
   Persistent context focus stays visible while active; transient jump/search
   highlights above use the same brand-derived neon family and fade out. */
.message.context-selected .bubble{
 outline:0!important;
 box-shadow:
  0 0 0 2px color-mix(in srgb,var(--brand) 68%,transparent),
  0 0 15px 4px color-mix(in srgb,var(--brand) 18%,transparent)!important;
 animation:antara-palette-focus-in .24s cubic-bezier(.22,.78,.18,1) both;
}
.context-nearby-thread .context-focus .memory-reader-bubble{
 box-shadow:
  0 0 0 2px color-mix(in srgb,var(--brand) 68%,transparent),
  0 0 0 5px color-mix(in srgb,var(--brand) 12%,transparent),
  0 0 15px 4px color-mix(in srgb,var(--brand) 16%,transparent)!important;
 animation:antara-palette-focus-in .24s cubic-bezier(.22,.78,.18,1) both;
}
@keyframes antara-palette-focus-in{
 from{filter:brightness(1);opacity:.92}
 to{filter:brightness(1.04);opacity:1}
}
@media(prefers-reduced-motion:reduce){
 .message.context-selected .bubble,
 .context-nearby-thread .context-focus .memory-reader-bubble{animation:none}
}


/* Stage 10.2 QA — Memory Reader sticker sizing is independent from chat media rules. */
.memory-reader-message.sticker-only{
 width:fit-content!important;
 max-width:140px!important;
}
.memory-reader-message.sticker-only .memory-reader-standalone-media{
 width:fit-content!important;
 max-width:140px!important;
}
.memory-reader-message.sticker-only .memory-reader-standalone-media .inline-sticker{
 width:auto!important;
 max-width:140px!important;
 height:auto!important;
}
.memory-reader-message.sticker-only .memory-reader-standalone-media .inline-sticker img{
 width:auto!important;
 height:auto!important;
 max-width:140px!important;
 max-height:140px!important;
 object-fit:contain!important;
}

/* Stage 10.2 QA — media-only/captioned/sticker jumps cannot use bubble box-shadow
   because those surfaces intentionally suppress it. Give them the same palette-neon
   language through filter/drop-shadow instead. */
.chat-stage .media-message .bubble.jump-target,
.chat-stage .captioned-media-message .bubble.jump-target,
.chat-stage .sticker-message .bubble.jump-target{
 animation:antara-jump-media-glow 2.75s cubic-bezier(.22,.78,.18,1) both!important;
}
@keyframes antara-jump-media-glow{
 0%{
  filter:brightness(1) drop-shadow(0 0 0 color-mix(in srgb,var(--brand) 0%,transparent));
 }
 14%{
  filter:brightness(1.055)
   drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 88%,transparent))
   drop-shadow(0 0 10px color-mix(in srgb,var(--brand) 34%,transparent));
 }
 68%{
  filter:brightness(1.04)
   drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 76%,transparent))
   drop-shadow(0 0 8px color-mix(in srgb,var(--brand) 24%,transparent));
 }
 100%{
  filter:brightness(1) drop-shadow(0 0 0 color-mix(in srgb,var(--brand) 0%,transparent));
 }
}
@media(prefers-reduced-motion:reduce){
 .chat-stage .media-message .bubble.jump-target,
 .chat-stage .captioned-media-message .bubble.jump-target,
 .chat-stage .sticker-message .bubble.jump-target{
  animation:none!important;
  filter:
   drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 76%,transparent))
   drop-shadow(0 0 8px color-mix(in srgb,var(--brand) 22%,transparent))!important;
 }
}


/* Stage 10.3 — Temporal Glass chat surface.
   Material-only overrides: no message geometry, media sizing, grouping, tails,
   jump behavior, or bubble-shape dimensions are changed. */

/* Textual / structural bubbles receive a palette-tinted matte glass skin.
   Media-only, sticker, and captioned-media shells keep their frozen geometry. */
body[data-ui-theme="temporal-glass"] .chat-stage .message:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 border-color:color-mix(in srgb,var(--brand) 16%,var(--hairline))!important;
 box-shadow:
  inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent),
  0 4px 14px rgba(15,23,42,.07)!important;
 backdrop-filter:blur(13px) saturate(1.08)!important;
 -webkit-backdrop-filter:blur(13px) saturate(1.08)!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .message:not(.mine):not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--received-start) 72%,rgba(255,255,255,.76)),
   color-mix(in srgb,var(--received-end) 58%,rgba(232,238,242,.70))
  )!important;
 border-color:color-mix(in srgb,var(--brand) 18%,rgba(125,140,150,.24))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.76),
  inset 0 -1px 0 rgba(71,85,105,.05),
  0 5px 16px rgba(71,85,105,.10)!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .message.mine:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--sent-start) 76%,rgba(255,255,255,.20)),
   color-mix(in srgb,var(--sent-end) 68%,rgba(255,255,255,.12))
  )!important;
 border-color:color-mix(in srgb,var(--brand) 24%,rgba(255,255,255,.28))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.24),
  inset 0 -1px 0 rgba(15,23,42,.08),
  0 5px 16px color-mix(in srgb,var(--brand) 10%,rgba(71,85,105,.08))!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .message:not(.mine):not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--received-start) 72%,rgba(255,255,255,.055)),
   color-mix(in srgb,var(--received-end) 70%,rgba(5,10,14,.18))
  )!important;
 border-color:color-mix(in srgb,var(--brand) 15%,rgba(255,255,255,.10))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.075),
  inset 0 -1px 0 rgba(0,0,0,.10),
  0 5px 16px rgba(0,0,0,.11)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .message.mine:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--sent-start) 82%,rgba(255,255,255,.065)),
   color-mix(in srgb,var(--sent-end) 76%,rgba(5,10,14,.10))
  )!important;
 border-color:color-mix(in srgb,var(--brand) 20%,rgba(255,255,255,.105))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.10),
  inset 0 -1px 0 rgba(0,0,0,.12),
  0 6px 17px color-mix(in srgb,var(--brand) 8%,rgba(0,0,0,.14))!important;
}

/* Reply blocks behave like a smaller sheet embedded inside the parent glass. */
body[data-ui-theme="temporal-glass"] .chat-stage .bubble .reply{
 border-left-color:color-mix(in srgb,var(--brand) 70%,currentColor)!important;
 background:color-mix(in srgb,var(--brand) 8%,rgba(255,255,255,.08))!important;
 box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent)!important;
 backdrop-filter:blur(8px) saturate(1.05)!important;
 -webkit-backdrop-filter:blur(8px) saturate(1.05)!important;
}
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .bubble .reply{
 background:color-mix(in srgb,var(--brand) 7%,rgba(255,255,255,.42))!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .bubble .reply{
 background:color-mix(in srgb,var(--brand) 9%,rgba(255,255,255,.035))!important;
}

/* Captioned-media keeps the frozen media dimensions; only its text slab becomes glass. */
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message .media-caption{
 border-top:1px solid color-mix(in srgb,var(--brand) 12%,transparent)!important;
 backdrop-filter:blur(13px) saturate(1.08)!important;
 -webkit-backdrop-filter:blur(13px) saturate(1.08)!important;
 box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent)!important;
}
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .captioned-media-message:not(.mine) .media-caption{
 background:linear-gradient(145deg,
  color-mix(in srgb,var(--received-start) 70%,rgba(255,255,255,.78)),
  color-mix(in srgb,var(--received-end) 58%,rgba(232,238,242,.72))
 )!important;
}
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .captioned-media-message.mine .media-caption{
 background:linear-gradient(145deg,
  color-mix(in srgb,var(--sent-start) 77%,rgba(255,255,255,.18)),
  color-mix(in srgb,var(--sent-end) 69%,rgba(255,255,255,.10))
 )!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .captioned-media-message:not(.mine) .media-caption{
 background:linear-gradient(145deg,
  color-mix(in srgb,var(--received-start) 75%,rgba(255,255,255,.045)),
  color-mix(in srgb,var(--received-end) 72%,rgba(4,8,12,.16))
 )!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .captioned-media-message.mine .media-caption{
 background:linear-gradient(145deg,
  color-mix(in srgb,var(--sent-start) 82%,rgba(255,255,255,.055)),
  color-mix(in srgb,var(--sent-end) 76%,rgba(4,8,12,.10))
 )!important;
}

/* Reaction badges become small glass tokens without changing placement. */
body[data-ui-theme="temporal-glass"] .chat-stage .message-reactions .reaction,
body[data-ui-theme="temporal-glass"] .chat-stage .reaction{
 border-color:color-mix(in srgb,var(--brand) 15%,var(--hairline))!important;
 backdrop-filter:blur(10px) saturate(1.08)!important;
 -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
 box-shadow:
  inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent),
  0 3px 9px rgba(15,23,42,.08)!important;
}
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .message-reactions .reaction,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .reaction{
 background:rgba(247,250,252,.72)!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .message-reactions .reaction,
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .reaction{
 background:rgba(17,24,30,.66)!important;
}

/* Calls are structural message cards, so give them the same material language. */
body[data-ui-theme="temporal-glass"] .chat-stage .message:has(.call-event) .bubble{
 border-color:color-mix(in srgb,var(--brand) 16%,var(--hairline))!important;
 backdrop-filter:blur(13px) saturate(1.08)!important;
 -webkit-backdrop-filter:blur(13px) saturate(1.08)!important;
}
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .message:has(.call-event) .bubble{
 background:rgba(239,244,247,.72)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 5px 15px rgba(71,85,105,.09)!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .message:has(.call-event) .bubble{
 background:rgba(25,32,38,.68)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 15px rgba(0,0,0,.12)!important;
}

/* Metadata remains quiet against translucent surfaces. */
body[data-ui-theme="temporal-glass"] .chat-stage .bubble-footer{
 opacity:.72!important;
}
body[data-ui-theme="temporal-glass"] .chat-stage .message:not(.mine) .bubble-footer{
 color:color-mix(in srgb,currentColor 78%,var(--text-soft))!important;
}

@media(prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] .chat-stage .bubble,
 body[data-ui-theme="temporal-glass"] .chat-stage .reply,
 body[data-ui-theme="temporal-glass"] .chat-stage .reaction{
  transition:none!important;
 }
}


/* Stage 10.3 QA refinement — stronger translucent bubble material and exact
   caption/bubble material parity. Geometry remains untouched. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]){
 --tg-received-bg:
  linear-gradient(145deg,
   color-mix(in srgb,var(--received-start) 38%,rgba(255,255,255,.62)),
   color-mix(in srgb,var(--received-end) 30%,rgba(238,243,246,.56))
  );
 --tg-sent-bg:
  linear-gradient(145deg,
   color-mix(in srgb,var(--sent-start) 56%,rgba(255,255,255,.26)),
   color-mix(in srgb,var(--sent-end) 48%,rgba(255,255,255,.20))
  );
 --tg-received-border:color-mix(in srgb,var(--brand) 20%,rgba(112,128,140,.26));
 --tg-sent-border:color-mix(in srgb,var(--brand) 30%,rgba(255,255,255,.34));
 --tg-received-shadow:
  inset 0 1px 0 rgba(255,255,255,.88),
  inset 0 -1px 0 rgba(71,85,105,.045),
  0 6px 18px rgba(71,85,105,.105);
 --tg-sent-shadow:
  inset 0 1px 0 rgba(255,255,255,.34),
  inset 0 -1px 0 rgba(15,23,42,.07),
  0 6px 18px color-mix(in srgb,var(--brand) 11%,rgba(71,85,105,.08));
}

body[data-ui-theme="temporal-glass"][data-theme=dark]{
 --tg-received-bg:
  linear-gradient(145deg,
   color-mix(in srgb,var(--received-start) 50%,rgba(255,255,255,.035)),
   color-mix(in srgb,var(--received-end) 44%,rgba(3,8,12,.10))
  );
 --tg-sent-bg:
  linear-gradient(145deg,
   color-mix(in srgb,var(--sent-start) 62%,rgba(255,255,255,.045)),
   color-mix(in srgb,var(--sent-end) 56%,rgba(3,8,12,.08))
  );
 --tg-received-border:color-mix(in srgb,var(--brand) 18%,rgba(255,255,255,.11));
 --tg-sent-border:color-mix(in srgb,var(--brand) 24%,rgba(255,255,255,.12));
 --tg-received-shadow:
  inset 0 1px 0 rgba(255,255,255,.10),
  inset 0 -1px 0 rgba(0,0,0,.09),
  0 6px 18px rgba(0,0,0,.12);
 --tg-sent-shadow:
  inset 0 1px 0 rgba(255,255,255,.12),
  inset 0 -1px 0 rgba(0,0,0,.11),
  0 7px 19px color-mix(in srgb,var(--brand) 8%,rgba(0,0,0,.16));
}

/* Text bubbles */
body[data-ui-theme="temporal-glass"] .chat-stage .message:not(.mine):not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:var(--tg-received-bg)!important;
 border-color:var(--tg-received-border)!important;
 box-shadow:var(--tg-received-shadow)!important;
 backdrop-filter:blur(18px) saturate(1.14) contrast(1.02)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.14) contrast(1.02)!important;
}
body[data-ui-theme="temporal-glass"] .chat-stage .message.mine:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:var(--tg-sent-bg)!important;
 border-color:var(--tg-sent-border)!important;
 box-shadow:var(--tg-sent-shadow)!important;
 backdrop-filter:blur(18px) saturate(1.14) contrast(1.02)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.14) contrast(1.02)!important;
}

/* Caption slabs use the exact same sender/receiver material tokens as text bubbles. */
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message:not(.mine) .media-caption{
 background:var(--tg-received-bg)!important;
 border-top-color:var(--tg-received-border)!important;
 box-shadow:var(--tg-received-shadow)!important;
 backdrop-filter:blur(18px) saturate(1.14) contrast(1.02)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.14) contrast(1.02)!important;
}
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message.mine .media-caption{
 background:var(--tg-sent-bg)!important;
 border-top-color:var(--tg-sent-border)!important;
 box-shadow:var(--tg-sent-shadow)!important;
 backdrop-filter:blur(18px) saturate(1.14) contrast(1.02)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.14) contrast(1.02)!important;
}

/* A subtle inner glass edge makes translucency legible without changing silhouette. */
body[data-ui-theme="temporal-glass"] .chat-stage .message:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble,
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message .media-caption{
 background-clip:padding-box!important;
}


/* Stage 10.3 QA refinement 2 — make chat bubbles read as actual translucent glass,
   with palette tint as a thin veil rather than the opaque base material. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]){
 --tg-glass-received-base:rgba(255,255,255,.32);
 --tg-glass-sent-base:rgba(255,255,255,.18);
 --tg-glass-received-tint:color-mix(in srgb,var(--received-start) 24%,transparent);
 --tg-glass-sent-tint:color-mix(in srgb,var(--sent-start) 34%,transparent);
 --tg-glass-border:rgba(255,255,255,.58);
 --tg-glass-edge:rgba(255,255,255,.82);
 --tg-glass-shadow:0 8px 22px rgba(71,85,105,.12);
}
body[data-ui-theme="temporal-glass"][data-theme=dark]{
 --tg-glass-received-base:rgba(20,27,32,.24);
 --tg-glass-sent-base:rgba(26,34,38,.20);
 --tg-glass-received-tint:color-mix(in srgb,var(--received-start) 26%,transparent);
 --tg-glass-sent-tint:color-mix(in srgb,var(--sent-start) 34%,transparent);
 --tg-glass-border:rgba(255,255,255,.12);
 --tg-glass-edge:rgba(255,255,255,.16);
 --tg-glass-shadow:0 8px 22px rgba(0,0,0,.18);
}

/* Shared glass material for ordinary bubbles and caption slabs. */
body[data-ui-theme="temporal-glass"] .chat-stage .message:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble,
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message .media-caption{
 position:relative!important;
 isolation:isolate!important;
 overflow:hidden!important;
 backdrop-filter:blur(24px) saturate(1.22) contrast(1.035)!important;
 -webkit-backdrop-filter:blur(24px) saturate(1.22) contrast(1.035)!important;
 border-color:var(--tg-glass-border)!important;
 box-shadow:
  inset 0 1px 0 var(--tg-glass-edge),
  inset 0 -1px 0 color-mix(in srgb,var(--brand) 10%,transparent),
  var(--tg-glass-shadow)!important;
}

/* Receiver glass */
body[data-ui-theme="temporal-glass"] .chat-stage .message:not(.mine):not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble,
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message:not(.mine) .media-caption{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg-glass-received-base) 88%,var(--tg-glass-received-tint)),
   color-mix(in srgb,var(--tg-glass-received-base) 94%,transparent)
  )!important;
}

/* Sender glass */
body[data-ui-theme="temporal-glass"] .chat-stage .message.mine:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble,
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message.mine .media-caption{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg-glass-sent-base) 82%,var(--tg-glass-sent-tint)),
   color-mix(in srgb,var(--tg-glass-sent-base) 92%,transparent)
  )!important;
}

/* Thin specular/refraction veil. This changes only material appearance. */
body[data-ui-theme="temporal-glass"] .chat-stage .message:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble::before,
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message .media-caption::before{
 content:""!important;
 position:absolute!important;
 inset:0!important;
 z-index:-1!important;
 pointer-events:none!important;
 border-radius:inherit!important;
 background:
  radial-gradient(120% 110% at 10% -22%,
   rgba(255,255,255,.22),
   rgba(255,255,255,.06) 34%,
   transparent 58%),
  linear-gradient(180deg,
   rgba(255,255,255,.055),
   transparent 44%)!important;
}

/* Dark mode specular needs to stay subtle. */
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .message:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble::before,
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .captioned-media-message .media-caption::before{
 background:
  radial-gradient(120% 110% at 10% -22%,
   rgba(255,255,255,.12),
   rgba(255,255,255,.025) 34%,
   transparent 60%),
  linear-gradient(180deg,
   rgba(255,255,255,.028),
   transparent 48%)!important;
}


/* Stage 10.3 QA refinement 3 — neutral glass body, stronger optical edge,
   caption perimeter parity, and natural edited-message footer flow. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]){
 --tg3-received:rgba(245,248,250,.38);
 --tg3-sent:color-mix(in srgb,rgba(245,248,250,.30) 78%,var(--brand) 22%);
 --tg3-border:rgba(255,255,255,.78);
 --tg3-edge-top:rgba(255,255,255,.96);
 --tg3-edge-side:rgba(145,160,172,.20);
 --tg3-depth:0 7px 18px rgba(71,85,105,.105);
}
body[data-ui-theme="temporal-glass"][data-theme=dark]{
 --tg3-received:rgba(25,31,35,.28);
 --tg3-sent:color-mix(in srgb,rgba(25,31,35,.24) 74%,var(--brand) 26%);
 --tg3-border:rgba(255,255,255,.16);
 --tg3-edge-top:rgba(255,255,255,.22);
 --tg3-edge-side:rgba(255,255,255,.065);
 --tg3-depth:0 7px 18px rgba(0,0,0,.16);
}

/* Neutral frosted body: palette is now only a subtle sender tint. */
body[data-ui-theme="temporal-glass"] .chat-stage .message:not(.mine):not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble,
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message:not(.mine) .media-caption{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg3-received) 96%,rgba(255,255,255,.04)),
   color-mix(in srgb,var(--tg3-received) 90%,transparent)
  )!important;
}
body[data-ui-theme="temporal-glass"] .chat-stage .message.mine:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble,
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message.mine .media-caption{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg3-sent) 96%,rgba(255,255,255,.04)),
   color-mix(in srgb,var(--tg3-sent) 88%,transparent)
  )!important;
}

/* Optical glass rim. Uses shadows only, so silhouette and geometry stay frozen. */
body[data-ui-theme="temporal-glass"] .chat-stage .message:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble,
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message .media-caption{
 border-color:var(--tg3-border)!important;
 box-shadow:
  inset 0 1px 0 var(--tg3-edge-top),
  inset 1px 0 0 var(--tg3-edge-side),
  inset -1px 0 0 var(--tg3-edge-side),
  inset 0 -1px 0 color-mix(in srgb,var(--brand) 8%,var(--tg3-edge-side)),
  0 1px 0 rgba(255,255,255,.08),
  var(--tg3-depth)!important;
 backdrop-filter:blur(28px) saturate(1.16) contrast(1.045)!important;
 -webkit-backdrop-filter:blur(28px) saturate(1.16) contrast(1.045)!important;
}

/* Caption gets the same visible perimeter as an ordinary bubble.
   box-shadow creates the side/bottom outline without changing dimensions. */
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message .media-caption{
 border-top-color:var(--tg3-border)!important;
}

/* Brighter upper refraction band, closer to clear/frosted glass references. */
body[data-ui-theme="temporal-glass"] .chat-stage .message:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble::before,
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message .media-caption::before{
 background:
  linear-gradient(180deg,
   rgba(255,255,255,.20) 0,
   rgba(255,255,255,.075) 18%,
   rgba(255,255,255,.018) 44%,
   transparent 66%),
  radial-gradient(95% 75% at 18% 0%,
   rgba(255,255,255,.20),
   transparent 62%)!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .message:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble::before,
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .captioned-media-message .media-caption::before{
 background:
  linear-gradient(180deg,
   rgba(255,255,255,.095) 0,
   rgba(255,255,255,.028) 22%,
   transparent 62%),
  radial-gradient(95% 75% at 18% 0%,
   rgba(255,255,255,.085),
   transparent 64%)!important;
}

/* Edited metadata returns to natural inline flow in Temporal Glass.
   It only wraps when the content genuinely runs out of horizontal room. */
body[data-ui-theme="temporal-glass"] .chat-stage .compact-text .bubble:has(.edited-label){
 padding-bottom:7px!important;
}
body[data-ui-theme="temporal-glass"] .chat-stage .compact-text .bubble:has(.edited-label) .bubble-footer{
 position:static!important;
 display:inline-flex!important;
 right:auto!important;
 bottom:auto!important;
 margin:0 0 1px 8px!important;
 vertical-align:bottom!important;
}


/* Stage 10.3 QA refinement 4 — restore the glass optical layer that Stage 9's
   global no-tail rule keeps display:none, keep edited metadata bottom-right
   without a dedicated row, and give the chat canvas a subtle ambient field. */

/* The Stage 9 no-tail rule intentionally disables bubble pseudo-elements.
   Temporal Glass reuses ::before only as an optical material layer, never as a tail. */
body[data-ui-theme="temporal-glass"] .chat-stage .message:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble::before,
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message .media-caption::before{
 display:block!important;
}

/* Make transparency perceptible against an otherwise flat chat canvas.
   This is a fixed visual field only; it does not alter scroll/layout geometry. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .chat-scroll{
 background:
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 70%),
  radial-gradient(70% 38% at 92% 62%,rgba(150,175,195,.10),transparent 72%),
  linear-gradient(180deg,rgba(248,250,247,.90),rgba(242,247,242,.82))!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .chat-scroll{
 background:
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 72%),
  radial-gradient(70% 40% at 92% 64%,rgba(85,115,130,.075),transparent 74%),
  linear-gradient(180deg,rgba(6,13,10,.94),rgba(8,15,12,.90))!important;
}

/* Edited messages use the same absolute footer model as ordinary messages.
   Extra horizontal spacer reserves room for "diedit · 23.07" without forcing
   a permanent metadata row. */
body[data-ui-theme="temporal-glass"] .chat-stage .compact-text .bubble:has(.edited-label){
 padding-bottom:6px!important;
}
body[data-ui-theme="temporal-glass"] .chat-stage .compact-text .bubble:has(.edited-label) .bubble-footer{
 position:absolute!important;
 display:flex!important;
 right:9px!important;
 bottom:7px!important;
 margin:0!important;
 vertical-align:initial!important;
}
body[data-ui-theme="temporal-glass"] .chat-stage .compact-text .bubble:has(.edited-label) .time-spacer{
 width:88px!important;
}

/* Captioned media uses the exact same optical sheet recipe as text bubbles.
   Full inset perimeter is visual-only and does not change its frozen dimensions. */
body[data-ui-theme="temporal-glass"] .chat-stage .captioned-media-message .media-caption{
 border-top:0!important;
 outline:1px solid var(--tg3-border)!important;
 outline-offset:-1px!important;
 box-shadow:
  inset 0 1px 0 var(--tg3-edge-top),
  inset 1px 0 0 var(--tg3-edge-side),
  inset -1px 0 0 var(--tg3-edge-side),
  inset 0 -1px 0 color-mix(in srgb,var(--brand) 8%,var(--tg3-edge-side)),
  0 1px 0 rgba(255,255,255,.08),
  var(--tg3-depth)!important;
 backdrop-filter:blur(28px) saturate(1.16) contrast(1.045)!important;
 -webkit-backdrop-filter:blur(28px) saturate(1.16) contrast(1.045)!important;
}


/* Stage 10.3 post-freeze refinement — clearer outgoing glass with retained palette identity.
   Incoming material remains untouched; captioned outgoing inherits the same sender token. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]){
 --tg3-sent:color-mix(in srgb,rgba(245,248,250,.28) 90%,var(--brand) 10%);
}
body[data-ui-theme="temporal-glass"][data-theme=dark]{
 --tg3-sent:color-mix(in srgb,rgba(25,31,35,.22) 86%,var(--brand) 14%);
}


/* Stage 10.3 post-freeze dark refinement — smoked outgoing glass.
   Keep palette identity, but prevent the opaque brand color from raising the
   final alpha enough to read as a solid card. */
body[data-ui-theme="temporal-glass"][data-theme=dark]{
 --tg3-sent:color-mix(
  in srgb,
  rgba(25,31,35,.13) 84%,
  color-mix(in srgb,var(--brand) 52%,transparent) 16%
 );
}


/* Stage 10.3 light-mode outgoing text contrast.
   Use dark text on outgoing light surfaces in both Classic and Temporal Glass;
   dark mode and bubble material remain untouched. */
body[data-ui-theme="classic"]:not([data-theme=dark]) .chat-stage .message.mine:not(.sticker-message) .bubble,
body[data-ui-theme="classic"]:not([data-theme=dark]) .chat-stage .captioned-media-message.mine .media-caption,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .message.mine:not(.sticker-message) .bubble,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .captioned-media-message.mine .media-caption{
 color:var(--text)!important;
}


/* Stage 10.3 palette-aware primary button label contrast.
   Primary actions derive their foreground from the active brand luminance. */
.btn.primary{
 color:var(--brand-auto-text,#fff)!important;
}


/* Stage 10.3 QA — restore the unified wrapped neon highlight system.
   Highlight optics use filter/drop-shadow so Temporal Glass material box-shadows
   cannot mask transient jump/search glow or persistent context focus. */
.chat-stage .bubble.jump-target,
.chat-stage .message-media-grid.jump-target-grid,
.chat-stage .media-message .bubble.jump-target,
.chat-stage .captioned-media-message .bubble.jump-target,
.chat-stage .sticker-message .bubble.jump-target{
 outline:0!important;
 animation:antara-system-jump-glow 2.75s cubic-bezier(.22,.78,.18,1) both!important;
}

@keyframes antara-system-jump-glow{
 0%{
  filter:
   brightness(1)
   drop-shadow(0 0 0 color-mix(in srgb,var(--brand) 0%,transparent));
 }
 14%{
  filter:
   brightness(1.055)
   drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 92%,transparent))
   drop-shadow(0 0 11px color-mix(in srgb,var(--brand) 40%,transparent));
 }
 68%{
  filter:
   brightness(1.035)
   drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 78%,transparent))
   drop-shadow(0 0 8px color-mix(in srgb,var(--brand) 27%,transparent));
 }
 100%{
  filter:
   brightness(1)
   drop-shadow(0 0 0 color-mix(in srgb,var(--brand) 0%,transparent));
 }
}

/* Search keeps its shorter confirmation pulse; the matched word highlight
   remains independent and fades on its existing 1.8 s schedule. */
.chat-stage .message.search-jump-target .bubble{
 outline:0!important;
 animation:antara-system-search-glow 1.8s cubic-bezier(.22,.78,.18,1) both!important;
}

@keyframes antara-system-search-glow{
 0%{
  filter:
   brightness(1)
   drop-shadow(0 0 0 color-mix(in srgb,var(--brand) 0%,transparent));
 }
 14%{
  filter:
   brightness(1.055)
   drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 92%,transparent))
   drop-shadow(0 0 10px color-mix(in srgb,var(--brand) 38%,transparent));
 }
 66%{
  filter:
   brightness(1.035)
   drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 76%,transparent))
   drop-shadow(0 0 8px color-mix(in srgb,var(--brand) 25%,transparent));
 }
 100%{
  filter:
   brightness(1)
   drop-shadow(0 0 0 color-mix(in srgb,var(--brand) 0%,transparent));
 }
}

/* Long-press context focus is persistent until the context UI closes. */
.chat-stage .message.context-selected .bubble{
 outline:0!important;
 filter:
  brightness(1.04)
  drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 86%,transparent))
  drop-shadow(0 0 9px color-mix(in srgb,var(--brand) 30%,transparent))!important;
 animation:antara-system-focus-in .24s cubic-bezier(.22,.78,.18,1) both!important;
}

@keyframes antara-system-focus-in{
 from{
  filter:
   brightness(1)
   drop-shadow(0 0 0 color-mix(in srgb,var(--brand) 0%,transparent));
 }
 to{
  filter:
   brightness(1.04)
   drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 86%,transparent))
   drop-shadow(0 0 9px color-mix(in srgb,var(--brand) 30%,transparent));
 }
}

@media(prefers-reduced-motion:reduce){
 .chat-stage .bubble.jump-target,
 .chat-stage .message-media-grid.jump-target-grid,
 .chat-stage .media-message .bubble.jump-target,
 .chat-stage .captioned-media-message .bubble.jump-target,
 .chat-stage .sticker-message .bubble.jump-target,
 .chat-stage .message.search-jump-target .bubble{
  animation:none!important;
  filter:
   brightness(1.035)
   drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 78%,transparent))
   drop-shadow(0 0 8px color-mix(in srgb,var(--brand) 26%,transparent))!important;
 }
 .chat-stage .message.context-selected .bubble{
  animation:none!important;
 }
}


/* Stage 10.4 — Temporal Glass bottom navigation.
   Persistent mobile app chrome only: navigation behavior, pager gestures,
   page surfaces, and content geometry remain untouched. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .mobile-nav{
  position:absolute;
  left:10px;
  right:10px;
  bottom:max(8px,env(safe-area-inset-bottom));
  z-index:72;
  isolation:isolate;
  margin:0;
  width:auto;
  padding:6px 5px 5px;
  gap:2px;
  border:1px solid color-mix(in srgb,var(--brand) 10%,rgba(255,255,255,.54))!important;
  border-radius:26px;
  background:rgba(246,249,250,.58)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.82),
   inset 0 -1px 0 rgba(90,105,116,.06),
   0 8px 24px rgba(48,63,75,.11)!important;
  backdrop-filter:blur(28px) saturate(1.20) contrast(1.025);
  -webkit-backdrop-filter:blur(28px) saturate(1.20) contrast(1.025);
  overflow:hidden;
 }

 body[data-ui-theme="temporal-glass"] .mobile-nav::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background:
   radial-gradient(115% 185% at 10% -36%,rgba(255,255,255,.28),transparent 47%),
   radial-gradient(80% 115% at 92% -26%,rgba(255,255,255,.12),transparent 44%),
   linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.035) 40%,transparent 100%);
 }

 body[data-ui-theme="temporal-glass"] .mobile-nav .nav-button{
  min-height:52px;
  padding:5px 5px 4px;
  gap:7px;
  border-radius:15px;
  color:color-mix(in srgb,var(--text-soft) 92%,var(--text));
 }

 body[data-ui-theme="temporal-glass"] .mobile-nav .nav-button svg{
  width:20px;
  height:20px;
 }

 body[data-ui-theme="temporal-glass"] .mobile-nav .nav-button span{
  font-size:11.5px;
  font-weight:650;
  letter-spacing:-.08px;
 }

 body[data-ui-theme="temporal-glass"] .mobile-nav .nav-button::before{
  top:2px;
  width:38px;
  height:26px;
  border-radius:14px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);
  background:color-mix(in srgb,var(--brand-soft) 68%,rgba(255,255,255,.18));
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.34),
   0 3px 10px color-mix(in srgb,var(--brand) 10%,transparent);
  backdrop-filter:blur(9px) saturate(1.08);
  -webkit-backdrop-filter:blur(9px) saturate(1.08);
 }

 body[data-ui-theme="temporal-glass"] .mobile-nav .nav-button.active{
  color:var(--brand);
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .mobile-nav{
  border-color:rgba(255,255,255,.66)!important;
  background:rgba(248,250,252,.48)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.88),
   inset 0 -1px 0 rgba(100,116,139,.10),
   0 12px 30px rgba(30,41,59,.11),
   0 3px 10px rgba(30,41,59,.06)!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .mobile-nav::after{
  background:
   radial-gradient(115% 185% at 10% -36%,rgba(255,255,255,.86),transparent 47%),
   radial-gradient(80% 115% at 92% -26%,rgba(255,255,255,.42),transparent 44%),
   linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08) 40%,transparent 100%),
   linear-gradient(180deg,rgba(255,255,255,.26),rgba(238,242,247,.16));
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .mobile-nav .nav-button::before{
  border-color:color-mix(in srgb,var(--brand) 24%,rgba(120,135,145,.12));
  background:color-mix(in srgb,var(--brand-soft) 76%,rgba(255,255,255,.34));
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.74),
   0 3px 11px color-mix(in srgb,var(--brand) 12%,rgba(71,85,105,.06));
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .mobile-nav{
  border-color:rgba(255,255,255,.115)!important;
  background:rgba(7,12,17,.30)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.15),
   inset 0 -1px 0 rgba(0,0,0,.15),
   0 12px 30px rgba(0,0,0,.20),
   0 3px 10px rgba(0,0,0,.10)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .mobile-nav::after{
  background:
   radial-gradient(115% 185% at 10% -36%,rgba(255,255,255,.19),transparent 47%),
   radial-gradient(80% 115% at 92% -26%,rgba(255,255,255,.075),transparent 44%),
   linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.014) 40%,transparent 100%),
   linear-gradient(180deg,rgba(20,27,34,.34),rgba(7,11,16,.17));
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .mobile-nav .nav-button{
  color:color-mix(in srgb,var(--text-soft) 88%,var(--text));
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .mobile-nav .nav-button::before{
  border-color:color-mix(in srgb,var(--brand) 28%,rgba(255,255,255,.10));
  background:color-mix(in srgb,var(--brand-soft) 62%,rgba(255,255,255,.045));
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.13),
   0 3px 12px color-mix(in srgb,var(--brand) 14%,rgba(0,0,0,.13));
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .mobile-nav .nav-button.active{
  color:var(--brand);
 }

 /* Because the nav is true overlay chrome, page content needs scroll clearance
    rather than reserving a permanent footer row. */
 body[data-ui-theme="temporal-glass"] .primary-pager-page .content-scroll{
  padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="chat"] .chat-stage>.chat-scroll{
  padding-bottom:142px!important;
 }
}

@media(max-width:760px) and (prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] .mobile-nav,
 body[data-ui-theme="temporal-glass"] .mobile-nav .nav-button::before{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
 }
}


/* Stage 10.4 — transient floating read progress for Temporal Glass.
   Classic retains the existing footer; Temporal Glass turns it into quiet overlay chrome. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="chat"] #surface{
  position:relative;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="chat"] .read-footer{
  position:absolute;
  left:50%;
  bottom:calc(80px + max(8px,env(safe-area-inset-bottom)));
  z-index:71;
  width:min(272px,calc(100vw - 92px));
  min-height:34px;
  transform:translate(-50%,8px) scale(.98);
  margin:0;
  padding:7px 11px;
  gap:10px;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:999px;
  background:rgba(248,250,252,.44)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.84),
   inset 0 -1px 0 rgba(100,116,139,.08),
   0 7px 20px rgba(30,41,59,.10)!important;
  backdrop-filter:blur(22px) saturate(1.16);
  -webkit-backdrop-filter:blur(22px) saturate(1.16);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
   opacity .24s ease,
   transform .28s cubic-bezier(.22,.78,.18,1),
   visibility 0s linear .28s;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="chat"] .read-footer.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) scale(1);
  transition:
   opacity .2s ease,
   transform .24s cubic-bezier(.22,.78,.18,1),
   visibility 0s linear 0s;
 }

 body[data-ui-theme="temporal-glass"] .read-footer #position-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11.5px;
  font-weight:650;
  letter-spacing:-.05px;
 }

 body[data-ui-theme="temporal-glass"] .read-footer .row{
  flex:0 0 auto;
 }

 body[data-ui-theme="temporal-glass"] .read-footer .progress-timezone{
  display:none!important;
 }

 body[data-ui-theme="temporal-glass"] .read-footer .progress-track{
  width:68px;
  height:3px;
  background:color-mix(in srgb,var(--brand) 13%,var(--hairline));
 }

 body[data-ui-theme="temporal-glass"] .read-footer .progress-track i{
  background:var(--brand);
  border-radius:inherit;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="chat"] .read-footer{
  border-color:rgba(255,255,255,.11)!important;
  background:rgba(7,12,17,.34)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.13),
   inset 0 -1px 0 rgba(0,0,0,.14),
   0 8px 22px rgba(0,0,0,.20)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .read-footer .progress-track{
  background:color-mix(in srgb,var(--brand) 14%,rgba(255,255,255,.11));
 }
}

@media(max-width:760px) and (prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="chat"] .read-footer{
  transition:none!important;
 }
}


/* Stage 10.5 — Temporal Glass floating date + hourglass.
   Visual-only treatment: existing show/hide, drag, persisted position, and hold-to-open
   behavior stay untouched. Timeline panel itself is intentionally out of scope. */
body[data-ui-theme="temporal-glass"] .chat-stage .floating-chat-date{
 border:1px solid rgba(255,255,255,.58)!important;
 background:rgba(248,250,252,.44)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.84),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 7px 20px rgba(30,41,59,.10)!important;
 backdrop-filter:blur(22px) saturate(1.16)!important;
 -webkit-backdrop-filter:blur(22px) saturate(1.16)!important;
 color:var(--text)!important;
 letter-spacing:-.04px;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .floating-chat-date{
 border-color:rgba(255,255,255,.66)!important;
 background:rgba(248,250,252,.48)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .floating-chat-date{
 border-color:rgba(255,255,255,.11)!important;
 background:rgba(7,12,17,.34)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.13),
  inset 0 -1px 0 rgba(0,0,0,.14),
  0 8px 22px rgba(0,0,0,.20)!important;
 color:var(--text)!important;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-rail-handle{
 width:40px!important;
 height:40px!important;
 right:6px;
 border:1px solid rgba(255,255,255,.58)!important;
 border-radius:50%!important;
 background:rgba(248,250,252,.44)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.84),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 7px 20px rgba(30,41,59,.11)!important;
 backdrop-filter:blur(22px) saturate(1.16)!important;
 -webkit-backdrop-filter:blur(22px) saturate(1.16)!important;
 opacity:.88;
 transition:
  opacity .28s ease,
  transform .18s cubic-bezier(.22,.78,.18,1),
  box-shadow .18s ease,
  border-color .18s ease!important;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-rail-handle .hourglass{
 font-size:18px;
 line-height:1;
 filter:saturate(.68) contrast(.96);
 transform:translateY(-.5px);
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-rail-handle.idle{
 opacity:.28;
 transform:translateY(-50%) scale(.92);
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-rail.open .time-rail-handle,
body[data-ui-theme="temporal-glass"] .chat-stage .time-rail.dragging .time-rail-handle,
body[data-ui-theme="temporal-glass"] .chat-stage .time-rail-handle:active{
 opacity:1;
 transform:translateY(-50%) scale(1.055);
 border-color:color-mix(in srgb,var(--brand) 28%,rgba(255,255,255,.58))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.88),
  0 0 0 1px color-mix(in srgb,var(--brand) 12%,transparent),
  0 9px 24px color-mix(in srgb,var(--brand) 11%,rgba(30,41,59,.14))!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .time-rail-handle{
 border-color:rgba(255,255,255,.66)!important;
 background:rgba(248,250,252,.48)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .time-rail-handle{
 border-color:rgba(255,255,255,.11)!important;
 background:rgba(7,12,17,.34)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.13),
  inset 0 -1px 0 rgba(0,0,0,.14),
  0 8px 22px rgba(0,0,0,.20)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .time-rail.open .time-rail-handle,
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .time-rail.dragging .time-rail-handle,
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .time-rail-handle:active{
 border-color:color-mix(in srgb,var(--brand) 32%,rgba(255,255,255,.12))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.16),
  0 0 0 1px color-mix(in srgb,var(--brand) 13%,transparent),
  0 9px 24px color-mix(in srgb,var(--brand) 12%,rgba(0,0,0,.24))!important;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .chat-stage .floating-chat-date{
  top:10px;
  padding:6px 11px;
  font-size:11.5px;
 }

 body[data-ui-theme="temporal-glass"] .chat-stage .time-rail-handle{
  width:40px!important;
  height:40px!important;
  right:5px;
 }
}

@media(prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] .chat-stage .floating-chat-date,
 body[data-ui-theme="temporal-glass"] .chat-stage .time-rail-handle{
  transition:none!important;
 }
}


/* Stage 10.5 QA — safe floating overlay stack for Temporal Glass chat.
   Header owns the upper chrome; date sits below it. Return-position is chat-only
   and occupies its own slot above transient progress and the bottom nav. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .chat-stage .floating-chat-date{
  top:calc(env(safe-area-inset-top, 0px) + 108px)!important;
  z-index:74!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .collapsible-tools.open + .chat-stage .floating-chat-date{
  opacity:0!important;
  visibility:hidden!important;
  transform:translate(-50%,-5px)!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="chat"] #return-position{
  position:absolute;
  left:50%;
  bottom:calc(122px + max(8px,env(safe-area-inset-bottom)));
  z-index:72;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:max-content;
  max-width:min(310px,calc(100vw - 72px));
  min-height:34px;
  padding:7px 12px;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:999px;
  background:rgba(248,250,252,.44)!important;
  color:var(--text)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.84),
   inset 0 -1px 0 rgba(100,116,139,.08),
   0 7px 20px rgba(30,41,59,.10)!important;
  backdrop-filter:blur(22px) saturate(1.16)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.16)!important;
  font-size:11.5px;
  font-weight:720;
  letter-spacing:-.05px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="chat"] #return-position svg{
  width:13px;
  height:13px;
  flex:0 0 auto;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="chat"] #return-position{
  border-color:rgba(255,255,255,.66)!important;
  background:rgba(248,250,252,.48)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="chat"] #return-position{
  border-color:rgba(255,255,255,.11)!important;
  background:rgba(7,12,17,.34)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.13),
   inset 0 -1px 0 rgba(0,0,0,.14),
   0 8px 22px rgba(0,0,0,.20)!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="chat"] #return-position:active{
  transform:translateX(-50%) scale(.98);
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="chat"] .chat-stage>.chat-scroll{
  padding-bottom:178px!important;
 }
}

@media(max-width:760px) and (prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="chat"] #return-position{
  transition:none!important;
 }
}


/* Stage 10.5 — Temporal Glass timeline panel.
   Presentation-only: scrub/open/drag behavior and timeline geometry remain untouched. */
body[data-ui-theme="temporal-glass"] .chat-stage .time-panel{
 border:1px solid rgba(255,255,255,.58)!important;
 border-radius:22px!important;
 background:rgba(248,250,252,.46)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.86),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 18px 42px rgba(30,41,59,.14),
  0 4px 14px rgba(30,41,59,.07)!important;
 backdrop-filter:blur(26px) saturate(1.18)!important;
 -webkit-backdrop-filter:blur(26px) saturate(1.18)!important;
 overflow:hidden;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-panel::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:0;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(115% 185% at 10% -36%,rgba(255,255,255,.76),transparent 47%),
  radial-gradient(80% 115% at 92% -26%,rgba(255,255,255,.30),transparent 44%),
  linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.045) 42%,transparent 100%);
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-panel>*{
 position:relative;
 z-index:1;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-panel-head{
 padding:2px 4px 11px!important;
 border-bottom:1px solid color-mix(in srgb,var(--brand) 10%,var(--hairline));
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-panel-head strong{
 font-size:13px!important;
 letter-spacing:-.14px;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-panel-head small{
 margin-top:2px;
 color:color-mix(in srgb,var(--text-soft) 90%,var(--text))!important;
 line-height:1.35;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-entries{
 margin-block:12px!important;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-entry{
 border:1px solid transparent!important;
 border-radius:10px!important;
 color:var(--text)!important;
 transition:
  background .16s ease,
  border-color .16s ease,
  transform .16s ease;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-entry:hover,
body[data-ui-theme="temporal-glass"] .chat-stage .time-entry:focus-visible{
 background:color-mix(in srgb,var(--brand) 9%,rgba(255,255,255,.14))!important;
 border-color:color-mix(in srgb,var(--brand) 16%,rgba(255,255,255,.18))!important;
 outline:0!important;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-entry i{
 height:4px!important;
 min-width:8px;
 background:linear-gradient(
  90deg,
  color-mix(in srgb,var(--brand) 84%,var(--brand-strong)),
  var(--brand)
 )!important;
 opacity:.82!important;
 box-shadow:0 0 8px color-mix(in srgb,var(--brand) 16%,transparent);
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-tooltip{
 min-width:132px;
 padding:9px 11px!important;
 border:1px solid rgba(255,255,255,.58)!important;
 border-radius:13px!important;
 background:rgba(248,250,252,.54)!important;
 color:var(--text)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.82),
  0 8px 22px rgba(30,41,59,.13)!important;
 backdrop-filter:blur(20px) saturate(1.14)!important;
 -webkit-backdrop-filter:blur(20px) saturate(1.14)!important;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-tooltip span{
 color:var(--text-soft);
 opacity:1!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .time-panel{
 border-color:rgba(148,163,184,.26)!important;
 background:rgba(236,241,245,.58)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.90),
  inset 0 -1px 0 rgba(100,116,139,.09),
  0 18px 42px rgba(71,85,105,.15),
  0 4px 14px rgba(71,85,105,.08)!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .time-tooltip{
 border-color:rgba(148,163,184,.24)!important;
 background:rgba(236,241,245,.66)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .time-panel{
 border-color:rgba(255,255,255,.11)!important;
 background:rgba(7,12,17,.34)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.14),
  inset 0 -1px 0 rgba(0,0,0,.15),
  0 18px 42px rgba(0,0,0,.24),
  0 4px 14px rgba(0,0,0,.12)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .time-panel::before{
 background:
  radial-gradient(115% 185% at 10% -36%,rgba(255,255,255,.17),transparent 47%),
  radial-gradient(80% 115% at 92% -26%,rgba(255,255,255,.065),transparent 44%),
  linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 42%,transparent 100%);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .time-panel-head{
 border-bottom-color:color-mix(in srgb,var(--brand) 12%,rgba(255,255,255,.09));
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .time-entry:hover,
body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .time-entry:focus-visible{
 background:color-mix(in srgb,var(--brand) 10%,rgba(255,255,255,.025))!important;
 border-color:color-mix(in srgb,var(--brand) 18%,rgba(255,255,255,.07))!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .time-tooltip{
 border-color:rgba(255,255,255,.10)!important;
 background:rgba(7,12,17,.46)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.12),
  0 8px 22px rgba(0,0,0,.24)!important;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .chat-stage .time-panel{
  right:49px!important;
  top:8px!important;
  bottom:8px!important;
  width:min(246px,70vw)!important;
  padding:12px!important;
 }
}

@media(prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] .chat-stage .time-entry{
  transition:none!important;
 }
}


/* Stage 10.5 QA — compact timeline + restore scrub metadata tooltip.
   The previous glass layer accidentally changed .time-tooltip to position:relative,
   so its JS-driven scrub position was clipped by the panel. */
body[data-ui-theme="temporal-glass"] .chat-stage .time-panel>*:not(.time-tooltip){
 position:relative;
 z-index:1;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-tooltip{
 position:absolute!important;
 z-index:5!important;
 left:10px!important;
 right:10px!important;
 width:auto!important;
 min-width:0!important;
 max-width:none!important;
 transform:none!important;
 pointer-events:none!important;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-tooltip strong{
 display:block;
 font-size:11.5px;
 line-height:1.25;
 font-weight:780;
 letter-spacing:-.05px;
}

body[data-ui-theme="temporal-glass"] .chat-stage .time-tooltip span{
 display:block;
 margin-top:3px;
 font-size:10px;
 line-height:1.3;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .chat-stage .time-panel{
  right:49px!important;
  top:108px!important;
  bottom:112px!important;
  width:min(220px,58vw)!important;
  padding:11px!important;
  border-radius:20px!important;
 }

 body[data-ui-theme="temporal-glass"] .chat-stage .time-panel-head{
  padding:1px 3px 9px!important;
 }

 body[data-ui-theme="temporal-glass"] .chat-stage .time-panel-head strong{
  font-size:12.5px!important;
 }

 body[data-ui-theme="temporal-glass"] .chat-stage .time-panel-head small{
  font-size:8.8px!important;
 }

 body[data-ui-theme="temporal-glass"] .chat-stage .time-entries{
  margin-block:10px!important;
 }

 body[data-ui-theme="temporal-glass"] .chat-stage .time-entry{
  grid-template-columns:54px 1fr!important;
  gap:6px!important;
  height:20px!important;
  min-height:20px!important;
  padding:1px 3px!important;
  font-size:9.5px!important;
 }

 body[data-ui-theme="temporal-glass"] .chat-stage .time-entry i{
  height:3px!important;
 }

 body[data-ui-theme="temporal-glass"] .chat-stage .time-tooltip{
  left:8px!important;
  right:8px!important;
  padding:8px 9px!important;
  border-radius:12px!important;
 }
}


/* Stage 10.6 — Temporal Glass selection toolbar + message context sheet.
   Presentation-only: selection, search, long-press, actions, navigation and back behavior
   remain unchanged. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .memory-selection-bar{
  position:absolute!important;
  top:calc(env(safe-area-inset-top, 0px) + 84px)!important;
  left:10px!important;
  right:10px!important;
  z-index:76!important;
  width:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:22px!important;
  background:rgba(248,250,252,.46)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.86),
   inset 0 -1px 0 rgba(100,116,139,.08),
   0 14px 34px rgba(30,41,59,.13),
   0 3px 12px rgba(30,41,59,.06)!important;
  backdrop-filter:blur(26px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(26px) saturate(1.18)!important;
  overflow:hidden!important;
 }

 body[data-ui-theme="temporal-glass"] .memory-selection-primary{
  min-height:54px!important;
  padding:6px 8px!important;
  gap:6px!important;
  background:transparent!important;
 }

 body[data-ui-theme="temporal-glass"] .memory-selection-bar strong{
  font-size:18px!important;
 }

 body[data-ui-theme="temporal-glass"] .memory-selection-bar .selection-count span{
  font-size:11.5px!important;
 }

 body[data-ui-theme="temporal-glass"] .memory-selection-bar .icon-btn{
  border-radius:12px!important;
 }

 body[data-ui-theme="temporal-glass"] .memory-selection-bar .selection-create{
  min-height:38px!important;
  height:38px!important;
  padding:0 11px!important;
  border:1px solid color-mix(in srgb,var(--brand) 24%,rgba(255,255,255,.18))!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--brand-soft) 62%,rgba(255,255,255,.12))!important;
  color:var(--brand)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
 }

 body[data-ui-theme="temporal-glass"] .memory-selection-bar .selection-search-row{
  padding:7px 8px 8px!important;
  gap:8px!important;
  border-top:1px solid color-mix(in srgb,var(--brand) 9%,var(--hairline))!important;
  background:rgba(255,255,255,.025)!important;
 }

 body[data-ui-theme="temporal-glass"] .memory-selection-bar .chat-search-box{
  min-height:38px!important;
  height:38px!important;
  border-color:color-mix(in srgb,var(--brand) 18%,var(--hairline))!important;
  background:color-mix(in srgb,var(--surface) 70%,transparent)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
 }

 body[data-ui-theme="temporal-glass"] .memory-selection-bar .chat-search-nav{
  height:38px!important;
 }

 body[data-ui-theme="temporal-glass"] .memory-selection-bar .chat-search-nav .icon-btn{
  height:36px!important;
  width:36px!important;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page.is-active[data-primary-page="chat"] .memory-selection-bar{
  border-color:rgba(148,163,184,.28)!important;
  background:rgba(236,241,245,.60)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.90),
   inset 0 -1px 0 rgba(100,116,139,.09),
   0 14px 34px rgba(71,85,105,.15),
   0 3px 12px rgba(71,85,105,.07)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page.is-active[data-primary-page="chat"] .memory-selection-bar{
  border-color:rgba(255,255,255,.11)!important;
  background:rgba(7,12,17,.38)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.14),
   inset 0 -1px 0 rgba(0,0,0,.15),
   0 14px 34px rgba(0,0,0,.24),
   0 3px 12px rgba(0,0,0,.12)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-selection-bar .selection-create{
  border-color:color-mix(in srgb,var(--brand) 28%,rgba(255,255,255,.07))!important;
  background:color-mix(in srgb,var(--brand-soft) 52%,rgba(255,255,255,.025))!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-selection-bar .selection-search-row{
  background:rgba(255,255,255,.012)!important;
  border-top-color:color-mix(in srgb,var(--brand) 11%,rgba(255,255,255,.08))!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-selection-bar .chat-search-box{
  background:rgba(255,255,255,.035)!important;
  border-color:color-mix(in srgb,var(--brand) 18%,rgba(255,255,255,.08))!important;
 }

 /* Selection mode's floating toolbar occupies the same upper chrome zone as utility tools.
    Give selected chat content enough top scroll clearance without changing message geometry. */
 body[data-ui-theme="temporal-glass"] .primary-pager-page.is-active[data-primary-page="chat"] .selection-stage.is-selecting>.chat-scroll{
  scroll-padding-top:158px!important;
 }
}

/* Context layer remains global by design, but Temporal Glass gets a detached floating sheet. */
body[data-ui-theme="temporal-glass"] .message-context-layer{
 background:rgba(5,10,14,.24)!important;
 backdrop-filter:blur(5px) saturate(1.04)!important;
 -webkit-backdrop-filter:blur(5px) saturate(1.04)!important;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .message-context-menu{
  left:10px!important;
  right:10px!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  padding:10px!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:24px!important;
  background:rgba(248,250,252,.52)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.86),
   inset 0 -1px 0 rgba(100,116,139,.08),
   0 18px 48px rgba(15,23,42,.22)!important;
  backdrop-filter:blur(28px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.18)!important;
  overflow:hidden;
 }

 body[data-ui-theme="temporal-glass"] .message-context-preview{
  padding:8px 9px 12px!important;
  border-bottom-color:color-mix(in srgb,var(--brand) 10%,var(--hairline))!important;
 }

 body[data-ui-theme="temporal-glass"] .message-context-preview p{
  color:color-mix(in srgb,var(--text-soft) 92%,var(--text))!important;
 }

 body[data-ui-theme="temporal-glass"] .message-context-actions{
  gap:2px;
  padding-top:6px!important;
 }

 body[data-ui-theme="temporal-glass"] .message-context-actions button{
  min-height:47px!important;
  padding:7px 8px!important;
  border:1px solid transparent!important;
  border-radius:13px!important;
  color:var(--text)!important;
 }

 body[data-ui-theme="temporal-glass"] .message-context-actions button:hover,
 body[data-ui-theme="temporal-glass"] .message-context-actions button:focus-visible{
  background:color-mix(in srgb,var(--brand) 8%,rgba(255,255,255,.12))!important;
  border-color:color-mix(in srgb,var(--brand) 14%,rgba(255,255,255,.14))!important;
  outline:0!important;
 }

 body[data-ui-theme="temporal-glass"] .message-context-actions button>span{
  width:31px!important;
  height:31px!important;
  border:1px solid color-mix(in srgb,var(--brand) 14%,rgba(255,255,255,.14));
  border-radius:10px!important;
  background:color-mix(in srgb,var(--brand-soft) 58%,rgba(255,255,255,.14))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .message-context-menu{
  border-color:rgba(148,163,184,.27)!important;
  background:rgba(236,241,245,.66)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .message-context-layer{
  background:rgba(0,4,8,.38)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .message-context-menu{
  border-color:rgba(255,255,255,.11)!important;
  background:rgba(7,12,17,.48)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.13),
   inset 0 -1px 0 rgba(0,0,0,.16),
   0 18px 48px rgba(0,0,0,.34)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .message-context-preview{
  border-bottom-color:color-mix(in srgb,var(--brand) 11%,rgba(255,255,255,.08))!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .message-context-actions button:hover,
 body[data-ui-theme="temporal-glass"][data-theme=dark] .message-context-actions button:focus-visible{
  background:color-mix(in srgb,var(--brand) 9%,rgba(255,255,255,.025))!important;
  border-color:color-mix(in srgb,var(--brand) 16%,rgba(255,255,255,.06))!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .message-context-actions button>span{
  border-color:color-mix(in srgb,var(--brand) 17%,rgba(255,255,255,.06));
  background:color-mix(in srgb,var(--brand-soft) 48%,rgba(255,255,255,.025))!important;
 }
}

@media(prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] .memory-selection-bar,
 body[data-ui-theme="temporal-glass"] .message-context-menu{
  transition:none!important;
 }
}


/* Stage 10.6 QA — smooth Temporal Glass context-menu opening.
   Avoid stacking full-screen backdrop blur + sheet blur + bubble filter animation
   in the same opening frame. Keep the glass sheet, but make the backdrop cheap. */
body[data-ui-theme="temporal-glass"] .message-context-layer{
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
 will-change:opacity;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .message-context-menu{
  backdrop-filter:blur(22px) saturate(1.14)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.14)!important;
  transform:translate3d(0,10px,0) scale(.995)!important;
  opacity:.985;
  will-change:transform,opacity;
  backface-visibility:hidden;
  transition:
   transform .18s cubic-bezier(.22,.78,.18,1),
   opacity .14s ease!important;
 }

 body[data-ui-theme="temporal-glass"] .message-context-layer.open .message-context-menu{
  transform:translate3d(0,0,0) scale(1)!important;
  opacity:1;
 }

 body[data-ui-theme="temporal-glass"] .message-context-layer{
  background:rgba(5,10,14,.28)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .message-context-layer{
  background:rgba(0,4,8,.42)!important;
 }
}


/* Stage 10.6 QA2 — compositor-light optical glass for message context.
   Real-time backdrop blur caused visible opening hitches on mobile. Build the
   material from layered translucent surfaces/specular rims instead. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .message-context-menu{
  position:absolute;
  isolation:isolate;
  overflow:hidden!important;
  background:rgba(226,233,238,.82)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-color:rgba(255,255,255,.72)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.96),
   inset 0 -1px 0 rgba(90,105,116,.10),
   0 20px 52px rgba(15,23,42,.24),
   0 4px 14px rgba(15,23,42,.08)!important;
  transform:translate3d(0,7px,0) scale(.998)!important;
  opacity:0;
  transition:
   transform .16s cubic-bezier(.22,.78,.18,1),
   opacity .13s ease!important;
 }

 body[data-ui-theme="temporal-glass"] .message-context-menu::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:
   radial-gradient(120% 190% at 8% -34%,rgba(255,255,255,.88),transparent 46%),
   radial-gradient(84% 120% at 94% -20%,rgba(255,255,255,.42),transparent 45%),
   linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.06) 38%,transparent 78%),
   linear-gradient(180deg,rgba(226,232,240,.28),rgba(203,213,225,.12));
 }

 body[data-ui-theme="temporal-glass"] .message-context-menu::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:
   inset 0 0 0 1px rgba(255,255,255,.16),
   inset 0 -16px 34px rgba(148,163,184,.08);
 }

 body[data-ui-theme="temporal-glass"] .message-context-menu>*{
  position:relative;
  z-index:1;
 }

 body[data-ui-theme="temporal-glass"] .message-context-layer.open .message-context-menu{
  transform:translate3d(0,0,0) scale(1)!important;
  opacity:1;
 }

 body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .message-context-menu{
  background:rgba(230,236,241,.86)!important;
  border-color:rgba(255,255,255,.76)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .message-context-menu{
  background:rgba(15,21,26,.88)!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:
   inset 0 1px 0 rgba(255,255,255,.16),
   inset 0 -1px 0 rgba(0,0,0,.18),
   0 20px 52px rgba(0,0,0,.38),
   0 4px 14px rgba(0,0,0,.18)!important;
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .message-context-menu::before{
  background:
   radial-gradient(120% 190% at 8% -34%,rgba(255,255,255,.18),transparent 46%),
   radial-gradient(84% 120% at 94% -20%,rgba(255,255,255,.07),transparent 45%),
   linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014) 38%,transparent 78%),
   linear-gradient(180deg,rgba(30,39,47,.30),rgba(10,15,20,.14));
 }

 body[data-ui-theme="temporal-glass"][data-theme=dark] .message-context-menu::after{
  box-shadow:
   inset 0 0 0 1px rgba(255,255,255,.035),
   inset 0 -16px 34px rgba(0,0,0,.10);
 }

 /* Keep the wrapped context focus, but avoid animating a filter in the exact
    frame the sheet is entering. */
 body[data-ui-theme="temporal-glass"] .chat-stage .message.context-selected .bubble{
  animation:none!important;
  filter:
   brightness(1.04)
   drop-shadow(0 0 2px color-mix(in srgb,var(--brand) 86%,transparent))
   drop-shadow(0 0 9px color-mix(in srgb,var(--brand) 30%,transparent))!important;
 }
}


/* Stage 10.6 QA3 — immediate tactile feedback during context hold.
   This bridges the long-press recognition window so the gesture feels responsive
   instead of frozen. It clears before the persistent context neon is applied. */
.chat-stage .message.context-pressing .bubble{
 transform:scale(.992);
 filter:brightness(1.025)!important;
 transition:
  transform .10s ease,
  filter .10s ease!important;
}

@media(prefers-reduced-motion:reduce){
 .chat-stage .message.context-pressing .bubble{
  transform:none;
 }
}


/* Stage 10.6 QA4 — suppress Android native text selection inside context chrome.
   The long-press finger can land over preview metadata after the sheet appears;
   keep that transient chrome non-selectable so the system Copy/Select toolbar cannot open. */
body[data-ui-theme="temporal-glass"] .message-context-layer,
body[data-ui-theme="temporal-glass"] .message-context-layer *{
 -webkit-user-select:none!important;
 user-select:none!important;
 -webkit-touch-callout:none!important;
}


/* Stage 10.7 — Temporal Glass modal / dialog / picker chrome.
   Optical glass for large dialogs avoids expensive full-surface realtime blur.
   Custom Antara pickers may use light blur because their surface area is small. */
body[data-ui-theme="temporal-glass"] dialog{
 isolation:isolate;
 overflow:auto;
 border:1px solid rgba(255,255,255,.58)!important;
 border-radius:26px!important;
 background:rgba(226,233,238,.84)!important;
 color:var(--text)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.95),
  inset 0 -1px 0 rgba(100,116,139,.10),
  0 24px 64px rgba(15,23,42,.24),
  0 5px 16px rgba(15,23,42,.08)!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
}

body[data-ui-theme="temporal-glass"] dialog::backdrop{
 background:rgba(5,10,14,.30)!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
}

body[data-ui-theme="temporal-glass"] dialog::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:0;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(120% 185% at 8% -34%,rgba(255,255,255,.88),transparent 46%),
  radial-gradient(84% 120% at 94% -20%,rgba(255,255,255,.42),transparent 45%),
  linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.055) 38%,transparent 80%),
  linear-gradient(180deg,rgba(226,232,240,.24),rgba(203,213,225,.10));
}

body[data-ui-theme="temporal-glass"] dialog>*{
 position:relative;
 z-index:1;
}

body[data-ui-theme="temporal-glass"] .modal-head{
 position:sticky;
 top:0;
 z-index:4;
 padding:16px 18px!important;
 border-bottom:1px solid color-mix(in srgb,var(--brand) 10%,var(--hairline))!important;
 background:rgba(226,233,238,.72)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.36);
}

body[data-ui-theme="temporal-glass"] .modal-head h2{
 font-size:18px!important;
 letter-spacing:-.22px;
}

body[data-ui-theme="temporal-glass"] .modal-body{
 padding:20px!important;
 gap:17px!important;
}

body[data-ui-theme="temporal-glass"] .modal-actions{
 position:sticky;
 bottom:0;
 z-index:3;
 margin:4px -4px -4px;
 padding:10px 4px 4px;
 background:
  linear-gradient(
   180deg,
   transparent,
   rgba(226,233,238,.78) 28%,
   rgba(226,233,238,.92)
  );
}

body[data-ui-theme="temporal-glass"] dialog .field,
body[data-ui-theme="temporal-glass"] dialog input,
body[data-ui-theme="temporal-glass"] dialog textarea,
body[data-ui-theme="temporal-glass"] dialog select{
 border-color:color-mix(in srgb,var(--brand) 13%,var(--hairline))!important;
 background:rgba(255,255,255,.24)!important;
}

body[data-ui-theme="temporal-glass"] dialog .jump-option,
body[data-ui-theme="temporal-glass"] dialog .month-picker button,
body[data-ui-theme="temporal-glass"] dialog .calendar-day.has-chat{
 border-color:color-mix(in srgb,var(--brand) 12%,var(--hairline))!important;
 background:rgba(255,255,255,.16)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}

body[data-ui-theme="temporal-glass"] dialog .jump-option:hover,
body[data-ui-theme="temporal-glass"] dialog .jump-option:focus-visible,
body[data-ui-theme="temporal-glass"] dialog .month-picker button:hover,
body[data-ui-theme="temporal-glass"] dialog .month-picker button:focus-visible{
 background:color-mix(in srgb,var(--brand) 8%,rgba(255,255,255,.20))!important;
 border-color:color-mix(in srgb,var(--brand) 20%,var(--hairline))!important;
 outline:0!important;
}

body[data-ui-theme="temporal-glass"] dialog .month-picker button.active,
body[data-ui-theme="temporal-glass"] dialog .calendar-day.active,
body[data-ui-theme="temporal-glass"] dialog .memory-library-choice-menu .jump-option.active{
 border-color:color-mix(in srgb,var(--brand) 32%,transparent)!important;
 background:color-mix(in srgb,var(--brand-soft) 68%,rgba(255,255,255,.12))!important;
 color:var(--brand)!important;
}

/* Custom palette picker: small enough for a modest realtime blur. */
body[data-ui-theme="temporal-glass"] .palette-menu{
 border:1px solid rgba(255,255,255,.56)!important;
 background:rgba(226,233,238,.66)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.82),
  0 18px 46px rgba(15,23,42,.18)!important;
 backdrop-filter:blur(18px) saturate(1.14)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.14)!important;
}

body[data-ui-theme="temporal-glass"] .palette-option{
 border:1px solid transparent;
}

body[data-ui-theme="temporal-glass"] .palette-option:hover,
body[data-ui-theme="temporal-glass"] .palette-option:focus-visible{
 border-color:color-mix(in srgb,var(--brand) 14%,rgba(255,255,255,.12));
 background:color-mix(in srgb,var(--brand) 7%,rgba(255,255,255,.14))!important;
 outline:0!important;
}

body[data-ui-theme="temporal-glass"] .palette-option.selected{
 border-color:color-mix(in srgb,var(--brand) 18%,rgba(255,255,255,.14));
 background:color-mix(in srgb,var(--brand-soft) 64%,rgba(255,255,255,.12))!important;
}

/* Light material */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) dialog{
 border-color:rgba(255,255,255,.76)!important;
 background:rgba(230,236,241,.88)!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .modal-head{
 background:rgba(230,236,241,.80)!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .modal-actions{
 background:
  linear-gradient(180deg,transparent,rgba(230,236,241,.82) 28%,rgba(230,236,241,.96));
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .palette-menu{
 border-color:rgba(255,255,255,.72)!important;
 background:rgba(230,236,241,.72)!important;
}

/* Dark material */
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog{
 border-color:rgba(255,255,255,.12)!important;
 background:rgba(15,21,26,.90)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.15),
  inset 0 -1px 0 rgba(0,0,0,.18),
  0 24px 64px rgba(0,0,0,.42),
  0 5px 16px rgba(0,0,0,.20)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog::before{
 background:
  radial-gradient(120% 185% at 8% -34%,rgba(255,255,255,.18),transparent 46%),
  radial-gradient(84% 120% at 94% -20%,rgba(255,255,255,.07),transparent 45%),
  linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.013) 38%,transparent 80%),
  linear-gradient(180deg,rgba(30,39,47,.28),rgba(10,15,20,.13));
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog::backdrop{
 background:rgba(0,4,8,.44)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .modal-head{
 border-bottom-color:color-mix(in srgb,var(--brand) 11%,rgba(255,255,255,.08))!important;
 background:rgba(15,21,26,.82)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .modal-actions{
 background:
  linear-gradient(180deg,transparent,rgba(15,21,26,.84) 28%,rgba(15,21,26,.97));
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog .field,
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog input,
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog textarea,
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog select,
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog .jump-option,
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog .month-picker button,
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog .calendar-day.has-chat{
 background:rgba(255,255,255,.035)!important;
 border-color:color-mix(in srgb,var(--brand) 13%,rgba(255,255,255,.08))!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .palette-menu{
 border-color:rgba(255,255,255,.11)!important;
 background:rgba(15,21,26,.74)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.10),
  0 18px 46px rgba(0,0,0,.34)!important;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] dialog{
  width:calc(100vw - 20px)!important;
  max-height:82dvh!important;
  margin:auto auto 10px!important;
  border-radius:26px!important;
 }

 body[data-ui-theme="temporal-glass"] .modal-head{
  padding:14px 16px!important;
 }

 body[data-ui-theme="temporal-glass"] .modal-body{
  padding:18px 16px!important;
 }

 body[data-ui-theme="temporal-glass"] .palette-menu{
  left:10px!important;
  right:10px!important;
  bottom:calc(84px + env(safe-area-inset-bottom))!important;
  border-radius:22px!important;
 }
}

@media(prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] dialog,
 body[data-ui-theme="temporal-glass"] .palette-menu{
  transition:none!important;
 }
}


/* Stage 10.7 QA — unify modal header/picker with the same glass material language.
   Remove the "solid strip on glass body" effect: header stays sticky but becomes
   part of the same optical surface, with specular/rim separation instead of a fill block. */
body[data-ui-theme="temporal-glass"] .modal-head{
 background:transparent!important;
 border-bottom:0!important;
 box-shadow:none!important;
}

body[data-ui-theme="temporal-glass"] .modal-head::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 background:
  radial-gradient(120% 170% at 10% -40%,rgba(255,255,255,.30),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 58%,transparent 100%);
}

body[data-ui-theme="temporal-glass"] .modal-head::after{
 content:"";
 position:absolute;
 left:16px;
 right:16px;
 bottom:0;
 height:1px;
 pointer-events:none;
 background:linear-gradient(
  90deg,
  transparent,
  color-mix(in srgb,var(--brand) 10%,var(--hairline)) 18%,
  color-mix(in srgb,var(--brand) 12%,var(--hairline)) 82%,
  transparent
 );
 opacity:.72;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .modal-head::before{
 background:
  radial-gradient(120% 170% at 10% -40%,rgba(255,255,255,.08),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006) 58%,transparent 100%);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .modal-head::after{
 background:linear-gradient(
  90deg,
  transparent,
  color-mix(in srgb,var(--brand) 10%,rgba(255,255,255,.07)) 18%,
  color-mix(in srgb,var(--brand) 12%,rgba(255,255,255,.07)) 82%,
  transparent
 );
 opacity:.82;
}

/* Sticky actions should also feel integrated, not like a solid footer slab. */
body[data-ui-theme="temporal-glass"] .modal-actions{
 background:
  linear-gradient(
   180deg,
   transparent,
   rgba(226,233,238,.30) 26%,
   rgba(226,233,238,.58) 58%,
   rgba(226,233,238,.74)
  )!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .modal-actions{
 background:
  linear-gradient(
   180deg,
   transparent,
   rgba(230,236,241,.30) 26%,
   rgba(230,236,241,.60) 58%,
   rgba(230,236,241,.78)
  )!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .modal-actions{
 background:
  linear-gradient(
   180deg,
   transparent,
   rgba(15,21,26,.28) 26%,
   rgba(15,21,26,.58) 58%,
   rgba(15,21,26,.78)
  )!important;
}

/* Palette sheet: match the bottom-nav/header recipe more closely. */
body[data-ui-theme="temporal-glass"] .palette-menu{
 isolation:isolate;
 overflow:hidden;
 border-radius:24px!important;
 border-color:rgba(255,255,255,.62)!important;
 background:rgba(226,233,238,.62)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.88),
  inset 0 -1px 0 rgba(100,116,139,.09),
  0 18px 46px rgba(15,23,42,.18),
  0 4px 14px rgba(15,23,42,.07)!important;
 backdrop-filter:blur(20px) saturate(1.16) contrast(1.02)!important;
 -webkit-backdrop-filter:blur(20px) saturate(1.16) contrast(1.02)!important;
}

body[data-ui-theme="temporal-glass"] .palette-menu::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:0;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(118% 185% at 9% -34%,rgba(255,255,255,.64),transparent 47%),
  radial-gradient(82% 120% at 94% -22%,rgba(255,255,255,.26),transparent 44%),
  linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,transparent 100%);
}

body[data-ui-theme="temporal-glass"] .palette-menu>*{
 position:relative;
 z-index:1;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .palette-menu{
 border-color:rgba(255,255,255,.74)!important;
 background:rgba(230,236,241,.68)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .palette-menu{
 border-color:rgba(255,255,255,.12)!important;
 background:rgba(15,21,26,.68)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.12),
  inset 0 -1px 0 rgba(0,0,0,.16),
  0 18px 46px rgba(0,0,0,.34),
  0 4px 14px rgba(0,0,0,.15)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .palette-menu::before{
 background:
  radial-gradient(118% 185% at 9% -34%,rgba(255,255,255,.14),transparent 47%),
  radial-gradient(82% 120% at 94% -22%,rgba(255,255,255,.055),transparent 44%),
  linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01) 42%,transparent 100%);
}


/* Stage 10.8 — Temporal Glass: Explore + Today, Before.
   Presentation-only polish for Jelajah and its "Hari ini, dulu" subview.
   Keep Classic untouched and avoid large realtime blur surfaces for scroll performance. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .section-head,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .section-head{
 margin-bottom:22px;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .section-head h2,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .section-head h2{
 letter-spacing:-.035em;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-hero{
 isolation:isolate;
 border:1px solid rgba(255,255,255,.60)!important;
 border-radius:26px!important;
 background:
  radial-gradient(118% 190% at 9% -38%,rgba(255,255,255,.80),transparent 48%),
  radial-gradient(84% 126% at 94% -24%,rgba(255,255,255,.32),transparent 46%),
  linear-gradient(145deg,color-mix(in srgb,var(--brand) 8%,rgba(236,241,245,.78)),rgba(226,233,238,.64))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.92),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 16px 42px rgba(15,23,42,.10),
  0 3px 10px rgba(15,23,42,.05)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-hero::after{
 opacity:.075;
 filter:saturate(.75);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-section{
 margin-bottom:34px;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-title{
 margin-bottom:13px;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-title h3,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .explore-title h3{
 letter-spacing:-.025em;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] :is(
 .explore-memory-entry,
 .random-moment-card,
 .moment-cards button,
 .explore-calendar-map button,
 .insight-card,
 .insight-media,
 .rediscovery-pool,
 .first-media-grid>article
),
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] :is(
 .memory-year-group,
 .memory-year-memory,
 .result
){
 border-color:color-mix(in srgb,var(--brand) 10%,rgba(148,163,184,.26))!important;
 background:
  radial-gradient(115% 170% at 8% -42%,rgba(255,255,255,.54),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.24),rgba(226,233,238,.42))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.65),
  inset 0 -1px 0 rgba(100,116,139,.055),
  0 7px 22px rgba(15,23,42,.055)!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-memory-entry{
 padding:15px 16px!important;
 border-radius:20px!important;
 transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-memory-entry-icon{
 border:1px solid color-mix(in srgb,var(--brand) 18%,rgba(255,255,255,.48));
 background:color-mix(in srgb,var(--brand) 8%,rgba(255,255,255,.28))!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.42);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-memory-entry:active,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .moment-cards button:active,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-calendar-map button:active{
 transform:scale(.985);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .random-moment-card{
 border-radius:22px!important;
 padding:17px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .moment-cards button,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-calendar-map button,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .insight-card,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .rediscovery-pool,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .first-media-grid>article{
 border-radius:18px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-calendar-map button i,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .insight-years i{
 background:color-mix(in srgb,var(--brand) 7%,rgba(148,163,184,.24))!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-journey::before{
 background:color-mix(in srgb,var(--brand) 12%,rgba(148,163,184,.30))!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .journey-dot{
 box-shadow:0 0 0 4px color-mix(in srgb,var(--surface) 66%,transparent)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .discovery-actions button{
 border-color:color-mix(in srgb,var(--brand) 10%,rgba(148,163,184,.26))!important;
 background:rgba(255,255,255,.18)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .discovery-actions .discovery-save{
 background:color-mix(in srgb,var(--brand) 8%,rgba(255,255,255,.20))!important;
 border-color:color-mix(in srgb,var(--brand) 20%,rgba(148,163,184,.26))!important;
}

/* "Hari ini, dulu" gets the same hierarchy: a hero date surface, then softer year groups. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .memory-date{
 position:relative;
 overflow:hidden;
 isolation:isolate;
 padding:20px 21px!important;
 border:1px solid rgba(255,255,255,.60)!important;
 border-radius:24px!important;
 background:
  radial-gradient(120% 190% at 8% -42%,rgba(255,255,255,.78),transparent 48%),
  linear-gradient(145deg,color-mix(in srgb,var(--brand) 8%,rgba(236,241,245,.78)),rgba(226,233,238,.62))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.88),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 14px 36px rgba(15,23,42,.09)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .memory-date .day{
 line-height:.92;
 letter-spacing:-.055em;
 text-shadow:0 1px 0 rgba(255,255,255,.20);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .memory-date-picker-button,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .explore-title .btn{
 border-color:color-mix(in srgb,var(--brand) 12%,rgba(148,163,184,.28))!important;
 background:rgba(255,255,255,.18)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.34);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .memory-year-group{
 padding:15px!important;
 border:1px solid color-mix(in srgb,var(--brand) 9%,rgba(148,163,184,.24))!important;
 border-radius:22px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .memory-year-group+.memory-year-group{
 margin-top:16px;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .memory-year-group .explore-title{
 margin-bottom:9px;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .memory-year-memory{
 border-radius:16px!important;
 background:color-mix(in srgb,var(--brand) 6%,rgba(255,255,255,.18))!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] .explore-hero,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] .memory-date{
 border-color:rgba(255,255,255,.105)!important;
 background:
  radial-gradient(118% 190% at 9% -38%,rgba(255,255,255,.105),transparent 48%),
  radial-gradient(84% 126% at 94% -24%,rgba(255,255,255,.035),transparent 46%),
  linear-gradient(145deg,color-mix(in srgb,var(--brand) 5%,rgba(18,25,32,.58)),rgba(9,14,19,.40))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.105),
  inset 0 -1px 0 rgba(0,0,0,.14),
  0 18px 44px rgba(0,0,0,.18),
  0 3px 11px rgba(0,0,0,.09)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] :is(
 .explore-memory-entry,
 .random-moment-card,
 .moment-cards button,
 .explore-calendar-map button,
 .insight-card,
 .insight-media,
 .rediscovery-pool,
 .first-media-grid>article
),
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] :is(
 .memory-year-group,
 .memory-year-memory,
 .result
){
 border-color:color-mix(in srgb,var(--brand) 9%,rgba(255,255,255,.075))!important;
 background:
  radial-gradient(115% 170% at 8% -42%,rgba(255,255,255,.055),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.020),rgba(8,13,18,.18))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.055),
  inset 0 -1px 0 rgba(0,0,0,.10),
  0 8px 22px rgba(0,0,0,.10)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] .explore-memory-entry-icon,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] .discovery-actions button,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] .memory-date-picker-button,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] .explore-title .btn{
 border-color:color-mix(in srgb,var(--brand) 10%,rgba(255,255,255,.075))!important;
 background:rgba(255,255,255,.028)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] .memory-year-memory{
 background:color-mix(in srgb,var(--brand) 5%,rgba(255,255,255,.018))!important;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-hero{
  padding:19px!important;
  margin-bottom:26px!important;
  border-radius:23px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-section{
  margin-bottom:30px;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-memory-entry{
  padding:14px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .memory-date{
  padding:18px!important;
  border-radius:22px!important;
  margin-bottom:17px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .memory-year-group{
  padding:13px!important;
  border-radius:20px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .memory-year-group .result{
  margin-left:0;
  margin-right:0;
 }
}

@media(prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-memory-entry,
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .moment-cards button,
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-calendar-map button{
  transition:none!important;
 }
}


/* Stage 10.8 QA1 — make Explore glass unmistakable in BOTH light and dark themes.
   Add ambient depth behind the page, stronger translucent surfaces, real blur only on
   small/medium interactive glass, and restore the calendar density fill. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .content-scroll,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] .content-scroll{
 background:
  radial-gradient(80% 52% at 8% 8%,color-mix(in srgb,var(--brand) 13%,transparent),transparent 72%),
  radial-gradient(72% 46% at 94% 34%,rgba(255,255,255,.34),transparent 74%),
  radial-gradient(68% 44% at 22% 78%,color-mix(in srgb,var(--brand) 7%,transparent),transparent 76%),
  transparent!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] :is(
 .explore-hero,
 .explore-memory-entry,
 .random-moment-card,
 .moment-cards button,
 .explore-calendar-map button,
 .insight-card,
 .insight-media,
 .rediscovery-pool,
 .first-media-grid>article
),
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] :is(
 .memory-date,
 .memory-year-group,
 .memory-year-memory,
 .result
){
 position:relative;
 isolation:isolate;
 overflow:hidden;
 border-color:rgba(255,255,255,.68)!important;
 background:rgba(236,241,245,.48)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.96),
  inset 0 -1px 0 rgba(100,116,139,.10),
  0 12px 30px rgba(15,23,42,.10),
  0 2px 8px rgba(15,23,42,.05)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] :is(
 .explore-hero,
 .explore-memory-entry,
 .random-moment-card,
 .moment-cards button,
 .explore-calendar-map button,
 .insight-card,
 .insight-media,
 .rediscovery-pool,
 .first-media-grid>article
)::before,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] :is(
 .memory-date,
 .memory-year-group,
 .memory-year-memory,
 .result
)::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(120% 170% at 8% -38%,rgba(255,255,255,.82),transparent 47%),
  radial-gradient(80% 120% at 95% -18%,rgba(255,255,255,.34),transparent 46%),
  linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.045) 44%,transparent 100%);
}

/* Small and medium surfaces can afford real blur; the largest hero remains optical. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] :is(
 .explore-memory-entry,
 .moment-cards button,
 .explore-calendar-map button,
 .insight-card,
 .rediscovery-pool,
 .first-media-grid>article
),
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] :is(
 .memory-year-memory,
 .result
){
 backdrop-filter:blur(16px) saturate(1.16) contrast(1.015)!important;
 -webkit-backdrop-filter:blur(16px) saturate(1.16) contrast(1.015)!important;
}

/* Every Explore action should read as a glass control, not a plain outline pill. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] :is(
 .btn,
 .discovery-actions button,
 .explore-journey em,
 .insight-media-types span
),
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] :is(
 .btn,
 .memory-date-picker-button
){
 position:relative;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.70)!important;
 background:rgba(240,244,247,.38)!important;
 color:var(--text)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.92),
  inset 0 -1px 0 rgba(100,116,139,.10),
  0 5px 14px rgba(15,23,42,.08)!important;
 backdrop-filter:blur(16px) saturate(1.18)!important;
 -webkit-backdrop-filter:blur(16px) saturate(1.18)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] :is(
 .btn,
 .discovery-actions button,
 .explore-journey em,
 .insight-media-types span
)::before,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] :is(
 .btn,
 .memory-date-picker-button
)::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.08) 48%,transparent 100%);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .discovery-actions .discovery-save{
 color:var(--accent)!important;
 border-color:color-mix(in srgb,var(--brand) 30%,rgba(255,255,255,.66))!important;
 background:color-mix(in srgb,var(--brand) 8%,rgba(240,244,247,.36))!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] :is(
 .btn,
 .discovery-actions button,
 .moment-cards button,
 .explore-calendar-map button,
 .explore-memory-entry
):active,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="memories"] :is(
 .btn,
 .memory-year-memory
):active{
 transform:scale(.975);
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.72),
  0 3px 10px rgba(15,23,42,.07)!important;
}

/* Restore the calendar density bar that QA1 caught.
   Track stays glass-muted; fill once again follows --density. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-calendar-map button i{
 display:block!important;
 grid-column:1/-1!important;
 height:6px!important;
 margin-top:3px;
 border-radius:999px!important;
 background:
  linear-gradient(
   90deg,
   color-mix(in srgb,var(--accent) 88%,white) 0,
   var(--accent) calc(var(--density)*100%),
   color-mix(in srgb,var(--brand) 8%,rgba(148,163,184,.28)) calc(var(--density)*100%),
   color-mix(in srgb,var(--brand) 8%,rgba(148,163,184,.28)) 100%
  )!important;
 box-shadow:
  inset 0 1px 1px rgba(15,23,42,.10),
  0 1px 0 rgba(255,255,255,.55)!important;
}

/* Dark recipe: transparent enough to reveal depth, bright rim/specular enough to read as glass. */
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] .content-scroll,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] .content-scroll{
 background:
  radial-gradient(82% 52% at 8% 8%,color-mix(in srgb,var(--brand) 11%,transparent),transparent 72%),
  radial-gradient(72% 48% at 94% 34%,rgba(255,255,255,.030),transparent 74%),
  radial-gradient(68% 44% at 20% 78%,color-mix(in srgb,var(--brand) 6%,transparent),transparent 76%),
  transparent!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] :is(
 .explore-hero,
 .explore-memory-entry,
 .random-moment-card,
 .moment-cards button,
 .explore-calendar-map button,
 .insight-card,
 .insight-media,
 .rediscovery-pool,
 .first-media-grid>article
),
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] :is(
 .memory-date,
 .memory-year-group,
 .memory-year-memory,
 .result
){
 border-color:rgba(255,255,255,.145)!important;
 background:rgba(12,18,24,.43)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.14),
  inset 0 -1px 0 rgba(0,0,0,.20),
  0 14px 34px rgba(0,0,0,.20),
  0 2px 8px rgba(0,0,0,.12)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] :is(
 .explore-hero,
 .explore-memory-entry,
 .random-moment-card,
 .moment-cards button,
 .explore-calendar-map button,
 .insight-card,
 .insight-media,
 .rediscovery-pool,
 .first-media-grid>article
)::before,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] :is(
 .memory-date,
 .memory-year-group,
 .memory-year-memory,
 .result
)::before{
 background:
  radial-gradient(120% 175% at 8% -40%,rgba(255,255,255,.14),transparent 48%),
  radial-gradient(82% 120% at 95% -18%,rgba(255,255,255,.045),transparent 46%),
  linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.007) 44%,transparent 100%);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] :is(
 .btn,
 .discovery-actions button,
 .explore-journey em,
 .insight-media-types span
),
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] :is(
 .btn,
 .memory-date-picker-button
){
 border-color:rgba(255,255,255,.14)!important;
 background:rgba(255,255,255,.045)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.13),
  inset 0 -1px 0 rgba(0,0,0,.16),
  0 6px 16px rgba(0,0,0,.16)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] :is(
 .btn,
 .discovery-actions button,
 .explore-journey em,
 .insight-media-types span
)::before,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] :is(
 .btn,
 .memory-date-picker-button
)::before{
 background:
  linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.014) 48%,transparent 100%);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] .explore-calendar-map button i{
 background:
  linear-gradient(
   90deg,
   color-mix(in srgb,var(--accent) 88%,white) 0,
   var(--accent) calc(var(--density)*100%),
   rgba(255,255,255,.075) calc(var(--density)*100%),
   rgba(255,255,255,.075) 100%
  )!important;
 box-shadow:
  inset 0 1px 1px rgba(0,0,0,.28),
  0 1px 0 rgba(255,255,255,.055)!important;
}

/* Light recipe deliberately keeps visible translucency and a stronger edge so glass
   does not collapse into a plain white card on bright backgrounds. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="explore"] :is(
 .explore-hero,
 .explore-memory-entry,
 .random-moment-card,
 .moment-cards button,
 .explore-calendar-map button,
 .insight-card,
 .insight-media,
 .rediscovery-pool,
 .first-media-grid>article
),
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="memories"] :is(
 .memory-date,
 .memory-year-group,
 .memory-year-memory,
 .result
){
 border-color:rgba(255,255,255,.82)!important;
 background:rgba(238,243,247,.44)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,1),
  inset 0 -1px 0 rgba(100,116,139,.095),
  0 13px 32px rgba(30,41,59,.105),
  0 2px 8px rgba(30,41,59,.045)!important;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-calendar-map button{
  min-height:126px;
  align-content:center;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] :is(
  .btn,
  .discovery-actions button
 ){
  min-height:38px;
 }
}


/* Stage 10.8 QA2 — Light mode is a light atmosphere, not literal white.
   Keep palette identity, but give Temporal Glass enough tonal variation to read
   against the canvas. Also restore compact calendar-card proportions. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]){
 --temporal-light-canvas:
  color-mix(in srgb,var(--canvas) 82%,var(--brand-soft) 18%);
 --temporal-light-surface:
  color-mix(in srgb,var(--surface) 88%,var(--brand-soft) 12%);
 background:var(--temporal-light-canvas)!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .app-shell{
 background:
  linear-gradient(180deg,var(--temporal-light-surface),var(--temporal-light-canvas))!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .main,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-viewport,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-page-surface{
 background:
  radial-gradient(88% 62% at 10% -8%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 68%),
  radial-gradient(72% 52% at 92% 26%,rgba(255,255,255,.52),transparent 72%),
  linear-gradient(
   180deg,
   color-mix(in srgb,var(--temporal-light-canvas) 92%,white 8%),
   var(--temporal-light-canvas)
  )!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="explore"] .content-scroll,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="memories"] .content-scroll{
 background:
  radial-gradient(74% 44% at 9% 4%,color-mix(in srgb,var(--brand) 11%,transparent),transparent 72%),
  radial-gradient(66% 40% at 94% 30%,rgba(255,255,255,.46),transparent 72%),
  radial-gradient(70% 44% at 18% 82%,color-mix(in srgb,var(--brand) 6%,transparent),transparent 74%),
  linear-gradient(
   180deg,
   color-mix(in srgb,var(--temporal-light-canvas) 94%,white 6%),
   var(--temporal-light-canvas)
  )!important;
}

/* Keep glass surfaces visibly separated from the now-tinted canvas. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="explore"] :is(
 .explore-hero,
 .explore-memory-entry,
 .random-moment-card,
 .moment-cards button,
 .explore-calendar-map button,
 .insight-card,
 .insight-media,
 .rediscovery-pool,
 .first-media-grid>article
),
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="memories"] :is(
 .memory-date,
 .memory-year-group,
 .memory-year-memory,
 .result
){
 background:rgba(255,255,255,.36)!important;
 border-color:rgba(255,255,255,.86)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,1),
  inset 0 -1px 0 rgba(100,116,139,.09),
  0 13px 32px rgba(30,41,59,.10),
  0 2px 8px rgba(30,41,59,.045)!important;
}

/* QA1 made month cards too tall. Return them to compact information-card scale. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="explore"] .explore-calendar-map button{
  min-height:0!important;
  align-content:initial!important;
  padding:12px 10px!important;
 }
}


/* Stage 10.8 QA3 — stronger palette atmosphere for Temporal Glass light mode.
   Make the active palette visibly present in the canvas so translucent glass reads
   against a colored environment instead of an almost-white sheet. Classic remains untouched. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]){
 --temporal-light-canvas:
  color-mix(in srgb,var(--canvas) 68%,var(--brand-soft) 32%);
 --temporal-light-surface:
  color-mix(in srgb,var(--surface) 76%,var(--brand-soft) 24%);
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .main,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-viewport,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-page-surface{
 background:
  radial-gradient(90% 64% at 8% -10%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 66%),
  radial-gradient(70% 54% at 94% 24%,color-mix(in srgb,var(--brand-soft) 54%,white 46%),transparent 72%),
  radial-gradient(72% 50% at 18% 88%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 75%),
  linear-gradient(
   180deg,
   color-mix(in srgb,var(--temporal-light-canvas) 90%,white 10%),
   var(--temporal-light-canvas)
  )!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="explore"] .content-scroll,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="memories"] .content-scroll{
 background:
  radial-gradient(78% 48% at 8% 2%,color-mix(in srgb,var(--brand) 15%,transparent),transparent 70%),
  radial-gradient(68% 44% at 95% 28%,color-mix(in srgb,var(--brand-soft) 60%,white 40%),transparent 72%),
  radial-gradient(74% 46% at 18% 84%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 74%),
  linear-gradient(
   180deg,
   color-mix(in srgb,var(--temporal-light-canvas) 91%,white 9%),
   var(--temporal-light-canvas)
  )!important;
}

/* Let light glass stay translucent enough to reveal the stronger palette wash. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="explore"] :is(
 .explore-hero,
 .explore-memory-entry,
 .random-moment-card,
 .moment-cards button,
 .explore-calendar-map button,
 .insight-card,
 .insight-media,
 .rediscovery-pool,
 .first-media-grid>article
),
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="memories"] :is(
 .memory-date,
 .memory-year-group,
 .memory-year-memory,
 .result
){
 background:rgba(255,255,255,.30)!important;
}


/* Stage 10.8 — Temporal Glass: Search.
   Presentation-only. Search logic, filtering, result ordering, jump behavior and
   persisted tab state remain unchanged. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .section-head{
 margin-bottom:22px;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .section-head h2{
 letter-spacing:-.035em;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filters{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 gap:14px!important;
 padding:19px!important;
 border:1px solid rgba(255,255,255,.68)!important;
 border-radius:24px!important;
 background:rgba(236,241,245,.46)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.96),
  inset 0 -1px 0 rgba(100,116,139,.09),
  0 14px 36px rgba(15,23,42,.10),
  0 3px 10px rgba(15,23,42,.045)!important;
 backdrop-filter:blur(18px) saturate(1.16)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.16)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filters::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(118% 170% at 8% -38%,rgba(255,255,255,.82),transparent 47%),
  radial-gradient(82% 122% at 95% -20%,rgba(255,255,255,.30),transparent 46%),
  linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.035) 46%,transparent 100%);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filter-group,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-query-field{
 min-width:0;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filters .label{
 margin-bottom:7px;
 color:var(--text-soft);
 font-size:12px;
 font-weight:750;
 letter-spacing:.01em;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .searchbox{
 position:relative;
 border-radius:16px;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .searchbox>svg{
 z-index:2;
 color:color-mix(in srgb,var(--brand) 62%,var(--text-soft));
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] :is(
 #search-q,
 .search-filter-button
){
 border:1px solid rgba(255,255,255,.66)!important;
 border-radius:16px!important;
 background:rgba(255,255,255,.25)!important;
 color:var(--text)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.76),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 5px 15px rgba(15,23,42,.055)!important;
 backdrop-filter:blur(14px) saturate(1.14)!important;
 -webkit-backdrop-filter:blur(14px) saturate(1.14)!important;
 transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .12s ease;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] #search-q{
 padding-left:44px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filter-button{
 width:100%;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 text-align:left;
 cursor:pointer;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filter-button svg{
 width:17px;
 height:17px;
 color:var(--text-soft);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] :is(
 #search-q:focus,
 .search-filter-button:hover,
 .search-filter-button:focus-visible
){
 border-color:color-mix(in srgb,var(--brand) 34%,rgba(255,255,255,.64))!important;
 background:color-mix(in srgb,var(--brand) 4%,rgba(255,255,255,.29))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.86),
  0 0 0 3px color-mix(in srgb,var(--brand) 8%,transparent),
  0 7px 18px rgba(15,23,42,.07)!important;
 outline:0!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filter-button:active{
 transform:scale(.988);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .results-count{
 margin:21px 3px 11px;
 font-size:12px;
 font-weight:700;
 letter-spacing:.01em;
 color:var(--text-soft);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .result{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 margin-bottom:10px;
 padding:16px 17px!important;
 border:1px solid rgba(255,255,255,.66)!important;
 border-radius:18px!important;
 background:rgba(236,241,245,.40)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.83),
  inset 0 -1px 0 rgba(100,116,139,.075),
  0 8px 23px rgba(15,23,42,.065)!important;
 backdrop-filter:blur(15px) saturate(1.13)!important;
 -webkit-backdrop-filter:blur(15px) saturate(1.13)!important;
 transition:transform .14s ease,border-color .16s ease,box-shadow .16s ease;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .result::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(112% 165% at 7% -38%,rgba(255,255,255,.62),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.018) 48%,transparent);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .result:hover,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .result:focus-visible{
 border-color:color-mix(in srgb,var(--brand) 26%,rgba(255,255,255,.62))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.88),
  0 0 0 3px color-mix(in srgb,var(--brand) 6%,transparent),
  0 10px 28px rgba(15,23,42,.085)!important;
 outline:0!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .result:active{
 transform:scale(.992);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .result-head{
 margin-bottom:7px;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .result mark{
 border-radius:5px;
 padding:0 2px;
 background:color-mix(in srgb,var(--brand) 20%,#ffe7a8)!important;
 color:inherit!important;
 box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 12%,transparent);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] #search-results>.empty-state{
 margin-top:18px;
 padding:50px 20px;
 border:1px solid color-mix(in srgb,var(--brand) 8%,rgba(255,255,255,.48));
 border-radius:22px;
 background:rgba(236,241,245,.22);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.50);
 backdrop-filter:blur(10px) saturate(1.10);
 -webkit-backdrop-filter:blur(10px) saturate(1.10);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] #search-results>.btn.full{
 margin-top:8px;
 border:1px solid rgba(255,255,255,.68)!important;
 background:rgba(255,255,255,.24)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.80),
  0 6px 18px rgba(15,23,42,.065)!important;
 backdrop-filter:blur(15px) saturate(1.15)!important;
 -webkit-backdrop-filter:blur(15px) saturate(1.15)!important;
}

/* Dark Search glass. */
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] .search-filters{
 border-color:rgba(255,255,255,.14)!important;
 background:rgba(12,18,24,.46)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.14),
  inset 0 -1px 0 rgba(0,0,0,.18),
  0 16px 38px rgba(0,0,0,.20)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] .search-filters::before{
 background:
  radial-gradient(118% 170% at 8% -38%,rgba(255,255,255,.13),transparent 47%),
  radial-gradient(82% 122% at 95% -20%,rgba(255,255,255,.038),transparent 46%),
  linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.006) 46%,transparent 100%);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] :is(
 #search-q,
 .search-filter-button
){
 border-color:rgba(255,255,255,.125)!important;
 background:rgba(255,255,255,.038)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.095),
  inset 0 -1px 0 rgba(0,0,0,.16),
  0 6px 16px rgba(0,0,0,.13)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] :is(
 #search-q:focus,
 .search-filter-button:hover,
 .search-filter-button:focus-visible
){
 border-color:color-mix(in srgb,var(--brand) 28%,rgba(255,255,255,.11))!important;
 background:color-mix(in srgb,var(--brand) 5%,rgba(255,255,255,.045))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.11),
  0 0 0 3px color-mix(in srgb,var(--brand) 9%,transparent),
  0 7px 18px rgba(0,0,0,.16)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] .result{
 border-color:rgba(255,255,255,.115)!important;
 background:rgba(12,18,24,.40)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.085),
  inset 0 -1px 0 rgba(0,0,0,.16),
  0 9px 24px rgba(0,0,0,.14)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] .result::before{
 background:
  radial-gradient(112% 165% at 7% -38%,rgba(255,255,255,.075),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.020),rgba(255,255,255,.004) 48%,transparent);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] #search-results>.empty-state{
 border-color:rgba(255,255,255,.075);
 background:rgba(255,255,255,.018);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] #search-results>.btn.full{
 border-color:rgba(255,255,255,.13)!important;
 background:rgba(255,255,255,.038)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.10),
  0 6px 18px rgba(0,0,0,.14)!important;
}

/* Light Search: keep palette atmosphere visible through the glass. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="search"] .search-filters{
 background:rgba(255,255,255,.31)!important;
 border-color:rgba(255,255,255,.84)!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="search"] .result{
 background:rgba(255,255,255,.28)!important;
 border-color:rgba(255,255,255,.82)!important;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filters{
  padding:15px!important;
  gap:12px!important;
  border-radius:22px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .filters{
  grid-template-columns:1fr 1fr;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .result{
  padding:14px 15px!important;
  border-radius:17px!important;
 }
}

@media(max-width:390px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .filters{
  grid-template-columns:1fr;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .filters .wide{
  grid-column:1;
 }
}

@media(prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] :is(
  .result,
  .search-filter-button
 ){
  transition:none!important;
 }
}


/* Stage 10.8 Search QA1 — stronger, unmistakable glass in both themes.
   Search surfaces get clearer specular separation and more visible translucency. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filters,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .result,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] #search-results>.empty-state{
 overflow:hidden;
 isolation:isolate;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filters{
 background:rgba(255,255,255,.20)!important;
 border-color:rgba(255,255,255,.82)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,1),
  inset 0 -1px 0 rgba(100,116,139,.10),
  0 18px 46px rgba(15,23,42,.12),
  0 4px 14px rgba(15,23,42,.055)!important;
 backdrop-filter:blur(24px) saturate(1.24) contrast(1.02)!important;
 -webkit-backdrop-filter:blur(24px) saturate(1.24) contrast(1.02)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filters::after{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.12),
  inset 0 14px 26px rgba(255,255,255,.06);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] :is(
 #search-q,
 .search-filter-button,
 #search-results>.btn.full
){
 border-color:rgba(255,255,255,.80)!important;
 background:rgba(255,255,255,.18)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.98),
  inset 0 -1px 0 rgba(100,116,139,.10),
  0 7px 18px rgba(15,23,42,.075)!important;
 backdrop-filter:blur(20px) saturate(1.22)!important;
 -webkit-backdrop-filter:blur(20px) saturate(1.22)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .result{
 background:rgba(255,255,255,.17)!important;
 border-color:rgba(255,255,255,.76)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.96),
  inset 0 -1px 0 rgba(100,116,139,.085),
  0 12px 30px rgba(15,23,42,.085)!important;
 backdrop-filter:blur(20px) saturate(1.20)!important;
 -webkit-backdrop-filter:blur(20px) saturate(1.20)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .result::before{
 background:
  radial-gradient(116% 175% at 6% -40%,rgba(255,255,255,.82),transparent 47%),
  radial-gradient(76% 112% at 96% -18%,rgba(255,255,255,.25),transparent 44%),
  linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.025) 46%,transparent 100%);
}

/* Search calendar uses the same custom archive calendar, never the native OS date picker. */
body[data-ui-theme="temporal-glass"] .search-calendar{
 display:grid;
 gap:14px;
}

body[data-ui-theme="temporal-glass"] .search-calendar .calendar-nav{
 padding:2px 0 4px;
}

body[data-ui-theme="temporal-glass"] .search-calendar .calendar-grid{
 gap:6px;
}

body[data-ui-theme="temporal-glass"] .search-calendar .calendar-day{
 border:1px solid color-mix(in srgb,var(--brand) 9%,rgba(255,255,255,.44));
 background:rgba(255,255,255,.12);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
 backdrop-filter:blur(10px) saturate(1.12);
 -webkit-backdrop-filter:blur(10px) saturate(1.12);
}

body[data-ui-theme="temporal-glass"] .search-calendar .calendar-day.has-chat{
 border-color:color-mix(in srgb,var(--brand) 16%,rgba(255,255,255,.52));
 background:color-mix(in srgb,var(--brand) 4%,rgba(255,255,255,.15));
}

body[data-ui-theme="temporal-glass"] .search-calendar .calendar-day.active{
 border-color:color-mix(in srgb,var(--brand) 42%,rgba(255,255,255,.66))!important;
 background:color-mix(in srgb,var(--brand) 16%,rgba(255,255,255,.22))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.35),
  0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)!important;
}

body[data-ui-theme="temporal-glass"] .search-calendar-actions{
 margin-top:0!important;
 padding-top:2px!important;
}

/* Dark-specific contrast boost. */
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] .search-filters{
 background:rgba(7,12,17,.28)!important;
 border-color:rgba(255,255,255,.165)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.18),
  inset 0 -1px 0 rgba(0,0,0,.20),
  0 20px 50px rgba(0,0,0,.24),
  0 4px 14px rgba(0,0,0,.14)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] :is(
 #search-q,
 .search-filter-button,
 #search-results>.btn.full
){
 border-color:rgba(255,255,255,.15)!important;
 background:rgba(255,255,255,.040)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.13),
  inset 0 -1px 0 rgba(0,0,0,.18),
  0 7px 18px rgba(0,0,0,.18)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] .result{
 background:rgba(8,13,18,.30)!important;
 border-color:rgba(255,255,255,.135)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.12),
  inset 0 -1px 0 rgba(0,0,0,.19),
  0 12px 30px rgba(0,0,0,.18)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .search-calendar .calendar-day{
 border-color:rgba(255,255,255,.09);
 background:rgba(255,255,255,.025);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .search-calendar .calendar-day.has-chat{
 border-color:color-mix(in srgb,var(--brand) 16%,rgba(255,255,255,.08));
 background:color-mix(in srgb,var(--brand) 4%,rgba(255,255,255,.03));
}


/* Stage 10.8 Search QA2 — compact custom calendar + restore two-column date filters. */
body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar){
 width:min(390px,calc(100vw - 34px))!important;
 max-height:min(72dvh,610px)!important;
 margin:auto!important;
 border-radius:24px!important;
 overflow:hidden!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .modal-head{
 position:sticky;
 top:0;
 z-index:5;
 padding:13px 15px!important;
 background:rgba(226,233,238,.42)!important;
 border-bottom:1px solid rgba(255,255,255,.46)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.78),
  0 7px 18px rgba(15,23,42,.055)!important;
 backdrop-filter:blur(18px) saturate(1.18)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .modal-head::before{
 background:
  radial-gradient(115% 165% at 8% -38%,rgba(255,255,255,.48),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.025) 60%,transparent)!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .modal-head::after{
 left:12px!important;
 right:12px!important;
 opacity:.58!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .modal-head h2{
 font-size:16.5px!important;
 letter-spacing:-.2px;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .modal-head .icon-btn{
 width:34px!important;
 height:34px!important;
 min-width:34px!important;
 min-height:34px!important;
 border:1px solid rgba(255,255,255,.46)!important;
 border-radius:12px!important;
 background:rgba(255,255,255,.13)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important;
 backdrop-filter:blur(12px)!important;
 -webkit-backdrop-filter:blur(12px)!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .modal-body{
 padding:14px!important;
 gap:12px!important;
 overflow:auto;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .search-calendar{
 gap:10px!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .search-calendar .calendar-nav{
 padding:0 0 2px!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .search-calendar .calendar-nav .icon-btn{
 width:34px!important;
 height:34px!important;
 min-width:34px!important;
 min-height:34px!important;
 border-radius:12px!important;
 border:1px solid rgba(255,255,255,.42)!important;
 background:rgba(255,255,255,.11)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.34)!important;
 backdrop-filter:blur(10px)!important;
 -webkit-backdrop-filter:blur(10px)!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .calendar-title{
 font-size:14px!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .calendar-week{
 font-size:10px!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .calendar-grid{
 gap:4px!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .calendar-day{
 min-height:34px!important;
 height:34px!important;
 padding:0!important;
 border-radius:11px!important;
 font-size:11px!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .calendar-day i{
 width:3px!important;
 height:3px!important;
 bottom:4px!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .calendar-hint{
 margin-top:1px!important;
 font-size:10px!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .search-calendar-actions{
 position:static!important;
 margin-top:2px!important;
 padding:0!important;
 background:transparent!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-calendar) .search-calendar-actions .btn{
 width:100%;
 min-height:40px!important;
 border:1px solid rgba(255,255,255,.68)!important;
 border-radius:14px!important;
 background:rgba(255,255,255,.16)!important;
 color:var(--text)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.82),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 6px 16px rgba(15,23,42,.07)!important;
 backdrop-filter:blur(16px) saturate(1.16)!important;
 -webkit-backdrop-filter:blur(16px) saturate(1.16)!important;
}

/* Restore the original Search form rhythm: date range stays side by side. */
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .filters{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .filters .wide{
  grid-column:1/-1!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filter-group:not(.search-sender-group){
  grid-column:auto!important;
 }
}

/* Even on narrow phones, preserve the paired date controls unless the viewport is tiny. */
@media(max-width:390px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .filters{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .filters .wide{
  grid-column:1/-1!important;
 }
}

@media(max-width:335px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .filters{
  grid-template-columns:1fr!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .filters .wide,
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="search"] .search-filter-group:not(.search-sender-group){
  grid-column:1!important;
 }
}

/* Dark calendar header/buttons need their own glass contrast. */
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog:has(.search-calendar) .modal-head{
 background:rgba(11,17,22,.48)!important;
 border-bottom-color:rgba(255,255,255,.09)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.09),
  0 8px 20px rgba(0,0,0,.16)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog:has(.search-calendar) :is(
 .modal-head .icon-btn,
 .calendar-nav .icon-btn,
 .search-calendar-actions .btn
){
 border-color:rgba(255,255,255,.12)!important;
 background:rgba(255,255,255,.035)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.09),
  0 6px 16px rgba(0,0,0,.13)!important;
}


/* Stage 10.8 Search QA3 — glass sender picker + unified dark primary-tab canvas. */

/* All non-chat primary tabs share one dark Temporal Glass canvas.
   This removes the brighter Explore-only backdrop that made tab switching feel uneven. */
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] .primary-page-surface,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] .primary-page-surface,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="bookmarks"] .primary-page-surface,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .primary-page-surface,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] .primary-page-surface{
 background:
  radial-gradient(86% 58% at 10% -10%,color-mix(in srgb,var(--brand) 7%,transparent),transparent 70%),
  radial-gradient(70% 48% at 94% 30%,rgba(255,255,255,.018),transparent 74%),
  linear-gradient(180deg,color-mix(in srgb,var(--canvas) 97%,black 3%),var(--canvas))!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="explore"] .content-scroll,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="search"] .content-scroll,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="bookmarks"] .content-scroll,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .content-scroll,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="memories"] .content-scroll{
 background:transparent!important;
}

/* Search sender picker: dedicated glass treatment, without touching unrelated jump menus. */
body[data-ui-theme="temporal-glass"] dialog:has(.search-sender-menu){
 width:min(390px,calc(100vw - 34px))!important;
 border-radius:24px!important;
 overflow:hidden!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-sender-menu) .modal-head{
 background:rgba(226,233,238,.42)!important;
 border-bottom:1px solid rgba(255,255,255,.48)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.80),
  0 7px 18px rgba(15,23,42,.055)!important;
 backdrop-filter:blur(18px) saturate(1.18)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-sender-menu) .modal-head::before{
 background:
  radial-gradient(118% 170% at 8% -38%,rgba(255,255,255,.52),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.025) 60%,transparent)!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.search-sender-menu) .modal-body{
 padding:14px!important;
}

body[data-ui-theme="temporal-glass"] .search-sender-menu{
 gap:9px!important;
}

body[data-ui-theme="temporal-glass"] .search-sender-menu .jump-option{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 min-height:48px;
 padding:12px 13px!important;
 border:1px solid rgba(255,255,255,.70)!important;
 border-radius:16px!important;
 background:rgba(255,255,255,.17)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.84),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 6px 16px rgba(15,23,42,.065)!important;
 backdrop-filter:blur(16px) saturate(1.16)!important;
 -webkit-backdrop-filter:blur(16px) saturate(1.16)!important;
 transition:transform .12s ease,border-color .16s ease,background .16s ease;
}

body[data-ui-theme="temporal-glass"] .search-sender-menu .jump-option::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(115% 165% at 7% -42%,rgba(255,255,255,.62),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.018) 50%,transparent);
}

body[data-ui-theme="temporal-glass"] .search-sender-menu .jump-option:hover,
body[data-ui-theme="temporal-glass"] .search-sender-menu .jump-option:focus-visible{
 border-color:color-mix(in srgb,var(--brand) 24%,rgba(255,255,255,.64))!important;
 background:color-mix(in srgb,var(--brand) 5%,rgba(255,255,255,.20))!important;
 outline:0!important;
}

body[data-ui-theme="temporal-glass"] .search-sender-menu .jump-option:active{
 transform:scale(.985);
}

body[data-ui-theme="temporal-glass"] .search-sender-menu .jump-option>svg{
 color:var(--accent)!important;
}

/* Dark sender picker. */
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog:has(.search-sender-menu) .modal-head{
 background:rgba(11,17,22,.48)!important;
 border-bottom-color:rgba(255,255,255,.09)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.09),
  0 8px 20px rgba(0,0,0,.16)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .search-sender-menu .jump-option{
 border-color:rgba(255,255,255,.13)!important;
 background:rgba(255,255,255,.034)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.10),
  inset 0 -1px 0 rgba(0,0,0,.17),
  0 7px 18px rgba(0,0,0,.15)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .search-sender-menu .jump-option::before{
 background:
  radial-gradient(115% 165% at 7% -42%,rgba(255,255,255,.085),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.020),rgba(255,255,255,.004) 50%,transparent);
}


/* Stage 10.8 — Temporal Glass: Memory Library + Reader.
   Presentation-only: preserve Memory data, selection, edit, deep-link and navigation logic. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .section-head{
 margin-bottom:22px;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .section-head h2{
 letter-spacing:-.035em;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .section-head>.btn{
 border:1px solid rgba(255,255,255,.70)!important;
 background:rgba(255,255,255,.17)!important;
 color:var(--text)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.88),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 6px 17px rgba(15,23,42,.07)!important;
 backdrop-filter:blur(16px) saturate(1.16)!important;
 -webkit-backdrop-filter:blur(16px) saturate(1.16)!important;
}

/* Controls hero */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-controls{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 padding:19px!important;
 border:1px solid rgba(255,255,255,.78)!important;
 border-radius:24px!important;
 background:rgba(255,255,255,.20)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,1),
  inset 0 -1px 0 rgba(100,116,139,.09),
  0 17px 42px rgba(15,23,42,.11),
  0 3px 10px rgba(15,23,42,.045)!important;
 backdrop-filter:blur(22px) saturate(1.22)!important;
 -webkit-backdrop-filter:blur(22px) saturate(1.22)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-controls::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(118% 172% at 7% -40%,rgba(255,255,255,.78),transparent 48%),
  radial-gradient(80% 120% at 96% -18%,rgba(255,255,255,.24),transparent 45%),
  linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.022) 48%,transparent 100%);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-controls .label{
 margin-bottom:0;
 color:var(--text-soft);
 font-size:12px;
 font-weight:750;
 letter-spacing:.01em;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] :is(
 #memory-library-q,
 .memory-library-picker
){
 border:1px solid rgba(255,255,255,.74)!important;
 border-radius:16px!important;
 background:rgba(255,255,255,.16)!important;
 color:var(--text)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.90),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 6px 16px rgba(15,23,42,.065)!important;
 backdrop-filter:blur(16px) saturate(1.16)!important;
 -webkit-backdrop-filter:blur(16px) saturate(1.16)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] #memory-library-q{
 padding-left:44px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] :is(
 #memory-library-q:focus,
 .memory-library-picker:hover,
 .memory-library-picker:focus-visible
){
 border-color:color-mix(in srgb,var(--brand) 30%,rgba(255,255,255,.68))!important;
 background:color-mix(in srgb,var(--brand) 4%,rgba(255,255,255,.19))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.94),
  0 0 0 3px color-mix(in srgb,var(--brand) 8%,transparent),
  0 7px 18px rgba(15,23,42,.075)!important;
 outline:0!important;
}

/* Collection chips become small glass controls. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .collection-chips{
 gap:8px;
 padding:2px 1px 7px;
 scrollbar-width:none;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .collection-chips::-webkit-scrollbar{
 display:none;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .collection-chips .pill{
 border:1px solid rgba(255,255,255,.66)!important;
 background:rgba(255,255,255,.13)!important;
 color:var(--text-soft)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.78),
  0 5px 14px rgba(15,23,42,.055)!important;
 backdrop-filter:blur(14px) saturate(1.14)!important;
 -webkit-backdrop-filter:blur(14px) saturate(1.14)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .collection-chips .pill.active{
 color:var(--accent)!important;
 border-color:color-mix(in srgb,var(--brand) 30%,rgba(255,255,255,.70))!important;
 background:color-mix(in srgb,var(--brand) 10%,rgba(255,255,255,.15))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.82),
  0 0 0 3px color-mix(in srgb,var(--brand) 7%,transparent),
  0 6px 16px rgba(15,23,42,.06)!important;
}

/* Memory and Saved cards */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] :is(
 .memory-library-card,
 .bookmark-library-card
){
 position:relative;
 isolation:isolate;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.74)!important;
 border-radius:21px!important;
 background:rgba(255,255,255,.17)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.94),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 12px 30px rgba(15,23,42,.085)!important;
 backdrop-filter:blur(18px) saturate(1.18)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] :is(
 .memory-library-card,
 .bookmark-library-card
)::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(116% 170% at 7% -40%,rgba(255,255,255,.70),transparent 48%),
  radial-gradient(78% 114% at 96% -18%,rgba(255,255,255,.20),transparent 44%),
  linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.018) 48%,transparent);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-card{
 padding:18px!important;
 transition:transform .14s ease,border-color .16s ease,box-shadow .16s ease;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-card:hover,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-card:focus-visible{
 border-color:color-mix(in srgb,var(--brand) 24%,rgba(255,255,255,.66))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.96),
  0 0 0 3px color-mix(in srgb,var(--brand) 6%,transparent),
  0 14px 34px rgba(15,23,42,.095)!important;
 outline:0!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-card:active{
 transform:scale(.993);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-head .icon-btn,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .bookmark-library-card>.row .icon-btn{
 border:1px solid rgba(255,255,255,.54)!important;
 background:rgba(255,255,255,.10)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45)!important;
 backdrop-filter:blur(10px)!important;
 -webkit-backdrop-filter:blur(10px)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-line{
 border:1px solid rgba(255,255,255,.42);
 background:rgba(255,255,255,.105)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
 backdrop-filter:blur(10px);
 -webkit-backdrop-filter:blur(10px);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-note,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .result-note{
 border-left-color:color-mix(in srgb,var(--brand) 66%,var(--accent))!important;
 background:color-mix(in srgb,var(--brand) 7%,rgba(255,255,255,.08))!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-open-chat{
 border:1px solid rgba(255,255,255,.68)!important;
 background:rgba(255,255,255,.13)!important;
 color:var(--accent)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.76),
  0 5px 15px rgba(15,23,42,.06)!important;
 backdrop-filter:blur(14px) saturate(1.14)!important;
 -webkit-backdrop-filter:blur(14px) saturate(1.14)!important;
}

/* Saved Message already contains a result row; make the inner row a quiet glass inset. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .bookmark-library-card>.result{
 margin:0!important;
 border:1px solid rgba(255,255,255,.42)!important;
 border-radius:15px!important;
 background:rgba(255,255,255,.095)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.30)!important;
 backdrop-filter:blur(10px) saturate(1.10)!important;
 -webkit-backdrop-filter:blur(10px) saturate(1.10)!important;
}

/* Empty state */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] #memory-library-results>.empty-state{
 margin-top:18px;
 padding:50px 20px;
 border:1px solid rgba(255,255,255,.52);
 border-radius:22px;
 background:rgba(255,255,255,.08);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.38);
 backdrop-filter:blur(12px) saturate(1.12);
 -webkit-backdrop-filter:blur(12px) saturate(1.12);
}

/* Memory library choice modals. */
body[data-ui-theme="temporal-glass"] dialog:has(.memory-library-choice-menu){
 width:min(430px,calc(100vw - 34px))!important;
 border-radius:24px!important;
 overflow:hidden!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.memory-library-choice-menu) .modal-head{
 background:rgba(226,233,238,.42)!important;
 border-bottom:1px solid rgba(255,255,255,.48)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.80),
  0 7px 18px rgba(15,23,42,.055)!important;
 backdrop-filter:blur(18px) saturate(1.18)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
}

body[data-ui-theme="temporal-glass"] .memory-library-choice-menu .jump-option{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.66)!important;
 background:rgba(255,255,255,.14)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.78),
  0 6px 16px rgba(15,23,42,.06)!important;
 backdrop-filter:blur(15px) saturate(1.14)!important;
 -webkit-backdrop-filter:blur(15px) saturate(1.14)!important;
}

body[data-ui-theme="temporal-glass"] .memory-library-choice-menu .jump-option.active{
 border-color:color-mix(in srgb,var(--brand) 34%,rgba(255,255,255,.68))!important;
 background:color-mix(in srgb,var(--brand) 9%,rgba(255,255,255,.15))!important;
}

body[data-ui-theme="temporal-glass"] .memory-library-choice-actions .btn{
 border:1px solid rgba(255,255,255,.68)!important;
 background:rgba(255,255,255,.15)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.80),
  0 6px 16px rgba(15,23,42,.065)!important;
 backdrop-filter:blur(15px) saturate(1.14)!important;
 -webkit-backdrop-filter:blur(15px) saturate(1.14)!important;
}

/* Memory Reader gets an internal glass stage while preserving chat-bubble semantics. */
body[data-ui-theme="temporal-glass"] dialog:has(.memory-reader) .modal-head{
 background:rgba(226,233,238,.42)!important;
 border-bottom:1px solid rgba(255,255,255,.46)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.76),
  0 7px 18px rgba(15,23,42,.055)!important;
 backdrop-filter:blur(18px) saturate(1.18)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.18)!important;
}

body[data-ui-theme="temporal-glass"] .memory-reader-head blockquote{
 border-left-color:color-mix(in srgb,var(--brand) 66%,var(--accent))!important;
 background:color-mix(in srgb,var(--brand) 7%,rgba(255,255,255,.08))!important;
}

body[data-ui-theme="temporal-glass"] .memory-reader-thread{
 border:1px solid rgba(255,255,255,.58)!important;
 background:rgba(255,255,255,.085)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.48),
  0 8px 22px rgba(15,23,42,.055)!important;
 backdrop-filter:blur(14px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(14px) saturate(1.12)!important;
}

body[data-ui-theme="temporal-glass"] .memory-reader-actions{
 margin:0 -2px -2px;
 padding:10px 2px 2px!important;
 background:linear-gradient(180deg,transparent,rgba(226,233,238,.48) 40%,rgba(226,233,238,.62))!important;
 backdrop-filter:blur(16px) saturate(1.14);
 -webkit-backdrop-filter:blur(16px) saturate(1.14);
}

body[data-ui-theme="temporal-glass"] .memory-reader-actions .btn{
 border:1px solid rgba(255,255,255,.68)!important;
 background:rgba(255,255,255,.14)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.78),
  0 6px 16px rgba(15,23,42,.06)!important;
 backdrop-filter:blur(14px)!important;
 -webkit-backdrop-filter:blur(14px)!important;
}

/* Dark Memory recipe */
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="bookmarks"] .section-head>.btn,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="bookmarks"] :is(
 #memory-library-q,
 .memory-library-picker,
 .collection-chips .pill,
 .memory-open-chat
){
 border-color:rgba(255,255,255,.13)!important;
 background:rgba(255,255,255,.035)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.10),
  inset 0 -1px 0 rgba(0,0,0,.16),
  0 6px 16px rgba(0,0,0,.14)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-controls{
 border-color:rgba(255,255,255,.15)!important;
 background:rgba(8,13,18,.30)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.14),
  inset 0 -1px 0 rgba(0,0,0,.20),
  0 18px 44px rgba(0,0,0,.22)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-controls::before{
 background:
  radial-gradient(118% 172% at 7% -40%,rgba(255,255,255,.12),transparent 48%),
  radial-gradient(80% 120% at 96% -18%,rgba(255,255,255,.035),transparent 45%),
  linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.004) 48%,transparent);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="bookmarks"] :is(
 .memory-library-card,
 .bookmark-library-card
){
 border-color:rgba(255,255,255,.13)!important;
 background:rgba(8,13,18,.29)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.11),
  inset 0 -1px 0 rgba(0,0,0,.18),
  0 12px 30px rgba(0,0,0,.18)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="bookmarks"] :is(
 .memory-library-card,
 .bookmark-library-card
)::before{
 background:
  radial-gradient(116% 170% at 7% -40%,rgba(255,255,255,.080),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.003) 48%,transparent);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-line,
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="bookmarks"] .bookmark-library-card>.result{
 border-color:rgba(255,255,255,.075)!important;
 background:rgba(255,255,255,.022)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog:has(.memory-library-choice-menu) .modal-head,
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog:has(.memory-reader) .modal-head{
 background:rgba(11,17,22,.48)!important;
 border-bottom-color:rgba(255,255,255,.09)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.09),
  0 8px 20px rgba(0,0,0,.16)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-library-choice-menu .jump-option,
body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-library-choice-actions .btn,
body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-reader-actions .btn{
 border-color:rgba(255,255,255,.12)!important;
 background:rgba(255,255,255,.032)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.085),
  0 6px 16px rgba(0,0,0,.13)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-reader-thread{
 border-color:rgba(255,255,255,.09)!important;
 background:rgba(255,255,255,.018)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.045),
  0 8px 22px rgba(0,0,0,.13)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-reader-actions{
 background:linear-gradient(180deg,transparent,rgba(10,15,20,.68) 40%,rgba(10,15,20,.84))!important;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-controls{
  padding:15px!important;
  border-radius:22px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-card,
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .bookmark-library-card{
  border-radius:19px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-card{
  padding:16px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-open-chat{
  width:100%;
 }
}

@media(prefers-reduced-motion:reduce){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-card{
  transition:none!important;
 }
}


/* Stage 10.8 Memory QA1 — unify Memory bubbles, notes and ALL Temporal Glass modals.
   One material family across Explore, Search, Memory and Settings dialogs. */

/* ---- Global Temporal Glass modal material ---- */
body[data-ui-theme="temporal-glass"] dialog{
 border:1px solid rgba(255,255,255,.72)!important;
 background:rgba(255,255,255,.16)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.94),
  inset 0 -1px 0 rgba(100,116,139,.09),
  0 22px 62px rgba(15,23,42,.22),
  0 5px 16px rgba(15,23,42,.075)!important;
 backdrop-filter:blur(24px) saturate(1.20) contrast(1.015)!important;
 -webkit-backdrop-filter:blur(24px) saturate(1.20) contrast(1.015)!important;
}

body[data-ui-theme="temporal-glass"] dialog::before{
 background:
  radial-gradient(120% 185% at 8% -34%,rgba(255,255,255,.70),transparent 46%),
  radial-gradient(84% 120% at 94% -20%,rgba(255,255,255,.22),transparent 45%),
  linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.024) 40%,transparent 80%)!important;
}

body[data-ui-theme="temporal-glass"] dialog::backdrop{
 background:rgba(5,10,14,.34)!important;
 backdrop-filter:blur(5px)!important;
 -webkit-backdrop-filter:blur(5px)!important;
}

body[data-ui-theme="temporal-glass"] dialog .modal-head{
 background:rgba(255,255,255,.075)!important;
 border-bottom:1px solid rgba(255,255,255,.16)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.30),
  0 6px 16px rgba(15,23,42,.045)!important;
 backdrop-filter:blur(18px) saturate(1.14)!important;
 -webkit-backdrop-filter:blur(18px) saturate(1.14)!important;
}

body[data-ui-theme="temporal-glass"] dialog .modal-head::before{
 background:
  radial-gradient(120% 170% at 10% -40%,rgba(255,255,255,.26),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.012) 58%,transparent 100%)!important;
}

body[data-ui-theme="temporal-glass"] dialog .modal-body{
 background:transparent!important;
}

/* Every modal action is a glass control; semantic color becomes tint, not solid fill. */
body[data-ui-theme="temporal-glass"] dialog .btn,
body[data-ui-theme="temporal-glass"] dialog .icon-btn,
body[data-ui-theme="temporal-glass"] dialog .collection-manage-row .icon-btn{
 border:1px solid rgba(255,255,255,.62)!important;
 background:rgba(255,255,255,.105)!important;
 color:var(--text)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.70),
  inset 0 -1px 0 rgba(100,116,139,.075),
  0 5px 14px rgba(15,23,42,.06)!important;
 backdrop-filter:blur(14px) saturate(1.14)!important;
 -webkit-backdrop-filter:blur(14px) saturate(1.14)!important;
}

body[data-ui-theme="temporal-glass"] dialog .btn.primary{
 border-color:color-mix(in srgb,var(--brand) 34%,rgba(255,255,255,.62))!important;
 background:color-mix(in srgb,var(--brand) 17%,rgba(255,255,255,.10))!important;
 color:var(--brand)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.66),
  0 0 0 1px color-mix(in srgb,var(--brand) 5%,transparent),
  0 6px 16px rgba(15,23,42,.065)!important;
}

body[data-ui-theme="temporal-glass"] dialog .btn.danger,
body[data-ui-theme="temporal-glass"] dialog .collection-manage-row .danger,
body[data-ui-theme="temporal-glass"] dialog .collection-manage-row [data-action="delete-collection"]{
 border-color:color-mix(in srgb,var(--danger) 30%,rgba(255,255,255,.54))!important;
 background:color-mix(in srgb,var(--danger) 8%,rgba(255,255,255,.09))!important;
 color:var(--danger)!important;
}

body[data-ui-theme="temporal-glass"] dialog :is(.btn,.icon-btn):active{
 transform:scale(.978);
}

/* Form controls inside modal use the same translucent inset glass. */
body[data-ui-theme="temporal-glass"] dialog :is(.field,input,textarea,select){
 border:1px solid rgba(255,255,255,.46)!important;
 background:rgba(255,255,255,.075)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.28),
  inset 0 -1px 0 rgba(100,116,139,.06)!important;
 backdrop-filter:blur(10px) saturate(1.10)!important;
 -webkit-backdrop-filter:blur(10px) saturate(1.10)!important;
}

/* Sticky action footer becomes transparent glass rather than a colored slab. */
body[data-ui-theme="temporal-glass"] dialog .modal-actions{
 background:linear-gradient(180deg,transparent,rgba(255,255,255,.035) 35%,rgba(255,255,255,.075))!important;
 backdrop-filter:blur(14px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(14px) saturate(1.12)!important;
}

/* ---- Dark modal material ---- */
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog{
 border-color:rgba(255,255,255,.14)!important;
 background:rgba(8,13,18,.34)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.12),
  inset 0 -1px 0 rgba(0,0,0,.20),
  0 24px 68px rgba(0,0,0,.38),
  0 5px 18px rgba(0,0,0,.16)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog::before{
 background:
  radial-gradient(120% 185% at 8% -34%,rgba(255,255,255,.095),transparent 46%),
  radial-gradient(84% 120% at 94% -20%,rgba(255,255,255,.030),transparent 45%),
  linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.004) 40%,transparent 80%)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog .modal-head{
 background:rgba(255,255,255,.025)!important;
 border-bottom-color:rgba(255,255,255,.075)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.055),
  0 7px 18px rgba(0,0,0,.12)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog :is(.btn,.icon-btn),
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog .collection-manage-row .icon-btn{
 border-color:rgba(255,255,255,.115)!important;
 background:rgba(255,255,255,.028)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.075),
  inset 0 -1px 0 rgba(0,0,0,.16),
  0 6px 16px rgba(0,0,0,.13)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog .btn.primary{
 border-color:color-mix(in srgb,var(--brand) 30%,rgba(255,255,255,.10))!important;
 background:color-mix(in srgb,var(--brand) 11%,rgba(255,255,255,.025))!important;
 color:var(--brand)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog :is(.field,input,textarea,select){
 border-color:rgba(255,255,255,.085)!important;
 background:rgba(255,255,255,.018)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.045),
  inset 0 -1px 0 rgba(0,0,0,.15)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog .modal-actions{
 background:linear-gradient(180deg,transparent,rgba(8,13,18,.34) 35%,rgba(8,13,18,.54))!important;
}

/* ---- Memory Reader: use the SAME palette/gradient bubble material as chat ---- */
body[data-ui-theme="temporal-glass"] .memory-reader-bubble{
 background:linear-gradient(145deg,var(--received-start),var(--received-end))!important;
 color:var(--received-auto-text)!important;
 border:1px solid color-mix(in srgb,var(--received-start) 72%,var(--hairline))!important;
 box-shadow:var(--shadow-soft)!important;
}

body[data-ui-theme="temporal-glass"] .memory-reader-message.mine .memory-reader-bubble{
 background:linear-gradient(145deg,var(--sent-start),var(--sent-end))!important;
 color:var(--sent-auto-text)!important;
 border-color:transparent!important;
}

body[data-ui-theme="temporal-glass"][data-gradient=vivid] .memory-reader-bubble{
 background:linear-gradient(135deg,var(--received-start) 8%,var(--received-end) 92%)!important;
}

body[data-ui-theme="temporal-glass"][data-gradient=vivid] .memory-reader-message.mine .memory-reader-bubble{
 background:linear-gradient(135deg,var(--sent-start) 5%,var(--sent-end) 95%)!important;
}

body[data-ui-theme="temporal-glass"][data-gradient=off] .memory-reader-bubble{
 background:var(--received-start)!important;
}

body[data-ui-theme="temporal-glass"][data-gradient=off] .memory-reader-message.mine .memory-reader-bubble{
 background:var(--sent-start)!important;
}

body[data-ui-theme="temporal-glass"][data-bubble=rounded] .memory-reader-bubble{
 border-radius:25px!important;
}

body[data-ui-theme="temporal-glass"][data-bubble=compact] .memory-reader-bubble{
 border-radius:13px!important;
 padding:8px 11px 6px!important;
}

/* Preserve message-specific text legibility exactly like chat. */
body[data-ui-theme="temporal-glass"] .memory-reader-bubble .muted{
 color:inherit!important;
 opacity:.75;
}

/* ---- Memory note becomes glass inset ---- */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-note{
 position:relative;
 overflow:hidden;
 border:1px solid color-mix(in srgb,var(--brand) 15%,rgba(255,255,255,.44))!important;
 border-left:3px solid color-mix(in srgb,var(--brand) 62%,var(--accent))!important;
 border-radius:14px!important;
 background:rgba(255,255,255,.095)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.35),
  0 5px 14px rgba(15,23,42,.045)!important;
 backdrop-filter:blur(12px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(12px) saturate(1.12)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="bookmarks"] .memory-library-note{
 border-color:rgba(255,255,255,.075)!important;
 border-left-color:color-mix(in srgb,var(--brand) 64%,var(--accent))!important;
 background:rgba(255,255,255,.020)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.045),
  0 5px 14px rgba(0,0,0,.10)!important;
}

/* Reader sticky actions: same global modal glass, no special slab. */
body[data-ui-theme="temporal-glass"] .memory-reader-actions{
 background:linear-gradient(180deg,transparent,rgba(255,255,255,.025) 38%,rgba(255,255,255,.06))!important;
 backdrop-filter:blur(14px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(14px) saturate(1.12)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-reader-actions{
 background:linear-gradient(180deg,transparent,rgba(8,13,18,.30) 38%,rgba(8,13,18,.50))!important;
}


/* Stage 10.8 Memory QA2 — exact final Temporal Glass chat-bubble material in Reader.
   Previous QA1 reused the old palette-gradient layer; the live chat actually ends on
   the Stage 10.3 neutral frosted --tg3 recipe. Mirror that final rendered material. */
body[data-ui-theme="temporal-glass"] .memory-reader-bubble{
 position:relative!important;
 isolation:isolate!important;
 overflow:hidden!important;
 border:1px solid var(--tg3-border)!important;
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg3-received) 96%,rgba(255,255,255,.04)),
   color-mix(in srgb,var(--tg3-received) 90%,transparent)
  )!important;
 color:var(--received-auto-text)!important;
 box-shadow:
  inset 0 1px 0 var(--tg3-edge-top),
  inset 1px 0 0 var(--tg3-edge-side),
  inset -1px 0 0 var(--tg3-edge-side),
  inset 0 -1px 0 color-mix(in srgb,var(--brand) 8%,var(--tg3-edge-side)),
  0 1px 0 rgba(255,255,255,.08),
  var(--tg3-depth)!important;
 backdrop-filter:blur(28px) saturate(1.16) contrast(1.045)!important;
 -webkit-backdrop-filter:blur(28px) saturate(1.16) contrast(1.045)!important;
}

body[data-ui-theme="temporal-glass"] .memory-reader-message.mine .memory-reader-bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg3-sent) 96%,rgba(255,255,255,.04)),
   color-mix(in srgb,var(--tg3-sent) 88%,transparent)
  )!important;
 color:var(--sent-auto-text)!important;
 border-color:var(--tg3-border)!important;
}

/* Same upper refraction/specular veil as live chat. */
body[data-ui-theme="temporal-glass"] .memory-reader-bubble::before{
 content:""!important;
 display:block!important;
 position:absolute!important;
 inset:0!important;
 z-index:-1!important;
 pointer-events:none!important;
 border-radius:inherit!important;
 background:
  linear-gradient(180deg,
   rgba(255,255,255,.20) 0,
   rgba(255,255,255,.075) 18%,
   rgba(255,255,255,.018) 44%,
   transparent 66%),
  radial-gradient(95% 75% at 18% 0%,
   rgba(255,255,255,.20),
   transparent 62%)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-reader-bubble::before{
 background:
  linear-gradient(180deg,
   rgba(255,255,255,.095) 0,
   rgba(255,255,255,.028) 22%,
   transparent 62%),
  radial-gradient(95% 75% at 18% 0%,
   rgba(255,255,255,.085),
   transparent 64%)!important;
}

/* Reader keeps its compact transcript geometry, but bubble-shape preference must match chat. */
body[data-ui-theme="temporal-glass"][data-bubble=modern] .memory-reader-bubble{
 border-radius:17px 17px 17px 4px!important;
}
body[data-ui-theme="temporal-glass"][data-bubble=modern] .memory-reader-message.mine .memory-reader-bubble{
 border-radius:17px 17px 4px 17px!important;
}
body[data-ui-theme="temporal-glass"][data-bubble=rounded] .memory-reader-bubble,
body[data-ui-theme="temporal-glass"][data-bubble=rounded] .memory-reader-message.mine .memory-reader-bubble{
 border-radius:25px!important;
}
body[data-ui-theme="temporal-glass"][data-bubble=compact] .memory-reader-bubble,
body[data-ui-theme="temporal-glass"][data-bubble=compact] .memory-reader-message.mine .memory-reader-bubble{
 border-radius:13px!important;
}

/* Timestamp/color opacity follows the chat bubble's inherited-material behavior. */
body[data-ui-theme="temporal-glass"] .memory-reader-bubble time,
body[data-ui-theme="temporal-glass"] .memory-reader-bubble .muted{
 color:inherit!important;
 opacity:.70!important;
}


/* Stage 10.8 Memory QA3 — glass the remaining Memory editor/member/context surfaces
   and hide native scrollbars inside every modal without disabling scrolling. */

/* ---- Global modal scrollbar cleanup ---- */
body[data-ui-theme="temporal-glass"] dialog,
body[data-ui-theme="temporal-glass"] dialog *{
 scrollbar-width:none!important;
 -ms-overflow-style:none!important;
}

body[data-ui-theme="temporal-glass"] dialog::-webkit-scrollbar,
body[data-ui-theme="temporal-glass"] dialog *::-webkit-scrollbar{
 display:none!important;
 width:0!important;
 height:0!important;
 background:transparent!important;
}

/* ---- Edit Memory: message preview rows ---- */
body[data-ui-theme="temporal-glass"] .memory-edit-message,
body[data-ui-theme="temporal-glass"] .memory-compose-message{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.48)!important;
 border-radius:16px!important;
 background:rgba(255,255,255,.075)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.34),
  inset 0 -1px 0 rgba(100,116,139,.06),
  0 6px 16px rgba(15,23,42,.045)!important;
 backdrop-filter:blur(13px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(13px) saturate(1.12)!important;
}

body[data-ui-theme="temporal-glass"] .memory-edit-message::before,
body[data-ui-theme="temporal-glass"] .memory-compose-message::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(115% 155% at 8% -38%,rgba(255,255,255,.30),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.008) 52%,transparent);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-edit-message,
body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-compose-message{
 border-color:rgba(255,255,255,.085)!important;
 background:rgba(255,255,255,.018)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.045),
  inset 0 -1px 0 rgba(0,0,0,.14),
  0 6px 16px rgba(0,0,0,.10)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-edit-message::before,
body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-compose-message::before{
 background:
  radial-gradient(115% 155% at 8% -38%,rgba(255,255,255,.055),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.012),transparent 54%);
}

/* ---- Pesan Memory navigator ---- */
body[data-ui-theme="temporal-glass"] .memory-member-date{
 top:0;
 z-index:3;
 margin:3px 0 2px;
 padding:8px 10px!important;
 border:1px solid rgba(255,255,255,.32);
 border-radius:12px;
 background:rgba(255,255,255,.075)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
 backdrop-filter:blur(12px) saturate(1.10)!important;
 -webkit-backdrop-filter:blur(12px) saturate(1.10)!important;
}

body[data-ui-theme="temporal-glass"] .memory-member-item{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.46)!important;
 border-radius:16px!important;
 background:rgba(255,255,255,.065)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.30),
  inset 0 -1px 0 rgba(100,116,139,.055),
  0 5px 14px rgba(15,23,42,.04)!important;
 backdrop-filter:blur(13px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(13px) saturate(1.12)!important;
}

body[data-ui-theme="temporal-glass"] .memory-member-item::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(112% 150% at 8% -35%,rgba(255,255,255,.25),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.045),transparent 52%);
}

body[data-ui-theme="temporal-glass"] .memory-member-jump{
 color:var(--text)!important;
}

body[data-ui-theme="temporal-glass"] .memory-member-remove{
 align-self:stretch;
 width:48px!important;
 min-width:48px!important;
 height:auto!important;
 margin:5px!important;
 border-radius:14px!important;
 border:1px solid rgba(255,255,255,.50)!important;
 background:rgba(255,255,255,.075)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.30),
  0 4px 12px rgba(15,23,42,.045)!important;
 backdrop-filter:blur(12px) saturate(1.10)!important;
 -webkit-backdrop-filter:blur(12px) saturate(1.10)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-member-date,
body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-member-item,
body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-member-remove{
 border-color:rgba(255,255,255,.075)!important;
 background:rgba(255,255,255,.016)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.04),
  0 5px 14px rgba(0,0,0,.09)!important;
}

/* ---- Context Reader control panel ---- */
body[data-ui-theme="temporal-glass"] .context-reader-controls{
 position:relative;
 isolation:isolate;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.50)!important;
 border-radius:19px!important;
 background:rgba(255,255,255,.070)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.34),
  inset 0 -1px 0 rgba(100,116,139,.055),
  0 7px 18px rgba(15,23,42,.045)!important;
 backdrop-filter:blur(14px) saturate(1.13)!important;
 -webkit-backdrop-filter:blur(14px) saturate(1.13)!important;
}

body[data-ui-theme="temporal-glass"] .context-reader-controls::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(116% 160% at 8% -36%,rgba(255,255,255,.28),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.05),transparent 54%);
}

body[data-ui-theme="temporal-glass"] .context-range-picker button{
 position:relative;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.48)!important;
 background:rgba(255,255,255,.060)!important;
 color:var(--text-soft)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.28),
  0 4px 12px rgba(15,23,42,.04)!important;
 backdrop-filter:blur(11px) saturate(1.10)!important;
 -webkit-backdrop-filter:blur(11px) saturate(1.10)!important;
}

body[data-ui-theme="temporal-glass"] .context-range-picker button.active,
body[data-ui-theme="temporal-glass"] .context-range-picker button[aria-pressed="true"]{
 border-color:color-mix(in srgb,var(--brand) 34%,rgba(255,255,255,.55))!important;
 background:color-mix(in srgb,var(--brand) 18%,rgba(255,255,255,.075))!important;
 color:var(--brand)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.34),
  0 0 0 2px color-mix(in srgb,var(--brand) 7%,transparent),
  0 5px 14px rgba(15,23,42,.05)!important;
}

/* Context footer must be the same transparent glass language as modal actions. */
body[data-ui-theme="temporal-glass"] .context-reader-actions{
 background:linear-gradient(180deg,transparent,rgba(255,255,255,.025) 34%,rgba(255,255,255,.060))!important;
 backdrop-filter:blur(14px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(14px) saturate(1.12)!important;
}

body[data-ui-theme="temporal-glass"] .context-reader-actions .btn{
 border:1px solid rgba(255,255,255,.56)!important;
 background:rgba(255,255,255,.085)!important;
 color:var(--text)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.34),
  0 5px 14px rgba(15,23,42,.05)!important;
 backdrop-filter:blur(13px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(13px) saturate(1.12)!important;
}

body[data-ui-theme="temporal-glass"] .context-reader-actions .context-memory-btn{
 border-color:color-mix(in srgb,var(--brand) 26%,rgba(255,255,255,.52))!important;
 background:color-mix(in srgb,var(--brand) 9%,rgba(255,255,255,.075))!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .context-reader-controls,
body[data-ui-theme="temporal-glass"][data-theme=dark] .context-range-picker button,
body[data-ui-theme="temporal-glass"][data-theme=dark] .context-reader-actions .btn{
 border-color:rgba(255,255,255,.080)!important;
 background:rgba(255,255,255,.017)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.045),
  0 5px 14px rgba(0,0,0,.09)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .context-range-picker button.active,
body[data-ui-theme="temporal-glass"][data-theme=dark] .context-range-picker button[aria-pressed="true"]{
 border-color:color-mix(in srgb,var(--brand) 28%,rgba(255,255,255,.075))!important;
 background:color-mix(in srgb,var(--brand) 12%,rgba(255,255,255,.018))!important;
 color:var(--brand)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .context-reader-actions{
 background:linear-gradient(180deg,transparent,rgba(8,13,18,.28) 34%,rgba(8,13,18,.46))!important;
}


/* Stage 10.8 Memory QA4 — stabilize Pesan Memory geometry and remove footer slabs. */

/* Pesan Memory: only the list scrolls; header, intro and action stay stable. */
body[data-ui-theme="temporal-glass"] dialog:has(.memory-members){
 overflow:hidden!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.memory-members) .modal-body{
 overflow:hidden!important;
 min-height:0!important;
}

body[data-ui-theme="temporal-glass"] .memory-members{
 min-height:0!important;
 max-height:min(68dvh,640px);
 display:grid!important;
 grid-template-rows:auto minmax(0,1fr) auto!important;
 gap:12px!important;
}

body[data-ui-theme="temporal-glass"] .memory-members-list{
 min-height:0!important;
 max-height:none!important;
 overflow:auto!important;
 padding-right:0!important;
 overscroll-behavior:contain;
}

body[data-ui-theme="temporal-glass"] .memory-member-item{
 grid-template-columns:minmax(0,1fr) 44px!important;
 gap:6px!important;
 align-items:stretch!important;
 overflow:visible!important;
}

body[data-ui-theme="temporal-glass"] .memory-member-jump{
 min-width:0!important;
 padding:10px 12px!important;
 align-content:center;
}

body[data-ui-theme="temporal-glass"] .memory-member-jump span{
 display:block!important;
 grid-column:1/-1!important;
 min-width:0!important;
 margin-top:2px!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
 white-space:nowrap!important;
 line-height:1.35!important;
}

body[data-ui-theme="temporal-glass"] .memory-member-remove{
 align-self:stretch!important;
 justify-self:stretch!important;
 width:auto!important;
 min-width:0!important;
 height:auto!important;
 margin:4px!important;
 padding:0!important;
 border-radius:12px!important;
 display:grid!important;
 place-items:center!important;
 overflow:hidden!important;
}

/* Avoid sticky date labels sliding beneath the modal head. */
body[data-ui-theme="temporal-glass"] .memory-member-date{
 position:sticky!important;
 top:0!important;
 z-index:4!important;
}

/* Action containers should be visually absent; only the buttons are glass.
   This applies across Search, Memory, Explore and Settings modals. */
body[data-ui-theme="temporal-glass"] dialog .modal-actions,
body[data-ui-theme="temporal-glass"] .memory-reader-actions,
body[data-ui-theme="temporal-glass"] .context-reader-actions{
 background:transparent!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
 box-shadow:none!important;
 border:0!important;
}

/* No pseudo-surface behind action groups either. */
body[data-ui-theme="temporal-glass"] dialog .modal-actions::before,
body[data-ui-theme="temporal-glass"] dialog .modal-actions::after,
body[data-ui-theme="temporal-glass"] .memory-reader-actions::before,
body[data-ui-theme="temporal-glass"] .memory-reader-actions::after,
body[data-ui-theme="temporal-glass"] .context-reader-actions::before,
body[data-ui-theme="temporal-glass"] .context-reader-actions::after{
 content:none!important;
 display:none!important;
}

/* Keep sticky positioning but without a rectangular material slab. */
body[data-ui-theme="temporal-glass"] dialog .modal-actions,
body[data-ui-theme="temporal-glass"] .memory-reader-actions,
body[data-ui-theme="temporal-glass"] .context-reader-actions{
 position:sticky;
 bottom:-1px;
 z-index:4;
}

/* Dark mode: explicitly keep action wrappers transparent after older overrides. */
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog .modal-actions,
body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-reader-actions,
body[data-ui-theme="temporal-glass"][data-theme=dark] .context-reader-actions{
 background:transparent!important;
}


/* Stage 10.8 Memory QA5 — Context Reader uses one modal scroll.
   The range picker floats beneath the sticky modal header while the transcript
   participates in the dialog's single scroll flow. */
body[data-ui-theme="temporal-glass"] dialog:has(.context-reader-controls){
 --context-sticky-top:72px;
 overflow:auto!important;
}

body[data-ui-theme="temporal-glass"] dialog:has(.context-reader-controls) .modal-body{
 overflow:visible!important;
 min-height:auto!important;
}

body[data-ui-theme="temporal-glass"] .context-nearby-thread{
 max-height:none!important;
 overflow:visible!important;
 overscroll-behavior:auto!important;
 padding-bottom:14px!important;
}

/* Keep the range selector visible as the conversation scrolls. */
body[data-ui-theme="temporal-glass"] .context-reader-controls{
 position:sticky!important;
 top:var(--context-sticky-top)!important;
 z-index:3!important;
 margin-top:0!important;
 margin-bottom:14px!important;
}

/* Give the floating control a little separation from messages passing underneath. */
body[data-ui-theme="temporal-glass"] .context-reader-controls::after{
 content:"";
 position:absolute;
 left:12px;
 right:12px;
 bottom:-9px;
 height:9px;
 pointer-events:none;
 background:linear-gradient(180deg,rgba(5,10,14,.08),transparent);
 filter:blur(4px);
 opacity:.45;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .context-reader-controls::after{
 background:linear-gradient(180deg,rgba(71,85,105,.08),transparent);
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] dialog:has(.context-reader-controls){
  --context-sticky-top:67px;
 }
}


/* Stage 10.8 — Temporal Glass: Settings / Lainnya.
   Presentation-only. Keep settings logic/persistence unchanged and make preview bubbles
   use the exact final chat-bubble material (--tg3) already approved elsewhere. */

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .section-head{
 margin-bottom:22px;
}
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .section-head h2{
 letter-spacing:-.035em;
}

/* Shared Settings glass cards */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] :is(
 .settings-preview,
 .settings-group
){
 position:relative;
 isolation:isolate;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.72)!important;
 background:rgba(255,255,255,.17)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.92),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 14px 36px rgba(15,23,42,.09)!important;
 backdrop-filter:blur(20px) saturate(1.18)!important;
 -webkit-backdrop-filter:blur(20px) saturate(1.18)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] :is(
 .settings-preview,
 .settings-group
)::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(118% 170% at 8% -38%,rgba(255,255,255,.68),transparent 48%),
  radial-gradient(78% 116% at 96% -18%,rgba(255,255,255,.20),transparent 46%),
  linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.018) 48%,transparent);
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-group{
 border-radius:22px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-section-head{
 margin-bottom:18px;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-choice-block{
 border-top-color:rgba(255,255,255,.18)!important;
}

/* Preview stage */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview{
 border-radius:24px!important;
 background:
  radial-gradient(76% 54% at 8% 14%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 70%),
  radial-gradient(68% 44% at 94% 68%,rgba(148,163,184,.08),transparent 74%),
  rgba(255,255,255,.12)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-top{
 border-bottom-color:rgba(255,255,255,.16)!important;
 background:rgba(255,255,255,.055)!important;
 backdrop-filter:blur(16px) saturate(1.14)!important;
 -webkit-backdrop-filter:blur(16px) saturate(1.14)!important;
}

/* Exact final chat material for preview bubbles — same Stage 10.3 --tg3 recipe. */
body[data-ui-theme="temporal-glass"] .settings-preview-message{
 position:relative!important;
 isolation:isolate!important;
 overflow:hidden!important;
 border:1px solid var(--tg3-border)!important;
 box-shadow:
  inset 0 1px 0 var(--tg3-edge-top),
  inset 1px 0 0 var(--tg3-edge-side),
  inset -1px 0 0 var(--tg3-edge-side),
  inset 0 -1px 0 color-mix(in srgb,var(--brand) 8%,var(--tg3-edge-side)),
  0 1px 0 rgba(255,255,255,.08),
  var(--tg3-depth)!important;
 backdrop-filter:blur(28px) saturate(1.16) contrast(1.045)!important;
 -webkit-backdrop-filter:blur(28px) saturate(1.16) contrast(1.045)!important;
}

body[data-ui-theme="temporal-glass"] .settings-preview-message.received{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg3-received) 96%,rgba(255,255,255,.04)),
   color-mix(in srgb,var(--tg3-received) 90%,transparent)
  )!important;
 color:var(--received-auto-text)!important;
}

body[data-ui-theme="temporal-glass"] .settings-preview-message.sent{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg3-sent) 96%,rgba(255,255,255,.04)),
   color-mix(in srgb,var(--tg3-sent) 88%,transparent)
  )!important;
 color:var(--sent-auto-text)!important;
}

body[data-ui-theme="temporal-glass"] .settings-preview-message::before{
 content:""!important;
 display:block!important;
 position:absolute!important;
 inset:0!important;
 z-index:-1!important;
 pointer-events:none!important;
 border-radius:inherit!important;
 background:
  linear-gradient(180deg,
   rgba(255,255,255,.20) 0,
   rgba(255,255,255,.075) 18%,
   rgba(255,255,255,.018) 44%,
   transparent 66%),
  radial-gradient(95% 75% at 18% 0%,rgba(255,255,255,.20),transparent 62%)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .settings-preview-message::before{
 background:
  linear-gradient(180deg,
   rgba(255,255,255,.095) 0,
   rgba(255,255,255,.028) 22%,
   transparent 62%),
  radial-gradient(95% 75% at 18% 0%,rgba(255,255,255,.085),transparent 64%)!important;
}

/* Preview bubble shape follows the same chat preference. */
body[data-ui-theme="temporal-glass"][data-bubble=modern] .settings-preview-message.received{
 border-radius:17px 17px 17px 4px!important;
}
body[data-ui-theme="temporal-glass"][data-bubble=modern] .settings-preview-message.sent{
 border-radius:17px 17px 4px 17px!important;
}
body[data-ui-theme="temporal-glass"][data-bubble=rounded] .settings-preview-message{
 border-radius:25px!important;
}
body[data-ui-theme="temporal-glass"][data-bubble=compact] .settings-preview-message{
 border-radius:9px!important;
}

/* Controls */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] :is(
 .settings-segment,
 .palette-trigger,
 .visual-choice,
 .identity-choice
){
 border:1px solid rgba(255,255,255,.56)!important;
 background:rgba(255,255,255,.085)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.42),
  inset 0 -1px 0 rgba(100,116,139,.06),
  0 5px 14px rgba(15,23,42,.045)!important;
 backdrop-filter:blur(13px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(13px) saturate(1.12)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-segment{
 border-radius:15px!important;
 padding:4px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-segment button{
 border-radius:11px!important;
 color:var(--text-soft)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-segment button.selected{
 background:color-mix(in srgb,var(--brand) 10%,rgba(255,255,255,.11))!important;
 color:var(--brand)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.38),
  0 3px 9px rgba(15,23,42,.045)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .visual-choice.selected,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .identity-choice.selected{
 border-color:color-mix(in srgb,var(--brand) 32%,rgba(255,255,255,.52))!important;
 background:color-mix(in srgb,var(--brand) 9%,rgba(255,255,255,.085))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.42),
  0 0 0 2px color-mix(in srgb,var(--brand) 7%,transparent),
  0 5px 14px rgba(15,23,42,.045)!important;
}

/* Palette dropdown itself should be a glass picker. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .palette-menu{
 border-color:rgba(255,255,255,.62)!important;
 background:rgba(235,240,244,.42)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.80),
  0 18px 46px rgba(15,23,42,.14)!important;
 backdrop-filter:blur(22px) saturate(1.18)!important;
 -webkit-backdrop-filter:blur(22px) saturate(1.18)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .palette-option{
 border:1px solid transparent;
}
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .palette-option:hover,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .palette-option.selected{
 border-color:rgba(255,255,255,.40)!important;
 background:rgba(255,255,255,.11)!important;
}

/* Buttons in Settings */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-actions .btn,
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-link-card>.btn{
 border:1px solid rgba(255,255,255,.60)!important;
 background:rgba(255,255,255,.09)!important;
 color:var(--text)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.46),
  0 5px 14px rgba(15,23,42,.045)!important;
 backdrop-filter:blur(13px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(13px) saturate(1.12)!important;
}

/* Dark Settings recipe */
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] :is(
 .settings-preview,
 .settings-group
){
 border-color:rgba(255,255,255,.125)!important;
 background:rgba(8,13,18,.27)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.10),
  inset 0 -1px 0 rgba(0,0,0,.18),
  0 14px 36px rgba(0,0,0,.16)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] :is(
 .settings-segment,
 .palette-trigger,
 .visual-choice,
 .identity-choice,
 .settings-actions .btn,
 .settings-link-card>.btn
){
 border-color:rgba(255,255,255,.085)!important;
 background:rgba(255,255,255,.017)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.045),
  0 5px 14px rgba(0,0,0,.09)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .palette-menu{
 border-color:rgba(255,255,255,.11)!important;
 background:rgba(10,16,21,.66)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.08),
  0 18px 46px rgba(0,0,0,.26)!important;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] :is(
  .settings-preview,
  .settings-group
 ){
  border-radius:20px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-chat{
  padding:18px 14px 20px!important;
 }
}


/* Stage 10.8 Settings QA1 — reduce oversized frosting and give Preview the SAME
   ambient chat canvas so identical bubble material renders identically. */

/* Settings cards should match the quieter glass used by Explore/Memory. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-group{
 border-color:rgba(255,255,255,.56)!important;
 background:rgba(255,255,255,.085)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.46),
  inset 0 -1px 0 rgba(100,116,139,.06),
  0 10px 26px rgba(15,23,42,.065)!important;
 backdrop-filter:blur(15px) saturate(1.13)!important;
 -webkit-backdrop-filter:blur(15px) saturate(1.13)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-group::before{
 background:
  radial-gradient(114% 160% at 8% -38%,rgba(255,255,255,.30),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.006) 50%,transparent)!important;
}

/* Preview shell stays glass, but its conversation area uses the exact chat ambient field. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview{
 border-color:rgba(255,255,255,.58)!important;
 background:rgba(255,255,255,.075)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.48),
  0 10px 28px rgba(15,23,42,.07)!important;
 backdrop-filter:blur(15px) saturate(1.13)!important;
 -webkit-backdrop-filter:blur(15px) saturate(1.13)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview::before{
 background:
  radial-gradient(114% 160% at 8% -38%,rgba(255,255,255,.24),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.035),transparent 52%)!important;
}

/* Exact chat-canvas environment: glass bubbles now refract the same palette field as chat. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="settings"] .settings-preview-chat{
 background:
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 70%),
  radial-gradient(70% 38% at 92% 62%,rgba(150,175,195,.10),transparent 72%),
  linear-gradient(180deg,rgba(248,250,247,.90),rgba(242,247,242,.82))!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .settings-preview-chat{
 background:
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 72%),
  radial-gradient(70% 40% at 92% 64%,rgba(85,115,130,.075),transparent 74%),
  linear-gradient(180deg,rgba(6,13,10,.94),rgba(8,15,12,.90))!important;
}

/* Header should not read as a separate frosted slab. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-top{
 background:rgba(255,255,255,.028)!important;
 border-bottom-color:rgba(255,255,255,.11)!important;
 box-shadow:none!important;
 backdrop-filter:blur(10px) saturate(1.08)!important;
 -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
}

/* Dark Settings: same restrained card material as the other approved tabs. */
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .settings-group{
 border-color:rgba(255,255,255,.085)!important;
 background:rgba(255,255,255,.018)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.045),
  inset 0 -1px 0 rgba(0,0,0,.14),
  0 9px 24px rgba(0,0,0,.12)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .settings-group::before{
 background:
  radial-gradient(114% 160% at 8% -38%,rgba(255,255,255,.055),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.010),transparent 52%)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .settings-preview{
 border-color:rgba(255,255,255,.09)!important;
 background:rgba(255,255,255,.015)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.05),
  0 10px 28px rgba(0,0,0,.13)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .settings-preview::before{
 background:
  radial-gradient(114% 160% at 8% -38%,rgba(255,255,255,.045),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.008),transparent 52%)!important;
}


/* Stage 10.8 Settings QA2 — restore Stage 9.2 behavior and reuse live chat bubble CSS.
   Glass remains a visual skin only; geometry and control behavior stay on the proven baseline. */

/* Restore the sticky preview behavior that Stage 10.8 accidentally overrode. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview{
 position:sticky!important;
 top:8px!important;
 z-index:18!important;
}
@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview{
  top:6px!important;
 }
}

/* The preview now uses real .message > .bubble markup inside a mini chat-stage.
   Neutralize chat-stage container geometry only; bubble/message selectors remain live. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-live{
 display:block!important;
 position:relative!important;
 min-height:0!important;
 overflow:visible!important;
 padding:18px 14px 20px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-live-message{
 width:100%!important;
 margin:18px 0 6px!important;
 align-items:flex-end!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-live-message .bubble{
 max-width:82%!important;
 pointer-events:none!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-live-message .settings-preview-sender{
 position:absolute;
 top:-14px;
 left:0;
 color:var(--text-soft);
 font-size:10px;
 font-weight:700;
 opacity:.82;
 pointer-events:none;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-live-message.mine .settings-preview-sender{
 left:auto;
 right:0;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-live-message .message-text{
 font-size:calc(var(--size) * .9)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-live-message .bubble-footer{
 font-size:10px!important;
}

/* The old custom preview bubble class is no longer rendered; keep it inert if stale DOM exists. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-message{
 display:none!important;
}

/* Restore proven Settings control geometry. Glass only decorates outer surfaces. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-segment{
 display:grid!important;
 grid-auto-flow:column!important;
 grid-auto-columns:1fr!important;
 gap:4px!important;
 padding:4px!important;
 border-radius:14px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-segment button{
 min-width:0!important;
 border:0!important;
 border-radius:10px!important;
 padding:10px 8px!important;
 background:transparent!important;
 color:var(--text-soft)!important;
 font-size:12px!important;
 font-weight:750!important;
 box-shadow:none!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-segment button.selected{
 background:color-mix(in srgb,var(--brand) 10%,rgba(255,255,255,.10))!important;
 color:var(--brand)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.24),
  0 2px 8px rgba(15,23,42,.04)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] :is(
 .bubble-style-picker,
 .gradient-style-picker,
 .background-picker
){
 display:grid!important;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:9px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .visual-choice{
 min-width:0!important;
 display:grid!important;
 gap:8px!important;
 justify-items:center!important;
 border-radius:15px!important;
 padding:11px 8px!important;
 color:var(--text)!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .visual-choice>strong{
 font-size:11px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .palette-trigger{
 width:100%!important;
 display:grid!important;
 grid-template-columns:52px minmax(0,1fr) 24px!important;
 align-items:center!important;
 gap:11px!important;
 padding:10px 11px!important;
 text-align:left!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .identity-choice{
 width:100%!important;
 display:grid!important;
 grid-template-columns:20px minmax(0,1fr)!important;
 align-items:center!important;
 gap:11px!important;
 padding:12px!important;
 text-align:left!important;
}

/* Keep dropdown behavior/positioning exactly as before; only apply the approved glass skin. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .antara-palette-picker{
 position:relative!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .palette-menu{
 position:absolute!important;
 z-index:50!important;
 top:calc(100% + 7px)!important;
 left:0!important;
 right:0!important;
 bottom:auto!important;
 display:grid!important;
 gap:5px!important;
 max-height:min(52vh,360px)!important;
 overflow:auto!important;
 padding:7px!important;
 border-radius:17px!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .palette-menu[hidden]{
 display:none!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .palette-option{
 display:grid!important;
 grid-template-columns:44px minmax(0,1fr) 18px!important;
 align-items:center!important;
 gap:10px!important;
 width:100%!important;
 padding:8px!important;
 text-align:left!important;
}

@media(max-width:760px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-segment button{
  padding:9px 5px!important;
  font-size:11px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .visual-choice{
  padding:10px 6px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .palette-menu{
  position:fixed!important;
  left:14px!important;
  right:14px!important;
  top:auto!important;
  bottom:calc(76px + env(safe-area-inset-bottom))!important;
  max-height:46vh!important;
  border-radius:20px!important;
  padding:8px!important;
 }
}

@media(max-width:420px){
 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] :is(
  .bubble-style-picker,
  .gradient-style-picker,
  .background-picker
 ){
  gap:6px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .visual-choice{
  padding-inline:5px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .visual-choice>strong{
  font-size:10px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-segment{
  gap:2px!important;
 }

 body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-segment button{
  font-size:10.5px!important;
 }
}


/* Stage 10.8 Settings QA3 — centered palette picker, explicit selected states,
   and working Temporal Glass chat backgrounds. */

/* Palette picker: centered floating glass card on all compact/mobile layouts. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .palette-menu{
 position:fixed!important;
 z-index:120!important;
 left:50%!important;
 right:auto!important;
 top:50%!important;
 bottom:auto!important;
 width:min(420px,calc(100vw - 36px))!important;
 max-height:min(68dvh,520px)!important;
 transform:translate(-50%,-50%)!important;
 padding:9px!important;
 border-radius:22px!important;
 overflow:auto!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .palette-menu[hidden]{
 display:none!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .antara-palette-picker.open::after{
 content:"";
 position:fixed;
 inset:0;
 z-index:110;
 background:rgba(5,10,14,.24);
 backdrop-filter:blur(4px);
 -webkit-backdrop-filter:blur(4px);
 pointer-events:none;
}

/* Palette card stays above its own dim layer. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .antara-palette-picker.open .palette-menu{
 z-index:121!important;
}

/* Strong selected state: match the clarity of Mode tampilan. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .visual-choice{
 position:relative;
 overflow:hidden;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .visual-choice.selected{
 border-color:color-mix(in srgb,var(--brand) 44%,rgba(255,255,255,.48))!important;
 background:color-mix(in srgb,var(--brand) 16%,rgba(255,255,255,.09))!important;
 color:var(--brand)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.30),
  0 0 0 2px color-mix(in srgb,var(--brand) 14%,transparent),
  0 6px 16px color-mix(in srgb,var(--brand) 8%,rgba(15,23,42,.05))!important;
}

body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .visual-choice.selected::after{
 content:"✓";
 position:absolute;
 top:7px;
 right:8px;
 width:18px;
 height:18px;
 display:grid;
 place-items:center;
 border-radius:999px;
 background:var(--brand);
 color:var(--brand-auto-text,#fff);
 font-size:11px;
 font-weight:900;
 box-shadow:0 2px 7px color-mix(in srgb,var(--brand) 24%,transparent);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .visual-choice.selected{
 border-color:color-mix(in srgb,var(--brand) 40%,rgba(255,255,255,.09))!important;
 background:color-mix(in srgb,var(--brand) 14%,rgba(255,255,255,.018))!important;
}

/* Temporal Glass conversation background preference:
   pattern layer sits above the approved ambient canvas instead of replacing it. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .chat-scroll.dots{
 background:
  radial-gradient(color-mix(in srgb,var(--brand) 16%,var(--hairline)) 1px,transparent 1px),
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 70%),
  radial-gradient(70% 38% at 92% 62%,rgba(150,175,195,.10),transparent 72%),
  linear-gradient(180deg,rgba(248,250,247,.90),rgba(242,247,242,.82))!important;
 background-size:20px 20px,auto,auto,auto!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .chat-scroll.ruled{
 background:
  repeating-linear-gradient(
   to bottom,
   color-mix(in srgb,var(--brand) 11%,var(--hairline)) 0 1px,
   transparent 1px 32px
  ),
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 70%),
  radial-gradient(70% 38% at 92% 62%,rgba(150,175,195,.10),transparent 72%),
  linear-gradient(180deg,rgba(248,250,247,.90),rgba(242,247,242,.82))!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .chat-scroll.dots{
 background:
  radial-gradient(color-mix(in srgb,var(--brand) 18%,rgba(255,255,255,.11)) 1px,transparent 1px),
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 72%),
  radial-gradient(70% 40% at 92% 64%,rgba(85,115,130,.075),transparent 74%),
  linear-gradient(180deg,rgba(6,13,10,.94),rgba(8,15,12,.90))!important;
 background-size:20px 20px,auto,auto,auto!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .chat-stage .chat-scroll.ruled{
 background:
  repeating-linear-gradient(
   to bottom,
   color-mix(in srgb,var(--brand) 13%,rgba(255,255,255,.08)) 0 1px,
   transparent 1px 32px
  ),
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 72%),
  radial-gradient(70% 40% at 92% 64%,rgba(85,115,130,.075),transparent 74%),
  linear-gradient(180deg,rgba(6,13,10,.94),rgba(8,15,12,.90))!important;
}

/* Settings preview mirrors the same background preference immediately. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .settings-preview.dots .settings-preview-chat{
 background:
  radial-gradient(color-mix(in srgb,var(--brand) 16%,var(--hairline)) 1px,transparent 1px),
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 70%),
  radial-gradient(70% 38% at 92% 62%,rgba(150,175,195,.10),transparent 72%),
  linear-gradient(180deg,rgba(248,250,247,.90),rgba(242,247,242,.82))!important;
 background-size:20px 20px,auto,auto,auto!important;
}

body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .settings-preview.ruled .settings-preview-chat{
 background:
  repeating-linear-gradient(
   to bottom,
   color-mix(in srgb,var(--brand) 11%,var(--hairline)) 0 1px,
   transparent 1px 32px
  ),
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 70%),
  radial-gradient(70% 38% at 92% 62%,rgba(150,175,195,.10),transparent 72%),
  linear-gradient(180deg,rgba(248,250,247,.90),rgba(242,247,242,.82))!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .settings-preview.dots .settings-preview-chat{
 background:
  radial-gradient(color-mix(in srgb,var(--brand) 18%,rgba(255,255,255,.11)) 1px,transparent 1px),
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 72%),
  radial-gradient(70% 40% at 92% 64%,rgba(85,115,130,.075),transparent 74%),
  linear-gradient(180deg,rgba(6,13,10,.94),rgba(8,15,12,.90))!important;
 background-size:20px 20px,auto,auto,auto!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .settings-preview.ruled .settings-preview-chat{
 background:
  repeating-linear-gradient(
   to bottom,
   color-mix(in srgb,var(--brand) 13%,rgba(255,255,255,.08)) 0 1px,
   transparent 1px 32px
  ),
  radial-gradient(78% 42% at 8% 18%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 72%),
  radial-gradient(70% 40% at 92% 64%,rgba(85,115,130,.075),transparent 74%),
  linear-gradient(180deg,rgba(6,13,10,.94),rgba(8,15,12,.90))!important;
}


/* Stage 10.8 Settings QA4 — stable in-place controls, real TG gradient variants,
   stronger light atmosphere, and glass visual-choice cards in dark mode. */

/* Final Temporal Glass gradient preference winners.
   These sit after the base TG bubble recipe so Halus/Tegas/Rata actually apply. */
body[data-ui-theme="temporal-glass"][data-gradient=soft] .chat-stage .message:not(.mine):not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg3-received) 94%,rgba(255,255,255,.035)),
   color-mix(in srgb,var(--tg3-received) 84%,transparent)
  )!important;
}
body[data-ui-theme="temporal-glass"][data-gradient=soft] .chat-stage .message.mine:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg3-sent) 94%,rgba(255,255,255,.035)),
   color-mix(in srgb,var(--tg3-sent) 84%,transparent)
  )!important;
}

body[data-ui-theme="temporal-glass"][data-gradient=vivid] .chat-stage .message:not(.mine):not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(128deg,
   color-mix(in srgb,var(--received-start) 84%,var(--tg3-received)),
   color-mix(in srgb,var(--received-end) 78%,var(--tg3-received))
  )!important;
}
body[data-ui-theme="temporal-glass"][data-gradient=vivid] .chat-stage .message.mine:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(128deg,
   color-mix(in srgb,var(--sent-start) 86%,var(--tg3-sent)),
   color-mix(in srgb,var(--sent-end) 80%,var(--tg3-sent))
  )!important;
}

body[data-ui-theme="temporal-glass"][data-gradient=off] .chat-stage .message:not(.mine):not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:color-mix(in srgb,var(--received-start) 72%,var(--tg3-received))!important;
}
body[data-ui-theme="temporal-glass"][data-gradient=off] .chat-stage .message.mine:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:color-mix(in srgb,var(--sent-start) 78%,var(--tg3-sent))!important;
}

/* Settings light mode needs visible palette atmosphere, not a white sheet. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="settings"] .primary-page-surface{
 background:
  radial-gradient(88% 58% at 10% -8%,color-mix(in srgb,var(--brand) 15%,transparent),transparent 68%),
  radial-gradient(74% 48% at 94% 30%,color-mix(in srgb,var(--brand-soft) 58%,white 42%),transparent 72%),
  radial-gradient(68% 44% at 18% 82%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 75%),
  linear-gradient(
   180deg,
   color-mix(in srgb,var(--temporal-light-canvas) 90%,white 10%),
   var(--temporal-light-canvas)
  )!important;
}
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="settings"] .content-scroll{
 background:
  radial-gradient(76% 46% at 9% 4%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 70%),
  radial-gradient(68% 42% at 94% 28%,color-mix(in srgb,var(--brand-soft) 56%,white 44%),transparent 72%),
  transparent!important;
}

/* Light Settings surfaces: visibly translucent with stronger rim. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .primary-pager-page[data-primary-page="settings"] :is(
 .settings-group,
 .settings-preview,
 .settings-segment,
 .palette-trigger,
 .visual-choice,
 .identity-choice
){
 border-color:rgba(255,255,255,.80)!important;
 background:rgba(255,255,255,.24)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.92),
  inset 0 -1px 0 rgba(100,116,139,.08),
  0 8px 22px rgba(30,41,59,.07)!important;
 backdrop-filter:blur(17px) saturate(1.16)!important;
 -webkit-backdrop-filter:blur(17px) saturate(1.16)!important;
}

/* Dark visual-choice cards should look like actual glass, not flat outlined tiles. */
body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .visual-choice{
 border:1px solid rgba(255,255,255,.105)!important;
 background:
  linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.010))!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.065),
  inset 0 -1px 0 rgba(0,0,0,.16),
  0 7px 18px rgba(0,0,0,.12)!important;
 backdrop-filter:blur(15px) saturate(1.14)!important;
 -webkit-backdrop-filter:blur(15px) saturate(1.14)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .visual-choice::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 border-radius:inherit;
 pointer-events:none;
 background:
  radial-gradient(112% 150% at 8% -36%,rgba(255,255,255,.055),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.010),transparent 54%);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .primary-pager-page[data-primary-page="settings"] .visual-choice.selected{
 border-color:color-mix(in srgb,var(--brand) 38%,rgba(255,255,255,.11))!important;
 background:
  linear-gradient(
   180deg,
   color-mix(in srgb,var(--brand) 12%,rgba(255,255,255,.025)),
   color-mix(in srgb,var(--brand) 7%,rgba(255,255,255,.012))
  )!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.075),
  0 0 0 2px color-mix(in srgb,var(--brand) 12%,transparent),
  0 8px 20px rgba(0,0,0,.14)!important;
}

/* Preview uses the same live bubble CSS, so gradient prefs update immediately via body dataset. */


/* Stage 10.8 Settings QA5 — soft gradient keeps approved bubble opacity,
   while remaining visibly softer than Tegas. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark])[data-gradient=soft] .chat-stage .message:not(.mine):not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--received-start) 68%,rgba(255,255,255,.80)),
   color-mix(in srgb,var(--received-end) 56%,rgba(232,238,242,.74))
  )!important;
}
body[data-ui-theme="temporal-glass"]:not([data-theme=dark])[data-gradient=soft] .chat-stage .message.mine:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--sent-start) 72%,rgba(255,255,255,.22)),
   color-mix(in srgb,var(--sent-end) 64%,rgba(255,255,255,.14))
  )!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark][data-gradient=soft] .chat-stage .message:not(.mine):not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--received-start) 70%,rgba(255,255,255,.060)),
   color-mix(in srgb,var(--received-end) 68%,rgba(5,10,14,.20))
  )!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark][data-gradient=soft] .chat-stage .message.mine:not(.media-message):not(.sticker-message):not(.captioned-media-message) .bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--sent-start) 78%,rgba(255,255,255,.070)),
   color-mix(in srgb,var(--sent-end) 72%,rgba(5,10,14,.12))
  )!important;
}


/* Stage 10.8 Settings QA6 — Gaya warna is global:
   Memory Reader and Context Reader follow the same Halus / Tegas / Rata recipe as chat. */

/* HALUS */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark])[data-gradient=soft] .memory-reader-message:not(.mine) .memory-reader-bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--received-start) 68%,rgba(255,255,255,.80)),
   color-mix(in srgb,var(--received-end) 56%,rgba(232,238,242,.74))
  )!important;
}
body[data-ui-theme="temporal-glass"]:not([data-theme=dark])[data-gradient=soft] .memory-reader-message.mine .memory-reader-bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--sent-start) 72%,rgba(255,255,255,.22)),
   color-mix(in srgb,var(--sent-end) 64%,rgba(255,255,255,.14))
  )!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark][data-gradient=soft] .memory-reader-message:not(.mine) .memory-reader-bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--received-start) 70%,rgba(255,255,255,.060)),
   color-mix(in srgb,var(--received-end) 68%,rgba(5,10,14,.20))
  )!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark][data-gradient=soft] .memory-reader-message.mine .memory-reader-bubble{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--sent-start) 78%,rgba(255,255,255,.070)),
   color-mix(in srgb,var(--sent-end) 72%,rgba(5,10,14,.12))
  )!important;
}

/* TEGAS */
body[data-ui-theme="temporal-glass"][data-gradient=vivid] .memory-reader-message:not(.mine) .memory-reader-bubble{
 background:
  linear-gradient(128deg,
   color-mix(in srgb,var(--received-start) 84%,var(--tg3-received)),
   color-mix(in srgb,var(--received-end) 78%,var(--tg3-received))
  )!important;
}
body[data-ui-theme="temporal-glass"][data-gradient=vivid] .memory-reader-message.mine .memory-reader-bubble{
 background:
  linear-gradient(128deg,
   color-mix(in srgb,var(--sent-start) 86%,var(--tg3-sent)),
   color-mix(in srgb,var(--sent-end) 80%,var(--tg3-sent))
  )!important;
}

/* RATA */
body[data-ui-theme="temporal-glass"][data-gradient=off] .memory-reader-message:not(.mine) .memory-reader-bubble{
 background:color-mix(in srgb,var(--received-start) 72%,var(--tg3-received))!important;
}
body[data-ui-theme="temporal-glass"][data-gradient=off] .memory-reader-message.mine .memory-reader-bubble{
 background:color-mix(in srgb,var(--sent-start) 78%,var(--tg3-sent))!important;
}


/* Stage 10.8 Settings QA7 — informational/modal surfaces use the approved Temporal Glass family. */

/* Shared inner glass surfaces used by install, import/help, storage/privacy and About. */
body[data-ui-theme="temporal-glass"] dialog :is(
 .guide-note,
 .guide-intro,
 .guide-choice,
 .device-card,
 .privacy-hero,
 .storage-meter,
 .storage-facts>div,
 .compat-list,
 .import-error,
 .diagnostic-score,
 .diagnostic-problems,
 .restore-option,
 .confirm-check
){
 position:relative;
 isolation:isolate;
 overflow:hidden;
 border:1px solid rgba(255,255,255,.46)!important;
 background:rgba(255,255,255,.065)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.32),
  inset 0 -1px 0 rgba(100,116,139,.055),
  0 6px 16px rgba(15,23,42,.045)!important;
 backdrop-filter:blur(13px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(13px) saturate(1.12)!important;
}

body[data-ui-theme="temporal-glass"] dialog :is(
 .guide-note,
 .guide-intro,
 .guide-choice,
 .device-card,
 .privacy-hero,
 .storage-meter,
 .storage-facts>div,
 .compat-list,
 .import-error,
 .diagnostic-score,
 .diagnostic-problems,
 .restore-option,
 .confirm-check
)::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-1;
 pointer-events:none;
 border-radius:inherit;
 background:
  radial-gradient(112% 150% at 8% -36%,rgba(255,255,255,.26),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.045),transparent 54%);
}

/* Guide/install callouts retain semantic accent, but as tint rather than solid slab. */
body[data-ui-theme="temporal-glass"] dialog .guide-note{
 border-left:3px solid var(--accent)!important;
 background:color-mix(in srgb,var(--brand) 6%,rgba(255,255,255,.055))!important;
}
body[data-ui-theme="temporal-glass"] dialog .guide-note.warning{
 border-left-color:#e18b2b!important;
 background:color-mix(in srgb,#e18b2b 5%,rgba(255,255,255,.05))!important;
}

/* Privacy hero gets a subtle branded tint, still transparent. */
body[data-ui-theme="temporal-glass"] dialog .privacy-hero{
 border-color:color-mix(in srgb,var(--brand) 22%,rgba(255,255,255,.42))!important;
 background:color-mix(in srgb,var(--brand) 7%,rgba(255,255,255,.055))!important;
}

/* Storage statistics should read as small glass tiles. */
body[data-ui-theme="temporal-glass"] dialog .storage-facts>div{
 border-radius:15px!important;
 background:rgba(255,255,255,.050)!important;
}

/* Capability list: container glass, rows transparent within it. */
body[data-ui-theme="temporal-glass"] dialog .compat-list{
 border-radius:16px!important;
}
body[data-ui-theme="temporal-glass"] dialog .compat-row{
 background:transparent!important;
}
body[data-ui-theme="temporal-glass"] dialog .compat-row+.compat-row{
 border-top-color:rgba(255,255,255,.09)!important;
}

/* Privacy sections should not become flat panels; their action buttons already inherit global glass. */
body[data-ui-theme="temporal-glass"] dialog .privacy-section{
 border-top-color:rgba(255,255,255,.10)!important;
}

/* Guide source cards / device cards get tactile glass controls. */
body[data-ui-theme="temporal-glass"] dialog :is(.guide-choice,.device-card){
 color:var(--text)!important;
 transition:transform .12s ease,border-color .16s ease,background .16s ease;
}
body[data-ui-theme="temporal-glass"] dialog :is(.guide-choice,.device-card):active{
 transform:scale(.985);
}

/* Guide shield itself becomes a small inset glass tile. */
body[data-ui-theme="temporal-glass"] dialog .guide-shield{
 border:1px solid rgba(255,255,255,.40)!important;
 background:rgba(255,255,255,.060)!important;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.24)!important;
 backdrop-filter:blur(10px)!important;
 -webkit-backdrop-filter:blur(10px)!important;
}

/* Light-mode modal inners need enough palette environment to make glass legible. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) dialog :is(
 .guide-note,
 .guide-intro,
 .guide-choice,
 .device-card,
 .privacy-hero,
 .storage-meter,
 .storage-facts>div,
 .compat-list
){
 border-color:rgba(255,255,255,.78)!important;
 background:rgba(255,255,255,.22)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.90),
  inset 0 -1px 0 rgba(100,116,139,.07),
  0 7px 18px rgba(30,41,59,.065)!important;
}

/* Dark-mode recipe stays restrained but visibly glass. */
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog :is(
 .guide-note,
 .guide-intro,
 .guide-choice,
 .device-card,
 .privacy-hero,
 .storage-meter,
 .storage-facts>div,
 .compat-list,
 .import-error,
 .diagnostic-score,
 .diagnostic-problems,
 .restore-option,
 .confirm-check
){
 border-color:rgba(255,255,255,.085)!important;
 background:rgba(255,255,255,.017)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.045),
  inset 0 -1px 0 rgba(0,0,0,.14),
  0 6px 16px rgba(0,0,0,.10)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog :is(
 .guide-note,
 .guide-intro,
 .guide-choice,
 .device-card,
 .privacy-hero,
 .storage-meter,
 .storage-facts>div,
 .compat-list
)::before{
 background:
  radial-gradient(112% 150% at 8% -36%,rgba(255,255,255,.050),transparent 48%),
  linear-gradient(180deg,rgba(255,255,255,.010),transparent 54%);
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog .guide-note{
 background:color-mix(in srgb,var(--brand) 7%,rgba(255,255,255,.014))!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark] dialog .privacy-hero{
 background:color-mix(in srgb,var(--brand) 8%,rgba(255,255,255,.014))!important;
}

/* Utility/full-width buttons in these informational modals should read like floating glass controls. */
body[data-ui-theme="temporal-glass"] dialog :is(
 .official-link,
 .guide-choice-grid + .btn,
 .compat-list ~ .btn,
 .privacy-section .btn
){
 border:1px solid rgba(255,255,255,.52)!important;
 background:rgba(255,255,255,.075)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.34),
  0 5px 14px rgba(15,23,42,.045)!important;
 backdrop-filter:blur(13px) saturate(1.12)!important;
 -webkit-backdrop-filter:blur(13px) saturate(1.12)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] dialog :is(
 .official-link,
 .guide-choice-grid + .btn,
 .compat-list ~ .btn,
 .privacy-section .btn
){
 border-color:rgba(255,255,255,.080)!important;
 background:rgba(255,255,255,.017)!important;
 box-shadow:
  inset 0 1px 0 rgba(255,255,255,.045),
  0 5px 14px rgba(0,0,0,.09)!important;
}


/* Stage 10.8 staging fix — migrate Reader caption slab from legacy Stage 8
   colors to the same Temporal Glass material used by captioned media in Chat.
   CSS-only: renderer/markup/geometry remain untouched. */
body[data-ui-theme="temporal-glass"] .memory-reader-message.media-captioned .memory-reader-caption{
 isolation:isolate!important;
 overflow:hidden!important;
 box-sizing:border-box!important;
 border:1px solid var(--tg3-border)!important;
 border-top-color:var(--tg3-border)!important;
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg3-received) 96%,rgba(255,255,255,.04)),
   color-mix(in srgb,var(--tg3-received) 90%,transparent)
  )!important;
 color:var(--received-auto-text)!important;
 box-shadow:
  inset 0 1px 0 var(--tg3-edge-top),
  inset 1px 0 0 var(--tg3-edge-side),
  inset -1px 0 0 var(--tg3-edge-side),
  inset 0 -1px 0 color-mix(in srgb,var(--brand) 8%,var(--tg3-edge-side)),
  0 1px 0 rgba(255,255,255,.08),
  var(--tg3-depth)!important;
 backdrop-filter:blur(28px) saturate(1.16) contrast(1.045)!important;
 -webkit-backdrop-filter:blur(28px) saturate(1.16) contrast(1.045)!important;
}

body[data-ui-theme="temporal-glass"] .memory-reader-message.media-captioned.mine .memory-reader-caption{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--tg3-sent) 96%,rgba(255,255,255,.04)),
   color-mix(in srgb,var(--tg3-sent) 88%,transparent)
  )!important;
 color:var(--sent-auto-text)!important;
}

body[data-ui-theme="temporal-glass"] .memory-reader-message.media-captioned .memory-reader-caption::before{
 content:""!important;
 position:absolute!important;
 inset:0!important;
 z-index:-1!important;
 pointer-events:none!important;
 border-radius:inherit!important;
 background:
  radial-gradient(120% 110% at 10% -22%,
   rgba(255,255,255,.22),
   rgba(255,255,255,.06) 34%,
   transparent 58%),
  linear-gradient(180deg,
   rgba(255,255,255,.055),
   transparent 44%)!important;
}

body[data-ui-theme="temporal-glass"][data-theme=dark] .memory-reader-message.media-captioned .memory-reader-caption::before{
 background:
  radial-gradient(120% 110% at 10% -22%,
   rgba(255,255,255,.12),
   rgba(255,255,255,.025) 34%,
   transparent 60%),
  linear-gradient(180deg,
   rgba(255,255,255,.028),
   transparent 48%)!important;
}

body[data-ui-theme="temporal-glass"] .memory-reader-message.media-captioned .memory-reader-caption time{
 color:inherit!important;
 opacity:.70!important;
}

/* HALUS — exactly the already-approved Reader/chat soft recipe. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark])[data-gradient=soft] .memory-reader-message.media-captioned:not(.mine) .memory-reader-caption{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--received-start) 68%,rgba(255,255,255,.80)),
   color-mix(in srgb,var(--received-end) 56%,rgba(232,238,242,.74))
  )!important;
}
body[data-ui-theme="temporal-glass"]:not([data-theme=dark])[data-gradient=soft] .memory-reader-message.media-captioned.mine .memory-reader-caption{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--sent-start) 72%,rgba(255,255,255,.22)),
   color-mix(in srgb,var(--sent-end) 64%,rgba(255,255,255,.14))
  )!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark][data-gradient=soft] .memory-reader-message.media-captioned:not(.mine) .memory-reader-caption{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--received-start) 70%,rgba(255,255,255,.060)),
   color-mix(in srgb,var(--received-end) 68%,rgba(5,10,14,.20))
  )!important;
}
body[data-ui-theme="temporal-glass"][data-theme=dark][data-gradient=soft] .memory-reader-message.media-captioned.mine .memory-reader-caption{
 background:
  linear-gradient(145deg,
   color-mix(in srgb,var(--sent-start) 78%,rgba(255,255,255,.070)),
   color-mix(in srgb,var(--sent-end) 72%,rgba(5,10,14,.12))
  )!important;
}

/* TEGAS */
body[data-ui-theme="temporal-glass"][data-gradient=vivid] .memory-reader-message.media-captioned:not(.mine) .memory-reader-caption{
 background:
  linear-gradient(128deg,
   color-mix(in srgb,var(--received-start) 84%,var(--tg3-received)),
   color-mix(in srgb,var(--received-end) 78%,var(--tg3-received))
  )!important;
}
body[data-ui-theme="temporal-glass"][data-gradient=vivid] .memory-reader-message.media-captioned.mine .memory-reader-caption{
 background:
  linear-gradient(128deg,
   color-mix(in srgb,var(--sent-start) 86%,var(--tg3-sent)),
   color-mix(in srgb,var(--sent-end) 80%,var(--tg3-sent))
  )!important;
}

/* RATA */
body[data-ui-theme="temporal-glass"][data-gradient=off] .memory-reader-message.media-captioned:not(.mine) .memory-reader-caption{
 background:color-mix(in srgb,var(--received-start) 72%,var(--tg3-received))!important;
}
body[data-ui-theme="temporal-glass"][data-gradient=off] .memory-reader-message.media-captioned.mine .memory-reader-caption{
 background:color-mix(in srgb,var(--sent-start) 78%,var(--tg3-sent))!important;
}


/* Stage 10.8 staging fix — sticker-only messages stay frameless in Temporal Glass.
   A later incoming-message glass rule is more specific than the legacy sticker reset,
   so incoming stickers were accidentally receiving a bubble surface. */
body[data-ui-theme="temporal-glass"] .chat-stage .message.sticker-message .bubble{
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
 backdrop-filter:none!important;
 -webkit-backdrop-filter:none!important;
}

/* Sticker bubbles must not inherit optical/specular pseudo-surfaces. */
body[data-ui-theme="temporal-glass"] .chat-stage .message.sticker-message .bubble::before,
body[data-ui-theme="temporal-glass"] .chat-stage .message.sticker-message .bubble::after{
 content:none!important;
 display:none!important;
}


/* Stage 10.8 QA correction — light Temporal Glass sticker timestamp
   must outrank the generic incoming metadata rule and stay above sticker art. */
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .message.sticker-message:not(.mine) .bubble-footer,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .message.sticker-message.mine .bubble-footer{
 background:rgba(12,15,20,.68)!important;
 color:#fff!important;
 opacity:1!important;
 box-shadow:0 1px 4px rgba(0,0,0,.13)!important;
 backdrop-filter:blur(5px)!important;
 -webkit-backdrop-filter:blur(5px)!important;
 z-index:3!important;
}

/* Outgoing text is white in light mode for both supported UI themes.
   Explicit theme selectors intentionally outrank theme-specific auto-text rules. */
body[data-ui-theme="classic"]:not([data-theme=dark]) .chat-stage .message.mine:not(.sticker-message) .bubble,
body[data-ui-theme="classic"]:not([data-theme=dark]) .chat-stage .captioned-media-message.mine .media-caption,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .message.mine:not(.sticker-message) .bubble,
body[data-ui-theme="temporal-glass"]:not([data-theme=dark]) .chat-stage .captioned-media-message.mine .media-caption{
 color:#fff!important;
}


/* Stage 10.8 final Settings preview sender layout — names sit above their own bubbles
   in both Classic and Temporal Glass, independent from real-chat row geometry. */
.primary-pager-page[data-primary-page="settings"] .settings-preview-live-message{
 display:flex!important;
 flex-direction:column!important;
 justify-content:flex-start!important;
 align-items:flex-start!important;
 gap:4px!important;
}
.primary-pager-page[data-primary-page="settings"] .settings-preview-live-message.mine{
 align-items:flex-end!important;
}
.primary-pager-page[data-primary-page="settings"] .settings-preview-live-message .settings-preview-sender{
 position:static!important;
 inset:auto!important;
 display:block!important;
 margin:0 4px!important;
 color:var(--text-soft)!important;
 font-size:10px!important;
 line-height:1.2!important;
 font-weight:700!important;
 opacity:.82!important;
 pointer-events:none!important;
}
.primary-pager-page[data-primary-page="settings"] .settings-preview-live-message .bubble{
 margin-left:0!important;
 margin-right:0!important;
}


/* Stage 10.8 Settings preview — Temporal Glass sender-side alignment correction. */
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-live-message:not(.mine){
 align-items:flex-start!important;
}
body[data-ui-theme="temporal-glass"] .primary-pager-page[data-primary-page="settings"] .settings-preview-live-message.mine{
 align-items:flex-end!important;
}