/* Camera Roll — macOS Tahoe Photos UI with pink accent */

:root {
    /* DRUTO Supply Brand Palette */
    --fuchsia: #E52999;           /* Bright Fuchsia — primary accent */
    --cherry-blossom: #F5ADCF;    /* Cherry Blossom Pink — soft accent */
    --chichiro: #FFDDEF;          /* Chichiro Pink — lightest tint */
    --sky: #8BC4DD;               /* Totoro Blue Sky */
    --off-black: #2D2D2D;         /* Off Black */

    /* Mapped aliases (keeps CSS readable) */
    --pink: var(--fuchsia);
    --pink-light: rgba(229, 41, 153, 0.12);
    --pink-ring: rgba(229, 41, 153, 0.35);
    --pink-bg: rgba(229, 41, 153, 0.08);

    --bg: #FFFFFF;
    --bg-window: #F5F5F5;
    --bg-sidebar: rgba(255, 221, 239, 0.45);  /* Chichiro tinted sidebar */
    --bg-toolbar: rgba(255, 255, 255, 0.75);
    --bg-hover: rgba(229, 41, 153, 0.06);
    --bg-seg: #F0E8ED;
    --bg-seg-active: #FFFFFF;

    --text-primary: var(--off-black);
    --text-secondary: #6E6E73;
    --text-tertiary: #AEAEB2;
    --separator: rgba(229, 41, 153, 0.10);

    --shadow-seg: 0 0.5px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06);

    --sidebar-w: 200px;
    --toolbar-h: 52px;

    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font);
    background: var(--bg-window);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    height: 100dvh;
    overflow: hidden;
}

/* ─── App Layout ─── */

.app-layout {
    display: flex;
    height: 100dvh;
}

/* ─── Sidebar ─── */

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg-sidebar);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 0.5px solid var(--separator);
    padding: 12px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    user-select: none;
    /* Drag region for macOS feel */
    padding-top: 16px;
}

/* ─── Sidebar Brand (Title + Mascot + Caption) ─── */

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 16px;
    border-bottom: 0.5px solid var(--separator);
    margin-bottom: 12px;
    overflow: hidden;
}

/* Title pill in sidebar */
.sidebar-title-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 13px 4px 4px;
    background: rgba(255, 221, 239, 0.3);
    border-radius: 100px;
    border: 1px solid rgba(229, 41, 153, 0.1);
    box-shadow: 0 1px 3px rgba(229, 41, 153, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    user-select: none;
}

.sidebar-title-logo {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.sidebar-title-label {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.mascot {
    order: 3;
    width: 100px;
    height: auto;
    display: block;
    cursor: pointer;
    transform-origin: center bottom;
    transition: opacity 0.4s ease;
    margin: 0;
}

/* ─── Mascot Caption ─── */

.mascot-caption {
    order: 4; /* Below mascot */
    font-size: 11px;
    font-weight: 500;
    color: var(--fuchsia);
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    min-height: 16px;
    opacity: 0.65;
    font-style: italic;
    transition: opacity 0.4s ease;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.mascot-caption.fading {
    opacity: 0;
}

/* ─── Per-frame mascot animations ─── */

/* Frame 8: Sleeping — slow breathing rise/fall with tilt */
.mascot[data-frame="8"] { animation: mascotSleep 4s ease-in-out infinite; }
@keyframes mascotSleep {
    0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
    50% { transform: translateY(-3px) rotate(2deg) scale(1.03); }
}

/* Frame 5: Stressed — jitter/shake */
.mascot[data-frame="5"] { animation: mascotPanic 0.4s ease-in-out infinite; }
@keyframes mascotPanic {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-2px) rotate(-2deg); }
    50% { transform: translateX(2px) rotate(1deg); }
    75% { transform: translateX(-1px) rotate(2deg); }
}

/* Frame 6: Boba — sipping lean + cheek puff */
.mascot[data-frame="6"] { animation: mascotSip 2.4s ease-in-out infinite; }
@keyframes mascotSip {
    0% { transform: translateY(0) rotate(0deg) scale(1); }
    15% { transform: translateY(-2px) rotate(-3deg) scale(1); }
    30% { transform: translateY(-3px) rotate(-3deg) scale(1.03); }
    45% { transform: translateY(-1px) rotate(1deg) scale(1.04); }
    60% { transform: translateY(0) rotate(0deg) scale(1.01); }
    75% { transform: translateY(-2px) rotate(0deg) scale(1); }
    100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* Frame 2: Waving — side-to-side wobble */
.mascot[data-frame="2"] { animation: mascotWave 1.2s ease-in-out infinite; }
@keyframes mascotWave {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(6deg) translateY(-2px); }
    75% { transform: rotate(-4deg) translateY(-1px); }
}

/* Frame 3: Glam — gentle sparkle sway */
.mascot[data-frame="3"] { animation: mascotGlam 3s ease-in-out infinite; }
@keyframes mascotGlam {
    0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
    50% { transform: translateY(-4px) scale(1.02); filter: brightness(1.08); }
}

/* Frame 4: Content — slow cozy breathing */
.mascot[data-frame="4"] { animation: mascotCozy 3.5s ease-in-out infinite; }
@keyframes mascotCozy {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.02); }
}

/* Frame 1: Neutral — gentle idle float */
.mascot[data-frame="1"] { animation: mascotIdle 3s ease-in-out infinite; }
@keyframes mascotIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Frame 7: Sad — slow droopy sway */
.mascot[data-frame="7"] { animation: mascotSad 4s ease-in-out infinite; }
@keyframes mascotSad {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(2px) rotate(-3deg); }
    70% { transform: translateY(1px) rotate(2deg); }
}

/* ─── Sidebar PLAY button ─── */

.sidebar-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px 5px 11px;
    border: 1.5px solid rgba(229, 41, 153, 0.25);
    border-radius: 14px;
    background: transparent;
    color: var(--fuchsia);
    font-family: "Press Start 2P", cursive;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
    order: 2; /* Under clock */
    margin: 0;
    opacity: 0.7;
}

.sidebar-play-btn svg {
    flex-shrink: 0;
}

.sidebar-play-btn:hover {
    background: var(--pink-bg);
    border-color: var(--fuchsia);
    opacity: 1;
    transform: scale(1.05);
}

.sidebar-play-btn:active {
    transform: scale(0.95);
}

/* ─── Sidebar Clock ─── */

.sidebar-clock {
    order: 1; /* Right under title pill */
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin: 0;
}

.clock-time {
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 22px;
    font-weight: 700;
    color: var(--pink);
    letter-spacing: 0.04em;
    line-height: 1;
}

.clock-colon {
    animation: colonBlink 1s step-end infinite;
}

@keyframes colonBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.clock-period {
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    color: var(--pink);
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sidebar-section {
    margin-bottom: 20px;
}

.sidebar-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 8px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-header-add {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 7px;
    border-radius: 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sidebar-header-add svg {
    stroke-width: 2.4;
}

.sidebar-header-add:hover {
    background: var(--pink-bg);
    color: var(--pink);
}

/* Character filter dropdown */
.sidebar-header-actions {
    display: flex;
    gap: 2px;
    margin-left: auto;
}
.sidebar-header-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    transition: all 0.15s;
}
.sidebar-header-btn:hover {
    background: var(--pink-bg);
    color: var(--pink);
}
.sidebar-header-btn.active {
    color: var(--pink);
}
.char-filter-wrap {
    position: relative;
}
.char-filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-window);
    border: 1px solid var(--separator);
    border-radius: 8px;
    padding: 3px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 50;
    min-width: 110px;
}
.char-filter-option {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.1s;
}
.char-filter-option:hover {
    background: var(--surface-tertiary);
    color: var(--text-primary);
}
.char-filter-option.active {
    color: var(--pink);
    font-weight: 600;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
    transition: background 0.1s ease;
}

.sidebar-item:hover {
    background: var(--bg-hover);
}

.sidebar-item.active {
    background: var(--pink-light);
    color: var(--pink);
    font-weight: 500;
}

.sidebar-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.sidebar-item.active svg {
    opacity: 1;
    stroke: var(--pink);
}

/* Character items in sidebar */
.sidebar-char {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    transition: background 0.1s ease;
}

.sidebar-char:hover {
    background: var(--bg-hover);
}

.sidebar-char.selected {
    background: var(--pink-light);
    color: var(--pink);
    font-weight: 500;
}

.sidebar-char img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
}

.sidebar-char.selected .pfp-wrap {
    box-shadow: 0 0 0 1.5px var(--pink);
}

.sidebar-char .char-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-char .lock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-tertiary);
    flex-shrink: 0;
}

