/* ============================================================
   Komentarze: piny na ekranie + wątki na liście
   ============================================================ */

/* ---------------- Piny ---------------- */
/* Komentarze stoją NAD całą makietą. Warstwy dostają własny z-index
   z panelu (nawigacja potrafi wejść wyżej niż wyspa), więc piny muszą
   być poza tym wyścigiem — inaczej komentarz do nawigacji chowa się
   pod nawigacją. Kontekst układania zamyka .phone__screen. */
.pins {
  position: absolute;
  inset: 0;
  z-index: 9999;
  pointer-events: none;      /* klikalne są tylko same piny */
}

/* Rysunek pinu (dymek z ogonkiem w lewym dolnym rogu) niesie własny
   cień i obrys, więc element nie dokłada tu nic od siebie. Kolor tła
   jest wpisany w data URI — SVG nie sięga po zmienne CSS; błękit to
   ta sama wartość co --c-accent-2. */
/* PIN NIE JEST CZĘŚCIĄ MAKIETY, TYLKO NARZĘDZIEM NA NIEJ.

   Kadr jest skalowany transformem (--browser-scale / --phone-scale),
   a razem z nim kurczyło się wszystko w środku — łącznie z pinami.
   Przy stronie 1440 px pokazanej na telefonie skala schodzi poniżej 0.1
   i dymek robił się kilkupikselową kropką, w którą nie sposób trafić
   palcem. Kontrskalowanie zdejmuje z pinu skalę kadru, więc ma on
   zawsze te same 42 px na ekranie — niezależnie od tego, jak mała jest
   makieta pod spodem.

   Punkt zaczepienia (ostrze dymka, 5 px od lewej i 34 px od góry)
   zostaje nieruchomy: to on wskazuje miejsce, o którym mówi komentarz. */
.pin {
  position: absolute;
  width: 42px;
  height: 42px;
  /* Wartość domyślna siedzi w var(), a NIE jako deklaracja na pinie:
     własna deklaracja przykryłaby tę dziedziczoną z kadru. */
  transform: scale(var(--pin-scale, 1));
  transform-origin: 5px 34px;
  /* Ostrze (lewy dolny róg dymka) siada dokładnie w klikniętym punkcie */
  margin: -34px 0 0 -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Środek koła leży 1 px w lewo i 2 px w górę od środka pola rysunku */
  padding: 0 2px 4px 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2242%22%20viewBox%3D%220%200%2042%2042%22%20fill%3D%22none%22%3E%3Cg%20filter%3D%22url%28%23s%29%22%3E%3Cpath%20d%3D%22M20%2035C28.8366%2035%2036%2027.8366%2036%2019C36%2010.1634%2028.8366%203%2020%203C11.1635%203%204%2010.1634%204%2019C4%2021.8545%204%2028.2177%204%2032.003C4%2033.6599%205.33924%2035%206.9961%2035C10.6941%2035%2016.8754%2035%2020%2035Z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M20%203.625C28.4914%203.625%2035.375%2010.5086%2035.375%2019C35.375%2027.4914%2028.4914%2034.375%2020%2034.375H6.99609C5.68465%2034.375%204.625%2033.3148%204.625%2032.0029C4.625%2028.2176%204.625%2021.8545%204.625%2019C4.625%2010.5086%2011.5086%203.625%2020%203.625Z%22%20stroke%3D%22%23121314%22%20stroke-width%3D%221.25%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2242%22%20height%3D%2242%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22b%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22a%22%2F%3E%3CfeOffset%20dx%3D%221%22%20dy%3D%222%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%222.5%22%2F%3E%3CfeComposite%20in2%3D%22a%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.3%200%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22b%22%20result%3D%22e%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22e%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") no-repeat center / contain;
  font-size: var(--fs-13);
  font-weight: 650;
  color: var(--c-black);
  pointer-events: auto;
  /* „grab", nie „pointer": pin da się przeciągnąć, a kursor jest jedyną
     podpowiedzią, że w ogóle wolno go ruszyć. */
  cursor: grab;
  transition: transform var(--t-fast) var(--e-out);
}

.pin:hover { transform: scale(calc(var(--pin-scale, 1) * 1.06)); }

