:root { font-family: system-ui, sans-serif; color: #1b1d21; background: #f4f5f7; }
body { margin: 0; }
header { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; color: #fff; z-index: 2; }
header.state-off, header.state-paused, header.state-stopped { background: #4a4f57; }
header.state-listening { background: #b3261e; }
header.state-speech { background: #e3342f; }
header.state-thinking { background: #9a3412; }
.mic { display: flex; gap: .6rem; align-items: center; font-weight: 700; font-size: 1.1rem; }
.dot { width: 1rem; height: 1rem; border-radius: 50%; background: #9aa0a6; }
.state-listening .dot, .state-speech .dot, .state-thinking .dot { background: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
main { max-width: 52rem; margin: 0 auto; padding: 1rem; }
.card { background: #fff; border-radius: .6rem; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px #0002; }
.hidden { display: none !important; }
.warn { background: #fff4e5; border: 1px solid #f0a020; padding: .8rem; border-radius: .5rem; margin-bottom: 1rem; }
label { display: block; margin: .5rem 0; }
label.inline { display: inline-flex; gap: .4rem; align-items: center; margin-right: 1rem; }
input:not([type=checkbox]), select { display: block; width: 100%; max-width: 28rem; padding: .4rem; }
button { padding: .5rem .9rem; border-radius: .4rem; border: 1px solid #888; background: #fff; cursor: pointer; }
button.primary { background: #1a56db; color: #fff; border-color: #1a56db; font-weight: 700; }
button.danger { border-color: #b3261e; color: #b3261e; }
button:disabled { opacity: .5; cursor: default; }
.meter { height: .4rem; background: #e5e7eb; border-radius: .2rem; margin: .8rem 0; overflow: hidden; }
#level { height: 100%; width: 0; background: #16a34a; transition: width .05s; }
.tabs { display: flex; gap: .4rem; margin-bottom: .5rem; }
.tabs button.active { background: #1b1d21; color: #fff; }
ol { list-style: none; padding: 0; margin: 0; }
li { border-bottom: 1px solid #eee; padding: .6rem 0; }
.badge { display: inline-block; font-size: .75rem; padding: .1rem .45rem; border-radius: 1rem; background: #e5e7eb; margin-right: .3rem; }
.badge.respond { background: #dbeafe; } .badge.inbox { background: #dcfce7; } .badge.ignore { background: #f3f4f6; color: #6b7280; }
.badge.ask, .badge.refuse { background: #fee2e2; }
.reply { margin-top: .3rem; padding-left: .8rem; border-left: 3px solid #1a56db; }
.transcript { color: #374151; } .ambient .transcript { color: #9ca3af; font-style: italic; }
.note { font-size: .85rem; color: #6b7280; }
footer { max-width: 52rem; margin: 0 auto 2rem; padding: 0 1rem; }