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

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    /* 100vh on mobile includes the area under the browser toolbar, so the flex
       column ends up taller than the visible viewport and either the bottom tab
       bar or the iframe's own header is pushed off-screen. 100dvh tracks the
       *visible* viewport (toolbar shown/hidden), keeping both the bottom bar and
       the framed editor's header on screen. 100vh stays as the fallback for
       engines without dvh. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── BOTTOM TABS BAR ── */
#topbar {
    /* --bar-h was referenced but never defined, so the bar collapsed to content
       height. Give it a real default while still honoring an override. */
    height: var(--bar-h, 48px);
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    order: 2;
}

/* ── TABS STRIP ── */
#tabs-track {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    position: relative;
}

    #tabs-track::before,
    #tabs-track::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 28px;
        pointer-events: none;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.2s;
    }

    #tabs-track::before {
        left: 0;
        background: linear-gradient(to right, var(--surface), transparent);
    }

    #tabs-track::after {
        right: 0;
        background: linear-gradient(to left, var(--surface), transparent);
    }

    #tabs-track.fade-left::before { opacity: 1; }
    #tabs-track.fade-right::after { opacity: 1; }

.tabs-arrow {
    width: 24px;
    height: 30px;
    background: var(--surface2);
    border: 1px solid var(--white-alpha-12);
    border-radius: 5px;
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
    z-index: 3;
    line-height: 1;
}

    .tabs-arrow:hover {
        color: var(--accent);
        border-color: var(--accent);
        background: var(--gold-alpha-08);
    }

    .tabs-arrow.visible { display: flex; }

#tabs-scroll {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    scrollbar-width: none;
    min-width: 0;
}

    #tabs-scroll::-webkit-scrollbar { display: none; }

#tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    min-width: max-content;
}

.tab {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 0 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    /* No max-width: show the full case label ({plaintiff} v. {defendant} - {id}).
       The tab bar (#tabs-scroll) scrolls horizontally when tabs overflow, and the
       ‹ › arrows page through them, so labels are never truncated. */
    min-width: 90px;
    flex-shrink: 0;
    position: relative;
    user-select: none;
}

    .tab:hover {
        background: var(--navy-hover);
        border-color: var(--white-alpha-20);
    }

    .tab.active {
        background: linear-gradient(135deg, var(--navy-hover) 0%, var(--navy-deep) 100%);
        border-color: var(--accent);
        box-shadow: 0 0 12px var(--gold-alpha-25), inset 0 -1px 0 var(--gold-alpha-20);
    }

    .tab:active { transform: scale(0.97); }

.tab-favicon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    background: var(--accent);
    color: white;
    font-weight: 700;
}

.tab-label {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    white-space: nowrap;
    /* Full label shown; the tab bar scrolls rather than truncating the text. */
    letter-spacing: 0.02em;
}

    .tab.active .tab-label { color: var(--text); }

.tab-close {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-dim);
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s;
    line-height: 1;
}

    .tab-close:hover {
        background: var(--red-pink-alpha-20);
        color: var(--red-bright);
    }

/* ── ADD TAB BUTTON ── */
#btn-add {
    height: 32px;
    width: 32px;
    border-radius: 6px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
    line-height: 1;
}

    #btn-add:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--gold-alpha-10);
    }

/* ── BOTTOM BAR ── */
/* ── CONTENT AREA ── */
#content {
    flex: 1;
    position: relative;
    overflow: hidden;
    order: 1;
}

.page-frame {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
}

    .page-frame.active {
        display: flex;
    }


iframe {
    flex: 1;
    border: none;
    background: var(--white);
    display: block;
}

/* ── BLOCKED NOTICE ── */
.blocked-notice {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--bg);
    color: var(--text-dim);
    text-align: center;
    padding: 40px;
}

.blocked-icon {
    font-size: 48px;
    opacity: 0.4;
}

.blocked-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
}