.sidebar-char .lock-dot.locked {
    background: #34C759;
}
/* Leaderboard ("Fall of Fame") */
.sidebar-leaderboard {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}


.lb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 6px;
}

.lb-row .lb-name {
    color: var(--text-primary);
}

.lb-row .lb-score {
    color: var(--text-tertiary);
}

.lb-row.lb-you {
    background: rgba(229, 41, 153, 0.08);
}

.lb-row.lb-you .lb-name {
    color: var(--fuchsia);
    font-weight: 500;
}

.lb-row.lb-you .lb-score {
    color: var(--pink);
}

.lb-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-score {
    font-family: "Press Start 2P", cursive;
    font-size: 8px;
    flex-shrink: 0;
}

/* PFP edit button */
.sidebar-char .pfp-wrap {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
}
.sidebar-char .pfp-wrap.pfp-wrap--product {
    border-radius: 4px;
}

.sidebar-char .pfp-edit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: pointer;
}

.sidebar-char .pfp-wrap:hover .pfp-edit {
    opacity: 1;
}

.sidebar-char .pfp-edit svg {
    width: 14px;
    height: 14px;
    stroke: white;
    opacity: 1;
}

/* Generating indicator — pulsing pink glow on lock dot */
.sidebar-char.generating .lock-dot {
    background: var(--fuchsia) !important;
    box-shadow: 0 0 0 2px rgba(229, 41, 153, 0.3);
    animation: lock-pulse 1.4s ease-in-out infinite;
}

@keyframes lock-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(229, 41, 153, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(229, 41, 153, 0.4), 0 0 12px rgba(229, 41, 153, 0.3);
        transform: scale(1.3);
    }
}

/* ─── Main Content ─── */

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* ─── Toolbar (removed — title moved to sidebar) ─── */

/* ─── Scroll Area (char-header scrolls away, gen-strip sticks) ─── */

.scroll-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* ─── Character Header (cover + PFP + name + controls) ─── */

.char-header {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg);
}

/* Cover banner — fixed height, PFP overlaps bottom edge */
.char-header-cover {
    width: 100%;
    height: 160px;
    background: linear-gradient(135deg, var(--chichiro) 0%, var(--cherry-blossom) 50%, #e8d5f0 100%);
    position: relative;
    overflow: hidden;
}

.char-header-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 50%;
    display: none;
}

.char-header-cover:has(> #char-header-cover-img.loaded) {
    cursor: grab;
}

.char-header-cover img.loaded {
    display: block;
}

/* Hide placeholder gradient when a real cover is loaded */
.char-header-cover:has(> #char-header-cover-img.loaded) {
    background: #000;
}
.char-header-cover:has(> #char-header-cover-img.loaded) .char-header-cover-overlay {
    display: none;
}

/* Auto-cover: blurred PFP as fallback cover */
.char-header-cover-auto {
    position: absolute;
    inset: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    object-fit: cover;
    filter: blur(30px) saturate(1.3) brightness(1.1);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: block !important;
}

.char-header-cover-auto.loaded {
    opacity: 1;
}

.char-header-cover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%);
    pointer-events: none;
}

.char-header-cover-edit {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.char-header-cover:hover .char-header-cover-edit {
    opacity: 1;
}

.char-header-cover-edit:hover {
    background: rgba(0,0,0,0.6);
}

/* Reset cover button (only visible when custom cover is loaded) */
.char-header-cover-reset {
    position: absolute;
    top: 8px;
    right: 42px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    border: none;
    color: white;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.char-header-cover:has(> #char-header-cover-img.loaded) .char-header-cover-reset {
    display: flex;
}
.char-header-cover:hover .char-header-cover-reset {
    opacity: 1;
}
.char-header-cover-reset:hover {
    background: rgba(180,0,0,0.6);
}

/* PFP (overlaps cover) */
.char-header-pfp {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    box-shadow:
        0 0 0 3px var(--fuchsia),
        0 2px 12px rgba(0,0,0,0.4),
        0 0 30px rgba(0,0,0,0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: -55px;
    position: relative;
    z-index: 1;
    background: var(--bg);
}

.char-header-pfp:hover {
    transform: scale(1.04);
    box-shadow:
        0 0 0 3px var(--fuchsia),
        0 4px 20px rgba(0,0,0,0.5),
        0 0 40px rgba(0,0,0,0.25);
}

.char-header-pfp:active {
    transform: scale(0.97);
}

.char-header-pfp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
}

.char-header-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-top: 8px;
}

/* Social links */
.char-header-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--pink-bg);
    color: var(--fuchsia);
    transition: all 0.15s ease;
    text-decoration: none;
}

.social-link:hover {
    background: var(--fuchsia);
    color: white;
    transform: scale(1.1);
}

.social-link:active {
    transform: scale(0.95);
}

.char-header-count {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-top: 4px;
    padding-bottom: 12px;
}

.toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--separator);
}

/* ─── Segmented Control (macOS Tahoe) ─── */

.segmented-control {
    display: flex;
    background: var(--bg-seg);
    border-radius: 7px;
    padding: 2px;
    gap: 1px;
}

.seg-btn {
    padding: 3px 14px;
    border: none;
    background: transparent;
    border-radius: 5px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.seg-btn.active {
    background: var(--bg-seg-active);
    color: var(--pink);
    font-weight: 600;
    box-shadow: var(--shadow-seg);
}

.seg-btn:active {
    transform: scale(0.96);
}

/* ─── Generation Strip ─── */

.gen-strip {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    border-bottom: 0.5px solid var(--separator);
    padding: 12px 24px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.gen-strip-inner {
    max-width: 800px;
    margin: 0 auto;
}

/* Pill-shaped input bar */
.gen-pill {
    display: flex;
    align-items: center;
    background: var(--bg-window);
    border: 1px solid var(--separator);
    border-radius: 28px;
    padding: 5px 5px 5px 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gen-pill:focus-within {
    border-color: var(--cherry-blossom);
    box-shadow: 0 0 0 3px rgba(245, 173, 207, 0.25);
}

/* ─── Pill icon buttons (media + settings) ─── */
.gen-pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 18px;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    transition: all 0.15s ease;
    user-select: none;
    position: relative;
}

.gen-pill-icon svg {
    stroke-width: 2.4;
}

.gen-pill-icon:hover {
    background: var(--pink-bg);
    color: var(--pink);
}

.gen-pill-icon.active {
    background: var(--pink-light);
    color: var(--pink);
}

.gen-pill-icon.has-media {
    color: var(--pink);
}

.gen-pill-icon-label {
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    letter-spacing: 0.02em;
}

.gen-pill-media-count {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    background: var(--pink);
    color: white;
    font-size: 8px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    font-family: var(--font);
}

.gen-input {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 14px;
    outline: none;
    color: var(--text-primary);
    min-width: 0;
}

.gen-input::placeholder {
    color: var(--text-tertiary);
}

/* ─── Gallery Filter Buttons (media tray) ─── */

.gallery-filters {
    display: flex;
    gap: 4px;
    padding: 0 0 8px;
    flex-shrink: 0;
}

.gallery-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border: 1px solid var(--separator);
    border-radius: 6px;
    background: var(--bg);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
}

.gallery-filter-btn:hover {
    border-color: var(--cherry-blossom);
    color: var(--pink);
}

.gallery-filter-btn.active {
    background: var(--pink-light);
    border-color: var(--pink);
    color: var(--pink);
}

.gallery-filter-count {
    font-weight: 400;
    opacity: 0.6;
}

/* (gen-pill-settings now uses .gen-pill-icon) */

/* Settings popover */
.gen-settings-popover {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--separator);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
    animation: fadeIn 0.12s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gen-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gen-settings-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.gen-go {
    padding: 8px 20px;
    background: var(--pink);
    color: white;
    border: none;
    border-radius: 24px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    min-width: 90px;
}

.gen-go:active {
    transform: scale(0.97);
}

.gen-go:disabled {
    cursor: not-allowed;
    transform: none;
}

.gen-btn-mascot {
    display: none;
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
    animation: mascotSleep 2s ease-in-out infinite;
}

.gen-go.generating {
    background: linear-gradient(135deg, #f5adcf, #e8d5f0, #f5adcf);
    background-size: 200% 200%;
    animation: btnShimmer 2.5s ease infinite;
    opacity: 1;
}

.gen-go.generating .gen-btn-label {
    display: none;
}

.gen-go.generating .gen-btn-mascot {
    display: block;
}

@keyframes mascotSleep {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-2px) scale(1.05); }
    60% { transform: translateY(1px) scale(0.98); }
}

@keyframes btnShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ─── Media Tray (unified upload + assets) ─── */

.media-tray {
    margin-top: 10px;
    border: 1px solid var(--separator);
    border-radius: 12px;
    background: var(--bg);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    animation: fadeIn 0.12s ease;
    overflow: hidden;
}

