:root{color-scheme:dark;font-family:"PingFang HK","Noto Sans TC","Microsoft JhengHei",sans-serif;color:#e2e8f0;background:#020617;font-synthesis:none;--gold:#fcd34d;--muted:#94a3b8;--line:#1e293b}
*{box-sizing:border-box}body{margin:0;overflow:hidden;touch-action:manipulation}button,input,textarea,select{font:inherit}button{color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.45}button{border:0;background:none;-webkit-tap-highlight-color:transparent}button,textarea,select,a,input{outline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold)}a{color:var(--gold)}svg{display:block}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,p{margin:0}[hidden]{display:none!important}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.scenery{position:fixed;inset:0;overflow:hidden;pointer-events:none}.moon{position:absolute;top:32px;right:32px;width:176px;height:176px;border-radius:50%;background:#ffedb6;animation:moon-glow 5s ease-in-out infinite}.mountains{position:absolute;bottom:0;width:100%;height:320px;opacity:.4}.railing{position:absolute;bottom:0;width:100%;height:48px;border-top:2px solid #78350f66;background:linear-gradient(0deg,#020617,transparent)}
.call-shell{height:100vh;height:100dvh;min-height:440px;position:relative;display:flex;flex-direction:column;align-items:center;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.call-header{width:100%;max-width:672px;padding:16px 16px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;z-index:2;background:linear-gradient(#020617ed,transparent)}.identity{display:flex;gap:12px;align-items:center;min-width:0}.profile{width:48px;height:48px;position:relative;border-radius:50%;border:2px solid #fbbf24cc;background:#b4530966;color:#fde68a;font-size:18px;font-weight:700;flex-shrink:0;padding:0}.online-dot{position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;background:#10b981;border:2px solid #0f172a;border-radius:50%}h1{font-size:18px;color:#fef3c7;font-weight:700;display:flex;align-items:center;gap:8px;white-space:nowrap}.era{font-size:12px;font-weight:400;border:1px solid #f59e0b4d;background:#f59e0b33;border-radius:20px;padding:2px 8px;color:var(--gold)}.connection{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;line-height:1.9;white-space:nowrap;font-variant-numeric:tabular-nums}.status-dot{display:inline-block;flex-shrink:0;width:7px;height:7px;border-radius:50%;background:#34d399}.header-actions{display:flex;gap:8px}.icon-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#1e293bcc;border:1px solid #334155;border-radius:50%;position:relative;flex-shrink:0;transition:background .2s}.icon-button:hover{background:#334155}.icon-button[aria-pressed="true"]{color:#fbbf24}.mute-slash{display:none;position:absolute;width:23px;border-top:2px solid currentColor;transform:rotate(45deg)}#sound-toggle[aria-pressed="false"] .mute-slash{display:block}
.call-stage{width:100%;max-width:512px;flex:1;min-height:0;padding:8px;display:flex;align-items:center;justify-content:center}.scene{position:relative;width:100%;height:100%;max-height:520px;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:24px;background:#0f172acc;border:1px solid var(--line);box-shadow:0 25px 50px -12px #0008;backdrop-filter:blur(12px)}.action-badge{position:absolute;top:16px;left:16px;right:16px;width:fit-content;max-width:calc(100% - 32px);display:flex;align-items:center;gap:8px;border-radius:999px;background:#020617cc;border:1px solid #f59e0b66;padding:6px 14px;color:var(--gold);font-size:12px;z-index:2;line-height:1.6}.action-badge svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.character{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:8px 8px 22px;animation:breathe 4s ease-in-out infinite}#li-bai-svg{width:384px;height:384px;max-width:100%;max-height:100%;filter:drop-shadow(0 15px 30px #000c);overflow:visible}.subtitle-panel{position:absolute;bottom:12px;left:12px;right:12px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#020617d9;backdrop-filter:blur(12px);text-align:center;z-index:2}#caption{font-size:16px;line-height:1.65;font-weight:500;color:#fef3c7;max-height:80px;overflow-y:auto;white-space:pre-line;padding:0 4px;overscroll-behavior:contain}.speech-status{display:flex;align-items:center;justify-content:center;gap:6px;color:#fbbf24cc;font-size:11px;padding:6px 0 0;margin:auto;max-width:100%;line-height:1.4}.speech-status .status-dot{width:6px;height:6px}.speech-status svg{width:12px;height:12px}.speech-status[data-available="false"] .status-dot{background:#94a3b8}.audio-bars{display:none;height:14px;align-items:center;gap:2px}.audio-bars.active{display:flex}.audio-bars i{width:2px;height:10px;background:var(--gold);border-radius:2px;animation:bar .55s ease-in-out infinite alternate}.audio-bars i:nth-child(2){animation-delay:-.2s}.audio-bars i:nth-child(3){animation-delay:-.4s}
.quick-questions{width:100%;max-width:512px;display:flex;gap:8px;padding:4px 16px 8px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#475569 #0f172a99;flex-shrink:0}.quick-questions button{display:flex;gap:6px;align-items:center;flex-shrink:0;font-size:12px;line-height:1.5;padding:6px 12px;white-space:nowrap;border-radius:999px;color:#fde68a;background:#0f172ae6;border:1px solid #f59e0b4d;transition:background .2s}.quick-questions button:hover{background:#78350f66}.quick-questions svg{width:13px;height:13px;color:#fbbf24}.quick-questions button:nth-child(3) svg{color:#38bdf8}.quick-questions button:nth-child(4) svg{color:#34d399}.call-footer{width:100%;max-width:512px;padding:16px 16px 24px;flex-shrink:0;z-index:2}.call-controls{display:flex;justify-content:space-around;align-items:center;padding:12px;border-radius:24px;border:1px solid var(--line);background:#0f172ae6;backdrop-filter:blur(16px);box-shadow:0 20px 25px -5px #0004}.call-button{padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:#cbd5e1;min-width:80px}.control-circle{width:48px;height:48px;border:1px solid #334155;background:#1e293b;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0006;transition:transform .2s,background .2s}.call-button:hover .control-circle{background:#334155}.call-button:active .control-circle{transform:scale(.95)}.mic-button{color:var(--gold);font-weight:700}.mic-button .control-circle{width:64px;height:64px;color:#020617;background:linear-gradient(45deg,#d97706,#fbbf24);border:2px solid #fde68a;box-shadow:0 10px 15px -3px #f59e0b4d}.mic-button:hover .control-circle{background:linear-gradient(45deg,#ea8b0d,#fcd34d)}.mic-button svg{width:27px;height:27px;stroke-width:2.5}.mic-button[aria-pressed="true"] .control-circle{background:#ef4444;border-color:#fecaca;animation:mic-pulse 1.5s infinite}.reset-button .control-circle{color:white;background:#dc2626cc;border-color:#f8717180;box-shadow:0 5px 10px #dc262633}.reset-button:hover .control-circle{background:#dc2626}
/* The SVG geometry comes from the supplied Canvas; animations follow app state. */
#head-group{transform-origin:200px 240px;transition:transform .5s}#beard-container{transform-origin:200px 190px;animation:beard-flow 4s ease-in-out infinite}#left-arm{transform-origin:100px 350px;transition:transform .6s}#right-arm-group{transform-origin:300px 350px;transition:transform .6s}#eyebrow-left{transform-origin:172px 132px}#eyebrow-right{transform-origin:228px 132px}#eyes-open{transform-box:fill-box;transform-origin:center;animation:blink 4.8s infinite}#eyes-happy,#eyelids-blink,#mouth-interior{display:none}#mouth-group{transform-origin:200px 184px}#mouth-interior{transform-origin:200px 183px}.scene[data-state="speaking"] #mouth-interior{display:block;animation:talk .24s infinite alternate}.scene[data-state="speaking"] #mouth-path{opacity:0}.scene[data-action="drink"] #right-arm-group{animation:raise-cup 6s ease-in-out infinite}.scene[data-action="think"] #left-arm{transform:translate(18px,-12px) rotate(17deg)}.scene[data-action="think"] #head-group{transform:rotate(-5deg)}.scene[data-action="think"] #eyebrow-left{transform:rotate(12deg)}.scene[data-action="think"] #eyebrow-right{transform:rotate(-7deg)}.scene[data-action="recite"] #head-group{animation:recite 3.5s ease-in-out infinite}.scene[data-action="recite"] #left-arm{transform:translate(-20px,-10px) rotate(-12deg)}.scene[data-action="laugh"] #eyes-open{display:none}.scene[data-action="laugh"] #eyes-happy{display:block}.scene[data-action="laugh"] #head-group{animation:laugh 1.3s ease-in-out infinite}.scene[data-state="listening"] #head-group{transform:rotate(5deg)}.scene[data-state="thinking"] .action-badge{animation:thinking 1.4s ease-in-out infinite}
/* Native dialogs keep focus and Escape behavior accessible on mobile and desktop. */
dialog{color:#e2e8f0;background:#0f172a;border:1px solid #334155;border-radius:24px;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:24px;box-shadow:0 20px 70px #0009}dialog::backdrop{background:#020617a6;backdrop-filter:blur(8px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;color:var(--gold)}.dialog-top h2{font-size:20px}dialog p{font-size:14px;line-height:1.85;color:#cbd5e1;margin:14px 0}dialog h2{font-size:22px;color:#fef3c7}dialog h3{font-size:16px;color:#fde68a;margin-top:22px}dialog li{font-size:14px;line-height:1.8}.setting-label{display:block;font-size:13px;margin:22px 0 10px;color:#fde68a}.setting-label output{float:right}select{width:100%;border:1px solid #475569;border-radius:10px;padding:10px;background:#020617;color:#e2e8f0}input[type="range"]{width:100%;accent-color:#fbbf24}.primary-button{display:block;width:100%;padding:12px;margin-top:24px;background:#fbbf24;color:#0f172a;border-radius:12px;font-weight:600}.small-note{font-size:12px!important;color:var(--muted)!important}
.chat-drawer{position:fixed;inset:0;margin:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;border:0;border-radius:0;padding:0;background:#020617cc;backdrop-filter:blur(12px);overflow:hidden}.chat-drawer[open]{display:flex;flex-direction:column;animation:drawer-in .22s ease-out}.chat-drawer::backdrop{background:transparent;backdrop-filter:none}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:16px;padding-top:max(16px,env(safe-area-inset-top));gap:8px;background:#0f172a;border-bottom:1px solid var(--line);flex-shrink:0}.drawer-header h2{display:flex;gap:8px;align-items:center;font-size:16px;color:var(--gold)}.drawer-header h2 svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.drawer-header .icon-button{background:none;border:0;color:var(--muted)}.drawer-meta{display:flex;justify-content:space-between;padding:8px 16px;color:var(--muted);font-size:11px;gap:12px}.drawer-meta button{color:var(--muted);font-size:11px;padding:0;text-decoration:underline;text-underline-offset:3px}.messages{flex:1;min-height:0;overflow-y:auto;padding:8px 16px 20px;overscroll-behavior:contain}.message{position:relative;width:fit-content;max-width:85%;margin:0 0 20px 44px;padding:12px 14px;background:#1e293be6;border:1px solid #33415599;border-radius:0 16px 16px 16px;font-size:14px;line-height:1.75}.message-label{position:absolute;left:-44px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:#d97706;color:white;font-size:11px;font-weight:700}.message.user{margin-left:auto;margin-right:0;background:#78350f40;border-color:#d9770655;border-radius:16px 0 16px 16px}.message.user .message-label{display:none}.message-text{white-space:pre-wrap;overflow-wrap:anywhere}.message-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:11px}.replay{display:flex;align-items:center;gap:4px;padding:0;font-size:11px;color:var(--gold)}.replay svg{width:13px;height:13px}.source-link{color:var(--muted);text-decoration:none}.message-mode{opacity:.8}.thinking-message .message-text{animation:thinking 1.4s infinite}.composer{flex-shrink:0;padding:12px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:#0f172a;border-top:1px solid var(--line)}.composer-row{display:flex;align-items:center;gap:8px}textarea{width:100%;min-width:0;resize:none;color:#e2e8f0;background:#020617;border:1px solid #475569;border-radius:24px;padding:12px 16px;font-size:16px;line-height:1.5;min-height:48px;max-height:120px}textarea::placeholder{color:#94a3b8;font-size:13px}.send-button{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:#f59e0b;color:#020617}.send-button:hover{background:#fbbf24}.send-button:disabled{opacity:.4}.input-meta{display:flex;justify-content:space-between;gap:12px;padding:6px 8px 0;color:var(--muted);font-size:11px}.toast{position:fixed;bottom:152px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);background:#1e293b;border:1px solid #64748b;border-radius:12px;padding:12px 16px;color:#fef3c7;font-size:13px;line-height:1.6;box-shadow:0 10px 30px #0006;z-index:100;pointer-events:none}.chat-drawer .toast{position:absolute;bottom:100px}#settings-dialog .toast{position:static;transform:none;width:auto;max-width:none;margin-top:16px}
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:#0f172a99}::-webkit-scrollbar-thumb{background:#475569;border-radius:4px}
@keyframes breathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(.5deg)}}@keyframes beard-flow{0%,100%{transform:rotate(0)}50%{transform:rotate(1.5deg)}}@keyframes moon-glow{0%,100%{filter:drop-shadow(0 0 15px #fef08a80)}50%{filter:drop-shadow(0 0 35px #fef08acc)}}@keyframes blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.07)}}@keyframes talk{0%{transform:scaleY(.15)}100%{transform:scaleY(1.3)}}@keyframes raise-cup{0%,35%,100%{transform:rotate(0)}50%,70%{transform:translate(-14px,-16px) rotate(-12deg)}}@keyframes recite{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}@keyframes laugh{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-2deg)}}@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 #ef444480}70%{box-shadow:0 0 0 12px #ef444400}}@keyframes bar{to{height:3px}}@keyframes thinking{50%{opacity:.55}}@keyframes drawer-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:639px){.moon{width:112px;height:112px}.mountains{height:224px}.profile{width:44px;height:44px}h1{font-size:16px}.era{font-size:10px}.identity{gap:10px}.header-actions{gap:6px}.icon-button{width:38px;height:38px}.call-header{padding:16px 16px 8px}.connection{font-size:11px}#li-bai-svg{width:288px;height:288px}#caption{font-size:14px}.character{padding-bottom:34px}.call-footer{padding-bottom:16px}.drawer-header h2{font-size:15px}}
@media(max-width:359px){.call-header{padding-left:10px;padding-right:10px}.identity{gap:7px}.era{padding:2px 5px}.header-actions{gap:4px}.header-actions .icon-button{width:34px;height:34px}.connection{gap:4px;font-size:10px}.action-badge{font-size:11px;left:12px;max-width:calc(100% - 24px);padding:5px 10px}.call-footer{padding:10px}.call-button{min-width:75px}}
@media(max-height:650px){.call-footer{padding-top:8px;padding-bottom:8px}.call-controls{padding:8px}.mic-button .control-circle{width:54px;height:54px}.control-circle{width:42px;height:42px}.call-header{padding-top:8px}.action-badge{top:10px}.subtitle-panel{padding:8px;bottom:8px;left:8px;right:8px}#caption{max-height:64px;font-size:13px}.character{padding-bottom:35px}.speech-status{font-size:10px}}
@media(max-height:439px){body{overflow-y:auto}.call-shell{height:560px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.scene[data-state="speaking"] #mouth-interior{transform:scaleY(.7)}}