/*
 * MODUŁ STYLÓW: RESPONSIVE.CSS
 * Animacje, wariant mobilny, ograniczenie ruchu i błąd startu.
 * Kolejność modułów jest zapisana w index.html i chroni istniejącą kaskadę.
 */

.tts-hint{
  margin:0 24px 10px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(110,168,255,.25);
  background:rgba(110,168,255,.11);
  color:#cfe0ff;
  font-size:12px;
  font-weight:700;
  align-self:flex-start;
}

.typing-cursor::after{
  content:"";
  width:8px;
  height:1.1em;
  background:rgba(255,255,255,.6);
  display:inline-block;
  margin-left:2px;
  vertical-align:middle;
  animation:cursor-blink .9s steps(2, start) infinite;
}

@keyframes cursor-blink{
  to{opacity:0}
}
@keyframes thinking-orbit{
  to{transform:rotate(360deg)}
}
@keyframes agent-node-pulse{
  0%{box-shadow:0 0 0 0 rgba(105,164,255,.45)}
  70%{box-shadow:0 0 0 9px rgba(105,164,255,0)}
  100%{box-shadow:0 0 0 0 rgba(105,164,255,0)}
}
@keyframes agent-step-arrive{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes thinking-bounce{
  0%,75%,100%{transform:translateY(0);opacity:.5}
  35%{transform:translateY(-5px);opacity:1}
}

.mobile-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:18;
  background:rgba(3,7,16,.55);
  backdrop-filter:blur(4px);
}

@keyframes morph-idle{
  0%,100%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%}
  50%{border-radius:30% 60% 70% 40% / 50% 60% 30% 60%}
}
@keyframes morph-listen{
  0%{transform:rotate(0deg) scale(1.03)}
  100%{transform:rotate(360deg) scale(1.08)}
}
@keyframes morph-speak{
  from{transform:scale(1)}
  to{transform:scale(1.14)}
}
@keyframes pulse{
  from{transform:scale(.92)}
  to{transform:scale(1.03)}
}

@media (max-width: 980px){
  .shell{grid-template-columns:1fr}
  .mobile-menu-btn{display:grid;place-items:center}
  .topbar{padding:14px 16px 12px}
  .messages{padding:18px 16px 12px}
  .composer{padding:0 16px 16px}
  .tts-hint{margin:0 16px 8px}
  .sidebar{
    display:flex;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:min(88vw,340px);
    z-index:20;
    transform:translateX(-104%);
    transition:transform .24s ease;
  }
  .sidebar.open{transform:translateX(0)}
  .message-row{max-width:92%}
  .message-row.has-audio,.message-row.has-files{width:92%}
  .audio-card{min-width:0}
  .thinking-indicator{gap:8px}
  .thinking-copy small{font-size:10px}
  .composer-actions-menu{
    width:min(250px,calc(100vw - 32px));
  }
}
@media (max-width:760px){
  .agent-mode-copy{min-width:96px}
}
@media (max-width:520px){
  .app-bg-video{opacity:.42}
  .app-bg-overlay{
    background:linear-gradient(180deg,rgba(3,7,17,.36),rgba(3,7,17,.62));
  }
  .welcome-overlay{align-items:center;padding:16px}
  .welcome-card{padding:21px 19px 18px;border-radius:22px}
  .welcome-card h1{font-size:27px}
  .welcome-subtitle{margin-bottom:16px}
  .welcome-points{gap:7px;margin-bottom:14px}
  .welcome-points li{font-size:12px;line-height:1.42}
  .welcome-enter-btn{position:sticky;bottom:0}
  .topbar{gap:8px}
  .topbar-title{max-width:48vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .messages{padding-left:11px;padding-right:11px}
  .message-row{max-width:96%;gap:7px}
  .message-row.has-audio,.message-row.has-files{width:96%}
  .avatar{width:30px;height:30px;font-size:10px}
  .bubble{padding:12px;border-radius:17px}
  .agent-progress-card{padding:8px;border-radius:15px}
  .agent-progress-toggle{gap:8px}
  .agent-progress-toggle .thinking-dots{display:none}
  .agent-timeline{margin-left:8px}
  .agent-timeline-step{grid-template-columns:22px minmax(0,1fr);gap:8px}
  .agent-timeline-node{width:22px;height:22px}
  .agent-timeline-step:not(:last-child)::after{left:10px}
  .composer{padding:0 10px 11px}
  .composer-box{gap:7px;padding:9px}
  .live-card{width:min(96vw,720px);padding:15px}
  .live-profile-switch{gap:5px}
  .live-profile-switch .quality-btn{font-size:11px;padding-left:6px;padding-right:6px}
  .live-blob{width:135px;height:135px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
/* Komunikat awarii startu jest nad całą aplikacją, aby błąd JS nie wyglądał
   jak zestaw nieaktywnych przycisków bez żadnego wyjaśnienia. */
.startup-error{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:100;
  transform:translateX(-50%);
  width:min(680px,calc(100vw - 32px));
  padding:14px 18px;
  border:1px solid rgba(239,68,68,.55);
  border-radius:14px;
  background:#32131b;
  color:#ffe4e8;
  box-shadow:var(--shadow);
  text-align:center;
  font-weight:700;
}