/* demo hub */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.tab { height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line2); background: var(--glass); color: var(--text); font: 500 15px var(--font); cursor: pointer; }
.tab:hover { background: var(--glass2); }

html:root .tab.on { background: #0B0C12; color: #fff; border-color: #0B0C12; }
.pane { display: none; }
.pane.on { display: block; }
.voicebox { min-height: 420px; display: flex; flex-direction: column; }
.voice-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 24px; text-align: center; }
.orb { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9), rgba(125, 240, 255, 0.55) 40%, rgba(139, 124, 255, 0.35) 70%, transparent 100%); box-shadow: 0 0 60px rgba(125, 240, 255, 0.35); position: relative; }
.orb::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(125, 240, 255, 0.5); opacity: 0; }
.orb.busy::after { animation: ring 1.4s ease-out infinite; }
.orb.live { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); box-shadow: 0 0 90px rgba(125, 240, 255, 0.55); } }
#voiceWidget elevenlabs-convai { display: block; width: 100%; }
.chat { display: flex; flex-direction: column; min-height: 520px; }
.chat-log { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 420px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; line-height: 1.45; font-size: 15px; }
.msg.ai { background: var(--glass2); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.me { background: #fff; color: var(--ink); align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.act { background: rgba(125, 240, 255, 0.14); border: 1px solid var(--accent); align-self: flex-start; font-family: var(--mono); font-size: 13px; }
.chat-form { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; }
.chat-quick { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 16px; }
.chat-quick button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--glass); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.chat-quick button:hover { background: var(--glass3); }
.call-row { grid-template-columns: 1fr 380px; align-items: center; }
.player { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.player .play { height: 40px; padding: 0 16px; }
.player .bar { height: 8px; border-radius: 999px; background: var(--line2); position: relative; cursor: pointer; }
.player .bar span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--accent); }
.player .time { font-size: 12px; min-width: 84px; text-align: right; }
.pick { text-align: left; cursor: pointer; border: 0; background: transparent; color: var(--text); font: inherit; width: 100%; }
.pick.on { background: var(--glass2); }
.pick h4 { margin: 0; }
.work { padding: 24px 26px; min-height: 360px; }
.mail { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); font-size: 15px; line-height: 1.5; margin: 8px 0 0; white-space: pre-wrap; }
html:root .mail { background: rgba(255, 255, 255, 0.7); }
.mail.draft { min-height: 72px; border-color: var(--accent); }
.step-line { margin-top: 16px; }
.step-line > .mono { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 6px; }
.step-line table { margin-top: 4px; }
.rule { font-weight: 600; }
.conf { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-family: var(--mono); font-size: 11px; border: 1px solid var(--line2); }
.conf.medium { border-color: var(--accent3); color: var(--accent3); }
@media (max-width: 860px) { .call-row { grid-template-columns: 1fr; } .player .time { min-width: 60px; } .voicebox { min-height: 320px; } }