/* ═══════════════════════════════════════════════════════════════════════════
   eBee Studio  —  studio.css
   Patrón visual coherente con Engagement Analytics y Calendar.
   Degradado propio: teal→violeta→lila (espejo del --gradient-sa de la app).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --gradient-studio: linear-gradient(135deg, #20ead7 0%, #7c3aed 60%, #a855f7 100%);
    --studio-glow:     rgba(32, 234, 215, 0.22);
}

/* ── Shell ──────────────────────────────────────────────────────────────── */
.studio-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 24px;
    box-sizing: border-box;
    gap: 16px;
    overflow: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.studio-header-block {
    gap: 0;
    flex-shrink: 0;
}
.studio-header-block .sa-header-titles {
    margin-bottom: 14px;
}
.studio-nav-tabs {
    margin-top: 4px;
    flex-wrap: wrap;
    gap: 8px;
}

/* Active tab: degradado Studio (teal→violeta→lila) */
#sa-view-studio .studio-tab.is-active {
    background:   var(--gradient-studio);
    border-color: rgba(32, 234, 215, 0.5);
    color:        #fff;
    font-weight:  600;
    box-shadow:   0 2px 12px var(--studio-glow);
}
#sa-view-studio .studio-tab:hover:not(.is-active) {
    border-color: rgba(32, 234, 215, 0.35);
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.studio-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}
.studio-panel {
    display: none;
    height: 100%;
    overflow-y: auto;
    padding-right: 4px;
}
.studio-panel--active { display: flex; flex-direction: column; }

/* ── Placeholder ─────────────────────────────────────────────────────────── */
.studio-placeholder {
    color: var(--text-dim, #94a3b8);
    font-size: 0.9rem;
    padding: 60px 0;
    text-align: center;
    margin: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   GALLERY
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Filter bar ──────────────────────────────────────────────────────────── */
.studio-gallery-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.studio-filter-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.studio-filter-pill {
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.70);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.studio-filter-pill:hover {
    border-color: rgba(32, 234, 215, 0.4);
    color: #fff;
}
.studio-filter-pill.is-active {
    background:   var(--gradient-studio);
    border-color: rgba(32, 234, 215, 0.5);
    color:        #fff;
    font-weight:  600;
    box-shadow:   0 1px 8px var(--studio-glow);
}

.studio-filter-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.studio-module-select {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.75);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}
.studio-module-select:hover { border-color: rgba(32,234,215,0.35); }
.studio-module-select option { background: #1a1a2e; }

.studio-upload-btn {
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.80);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    user-select: none;
}
.studio-upload-btn:hover {
    border-color: rgba(32,234,215,0.4);
    background: rgba(32,234,215,0.06);
    color: #fff;
}

/* ── Grid ────────────────────────────────────────────────────────────────── */
.studio-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    padding-bottom: 16px;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.studio-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.studio-card:hover {
    border-color: rgba(32,234,215,0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
.studio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay on hover */
.studio-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.0) 55%);
    opacity: 0;
    transition: opacity 0.18s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    gap: 8px;
}
.studio-card:hover .studio-card-overlay { opacity: 1; }

/* Action buttons row */
.studio-card-actions {
    display: flex;
    gap: 6px;
}
.studio-card-action {
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    padding: 5px 8px;
    cursor: pointer;
    transition: background 0.12s;
    backdrop-filter: blur(6px);
    line-height: 1;
}
.studio-card-action:hover { background: rgba(255,255,255,0.25); }
.studio-card-action--danger:hover { background: rgba(220,38,38,0.55); }

/* ── Favorite star — always visible top-left, never hidden by overlay ─────── */
.studio-card-star {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 26px;
    height: 26px;
    border: none;
    background: rgba(0,0,0,0.50);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: rgba(255,255,255,0.38);
    cursor: pointer;
    z-index: 3;
    transition: color 0.15s, background 0.15s;
    padding: 0;
    line-height: 1;
}
.studio-card-star:hover {
    color: rgba(32,234,215,0.85);
    background: rgba(0,0,0,0.70);
}
.studio-card-star.is-fav {
    color: #20ead7;
}

/* Favorites pill in filter bar right side */
.studio-fav-pill {
    white-space: nowrap;
}
.studio-fav-pill.is-active {
    /* Override pill gradient with a teal-only tint so the star stands out */
    background: rgba(32,234,215,0.15);
    border-color: #20ead7;
    color: #20ead7;
    font-weight: 700;
}

/* ── Picker cells — read-only star badge (i2t + savm pickers) ─────────────── */
.i2t-picker-star,
.savm-picker-star {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 13px;
    color: #20ead7;
    pointer-events: none;
    z-index: 2;
    line-height: 1;
    text-shadow: 0 0 5px rgba(0,0,0,0.85);
    /* Keep star visible when grid is 1-col (position:static on thumb only) */
}

