/* voice-common.css — shared styles for voice.html, voice-hypatia.html, voice-native.html
 * 2026-05-17: extracted from inline <style> to eliminate ~200 lines of duplication.
 * Import via: <link rel="stylesheet" href="/css/voice-common.css?v=20260517"/>
 */

*{box-sizing:border-box;margin:0;padding:0}
:root{--green:var(--accent);--cyan:var(--info);--purple:#b47aff;--gold:var(--warning);--red:var(--danger);--bg:var(--bg-deep);--text:var(--text);--muted:var(--muted)}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Roboto Mono',Consolas,monospace;font-size:12px;overflow:hidden;user-select:none}

/* States: idle, listening, speaking, thinking, memory, error */
body.st-idle     {--state:#3ac9ff;--state-dim:rgba(58,201,255,.15)}
body.st-listening{--state:#00ffa3;--state-dim:rgba(0,255,163,.15)}
body.st-speaking {--state:#b47aff;--state-dim:rgba(180,122,255,.15)}
body.st-thinking {--state:#b47aff;--state-dim:rgba(180,122,255,.15)}
body.st-memory   {--state:#fad015;--state-dim:rgba(250,208,21,.15)}
body.st-error    {--state:#ff4d6d;--state-dim:rgba(255,77,109,.15)}
body.st-synthesizing{--state:#3ac9ff;--state-dim:rgba(58,201,255,.15)}
body.st-synthesizing .orb-ring{opacity:.4;border-style:dotted;animation:orb-synth 1.5s linear infinite}
@keyframes orb-synth{to{transform:rotate(360deg)}}

/* Layout */
.vc-shell{display:flex;flex-direction:column;height:100dvh;position:relative}
.vc-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,var(--state-dim),transparent 70%);transition:background 1s}

/* Top bar */
.vc-top{display:flex;align-items:center;padding:10px 16px;gap:10px;z-index:2;flex-shrink:0;border-bottom:1px solid var(--border)}
.vc-brand{font-family:'Orbitron',monospace;font-size:10px;font-weight:900;letter-spacing:.18em;color:var(--state);transition:color .5s}
.vc-status{font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-left:auto}
.vc-status-dot{width:6px;height:6px;border-radius:50%;background:var(--state);box-shadow:0 0 8px var(--state);display:inline-block;margin-right:4px;animation:dot-pulse 2s ease-in-out infinite alternate}
@keyframes dot-pulse{from{opacity:.5;transform:scale(.8)}to{opacity:1;transform:scale(1.2)}}
.vc-minimize{background:none;border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:10px;padding:4px 10px;cursor:pointer;font-family:inherit;transition:.2s}
.vc-minimize:hover{border-color:var(--cyan);color:var(--cyan)}

/* Connection HUD (replaces vc-voice-badge + static vc-status) */
.vc-hud{margin-left:auto;display:flex;flex-direction:column;gap:3px;padding:4px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-card);min-width:120px}
.vc-hud-row{display:flex;align-items:center;gap:5px;height:14px}
.vc-hud-icon{font-size:10px;line-height:1;flex-shrink:0;width:14px;text-align:center}
.vc-hud-label{font-size:7px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52px}
.vc-hud-val{font-size:7px;font-weight:700;letter-spacing:.04em;color:var(--text);margin-left:auto;white-space:nowrap;font-family:'Roboto Mono',monospace}
.vc-hud-bars{display:flex;align-items:flex-end;gap:2px;margin-left:auto;height:12px}
.hud-bar{width:3px;border-radius:1px;background:var(--border);transition:background .3s,height .3s}
.hud-bar:nth-child(1){height:4px}
.hud-bar:nth-child(2){height:6px}
.hud-bar:nth-child(3){height:9px}
.hud-bar:nth-child(4){height:12px}
.hud-bar.lit{background:var(--state)}
.hud-bar.lit.warn{background:var(--warning)}
.hud-bar.lit.bad{background:var(--danger)}
.vc-hud-dot{width:5px;height:5px;border-radius:50%;background:var(--state);box-shadow:0 0 6px var(--state);flex-shrink:0;transition:background .3s}
@media(max-width:400px){.vc-hud{min-width:90px;padding:3px 6px}.vc-hud-label{max-width:36px}}

/* Mic permission button — hidden by default, shown when mic not granted */
.vc-perm-btn{display:none;align-items:center;gap:5px;padding:5px 12px;border-radius:8px;border:1px solid var(--danger,#ff4d6d);background:rgba(255,77,109,.12);color:var(--danger,#ff4d6d);font-family:'Roboto Mono',monospace;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .2s;animation:perm-pulse 2s ease-in-out infinite alternate;white-space:nowrap}
.vc-perm-btn:hover{background:rgba(255,77,109,.22);border-color:var(--danger);box-shadow:0 0 12px rgba(255,77,109,.3)}
.vc-perm-btn.visible{display:flex}
@keyframes perm-pulse{from{box-shadow:0 0 0 0 rgba(255,77,109,.4)}to{box-shadow:0 0 8px 2px rgba(255,77,109,.15)}}

/* Center orb area */
.vc-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;position:relative}

/* Owl orb */
.orb-wrap{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--state);opacity:.3;transition:all .5s;animation:orb-breathe 3s ease-in-out infinite}
.orb-ring-2{position:absolute;inset:-12px;border-radius:50%;border:1px solid var(--state);opacity:.15;animation:orb-breathe 4s ease-in-out infinite reverse}
.orb-ring-3{position:absolute;inset:-26px;border-radius:50%;border:1px dashed var(--state);opacity:.08;animation:orb-spin 20s linear infinite}
@keyframes orb-breathe{0%,100%{transform:scale(1);opacity:.2}50%{transform:scale(1.06);opacity:.5}}
@keyframes orb-spin{to{transform:rotate(360deg)}}
body.st-speaking .orb-ring{opacity:.6;box-shadow:0 0 40px var(--state);animation:orb-speak .4s ease-in-out infinite alternate}
body.st-speaking .orb-ring-2{opacity:.3;box-shadow:0 0 60px var(--state)}
@keyframes orb-speak{from{transform:scale(1);box-shadow:0 0 30px var(--state)}to{transform:scale(1.08);box-shadow:0 0 60px var(--state)}}
body.st-thinking .orb-ring{animation:orb-think 1.2s ease-in-out infinite;border-style:dashed}
@keyframes orb-think{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.04)}100%{transform:rotate(360deg) scale(1)}}
body.st-memory .orb-ring{box-shadow:0 0 50px var(--gold);border-color:var(--gold);animation:orb-memory .6s ease-out 3}
@keyframes orb-memory{0%{transform:scale(1)}50%{transform:scale(1.12);box-shadow:0 0 80px var(--gold)}100%{transform:scale(1)}}
.orb-owl{font-size:72px;filter:drop-shadow(0 0 20px var(--state));transition:filter .5s;z-index:1;animation:owl-float 4s ease-in-out infinite}
@keyframes owl-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Mic level visualizer */
.vc-mic-viz{display:flex;gap:3px;align-items:flex-end;height:32px;margin-top:20px}
.mic-bar{width:4px;border-radius:2px;background:var(--green);transition:height .08s;min-height:3px;box-shadow:0 0 4px rgba(0,255,163,.4)}
body.st-speaking .mic-bar{background:var(--purple);box-shadow:0 0 4px rgba(180,122,255,.4)}

/* State label */
.vc-state-label{margin-top:14px;font-family:'Orbitron',monospace;font-size:11px;font-weight:900;letter-spacing:.2em;color:var(--state);text-shadow:0 0 16px var(--state);transition:all .5s;text-transform:uppercase}
.vc-state-sub{font-size:8px;color:var(--muted);margin-top:4px;letter-spacing:.1em}

/* Transcript panel */
.vc-transcript{position:absolute;top:52px;right:0;bottom:72px;width:320px;background:var(--bg-surface);border-left:1px solid rgba(255,255,255,.06);display:none;flex-direction:column;z-index:3;overflow:hidden;transition:transform .3s}
.vc-transcript.open{display:flex}
.vc-tx-header{padding:8px 12px;border-bottom:1px solid var(--border);font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);display:flex;justify-content:space-between;align-items:center}
.vc-tx-body{flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.vc-tx-body::-webkit-scrollbar{width:3px}
.vc-tx-body::-webkit-scrollbar-thumb{background:rgba(58,201,255,.2)}

/* Transcript message groups */
.tx-group{animation:tx-in .2s ease-out;margin-bottom:8px}
@keyframes tx-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.tx-group.user{align-self:flex-end;max-width:88%}
.tx-group.assistant{align-self:flex-start;max-width:88%}
.tx-group.system{align-self:center;max-width:95%}
.tx-speaker{font-size:7px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;display:flex;align-items:center;gap:6px}
.tx-speaker.user-label{color:var(--green);justify-content:flex-end}
.tx-speaker.assistant-label{color:var(--purple)}
.tx-speaker .tx-time{font-weight:400;color:var(--muted);letter-spacing:.04em;font-size:7px}
.tx-bubble{padding:8px 11px;border-radius:10px;font-size:11px;line-height:1.65;word-break:break-word}
.tx-group.user .tx-bubble{background:var(--accent-dim);border:1px solid var(--border);border-bottom-right-radius:2px;color:var(--text)}
.tx-group.assistant .tx-bubble{background:var(--accent-dim);border:1px solid var(--border);border-bottom-left-radius:2px;color:var(--text)}
.tx-group.system .tx-bubble{background:none;border:none;font-size:8px;color:var(--muted);text-align:center;padding:4px 0}

/* Markdown inside transcript bubbles */
.tx-bubble strong{color:var(--cyan);font-weight:800}
.tx-bubble em{color:var(--text);font-style:italic}
.tx-bubble code{background:var(--bg-card);padding:1px 5px;border-radius:3px;font-size:10px;font-family:'Roboto Mono',monospace}
.tx-bubble a{color:var(--cyan);text-decoration:underline}
.tx-bubble ul,.tx-bubble ol{padding-left:16px;margin:4px 0}
.tx-bubble li{margin-bottom:2px}
.tx-bubble p{margin-bottom:6px}
.tx-bubble p:last-child{margin-bottom:0}

/* Science highlights */
.tx-bubble .tx-gene{color:var(--accent);font-weight:800;font-family:'Roboto Mono',monospace;font-size:10px;background:var(--accent-dim);padding:0 4px;border-radius:3px;border:1px solid var(--border);text-decoration:none;cursor:pointer;transition:.15s}
.tx-bubble .tx-gene:hover{background:rgba(0,255,163,.18);box-shadow:0 0 6px rgba(0,255,163,.3)}
.tx-bubble .tx-snp{color:var(--purple);font-family:'Roboto Mono',monospace;font-size:9px;text-decoration:none;background:var(--accent-dim);padding:0 3px;border-radius:3px;border:1px solid var(--border);cursor:pointer;transition:.15s}
.tx-bubble .tx-snp:hover{background:var(--accent-dim);box-shadow:0 0 6px rgba(180,122,255,.3)}
.tx-bubble .tx-peptide{color:var(--warning);font-weight:700;text-decoration:none;cursor:pointer;transition:.15s}
.tx-bubble .tx-peptide:hover{text-shadow:0 0 8px rgba(250,208,21,.4)}
.tx-bubble .tx-pmid{display:inline-block;font-size:8px;padding:1px 6px;border-radius:4px;background:var(--accent-dim);border:1px solid var(--border);color:var(--cyan);font-weight:700;text-decoration:none;margin:0 2px;cursor:pointer;transition:.15s}
.tx-bubble .tx-pmid:hover{background:var(--accent-dim);box-shadow:0 0 6px rgba(58,201,255,.3)}
.tx-bubble .tx-dose{color:#10B981;font-weight:700;font-size:10px}
.tx-bubble .tx-h3{font-size:11px;font-weight:900;color:var(--cyan);letter-spacing:.06em;margin:8px 0 4px;text-transform:uppercase}

/* Science reference pills */
.tx-ref-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.06)}
.tx-ref-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:10px;font-size:8px;font-weight:700;text-decoration:none;cursor:pointer;transition:.15s;letter-spacing:.02em;font-family:'Roboto Mono',monospace}
.tx-ref-pill:hover{transform:translateY(-1px)}
.tx-ref-pill.gene{background:var(--accent-dim);border:1px solid var(--border);color:var(--accent)}
.tx-ref-pill.gene:hover{background:rgba(0,255,163,.16);box-shadow:0 0 8px rgba(0,255,163,.2)}
.tx-ref-pill.snp{background:var(--accent-dim);border:1px solid var(--border);color:var(--purple)}
.tx-ref-pill.snp:hover{background:var(--accent-dim);box-shadow:0 0 8px rgba(180,122,255,.2)}
.tx-ref-pill.peptide{background:var(--accent-dim);border:1px solid var(--border);color:var(--warning)}
.tx-ref-pill.peptide:hover{background:rgba(250,208,21,.16);box-shadow:0 0 8px rgba(250,208,21,.2)}
.tx-ref-pill.pmid{background:var(--accent-dim);border:1px solid var(--border);color:var(--info)}
.tx-ref-pill.pmid:hover{background:var(--accent-dim);box-shadow:0 0 8px rgba(58,201,255,.2)}
.tx-ref-pill .pill-pin{display:none;margin-left:2px;cursor:pointer;font-size:9px;opacity:.6;transition:.15s}
.tx-ref-pill:hover .pill-pin{display:inline}
.tx-ref-pill .pill-pin:hover{opacity:1;transform:scale(1.2)}
.tx-ref-pill.tagged{border-color:rgba(13,148,136,.6)!important;box-shadow:0 0 6px rgba(13,148,136,.3)}
.tx-ref-pill.tagged .pill-pin{display:inline;opacity:1}

/* Transcript action bar */
.tx-actions{display:flex;gap:4px;padding:6px 10px;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;justify-content:flex-end;background:var(--bg-surface)}
.tx-act-btn{padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--bg-card);color:var(--muted);font-size:8px;font-weight:700;font-family:inherit;cursor:pointer;transition:.15s;letter-spacing:.04em}
.tx-act-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--accent-dim)}
.tx-act-btn:active{transform:scale(.95)}

