:root {
    --bg-body: #f3f4f6;
    --bg-sidebar: #ffffff;
    --bg-panel: #ffffff;
    --accent: rgb(249, 189, 17);
    --accent-dim: rgba(249, 189, 17, 0.2);
    --danger: #ef4444;
    --text-main: #111827;
    --text-muted: #6b7280;
    --text-on-accent: #282828;
    --border-subtle: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-panel: -4px 0 25px rgba(0, 0, 0, 0.05);

    --header-h: 70px;
    --sidebar-w: 280px;
    --panel-w: 400px;
    --radius-pill: 50px;
    --radius-card: 20px;
}

/* System-font stack: each platform renders in its native UI font (SF Pro
 * on macOS, Segoe UI on Windows, Roboto on Android, system-ui everywhere
 * else). Visually near-identical to Inter on the platforms most
 * curators use. The CDN dependency on Google Fonts was removed to
 * tighten CSP and keep the deploy fully offline-capable. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 system-ui, "Helvetica Neue", Arial, sans-serif;
    outline: none;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.advanced-field,
.grid-3.advanced-field,
.form-label.advanced-field {
    display: none;
}

body.show-advanced .advanced-field {
    display: block;
    position: relative;
    animation: slideIn 0.3s ease;
}

body.show-advanced .grid-2.advanced-field {
    display: grid;
}

body.show-advanced .grid-3.advanced-field {
    display: grid;
}

body.show-advanced .advanced-field::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 5px;
    bottom: 5px;
    width: 3px;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0.7;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

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

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

header {
    height: var(--header-h);
    background-color: var(--bg-sidebar);

    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 110;
    box-shadow: var(--shadow-sm);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text-main);
    line-height: 1;
    text-decoration: none;
    user-select: none;
}

/* Flat solid yellow dot. No gradient, no shadow. */
.brand-mark {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.brand-text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.brand-tagline {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-muted, #6b7280);
    text-transform: lowercase;
    line-height: 1.1;
}

.brand-name {
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-main);
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}

/* Row that holds the name + the ALPHA badge. Inline-flex so the badge
   sits cleanly on the same line, vertically centered to cap-height. */
.brand-name-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ALPHA stage bubble. Distinct from the wordmark — small, accent-coloured,
   rounded pill. Used in the brand lockup and (smaller variant) anywhere we
   want to flag pre-release status. */
.brand-stage {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--text-on-accent);
    background: var(--accent);
    border-radius: 999px;
    /* Hairline shadow so the pill reads as an applied stamp, not flat fill. */
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

/* Larger lockup, used on the auth screens. */
.brand-lg { gap: 14px; }
.brand-lg .brand-mark { width: 28px; height: 28px; }
.brand-lg .brand-text { gap: 3px; }
.brand-lg .brand-tagline { font-size: 0.78rem; }
.brand-lg .brand-name { font-size: 1.1rem; letter-spacing: 0.03em; }
.brand-lg .brand-stage { font-size: 0.66rem; padding: 3px 8px; }

.header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}
.header-left .brand { margin-right: 26px; }

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

/* Vertical divider between the test-action buttons and the user pill. */
.header-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: var(--border-subtle);
    margin: 0 2px;
}

.version-dropdown {
    position: relative;
}

.version-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-body);
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}

.version-btn:hover {
    border-color: #d1d5db;
    background: #e5e7eb;
}

.version-menu {
    position: absolute;
    top: 110%;
    left: 0;
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    min-width: 220px;
    max-width: 320px;
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
}

.version-menu.open {
    display: flex;
}

.v-item {
    padding: 10px 16px;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
}

.v-item:hover {
    background: var(--bg-body);
    color: var(--text-main);
}

.v-item.active {
    color: var(--accent);
    font-weight: 600;
}

/* ============================================================
   Context pill — one elegant pill that holds both the project
   selector and the character selector. Two segments separated
   by a thin vertical divider; clicking anywhere opens a single
   dropdown with two labelled sections.
   ============================================================ */
.context-dropdown {
    /* Sits in the header where the old two pills used to live. */
    position: relative;
}
.context-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 6px 14px 6px 12px;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
    min-height: 36px;
}
.context-pill:hover,
.context-pill:focus-visible {
    background: #fff;
    border-color: #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    outline: none;
}
.ctx-segment {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}
.ctx-label {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ctx-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.ctx-icon {
    color: var(--text-muted);
    font-size: 1rem;
    flex-shrink: 0;
}
.ctx-badge {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.7rem !important;
    flex-shrink: 0;
}
.ctx-divider {
    width: 1px;
    height: 18px;
    background: var(--border-subtle);
    flex-shrink: 0;
}
.ctx-caret {
    color: var(--text-muted);
    margin-left: 2px;
    font-size: 0.85rem;
    transition: transform 0.15s;
}
.context-dropdown .version-menu.open + .context-pill .ctx-caret,
.context-dropdown:has(.version-menu.open) .ctx-caret {
    transform: rotate(180deg);
}

/* The unified menu sits below the pill. Wider than the legacy
   single-purpose menus and clearly sectioned. */
.context-menu {
    width: 280px;
    padding: 6px 0;
    /* Override .version-menu's narrow 160px width */
    max-height: calc(100vh - var(--header-h) - 40px);
    overflow-y: auto;
}
.ctx-menu-section + .ctx-menu-section {
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
    padding-top: 4px;
}
.ctx-menu-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 700;
    padding: 8px 16px 4px;
}
.ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.88rem;
    color: var(--text-main);
    font-family: inherit;
    text-decoration: none;
    line-height: 1.3;
}
.ctx-menu-item:hover {
    background: var(--bg-body);
}
.ctx-menu-item.is-active {
    color: var(--text-main);
    font-weight: 600;
    background: rgba(249, 189, 17, 0.08);
}
.ctx-menu-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ctx-menu-check {
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
}
.ctx-menu-link {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 4px;
}
.ctx-menu-link:hover { color: var(--text-main); }

/* Forms inside the menu lay out as a normal block — children stack
   one per row. We previously used `display: contents` here but it
   suppresses form submission in some browser configurations, breaking
   the character/project dropdown. A plain block form behaves the same
   visually because the buttons inside are already 100% wide flex items. */
.context-menu form,
.lang-menu form {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

/* ============================================================
   Language pill — sibling of the context pill on the left side of
   the header. Compact, shows the flag + name; "all languages"
   when no filter is active. Menu shows every project language
   with native name as a secondary line.
   ============================================================ */
.lang-dropdown { position: relative; }
.lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
    min-height: 36px;
}
.lang-pill:hover,
.lang-pill:focus-visible {
    background: #fff;
    border-color: #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    outline: none;
}
.lang-flag {
    font-size: 1.05rem;
    line-height: 1;
    /* Emoji flags carry their own color; don't tint via currentColor. */
    flex-shrink: 0;
}

/* Dropdown menu — same look as the context menu but anchored under
   its own pill. */
.lang-menu {
    width: 240px;
    padding: 6px 0;
    max-height: calc(100vh - var(--header-h) - 40px);
    overflow-y: auto;
}
.lang-menu .ctx-menu-item .lang-flag {
    font-size: 1.05rem;
    flex-shrink: 0;
}
/* Secondary text inside a menu item — used for the native-language name. */
.ctx-menu-sub {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 400;
    margin-left: 6px;
}

/* ============================================================
   User pill — header-right twin of the context pill on the left.
   Same visual family: rounded pill, gray fill, soft hover, caret.
   The menu drops down to the right; the avatar circle holds the
   first letter of the user's display name.
   ============================================================ */
.user-dropdown { position: relative; }
.user-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 4px 12px 4px 4px;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    user-select: none;
    min-height: 36px;
}
.user-pill:hover,
.user-pill:focus-visible {
    background: #fff;
    border-color: #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    outline: none;
}

/* Circular avatar with the user's first initial. */
.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--text-main);
    color: white;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0;
}
.user-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: 1rem;
}

/* The dropdown panel anchored to the right edge of the pill. */
.user-menu {
    /* .version-menu sets position/background/shadow already; widen the
       panel and anchor it to the right so it doesn't overflow off
       the viewport on the right side. */
    width: 260px;
    left: auto;
    right: 0;
    padding: 0 0 6px 0;
}

/* Identity card at the top of the menu — avatar + name + username + role. */
.user-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-body);
    border-radius: 12px 12px 0 0;
}
.user-menu-identity { min-width: 0; flex: 1; }
.user-menu-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-menu-username {
    font-family: monospace;
    font-size: 0.76rem;
    color: var(--text-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-role-badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: #e5e7eb;
    color: var(--text-muted);
}
.user-role-badge.user-role-super {
    background: #fef3c7;
    color: #92400e;
}

.mode-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-body);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
}

.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d1d5db;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
    background-color: var(--accent);
}

input:checked+.slider:before {
    transform: translateX(16px);
}

/* Header icon buttons — circular twins of the context/user pills.
   Same height (36 px), same gray fill + hover transition so the whole
   top bar reads as one consistent control row. */
.icon-btn {
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
    font-size: 1rem;
    flex-shrink: 0;
}

.icon-btn > .ph,
.icon-btn > i {
    font-size: 1.1rem !important;
    line-height: 1;
}

.icon-btn:hover,
.icon-btn:focus-visible {
    background: #fff;
    border-color: #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    color: var(--text-main);
    outline: none;
}

.icon-btn.active,
.icon-btn.is-active {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(249, 189, 17, 0.35);
}

.main-container {
    display: flex;
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Main app nav rail.
   Scoped to `aside.sidebar` — a bare `aside` selector here would also
   style the documentation manual's TOC aside and the character-edit
   summary aside (both legitimate <aside> elements unrelated to the
   nav), giving them width: 280px, display: flex, the sidebar
   background, and overflow: hidden — which produced the
   "TOC overlapping body content" bug. Keep this tight. */
aside.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-subtle);
    /* The sidebar lives inside .main-container, which fills the space
       below the header. min-height:0 lets the inner scroll region take
       only what's left; otherwise the nav list would push past the
       viewport. */
    min-height: 0;
    overflow: hidden;
    transition: width 0.18s ease;
}