/* Wybrany wątek — ten sam dymek w kolorze akcentu aplikacji */
.pin.is-selected,
.pin--draft {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2242%22%20viewBox%3D%220%200%2042%2042%22%20fill%3D%22none%22%3E%3Cg%20filter%3D%22url%28%23s%29%22%3E%3Cpath%20d%3D%22M20%2035C28.8366%2035%2036%2027.8366%2036%2019C36%2010.1634%2028.8366%203%2020%203C11.1635%203%204%2010.1634%204%2019C4%2021.8545%204%2028.2177%204%2032.003C4%2033.6599%205.33924%2035%206.9961%2035C10.6941%2035%2016.8754%2035%2020%2035Z%22%20fill%3D%22%2322dbf3%22%2F%3E%3Cpath%20d%3D%22M20%203.625C28.4914%203.625%2035.375%2010.5086%2035.375%2019C35.375%2027.4914%2028.4914%2034.375%2020%2034.375H6.99609C5.68465%2034.375%204.625%2033.3148%204.625%2032.0029C4.625%2028.2176%204.625%2021.8545%204.625%2019C4.625%2010.5086%2011.5086%203.625%2020%203.625Z%22%20stroke%3D%22%23121314%22%20stroke-width%3D%221.25%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2242%22%20height%3D%2242%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22b%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22a%22%2F%3E%3CfeOffset%20dx%3D%221%22%20dy%3D%222%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%222.5%22%2F%3E%3CfeComposite%20in2%3D%22a%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.3%200%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22b%22%20result%3D%22e%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22e%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E");
}

/* Wątek zamknięty schodzi na drugi plan, ale zostaje widoczny */
.pin--resolved { opacity: 0.5; }

/* Pin w trakcie przeciągania — bez animacji, żeby nadążał za kursorem.

   Klasa NIE nazywa się „is-dragging": tak nazywa się przeciągana karta
   w panelu (css/cms.css), a tamta reguła dokładała pinowi cień i obrys. */
.pin.is-moving {
  transform: scale(calc(var(--pin-scale, 1) * 1.12));
  transition: none;
  cursor: grabbing;
  z-index: 2;
}

/* Szkic pinu jest tak samo chwytliwy jak zapisany: pierwsze kliknięcie
   rzadko trafia idealnie, a poprawienie miejsca nie może wymagać
   napisania i zatwierdzenia komentarza. Wcześniejsze „pointer-events:
   none" robiło z niego rysunek nie do ruszenia. */
.pin--draft {
  animation: pin-in var(--t-mid) var(--e-out);
}

@keyframes pin-in {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ---------------- Dymek nad pinem ---------------- */
.pin-bubble {
  position: fixed;
  z-index: 200;
  max-width: 260px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  box-shadow: var(--sh-2);
  pointer-events: none;      /* dymek nie może przechwycić kursora z pinu */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}

.pin-bubble.is-visible { opacity: 1; transform: translateY(0); }

.pin-bubble__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: 4px;
  font-size: var(--fs-12);
}

.pin-bubble__meta {
  font-size: var(--fs-11);
  opacity: 0.7;
}

/* Dymek jest zapowiedzią, nie miejscem na lekturę — długi komentarz
   ucinamy po trzech wierszach, całość czyta się na liście wątków. */
