/* Sphere follows the main app palette and the native 350 ms page motion. */
.offline-native-sphere-fab { position:fixed; right:20px; bottom:281px; z-index:2500; display:flex; align-items:center; justify-content:center; width:56px; height:56px; padding:0; border:0; border-radius:50%; background:linear-gradient(135deg,#34c759,#009e6f); color:#fff; box-shadow:0 8px 24px #009e6f55,inset 0 1px 0 #ffffff48; cursor:pointer; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(100px); transition:transform .35s cubic-bezier(.23,1,.32,1),opacity .35s cubic-bezier(.23,1,.32,1),visibility 0s linear .35s; -webkit-tap-highlight-color:transparent; }
.offline-native-favorites-fab.is-visible,.offline-native-myqr-fab.is-visible,.offline-native-sphere-fab.is-visible { opacity:.6; visibility:visible; pointer-events:auto; transform:translateX(0); transition-delay:0s; }
.offline-native-favorites-fab,.offline-native-myqr-fab { transition:transform .35s cubic-bezier(.23,1,.32,1),opacity .35s cubic-bezier(.23,1,.32,1),visibility 0s linear .35s; }
.offline-native-favorites-fab:active,.offline-native-myqr-fab:active,.offline-native-sphere-fab:active { opacity:.6; transform:scale(.92); }
.offline-native-sphere-fab svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.8; }
body.network-offline-visible .offline-native-sphere-fab { z-index:1000000; }
#ai-screen { position:fixed!important; inset:0!important; width:100%!important; height:100dvh!important; z-index:4000; display:none!important; flex-direction:column!important; justify-content:flex-start!important; align-items:stretch!important; background:var(--bg-app)!important; color:var(--text-dark); padding:calc(env(safe-area-inset-top) + 12px) 20px calc(env(safe-area-inset-bottom) + 12px); overflow:hidden; }
#ai-screen.active { display:flex!important; animation:sphere-in .35s cubic-bezier(.23,1,.32,1) both; }
#ai-screen.ai-closing { display:flex!important; pointer-events:none; animation:sphere-out .35s cubic-bezier(.23,1,.32,1) both; }
#ai-screen.screen,body.dark-theme #ai-screen.screen { background:var(--bg-app)!important; color:var(--text-dark)!important; }
body.glass-theme #ai-screen.screen,body.glass-theme .sphere-drawer { background:var(--media-viewer-bg)!important; }
#ai-screen .sphere-header #sphere-back { display:flex!important; }
.sphere-header { height:60px; flex:0 0 60px; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:6px; }
.sphere-titles { min-width:0; text-align:center; }
.sphere-titles h1 { margin:0 0 4px; font-size:21px; line-height:1.15; font-weight:700; }
.sphere-titles p { margin:0; font-size:12px; color:var(--text-gray); }
.sphere-icon { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:20px; background:transparent; color:var(--text-dark); cursor:pointer; }
.sphere-back { width:38px; height:38px; background:var(--input-bg); }
.sphere-icon svg { width:24px; height:24px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.sphere-voice { flex:1; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) min(260px,50dvh) minmax(0,1fr); }
.sphere-orb-slot { grid-row:2; display:flex; align-items:center; justify-content:center; }
#ai-orb { flex:none; display:block; width:min(200px,40dvh); height:min(200px,40dvh); margin:0; padding:0; border:0; border-radius:50%; background:radial-gradient(circle at 30% 30%,#007aff,#000514); box-shadow:0 0 42px #007aff44; transition:background .3s,box-shadow .3s; }
#ai-orb.listening { background:radial-gradient(circle at 30% 30%,#00e6f0,#000514); transform:none; }
#ai-orb.loading { background:radial-gradient(circle at 30% 30%,#8a5bff,#000514); box-shadow:0 0 46px #8a5bff66; }
#ai-orb.active { background:radial-gradient(circle at 30% 30%,#007aff,#000514); animation:none; }
.sphere-answer-scroll { grid-row:3; overflow:auto; min-height:0; overscroll-behavior:contain; padding:22px 8px 24px; }
#ai-status { color:var(--text-dark); font-size:18px; font-weight:400; line-height:1.5; padding:0; min-height:0; opacity:1; text-shadow:none; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; -webkit-user-select:text; }
#ai-screen #ai-status { color:var(--text-dark)!important; }
.sphere-sources { display:grid; gap:10px; margin-top:14px; font-size:13px; }
.sphere-sources:empty { display:none; }
.sphere-sources a { color:var(--blue-accent); overflow-wrap:anywhere; line-height:1.4; }
.sphere-drawer { position:absolute; inset:0; z-index:200; display:flex; flex-direction:column; padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px); border-radius:0; background:var(--bg-app); visibility:hidden; opacity:0; pointer-events:none; transform:translateX(30%); transition:transform .35s cubic-bezier(.23,1,.32,1),opacity .35s cubic-bezier(.23,1,.32,1),visibility 0s linear .35s; }
.sphere-drawer.is-open { visibility:visible; opacity:1; pointer-events:auto; transform:translateX(0); transition-delay:0s; }
.sphere-drawer-head { display:flex; align-items:center; gap:4px; flex:0 0 44px; margin-bottom:18px; }
.sphere-drawer-head h2 { flex:1; margin:0; font-size:25px; }
.sphere-symbol { font:400 34px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.sphere-chat-list,.sphere-transcript { overflow:auto; flex:1; min-height:0; overscroll-behavior:contain; }
.sphere-chat-card { display:flex; align-items:center; gap:10px; border-radius:18px; padding:14px; margin-bottom:9px; background:var(--bg-white); touch-action:pan-y; }
.sphere-chat-card.is-selected { background:color-mix(in srgb,var(--blue-accent) 12%,var(--bg-white)); }
.sphere-chat-preview { flex:1; min-width:0; padding:0; border:0; background:transparent; text-align:left; color:var(--text-dark); cursor:pointer; }
.sphere-chat-preview strong,.sphere-chat-preview span { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; line-height:1.35; }
.sphere-chat-preview strong { font-size:14px; font-weight:600; }
.sphere-chat-preview span { margin-top:6px; font-size:12px; color:var(--text-gray); }
.sphere-continue { display:flex; flex:none; align-items:center; gap:5px; padding:8px 4px; border:0; background:transparent; color:var(--blue-accent); cursor:pointer; font-size:12px; font-weight:600; }
.sphere-continue svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; }
.sphere-empty { padding:24px 0; color:var(--text-gray); font-size:15px; text-align:center; line-height:1.5; }
.sphere-message { border-radius:18px; padding:14px; margin-bottom:12px; margin-left:24px; background:var(--input-bg); overflow-wrap:anywhere; }
.sphere-message.from-user { margin-left:0; margin-right:24px; background:var(--bg-white); }
.sphere-message-label { font-size:11px; color:var(--text-gray); margin-bottom:5px; }
.sphere-message-text { font-size:16px; line-height:1.4; white-space:pre-wrap; user-select:text; -webkit-user-select:text; }
.sphere-message-text a { color:var(--blue-accent); }
#ai-screen [hidden] { display:none!important; }
#ai-screen button:focus-visible { outline:2px solid var(--blue-accent); outline-offset:3px; }
@keyframes sphere-in { from { transform:translateX(30%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes sphere-out { from { transform:translateX(0); opacity:1; } to { transform:translateX(30%); opacity:0; } }
@media(prefers-reduced-motion:reduce) { #ai-screen.active,#ai-screen.ai-closing { animation-duration:1ms; } .sphere-drawer { transition-duration:1ms; } }