.editor {
  --frame-col-w: var(--frame-col);
  --frame-box-w: var(--frame-w);
  --frame-box-h: var(--frame-h);
}

.editor[data-ratio='9:16'] {
  --frame-col-w: var(--frame-col-vertical);
  --frame-box-w: var(--frame-w-vertical);
  --frame-box-h: var(--frame-h-vertical);
}

.editor-columns,
shot-row .shot-grid {
  display: grid;
  grid-template-columns: var(--frame-col-w) minmax(150px, 1fr) minmax(210px, 1.15fr);
}

app-toolbar {
  position: sticky;
  top: 0;
  z-index: var(--layer-toolbar);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-4);
  align-items: center;
  min-height: 48px;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 251, 252, 0.94);
  backdrop-filter: blur(8px);
}

app-toolbar .toolbar-stats {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

app-toolbar .toolbar-total {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

app-toolbar .toolbar-count {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

app-toolbar .toolbar-dot {
  color: var(--line-hover-strong);
}

app-toolbar .toolbar-meter {
  display: flex;
  flex: none;
  width: 96px;
  height: var(--sp-4);
  border-radius: var(--sp-3);
  background: #e8eaed;
}

app-toolbar .toolbar-meter i {
  display: block;
  height: 100%;
  border-radius: var(--sp-3);
  background: var(--amber);
  transition: width var(--transition-slow);
}

app-toolbar .toolbar-meter u {
  display: block;
  height: 100%;
  border-radius: var(--sp-3);
  background: var(--danger);
  transition: width var(--transition-slow);
}

app-toolbar .toolbar-meter[over] {
  overflow: visible;
}

app-toolbar .toolbar-meter[over] i {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 2px solid var(--white);
}

app-toolbar .toolbar-meter[over] u {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

app-toolbar .toolbar-meter[over] + .toolbar-goal {
  color: var(--danger-ink);
  font-weight: var(--fw-bold);
}

app-toolbar .toolbar-goal {
  font-size: var(--fs-sm);
}

app-toolbar .toolbar-spacer {
  flex: 1;
  min-width: var(--sp-4);
}

save-badge {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-mid);
  white-space: nowrap;
}

save-badge[state='saving'] {
  color: var(--ink-soft);
}

save-badge[state='error'] {
  color: var(--danger-ink);
}

ratio-switch {
  display: flex;
  gap: var(--sp-2);
  flex: none;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

ratio-switch button {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 32px;
  padding: 0 var(--sp-5);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

ratio-switch button[aria-pressed='true'] {
  background: var(--blue-tint);
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

ratio-switch .ratio-chip {
  display: block;
  flex: none;
  border: 1px solid var(--line-hover);
  border-radius: var(--sp-1);
  background: #f1f2f4;
}

ratio-switch button[aria-pressed='true'] .ratio-chip {
  border-color: var(--blue);
  background: var(--blue-bright);
}

ratio-switch .ratio-chip[data-shape='16:9'] {
  width: var(--sp-8);
  height: var(--sp-6);
}

ratio-switch .ratio-chip[data-shape='9:16'] {
  width: var(--sp-6);
  height: var(--sp-8);
}

app-toolbar .toolbar-actions {
  display: flex;
  gap: var(--sp-2);
  flex: none;
}

/*
 * Pasek narzędzi jest jedynym miejscem, gdzie przyciski mają ciaśniejszy padding niż
 * reszta aplikacji. Zmierzone 12.08.2026: przy 1280 px `.toolbar-stats` potrzebuje 360 px,
 * a dostaje 329 — pełne 14 px z kitu zabierało jeszcze 20 px i „kwestii" wchodziło na
 * „zapisano". Dokładając cokolwiek do tego paska, zmierz `scrollWidth` kontenera statystyk.
 *
 * 13.08.2026: dodanie ikony odtwarzania przepełniło pasek o 44 px. Zmiana gap-ów:
 * app-toolbar gap: 12 px → 8 px, toolbar-actions gap: 6 px → 4 px przywraca stan sprzed
 * ikony — niedobór 16 px bez nachodzenia, zamiast 44 px z nachodzeniem 12 px. Zmierzone
 * przy 1232 px (paska statystyk).
 */
app-toolbar .toolbar-actions ui-button:not([variant-layout='icon']) {
  padding: 0 var(--sp-6);
}

.editor-card {
  padding-top: var(--sp-2);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--white);
}

.editor-columns {
  position: sticky;
  top: var(--head-top, 48px);
  z-index: var(--layer-columns);
  align-items: center;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--bg-soft);
  box-shadow: 0 1px 0 var(--line);
}

.editor-columns span {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.editor-add-end {
  width: 100%;
  height: var(--h-lg);
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--fs-md);
  white-space: nowrap;
  cursor: pointer;
}

.editor-add-end:hover {
  background: #f1f8fd;
  color: var(--blue);
}

.editor-hint {
  margin: var(--sp-6) var(--sp-1) 0;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

act-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin: var(--sp-1) 0 var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-xs);
  background: var(--act-bg);
}

act-row input {
  flex: 0 1 320px;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--white);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  outline: none;
}

act-row input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

act-row input:focus {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

act-row .act-rule {
  flex: 1;
  min-width: var(--sp-6);
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
}

act-row .act-time {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--white);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

act-row .act-tools {
  display: flex;
  gap: var(--sp-2);
  flex: none;
}

shot-row {
  display: block;
  margin: 0 0 var(--sp-3);
}

shot-row:hover {
  background: #f8f9fa;
}

shot-row .shot-cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
}

shot-row .shot-cell-voice {
  background: var(--white);
}

frame-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--frame-box-w);
  height: var(--frame-box-h);
  overflow: hidden;
  padding: var(--sp-3);
  border: 1px solid var(--frame-line);
  border-radius: var(--radius);
  background: var(--frame-bg);
  cursor: pointer;
}