.pin-bubble__text {
  font-size: var(--fs-13);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* ---------------- Pole komentarza przy pinie ---------------- */
/* Powiększony podgląd zakrywa kolumnę rozmowy, więc karta „napisz
   komentarz" staje obok postawionego pinu. Trzymamy ją w <body>
   (js/ui/comments.js), stąd position: fixed i własna szerokość —
   wewnątrz skalowanego kadru tekst kurczyłby się razem z makietą. */
.pin-composer {
  position: fixed;
  z-index: 260;              /* nad nakładką powiększenia (200) */
  width: 320px;
  max-width: calc(100vw - 24px);
  border-radius: var(--r-lg);
  background: var(--c-canvas);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  animation: pin-composer-in var(--t-fast) var(--e-out);
}

.pin-composer .composer { margin: 0; }

@keyframes pin-composer-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Tryb stawiania pinu: kursorem jest ten sam dymek, a jego ostrze
   (4, 34) pokrywa się z punktem, w którym stanie pin.

   Reguła nie wymienia ramki: komentować da się w telefonie i w oknie
   przeglądarki (projekt typu Website), a klasę nadaje jedno miejsce
   w kodzie — js/ui/comments.js. */
.is-commenting {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2234%22%20height%3D%2234%22%20viewBox%3D%220%200%2034%2034%22%20fill%3D%22none%22%3E%3Cg%20filter%3D%22url%28%23s%29%22%3E%3Cpath%20d%3D%22M16%2027C22.6274%2027%2028%2021.6274%2028%2015C28%208.37258%2022.6274%203%2016%203C9.37261%203%204%208.37258%204%2015C4%2016.9615%204%2021.132%204%2024.0006C4%2025.6575%205.34124%2027%206.99809%2027C9.79787%2027%2013.8572%2027%2016%2027Z%22%20fill%3D%22%23C8F256%22%2F%3E%3Cpath%20d%3D%22M16%203.625C22.2822%203.625%2027.375%208.71777%2027.375%2015C27.375%2021.2822%2022.2822%2026.375%2016%2026.375H6.99805C5.68684%2026.375%204.62518%2025.3128%204.625%2024.001C4.625%2021.1324%204.625%2016.9615%204.625%2015C4.625%208.71778%209.71778%203.625%2016%203.625Z%22%20stroke%3D%22%23121314%22%20stroke-width%3D%221.25%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%22M16.3026%2010.2002V19.8002M21.1026%2015.0002H11.5026%22%20stroke%3D%22%23121314%22%20stroke-width%3D%221.25%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cdefs%3E%3Cfilter%20id%3D%22s%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2234%22%20height%3D%2234%22%20filterUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22sRGB%22%3E%3CfeFlood%20flood-opacity%3D%220%22%20result%3D%22b%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceAlpha%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20127%200%22%20result%3D%22a%22%2F%3E%3CfeOffset%20dx%3D%221%22%20dy%3D%222%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%222.5%22%2F%3E%3CfeComposite%20in2%3D%22a%22%20operator%3D%22out%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.2%200%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in2%3D%22b%22%20result%3D%22e%22%2F%3E%3CfeBlend%20mode%3D%22normal%22%20in%3D%22SourceGraphic%22%20in2%3D%22e%22%20result%3D%22shape%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") 4 26, crosshair;
}

.is-commenting::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 24;
  box-shadow: inset 0 0 0 2px var(--c-accent-2);
  pointer-events: none;
}

/* Przycisk „Add new comment" nad listą wątków w panelu wariantów.
   Ten sam wygląd co w kreatorze (.wiz__comment-add) — to jedna
   czynność, więc nie ma powodu, żeby wyglądała w dwóch widokach
   inaczej. Pełna szerokość kolumny: stoi w niej sam. */
.panel__comment-add {
  height: 42px;
  width: 100%;
  justify-content: center;
}

.panel__comment-add[aria-pressed="true"] {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* ---------------- Lista wątków ---------------- */
.comments {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.comment {
  position: relative;                 /* odznaka pinu siada na krawędzi */
  margin-top: 12px;                   /* miejsce na nią */
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-card);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}

.comment:hover { border-color: var(--c-line-strong); }

.comment.is-selected {
  border-color: var(--c-selected-border);
  box-shadow: var(--c-selected-ring);
  background: var(--c-card-active);
}

.comment--resolved { opacity: 0.6; }
.comment--draft { border-style: dashed; cursor: default; }

.comment__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}

/* Znak autora. Bez kont i bez zdjęć — sama sylwetka, a projektant
   w czerni, żeby w rozmowie od razu było widać, kto jest kim. */
.comment__avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--c-surface-sunk);
  border: 1px solid var(--c-line);
  color: var(--c-ink-soft);
}

.comment__avatar--admin {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}

.comment__avatar svg { display: block; }

/* Znak projektanta bywa zdjęciem — wtedy wypełnia kółko w całości. */
.comment__avatar--photo { padding: 0; overflow: hidden; border-color: var(--c-line); }

.comment__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Menu wpisu (⋮) — Edit i Delete. Stoi przy prawej krawędzi główki. */
.comment__menu {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
}

.comment__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--c-ink-muted);
}

.comment__menu-btn:hover { background: var(--c-surface-hover); color: var(--c-ink); }

/* Samo POŁOŻENIE — wygląd jest wspólny (css/base.css → `.pop-menu`). */
.comment__menu-list {
  position: absolute;
  top: calc(100% + var(--s-2));
  right: 0;
  z-index: 5;
  min-width: 132px;
}

