/* public/css/sceny/asystent.css — scena „Zapytajcie kartotekę.” (/jak-to-dziala, sekcja #asystent, silnik public/js/sceny.js).
   HTML+CSS = stan końcowy (scena 5): pytanie, odpowiedź z terminami, szkic odpowiedzi na pozew jako wersja robocza,
   przycisk „Wyślij” pod kursorem prawnika (nienaciśnięty). Elementy przejściowe (myślenie, kalendarz, panel kartotek
   na telefonie, błyski) są tu ukryte — pokazuje je tylko oś. Ruch: transform/opacity/filter (public/js/sceny/asystent.js).
   Dwa układy: desktop 4:3 (rozmowa z lewej, kartoteki i pismo z prawej) i telefon ≤ 720 px 4:5 (rozmowa na całym placu,
   kartoteki jako panel w rozmowie, pismo jako arkusz od dołu). Rozmiary w cqi z dolnym progiem czytelności. */

/* cqi liczone od placu — dlatego rozmiar na dzieciach placu, nie na samym placu (tam cqi = szerokość okna) */
.sc-asystent { line-height: 1.35; color: var(--n-tekst); }
.sc-asystent > * { font-size: max(12px, 1.8cqi); }
/* reset bez wagi (:where): pojedyncza klasa elementu sceny wygrywa z nim marginesami */
.sc-asystent :where(p), .sc-asystent :where(ul), .sc-asystent :where(ol), .sc-asystent :where(dl), .sc-asystent :where(dd) { margin: 0; }
.sc-asystent .sc-mono { font-size: max(11px, 1.3cqi); }