/* Inner scroll region — nav items live here. Padding lives on the
   scroller so the collapsed-state padding can be different without
   reflow on the outer aside. */
.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px 15px;
    /* Thin, restrained scrollbar — visible on hover only. */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.sidebar:hover .sidebar-scroll {
    scrollbar-color: var(--border-subtle) transparent;
}
.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}
.sidebar:hover .sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
}

/* Collapse toggle — pinned to the bottom of the sidebar so it never
   competes for vertical space with the nav scroll region. */
.sidebar-toggle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 24px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
}
.sidebar-toggle:hover {
    background: var(--bg-body);
    color: var(--text-main);
}
.sidebar-toggle-icon {
    font-size: 1.05rem;
    transition: transform 0.2s ease;
}
.sidebar-toggle-label {
    flex: 1;
    text-align: left;
}

/* ----- Collapsed state -----
   Every selector below is scoped to `aside.sidebar` (or its descendants)
   so the collapsed-nav state ONLY affects the main app nav. Previously
   `.sidebar-collapsed aside { width: 68px }` matched every <aside> on
   the page — the documentation manual TOC and the character-edit
   summary card both shrank along with the nav, which is not what we
   want. Scope these tightly. */
.sidebar-collapsed aside.sidebar {
    width: 68px;
}
.sidebar-collapsed aside.sidebar .sidebar-scroll {
    padding: 24px 8px;
}
.sidebar-collapsed aside.sidebar .menu-label {
    /* Section titles don't make sense in a 68px rail; hide them but
       keep the spacing they contributed so groups remain visually
       distinct. */
    height: 1px;
    margin: 18px 0 8px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    background: var(--border-subtle);
    border-radius: 1px;
    letter-spacing: 0;
}
.sidebar-collapsed aside.sidebar .menu-label:first-child {
    margin-top: 0;
    height: 0;
    background: transparent;
}
.sidebar-collapsed aside.sidebar .nav-item {
    justify-content: center;
    padding: 12px 0;
    gap: 0;
    /* Use the pill background only on a square footprint so the
       active state stays balanced. */
    margin: 0 4px 4px;
}
.sidebar-collapsed aside.sidebar .nav-label {
    display: none;
}
.sidebar-collapsed aside.sidebar .nav-item i {
    font-size: 1.2rem;
}
.sidebar-collapsed aside.sidebar .sidebar-toggle {
    justify-content: center;
    padding: 12px 0;
}
.sidebar-collapsed aside.sidebar .sidebar-toggle-label {
    display: none;
}
.sidebar-collapsed aside.sidebar .sidebar-toggle-icon {
    transform: rotate(180deg);
}

/* Tooltip on hover in collapsed state.
   The tooltip is a floating element appended to <body>, positioned via
   JS (shell.js) using getBoundingClientRect on hover. This escapes the
   sidebar's overflow clipping, which a CSS-only `::after` cannot. */
.sidebar-floating-tooltip {
    position: fixed;
    background: var(--text-main);
    color: white;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.12s ease;
    z-index: 2000;
    box-shadow: var(--shadow-sm);
}
.sidebar-floating-tooltip.is-visible { opacity: 1; }

.menu-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
    margin-bottom: 12px;
    padding-left: 20px;
    font-weight: 600;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    gap: 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 4px;
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-item:hover {
    background-color: var(--bg-body);
    color: var(--text-main);
}

.nav-item.active {
    background-color: var(--accent);
    color: var(--text-on-accent);
    font-weight: 600;
}

/* The nav-label takes the remaining width so the TBA pill anchors right. */
.nav-item .nav-label { flex: 1; min-width: 0; }

/* "TBA" pill on nav items whose destination isn't fully implemented yet.
   Muted by default; on the active item the colors invert so it still
   reads against the accent background. Hidden when the sidebar is
   collapsed (only the icon shows in that mode). */
.nav-tba {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--bg-body);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    line-height: 1;
}
.nav-item:hover .nav-tba {
    background: white;
    color: var(--text-main);
}
.nav-item.active .nav-tba {
    background: rgba(0, 0, 0, 0.12);
    color: var(--text-on-accent);
    border-color: rgba(0, 0, 0, 0.12);
}
.sidebar-collapsed aside.sidebar .nav-tba { display: none; }

main {
    flex: 1;
    padding: 40px 60px;
    overflow-y: auto;
    position: relative;
}

/* Pages that declare `data-auto-open-panel="chat"` / `"audio"` on
   <body> have a side-panel docked open on the right at all times.
   Reserve that horizontal slice on <main> so the centred .page-content
   doesn't slide under the panel. (The panel is `position: fixed` over
   the viewport edge, so without this padding nothing pushes the
   content out of its way.) Floor at 24px on the actual page padding
   so the content has breathing room from the panel's left edge. */
body[data-auto-open-panel] main {
    padding-right: calc(var(--panel-w) + 24px);
}

h1 {
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

p.subtitle {
    color: var(--text-muted);
    margin-top: 5px;
    font-size: 0.95rem;
    margin-bottom: 30px;
}

.page-content {
    display: none;
    animation: fadeIn 0.3s ease;
    max-width: 1000px;
    margin: 0 auto;
}

.page-content.active {
    display: block;
}

/* .card — the universal panel. Content drives height; padding scales
   to the viewport. The previous version had a hard 40px padding + 300px
   min-height which made small cards (filter bars, grids, single-line
   info badges) feel oversized AND cramped at once. Modifier classes
   below opt back in to denser or roomier treatments. */
.card {
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    /* Self-scaling padding: tighter on small screens, generous on
       wide ones. Authors can still override via .card-compact /
       .card-roomy / inline style. */
    padding: clamp(16px, 1.6vw + 10px, 28px);
    box-shadow: var(--shadow-sm);
}

/* Compact panels — filter bars, character grids, single-line info
   strips. The default for top-of-page surfaces that should feel
   "right-sized" to short content. */
.card-compact {
    padding: 14px 18px;
}

/* Roomy panels — long-form editor forms, the auth card. Restores
   the older generous padding for surfaces that genuinely need it. */
.card-roomy {
    padding: 36px 40px;
}

/* Optional tall variant for centered focus screens (welcome, the
   login card) where we WANT a generous minimum to keep the form
   from looking tiny in a wide viewport. Opt-in only. */
.card-tall {
    min-height: 280px;
}

.save-bar {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

.btn-primary {
    background: var(--text-main);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-secondary {
    background: white;
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-weight: 500;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-secondary:hover {
    background: var(--bg-body);
}

.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}

.form-note {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    margin-top: -4px;
    line-height: 1.4;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: #fff;
    font-size: 0.95rem;
    transition: 0.2s;
    color: var(--text-main);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-dim);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

/* Monospace input variant — used for API keys / slugs / things you paste
   and want to read character-by-character. Also signals "this isn't a
   sentence" so users don't expect autocomplete or spellcheck. */
.form-input-mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

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

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    table-layout: fixed;
}

/* 1/4 width for first column */
.data-table th:first-child,
.data-table td:first-child {
    width: 25%;
}

/* 3/4 width (auto) for second column */
.data-table th:nth-child(2),
.data-table td:nth-child(2) {
    width: auto;
}

.data-table th {
    text-align: left;
    padding: 15px;
    border-bottom: 2px solid var(--border-subtle);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.data-table td {
    padding: 15px;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.9rem;
    color: var(--text-main);
    vertical-align: middle;
    word-wrap: break-word;
}

.data-table tr:not(.input-row):hover {
    background: var(--bg-body);
    cursor: pointer;
}

/* Action column. With four+ icon-buttons the old 120px floor cut the
   trailing button off, and under `table-layout: fixed` (the default
   for `.data-table`) `width: 1%` would literally collapse the column.
   We use `width: 1%` for tables that opted into `.data-table-auto`
   (content-driven sizing) and pair it with `min-width` so even under
   fixed layout there's enough room for ~5 icon-buttons. */
.action-cell {
    text-align: right;
    width: 1%;
    min-width: 220px;
    white-space: nowrap;
    padding-right: 14px;
}

/* Table action buttons — icon-only squares with tooltip on hover.
   Phosphor icons are vendored locally so the glyph always renders;
   the `title` attribute provides accessible hover-tooltip context.
   Both .table-icon-btn (legacy markup) and .row-action (refactored
   content tables) share this same visual style for consistency. */
.table-icon-btn,
.row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 0 0 4px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    background: white;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.table-icon-btn:hover,
.row-action:hover {
    background: var(--bg-body);
    color: var(--text-main);
    border-color: #9ca3af;
}
.table-icon-btn > .ph,
.table-icon-btn > i,
.row-action > .ph,
.row-action > i {
    font-size: 1.1rem;
    line-height: 1;
}
/* Destructive variant: red on hover so authors notice when the
   archive / delete action is the one they're about to take. Applies to
   both `.row-action` (refactored tables) and `.table-icon-btn` (legacy). */
.row-action-danger,
.table-icon-btn-danger {
    color: #b91c1c;
    border-color: #fecaca;
    background: #fef2f2;
}
.row-action-danger:hover,
.table-icon-btn-danger:hover {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.input-row {
    background: #f9fafb;
    display: none;
}

.input-row.open {
    display: table-row;
}

/* Edit mode inputs */
.edit-input {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    font-size: 0.9rem;
}

.save-row-btn {
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.8rem;
}

.opening-line-set {
    border: 1px solid var(--border-subtle);
    padding: 20px;
    padding-top: 35px;
    border-radius: 12px;
    margin-bottom: 20px;
    background: #f9fafb;
    position: relative;
}

.opening-line-set .form-group {
    margin-bottom: 10px;
}

.opening-line-set .grid-2 {
    gap: 10px;
}

.delete-line-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #ef4444;
    background: white;
    border: 1px solid #fee2e2;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

.delete-line-btn:hover {
    background: #fee2e2;
}

/* MODAL STYLES */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-overlay.open {
    display: flex;
    animation: fadeIn 0.2s;
}

.modal-content {
    background: white;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: var(--radius-card);
    padding: 40px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-muted);
}

.modal-close:hover {
    color: var(--text-main);
}

.log-detail-row {
    display: flex;
    border-bottom: 1px solid var(--border-subtle);
    padding: 15px 0;
}

.log-label {
    width: 200px;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}

.log-value {
    color: var(--text-main);
    line-height: 1.5;
    flex: 1;
}

/* Expandable Masterprompt */
details {
    width: 100%;
}

summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 600;
    outline: none;
    margin-bottom: 8px;
}

.prompt-content {
    background: #f9fafb;
    padding: 10px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    color: var(--text-main);
}

/* SIDE PANELS */
.side-panel {
    position: fixed;
    top: var(--header-h);
    right: calc(var(--panel-w) * -1);
    width: var(--panel-w);
    height: calc(100vh - var(--header-h));
    background: var(--bg-panel);
    border-left: 1px solid var(--border-subtle);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease;
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-panel);
}

.side-panel.open {
    right: 0;
}

.side-panel.fullscreen {
    width: 100%;
    right: 0;
    border-left: none;
}

.panel-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f9fafb;
}