/* Meta row (badge + date) */
.studio-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}
.studio-card-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(32,234,215,0.18);
    color: #20ead7;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.studio-card-date {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.studio-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 10px;
    text-align: center;
    flex: 1;
}
.studio-empty-icon { font-size: 2.5rem; opacity: 0.4; }
.studio-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    margin: 0;
}
.studio-empty-sub {
    font-size: 0.83rem;
    color: var(--text-dim, #94a3b8);
    margin: 0;
}
.studio-empty-actions { display: flex; gap: 10px; margin-top: 8px; }

/* ── Skeleton loading ────────────────────────────────────────────────────── */
.studio-loading {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}
.studio-skeleton {
    aspect-ratio: 1/1;
    border-radius: 10px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: studio-shimmer 1.4s infinite;
}
@keyframes studio-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Load more ───────────────────────────────────────────────────────────── */
.studio-loadmore-wrap {
    display: flex;
    justify-content: center;
    padding: 16px 0 24px;
    flex-shrink: 0;
}

/* ── Date picker popup ───────────────────────────────────────────────────── */
.studio-date-popup {
    position: fixed;
    z-index: 1000;
    background: #1a1a2e;
    border: 1px solid rgba(32,234,215,0.35);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.studio-date-popup-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.studio-date-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    padding: 7px 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.studio-date-input:focus { border-color: rgba(32,234,215,0.5); }
.studio-date-popup-actions { display: flex; gap: 8px; }

/* ── Shared buttons ──────────────────────────────────────────────────────── */
.studio-btn-primary {
    background: var(--gradient-studio);
    border: none;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 18px;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s, box-shadow 0.15s;
    flex: 1;
}
.studio-btn-primary:hover {
    opacity: 0.88;
    box-shadow: 0 2px 12px var(--studio-glow);
}
.studio-btn-secondary {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    color: rgba(255,255,255,0.80);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 18px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.studio-btn-secondary:hover {
    border-color: rgba(32,234,215,0.4);
    color: #fff;
}
/* ════════════════════════════════════════════════════════════════════════════
   IMAGE TO TEXT
   ════════════════════════════════════════════════════════════════════════════ */

.i2t-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 20px;
    height: 100%;
    min-height: 0;
    padding: 4px 0 16px;
}

/* ── Left column ─────────────────────────────────────────────────────────── */
.i2t-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

/* Platform selector */
.i2t-platform-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.i2t-platform-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.i2t-platform-pills {
    display: flex;
    gap: 6px;
}
.i2t-platform-pill {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.65);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.i2t-platform-pill:hover { border-color: rgba(32,234,215,0.35); color: #fff; }
.i2t-platform-pill.is-active {
    background: var(--gradient-studio);
    border-color: rgba(32,234,215,0.5);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 8px var(--studio-glow);
}

/* Dropzone */
.i2t-dropzone {
    border: 1.5px dashed rgba(255,255,255,0.14);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    overflow: hidden;
    transition: border-color 0.18s, background 0.18s;
    flex: 1;
    min-height: 200px;
    max-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.i2t-dropzone.is-over {
    border-color: rgba(32,234,215,0.55);
    background: rgba(32,234,215,0.05);
}

.i2t-dropzone-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    text-align: center;
}
.i2t-drop-icon { font-size: 2rem; opacity: 0.4; }
.i2t-drop-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    margin: 4px 0 0;
}
.i2t-drop-sub {
    font-size: 0.78rem;
    color: var(--text-dim, #94a3b8);
    margin: 0 0 8px;
}
/* Browse button (inside dropzone idle) */
.i2t-browse-btn { display: inline-block; }

/* From Gallery — full-width button above the dropzone */
.i2t-from-gallery-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1.5px dashed rgba(255,255,255,0.20);
    margin-bottom: 8px;
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.60);
    font-size: 13px;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.i2t-from-gallery-btn:hover {
    background: rgba(32,234,215,0.07);
    border-color: rgba(32,234,215,0.35);
    color: rgba(32,234,215,0.90);
}

/* ── Open Live Editor button ────────────────────────────────────────────────── */
.i2t-text-settings-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
}
.i2t-open-canvas-btn {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border-radius: 9px;
    border: 1px solid rgba(32,234,215,0.35);
    background: rgba(32,234,215,0.08);
    color: rgba(32,234,215,0.90);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s;
}
.i2t-open-canvas-btn:hover {
    background: rgba(32,234,215,0.16);
    border-color: rgba(32,234,215,0.60);
    color: #20ead7;
}

/* ── Canvas Text Overlay Editor ─────────────────────────────────────────────── */
.i2t-canvas-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 4, 18, 0.88);
    backdrop-filter: blur(10px);
    z-index: 9200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.i2t-canvas-editor-dialog {
    background: #0d0b1a;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    width: min(1020px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 28px 70px rgba(0,0,0,0.65);
    overflow: hidden;
}
.i2t-canvas-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}
.i2t-canvas-editor-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    letter-spacing: 0.01em;
}
.i2t-canvas-editor-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.40);
    cursor: pointer;
    font-size: 17px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.i2t-canvas-editor-close:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.i2t-canvas-editor-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
