#codex { position: fixed; right: 16px; bottom: 16px; z-index: 9000; font-family: "Chakra Petch", "Bungee", monospace; color: #eae7d8; }
#codexOpen { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 2px solid #00C805; border-radius: 999px; background: #0d130d; color: #F2E93B; font: 12px/1 "Bungee", monospace; letter-spacing: 2px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
#codexOpen .cx-dot { width: 8px; height: 8px; border-radius: 50%; background: #00C805; box-shadow: 0 0 10px #00C805; }
#codexPanel { position: absolute; right: 0; bottom: 54px; width: min(380px, calc(100vw - 32px)); background: #0b1a0d; border: 2px solid #00C805; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.6); overflow: hidden; }
#codexPanel header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #1f3a24; }
#codexPanel header b { font: 12px/1 "Bungee", monospace; letter-spacing: 2px; color: #F2E93B; }
#codexState { margin-left: auto; font-size: 10px; letter-spacing: 1.6px; color: #9fd9a6; }
#codex[data-state="listening"] #codexState { color: #00C805; } #codex[data-state="thinking"] #codexState, #codex[data-state="connecting"] #codexState { color: #F2E93B; }
#codexClose { background: none; border: 0; color: #eae7d8; font-size: 18px; cursor: pointer; }
#codexLog { max-height: 42vh; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.4; }
#codexLog p { margin: 0; padding: 8px 10px; border-radius: 8px; max-width: 92%; }
#codexLog .cx-a { background: #12241a; align-self: flex-start; }
#codexLog .cx-q { background: #1f3a24; align-self: flex-end; }
#codexForm { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid #1f3a24; }
#codexInput { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid #2f5a34; background: #0b1a0d; color: #eae7d8; font: 13px/1.2 "Chakra Petch", monospace; }
#codexSend, #codexTalk, #codexMute, #codexClear { padding: 10px 12px; border-radius: 8px; border: 1px solid #00C805; background: #0d130d; color: #F2E93B; font: 11px/1 "Bungee", monospace; letter-spacing: 1.4px; cursor: pointer; }
#codexTalk { background: #F2E93B; color: #0d130d; }
.cx-row { display: flex; gap: 6px; padding: 0 12px 10px; }
.cx-note { margin: 0; padding: 0 12px 10px; font-size: 10px; letter-spacing: .4px; opacity: .65; line-height: 1.4; }
@media (max-width: 640px) { #codex { right: 10px; bottom: 10px; } #codexPanel { bottom: 50px; } }