.media-tray-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.media-tray-attached {
    padding: 10px 12px;
    border-bottom: 1px solid var(--separator);
}

/* Media tray body: upload left + gallery right */
.media-tray-body {
    display: flex;
    height: 280px;
}

.media-tray-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 140px;
    flex-shrink: 0;
    border-right: 1px solid var(--separator);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    padding: 16px 12px;
    line-height: 1.4;
}

.media-tray-drop:hover {
    background: var(--pink-bg);
    color: var(--pink);
}

.media-tray-drop.dragover {
    background: var(--pink-light);
    color: var(--pink);
}

.media-tray-drop svg {
    flex-shrink: 0;
    opacity: 0.35;
    width: 24px;
    height: 24px;
}

.media-tray-drop:hover svg {
    opacity: 1;
}

/* Gallery grid (right side — assets + history combined) */
.media-tray-gallery {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.media-tray-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 6px;
    align-content: start;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.media-tray-gallery-empty {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
    padding: 40px 16px;
    line-height: 1.5;
}

/* Gallery thumbnail (shared by assets + history) */
.gallery-thumb {
    cursor: pointer;
    position: relative;
    transition: transform 0.12s ease;
}

.gallery-thumb:hover {
    transform: scale(1.06);
}

.gallery-thumb:active {
    transform: scale(0.95);
}

.gallery-thumb-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 2px solid transparent;
    transition: border-color 0.12s ease;
}

.gallery-thumb.attached .gallery-thumb-img {
    border-color: var(--pink);
    opacity: 0.7;
}

.gallery-thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumb-img::after {
    content: '+';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(229, 41, 153, 0.45);
    color: white;
    font-size: 18px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

.gallery-thumb:hover .gallery-thumb-img::after {
    opacity: 1;
}

.gallery-thumb.attached .gallery-thumb-img::after {
    content: '✓';
    opacity: 1;
    background: rgba(229, 41, 153, 0.6);
}

.gallery-thumb-label {
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    text-align: center;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-thumb-delete {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.gallery-thumb:hover .gallery-thumb-delete {
    display: flex;
}

/* (old .media-tray-assets removed — merged into .media-tray-gallery) */

.inspo-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.inspo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-window);
    border: 1px solid var(--separator);
    border-radius: 10px;
    padding: 6px 10px 6px 6px;
}

.inspo-item img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.inspo-item-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inspo-asset-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--pink);
    font-family: var(--font);
}

.inspo-asset-label small {
    font-weight: 400;
    color: var(--text-tertiary);
}

.inspo-tag {
    font-size: 11px;
    font-family: var(--font);
    font-weight: 500;
    padding: 3px 8px;
    border: 1px solid var(--separator);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
}

.inspo-tag:focus {
    border-color: var(--cherry-blossom);
}

.inspo-item-clear {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bg-seg);
    color: var(--text-secondary);
    border: none;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.inspo-item-clear:hover {
    background: rgba(255, 59, 48, 0.12);
    color: #FF3B30;
}

/* ─── Asset Library (inside media tray) ─── */

.asset-tray-upload {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--pink);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.asset-tray-upload:hover {
    background: var(--pink-bg);
}

.asset-tray-grid {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.asset-tray-empty {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
    padding: 8px 0;
}


/* ─── Photo Area ─── */

.photo-area {
    padding: 0;
    min-height: 0;
}

.date-header {
    font-size: 13px;
    font-weight: 600;
    padding: 16px 16px 6px;
    color: var(--text-primary);
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 2px;
    padding: 0 2px;
}

.photo-grid-item {
    aspect-ratio: 3/4;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: var(--bg-seg);
}

/* Grid always shows 3:4 thumbnails — actual ratio shown in lightbox only */

/* Generation placeholder card */
.placeholder-card {
    cursor: default;
    overflow: hidden;
}

.placeholder-card .placeholder-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #fce4f0 0%, #f5adcf 30%, #e8d5f0 60%, #f5adcf 100%);
    background-size: 300% 300%;
    animation: shimmerGradient 3s ease infinite;
}

.placeholder-card .placeholder-mascot {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(229, 41, 153, 0.3));
    animation: mascotLevitate 3s ease-in-out infinite;
}

.placeholder-card .placeholder-status {
    font-size: 10px;
    font-weight: 600;
    color: rgba(140, 30, 80, 0.7);
    text-align: center;
    padding: 0 8px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.placeholder-card.placeholder-done {
    animation: placeholderFadeOut 0.3s ease forwards;
}

@keyframes shimmerGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes mascotLevitate {
    0% { transform: translateY(0) rotate(-2deg); }
    25% { transform: translateY(-8px) rotate(1deg); }
    50% { transform: translateY(-4px) rotate(-1deg); }
    75% { transform: translateY(-10px) rotate(2deg); }
    100% { transform: translateY(0) rotate(-2deg); }
}

@keyframes placeholderFadeOut {
    to { opacity: 0; transform: scale(0.95); }
}

.photo-grid-item:hover {
    opacity: 0.88;
}

.photo-grid-item.placeholder-card:hover {
    opacity: 1;
}

.photo-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* gen-time removed — time info shown in lightbox only */

/* Remix button on grid photos */
.photo-grid-item .photo-remix-btn {
    position: absolute;
    bottom: 3px;
    left: 3px;
    background: var(--fuchsia);
    color: white;
    border: none;
    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.1s ease;
    z-index: 2;
}

.photo-grid-item:hover .photo-remix-btn {
    opacity: 1;
}

.photo-remix-btn:hover {
    background: #d1207f;
    transform: scale(1.05);
}

.photo-remix-btn:active {
    transform: scale(0.95);
}

/* Edit button on grid photos (bottom-right, next to download) */
.photo-grid-item .photo-edit-btn {
    position: absolute;
    bottom: 3px;
    right: 30px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 12px;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.1s ease;
    z-index: 2;
    line-height: 1;
}

.photo-grid-item:hover .photo-edit-btn {
    opacity: 1;
}

.photo-edit-btn:hover {
    background: var(--fuchsia);
    transform: scale(1.05);
}

/* Download button on grid photos (bottom-right) */
.photo-grid-item .photo-download-btn {
    position: absolute;
    bottom: 3px;
    right: 3px;
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    font-size: 13px;
    font-weight: 500;
    padding: 1px 5px;
    border-radius: 3px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.1s ease;
    z-index: 2;
    line-height: 1;
}

.photo-grid-item:hover .photo-download-btn {
    opacity: 1;
}

.photo-download-btn:hover {
    background: var(--fuchsia);
    transform: scale(1.05);
}

/* Live Photo button on grid photos (top-left) */
.photo-grid-item .photo-live-btn {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 100px;
    padding: 3px 8px 3px 6px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, transform 0.1s;
    z-index: 2;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    display: flex;
    align-items: center;
    gap: 3px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    line-height: 1;
}
.photo-grid-item:hover .photo-live-btn {
    opacity: 1;
}
.photo-live-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
}
.photo-live-btn:active {
    transform: scale(0.95);
}
.photo-live-btn--active {
    opacity: 1 !important;
    background: rgba(245,197,24,0.85);
    color: #000;
    animation: livePulse 1.5s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* Live Photo progress card */
.live-photo-card {
    position: relative;
}
.live-photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: inherit;
    z-index: 3;
}
.live-photo-badge {
    background: rgba(245,197,24,0.9);
    color: #000;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 4px;
    animation: livePulse 1.5s ease-in-out infinite;
}
.live-photo-badge--done {
    background: #34c759;
    color: #fff;
    animation: none;
}
.live-photo-badge--error {
    background: #ff3b30;
    color: #fff;
    animation: none;
}
.live-photo-status {
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    max-width: 90%;
}
.live-photo-bar {
    width: 60%;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    overflow: hidden;
}
.live-photo-bar-fill {
    height: 100%;
    width: 0%;
    background: #f5c518;
    border-radius: 2px;
    transition: width 0.5s ease;
}
.live-photo-download {
    display: inline-block;
    margin-top: 4px;
    padding: 5px 14px;
    background: #fff;
    color: #000;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.live-photo-download:hover {
    background: #f5c518;
}
.live-photo-save-btn {
    display: inline-block;
    padding: 8px 20px;
    background: #f5c518;
    color: #000;
    font-size: 13px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}
.live-photo-save-btn:hover {
    background: #ffd633;
}
.live-photo-dl-btn {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
}
.live-photo-dl-btn:hover {
    background: rgba(255,255,255,0.3);
}

/* Grid remix popover */
.grid-remix-popover {
    position: fixed;
    z-index: 150;
    background: white;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    animation: fadeIn 0.15s ease;
    max-width: 320px;
}