/* Pozycje menu wyglądają tak samo w całej aplikacji (css/base.css →
   `.pop-menu__item`); tu zostaje tylko to, czym różni się rozmowa. */
.comment__menu-item { padding-block: 6px; }

/* Pytanie o skasowanie zostaje w karcie, pod wpisem, którego dotyczy. */
.comment__confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

.comment__number {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-11);
  font-weight: 650;
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* ODZNAKA WĄTKU = TEN SAM PIN, CO NA EKRANIE.

   Numer w odznace jest numerem PINU (js/ui/comments.js, pinNumberOf),
   a nie numerem komentarza — i skoro znaczy to samo, co znak na ekranie,
   to tak samo wygląda: ten sam dymek. Bez cienia i zawsze w akcencie —
   odznaka leży na krawędzi karty, a nie na makiecie, więc nie ma się
   od czego odcinać. */
.comment__number--pin {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  border-radius: 0;
  /* Ogonek dymka zajmuje dolny pasek rysunku, więc cyfra idzie w górę. */
  padding: 0 1px 2px 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2242%22%20viewBox%3D%220%200%2042%2042%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M20%2035C28.8366%2035%2036%2027.8366%2036%2019C36%2010.1634%2028.8366%203%2020%203C11.1635%203%204%2010.1634%204%2019C4%2021.8545%204%2028.2177%204%2032.003C4%2033.6599%205.33924%2035%206.9961%2035C10.6941%2035%2016.8754%2035%2020%2035Z%22%20fill%3D%22%2322dbf3%22%2F%3E%3Cpath%20d%3D%22M20%203.625C28.4914%203.625%2035.375%2010.5086%2035.375%2019C35.375%2027.4914%2028.4914%2034.375%2020%2034.375H6.99609C5.68465%2034.375%204.625%2033.3148%204.625%2032.0029C4.625%2028.2176%204.625%2021.8545%204.625%2019C4.625%2010.5086%2011.5086%203.625%2020%203.625Z%22%20stroke%3D%22%23121314%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  color: var(--c-black);
  font-size: var(--fs-11);
}

/* Komentarz o całym ekranie: kropka zamiast numeru — nie odsyła do
   żadnego pinu, bo pinu nie ma. */
.comment__number--screen {
  width: 10px;
  height: 10px;
  margin: 5px;
  background: var(--c-ink-muted);
}

/* Podpowiedź pod polem: pin jest opcją, nie obowiązkiem. */
.comment__hint {
  margin: var(--s-1) 0 0;
  font-size: var(--fs-11);
  color: var(--c-ink-muted);
}

.comment__author {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--c-ink);
}

.comment__meta {
  font-size: var(--fs-11);
  color: var(--c-ink-muted);
  margin-left: auto;
}

.comment__text {
  font-size: var(--fs-13);
  line-height: 1.5;
  color: var(--c-ink-soft);
  white-space: pre-wrap;
  word-break: break-word;
}

.comment__config {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
  padding: 6px var(--s-3);
  border-radius: var(--r-md);
  background: var(--c-canvas);
  font-size: var(--fs-11);
  color: var(--c-ink-muted);
}

.comment__jump {
  padding: 0;
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: underline;
  background: none;
}

/* ============================================================
   UWAGI Z INNEJ KONFIGURACJI (kreator)

   W podsumowaniu lista towarzyszy decyzji klienta, więc uwaga napisana
   przy innym zestawie wariantów mówi o czymś, czego na ekranie nie ma.
   Leży przez to POD listą, jednym zdaniem, wyciszona — a po rozwinięciu
   wątki wracają do swojego zwykłego wyglądu.
   ============================================================ */
.comment-other {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

/* Kreska nad zdaniem oddziela je od wątków z bieżącej konfiguracji —
   to nie jest kolejna karta w tej samej rozmowie. */
.comment-other__note {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-11);
  color: var(--c-ink-muted);
}

.comment-other__toggle {
  font-size: var(--fs-11);
  font-weight: 600;
}

/* Rozwinięte wątki są przygaszone: to tło rozmowy, nie jej bieżący ciąg. */
.comment-other.is-open .comment { opacity: 0.75; }
.comment-other.is-open .comment:hover { opacity: 1; }

/* Odpowiedzi wcięte i spięte pionową kreską — od razu widać, że należą
   do wątku nad nimi, a nie do listy. */