/* 📌 Tag button */
.vc-btn-tag{border-color:rgba(13,148,136,.4);background:rgba(13,148,136,.08)}
.vc-btn-tag.pulse{animation:tag-pulse .6s ease-out}
@keyframes tag-pulse{0%{box-shadow:0 0 0 0 rgba(13,148,136,.6)}70%{box-shadow:0 0 0 14px rgba(13,148,136,0)}100%{box-shadow:0 0 0 0 rgba(13,148,136,0)}}

/* Media previews in transcript */
.tx-media{margin:8px 0;animation:tx-in .3s ease-out}
.tx-media-grid{display:flex;flex-wrap:wrap;gap:6px}
.tx-media-thumb{border-radius:8px;border:1px solid var(--border);cursor:pointer;transition:all .2s;max-width:240px;max-height:180px;object-fit:cover;display:block}
.tx-media-thumb:hover{border-color:var(--info);box-shadow:0 4px 16px rgba(58,201,255,.2);transform:translateY(-2px)}
.tx-media-video{position:relative;display:inline-block;border-radius:8px;overflow:hidden;border:1px solid var(--border)}
.tx-media-video video{max-width:240px;max-height:180px;display:block;border-radius:7px}
.tx-media-video .play-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg-card);font-size:28px;opacity:.8;transition:opacity .2s;pointer-events:none}
.tx-media-video:hover .play-badge{opacity:1}
.tx-media-label{font-size:8px;color:var(--muted);margin-top:4px;display:flex;gap:8px;align-items:center}
.tx-media-label a{color:var(--cyan);text-decoration:none;font-weight:700}
.tx-media-label a:hover{text-decoration:underline}
.tx-media-wrap{position:relative;display:inline-block;max-width:240px}
.tx-media-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tx-media-act{padding:5px 9px;border-radius:999px;border:1px solid var(--border);background:var(--bg-card);color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-family:inherit;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:4px;min-height:28px}
.tx-media-act:hover{background:var(--accent-dim);border-color:var(--cyan);color:var(--cyan)}
.tx-media-act:active{transform:scale(.94)}
.tx-media-act.studio{border-color:var(--accent);color:var(--green)}
.tx-media-act.studio:hover{background:var(--accent-dim);box-shadow:0 0 10px rgba(0,255,163,.2)}
.tx-media-act.refine{border-color:var(--border);color:var(--purple)}
.tx-media-act.refine:hover{background:var(--accent-dim);box-shadow:0 0 10px rgba(180,122,255,.2)}
.tx-media-act.crop{border-color:var(--border);color:var(--gold)}
.tx-media-act.crop:hover{background:rgba(250,208,21,.12);box-shadow:0 0 10px rgba(250,208,21,.2)}
.tx-media-act.vary{border-color:var(--info);color:var(--cyan)}
.tx-media-act.undo{border-color:var(--border);color:var(--red)}
.tx-media-act.undo:hover{background:var(--accent-dim)}
.tx-media-act[disabled]{opacity:.35;pointer-events:none}
.tx-current-badge{position:absolute;top:4px;left:4px;font-size:7px;letter-spacing:.14em;font-weight:900;text-transform:uppercase;padding:2px 6px;border-radius:8px;background:rgba(0,255,163,.18);color:var(--green);border:1px solid rgba(0,255,163,.4);pointer-events:none}