.grid-remix-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--separator);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-window);
    outline: none;
    margin-bottom: 10px;
    transition: border-color 0.15s ease;
}

.grid-remix-input:focus {
    border-color: var(--cherry-blossom);
    box-shadow: 0 0 0 2px rgba(245, 173, 207, 0.2);
}

.grid-remix-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.grid-remix-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.grid-remix-char {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.grid-remix-char:hover {
    transform: scale(1.1);
}

.grid-remix-char:active {
    transform: scale(0.95);
}

.grid-remix-char span {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
}

.grid-remix-char:hover span {
    color: var(--fuchsia);
}

.grid-remix-pfp {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--separator);
    transition: border-color 0.15s ease;
}

.grid-remix-char:hover .grid-remix-pfp {
    border-color: var(--fuchsia);
}

.grid-remix-pfp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
}

/* ─── Grid Edit Popover ─── */

.grid-edit-popover {
    position: fixed;
    z-index: 150;
    background: white;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    animation: fadeIn 0.15s ease;
    width: 280px;
    display: flex;
    gap: 6px;
}

.grid-edit-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--separator);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-window);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.grid-edit-input:focus {
    border-color: var(--cherry-blossom);
    box-shadow: 0 0 0 2px rgba(245, 173, 207, 0.2);
}

.grid-edit-submit {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: var(--fuchsia);
    color: white;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: filter 0.15s ease;
}

.grid-edit-submit:hover {
    filter: brightness(1.1);
}

.photo-grid-item .burst-badge {
    position: absolute;
    top: 3px;
    left: 3px;
    background: rgba(0,0,0,0.5);
    color: white;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
}

/* (char-profile removed — profile info now lives in char-header) */

/* Empty state */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    color: var(--text-tertiary);
    text-align: center;
    padding: 40px;
}

.empty-icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.empty-state h2 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.empty-state p {
    font-size: 13px;
    line-height: 1.5;
    max-width: 260px;
    color: var(--text-tertiary);
}

/* ─── Lightbox ─── */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.88);
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lb-content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: scaleIn 0.2s ease;
    overflow-y: auto;
    padding-bottom: 20px;
}

@keyframes scaleIn {
    from { transform: scale(0.97); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lb-content img {
    max-width: 90vw;
    max-height: 65vh;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Landscape images get more width in lightbox */
.lb-content img[data-ratio="16:9"] {
    max-width: 90vw;
    max-height: 50vh;
}

.lb-content::-webkit-scrollbar {
    width: 0;
}

.lb-meta {
    margin-top: 14px;
    text-align: center;
    color: rgba(255,255,255,0.75);
    font-size: 12px;
    line-height: 1.6;
    max-width: 520px;
    width: 100%;
}

.lb-meta .meta-char {
    font-weight: 600;
    color: white;
    font-size: 14px;
}

.lb-meta .meta-counter {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.35);
    margin-left: 6px;
}

.lb-meta .meta-prompt {
    color: rgba(255,255,255,0.5);
    margin-top: 3px;
}

.lb-meta .meta-time {
    color: rgba(255,255,255,0.35);
    font-size: 11px;
    margin-top: 6px;
}

.meta-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
}

.meta-btn--delete {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 59, 48, 0.15);
    border: 1px solid rgba(255, 59, 48, 0.3);
    color: #FF6961;
    padding: 6px 16px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.meta-btn--delete:hover {
    background: #FF3B30;
    border-color: #FF3B30;
    color: white;
}

.meta-btn--delete svg {
    flex-shrink: 0;
}

/* Collapsible prompt in lightbox */
.meta-prompt-expand {
    margin-top: 14px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
    letter-spacing: 0.03em;
}

.meta-prompt-expand:hover {
    color: rgba(255,255,255,0.7);
}

.meta-prompt-arrow {
    display: inline-block;
    font-size: 8px;
    margin-right: 4px;
    transition: transform 0.15s ease;
}

.meta-prompt-full {
    margin-top: 8px;
    max-height: 300px;
    overflow-y: auto;
    text-align: left;
}

.meta-prompt-full pre {
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    font-size: 10px;
    line-height: 1.5;
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

.meta-prompt-full::-webkit-scrollbar {
    width: 4px;
}

.meta-prompt-full::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}

.lb-close {
    position: absolute;
    top: -36px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.lb-close:hover { opacity: 1; }

/* ─── PFP Editor Modal ─── */

.pfp-modal {
    position: fixed;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pfp-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    animation: fadeIn 0.2s ease;
}

.pfp-modal-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: scaleIn 0.2s ease;
}

.pfp-modal-circle {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.15);
    cursor: grab;
    position: relative;
    background: #1a1a1a;
}

.pfp-modal-circle:active {
    cursor: grabbing;
}

.pfp-modal-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    transform-origin: center center;
}

.pfp-modal-name {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin-top: 16px;
    letter-spacing: -0.02em;
}

.pfp-modal-hint {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    margin-top: 4px;
}

/* PFP Zoom Controls */
.pfp-zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.pfp-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.pfp-zoom-btn:hover {
    background: rgba(255,255,255,0.2);
    color: white;
}

.pfp-zoom-slider {
    width: 120px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.pfp-zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    cursor: grab;
}

.pfp-zoom-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.pfp-modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.pfp-modal-regen-status {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-align: center;
    margin-top: 8px;
}

.pfp-modal-btn {
    padding: 8px 20px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.pfp-modal-btn.primary {
    background: var(--pink);
    color: white;
}

.pfp-modal-btn.primary:hover {
    opacity: 0.85;
}

.pfp-modal-btn.secondary {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.15);
}

.pfp-modal-btn.secondary:hover {
    background: rgba(255,255,255,0.18);
}

.pfp-modal-close {
    position: absolute;
    top: -40px;
    right: -20px;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.pfp-modal-close:hover { opacity: 1; }

/* ─── Lock Modal ─── */

.lock-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lock-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
}

