/* ========== NÁHLED PLATFOREM V post-dialog (components/dashboard/Calendar) ==========
   .post-preview-okno je samostatné "okno" vedle formuláře (viz .post-corpo
   v post-dialog.css, které je drží jako dva sloupce s pevnou mezerou) -
   vlastní rám/stín/hlavička, ať je jasně vizuálně oddělené od formuláře, ne
   jen další sekce uvnitř .post-telo. Uvnitř jsou nezavíratelné "browser-style"
   taby, jedna na každou zaškrtnutou platformu v .post-platformy - staví je
   assets/js/post-preview.js, obsah panelu kreslí assets/js/platforms.js
   (PLATFORM_PREVIEWS) podle data-preview-component. Nová platforma bez
   vlastního rendereru dostane stejný obecný vzhled karty, jen s jinou
   barvou/ikonou taby. */

.post-preview-okno {
    min-height: 70vh;
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    background: var(--bg);
    overflow: hidden;
}

.post-preview-okno-hlava {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.post-preview-okno-tecky {
    display: inline-flex;
    gap: 5px;
    flex-shrink: 0;
}

.post-preview-okno-tecky i {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--border);
}

.post-preview-okno-tecky i:nth-child(1) { background: var(--error); opacity: .5; }
.post-preview-okno-tecky i:nth-child(2) { background: var(--warning); opacity: .5; }
.post-preview-okno-tecky i:nth-child(3) { background: var(--success); opacity: .5; }

.post-preview-okno-titulek {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-preview-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 8px 0;
    overflow-x: auto;
    flex-shrink: 0;
}

.post-preview-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.post-preview-tab:hover {
    color: var(--text);
}

.post-preview-tab.aktivni {
    color: var(--text);
    background: var(--bg-card);
}

.post-preview-tab-ikona {
    display: inline-flex;
    color: var(--prop-barva, currentColor);
}

.post-preview-panels {
    background: var(--bg-card);
    padding: 16px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.post-preview-panel {
    display: none;
}

.post-preview-panel.aktivni {
    display: block;
}

.post-preview-prazdno {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px 0;
}

/* ---------- Obecná "karta" mock-up příspěvku, sdílená všemi rendery v platforms.js ---------- */

.pp-card {
    font-size: 13.5px;
    color: var(--text);
}

.pp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

/* Jednobarevný generický placeholder místo skutečného profilového obrázku -
   SocialConnection žádný avatar neukládá (jen displayName/externalAccountId). */
.pp-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--border);
}

.pp-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pp-name {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-sub {
    font-size: 11.5px;
    color: var(--text-muted);
}

.pp-text {
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 8px;
    line-height: 1.4;
}

.pp-text-strong {
    font-weight: 600;
}

.pp-text:last-child {
    margin-bottom: 0;
}

.pp-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 8px;
}

.pp-images[data-count="1"] {
    grid-template-columns: 1fr;
}

.pp-images img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--bg-hover);
    display: block;
}

.pp-images-square {
    border-radius: 0;
    margin: 0 -16px 8px;
}

.pp-images-square img {
    aspect-ratio: 1 / 1;
}

.pp-actions {
    display: flex;
    gap: 16px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
}

.pp-actions span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Pod 720px .post-corpo (post-dialog.css) přeskládá okno náhledu pod
   formulář - tady mu jen necháme roztáhnout se přes celou šířku a zbavíme
   se pevné výšky, ať poroste s obsahem místo vlastního scrollu. */
@media (max-width: 720px) {
    .post-preview-okno {
        width: auto;
    }
}

@media (max-width: 480px) {
    .post-preview-panels {
        padding: 12px;
    }

    .pp-images-square {
        margin: 0 -12px 8px;
    }
}