.panel-title {
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-controls {
    display: flex;
    gap: 10px;
}

.panel-icon {
    cursor: pointer;
    color: var(--text-main);
    padding: 8px;
    border-radius: 50%;
    transition: 0.2s;
    background: white;
    border: 1px solid var(--border-subtle);
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-icon:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.chat-body {
    background-color: #f9fafb;
    display: flex;
    flex-direction: column;
}

.chat-controls select {
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: 0.85rem;
    color: var(--text-main);
    cursor: pointer;
    transition: 0.2s;
}

.chat-controls select:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.chat-controls button {
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font-size: 0.85rem;
    color: var(--text-main);
    cursor: pointer;
    transition: 0.2s;
}

.chat-controls button:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
}

.chat-bubble {
    padding: 12px 18px;
    border-radius: 18px;
    margin-bottom: 12px;
    max-width: 85%;
    line-height: 1.5;
    font-size: 0.95rem;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    background: white;
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
}

.chat-bubble.ai {
    background: var(--accent-dim);
    border-color: transparent;
    color: var(--text-on-accent);
}

.panel-body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ============================================================
   Disabled-panel state (reversible)
   ------------------------------------------------------------
   Add `panel-disabled` to a `.side-panel` to grey out its body
   and block interaction while the feature isn't wired up. The
   header (with the close X) stays interactive. Remove the class
   to restore the panel without touching anything else.
   ============================================================ */
.side-panel.panel-disabled .panel-body {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
    filter: grayscale(0.6);
}
.side-panel.panel-disabled .chat-input-area {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
    filter: grayscale(0.6);
}

/* TBA banner that lives just under the panel header. Always in the
   markup but hidden unless the panel is in disabled mode. */
.panel-tba-banner {
    display: none;
}
.side-panel.panel-disabled .panel-tba-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 16px 0;
    padding: 12px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 0.82rem;
    color: #78350f;
    line-height: 1.45;
}
.side-panel.panel-disabled .panel-tba-banner i {
    font-size: 1.1rem;
    margin-top: 1px;
    flex-shrink: 0;
    color: #b45309;
}
.side-panel.panel-disabled .panel-tba-banner strong {
    display: block;
    color: #78350f;
    margin-bottom: 2px;
}

/* Small "TBA" pill in the panel title to match the sidebar style. */
.panel-tba-pill {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #fef3c7;
    color: #92400e;
    line-height: 1;
}

.chat-input-area {
    padding: 15px 20px;
    background: white;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: 10px;
}

.chat-input {
    flex: 1;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    font-size: 0.95rem;
    transition: 0.2s;
}

.chat-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.btn-send {
    background: var(--accent);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

.btn-send:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--accent-dim);
}

.audio-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.audio-bars {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100px;
}

.bar {
    width: 8px;
    background: var(--text-main);
    border-radius: 10px;
    animation: bounce 1s infinite ease-in-out;
}

.bar:nth-child(2) {
    animation-delay: 0.1s;
    height: 40px;
}

.bar:nth-child(3) {
    animation-delay: 0.2s;
    height: 70px;
    background: var(--accent);
}

.bar:nth-child(4) {
    animation-delay: 0.3s;
    height: 50px;
}

.bar:nth-child(5) {
    animation-delay: 0.4s;
    height: 30px;
}

.mic-btn-large {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--text-main);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    cursor: pointer;
    margin-top: 40px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
}

.mic-btn-large:hover {
    transform: scale(1.05);
}

@keyframes bounce {

    0%,
    100% {
        height: 20px;
        opacity: 0.3;
    }

    50% {
        height: 80px;
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* --- Audio Visualizer (Simple Circle) --- */
.audio-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    padding-bottom: 40px;
}

.visualizer-wrapper {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
}

#visualizer-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #374151;
    /* Default/Idle (Dark Grey) */
    transition: width 0.1s ease, height 0.1s ease, background-color 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* States */
.audio-container.listening #visualizer-circle {
    background-color: var(--accent);
    /* Yellow */
    box-shadow: 0 0 20px rgba(249, 189, 17, 0.4);
}

.audio-container.processing #visualizer-circle {
    background-color: #9ca3af;
    /* Grey */
    animation: pulse-grey 1.5s infinite ease-in-out;
}

.audio-container.speaking #visualizer-circle {
    background-color: #111827;
    /* Black */
}

@keyframes pulse-grey {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.8;
    }
}

.audio-controls-row {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    z-index: 10;
}

.audio-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: white;
    color: var(--text-main);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}