.lock-modal-content {
    position: relative;
    z-index: 1;
    background: var(--bg);
    border-radius: 12px;
    padding: 28px 36px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

.lock-spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid var(--bg-seg);
    border-top-color: var(--pink);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 10px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.lock-text {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ─── Character Creation Modal ─── */

.create-char-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-char-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.create-char-content {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 28px 32px;
    width: 520px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.create-char-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-char-close:hover {
    background: var(--bg-secondary);
}

.create-char-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--text-primary);
}

.create-char-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.create-char-images {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    align-self: center;
}

.create-char-upload {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border: 2px dashed var(--separator);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.create-char-upload:hover {
    border-color: var(--pink);
    background: rgba(229, 41, 153, 0.04);
}

.create-char-extras {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
    min-height: 0;
}

.create-char-extra-thumb {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.create-char-extra-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.create-char-extra-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.create-char-extra-thumb:hover .create-char-extra-remove {
    opacity: 1;
}

.create-char-add-photo {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    border: 1.5px solid var(--fuchsia);
    border-radius: 12px;
    background: transparent;
    color: var(--fuchsia);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.create-char-add-photo:hover {
    background: var(--fuchsia);
    color: white;
}

.create-char-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
}

.create-char-upload-label small {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.6;
}

.create-char-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Face photo count badge */
.create-char-face-count {
    position: absolute;
    bottom: 4px;
    left: 4px;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--pink);
    color: white;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    pointer-events: none;
    font-family: var(--font);
}

/* Face photo clear button */
.create-char-face-clear {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: white;
    border: none;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
}

.create-char-face-clear:hover {
    background: rgba(0,0,0,0.75);
}

/* Optional field label */
.create-char-optional {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-tertiary);
    margin-left: 2px;
}

/* Name row (input + randomize button) */
.create-char-name-row {
    display: flex;
    gap: 6px;
    flex: 1;
}

.create-char-name-row input {
    flex: 1;
}

.create-char-randomize {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    transition: all 0.15s ease;
}

.create-char-randomize:hover {
    background: var(--pink-bg);
    transform: scale(1.15);
}

.create-char-randomize:active {
    transform: scale(0.92);
}

/* Gender pills (individual buttons) */
.create-char-gender-pills {
    display: flex;
    gap: 6px;
}
.create-char-pills--wrap {
    flex-wrap: wrap;
}

.gender-pill {
    padding: 3px 6px;
    border: 1.5px solid var(--separator);
    border-radius: 6px;
    background: transparent;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.gender-pill:hover {
    border-color: var(--cherry-blossom);
    color: var(--pink);
}

.gender-pill.active {
    background: var(--pink-light);
    border-color: var(--pink);
    color: var(--pink);
    font-weight: 600;
}

.gender-pill:active {
    transform: scale(0.96);
}

/* Makeup upload slot */
.create-char-upload--makeup {
    display: flex;
}

.create-char-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.create-char-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.create-char-row label {
    width: 80px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.create-char-row input[type="text"] {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--separator);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s ease;
}

.create-char-row input[type="text"]:focus {
    border-color: var(--pink);
}

.create-char-row .segmented-control {
    flex: 1;
}

.create-char-select {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--separator);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.create-char-select:focus {
    border-color: var(--pink);
}

.create-char-row--swatches {
    align-items: flex-start;
    padding-top: 2px;
}

/* ── Breed card grid ── */
.cat-breed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    flex: 1;
}
.cat-breed-card {
    padding: 7px 9px;
    border: 1.5px solid var(--separator);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.cat-breed-card:hover {
    border-color: var(--cherry-blossom);
    background: var(--bg-hover);
}
.cat-breed-card.active {
    border-color: var(--pink);
    background: var(--pink-light);
}
.cat-breed-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 4px;
    line-height: 1.2;
}
.cat-breed-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.cat-breed-tag {
    font-size: 7.5px;
    font-weight: 600;
    padding: 1.5px 5px;
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
}
.cat-breed-tag--lead    { background: rgba(229,41,153,0.10);  color: #c02080; }
.cat-breed-tag--power   { background: rgba(40,80,160,0.10);   color: #2850a0; }
.cat-breed-tag--villain { background: rgba(160,30,60,0.10);   color: #a01e3c; }
.cat-breed-tag--drama   { background: rgba(200,120,20,0.10);  color: #c07810; }
.cat-breed-tag--cute    { background: rgba(140,60,180,0.10);  color: #8c3cb4; }
.cat-breed-tag--street  { background: rgba(30,120,70,0.10);   color: #1e7846; }
.cat-breed-tag--mystic  { background: rgba(60,40,150,0.10);   color: #3c2896; }

.cat-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}
.cat-color-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
}
.cat-color-dot {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.cat-color-swatch:hover .cat-color-dot {
    border-color: var(--cherry-blossom);
}
.cat-color-swatch.active .cat-color-dot {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px var(--pink-ring);
}
.cat-color-swatch span {
    font-size: 9px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
    max-width: 38px;
    line-height: 1.2;
}

.create-char-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 0 12px;
    position: relative;
}

/* ─── Flappy Bird Loading Game ─── */

.flappy-scene {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.flappy-scene canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.flappy-score {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 24px;
    font-weight: 800;
    color: white;
    z-index: 5;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 0 12px rgba(229, 41, 153, 0.4);
    letter-spacing: 0.06em;
    pointer-events: none;
}

.flappy-tap-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    opacity: 0.7;
    pointer-events: none;
    animation: hintPulse 2s ease-in-out infinite;
    white-space: nowrap;
}

@keyframes hintPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.3; }
}

/* Completion mascot — shown after generation finishes */
.flappy-complete-mascot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    animation: completeFadeIn 0.5s ease;
}

/* 集中線 (shūchūsen) — manga speed lines radiating from center */
.flappy-complete-mascot::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: repeating-conic-gradient(
        rgba(229, 41, 153, 0.16) 0deg 2deg,
        transparent 2deg 7deg
    );
    animation: speedLinesRotate 40s linear infinite;
    pointer-events: none;
}

/* Mascot image — centered in container, speed lines radiate from it */
.flappy-complete-mascot > #flappy-complete-img {
    width: 140px;
    height: 140px;
    object-fit: contain;
    animation: mascotWave 1.2s ease-in-out infinite;
    filter: drop-shadow(0 2px 8px rgba(229, 41, 153, 0.2));
    z-index: 1;
    position: relative;
}

/* Manga speech bubble — CSS only, absolute above mascot */
.manga-bubble {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: white;
    border: 3px solid var(--fuchsia);
    border-radius: 8px 12px 12px 4px;
    padding: 8px 18px;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 800;
    font-style: italic;
    color: var(--fuchsia);
    letter-spacing: 0.03em;
    white-space: nowrap;
    filter: drop-shadow(2px 3px 6px rgba(229, 41, 153, 0.15));
}

/* Tail pointing down-left toward mascot */
.manga-bubble::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 18px;
    width: 0;
    height: 0;
    border-left: 10px solid var(--fuchsia);
    border-right: 6px solid transparent;
    border-top: 12px solid var(--fuchsia);
    border-bottom: 0;
}

/* White fill inside the tail */
.manga-bubble::before {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 21px;
    width: 0;
    height: 0;
    border-left: 7px solid white;
    border-right: 4px solid transparent;
    border-top: 9px solid white;
    border-bottom: 0;
    z-index: 1;
}

@keyframes speedLinesRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes completeFadeIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Progress bar — hidden, we only show percentage text */
.create-char-progress-bar {
    display: none;
}

.create-char-stage {
    font-size: 13px;
    font-weight: 700;
    color: var(--fuchsia);
    text-align: center;
    margin-top: 8px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    min-height: 18px;
}

.create-char-status {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    text-align: center;
    margin-top: 2px;
    min-height: 16px;
    font-style: italic;
}

.create-char-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.create-char-btn {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.create-char-btn.secondary {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.create-char-btn.secondary:hover {
    background: var(--separator);
}

.create-char-btn.primary {
    background: var(--pink);
    color: white;
}

.create-char-btn.primary:hover {
    filter: brightness(1.08);
}

.create-char-btn.primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.create-char-preview-area {
    margin-top: 12px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-secondary);
    position: relative;
}

.create-char-preview-area.loading {
    min-height: 120px;
}

.create-char-preview-area.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, var(--bg-secondary) 30%, rgba(229,41,153,0.08) 50%, var(--bg-secondary) 70%);
    background-size: 200% 100%;
    animation: shimmerPreview 1.5s ease-in-out infinite;
    border-radius: 10px;
}

@keyframes shimmerPreview {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.create-char-refsheet {
    width: 100%;
    display: block;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.create-char-refsheet.loaded {
    opacity: 1;
}

.create-char-approve-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ─── Toast ─── */

.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: white;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    z-index: 400;
    animation: toastIn 0.25s ease;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.toast-error {
    background: #FF3B30;
    font-weight: 600;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ─── Scrollbar (macOS style) ─── */

.scroll-area::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 8px;
}

.scroll-area::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.scroll-area::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.scroll-area::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.25);
    background-clip: content-box;
}

/* ─── Meta Button (lightbox) ─── */

.meta-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.75);
    padding: 6px 16px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.meta-btn:hover {
    background: rgba(255,255,255,0.18);
    color: white;
}

/* ─── Standalone Flappy Game Modal ─── */

.flappy-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.flappy-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.flappy-modal-content {
    position: relative;
    width: 480px;
    max-width: 90vw;
    background: var(--bg);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: completeFadeIn 0.3s ease;
}

.flappy-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 10;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.flappy-modal-close:hover {
    background: rgba(0, 0, 0, 0.5);
}

.flappy-modal-game {
    width: 100%;
    height: 320px;
}

.flappy-modal-game .flappy-scene {
    height: 100%;
    border-radius: 0;
}

.flappy-modal-game .flappy-score {
    font-size: 32px;
    top: 12px;
}

/* ─── Actor Library ──────────────────────────────────────────────────────── */

/* Pink verified checkmark badge next to character name */
.casted-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
    flex-shrink: 0;
}

/* Casted actors grid view */
.casted-actors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}


.al-card {
    background: var(--bg);
    border: 1px solid var(--separator);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.al-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.al-card-img {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--bg-hover);
}

.al-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.al-card-gender {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.al-card-info {
    padding: 10px 12px;
}

.al-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
    margin-bottom: 2px;
}

.al-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.al-card-tag {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 8px;
    text-transform: capitalize;
}

.al-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-tertiary);
    font-size: 14px;
}

/* Actor Edit Modal */
.al-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.al-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.al-modal-content {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 28px 32px;
    width: 480px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.al-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.al-modal-close:hover { background: var(--bg-secondary); }

.al-modal-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.al-modal-hero img {
    max-width: 100%;
    max-height: 340px;
    border-radius: 12px;
    margin-bottom: 12px;
}

.al-modal-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    text-transform: capitalize;
}

.al-modal-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.al-field-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.al-field-row label {
    width: 65px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.al-field-row input,
.al-field-row select {
    flex: 1;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--separator);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--bg-secondary);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s ease;
}

.al-field-row input:focus,
.al-field-row select:focus {
    border-color: var(--pink);
}

.al-types-section {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.al-types-section > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.al-types-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.al-type-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 12px;
    line-height: 1;
    border-radius: 20px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    white-space: nowrap;
}

.al-type-chip input { display: none; }
.al-type-chip:hover { opacity: 0.85; }

