/*
 * 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;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.live-profile-switch .quality-btn{flex:1 1 140px}
.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,#ceef69 0%, #42966a 100%);
  box-shadow:0 24px 65px rgba(143,192,87,.25);
  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,#fb923c,#f59e0b);
  animation:morph-listen 3s linear infinite;
  transform:scale(1.06);
}
.live-visualizer.speaking .live-blob{
  background:linear-gradient(135deg,#ceef69,#65a64e,#26825b);
  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: pełny katalog dostępny wyłącznie 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}


/* Live jest poniżej przełączników, ale nadal osobno od Wyślij.
   Nie zmniejszamy 44 px: ten sam przycisk musi dać się łatwo dotknąć przy zatrzymaniu. */
.composer-live-row { position:relative; display:flex; justify-content:flex-end; margin:0 0 7px; }
.live-coachmark::after { right:16px; }
.live-coachmark-try { justify-self:start; align-self:flex-start; margin-top:6px; min-height:36px; border:0; border-radius:9px; padding:7px 12px; background:#ceef69; color:#10291f; font:inherit; font-weight:750; cursor:pointer; }
.live-hint-visible #agent-coachmark { display:none; }
.composer-live-btn { width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:rgba(16,41,31,.85); color:#ceef69; }
.composer-live-btn.active { background:#ceef69; color:#10291f; box-shadow:0 0 0 3px rgba(206,239,105,.15); }
.composer-live-btn:focus-visible { outline:2px solid #ceef69; outline-offset:3px; }
/* Dłuższy panel z przewijaniem mieści Debug i zostawia miejsce na composer. */
.live-overlay { inset:76px 0 auto; background:none; backdrop-filter:none; pointer-events:none; }
.live-card { width:min(680px,calc(100vw - 32px)); max-height:calc(100dvh - 240px); pointer-events:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.live-visualizer { min-height:260px; cursor:default; }
.live-debug { min-height:160px; max-height:300px; }
.live-blob { width:100px; height:100px; flex-shrink:0; }
.live-blob { border:0; padding:0; cursor:pointer; touch-action:manipulation; }
.live-blob:disabled { cursor:default; }
.live-blob:focus-visible { outline:3px solid #fff; outline-offset:8px; }
.live-visualizer.paused .live-blob { animation-play-state:paused; filter:saturate(.3); }
.live-visualizer.thinking .live-blob { background:linear-gradient(135deg,#a78bfa,#6366f1); }
.live-status { margin-top:22px; max-width:100%; padding:0 8px; text-align:center; text-transform:none; letter-spacing:normal; line-height:1.5; }
@media (max-width:520px) {
  .live-overlay { top:72px; }
  .live-card { width:calc(100vw - 20px); padding:16px; max-height:calc(100dvh - 220px); border-radius:20px; }
  .live-visualizer { min-height:160px; }
}
@media (max-height:580px) {
  .live-overlay { top:12px; }
  .live-card { max-height:calc(100dvh - 100px); }
}

/* Dodatkowy oddech pod nagłówkiem na telefonie: animacja nie nachodzi na Zamknij. */
@media (max-width:520px) {
  .live-visualizer { padding:32px 0 12px; min-height:230px; }
  .live-head { margin-bottom:18px; }
}