/*
 * MODUŁ STYLÓW: MESSAGES.CSS
 * Wiadomości, Markdown, rozumowanie, Agent, pliki i diagnostyka.
 * Kolejność modułów jest zapisana w index.html i chroni istniejącą kaskadę.
 */

.messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:28px 24px 18px;
  display:flex;
  flex-direction:column;
  gap:18px;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.12) transparent;
}

.message-row{
  display:flex;
  gap:10px;
  max-width:min(920px, 86%);
}
.message-row.user{align-self:flex-end;flex-direction:row-reverse}
.message-row.ai{align-self:flex-start}
.message-row.has-audio{width:min(640px,86%)}
.message-row.has-files{width:min(760px,86%)}
.message-content{width:100%;min-width:0}
.avatar{
  width:36px;height:36px;border-radius:999px;
  display:grid;place-items:center;
  flex-shrink:0;
  font-size:12px;
  font-weight:900;
  border:1px solid var(--line);
}
.avatar.ai{background:rgba(255,255,255,.06)}
.avatar.user{background:linear-gradient(135deg,var(--user),#3b82f6)}
.bubble{
  width:100%;
  border-radius:22px;
  padding:16px 18px;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--shadow);
}
.message-actions{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  padding:5px 4px 0;
}
.message-action-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid transparent;
  border-radius:9px;
  padding:5px 7px;
  background:transparent;
  color:#91a3c6;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.message-action-btn:hover{color:#e1eaff;background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.07)}
.message-action-btn:disabled{opacity:.5;cursor:wait}
.message-interrupted{
  margin-top:11px;
  padding-top:9px;
  border-top:1px solid rgba(245,158,11,.2);
  color:#fcd7a1;
  font-size:11px;
  font-weight:800;
}
.message-row.user .bubble{
  background:linear-gradient(135deg, rgba(30,64,175,.95), rgba(37,99,235,.95));
  border-color:rgba(147,197,253,.18);
}
.system-pill{
  align-self:center;
  padding:10px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:rgba(245,158,11,.15);
  color:#ffe4ab;
  border:1px solid rgba(245,158,11,.25);
}

.bubble p{margin:0 0 10px}
.bubble p:last-child{margin-bottom:0}
.bubble code{
  background:rgba(255,255,255,.08);
  padding:2px 6px;
  border-radius:8px;
  font-size:.95em;
}
.bubble pre{
  margin-top:10px;
  border-radius:16px;
  padding:14px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.08);
  background:#0c1221;
}
.bubble pre code{
  padding:0;
  border-radius:0;
  background:transparent;
}
.bubble h1,.bubble h2,.bubble h3,.bubble h4{
  margin:14px 0 8px;
  line-height:1.25;
  color:#f1f5ff;
}
.bubble h1:first-child,.bubble h2:first-child,.bubble h3:first-child,.bubble h4:first-child{margin-top:0}
.bubble h1{font-size:1.35em}
.bubble h2{font-size:1.22em}
.bubble h3{font-size:1.12em}
.bubble h4{font-size:1.04em}
.bubble ul,.bubble ol{
  margin:8px 0 10px;
  padding-left:24px;
}
.bubble li+li{margin-top:4px}
.bubble blockquote{
  margin:10px 0;
  padding:8px 12px;
  border-left:3px solid rgba(139,157,255,.65);
  border-radius:0 10px 10px 0;
  background:rgba(139,157,255,.07);
  color:#cbd5e1;
}
.bubble a{
  color:#a9c5ff;
  overflow-wrap:anywhere;
  text-underline-offset:2px;
}
.bubble a:hover{color:#d8e6ff}
.bubble img{
  max-width:100%;
  display:block;
  border-radius:18px;
  border:1px solid var(--line);
  margin-top:10px;
}
.bubble audio,.bubble video{
  width:100%;
  margin-top:10px;
  border-radius:14px;
}
.audio-card{
  min-width:min(430px,55vw);
  padding:14px;
  background:linear-gradient(145deg,rgba(57,83,150,.17),rgba(17,25,46,.9));
}
.audio-title{
  color:#dbeafe;
  font-size:13px;
  font-weight:800;
}
.tts-player{
  width:100%;
  min-height:48px;
  accent-color:#8b9dff;
  color-scheme:dark;
}
.tts-player::-webkit-media-controls-panel{
  background:rgba(25,35,61,.96);
}

.thinking-indicator{
  min-height:48px;
  display:flex;
  align-items:center;
  gap:12px;
}
.thinking-orbit{
  position:relative;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  border:2px solid rgba(130,155,255,.17);
  border-top-color:#83a8ff;
  border-right-color:#ae89ff;
  animation:thinking-orbit 1s linear infinite;
}
.thinking-agent .thinking-orbit{
  border-top-color:#40e3c0;
  border-right-color:#68a9ff;
}
.thinking-copy{display:grid;gap:3px;min-width:0}
.thinking-copy strong{font-size:13px;color:#e5edff}
.thinking-copy small{font-size:11px;color:#aab8d6}
.thinking-dots{display:flex;gap:4px;margin-left:auto}
.thinking-dots i{
  width:6px;height:6px;border-radius:50%;
  background:#a7b8ff;
  animation:thinking-bounce 1.1s ease-in-out infinite;
}
.thinking-dots i:nth-child(2){animation-delay:.15s}
.thinking-dots i:nth-child(3){animation-delay:.3s}

/*
 * OŚ PRACY AGENTA
 * ----------------
 * Zwykły spinner mówi tylko, że żądanie trwa. Agent wykonuje wiele osobnych
 * kroków, dlatego karta poniżej pokazuje pionową oś: zapisany przez API krok
 * otrzymuje wypełniony punkt i zielone połączenie, a ostatni pulsujący punkt
 * oznacza czynność wykonywaną właśnie teraz. Całość można zwinąć bez przerywania
 * odpytywania backendu o postęp.
 */
.agent-progress-card{
  display:block;
  min-height:0;
  width:min(100%, 620px);
  padding:10px;
  border:1px solid rgba(64,227,192,.2);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(17,34,53,.8),rgba(17,24,43,.7));
  box-shadow:0 12px 30px rgba(4,12,28,.18),inset 0 1px 0 rgba(255,255,255,.035);
}
.agent-progress-toggle{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:2px;
  border:0;
  color:inherit;
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.agent-progress-toggle .thinking-copy{flex:1}
.agent-progress-toggle .thinking-dots{margin-left:8px}
.agent-progress-chevron{
  width:24px;
  flex:0 0 24px;
  color:#8fe7d7;
  font-size:20px;
  line-height:1;
  text-align:center;
  transform:rotate(-90deg);
  transition:transform .2s ease,color .2s ease;
}
.agent-progress-toggle[aria-expanded="true"] .agent-progress-chevron{
  transform:rotate(0deg);
  color:#d7fff7;
}
.agent-timeline{
  list-style:none;
  margin:12px 0 2px 16px;
  padding:2px 0 0;
  border-top:1px solid rgba(255,255,255,.055);
}
.agent-timeline-step{
  position:relative;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:10px;
  min-height:48px;
  padding:12px 8px 4px 0;
  animation:agent-step-arrive .32s ease both;
}
.agent-timeline-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:11px;
  top:35px;
  bottom:-13px;
  width:2px;
  border-radius:2px;
  background:rgba(120,148,191,.2);
}
.agent-timeline-step.is-complete:not(:last-child)::after{
  background:linear-gradient(#42dfbd,#638dff);
  box-shadow:0 0 9px rgba(64,227,192,.24);
}
.agent-timeline-node{
  position:relative;
  z-index:1;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:2px solid rgba(135,161,210,.42);
  border-radius:50%;
  background:#121d33;
  color:#08151d;
  font-size:12px;
  font-weight:900;
}
.agent-timeline-step.is-complete .agent-timeline-node{
  border-color:#43e1bf;
  background:linear-gradient(135deg,#43e1bf,#79a7ff);
  box-shadow:0 0 14px rgba(67,225,191,.32);
}
.agent-timeline-step.is-active .agent-timeline-node{
  border-color:#8ab2ff;
  box-shadow:0 0 0 0 rgba(105,164,255,.42);
  animation:agent-node-pulse 1.5s ease-out infinite;
}
.agent-timeline-step.is-active .agent-timeline-node::after{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#9fc0ff;
  box-shadow:0 0 9px #85abff;
}
.agent-timeline-copy{display:grid;gap:3px;min-width:0}
.agent-timeline-copy strong{font-size:12px;color:#dfeaff;overflow-wrap:anywhere}
.agent-timeline-copy small{font-size:11px;color:#91a5c8;overflow-wrap:anywhere}
.agent-completed-steps{
  margin:12px 0;
  border:1px solid rgba(64,227,192,.18);
  border-radius:14px;
  background:rgba(16,31,49,.52);
  overflow:hidden;
}
.agent-completed-steps summary{
  cursor:pointer;
  padding:10px 13px;
  color:#bff7eb;
  font-size:12px;
  font-weight:800;
}
.agent-completed-steps .agent-timeline{
  margin:0 12px 10px 20px;
  border-top:1px solid rgba(255,255,255,.055);
}
.agent-result{
  margin-top:14px;
  border:1px solid rgba(64,227,192,.2);
  border-radius:14px;
  background:rgba(16,31,49,.46);
  overflow:hidden;
}
.agent-result-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 13px;
  border:0;
  background:transparent;
  color:#c9fff3;
  text-align:left;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.agent-result-toggle:hover{background:rgba(65,205,174,.08)}
.agent-result-chevron{font-size:17px;transform:rotate(-90deg);transition:transform .18s ease}
.agent-result-toggle[aria-expanded="true"] .agent-result-chevron{transform:rotate(0deg)}
.agent-result-body{padding:0 12px 12px}

.thought-block{
  margin:14px 0 0;
  border:1px solid rgba(110,168,255,.18);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  overflow:hidden;
}
.thought-block summary{
  list-style:none;
  cursor:pointer;
  padding:10px 14px;
  font-size:13px;
  font-weight:800;
  color:#cfe0ff;
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.thought-block summary::-webkit-details-marker{display:none}
.thought-block summary::before{
  content:"🧠";
  display:inline-block;
  transition:transform .18s ease;
  color:#a5c7ff;
}
.thought-block[open] summary::before{
  transform:rotate(90deg);
}
.thought-content{
  padding:0 14px 12px;
  color:#c4d4f8;
  font-size:14px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(10,16,31,.28);
}
.thought-content p:first-child{margin-top:10px}
.thought-streaming{
  border-color:rgba(139,157,255,.42);
  box-shadow:0 0 18px rgba(100,120,255,.1);
}

.grounding-block{
  margin:0 0 12px;
  border:1px solid rgba(16,185,129,.22);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  overflow:hidden;
}

.grounding-block summary{
  list-style:none;
  cursor:pointer;
  padding:10px 14px;
  font-size:13px;
  font-weight:800;
  color:#d7ffee;
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.grounding-block summary::-webkit-details-marker{display:none}
.grounding-block summary::before{
  content:"▸";
  display:inline-block;
  transition:transform .18s ease;
  color:#86efac;
}
.grounding-block[open] summary::before{
  transform:rotate(90deg);
}
.grounding-sub{
  padding:0 14px 8px;
  border-top:1px solid rgba(255,255,255,.06);
}
.grounding-sub-label{
  margin:10px 0 8px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.06em;
}
.grounding-query-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.grounding-query-list code{
  background:rgba(255,255,255,.08);
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
}
.grounding-list{
  padding:0 14px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border-top:1px solid rgba(255,255,255,.06);
}
.grounding-link{
  color:#cfe0ff;
  text-decoration:none;
  word-break:break-word;
  line-height:1.4;
}
.grounding-link:hover{
  text-decoration:underline;
}

.media-card{
  margin-top:10px;
  padding:10px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.media-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}
.media-link{
  color:#cfe0ff;
  font-weight:800;
  text-decoration:none;
}
.agent-files{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid rgba(147,180,255,.16);
}
.agent-files-title{
  width:100%;
  font-size:12px;
  font-weight:800;
  color:#c6d6fb;
}
.agent-file-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:100%;
  padding:8px 11px;
  border:1px solid rgba(134,169,255,.24);
  border-radius:11px;
  color:#e1eaff;
  background:rgba(77,108,189,.14);
  text-decoration:none;
  font:inherit;
  font-size:12px;
  cursor:pointer;
  overflow-wrap:anywhere;
}
.agent-file-link:hover{background:rgba(93,124,214,.28)}
.agent-archive-link{border-color:rgba(70,218,174,.35);color:#b4f9e3}
.agent-file-link.is-downloading{
  pointer-events:none;
  opacity:.82;
  border-color:rgba(110,168,255,.55);
}
.agent-file-link.is-downloading .agent-file-icon{
  animation:thinking-orbit .9s linear infinite;
}
.agent-file-link.is-download-ready{
  border-color:rgba(91,220,186,.64);
  color:#d1fff3;
  background:rgba(42,163,136,.2);
  box-shadow:0 0 14px rgba(64,227,192,.12);
}
.agent-file-link.is-downloaded{
  border-color:rgba(70,218,174,.48);
  color:#b4f9e3;
}
.agent-file-link.is-download-error{
  border-color:rgba(239,68,68,.45);
  color:#fecaca;
}
.agent-download-note{
  width:100%;
  padding:8px 10px;
  border-left:2px solid rgba(248,113,113,.62);
  border-radius:7px;
  color:#f5b9bd;
  background:rgba(127,29,29,.13);
  font-size:11px;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.tts-autoplay-note{
  margin-top:7px;
  color:#aebcda;
  font-size:11px;
}
.attach-inline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}
.attach-inline img,.attach-inline video{
  width:76px;height:76px;object-fit:cover;border-radius:14px;border:1px solid var(--line);margin:0;
}
.attach-inline .attach-label{
  width:76px;height:76px;border-radius:14px;border:1px solid var(--line);display:grid;place-items:center;
  background:rgba(255,255,255,.04);font-size:12px;font-weight:800;color:var(--muted);
}

.debug-panel{
  margin:0 24px 12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  padding:12px 14px;
  height:140px;
  min-height:140px;
  max-height:140px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.debug-panel.expanded{
  height:50dvh;
  min-height:50dvh;
  max-height:50dvh;
}
.debug-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.debug-title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  font-weight:800;
  margin-bottom:0;
}
.debug-expand-btn{
  border:1px solid rgba(110,168,255,.24);
  border-radius:10px;
  background:rgba(110,168,255,.09);
  color:#dbeafe;
  padding:5px 9px;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.debug-expand-btn:hover{background:rgba(110,168,255,.17)}
#debug-output{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  color:#dbeafe;
  font-size:12px;
  line-height:1.5;
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:auto;
}


.grounding-verified{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:4px;border-radius:50%;background:#16a34a;color:#fff;font-size:12px;font-weight:900}