/* Canvas preview */
.i2t-canvas-preview-wrap {
    flex: 1;
    background: #06040f;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
}
.i2t-canvas {
    max-width: 100%;
    max-height: calc(92vh - 64px);
    object-fit: contain;
    border-radius: 8px;
    display: block;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
/* Controls panel */
.i2t-canvas-controls {
    width: 250px;
    flex-shrink: 0;
    border-left: 1px solid rgba(255,255,255,0.07);
    padding: 16px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.i2t-ctrl-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.i2t-ctrl-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.i2t-ctrl-val {
    font-weight: 800;
    color: #20ead7;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
}
.i2t-canvas-text-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    color: rgba(255,255,255,0.90);
    font-size: 13px;
    padding: 8px 10px;
    resize: none;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5;
}
.i2t-canvas-text-input:focus {
    outline: none;
    border-color: rgba(32,234,215,0.40);
    background: rgba(32,234,215,0.04);
}
.i2t-canvas-select {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    padding: 7px 10px;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
}
.i2t-canvas-select option { background: #1a1630; }
.i2t-canvas-slider {
    width: 100%;
    accent-color: #20ead7;
    cursor: pointer;
    height: 4px;
}
/* Color palette */
.i2t-color-palette {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.i2t-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    padding: 0;
}
.i2t-color-swatch:hover  { transform: scale(1.18); }
.i2t-color-swatch.is-active {
    border-color: #20ead7;
    box-shadow: 0 0 0 2px rgba(32,234,215,0.30);
    transform: scale(1.18);
}
/* Rainbow / custom RGB picker swatch */
.i2t-color-custom {
    border: 2px solid rgba(255,255,255,0.20) !important;
    position: relative;
    overflow: hidden;
}
.i2t-color-custom:hover { transform: scale(1.18); }
/* Position buttons */
.i2t-canvas-pos-btns {
    display: flex;
    gap: 6px;
}
.i2t-canvas-pos-btn {
    flex: 1;
    padding: 7px 4px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.i2t-canvas-pos-btn.is-active {
    background: rgba(32,234,215,0.14);
    border-color: rgba(32,234,215,0.45);
    color: #20ead7;
    font-weight: 700;
}
.i2t-canvas-pos-btn:hover:not(.is-active) {
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.70);
}
/* Apply button */
.i2t-canvas-apply-btn {
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #20ead7 0%, #7c3aed 80%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-top: auto;
    transition: opacity 0.15s, transform 0.1s;
    letter-spacing: 0.01em;
}
.i2t-canvas-apply-btn:hover   { opacity: 0.88; }
.i2t-canvas-apply-btn:active  { transform: scale(0.97); }
.i2t-canvas-apply-btn:disabled { opacity: 0.5; cursor: default; }

/* Responsive */
@media (max-width: 680px) {
    .i2t-canvas-editor-body { flex-direction: column; }
    .i2t-canvas-controls {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.07);
        max-height: 40vh;
    }
}

/* ── Gallery Picker Modal ─────────────────────────────────────────────────── */
.i2t-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 6, 24, 0.80);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.i2t-picker-dialog {
    background: #1a1535;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    padding: 20px;
    width: min(640px, 96vw);
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.55);
}
.i2t-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.i2t-picker-title {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
}
.i2t-picker-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.i2t-picker-close:hover {
    background: rgba(255,255,255,0.14);
    color: #fff;
}
.i2t-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    padding-right: 2px;
}
/* Celda envolvente — siempre cuadrado perfecto */
.i2t-picker-cell {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    background: rgba(255,255,255,.05);
    transition: border-color .2s, transform .2s, box-shadow .2s;
    flex-shrink: 0;
}
.i2t-picker-cell:hover {
    border-color: rgba(32,234,215,0.55);
    transform: scale(1.04);
    box-shadow: 0 4px 14px rgba(32,234,215,0.18);
}
/* Imagen posicionada absolutamente para llenar la celda */
.i2t-picker-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.i2t-picker-loading {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    flex: 1;
}
.i2t-picker-loading .studio-skeleton {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}
.i2t-picker-empty {
    text-align: center;
    color: rgba(255,255,255,0.45);
    font-size: 13px;
    padding: 32px 16px;
    flex: 1;
}

