/* ─────────────────────────────────────────────
   Stream Director – UI Design System
───────────────────────────────────────────── */

:root {
    --bg:       #0b0e14;
    --panel:    #151a24;
    --line:     #293142;
    --text:     #f3f6fb;
    --muted:    #9aa7ba;
    --accent:   #e53737;
    --accent2:  #5b8cff;
    --green:    #61d69b;
    --gold:     #ffd568;
    --radius:   14px;
}

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

/* ── Header ─────────────────────────────── */
header {
    height: 60px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4vw;
    background: #0e121a;
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    font-weight: 900;
    letter-spacing: .16em;
    font-size: .9rem;
    color: white;
    text-decoration: none;
}

nav { display: flex; gap: 20px; align-items: center; }

nav a, .link-button {
    color: var(--muted);
    text-decoration: none;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    font-size: .9rem;
}

nav a:hover, .link-button:hover { color: var(--text); }

/* ── Main ───────────────────────────────── */
main { padding: 28px 4vw; }

/* ── Typography ─────────────────────────── */
h1 { font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.1; }
h2 { font-size: 1rem; font-weight: 700; }
h3 { font-size: .9rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

.eyebrow {
    color: var(--accent);
    letter-spacing: .18em;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.large  { font-size: 1.4rem; font-weight: 700; }
.muted  { color: var(--muted); }
.error  { color: #ff7584; }

/* ── Buttons ────────────────────────────── */
button, .button {
    border: 0;
    border-radius: 10px;
    padding: 11px 18px;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: opacity .15s;
}

button:disabled { opacity: .45; cursor: default; }
button.working  { opacity: .6; }

.primary   { background: var(--accent);  color: white; }
.secondary { background: #252d3d; color: var(--text); }
.danger    { background: #3d1a1a; color: #ff8080; }

.block-btn { width: 100%; justify-content: center; margin-bottom: 8px; }

/* ── Panels / Grid ──────────────────────── */
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.section-heading span, .queue-badge {
    background: #252d3d;
    border-radius: 99px;
    padding: 3px 10px;
    font-size: .8rem;
    font-weight: 700;
}

/* ── Director top bar ───────────────────── */
.director-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
}

.director-title h1 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }

.director-top-right { display: flex; gap: 10px; align-items: center; }

.live-pill {
    padding: 8px 14px;
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    background: #4a1b22;
    color: #ff7584;
}
.live-pill.connected    { background: #0e3124; color: #61d69b; }
.live-pill.connecting   { background: #2b2a18; color: #ffd568; }
.live-pill.disconnected { background: #4a1b22; color: #ff7584; }

/* ── Director three-column layout ──────── */
/* Desktop:  [controls 280px] [inbox 1fr] [queue 280px]  */
/* Tablet landscape: controls collapses to icon strip     */
/* Tablet portrait / mobile: single column stack          */
.director-grid {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    grid-template-areas: "controls inbox queue";
    gap: 12px;
    align-items: start;
}

.controls-panel { grid-area: controls; }
.inbox-panel    { grid-area: inbox; }
.queue-column   { grid-area: queue; }

/* ── Controls panel (left) ──────────────── */
.controls-panel { display: flex; flex-direction: column; gap: 0; }

.controls-section {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.controls-section:last-child { border-bottom: 0; margin-bottom: 0; }

label {
    display: block;
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 6px;
    margin-top: 10px;
}

input, textarea, select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #0d1119;
    color: var(--text);
    font: inherit;
    font-size: .9rem;
}

textarea { resize: vertical; min-height: 72px; }

/* ── On Air card (in queue panel) ───────── */
.queue-panel { padding-top: 4px; }

.onair-card {
    background: linear-gradient(135deg, #1a0e0e, #2a1414);
    border: 1px solid #5a2020;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
}

.onair-label {
    color: var(--accent);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .18em;
    margin-bottom: 6px;
}

.onair-author { font-weight: 800; font-size: .95rem; }
.onair-body   { color: var(--muted); font-size: .88rem; margin-top: 3px; }
.onair-empty  { color: var(--muted); font-size: .88rem; margin-bottom: 10px; }

.queue-divider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 8px;
}

.queue-empty { color: var(--muted); font-size: .88rem; padding: 8px 0; }

/* Queue items */
.queue-item {
    border-top: 1px solid var(--line);
    padding: 10px 0;
    font-size: .88rem;
}

.queue-item strong { display: block; margin-bottom: 2px; }

.queue-item p { color: var(--muted); margin-bottom: 8px; }

.queue-item-actions { display: flex; gap: 8px; }

.queue-item-actions button { padding: 6px 12px; font-size: .82rem; }

/* ── Inbox panel (right) ─────────────────── */
.inbox-panel { min-width: 0; }

/* ── Filter pills ───────────────────────── */
.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.pill {
    background: #1e2535;
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: 7px 14px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.pill.active, .pill:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* ── Search bar ─────────────────────────── */
.inbox-tools { margin-bottom: 12px; }

/* ── Message cards ──────────────────────── */
#messages { overflow-y: auto; max-height: calc(100vh - 260px); }

.message {
    display: flex;
    gap: 12px;
    padding: 13px 10px;
    border-top: 1px solid var(--line);
    transition: background .15s;
}

.message:hover { background: rgba(255,255,255,.025); }

.message.on-air  { background: rgba(229,55,55,.08); border-color: var(--accent); }
.message.answered { opacity: .6; }
.message.queued   { opacity: .55; }

.message-question { border-left: 3px solid var(--accent2); padding-left: 7px; }
.message-paid     { border-left: 3px solid var(--gold);    padding-left: 7px; }
.message-member   { border-left: 3px solid var(--green);   padding-left: 7px; }

/* Avatars */
.avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #303b50;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 17px;
    overflow: hidden;
}

/* Message body */
.message-body { flex: 1; min-width: 0; }

.message-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.message-body p {
    color: #d8e0ee;
    margin: 4px 0 8px;
    font-size: .92rem;
    line-height: 1.45;
    word-break: break-word;
}

/* Badges / tags */
.badge, .member, .moderator, .question-tag, .paid {
    font-size: .65rem;
    font-weight: 800;
    border-radius: 99px;
    padding: 2px 7px;
    letter-spacing: .05em;
    white-space: nowrap;
}

.badge       { background: #1e2535; color: var(--muted); border: 1px solid var(--line); }
.member      { background: #0e2d1e; color: var(--green);  border: 1px solid #1e5038; }
.moderator   { background: #1a1a3d; color: #8899ff;       border: 1px solid #333878; }
.question-tag { background: #142040; color: var(--accent2); border: 1px solid #2a3f70; }
.paid        { background: #2d2500; color: var(--gold);   border: 1px solid #5a4a00; }

/* Action buttons in message cards */
.message-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.message-actions button {
    padding: 7px 12px;
    font-size: .82rem;
    border-radius: 8px;
}

/* ── Director error bar ─────────────────── */
.director-error {
    background: #3d1414;
    border: 1px solid #6b2020;
    color: #ffaaaa;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: .9rem;
}

/* ── Home / dashboard ───────────────────── */
.hero { padding: 52px 0; max-width: 860px; }
.hero h1 { margin: .2em 0; }
.hero p  { font-size: 1.1rem; color: var(--muted); max-width: 680px; margin: 12px 0 24px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

.status { color: var(--green); }

.panel code {
    display: block;
    word-break: break-all;
    background: #090b10;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: .85rem;
    margin-top: 8px;
}

/* ── Login ──────────────────────────────── */
.login-card {
    max-width: 420px;
    margin: 8vh auto;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 32px;
    border-radius: 20px;
}

.login-card label { display: block; margin: 16px 0 0; color: var(--muted); }

/* ── YouTube page ───────────────────────── */
.grid.channel-grid { margin-top: 16px; }

/* ── Responsive ─────────────────────────── */
/* Tablet landscape — collapse to 2 cols, queue moves below inbox */
@media (max-width: 1100px) {
    .director-grid {
        grid-template-columns: 260px 1fr;
        grid-template-areas:
            "controls inbox"
            "controls queue";
    }
    .queue-column { grid-area: queue; }
}

/* Tablet portrait — single column */
@media (max-width: 760px) {
    .director-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "inbox"
            "controls"
            "queue";
    }
    #messages { max-height: 55vh; }
    .director-title h1 { font-size: 1.3rem; }
}

@media (max-width: 600px) {
    main { padding: 16px 12px; }
    header nav a { display: none; }
    .director-top { flex-wrap: wrap; }
    .message-actions button { padding: 9px 13px; font-size: .85rem; }
    .pill { padding: 8px 14px; font-size: .85rem; }
}

/* ── Utilities ──────────────────────────── */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ═══════════════════════════════════════════
   Auth pages
═══════════════════════════════════════════ */

.auth-card {
    max-width: 440px;
    margin: 7vh auto;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 36px 32px;
    border-radius: 20px;
}

.auth-brand {
    font-weight: 900;
    letter-spacing: .18em;
    font-size: .78rem;
    color: var(--accent);
    margin-bottom: 16px;
}

.auth-card h1 { font-size: 1.8rem; margin-bottom: 4px; }
.auth-sub     { color: var(--muted); margin-bottom: 24px; font-size: .95rem; }
.auth-footer  { color: var(--muted); font-size: .88rem; margin-top: 20px; text-align: center; }
.auth-footer a { color: var(--accent2); text-decoration: none; }

.hint-inline { color: var(--muted); font-size: .8rem; font-weight: 400; }

.auth-card label { display: block; margin-bottom: 14px; }
.auth-card label input { margin-top: 5px; }

.error-box {
    background: #3d1414;
    border: 1px solid #6b2020;
    color: #ffaaaa;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: .88rem;
}
.error-box:empty { display: none; }

/* ═══════════════════════════════════════════
   Overlay Designer
═══════════════════════════════════════════ */

.designer-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 0;
    min-height: calc(100vh - 60px);
    margin: -28px -4vw;  /* bleed to edges */
    overflow: hidden;    /* prevent canvas from escaping grid */
}

.designer-sidebar {
    background: #0e121a;
    border-right: 1px solid var(--line);
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 60px);
    position: sticky;
    top: 60px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Ensure sidebar never shrinks and canvas never overflows into it */
    min-width: 0;
    width: 360px;
}

.designer-header { margin-bottom: 4px; }

.back-link {
    color: var(--muted);
    text-decoration: none;
    font-size: .85rem;
    display: block;
    margin-bottom: 8px;
}
.back-link:hover { color: var(--text); }

.designer-header h1 { font-size: 1.4rem; }

/* Sidebar panels */
.designer-sidebar .panel {
    padding: 14px;
    border-radius: 12px;
}

.designer-sidebar h3 {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    margin-bottom: 10px;
}

/* Fields */
.field {
    margin-bottom: 12px;
}

.field label {
    display: block;
    font-size: .83rem;
    color: var(--muted);
    margin-bottom: 5px;
}

.field input, .field select, .field textarea {
    width: 100%;
    margin: 0;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-row input[type="checkbox"] {
    width: auto;
    margin: 0;
    accent-color: var(--accent);
}

.check-row label { margin: 0; color: var(--text); }

/* Colour inputs */
.colour-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.colour-input {
    display: flex;
    gap: 8px;
    align-items: center;
}

.colour-input input[type="color"] {
    width: 40px;
    height: 36px;
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    border: 1px solid var(--line);
    background: #0d1119;
}

.colour-text {
    flex: 1;
    font-family: monospace;
    font-size: .85rem;
}

/* Range sliders */
input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    height: 20px;
}

.range-value {
    color: var(--accent);
    font-weight: 700;
    font-size: .85rem;
}

/* Template grid */
.template-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.template-option {
    cursor: pointer;
    border: 2px solid var(--line);
    border-radius: 10px;
    padding: 8px 6px;
    text-align: center;
    font-size: .75rem;
    color: var(--muted);
    transition: border-color .15s, background .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.template-option input[type="radio"] { display: none; }

.template-option.selected,
.template-option:has(input:checked) {
    border-color: var(--accent);
    background: rgba(229,55,55,.1);
    color: var(--text);
}

.template-icon {
    font-size: 1.4rem;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Theme chips */
.theme-list { display: flex; flex-direction: column; gap: 6px; }

.theme-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    background: #1a2030;
    border: 1px solid var(--line);
    color: var(--muted);
    text-decoration: none;
    font-size: .88rem;
    transition: background .15s, border-color .15s;
}

.theme-chip.active { border-color: var(--accent2); color: var(--text); background: #162030; }
.theme-chip.new-chip { color: var(--accent2); border-style: dashed; }
.theme-chip:hover { background: #222d40; }

.designer-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

/* ── Right: preview area ── */
.designer-preview-area {
    background: #080b12;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;   /* allow flex child to shrink inside grid cell */
}

.preview-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    background: #0b0e16;
}

.preview-canvas-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: repeating-linear-gradient(
        45deg,
        #0a0d14,
        #0a0d14 10px,
        #0c1018 10px,
        #0c1018 20px
    );
}

/* Sized by JS to the VISUAL (scaled) dimensions so layout
   space matches what the eye sees — prevents overflow into sidebar. */
.preview-canvas-outer {
    position: relative;
    flex: none;
}

/* The inner canvas is set to the full canvas resolution,
   then scaled down via transform. transform-origin top left
   so the scale anchors to the outer container's top-left corner. */
.preview-canvas {
    background: #1a2535;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 40px rgba(0,0,0,.6);
    transform-origin: top left;
}

.preview-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    border-top: 1px solid var(--line);
    font-size: .82rem;
    color: var(--muted);
    background: #0b0e16;
}

.preview-info code {
    font-size: .78rem;
    background: #0d1119;
    padding: 3px 8px;
    border-radius: 6px;
}

.overlay-preview {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 26px;
}

.overlay-preview.hidden { display: none; }

/* ── Responsive ── */
@media (max-width: 1100px) {
    .designer-layout {
        grid-template-columns: 300px 1fr;
    }
    .designer-sidebar { width: 300px; }
}

@media (max-width: 800px) {
    .designer-layout {
        grid-template-columns: 1fr;
    }

    .designer-sidebar {
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .designer-preview-area {
        min-height: 50vh;
    }
}

/* ── Position control extras ── */
.range-with-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.range-with-value input[type="range"] {
    flex: 1;
}

.range-with-value .range-value {
    min-width: 28px;
    text-align: right;
}

.pos-number-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.pos-px-input {
    width: 100%;
    font-size: .82rem;
    padding: 7px 10px;
}

.field-hint {
    color: var(--muted);
    font-size: .78rem;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Make the overlay preview draggable cursor */
.overlay-preview {
    cursor: grab;
    user-select: none;
}

/* ── Queue item expanded controls ── */
.queue-item {
    border-top: 1px solid var(--line);
    padding: 10px 0;
    font-size: .88rem;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.queue-pos {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 700;
    min-width: 18px;
    padding-top: 2px;
}

.queue-item-text { flex: 1; min-width: 0; }
.queue-item-text strong { display: block; margin-bottom: 2px; }
.queue-item-text p { color: var(--muted); margin-bottom: 6px; font-size: .85rem; }

.queue-item-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
}

.queue-reorder {
    display: flex;
    gap: 3px;
}

.queue-reorder button {
    padding: 3px 7px;
    font-size: .78rem;
    border-radius: 6px;
}

.queue-item-actions > button {
    padding: 5px 10px;
    font-size: .8rem;
    width: 100%;
    text-align: center;
}

.queue-clear-btn {
    padding: 4px 10px;
    font-size: .75rem;
    border-radius: 6px;
}

/* ── History panel ── */
.history-panel {
    padding: 4px 0;
}

/* ── Auto-advance toggle ── */
#autoAdvance {
    width: auto;
    margin: 0;
    accent-color: var(--accent);
}

/* ── Director top bar responsive ── */
@media (max-width: 700px) {
    .director-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .director-top-right {
        flex-wrap: wrap;
    }
    .director-title h1 { font-size: 1.3rem; }
}

/* Portrait tablet (max-width: 900px already handled, but tighten controls) */
@media (max-width: 900px) {
    .controls-section button.block-btn { margin-bottom: 6px; }
    .filter-pills { gap: 6px; }
    .pill { padding: 7px 11px; font-size: .78rem; }
}