:root { --zero-metal: #343946; --zero-cushion: #242833; --zero-shell: #e8ecf4; --zero-outline: #aeb9c9; }
:root[data-theme="dark"] { --zero-metal: #a6b2c5; --zero-cushion: #59657a; --zero-shell: #dbe2ee; --zero-outline: #9caac0; }
:root[data-theme="reading"] { --zero-metal: #59534b; --zero-cushion: #3f3b36; --zero-shell: #eee5d4; --zero-outline: #b8a894; }
:root[data-theme="terminal"] { --zero-metal: #8da991; --zero-cushion: #455e4b; --zero-shell: #c5d5bd; --zero-outline: #7b967f; }
.zero { position: relative; width: 64px; margin: 0 auto 16px; }
.zero-talk { display: block; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 18px; background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.zero-talk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zero .companion-pose { transform-origin: 60px 67px; }
.zero .companion-metal { fill: var(--zero-metal); }
.zero .companion-cushion { fill: var(--zero-cushion); }
.zero .companion-shell { fill: var(--zero-shell); stroke: var(--zero-outline); stroke-width: 1.3; }
.zero .companion-screen { fill: #293346; }
.zero .companion-mouth { fill: none; stroke: #e4ddff; stroke-linecap: round; stroke-width: 2; }
.zero .companion-headband { fill: none; stroke: var(--zero-metal); stroke-width: 4.2; stroke-linecap: round; }
.zero .companion-face, .zero .companion-love { display: none; }
.zero[data-companion-emotion="neutral"] [data-face="neutral"],
.zero[data-companion-emotion="happy"] [data-face="happy"],
.zero[data-companion-emotion="shy"] [data-face="shy"],
.zero[data-companion-emotion="surprise"] [data-face="surprise"],
.zero[data-companion-emotion="heart"] [data-face="heart"],
.zero[data-companion-emotion="curious"] [data-face="curious"] { display: block; }
.zero[data-companion-emotion="heart"] .companion-love { display: block; transform-origin: 60px 20px; animation: zero-heart 1.6s ease-out both; }
.zero-bubble { position: absolute; z-index: 2; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(270px, calc(100vw - 48px)); padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); font-size: .82rem; line-height: 1.65; text-align: left; }
.zero-bubble::after { content: ''; position: absolute; bottom: -5px; left: calc(50% - 4px); width: 8px; height: 8px; transform: rotate(45deg); background: var(--surface); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@keyframes zero-heart { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 25% { opacity: 1; transform: translateY(-2px); } 100% { opacity: 0; transform: translateY(-15px) scale(.85); } }
@media (prefers-reduced-motion: reduce) { .zero *, .zero *::after { animation: none !important; transition: none !important; } }