/* ── Gallery picker — desktop hover preview (follows cursor) ────────────── */
#i2t-hp {
    display: none;
    position: fixed;
    width: 260px;
    height: 260px;
    border-radius: 12px;
    border: 2px solid rgba(32,234,215,0.6);
    box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(32,234,215,0.18);
    background: #111;
    overflow: hidden;
    pointer-events: none;
    z-index: 99999;
    transition: opacity 0.12s;
}
#i2t-hp.is-visible { display: block; }
#i2t-hp img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Mobile: 1 image per row — .gallery-1col is added by JS on mobile.
   Uses flex column so static-positioned thumbs define the cell height. */
.i2t-picker-grid.gallery-1col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.i2t-picker-grid.gallery-1col .i2t-picker-cell {
    aspect-ratio: unset;
    width: 100%;
    border-radius: 10px;
}
.i2t-picker-grid.gallery-1col .i2t-picker-thumb {
    position: static;
    width: 100%;
    height: auto;
    inset: unset;
    border-radius: 8px;
    display: block;
}
.i2t-picker-grid.gallery-1col .i2t-picker-cell:active {
    border-color: rgba(32,234,215,0.6);
    opacity: 0.85;
    transform: none;
}

/* ── Gallery Picker — Load More button ──────────────────────────────────── */
.i2t-picker-loadmore-wrap {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    flex-shrink: 0;
}
.i2t-picker-loadmore {
    background: rgba(32,234,215,0.10);
    border: 1px solid rgba(32,234,215,0.38);
    color: #20ead7;
    border-radius: 20px;
    padding: 7px 22px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
}
.i2t-picker-loadmore:hover {
    background: rgba(32,234,215,0.22);
    border-color: rgba(32,234,215,0.65);
}
.i2t-picker-loadmore:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Preview */
.i2t-dropzone-preview {
    width: 100%;
    height: 100%;
    position: relative;
}
.i2t-dropzone-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.i2t-remove-img {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.65);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s;
}
.i2t-remove-img:hover { background: rgba(220,38,38,0.7); }

/* Analyze button — tamaño fijo, no estira en flex-column */
.i2t-analyze-btn {
    width: 100%;
    padding: 10px;
    flex: none;
}
.i2t-analyze-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Improve this image — sección ───────────────────────────────────────── */
.i2t-improve-section {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.18s;
    flex: none;
}
.i2t-improve-section.is-enabled {
    border-color: rgba(32,234,215,0.28);
}

/* Toggle row */
.i2t-improve-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    cursor: not-allowed;      /* default: disabled */
}
.i2t-improve-section.is-enabled .i2t-improve-toggle-row {
    cursor: pointer;
}

/* Toggle switch visual */
.i2t-toggle-switch {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}
.i2t-toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.i2t-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.i2t-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,255,255,0.40);
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
    transition: transform 0.22s, background 0.22s;
}
/* Checked state */
.i2t-toggle-switch input:checked + .i2t-toggle-track {
    background: var(--gradient-studio);
    border-color: rgba(32,234,215,0.55);
    box-shadow: 0 0 8px var(--studio-glow);
}
.i2t-toggle-switch input:checked + .i2t-toggle-track .i2t-toggle-thumb {
    transform: translateX(16px);
    background: #fff;
}
/* Disabled state */
.i2t-toggle-switch input:disabled + .i2t-toggle-track {
    opacity: 0.30;
}

.i2t-improve-toggle-text {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.70);
}
.i2t-improve-instruction { display: flex; flex-direction: column; gap: 6px; }

/* Improved image result area */
.i2t-improved-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: none;   /* no estira en el flex-column de i2t-left */
}
.i2t-improved-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.i2t-improved-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(32,234,215,0.9);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
/* ── Compact action buttons inside improved header ── */
.i2t-improved-btns {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}
.i2t-improved-btn {
    flex: none;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.4;
}
.i2t-improved-btn:hover {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.22);
}
.i2t-improved-btn--accent,
.i2t-improved-btn--gallery {
    background: rgba(32,234,215,0.10);
    border-color: rgba(32,234,215,0.28);
    color: rgba(32,234,215,0.85);
}
.i2t-improved-btn--accent:hover,
.i2t-improved-btn--gallery:hover {
    background: rgba(32,234,215,0.20);
    border-color: rgba(32,234,215,0.50);
    color: #20ead7;
}
.i2t-improved-img {
    width: 100%;
    border-radius: 10px;
    border: 1px solid rgba(32,234,215,0.25);
    display: block;
}
.i2t-improved-status {
    font-size: 11px;
    color: var(--text-dim, #94a3b8);
    margin: 0;
    text-align: center;
}

/* ── Right column ────────────────────────────────────────────────────────── */
.i2t-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    overflow-y: auto;
    padding-right: 2px;
    gap: 12px;
}