frame-preview[empty] {
  border: 1px dashed var(--line-strong);
  background: repeating-linear-gradient(
    135deg,
    var(--frame-empty-a) 0 var(--sp-3),
    var(--frame-empty-b) var(--sp-3) var(--sp-6)
  );
}

frame-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

frame-preview .frame-note {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.4px;
  color: var(--ink-soft);
}

ui-textarea {
  position: relative;
  display: flex;
  flex: 1;
}

ui-textarea textarea {
  width: 100%;
  min-height: calc(var(--frame-box-h) - var(--sp-10));
  padding: var(--sp-4) var(--sp-10) var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: #122740;
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  resize: none;
  outline: none;
}

ui-textarea textarea:hover {
  border-color: var(--line-hover);
}

ui-textarea textarea:focus {
  border-color: var(--blue-edge);
  background: var(--white);
  box-shadow: var(--ring);
}

ui-textarea[variant='voiceover'] textarea {
  border-color: #dfe3e8;
  color: #0a1e33;
  line-height: var(--lh-voice);
}

ui-textarea[variant='voiceover'] textarea:hover {
  border-color: #b7d1eb;
}

ui-textarea[variant='voiceover'] textarea:focus {
  border-color: #8cb9e0;
  box-shadow: var(--ring-voice);
}

ui-textarea .pen {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: flex;
  pointer-events: none;
  opacity: 0.45;
  color: #8d98a4;
  transition:
    color var(--transition),
    opacity var(--transition);
}

ui-textarea:focus-within .pen {
  opacity: 1;
  color: var(--blue);
}

ui-textarea[variant='voiceover']:focus-within .pen {
  color: var(--voice-ink);
}

shot-row .shot-subfield {
  width: 100%;
  height: var(--h-sm);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--fs-sm);
  outline: none;
}

shot-row .shot-subfield:hover:not(:disabled) {
  border-color: var(--line-hover);
}

shot-row .shot-subfield:focus {
  border-color: var(--blue-edge);
  background: var(--white);
  box-shadow: var(--ring);
}

shot-row .shot-subfield:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

shot-row .shot-frame-name {
  max-width: 230px;
}