.al-regen-section {
    margin-top: 16px;
    text-align: center;
}
.al-regen-section button {
    width: 100%;
}
.al-regen-status {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-align: center;
    margin-top: 8px;
}

.al-delete-btn {
    width: 100%;
    margin-top: 20px;
    padding: 8px 16px;
    background: transparent;
    color: #d44;
    border: 1px solid #e8c0c0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}
.al-delete-btn:hover {
    background: #fdf0f0;
    color: #b22;
    border-color: #d88;
}

.al-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.al-modal-actions-right {
    display: flex;
    gap: 8px;
}

/* iOS-style toggle switch */
.al-cast-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.al-cast-switch input { display: none; }

.al-cast-track {
    position: relative;
    width: 42px;
    height: 24px;
    background: #ccc;
    border-radius: 12px;
    transition: background 0.2s;
}

.al-cast-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.al-cast-switch input:checked + .al-cast-track {
    background: var(--fuchsia);
}

.al-cast-switch input:checked + .al-cast-track::after {
    transform: translateX(18px);
}

.al-cast-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ─── Post to X Modal ─── */

.post-x-modal {
    position: fixed;
    inset: 0;
    z-index: 350;
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-x-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.post-x-content {
    position: relative;
    background: #1a1a1a;
    border-radius: 16px;
    padding: 24px 28px;
    width: 400px;
    max-width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
    color: #fff;
}

.post-x-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
}
.post-x-close:hover { color: #fff; }

.post-x-title {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
}

.post-x-preview {
    position: relative;
    margin-bottom: 16px;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}
.post-x-preview img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
}
.post-x-upload-overlay {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.6);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    opacity: 0;
    transition: opacity 0.2s;
}
.post-x-preview:hover .post-x-upload-overlay { opacity: 1; }
.post-x-upload-overlay:hover { background: rgba(0,0,0,0.8); color: #fff; }

.post-x-caption-wrap {
    position: relative;
    margin-bottom: 16px;
}

.post-x-caption {
    width: 100%;
    min-height: 80px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 12px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.post-x-caption:focus {
    outline: none;
    border-color: rgba(255,255,255,0.35);
}

.post-x-charcount {
    text-align: right;
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

.post-x-logs {
    margin-bottom: 16px;
    font-size: 13px;
}

.post-x-log {
    padding: 4px 0;
    color: rgba(255,255,255,0.7);
}
.post-x-log--success { color: #34C759; }
.post-x-log--error { color: #FF3B30; }

.post-x-result {
    text-align: center;
    margin-bottom: 12px;
}

.post-x-actions {
    text-align: right;
}

.meta-btn--posted {
    background: rgba(29, 161, 242, 0.15) !important;
    border-color: rgba(29, 161, 242, 0.3) !important;
    color: #1DA1F2 !important;
}

.post-postiz-platforms {
    display: flex;
    gap: 16px;
    padding: 8px 0;
    font-size: 13px;
    color: #bbb;
}
.post-postiz-platforms label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.post-postiz-platforms input[type="checkbox"] {
    accent-color: #E1306C;
}

/* ─── Pulse (X post suggestions — Claudia only) ─── */

.pulse {
    padding: 4px 0 12px;
    width: 100%;
}

.pulse-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 10px;
}

.pulse-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.pulse-scan {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--separator);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    padding: 4px 10px 4px 8px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pulse-scan:hover {
    border-color: #1DA1F2;
    color: #1DA1F2;
    background: rgba(29, 161, 242, 0.06);
}

.pulse-scan:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pulse-scan.scanning svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ─── Pulse feed: Reddit-style compact rows ─── */
.pulse-feed {
    display: flex;
    flex-direction: column;
}

.pulse-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: background 0.1s ease;
}
.pulse-row:last-child { border-bottom: none; }
.pulse-row:hover { background: rgba(0, 0, 0, 0.025); }

/* Viral score (left, like Reddit upvote) */
.pulse-row-score {
    flex-shrink: 0;
    width: 36px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.pulse-row-score--hot { color: #FF3B30; }
.pulse-row-score--warm { color: #FF9500; }
.pulse-row-score--cool { color: var(--text-tertiary); }

/* Caption text (middle) */
.pulse-row-body {
    flex: 1;
    min-width: 0;
}
.pulse-row-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pulse-row-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 10px;
    color: var(--text-tertiary);
}
.pulse-row-hook {
    color: var(--text-secondary);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pulse-row-trend {
    color: #1DA1F2;
    font-weight: 600;
}
.pulse-row-sources {
    color: var(--text-tertiary);
    font-size: 10px;
}

/* Thumbnail (right, optional) */
.pulse-row-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.04);
}

/* ─── Pulse detail modal (X-style tweet card popup) ─── */
.pulse-modal {
    position: fixed;
    inset: 0;
    z-index: 340;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pulse-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pulse-modal-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    width: 420px;
    max-width: 92vw;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.pulse-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 50%;
    line-height: 1;
    z-index: 2;
}
.pulse-modal-close:hover { color: var(--text-primary); background: rgba(0,0,0,0.05); }

/* X tweet card inside the modal */
.pulse-x-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 0;
}
.pulse-x-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.pulse-x-user { flex: 1; min-width: 0; }
.pulse-x-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.2;
}
.pulse-x-handle {
    font-size: 13px;
    color: var(--text-tertiary);
}
.pulse-x-text {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-primary);
    padding: 12px 16px;
    word-wrap: break-word;
}
.pulse-x-image {
    padding: 0 16px;
    margin-bottom: 10px;
}
.pulse-x-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    max-height: 340px;
}
.pulse-x-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 120px;
    border-radius: 12px;
    border: 1.5px dashed rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.02);
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pulse-x-image-placeholder:hover {
    border-color: var(--pink);
    color: var(--pink);
    background: rgba(229, 41, 153, 0.04);
}
.pulse-x-image-placeholder.generating {
    cursor: wait;
    opacity: 0.6;
    animation: pulse-glow 1.5s ease-in-out infinite;
}
@keyframes pulse-glow {
    0%, 100% { background: rgba(0, 0, 0, 0.02); }
    50% { background: rgba(229, 41, 153, 0.06); }
}
.spinning { animation: spin 1s linear infinite; }

/* Viral score chip (reused in modal) */
.pulse-viral-chip {
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    border-radius: 8px;
    line-height: 1.4;
}
.pulse-viral-chip--hot { color: #FF3B30; background: rgba(255, 59, 48, 0.1); }
.pulse-viral-chip--warm { color: #FF9500; background: rgba(255, 149, 0, 0.1); }
.pulse-viral-chip--cool { color: var(--text-tertiary); background: rgba(0, 0, 0, 0.05); }

/* Source tweets */
.pulse-sources {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pulse-sources-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 0 4px;
}
.pulse-source-tweet {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    transition: background 0.1s ease;
    border-radius: 4px;
}
.pulse-source-tweet:hover {
    background: rgba(0, 0, 0, 0.02);
}
.pulse-source-pfp {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
}
.pulse-source-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.pulse-source-handle {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}
.pulse-source-text {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pulse-source-stats {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 1px;
}

/* Footer: reasoning + engagement hook */
.pulse-x-footer {
    padding: 10px 16px;
    font-size: 12px;
    color: var(--text-tertiary);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pulse-x-footer-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pulse-x-reason {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pulse-x-hook {
    font-style: italic;
    color: var(--text-secondary);
}
.pulse-x-trend {
    color: #1DA1F2;
    font-weight: 600;
    flex-shrink: 0;
}

/* Action bar */
.pulse-x-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 14px;
}
.pulse-x-actions-left {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pulse-x-use {
    background: #000;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font);
    padding: 8px 20px;
    border-radius: 9999px;
    cursor: pointer;
    transition: opacity 0.1s ease;
}
.pulse-x-use:hover { opacity: 0.85; }
.pulse-x-gen {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    padding: 7px 14px;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pulse-x-gen:hover {
    border-color: var(--pink);
    color: var(--pink);
}
.pulse-x-gen:disabled {
    opacity: 0.5;
    cursor: wait;
}
.pulse-x-dismiss {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.1s ease;
}
.pulse-x-dismiss:hover { color: var(--text-secondary); }

.pulse-empty {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 12px;
    padding: 20px 0 8px;
}

.pulse-status {
    font-size: 11px;
    color: var(--text-tertiary);
    padding: 6px 4px 0;
    text-align: center;
}

/* ─── Pulse Toast ─── */

.pulse-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--text-primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    z-index: 500;
    max-width: 340px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.pulse-toast--show {
    opacity: 1;
    transform: translateY(0);
}

/* ─── AI Caption Button ─── */

.post-x-caption-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.post-x-ai-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.post-x-ai-btn:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.post-x-ai-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ─── Scraper modal ─── */

.scraper-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scraper-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.scraper-modal-content {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 28px 28px 24px;
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.22);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.scraper-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.scraper-modal-close:hover { background: var(--bg-hover); }

.scraper-modal-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
}

.scraper-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
}

.scraper-sel-btns {
    display: flex;
    gap: 4px;
    align-items: center;
}

.scraper-sel-btn {
    border: 1px solid var(--separator);
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: all 0.12s;
}
.scraper-sel-btn:hover {
    background: var(--bg-hover);
    color: var(--pink);
    border-color: var(--pink-ring);
}

.scraper-accounts-list {
    border: 1px solid var(--separator);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-window);
}

.scraper-account-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--separator);
    cursor: pointer;
    transition: background 0.1s;
    user-select: none;
}
.scraper-account-row:last-child { border-bottom: none; }
.scraper-account-row:hover { background: var(--bg-hover); }
.scraper-account-row.checked { background: var(--pink-bg); }

.scraper-account-row input[type="checkbox"] {
    accent-color: var(--pink);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    cursor: pointer;
}

.scraper-account-info { flex: 1; min-width: 0; }
.scraper-account-handle {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.scraper-account-meta {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scraper-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
}

.scraper-sel-count {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.scraper-field { display: flex; flex-direction: column; gap: 6px; }

.scraper-field-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.scraper-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}
.scraper-label-hint {
    font-weight: 400;
    color: var(--text-tertiary);
}

.scraper-note {
    border: 1px solid var(--separator);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-window);
    resize: none;
    transition: border-color 0.15s;
    outline: none;
}
.scraper-note:focus { border-color: var(--pink-ring); }

.scraper-count-select {
    border: 1px solid var(--separator);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg-window);
    outline: none;
    cursor: pointer;
}