/* Imagen mejorada en panel derecho — limita altura para no empujar el post */
.i2t-right .i2t-improved-wrap {
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding-bottom: 12px;
    min-height: 180px;   /* garantiza altura visible mientras el skeleton esté activo */
}
.i2t-right .i2t-improved-img {
    max-height: 240px;
    object-fit: contain;
    width: 100%;
}
.i2t-right .i2t-improved-skeleton {
    height: 140px;
    aspect-ratio: unset;
}

.i2t-right-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 8px;
    text-align: center;
    color: var(--text-dim, #94a3b8);
    font-size: 0.88rem;
}
.i2t-right-empty-icon { font-size: 2rem; opacity: 0.35; }
.i2t-right-empty-sub { font-size: 0.78rem; opacity: 0.7; margin: 0; }

/* Editor */
.i2t-editor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 0;
}
.i2t-editor-header {
    display: flex;
    justify-content: flex-end;
}
.i2t-char-counter {
    font-size: 11px;
    color: var(--text-dim, #94a3b8);
    font-variant-numeric: tabular-nums;
}
.i2t-char-counter.is-over { color: #ef4444; }

.i2t-textarea {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    color: rgba(255,255,255,0.90);
    font-size: 14px;
    line-height: 1.6;
    padding: 14px;
    resize: none;
    font-family: inherit;
    outline: none;
    min-height: 200px;
    transition: border-color 0.15s;
}
.i2t-textarea:focus { border-color: rgba(32,234,215,0.4); }

/* Refine row — textarea con X y send flotantes */
.i2t-refine-row { display: flex; flex-direction: column; }

.i2t-refine-input-wrap { position: relative; }

.i2t-refine-input {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    line-height: 1.55;
    padding: 8px 36px 48px 12px;  /* right: espacio X | bottom: espacio send */
    font-family: inherit;
    outline: none;
    resize: none;
    overflow: hidden;
    min-height: 80px;
    transition: border-color 0.15s;
}
.i2t-refine-input:focus { border-color: rgba(32,234,215,0.45); }
.i2t-refine-input::placeholder { color: rgba(255,255,255,0.3); }

/* Botón cerrar — esquina superior derecha */
.i2t-refine-close {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.40);
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}
.i2t-refine-close:hover { background: rgba(220,38,38,0.50); color: #fff; border-color: transparent; }

/* Botón send — esquina inferior derecha (circular, degradado Studio) */
.i2t-refine-send {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-studio);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px var(--studio-glow);
    transition: opacity 0.15s, transform 0.12s;
}
.i2t-refine-send:hover { opacity: 0.85; transform: scale(1.08); }

/* Textarea de "Also improve this image" */
.i2t-improve-input-area {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    line-height: 1.55;
    padding: 7px 10px;
    font-family: inherit;
    outline: none;
    resize: none;
    overflow: hidden;
    min-height: 36px;
    transition: border-color 0.15s;
}
.i2t-improve-input-area:focus { border-color: rgba(32,234,215,0.45); }
.i2t-improve-input-area::placeholder { color: rgba(255,255,255,0.30); }

/* ── Mode toggle: AI Improve vs Text Overlay ── */
.i2t-improve-mode {
    display: flex;
    gap: 5px;
    margin-bottom: 6px;
}
.i2t-mode-btn {
    flex: 1;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.50);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    text-align: center;
    font-family: inherit;
}
.i2t-mode-btn:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.80);
}
.i2t-mode-btn.is-active {
    background: rgba(32,234,215,0.12);
    border-color: rgba(32,234,215,0.35);
    color: #20ead7;
    font-weight: 600;
}
.i2t-overlay-hint {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    margin: 0;
    font-style: italic;
    white-space: nowrap;
}

/* ── Quality / Size settings (inside improve-instruction) ── */
.i2t-improve-settings {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 2px 0;
}
.i2t-improve-setting-group {
    display: flex;
    align-items: center;
    gap: 5px;
}
.i2t-setting-label {
    font-size: 11px;
    color: rgba(255,255,255,0.40);
    font-weight: 500;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.i2t-setting-pills {
    display: flex;
    gap: 4px;
}
.i2t-setting-pill {
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.50);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}
.i2t-setting-pill:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.80);
    border-color: rgba(255,255,255,0.20);
}
.i2t-setting-pill.is-active {
    background: rgba(32,234,215,0.12);
    border-color: rgba(32,234,215,0.35);
    color: #20ead7;
    font-weight: 600;
}

/* Bee loader video (estado analizando) */
.i2t-bee-loader {
    width: 150px;
    height: 150px;
    object-fit: contain;
    border-radius: 50%;
    opacity: 0.92;
}