.audio-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.audio-btn.primary {
    background: var(--text-main);
    color: white;
    border-color: var(--text-main);
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

.audio-btn.active {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(249, 189, 17, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(249, 189, 17, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(249, 189, 17, 0);
    }
}

#subtitle-overlay {
    position: absolute;
    bottom: 80px;
    left: 20px;
    right: 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid var(--border-subtle);
    font-size: 0.95rem;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

#instruction-text {
    margin-bottom: 30px;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    transition: color 0.3s;
    height: 20px;
}

.audio-container.listening #instruction-text {
    color: var(--accent);
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.page-header h1 {
    margin-bottom: 0;
}

/* MARKDOWN STYLES */
.markdown-content {
    line-height: 1.6;
    color: var(--text-main);
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: var(--text-main);
}

.markdown-content h1 {
    font-size: 1.8rem;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.3em;
}

.markdown-content h2 {
    font-size: 1.4rem;
}

.markdown-content h3 {
    font-size: 1.1rem;
}

.markdown-content p {
    margin-bottom: 1em;
}

.markdown-content ul,
.markdown-content ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.markdown-content li {
    margin-bottom: 0.3em;
}

.markdown-content code {
    background: #f3f4f6;
    padding: 2px 4px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.markdown-content pre {
    background: #1f2937;
    color: #f3f4f6;
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1em;
}

.markdown-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

.markdown-content blockquote {
    border-left: 4px solid var(--accent);
    padding-left: 15px;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 1em;
}

.markdown-content strong {
    font-weight: 600;
    color: var(--text-main);
}

/* Header Actions Group */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Edit Badge container with lighter yellow base */
.edit-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    /* Match button padding */
    border-radius: var(--radius-pill);
    background: rgba(249, 189, 17, 0.2);
    /* Base border color (light yellow) */
    font-size: 0.9rem;
    /* Match button font size */
    color: var(--text-muted);
    font-weight: 600;
    /* Match button weight */
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    height: 100%;
}

/* 1. Moving Highlight (The Chasing Blob) */
.edit-badge::before {
    content: '';
    position: absolute;
    width: 60px;
    /* Width of the highlight section */
    height: 60px;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    top: 0;
    left: 0;
    offset-path: rect(0 100% 100% 0 round 24px);
    /* Path follows border */
    animation: chase 8s linear infinite;
    z-index: 0;
    /* Behind white body, on top of yellow base */
    opacity: 0.8;
}

/* 2. White Body (Inner Background) */
.edit-badge::after {
    content: '';
    position: absolute;
    inset: 2px;
    /* Border thickness */
    background: white;
    border-radius: 46px;
    /* Slightly less than container radius (48-2) */
    z-index: 0;
}

/* 3. Content Layer (Text & Icon) */
.edit-badge>* {
    position: relative;
    z-index: 1;
    /* On top of everything */
}

@keyframes chase {
    to {
        offset-distance: 100%;
    }
}

.badge-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* Color set per-character via inline --badge-color custom property.
       Falls back to muted gray when the variable isn't set. */
    background: var(--badge-color, var(--text-muted));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Ensure save-bar aligns items correctly */
.save-bar {
    align-items: center;
    gap: 15px;
}

/* Legacy color classes — kept for back-compat. New code sets --badge-color inline. */
.badge-icon.p-aristotle { --badge-color: #3B82F6; }
.badge-icon.p-epicurus  { --badge-color: #10B981; }
.badge-icon.p-plato     { --badge-color: #EF4444; }
.badge-icon.p-zeno      { --badge-color: #8B5CF6; }
.badge-icon.p-global    { --badge-color: #6B7280; }

/* Disabled State for UI Elements */
.disabled-state {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(100%);
}

/* Specific hide for chat input area */
.chat-input-area.disabled-state {
    /* display: none; */
}

/* Enhanced Side Panel Controls */
.chat-controls .large-control {
    font-size: 1rem;
    padding: 8px 32px 8px 12px;
    /* Extra right padding for dropdown arrow */
    height: 44px;
    border-color: var(--border-subtle);
    background-color: white;
}

.chat-controls .btn-new-conv {
    font-size: 0.95rem;
    padding: 0 20px;
    height: 44px;
    background-color: var(--accent);
    color: var(--text-on-accent);
    border: none;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-controls .btn-new-conv:hover {
    background-color: #f59e0b;
    /* Slightly darker accent */
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

/* ============================================================
   CONTENT PAGES — shared utilities
   Goal: every list / edit / import page has the same layout
   primitives so authors never have to relearn a screen.
   ============================================================ */

/* Standard page width for content list/import pages. */
.page-content.content-page {
    max-width: 1200px;
}
.page-content.content-page > .subtitle,
.page-content.content-page > .page-subtitle { margin-bottom: 22px; }

/* --- Toolbar: title (left) + action buttons (right) on one row.
   The toolbar NEVER wraps onto a second row. The h1 takes the
   remaining width and is allowed to wrap internally if the title
   is unusually long; the buttons stay anchored to the right edge.
   The subtitle, when present, is rendered by the macro UNDERNEATH
   this row — so the row itself is always the same height. */
.page-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 4px;
    flex-wrap: nowrap;
    min-height: 38px;
}
.page-toolbar h1 {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    line-height: 1.2;
    /* Long titles wrap inside the h1 rather than push the actions row. */
    overflow-wrap: anywhere;
}
.page-toolbar .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Buttons inside toolbar: every button is the same height/padding/font
   so Export, Import, and New align as a single visual group. */
.page-toolbar .toolbar-actions .btn-primary,
.page-toolbar .toolbar-actions .btn-secondary {
    height: 38px;
    padding: 0 16px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
}

/* Disabled primary button — keeps the slot reserved so the row never
   reflows when the user changes character/language. */
.btn-primary.is-disabled,
.btn-secondary.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Flash banner — success / info / error. */
.flash {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 10px;
    margin-bottom: 18px; font-size: 0.9rem;
}
.flash-success { background: rgba(16,185,129,0.12); color: #065f46; }
.flash-error   { background: #fee2e2; color: #991b1b; }

/* --- Card sections shared by every list page. Predictable padding so
   the filters, chip rows, and table all read as one continuous panel. */
.card-list {
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.card-list > * + * { margin-top: 14px; }
.card-list > .table-wrap,
.card-list > .empty-state,
.card-list > .pagination { margin-top: 18px; }

/* --- Filter bar: search + checkbox + chips. Spacing handled by the
   parent .card-list (so we don't add margin-bottom here). */
.filter-bar {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 10px;
}
.filter-bar .filter-search {
    flex: 1; min-width: 240px;
    padding: 9px 14px; font-size: 0.9rem;
}
.filter-bar .divider-v {
    width: 1px; height: 24px; background: var(--border-subtle);
}
.filter-bar .filter-check {
    font-size: 0.85rem; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}

/* Filter chip row (e.g. Severity: soft firm absolute). */
.filter-chips {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px;
}
.filter-chips .filter-chips-label {
    font-size: 0.78rem; color: var(--text-muted);
    font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 4px;
}
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px;
    background: white;
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    border-radius: var(--radius-pill);
    font-size: 0.78rem; font-weight: 500;
    cursor: pointer; text-decoration: none;
    transition: 0.15s;
}
.chip:hover { background: var(--bg-body); }
.chip.is-active,
.filter-active {
    background: var(--accent);
    color: var(--text-on-accent);
    border-color: var(--accent);
}
.chip.chip-danger { border-color: #fecaca; }
.chip.chip-danger.is-active {
    background: var(--danger); color: white; border-color: var(--danger);
}

/* Tag chips (read-only, in tables / detail panels). */
.tag-chip-mini {
    display: inline-block;
    margin: 1px 3px 1px 0;
    padding: 1px 7px;
    background: var(--accent-dim);
    border-radius: 7px;
    font-size: 0.7rem;
    color: #92400e;
}

/* Archived / status badges that sit next to a title. */
.badge-archived {
    margin-left: 6px;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: #e5e7eb;
    color: var(--text-muted);
}

/* --- Severity / certainty pills shared across content kinds. */
.sev-pill,
.cert-pill {
    display: inline-block; padding: 2px 9px; border-radius: 10px;
    font-size: 0.72rem; font-weight: 600;
}
.sev-soft,     .cert-high     { background: #dcfce7; color: #166534; }
.sev-firm,     .cert-disputed { background: #fef3c7; color: #92400e; }
.sev-absolute, .cert-unknown  { background: #fee2e2; color: #991b1b; }

/* Certainty dots used in tight columns. */
.cert-dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; margin-right: 4px; vertical-align: middle;
}
.cert-dot.cert-high     { background: #10b981; }
.cert-dot.cert-disputed { background: #f59e0b; }
.cert-dot.cert-unknown  { background: #ef4444; }

/* Crisis row tinting (refusal templates). */
.crisis-row { background: rgba(239, 68, 68, 0.03); }

/* --- Table overflow wrapper for narrow viewports. */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Content-list table variant: width is driven by content, not by a
   rigid colgroup. Flexible columns grow; metadata columns shrink to
   fit their text; the action column never collapses. Long text wraps
   inside its cell, with vertically-stacked secondary info beneath. */
.data-table.data-table-auto {
    table-layout: auto;
    width: 100%;
}
.data-table.data-table-auto th:first-child,
.data-table.data-table-auto td:first-child { width: auto; }
.data-table.data-table-auto th:nth-child(2),
.data-table.data-table-auto td:nth-child(2) { width: auto; }
.data-table.data-table-auto th,
.data-table.data-table-auto td {
    padding: 12px 14px;
    vertical-align: top;
}

/* Column-shape helpers used in the new content tables. */
.col-caret      { width: 28px; text-align: center; padding-left: 8px !important; padding-right: 4px !important; }
.col-shrink     { width: 1%; white-space: nowrap; }
.col-actions    {
    width: 1%;
    text-align: right;
    white-space: nowrap;
    padding-right: 10px !important;
}

/* Stacked cell content: bold title on top, muted secondary line below.
   Use .cell-title for the primary value, .cell-meta for everything else
   that would otherwise spread out across many columns. */
.cell-title {
    display: block;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
    word-break: break-word;
}
.cell-sub {
    display: block;
    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.5;
    margin-top: 3px;
    word-break: break-word;
}
.cell-meta {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 4px;
    word-break: break-word;
}
.cell-meta .tag-chip-mini { display: inline-block; }
.cell-meta + .cell-meta { margin-top: 2px; }
.cell-divider {
    color: var(--border-subtle);
    margin: 0 6px;
    font-weight: 400;
}

/* When a cell's content is long (e.g. a quoted text), constrain it so
   the surrounding columns aren't squeezed off-screen. */
td.cell-flex { max-width: 480px; }

/* Action cells use bordered text buttons so they're always visible —
   they don't depend on the icon font loading. Solid neutral fill +
   dark text on a white card so they read clearly even at a glance. */
.action-cell,
.col-actions {
    text-align: right;
    white-space: nowrap;
    vertical-align: middle !important;
}
/* Wrapper for the icon buttons inside an action cell. Tight horizontal
   row with no wrapping, right-aligned. Actual button styling lives at
   the top of this file (.table-icon-btn / .row-action share styles). */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.row-actions form { display: inline; margin: 0; padding: 0; border: 0; }

/* Disclosure row (the click-to-expand row beneath each table row). */
.disclosure-row { cursor: pointer; }
.disclosure-row .ph-caret-right { transition: transform 0.15s; }
.disclosure-row.open .ph-caret-right { transform: rotate(90deg); }
.disclosure-body > td {
    background: #f9fafb;
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px 20px !important;
}
.data-table tr.disclosure-body:hover { background: #f9fafb; cursor: default; }

/* Soften table hover so clicking the action area doesn't feel like
   clicking the whole row. */
.data-table.data-table-auto tbody tr:hover { background: #f9fafb; }

/* --- Empty state (centered icon + blurb + CTA). */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}
.empty-state-icon {
    font-size: 3rem;
    color: var(--accent);
    opacity: 0.6;
}
.empty-state-title {
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 12px;
}
.empty-state-blurb {
    color: var(--text-muted);
    max-width: 480px;
    margin: 8px auto 20px;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* --- Pagination row. */
.pagination {
    display: flex; justify-content: center;
    gap: 6px; margin-top: 18px;
}
.pagination .chip { padding: 4px 12px; font-size: 0.85rem; }

/* --- Import / drop-zone shared. */
.upload-box {
    border: 2px dashed var(--border-subtle);
    border-radius: var(--radius-card);
    padding: 40px;
    text-align: center;
    transition: 0.2s;
    background: #f9fafb;
}
.upload-box.dragover {
    border-color: var(--accent);
    background: rgba(249, 189, 17, 0.06);
}
.upload-box input[type="file"] { display: none; }
.upload-box label { cursor: pointer; }
.upload-box .upload-icon { font-size: 2.4rem; color: var(--accent); }

.preview-summary {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px; margin-bottom: 20px;
}
.summary-tile {
    padding: 18px; border-radius: 12px;
    border: 1px solid var(--border-subtle);
    background: white;
}
.summary-tile .label {
    font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.summary-tile .num {
    font-size: 1.6rem; font-weight: 700; margin-top: 4px;
}
.summary-new     { border-left: 4px solid #10b981; }
.summary-update  { border-left: 4px solid #f59e0b; }
.summary-invalid { border-left: 4px solid var(--danger); }

.status-pill {
    display: inline-block; padding: 2px 9px; border-radius: 10px;
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
}
.pill-new     { background: #dcfce7; color: #166534; }
.pill-update  { background: #fef3c7; color: #92400e; }
.pill-invalid { background: #fee2e2; color: #991b1b; }

/* Help box (collapsible) used on import pages. */
details.help-box {
    background: var(--bg-body); padding: 14px 18px; border-radius: 12px;
    margin-bottom: 24px;
}
details.help-box summary {
    font-weight: 600; cursor: pointer; color: var(--text-main);
}
details.help-box pre {
    background: white; padding: 12px; border-radius: 8px;
    border: 1px solid var(--border-subtle); margin-top: 10px;
    font-size: 0.78rem; overflow-x: auto;
    color: var(--text-main);
}

/* Inline error banner (parse failure, etc.) */
.error-banner {
    background: #fee2e2; color: #991b1b;
    padding: 12px 16px; border-radius: 10px;
}

/* =====================================================================
   Chat side-panel (#panel-chat) — config view, session view, rating UI.
   Markup in templates/shell.html, wired by /static/panel_chat.js.
   ===================================================================== */
#panel-chat .chat-body, #panel-audio .chat-body { padding: 18px 18px 0 18px; gap: 14px; }
#panel-chat .chat-config-context, #panel-audio .chat-config-context {    display: flex; flex-direction: column; gap: 6px;
    padding: 12px 14px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}
#panel-chat .cfg-row, #panel-audio .cfg-row {    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.85rem;
    gap: 10px;
}
#panel-chat .cfg-label, #panel-audio .cfg-label {    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); font-weight: 600;
}
#panel-chat .cfg-value, #panel-audio .cfg-value {    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 500; color: var(--text-main);
}
#panel-chat .cfg-value .badge-icon, #panel-audio .cfg-value .badge-icon { width: 22px; height: 22px; font-size: 0.72rem; }
#panel-chat .cfg-value .lang-flag, #panel-audio .cfg-value .lang-flag { font-size: 1.05rem; }
#panel-chat .cfg-missing, #panel-audio .cfg-missing { color: var(--text-muted); font-style: italic; }
#panel-chat .cfg-sub, #panel-audio .cfg-sub {    color: var(--text-muted); font-size: 0.75rem; font-family: monospace;
}
/* Section heading inside the config view. */
#panel-chat .chat-config-section-heading, #panel-audio .chat-config-section-heading {    display: flex; align-items: center; gap: 6px;
    margin-top: 4px;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-muted); font-weight: 600;
}
#panel-chat .chat-config-section-heading i, #panel-audio .chat-config-section-heading i { color: var(--accent); font-size: 0.95rem; }
#panel-chat .chat-config-form, #panel-audio .chat-config-form { display: flex; flex-direction: column; gap: 14px; }
/* Generic panel form-field card. */
#panel-chat .panel-field, #panel-audio .panel-field {    padding: 12px 14px;
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}
#panel-chat .panel-field-head, #panel-audio .panel-field-head {    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
    gap: 8px;
}
#panel-chat .panel-field-label, #panel-audio .panel-field-label {    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; font-weight: 600; color: var(--text-main);
}
#panel-chat .panel-field-label i, #panel-audio .panel-field-label i {    color: var(--text-muted); font-size: 1rem;
}
#panel-chat .panel-field-hint, #panel-audio .panel-field-hint {    margin-top: 8px;
    font-size: 0.76rem; color: var(--text-muted); line-height: 1.45;
}

/* Sharpness — value chip + slider + tick-mark scale. */
#panel-chat .panel-value-chip, #panel-audio .panel-value-chip {    background: var(--accent);
    color: var(--text-on-accent);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem; font-weight: 700;
    font-family: monospace;
    min-width: 38px; text-align: center;
}
#panel-chat .panel-slider, #panel-audio .panel-slider {    width: 100%; accent-color: var(--accent);
    margin: 4px 0 6px 0;
}
#panel-chat .panel-slider-scale, #panel-audio .panel-slider-scale {    display: grid;
    grid-template-columns: repeat(5, 1fr);
    font-size: 0.65rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.4px;
    padding: 0 2px;
}
#panel-chat .panel-slider-scale span, #panel-audio .panel-slider-scale span {    text-align: center;
    position: relative;
}
#panel-chat .panel-slider-scale span::before, #panel-audio .panel-slider-scale span::before {    content: "";
    display: block;
    width: 1px; height: 4px;
    background: var(--border-subtle);
    margin: 0 auto 3px;
}
#panel-chat .panel-slider-scale span:first-child, #panel-audio .panel-slider-scale span:first-child { text-align: left; }
#panel-chat .panel-slider-scale span:last-child, #panel-audio .panel-slider-scale span:last-child  { text-align: right; }
#panel-chat .panel-slider-scale span.is-active, #panel-audio .panel-slider-scale span.is-active {    color: var(--text-main); font-weight: 700;
}
#panel-chat .panel-slider-scale span.is-active::before, #panel-audio .panel-slider-scale span.is-active::before {    background: var(--accent); height: 6px; width: 2px;
}

/* Segmented control — pill-style toggle. */
#panel-chat .seg-control, #panel-audio .seg-control {    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 4px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
}
#panel-chat .seg-opt, #panel-audio .seg-opt {    display: inline-flex; align-items: center; justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.85rem; font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: 0.15s;
    white-space: nowrap;
}
#panel-chat .seg-opt:hover, #panel-audio .seg-opt:hover { color: var(--text-main); }
#panel-chat .seg-opt.is-active, #panel-audio .seg-opt.is-active {    background: white;
    color: var(--text-main);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    font-weight: 600;
}
#panel-chat .seg-opt input, #panel-audio .seg-opt input { display: none; }
#panel-chat .seg-opt i, #panel-audio .seg-opt i { font-size: 0.95rem; opacity: 0.75; }
#panel-chat .seg-opt.is-active i, #panel-audio .seg-opt.is-active i { opacity: 1; }
/* Prior gist — card-styled <details>. */
#panel-chat .panel-gist-card, #panel-audio .panel-gist-card { padding: 0; overflow: hidden; }
#panel-chat .panel-gist-summary, #panel-audio .panel-gist-summary {    margin: 0;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
#panel-chat .panel-gist-summary::-webkit-details-marker, #panel-audio .panel-gist-summary::-webkit-details-marker { display: none; }
#panel-chat .panel-gist-card[open] .panel-gist-summary, #panel-audio .panel-gist-card[open] .panel-gist-summary {    border-bottom: 1px solid var(--border-subtle);
}
#panel-chat .panel-gist-caret, #panel-audio .panel-gist-caret {    color: var(--text-muted); transition: transform 0.15s;
}
#panel-chat .panel-gist-card[open] .panel-gist-caret, #panel-audio .panel-gist-card[open] .panel-gist-caret { transform: rotate(180deg); }
#panel-chat .panel-optional-tag, #panel-audio .panel-optional-tag {    background: var(--bg-body);
    color: var(--text-muted);
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.65rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.4px;
    margin-left: 4px;
}
#panel-chat .panel-textarea, #panel-audio .panel-textarea {    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 0;
    font-family: inherit; font-size: 0.88rem; line-height: 1.45;
    resize: vertical;
    min-height: 70px;
    background: var(--bg-body);
    box-sizing: border-box;
}
#panel-chat .panel-textarea:focus, #panel-audio .panel-textarea:focus {    outline: none;
    background: white;
    box-shadow: inset 0 0 0 2px var(--accent-dim);
}