shot-row .shot-speaker {
  max-width: 190px;
}

row-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  height: 40px;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
}

row-tools .tool-label {
  min-width: 40px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

row-tools .tool-step,
row-tools .tool-reset {
  flex: none;
}

row-tools .tool-step {
  min-width: 38px;
  font-variant-numeric: tabular-nums;
}

row-tools .tool-frames {
  min-width: 58px;
  margin-left: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

row-tools .tool-from-voiceover {
  flex: none;
  margin-right: var(--sp-4);
}

row-tools .tool-from-voiceover[hidden] {
  display: none;
}

row-tools .tool-seconds {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

row-tools .tool-spacer {
  flex: 1;
  min-width: var(--sp-6);
}

row-tools ui-button {
  margin-left: var(--sp-2);
}

frame-picker {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  align-items: center;
  justify-content: center;
  padding: var(--sp-9);
  background: var(--scrim);
}

frame-picker[visible] {
  display: flex;
}

frame-picker .picker-box {
  width: 100%;
  max-width: 900px;
  max-height: 80vh;
}

frame-picker h4 {
  margin: var(--sp-8) 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-soft);
}

frame-picker .picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-5);
}

frame-picker upload-dropzone {
  margin-bottom: 0;
}

frame-picker upload-dropzone .drop-field {
  min-height: 64px;
}

frame-picker .picker-tile {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-family: inherit;
  cursor: pointer;
}

frame-picker .picker-tile:hover {
  border-color: var(--blue-bright);
}

frame-picker .picker-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--frame-bg);
}

frame-picker .picker-preview-empty {
  background: var(--bg);
}

frame-picker .picker-preview img {
  max-width: 100%;
  max-height: 100%;
}

frame-picker .picker-name {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-body);
  text-align: left;
}

script-description {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  align-items: center;
  justify-content: center;
  padding: var(--sp-9);
  background: var(--scrim);
}

script-description[visible] {
  display: flex;
}

script-description .description-box {
  width: 100%;
  max-width: 810px;
  max-height: 88vh;
}

script-description .description-field {
  flex: 1;
  min-height: 320px;
  overscroll-behavior: contain;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: #122740;
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  resize: vertical;
  outline: none;
}

script-description .description-field:hover {
  border-color: var(--line-hover);
}

script-description .description-field:focus {
  border-color: var(--blue-edge);
  background: var(--white);
  box-shadow: var(--ring);
}

script-description .description-numbers {
  display: flex;
  gap: var(--sp-7);
}

script-description .description-number {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink);
}

script-description .description-number input {
  width: 100%;
  height: var(--h-field);
  padding: 0 var(--sp-5);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  font: inherit;
  font-size: var(--fs-field);
  color: var(--ink);
  outline: none;
}

script-description .description-number input:hover {
  border-color: var(--line-hover);
}

script-description .description-number input:focus {
  border-color: var(--blue-edge);
  background: var(--white);
  box-shadow: var(--ring);
}

script-description .description-number small {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

script-description[visible],
version-history[visible] {
  display: flex;
}

version-history {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7);
  background: var(--scrim);
}

version-history .history-box {
  width: min(640px, 100%);
  max-height: 80vh;
}

version-history .history-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow-y: auto;
  padding-right: var(--sp-3);
}

version-history .history-row {
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

version-history .history-head {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
}

version-history .history-spacer {
  flex: 1;
}

version-history .history-who,
version-history .history-size {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

version-history .history-changes {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-mid);
}

version-history .history-empty {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

share-modal {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7);
  background: var(--scrim);
}

share-modal[visible] {
  display: flex;
}

share-modal .share-box {
  width: min(560px, 100%);
}

share-modal .share-toggle {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  font-size: var(--fs-field);
  color: var(--ink);
  cursor: pointer;
}

share-modal .share-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}