/* Actions row */
.i2t-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}
/* Copy + Refine: size by content */
.i2t-actions .studio-btn-secondary {
    flex: none;
}
/* Send to Calendar: same compact size, pushed to the right */
.i2t-actions .studio-btn-primary {
    flex: none;
    margin-left: auto;
}

/* Date popup — fixed para no ser cortado por overflow del panel */
#i2t-date-popup {
    position: fixed;
    bottom: 80px;
    right: 28px;
    z-index: 1000;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .i2t-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        overflow-y: auto;
    }
    .i2t-dropzone { max-height: 220px; }
    #i2t-date-popup { bottom: auto; top: 0; right: 0; }
}

.studio-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
    flex: 1;
}
.studio-btn-ghost:hover { color: rgba(255,255,255,0.85); }

/* ════════════════════════════════════════════════════════════════════════════
   CAROUSEL CREATOR
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Layout ──────────────────────────────────────────────────────────────── */
.cc-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    height: 100%;
    min-height: 0;
    padding: 4px 0 16px;
}

/* ── Left column ─────────────────────────────────────────────────────────── */
.cc-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

/* ── Labels / dividers ───────────────────────────────────────────────────── */
.cc-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
}
.cc-divider {
    height: 1px;
    background: rgba(255,255,255,0.07);
    flex-shrink: 0;
}

/* ── Platform toggle ─────────────────────────────────────────────────────── */
.cc-platform-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.cc-platform-pills {
    display: flex;
    gap: 6px;
}
.cc-platform-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.65);
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.cc-platform-pill:hover { border-color: rgba(32,234,215,0.35); color: #fff; }
.cc-platform-pill.is-active {
    background: var(--gradient-studio);
    border-color: rgba(32,234,215,0.5);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 1px 8px var(--studio-glow);
}
.cc-slide-limit-hint {
    font-size: 10px;
    color: rgba(255,255,255,0.28);
    margin-left: auto;
    white-space: nowrap;
}

/* ── Topic textarea ──────────────────────────────────────────────────────── */
.cc-topic-wrap { flex-shrink: 0; }
.cc-topic-textarea {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    color: rgba(255,255,255,0.90);
    font-size: 13px;
    line-height: 1.55;
    padding: 10px 12px;
    resize: none;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
    min-height: 72px;
}
.cc-topic-textarea:focus { border-color: rgba(32,234,215,0.40); }
.cc-topic-textarea::placeholder { color: rgba(255,255,255,0.28); }

/* ── Structure button ────────────────────────────────────────────────────── */
.cc-structure-btn {
    width: 100%;
    padding: 10px;
    flex: none;
}
.cc-structure-btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }

/* ── Num slides pills ────────────────────────────────────────────────────── */
.cc-num-slides-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cc-num-pills {
    display: flex;
    gap: 5px;
}
.cc-num-pill {
    min-width: 36px;
    padding: 4px 8px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.50);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.14s;
    text-align: center;
}
.cc-num-pill:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.80); }
.cc-num-pill.is-active {
    background: rgba(32,234,215,0.12);
    border-color: rgba(32,234,215,0.38);
    color: #20ead7;
    font-weight: 700;
}

/* ── Slide list ──────────────────────────────────────────────────────────── */
.cc-slide-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.cc-slides-empty {
    padding: 20px 12px;
    border: 1.5px dashed rgba(255,255,255,0.08);
    border-radius: 10px;
    text-align: center;
    color: rgba(255,255,255,0.28);
    font-size: 12px;
    line-height: 1.55;
}
.cc-slide-item {
    display: grid;
    grid-template-columns: 24px 1fr 26px;
    gap: 8px;
    align-items: flex-start;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 10px 10px 10px 10px;
    transition: border-color 0.15s;
}
.cc-slide-item:focus-within {
    border-color: rgba(32,234,215,0.28);
}
.cc-slide-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(32,234,215,0.12);
    border: 1px solid rgba(32,234,215,0.25);
    color: #20ead7;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
