/* ============================================================
   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 {
  position: absolute;
  width: 42px;
  height: 42px;
  /* 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(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(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;
}

/* ---------------- 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); }

.comment__menu-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 5;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  padding: 4px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--sh-2);
}

.comment__menu-item {
  padding: 6px var(--s-3);
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-13);
  color: var(--c-ink);
  text-align: left;
}

.comment__menu-item:hover { background: var(--c-surface-hover); }
.comment__menu-item--danger { color: var(--c-red); }

/* 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;
}

/* 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); }
.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; }

/* ============================================================
   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 {
  border-color: color-mix(in srgb, var(--c-accent-2) 45%, var(--c-line));
  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-2);
  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__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__spot,
.composer__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--fs-13);
  line-height: 1.4;
  color: var(--c-ink-muted);
}

.composer__spot { color: var(--c-ink-soft); }
.composer__spot svg { display: block; flex: 0 0 auto; }

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

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

/* Dwa przyciski po równo, w obu stanach karty: z pinem „Remove pin",
   bez pinu „Cancel". Wysokość średniego przycisku: 32 px. */
.composer__send,
.composer__drop,
.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);
  margin-top: var(--s-5);
}

.cms-comments__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

/* Kropka z liczbą nierozwiązanych przy nazwie ekranu */
.cms-row__badge {
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent-2);
  color: var(--c-accent-2-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); }