/* ==========================================================================
   KOMENTÁŘE (components/dashboard/Comments)
   ==========================================================================
   Stejné stavební kameny jako zbytek přehledu (.panel, .btn, .form-input)
   a proměnné z acc.css - žádné nové barvy ani radiusy.
   ========================================================================== */

/* ========== PŘEPÍNAČ SÍTÍ ========== */
/* Ukazuje se jen při víc než jedné propojené síti - viz Comments.phtml. */

.kom-prepinac {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.kom-prepinac-polozka {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.kom-prepinac-polozka:hover {
    border-color: var(--prop-barva, var(--primary));
    color: var(--text);
}

.kom-prepinac-polozka.active {
    border-color: var(--prop-barva, var(--primary));
    color: var(--prop-barva, var(--primary));
    background: color-mix(in srgb, var(--prop-barva, var(--primary)) 10%, transparent);
}

/* ========== SEZNAM PŘÍSPĚVKŮ ========== */

.kom-prazdno {
    padding: 24px;
    max-width: 520px;
}

.kom-prazdno p {
    margin: 0 0 16px;
    color: var(--text-muted);
}

.kom-seznam {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kom-prispevek {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px;
}

.kom-prispevek-hlava {
    display: flex;
    align-items: center;
    gap: 16px;
}

.kom-prispevek-obrazek {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    object-fit: cover;
    background: var(--bg-hover);
}

.kom-prispevek-obrazek--prazdny {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 20px;
}

/* min-width: 0, aby dlouhý text mohl zkracovat místo roztahování flexu. */
.kom-prispevek-texty {
    flex: 1;
    min-width: 0;
}

.kom-prispevek-text {
    margin: 0 0 6px;
    color: var(--text);
    font-weight: 600;
    line-height: 1.45;
}

.kom-prispevek-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: var(--text-muted);
}

.kom-pocet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.kom-rozbalit {
    flex-shrink: 0;
}

.kom-rozbalit.active {
    color: var(--primary);
}

/* ========== KOMENTÁŘE POD PŘÍSPĚVKEM ========== */

.kom-panel {
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.kom-stav {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.kom-vypis {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Stránkování - stejný tichý vzor jako .zpr-starsi v Inboxu (assets/css/inbox.css). */
.kom-nacist-starsi,
.kom-nacist-starsi-komentare {
    align-self: center;
    margin: 12px auto 0;
    color: var(--text-muted);
    font-size: 13px;
}

.kom-nacist-starsi:hover,
.kom-nacist-starsi-komentare:hover {
    color: var(--text);
}

.kom-nacist-starsi {
    display: flex;
    width: 100%;
    justify-content: center;
}

.kom-nacist-starsi-komentare {
    display: block;
    margin-top: 14px;
}

.kom-polozka + .kom-polozka {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.kom-polozka-hlava {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.kom-autor {
    font-weight: 700;
    color: var(--text);
    font-size: 14px;
}

.kom-datum {
    font-size: 12px;
    color: var(--text-muted);
}

.kom-text {
    margin: 4px 0 10px;
    color: var(--text-secondary);
    line-height: 1.6;
    /* Komentáře bývají jeden dlouhý řetězec bez mezer (odkazy, hashtagy). */
    overflow-wrap: anywhere;
}

/* ========== ODPOVĚĎ ========== */

.kom-odpoved {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kom-odpoved-pole {
    flex: 1;
    min-width: 200px;
}

/* Chybová hláška zabírá celý řádek pod polem, ne místo vedle něj. */
.kom-odpoved .prop-chyba {
    flex-basis: 100%;
    margin: 0;
}

/* ========== MOBIL ========== */

@media (max-width: 700px) {
    .kom-prispevek-hlava {
        flex-wrap: wrap;
    }

    .kom-rozbalit {
        width: 100%;
    }
}

/* ==========================================================================
   VLÁKNA (zanořené odpovědi)
   ==========================================================================
   Odsazení řídí proměnná --kom-uroven, kterou na položku nastaví
   assets/js/comments.js. Je zastropovaná (MAX_UROVEN), aby hluboké vlákno
   neskončilo u pravého okraje s jedním slovem na řádek.
   ========================================================================== */

.kom-vypis--odpovedi {
    margin-top: 12px;
    padding-left: 16px;
    border-left: 2px solid var(--border);
}

/* Odpovědi mezi sebou nemají plnou čáru jako komentáře prvního řádu -
   vlákno by pak vypadalo rozsekaně. */
.kom-vypis--odpovedi .kom-polozka + .kom-polozka {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

/* Štítek "vy" / "skryto" vedle jména. */
.kom-znacka {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.kom-znacka--skryto {
    background: var(--bg-hover);
    color: var(--text-muted);
}

/* Poznámka nad vláknem (chybějící oprávnění k odpovídání). */
.kom-poznamka {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 13px;
}

/* Síť, ze které příspěvek je. V režimu "Vše" jsou obě pomíchané, takže
   to musí být vidět u každého příspěvku zvlášť. */
.kom-prispevek-sit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--prop-barva, var(--text-muted));
    font-size: 12px;
    font-weight: 700;
}

/* Pole na odpověď se rozbalí až po kliknutí na "Odpovědět". */
.kom-odpoved {
    flex-direction: column;
    align-items: flex-start;
}

.kom-odpoved-formular {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 8px;
}

/* ==========================================================================
   VLASTNÍ KOMENTÁŘ A MODERACE
   ==========================================================================
   Psát pod vlastní příspěvek a skrývat/mazat cizí komentáře. Reakce (lajky)
   tu schválně nemají tlačítko - dát je přes API nejde, Meta to zrušila.
   Zobrazuje se jen jejich počet.
   ========================================================================== */

.kom-novy {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.kom-novy-pole {
    flex: 1;
    min-width: 200px;
}

.kom-novy .prop-chyba {
    flex-basis: 100%;
    margin: 0;
}

/* Počet reakcí vedle data. Jen číslo, ne tlačítko - viz výš. */
.kom-lajky {
    font-size: 12px;
    color: var(--text-muted);
}

/* Skrýt / Smazat. Ghost tlačítka schválně: jsou to výjimečné akce, které
   nemají přetahovat pozornost od odpovídání. */
.kom-moderace {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.kom-moderace .prop-chyba {
    flex-basis: 100%;
    margin: 4px 0 0;
}

.kom-moderace .btn {
    font-size: 12px;
    color: var(--text-muted);
}

.kom-moderace .btn:hover {
    color: var(--text);
}

.kom-smazat:hover {
    color: var(--danger, #dc2626);
}

/* Totéž co v inbox.css: [hidden] má nulovou specificitu a prohrává s
   `display` z .btn nebo .kom-novy. Bez tohohle by pole pro nový komentář
   svítilo i tam, kde aplikace nemá oprávnění komentovat, a formulář
   odpovědi by byl rozbalený hned, místo až po kliknutí. */

.kom-seznam [hidden] {
    display: none !important;
}

/* ========== POSTUPNÉ NAČÍTÁNÍ ========== */
/* Stránka přijde prázdná a obsah dotéká (assets/js/comments.js), takže tu
   musí být místo pro hlášku "Načítám…" a pro chyby po jednotlivých sítích. */

.kom-stav--hlavni {
    margin: 0 0 16px;
}

.kom-chyby:not(:empty) {
    margin-bottom: 16px;
}

.kom-chyby .prop-hlaska + .prop-hlaska {
    margin-top: 8px;
}