share-modal .share-link {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

share-modal .share-link code {
  overflow: hidden;
  flex: 1;
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

share-modal .share-warn {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--danger-ink);
}

/*
 * `dvh` po `vh` nie jest ozdobnikiem: na telefonie pasek adresu chowa się przy przewijaniu,
 * a `100vh` liczy się do wysokości BEZ paska, więc okno wystawało poza ekran, dopóki
 * użytkownik nie przewinął. Druga deklaracja wygrywa tam, gdzie `dvh` jest znane,
 * pierwsza zostaje dla reszty.
 */
comment-panel .comment-box {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: min(560px, 100%);
  max-height: 84vh;
  max-height: 84dvh;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-modal);
}

comment-panel h2 {
  overflow: hidden;
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/*
 * Przewija się cały korpus, nie sama lista komentarzy: sekcje kadru i tekstów mają
 * jechać razem z wątkiem. Wcześniej przewijała się tylko lista, więc na telefonie
 * kadr zajmował swoje na stałe, a komentarzom zostawało 120 px.
 */
comment-panel .comment-scroll {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
}

comment-panel .comment-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

comment-panel .comment-section-head {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}

comment-panel .comment-section-head svg {
  flex: none;
}

comment-panel .comment-section-head b {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--sp-2);
  border-radius: 9px;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}

comment-panel .comment-text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-body);
}

/* Ten sam cytat z lewym obramowaniem co `.share-voice` u recenzenta. */
comment-panel .comment-text--voice {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--line);
  color: var(--ink-mid);
}

comment-panel .comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

comment-panel .comment-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}

comment-panel .comment-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--ink-mid);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

comment-panel .comment-item[owner] .comment-avatar {
  background: var(--blue-tint);
  color: var(--blue);
}

comment-panel .comment-item-body {
  flex: 1;
  min-width: 0;
}

comment-panel .comment-head {
  display: flex;
  gap: var(--sp-4);
  align-items: baseline;
}

comment-panel .comment-item[owner] .comment-head b {
  color: var(--blue);
}

comment-panel .comment-when {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

comment-panel .comment-item p {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-body);
}

comment-panel .comment-votes {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

comment-panel .comment-vote {
  display: inline-flex;
  gap: var(--sp-3);
  align-items: center;
  min-height: 32px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}

comment-panel .comment-vote:hover:not(:disabled) {
  border-color: var(--line-hover);
  background: var(--bg-soft);
}

comment-panel .comment-vote:disabled {
  cursor: default;
  opacity: 0.5;
}

comment-panel .comment-vote b {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}

comment-panel .comment-vote[aria-pressed='true'][data-value='1'] {
  border-color: var(--blue-line);
  background: var(--blue-tint);
  color: var(--blue);
}

comment-panel .comment-vote[aria-pressed='true'][data-value='-1'] {
  border-color: var(--danger-line);
  background: var(--danger-tint);
  color: var(--danger-ink);
}

comment-panel .comment-target {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* Pusty panel to wysoka biała płyta z jednym zdaniem u góry — `margin: auto 0` w kolumnie
   flex stawia je pośrodku, więc pustka wygląda na zamierzoną, a nie na niedoładowaną. */
/* Wewnątrz sekcji „Komentarze" to jedno zdanie pod podpisem, nie plansza na pół okna —
   `margin: auto` z czasów, gdy lista była jedynym rozciągliwym elementem, nie ma tu już
   czego wyśrodkować. */
comment-panel .comment-empty {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

comment-panel .comment-composer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
}

/*
 * Bez tego przycisk dziedziczy `align-items: stretch` z kolumny i rozciąga się na całą
 * szerokość okna — pas niebieskiego pod polem tekstowym. Wysyłanie to akcja jak każda
 * inna w tej aplikacji, więc stoi z prawej i ma swoją naturalną szerokość.
 */
comment-panel .comment-composer ui-button {
  align-self: flex-end;
}

comment-panel .comment-field {
  width: 100%;
  padding: var(--sp-4);
  border: 1px solid var(--line-input);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--fs-sm);
  resize: vertical;
}

comment-panel .comment-field:focus-visible {
  border-color: var(--blue);
  outline: none;
  box-shadow: var(--ring);
}

/*
 * Pole podpisu widzi tylko gość bez zapisanego imienia, i tylko do pierwszego
 * komentarza — potem imię siedzi w `localStorage` i pole znika. Zastąpiło
 * `window.prompt`, które na stronie otwieranej z maila wyglądało jak ostrzeżenie
 * przeglądarki, a nie jak część aplikacji.
 */
comment-panel .comment-name {
  width: 100%;
  height: var(--h-field);
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-input);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--fs-sm);
}