/* Start hint with info icon. */
#panel-chat .cfg-hint i, #panel-audio .cfg-hint i { color: var(--accent); margin-right: 3px; }
/* The input area now wraps its row in .panel-input-wrap so the outer
   bar can keep a full-width divider while the inner contents recentre
   when the panel goes fullscreen. */
#panel-chat .panel-input-wrap, #panel-audio .panel-input-wrap {    display: flex; gap: 10px;
    width: 100%;
}

/* =====================================================================
   Fullscreen layout — when the user clicks the expand icon, the panel
   takes the full viewport width. Edge-to-edge form cards and bubbles
   read badly at that width, so we centre the inner content with a
   comfortable reading column. The outer panel (header, body bg, input
   divider) still spans the viewport — only inner content is centred.
   ===================================================================== */
#panel-chat.fullscreen .panel-body, #panel-audio.fullscreen .panel-body {    width: 100%; max-width: 760px;
    margin-left: auto; margin-right: auto;
    padding: 28px 28px 0 28px;
    box-sizing: border-box;
}
#panel-chat.fullscreen .panel-input-wrap, #panel-audio.fullscreen .panel-input-wrap {    max-width: 760px; margin: 0 auto;
}
#panel-chat.fullscreen .chat-input-area, #panel-audio.fullscreen .chat-input-area {    padding: 18px 28px;
}

/* Bubbles still use max-width 92% of their container, which at a 760px
   column gives a comfortable line length. Visitor bubbles align right,
   philosopher bubbles align left — already handled by .panel-bubble. */
#panel-chat.fullscreen .panel-messages, #panel-audio.fullscreen .panel-messages {    padding-right: 0;
    gap: 14px;
}
#panel-chat.fullscreen .panel-bubble, #panel-audio.fullscreen .panel-bubble {    max-width: 75%;
    font-size: 0.95rem;
    padding: 12px 16px;
    line-height: 1.55;
}

/* In fullscreen the session bar deserves a touch more breathing room. */
#panel-chat.fullscreen .chat-session-bar, #panel-audio.fullscreen .chat-session-bar {    padding: 12px 16px; margin-bottom: 16px;
}

/* The config view fields hold their natural width inside the centred
   column. Slightly larger inner padding makes the cards feel less
   cramped at the wider viewport. */
#panel-chat.fullscreen .panel-field, #panel-audio.fullscreen .panel-field { padding: 14px 18px; }
#panel-chat.fullscreen .chat-config-section-heading, #panel-audio.fullscreen .chat-config-section-heading { margin-top: 8px; }
#panel-chat .chat-config-actions, #panel-audio .chat-config-actions {    margin-top: auto;
    padding: 14px 0 18px 0;
    display: flex; flex-direction: column; gap: 8px;
    align-items: stretch;
}
#panel-chat .chat-config-actions .btn-primary[disabled], #panel-audio .chat-config-actions .btn-primary[disabled] {    opacity: 0.5; cursor: not-allowed;
}
#panel-chat .cfg-hint, #panel-audio .cfg-hint {    font-size: 0.78rem; color: var(--text-muted);
    text-align: center;
}

/* Active-session bar at the top of the conversation. */
#panel-chat .chat-session-bar, #panel-audio .chat-session-bar {    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; margin-bottom: 10px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}
#panel-chat .chat-session-bar-info, #panel-audio .chat-session-bar-info {    display: flex; align-items: center; gap: 10px;
}
#panel-chat .chat-session-bar-info .badge-icon, #panel-audio .chat-session-bar-info .badge-icon {    width: 28px; height: 28px; font-size: 0.8rem;
}
#panel-chat #panel-session-title, #panel-audio #panel-session-title {    font-weight: 600; font-size: 0.92rem;
}
#panel-chat .panel-end-btn, #panel-audio .panel-end-btn {    padding: 4px 10px;
    font-size: 0.78rem;
}

