/* ============================================================================
   KOMENTARZE POD OBRAZAMI (.cm) — sekcja w prawej kolumnie lightboxa.
   Zwinięta: nagłówek + 2 ostatnie + pole. Rozwinięta (.cm-open): cała
   wysokość kolumny, tytuł z X, przewijane wątki.
   ============================================================================ */
.cm{display:flex;flex-direction:column;gap:10px;min-height:0}
.cm-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cm-title{
  display:flex;align-items:center;gap:6px;padding:2px 0;
  font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--dim);
  transition:color .15s ease;
}
.cm-title:hover{color:var(--text-soft)}
.cm-title em{font-style:normal;color:var(--muted);letter-spacing:.04em}
.cm-chev{display:flex;color:var(--dim);transition:transform .18s ease}
.cm-chev svg{width:12px;height:12px}
.cm-open .cm-chev{display:none}
.cm-open .cm-title{color:var(--text-soft);cursor:default}
.cm-x{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:4px;color:var(--dim);transition:color .15s ease, background .15s ease;
}
.cm-x svg{width:14px;height:14px}
.cm-x:hover{color:#fff;background:rgba(255,255,255,.06)}

.cm-list{display:flex;flex-direction:column;gap:8px;min-height:0}
.cm-open .cm-list{flex:1;overflow-y:auto;padding-right:4px;gap:6px}
.cm-empty{font-size:11.5px;color:var(--dim);padding:6px 0;line-height:1.5}
.cm-more{
  align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--blue);
  padding:2px 0;transition:filter .15s ease;
}
.cm-more:hover{filter:brightness(1.2);text-decoration:underline}

/* --- meta: autor / plakietki / data --- */
.cm-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:10.5px;line-height:1.3}
.cm-author{font-weight:800;color:#DCE1E8;letter-spacing:.02em}
.cm-author.creator{color:var(--blue)}
.cm-badge{
  font-size:8px;font-weight:800;letter-spacing:.14em;padding:1px 5px;border-radius:999px;
  border:1px solid;line-height:1.5;
}
.cm-badge-creator{color:var(--blue);border-color:rgba(76,159,255,.45);background:rgba(76,159,255,.08)}
.cm-badge-me{color:var(--muted);border-color:#2C323A;text-transform:none;letter-spacing:.04em;font-size:9px}
.cm-date{color:var(--dim)}
.cm-edited{color:var(--dim);font-style:italic;font-size:10px}

/* --- zwinięte: 2 ostatnie skrótowo --- */
.cm-compact{
  padding:7px 9px;border-radius:6px;background:#191D23;border:1px solid var(--border);cursor:pointer;
  transition:border-color .15s ease;
}
.cm-compact:hover{border-color:var(--border-hi)}
.cm-compact .cm-body{
  margin-top:3px;font-size:11.5px;line-height:1.45;color:#C6CDD6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;
}

/* --- rozwinięte: wątki --- */
.cm-item{display:flex;flex-direction:column;gap:6px}
.cm-row{display:flex;gap:8px;padding:8px 9px;border-radius:6px;background:#191D23;border:1px solid var(--border)}
.cm-item.cm-new > .cm-row{animation:cmIn .3s ease}
.cm-item.cm-gone{opacity:0;transform:translateX(8px);transition:opacity .2s ease, transform .2s ease}
@keyframes cmIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cm-avatar{
  width:24px;height:24px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:#252B34;color:#C6CDD6;font-size:11px;font-weight:800;
}
.cm-author.creator ~ .cm-avatar{background:#1B2A3F}
.cm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cm-body{font-size:12px;line-height:1.5;color:#DCE1E8;white-space:pre-wrap;overflow-wrap:anywhere}
.cm-actions{display:flex;align-items:center;gap:2px;margin-top:1px;margin-left:-4px}
.cm-act{
  display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border-radius:4px;
  font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;
  transition:color .15s ease, background .15s ease;
}
.cm-act:hover{color:#fff;background:rgba(255,255,255,.06)}
.cm-act svg{width:12px;height:12px}
.cm-like.on{color:#FF4F86}
.cm-like.on svg{fill:#FF4F86}
.cm-act-danger:hover{color:#FF7B7B}
.cm-replies{display:flex;flex-direction:column;gap:6px;padding-left:calc(14px + var(--d,0) * 0px);border-left:2px solid #232830;margin-left:12px}
.cm-replies:empty{display:none}

/* --- pola: główne, odpowiedź, edycja --- */
.cm-composer{
  display:flex;align-items:flex-end;gap:6px;background:#191D23;border:1px solid var(--border);
  border-radius:6px;padding:4px 4px 4px 10px;transition:border-color .15s ease;flex:0 0 auto;
}
.cm-composer:focus-within{border-color:var(--border-hi)}
.cm-ta{
  flex:1;min-width:0;background:none;border:none;outline:none;resize:none;
  color:var(--text);font-size:12px;line-height:1.45;font-family:inherit;padding:6px 0;min-height:36px;max-height:160px;
}
.cm-ta::placeholder{color:var(--dim)}
.cm-ta:disabled{opacity:.5}
.cm-send{
  width:30px;height:30px;flex:0 0 auto;border-radius:6px;display:flex;align-items:center;justify-content:center;
  background:var(--blue);color:#06101E;transition:filter .15s ease, transform .15s ease;
}
.cm-send svg{width:14px;height:14px}
.cm-send:hover{filter:brightness(1.12)}
.cm-send:active{transform:scale(.92)}
.cm-inline:empty{display:none}
.cm-replybox,.cm-editbox{
  display:flex;flex-direction:column;gap:6px;margin-top:4px;padding:6px 8px;border-radius:6px;
  background:#14171C;border:1px solid var(--border-hi);
}
.cm-replybox .cm-ta,.cm-editbox .cm-ta{padding:2px 0}
.cm-replybtns{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.cm-hint{margin-right:auto;font-size:9.5px;color:var(--dim)}
.btn-ghost.cm-sm,.btn-primary.cm-sm{height:28px;padding:0 10px;font-size:9.5px;border-radius:6px}

/* dialog potwierdzenia nad lightboxem (2000) */
.cm-dialog{z-index:2700}
.cm-dlg-body{font-size:13px;line-height:1.55;color:var(--text-soft)}