.blocked-msg {
    font-size: 12px;
    line-height: 1.7;
    max-width: 480px;
}

.blocked-url {
    font-size: 11px;
    color: var(--accent);
    word-break: break-all;
    background: var(--surface2);
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.open-external {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font-mono-jetbrains);
    font-size: 11px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s;
}

    .open-external:hover {
        border-color: var(--accent);
        color: var(--accent);
    }

/* ── EMPTY STATE ── */
#empty-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background: var(--bg);
}

    #empty-state .big-icon {
        font-size: 56px;
        opacity: 0.15;
    }

    #empty-state h2 {
        font-family: var(--font-heading);
        font-size: 24px;
        font-weight: 400;
        color: var(--text);
        opacity: 0.5;
    }

    #empty-state p {
        font-size: 12px;
        color: var(--text-dim);
    }

#empty-btn-add {
    height: 38px;
    padding: 0 20px;
    background: var(--accent);
    border: none;
    border-radius: 7px;
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: opacity 0.15s;
    margin-top: 4px;
}

    #empty-btn-add:hover {
        opacity: 0.85;
    }

/* ── MODAL ── */
#modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--black-alpha-70);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    backdrop-filter: blur(4px);
}

    #modal-overlay.open {
        display: flex;
    }

#modal {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 28px;
    width: 480px;
    max-width: 90vw;
    box-shadow: 0 24px 80px var(--black-alpha-50);
    animation: modal-in 0.18s ease;
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

#modal h3 {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 6px;
}

#modal p {
    font-size: 11px;
    color: var(--text-dim);
    margin-bottom: 20px;
    line-height: 1.6;
}

#modal label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 6px;
}

#modal-url {
    width: 100%;
    height: 36px;
    background: var(--white-alpha-07);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 12px;
    padding: 0 12px;
    outline: none;
    margin-bottom: 16px;
    transition: border-color 0.15s;
}

    #modal-url:focus {
        border-color: var(--accent);
    }

#modal-name {
    width: 100%;
    height: 36px;
    background: var(--white-alpha-07);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 12px;
    padding: 0 12px;
    outline: none;
    margin-bottom: 20px;
    transition: border-color 0.15s;
}

    #modal-name:focus {
        border-color: var(--accent);
    }

.modal-row {
    display: flex;
    gap: 10px;
}

.modal-btn {
    flex: 1;
    height: 36px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: opacity 0.15s;
}

    .modal-btn.cancel {
        background: var(--white-alpha-07);
        border: 1px solid var(--border-light);
        color: var(--text-dim);
    }

        .modal-btn.cancel:hover {
            color: var(--text);
        }

    .modal-btn.confirm {
        background: var(--accent);
        border: none;
        color: var(--navy);
    }

        .modal-btn.confirm:hover {
            opacity: 0.85;
        }

/* Quick links */
.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.quick-chip {
    height: 24px;
    padding: 0 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--font-mono-jetbrains);
    font-size: 10px;
    color: var(--text-dim);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}

    .quick-chip:hover {
        border-color: var(--accent);
        color: var(--accent);
        background: var(--gold-alpha-10);
    }

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent2);
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

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

    50% {
        opacity: 0.3;
    }
}

.tab.loading .tab-favicon {
    background: var(--gold);
}

/* ── Small screens (phones + tablets): move the tab/button bar to the TOP ──────
   The bar's position is controlled purely by flex `order` (content=1, bar=2),
   so flipping the orders moves the bar above the content. It stays pinned (the
   bar is flex-shrink:0 and #content is the only scroll area), so content scrolls
   under it. The divider flips from border-top to border-bottom to read correctly
   now that the bar sits on top. Desktop (>1024px) is unchanged. */
@media (max-width: 1024px) {
  #topbar {
    order: 1;
    border-top: none;
    border-bottom: 1px solid var(--border);
  }
  #content {
    order: 2;
  }
}