.scraper-status {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 12px;
    background: var(--bg-window);
    border-radius: 8px;
    border: 1px solid var(--separator);
}
.scraper-status.error { color: #c0392b; border-color: rgba(192,57,43,0.25); }
.scraper-status.success { color: #27ae60; border-color: rgba(39,174,96,0.25); }

.scraper-actions { display: flex; justify-content: flex-end; }

.scraper-run-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--pink);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: opacity 0.15s;
}
.scraper-run-btn:hover { opacity: 0.88; }
.scraper-run-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ─── Slideshow Button in Gen Strip ─── */
.gen-slideshow-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1.5px solid var(--pink);
    color: var(--pink);
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    margin-left: 6px;
}
.gen-slideshow-btn:hover { background: var(--pink); color: #fff; }

/* ─── Slideshow Gallery Badge ─── */
.photo-ss-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
}
.photo-ss-badge svg { flex-shrink: 0; }

/* ─── Post Status Badges ─── */
.photo-post-badges {
    position: absolute;
    bottom: 6px;
    right: 6px;
    display: flex;
    gap: 3px;
    pointer-events: none;
}
.photo-post-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: #fff;
    backdrop-filter: blur(4px);
}
.photo-post-badge--x { background: rgba(0,0,0,.75); }
.photo-post-badge--instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.photo-post-badge--tiktok { background: rgba(0,0,0,.75); }

/* ─── Create Slideshow Modal ─── */
.ss-create-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.ss-create-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.ss-create-content {
    position: relative;
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 28px 32px;
    width: min(480px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.ss-create-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-secondary); }
.ss-create-title { font-size: 18px; font-weight: 700; margin: 0 0 20px; }