/* ——— szkło okien ——— */
.sc-asystent-okno, .sc-asystent-pismo, .sc-asystent-kalendarz, .sc-asystent-karta, .sc-asystent-narzedzie {
  background: linear-gradient(180deg, var(--n-szklo2), var(--n-szklo)); border: 1px solid var(--n-brzeg);
  box-shadow: 0 2.4cqi 6cqi rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.sc-asystent-pasek {
  display: flex; align-items: center; gap: 1.2cqi; padding: 1.1cqi 1.8cqi; border-bottom: 1px solid var(--n-brzeg);
  background: rgba(255, 255, 255, 0.03); font-family: var(--fm); font-size: max(11px, 1.3cqi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--n-szary);
}
.sc-asystent-pasek .sc-chip { margin-left: auto; white-space: nowrap; }
.sc-asystent-nazwa { color: var(--n-tekst); }

/* ——— okno asystenta (rozmowa) ——— */
.sc-asystent-okno {
  z-index: 2; left: 3%; top: 4.5%; width: 45.5%; height: 91%; border-radius: 2cqi; overflow: hidden;
  display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
}
.sc-asystent-znak {
  width: max(14px, 2.2cqi); aspect-ratio: 1; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, var(--accent-l), var(--accent) 60%, #a8500b); box-shadow: 0 0 1.6cqi var(--n-blask);
}
.sc-asystent-rozmowa { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.6cqi; padding: 2cqi 1.6cqi 1cqi; }
.sc-asystent-pytanie {
  align-self: flex-end; max-width: 88%; padding: 1.1cqi 1.6cqi; border-radius: 1.8cqi 1.8cqi 0.5cqi 1.8cqi;
  background: rgba(244, 122, 32, 0.16); border: 1px solid rgba(255, 154, 60, 0.45); color: #fff;
}
.sc-asystent-odp { position: relative; padding-left: 2.3cqi; }
.sc-asystent-odp::before, .sc-asystent-odp2::before {
  content: ""; position: absolute; left: 0; top: 0.35em; width: max(8px, 1.2cqi); aspect-ratio: 1; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 1.2cqi var(--n-blask);
}
.sc-asystent-mysli {
  position: absolute; left: 2.3cqi; top: 0; display: flex; align-items: center; gap: 0.7cqi; white-space: nowrap;
  font-family: var(--fm); font-size: max(11px, 1.3cqi); letter-spacing: 0.02em; color: var(--n-szary); opacity: 0; visibility: hidden;
}
.sc-asystent-mysli i { width: max(5px, 0.8cqi); aspect-ratio: 1; border-radius: 50%; background: var(--accent-l); }
.sc-asystent-wstep { color: var(--n-szary); }
.sc-asystent-lista { list-style: none; padding: 0; margin-top: 0.9cqi; display: grid; gap: 0.8cqi; }
/* zwykły tok wiersza: słowa odpowiedzi to osobne <span> (strumień), więc li nie może być flexem */
.sc-asystent-lista li { display: block; }
.sc-asystent-lista .sc-asystent-sygn { margin-right: 0.3cqi; }
.sc-asystent-lista b { color: #fff; font-weight: 600; white-space: nowrap; }
.sc-asystent-sygn {
  display: inline-block; font-family: var(--fm); font-weight: 500; font-size: max(11px, 1.35cqi); letter-spacing: 0.04em; white-space: nowrap;
  padding: 0.15cqi 0.7cqi; border-radius: 0.8cqi; border: 1px solid rgba(255, 154, 60, 0.5); color: var(--accent-l); background: rgba(244, 122, 32, 0.08);
}
.sc-asystent-odp2 { position: relative; padding-left: 2.3cqi; color: var(--n-szary); }
.sc-asystent-wejscie {
  position: relative; margin: 0 1.8cqi 1.8cqi; min-height: 7cqi; padding: 1.2cqi 6.4cqi 1.2cqi 1.6cqi; border-radius: 1.6cqi;
  border: 1px solid var(--n-brzeg); background: rgba(0, 0, 0, 0.28); color: #fff;
}
.sc-asystent-karetka { display: inline-block; width: 2px; height: 1.15em; margin: 0 1px; vertical-align: -0.2em; background: var(--accent-l); }
.sc-asystent-podpowiedz { color: var(--n-szary); }
.sc-asystent-nadaj {
  right: 1.1cqi; top: 50%; translate: 0 -50%; width: max(22px, 4.2cqi); aspect-ratio: 1; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 2cqi var(--n-blask); position: absolute;
}
.sc-asystent-nadaj::before {
  content: ""; position: absolute; left: 50%; top: 54%; width: 34%; aspect-ratio: 1; translate: -50% -50%; rotate: 45deg;
  border-left: 2px solid var(--n-tlo); border-top: 2px solid var(--n-tlo);
}

/* ——— kartoteki spraw (desktop: kolumna kart z prawej) ——— */
.sc-asystent-kartoteki { z-index: 2; left: 51%; top: 4.5%; width: 46%; display: grid; gap: 1cqi; }
.sc-asystent-etykieta { margin: 0 0 0.2cqi; }
.sc-asystent-karta {
  position: relative; overflow: hidden; border-radius: 1.6cqi; padding: 0.9cqi 1.6cqi; line-height: 1.25;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.2cqi; row-gap: 0.1cqi;
}
.sc-asystent-karta .sc-asystent-sygn { justify-self: start; padding: 0; border: 0; background: none; color: #fff; }
.sc-asystent-strony { grid-column: 1; color: var(--n-szary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-asystent-termin {
  grid-column: 2; grid-row: 1 / span 2; font-family: var(--fm); font-weight: 500; font-size: max(11px, 1.35cqi); letter-spacing: 0.04em;
  padding: 0.5cqi 1cqi; border-radius: 0.9cqi; border: 1px solid rgba(251, 191, 36, 0.55); color: var(--n-uwaga); white-space: nowrap;
}
.sc-asystent-blysk {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; visibility: hidden;
  background: linear-gradient(100deg, rgba(255, 154, 60, 0) 25%, rgba(255, 154, 60, 0.32) 50%, rgba(255, 154, 60, 0) 75%);
}
.sc-asystent-obwodka {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1.5px solid var(--accent);
  box-shadow: inset 0 0 2.4cqi rgba(244, 122, 32, 0.25), 0 0 2cqi var(--n-blask);
}
.sc-asystent-k2 .sc-asystent-obwodka, .sc-asystent-k3 .sc-asystent-obwodka { opacity: 0; visibility: hidden; }

/* ——— kalendarz (desktop, tylko w trakcie osi: sceny 2–3) ——— */
.sc-asystent-kalendarz { z-index: 2; left: 51%; top: 41.5%; width: 46%; border-radius: 1.8cqi; padding: 1.6cqi 1.8cqi; opacity: 0; visibility: hidden; }
.sc-asystent-kalendarz ol { list-style: none; padding: 0; margin-top: 1cqi; display: grid; gap: 0.7cqi; }
.sc-asystent-kalendarz li {
  display: flex; align-items: center; gap: 1.4cqi; min-height: 3.6cqi; padding-top: 0.7cqi; border-top: 1px solid var(--n-brzeg);
}
.sc-asystent-kalendarz li b { width: 6.5cqi; font-family: var(--fm); font-weight: 500; font-size: max(11px, 1.3cqi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-szary); }
.sc-asystent-zdarzenie {
  font-family: var(--fm); font-size: max(11px, 1.3cqi); padding: 0.3cqi 1cqi; border-radius: 0.8cqi;
  background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.5); color: var(--n-uwaga); white-space: nowrap;
}

/* ——— panel kartotek w rozmowie (tylko telefon) ——— */
.sc-asystent-narzedzie { display: none; z-index: 3; opacity: 0; visibility: hidden; }

/* ——— pismo (kreator) ——— */
.sc-asystent-pismo {
  z-index: 3; left: 51%; top: 40.5%; width: 46%; bottom: 4.5%; border-radius: 1.8cqi; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
}
.sc-asystent-pismo > :not(.sc-asystent-pasek) { margin-left: 1.8cqi; margin-right: 1.8cqi; }
.sc-asystent-robocza { position: relative; }
.sc-asystent-dane { margin-top: 1.1cqi; display: grid; gap: 0.15cqi; line-height: 1.22; }
.sc-asystent-dane div { display: grid; grid-template-columns: 10.4cqi minmax(0, 1fr); align-items: baseline; column-gap: 1cqi; }
.sc-asystent-dane dt { font-family: var(--fm); font-size: max(11px, 1.25cqi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-szary); }
.sc-asystent-dane dd { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-asystent-tytul-pisma {
  margin-top: 1cqi; padding-top: 0.9cqi; border-top: 1px solid var(--n-brzeg);
  font-family: var(--fd); font-weight: 600; font-size: max(15px, 2.3cqi); line-height: 1.15; color: #fff;
}
.sc-asystent-blok { margin-top: 0.5cqi; }
.sc-asystent-b2 .sc-mono { display: none; }
.sc-asystent-blok i { position: relative; display: block; height: max(5px, 0.9cqi); margin-top: 0.8cqi; border-radius: 0.5cqi; background: rgba(255, 255, 255, 0.16); transform-origin: 0 50%; }
.sc-asystent-blok i + i { width: 78%; }
.sc-asystent-zaznaczenie {
  position: absolute; inset: -0.35cqi -0.5cqi; border-radius: 0.6cqi; transform-origin: 0 50%;
  background: rgba(244, 122, 32, 0.42); border: 1px solid rgba(255, 154, 60, 0.7);
}
.sc-asystent-belka { position: absolute; right: -0.8cqi; top: 50%; width: 2px; height: max(12px, 2.2cqi); translate: 0 -50%; background: #fff; }
.sc-asystent-stopka { position: relative; margin-top: auto; margin-bottom: 1.4cqi; padding-top: 1cqi; display: flex; align-items: center; justify-content: space-between; gap: 1.2cqi; }
.sc-asystent-decyzja { font-family: var(--fm); font-size: max(11px, 1.3cqi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-szary); }
.sc-asystent-wyslij {
  position: relative; font-weight: 600; padding: 0.8cqi 2.6cqi; border-radius: 1.2cqi; border: 1px solid var(--accent-l); color: var(--accent-l);
  background: rgba(244, 122, 32, 0.1);
}
.sc-asystent-kursor {
  position: absolute; right: -1.2cqi; top: 62%; width: max(18px, 3cqi); height: auto; pointer-events: none;
  fill: #fff; stroke: var(--n-tlo); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 0.4cqi 0.8cqi rgba(0, 0, 0, 0.6));
}

/* ——— telefon (≤ 720 px, plac 4:5): rozmowa na całym placu, kartoteki jako panel w rozmowie, pismo arkuszem od dołu ——— */
@media (max-width: 720px) {
  .sc-asystent > * { font-size: max(12px, 3.3cqi); }
  .sc-asystent .sc-mono, .sc-asystent-pasek { font-size: max(11px, 2.6cqi); }
  .sc-asystent-okno { left: 3%; top: 2.5%; width: 94%; height: 95%; border-radius: 3.4cqi; }
  .sc-asystent-pasek { gap: 2cqi; padding: 1.8cqi 3cqi; }
  .sc-asystent-znak { width: max(14px, 4cqi); }
  .sc-asystent-rozmowa { gap: 2.6cqi; padding: 3cqi 3cqi 1.6cqi; }
  .sc-asystent-pytanie { padding: 1.4cqi 2.6cqi; border-radius: 3cqi 3cqi 0.8cqi 3cqi; line-height: 1.25; }
  .sc-asystent-odp, .sc-asystent-odp2 { padding-left: 4.4cqi; }
  .sc-asystent-odp::before, .sc-asystent-odp2::before { width: max(8px, 2.2cqi); }
  .sc-asystent-mysli { left: 4.4cqi; gap: 1.2cqi; font-size: max(11px, 2.6cqi); }
  .sc-asystent-mysli i { width: max(5px, 1.4cqi); }
  .sc-asystent-lista { margin-top: 1.4cqi; gap: 1.4cqi; }
  .sc-asystent-sygn, .sc-asystent-termin, .sc-asystent-zdarzenie { font-size: max(11px, 2.7cqi); }
  .sc-asystent-sygn { padding: 0.2cqi 1.2cqi; border-radius: 1.4cqi; }
  .sc-asystent-lista .sc-asystent-sygn { margin-right: 0.8cqi; }
  .sc-asystent-odp2 { display: none; }
  .sc-asystent-wejscie { margin: 0 3cqi 3cqi; min-height: 12cqi; padding: 2cqi 11cqi 2cqi 2.6cqi; border-radius: 2.8cqi; }
  .sc-asystent-nadaj { right: 2cqi; width: max(22px, 7cqi); }

  .sc-asystent-kartoteki, .sc-asystent-kalendarz { display: none; }
  .sc-asystent-narzedzie {
    display: grid; gap: 1.6cqi; left: 9%; top: 31%; width: 82%; border-radius: 3cqi; padding: 2.6cqi 3cqi;
    background: linear-gradient(180deg, rgba(40, 48, 66, 0.96), rgba(22, 28, 42, 0.96));
  }
  .sc-asystent-wiersz {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 2cqi;
    padding-top: 1.6cqi; border-top: 1px solid var(--n-brzeg);
  }
  .sc-asystent-wiersz .sc-asystent-strony { grid-column: 2; }
  .sc-asystent-wiersz .sc-asystent-termin { grid-column: 3; grid-row: 1; padding: 0.6cqi 1.6cqi; border-radius: 1.4cqi; }

  .sc-asystent-pismo {
    left: 0; top: 45.5%; width: 100%; bottom: 0; border-radius: 4cqi 4cqi 0 0; border-bottom: 0;
    background: linear-gradient(180deg, #262e40, #151b28); box-shadow: 0 -3cqi 8cqi rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .sc-asystent-pismo > :not(.sc-asystent-pasek) { margin-left: 4.5cqi; margin-right: 4.5cqi; }
  .sc-asystent-pismo .sc-asystent-pasek { padding-left: 4.5cqi; padding-right: 4.5cqi; }
  .sc-asystent-dane { margin-top: 1.4cqi; gap: 0; line-height: 1.2; }
  .sc-asystent-dane div { grid-template-columns: 17cqi minmax(0, 1fr); column-gap: 2cqi; }
  .sc-asystent-dane dt { font-size: max(11px, 2.5cqi); }
  .sc-asystent-tytul-pisma { margin-top: 1.6cqi; padding-top: 1.4cqi; font-size: max(15px, 4.4cqi); }
  .sc-asystent-blok { margin-top: 0.8cqi; }
  .sc-asystent-blok i { height: max(5px, 1.5cqi); margin-top: 1.2cqi; border-radius: 1cqi; }
  .sc-asystent-stopka { margin-bottom: 3cqi; padding-top: 1.2cqi; gap: 2cqi; }
  .sc-asystent-decyzja { font-size: max(11px, 2.5cqi); }
  .sc-asystent-wyslij { padding: 1cqi 4.6cqi; border-radius: 2cqi; }
  .sc-asystent-kursor { width: max(18px, 5.4cqi); right: -2cqi; }
}