comment-panel .comment-name:focus-visible {
  border-color: var(--blue);
  outline: none;
  box-shadow: var(--ring);
}

/*
 * Dyskusja jest oknem na środku, tak samo w edytorze i u recenzenta — jeden komponent,
 * jeden układ. Wcześniej edytor miał tu panel wysuwany z prawej krawędzi: jedyny panel
 * boczny w aplikacji, wbrew zasadzie z CLAUDE.md, a recenzent miał kolumnę 340 px, która
 * na telefonie i tak składała się pod listę.
 */
comment-panel {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7);
  background: var(--scrim);
}

comment-panel[visible] {
  display: flex;
}

comment-panel .comment-title {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
}

comment-panel .comment-heading {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--sp-1);
}

comment-panel .comment-count-chip {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-soft);
  color: var(--ink-mid);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

comment-panel .comment-close {
  flex: none;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
}

comment-panel .comment-close:hover {
  color: var(--ink);
}

/*
 * Sufit idzie na SZEROKOŚĆ, nie na wysokość: `max-height` przy `aspect-ratio` łamie
 * proporcję i ramka kadru filmowego przestaje być 16:9. 356 px to dokładnie tyle, ile
 * daje 200 px wysokości — dalej kadr zjadałby miejsce należne wątkowi. Na telefonie
 * limit nie działa, bo tam o rozmiarze decyduje szerokość okna.
 */
comment-panel .comment-frame {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 356px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--frame-line);
  border-radius: var(--radius);
  background: var(--frame-bg);
}

comment-panel .comment-frame[empty] {
  border: 1px dashed var(--line-strong);
  background: repeating-linear-gradient(
    135deg,
    var(--frame-empty-a) 0 var(--sp-3),
    var(--frame-empty-b) var(--sp-3) var(--sp-6)
  );
}

comment-panel .comment-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

comment-panel .comment-duration {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

row-tools .tool-comments {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  height: 26px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

row-tools .tool-comments:hover {
  border-color: var(--blue);
  color: var(--blue);
}

row-tools .tool-comments[has] {
  border-color: var(--blue);
  background: var(--blue-tint);
  color: var(--blue);
  font-weight: var(--fw-bold);
}

export-modal {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sp-7);
  background: var(--scrim);
}

export-modal[visible] {
  display: flex;
}

export-modal .export-box {
  width: min(760px, 100%);
  max-height: 84vh;
}

export-modal .export-switch {
  display: flex;
  gap: var(--sp-2);
  flex: none;
  align-self: flex-start;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

export-modal .export-switch button {
  height: 32px;
  padding: 0 var(--sp-6);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: var(--fs-sm);
  white-space: nowrap;
  cursor: pointer;
}

export-modal .export-switch button[aria-pressed='true'] {
  background: var(--blue-tint);
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

export-modal .export-switch button:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

export-modal .export-preview {
  overflow: auto;
  overscroll-behavior: contain;
  min-height: 220px;
  max-height: 46vh;
  margin: 0;
  padding: var(--sp-6) var(--sp-7);
  border: 1px solid var(--line-input);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  color: #122740;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  white-space: pre-wrap;
  word-break: break-word;
}

export-modal .export-preview:focus-visible {
  outline: none;
  border-color: var(--blue-edge);
  box-shadow: var(--ring);
}

export-modal .export-empty {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: var(--sp-7);
  border: 1px dashed var(--line-hover);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
  text-align: center;
}

export-modal .export-empty-title {
  margin: 0;
  font-size: var(--fs-field);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

export-modal .export-empty-hint {
  margin: 0;
  max-width: 420px;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-soft);
}