.ss-type-cards { display: flex; gap: 12px; }
.ss-type-card {
    flex: 1;
    border: 2px solid var(--border, #e0e0e0);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}
.ss-type-card:hover { border-color: var(--pink); }
.ss-type-card.active { border-color: var(--pink); background: rgba(229,41,153,.06); }
.ss-type-card h3 { margin: 10px 0 4px; font-size: 15px; font-weight: 700; }
.ss-type-card p { margin: 0; font-size: 12px; color: var(--text-secondary); }

.ss-field { margin-bottom: 14px; }
.ss-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--text-secondary); }
.ss-field input { width: 100%; padding: 8px 10px; border: 1.5px solid var(--border, #e0e0e0); border-radius: 8px; font-size: 13px; font-family: var(--font); background: var(--input-bg, #fff); }
.ss-optional { font-weight: 400; color: #999; }
.ss-pick-inspo {
    background: var(--surface, #f5f5f5);
    border: 1.5px dashed var(--border, #ddd);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    color: var(--text-secondary);
    width: 100%;
}
.ss-pick-inspo:hover { border-color: var(--pink); color: var(--pink); }
.ss-inspo-preview { margin-top: 8px; display: flex; gap: 4px; overflow-x: auto; }
.ss-inspo-preview img { height: 60px; border-radius: 4px; object-fit: cover; }

.ss-create-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.ss-create-btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    border: none;
}
.ss-create-btn.primary { background: var(--pink); color: #fff; }
.ss-create-btn.primary:hover { opacity: 0.88; }
.ss-create-btn.secondary { background: var(--surface, #f0f0f0); color: var(--text-primary); }

.ss-progress-bar { width: 100%; height: 4px; background: var(--border, #eee); border-radius: 2px; margin: 20px 0 12px; overflow: hidden; }
.ss-progress-fill { height: 100%; width: 0; background: var(--pink); border-radius: 2px; transition: width 0.3s; }
.ss-progress-status { font-size: 13px; color: var(--text-secondary); text-align: center; }

/* ─── Slideshow Editor (fullscreen) ─── */
.ss-editor {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: var(--bg, #fafafa);
    display: flex;
    flex-direction: column;
}
.ss-editor-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border, #e8e8e8);
    background: var(--card-bg, #fff);
}
.ss-editor-back { background: none; border: none; font-size: 20px; cursor: pointer; padding: 4px 8px; }
.ss-editor-caption-wrap { flex: 1; }
.ss-editor-caption {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 13px;
    font-family: var(--font);
    resize: none;
    outline: none;
}
.ss-editor-actions { display: flex; gap: 8px; }
.ss-editor-btn {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    border: none;
}
.ss-editor-btn.primary { background: var(--pink); color: #fff; }
.ss-editor-btn.secondary { background: var(--surface, #f0f0f0); color: var(--text-primary); }

.ss-editor-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.ss-editor-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #1a1a1a;
}
.ss-editor-preview canvas {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    object-fit: contain;
}
.ss-editor-controls {
    width: 280px;
    padding: 16px;
    overflow-y: auto;
    border-left: 1px solid var(--border, #e8e8e8);
    background: var(--card-bg, #fff);
}
.ss-control-group { margin-bottom: 14px; }
.ss-control-group label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.ss-slide-text {
    width: 100%;
    padding: 8px;
    border: 1.5px solid var(--border, #e0e0e0);
    border-radius: 8px;
    font-size: 13px;
    font-family: var(--font);
    resize: vertical;
    background: var(--input-bg, #fff);
}
.ss-font-picker, .ss-style-picker, .ss-pos-picker { display: flex; gap: 4px; flex-wrap: wrap; }
.ss-font-btn, .ss-style-btn, .ss-pos-btn {
    padding: 5px 10px;
    border: 1.5px solid var(--border, #ddd);
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--font);
    cursor: pointer;
    background: var(--surface, #f8f8f8);
    transition: all 0.12s;
}
.ss-font-btn.active, .ss-style-btn.active, .ss-pos-btn.active {
    border-color: var(--pink);
    background: rgba(229,41,153,.08);
    color: var(--pink);
}
.ss-style-swatch { padding: 3px; }
.ss-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 28px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
}
.ss-control-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.ss-control-btn {
    padding: 7px 12px;
    border: 1.5px solid var(--border, #ddd);
    border-radius: 8px;
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    background: var(--surface, #f8f8f8);
    text-align: center;
}
.ss-control-btn:hover { border-color: var(--pink); color: var(--pink); }
.ss-control-btn--danger:hover { border-color: #e53935; color: #e53935; }

/* Filmstrip */
.ss-editor-filmstrip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border, #e8e8e8);
    background: var(--card-bg, #fff);
    overflow-x: auto;
}
.ss-filmstrip-slides { display: flex; gap: 6px; }
.ss-filmstrip-thumb {
    width: 48px;
    height: 85px;
    border-radius: 4px;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.12s;
    flex-shrink: 0;
}
.ss-filmstrip-thumb.active { border-color: var(--pink); }
.ss-filmstrip-thumb:hover { border-color: var(--pink-light, #f5adcf); }
.ss-filmstrip-thumb.ss-filmstrip-dragging { opacity: 0.4; }
.ss-filmstrip-thumb.ss-filmstrip-dragover { border-color: var(--pink); box-shadow: 0 0 0 2px var(--pink-ring); }
.ss-filmstrip-add {
    width: 48px;
    height: 85px;
    border: 2px dashed var(--border, #ddd);
    border-radius: 4px;
    background: none;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
}
.ss-filmstrip-add:hover { border-color: var(--pink); color: var(--pink); }

#ss-slide-size { width: 100%; }

/* ─── Slideshow Lightbox ─── */
.ss-lightbox { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; }
.ss-lb-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.85); }
.ss-lb-content { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 420px; width: 90vw; }
.ss-lb-content img { width: 100%; border-radius: 8px; aspect-ratio: 9/16; object-fit: cover; }
.ss-lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.5);
    color: #fff;
    border: none;
    font-size: 28px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss-lb-prev { left: -50px; }
.ss-lb-next { right: -50px; }
.ss-lb-counter { color: #fff; font-size: 13px; margin-top: 10px; font-weight: 500; }
.ss-lb-dots { display: flex; gap: 5px; margin-top: 8px; }
.ss-lb-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    transition: background 0.15s;
}
.ss-lb-dot.active { background: #fff; }
.ss-lb-actions { display: flex; gap: 8px; margin-top: 12px; }
.ss-lb-close { position: absolute; top: -36px; right: 0; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }

/* ─── Inspo Library Modal ─── */
.inspo-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; }
.inspo-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.inspo-modal-content {
    position: relative;
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 24px;
    width: min(780px, 94vw);
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.inspo-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-secondary); }
.inspo-modal-title { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.inspo-modal-filters { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.inspo-niche-select, .inspo-sort-select {
    padding: 6px 10px;
    border: 1.5px solid var(--border, #ddd);
    border-radius: 8px;
    font-size: 12px;
    font-family: var(--font);
    background: var(--input-bg, #fff);
}
.inspo-refresh-btn {
    background: none;
    border: 1.5px solid var(--border, #ddd);
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
    color: var(--text-secondary);
}
.inspo-refresh-btn:hover { border-color: var(--pink); color: var(--pink); }

.inspo-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.inspo-profile-card {
    border: 1.5px solid var(--border, #e8e8e8);
    border-radius: 10px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.12s;
}
.inspo-profile-card:hover { border-color: var(--pink); }
.inspo-profile-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.inspo-profile-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--surface, #eee); }
.inspo-profile-info { flex: 1; min-width: 0; }
.inspo-profile-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspo-profile-meta { font-size: 10px; color: var(--text-secondary); }
.inspo-profile-slides { display: flex; gap: 3px; overflow: hidden; }
.inspo-profile-slides img { width: 56px; height: 100px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.inspo-profile-stats { font-size: 10px; color: var(--text-secondary); margin-top: 6px; }

/* ─── Inspo Detail Modal ─── */
.inspo-detail { position: fixed; inset: 0; z-index: 1250; display: flex; align-items: center; justify-content: center; }
.inspo-detail-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.inspo-detail-content {
    position: relative;
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 24px;
    width: min(600px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
}
.inspo-detail-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; cursor: pointer; }
.inspo-detail-header { margin-bottom: 12px; }
.inspo-detail-slides { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 4px; }
.inspo-detail-slides img { height: 200px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.inspo-detail-metrics { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.inspo-detail-use {
    background: var(--pink);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    width: 100%;
}
.inspo-detail-use:hover { opacity: 0.88; }

/* ─── Character Profile Actions ─── */
.char-profile-actions {
    display: flex;
    gap: 8px;
    padding: 0 20px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.char-profile-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border: 1.5px solid var(--border, #e0e0e0);
    border-radius: 20px;
    background: var(--bg, #fff);
    font-size: 12px;
    font-family: var(--font);
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
}
.char-profile-action-btn:hover {
    border-color: var(--pink);
    color: var(--pink);
    background: var(--pink-bg);
}
.char-profile-queue-count {
    background: var(--pink);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 2px;
}

/* ─── Posting Settings ─── */
.char-posting-settings {
    padding: 0 20px;
    margin-top: 8px;
}
.char-posting-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    font-size: 12px;
    font-family: var(--font);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 0;
}
.char-posting-toggle:hover { color: var(--pink); }
.char-posting-toggle svg { transition: transform 0.2s; }
.char-posting-settings.open .char-posting-toggle svg { transform: rotate(180deg); }
.char-posting-form {
    margin-top: 8px;
    padding: 12px;
    background: var(--pink-bg);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.char-posting-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.char-posting-row > label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.char-posting-checks {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.char-posting-checks label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
}
.char-posting-input {
    padding: 5px 8px;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    font-size: 12px;
    font-family: var(--font);
    background: var(--bg, #fff);
}
.char-posting-save {
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: var(--pink);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    align-self: flex-start;
}
.char-posting-save:hover { opacity: 0.88; }

/* ─── Post Queue Panel ─── */
.post-queue-panel {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    justify-content: flex-end;
}
.post-queue-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(4px);
}
.post-queue-content {
    position: relative;
    width: min(420px, 90vw);
    height: 100%;
    background: var(--bg, #fff);
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.post-queue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--separator);
}
.post-queue-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.post-queue-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
}
.post-queue-filters {
    display: flex;
    gap: 4px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--separator);
}
.post-queue-filter {
    padding: 4px 12px;
    border: 1px solid var(--border, #ddd);
    border-radius: 14px;
    font-size: 11px;
    font-family: var(--font);
    font-weight: 500;
    background: none;
    cursor: pointer;
    color: var(--text-secondary);
}
.post-queue-filter.active {
    background: var(--pink);
    color: #fff;
    border-color: var(--pink);
}
.post-queue-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
}
.post-queue-item {
    display: flex;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--separator);
    border-radius: 10px;
    margin-bottom: 8px;
    align-items: flex-start;
}
.post-queue-item-thumb {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.post-queue-item-info {
    flex: 1;
    min-width: 0;
}
.post-queue-item-char {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}
.post-queue-item-caption {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-queue-item-platforms {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}
.post-queue-item-platforms span {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--pink-bg);
    color: var(--pink);
    font-weight: 600;
    text-transform: uppercase;
}
.post-queue-item-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}
.post-queue-item-btn {
    padding: 4px 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: 6px;
    font-size: 10px;
    font-family: var(--font);
    font-weight: 600;
    cursor: pointer;
    background: none;
    color: var(--text-primary);
}
.post-queue-item-btn.approve { background: var(--pink); color: #fff; border-color: var(--pink); }
.post-queue-item-btn.post { background: #34C759; color: #fff; border-color: #34C759; }
.post-queue-item-btn.delete { color: #FF3B30; border-color: #FF3B30; }
.post-queue-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
    font-size: 13px;
}
.post-queue-status-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 6px;
}
.post-queue-status-badge.pending { background: #FFEAA7; color: #B7791F; }
.post-queue-status-badge.approved { background: #C6F6D5; color: #22543D; }
.post-queue-status-badge.posted { background: #C6F6D5; color: #22543D; }
.post-queue-status-badge.failed { background: #FED7D7; color: #9B2C2C; }

/* ─── Queue Badge (toolbar) ─── */
.queue-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--border, #ddd);
    border-radius: 14px;
    font-size: 11px;
    font-family: var(--font);
    font-weight: 500;
    background: none;
    cursor: pointer;
    color: var(--text-secondary);
    margin-left: 8px;
}
.queue-badge:hover { border-color: var(--pink); color: var(--pink); }
.queue-badge-count {
    background: var(--pink);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 14px;
    text-align: center;
}

/* ─── Character Context Menu ─── */
.char-context-menu {
    position: fixed;
    z-index: 2000;
    background: var(--bg, #fff);
    border: 1px solid var(--separator);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    padding: 4px;
    min-width: 180px;
    backdrop-filter: blur(20px);
}
.char-context-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-family: var(--font);
    cursor: pointer;
    color: var(--text-primary);
}
.char-context-item:hover { background: var(--pink-bg); color: var(--pink); }
.char-context-item svg { flex-shrink: 0; }
.char-context-danger { color: #FF3B30; }
.char-context-danger:hover { background: rgba(255,59,48,.08); color: #FF3B30; }
.char-context-separator {
    height: 1px;
    background: var(--separator);
    margin: 3px 8px;
}

/* ─── Sidebar kebab menu ─── */
.sidebar-char-kebab {
    position: absolute;
    right: 4px;
    top: 2px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    color: var(--text-tertiary);
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
}
.sidebar-char { position: relative; }
.sidebar-char:hover .sidebar-char-kebab { opacity: 1; }
.sidebar-char-kebab:hover { background: var(--pink-bg); color: var(--pink); }