/*
 * MODUŁ STYLÓW: LIVE.CSS
 * Nakładka rozmowy głosowej, wizualizator i log Live.
 * Kolejność modułów jest zapisana w index.html i chroni istniejącą kaskadę.
 */

.live-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,18,.72);
  backdrop-filter:blur(14px);
  display:grid;
  place-items:center;
  z-index:30;
}
.live-card{
  width:min(720px, calc(100vw - 32px));
  background:rgba(10,14,28,.94);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
  padding:20px;
}
.live-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.live-title{font-weight:900;font-size:20px}
.live-sub{font-size:13px;color:var(--muted)}
.live-profile-switch{display:flex;gap:8px;margin:8px 0 14px}
.live-profile-switch .quality-btn{flex:1}
.live-visualizer{
  min-height:360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:24px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 60%, transparent 100%);
  cursor:pointer;
  overflow:hidden;
  position:relative;
}
.live-blob{
  width:170px;height:170px;
  border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;
  background:linear-gradient(135deg,#8b5cf6 0%, #3b82f6 100%);
  box-shadow:0 24px 65px rgba(59,130,246,.35);
  animation:morph-idle 6s ease-in-out infinite;
  transition:.35s ease;
}
.live-status{
  margin-top:34px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
}
.live-visualizer.connecting .live-blob{
  background:linear-gradient(135deg,#f59e0b,#fbbf24);
  animation:pulse 1s infinite alternate;
}
.live-visualizer.listening .live-blob{
  background:linear-gradient(135deg,#f43f5e,#f97316);
  animation:morph-listen 3s linear infinite;
  transform:scale(1.06);
}
.live-visualizer.speaking .live-blob{
  background:linear-gradient(135deg,#06b6d4,#3b82f6,#8b5cf6);
  animation:morph-speak 1s ease-in-out infinite alternate;
}
.live-visualizer.error .live-blob{
  background:linear-gradient(135deg,#ef4444,#dc2626);
  animation:pulse 1s infinite alternate;
}

.live-debug-wrap{
  margin-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:9px;
}
.debug-panel.expanded #debug-output{
  max-height:none;
}
.live-debug-summary{
  cursor:pointer;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  padding:5px 0 9px;
}
.live-debug{
  width:100%;
  min-height:120px;
  max-height:200px;
  resize:vertical;
  border-radius:16px;
  border:1px solid var(--line);
  background:#09101f;
  color:#dbeafe;
  padding:12px;
}
.messages::-webkit-scrollbar,
.live-debug::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.messages::-webkit-scrollbar-track,
.live-debug::-webkit-scrollbar-track{
  background:transparent;
}

.messages::-webkit-scrollbar-thumb,
.live-debug::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.08);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}

.messages:hover::-webkit-scrollbar-thumb,
.live-debug:hover::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);
  background-clip:padding-box;
}

.messages::-webkit-scrollbar-corner,
.live-debug::-webkit-scrollbar-corner{
  background:transparent;
}



/* Selektor głosu Live: sześć popularnych pozycji, pełny katalog w Debug. */
.live-card{max-height:calc(100dvh - 32px);overflow-y:auto}
.live-voice-control{position:relative;display:flex;justify-content:flex-end;margin:-4px 0 12px}
.live-voice-btn{min-height:38px;display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);color:#dbeafe;cursor:pointer}
.live-voice-btn:hover,.live-voice-btn[aria-expanded="true"]{border-color:rgba(139,157,255,.5);background:rgba(139,157,255,.1)}
.live-voice-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.live-voice-btn span{color:var(--muted);font-size:12px}
.live-voice-btn strong{font-size:12px}
.live-voice-menu{position:absolute;z-index:4;top:44px;right:0;width:min(430px,calc(100vw - 56px));max-height:min(480px,60vh);overflow:auto;padding:12px;border:1px solid rgba(139,157,255,.3);border-radius:16px;background:#0b1224;box-shadow:0 18px 48px rgba(0,0,0,.45)}
.live-voice-menu-title{margin:1px 2px 10px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.live-voice-options{display:flex;flex-direction:column;gap:6px}
.live-voice-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px;border:1px solid transparent;border-radius:11px}
.live-voice-option.is-selected{border-color:rgba(139,157,255,.35);background:rgba(139,157,255,.08)}
.live-voice-select,.live-voice-preview-btn{border:0;color:#eaf1ff;background:transparent;cursor:pointer}
.live-voice-select{min-width:0;padding:7px 8px;text-align:left;font-weight:750}
.live-voice-preview-btn{padding:7px 9px;border-radius:9px;color:#bfdbfe;background:rgba(255,255,255,.055);font-size:12px}
.live-voice-preview-btn:hover{background:rgba(139,157,255,.16)}
.live-voice-preview-btn:disabled{opacity:.55;cursor:wait}
.live-voice-preview-status{min-height:18px;margin:10px 3px 4px;color:var(--muted);font-size:12px}
.live-voice-preview-status.is-error{color:#fca5a5}
.live-voice-preview-audio{width:100%;height:36px;margin-top:6px}