/* Generated: thumb inside the num badge */
.cc-slide-num.has-thumb {
    background: transparent;
    border-color: rgba(32,234,215,0.40);
    overflow: hidden;
}
.cc-slide-num.has-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.cc-slide-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.cc-slide-title-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.30);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-slide-textarea {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    line-height: 1.55;
    padding: 0;
    resize: none;
    font-family: inherit;
    outline: none;
    overflow: hidden;
    min-height: 36px;
}
.cc-slide-textarea::placeholder { color: rgba(255,255,255,0.25); }
.cc-slide-remove {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.25);
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
    flex-shrink: 0;
    margin-top: 2px;
}
.cc-slide-remove:hover { background: rgba(220,38,38,0.40); color: #fff; border-color: transparent; }

/* Slide status overlay on the num badge */
.cc-slide-item.is-generating .cc-slide-num { animation: studio-shimmer-border 1.4s infinite; }
.cc-slide-item.is-done      .cc-slide-num { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.40); color: #22c55e; }
.cc-slide-item.is-failed    .cc-slide-num { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.40); color: #ef4444; }

/* ── Drag and drop ───────────────────────────────────────────────────────── */
.cc-slide-item[draggable="true"] { cursor: grab; }
.cc-slide-item[draggable="true"]:active { cursor: grabbing; }
.cc-slide-item.cc-drag-over {
    border-color: rgba(32,234,215,0.55);
    background: rgba(32,234,215,0.06);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(32,234,215,0.12);
}
.cc-slide-item.cc-drag-source { opacity: 0.40; }

/* ── ⚡ AI regenerate slide text button ──────────────────────────────────── */
.cc-slide-regen-btn {
    align-self: flex-start;
    margin-top: 2px;
    background: none;
    border: none;
    color: rgba(255,255,255,0.22);
    font-size: 13px;
    cursor: pointer;
    padding: 1px 2px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.14s, background 0.14s;
    flex-shrink: 0;
}
.cc-slide-regen-btn:hover { color: rgba(32,234,215,0.85); background: rgba(32,234,215,0.08); }
.cc-slide-regen-btn.is-loading { animation: cc-spin 0.7s linear infinite; color: rgba(32,234,215,0.70); }

/* ── Add slide button ────────────────────────────────────────────────────── */
.cc-add-slide-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    border: 1.5px dashed rgba(255,255,255,0.14);
    border-radius: 8px;
    background: transparent;
    color: rgba(255,255,255,0.40);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    flex-shrink: 0;
}
.cc-add-slide-btn:hover {
    border-color: rgba(32,234,215,0.35);
    color: rgba(32,234,215,0.80);
    background: rgba(32,234,215,0.04);
}

/* ── Style row (50 styles badge + shuffle) ───────────────────────────────── */
.cc-style-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cc-style-badge {
    flex: 1;
    background: rgba(32,234,215,0.08);
    border: 1px solid rgba(32,234,215,0.28);
    border-radius: 999px;
    color: rgba(32,234,215,0.90);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}
.cc-style-shuffle,
.cc-style-clear {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.2s;
    font-family: inherit;
    line-height: 1;
}
.cc-style-shuffle:hover { background: rgba(32,234,215,0.12); color: #20ead7; border-color: rgba(32,234,215,0.35); }
.cc-style-clear:hover   { background: rgba(239,100,38,0.20);  color: #ef6426; border-color: rgba(239,100,38,0.45); }
.cc-style-shuffle.is-spinning { animation: cc-spin 0.5s linear; }
@keyframes cc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Custom style textarea (shown when preset is dismissed) ──────────────── */
.cc-custom-style-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cc-custom-style-ta {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    line-height: 1.55;
    padding: 8px 10px;
    resize: none;
    font-family: inherit;
    outline: none;
    overflow: hidden;
    min-height: 48px;
    transition: border-color 0.15s;
}
.cc-custom-style-ta:focus { border-color: rgba(32,234,215,0.40); }
.cc-custom-style-ta::placeholder { color: rgba(255,255,255,0.25); }
.cc-style-preset-btn {
    align-self: flex-start;
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.12s;
}
.cc-style-preset-btn:hover { color: rgba(32,234,215,0.80); }

/* ── Format hint ─────────────────────────────────────────────────────────── */
.cc-format-hint {
    font-size: 10px;
    color: rgba(255,255,255,0.28);
    margin: -6px 0 0;
    letter-spacing: 0.01em;
}

/* ── Text-in-image toggle ────────────────────────────────────────────────── */
.cc-text-in-image-row {
    margin-top: 4px;
}

.cc-toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.cc-toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.cc-toggle-track {
    width: 34px;
    height: 18px;
    background: rgba(255,255,255,0.12);
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.15);
    transition: background 0.2s, border-color 0.2s;
    display: flex;
    align-items: center;
    padding: 0 2px;
}
.cc-toggle-thumb {
    width: 13px;
    height: 13px;
    background: rgba(255,255,255,0.45);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
    flex-shrink: 0;
}
.cc-toggle-switch input:checked + .cc-toggle-track {
    background: rgba(32,234,215,0.25);
    border-color: rgba(32,234,215,0.55);
}
.cc-toggle-switch input:checked + .cc-toggle-track .cc-toggle-thumb {
    transform: translateX(16px);
    background: #20ead7;
}
.cc-toggle-hint {
    font-size: 10px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.01em;
}

/* ── Format option row ───────────────────────────────────────────────────── */
.cc-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cc-format-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.cc-format-pill {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.50);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.14s;
    white-space: nowrap;
}
.cc-format-pill:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.80); }
.cc-format-pill.is-active {
    background: rgba(32,234,215,0.12);
    border-color: rgba(32,234,215,0.38);
    color: #20ead7;
    font-weight: 600;
}