.comment__reply {
  margin: var(--s-3) 0 0 var(--s-2);
  padding-left: var(--s-3);
  border-left: 2px solid var(--c-ink);
}

/* Stopka wątku: odesłanie do odpowiedzi i zamknięcie rozmowy. */
.comment__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

/* „Resolve thread" dotyczy CAŁEGO wątku, więc bierze całą jego szerokość
   — i wygląda jak decyzja, a nie jak jeden z odnośników w rzędzie. */
.comment__resolve {
  width: 100%;
  gap: var(--s-2);
  font-size: var(--fs-13);
}

.comment__resolve svg { display: block; }

.comment__actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-3);
}

.comment__link {
  font-size: var(--fs-12);
  font-weight: 550;
  color: var(--c-ink-muted);
  background: none;
  padding: 0;
  transition: color var(--t-fast) var(--e-out);
}

.comment__link:hover { color: var(--c-ink); }

.comment__link--reply {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: var(--s-2);
  font-weight: 650;
  color: var(--c-ink);
}

.comment__link--reply svg { display: block; }

.comment__link--danger { color: var(--c-danger-text); }
.comment__link--danger:hover { color: var(--c-red-hover); }

/* Potwierdzenie kasowania rozwija się w miejscu przycisku */
.comment__delete {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-left: auto;
}

.comment__field {
  width: 100%;
  height: auto;
  padding: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

.comment__body {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.comment__body .comment__meta { margin-left: 0; font-style: italic; }

.comment__editbox { margin-top: var(--s-2); }
.comment__editbox .comment__actions { justify-content: flex-end; }

.comment__replybox {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
}

.comment__replybox .comment__field { margin-top: 0; }

.comment__replyactions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* ============================================================
   EMOTIKONY

   Tablica NIE JEST dzieckiem przycisku — wisi w <body>, tak jak karta
   pisania przy pinie i menu w nagłówku. Kolumna komentarzy przewija się
   (`overflow-y: auto` w css/simple.css), a taki kontener przycina
   wszystko, co z niego wystaje; z-index nic na to nie poradzi, bo to nie
   jest spór o warstwy, tylko o granice kontenera.

   Pozycję nadaje js/ui/comments.js i przelicza ją przy przewijaniu
   oraz zmianie okna.
   ============================================================ */
.emoji {
  display: inline-flex;
  flex: 0 0 auto;
}

.emoji__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-ink-muted);
  cursor: pointer;
  transition: color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out);
}

.emoji__btn:hover { color: var(--c-ink); border-color: var(--c-ink-muted); }
.emoji__btn svg { display: block; }

.emoji__panel {
  position: fixed;
  z-index: 270;              /* nad kartą pisania przy pinie (260) */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-2);
}

.emoji__item {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.emoji__item:hover { background: var(--c-surface-hover); }

/* ============================================================
   POLE NOWEGO KOMENTARZA

   Karta zbiera wszystko, co dotyczy pisanego właśnie zdania: podpis,
   informację o pinie i treść. Przypięty komentarz dostaje odcień
   akcentu — ten sam kolor, co pin, który klient przed chwilą postawił.
   ============================================================ */
.composer {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  /* Karta ma odcinać się od listy wątków — te są białe. */
  background: var(--c-canvas);
}

.composer--pinned,
.composer--pinned .composer__cancel,
.composer--pinned .composer__drop,
.composer--pinned .emoji__btn {
  border: 1px solid var(--c-accent-muted);
  color: var(--c-accent-muted);
  background: color-mix(in srgb, var(--c-accent-2) 8%, var(--c-surface));
}

.composer__who {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1);
  font-size: var(--fs-14);
  color: var(--c-ink);
}

.composer__who--editing .cms-input { flex: 1 1 120px; min-width: 0; }
.composer__who--editing .btn { flex: 0 0 auto; }

.composer__who-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--s-2);
}

/* Adres, pod który wróci odpowiedź — w nawiasie przy podpisie, ciszej
   od niego. Długi adres skraca się wielokropkiem zamiast rozpychać rząd;
   cały widać go i tak w polu edycji obok. */
