:root { color-scheme: dark; --night:#070b13; --night-2:#0d1420; --panel:#111a28; --line:rgba(163,190,220,.2); --text:#eef5ff; --muted:#8291a6; --blue:#5d9bff; --cyan:#56e0d0; --orange:#ffb668; --shadow:0 22px 80px rgba(0,0,0,.35); }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; background:#05080e; color:var(--text); font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
button, input { font:inherit; }
button { border:0; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.assistant-app { position:relative; min-height:100svh; max-width:560px; margin:0 auto; overflow:hidden; background:radial-gradient(circle at 50% 44%, #101d31 0, var(--night) 43%, #05080e 100%); isolation:isolate; }
.assistant-app::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.2; pointer-events:none; background-image:linear-gradient(rgba(104,153,208,.1) 1px, transparent 1px),linear-gradient(90deg, rgba(104,153,208,.1) 1px, transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom, black, transparent 68%); }
.assistant-topbar, .assistant-bottombar { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:calc(13px + env(safe-area-inset-top)) 18px 12px; }
.assistant-topbar { justify-content:center; }
.assistant-bottombar { padding:12px 18px calc(14px + env(safe-area-inset-bottom)); }
.top-status { display:flex; align-items:center; gap:8px; color:#71849b; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.top-status-dot { width:5px; height:5px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.corner-action, .query-trigger { display:flex; align-items:center; gap:7px; min-width:76px; min-height:44px; padding:7px 9px; background:transparent; color:#a4b4c9; font-size:14px; letter-spacing:.02em; }
.corner-action:first-child { justify-content:flex-start; }
.assistant-topbar > .corner-action:last-child, .assistant-bottombar > .corner-action:last-child { justify-content:flex-end; }
.corner-action:active, .query-trigger:active { color:var(--text); transform:scale(.96); }
.icon { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.query-trigger { min-width:auto; color:#70839b; font-size:12px; border:1px solid rgba(149,181,215,.16); border-radius:999px; padding:8px 12px; }
.query-trigger .icon { width:16px; height:16px; }
.count-badge { display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:rgba(255,182,104,.18); color:var(--orange); font-size:10px; font-weight:600; }
.hidden, .hidden-field { display:none !important; }
.core-stage { position:relative; display:grid; place-items:center; height:min(69svh, 585px); min-height:430px; margin-top:-4px; }
#coreCanvas { position:absolute; inset:0; width:100%; height:100%; }
.core-hud { position:absolute; top:13%; z-index:1; display:flex; align-items:center; gap:10px; color:#58708b; font-size:9px; letter-spacing:.18em; }
.core-hud i { display:block; width:28px; height:1px; background:linear-gradient(90deg, transparent, var(--cyan), transparent); opacity:.75; }
.core-hud span:last-child { color:#6a9bc4; }
.core-copy { position:absolute; z-index:1; top:50%; width:100%; padding:0 32px; text-align:center; transform:translateY(37px); pointer-events:none; }
.core-status { display:inline-flex; align-items:center; gap:7px; color:var(--cyan); font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.core-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 14px currentColor; }
.core-copy h1 { margin:12px 0 5px; font-size:28px; font-weight:500; letter-spacing:.01em; }
.core-copy p { margin:0; color:var(--muted); font-size:13px; }
.core-button { position:relative; z-index:2; display:grid; place-items:center; width:104px; height:104px; margin-top:-98px; border-radius:50%; background:rgba(90,151,255,.06); box-shadow:0 0 0 1px rgba(108,176,255,.18), 0 0 38px rgba(76,159,255,.16); }
.core-button-ring, .core-button::before, .core-button::after { content:""; position:absolute; inset:-16px; border:1px solid rgba(92,168,255,.23); border-radius:50%; animation:orbit-pulse 3.4s ease-out infinite; }
.core-button::before { inset:-31px; border-color:rgba(86,224,208,.13); animation-delay:1.1s; }
.core-button::after { inset:-48px; border-color:rgba(93,155,255,.08); animation-delay:2.2s; }
.core-button-ring { inset:-6px; border-color:rgba(86,224,208,.4); animation:none; }
.mic-icon { position:relative; z-index:1; width:30px; height:30px; fill:none; stroke:var(--cyan); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 7px rgba(86,224,208,.75)); }
.core-button:active { transform:scale(.94); }
.core-button.listening { background:rgba(255,182,104,.12); box-shadow:0 0 0 1px rgba(255,182,104,.4), 0 0 54px rgba(255,182,104,.24); }
.core-button.listening .mic-icon { color:var(--orange); stroke:var(--orange); }
.core-button.listening::before, .core-button.listening::after, .core-button.listening .core-button-ring { border-color:rgba(255,182,104,.4); animation-duration:1.1s; }
@keyframes orbit-pulse { 0% { transform:scale(.86); opacity:.9; } 70%, 100% { transform:scale(1.08); opacity:0; } }
.camera-action { position:absolute; z-index:4; left:17px; top:38%; display:flex; flex-direction:column; align-items:center; gap:7px; width:70px; padding:0; background:transparent; color:#91a6bf; transform:translateY(-14px); }
.camera-orbit { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(86,224,208,.27); border-radius:50%; background:rgba(86,224,208,.06); }
.camera-orbit .icon { width:22px; height:22px; color:var(--cyan); }
.action-label { font-size:11px; white-space:nowrap; }
.camera-action:active .camera-orbit { background:rgba(86,224,208,.16); transform:scale(.93); }
.capture-dock { position:relative; z-index:3; padding:0 18px; }
.capture-form { display:flex; align-items:center; gap:10px; min-height:54px; border:1px solid rgba(160,190,220,.25); border-radius:18px; background:rgba(14,24,38,.82); box-shadow:0 9px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04); backdrop-filter:blur(16px); }
.capture-form input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); padding:0 0 0 17px; }
.capture-form input::placeholder { color:#74869d; }
.send-button { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; margin-right:5px; border-radius:14px; background:var(--blue); color:#07111e; }
.send-button .icon { width:20px; height:20px; stroke-width:1.8; }
.send-button:active { transform:scale(.93); }
.attachment-preview { min-height:0; color:#aec3da; font-size:11px; padding:0 6px; }
.attachment-preview:not(:empty) { min-height:26px; padding-bottom:7px; }
.attachment-preview small { color:var(--cyan); margin-left:7px; }
.form-message { min-height:18px; margin:6px 8px 0; color:var(--cyan); font-size:11px; text-align:center; }
.bottom-spacer { flex:1; }
.assistant-bottombar .corner-action { min-width:76px; flex-direction:column; gap:5px; color:#9db1c8; }
.assistant-bottombar .corner-action .icon { width:21px; height:21px; }
.assistant-bottombar .corner-action .camera-orbit { width:42px; height:42px; }
.assistant-bottombar .corner-action .camera-orbit .icon { width:20px; height:20px; }
.toast { position:absolute; z-index:20; left:50%; bottom:93px; padding:9px 14px; border:1px solid rgba(140,182,220,.2); border-radius:999px; background:rgba(17,29,45,.94); color:#dce9f7; font-size:12px; opacity:0; pointer-events:none; transform:translate(-50%, 8px); transition:.22s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.sheet-backdrop { position:fixed; inset:0; z-index:10; display:flex; align-items:flex-end; background:rgba(1,4,9,.65); backdrop-filter:blur(7px); }
.sheet-backdrop.hidden { display:none; }
.sheet { width:100%; max-width:560px; max-height:78svh; overflow:auto; border:1px solid rgba(161,193,224,.2); border-bottom:0; border-radius:26px 26px 0 0; background:#101a29; box-shadow:var(--shadow); }
.sheet-header { display:flex; align-items:flex-start; justify-content:space-between; padding:25px 22px 16px; border-bottom:1px solid var(--line); }
.sheet-kicker { display:block; color:#7187a2; font-size:11px; letter-spacing:.1em; }
.sheet-header h2 { margin:7px 0 0; font-size:22px; font-weight:500; }
.sheet-close, .dialog-close { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:rgba(157,190,224,.08); color:#9eb3cb; }
.sheet-content { padding:7px 22px 30px; }
.sheet-row { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:center; padding:15px 0; border-bottom:1px solid rgba(164,192,220,.11); }
.sheet-row:last-child { border-bottom:0; }
.sheet-row .icon-wrap { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(86,224,208,.24); border-radius:12px; color:var(--cyan); background:rgba(86,224,208,.05); }
.sheet-row strong { display:block; overflow:hidden; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.sheet-row span { display:block; margin-top:3px; color:var(--muted); font-size:12px; }
.sheet-row time { color:#8ea5bf; font-size:11px; white-space:nowrap; }
.sheet-empty { padding:40px 12px; color:var(--muted); text-align:center; }
.sheet-setting { display:flex; align-items:center; justify-content:space-between; padding:17px 0; border-bottom:1px solid rgba(164,192,220,.11); color:#bdcce0; }
.sheet-setting button { padding:8px 12px; border:1px solid rgba(93,155,255,.35); border-radius:10px; background:rgba(93,155,255,.1); color:var(--blue); }
.query-dialog { width:min(540px, calc(100vw - 28px)); max-height:min(720px, calc(100svh - 40px)); border:1px solid rgba(161,193,224,.24); border-radius:22px; padding:0; color:var(--text); background:#101a29; box-shadow:var(--shadow); }
.query-dialog::backdrop { background:rgba(1,4,9,.7); backdrop-filter:blur(7px); }
.query-dialog-head { display:flex; align-items:flex-start; justify-content:space-between; padding:23px 20px 15px; border-bottom:1px solid var(--line); }
.query-dialog h2 { margin:7px 0 0; font-size:21px; font-weight:500; }
.query-input { display:flex; align-items:center; gap:9px; height:48px; margin:16px 20px; padding:0 13px; border:1px solid rgba(160,190,220,.26); border-radius:14px; background:#0a111c; }
.query-input input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text); }
.query-input input::placeholder { color:#72849c; }
.query-input .icon { width:18px; height:18px; color:#829ab5; }
.query-results { max-height:510px; overflow:auto; padding:0 20px 22px; }
.query-result { display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; padding:14px 0; border-bottom:1px solid rgba(164,192,220,.11); }
.query-result strong { display:block; font-size:14px; font-weight:500; }
.query-result p { margin:4px 0 0; color:var(--muted); font-size:12px; white-space:pre-wrap; }
.query-result time { grid-column:2; color:#849ab2; font-size:11px; }
.badge { align-self:start; padding:4px 7px; border-radius:7px; font-size:10px; }.badge-note { background:rgba(255,182,104,.13); color:var(--orange); }.badge-reminder,.badge-task { background:rgba(93,155,255,.13); color:var(--blue); }.badge-memory { background:rgba(86,224,208,.13); color:var(--cyan); }.badge-record { background:rgba(177,150,255,.13); color:#c7b3ff; }
.empty { display:grid; place-items:center; min-height:190px; gap:5px; color:var(--muted); text-align:center; }.empty strong { color:#dce8f5; font-weight:500; }.empty.compact { min-height:190px; }
@media (min-width:561px) { body { display:grid; place-items:center; min-height:100svh; padding:24px; }.assistant-app { min-height:min(900px, calc(100svh - 48px)); max-height:900px; border:1px solid rgba(161,193,224,.17); border-radius:30px; box-shadow:0 30px 100px rgba(0,0,0,.46); }.sheet-backdrop { position:absolute; }.sheet { border-bottom:1px solid rgba(161,193,224,.2); border-radius:26px; margin:0 10px 10px; } }
@media (max-height:720px) { .core-stage { height:55svh; min-height:340px; }.core-copy { transform:translateY(25px); }.core-button { transform:scale(.82); margin-top:-90px; }.camera-action { top:38%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }