:root{--bg: #ffffff;--panel: rgba(255, 255, 255, .94);--panel-border: #dfe7f0;--surface: #f6f9fd;--text: #1c1a17;--muted: #7a7169;--accent: #64b5f3;--accent-strong: #4088ec;--accent-soft: rgba(100, 181, 243, .14);--user: rgba(100, 181, 243, .18);--robot: #eef4fb;--danger: #c2453d;--panel-width: 380px;--action-panel-w: 320px;--action-panel-gap: 16px;--bubble-bottom: calc(max(20px, 4%) + env(safe-area-inset-bottom, 0px)) ;font-family:Urbanist,system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,DejaVu Sans,Liberation Sans,Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100vh;height:100dvh;overflow:hidden;background:var(--bg);color:var(--text)}body{display:flex;flex-direction:row}#app{flex:1 1 auto;min-width:0;height:100vh;height:100dvh;position:relative;background:radial-gradient(ellipse at 50% 70%,#fff,#f3f8fe 70%,#e8f1fb)}#app canvas{display:block}#panel{width:var(--panel-width);flex:0 0 var(--panel-width);height:100vh;height:100dvh;display:flex;flex-direction:column;gap:10px;padding:12px;overflow:hidden auto;background:var(--panel);border-left:1px solid var(--panel-border);font-size:13px;transition:width .25s ease,flex-basis .25s ease,padding .25s ease}#panel.collapsed{width:44px;flex-basis:44px;padding:12px 6px;overflow:hidden}#panel.collapsed>*:not(.panel-toggle){display:none}.panel-toggle{align-self:flex-start;width:32px;height:32px;padding:0;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;flex:0 0 auto}#panel.collapsed .panel-toggle{align-self:center}#panel.hidden{display:none}.hint-bubble{position:absolute;left:12px;right:12px;margin:0 auto;width:fit-content;bottom:var(--bubble-bottom);transform:translateY(10px);max-width:min(84%,560px);max-height:38dvh;overflow-y:auto;overscroll-behavior:contain;padding:12px 22px;border-radius:22px;border:1px solid var(--panel-border);background:#fffffff0;color:var(--text);font:600 15px/1.35 Urbanist,system-ui,sans-serif;text-align:center;box-shadow:0 10px 30px #1c1a171a,0 0 0 3px var(--accent-soft);opacity:0;pointer-events:none;cursor:pointer;transition:opacity .3s ease,transform .3s ease,left .25s ease,border-color .2s ease}.hint-bubble.show{opacity:1;pointer-events:auto;transform:translateY(0)}.hint-bubble:hover{border-color:var(--accent)}.hint-bubble.error{border-color:var(--danger);color:var(--danger);box-shadow:0 10px 30px #1c1a171a,0 0 0 3px #c2453d24}.hint-bubble.question{color:var(--muted);font-style:italic;font-weight:500}.hint-bubble.answer{text-align:left;font-weight:500}.listening-wave{--wave-1: var(--accent);--wave-2: var(--accent-strong);--wave-3: #5fd0d6;--wave-4: #9a8cf2;--wave-h: 64px;position:absolute;left:12px;right:12px;margin:0 auto;width:min(84%,520px);height:var(--wave-h);bottom:calc(var(--bubble-bottom) + var(--bubble-h, 52px) + 6px);pointer-events:none;opacity:0;transform:translateY(8px) scaleX(.6);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1.2),left .25s ease,bottom .25s ease,filter .3s ease;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 82%,transparent 100%);filter:drop-shadow(0 0 4px rgba(100,181,243,.25))}.listening-wave.show{opacity:1;transform:none}.listening-wave.voice{filter:drop-shadow(0 0 10px rgba(64,136,236,.45)) saturate(1.15)}.listening-wave-canvas{display:block;width:100%;height:100%}@media (prefers-reduced-motion: reduce){.listening-wave{transition:opacity .2s ease;transform:none}}.action-panel{position:absolute;top:calc(var(--action-panel-gap) + env(safe-area-inset-top,0px));left:var(--action-panel-gap);width:var(--action-panel-w);max-width:calc(100% - 2 * var(--action-panel-gap));max-height:60vh;max-height:min(72dvh,calc(100dvh - 46dvh - 2 * var(--action-panel-gap)));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px;border-radius:18px;border:1px solid var(--panel-border);background:#fffffff0;box-shadow:0 10px 30px #1c1a171a,0 0 0 3px var(--accent-soft);z-index:4;opacity:0;transform:translate(-10px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}.action-panel.show{opacity:1;transform:none;pointer-events:auto}.action-panel.below-diag{top:calc(var(--diag-h, 96px) + 2 * var(--action-panel-gap))}.action-head{display:flex;align-items:center;gap:8px}.action-title{flex:1 1 auto;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.action-close{flex:0 0 auto;width:24px;height:24px;padding:0;font:inherit;font-size:16px;line-height:1;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer}.action-close:hover{border-color:var(--panel-border);color:var(--text)}.action-body{display:flex;flex-direction:column;gap:10px}.action-card{margin:0;display:flex;flex-direction:column;gap:8px}.action-card-img{width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:12px;background:var(--surface)}.action-card.profile .action-card-img{aspect-ratio:1 / 1;max-width:128px;border-radius:50%}.action-card.links .action-card-img{aspect-ratio:1 / 1;max-width:180px;object-fit:contain;padding:6px;background:#fff}.action-card-text{display:flex;flex-direction:column;gap:4px}.action-card-title{font-size:14px;font-weight:700}.action-card-sub{font-size:11.5px;color:var(--muted)}.action-card-body{margin:0;font-size:12.5px;line-height:1.45}.action-items,.action-list,.action-chips{display:flex;flex-wrap:wrap;gap:6px}.action-list .chip,.action-chips .chip{max-width:100%}.chip.item{cursor:default;color:var(--muted);background:var(--surface)}.chip.item:hover{border-color:var(--panel-border);background:var(--surface)}.action-confirm{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:12px;border:1px solid var(--accent);background:var(--accent-soft)}.action-question{font-size:13px;font-weight:600}.action-answer{display:flex;gap:6px}.chip.primary{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:700;min-width:56px;text-align:center}.chip.primary:hover{border-color:var(--accent-strong);background:var(--accent-strong)}.silent-hint{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));left:12px;right:12px;margin:0 auto;width:fit-content;max-width:min(92%,420px);display:flex;align-items:center;gap:8px;padding:9px 10px 9px 16px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:#fff;font:600 13px/1.3 Urbanist,system-ui,sans-serif;box-shadow:0 10px 30px #1c1a172e;z-index:11;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}.silent-hint.show{opacity:1;transform:none;pointer-events:auto}.silent-close{flex:0 0 auto;width:22px;height:22px;padding:0;font:inherit;font-size:15px;line-height:1;color:#fff;background:#ffffff2e;border:none;border-radius:50%;cursor:pointer}.diag{position:absolute;top:8px;left:8px;max-width:calc(100% - 16px);padding:8px 10px;border-radius:10px;border:1px solid var(--panel-border);background:#ffffffeb;color:var(--text);font:400 11px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;pointer-events:none;z-index:5}.diag-title{font-weight:700;color:var(--muted);margin-bottom:4px}@media (max-width: 720px){#panel{position:fixed;inset:0 0 0 auto;width:min(100%,var(--panel-width));flex-basis:0;z-index:10;box-shadow:-8px 0 30px #1c1a171f}#panel.collapsed{width:44px;background:transparent;border-left:none;box-shadow:none}.hint-bubble{max-width:100%;padding:11px 16px;font-size:14px;line-height:1.4;border-radius:18px}.diag{top:calc(8px + env(safe-area-inset-top,0px));font-size:10px}.action-panel{top:auto;left:8px;right:8px;width:auto;max-width:none;bottom:calc(var(--bubble-bottom) + var(--bubble-h, 0px) + 10px);max-height:44vh;max-height:clamp(104px,calc(84dvh - var(--bubble-h, 0px)),44dvh);border-radius:16px;padding:10px 12px 12px;transform:translateY(10px)}#app.listening-wave-on .action-panel{bottom:calc(var(--bubble-bottom) + var(--bubble-h, 0px) + 74px)}.listening-wave{width:92%;--wave-h: 56px}.action-panel.below-diag{top:auto}.action-panel.show{transform:none}.action-panel.inset-end{right:56px}.action-panel .chip{font-size:13px;padding:7px 14px}}button,select,input,textarea{font:inherit;color:var(--text)}button{background:#fff;border:1px solid var(--panel-border);padding:6px 12px;border-radius:14px;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease;font-weight:600}button:hover:not(:disabled){border-color:var(--accent);color:var(--accent-strong);transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.4;cursor:default}button.active{background:var(--accent);border-color:var(--accent);color:#fff}button.danger{color:var(--danger)}button.danger:hover:not(:disabled){border-color:var(--danger);color:var(--danger)}select,input[type=text],textarea{background:#fff;border:1px solid var(--panel-border);border-radius:8px;padding:6px 8px}select:focus,input[type=text]:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}textarea{resize:none;width:100%;line-height:1.5}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.grow{flex:1 1 auto;min-width:0}.status{display:flex;align-items:center;gap:8px}.mic-dot{width:10px;height:10px;border-radius:50%;background:#cfc7bc;flex:0 0 auto}.mic-dot.live{background:#2f9e5b;box-shadow:0 0 8px #2f9e5b99}.pill{padding:4px 10px;border-radius:999px;font-weight:700;white-space:nowrap}.hint{color:var(--muted);font-size:12px;min-height:16px}.transcript{flex:1 1 200px;min-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid var(--panel-border);border-radius:12px;background:var(--surface)}.bubble{max-width:90%;padding:8px 12px;border-radius:14px;line-height:1.5;unicode-bidi:plaintext;text-align:start;white-space:pre-wrap;word-break:break-word}.bubble.user{align-self:flex-end;background:var(--user)}.bubble.robot{align-self:flex-start;background:#fff;border:1px solid var(--panel-border)}.bubble.robot.interrupted:after{content:" …";color:var(--muted)}.bubble.ghost{align-self:flex-end;color:var(--muted);font-style:italic;background:transparent;border:1px dashed var(--panel-border)}.bubble.system{align-self:center;color:var(--danger);font-size:12px;background:transparent}.section{border:1px solid var(--panel-border);border-radius:12px;background:var(--surface)}.section>summary{cursor:pointer;padding:8px 12px;font-weight:700;color:var(--muted);-webkit-user-select:none;user-select:none;letter-spacing:.01em}.section[open]>summary{color:var(--accent-strong)}.section-body{padding:4px 12px 12px;display:flex;flex-direction:column;gap:8px}.emotion-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.emotion-grid button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:10px;font-size:10px;font-weight:500}.emotion-grid .emoji{font-size:18px}.state-buttons button{flex:1 1 30%}.readout{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--muted);white-space:pre;line-height:1.6}.field{display:grid;grid-template-columns:1fr 100px 48px;gap:6px;align-items:center;font-size:11px}.field input[type=range]{width:100%;accent-color:var(--accent)}input[type=checkbox],input[type=radio]{accent-color:var(--accent)}.mini{padding:3px 8px;font-size:11px;border-radius:7px;border:1px solid var(--panel-border);background:#fff;color:var(--muted);cursor:pointer}.mini:hover{border-color:var(--accent);color:var(--text)}.field .val{text-align:right;color:var(--muted);font-family:ui-monospace,monospace}.console-log{max-height:140px;overflow-y:auto;font-family:ui-monospace,monospace;font-size:11px;color:var(--muted);white-space:pre-wrap;word-break:break-all}.console-log .warn{color:#b8791a}.console-log .err{color:var(--danger)}label.check{display:inline-flex;gap:6px;align-items:center;color:var(--muted)}.meter{position:relative;flex:1 1 auto;height:8px;border-radius:4px;background:var(--accent-soft);overflow:hidden}.meter .fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent);transition:width .08s linear}.meter .fill.over{background:#2f9e5b}.meter .mark{position:absolute;top:0;bottom:0;width:2px;background:var(--text)}.wake-status{font-size:11px;color:var(--muted)}.wake-status.live{color:#2f9e5b}.lbl{min-width:44px;color:var(--muted)}.bubble.action{align-self:flex-start;font-size:12px;background:var(--surface);border:1px dashed var(--accent)}.bubble.action .meta{margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:var(--muted)}.bubble.action.blocked{border-color:var(--danger)}.bubble.action.confirm,.bubble.action.clarify,.bubble.action.fallback{border-color:#b8791a}.car-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;font-size:11px}.car-cell{display:flex;justify-content:space-between;gap:6px;padding:2px 6px;border-radius:6px;border:1px solid transparent}.car-cell .car-label{color:var(--muted);white-space:nowrap}.car-cell .car-value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:right}.car-cell.changed{animation:car-flash 1.4s ease-out}@keyframes car-flash{0%{background:var(--user);border-color:var(--accent)}to{background:transparent;border-color:transparent}}.car-log{max-height:110px}.car-pending{color:#b8791a}.car-pending:empty{display:none}.bubble.robot .text{white-space:pre-wrap}.bubble.robot .chat-extras{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.chip{font:inherit;font-size:11.5px;line-height:1.2;padding:4px 10px;border-radius:999px;border:1px solid var(--panel-border);background:#fff;color:var(--text);text-decoration:none;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip:hover{border-color:var(--accent);background:var(--accent-soft)}.chip.suggestion{border-style:dashed;color:var(--muted)}.chip.highlight{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}