.composer__who-mail {
  /* Bez granicy szerokości długi adres nie skraca się, tylko schodzi
     do własnej linii w całości — `flex-wrap` ratuje go przed ciasnotą,
     zamiast zmusić do wielokropka — i spycha „zmień" jeszcze niżej.
     Połowa rzędu wystarcza, żeby adres dało się rozpoznać. */
  min-width: 0;
  max-width: 50%;
  color: var(--c-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dwa pola naraz (podpis i adres) nie mieszczą się w rzędzie panelu —
   przy edycji schodzą pod siebie, a przyciski pod nie. */
.composer__who--stacked {
  flex-direction: column;
  align-items: stretch;
}

.composer__who--stacked .cms-input { flex: 0 0 auto; width: 100%; }
.composer__who--stacked .composer__who-actions { justify-content: flex-end; }

.composer__who-note {
  margin: 0;
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--c-ink-muted);
}

.composer__change {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-12);
  color: var(--c-ink-muted);
  transition: color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out);
}

.composer__change:hover { color: var(--c-ink); border-color: var(--c-ink-muted); }
.composer__change svg { display: block; }

.composer__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--c-accent-muted);
}

/* Postawiona pinezka: informacja z lewej, „Remove" przy prawej krawędzi
   — jeden rząd, bo to jedna rzecz i jej cofnięcie. */
.composer__spot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.composer__spot-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
  font-size: var(--fs-11);
  line-height: 1.4;
  color: var(--c-accent-muted);
}

.composer__spot-label svg { display: block; flex: 0 0 auto; }

.composer .comment__field { margin-top: 0; }

.composer__actions {
  display: flex;
  gap: var(--s-1);
}

/* DÓŁ KARTY W WĄSKIEJ KOLUMNIE — DWA WIERSZE ZAMIAST JEDNEGO.

   Emotka, „Anuluj" i „Dodaj komentarz" w jednej linii potrzebują ~264 px.
   W panelu wariantów na tablecie zostaje ich 185, więc „Dodaj komentarz"
   wychodził poza kartę i krawędź panelu ucinała mu koniec — klient widział
   przycisk bez końca i nie miał gdzie kliknąć.

   Pytamy o szerokość KOLUMNY, nie okna (@container, nie @media): karta stoi
   raz w panelu wariantów, raz w kolumnie kreatora, a szerokość sidebara ma
   być z czasem regulowana. Miara z okna nic by o tej karcie nie mówiła.

   Wyjście z pisania schodzi niżej: zostaje pod ręką, ale nie konkuruje
   miejscem z czynnością, po którą klient tu przyszedł. */
.comments,
.wiz__comments,
.pin-composer { container-type: inline-size; }

@container (max-width: 310px) {
  .composer__actions { flex-wrap: wrap; }

  .composer__cancel {
    order: 3;            /* za emotką i „Dodaj komentarz" */
    flex: 1 0 100%;      /* własny wiersz, cała szerokość karty */
  }
}

/* Prośba o pinezkę — obrys przez całą szerokość karty, nad polem.
   Szeroki, bo to jedyne, co można tu zrobić poza pisaniem. */
.composer__pin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  border: 1px solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  font-size: var(--fs-14);
  color: var(--c-ink);
}

.composer__pin svg { display: block; flex: 0 0 auto; }

/* Włączony tryb wskazywania widać na przycisku — inaczej klient nie
   wie, czy klik w makietę postawi pinezkę, czy przewinie karuzelę.
   Napis mówi wtedy „Cancel pin", więc przycisk cichnie: robotę ma
   wykonać makieta, nie on. */
.composer__pin.is-on {
  border-color: var(--c-accent-muted);
  color: var(--c-accent-muted);
}

.composer__pin.is-on:hover {
  border-color: var(--c-ink-muted);
  color: var(--c-ink);
}

/* Zdjęcie pinezki: mały obrys przy prawej krawędzi rzędu. */
.composer__drop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--c-line-strong);
  background: transparent;
  font-size: var(--fs-12);
  color: var(--c-ink-soft);
}

.composer__drop svg { display: block; flex: 0 0 auto; }
.composer__drop:hover { color: var(--c-ink); border-color: var(--c-ink-muted); }

/* Pole czeka na wskazanie miejsca — przygaszone, ale widoczne, żeby
   klient wiedział, że napisane zdanie nigdzie nie zniknęło. */
.composer .comment__field.is-waiting {
  opacity: .55;
  border-color: var(--c-line);
  background: transparent;
}

/* Dół karty: „Cancel" i „Add comment" po równo.
   Wysokość średniego przycisku: 32 px. */