/* Conversation messages. */
#panel-chat .panel-messages, #panel-audio .panel-messages {    flex: 1; overflow-y: auto; padding-right: 4px;
    display: flex; flex-direction: column; gap: 10px;
}
#panel-chat .panel-empty, #panel-audio .panel-empty {    text-align: center; color: var(--text-muted);
    padding: 30px 16px;
}
#panel-chat .panel-empty i, #panel-audio .panel-empty i {    font-size: 1.8rem; opacity: 0.6; display: block; margin-bottom: 6px;
}
#panel-chat .panel-bubble, #panel-audio .panel-bubble {    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid transparent;
    line-height: 1.45;
    font-size: 0.92rem;
    max-width: 92%;
}
#panel-chat .panel-bubble.visitor, #panel-audio .panel-bubble.visitor {    align-self: flex-end;
    background: var(--bg-body);
    border-color: var(--border-subtle);
}
#panel-chat .panel-bubble.phil, #panel-audio .panel-bubble.phil {    align-self: flex-start;
    background: #fffbeb;
    border-color: #fde68a;
}
#panel-chat .panel-bubble-meta, #panel-audio .panel-bubble-meta {    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
    font-size: 0.66rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.5px;
}
#panel-chat .panel-bubble-meta .role-label, #panel-audio .panel-bubble-meta .role-label {    font-weight: 700; color: var(--text-main);
}
#panel-chat .panel-bubble.phil .panel-bubble-meta .role-label, #panel-audio .panel-bubble.phil .panel-bubble-meta .role-label { color: #92400e; }
#panel-chat .panel-bubble-meta .latency, #panel-audio .panel-bubble-meta .latency { font-family: monospace; font-weight: 400; }
#panel-chat .panel-bubble-body, #panel-audio .panel-bubble-body { white-space: pre-wrap; }
#panel-chat .panel-thinking, #panel-audio .panel-thinking { color: var(--text-muted); font-style: italic; }
/* Per-bubble rating widget (thumbs + comment). */
#panel-chat .panel-rating, #panel-audio .panel-rating {    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed #fde68a;
    display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
#panel-chat .panel-rating .thumb, #panel-audio .panel-rating .thumb,
#panel-chat .panel-rating .panel-rating-comment-toggle, #panel-audio .panel-rating .panel-rating-comment-toggle {    background: white; border: 1px solid var(--border-subtle);
    padding: 3px 9px; border-radius: var(--radius-pill);
    cursor: pointer; font-size: 0.74rem; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 4px;
}
#panel-chat .panel-rating .thumb:hover, #panel-audio .panel-rating .thumb:hover { color: var(--text-main); }
#panel-chat .panel-rating .thumb.on, #panel-audio .panel-rating .thumb.on {    background: var(--accent); color: var(--text-on-accent);
    border-color: var(--accent);
}
#panel-chat .panel-rating .thumb[data-thumbs="down"].on, #panel-audio .panel-rating .thumb[data-thumbs="down"].on {    background: #fee2e2; color: #991b1b; border-color: #fecaca;
}
#panel-chat .panel-rating-comment, #panel-audio .panel-rating-comment {    width: 100%; margin-top: 6px;
    padding: 8px 10px; background: white;
    border: 1px solid var(--border-subtle); border-radius: 8px;
}
#panel-chat .panel-rating-comment textarea, #panel-audio .panel-rating-comment textarea {    width: 100%; padding: 6px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    font-family: inherit; font-size: 0.82rem; resize: vertical;
}

/* Picker-prompt card: shown when no character selected yet. */
.picker-prompt {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 22px;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.picker-prompt i { color: var(--accent); font-size: 1.4rem; }

/* Save bar — push the edit badge to the left, save / cancel stay right. */
.save-bar .edit-badge { margin-right: auto; }

/* Mobile / narrow viewport — keep toolbar usable. */
@media (max-width: 720px) {
    main { padding: 24px 18px; }
    .page-toolbar { flex-direction: column; align-items: stretch; }
    .page-toolbar .toolbar-actions { flex-wrap: wrap; }
    .preview-summary { grid-template-columns: 1fr; }
}
/* ============================================================
   Documentation page
   ------------------------------------------------------------
   The /documentation page is built on the shared CMS primitives
   — `.page-content.content-page`, `.page-toolbar`, `.filter-chips`,
   `.card-list`, the `empty_state` macro. The rules below cover only
   the small bits the design system doesn't already provide: the
   manual TOC sidebar and the examples card grid.
   ============================================================ */

/* Tab row spacing — sits between the page subtitle and the pane. */
.docs-tabs {
    margin: 6px 0 18px;
}

/* Manual tab — narrow sidebar TOC + body.
   `minmax(0, 1fr)` on the body column is load-bearing — without it,
   long unbreakable content (tables, <code>) can blow the grid out
   past its container and overflow the page. */
.docs-manual {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}
.docs-toc {
    padding: 0;
    border-right: none;
    min-width: 0;
    box-sizing: border-box;
}
/* "On this page" header on the TOC. The class name comes from a
   shared filter-chips label style which only applies inside
   `.filter-chips`; in the TOC the same class needs its own rule so
   the label actually picks up the small-caps treatment. */
.docs-toc .filter-chips-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 0 0 6px 12px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}
/* Interactive TOC: sticky as the user scrolls the manual body.
   `max-height` so a future longer TOC scrolls inside the column
   instead of pushing the page footer down. */
.docs-toc-interactive {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    /* Tiny right gutter so the active pill doesn't kiss the edge
       when the column meets the body column. */
    padding-right: 8px;
}
.docs-toc-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.docs-toc-list li {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0;
}
/* No inter-row borders — too noisy on a 13-item list. The active
   pill + hover background carry the visual rhythm. */
.docs-toc-list a {
    display: block;
    padding: 6px 10px;
    color: var(--text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    transition: background-color 120ms ease,
                color 120ms ease,
                border-color 120ms ease;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.docs-toc-list a:hover {
    color: var(--text-main);
    background: var(--bg-body);
}
.docs-toc-list a.is-active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: rgba(0, 0, 0, 0.04);
    font-weight: 600;
}
.docs-manual-body {
    min-width: 0;
}

@media (max-width: 720px) {
    /* Stack TOC above the body on phones; un-sticky so it doesn't
       eat the top of the viewport. */
    .docs-manual {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .docs-toc-interactive {
        position: static;
        max-height: none;
    }
}

/* ===== Manual prose typography ===== */
.docs-prose {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-main);
    max-width: 760px;
}
.docs-chapter {
    padding-top: 8px;
    margin-bottom: 56px;
    scroll-margin-top: 24px;
}
.docs-chapter + .docs-chapter {
    border-top: 1px solid var(--border-subtle);
    padding-top: 32px;
}
.docs-eyebrow {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    margin: 0 0 6px;
}
.docs-prose h2 {
    font-size: 1.45rem;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--text-main);
}
.docs-prose h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 28px 0 10px;
    color: var(--text-main);
}
.docs-lead {
    font-size: 1.02rem;
    color: var(--text-main);
    margin: 0 0 16px;
}
.docs-prose p {
    margin: 0 0 14px;
}
.docs-prose ul,
.docs-prose ol {
    margin: 0 0 18px 22px;
    padding: 0;
}
.docs-prose li {
    margin-bottom: 6px;
}
.docs-prose li > ul {
    margin-top: 6px;
}
.docs-prose code {
    background: var(--bg-body);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.87em;
    color: var(--text-main);
}
.docs-prose a {
    color: var(--accent);
    text-decoration: none;
}
.docs-prose a:hover {
    text-decoration: underline;
}
.docs-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    color: var(--text-muted);
}

/* Field lists (definition lists for character + content type fields). */
.docs-fields {
    margin: 0 0 18px;
}
.docs-fields dt {
    font-weight: 600;
    color: var(--text-main);
    margin-top: 14px;
    font-size: 0.93rem;
}
.docs-fields dt:first-child {
    margin-top: 0;
}
.docs-fields dd {
    margin: 4px 0 0 0;
    color: var(--text-main);
    font-size: 0.93rem;
    line-height: 1.55;
}
.docs-fields dd ul {
    margin: 6px 0 0 22px;
}

/* Tables inside the manual. */
.docs-table-wrap {
    overflow-x: auto;
    margin: 0 0 22px;
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
}
.docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.docs-table th,
.docs-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}
.docs-table th {
    background: var(--bg-body);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}
.docs-table tbody tr:last-child td {
    border-bottom: none;
}

/* Callouts. */
.docs-callout {
    border-left: 3px solid var(--accent);
    background: rgba(0, 0, 0, 0.025);
    padding: 12px 16px;
    border-radius: 6px;
    margin: 18px 0 22px;
    font-size: 0.92rem;
}
.docs-callout strong {
    color: var(--text-main);
}
.docs-callout-warn {
    border-left-color: #d97706;
    background: rgba(217, 119, 6, 0.06);
}
.docs-callout-note {
    border-left-color: var(--accent);
}