/* ── Generate button ─────────────────────────────────────────────────────── */
.cc-generate-btn {
    width: 100%;
    padding: 11px;
    font-size: 13px;
    flex: none;
    margin-top: auto;
}
.cc-generate-btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }

/* ── Right column ────────────────────────────────────────────────────────── */
.cc-right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    overflow-y: auto;
    padding-right: 2px;
    gap: 14px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.cc-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 10px;
    text-align: center;
    padding: 40px 20px;
}
.cc-preview-empty-icon { font-size: 3rem; opacity: 0.30; }
.cc-preview-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.70);
    margin: 0;
}
.cc-preview-empty-sub {
    font-size: 0.82rem;
    color: var(--text-dim, #94a3b8);
    margin: 0;
    max-width: 320px;
}

/* ── Preview wrap ────────────────────────────────────────────────────────── */
.cc-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

/* ── Slide image area ────────────────────────────────────────────────────── */
.cc-slide-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    /* aspect-ratio set dynamically by JS based on selected format */
    aspect-ratio: 1 / 1;
    max-height: 420px;
    align-self: center;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: aspect-ratio 0.2s;
}
/* Format variants */
.cc-slide-preview.fmt-portrait  { aspect-ratio: 2 / 3; max-width: 280px; }
.cc-slide-preview.fmt-landscape { aspect-ratio: 3 / 2; max-width: 460px; }
.cc-slide-skeleton {
    position: absolute;
    inset: 0;
    border-radius: 0;
    aspect-ratio: unset;
}
.cc-slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cc-slide-status-badge {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.80);
    white-space: nowrap;
    pointer-events: none;
    display: none;
}
.cc-slide-status-badge.is-visible { display: block; }

/* ── Nav bar ─────────────────────────────────────────────────────────────── */
.cc-preview-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-shrink: 0;
}
.cc-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.65);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s, color 0.14s;
}
.cc-nav-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.cc-nav-btn:disabled { opacity: 0.25; cursor: default; }
.cc-nav-counter {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    min-width: 48px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ── Thumbnail strip ─────────────────────────────────────────────────────── */
.cc-thumb-strip {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.cc-thumb {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
    flex-shrink: 0;
    position: relative;
}
.cc-thumb:hover { transform: scale(1.08); }
.cc-thumb.is-active { border-color: #20ead7; box-shadow: 0 0 0 1px rgba(32,234,215,0.30); }
.cc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-thumb-skeleton {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 75%);
    background-size: 200% 100%;
    animation: studio-shimmer 1.4s infinite;
}
.cc-thumb-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
}

/* ── Slide text below image ──────────────────────────────────────────────── */
.cc-preview-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.cc-preview-slide-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(32,234,215,0.70);
    margin: 0;
}
.cc-preview-slide-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.80);
    margin: 0;
    white-space: pre-wrap;
}

/* ── Actions row ─────────────────────────────────────────────────────────── */
.cc-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    margin-top: auto;
}
.cc-actions .studio-btn-secondary { flex: none; }
.cc-actions .studio-btn-primary   { flex: none; margin-left: auto; }
.cc-actions .studio-btn-primary:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }

/* Date popup — fixed so it's not clipped by panel overflow */
#cc-date-popup {
    position: fixed;
    bottom: 80px;
    right: 28px;
    z-index: 1000;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cc-layout {
        grid-template-columns: 1fr;
        overflow-y: auto;
    }
    .cc-slide-preview { max-height: 260px; }
    #cc-date-popup { bottom: auto; top: 0; right: 0; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CAROUSEL — Calendar vinyl-crate display
   ════════════════════════════════════════════════════════════════════════════ */
.cal-carousel-crate {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 14px;
    width: 100%;
}
.cal-carousel-crate-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(32,234,215,0.70);
    margin-bottom: 8px;
}
.cal-crate-stack {
    position: relative;
    width: 100%;
    /* height grows with stacked items */
}
.cal-crate-item {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    position: relative;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    margin-bottom: 6px;
}
.cal-crate-item:hover {
    transform: scale(1.015);
    border-color: rgba(32,234,215,0.35);
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    z-index: 2;
}
.cal-crate-item img {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    display: block;
    transition: max-height 0.25s ease;
}
.cal-crate-item:hover img {
    max-height: 320px;
}
.cal-crate-item-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
}
.cal-crate-num {
    font-size: 9px;
    font-weight: 700;
    color: rgba(32,234,215,0.70);
    background: rgba(32,234,215,0.10);
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap;
}
.cal-crate-text {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}