.composer__send,
.composer__cancel {
  flex: 1 1 auto;
  height: 32px;
  font-size: var(--fs-13);
}

/* Wyjście z pisania jest cichsze od dodania komentarza: biel, szary
   napis, szary obrys. */
.composer__cancel {
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  color: var(--c-ink-muted);
}

.composer__cancel:hover {
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-ink-muted);
}

/* Podpis autora nad listą */
.comment-identity {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-12);
  color: var(--c-ink-muted);
}

.comment-identity b { color: var(--c-ink); font-weight: 600; }
.comment-identity .cms-input { flex: 1 1 auto; }
.comment-identity__label { flex: 0 0 auto; }

.comment-empty {
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--c-ink-muted);
}

/* ---------------- Przełącznik kolumny klienta ---------------- */
.panel__tabs {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-6) 0;
}

.panel__tab {
  height: 32px;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-13);
  font-weight: 550;
  color: var(--c-ink-muted);
  background: transparent;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}

.panel__tab:hover { background: var(--c-surface-hover); color: var(--c-ink); }

.panel__tab[aria-selected="true"] {
  background: var(--c-accent);
  color: var(--c-accent-ink);
}

/* Licznik nierozwiązanych przy zakładce i przy ekranie w panelu */
.tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--c-accent-2);
  color: var(--c-accent-2-ink);
  font-size: var(--fs-11);
  font-weight: 650;
}

.panel__tab[aria-selected="true"] .tab-count {
  background: var(--c-accent-2);
  color: var(--c-accent-2-ink);
}

/* ---------------- Panel administratora ---------------- */
.cms-comments {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* Licznik nierozwiązanych uwag na karcie ekranu.

   OBRYS, NIE WYPEŁNIENIE. Kolorem wypełnienia mówi na karcie co innego:
   pieczęć akceptacji i przełącznik „Active". Licznik jest liczbą, nie
   stanem — ma się czytać, a nie konkurować z nimi o uwagę. */
.cms-row__badge {
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--c-ink);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-11);
  font-weight: 650;
}

/* Błąd wczytywania odróżniamy od pustej listy — inaczej brak połączenia
   wygląda jak brak uwag, czyli jak wszystko w porządku. */
.comment-empty--error { color: var(--c-danger-text); }


/* Odwrotność skali kadru — dziedziczona przez piny w środku.
   Piny mieszkają w warstwach makiety (.browser__layers, .phone__screen),
   więc zmienną wystarczy nadać kontenerowi, który je skaluje. */
.browser-fit { --pin-scale: calc(1 / var(--browser-scale, 1)); }
.phone-fit { --pin-scale: calc(1 / var(--phone-scale, 1)); }

/* ============================================================
   POWŁOKA KOLUMNY ROZMOWY — JEDNA DLA KLIENTA I DLA PANELU

   Te same części składają rozmowę w trzech miejscach:

     • krok kreatora u klienta        (.wiz__sidebar,      css/simple.css)
     • powiększenie u klienta         (.wiz__zoom-side,    css/simple.css)
     • pełny ekran w panelu           (.cms-comments,      css/cms.css)

   Wcześniej panel miał własną kopię tego wszystkiego pod nazwami
   `.cms-comments__*` — rozsypaną między cms.css i comments.css, o włos
   inną i rozjeżdżającą się dalej. Najbardziej było to widać w tytule:
   panel brał na niego `.cms-field__label` (drobny podpis pola), więc
   „Comments" nie było ani pogrubione, ani tej samej wielkości co u
   klienta. Uchwyt szerokości i pasek istniały po TRZY razy w trzech
   plikach, co do wartości identyczne.

   Nazwy zostały te od klienta, bo to jego wygląd jest źródłem prawdy
   i bo dzięki temu markup obu widoków klienta nie musiał się ruszyć.
   Plik jest wczytywany i przez `index.html`, i przez `admin/index.html` —
   w przeciwieństwie do `simple.css`, którego panel nie zna.

   TU SIEDZI SAMA POWŁOKA: nagłówek, licznik, przyciski, uchwyt, pasek.
   Gdzie ta kolumna stoi i jak się rozsuwa, zostaje przy każdym z trzech
   kontenerów — bo to jedyne, co się między nimi naprawdę różni.
   ============================================================ */

