* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #14141f; color: #eee; min-height: 100vh; }
.hidden { display: none !important; }

.status-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 12px 0; font-size: 13px; }
.light { padding: 4px 10px; border-radius: 999px; background: #2a2a3e; color: #bbb; }
.light::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #666; margin-right: 6px; vertical-align: 1px; }
.light.ok { color: #d8f5d8; } .light.ok::before { background: #43a047; }
.light.bad { color: #ffd6d6; } .light.bad::before { background: #e53935; }
.light.busy { color: #fff0d0; } .light.busy::before { background: #ffb300; }
.light.unknown::before { background: #666; }

#console { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; padding: 12px; align-items: start; }
.panel { background: #1e1e2e; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.panel.grow { min-height: 280px; }
.panel h2 { font-size: 15px; color: #ffd9a0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hint { font-size: 12px; color: #888; }

textarea, input[type="text"], input:not([type]) { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #444; background: #14141f; color: #eee; font-size: 16px; font-family: inherit; resize: vertical; }
button { padding: 10px 16px; min-height: 44px; border: none; border-radius: 8px; background: #e8642c; color: #fff; font-size: 15px; cursor: pointer; }
button:disabled { background: #555; cursor: not-allowed; }
#mic-btn.recording { background: #c62828; }

.pending-list, .chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; font-size: 14px; overflow-wrap: anywhere; }
.draft { background: #14141f; border: 1px solid #2a2a3e; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.draft.expired { opacity: .45; }
.draft-q { font-size: 13px; color: #7fb3ff; }
.draft .drop { background: #444; }
.countdown { margin-left: auto; font-size: 12px; color: #888; font-variant-numeric: tabular-nums; }
.chat-log .msg b { color: #7fb3ff; margin-right: 4px; }

.flash { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #c62828; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; z-index: 20; }