/* Good / bad example blocks. */
.docs-example {
    margin: 14px 0 22px;
    border-radius: 8px;
    padding: 14px 18px;
    border: 1px solid var(--border-subtle);
    background: white;
}
.docs-example p {
    margin: 6px 0;
    font-size: 0.92rem;
}
.docs-example-good {
    border-left: 3px solid #10b981;
}
.docs-example-bad {
    border-left: 3px solid #ef4444;
}
.docs-example-tag {
    display: inline-block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-muted);
}
.docs-example-good .docs-example-tag { color: #047857; }
.docs-example-bad .docs-example-tag { color: #b91c1c; }
.docs-annotation {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-style: italic;
    border-top: 1px dashed var(--border-subtle);
    padding-top: 8px;
}

/* Collapsible detail panels (the six universal principles). */
.docs-detail {
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 0;
    margin: 0 0 8px;
    background: white;
}
.docs-detail summary {
    cursor: pointer;
    padding: 10px 14px;
    list-style: none;
    font-size: 0.93rem;
    color: var(--text-main);
    user-select: none;
}
.docs-detail summary::-webkit-details-marker { display: none; }
.docs-detail summary::before {
    content: "›";
    display: inline-block;
    margin-right: 10px;
    color: var(--text-muted);
    transition: transform 120ms ease;
    font-weight: 700;
}
.docs-detail[open] summary::before {
    transform: rotate(90deg);
}
.docs-detail p {
    padding: 0 14px 12px 28px;
    margin: 0;
    color: var(--text-main);
    font-size: 0.91rem;
}

/* Flow lists (numbered ordered steps with stronger separation). */
.docs-flow {
    counter-reset: docs-flow;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.docs-flow li {
    counter-increment: docs-flow;
    position: relative;
    padding: 4px 0 10px 36px;
    margin-bottom: 4px;
    border-bottom: 1px dashed var(--border-subtle);
}
.docs-flow li::before {
    content: counter(docs-flow);
    position: absolute;
    left: 0;
    top: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    text-align: center;
    line-height: 24px;
    font-size: 0.78rem;
    font-weight: 700;
}
.docs-flow li:last-child {
    border-bottom: none;
}

/* Volume distribution lists. */
.docs-volume {
    background: var(--bg-body);
    border-radius: 8px;
    padding: 12px 14px 12px 32px;
    font-size: 0.9rem;
}
/* When a card-list contains the manual layout, suppress its default
   inter-child margin so the empty-state inside the body doesn't get
   pushed away from the TOC visually. */
.card-list > .docs-manual { margin-top: 0; }

/* Examples tab — card grid. Cards reuse the design system's white
   panel + subtle border treatment. */
.docs-examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.docs-example-card {
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.docs-example-tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}
.docs-example-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
}
.docs-example-body {
    margin-top: 4px;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Disabled search input inside the docs Help tab — visually consistent
   with active filter searches, just muted. */
.docs-pane .filter-search:disabled {
    background: #f7f8fa;
    color: var(--text-muted);
    cursor: not-allowed;
}

/* (Legacy .docs-manual responsive rule removed — replaced by the
   new TOC styles above which include their own @media block.) */

/* ============ Software overview tab ============ */
/* Lives inside the standard .card-list white container like the
   other documentation tabs — no max-width override, no nested cards. */

.docs-software {
    display: flex;
    flex-direction: column;
}

/* --- Intro --- */
.ds-intro {
    padding: 4px 0 24px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
}
.ds-headline {
    font-size: 1.45rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--text-main);
    margin: 0 0 14px 0;
    letter-spacing: -0.012em;
    max-width: 760px;
}
.ds-lead-secondary {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 760px;
}

/* --- Sections --- */
.ds-section {
    padding: 44px 0 4px;
}
.ds-section-head { margin-bottom: 24px; }
.ds-eyebrow-sm {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 5px 12px;
    background: var(--bg-body);
    border-radius: 30px;
    margin-bottom: 14px;
}
.ds-section h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    line-height: 1.3;
    color: var(--text-main);
    letter-spacing: -0.005em;
}
.ds-section .ds-section-lead {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    max-width: 660px;
}

/* --- 03: Specialist behaviour features --- */
.ds-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.ds-feature {
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 22px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.18s ease, transform 0.18s ease;
}
.ds-feature:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.ds-feature-icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--accent-dim);
    color: #b45309;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}
.ds-feature h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 2px 0 0 0;
    color: var(--text-main);
    letter-spacing: -0.005em;
}
.ds-feature p {
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
    color: var(--text-muted);
}

/* --- 01: Pillars --- */
.ds-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.ds-pillar {
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.ds-pillar:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}
.ds-pillar-icon {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--accent-dim);
    color: #b45309;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.ds-pillar h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 4px 0 0 0;
    color: var(--text-main);
}
.ds-pillar p {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
}

/* --- 02: ChatGPT section (in-flow, no nested card) --- */
.ds-section-dark {
    padding: 44px 0 4px;
    margin: 0;
    border-top: 1px solid var(--border-subtle);
    margin-top: 8px;
}
.ds-section-dark .ds-dark-body {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-main);
    margin: 0 0 20px 0;
    max-width: 760px;
}

.ds-chips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 0 0 28px;
}
.ds-chip-tile {
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 14px 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: border-color 0.18s ease;
}
.ds-chip-tile:hover { border-color: var(--accent); }
.ds-chip-tile > i {
    font-size: 1.25rem;
    color: #b45309;
    margin-top: 1px;
    flex-shrink: 0;
}
.ds-chip-tile strong {
    display: block;
    font-size: 0.92rem;
    color: var(--text-main);
    margin-bottom: 3px;
}
.ds-chip-tile span {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Cost (light) */
.ds-cost { margin-top: 4px; }
.ds-cost-head h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-main);
}
.ds-cost-context {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0 0 14px 0;
}
.ds-cost-table {
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    overflow: hidden;
}
.ds-cost-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
}
.ds-cost-table thead th {
    text-align: left;
    background: var(--bg-body);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border-subtle);
}
.ds-cost-table thead th:not(:first-child),
.ds-cost-table tbody td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ds-cost-table tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-main);
    vertical-align: middle;
}
.ds-cost-sub {
    display: block;
    font-size: 0.77rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 2px;
}
.ds-cost-best td {
    background: var(--accent-dim);
    color: #92400e;
    font-weight: 500;
}
.ds-cost-best td strong { color: #92400e; }
.ds-cost-best td .ds-cost-sub { color: #b45309; opacity: 0.9; }
.ds-cost-worst td {
    color: var(--text-muted);
}
.ds-cost-group td {
    background: #f9fafb;
    padding: 8px 16px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle);
}
.ds-cost-group-sub {
    margin-left: 8px;
    color: var(--text-muted);
    opacity: 0.7;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.2px;
    font-size: 0.72rem;
}
.ds-cost-single td {
    color: var(--text-muted);
}
.ds-cost-single td .ds-cost-sub {
    color: var(--text-muted);
    opacity: 0.7;
    font-style: italic;
}
.ds-cost-note {
    font-size: 0.93rem;
    line-height: 1.6;
    color: var(--text-main);
    margin: 16px 0 0 0;
    max-width: 760px;
}
.ds-cost-note strong { color: var(--text-main); }

.ds-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--bg-body);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 22px;
}
.ds-note > i { color: #b45309; font-size: 1.15rem; margin-top: 1px; flex-shrink: 0; }
.ds-note p { margin: 0; color: var(--text-main); font-size: 0.92rem; line-height: 1.55; }
.ds-note strong { color: var(--text-main); }

/* --- Pipeline stats row --- */
.ds-pipe-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.ds-pipe-stats > div {
    background: var(--bg-body);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: center;
}
.ds-pipe-stats strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.1;
}
.ds-pipe-stats span {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 4px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Worked example (in-flow, no nested card) --- */
.ds-section-soft {
    padding: 44px 0 4px;
    margin: 0;
    border-top: 1px solid var(--border-subtle);
    margin-top: 8px;
}
.ds-bubble {
    max-width: 78%;
    padding: 14px 18px;
    border-radius: 18px;
    line-height: 1.55;
    margin-bottom: 14px;
}
.ds-bubble p { margin: 0; font-size: 0.97rem; }
.ds-bubble-meta {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 6px;
    font-weight: 600;
    opacity: 0.7;
}
.ds-bubble-user {
    background: white;
    border: 1px solid var(--border-subtle);
    margin-right: auto;
    border-bottom-left-radius: 4px;
}
.ds-bubble-char {
    background: var(--accent);
    color: var(--text-on-accent);
    margin-left: auto;
    border-bottom-right-radius: 4px;
}
.ds-bubble-char .ds-bubble-meta { opacity: 0.55; }

.ds-trace {
    background: var(--bg-body);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 4px 0 18px;
    font-size: 0.85rem;
    position: relative;
}
.ds-trace::before {
    content: "pipeline trace";
    position: absolute;
    top: -9px;
    left: 16px;
    background: white;
    color: var(--text-muted);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    padding: 0 8px;
}
.ds-trace-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--border-subtle);
}
.ds-trace-row:last-child { border-bottom: none; }
.ds-trace-row > span {
    color: #b45309;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    font-weight: 600;
    padding-top: 2px;
}
.ds-trace-row > p {
    margin: 0;
    color: var(--text-main);
    line-height: 1.55;
}

.ds-compare {
    margin-top: 24px;
    padding: 18px 20px;
    background: white;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    font-size: 0.9rem;
}
.ds-compare-label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.ds-compare p {
    margin: 0 0 10px;
    color: var(--text-muted);
    line-height: 1.6;
}
.ds-compare-verdict {
    font-size: 0.85rem;
    color: #b45309;
    font-weight: 500;
}

/* --- 04: Research grid --- */
.ds-research-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.ds-research {
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ds-research:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.ds-research-tag {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: var(--bg-body);
    padding: 4px 11px;
    border-radius: 20px;
    font-variant-numeric: tabular-nums;
}
.ds-research h3 {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 2px 0 0 0;
    color: var(--text-main);
    letter-spacing: -0.005em;
}
.ds-research p {
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
    color: var(--text-muted);
    flex: 1;
}
.ds-research-cite {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    border-top: 1px solid var(--border-subtle);
    padding-top: 10px;
    margin-top: 4px;
}

/* --- Honest claim close (in-flow, left accent only) --- */
.ds-claim {
    border-left: 3px solid var(--accent);
    padding: 4px 0 4px 20px;
    margin: 44px 0 8px;
}
.ds-claim h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--text-main);
    letter-spacing: -0.005em;
}
.ds-claim p {
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--text-main);
    max-width: 740px;
    margin: 0 0 10px 0;
}
.ds-claim p:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
    .ds-hero { padding: 36px 26px; }
    .ds-title { font-size: 1.55rem; }
    .ds-section-dark,
    .ds-section-soft,
    .ds-claim { padding: 36px 24px; }
    .ds-pillars,
    .ds-chips-grid,
    .ds-research-grid,
    .ds-features-grid,
    .ds-pipe-stats { grid-template-columns: 1fr; }
    .ds-pipe-step { grid-template-columns: 1fr; gap: 6px; padding: 16px 18px; }
    .ds-bubble { max-width: 100%; }
    .ds-trace-row { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
    .ds-section h2 { font-size: 1.4rem; }
}