/* UCHWYT SZEROKOŚCI na lewej krawędzi rozmowy.

   Pasek na całą wysokość, żeby dało się go złapać wszędzie, a nie tylko
   w jednym punkcie. Trzy kropki mówią, że to się przeciąga — sama
   krawędź niczego nie obiecuje, a kursor pokazuje się dopiero po
   najechaniu. */
.wiz__sidebar-grip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -5px;
  width: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: col-resize;
  z-index: 1;
  touch-action: none;          /* gest należy do uchwytu, nie do strony */
}

/* Kropki są ledwie widoczne, dopóki nikt nie sięga — to podpowiedź,
   nie element sterujący konkurujący z rozmową obok. */
.wiz__sidebar-grip::before {
  content: "";
  width: 3px;
  height: 22px;
  border-radius: var(--r-pill);
  background:
    radial-gradient(circle, var(--c-ink-faint) 1.5px, transparent 1.6px) 50% 0 / 3px 8px repeat-y;
  opacity: 0.55;
  transition: opacity var(--t-fast) var(--e-out);
}

.wiz__sidebar-grip:hover::before,
.wiz__sidebar-grip:focus-visible::before { opacity: 1; }


.wiz__sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-surface-glass);
  backdrop-filter: blur(5px);
  position: fixed;
  z-index: 9999;
  width: var(--w-zoom-side, 380px);
}

.wizard--panel .wiz__sidebar-head {
  width: var(--w-wiz-side, 380px);
}

.wiz__sidebar-title {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-18);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
}

/* Ile wątków czeka. Akcent, bo to jedyna liczba w tej kolumnie, która
   coś od kogoś chce. */
.wiz__sidebar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--c-accent-2);
  color: var(--c-accent-2-ink);
  font-size: var(--fs-12);
  font-weight: 650;
}

/* Zwinięcie to jeden znak w kółku — nazwa panelu stoi obok i mówi
   wszystko, czego trzeba. */
.wiz__sidebar-collapse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  color: var(--c-ink);
  background: transparent;
  transition: border-color var(--t-fast) var(--e-out),
              background var(--t-fast) var(--e-out);
}

/* Rysunek ma 20 px, pole trafienia — 40. Powiększamy je przezroczystą
   otoczką, żeby przycisk dało się kliknąć bez celowania. */
.wiz__sidebar-collapse::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.wiz__sidebar-collapse:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-ink-muted);
}

/* Chevron ikony patrzy w dół — obracamy go w stronę, w którą panel
   ma się schować (i z której ma wrócić). */
.wiz__sidebar-collapse .wiz__icon { transform: rotate(-90deg); }
.wiz__sidebar-open .wiz__icon { transform: rotate(90deg); }

.wiz__icon { display: inline-flex; }
.wiz__icon svg { display: block; }

/* Lista rozmowy przewija się sama — nagłówek panelu zostaje na miejscu. */
.wiz__comments {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  overflow-y: auto;
  min-height: 0;
  max-height: none;
}


/* Znak zwijania i rozwijania to ten SAM przycisk w dwóch stanach panelu,
   więc ma jedną wielkość: 20 px rysunku i 40 px pola trafienia. */
.wiz__sidebar-open {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-line-strong);
  background: var(--c-surface);
  color: var(--c-ink);
}

.wiz__sidebar-open::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.wiz__sidebar-open:hover { background: var(--c-surface-hover); border-color: var(--c-ink-muted); }

.wiz__sidebar-rail {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  writing-mode: vertical-rl;
  font-size: var(--fs-13);
  color: var(--c-ink-muted);
  background: transparent;
}

.wiz__sidebar-rail:hover { color: var(--c-ink); }
.wiz__sidebar-rail .wiz__icon { transform: rotate(-90deg); }

/* PASEK ZWINIĘTEJ ROZMOWY — w obu trybach pełnoekranowych.

   Pasek i pełna kolumna stoją w jednym drzewie, a o tym, który widać,
   decyduje klasa na kontenerze. Dzięki temu zwijanie jest zmianą
   szerokości siatki, którą da się animować; przy podmianie węzła
   kolumna znikała i pojawiała się w jednej klatce.

   W kroku kreatora paska nie ma: tam zwija się sam kontener
   (.wiz__sidebar.is-collapsed), bo jest kolumną, a nie okienkiem. */
.wiz__sidebar-railbox {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  height: 100%;
  padding: var(--s-4) 0;
  background: var(--c-surface);
  border-left: 1px solid var(--c-line);
}