/* Bottom controls */
.vc-controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 16px;z-index:2;border-top:1px solid rgba(255,255,255,.04);flex-shrink:0;background:var(--bg-surface);backdrop-filter:blur(8px)}
.vc-btn{width:48px;height:48px;border-radius:50%;border:1px solid;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .2s;background:transparent;-webkit-tap-highlight-color:transparent}
.vc-btn:active{transform:scale(.9)}
.vc-btn-mic{border-color:var(--accent);box-shadow:0 0 12px rgba(0,255,163,.2)}
.vc-btn-mic.muted{border-color:var(--border);box-shadow:0 0 8px rgba(255,77,109,.15)}
.vc-btn-end{border-color:var(--border);background:var(--accent-dim);box-shadow:0 0 12px rgba(255,77,109,.2)}
.vc-btn-end:hover{background:var(--accent-dim)}
.vc-btn-tx{border-color:var(--info)}
.vc-btn-tx.active{border-color:var(--info);background:var(--accent-dim)}
.vc-btn-file{border-color:var(--border)}
.vc-btn-sm{width:40px;height:40px;font-size:16px}
.vc-timer{font-family:'Orbitron',monospace;font-size:10px;color:var(--muted);letter-spacing:.1em;min-width:60px;text-align:center}

/* Mobile */
@media(max-width:768px){
  .orb-wrap{width:180px;height:180px}
  .orb-owl{font-size:56px}
  .vc-transcript{width:100%;top:auto;bottom:72px;max-height:50vh;right:0;left:0;border-left:none;border-top:1px solid rgba(255,255,255,.08)}
  .vc-btn{width:48px;height:48px;font-size:20px}
  .vc-btn-sm{width:42px;height:42px;font-size:16px}
  .vc-minimize{display:none}
}

/* Popup/mini mode */
@media(max-height:400px),(max-width:400px){
  .orb-wrap{width:100px;height:100px}
  .orb-owl{font-size:36px}
  .vc-mic-viz{height:20px;margin-top:10px}
  .vc-state-label{font-size:9px}
  .vc-transcript{display:none!important}
}