/* Pipeline: vertical list with always-visible descriptions */
.ds-pipe-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 8px 0;
    background: white;
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    overflow: hidden;
}
.ds-pipe-step {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 24px;
    padding: 20px 22px;
    border-top: 1px solid var(--border-subtle);
    align-items: start;
}
.ds-pipe-step:first-child { border-top: none; }
.ds-pipe-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ds-pipe-num {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.ds-pipe-name {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.005em;
}
.ds-pipe-desc {
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0;
    max-width: 640px;
}

/* =====================================================================
   Voice side-panel (#panel-audio) — pieces UNIQUE to the voice mode.
   Markup in templates/shell.html, wired by /static/panel_voice.js.
   The shared chat/voice form + bubble styles are in the chat panel
   section above (each rule lists both #panel-chat and #panel-audio).
   What lives here is the audio-only surface: visualizer, record
   button, recording state, subtitle overlay, VAD-knob layout.
   ===================================================================== */

/* The active-session body fills the panel height so the focal stage
   (visualizer + subtitle) sits in the visual centre, with the session
   bar pinned to the top and the toggle button row at the bottom. */
#panel-audio .voice-active-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 18px 18px 0 18px;
    gap: 14px;
}
#panel-audio .voice-session-bar { flex-shrink: 0; }
#panel-audio .voice-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 12px 8px;
    position: relative;
}

/* Small caption above the subtitle showing the visitor's transcribed
   utterance — quiet styling, this is confirmation that the system
   understood them, not the main signal. */
#panel-audio .voice-transcript-line {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-style: italic;
    text-align: center;
    min-height: 1.1em;
    max-width: 36ch;
    line-height: 1.35;
    opacity: 0.85;
}

#panel-audio .voice-instruction-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    min-height: 1.2em;
    line-height: 1.3;
    transition: color 180ms ease;
}
#panel-audio.is-recording .voice-instruction-text {
    color: var(--accent);
    font-weight: 600;
}

/* Visualizer — circle whose scale tracks live mic level (set by JS as
   inline `transform: scale(...)`) and whose colour reflects state via
   parent classes (.is-recording / .is-playing). The fixed 110px size
   leaves room for the scaled-up listening state without clipping
   the panel. */
#panel-audio .voice-visualizer-wrapper {
    display: flex; align-items: center; justify-content: center;
    /* Bigger focal area now that the bubble log is gone. */
    height: 220px;
}
#panel-audio .voice-visualizer-circle {
    width: 170px; height: 170px;
    border-radius: 50%;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.04);
    transition: transform 80ms ease-out,
                background 200ms ease,
                box-shadow 200ms ease,
                border-color 200ms ease;
}
#panel-audio.is-recording .voice-visualizer-circle {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 6px var(--accent-dim, rgba(249, 189, 17, 0.25));
}
#panel-audio.is-playing .voice-visualizer-circle {
    background: #fffbeb;
    border-color: #fde68a;
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.12);
}
#panel-audio.is-processing .voice-visualizer-circle {
    background: #f3f4f6;
    border-color: #e5e7eb;
    animation: voice-pulse-soft 1.4s ease-in-out infinite;
}
@keyframes voice-pulse-soft {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04); opacity: 0.8; }
    50%      { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.06); opacity: 1; }
}

/* Subtitle — what the character is saying while audio plays. Bigger
   text size than the chat panel's analytics text because this IS the
   primary content of the panel during playback. */
#panel-audio .voice-subtitle-overlay {
    color: var(--text-muted);
    font-style: italic;
    font-size: 1.0rem;
    line-height: 1.45;
    min-height: 1.45em;
    text-align: center;
    max-width: 38ch;
    margin: 0 auto;
    transition: color 200ms ease, opacity 200ms ease;
    /* The subtitle can grow several lines for long responses — let it
       scroll inside the focal area rather than push the layout. */
    max-height: 9em;
    overflow-y: auto;
}
#panel-audio.is-playing .voice-subtitle-overlay {
    color: var(--text-main);
}

/* Bottom control row — one big toggle button + status hint. The
   button is the ONLY control during a session, so it's prominent. */
#panel-audio .voice-input-area {
    padding: 16px 20px 18px;
    background: white;
    border-top: 1px solid var(--border-subtle);
}
#panel-audio .voice-control-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
#panel-audio .btn-voice-toggle {
    background: var(--accent);
    color: var(--text-on-accent, white);
    border: none;
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
    transition: transform 120ms ease, box-shadow 200ms ease,
                background 200ms ease;
    user-select: none;
    -webkit-user-select: none;
}
#panel-audio .btn-voice-toggle:hover { transform: scale(1.04); }
#panel-audio .btn-voice-toggle:active { transform: scale(0.96); }
#panel-audio .btn-voice-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
/* While active (listening / processing / playing) the toggle becomes
   the pause control — neutral dark slate that reads as "tap to stop"
   without the alarm-bell connotation of bright red. The listening
   state pulses in the accent colour so the visitor still gets a
   subtle "mic is hot" cue, but the surrounding glow is quiet enough
   to ignore. */
#panel-audio .btn-voice-toggle.is-active {
    background: var(--text-main, #1f2937);
    color: white;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10),
                0 0 0 0 rgba(249, 189, 17, 0);
}
#panel-audio.is-recording .btn-voice-toggle.is-active {
    animation: voice-record-pulse 1.6s ease-out infinite;
}
@keyframes voice-record-pulse {
    0%   { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10),
                       0 0 0 0  var(--accent-dim, rgba(249, 189, 17, 0.35)); }
    70%  { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10),
                       0 0 0 14px rgba(249, 189, 17, 0); }
    100% { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.10),
                       0 0 0 0  rgba(249, 189, 17, 0); }
}
#panel-audio .voice-status-hint {
    color: var(--text-muted);
    font-size: 0.78rem;
    max-width: 22ch;
    line-height: 1.3;
}

/* VAD knobs — rendered by panel_voice.js into #voice-vad-knobs from
   the response of /voice/user-settings. Layout matches the rest of
   the panel-field cards. The source pill mirrors .panel-optional-tag
   but flips colour when the user has overridden the baseline. */
#panel-audio .voice-vad-knob {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
}
#panel-audio .voice-vad-knob:last-child { margin-bottom: 0; }
#panel-audio .voice-vad-knob-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
#panel-audio .voice-vad-knob-label {
    font-size: 0.8rem; font-weight: 600; color: var(--text-main);
    flex: 1; min-width: 0;
}
#panel-audio .voice-vad-knob-value {
    background: var(--accent);
    color: var(--text-on-accent, white);
    font-family: monospace;
    font-size: 0.72rem; font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    min-width: 38px; text-align: center;
}
#panel-audio .voice-vad-source-pill {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}
#panel-audio .voice-vad-source-pill[data-source="user"],
#panel-audio .voice-vad-source-pill.is-override {
    background: var(--accent-dim, #fef3c7);
    color: #92400e;
    border-color: #fde68a;
}
#panel-audio .voice-vad-knob input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

/* Small empty-state status row in the VAD knobs panel before they
   load (or if the GET fails). */
#panel-audio .voice-vad-loading {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-style: italic;
    padding: 6px 0;
}

/* Live VAD test meter inside the Advanced section of the voice panel.
   Shows real-time mic RMS as a horizontal bar with two vertical marks
   for the speech / silence thresholds, plus a state label and silence
   countdown so authors can SEE whether their voice actually crosses
   the thresholds when they adjust the sliders below. */
#panel-audio .voice-vad-meter {
    padding: 10px 12px;
    background: var(--bg-body);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    margin-bottom: 14px;
}
#panel-audio .voice-vad-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
#panel-audio .voice-vad-meter-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 600;
}
#panel-audio .voice-vad-meter-state {
    font-family: monospace;
    font-size: 0.78rem;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: white;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    transition: background 150ms ease, color 150ms ease,
                border-color 150ms ease;
}
#panel-audio .voice-vad-meter-state[data-state="speech"] {
    background: var(--accent);
    color: var(--text-on-accent, white);
    border-color: var(--accent);
    font-weight: 700;
}
#panel-audio .voice-vad-meter-state[data-state="silence"] {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}
#panel-audio .voice-vad-meter-state[data-state="mid"] {
    background: #fffbeb;
    color: #92400e;
    border-color: #fde68a;
}
#panel-audio .voice-vad-meter-bar {
    position: relative;
    height: 14px;
    background: linear-gradient(to right, #f3f4f6 0%, #fde68a 60%, #fca5a5 100%);
    border-radius: 4px;
    overflow: visible;
    border: 1px solid var(--border-subtle);
}
#panel-audio .voice-vad-meter-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--text-main);
    border-radius: 3px 0 0 3px;
    width: 0%;
    transition: width 60ms linear;
    opacity: 0.85;
}
#panel-audio .voice-vad-meter-mark {
    position: absolute;
    top: -3px; bottom: -3px;
    width: 2px;
    border-radius: 1px;
    pointer-events: none;
    /* Tiny label below the mark, set via ::after pseudo so the mark
       itself stays a thin line. */
}
#panel-audio .voice-vad-meter-mark-silence {
    background: #6b7280;
}
#panel-audio .voice-vad-meter-mark-speech {
    background: #92400e;
}
#panel-audio .voice-vad-meter-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    font-size: 0.72rem;
    color: var(--text-muted);
}
#panel-audio .voice-vad-meter-legend .dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
#panel-audio .voice-vad-meter-legend .dot-silence { background: #6b7280; }
#panel-audio .voice-vad-meter-legend .dot-speech  { background: #92400e; }
#panel-audio .voice-vad-meter-countdown {
    margin-left: auto;
    font-family: monospace;
    color: var(--accent);
}

/* (Diagnostic-readout block removed — it served its debug purpose
   while the audio playback chain was being fixed. console.debug
   traces from panel_voice.js remain for devtools-driven debugging.) */