/* ============================================================
   GAME DESIGNER'S HUB — Dark Theme / Deep Sea Blue
   ============================================================ */

:root {
    --bg-base:          #060b14;
    --bg-surface:       #0b1220;
    --bg-card:          #0e1929;
    --bg-card-hover:    #111f33;
    --bg-sidebar:       #080e1a;

    --blue-deep:        #0d3b6e;
    --blue-mid:         #1560a8;
    --blue-bright:      #1e80e8;
    --blue-glow:        rgba(30, 128, 232, 0.15);
    --blue-glow-strong: rgba(30, 128, 232, 0.30);

    --red:              #c0392b;
    --red-hover:        #e74c3c;

    --text-primary:     #ddeeff;
    --text-secondary:   #6e90b8;
    --text-muted:       #3a5270;

    --border:           #112240;
    --border-active:    #1560a8;

    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  18px;
    --transition: all 0.22s ease;

    /* Content type colors */
    --type-note:     #7c4dcd;
    --type-image:    #1a9e7a;
    --type-link:     #d4881e;
    --type-document: #1e64cc;
    --type-video:    #cc2244;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; overflow: hidden; }

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-base);
    color: var(--text-primary);
    display: flex;
}

a { text-decoration: none; color: inherit; }

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
    width: 220px;
    min-width: 220px;
    height: 100vh;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    z-index: 10;
    overflow-y: auto;
}

.sidebar::-webkit-scrollbar { width: 0; }

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 28px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
    flex-shrink: 0;
    /* Reset <button> defaults so it visually matches the previous <div> */
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
/* Hover only re-tints the WORD -- no rectangle/background flood. The button
   spans the full sidebar width (so the click target is generous) but the
   hover-affordance stays scoped to the visible "Game Hub" text. */
.sidebar-logo:hover .logo-text { color: var(--blue-bright); }
.sidebar-logo:focus-visible    { outline: none; }
.sidebar-logo:focus-visible .logo-text { text-decoration: underline; }

.logo-icon {
    font-size: 22px;
    color: var(--blue-bright);
    text-shadow: 0 0 12px var(--blue-bright);
}

.logo-text { font-size: 15px; font-weight: 600; letter-spacing: 0.5px; transition: color 0.15s; }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px;
    flex: 1;
}

/* Nav section wrapper for collapsible */
.nav-section { display: flex; flex-direction: column; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid transparent;
    position: relative;
}

.nav-item:hover {
    background-color: var(--blue-glow);
    color: var(--text-primary);
    border-color: var(--border-active);
}

.nav-item.active {
    background-color: var(--blue-glow-strong);
    color: var(--blue-bright);
    border-color: var(--blue-mid);
    box-shadow: 0 0 14px rgba(30, 128, 232, 0.1);
}

.nav-icon { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.nav-label { flex: 1; }

.nav-arrow {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    display: inline-block;
}

.nav-arrow.open { transform: rotate(90deg); }

/* Sidebar sub-items (project list) */
.nav-subitems {
    display: none;
    flex-direction: column;
    gap: 1px;
    padding: 2px 0 6px 0;
}

.nav-subitems.open { display: flex; }

.nav-subitem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 36px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-subitem:hover { color: var(--text-primary); background: var(--blue-glow); }
.nav-subitem.active { color: var(--blue-bright); }

.nav-subitem-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 14px 20px 0 20px;
    border-top: 1px solid var(--border);
    margin-top: 12px;
    flex-shrink: 0;
}

.sidebar-footer-text { font-size: 11px; color: var(--text-muted); letter-spacing: 0.5px; }

/* ============================================================
   MAIN WRAPPER + TAB BAR
   ============================================================ */

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Tab bar */
.tab-bar {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border);
    height: 40px;
    display: none;
    align-items: stretch;
    flex-shrink: 0;
}

.tab-bar.visible { display: flex; }

.tabs-scroll {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    flex: 1;
}

.tabs-scroll::-webkit-scrollbar { height: 0; }

.tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    min-width: 120px;
    max-width: 200px;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.tab:hover { background: var(--blue-glow); color: var(--text-secondary); }

.tab.active {
    background: var(--bg-base);
    color: var(--text-primary);
    border-bottom: 2px solid var(--blue-bright);
}

.tab-thumb {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.tab-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.tab-close {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    transition: var(--transition);
}

.tab-close:hover { background: rgba(192,57,43,0.25); color: var(--red-hover); }

/* ============================================================
   MAIN CONTENT
   ============================================================ */

.main {
    flex: 1;
    overflow-y: auto;
    background-color: var(--bg-base);
}

.main::-webkit-scrollbar { width: 6px; }
.main::-webkit-scrollbar-track { background: var(--bg-base); }
.main::-webkit-scrollbar-thumb { background: var(--blue-deep); border-radius: 10px; }

.space { display: none; padding: 36px 44px; animation: fadeIn 0.2s ease; }
/* Active space fills the FULL visible area of .main (the scrollable parent).
   Previously the section was only as tall as its content -- so a project
   with one or two cards left the right + bottom of the visible page outside
   `#space-project-detail`, which meant right-clicks there hit the browser's
   own context menu instead of the in-app "Add content" flyout. Filling the
   viewport makes the entire perceived project area right-clickable. */
.space.active {
    display: block;
    min-height: 100%;
    box-sizing: border-box;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.space-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
}

.space-title { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; line-height: 1; margin-bottom: 6px; }
/* Inline project-title rename: pencil icon hides until hover so it doesn't
   clutter the header, then fades in when the user is near the title. */
.project-title-wrap { display: inline-flex; align-items: center; gap: 8px; }
.project-title-wrap .space-title { display: inline-block; margin-bottom: 0; }
.project-title-edit {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 13px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.project-title-wrap:hover .project-title-edit { opacity: 1; }
.project-title-edit:hover { color: var(--blue-bright); border-color: var(--blue-mid); }
.project-title-input {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--blue-mid);
    border-radius: 6px;
    padding: 2px 8px;
    outline: none;
    min-width: 200px;
}
.project-title-input:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 2px var(--blue-glow); }
.space-subtitle { font-size: 13px; color: var(--text-secondary); }

/* ============================================================
   FILTER BAR
   ============================================================ */

.filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.search-wrap {
    position: relative;
    flex: 1;
    min-width: 160px;
    max-width: 300px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
}

.search-input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    padding: 8px 12px 8px 34px;
    outline: none;
    transition: var(--transition);
}

.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px var(--blue-glow); }

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

.filter-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    transition: var(--transition);
}

.filter-pill:hover { border-color: var(--blue-mid); color: var(--text-secondary); }

.filter-pill.active {
    background: var(--blue-glow-strong);
    border-color: var(--blue-mid);
    color: var(--blue-bright);
}

/* Visual divider between base type pills and template pills */
.filter-pills-divider {
    width: 1px;
    height: 22px;
    background: var(--border);
    margin: 0 2px;
    flex-shrink: 0;
    align-self: center;
}

/* Template filter pills — slightly distinct from base pills */
.filter-pill-template {
    border-color: rgba(255,255,255,0.08);
    font-size: 11.5px;
}
.filter-pill-template:hover {
    border-color: rgba(255,255,255,0.2);
}
.filter-pill-template.active {
    background: rgba(155,89,182,0.18);
    border-color: rgba(155,89,182,0.6);
    color: #c39bd3;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn-primary {
    background: linear-gradient(135deg, var(--blue-mid), var(--blue-deep));
    color: var(--text-primary);
    border: 1px solid var(--blue-mid);
    border-radius: var(--radius-md);
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--blue-bright), var(--blue-mid));
    box-shadow: 0 0 18px var(--blue-glow-strong);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}

.btn-secondary:hover { color: var(--text-primary); border-color: var(--blue-mid); background: var(--blue-glow); }

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: var(--radius-md);
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}

.btn-ghost:hover { color: var(--text-primary); background: var(--blue-glow); }

.btn-danger {
    background: var(--red);
    color: #fff;
    border: 1px solid var(--red);
    border-radius: var(--radius-md);
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}

.btn-danger:hover { background: var(--red-hover); box-shadow: 0 0 14px rgba(192,57,43,0.4); }

.btn-back {
    background: transparent;
    color: var(--text-muted);
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin-bottom: 8px;
    display: block;
    transition: var(--transition);
}

.btn-back:hover { color: var(--blue-bright); }
.header-actions { display: flex; gap: 10px; align-items: center; }

/* ============================================================
   CARDS GRID
   ============================================================ */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}

/* ============================================================
   PROJECT CARD
   ============================================================ */

.project-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: visible;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.project-card:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--blue-mid);
    box-shadow: 0 0 24px var(--blue-glow), 0 4px 20px rgba(0,0,0,0.4);
    transform: translateY(-3px);
}

.project-card.empty-state {
    border-style: dashed;
    opacity: 0.4;
    cursor: default;
    overflow: hidden;
}

.project-card.empty-state:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--border);
    background-color: var(--bg-card);
}

.card-thumbnail-wrap {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    position: relative;
}

.card-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--bg-surface);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.empty-thumbnail { background: linear-gradient(135deg, var(--bg-surface), var(--blue-deep)); }
.empty-icon { font-size: 28px; color: var(--text-muted); opacity: 0.5; }

.card-info { padding: 13px 15px; display: flex; flex-direction: column; gap: 4px; }

.card-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-meta { font-size: 11px; color: var(--text-muted); }

/* Three-dot menu — positioned relative to .project-card (not thumbnail wrap) */
.card-menu-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: rgba(6, 11, 20, 0.8);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
    z-index: 20;
    letter-spacing: 1px;
    backdrop-filter: blur(4px);
}

.project-card:hover .card-menu-btn { opacity: 1; }
.card-menu-btn:hover { background: var(--blue-deep); border-color: var(--blue-mid); color: var(--text-primary); }

.card-dropdown {
    position: absolute;
    top: 40px;
    right: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-md);
    min-width: 160px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px var(--blue-glow);
    z-index: 100;
    overflow: hidden;
    display: none;
}

.card-dropdown.open { display: block; animation: dropIn 0.15s ease; }

@keyframes dropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    background: transparent;
    width: 100%;
    font-family: 'Inter', sans-serif;
    text-align: left;
}

.dropdown-item:hover { background: var(--blue-glow); color: var(--text-primary); }
/* Danger items (e.g. Delete) read red even at rest, so the user sees the
   destructive option as different at a glance. Hover deepens the red. */
.dropdown-item.danger { color: var(--red, #d65555); }
.dropdown-item.danger:hover { background: rgba(192,57,43,0.18); color: var(--red-hover, #ff7f7f); }
.dropdown-divider { height: 1px; background: var(--border); margin: 2px 0; }

/* ============================================================
   CONTENT CARDS (inside project)
   ============================================================ */

.content-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
}

.content-card:hover {
    background-color: var(--bg-card-hover);
    border-color: var(--blue-mid);
    box-shadow: 0 0 20px var(--blue-glow), 0 4px 16px rgba(0,0,0,0.4);
    transform: translateY(-3px);
}

/* Drag-to-reorder states */
.content-card.card-dragging {
    opacity: 0.4;
    transform: scale(0.97);
    cursor: grabbing;
}
.content-card.card-drag-over {
    border-color: var(--blue-bright) !important;
    box-shadow: 0 0 0 2px var(--blue-glow-strong), 0 0 20px var(--blue-glow) !important;
    transform: translateY(-3px) scale(1.01);
}

/* Small ghost pill shown during card drag — consistent for all card types */
.card-drag-ghost {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--blue-mid);
    border-radius: 20px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 12px var(--blue-glow);
    opacity: 0.92;
}

/* Colored type strip at top */
.content-card-strip {
    height: 3px;
    width: 100%;
    flex-shrink: 0;
}

.content-card-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

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

/* Annotated image thumbnails switch to object-fit:contain so the SVG
   overlay (which uses 0-100% image-relative coordinates) lines up with
   the visible image, instead of having the image cropped under the
   overlay. Letterboxing is fine at thumbnail scale and is a clear "this
   is an annotated image" visual cue on its own. */
.content-card-thumb-img-annotated { object-fit: contain !important; background: rgba(0,0,0,0.4); }
.content-card-ann-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
/* Painted 2:3 character portraits — bias upward so the face shows, not the chest.
   Class is added by buildContentCard() in main.js when the item is a character with a portrait. */
.content-card-thumb img.content-card-portrait { object-position: 50% 15%; }

.content-card-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.content-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.content-card-preview {
    font-size: 11.5px;
    color: var(--text-muted);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.5;
}

/* Type badge — pill with color */
.content-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 20px;
    margin-top: 4px;
    width: fit-content;
}

/* Delete button on content cards */
.content-card-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: rgba(6, 11, 20, 0.8);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
    backdrop-filter: blur(4px);
    z-index: 3;
}

.content-card:hover .content-card-delete { opacity: 1; }
.content-card-delete:hover { background: rgba(192,57,43,0.3); color: var(--red-hover); border-color: var(--red); }

/* ============================================================
   GRADIENT THUMBNAIL PICKER
   ============================================================ */

.gradient-picker { display: flex; flex-direction: column; }

.picker-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.gradient-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.gradient-swatch {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.gradient-swatch:hover { transform: scale(1.04); border-color: var(--blue-bright); }

.gradient-swatch.selected {
    border-color: var(--blue-bright);
    box-shadow: 0 0 0 3px var(--blue-glow-strong);
}

.gradient-swatch.selected::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.3);
}

.swatch-label {
    font-size: 9px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-align: center;
    padding: 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ============================================================
   MODAL
   ============================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 18, 0.85);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
    background: var(--bg-card);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-lg);
    width: 500px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(21,96,168,0.2), 0 20px 60px rgba(0,0,0,0.6);
    transform: translateY(14px) scale(0.98);
    transition: transform 0.22s ease;
}

.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-sm { width: 400px; }

.modal::-webkit-scrollbar { width: 4px; }
.modal::-webkit-scrollbar-thumb { background: var(--blue-deep); border-radius: 4px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 22px 16px 22px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
}

.modal-title { font-size: 16px; font-weight: 700; }

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    font-family: 'Inter', sans-serif;
}

.modal-close:hover { color: var(--text-primary); background: var(--blue-glow); }

.modal-body { padding: 22px; display: flex; flex-direction: column; }
.modal-footer { padding: 0 22px 22px 22px; display: flex; justify-content: flex-end; gap: 10px; }
.modal-text { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.modal-text strong { color: var(--text-primary); }

/* Form elements */
.form-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}

.required { color: var(--blue-bright); }
.optional  { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }

.form-input {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 11px 13px;
    outline: none;
    transition: var(--transition);
    resize: none;
}

.form-input::placeholder { color: var(--text-secondary); opacity: 0.55; }
.form-input:focus { border-color: var(--blue-mid); box-shadow: 0 0 0 3px var(--blue-glow); }
.form-textarea { min-height: 90px; }
.form-textarea-lg { min-height: 130px; }

/* Type picker */
.type-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }

.type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    font-family: 'Inter', sans-serif;
}

.type-btn:hover { border-color: var(--blue-mid); background: var(--blue-glow); transform: translateY(-2px); }
.type-icon { font-size: 24px; }
.type-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.type-btn:hover .type-label { color: var(--text-primary); }

/* ── Game template section in Add Content modal ── */
.type-picker-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.type-picker-divider::before,
.type-picker-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.type-picker-divider span { white-space: nowrap; }

.type-picker-templates {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}

.type-btn-template {
    border-color: rgba(255,255,255,0.06) !important;
}
.type-btn-template:hover {
    border-color: rgba(255,255,255,0.18) !important;
}

.content-form { display: flex; flex-direction: column; }
.content-form.hidden { display: none; }

/* ── Character Creation Form ─────────────────────────────────── */
/* Widen the modal when showing the character or GDD form */
#modal-add-content:has(#form-character:not(.hidden)) .modal { width: 640px; }
#modal-add-content:has(#form-gdd:not(.hidden)) .modal { width: 640px; }
.char-creation-form { gap: 0; }
.gdd-creation-form  { gap: 0; }

/* GDD template checkbox */
.gdd-template-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 0 2px;
    cursor: pointer; user-select: none;
}
.gdd-template-opt input[type="checkbox"] {
    accent-color: var(--blue-bright);
    width: 14px; height: 14px; flex-shrink: 0; cursor: pointer;
}
.gdd-template-label {
    font-size: 12.5px; color: var(--text-secondary);
}
.gdd-template-label .optional { margin-left: 4px; }

/* GDD cover upload — wider than portrait (16:9-ish) */
.gdd-cover-upload {
    width: 160px !important;
    height: 90px  !important;
    border-radius: 10px !important;
}

.char-form-top {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}

.char-portrait-upload {
    width: 110px;
    height: 110px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 2px dashed var(--border);
    cursor: pointer;
    overflow: hidden;
    position: relative;
    background: var(--bg-hover);
    transition: border-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.char-portrait-upload:hover { border-color: var(--accent); }
.char-portrait-placeholder { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.char-portrait-icon { font-size: 32px; }
.char-portrait-hint { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
/* object-position: 50% 15% — character portraits are typically painted as 2:3 head-and-shoulders frames where the head sits in the upper third. Default `center` would crop the face out and show only the chest; `50% 15%` keeps the face visible while still cropping the lower body where needed. */
.char-portrait-preview { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; position: absolute; inset: 0; }

.char-form-identity { flex: 1; display: flex; flex-direction: column; gap: 0; }
.char-form-identity .form-label { margin-top: 0; font-size: 10px; }
.char-form-identity .form-input { padding: 7px 10px; font-size: 13px; }

.char-form-section { margin-bottom: 14px; }
.char-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border);
}

.char-form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.char-form-field { display: flex; flex-direction: column; gap: 4px; }
.form-textarea-sm { min-height: 60px; font-size: 12px; resize: vertical; }

.char-stats-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.char-stat-row { display: flex; gap: 8px; align-items: center; }
.char-stat-label-wrap { display: flex; align-items: center; gap: 4px; flex: 1; }
.char-stat-label { flex: 1; }
.char-stat-value { width: 100px; }
.char-stat-remove {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; padding: 0 4px; line-height: 1;
    transition: color 0.15s;
}
.char-stat-remove:hover { color: #ff5555; }

/* Pin button — saves stat to project template */
.char-stat-pin {
    background: none; border: none; cursor: pointer;
    font-size: 12px; padding: 0 3px; line-height: 1;
    opacity: 0.3; transition: opacity 0.15s, transform 0.15s;
    position: relative;
}
.char-stat-pin:hover { opacity: 0.7; transform: rotate(-20deg); }
.char-stat-pin.active { opacity: 1; }

/* Generic data-tooltip: styled hover tooltip */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    white-space: normal;
    width: 220px;
    text-align: left;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 999;
}
[data-tooltip]:hover::after { opacity: 1; }

/* Highlight pinned stat rows subtly */
.char-stat-pinned .char-stat-label {
    border-color: rgba(30,128,232,0.3) !important;
}

.char-add-stat-btn {
    background: none;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 12px;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.15s, color 0.15s;
}
.char-add-stat-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Character Sheet Viewer ──────────────────────────────────── */
/* z-index 1200 keeps these sheets ABOVE an open GDD (z=1100), so a
   reference clicked from inside a GDD opens in front, not behind. */
.char-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 18, 0.85);
    backdrop-filter: blur(6px);
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
}
.char-sheet-overlay.open { display: flex; }

.char-sheet-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: min(960px, 95vw);
    height: min(700px, 85vh);
    min-width: 480px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    position: relative;
}

/* Disable text selection only while actively dragging the resize handle */
.char-sheet-panel.cs-resizing,
.char-sheet-panel.cs-resizing * {
    user-select: none !important;
    cursor: se-resize !important;
}

/* Resize handle — bottom-right corner */
.cs-resize-handle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 26px;
    height: 26px;
    cursor: se-resize;
    z-index: 20;
    border-radius: 0 0 16px 0;
    /* Slight background so it's distinct from the scrollbar */
    background: linear-gradient(135deg, transparent 50%, rgba(21,96,168,0.18) 100%);
    transition: background 0.15s;
}
.cs-resize-handle:hover,
.char-sheet-panel.cs-resizing .cs-resize-handle {
    background: linear-gradient(135deg, transparent 40%, rgba(30,128,232,0.28) 100%);
}
.cs-resize-handle::after {
    content: '';
    position: absolute;
    bottom: 6px;
    right: 7px;
    width: 9px;
    height: 9px;
    border-right: 2px solid rgba(30,128,232,0.55);
    border-bottom: 2px solid rgba(30,128,232,0.55);
    border-radius: 0 0 2px 0;
    transition: border-color 0.15s;
}
.cs-resize-handle:hover::after,
.char-sheet-panel.cs-resizing .cs-resize-handle::after {
    border-color: var(--blue-bright);
}

.char-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.char-sheet-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.03em;
    flex: 1;
}
.char-sheet-close {
    background: none; border: none; color: var(--text-muted);
    font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
    transition: background 0.15s, color 0.15s; flex-shrink: 0;
}
.char-sheet-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.char-sheet-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    /* Thin custom scrollbar so it doesn't bury the resize handle */
    scrollbar-width: thin;
    scrollbar-color: var(--blue-deep) transparent;
}
.char-sheet-body::-webkit-scrollbar { width: 5px; }
.char-sheet-body::-webkit-scrollbar-track { background: transparent; }
.char-sheet-body::-webkit-scrollbar-thumb { background: var(--blue-deep); border-radius: 4px; }
.char-sheet-body::-webkit-scrollbar-thumb:hover { background: var(--blue-mid); }

.cs-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100%;
}

/* Left column */
.cs-left {
    background: rgba(0,0,0,0.2);
    border-right: 1px solid var(--border);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cs-portrait {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-hover);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    transition: border-color 0.2s;
    font-size: 56px;
    /* Prevent native browser pan/pinch from competing with our cropper drag. */
    touch-action: none;
    user-select: none;
}
.cs-portrait:hover { border-color: var(--accent); }
.cs-portrait.img-cropper-dragging { cursor: grabbing; }
/* See note on .char-portrait-preview — same upper-third bias for portrait paintings.
   This is now a FALLBACK only — characters with portraitOffsetY/portraitZoom set
   override via inline style from characterPortraitStyle() in main.js. */
.cs-portrait-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 15%;
    pointer-events: none;     /* drag should hit .cs-portrait, not the img */
    transition: transform 0.04s linear;
}
.cs-portrait.img-cropper-dragging .cs-portrait-img { transition: none; }

/* Drag-on-portrait + scroll-zoom cropper (restored 2026-05-07).
   The .cs-portrait container itself is the drag target; tools row sits
   below it with hint + zoom readout + Reset + Replace. */
.cs-portrait {
    cursor: grab;
    touch-action: none;     /* prevent native pan/pinch from competing */
    user-select: none;
}
.cs-portrait.img-cropper-dragging,
.cs-portrait:active { cursor: grabbing; }
.cs-portrait .cs-portrait-img {
    pointer-events: none;   /* drag should hit .cs-portrait, not the img */
}

.cs-portrait-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0 0;
    flex-wrap: wrap;
}
.cs-portrait-tools-hint {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    color: #98a0b6;            /* readable but clearly not interactive */
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.cs-portrait-hint-icon {
    color: #d4a847;
    font-weight: 700;
}

.cs-portrait-tools-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.cs-portrait-zoom-readout {
    font-size: 11px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    margin-right: 4px;
    min-width: 36px;
    text-align: right;
}
.cs-portrait-reset-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    color: #eaecf2;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.cs-portrait-reset-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.35);
    transform: translateY(-1px);
}
.cs-portrait-replace-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(212, 168, 71, 0.15);
    border: 1px solid rgba(212, 168, 71, 0.5);
    color: #d4a847;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.cs-portrait-replace-btn:hover {
    background: rgba(212, 168, 71, 0.25);
    border-color: rgba(212, 168, 71, 0.75);
    transform: translateY(-1px);
}
.cs-portrait-replace-icon { font-size: 12px; }

/* ── Reusable image cropper (LinkedIn-style direct manipulation) ──
   Drag-to-position + scroll-to-zoom replaces the old two-slider pattern.
   Generic .img-cropper-* classes so the same component can host the
   character portrait crop, item thumbnails, level map BG, etc. */
.img-cropper {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
  overflow: hidden;
  user-select: none;
}
.img-cropper-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 12px 6px;
  gap: 12px;
}
.img-cropper-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.img-cropper-hint {
  font-size: 10px;
  color: var(--text-faint);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.img-cropper-frame {
  position: relative;
  margin: 0 12px;
  width: calc(100% - 24px);
  aspect-ratio: 1 / 1;
  max-width: 240px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-deep, #0a0e1a);
  border: 1px solid var(--border);
  cursor: grab;
  touch-action: none; /* prevent native pan/pinch from competing with our pointer events */
}
.img-cropper-frame.img-cropper-dragging { cursor: grabbing; }
.img-cropper-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* drag should hit the frame, not the image */
  transition: transform 0.04s linear;
}
.img-cropper-frame.img-cropper-dragging img { transition: none; }
.img-cropper-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 10px;
}
.img-cropper-zoom-readout {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-primary);
  min-width: 42px;
  text-align: right;
}
.img-cropper-reset {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.img-cropper-reset:hover {
  color: var(--text-primary);
  border-color: var(--accent, #d4a847);
}
.cs-portrait-placeholder { font-size: 56px; }

.cs-identity { display: flex; flex-direction: column; gap: 6px; }
.cs-name {
    font-size: 22px;
    font-weight: 700;
    color: #f0f6ff;
    outline: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: border-color 0.15s;
}
.cs-name:focus { border-bottom-color: var(--accent); }
.cs-role {
    font-size: 13px;
    color: #5ba3e0;
    font-weight: 600;
    outline: none;
    min-height: 20px;
}
.cs-role:empty::before { content: attr(data-placeholder); color: var(--text-muted); font-weight: 400; pointer-events: none; }
.cs-concept {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    outline: none;
    min-height: 18px;
    line-height: 1.4;
}
.cs-concept:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }

/* Stats */
.cs-stats-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cs-stat-block {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    position: relative;
}
.cs-stat-label-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.cs-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8aabb8;
    font-weight: 600;
    outline: none;
}
.cs-stat-actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity 0.15s; }
.cs-stat-block:hover .cs-stat-actions { opacity: 1; }
.cs-stat-edit-btn, .cs-stat-remove-btn {
    background: none; border: none; font-size: 11px; cursor: pointer;
    color: var(--text-muted); padding: 2px 3px; border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.cs-stat-edit-btn:hover { color: var(--accent); }
.cs-stat-remove-btn:hover { color: #ff5555; }
.cs-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #e8f0ff;
    outline: none;
    min-height: 28px;
    display: block;
}
.cs-stat-value:empty::before { content: '—'; color: var(--text-muted); font-weight: 400; font-size: 16px; pointer-events: none; }
.cs-add-stat-btn {
    background: none; border: 1px dashed var(--border); color: var(--text-muted);
    border-radius: 6px; padding: 5px; font-size: 11px; cursor: pointer;
    width: 100%; transition: border-color 0.15s, color 0.15s;
}
.cs-add-stat-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Right column */
.cs-right { padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.cs-section { display: flex; flex-direction: column; gap: 10px; }
.cs-section-title {
    /* Brightened 2026-05-12 to match item/quest/mechanic sheets -- was using
       --text-muted which read as nearly invisible. Now uses the character
       sheet's pink accent #e05c8a (same as the type badge) so section
       headers pop just like the other structured sheets. */
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #e05c8a;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.cs-personality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cs-field-block { display: flex; flex-direction: column; gap: 4px; }
.cs-field-label { font-size: 10px; color: var(--text-secondary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.cs-field-text {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #dce8f8;
    outline: none;
    min-height: 60px;
    line-height: 1.5;
    transition: border-color 0.15s;
}
.cs-field-text:empty::before { content: 'Click to edit...'; color: var(--text-muted); pointer-events: none; }
.cs-field-text:focus { border-color: var(--accent); }
.cs-field-text-lg { min-height: 90px; }

/* Visual Notes */
.cs-visual-notes { display: flex; flex-direction: column; gap: 8px; }
.cs-vn-block {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.cs-vn-text { padding: 8px 32px 8px 10px; }
.cs-vn-text-content {
    outline: none;
    font-size: 13px;
    color: #dce8f8;
    min-height: 36px;
    line-height: 1.5;
}
.cs-vn-text-content:empty::before { content: 'Write a note...'; color: var(--text-muted); pointer-events: none; }
.cs-vn-image img { width: 100%; display: block; max-height: 300px; object-fit: cover; }
.cs-vn-remove {
    position: absolute; top: 6px; right: 6px;
    background: rgba(0,0,0,0.6); border: none; color: #fff;
    border-radius: 50%; width: 20px; height: 20px; font-size: 11px;
    cursor: pointer; display: none; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.cs-vn-block:hover .cs-vn-remove { display: flex; }
.cs-vn-remove:hover { background: #cc2244; }

.cs-visual-notes-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-vn-btn {
    /* Match item-vn-btn / quest-vn-btn styling so the toolbar buttons
       read clearly. Was using --text-muted (#3a5270) which all but
       disappeared against the dark background. */
    background: var(--bg-card-hover);
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 11.5px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.cs-vn-btn:hover { border-color: #e05c8a; color: #e05c8a; }

/* Drag handle + drag states for visual notes */
.cs-vn-drag-handle {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.15s;
    line-height: 1;
    padding: 2px;
    z-index: 2;
}
.cs-vn-block:hover .cs-vn-drag-handle { opacity: 1; }
.cs-vn-drag-handle:active { cursor: grabbing; }

/* Shift text content right to make room for drag handle */
.cs-vn-text { padding: 8px 32px 8px 26px; }

.cs-vn-dragging { opacity: 0.4; }
.cs-vn-over {
    border-color: var(--blue-bright) !important;
    box-shadow: 0 0 0 2px var(--blue-glow-strong);
}


.file-drop-zone {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg-surface);
}

.file-drop-zone:hover { border-color: var(--blue-mid); background: var(--blue-glow); }
.file-drop-icon { font-size: 28px; }
.file-drop-text { font-size: 13px; color: var(--text-secondary); text-align: center; }

.file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.file-chosen-name {
    font-size: 12px;
    color: var(--blue-bright);
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--blue-glow);
    border-radius: var(--radius-sm);
}

.file-chosen-name.hidden { display: none; }

/* ============================================================
   FULL-SCREEN VIEWER
   ============================================================ */

.viewer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 5, 12, 0.96);
    z-index: 1200;
    display: none;
    flex-direction: column;
    backdrop-filter: blur(8px);
}

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

.viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.viewer-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }

.viewer-close {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    padding: 6px 14px;
    font-family: 'Inter', sans-serif;
    transition: var(--transition);
}

.viewer-close:hover { border-color: var(--blue-mid); color: var(--text-primary); background: var(--blue-glow); }

.viewer-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}

.viewer-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 0 60px rgba(0,0,0,0.8);
}

.viewer-body iframe {
    width: min(900px, 100%);
    height: min(540px, 80vh);
    border: none;
    border-radius: var(--radius-md);
}

/* ── Image annotator (art-director review tools) ──────────────────────
   Layout split into:
     .ann-shell       flex column, fills viewer-body
     .ann-stage-wrap  flex:1 (image area), min-height:0 so the image can
                      shrink and the toolbar stays visible even on tall
                      portrait screenshots that would otherwise blow past
                      the viewport.
     .ann-toolbar     flex-shrink:0 (always visible at the bottom).
   Image inside the stage is `object-fit: contain` with max-width/height
   capped so it never exceeds the available area. JS positions the SVG +
   pin layer to overlay the IMAGE rect exactly (not the stage), so click
   coords map 1:1 to the image regardless of letterboxing. */
.ann-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 0;
}
.ann-stage-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.ann-stage {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: inline-flex;
    cursor: default;
}
.ann-stage.ann-armed { cursor: crosshair; }
.ann-stage.ann-pen   { cursor: crosshair; }
.ann-stage.ann-erase { cursor: not-allowed; }
/* JS adds .ann-can-erase when the mouse is over an erasable annotation.
   Force the eraser cursor on the stage + every descendant so it wins
   regardless of which child element the mouse is currently over. */
.ann-stage.ann-erase.ann-can-erase,
.ann-stage.ann-erase.ann-can-erase * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff3b6b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4l5 5L9 21H4v-5z' fill='%23ff3b6b22'/><path d='M9 21h12'/><path d='M11 9l5 5'/></svg>") 4 20, pointer !important;
}
.ann-image {
    max-width: 100%;
    /* Cap to a height that always leaves room for the toolbar (~58px high
       plus 12px gap plus 24px viewer-body padding). 70vh keeps the image
       big but never so tall the toolbar disappears below the fold. */
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 0 60px rgba(0,0,0,0.8);
    user-select: none;
    -webkit-user-drag: none;     /* belt + braces with draggable="false" */
    pointer-events: none;        /* SVG layer + pin layer handle clicks */
    display: block;
}
.ann-layer, .ann-svg {
    position: absolute;
    /* left/top/width/height set by _syncAnnLayer to match the image rect.
       inset is NOT used so JS-driven coordinates win. */
    pointer-events: none;        /* children opt in */
}
.ann-svg          { pointer-events: auto; }   /* the SVG itself receives drag-to-draw */
.ann-svg .ann-shape { pointer-events: stroke; cursor: pointer; }
/* Eraser mode: empty stage shows "no" cursor (nothing to erase here), but
   over an erasable shape OR pin the cursor flips to a custom scissors/eraser
   pointer so the user knows that click WILL delete this element. */
.ann-stage.ann-erase .ann-svg .ann-shape,
.ann-stage.ann-erase .ann-pin {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff3b6b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4l5 5L9 21H4v-5z' fill='%23ff3b6b22'/><path d='M9 21h12'/><path d='M11 9l5 5'/></svg>") 4 20, pointer;
}
.ann-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    color: #0b1220;
    font-size: 12px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.55);
    pointer-events: auto;
    transition: transform 0.1s ease;
}
.ann-pin:hover { transform: translate(-50%, -50%) scale(1.1); }
.ann-toolbar {
    /* Tight pill centred under the image, NOT stretched edge-to-edge.
       Earlier the toolbar was a flex child of .ann-shell with no width
       constraint, so it filled the viewer width. User preferred the
       earlier "compact floating pill underneath the image" look. */
    flex-shrink: 0;
    align-self: center;
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(13, 18, 32, 0.96);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.55);
    backdrop-filter: blur(12px);
}
.ann-tool, .ann-btn {
    width: 34px;
    height: 30px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ann-btn { width: auto; padding: 0 12px; font-size: 12px; font-weight: 500; }
.ann-tool:hover, .ann-btn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.25);
}
.ann-tool.active {
    background: var(--blue-glow);
    border-color: var(--blue-bright);
    color: var(--blue-bright);
}
.ann-color {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: transform 0.1s, border-color 0.12s;
}
.ann-color:hover { transform: scale(1.12); }
.ann-color.active { border-color: #fff; }
.ann-sep {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.12);
    margin: 0 4px;
}
.ann-save { background: var(--blue-glow); color: var(--blue-bright); border-color: var(--blue-mid); }
.ann-save:hover { background: var(--blue-glow-strong); }

/* Pin comment popover. Anchored relative to the stage by JS, so the
   coordinates are stage-relative absolute. */
.ann-pin-popover {
    position: absolute;
    z-index: 10;
    background: rgba(13, 18, 32, 0.97);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    padding: 10px;
    width: 260px;
    box-shadow: 0 14px 38px rgba(0,0,0,0.55);
    backdrop-filter: blur(10px);
}
.ann-pin-popover[hidden] { display: none; }
.ann-pin-textarea {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    padding: 8px 10px;
    outline: none;
}
.ann-pin-textarea:focus { border-color: var(--blue-bright); }
.ann-pin-row {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    gap: 8px;
}
.ann-pin-row button {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}
.ann-pin-row .ann-pin-done { background: var(--blue-glow); color: var(--blue-bright); border-color: var(--blue-mid); }
.ann-pin-row .ann-pin-delete:hover { color: var(--red); border-color: var(--red); }

.viewer-body video {
    max-width: 100%;
    max-height: 80vh;
    border-radius: var(--radius-md);
}

.viewer-doc-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.viewer-doc-icon { font-size: 72px; }
.viewer-doc-name { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.viewer-doc-hint { font-size: 13px; color: var(--text-secondary); max-width: 460px; }

/* Inline document preview (PDF iframe / text content). Mirrors the video
   layout: the embedded content takes up most of the viewer; a small
   action bar with "Open in new tab" + "Download" sits beneath it. */
.viewer-doc-embed {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    width: min(1100px, 100%);
    height: 100%;
}
.viewer-doc-frame {
    flex: 1;
    min-height: 60vh;
    width: 100%;
    border: none;
    border-radius: var(--radius-md);
    background: #1a1f2e;
    box-shadow: 0 0 60px rgba(0,0,0,0.8);
}
/* Override the generic .viewer-body iframe size cap (900x540) so PDFs
   actually use the full viewer area. */
.viewer-body .viewer-doc-frame {
    width: 100%;
    height: auto;
}
.viewer-doc-text {
    flex: 1;
    width: 100%;
    margin: 0;
    padding: 20px 22px;
    overflow: auto;
    background: #0f1422;
    color: var(--text-primary);
    border: 1px solid var(--border-mid, #2a3550);
    border-radius: var(--radius-md);
    font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    box-shadow: 0 0 60px rgba(0,0,0,0.8);
}
.viewer-doc-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.viewer-doc-actions .btn-primary,
.viewer-doc-actions .btn-secondary {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm, 8px);
}

/* ============================================================
   ASSET LIBRARY PICKER (image-picker modal)
   ============================================================ */
.asset-picker-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 2100;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.asset-picker-overlay.open { display: flex; opacity: 1; }
.asset-picker-dialog {
    width: min(880px, 92vw);
    height: min(680px, 86vh);
    background: var(--bg-elevated, #14192a);
    border: 1px solid var(--border-mid, #2a3550);
    border-radius: 14px;
    box-shadow: 0 30px 90px rgba(0,0,0,0.55);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.asset-picker-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-mid, #2a3550);
}
.asset-picker-header h3 {
    margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary);
}
.asset-picker-close {
    width: 30px; height: 30px;
    border: 1px solid var(--border-mid, #2a3550);
    background: transparent; color: var(--text-secondary);
    border-radius: 8px; cursor: pointer;
}
.asset-picker-close:hover { border-color: var(--blue-mid, #4a9eff); color: var(--text-primary); }
.asset-picker-toolbar { padding: 12px 18px; border-bottom: 1px solid var(--border-mid, #2a3550); }
.asset-picker-search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-mid, #2a3550);
    border-radius: 8px;
    background: var(--bg-base, #0b1020);
    color: var(--text-primary);
    font-size: 13px;
}
.asset-picker-search:focus { outline: 2px solid var(--blue-mid, #4a9eff); outline-offset: 1px; }
.asset-picker-body {
    flex: 1; overflow: auto; padding: 16px 18px;
}
.asset-picker-loading,
.asset-picker-empty {
    height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--text-secondary);
    text-align: center;
    gap: 10px;
}
.asset-picker-empty-icon { font-size: 48px; opacity: 0.7; }
.asset-picker-empty-text { font-size: 14px; max-width: 380px; }
.asset-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.asset-picker-tile {
    background: var(--bg-base, #0b1020);
    border: 1px solid var(--border-mid, #2a3550);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    display: flex; flex-direction: column;
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.asset-picker-tile:hover {
    border-color: var(--blue-mid, #4a9eff);
    transform: translateY(-2px);
}
.asset-picker-thumb {
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    background: #0a0f1e;
    overflow: hidden;
}
.asset-picker-thumb-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.asset-picker-thumb-icon { font-size: 36px; opacity: 0.75; }
.asset-picker-name {
    padding: 7px 9px;
    font-size: 12px;
    color: var(--text-primary);
    text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-top: 1px solid var(--border-mid, #2a3550);
}
.asset-picker-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border-mid, #2a3550);
    display: flex; justify-content: flex-end;
}
.asset-picker-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-mid, #2a3550);
    background: transparent;
    color: var(--text-primary);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.asset-picker-btn:hover { border-color: var(--blue-mid, #4a9eff); }

/* ============================================================
   GDD SHEET VIEWER — Phase 1
   ============================================================ */

.gdd-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 1100; display: none;
    align-items: center; justify-content: center;
}
.gdd-sheet-overlay.open { display: flex; animation: fadeIn 0.2s ease; }

.gdd-sheet-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 80px rgba(0,0,0,0.7);
    width: min(96vw, 1280px);
    height: min(92vh, 840px);
    display: flex; flex-direction: column;
    overflow: hidden; position: relative; resize: none;
}
.gdd-sheet-panel.gds-resizing,
.gdd-sheet-panel.gds-resizing * { user-select: none !important; cursor: se-resize !important; pointer-events: none; }
.gdd-sheet-panel.gds-resizing  { pointer-events: all !important; }

.gds-resize-handle {
    position: absolute; bottom: 0; right: 0;
    width: 22px; height: 22px; cursor: se-resize;
    background: linear-gradient(135deg, transparent 40%, rgba(30,128,232,0.15) 100%);
    border-radius: 0 0 var(--radius-lg) 0;
    transition: background 0.2s; z-index: 10;
}
.gds-resize-handle:hover { background: linear-gradient(135deg, transparent 40%, rgba(30,128,232,0.35) 100%); }
.gds-resize-handle::after {
    content: ''; position: absolute; bottom: 4px; right: 4px;
    width: 8px; height: 8px;
    border-right: 2px solid var(--border-active);
    border-bottom: 2px solid var(--border-active);
    border-radius: 1px; transition: border-color 0.2s;
}
.gds-resize-handle:hover::after { border-color: var(--blue-bright); }

.gdd-sheet-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-bottom: 1px solid var(--border);
    background: var(--bg-surface); flex-shrink: 0;
}
.gdd-sheet-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.03em; }
.gdd-sheet-header-actions { display: flex; align-items: center; gap: 4px; }
.gdd-open-tab-btn {
    background: none; border: none; color: var(--text-muted);
    font-size: 16px; cursor: pointer; padding: 4px 8px;
    border-radius: var(--radius-sm); transition: var(--transition);
    line-height: 1;
}
.gdd-open-tab-btn:hover { background: rgba(255,255,255,0.06); color: var(--blue-bright); }
.gdd-sheet-close {
    background: none; border: none; color: var(--text-muted);
    font-size: 16px; cursor: pointer; padding: 4px 8px;
    border-radius: var(--radius-sm); transition: var(--transition);
}
.gdd-sheet-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }

.gdd-sheet-body { overflow: hidden; flex: 1; }

/* ── Main layout: left sidebar + right content ── */
.gds-layout {
    display: grid;
    grid-template-columns: 230px 1fr;
    height: 100%;
    overflow: hidden;
}

/* ── Left sidebar ── */
.gds-left {
    background: rgba(0,0,0,0.22);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    height: 100%; overflow: hidden;
}

.gds-cover {
    position: relative; width: 100%; aspect-ratio: 16/9;
    background: var(--bg-surface); cursor: pointer; overflow: hidden; flex-shrink: 0;
}
.gds-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gds-cover-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 42px; opacity: 0.25;
}
.gds-cover-hint {
    position: absolute; inset: 0; background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: rgba(255,255,255,0.7);
    opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.gds-cover:hover .gds-cover-hint { opacity: 1; }

.gds-identity { padding: 14px 16px 6px; flex-shrink: 0; }

.gds-name {
    font-size: 16px; font-weight: 700;
    color: var(--text-primary);
    outline: none; border-radius: var(--radius-sm);
    padding: 2px 4px; margin-left: -4px; margin-bottom: 5px;
    display: block; line-height: 1.3;
}
.gds-name:focus { background: rgba(255,255,255,0.06); }

.gds-tagline {
    font-size: 12px; color: var(--text-secondary);
    outline: none; border-radius: var(--radius-sm);
    padding: 2px 4px; margin-left: -4px;
    line-height: 1.5; min-height: 18px; display: block;
}
.gds-tagline:focus { background: rgba(255,255,255,0.04); color: var(--text-primary); }

.gds-quick-info {
    padding: 6px 14px 10px;
    display: flex; flex-direction: column; gap: 0;
    flex-shrink: 0;
    background: rgba(0,0,0,0.12);
    border-radius: var(--radius-sm);
    margin: 0 10px 4px;
}
.gds-qi-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.gds-qi-row:last-child { border-bottom: none; }
.gds-qi-label {
    font-size: 9px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
    width: 54px; flex-shrink: 0;
}
.gds-qi-value {
    font-size: 12px; color: var(--text-primary);
    outline: none; flex: 1;
    border-radius: 3px;
    padding: 2px 5px; margin-left: -5px; min-height: 18px;
    transition: background 0.12s;
}
.gds-qi-value:hover { background: rgba(255,255,255,0.04); }
.gds-qi-value:focus { background: rgba(255,255,255,0.07); }

/* Placeholder for empty contenteditable */
.gds-empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    opacity: 0.7;
    pointer-events: none;
    font-style: normal;
}

/* ── Pages divider + section ── */
.gds-pages-divider {
    height: 1px; background: var(--border);
    margin: 0; flex-shrink: 0;
}
.gds-pages-section {
    display: flex; flex-direction: column;
    flex: 1; overflow: hidden; min-height: 0;
}
.gds-pages-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px 6px; flex-shrink: 0;
}
.gds-pages-label {
    font-size: 9.5px; font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.1em;
}
.gds-add-page-btn {
    background: none; border: none;
    color: var(--text-secondary); font-size: 11px;
    cursor: pointer; padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
}
.gds-add-page-btn:hover { color: var(--blue-bright); background: var(--blue-glow); }

/* ── Pages list ── */
.gds-pages-list {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 2px 8px 16px;
    scrollbar-width: thin; scrollbar-color: var(--blue-deep) transparent;
}

.gds-page-item {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    cursor: grab; position: relative;
    transition: background 0.15s;
    user-select: none;
}
.gds-page-item:active { cursor: grabbing; }
.gds-page-item:hover { background: rgba(255,255,255,0.05); }
.gds-page-item.gds-page-active { background: rgba(30,128,232,0.12); }
.gds-page-item.gds-page-active .gds-page-name { color: var(--blue-bright); }
.gds-page-item.gds-page-nested { padding-left: 0; }
.gds-page-item.gds-page-dragging { opacity: 0.35; }

/* Drop-before / drop-after line indicators */
.gds-pi-line {
    position: absolute; left: 6px; right: 6px;
    height: 2px; border-radius: 1px;
    background: var(--blue-bright);
    opacity: 0; pointer-events: none; z-index: 2;
}
.gds-pi-line-before { top: -1px; }
.gds-pi-line-after  { bottom: -1px; }
.gds-page-item.gds-pi-drop-before .gds-pi-line-before { opacity: 1; }
.gds-page-item.gds-pi-drop-after  .gds-pi-line-after  { opacity: 1; }

/* Nest-into highlight ring */
.gds-pi-nest-ring {
    position: absolute; inset: 0;
    border: 2px solid var(--blue-bright);
    border-radius: var(--radius-sm);
    opacity: 0; pointer-events: none; z-index: 2;
}
.gds-page-item.gds-pi-drop-nest { background: rgba(30,128,232,0.14); }
.gds-page-item.gds-pi-drop-nest .gds-pi-nest-ring { opacity: 1; }

.gds-page-indent { width: 16px; flex-shrink: 0; }

.gds-page-handle {
    color: var(--text-muted); font-size: 14px; cursor: grab;
    opacity: 0; flex-shrink: 0; line-height: 1; letter-spacing: -2px;
    transition: opacity 0.15s; padding: 0 2px;
}
.gds-page-item:hover .gds-page-handle { opacity: 0.6; }
.gds-page-handle:active { cursor: grabbing; }

/* .gds-page-dot removed — replaced by .gds-page-icon */

.gds-page-name {
    flex: 1; font-size: 12.5px; color: var(--text-primary);
    outline: none; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-radius: 3px; padding: 1px 3px; margin-left: -3px;
    cursor: pointer; user-select: none;
}
/* Rename mode (F2 or double-click) */
.gds-page-name.gds-page-name-editing {
    cursor: text; user-select: text;
    white-space: normal; overflow: visible;
    background: rgba(255,255,255,0.07);
    box-shadow: 0 0 0 1px var(--border-active);
}

.gds-page-del {
    background: none; border: none; color: var(--text-muted);
    font-size: 10px; cursor: pointer; padding: 2px 4px;
    opacity: 0; border-radius: 3px; flex-shrink: 0;
    transition: opacity 0.15s, color 0.15s;
    line-height: 1;
}
.gds-page-item:hover .gds-page-del { opacity: 0.45; }
.gds-page-del:hover { color: #e05555; opacity: 1 !important; }

/* ── Right panel ── */
.gds-right {
    display: flex; flex-direction: column;
    overflow: hidden; position: relative;
}
#gds-page-view {
    flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
.gds-no-page {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 13px;
}
.gds-page-content {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 0 0 40px;
    display: flex; flex-direction: column; gap: 14px;
    scrollbar-width: thin; scrollbar-color: var(--blue-deep) transparent;
    position: relative;
}

/* ── Page cover area ── */
.gds-page-cover-area {
    width: 100%; min-height: 36px;
    display: flex; align-items: center;
    padding: 14px 28px 0;
    flex-shrink: 0;
}
.gds-page-cover-set {
    padding: 0; position: relative; min-height: 150px; max-height: 200px;
    overflow: hidden; flex-shrink: 0;
}
.gds-page-cover-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    max-height: 200px;
}
.gds-page-cover-actions {
    position: absolute; bottom: 8px; right: 10px;
    display: flex; gap: 6px; opacity: 0; transition: opacity 0.18s;
}
.gds-page-cover-set:hover .gds-page-cover-actions { opacity: 1; }
.gds-page-cover-btn {
    background: rgba(0,0,0,0.55); border: none; color: #ddeeff;
    font-size: 11px; padding: 4px 10px; border-radius: 4px;
    cursor: pointer; backdrop-filter: blur(4px);
    transition: background 0.15s;
}
.gds-page-cover-btn:hover { background: rgba(0,0,0,0.78); }
.gds-page-cover-remove { color: #f08080; }
.gds-page-cover-add {
    background: none; border: 1px dashed var(--border);
    color: var(--text-muted); font-size: 11px; padding: 4px 12px;
    border-radius: 4px; cursor: pointer; transition: all 0.15s;
    opacity: 0; /* show on page content hover */
}
.gds-page-content:hover .gds-page-cover-add { opacity: 1; }
.gds-page-cover-add:hover { border-color: var(--border-active); color: var(--blue-bright); }

/* Page title / blocks need side padding when no cover */
.gds-page-title { margin: 0 28px 6px; }
.gds-blocks-list { padding: 0 28px; }
.gds-add-block-btn { margin: 0 28px; }
.gds-block-picker { margin: 0 28px; }

.gds-page-title {
    font-size: 26px; font-weight: 700;
    color: var(--text-primary);
    outline: none; line-height: 1.2;
    padding: 18px 0 14px; border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}
.gds-page-title:focus { border-bottom-color: var(--border-active); }

/* ── Blocks list ── */
.gds-blocks-list {
    display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px;
}

/* ── Base block ── */
.gds-block {
    display: flex; align-items: flex-start; gap: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s;
    position: relative;
}
.gds-block:hover { border-color: rgba(21,96,168,0.5); }
.gds-block.gds-block-dragging { opacity: 0.35; border-color: var(--blue-mid); }
.gds-block.gds-block-over {
    border-color: var(--blue-bright) !important;
    box-shadow: 0 0 0 2px var(--blue-glow);
}

.gds-block-handle {
    color: var(--text-muted); font-size: 14px; cursor: grab;
    opacity: 0; flex-shrink: 0; align-self: flex-start;
    padding: 14px 4px 14px 8px;
    line-height: 1; letter-spacing: -2px;
    transition: opacity 0.15s;
}
.gds-block:hover .gds-block-handle { opacity: 0.6; }
.gds-block-handle:active { cursor: grabbing; }

.gds-block-inner { flex: 1; min-width: 0; padding: 12px 12px 14px 4px; }

.gds-block-remove {
    position: absolute; top: 8px; right: 8px;
    background: none; border: none; color: var(--text-muted);
    font-size: 11px; cursor: pointer; padding: 3px 6px;
    border-radius: var(--radius-sm);
    opacity: 0; transition: opacity 0.15s, color 0.15s;
    line-height: 1;
}
.gds-block:hover .gds-block-remove { opacity: 0.45; }
.gds-block-remove:hover { color: #e05555; opacity: 1 !important; }

/* ── Block collapse toggle — right-side, above remove button ── */
.gds-block-collapse {
    position: absolute; top: 6px; right: 32px; z-index: 10;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
    cursor: pointer; color: var(--text-secondary);
    font-size: 13px; padding: 3px 7px; line-height: 1; border-radius: 5px;
    opacity: 0.35; transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
}
.gds-block:hover .gds-block-collapse { opacity: 0.8; background: rgba(255,255,255,0.07); }
.gds-block-collapse:hover { color: var(--blue-bright); opacity: 1 !important; background: rgba(74,158,255,0.12); border-color: rgba(74,158,255,0.3); }
/* JS-controlled active state via .gds-collapse-on class */
.gds-block-collapse.gds-collapse-on { opacity: 1 !important; color: var(--blue-bright); background: rgba(74,158,255,0.10); border-color: rgba(74,158,255,0.3); }

/* Collapse show/hide is handled entirely by JS inline styles */
.gds-block-type-badge {
    display: none; flex: 1; align-items: center;
    font-size: 12px; color: var(--text-secondary);
    padding: 8px 12px; gap: 8px; overflow: hidden;
    cursor: pointer;
}
.gds-badge-icon {
    font-size: 14px; flex-shrink: 0;
    display: inline-flex; align-items: center; line-height: 1;
}
.gds-badge-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--badge-accent, var(--text-secondary)); flex-shrink: 0;
    padding: 2px 6px; background: rgba(255,255,255,0.05);
    border-radius: 3px; border: 1px solid rgba(255,255,255,0.07);
    display: inline-flex; align-items: center; line-height: 1;
}
.gds-badge-preview {
    font-size: 12px; color: var(--text-muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0;
    opacity: 0.8;
}

/* ── Divider block ── */
.gds-block-divider {
    background: transparent !important;
    border: none !important; box-shadow: none !important;
}
.gds-block-divider:hover { background: transparent !important; }
.gds-divider-inner {
    padding: 16px 8px !important;
    display: flex; align-items: center;
}
.gds-divider-rule {
    display: flex; align-items: center; gap: 0; width: 100%;
}
.gds-divider-rule span {
    flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, rgba(30,90,160,0.55) 20%, rgba(30,90,160,0.55) 80%, transparent);
}
.gds-block-divider:hover .gds-divider-rule span {
    background: linear-gradient(to right, transparent, var(--border-active) 20%, var(--border-active) 80%, transparent);
}
.gds-divider-diamond {
    width: 6px; height: 6px;
    background: rgba(30,90,160,0.55); border-radius: 1px;
    transform: rotate(45deg); flex-shrink: 0; margin: 0 10px;
    transition: background 0.15s;
}
.gds-block-divider:hover .gds-divider-diamond { background: var(--border-active); }

/* ── Text Block ── */
.gds-block-heading {
    font-size: 10.5px; font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.09em;
    outline: none; min-height: 16px; margin-bottom: 5px;
    border-radius: 3px; padding: 2px 4px; margin-left: -4px;
    cursor: text; user-select: text;
}
.gds-block-heading:focus { background: rgba(255,255,255,0.05); color: var(--text-primary); text-transform: none; letter-spacing: 0.02em; font-size: 12px; }

.gds-block-body {
    font-size: 13.5px; color: var(--text-primary); line-height: 1.75;
    outline: none; min-height: 52px; white-space: pre-wrap; word-break: break-word;
    border-radius: 6px; padding: 6px 8px; margin-left: -8px;
    /* Invisible 1px border keeps the field at a stable size; on focus we
       just swap its color so nothing shifts. Other sheets do the same
       (item-field-text / quest-field-text / mech-field-text). */
    border: 1px solid transparent;
    cursor: text; user-select: text;
    transition: border-color 0.12s, box-shadow 0.12s;
}
/* 2026-05-12: removed the :hover background tint -- the user reported it
   as "ugly hover" and noted no other sheet does this. The block-level
   hover border (on .gds-block) is enough to indicate interactivity.
   Focus shows a blue outline ring so the field you're typing in is
   clearly framed -- same pattern as item/quest/mechanic sheets. */
.gds-block-body:focus {
    background: rgba(255,255,255,0.04);
    border-color: var(--blue-bright);
    box-shadow: 0 0 0 3px rgba(30,128,232,0.15);
}
.gds-callout-body:focus {
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--blue-bright), 0 0 0 4px rgba(30,128,232,0.15);
}

/* Placeholder for empty editable */
.gds-block-heading.gds-empty::before,
.gds-block-body.gds-empty::before,
.gds-callout-body.gds-empty::before,
.gds-img-caption.gds-empty::before,
.gds-page-title.gds-empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted); opacity: 0.6;
    pointer-events: none; font-style: italic;
}
.gds-block-heading.gds-empty::before { font-style: normal; font-size: inherit; }
.gds-page-title.gds-empty::before   { font-style: normal; color: var(--text-secondary); }

/* ============================================================
   STRUCTURED-SHEET TEXT FIELDS — manual resize handle
   ============================================================
   Contenteditable text areas across the character / item / quest /
   mechanic / GDD sheets all auto-grow vertically by default. Adding
   `resize: vertical` + `overflow: auto` gives the user a native
   bottom-right grip to manually drag the field shorter (scrollbar
   appears) or taller (room without scrolling). The element still
   auto-grows to fit content until the user drags it — at which point
   the manual height sticks.

   `min-height` is preserved per-rule above; `max-height: none` lets
   the user expand without an arbitrary cap. */
.cs-field-text,
.cs-vn-text-content,
.item-field-text,
.item-vn-text-content,
.quest-field-text,
.quest-vn-text-content,
.mech-field-text,
.mech-vn-text-content,
.gds-block-body,
.gds-callout-body {
    resize: vertical;
    overflow: auto;
    max-height: none;
}

/* ── Callout Block ── */
.gds-block-callout { background: var(--callout-bg, rgba(74,158,255,0.08)); }
.gds-block-callout .gds-block-inner { padding-left: 0; display: flex; gap: 0; }
.gds-callout-bar {
    width: 3px; flex-shrink: 0; border-radius: 2px;
    background: var(--callout-color, #4a9eff);
    margin: 12px 10px 12px 4px; align-self: stretch;
}
.gds-callout-content { flex: 1; padding: 8px 8px 8px 0; }
.gds-callout-variants {
    display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; align-items: center;
}
.gds-callout-variants.gds-variants-hidden { display: none; }

/* ── Hide-bar ··· button inside variant row — sits right after last variant btn ── */
.gds-callout-hide-bar {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10); cursor: pointer;
    color: var(--text-secondary); font-size: 14px; padding: 1px 7px;
    border-radius: 4px; letter-spacing: 2px;
    opacity: 0.7; transition: opacity 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0; line-height: 1.4;
}
.gds-callout-hide-bar:hover { opacity: 1; color: var(--text-primary); background: rgba(255,255,255,0.1); }

/* ── Type chip — shown when variant bar is hidden ── */
.gds-callout-type-chip {
    display: inline-flex; align-items: center; gap: 5px;
    margin-bottom: 6px; padding: 4px 10px 4px 7px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px; cursor: pointer;
    color: var(--callout-color, #4a9eff);
    font-size: 12px; font-weight: 500;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.gds-callout-type-chip:hover {
    background: rgba(255,255,255,0.09);
    border-color: var(--callout-color, #4a9eff);
    box-shadow: 0 0 0 2px rgba(74,158,255,0.12);
}
.gds-callout-type-chip.gds-chip-hidden { display: none; }
.gds-chip-icon { font-size: 14px; }
.gds-chip-label { font-weight: 600; }
.gds-chip-arrow { font-size: 9px; opacity: 0.7; }

.gds-callout-vbtn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary); font-size: 11px; cursor: pointer;
    padding: 3px 8px; border-radius: 4px;
    transition: var(--transition); white-space: nowrap;
}
.gds-callout-vbtn.active {
    background: var(--callout-color, #4a9eff);
    border-color: transparent; color: #fff; font-weight: 600;
}
.gds-callout-vbtn:hover:not(.active) { background: rgba(255,255,255,0.10); color: var(--text-primary); }

/* ── Quote variant styling ── */
.gds-block-callout[data-variant="quote"] .gds-callout-body {
    font-style: italic; font-size: 14px; line-height: 1.8;
    padding-left: 4px; color: var(--text-primary);
    position: relative;
}
.gds-block-callout[data-variant="quote"] .gds-callout-body::before {
    content: '\201C';
    font-size: 3em; line-height: 0; vertical-align: -0.45em;
    margin-right: 4px; color: var(--callout-color);
    font-style: normal; opacity: 0.6;
}
/* ── Lore variant: book-like feel ── */
.gds-block-callout[data-variant="lore"] .gds-callout-body {
    font-size: 13px; line-height: 1.7; opacity: 0.9;
}
/* ── Done variant: muted, slight strikethrough feel ── */
.gds-block-callout[data-variant="done"] .gds-callout-body {
    opacity: 0.75;
}

/* ── Typewriter variant: aged paper, typewriter font ── */
.gds-block-callout[data-variant="typewriter"] {
    background: rgba(195,165,120,0.12) !important;
    border-color: rgba(160,132,92,0.25) !important;
}
.gds-block-callout[data-variant="typewriter"] .gds-callout-bar {
    background: #a0845c;
}
.gds-block-callout[data-variant="typewriter"] .gds-callout-body {
    font-family: 'Special Elite', 'Courier New', cursive;
    font-size: 13.5px; line-height: 1.8;
    color: #d4b896; letter-spacing: 0.03em;
}
/* Aged paper texture via faint grain overlay */
.gds-block-callout[data-variant="typewriter"] .gds-callout-content::before {
    content: ''; pointer-events: none;
    position: absolute; inset: 0; border-radius: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.4; z-index: 0;
}
.gds-block-callout[data-variant="typewriter"] .gds-callout-content { position: relative; }
.gds-block-callout[data-variant="typewriter"] .gds-callout-body { position: relative; z-index: 1; }

/* ── Terminal variant: retro CRT / sci-fi terminal ── */
.gds-block-callout[data-variant="terminal"] {
    background: rgba(0,8,2,0.92) !important;
    border: 1px solid #00aa33 !important;
    box-shadow: 0 0 12px rgba(0,200,60,0.12), inset 0 0 20px rgba(0,0,0,0.4) !important;
    border-radius: 6px;
}
.gds-block-callout[data-variant="terminal"] .gds-callout-bar {
    background: #00cc44;
    box-shadow: 0 0 6px rgba(0,204,68,0.6);
}
.gds-block-callout[data-variant="terminal"] .gds-callout-body {
    font-family: 'VT323', 'Courier New', monospace;
    font-size: 16px; line-height: 1.5;
    color: #00ff41;
    text-shadow: 0 0 5px rgba(0,255,65,0.28), 0 0 1px rgba(0,255,65,0.15);
    letter-spacing: 0.04em;
    /* CRT scanlines */
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.18) 3px,
        rgba(0,0,0,0.18) 4px
    );
    padding-top: 4px; padding-bottom: 4px;
}
.gds-block-callout[data-variant="terminal"] .gds-callout-body::before {
    content: '> ';
    color: #00cc44; opacity: 0.7;
    text-shadow: none; font-weight: normal;
}
/* Terminal type chip color */
.gds-block-callout[data-variant="terminal"] .gds-callout-type-chip {
    background: rgba(0,204,68,0.08);
    border-color: rgba(0,204,68,0.25);
    color: #00cc44;
}
/* Variant buttons in terminal mode */
.gds-block-callout[data-variant="terminal"] .gds-callout-vbtn {
    color: rgba(0,255,65,0.7); border-color: rgba(0,204,68,0.2);
    background: rgba(0,255,65,0.04);
}
.gds-block-callout[data-variant="terminal"] .gds-callout-vbtn.active {
    background: #003a15; border-color: #00cc44; color: #00ff41;
}

/* ── Scrapped variant: red background, struck-out feel ── */
.gds-block-callout[data-variant="scrapped"] {
    background: rgba(224,85,85,0.10) !important;
    border-color: rgba(224,85,85,0.2) !important;
}
.gds-block-callout[data-variant="scrapped"] .gds-callout-bar {
    background: #e05555;
}
.gds-block-callout[data-variant="scrapped"] .gds-callout-body {
    text-decoration: line-through;
    text-decoration-color: rgba(224,85,85,0.65);
    text-decoration-thickness: 1px;
    opacity: 0.75;
}

.gds-callout-body {
    font-size: 13px; color: var(--text-primary); line-height: 1.65;
    outline: none; min-height: 36px;
    white-space: pre-wrap; word-break: break-word;
    border-radius: 3px; padding: 2px 4px; margin-left: -4px;
    cursor: text; user-select: text;
}

/* ── Image Block ── */
.gds-img-empty-zone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; min-height: 100px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 13px; cursor: pointer;
    transition: var(--transition);
}
.gds-img-empty-zone:hover { border-color: var(--border-active); background: var(--blue-glow); color: var(--text-primary); }
.gds-img-empty-zone { font-size: 28px; }
.gds-img-empty-zone span { font-size: 13px; }
.gds-img-wrap { position: relative; display: inline-block; max-width: 100%; }
.gds-img-preview { max-width: 100%; border-radius: var(--radius-sm); display: block; }
.gds-img-change-btn {
    position: absolute; bottom: 8px; right: 8px;
    background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-size: 11px; cursor: pointer;
    padding: 3px 8px; border-radius: 4px;
    opacity: 0; transition: opacity 0.2s;
}
.gds-img-wrap:hover .gds-img-change-btn { opacity: 1; }
.gds-img-caption {
    font-size: 12px; color: var(--text-secondary);
    outline: none; margin-top: 6px; min-height: 16px;
    border-radius: 3px; padding: 2px 4px; margin-left: -4px;
    cursor: text; user-select: text;
}

/* ── Gallery Block ── */
.gds-gallery-scroll {
    display: flex; gap: 8px; align-items: center;
    overflow-x: auto; padding-bottom: 6px;
    scrollbar-width: thin; scrollbar-color: var(--blue-deep) transparent;
}
.gds-gallery-thumb {
    position: relative; flex-shrink: 0;
    width: 120px; height: 80px;
    border-radius: var(--radius-sm); overflow: hidden;
    border: 1px solid var(--border);
}
.gds-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gds-gallery-rm {
    position: absolute; top: 4px; right: 4px;
    background: rgba(0,0,0,0.6); border: none; color: #fff;
    font-size: 10px; cursor: pointer; padding: 2px 5px;
    border-radius: 3px; opacity: 0; transition: opacity 0.15s;
    line-height: 1;
}
.gds-gallery-thumb:hover .gds-gallery-rm { opacity: 1; }
/* Gallery drag-to-reorder */
.gds-gallery-insert {
    flex-shrink: 0; width: 3px; height: 80px; align-self: center;
    background: var(--blue-bright); border-radius: 2px;
    box-shadow: 0 0 8px var(--blue-bright), 0 0 20px rgba(74,158,255,0.5);
    pointer-events: none;
}
/* Drag handle — strip at the bottom of each thumb */
.gds-gallery-handle {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(0,0,0,0.52); color: rgba(255,255,255,0.75);
    font-size: 13px; letter-spacing: -1px; text-align: center;
    padding: 2px 0; cursor: grab; user-select: none;
    opacity: 0; transition: opacity 0.15s;
}
.gds-gallery-thumb:hover .gds-gallery-handle { opacity: 1; }
.gds-gallery-handle:active { cursor: grabbing; }

.gds-gallery-add-btn {
    flex-shrink: 0; height: 80px; padding: 0 16px;
    background: none; border: 1.5px dashed var(--border);
    color: var(--text-secondary); font-size: 12px; cursor: pointer;
    border-radius: var(--radius-sm); white-space: nowrap;
    transition: var(--transition);
}
.gds-gallery-add-btn:hover { border-color: var(--border-active); color: var(--blue-bright); background: var(--blue-glow); }

/* ── Table Block ── */
.gds-block-table .gds-block-inner { padding-top: 28px; }
.gds-table-wrap { overflow-x: auto; scrollbar-width: thin; }
.gds-table {
    border-collapse: collapse; width: 100%; min-width: 200px;
    font-size: 13px;
}
.gds-table th, .gds-table td {
    border: 1px solid var(--border);
    padding: 7px 10px; text-align: left;
    outline: none; color: var(--text-primary);
    min-width: 80px;
}
.gds-table th {
    background: rgba(0,0,0,0.2); font-size: 11px;
    font-weight: 600; color: var(--text-secondary);
    letter-spacing: 0.04em;
}
.gds-table th:focus, .gds-table td:focus { background: rgba(30,128,232,0.08); }
.gds-table-add-col {
    background: none; color: var(--text-muted); cursor: pointer;
    font-size: 14px; padding: 4px 10px; text-align: center;
    transition: color 0.15s, background 0.15s;
}
.gds-table-add-col:hover { color: var(--blue-bright); background: var(--blue-glow); }
.gds-table-del-row {
    color: var(--text-muted); cursor: pointer; font-size: 11px;
    text-align: center; padding: 4px 8px; width: 32px;
    transition: color 0.15s; user-select: none;
    opacity: 0;
}
tr:hover .gds-table-del-row { opacity: 1; }
.gds-table-del-row:hover { color: #e05555; }
/* .gds-table-add-row — see new left-aligned definition below */

/* ── Add Block button + Picker ── */
.gds-add-block-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; width: 100%;
    background: none; border: 1.5px dashed var(--border);
    color: var(--text-secondary); font: inherit; font-size: 13px;
    cursor: pointer; padding: 11px 16px;
    border-radius: var(--radius-md); transition: var(--transition);
    margin-top: 4px;
}
.gds-add-block-btn:hover { border-color: var(--border-active); color: var(--blue-bright); background: var(--blue-glow); }

.gds-block-picker {
    background: var(--bg-card); border: 1px solid var(--border-active);
    border-radius: var(--radius-md); padding: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.gds-block-picker.hidden { display: none; }
.gds-picker-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.gds-picker-btn {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 10px 8px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: pointer; transition: all 0.2s ease;
    color: var(--text-secondary);
    position: relative;
}
.gds-picker-btn:hover {
    background: rgba(74,158,255,0.07);
    border-color: rgba(74,158,255,0.45);
    color: var(--text-primary);
    box-shadow: 0 0 14px rgba(74,158,255,0.22), 0 0 32px rgba(74,158,255,0.08);
    transform: translateY(-1px);
}
.gds-picker-label { font-size: 11px; color: var(--text-secondary); font-weight: 500; line-height: 1; transition: color 0.2s; }
.gds-picker-btn:hover .gds-picker-label { color: var(--blue-bright); }

/* ── Block picker SVG icons ── */
.gds-pick-svg {
    width: 44px; height: 44px;
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: color 0.2s;
}
.gds-picker-btn:hover .gds-pick-svg { color: var(--text-primary); }

/* ── Page icon (replaces color dot) ── */
.gds-page-icon {
    font-size: 14px; line-height: 1;
    width: 22px; height: 22px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 5px; border: 1px solid transparent;
    cursor: pointer; transition: transform 0.15s, border-color 0.15s;
    user-select: none;
}
.gds-page-item:hover .gds-page-icon,
.gds-page-active .gds-page-icon { transform: scale(1.12); }
/* When icon shows a cover thumbnail */
.gds-page-icon-covered {
    border-radius: var(--radius-sm) !important;
    font-size: 0; overflow: hidden;
}

/* ── Icon picker popup ── */
.gds-icon-picker {
    position: fixed; z-index: 1600;
    background: var(--bg-card); border: 1px solid var(--border-active);
    border-radius: var(--radius-md); padding: 8px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    display: grid; grid-template-columns: repeat(8, 30px);
    gap: 2px; width: max-content;
}
.gds-icon-opt {
    font-size: 17px; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 5px; border: 1px solid transparent;
    cursor: pointer; background: transparent;
    transition: background 0.12s;
}
.gds-icon-opt:hover { background: rgba(74,158,255,0.15); border-color: rgba(74,158,255,0.3); }
.gds-icon-opt.active { background: rgba(74,158,255,0.22); border-color: rgba(74,158,255,0.5); }

/* ── Page color picker popup ── */
.gds-color-picker {
    position: fixed; z-index: 1600;
    background: var(--bg-card); border: 1px solid var(--border-active);
    border-radius: var(--radius-md); padding: 8px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
    display: flex; gap: 6px; flex-wrap: wrap; max-width: 180px;
}
.gds-color-opt {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid transparent; cursor: pointer;
    transition: transform 0.12s, border-color 0.12s;
}
.gds-color-opt:hover { transform: scale(1.2); }
.gds-color-opt.active { border-color: rgba(255,255,255,0.7); }

/* ── Page collapse toggle ── */
.gds-page-collapse {
    width: 14px; height: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--text-muted);
    font-size: 9px; cursor: pointer; padding: 0;
    transition: color 0.12s; border-radius: 3px;
}
.gds-page-collapse:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.gds-page-collapse-spacer { width: 14px; flex-shrink: 0; }

/* ── Page right-click context menu ── */
.gds-ctx-menu {
    position: fixed; z-index: 1700;
    background: var(--bg-card); border: 1px solid var(--border-active);
    border-radius: var(--radius-sm); padding: 4px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.55);
    min-width: 160px;
}
.gds-ctx-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; padding: 7px 12px;
    border-radius: 4px; border: none;
    background: transparent; color: var(--text-primary);
    font-size: 13px; cursor: pointer; text-align: left;
    transition: background 0.12s;
}
.gds-ctx-item:hover { background: rgba(255,255,255,0.07); }
.gds-ctx-item.gds-ctx-danger { color: #e05555; }
.gds-ctx-item.gds-ctx-danger:hover { background: rgba(224,85,85,0.1); }
.gds-ctx-item.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.gds-ctx-sep { height: 1px; background: var(--border); margin: 3px 4px; }

/* ── Image block size controls ── */
.gds-img-size-bar {
    display: flex; gap: 3px;
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.6); border-radius: 6px;
    padding: 3px 5px; opacity: 0; transition: opacity 0.15s;
    pointer-events: none;
}
.gds-img-wrap:hover .gds-img-size-bar { opacity: 1; pointer-events: all; }
.gds-img-sz {
    font-size: 11px; color: rgba(255,255,255,0.7);
    background: transparent; border: 1px solid transparent;
    border-radius: 4px; padding: 2px 6px; cursor: pointer;
    transition: all 0.12s; font-weight: 600;
}
.gds-img-sz:hover { background: rgba(255,255,255,0.15); color: #fff; }
.gds-img-sz.active { background: rgba(74,158,255,0.4); border-color: rgba(74,158,255,0.6); color: #fff; }
.gds-img-wrap {
    position: relative; display: inline-block;
    max-width: 100%; /* overridden inline per block.width */
}
.gds-img-preview { cursor: zoom-in; display: block; width: 100%; border-radius: var(--radius-sm); }
.gds-img-change-btn {
    position: absolute; top: 8px; right: 8px;
    background: rgba(0,0,0,0.6); color: #fff; border: none;
    border-radius: 5px; padding: 3px 9px; font-size: 12px;
    cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.gds-img-wrap:hover .gds-img-change-btn { opacity: 1; }

/* ── Table: column header with delete ── */
.gds-th-inner {
    display: flex; align-items: center; gap: 4px; min-height: 20px;
}
.gds-th-inner > span[contenteditable] { flex: 1; outline: none; }
.gds-col-del {
    flex-shrink: 0; background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 10px; padding: 1px 3px;
    line-height: 1; border-radius: 3px;
    opacity: 0; transition: opacity 0.15s, color 0.15s;
    user-select: none;
}
.gds-table th:hover .gds-col-del { opacity: 1; }
.gds-col-del:hover { color: #e05555; opacity: 1 !important; }

/* Table add-row — left-aligned icon button */
.gds-table-add-row {
    display: flex; align-items: center; gap: 5px;
    margin-top: 4px; margin-left: 2px;
    background: none; border: 1px dashed transparent;
    border-radius: 5px; padding: 4px 8px;
    color: var(--text-muted); font-size: 13px; cursor: pointer;
    transition: all 0.15s;
}
.gds-table-add-row:hover {
    border-color: rgba(74,158,255,0.35);
    color: var(--blue-bright);
    background: rgba(74,158,255,0.05);
}
.gds-table-add-plus { font-size: 15px; line-height: 1; }

/* ── Floating rich-text toolbar ── */
.gds-rich-toolbar {
    position: fixed; z-index: 1800;
    display: none; align-items: center; gap: 2px;
    background: var(--bg-card); border: 1px solid var(--border-active);
    border-radius: 8px; padding: 4px 6px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    pointer-events: all;
    animation: gds-tb-fadein 0.1s ease;
}
.gds-rich-toolbar.visible { display: flex; }
@keyframes gds-tb-fadein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.gds-rt-btn {
    width: 28px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent;
    border-radius: 5px; cursor: pointer; color: var(--text-secondary);
    font-size: 13px; transition: all 0.12s;
}
.gds-rt-btn:hover { background: rgba(74,158,255,0.12); border-color: rgba(74,158,255,0.3); color: var(--text-primary); }
.gds-rt-btn b { font-weight: 700; font-family: serif; }
.gds-rt-btn i { font-style: italic; font-family: serif; }
.gds-rt-btn s { text-decoration: line-through; }
.gds-rt-sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; }

/* Inline code styling inside GDD blocks */
.gds-block-body code,
.gds-callout-body code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.88em;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 3px; padding: 1px 5px;
    color: #c39bd3;
}

/* ── GDD in tabs-bar (space-gdd) ── */
#space-gdd {
    display: none; flex-direction: column; overflow: hidden;
    height: 100%;
}
#space-gdd.active { display: flex; }

.gds-tab-view {
    flex: 1; overflow: hidden;
    display: flex; flex-direction: column;
}
/* Reuse the same gds-layout inside the tab view */
#gds-tab-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
#gds-tab-body .gds-layout { height: 100%; }

/* ── Gallery Lightbox ── */
#gds-lightbox {
    display: none; position: fixed; inset: 0; z-index: 1500;
    align-items: center; justify-content: center;
}
#gds-lightbox.open { display: flex; }
.gds-lb-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.88); backdrop-filter: blur(6px);
}
.gds-lb-img {
    position: relative; z-index: 1;
    max-width: 92vw; max-height: 88vh;
    border-radius: var(--radius-md);
    box-shadow: 0 24px 80px rgba(0,0,0,0.8);
    object-fit: contain;
}
.gds-lb-close {
    position: absolute; top: 20px; right: 24px; z-index: 2;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-size: 18px; cursor: pointer;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.gds-lb-close:hover { background: rgba(255,255,255,0.22); }

/* Make gallery thumbs show a pointer so it's obvious they're clickable */
.gds-gallery-thumb img { cursor: zoom-in; }

/* ============================================================
   NOTE EDITOR (contenteditable + @-mentions) — centered panel
   ============================================================ */

.note-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 18, 0.88);
    backdrop-filter: blur(6px);
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
}

.note-editor-overlay.open { display: flex; animation: fadeIn 0.2s ease; }

/* Close when clicking the dark backdrop */
.note-editor-overlay { cursor: default; }

.note-editor-panel {
    width: 880px;
    max-width: 94vw;
    height: 84vh;
    background: var(--bg-card);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 80px rgba(21,96,168,0.2), 0 24px 80px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: panelIn 0.22s ease;
}

@keyframes panelIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.note-editor-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sidebar);
    flex-shrink: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.note-editor-title-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.note-editor-title-input::placeholder { color: var(--text-muted); }
.note-editor-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.note-save-indicator {
    font-size: 12px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}
.note-save-indicator.visible { opacity: 1; }

.note-tool-btn {
    font-size: 12px;
    padding: 6px 12px;
}
.note-tool-btn.active {
    background: var(--blue-glow);
    color: var(--blue-bright);
    border-color: var(--blue-mid);
}

/* ── Toolbar ── */
.note-rt-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.note-rt-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    min-width: 30px;
    transition: all 0.15s ease;
}
.note-rt-btn:hover {
    background: var(--bg-card);
    color: var(--blue-bright);
    border-color: var(--border);
}
.note-rt-btn.active {
    background: var(--blue-glow);
    color: var(--blue-bright);
    border-color: var(--blue-mid);
}

.note-rt-sep {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 6px;
}

.note-rt-hint {
    margin-left: auto;
    /* Smaller font 2026-05-08 follow-up -- the previous 12.5px felt loud
       next to the toolbar buttons. 10.5px is subtle but still readable. */
    font-size: 10.5px;
    color: var(--text-secondary);
    padding: 0 8px;
    flex-shrink: 1;
    min-width: 0;
}
.note-rt-hint kbd {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-primary);
}

/* SVG-icon variant of .note-rt-btn -- used for align/RTL/image/clear-format
   so all icons sit at a uniform 14×14 inside their button without inheriting
   the larger emoji/text size of older buttons. */
.note-rt-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
}
.note-rt-btn-icon svg {
    width: 14px;
    height: 14px;
}
.note-rt-btn.active {
    background: var(--blue-glow);
    color: var(--blue-bright);
    border-color: var(--blue-mid);
}

/* Generic toolbar dropdown popover (heading / alignment / font).
   .note-rt-toolbar is position:relative (set below) so absolute positions
   here anchor to the toolbar. JS sets `left` and `top` on each .open pop
   when the trigger is clicked. */
.note-rt-toolbar { position: relative; }
.note-rt-pop {
    position: absolute;
    background: rgba(13,18,32,0.97);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 5px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.55);
    backdrop-filter: blur(10px);
    z-index: 50;
    display: none !important;        /* defend against any rule that might force display */
    min-width: 180px;
}
.note-rt-pop.open { display: block !important; }
.note-rt-pop.note-rt-pop-icons.open { display: flex !important; }
.note-rt-pop.open { display: block; animation: noteRtPopIn 0.1s ease-out; }
@keyframes noteRtPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.note-rt-pop button {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    padding: 7px 12px;
    border-radius: 5px;
    font-size: 12.5px;
    font-family: 'Inter', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    white-space: nowrap;
}
.note-rt-pop button:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.note-rt-caret { font-size: 9px; opacity: 0.65; margin-left: 3px; }
/* Visual hint that a button has a dropdown */
.note-rt-dropdown { padding-right: 7px; }

/* Icon-only popover variant -- used by the alignment dropdown. Buttons
   are square SVG icons in a horizontal row instead of text rows. */
.note-rt-pop-icons {
    display: flex;
    flex-direction: row;
    gap: 2px;
    padding: 4px;
    min-width: 0;
}
.note-rt-pop-icons button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    padding: 0;
    text-align: center;
}
.note-rt-pop-icons button svg {
    width: 14px;
    height: 14px;
}

/* Image attach button keeps the icon AND the "Image" label per user request --
   the text was reassuring; only the icon needed swapping out. */
#note-attach-image-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.note-attach-icon { width: 13px; height: 13px; }
.note-attach-label { font-size: 12px; }

/* Image popover (size + alignment) */
.note-content-editor { position: relative; }   /* containing block for the popover */
.note-img-popover {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    background: rgba(13,18,32,0.97);
    border: 1px solid var(--blue-mid);
    border-radius: 6px;
    padding: 3px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    user-select: none;
    pointer-events: auto;
}
.note-img-pop-group { display: inline-flex; gap: 1px; }
.note-img-pop-sep   { width: 1px; height: 18px; background: rgba(255,255,255,0.12); margin: 0 4px; }
.note-img-pop-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
    min-width: 22px;
}
.note-img-pop-btn:hover  { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.note-img-pop-btn.active { background: var(--blue-glow); color: var(--blue-bright); border-color: var(--blue-mid); }
.note-img-pop-icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px 6px; }
.note-img-pop-icon svg { width: 12px; height: 12px; }

/* Image alignment classes -- floated for left/right (text wraps around the
   image), block-centered for center. Drops back to inline-block for new
   uploads (no align class set yet). */
.note-content-editor img.note-img-left {
    float: left;
    margin: 4px 16px 8px 0;
}
.note-content-editor img.note-img-center {
    display: block;
    margin: 8px auto;
    float: none;
}
.note-content-editor img.note-img-right {
    float: right;
    margin: 4px 0 8px 16px;
}
/* Selected (popover-open) image gets a soft outline so the user sees what
   they're editing. */
.note-content-editor img.note-img-selected,
.note-img-popover ~ img {
    outline: 2px solid var(--blue-bright);
    outline-offset: 2px;
}

/* Checklist (task list) -- replaces the bullet with a real <input
   type=checkbox> rendered inside each <li>. Checkboxes are persisted as
   part of the note's HTML, so toggling one updates the saved content. */
.note-content-editor ul.note-checklist {
    list-style: none;
    padding-left: 8px;
}
.note-content-editor ul.note-checklist li {
    position: relative;
    padding-left: 4px;
    margin: 2px 0;
}
.note-content-editor ul.note-checklist li input.note-checklist-box {
    margin-right: 8px;
    transform: translateY(2px);
    accent-color: var(--blue-bright);
    cursor: pointer;
}
.note-content-editor ul.note-checklist li input.note-checklist-box:checked + ::before,
.note-content-editor ul.note-checklist li:has(input:checked) {
    /* Strike through the text portion of a checked task; using :has so we
       don't need to wrap the text in a separate span. Falls back gracefully
       in browsers without :has -- they just won't show strikethrough. */
    text-decoration: line-through;
    color: var(--text-muted);
}

/* Horizontal rule inside a note. ONE consistent style for ALL hrs --
   the soft blue gradient with a glow. !important on each property defends
   against any old hrs that have inline `style="..."` baked in from a
   previous default insert (Chrome's execCommand sometimes adds inline
   styles), so every divider in a note renders identically regardless of
   how it was inserted. */
.note-content-editor hr {
    border: 0 !important;
    height: 1.5px !important;
    width: 100% !important;
    color: transparent !important;
    background: linear-gradient(90deg,
        rgba(30,128,232,0) 0%,
        rgba(30,128,232,0.55) 20%,
        rgba(30,128,232,0.55) 80%,
        rgba(30,128,232,0) 100%) !important;
    margin: 22px 0 !important;
    box-shadow: 0 0 6px rgba(30,128,232,0.15) !important;
    border-radius: 1px !important;
}

/* Image with caption (figure/figcaption wrapping). When the user adds a
   caption, JS wraps the <img> in a <figure> AND copies any existing
   alignment class (note-img-left/center/right) to the figure -- the
   figure is the actual block whose float / margin: auto controls layout
   in the document, so the alignment must be on the wrapper, not just the
   inner img. */
.note-content-editor .note-img-figure {
    margin: 8px 0;
    display: inline-block;
    max-width: 100%;
}
.note-content-editor .note-img-figure img { display: block; }
/* Figure-level alignment (mirrors the bare img classes above). */
.note-content-editor figure.note-img-figure.note-img-left {
    float: left;
    margin: 4px 16px 8px 0;
}
.note-content-editor figure.note-img-figure.note-img-center {
    display: block;
    margin: 8px auto;
    float: none;
}
.note-content-editor figure.note-img-figure.note-img-right {
    float: right;
    margin: 4px 0 8px 16px;
}
.note-content-editor .note-img-figure figcaption {
    /* Bumped 2026-05-10: --text-muted at 12px was almost invisible against
       the dark editor background; --text-secondary at 13px reads as a
       proper caption you can actually parse without squinting. */
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 6px 4px 0;
    line-height: 1.45;
    outline: none;
    min-height: 1em;
}
.note-content-editor .note-img-figure figcaption:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    opacity: 0.6;
}
.note-content-editor .note-img-figure figcaption:focus {
    color: var(--text-primary);
    outline: 1px dashed var(--blue-mid);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Inline image-upload placeholder ────────────────────────────────
   Block-level + auto margins so the spinner sits CENTERED in the document
   while the image uploads (was inline-flex / left-aligned, which on a
   left-padded editor looked like a stray chip in the corner). */
.note-img-uploading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 8px auto;
    max-width: 320px;
    background: rgba(30,128,232,0.08);
    border: 1px dashed var(--blue-mid);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    user-select: none;
    text-align: center;
}
.note-img-up-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(30,128,232,0.25);
    border-top-color: var(--blue-bright);
    border-radius: 50%;
    animation: noteImgSpin 0.7s linear infinite;
}
@keyframes noteImgSpin { to { transform: rotate(360deg); } }
.note-img-up-label { font-style: italic; }

/* Uploaded note images: max-width:100% so very large screenshots don't
   overflow horizontally. Clicking the image cycles its size class via JS
   (see _cycleNoteImgSize). No filter/transition on the base img -- a
   brightness hover-filter on a multi-megapixel screenshot was suspected
   of slowing scroll and click responsiveness in the editor. */
.note-content-editor img,
.note-content-editor .note-img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    cursor: pointer;
}
.note-content-editor img.note-img-33  { width: 33%; max-width: 33%; }
.note-content-editor img.note-img-50  { width: 50%; max-width: 50%; }
.note-content-editor img.note-img-75  { width: 75%; max-width: 75%; }
.note-content-editor img.note-img-100 { width: 100%; max-width: 100%; }

/* Defensive: explicitly mark the note editor's header buttons + toolbar
   buttons as receiving pointer events. If anything in the cascade ever
   accidentally sets pointer-events:none on a parent, these !important
   rules guarantee the buttons stay clickable. The hover state is also
   forced to ensure visual feedback works. */
.note-editor-header,
.note-editor-actions,
.note-editor-actions button,
.note-rt-toolbar,
.note-rt-toolbar .note-rt-btn {
    pointer-events: auto !important;
}
.note-editor-header { position: relative; z-index: 2; }
.note-rt-toolbar    { position: relative; z-index: 2; }

/* ── Content + backlinks layout ── */
.note-content-wrap {
    flex: 1;
    display: flex;
    min-height: 0;
    background: var(--bg-base);
}

.note-content-editor {
    flex: 1;
    overflow-y: auto;
    padding: 32px 60px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    outline: none;
    min-height: 0;
}

.note-content-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
    display: block;
}

.note-content-editor h1 { font-size: 28px; font-weight: 700; color: var(--text-primary); margin: 18px 0 10px; }
.note-content-editor h2 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 16px 0 8px; }
.note-content-editor h3 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin: 14px 0 8px; }
.note-content-editor p  { margin: 0 0 10px; }
.note-content-editor ul,
.note-content-editor ol { margin: 0 0 10px; padding-left: 28px; }
.note-content-editor li { margin-bottom: 4px; }

.note-content-editor blockquote {
    border-left: 3px solid var(--blue-mid);
    padding: 4px 0 4px 16px;
    color: var(--text-secondary);
    margin: 12px 0;
    font-style: italic;
}

.note-content-editor code {
    background: var(--bg-surface);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--blue-bright);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

.note-content-editor pre {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: 16px;
    color: var(--text-primary);
    margin: 12px 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    white-space: pre-wrap;
    overflow-x: auto;
}

.note-content-editor a {
    color: var(--blue-bright);
    text-decoration: underline;
}

.note-content-editor img {
    max-width: 100%;
    border-radius: var(--radius-md);
    margin: 8px 0;
}

/* Drop hover hint */
.note-content-editor.drag-over {
    outline: 2px dashed var(--blue-mid);
    outline-offset: -8px;
    background: rgba(21, 96, 168, 0.05);
}

/* ── Backlinks side panel ── */
.note-backlinks-panel {
    width: 260px;
    border-left: 1px solid var(--border);
    background: var(--bg-sidebar);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
/* Explicit hidden override — `display: flex` above otherwise wins over the
   user-agent `[hidden] { display: none }` rule (same specificity, but our
   selector comes later). Without this, `panel.hidden = true` does nothing. */
.note-backlinks-panel[hidden] { display: none !important; }

.note-backlinks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.note-backlinks-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
}
.note-backlinks-close:hover {
    color: var(--text-primary);
    background: var(--bg-card);
}

.note-backlinks-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.note-backlink-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s ease;
}
.note-backlink-row:hover {
    border-color: var(--blue-mid);
    background: var(--bg-surface);
}
.note-backlink-row .nb-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: var(--bg-base);
    flex-shrink: 0;
    font-size: 13px;
}
.note-backlink-row .nb-info { min-width: 0; flex: 1; }
.note-backlink-row .nb-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.note-backlink-row .nb-type {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.note-backlinks-empty {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    padding: 24px 8px;
    line-height: 1.5;
}

/* ============================================================
   CONTEXT MENU
   ============================================================ */

.context-menu {
    position: fixed;
    background: var(--bg-surface);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-md);
    min-width: 210px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px var(--blue-glow);
    z-index: 200;
    overflow: hidden;
    display: none;
    animation: dropIn 0.15s ease;
}

.context-menu.open { display: block; }

.context-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    background: transparent;
    width: 100%;
    font-family: 'Inter', sans-serif;
    text-align: left;
}

.context-item:hover { background: var(--blue-glow); color: var(--text-primary); }

/* ============================================================
   EMPTY STATES
   ============================================================ */

.empty-project-state {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 0;
    text-align: center;
}

.empty-icon-large { font-size: 44px; color: var(--blue-deep); text-shadow: 0 0 30px var(--blue-mid); margin-bottom: 8px; }
.empty-title { font-size: 17px; font-weight: 600; color: var(--text-secondary); }
.empty-subtitle { font-size: 13px; color: var(--text-muted); }
.empty-subtitle strong { color: var(--blue-bright); font-weight: 500; }

/* ============================================================
   IDEA DUMP
   ============================================================ */

/* ── Capture bar ─────────────────────────────────────────── */
.idea-capture-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.2s;
}
.idea-capture-wrap:focus-within {
    border-color: var(--border-active);
    box-shadow: 0 0 0 3px var(--blue-glow);
}

.idea-type-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.idea-type-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.idea-type-btn:hover { border-color: var(--border-active); color: var(--text-primary); background: var(--blue-glow); }
.idea-type-btn.active {
    border-color: var(--blue-bright);
    background: var(--blue-glow-strong);
    color: var(--blue-bright);
}

.idea-capture-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    min-height: 40px;
    max-height: 200px;
    overflow-y: auto;
    box-sizing: border-box;
}
.idea-capture-input::placeholder { color: var(--text-muted); }

.idea-input-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Capture-bar tag input -- minimal "chips + dashed +Tag pill" pattern
   matching the after-creation tag UI on idea cards. Removed the big
   surrounding border + padding so the row reads as inline chips, not
   another text input that competes with the textarea above it. */
.idea-capture-tags-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.idea-capture-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.idea-capture-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 9px;
    border-radius: 999px;
    background: var(--blue-glow);
    border: 1px solid var(--border-active);
    color: var(--blue-bright);
    font-size: 11px;
    font-weight: 500;
}
.idea-capture-chip-x {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    padding: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.idea-capture-chip-x:hover { opacity: 1; background: var(--blue-glow-strong); }

/* The dashed "+ Tag" pill mirrors .idea-tag-add-btn on cards. Brighter
   border + text 2026-05-10 so the affordance reads as obviously clickable
   instead of greyed-out. */
.idea-capture-add-tag {
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px dashed rgba(255,255,255,0.32);
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.idea-capture-add-tag:hover {
    border-color: var(--blue-bright);
    color: var(--blue-bright);
    background: var(--blue-glow);
}

/* Inline input revealed when +Tag is clicked. Sized + styled to match the
   chips so the row feels uniform. */
.idea-capture-tag-input {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-active);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    font-size: 11px;
    outline: none;
    width: 100px;
    box-shadow: 0 0 0 2px var(--blue-glow);
}
.idea-capture-tag-input::placeholder { color: var(--text-muted); }

.idea-tags-input {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: var(--transition);
}
.idea-tags-input:focus { border-color: var(--border-active); }
.idea-tags-input::placeholder { color: var(--text-muted); }

/* ── Filter bar ──────────────────────────────────────────── */
.idea-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
}
.search-input {
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 9px 14px 9px 36px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: var(--transition);
}
.search-input:focus { border-color: var(--border-active); box-shadow: 0 0 0 3px var(--blue-glow); }
.search-input::placeholder { color: var(--text-muted); }

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

.filter-pill {
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.filter-pill:hover { border-color: var(--border-active); color: var(--text-primary); }
.filter-pill.active {
    border-color: var(--blue-bright);
    background: var(--blue-glow-strong);
    color: var(--blue-bright);
}

/* ── Feed ────────────────────────────────────────────────── */
.idea-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.idea-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
    gap: 10px;
    text-align: center;
}
.idea-empty-icon { font-size: 36px; opacity: 0.35; }
.idea-empty-text  { font-size: 13px; color: var(--text-muted); max-width: 340px; line-height: 1.6; }

/* ── Idea card ───────────────────────────────────────────── */
.idea-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px 12px 20px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.idea-card:hover {
    border-color: var(--border-active);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.idea-card.card-dragging {
    opacity: 0.4;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
.idea-card.card-drag-over {
    border-color: var(--blue-bright);
    box-shadow: 0 0 0 2px var(--blue-glow-strong);
}

/* Left accent stripe */
.idea-card-accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

.idea-card-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
}

.idea-card-icon { font-size: 14px; line-height: 1; }
.idea-card-type { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.idea-card-date { margin-left: auto; font-size: 11px; color: var(--text-muted); }

.idea-card-content {
    position: relative;
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
    border-radius: var(--radius-sm);
    padding: 4px 6px;
    margin: -4px -6px 6px;
    transition: background 0.15s;
    outline: none;
    max-height: 112px;
    overflow: hidden;
}
/* Fade-out at the bottom to hint there's more */
.idea-card.is-tall .idea-card-content:not(.expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 52px;
    background: linear-gradient(to bottom, transparent, var(--bg-card));
    pointer-events: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.idea-card-content.expanded { max-height: none; }
.idea-card-content:hover  { background: rgba(255,255,255,0.04); }
.idea-card-content.editing {
    background: var(--bg-surface);
    outline: 1px solid var(--border-active);
    max-height: none;
}
.idea-card-content.editing::after { display: none; }

.idea-expand-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    padding: 0 0 6px;
    transition: color 0.15s;
}
.idea-expand-btn:hover { color: var(--blue-bright); }
.idea-card.is-tall .idea-expand-btn { display: inline-block; }

.idea-card-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    min-height: 22px;
}

.idea-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 9px;
    border-radius: 999px;
    background: var(--blue-glow);
    border: 1px solid var(--border-active);
    color: var(--blue-bright);
    font-size: 11px;
    font-weight: 500;
}

.idea-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--blue-bright);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.5;
    transition: opacity 0.15s;
    font-family: 'Inter', sans-serif;
}
.idea-tag-remove:hover { opacity: 1; background: var(--blue-glow-strong); }

.idea-tag-add-btn {
    padding: 2px 9px;
    border-radius: 999px;
    /* Brighter dashed outline + text so the "+ Tag" affordance reads as
       clickable rather than disabled. Matches the capture-bar version. */
    border: 1px dashed rgba(255,255,255,0.32);
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.idea-tag-add-btn:hover {
    border-color: var(--blue-bright);
    color: var(--blue-bright);
    background: var(--blue-glow);
}

.idea-tag-input {
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-active);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    outline: none;
    width: 90px;
    box-shadow: 0 0 0 2px var(--blue-glow);
}

/* ── Card action buttons ─────────────────────────────────── */
.idea-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.idea-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    /* Was --text-secondary; user reported the buttons (esp. "Send to Project")
       were too dim to read against the dark card. text-primary keeps the
       label sharp; the colored hover states still distinguish each action. */
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.idea-action-btn:hover {
    border-color: var(--border-active);
    color: var(--text-primary);
    background: var(--blue-glow);
}

/* Send to project -- subtle blue accent at rest too, so the button reads
   as the primary "where does this go?" action even before hover. */
.idea-action-btn[data-action="send"] {
    color: #7cc1ff;
    border-color: rgba(74,158,255,0.32);
}
.idea-action-btn[data-action="send"]:hover {
    border-color: var(--blue-bright);
    color: var(--blue-bright);
    background: var(--blue-glow-strong);
}

/* Promote to project — vibrant green/teal */
.idea-action-promote {
    border-color: rgba(32, 178, 140, 0.3);
    color: #20b28c;
}
.idea-action-promote:hover {
    border-color: #20b28c !important;
    color: #20b28c !important;
    background: rgba(32, 178, 140, 0.12) !important;
    box-shadow: 0 0 12px rgba(32, 178, 140, 0.2);
}

/* Danger — red delete */
.idea-action-danger {
    border-color: rgba(192, 57, 43, 0.3);
    color: var(--red);
    margin-left: auto;
    padding: 5px 10px;
}
.idea-action-danger:hover {
    border-color: var(--red-hover) !important;
    color: var(--red-hover) !important;
    background: rgba(231, 76, 60, 0.1) !important;
}

/* ── Stats bar ───────────────────────────────────────────── */
.idea-stats-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 24px;
}
.idea-stat-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.idea-stat-pill {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}
.idea-stat-starred { border-color: #f5c518; color: #f5c518; background: rgba(245,197,24,0.08); }

/* ── Filter top row (search + surprise) ─────────────────── */
.idea-filter-top {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}
.idea-filter-top .search-wrap { flex: 1; }

.idea-surprise-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
}
.idea-surprise-btn:hover {
    border-color: #c39bd3;
    color: #c39bd3;
    background: rgba(195,155,211,0.1);
    box-shadow: 0 0 12px rgba(195,155,211,0.15);
}

/* ── Surprise banner ─────────────────────────────────────── */
.idea-surprise-banner {
    background: linear-gradient(135deg, rgba(195,155,211,0.12), rgba(30,128,232,0.08));
    border: 1px solid rgba(195,155,211,0.4);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 20px;
    animation: surpriseIn 0.3s ease;
}
.idea-surprise-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
@keyframes surpriseIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.idea-surprise-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c39bd3;
    margin-bottom: 12px;
}
.idea-surprise-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
}
.idea-surprise-status {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.idea-surprise-age { color: var(--text-muted); font-weight: 400; font-size: 11px; }
.idea-surprise-text {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.65;
    white-space: pre-wrap;
    margin-bottom: 10px;
}
.idea-surprise-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.idea-surprise-close {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    padding: 5px 13px;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.idea-surprise-close:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
}

/* ── Star button ─────────────────────────────────────────── */
.idea-star-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s, transform 0.15s;
    margin-left: 2px;
}
.idea-star-btn:hover  { color: #f5c518; transform: scale(1.2); }
.idea-star-btn.starred { color: #f5c518; }

/* ── Status badge ────────────────────────────────────────── */
.idea-status-badge {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    background: transparent;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.15s, transform 0.15s;
}
.idea-status-badge:hover { opacity: 0.75; transform: scale(0.97); }

/* ── Age pill ────────────────────────────────────────────── */
.idea-age-pill {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(100,100,100,0.18);
    border: 1px solid rgba(100,100,100,0.3);
    color: #888;
    font-size: 10px;
    font-weight: 500;
}

/* ── Aged card ───────────────────────────────────────────── */
.idea-card-aged {
    opacity: 0.62;
    filter: saturate(0.5);
}
.idea-card-aged:hover {
    opacity: 1;
    filter: saturate(1);
    transition: opacity 0.25s, filter 0.25s;
}

/* ── Starred card ────────────────────────────────────────── */
.idea-card-starred {
    border-color: rgba(245,197,24,0.35) !important;
    box-shadow: 0 0 0 1px rgba(245,197,24,0.15);
}

/* ── Drag handle on idea card ────────────────────────────── */
.idea-drag-handle {
    color: var(--text-muted);
    font-size: 14px;
    cursor: grab;
    padding: 0 4px 0 0;
    opacity: 0.4;
    transition: opacity 0.15s;
    user-select: none;
}
.idea-card:hover .idea-drag-handle { opacity: 0.8; }
.idea-card-drag-over {
    border-color: var(--blue-bright) !important;
    box-shadow: 0 0 0 2px var(--blue-glow-strong);
}

/* ── Card image ──────────────────────────────────────────── */
.idea-card-image-wrap {
    margin: 8px 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-height: 220px;
}
.idea-card-img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius-sm);
}

/* ── Stats trigger + dropdown ────────────────────────────── */
.idea-stats-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
}
.idea-stats-trigger:hover,
.idea-stats-trigger.open {
    border-color: var(--border-active);
    color: var(--text-primary);
    background: var(--bg-card);
}
.idea-stats-chevron {
    font-size: 10px;
    transition: transform 0.2s;
    display: inline-block;
}
.idea-stats-trigger.open .idea-stats-chevron { transform: rotate(180deg); }

.idea-stats-bar { position: relative; }

.idea-stats-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px var(--blue-glow);
    z-index: 50;
    padding: 10px 0;
    animation: dropIn 0.15s ease;
}
.idea-stats-dropdown.open { display: block; }

.idea-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 16px;
    font-size: 13px;
}
.idea-stats-row-label { color: var(--text-secondary); }
.idea-stats-row-val {
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.idea-stats-row-head {
    padding: 4px 16px 2px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.idea-stats-separator {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

/* ── Card body layout (main + gallery side) ──────────────── */
.idea-card-body-wrap {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.idea-card-main { flex: 1; min-width: 0; }

.idea-card-gallery {
    flex-shrink: 0;
    width: 110px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    align-self: stretch;
    display: flex;
    align-items: center;
}
.idea-card-thumb {
    width: 110px;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
    max-height: 160px;
}
/* Loading placeholder shown in the idea-card gallery while an attached
   image uploads. Same dimensions as the eventual thumb so the layout
   doesn't jump when the upload completes. */
.idea-card-thumb-loading,
.idea-card-thumb-error {
    width: 110px;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    background: rgba(30,128,232,0.08);
    border: 1px dashed var(--blue-mid);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
}
.idea-card-thumb-error {
    background: rgba(214,85,85,0.08);
    border-color: rgba(214,85,85,0.4);
    color: var(--red, #d65555);
}
.idea-card-thumb-loading-label { font-style: italic; }

/* ── Image attach btn ────────────────────────────────────── */
.idea-action-img {
    border-color: rgba(195,155,211,0.3);
    color: #c39bd3;
}
.idea-action-img:hover {
    border-color: #c39bd3 !important;
    color: #c39bd3 !important;
    background: rgba(195,155,211,0.1) !important;
}

/* ── Send to Project modal ───────────────────────────────── */
.modal-send-proj {
    width: 420px;
}
.modal-send-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    font-weight: 400;
}
.modal-send-body {
    padding: 14px 16px 20px !important;
}
#send-project-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
}
.send-project-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    cursor: pointer;
    transition: var(--transition);
    text-align: left;
    font-family: 'Inter', sans-serif;
}
.send-project-option:hover {
    border-color: var(--border-active);
    background: var(--bg-card-hover);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.send-proj-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.send-proj-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.send-proj-count {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.send-proj-arrow {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.15s, color 0.15s;
}
.send-project-option:hover .send-proj-arrow {
    transform: translateX(3px);
    color: var(--blue-bright);
}
.send-proj-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* ── Status dropdown ─────────────────────────────────────── */
.idea-status-wrap {
    position: relative;
}
.idea-status-badge {
    cursor: pointer;
    transition: opacity 0.15s;
}
.idea-status-badge.open { opacity: 0.8; }

.idea-status-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    min-width: 130px;
    background: var(--bg-card);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px var(--blue-glow);
    z-index: 60;
    padding: 5px 0;
    animation: dropIn 0.12s ease;
}
.idea-status-dropdown.open { display: block; }

.idea-status-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    background: transparent;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
}
.idea-status-option:hover { background: var(--blue-glow); }
.idea-status-option.active {
    background: rgba(255,255,255,0.05);
}
.idea-status-option.active::before {
    content: '✓';
    font-size: 10px;
    margin-right: -4px;
}

/* ── Thumbnail clickable cursor ──────────────────────────── */
.idea-card-gallery { cursor: zoom-in; }

/* ── Lightbox ────────────────────────────────────────────── */
.idea-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.idea-lightbox.open { opacity: 1; }

.idea-lightbox-bg {
    position: absolute;
    inset: 0;
    background: rgba(2, 5, 12, 0.92);
    backdrop-filter: blur(8px);
}
.idea-lightbox-img {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 80px rgba(0,0,0,0.8);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}
.idea-lightbox.open .idea-lightbox-img { transform: scale(1); }

.idea-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 2;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: 'Inter', sans-serif;
}
.idea-lightbox-close:hover { background: rgba(255,255,255,0.18); }

/* ── Keyboard shortcut hint ──────────────────────────────── */
.idea-shortcut-hint {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    letter-spacing: 0.03em;
    white-space: nowrap;
    opacity: 0.6;
    cursor: default;
}

/* ============================================================
   PROJECT FORM MODAL
   ============================================================ */
.modal-project-form { width: 580px; }

.proj-form-row {
    display: flex;
    gap: 16px;
}
.proj-form-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Platform toggle ─────────────────────────────────────── */
.proj-platform-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.platform-btn {
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.platform-btn:hover { border-color: var(--border-active); color: var(--text-primary); }
.platform-btn.active {
    border-color: var(--blue-bright);
    background: var(--blue-glow-strong);
    color: var(--blue-bright);
}

/* ── State selector ──────────────────────────────────────── */
.proj-state-select {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.state-btn {
    padding: 4px 9px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.state-btn:hover { border-color: var(--border-active); color: var(--text-primary); }
.state-btn.active {
    border-color: var(--blue-bright);
    background: var(--blue-glow-strong);
    color: var(--blue-bright);
}

/* ── Genre/Engine select ─────────────────────────────────── */
.form-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236e90b8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
    cursor: pointer;
}
.form-select option { background: var(--bg-card); color: var(--text-primary); }

/* ============================================================
   PROJECT CARD UPGRADES
   ============================================================ */
.card-thumbnail-wrap { position: relative; }

.card-state-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    backdrop-filter: blur(8px);
}

.card-info-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.card-platforms {
    font-size: 12px;
    flex-shrink: 0;
    letter-spacing: 2px;
    line-height: 1;
}
.card-pitch {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin: 3px 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
    line-height: 1.4;
}
.card-meta-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.card-genre-tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--blue-glow);
    border: 1px solid var(--border-active);
    color: var(--blue-bright);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   PROJECTS VIEW — STATE SUMMARY
   ============================================================ */

.proj-state-summary {
    display: none; /* stats moved into the collapsible filter panel */
}

.proj-summary-label {
    color: var(--text-muted);
    font-weight: 500;
}

.proj-summary-divider {
    color: var(--text-muted);
}

.proj-state-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 11.5px;
    color: var(--chip-color, var(--text-secondary));
    transition: var(--transition);
}

.proj-state-chip strong {
    font-weight: 700;
    color: inherit;
}

/* ============================================================
   PROJECTS VIEW — RECENTLY OPENED STRIP
   ============================================================ */

.proj-recent-section {
    margin-bottom: 22px;
}

.proj-recent-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.proj-recent-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.proj-recent-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font: inherit;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
    max-width: 220px;
}

.proj-recent-chip:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-active);
    transform: translateY(-1px);
}

.proj-recent-thumb {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.proj-recent-thumb img { width: 100%; height: 100%; object-fit: cover; }

.proj-recent-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* ============================================================
   PROJECTS VIEW — FILTER BAR (COLLAPSIBLE)
   ============================================================ */

.proj-filter-section {
    margin-bottom: 22px;
}

/* ── Toggle button ── */
.proj-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px 5px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 0;
    user-select: none;
}

.proj-filter-toggle:hover {
    background: var(--bg-card);
    border-color: var(--border-active);
    color: var(--text-secondary);
}

.proj-filter-toggle.active {
    border-color: var(--blue-mid);
    color: var(--blue-bright);
    background: var(--blue-glow);
}

.proj-filter-toggle-icon { font-size: 13px; opacity: 0.8; }

.proj-filter-toggle-arrow {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    display: inline-block;
    margin-left: 2px;
}

/* ── Collapsible panel ── */
.proj-filter-bar {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.22s ease, opacity 0.22s ease, margin-top 0.22s ease;
    opacity: 0;
    margin-top: 0;
    overflow: hidden;
}

.proj-filter-bar.open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 10px;
}

/* Inner wrapper needed for grid-template-rows animation trick */
.proj-filter-bar > * {
    min-height: 0;
}

/* The actual content — column so search is on top, pills+sort below */
.proj-filter-bar-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    min-height: 0;
}

/* Full-width search bar at the top of the panel */
.proj-search-full {
    width: 100%;
}
.proj-search-full .proj-search {
    width: 100%;
}

/* Pills + sort in a flex row below */
.proj-filter-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

/* Stats row — sits between toggle button and the filter panel */
.proj-filter-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    /* Hidden by default, shown when panel opens */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.22s ease, opacity 0.22s ease, margin 0.22s ease;
    margin-top: 0;
    margin-bottom: 0;
}
.proj-filter-stats.open {
    max-height: 60px;
    opacity: 1;
    margin-top: 8px;
    margin-bottom: 2px;
}
.proj-filter-stats-total {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 4px;
}
.proj-filter-stats-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    font-size: 11.5px;
    color: var(--chip-color, var(--text-secondary));
}
.proj-filter-stats-chip strong { font-weight: 700; color: inherit; }

.proj-filter-pills {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.proj-fpill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.proj-fpill:hover {
    background: var(--blue-glow);
    border-color: var(--border-active);
    color: var(--text-primary);
}

.proj-fpill.active {
    background: var(--blue-glow-strong);
    border-color: var(--blue-mid);
    color: var(--blue-bright);
    font-weight: 600;
}

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

.proj-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    transition: var(--transition);
}

.proj-search-wrap:focus-within {
    border-color: var(--border-active);
    box-shadow: 0 0 0 2px var(--blue-glow);
}

.proj-search-wrap .search-icon {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

.proj-search-wrap .proj-search {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font: inherit;
    font-size: 12.5px;
    width: 160px;
}

.proj-search-wrap .proj-search::placeholder { color: var(--text-muted); }

.proj-sort-select {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
    outline: none;
    transition: var(--transition);
}

.proj-sort-select:hover,
.proj-sort-select:focus {
    border-color: var(--border-active);
    color: var(--text-primary);
}

/* ============================================================
   PROJECTS VIEW — EMPTY STATE
   ============================================================ */

.proj-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 40px;
    gap: 12px;
}

/* When the empty-state is rendered as a <button> (clickable -> opens New
   Project modal), strip default button chrome and add a soft hover lift so
   the user sees it's interactive. */
button.proj-empty-clickable {
    background: transparent;
    border: 2px dashed rgba(30,128,232,0.18);
    border-radius: 14px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
button.proj-empty-clickable:hover {
    border-color: var(--blue-mid);
    background: rgba(30,128,232,0.04);
    transform: translateY(-2px);
}

/* Same treatment for the in-project "this project is empty" card. */
button.empty-project-clickable {
    background: transparent;
    border: 2px dashed rgba(30,128,232,0.18);
    border-radius: 14px;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    width: 100%;
}
button.empty-project-clickable:hover {
    border-color: var(--blue-mid);
    background: rgba(30,128,232,0.04);
    transform: translateY(-2px);
}

/* ── Project-loading skeletons ────────────────────────────────────────
   Rendered the moment /api/projects starts loading so the grid never
   shows as empty during the round-trip. Shimmer animation cues "still
   loading"; geometry roughly matches a real .project-card so the layout
   doesn't shift when real cards replace them. */
.project-card-skeleton {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.proj-skel-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.03) 0%,
        rgba(255,255,255,0.07) 50%,
        rgba(255,255,255,0.03) 100%);
    background-size: 200% 100%;
    animation: projSkelShimmer 1.4s linear infinite;
}
.proj-skel-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.proj-skel-line {
    height: 11px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.04) 100%);
    background-size: 200% 100%;
    animation: projSkelShimmer 1.4s linear infinite;
}
.proj-skel-line-title { width: 64%; }
.proj-skel-line-meta  { width: 38%; height: 9px; opacity: 0.85; }
@keyframes projSkelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.proj-empty-icon {
    font-size: 52px;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 20px rgba(30,128,232,0.3));
}

.proj-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.proj-empty-sub {
    font-size: 13.5px;
    color: var(--text-muted);
    max-width: 360px;
    line-height: 1.6;
}

/* ============================================================
   IDEA DUMP — BULK SELECT
   ============================================================ */

/* Checkbox — always in DOM, fades in on card hover */
.idea-bulk-checkbox {
    width: 17px;
    height: 17px;
    border-radius: 4px;
    border: 2px solid var(--text-muted);
    flex-shrink: 0;
    position: relative;
    margin-right: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
.idea-bulk-checkbox::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--blue-bright);
    border-radius: 2px;
    transform: scale(0);
    transition: transform 0.12s ease;
}

/* Reveal on hover (the invitation to select) */
.idea-card:hover .idea-bulk-checkbox {
    opacity: 1;
    pointer-events: auto;
}
/* Always visible once bulk mode is on */
.idea-card.bulk-mode .idea-bulk-checkbox {
    opacity: 1;
    pointer-events: auto;
}
/* Checked state */
.idea-card.bulk-selected .idea-bulk-checkbox {
    border-color: var(--blue-bright);
    opacity: 1;
}
.idea-card.bulk-selected .idea-bulk-checkbox::after {
    transform: scale(1);
}
.idea-card.bulk-mode   { cursor: default; }
.idea-card.bulk-selected {
    border-color: var(--blue-mid) !important;
    box-shadow: 0 0 0 2px var(--blue-glow-strong);
}

/* ── Bulk action bar — inline above the feed ── */
.idea-bulk-bar {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease, margin-bottom 0.22s ease;
    margin-bottom: 0;
}
.idea-bulk-bar.open {
    max-height: 80px;
    margin-bottom: 14px;
}
/* Inner wrapper */
.idea-bulk-bar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--blue-mid);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 16px rgba(21,96,168,0.18);
}

.idea-bulk-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-bright);
    min-width: 80px;
    flex-shrink: 0;
}

.idea-bulk-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    flex-wrap: wrap;
}

.idea-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 13px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.idea-bulk-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-active);
    color: var(--text-primary);
}
.idea-bulk-star:hover    { border-color: #f5c518; color: #f5c518; }
.idea-bulk-send:hover    { border-color: var(--blue-bright); color: var(--blue-bright); }
.idea-bulk-promote:hover { border-color: #4aab6d; color: #4aab6d; }
.idea-bulk-delete:hover  { border-color: var(--red-hover); color: var(--red-hover); }

.idea-bulk-cancel {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.idea-bulk-cancel:hover { color: var(--red-hover); background: rgba(192,57,43,0.1); }

/* ============================================================
   PROJECT DETAIL — META STRIP
   ============================================================ */

.proj-detail-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    min-height: 32px;
    flex-wrap: wrap;
}

.proj-meta-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Match the genre pill exactly: same padding, font-size, line-height, and
   font-weight. The state badge keeps its colored border + filled background
   (set inline per-stage) but otherwise should be visually indistinguishable
   in size from a genre pill sitting next to it. Selector deliberately uses
   `button.proj-meta-state` to match the specificity of any `button.x` rule
   that might try to reset font properties. */
button.proj-meta-state,
.proj-meta-state {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0;
    line-height: 1.5;
    white-space: nowrap;
    flex-shrink: 0;
    vertical-align: middle;
}
.proj-meta-state-emoji {
    font-size: 0.85em;
    line-height: 1;
    margin-right: 3px;
    vertical-align: 0;
}
.proj-meta-state-label { color: inherit; }

.proj-meta-platforms {
    font-size: 15px;
    letter-spacing: 3px;
    line-height: 1;
}

/* Clickable meta-bar elements (state badge, platforms row, genre tag) keep
   the original visual sizes -- no extra padding, no caret bloat, no extra
   borders. Only affordance is a subtle brightness lift on hover so the
   user discovers they're clickable without the layout changing.
   IMPORTANT: do NOT use `font: inherit` here. The `font` shorthand resets
   font-size/font-weight/etc. to inherit (= body's larger size), which beats
   `.proj-meta-state` font-size:11.5px because `button.proj-meta-clickable`
   has higher specificity (element + class). The result was that the state
   pill rendered at 14-15px while the genre <span> stayed at 11.5px, making
   "Alpha" visibly bigger than "Puzzle". Set only the safe properties. */
button.proj-meta-clickable {
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    /* explicitly do NOT touch font-size or font-weight here */
}
.proj-meta-clickable:hover { filter: brightness(1.2); }
.proj-meta-clickable:focus-visible {
    outline: 2px solid var(--blue-bright);
    outline-offset: 2px;
}

/* The platforms row is a button but keeps the original "loose emoji row"
   look -- no border, no flex, just the emoji line. The 🖥 PC glyph rendered
   as blank inside an inline-flex parent on some platforms, so we keep this
   element as inline-block text. */
button.proj-meta-platforms {
    background: transparent;
    border: none;
    padding: 0;
}
.proj-meta-platforms-empty {
    font-size: 11px;
    letter-spacing: 0;
    color: var(--text-muted);
    font-style: italic;
}

/* Genre wrapper -- now multi-select. Each chosen genre renders as its own
   small pill; empty state is a "+ Genre" hint. */
button.proj-meta-genre {
    background: transparent;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.proj-meta-genre-pill {
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--blue-glow);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11.5px;
    white-space: nowrap;
}
.proj-meta-genre-empty {
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: 11.5px;
    font-style: italic;
}

/* Floating popover for the in-place project-meta editors */
.proj-meta-pop {
    position: fixed;
    z-index: 99996;
    min-width: 200px;
    max-width: 260px;
    background: rgba(13,18,32,0.97);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.55);
    backdrop-filter: blur(10px);
    font-family: 'Inter', sans-serif;
    animation: projMetaPopIn 0.12s ease-out;
}
@keyframes projMetaPopIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.proj-meta-pop-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 4px 8px 8px;
}
.proj-meta-pop-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-primary);
    padding: 7px 10px;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s, border-color 0.1s;
}
.proj-meta-pop-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.proj-meta-pop-item.active {
    background: var(--blue-glow);
    color: var(--blue-bright);
    border-color: var(--blue-mid);
}
.proj-meta-pop-icon { font-size: 14px; }
.proj-meta-pop-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    color: var(--text-primary);
    font-size: 12.5px;
    cursor: pointer;
    border-radius: 6px;
}
.proj-meta-pop-check:hover { background: rgba(255,255,255,0.04); }
.proj-meta-pop-check input { accent-color: var(--blue-bright); }
.proj-meta-pop-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 6px;
    padding-top: 6px;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.proj-meta-pop-save,
.proj-meta-pop-clear {
    background: var(--blue-glow);
    color: var(--blue-bright);
    border: 1px solid var(--blue-mid);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.proj-meta-pop-clear { background: transparent; color: var(--text-muted); border-color: var(--border); }
.proj-meta-pop-save:hover  { background: var(--blue-glow-strong); }
.proj-meta-pop-clear:hover { color: var(--red, #d65555); border-color: var(--red, #d65555); }

.proj-meta-tag {
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--blue-glow);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11.5px;
    white-space: nowrap;
}

.proj-meta-engine {
    color: var(--text-muted);
    background: transparent;
    border-color: var(--border);
}

.proj-meta-pitch {
    font-size: 12.5px;
    color: var(--text-muted);
    font-style: italic;
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Project-meta header buttons — Edit + Export. Tuned 2026-05-05 to
   match "New Folder" (.btn-secondary) for font hue + lightness, while
   keeping their original size and position. The user explicitly asked
   for the brightness to match the New Folder button. */
.proj-meta-edit-btn,
.proj-meta-export-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);          /* was --text-muted on edit, #eaecf2 on export */
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 13px;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    white-space: nowrap;
}
.proj-meta-edit-btn:hover,
.proj-meta-export-btn:hover {
    border-color: var(--border-active);
    color: var(--text-primary);
    background: var(--blue-glow);
}

/* ============================================================
   ORIGIN TRACKING
   ============================================================ */

/* Badge on project content cards */
.item-origin-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(240,160,48,0.08);
    border: 1px solid rgba(240,160,48,0.25);
    color: #c8891a;
    font-size: 10px;
    font-weight: 600;
    margin-top: 5px;
    white-space: nowrap;
}

/* Linked indicator on idea cards */
.idea-linked-wrap { min-height: 0; }

.idea-linked-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.idea-linked-label {
    /* Brighter so the "Linked to" prefix is clearly readable instead of
       fading into the background -- was --text-muted, which read as if
       the label itself was disabled. */
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}

/* "In: <project>" chips read as project links, NOT as another tag. Visually
   distinct from .idea-tag (which is a rounded blue pill): square corners,
   gold accent, a leading folder icon. The user reported the two pills
   looked nearly identical and got confused which was which. */
.idea-linked-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px 2px 6px;
    border-radius: 4px;
    background: rgba(212,168,71,0.10);
    border: 1px solid rgba(212,168,71,0.35);
    color: #d4a847;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.idea-linked-chip::before {
    content: '📂';
    font-size: 11px;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════
   INPUT SCHEME BLOCK
   ══════════════════════════════════════════════════════ */
.gds-block-input_scheme .gds-block-inner { padding: 0; overflow: hidden; }
.gds-input-inner { display: flex; flex-direction: column; }

.gds-input-header {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(255,255,255,0.015);
}

/* Device tabs */
.gds-input-device-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.gds-input-dev-tab {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
    font-size: 12px; font-weight: 500;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    color: var(--text-secondary);
    transition: all 0.15s;
}
.gds-input-dev-tab:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.gds-input-dev-tab.active {
    background: rgba(74,158,255,0.12);
    border-color: rgba(74,158,255,0.35);
    color: #4a9eff;
}

/* Category legend */
.gds-input-legend { display: flex; gap: 12px; flex-wrap: wrap; }
.gds-input-leg-item {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--text-muted); user-select: none;
}
.gds-input-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Layout container */
.gds-input-layout {
    padding: 14px 16px 18px;
    display: flex; flex-direction: column; gap: 16px;
}

/* ── Keyboard layout ─────────────────────────── */
.gds-kbd-wrap {
    display: flex; flex-direction: column; gap: 3px;
    overflow-x: auto; padding-bottom: 4px;
    width: fit-content; margin: 0 auto;  /* ← centers keyboard horizontally */
}
.gds-kbd-row { display: flex; gap: 3px; flex-shrink: 0; }
.gds-kbd-spacer { width: 14px; flex-shrink: 0; }  /* gap between F-key groups / arrow keys */

.gds-kbd-key {
    /* 1u = 38px — proportional to real keyboard */
    min-width: 38px; height: 36px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 2px 5px; border-radius: 5px; cursor: pointer;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-secondary); font-size: 10px; font-family: inherit;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    overflow: hidden; box-sizing: border-box;
}
.gds-kbd-key:hover { background: rgba(255,255,255,0.10); color: var(--text-primary); }
.gds-kbd-key.gds-key-bound { color: var(--text-primary); }
.gds-kbd-key.gds-key-bound:hover { filter: brightness(1.15); }

.gds-key-name {
    font-size: 9px; font-weight: 600; line-height: 1; opacity: 0.65;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.gds-key-action {
    font-size: 8.5px; line-height: 1; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    color: var(--key-accent, inherit); font-weight: 600;
}
.gds-kbd-key:not(.gds-key-bound) .gds-key-name { font-size: 10px; opacity: 1; }

/* Key widths — ANSI proportions (1u = 38px) */
.gds-key-bksp   { min-width: 76px;  }  /* 2u */
.gds-key-tab    { min-width: 57px;  }  /* 1.5u */
.gds-key-caps   { min-width: 67px;  }  /* 1.75u */
.gds-key-enter  { min-width: 86px;  }  /* 2.25u */
.gds-key-lshift { min-width: 86px;  }  /* 2.25u */
.gds-key-rshift { min-width: 105px; }  /* 2.75u */
.gds-key-space  { min-width: 225px; max-width: 225px; }  /* ~5.9u — fixed, matches row total */
.gds-key-mod    { min-width: 48px;  }  /* 1.25u */

/* Group label */
.gds-input-group { display: flex; flex-direction: column; gap: 6px; }
.gds-input-group-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted);
}

/* ── SVG Controller ──────────────────────────── */
.gds-ctrl-wrapper {
    width: 100%; max-width: 1050px;
    overflow: visible; margin: 0 auto;
}
.gds-ctrl-svg {
    width: 100%; height: auto;
    overflow: visible; display: block;
}

/* ── SVG Mouse ───────────────────────────────── */
.gds-mouse-group { align-items: center; }  /* center the SVG horizontally under the label */
.gds-mouse-wrapper {
    width: 100%; max-width: 520px;   /* wide enough for labels on both sides */
    overflow: visible; margin: 0 auto;
}
.gds-mouse-svg {
    width: 100%; height: auto;
    overflow: visible; display: block;
}

/* ── Key Bind Popover ────────────────────────── */
.gds-keybind-popover {
    position: fixed; z-index: 9999;
    background: #1c1e26;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px; padding: 14px 14px 12px; min-width: 220px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; gap: 9px;
}
.gds-kbp-title { font-size: 12px; color: var(--text-muted); }
.gds-kbp-title strong { color: var(--text-primary); }

.gds-kbp-input {
    width: 100%; padding: 7px 10px; border-radius: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-primary); font-size: 13px; font-family: inherit;
    outline: none; box-sizing: border-box; transition: border-color 0.15s;
}
.gds-kbp-input:focus { border-color: rgba(74,158,255,0.5); }

.gds-kbp-select {
    width: 100%; padding: 6px 10px; border-radius: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-primary); font-size: 12px; font-family: inherit;
    outline: none; cursor: pointer; box-sizing: border-box;
}
.gds-kbp-select option { background: #1c1e26; }

.gds-kbp-actions { display: flex; gap: 8px; justify-content: flex-end; }
.gds-kbp-clear {
    padding: 5px 12px; border-radius: 5px; cursor: pointer;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-secondary); font-size: 12px; font-family: inherit;
    transition: all 0.12s;
}
.gds-kbp-clear:hover {
    background: rgba(224,85,85,0.12);
    border-color: rgba(224,85,85,0.30);
    color: #e05555;
}
.gds-kbp-save {
    padding: 5px 14px; border-radius: 5px; cursor: pointer;
    background: rgba(74,158,255,0.15);
    border: 1px solid rgba(74,158,255,0.35);
    color: #4a9eff; font-size: 12px; font-weight: 500; font-family: inherit;
    transition: all 0.12s;
}
.gds-kbp-save:hover { background: rgba(74,158,255,0.25); }

/* ══ Input Extras ══════════════════════════════════════════ */
.gds-input-extras {
    display: flex; gap: 16px;
    padding: 16px 18px 22px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.015) 0%, transparent 100%);
}
.gds-extras-col {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 10px;
}

/* Section headers */
.gds-extras-hdr {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--text-secondary);
}
.gds-extras-sub-hdr {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted);
    margin-top: 12px;
}

/* Add buttons */
.gds-extras-add-btn {
    padding: 2px 9px; border-radius: 4px; cursor: pointer;
    background: rgba(74,158,255,0.10);
    border: 1px solid rgba(74,158,255,0.28);
    color: #4a9eff; font-size: 10px; font-family: inherit;
    transition: all 0.12s;
}
.gds-extras-add-btn:hover { background: rgba(74,158,255,0.22); border-color: rgba(74,158,255,0.50); }

/* ── Combo list ──────────────────────────────────────────── */
.gds-combo-list {
    display: flex; flex-direction: column; gap: 5px;
    max-height: 280px; overflow-y: auto; padding-right: 2px;
}
.gds-combo-list::-webkit-scrollbar { width: 3px; }
.gds-combo-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }

.gds-combo-empty {
    font-size: 11px; color: var(--text-muted);
    font-style: italic; padding: 6px 4px;
}

/* Combo card — card with colored left border */
.gds-combo-card {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 7px 10px 7px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-left: 3px solid var(--accent, rgba(255,255,255,0.20));
    border-radius: 0 7px 7px 0;
    transition: background 0.15s;
}
.gds-combo-card:hover { background: rgba(255,255,255,0.07); }

.gds-combo-del {
    flex-shrink: 0; width: 16px; height: 16px;
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.12s, color 0.12s;
}
.gds-combo-card:hover .gds-combo-del { opacity: 1; }
.gds-combo-del:hover { color: #e05555; }

.gds-combo-inputs {
    display: flex; align-items: center; gap: 4px;
    flex: 1; min-width: 0; flex-wrap: wrap;
}

.gds-combo-sep {
    font-size: 13px; font-weight: 700;
    color: rgba(255,255,255,0.28);
    flex-shrink: 0; user-select: none; padding: 0 1px;
}

/* Key chip — color set via inline style */
.gds-key-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; border-radius: 5px; flex-shrink: 0;
    border: 1px solid transparent;
    font-size: 11px; font-weight: 700; font-family: inherit;
    user-select: none;
}
.gds-chip-x {
    cursor: pointer; opacity: 0.40; font-size: 12px;
    line-height: 1; transition: opacity 0.1s; flex-shrink: 0;
}
.gds-chip-x:hover { opacity: 1; }

/* (modifier toggle class removed — keyboard combos now use the same chip system as controller) */

/* Dashed "add button / add more" chip */
.gds-combo-add-chip {
    padding: 3px 8px; border-radius: 5px; cursor: pointer; flex-shrink: 0;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.38); font-size: 10px; font-family: inherit;
    transition: all 0.12s;
}
.gds-combo-add-chip:hover {
    border-color: rgba(255,255,255,0.42); color: rgba(255,255,255,0.75);
    background: rgba(255,255,255,0.06);
}

/* → separator */
.gds-combo-eq {
    font-size: 17px; font-weight: 700;
    color: rgba(255,255,255,0.22);
    flex-shrink: 0; user-select: none;
}

/* Action area */
.gds-combo-action-area {
    flex: 1; min-width: 80px;
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 4px 8px; border-radius: 6px;
    background: transparent; border: 1px solid transparent;
    cursor: pointer; text-align: left;
    transition: background 0.12s, border-color 0.12s;
}
.gds-combo-action-area:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.10);
}
.gds-combo-action-name {
    font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.gds-combo-cat-pill {
    font-size: 8px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.07em; padding: 2px 6px;
    border-radius: 3px; border: 1px solid; flex-shrink: 0;
}
.gds-combo-assign-hint {
    font-size: 11px; color: rgba(74,158,255,0.65); font-style: italic;
}

/* ── Pickers ─────────────────────────────────────────────── */
.gds-btn-picker-pop,
.gds-kbd-picker-pop,
.gds-feat-picker-pop {
    position: fixed; z-index: 9999;
    background: #1c1e26;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 9px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.60);
}
.gds-btn-picker-pop::-webkit-scrollbar,
.gds-kbd-picker-pop::-webkit-scrollbar,
.gds-feat-picker-pop::-webkit-scrollbar { width: 3px; }
.gds-btn-picker-pop::-webkit-scrollbar-thumb,
.gds-kbd-picker-pop::-webkit-scrollbar-thumb,
.gds-feat-picker-pop::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* Controller button picker */
.gds-btn-picker-pop {
    padding: 9px; display: flex; flex-wrap: wrap; gap: 5px;
    max-width: 285px; max-height: 225px; overflow-y: auto;
}

/* Keyboard key picker — grouped */
.gds-kbd-picker-pop {
    padding: 10px 10px 8px;
    display: flex; flex-direction: column; gap: 9px;
    max-width: 330px; max-height: 310px; overflow-y: auto;
}
.gds-picker-group-label {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted); padding: 0 2px;
}
.gds-picker-group-row { display: flex; flex-wrap: wrap; gap: 4px; }

/* Feature picker */
.gds-feat-picker-pop {
    padding: 7px; display: flex; flex-direction: column; gap: 3px;
    min-width: 185px; max-height: 230px; overflow-y: auto;
}

/* Shared chip style for both pickers */
.gds-btn-picker-chip {
    padding: 4px 10px; border-radius: 5px; cursor: pointer;
    background: rgba(255,255,255,0.05);
    border: 1px solid transparent;
    font-size: 11px; font-weight: 600; font-family: inherit;
    transition: background 0.12s; white-space: nowrap;
}
.gds-btn-picker-chip:hover {
    background: rgba(255,255,255,0.13);
    border-color: currentColor;
}

.gds-feat-picker-btn {
    padding: 6px 10px; border-radius: 5px; cursor: pointer;
    background: rgba(255,255,255,0.04);
    border: 1px solid transparent;
    font-size: 11px; font-family: inherit; text-align: left;
    transition: background 0.12s; white-space: nowrap;
}
.gds-feat-picker-btn:hover { background: rgba(255,255,255,0.11); border-color: currentColor; }

/* ── Controller Features list ───────────────────────────── */
.gds-feat-list {
    display: flex; flex-direction: column; gap: 5px;
    max-height: 150px; overflow-y: auto; padding-right: 2px;
}
.gds-feat-list::-webkit-scrollbar { width: 3px; }
.gds-feat-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.gds-feat-row { display: flex; align-items: center; gap: 7px; }
.gds-feat-pill {
    flex-shrink: 0; padding: 3px 9px; border-radius: 4px;
    font-size: 10px; font-weight: 700; white-space: nowrap;
}
.gds-feat-desc {
    flex: 1; min-width: 0;
    padding: 3px 8px; border-radius: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    color: var(--text-secondary); font-size: 10px; font-family: inherit;
    outline: none; box-sizing: border-box; transition: border-color 0.15s;
}
.gds-feat-desc:focus { border-color: rgba(74,158,255,0.38); }
.gds-feat-desc::placeholder { color: var(--text-muted); font-style: italic; }
.gds-feat-del {
    flex-shrink: 0; width: 16px; height: 16px;
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 14px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.12s, color 0.12s;
}
.gds-feat-row:hover .gds-feat-del { opacity: 1; }
.gds-feat-del:hover { color: #e05555; }

/* ── Notes textarea ─────────────────────────────────────── */
.gds-input-notes-area {
    min-height: 90px; max-height: 220px;
    padding: 9px 11px; border-radius: 7px; resize: vertical;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-primary); font-size: 12px; font-family: inherit;
    outline: none; line-height: 1.6; box-sizing: border-box;
    transition: border-color 0.15s; width: 100%;
}
.gds-input-notes-area:focus { border-color: rgba(74,158,255,0.42); }
.gds-input-notes-area::placeholder { color: var(--text-muted); font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   ── Object Reference Block ──────────────────────────────────────
   ════════════════════════════════════════════════════════════ */

.gds-block-object_ref .gds-block-inner { padding: 14px 16px 16px; }

.gds-objref-inner { display: flex; flex-direction: column; gap: 12px; }

/* Slim title-only header; edit button is floated absolutely on the block edge */
.gds-objref-header {
    display: flex; align-items: center; gap: 10px;
    padding-right: 130px; /* leave room for floating Edit + collapse + remove */
}
.gds-objref-section-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.10em; color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: 7px;
}
.gds-objref-section-count {
    font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 10px;
    background: rgba(74,158,255,0.18); color: #4a9eff;
}
.gds-objref-link-glyph { font-size: 14px; }

/* Floating Edit button — positioned LEFT of the block's collapse button (right: 32px).
   Collapse is ~32px wide, so we sit at right: 76px to leave a 6-7px gap. */
.gds-objref-edit-btn-floating {
    position: absolute; top: 6px; right: 76px; z-index: 10;
    padding: 3px 10px; border-radius: 5px; cursor: pointer;
    background: rgba(74,158,255,0.10);
    border: 1px solid rgba(74,158,255,0.28);
    color: #4a9eff; font-size: 11px; font-family: inherit; font-weight: 600;
    line-height: 1; opacity: 0.55; transition: all 0.15s;
}
.gds-block:hover .gds-objref-edit-btn-floating { opacity: 1; }
.gds-objref-edit-btn-floating:hover {
    opacity: 1 !important;
    background: rgba(74,158,255,0.22);
    border-color: rgba(74,158,255,0.55);
}

/* ── Empty state — clickable button styled as call-to-action ── */
.gds-objref-empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 8px; width: 100%;
    padding: 36px 20px; cursor: pointer;
    background: rgba(74,158,255,0.04);
    border: 1.5px dashed rgba(74,158,255,0.25);
    border-radius: 9px; text-align: center;
    color: inherit; font-family: inherit;
    transition: all 0.15s;
}
.gds-objref-empty-state:hover {
    background: rgba(74,158,255,0.10);
    border-color: rgba(74,158,255,0.55);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(74,158,255,0.15);
}
.gds-objref-empty-state:hover .gds-objref-empty-icon { opacity: 0.85; transform: scale(1.05); }
.gds-objref-empty-state:hover .gds-objref-empty-title { color: #4a9eff; }
.gds-objref-empty-icon { font-size: 36px; opacity: 0.55; transition: all 0.15s; }
.gds-objref-empty-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); transition: color 0.15s; }
.gds-objref-empty-sub { font-size: 11px; color: var(--text-muted); max-width: 380px; line-height: 1.55; }

/* ── Cards grid — 3 per line on typical wide GDDs, fewer on narrow.
   `grid-auto-rows` locks every row to a fixed height so cards in a row
   never stretch to match a taller neighbour (e.g. image next to char). ── */
.gds-objref-grid {
    display: grid; gap: 11px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
    grid-auto-rows: 170px;
}

/* ── Shared card base — `cursor: grab` is the primary drag affordance.
   No min-height: row height is set by .gds-objref-grid's grid-auto-rows. ── */
.gds-objref-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border: 1px solid rgba(255,255,255,0.10);
    border-left: 3px solid var(--type-color, #888);
    border-radius: 0 8px 8px 0;
    cursor: grab; overflow: hidden;
    transition: transform 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.gds-objref-card:active { cursor: grabbing; }
.gds-objref-card:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
    border-color: rgba(255,255,255,0.18);
    border-left-color: var(--type-color, #888);
    box-shadow: 0 6px 20px rgba(0,0,0,0.30);
}

/* Drag-reorder: source becomes invisible BUT keeps its grid cell, so as we
   insertBefore through the DOM during dragover, that empty cell migrates
   through the layout — visible to the user as cards "pushing aside". The
   browser shows its own drag-image preview following the cursor. */
.gds-objref-card.gds-objref-dragging { cursor: grabbing; }
.gds-objref-card.gds-objref-src-hidden {
    visibility: hidden;
    pointer-events: none;
}
/* Highlighted "landing zone" effect on the gap-cell during drag */
.gds-objref-card.gds-objref-src-hidden::before {
    content: ''; position: absolute; inset: 0;
    visibility: visible;
    border-radius: 6px;
    background: rgba(74,158,255,0.06);
    border: 2px dashed rgba(74,158,255,0.45);
    box-sizing: border-box;
}

/* Drag handle indicator — top-LEFT, hover-only, decorative */
.gds-objref-card-draghandle {
    position: absolute; top: 5px; left: 5px; z-index: 5;
    width: 18px; height: 18px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.70);
    font-size: 13px; line-height: 1;
    opacity: 0; transition: opacity 0.15s; pointer-events: none;
    user-select: none;
}
.gds-objref-card:hover .gds-objref-card-draghandle { opacity: 0.85; }

/* Per-card delete button — top-RIGHT, hover-only */
.gds-objref-card .gds-objref-card-remove {
    position: absolute; top: 5px; right: 5px;
    width: 22px; height: 22px; border-radius: 4px;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.78); font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all 0.12s; z-index: 6;
}
.gds-objref-card:hover .gds-objref-card-remove { opacity: 1; }
.gds-objref-card .gds-objref-card-remove:hover {
    background: rgba(224,85,85,0.90); border-color: rgba(224,85,85,1); color: #fff;
}

/* Type tag fades out on hover so it doesn't compete with the action controls */
.gds-objref-card:hover .gds-objref-typetag { opacity: 0; }
.gds-objref-typetag { transition: opacity 0.12s; }

/* "Add more" card — dashed outline, large + icon */
.gds-objref-card-add-more {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; padding: 16px;
    background: transparent !important;
    border: 1.5px dashed rgba(255,255,255,0.16) !important;
    border-radius: 8px !important;
    color: var(--text-muted); font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.gds-objref-card-add-more:hover {
    background: rgba(74,158,255,0.05) !important;
    border-color: rgba(74,158,255,0.45) !important;
    color: #4a9eff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(74,158,255,0.12);
}
.gds-objref-add-more-icon {
    font-size: 38px; font-weight: 300; line-height: 1;
    opacity: 0.50; transition: all 0.15s;
}
.gds-objref-card-add-more:hover .gds-objref-add-more-icon {
    transform: scale(1.10); opacity: 1;
}
.gds-objref-add-more-label { font-size: 13px; font-weight: 700; }
.gds-objref-add-more-sub  { font-size: 10.5px; color: var(--text-muted); }

.gds-objref-typetag {
    position: absolute; top: 8px; right: 8px;
    padding: 1px 6px; border-radius: 3px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.55);
    font-size: 7.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.10em; pointer-events: none;
}

.gds-objref-name {
    font-size: 13.5px; font-weight: 700; color: var(--text-primary);
    line-height: 1.25; word-break: break-word;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.gds-objref-subtitle {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.09em; color: var(--type-color);
    line-height: 1.3; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══ Shared HORIZONTAL card layout (Character / GDD / Mechanic / Note / Link / Doc) ══
   Full-height thumbnail strip on the left, content on the right.
   Layout uses flex with `flex: 1` on rest, so head sits at top and the
   bottom of the rest area is anchored — stats/tags use margin-top: auto
   to stick to that bottom edge regardless of content above. */
.gds-objref-card-character,
.gds-objref-card-gdd,
.gds-objref-card-mechanic,
.gds-objref-card-note,
.gds-objref-card-link,
.gds-objref-card-document {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
.gds-objref-thumb-strip {
    width: 100px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--type-bg) 0%, rgba(0,0,0,0.35) 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border-right: 1px solid rgba(255,255,255,0.06);
}
.gds-objref-thumb-strip img {
    width: 100%; height: 100%; object-fit: cover;
}
.gds-objref-thumb-fallback {
    font-size: 38px; opacity: 0.80;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
.gds-objref-content {
    flex: 1; min-width: 0;
    padding: 11px 50px 11px 13px; /* right pad for typetag */
    display: flex; flex-direction: column;
    overflow: hidden;
}
.gds-objref-content-head {
    flex-shrink: 0; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.gds-objref-rest {
    flex: 1; min-height: 0; min-width: 0;
    margin-top: 7px;
    display: flex; flex-direction: column; gap: 5px;
    overflow: hidden;
}
/* Stats & feel-tags pin to the bottom of the rest area regardless of
   how much text sits above them — uniform position across all character /
   mechanic cards no matter how long the concept/description is. */
.gds-objref-stats,
.gds-objref-mech-tags {
    margin-top: auto;
}

/* ── CHARACTER specifics (uses shared horizontal layout) ── */
.gds-objref-concept {
    font-size: 11.5px; color: var(--text-secondary); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.gds-objref-stats {
    display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px;
}
.gds-objref-stat-pip {
    display: inline-flex; flex-direction: column; align-items: center;
    padding: 2px 6px; border-radius: 4px;
    background: rgba(0,0,0,0.30); border: 1px solid rgba(255,255,255,0.08);
    min-width: 38px;
}
.gds-objref-stat-label {
    font-size: 7px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.gds-objref-stat-value {
    font-size: 11.5px; font-weight: 800; color: var(--type-color);
}

/* ── ITEM (gameitem) — vertical loot card ── */
.gds-objref-card-gameitem {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 14px 12px 12px;
    background: radial-gradient(ellipse at top, var(--type-bg) 0%, rgba(0,0,0,0.20) 80%);
}
.gds-objref-card-gameitem .gds-objref-typetag { background: rgba(0,0,0,0.40); }
.gds-objref-loot-icon {
    font-size: 38px; margin-bottom: 7px;
    filter: drop-shadow(0 2px 6px var(--type-color));
}
.gds-objref-card-gameitem .gds-objref-name { font-size: 14px; }
.gds-objref-rarity {
    font-size: 9px; font-weight: 800; letter-spacing: 0.13em;
    color: var(--type-color); text-transform: uppercase; margin-top: 2px;
}
.gds-objref-card-gameitem[data-rarity="legendary"] .gds-objref-rarity { color: #ffd700; }
.gds-objref-card-gameitem[data-rarity="rare"]      .gds-objref-rarity { color: #4a9eff; }
.gds-objref-card-gameitem[data-rarity="uncommon"]  .gds-objref-rarity { color: #4aab6d; }
.gds-objref-loot-desc {
    font-size: 10.5px; color: var(--text-muted); line-height: 1.4;
    margin-top: 5px; padding: 0 4px;
}

/* ── QUEST — scroll-style with objectives ── */
.gds-objref-card-quest {
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--type-bg) 0%, rgba(0,0,0,0.20) 100%);
}
.gds-objref-quest-hdr {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.gds-objref-quest-icon { font-size: 16px; }
.gds-objref-quest-type {
    margin-left: auto;
    font-size: 8.5px; font-weight: 800; letter-spacing: 0.10em;
    padding: 2px 7px; border-radius: 3px;
    background: var(--type-color); color: #fff;
    text-transform: uppercase; opacity: 0.85;
}
.gds-objref-objectives {
    margin: 0; padding-left: 18px; list-style: none; counter-reset: obj;
}
.gds-objref-objectives li {
    position: relative; counter-increment: obj;
    padding: 3px 0 3px 16px; font-size: 11.5px;
    color: var(--text-secondary); line-height: 1.4;
}
.gds-objref-objectives li::before {
    content: '◆'; position: absolute; left: -2px;
    color: var(--type-color); font-size: 9px; top: 6px;
}
.gds-objref-empty-line { font-size: 11px; color: var(--text-muted); font-style: italic; }

/* ── LEVEL — vertical card with radial map background ── */
.gds-objref-card-level {
    position: relative; overflow: hidden;
}
.gds-objref-level-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 25% 30%, var(--type-color) 0%, transparent 40%),
        radial-gradient(circle at 78% 65%, var(--type-color) 0%, transparent 35%),
        linear-gradient(135deg, rgba(0,0,0,0.30), rgba(0,0,0,0.55));
    opacity: 0.22; pointer-events: none;
}
.gds-objref-level-content {
    position: relative; padding: 14px 14px 14px 14px;
    display: flex; flex-direction: column; gap: 7px;
}
.gds-objref-level-icon { font-size: 20px; }
.gds-objref-level-meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 11px; color: var(--text-secondary);
}
.gds-objref-level-meta b {
    font-size: 8.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.10em; color: var(--type-color); margin-right: 4px;
}

/* ── MECHANIC specifics (uses shared horizontal layout) ── */
.gds-objref-mech-desc {
    font-size: 11.5px; color: var(--text-secondary); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gds-objref-mech-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.gds-objref-feel-tag {
    font-size: 9px; padding: 1px 6px; border-radius: 3px;
    background: rgba(74,158,255,0.10); color: rgba(74,158,255,0.85);
    border: 1px solid rgba(74,158,255,0.20);
}

/* ── GDD specifics (uses shared horizontal layout) ── */
.gds-objref-gdd-tag {
    font-size: 11.5px; color: var(--text-secondary); font-style: italic;
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.gds-objref-gdd-pitch {
    font-size: 10.5px; color: var(--text-muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── NOTE specifics (uses shared horizontal layout) ── */
.gds-objref-note-preview {
    font-size: 11px; color: var(--text-muted); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── IMAGE / VIDEO — thumbnail-dominant vertical (the picture IS the point) ── */
.gds-objref-card-image,
.gds-objref-card-video {
    display: flex; flex-direction: column;
}
.gds-objref-media-thumb {
    width: 100%; flex: 1; overflow: hidden;
    background: var(--type-bg);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.gds-objref-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gds-objref-media-thumb > span { font-size: 30px; opacity: 0.7; }
.gds-objref-video-thumb {
    background: linear-gradient(135deg, var(--type-bg) 0%, rgba(0,0,0,0.40) 100%);
}
.gds-objref-video-bg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px !important; opacity: 0.30 !important;
}
.gds-objref-video-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px !important; opacity: 1 !important;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 2px 10px rgba(0,0,0,0.7); pointer-events: none;
}
.gds-objref-card-image .gds-objref-name,
.gds-objref-card-video .gds-objref-name {
    padding: 10px 12px 12px; font-size: 14px;
}

/* (Link / Document use the shared horizontal layout — subtitle shows host/type) */

/* ── BROKEN reference ── */
.gds-objref-card-broken {
    display: flex; align-items: stretch;
    border-left-color: #e05555 !important;
    background: linear-gradient(135deg, rgba(224,85,85,0.08) 0%, rgba(224,85,85,0.02) 100%);
    cursor: default;
}
.gds-objref-card-broken:hover { transform: none; box-shadow: none; }
.gds-objref-broken-icon {
    width: 50px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: #e05555; font-size: 26px;
}
.gds-objref-broken-name { font-size: 13px; font-weight: 700; color: #e05555; }
.gds-objref-broken-sub  { font-size: 10.5px; color: rgba(224,85,85,0.65); }
.gds-objref-card-broken .gds-objref-body { padding: 10px 50px 10px 0; justify-content: center; }
/* Broken card uses a different (always-visible, right-side, red) delete button */
.gds-objref-card-broken .gds-objref-card-remove {
    position: absolute; top: 50%; left: auto; right: 8px; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 4px;
    background: rgba(224,85,85,0.12); border: 1px solid rgba(224,85,85,0.30);
    color: #e05555; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 1; transition: all 0.12s;
}
.gds-objref-card-broken .gds-objref-card-remove:hover {
    background: rgba(224,85,85,0.25); border-color: rgba(224,85,85,0.55);
}

/* ══════════════════════════════════════════════════════════════
   ── Object Reference Picker Modal ───────────────────────────────
   ════════════════════════════════════════════════════════════ */

.objref-modal-overlay { z-index: 10000; }
.objref-modal {
    width: min(820px, 95vw); max-height: 88vh;
    display: flex; flex-direction: column;
    padding: 0;
}
.objref-modal .modal-header { padding: 18px 22px 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.objref-modal .modal-title  { font-size: 14px; font-weight: 700; }

.objref-modal-search-wrap { padding: 12px 22px 0; }
.objref-modal-search {
    width: 100%; padding: 10px 14px; border-radius: 7px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-primary); font-size: 13px; font-family: inherit;
    outline: none; box-sizing: border-box; transition: border-color 0.15s;
}
.objref-modal-search:focus { border-color: rgba(74,158,255,0.50); }
.objref-modal-search::placeholder { color: var(--text-muted); }

.objref-modal-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 18px 22px; display: flex; flex-direction: column; gap: 22px;
}
.objref-modal-body::-webkit-scrollbar { width: 6px; }
.objref-modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }

/* ── Sections (Game Objects vs. Other Items) — collapsible ── */
.objref-section { display: flex; flex-direction: column; gap: 10px; }
.objref-section-hdr {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border-radius: 6px; cursor: pointer;
    font-family: inherit; text-align: left;
    transition: filter 0.15s;
}
.objref-section-hdr:hover { filter: brightness(1.15); }
.objref-section-game .objref-section-hdr {
    background: linear-gradient(90deg, rgba(74,158,255,0.12) 0%, rgba(224,92,138,0.06) 50%, transparent 100%);
    border: 1px solid rgba(74,158,255,0.22);
}
.objref-section-other .objref-section-hdr {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
}
.objref-section-chev {
    font-size: 11px; color: var(--text-muted); flex-shrink: 0;
    transition: transform 0.18s;
}
.objref-section.collapsed .objref-section-chev { transform: rotate(-90deg); }
.objref-section-icon { font-size: 16px; flex-shrink: 0; }
.objref-section-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-primary); }
.objref-section-sub { font-size: 10.5px; color: var(--text-muted); margin-left: auto; }

.objref-section-body { display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.objref-section.collapsed .objref-section-body { display: none; }

/* ── Per-type groups — also collapsible ── */
.objref-pick-group { display: flex; flex-direction: column; gap: 6px; }
.objref-pick-group-hdr {
    display: flex; align-items: center; gap: 7px; width: 100%;
    font-size: 10px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.10em; padding: 4px 4px;
    background: transparent; border: none; cursor: pointer;
    font-family: inherit; text-align: left;
    border-radius: 4px; transition: background 0.12s;
}
.objref-pick-group-hdr:hover { background: rgba(255,255,255,0.04); }
.objref-pick-group-chev {
    font-size: 9px; color: var(--text-muted); flex-shrink: 0;
    transition: transform 0.18s;
}
.objref-pick-group.collapsed .objref-pick-group-chev { transform: rotate(-90deg); }
.objref-pick-group-icon { font-size: 13px; }
.objref-pick-group-count {
    margin-left: 4px; font-size: 9px; font-weight: 700;
    background: rgba(255,255,255,0.10); color: var(--text-secondary);
    padding: 1px 6px; border-radius: 8px;
}
.objref-pick-group-body {
    display: grid; gap: 7px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.objref-pick-group.collapsed .objref-pick-group-body { display: none; }

/* ── Tile (used for both Game Objects and Other Items now) ── */
.objref-pick-tile {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 32px 8px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-left: 3px solid var(--type-color);
    border-radius: 0 6px 6px 0;
    cursor: pointer; transition: all 0.12s;
}
.objref-pick-tile:hover { background: rgba(255,255,255,0.08); }
.objref-pick-tile.selected {
    background: linear-gradient(135deg, var(--type-bg) 0%, rgba(255,255,255,0.06) 100%);
    border-color: var(--type-color);
}
.objref-pick-thumb {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 5px;
    background: var(--type-bg);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.objref-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.objref-pick-icon { font-size: 22px; opacity: 0.80; }

.objref-pick-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.objref-pick-title {
    font-size: 12px; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.objref-pick-sub {
    font-size: 10.5px; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.objref-pick-typetag {
    position: absolute; top: 6px; right: 28px;
    padding: 1px 6px; border-radius: 3px;
    background: var(--type-bg); color: var(--type-color);
    font-size: 8px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.10em; pointer-events: none;
}
.objref-pick-check {
    position: absolute; top: 50%; right: 9px; transform: translateY(-50%);
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.20);
    display: flex; align-items: center; justify-content: center;
    color: transparent; font-size: 11px; font-weight: 800;
    transition: all 0.12s;
}
.objref-pick-tile.selected .objref-pick-check {
    background: var(--type-color); border-color: var(--type-color); color: #fff;
}
.objref-pick-empty {
    font-size: 11px; color: var(--text-muted); font-style: italic;
    padding: 12px; text-align: center;
}

/* ── Footer with bulk actions ── */
.objref-modal-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 22px; border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0; flex-wrap: wrap;
}
.objref-footer-bulk { display: flex; gap: 6px; }
.objref-bulk-btn {
    padding: 6px 11px; border-radius: 4px; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-secondary); font-size: 11px; font-family: inherit; font-weight: 600;
    transition: all 0.12s;
}
.objref-bulk-btn:hover {
    background: rgba(255,255,255,0.10); color: var(--text-primary);
    border-color: rgba(255,255,255,0.22);
}
.objref-footer-right { display: flex; align-items: center; gap: 10px; }
.objref-selected-count {
    font-size: 11.5px; color: var(--text-secondary); font-weight: 600;
}
.objref-cancel-btn {
    padding: 7px 14px; border-radius: 5px; cursor: pointer;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-secondary); font-size: 12px; font-family: inherit;
    transition: all 0.12s;
}
.objref-cancel-btn:hover { background: rgba(255,255,255,0.10); }
.objref-done-btn {
    padding: 7px 18px; border-radius: 5px; cursor: pointer;
    background: rgba(74,158,255,0.15); border: 1px solid rgba(74,158,255,0.40);
    color: #4a9eff; font-size: 12px; font-family: inherit; font-weight: 700;
    transition: all 0.12s;
}
.objref-done-btn-active { background: rgba(74,158,255,0.30); }
.objref-done-btn:hover  { background: rgba(74,158,255,0.40); }

/* ══════════════════════════════════════════════════════════════
   ── @-Mention Chip + Picker (Phase 2) ─────────────────────────
   ════════════════════════════════════════════════════════════ */

/* Inline chip — atomic, contenteditable=false, click opens item */
.gds-mention-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px 1px 6px;
    margin: 0 1px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--chip-color, #888) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--chip-color, #888) 40%, transparent);
    color: var(--chip-color, var(--text-primary));
    font-weight: 600;
    font-size: 0.92em;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: baseline;
    transition: background 0.12s, border-color 0.12s, transform 0.08s;
    white-space: nowrap;
}
.gds-mention-chip:hover {
    background: color-mix(in srgb, var(--chip-color, #888) 28%, transparent);
    border-color: color-mix(in srgb, var(--chip-color, #888) 60%, transparent);
    transform: translateY(-1px);
}
.gds-mention-icon { font-size: 0.95em; line-height: 1; }
.gds-mention-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }

/* Broken chip — red, deleted item */
.gds-mention-chip.gds-mention-broken {
    background: rgba(224, 85, 85, 0.10);
    border-color: rgba(224, 85, 85, 0.40);
    color: #e05555;
    cursor: default;
    font-style: italic;
}
.gds-mention-chip.gds-mention-broken:hover {
    background: rgba(224, 85, 85, 0.16);
    transform: none;
}

/* Picker popover */
.gds-mention-pop {
    position: fixed;
    z-index: 1500;
    min-width: 240px;
    max-width: 320px;
    max-height: 240px;
    overflow-y: auto;
    background: #1c1e26;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.55);
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.gds-mention-pop::-webkit-scrollbar { width: 4px; }
.gds-mention-pop::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }

.gds-mention-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border-radius: 5px;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.10s, border-color 0.10s;
}
.gds-mention-row.active {
    background: rgba(255,255,255,0.07);
    border-left-color: var(--type-color, #4a9eff);
}
.gds-mention-row-icon { font-size: 14px; flex-shrink: 0; }
.gds-mention-row-name {
    flex: 1; min-width: 0;
    font-size: 12.5px; font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gds-mention-row-type {
    font-size: 9px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--type-color, var(--text-muted));
    flex-shrink: 0;
}
.gds-mention-empty {
    padding: 14px; text-align: center;
    font-size: 11.5px; color: var(--text-muted); font-style: italic;
}

/* Status header at the top of the picker — shows filter state */
.gds-mention-status {
    position: sticky; top: 0; z-index: 1;
    padding: 5px 10px;
    background: rgba(0,0,0,0.35);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px 6px 0 0;
    font-size: 10px; font-weight: 600;
    color: var(--text-muted); letter-spacing: 0.02em;
    margin-bottom: 2px;
    user-select: none;
}
.gds-mention-status-q { color: #4a9eff; font-weight: 700; }
.gds-mention-status-hint { color: var(--text-muted); font-style: italic; }

/* ───────────────────────────────────────────────────────────────────
   Color Palette Block
   Heading + flex-wrap row of 110×140 swatch tiles + an Add tile.
   ─────────────────────────────────────────────────────────────────── */
.gds-block-color_palette .gds-block-inner { padding: 12px 14px 14px 4px; }

.gds-cp-grid {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 6px;
}

.gds-cp-tile {
    position: relative;
    width: 110px; height: 140px;
    border-radius: 8px; overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    display: flex; flex-direction: column;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: transform 0.12s, box-shadow 0.15s, border-color 0.12s;
    user-select: none;
}
.gds-cp-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.30);
    border-color: rgba(255,255,255,0.16);
}

/* Color area (top, larger half) */
.gds-cp-color {
    position: relative;
    flex: 1 1 auto; min-height: 0;
    cursor: pointer;
}
.gds-cp-color::after {
    /* subtle inner highlight so very light colors still read as a tile */
    content: ''; position: absolute; inset: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    pointer-events: none;
}

/* Hidden native color picker */
.gds-cp-color-input {
    position: absolute; left: 4px; top: 4px;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
    border: 0; padding: 0; margin: 0;
}

/* Drag handle — top-LEFT, hover-only */
.gds-cp-draghandle {
    position: absolute; top: 5px; left: 5px; z-index: 4;
    width: 18px; height: 18px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.45); color: rgba(255,255,255,0.78);
    font-size: 13px; line-height: 1;
    opacity: 0; transition: opacity 0.15s;
    cursor: grab;
}
.gds-cp-draghandle:active { cursor: grabbing; }
.gds-cp-tile:hover .gds-cp-draghandle { opacity: 0.85; }

/* Delete — top-RIGHT, hover-only */
.gds-cp-tile .gds-cp-remove {
    position: absolute; top: 5px; right: 5px; z-index: 5;
    width: 22px; height: 22px; border-radius: 4px;
    background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.20);
    color: rgba(255,255,255,0.78); font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all 0.12s;
}
.gds-cp-tile:hover .gds-cp-remove { opacity: 1; }
.gds-cp-tile .gds-cp-remove:hover {
    background: rgba(224,85,85,0.90); border-color: rgba(224,85,85,1); color: #fff;
}

/* Footer — same color as swatch, label + hex stacked */
.gds-cp-footer {
    flex: 0 0 56px;
    padding: 6px 8px 7px;
    display: flex; flex-direction: column; gap: 2px;
    border-top: 1px solid rgba(0,0,0,0.18);
}
.gds-cp-label {
    font-size: 11.5px; font-weight: 600;
    line-height: 1.2;
    outline: none; cursor: text;
    border-radius: 3px;
    min-height: 14px;
    text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
    /* color comes from inline style on .gds-cp-footer */
}
.gds-cp-label:focus {
    background: rgba(255,255,255,0.20);
    white-space: normal;
}
.gds-cp-label.gds-empty::before {
    content: attr(data-placeholder);
    opacity: 0.55; font-style: italic; pointer-events: none;
}
.gds-cp-hex {
    font-size: 10.5px; font-weight: 600;
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.04em;
    cursor: pointer;
    border-radius: 3px;
    padding: 1px 3px; margin-left: -3px;
    align-self: flex-start;
    transition: background 0.12s;
    opacity: 0.85;
}
.gds-cp-hex:hover { background: rgba(255,255,255,0.18); opacity: 1; }
.gds-cp-hex.gds-cp-hex-copied {
    background: rgba(74,171,109,0.85) !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* Add tile (looks like the object_ref Add-more) */
.gds-cp-tile.gds-cp-add {
    background: transparent;
    border: 1.5px dashed rgba(255,255,255,0.16);
    box-shadow: none;
    color: var(--text-muted);
    align-items: center; justify-content: center;
    padding: 0; gap: 4px;
    cursor: pointer; font-family: inherit;
}
.gds-cp-tile.gds-cp-add:hover {
    background: rgba(74,158,255,0.05);
    border-color: rgba(74,158,255,0.45);
    color: #4a9eff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(74,158,255,0.12);
}
.gds-cp-add-icon {
    font-size: 38px; font-weight: 300; line-height: 1;
    opacity: 0.55; transition: all 0.15s;
}
.gds-cp-tile.gds-cp-add:hover .gds-cp-add-icon { transform: scale(1.10); opacity: 1; }
.gds-cp-add-label { font-size: 11.5px; font-weight: 700; }

/* Drag-reorder visuals (mirror object_ref pattern) */
.gds-cp-tile.gds-cp-dragging { cursor: grabbing; }
.gds-cp-tile.gds-cp-src-hidden {
    visibility: hidden;
    pointer-events: none;
    position: relative;
}
.gds-cp-tile.gds-cp-src-hidden::before {
    content: ''; position: absolute; inset: 0;
    visibility: visible;
    border-radius: 8px;
    background: rgba(74,158,255,0.06);
    border: 2px dashed rgba(74,158,255,0.45);
    box-sizing: border-box;
}

/* Empty-state hint (shown only when no swatches yet) */
.gds-cp-empty-hint {
    margin-top: 6px;
    font-size: 11.5px; color: var(--text-muted); font-style: italic;
}

/* ───────────────────────────────────────────────────────────────────
   Progress Tracker Block
   Heading + count/bar header + vertical row list + commit-on-Enter add row.
   ─────────────────────────────────────────────────────────────────── */
.gds-block-progress .gds-block-inner { padding: 12px 14px 12px 4px; }

.gds-prog-headerbar {
    display: flex; align-items: center; gap: 10px;
    margin: 4px 0 10px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
}
.gds-prog-count {
    font-size: 11px; font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.gds-prog-bar {
    flex: 1; height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px; overflow: hidden;
    min-width: 60px;
}
.gds-prog-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2ecc71 0%, #4aab6d 100%);
    border-radius: 3px;
    transition: width 0.25s ease;
}
.gds-prog-pct {
    font-size: 11px; font-weight: 700;
    color: var(--text-secondary);
    min-width: 30px; text-align: right;
    flex-shrink: 0;
}

.gds-prog-list {
    display: flex; flex-direction: column;
    gap: 1px;
    margin-bottom: 4px;
}

.gds-prog-row {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 5px 30px 5px 22px;
    border-radius: 4px;
    transition: background 0.12s;
    min-height: 30px;
}
.gds-prog-row:hover { background: rgba(255,255,255,0.04); }

/* Drag handle (hover-only, far left) */
.gds-prog-row-handle {
    position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 22px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.40);
    font-size: 12px; cursor: grab;
    opacity: 0; transition: opacity 0.12s;
    user-select: none;
}
.gds-prog-row-handle:active { cursor: grabbing; }
.gds-prog-row:hover .gds-prog-row-handle { opacity: 0.85; }

/* Status pip — clickable circle */
.gds-prog-pip {
    width: 20px; height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--pip-color, #888a90);
    color: var(--pip-color, #888a90);
    font-size: 11px; line-height: 1;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: all 0.12s;
}
.gds-prog-pip:hover {
    transform: scale(1.10);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pip-color, #888a90) 18%, transparent);
}

/* Filled pips (done / scrapped) — solid bg with white icon */
.gds-prog-row-done .gds-prog-pip,
.gds-prog-row-scrapped .gds-prog-pip {
    background: var(--pip-color);
    color: #fff;
}
/* In-progress pip — half-filled feel via the ◐ glyph; hollow ring */
.gds-prog-row-in_progress .gds-prog-pip {
    background: color-mix(in srgb, var(--pip-color) 14%, transparent);
}

/* Label */
.gds-prog-label {
    flex: 1; min-width: 0;
    font-size: 13px; line-height: 1.4;
    color: var(--text-primary);
    outline: none; cursor: text;
    border-radius: 3px;
    padding: 2px 4px; margin-left: -4px;
    word-break: break-word;
}
.gds-prog-label:focus { background: rgba(255,255,255,0.05); }
.gds-prog-label.gds-empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted); opacity: 0.55;
    font-style: italic; pointer-events: none;
}
/* Done items — strikethrough subtle, dim text */
.gds-prog-row-done .gds-prog-label {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(46,204,113,0.45);
    text-decoration-thickness: 1px;
}
/* Scrapped — heavier strike, more muted */
.gds-prog-row-scrapped .gds-prog-label {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: rgba(224,85,85,0.55);
    text-decoration-thickness: 1.5px;
    opacity: 0.75;
}

/* Status text (right-aligned, color matches pip) */
.gds-prog-status-text {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--pip-color, #888a90);
    background: color-mix(in srgb, var(--pip-color, #888a90) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--pip-color, #888a90) 28%, transparent);
    line-height: 1.1;
    user-select: none;
    transition: opacity 0.12s;
    margin-right: 4px;
}
/* Fade slightly on hover so the delete button reads cleanly on top */
.gds-prog-row:hover .gds-prog-status-text { opacity: 0.30; }

/* Per-row delete (hover-only, right) */
.gds-prog-row-remove {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 4px;
    background: transparent; border: 1px solid transparent;
    color: rgba(255,255,255,0.55); font-size: 11px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: all 0.12s; z-index: 5;
}
.gds-prog-row:hover .gds-prog-row-remove { opacity: 1; }
.gds-prog-row-remove:hover {
    background: rgba(224,85,85,0.85); border-color: rgba(224,85,85,1); color: #fff;
}

/* Drag-reorder visuals */
.gds-prog-row.gds-prog-dragging { cursor: grabbing; }
.gds-prog-row.gds-prog-src-hidden {
    visibility: hidden;
    pointer-events: none;
    position: relative;
}
.gds-prog-row.gds-prog-src-hidden::before {
    content: ''; position: absolute; inset: 0;
    visibility: visible;
    border-radius: 4px;
    background: rgba(74,158,255,0.05);
    border: 1.5px dashed rgba(74,158,255,0.40);
    box-sizing: border-box;
}

/* Add row (input + plus pip) */
.gds-prog-add-row {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 6px 4px 22px;
    margin-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.06);
    padding-top: 8px;
}
.gds-prog-add-pip {
    width: 20px; height: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,0.30);
    color: rgba(255,255,255,0.55);
    font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    user-select: none;
}
.gds-prog-add-input {
    flex: 1; min-width: 0;
    background: transparent;
    border: 0; outline: 0;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13px; line-height: 1.4;
    padding: 4px 6px;
    border-radius: 3px;
    transition: background 0.12s;
}
.gds-prog-add-input::placeholder {
    color: var(--text-muted); opacity: 0.55; font-style: italic;
}
.gds-prog-add-input:focus { background: rgba(255,255,255,0.05); }

/* Status menu popover (right-click on pip) */
.gds-prog-status-menu {
    position: fixed; z-index: 2000;
    min-width: 160px;
    padding: 4px;
    background: #1d1f24;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    display: flex; flex-direction: column; gap: 1px;
    user-select: none;
}
.gds-prog-status-menu-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 9px;
    background: transparent; border: 0;
    color: var(--text-primary);
    font-family: inherit; font-size: 12px; text-align: left;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.10s;
}
.gds-prog-status-menu-item:hover { background: rgba(255,255,255,0.06); }
.gds-prog-status-menu-item.gds-prog-status-active {
    background: rgba(74,158,255,0.12);
}
.gds-prog-status-menu-item .gds-prog-status-icon {
    width: 16px; height: 16px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--pip-color, #888a90);
    color: #fff; font-size: 9px; font-weight: 700;
    flex-shrink: 0;
}
.gds-prog-status-menu-item .gds-prog-status-label { flex: 1; }

/* ───────────────────────────────────────────────────────────────────
   Timeline / Milestone Block
   Heading + mode-switch + horizontal pannable strip OR vertical changelog.
   ─────────────────────────────────────────────────────────────────── */
.gds-block-timeline .gds-block-inner { padding: 12px 14px 14px 4px; }

.gds-tl-header-row {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.gds-tl-heading { flex: 1; min-width: 0; }

/* Layout-mode switch (segmented pill) */
.gds-tl-mode-switch {
    display: inline-flex;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.gds-tl-mode-btn {
    background: transparent; border: 0;
    color: var(--text-muted);
    width: 26px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.12s;
}
.gds-tl-mode-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.gds-tl-mode-btn.gds-tl-mode-active {
    background: rgba(74,158,255,0.18);
    color: #4a9eff;
}

/* ── Horizontal mode ── */
.gds-tl-strip-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    padding: 16px 0 8px;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    background: rgba(0,0,0,0.10);
    user-select: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.gds-tl-strip-wrap::-webkit-scrollbar { height: 6px; }
.gds-tl-strip-wrap::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18); border-radius: 3px;
}
.gds-tl-strip-wrap.gds-tl-panning { cursor: grabbing; }
.gds-tl-strip-wrap.gds-tl-panning * { cursor: grabbing !important; }

.gds-tl-strip {
    position: relative;
    height: 132px;
}
.gds-tl-spine {
    position: absolute; top: 65px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.06) 0%,
        rgba(255,255,255,0.18) 8%,
        rgba(255,255,255,0.18) 92%,
        rgba(255,255,255,0.06) 100%);
}

/* Today indicator (vertical dashed line on the spine) */
.gds-tl-today {
    position: absolute; top: 8px; bottom: 8px;
    width: 0;
    border-left: 1.5px dashed rgba(74,158,255,0.65);
    z-index: 1;
}
.gds-tl-today-lbl {
    position: absolute; top: -2px; left: -22px;
    width: 44px; text-align: center;
    font-size: 8.5px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: #4a9eff;
    background: rgba(29,31,36,0.8);
    padding: 1px 0;
    border-radius: 3px;
}

/* Marker (button: date · dot · label) */
.gds-tl-marker {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 110px; height: 130px;
    background: transparent; border: 0;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0;
    display: flex; flex-direction: column; align-items: center;
    font-family: inherit;
    transition: transform 0.12s;
}
.gds-tl-marker:hover { transform: translateX(-50%) translateY(-2px); }
.gds-tl-marker:hover .gds-tl-marker-dot {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-color, #4a9eff) 22%, transparent);
}
.gds-tl-marker-date {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 8px;
    line-height: 1.2;
    text-align: center;
}
.gds-tl-marker-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    margin: 0 0 8px;
    z-index: 2;
    transition: box-shadow 0.15s;
}
.gds-tl-marker-pending .gds-tl-marker-dot {
    background: #1d1f24;
    border: 2px solid #4a9eff;
    --m-color: #4a9eff;
}
.gds-tl-marker-done .gds-tl-marker-dot {
    background: #2ecc71;
    border: 2px solid #2ecc71;
    --m-color: #2ecc71;
}
.gds-tl-marker-overdue .gds-tl-marker-dot {
    background: #1d1f24;
    border: 2px solid #e05555;
    --m-color: #e05555;
}
.gds-tl-marker-label {
    font-size: 11px; font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.3;
    max-height: 30px; overflow: hidden;
    word-break: break-word;
    padding: 0 4px;
}
.gds-tl-marker-label-empty { color: var(--text-muted); font-style: italic; font-weight: 500; }
.gds-tl-marker-pending .gds-tl-marker-label { color: var(--text-secondary); }

/* Add tile */
.gds-tl-marker-add { opacity: 0.55; transition: opacity 0.15s, transform 0.12s; }
.gds-tl-marker-add:hover { opacity: 1; }
.gds-tl-marker-dot-add {
    background: transparent !important;
    border: 1.5px dashed rgba(255,255,255,0.30) !important;
    color: rgba(255,255,255,0.55);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 300;
}
.gds-tl-add-hint { color: var(--text-muted) !important; font-style: italic; font-weight: 500 !important; }

/* Horizontal empty hint */
.gds-block-timeline .gds-tl-empty-hint {
    text-align: center;
    padding: 14px 8px 6px;
    font-size: 11.5px; color: var(--text-muted); font-style: italic;
}

/* ── Vertical mode ── */
.gds-tl-vlist {
    display: flex; flex-direction: column; gap: 0;
    padding: 6px 0;
}
.gds-tl-vrow {
    display: grid;
    grid-template-columns: 90px 24px 1fr;
    align-items: stretch;
    gap: 10px;
    padding: 8px 12px 8px 4px;
    background: transparent; border: 0;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    border-radius: 4px;
    transition: background 0.12s;
}
.gds-tl-vrow:hover { background: rgba(255,255,255,0.04); }
.gds-tl-vrow-date {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    align-self: center;
    text-align: right;
    padding-right: 4px;
    white-space: nowrap;
}
.gds-tl-vrow-spine {
    position: relative;
    width: 24px;
}
.gds-tl-vrow-spine::before {
    content: ''; position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 0; bottom: 0;
    width: 2px;
    background: rgba(255,255,255,0.12);
}
.gds-tl-vlist .gds-tl-vrow:first-of-type .gds-tl-vrow-spine::before { top: 50%; }
.gds-tl-vlist .gds-tl-vrow:last-of-type .gds-tl-vrow-spine::before { bottom: 50%; }
.gds-tl-vrow-dot {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    z-index: 2;
}
.gds-tl-vrow-pending .gds-tl-vrow-dot {
    background: #1d1f24;
    border: 2px solid #4a9eff;
}
.gds-tl-vrow-done .gds-tl-vrow-dot {
    background: #2ecc71;
    border: 2px solid #2ecc71;
}
.gds-tl-vrow-overdue .gds-tl-vrow-dot {
    background: #1d1f24;
    border: 2px solid #e05555;
}
.gds-tl-vrow-body {
    display: flex; flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.gds-tl-vrow-label {
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
}
.gds-tl-vrow-pending .gds-tl-vrow-label { color: var(--text-secondary); }
.gds-tl-vrow-full {
    font-size: 10.5px; color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* Today divider in vertical mode */
.gds-tl-vtoday {
    display: grid;
    grid-template-columns: 90px 24px 1fr;
    gap: 10px;
    padding: 4px 12px 4px 4px;
    align-items: center;
}
.gds-tl-vtoday-lbl {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: #4a9eff;
}
.gds-tl-vtoday-line {
    grid-column: 2;
    height: 2px;
    background: repeating-linear-gradient(to right,
        rgba(74,158,255,0.7) 0,
        rgba(74,158,255,0.7) 3px,
        transparent 3px,
        transparent 6px);
    width: 24px;
}

/* Add row in vertical mode */
.gds-tl-vadd {
    display: flex; align-items: center; gap: 8px;
    margin-top: 4px;
    padding: 8px 12px;
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.16);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600;
    transition: all 0.15s;
}
.gds-tl-vadd:hover {
    color: #4a9eff;
    border-color: rgba(74,158,255,0.45);
    background: rgba(74,158,255,0.05);
}
.gds-tl-vadd-icon {
    font-size: 18px; line-height: 1; font-weight: 300;
}

/* ── Marker editor popover ── */
.gds-tl-marker-popover {
    position: fixed; z-index: 2000;
    width: 240px;
    padding: 10px;
    background: #1d1f24;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.50);
    display: flex; flex-direction: column; gap: 8px;
}
.gds-tl-pop-row {
    display: flex; flex-direction: column; gap: 3px;
}
.gds-tl-pop-label {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
.gds-tl-pop-date,
.gds-tl-pop-text {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit; font-size: 12px;
    padding: 5px 8px;
    outline: none;
}
.gds-tl-pop-text:focus,
.gds-tl-pop-date:focus { border-color: #4a9eff; }
.gds-tl-pop-done-row { padding-top: 2px; }
.gds-tl-pop-done-wrap {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-primary);
    cursor: pointer;
}
.gds-tl-pop-done-wrap input { cursor: pointer; }
.gds-tl-pop-actions {
    display: flex; gap: 6px; margin-top: 4px;
}
.gds-tl-pop-delete,
.gds-tl-pop-close {
    flex: 1;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-family: inherit; font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
}
.gds-tl-pop-close:hover {
    background: rgba(74,158,255,0.18);
    border-color: rgba(74,158,255,0.45);
    color: #4a9eff;
}
.gds-tl-pop-delete:hover {
    background: rgba(224,85,85,0.85);
    border-color: rgba(224,85,85,1);
    color: #fff;
}

/* ── Phases ───────────────────────────────────────────────────── */

/* "+ Phase" button in the header row */
.gds-tl-add-phase-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-secondary);
    font-family: inherit; font-size: 11px; font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s;
    flex-shrink: 0;
}
.gds-tl-add-phase-btn:hover {
    background: rgba(74,158,255,0.12);
    border-color: rgba(74,158,255,0.35);
    color: #4a9eff;
}
.gds-tl-add-phase-plus {
    font-size: 14px; line-height: 1; font-weight: 300;
}

/* Strip height + bottom padding are set inline based on number of lanes */
.gds-tl-strip-wrap-with-phases { padding-bottom: 8px; }

/* Click-to-add zone — covers the phase area; clicking empty space adds a phase
   at the nearest milestone + lane. Phase bars (z-index 2) sit on top and
   capture their own clicks. */
.gds-tl-phase-addzone {
    position: absolute;
    left: 0; right: 0;
    z-index: 1;
    cursor: copy;
}
.gds-tl-phase-addzone:hover {
    background: rgba(74,158,255,0.04);
    box-shadow: inset 0 0 0 1px rgba(74,158,255,0.15);
    border-radius: 6px;
}

/* Spine + today indicator must NOT intercept clicks intended for the add zone */
.gds-tl-spine,
.gds-tl-today { pointer-events: none; }

/* Phase bar (horizontal mode) — milestone-anchored, lane-positioned (top set inline) */
.gds-tl-phase-bar {
    position: absolute;
    height: 30px;
    border-radius: 5px;
    border: 1px solid;
    padding: 0 14px;
    background: transparent; /* set inline */
    display: flex; align-items: center; gap: 8px;
    overflow: hidden;
    cursor: grab;
    font-family: inherit;
    transition: filter 0.12s, box-shadow 0.12s;
    z-index: 2;
    user-select: none;
    will-change: transform;
}

/* Active drag — bar lifts up, follows cursor instantly (no transition during drag) */
.gds-tl-phase-bar-active {
    z-index: 20;
    box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 0 1px currentColor inset;
    cursor: grabbing !important;
    transition: none !important;
    opacity: 0.95;
}

/* Ghost = dashed outline at the snapped target position. Animates between
   snap points so the user sees exactly where the bar will land. */
.gds-tl-phase-bar-ghost {
    position: absolute;
    height: 30px;
    border-radius: 5px;
    border: 2px dashed currentColor;
    background: transparent !important;
    pointer-events: none;
    z-index: 5;
    transition: left 0.10s ease, top 0.12s ease, width 0.10s ease;
    opacity: 0.65;
    box-shadow: 0 0 12px color-mix(in srgb, currentColor 30%, transparent);
}
.gds-tl-phase-bar-ghost::before {
    content: ''; position: absolute; inset: 0;
    background: currentColor;
    opacity: 0.10;
    border-radius: 4px;
}
.gds-tl-phase-bar:hover { filter: brightness(1.18); }
.gds-tl-phase-bar-current {
    box-shadow: 0 0 0 1px currentColor inset, 0 0 0 2px rgba(255,255,255,0.04);
}
.gds-tl-phase-bar-name {
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
    pointer-events: none;
}
.gds-tl-phase-bar-range {
    font-size: 10px; font-weight: 600;
    opacity: 0.70;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
    pointer-events: none;
}

/* Resize handles on phase bar edges */
.gds-tl-phase-resize {
    position: absolute;
    top: 0; bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 3;
}
.gds-tl-phase-resize-l { left: 0; }
.gds-tl-phase-resize-r { right: 0; }
.gds-tl-phase-resize::after {
    content: '';
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 2px; height: 16px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity 0.12s;
}
.gds-tl-phase-resize-l::after { left: 3px; }
.gds-tl-phase-resize-r::after { right: 3px; }
.gds-tl-phase-bar:hover .gds-tl-phase-resize::after { opacity: 0.85; }

/* While any phase is being dragged */
body.gds-tl-phase-dragging,
body.gds-tl-phase-dragging * { cursor: grabbing !important; }
body.gds-tl-phase-dragging .gds-tl-phase-resize,
body.gds-tl-phase-dragging .gds-tl-phase-resize * { cursor: ew-resize !important; }
body.gds-tl-phase-dragging .gds-tl-phase-bar { transition: none; }

/* Covers info inside phase popover */
.gds-tl-phase-covers {
    margin-top: 2px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.04);
    border-left: 2px solid rgba(255,255,255,0.12);
    border-radius: 3px;
    font-size: 11px;
    color: var(--text-secondary);
}
.gds-tl-phase-covers span {
    color: var(--text-primary); font-weight: 600;
}
.gds-tl-phase-covers-hint {
    margin-top: 3px;
    font-size: 9.5px; color: var(--text-muted); font-style: italic;
}

/* "+ Phase" button flash when there are no milestones */
@keyframes gds-tl-phase-flash {
    0%   { background: rgba(255,255,255,0.04); }
    50%  { background: rgba(240,160,48,0.30); border-color: rgba(240,160,48,0.65); color: #f0a030; }
    100% { background: rgba(255,255,255,0.04); }
}
.gds-tl-add-phase-btn.gds-tl-add-phase-flash { animation: gds-tl-phase-flash 0.7s ease; }

/* Vertical mode — phase header */
.gds-tl-vphase-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin: 8px 0 4px;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid;
    background: transparent; /* set inline */
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: filter 0.12s;
    width: 100%;
}
.gds-tl-vphase-header:hover { filter: brightness(1.18); }
.gds-tl-vphase-header.gds-tl-vphase-current {
    box-shadow: 0 0 0 1px currentColor inset;
}
.gds-tl-vphase-name {
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.gds-tl-vphase-range {
    font-size: 10.5px; font-weight: 600;
    opacity: 0.75;
}
.gds-tl-vphase-empty {
    padding: 4px 12px 8px 26px;
    font-size: 10.5px; color: var(--text-muted); font-style: italic;
}
.gds-tl-vphase-other {
    margin: 12px 0 4px;
    padding: 4px 8px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px dashed rgba(255,255,255,0.10);
}

/* Phase editor popover */
.gds-tl-phase-popover {
    position: fixed; z-index: 2000;
    width: 290px;
    padding: 10px;
    background: #1d1f24;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.50);
    display: flex; flex-direction: column; gap: 8px;
}
.gds-tl-phase-popover .gds-tl-pop-row {
    display: flex; flex-direction: column; gap: 3px;
}
.gds-tl-phase-popover .gds-tl-pop-label {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
.gds-tl-phase-popover .gds-tl-pop-text,
.gds-tl-phase-popover .gds-tl-pop-date {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit; font-size: 12px;
    padding: 5px 8px;
    outline: none;
}
.gds-tl-phase-popover .gds-tl-pop-text:focus,
.gds-tl-phase-popover .gds-tl-pop-date:focus { border-color: #4a9eff; }

.gds-tl-phase-swatch-row {
    display: flex; flex-wrap: wrap; gap: 5px;
}
.gds-tl-phase-swatch {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s;
    flex-shrink: 0;
}
.gds-tl-phase-swatch:hover { transform: scale(1.10); }
.gds-tl-phase-swatch-active {
    border-color: rgba(255,255,255,0.85);
}
.gds-tl-phase-swatch-custom {
    position: relative;
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px dashed rgba(255,255,255,0.30) !important;
    color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
}
.gds-tl-phase-swatch-custom .gds-tl-phase-color-input {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
    border: 0; padding: 0; margin: 0;
}
.gds-tl-phase-swatch-custom:hover { color: #4a9eff; border-color: rgba(74,158,255,0.45) !important; }

/* (Date-row styles removed — phases no longer have date inputs in the popover.
   Range is set by dragging the bar's edges instead.) */

/* ───────────────────────────────────────────────────────────────────
   Sound List Block
   Heading + sticky now-playing bar + scrollable track list + add form.
   ─────────────────────────────────────────────────────────────────── */
.gds-block-sound_list .gds-block-inner { padding: 12px 14px 14px 4px; }

/* ── Big now-playing banner (top of block when this block has the playing track) ── */
.gds-sl-banner {
    display: flex; gap: 16px;
    margin: 6px 0 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(155,89,182,0.18), rgba(74,158,255,0.06) 70%);
    border: 1px solid rgba(155,89,182,0.40);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(155,89,182,0.10), 0 4px 12px rgba(0,0,0,0.20);
}
.gds-sl-banner-thumb {
    width: 84px; height: 84px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(0,0,0,0.30) center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.gds-sl-banner-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 2px;
}
.gds-sl-banner-eyebrow {
    font-size: 9.5px; font-weight: 700;
    color: #cda4dc;
    letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 1px;
}
.gds-sl-banner-title {
    font-size: 17px; font-weight: 700;
    color: #fff;
    line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gds-sl-banner-artist {
    font-size: 12px; font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gds-sl-banner-progress {
    position: relative;
    height: 5px;
    background: rgba(255,255,255,0.10);
    border-radius: 3px;
    margin: 8px 0 4px;
    overflow: visible;
}
.gds-sl-banner-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #9b59b6, #cda4dc);
    border-radius: 3px;
    transition: width 0.10s linear;
    pointer-events: none;
}
.gds-sl-banner-scrub {
    position: absolute; inset: -8px 0;
    width: 100%; height: 21px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background: transparent;
}
.gds-sl-banner-row {
    display: flex; align-items: center; gap: 10px;
    margin-top: 4px;
}
.gds-sl-banner-time {
    font-size: 10px; font-weight: 600;
    color: var(--text-muted);
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    letter-spacing: 0.02em;
    min-width: 36px;
}
.gds-sl-banner-tot { text-align: right; }
.gds-sl-banner-buttons { display: flex; align-items: center; gap: 4px; }

/* Banner buttons — same look as media-app transport controls */
.gds-sl-bbtn {
    width: 30px; height: 30px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s;
    font-family: inherit;
    padding: 0;
}
.gds-sl-bbtn:hover {
    background: rgba(155,89,182,0.20);
    border-color: rgba(155,89,182,0.50);
    color: #fff;
}
.gds-sl-bbtn.gds-sl-on {
    background: rgba(155,89,182,0.32);
    border-color: rgba(155,89,182,0.65);
    color: #fff;
}
.gds-sl-bbtn-play {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #9b59b6, #b673c8);
    border-color: rgba(155,89,182,0.85);
    color: #fff;
}
.gds-sl-bbtn-play:hover {
    background: linear-gradient(135deg, #b673c8, #d088e0);
    border-color: rgba(205,164,220,1);
    transform: scale(1.04);
}
.gds-sl-bbtn svg { display: block; }

.gds-sl-banner-vol-wrap {
    display: flex; align-items: center; gap: 6px;
    margin-left: auto;
}
.gds-sl-banner-vol-icon {
    color: var(--text-muted);
    display: flex; align-items: center;
}
.gds-sl-banner-vol {
    width: 80px; height: 4px;
    -webkit-appearance: none; appearance: none;
    background: linear-gradient(to right,
        #9b59b6 0%, #9b59b6 var(--pct, 85%),
        rgba(255,255,255,0.10) var(--pct, 85%), rgba(255,255,255,0.10) 100%);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.gds-sl-banner-vol::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #cda4dc;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.30);
    box-shadow: 0 1px 3px rgba(0,0,0,0.40);
}
.gds-sl-banner-vol::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #cda4dc;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.30);
}

/* Track list */
.gds-sl-list {
    display: flex; flex-direction: column;
    gap: 1px;
    margin: 4px 0;
}
.gds-sl-empty {
    padding: 12px;
    font-size: 11.5px; color: var(--text-muted); font-style: italic;
    text-align: center;
}
.gds-sl-row {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 22px;
    border-radius: 4px;
    transition: background 0.12s;
    min-height: 40px;
}
.gds-sl-row:hover { background: rgba(255,255,255,0.04); }
.gds-sl-row.gds-sl-row-active {
    background: rgba(155,89,182,0.12);
    box-shadow: inset 2px 0 0 #9b59b6;
}

.gds-sl-row-handle {
    position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 22px; border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.40);
    font-size: 12px;
    cursor: grab; user-select: none;
    opacity: 0; transition: opacity 0.12s;
}
.gds-sl-row-handle:active { cursor: grabbing; }
.gds-sl-row:hover .gds-sl-row-handle { opacity: 0.85; }

.gds-sl-row-play {
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(155,89,182,0.20);
    border: 1px solid rgba(155,89,182,0.45);
    color: #cda4dc;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: all 0.12s;
}
.gds-sl-row-play svg { display: block; }
.gds-sl-row-play:hover {
    background: rgba(155,89,182,0.50);
    color: #fff;
    transform: scale(1.05);
}
.gds-sl-row-active .gds-sl-row-play {
    background: rgba(155,89,182,0.70);
    color: #fff;
    border-color: #9b59b6;
}

.gds-sl-row-thumb {
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(0,0,0,0.30) center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    overflow: hidden;
}

.gds-sl-row-source {
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 8.5px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}
.gds-sl-source-youtube { background: rgba(255,0,0,0.18); color: #ff7a7a; }
.gds-sl-source-soundcloud { background: rgba(255,140,0,0.18); color: #ffa54d; }
.gds-sl-source-url { background: rgba(74,158,255,0.18); color: #4a9eff; }

/* Track row meta block: title (top) + artist · note (bottom, secondary) */
.gds-sl-row-meta {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 1px;
    padding: 0 6px;
    overflow: hidden;
}
.gds-sl-row-title {
    font-size: 12.5px; font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gds-sl-row-artist {
    font-size: 10.5px; font-weight: 500;
    color: var(--text-muted);
    line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gds-sl-row-note {
    color: var(--text-muted);
    font-style: italic;
}
.gds-sl-row-active .gds-sl-row-title { color: #fff; }
.gds-sl-row-active .gds-sl-row-artist { color: #cda4dc; }

.gds-sl-row-menu, .gds-sl-row-remove {
    width: 22px; height: 22px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: all 0.12s;
}
.gds-sl-row:hover .gds-sl-row-menu,
.gds-sl-row:hover .gds-sl-row-remove { opacity: 1; }
.gds-sl-row-menu:hover { background: rgba(255,255,255,0.10); color: var(--text-primary); }
.gds-sl-row-remove:hover { background: rgba(224,85,85,0.85); border-color: rgba(224,85,85,1); color: #fff; }

/* Drag-reorder */
.gds-sl-row.gds-sl-dragging { cursor: grabbing; }
.gds-sl-row.gds-sl-src-hidden {
    visibility: hidden;
    pointer-events: none;
    position: relative;
}
.gds-sl-row.gds-sl-src-hidden::before {
    content: ''; position: absolute; inset: 2px;
    visibility: visible;
    border-radius: 4px;
    background: rgba(155,89,182,0.06);
    border: 1.5px dashed rgba(155,89,182,0.45);
    box-sizing: border-box;
}

/* Add form: row 1 = URL + upload icon. Row 2 = title + artist + add button. */
.gds-sl-add {
    display: grid;
    grid-template-columns: 1fr 1fr 88px;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.06);
}
.gds-sl-add-url-wrap {
    grid-column: 1 / -1;
    position: relative;
    display: flex; align-items: stretch;
    gap: 4px;
}
.gds-sl-add-url {
    flex: 1; min-width: 0;
}
.gds-sl-add-url, .gds-sl-add-title, .gds-sl-add-artist {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
    padding: 6px 9px;
    outline: none;
}
.gds-sl-add-url:focus, .gds-sl-add-title:focus, .gds-sl-add-artist:focus { border-color: #9b59b6; }
.gds-sl-add-upload {
    width: 32px; height: auto;
    flex-shrink: 0;
    background: rgba(155,89,182,0.10);
    border: 1px solid rgba(155,89,182,0.35);
    border-radius: 4px;
    color: #cda4dc;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s;
}
.gds-sl-add-upload:hover {
    background: rgba(155,89,182,0.30);
    color: #fff;
    border-color: rgba(155,89,182,0.65);
}
.gds-sl-add-btn {
    background: rgba(155,89,182,0.22);
    border: 1px solid rgba(155,89,182,0.50);
    color: #cda4dc;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 700;
    padding: 0 14px;
    transition: all 0.12s;
}
.gds-sl-add-btn:hover { background: rgba(155,89,182,0.55); color: #fff; }
.gds-sl-add-hint {
    grid-column: 1 / -1;
    font-size: 10px;
    padding-left: 4px;
    color: var(--text-muted);
    min-height: 14px;
}
.gds-sl-add-hint-yt    { color: #ff7a7a; }
.gds-sl-add-hint-warn  { color: #f0a030; font-style: italic; }
.gds-sl-add-hint-url   { color: #4a9eff; }
.gds-sl-add-hint-found { color: #9b59b6; font-weight: 600; }

/* Track-edit popover */
.gds-sl-track-popover {
    position: fixed; z-index: 2000;
    width: 320px;
    padding: 10px;
    background: #1d1f24;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.50);
    display: flex; flex-direction: column; gap: 8px;
}
.gds-sl-pop-row { display: flex; flex-direction: column; gap: 3px; }
.gds-sl-pop-label {
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
}
.gds-sl-pop-url, .gds-sl-pop-text, .gds-sl-pop-thumb,
.gds-sl-pop-title, .gds-sl-pop-artist, .gds-sl-pop-note {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: inherit; font-size: 12px;
    padding: 5px 8px;
    outline: none;
}
.gds-sl-pop-url:focus, .gds-sl-pop-text:focus, .gds-sl-pop-thumb:focus,
.gds-sl-pop-title:focus, .gds-sl-pop-artist:focus, .gds-sl-pop-note:focus { border-color: #9b59b6; }
.gds-sl-pop-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.gds-sl-pop-actions { display: flex; gap: 6px; margin-top: 4px; }
.gds-sl-pop-cancel, .gds-sl-pop-save {
    flex: 1;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-family: inherit; font-size: 11.5px; font-weight: 600;
    cursor: pointer;
    transition: all 0.12s;
}
.gds-sl-pop-save:hover {
    background: rgba(155,89,182,0.30);
    border-color: rgba(155,89,182,0.55);
    color: #fff;
}

/* ── Floating mini-player ── */
.gds-sl-mini {
    position: fixed;
    bottom: 24px; right: 24px;
    z-index: 2500;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px 8px 12px;
    min-width: 360px; max-width: 460px;
    background: #1d1f24;
    border: 1px solid rgba(155,89,182,0.45);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.55);
    cursor: grab;
    user-select: none;
}
.gds-sl-mini.gds-sl-mini-dragging { cursor: grabbing; opacity: 0.85; }
.gds-sl-mini-thumb {
    width: 40px; height: 40px;
    flex-shrink: 0;
    border-radius: 5px;
    background: rgba(0,0,0,0.30) center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    overflow: hidden;
}
.gds-sl-mini-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    gap: 2px;
}
.gds-sl-mini-label {
    font-size: 12px; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.gds-sl-mini-source {
    font-size: 9.5px; color: #cda4dc;
    letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.gds-sl-mini-progress {
    position: relative;
    margin-top: 4px;
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 8px;
    align-items: center;
}
.gds-sl-mini-progress-fill {
    position: absolute;
    left: 0; right: auto; top: 6px;
    height: 4px;
    background: linear-gradient(90deg, #9b59b6, #cda4dc);
    border-radius: 2px;
    pointer-events: none;
    transition: width 0.10s linear;
}
.gds-sl-mini-progress::before {
    content: '';
    position: absolute;
    left: 0; right: auto; top: 6px;
    width: calc(100% - 60px);
    height: 4px;
    background: rgba(255,255,255,0.10);
    border-radius: 2px;
    pointer-events: none;
}
.gds-sl-mini-scrub {
    -webkit-appearance: none; appearance: none;
    grid-column: 1;
    grid-row: 1;
    width: 100%; height: 14px;
    background: transparent;
    margin: 0;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
}
.gds-sl-mini-cur, .gds-sl-mini-tot {
    font-size: 8.5px; font-weight: 600;
    color: var(--text-muted);
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    grid-row: 1;
    z-index: 1;
}
.gds-sl-mini-cur { grid-column: 1; justify-self: start; padding-top: 12px; pointer-events: none; }
.gds-sl-mini-tot { grid-column: 2; padding-top: 0; }

.gds-sl-mini-controls {
    display: flex; align-items: center; gap: 3px;
    flex-shrink: 0;
}
.gds-sl-mini-btn {
    width: 28px; height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.12s;
    padding: 0;
    font-family: inherit;
}
.gds-sl-mini-btn svg { display: block; }
.gds-sl-mini-btn:hover {
    background: rgba(155,89,182,0.28);
    border-color: rgba(155,89,182,0.65);
    color: #fff;
}
.gds-sl-mini-toggle {
    background: rgba(155,89,182,0.28);
    border-color: rgba(155,89,182,0.55);
    color: #fff;
}
.gds-sl-mini-toggle:hover { background: rgba(155,89,182,0.55); }
.gds-sl-mini-close-btn:hover {
    background: rgba(224,85,85,0.85);
    border-color: rgba(224,85,85,1);
    color: #fff;
}

/* Block flash on go-to */
.gds-sl-block-flash {
    animation: gds-sl-flash 1.4s ease;
}
@keyframes gds-sl-flash {
    0%   { box-shadow: 0 0 0 0 rgba(155,89,182,0.75); }
    30%  { box-shadow: 0 0 0 6px rgba(155,89,182,0.45); }
    100% { box-shadow: 0 0 0 0 rgba(155,89,182,0); }
}

/* ============================================================
   ITEM SHEET — structured editor for `gameitem`
   ============================================================ */
.item-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
    z-index: 1200;
    display: none;
    align-items: center; justify-content: center;
}
.item-sheet-overlay.open { display: flex; }
.item-sheet-panel {
    position: relative;
    width: 880px; max-width: 97vw;
    height: 86vh; max-height: 95vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.item-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}
.item-sheet-title {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    letter-spacing: 0.02em;
}
.item-sheet-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 18px; padding: 2px 8px;
    border-radius: 4px;
}
.item-sheet-close:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.item-sheet-body {
    flex: 1 1 auto; overflow-y: auto; padding: 18px 22px;
}
.item-resize-handle {
    position: absolute; right: 0; bottom: 0;
    width: 16px; height: 16px; cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--text-muted) 50%, var(--text-muted) 60%, transparent 60%);
    border-bottom-right-radius: 12px;
    opacity: 0.4;
}
.item-resize-handle:hover { opacity: 0.8; }
.item-resizing { user-select: none; }

/* Layout */
.item-sheet-layout {
    display: flex; flex-direction: column; gap: 18px;
    --rarity-color: #b0b0b0;
    --rarity-intensity: 0.30;
}

/* ── Hero ────────────────────────────────────────────────── */
.item-hero {
    display: flex; gap: 22px; align-items: stretch;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--rarity-color) 14%, transparent) 0%, transparent 65%),
        rgba(0,0,0,0.30);
    position: relative;
    overflow: hidden;
}
.item-hero-icon-wrap {
    display: flex; flex-direction: column; gap: 8px;
    align-items: center;
}
.item-hero-icon {
    width: 160px; height: 160px;
    border-radius: 18px;
    border: 2px solid color-mix(in srgb, var(--rarity-color) 60%, transparent);
    background:
        radial-gradient(ellipse at center, color-mix(in srgb, var(--rarity-color) 22%, transparent) 0%, rgba(0,0,0,0.25) 75%);
    color: var(--rarity-color);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease;
}
.item-hero-icon:hover { transform: scale(1.02); }
.item-hero-svg svg { width: 92px; height: 92px; }
.item-hero-img    { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.item-hero-emoji  { font-size: 80px; line-height: 1; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--rarity-color) 50%, transparent)); }
.item-hero-icon-actions {
    display: flex; gap: 6px;
}
.item-icon-pick-btn,
.item-icon-upload-btn {
    flex: 1; padding: 6px 10px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px; cursor: pointer;
    transition: all 0.15s ease;
}
.item-icon-pick-btn:hover,
.item-icon-upload-btn:hover {
    background: color-mix(in srgb, var(--rarity-color) 18%, var(--bg-card-hover));
    border-color: var(--rarity-color);
    color: var(--text-primary);
}

/* Rarity glow tiers */
.item-sheet-layout[data-glow="soft"]    .item-hero-icon { box-shadow: 0 0 24px color-mix(in srgb, var(--rarity-color) 40%, transparent); }
.item-sheet-layout[data-glow="pulse"]   .item-hero-icon { animation: itemPulse 2.4s ease-in-out infinite; }
.item-sheet-layout[data-glow="shimmer"] .item-hero-icon { animation: itemShimmer 2.6s ease-in-out infinite; }
.item-sheet-layout[data-glow="rainbow"] .item-hero-icon { animation: itemRainbow 3s linear infinite; }

@keyframes itemPulse {
    0%, 100% { box-shadow: 0 0 22px color-mix(in srgb, var(--rarity-color) 50%, transparent); }
    50%      { box-shadow: 0 0 48px color-mix(in srgb, var(--rarity-color) 78%, transparent); }
}
@keyframes itemShimmer {
    0%, 100% { box-shadow: 0 0 28px color-mix(in srgb, var(--rarity-color) 65%, transparent),
                            inset 0 0 14px color-mix(in srgb, var(--rarity-color) 28%, transparent); }
    50%      { box-shadow: 0 0 60px color-mix(in srgb, var(--rarity-color) 95%, transparent),
                            inset 0 0 22px color-mix(in srgb, var(--rarity-color) 50%, transparent); }
}
@keyframes itemRainbow {
    0%   { box-shadow: 0 0 36px #ff5a8a, inset 0 0 18px #ff5a8a55; }
    33%  { box-shadow: 0 0 36px #5aa8ff, inset 0 0 18px #5aa8ff55; }
    66%  { box-shadow: 0 0 36px #b27dff, inset 0 0 18px #b27dff55; }
    100% { box-shadow: 0 0 36px #ff5a8a, inset 0 0 18px #ff5a8a55; }
}

.item-hero-fields { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.item-hero-name {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--rarity-color);
    color: var(--text-primary);
    font-size: 26px; font-weight: 800;
    padding: 4px 2px;
    outline: none;
}
.item-hero-name::placeholder { color: var(--text-muted); }
.item-hero-meta {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.item-hero-type, .item-hero-rarity {
    padding: 6px 10px;
    background-color: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    outline: none;
}
/* Force native dropdown popup to use dark theme regardless of rarity color */
.item-hero-type option, .item-hero-rarity option {
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.item-hero-rarity {
    /* Face shows a colored left-border swatch so rarity is still visible */
    border-left: 4px solid var(--rarity-color);
    padding-left: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.item-hero-tagline {
    background: rgba(0,0,0,0.20);
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 13px;
    line-height: 1.45;
    min-height: 32px;
    outline: none;
}
.item-hero-tagline:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.item-hero-tagline:focus { border-color: var(--rarity-color); border-style: solid; }

/* ── Sections ─────────────────────────────────────────────── */
.item-section {
    padding: 14px 16px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
}
.item-section-2col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    background: transparent; border: none; padding: 0;
}
.item-section-2col > div {
    padding: 14px 16px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
}
.item-section-title {
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
    color: var(--rarity-color);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.item-field-text {
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.55;
    min-height: 60px;
    outline: none;
}
.item-field-text:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.item-field-text:focus { border-color: var(--rarity-color); }

/* ── Stats ────────────────────────────────────────────────── */
.item-stats-grid {
    display: flex; flex-direction: column; gap: 6px;
}
.item-stat-row {
    display: grid;
    grid-template-columns: 18px 1fr 1fr 24px;
    gap: 8px; align-items: center;
    padding: 6px 8px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    transition: background 0.15s ease;
}
.item-stat-row:hover { background: rgba(255,255,255,0.04); }
.item-stat-row.item-stat-dragging { opacity: 0.4; }
.item-stat-row.item-stat-over { box-shadow: inset 0 -2px 0 var(--rarity-color); }
.item-stat-drag {
    color: var(--text-muted); cursor: grab;
    text-align: center; user-select: none;
    line-height: 1;
}
.item-stat-row[draggable="true"]:active .item-stat-drag { cursor: grabbing; }
.item-stat-label, .item-stat-value {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    outline: none;
}
.item-stat-label { font-weight: 600; }
.item-stat-value { color: var(--rarity-color); font-weight: 600; }
.item-stat-label:focus, .item-stat-value:focus {
    background: rgba(0,0,0,0.30);
    border-color: var(--rarity-color);
}
.item-stat-remove {
    background: transparent; border: none;
    color: var(--text-muted);
    font-size: 12px; cursor: pointer;
    padding: 2px 6px; border-radius: 3px;
    line-height: 1;
}
.item-stat-remove:hover { background: rgba(204,64,64,0.20); color: #ff7766; }
.item-add-stat-btn {
    margin-top: 8px;
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px; cursor: pointer;
    transition: all 0.15s ease;
}
.item-add-stat-btn:hover {
    border-color: var(--rarity-color); color: var(--rarity-color);
    background: color-mix(in srgb, var(--rarity-color) 10%, transparent);
}

/* ── Tags ─────────────────────────────────────────────────── */
.item-tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.item-tag-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    background: color-mix(in srgb, var(--rarity-color) 12%, var(--bg-card-hover));
    border: 1px solid color-mix(in srgb, var(--rarity-color) 30%, transparent);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 11px; font-weight: 600;
}
.item-tag-remove {
    background: transparent; border: none;
    color: var(--text-muted); font-size: 14px;
    cursor: pointer; padding: 0;
    line-height: 1;
}
.item-tag-remove:hover { color: #ff7766; }
.item-tag-input-wrap { margin-top: 8px; }
.item-tag-input {
    width: 100%;
    padding: 6px 10px;
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
}
.item-tag-input:focus { border-color: var(--rarity-color); }

/* ── Value ────────────────────────────────────────────────── */
.item-value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item-value-cell {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.item-value-label {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.10em;
    color: var(--text-muted); text-transform: uppercase;
}
.item-value-input {
    background: transparent; border: none;
    color: var(--rarity-color);
    font-size: 16px; font-weight: 800;
    outline: none; padding: 0;
}

/* ── Visual notes / gallery ─────────────────────────────── */
.item-visual-notes {
    display: flex; flex-wrap: wrap; gap: 10px;
    min-height: 40px; margin-bottom: 10px;
}
.item-vn-block {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,0.20);
}
.item-vn-image { width: 140px; height: 140px; }
.item-vn-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item-vn-text { width: 220px; padding: 8px 10px 8px 24px; }
.item-vn-text-content {
    color: var(--text-primary); font-size: 12px; line-height: 1.45;
    outline: none; min-height: 60px;
}
.item-vn-text-content:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.item-vn-drag {
    position: absolute; top: 4px; left: 4px;
    color: var(--text-muted); cursor: grab; font-size: 11px;
    z-index: 2;
}
.item-vn-remove {
    position: absolute; top: 4px; right: 4px;
    width: 20px; height: 20px;
    background: rgba(0,0,0,0.55);
    border: none; border-radius: 4px;
    color: #fff; cursor: pointer;
    font-size: 11px;
    z-index: 2;
}
.item-vn-remove:hover { background: rgba(204,64,64,0.85); }
.item-vn-block.item-vn-dragging { opacity: 0.4; }
.item-vn-block.item-vn-over { box-shadow: 0 0 0 2px var(--rarity-color); }
.item-vn-toolbar { display: flex; gap: 8px; }
.item-vn-btn {
    padding: 5px 10px;
    background: var(--bg-card-hover);
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary); font-size: 11px; cursor: pointer;
}
.item-vn-btn:hover { border-color: var(--rarity-color); color: var(--rarity-color); }

/* ── Icon picker modal ────────────────────────────────────── */
/* Z-index 1300 so it appears ABOVE the Item Sheet (z=1200), not behind it */
.item-icon-picker-overlay { z-index: 1300; }
.item-icon-picker-modal { width: 600px; max-width: 92vw; max-height: 80vh; display: flex; flex-direction: column; }
.item-icon-picker-body { padding: 14px 16px; overflow-y: auto; }
.item-icon-group { margin-bottom: 14px; }
.item-icon-group-label {
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em;
    color: var(--text-muted); text-transform: uppercase;
    margin-bottom: 6px;
}
.item-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.item-icon-tile {
    aspect-ratio: 1;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 10px;
    transition: all 0.15s ease;
}
.item-icon-tile svg { width: 100%; height: 100%; }
.item-icon-tile:hover {
    background: color-mix(in srgb, #f0a030 22%, var(--bg-card-hover));
    border-color: #f0a030;
    color: #f0a030;
    transform: translateY(-2px);
}

/* ── object-ref card: gameitem with chosen icon + rarity glow ── */
.gds-objref-card-gameitem .gds-objref-loot-icon svg {
    width: 38px; height: 38px;
    color: var(--rarity-color, var(--type-color));
    filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--rarity-color, var(--type-color)) 70%, transparent));
}
.gds-objref-card-gameitem[data-rarity="epic"]      { box-shadow: inset 0 0 0 1px #b27dff66, 0 0 18px #b27dff33; }
.gds-objref-card-gameitem[data-rarity="legendary"] { box-shadow: inset 0 0 0 1px #ffba3d77, 0 0 22px #ffba3d44; }
.gds-objref-card-gameitem[data-rarity="mythic"]    { box-shadow: inset 0 0 0 1px #ff5a8a77, 0 0 22px #ff5a8a44; }
.gds-objref-card-gameitem[data-rarity="legendary"] .gds-objref-rarity { color: #ffba3d; }
.gds-objref-card-gameitem[data-rarity="epic"]      .gds-objref-rarity { color: #b27dff; }
.gds-objref-card-gameitem[data-rarity="mythic"]    .gds-objref-rarity { color: #ff5a8a; }

/* Project hub card: gameitem SVG icon */
.content-card-item-svg { display: inline-flex; align-items: center; justify-content: center; }
.content-card-item-svg svg { width: 50px; height: 50px; }

/* objref pick-tile SVG icon */
.objref-pick-icon-svg svg { width: 28px; height: 28px; }

/* ============================================================
   MECHANIC SHEET — structured editor for `mechanic`
   ============================================================ */
.mech-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(4, 8, 18, 0.85);
    backdrop-filter: blur(4px);
    z-index: 1200;
    display: none;
    align-items: center; justify-content: center;
}
.mech-sheet-overlay.open { display: flex; }
.mech-sheet-panel {
    position: relative;
    width: 920px; max-width: 97vw;
    height: 86vh; max-height: 95vh;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.mech-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}
.mech-sheet-title { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.02em; }
.mech-sheet-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 18px; padding: 2px 8px;
    border-radius: 4px;
}
.mech-sheet-close:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.mech-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px; }
.mech-resize-handle {
    position: absolute; right: 0; bottom: 0;
    width: 16px; height: 16px; cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--text-muted) 50%, var(--text-muted) 60%, transparent 60%);
    border-bottom-right-radius: 12px;
    opacity: 0.4;
}
.mech-resize-handle:hover { opacity: 0.8; }
.mech-resizing { user-select: none; }

.mech-sheet-layout {
    display: flex; flex-direction: column; gap: 18px;
    --cat-color: #7c8aa0;
}

/* Hero */
.mech-hero {
    display: flex; gap: 22px; align-items: stretch;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--cat-color) 14%, transparent) 0%, transparent 65%),
        rgba(0,0,0,0.30);
    position: relative;
    overflow: hidden;
}
.mech-hero-icon-wrap { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.mech-hero-icon {
    width: 160px; height: 160px;
    border-radius: 18px;
    border: 2px solid color-mix(in srgb, var(--cat-color) 60%, transparent);
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--cat-color) 22%, transparent) 0%, rgba(0,0,0,0.25) 75%);
    color: var(--cat-color);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 24px color-mix(in srgb, var(--cat-color) 35%, transparent);
    transition: transform 0.15s ease;
}
.mech-hero-icon:hover { transform: scale(1.02); }
.mech-hero-svg svg { width: 92px; height: 92px; }
.mech-hero-img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.mech-hero-emoji { font-size: 80px; line-height: 1; }
.mech-hero-icon-actions { display: flex; gap: 6px; }
.mech-icon-pick-btn, .mech-icon-upload-btn {
    flex: 1; padding: 6px 10px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px; cursor: pointer;
    transition: all 0.15s ease;
}
.mech-icon-pick-btn:hover, .mech-icon-upload-btn:hover {
    background: color-mix(in srgb, var(--cat-color) 18%, var(--bg-card-hover));
    border-color: var(--cat-color);
    color: var(--text-primary);
}

.mech-hero-fields { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mech-hero-name {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--cat-color);
    color: var(--text-primary);
    font-size: 26px; font-weight: 800;
    padding: 4px 2px;
    outline: none;
}
.mech-hero-name::placeholder { color: var(--text-muted); }
.mech-hero-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mech-hero-category {
    padding: 6px 10px;
    background-color: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-left: 4px solid var(--cat-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    outline: none;
}
.mech-hero-category option {
    background-color: var(--bg-card);
    color: var(--text-primary);
}
.mech-cat-pill {
    padding: 4px 10px;
    background: color-mix(in srgb, var(--cat-color) 22%, transparent);
    color: var(--cat-color);
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--cat-color) 40%, transparent);
}
.mech-hero-tagline {
    background: rgba(0,0,0,0.20);
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text-secondary);
    font-style: italic;
    font-size: 13px;
    line-height: 1.45;
    min-height: 32px;
    outline: none;
}
.mech-hero-tagline:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.mech-hero-tagline:focus { border-color: var(--cat-color); border-style: solid; }

/* Sections */
.mech-section {
    padding: 14px 16px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
}
.mech-section-2col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.mech-section-2col > div {
    padding: 14px 16px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
}
.mech-section-title {
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
    color: var(--cat-color);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.mech-field-text {
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.55;
    min-height: 60px;
    outline: none;
}
.mech-field-text:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.mech-field-text:focus { border-color: var(--cat-color); }

/* Input → Process → Output flow */
.mech-flow {
    display: grid; grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 8px; align-items: stretch;
}
.mech-flow-cell {
    display: flex; flex-direction: column;
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    min-height: 90px;
}
.mech-flow-input   { border-top: 3px solid #5dd5e0; }
.mech-flow-process { border-top: 3px solid var(--cat-color); }
.mech-flow-output  { border-top: 3px solid #5fc97d; }
.mech-flow-label {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}
.mech-flow-field {
    flex: 1;
    color: var(--text-primary);
    font-size: 12.5px;
    line-height: 1.5;
    outline: none;
    min-height: 50px;
}
.mech-flow-field:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.mech-flow-arrow {
    align-self: center;
    font-size: 22px; font-weight: 700;
    color: var(--cat-color);
    user-select: none;
}

/* Tags */
.mech-tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin-bottom: 8px; }
.mech-tag-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px;
    background: color-mix(in srgb, var(--cat-color) 14%, var(--bg-card-hover));
    border: 1px solid color-mix(in srgb, var(--cat-color) 35%, transparent);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 11px; font-weight: 600;
}
.mech-tag-remove {
    background: transparent; border: none;
    color: var(--text-muted); font-size: 14px;
    cursor: pointer; padding: 0;
    line-height: 1;
}
.mech-tag-remove:hover { color: #ff7766; }
.mech-tag-input {
    width: 100%;
    padding: 6px 10px;
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
}
.mech-tag-input:focus { border-color: var(--cat-color); }

/* Connected To */
.mech-connected-wrap { display: flex; flex-direction: column; gap: 5px; min-height: 28px; margin-bottom: 8px; }
.mech-connected-empty {
    color: var(--text-muted); font-size: 12px; font-style: italic;
    padding: 6px 0;
}
.mech-connected-mini {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--border);
    border-left: 3px solid var(--type-color, var(--cat-color));
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.mech-connected-mini:hover { background: rgba(255,255,255,0.04); }
.mech-connected-mini.mech-connected-broken {
    border-left-color: #cc4040;
    color: var(--text-muted);
    cursor: default;
}
.mech-connected-icon { font-size: 14px; }
.mech-connected-name {
    flex: 1;
    color: var(--text-primary);
    font-size: 12px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mech-connected-typetag {
    font-size: 8.5px; font-weight: 700; letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--type-color, var(--text-muted));
    padding: 2px 6px;
    background: color-mix(in srgb, var(--type-color, #888) 18%, transparent);
    border-radius: 3px;
}
.mech-connected-remove {
    background: transparent; border: none;
    color: var(--text-muted); font-size: 14px;
    cursor: pointer; padding: 0 4px;
    line-height: 1;
}
.mech-connected-remove:hover { color: #ff7766; }
.mech-connect-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px; cursor: pointer;
    transition: all 0.15s ease;
}
.mech-connect-btn:hover {
    border-color: var(--cat-color); color: var(--cat-color);
    background: color-mix(in srgb, var(--cat-color) 10%, transparent);
}

/* Visual notes */
.mech-visual-notes { display: flex; flex-wrap: wrap; gap: 10px; min-height: 40px; margin-bottom: 10px; }
.mech-vn-block {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,0.20);
}
.mech-vn-image { width: 140px; height: 140px; }
.mech-vn-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mech-vn-text { width: 220px; padding: 8px 10px 8px 24px; }
.mech-vn-text-content {
    color: var(--text-primary); font-size: 12px; line-height: 1.45;
    outline: none; min-height: 60px;
}
.mech-vn-text-content:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.mech-vn-drag {
    position: absolute; top: 4px; left: 4px;
    color: var(--text-muted); cursor: grab; font-size: 11px; z-index: 2;
}
.mech-vn-remove {
    position: absolute; top: 4px; right: 4px;
    width: 20px; height: 20px;
    background: rgba(0,0,0,0.55);
    border: none; border-radius: 4px;
    color: #fff; cursor: pointer; font-size: 11px; z-index: 2;
}
.mech-vn-remove:hover { background: rgba(204,64,64,0.85); }
.mech-vn-block.mech-vn-dragging { opacity: 0.4; }
.mech-vn-block.mech-vn-over { box-shadow: 0 0 0 2px var(--cat-color); }
.mech-vn-toolbar { display: flex; gap: 8px; }
.mech-vn-btn {
    padding: 5px 10px;
    background: var(--bg-card-hover);
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary); font-size: 11px; cursor: pointer;
}
.mech-vn-btn:hover { border-color: var(--cat-color); color: var(--cat-color); }

/* Mechanic icon picker — reuses item-icon-picker visuals; ensure z-index */
.mech-icon-picker-overlay { z-index: 1300; }

/* Object-ref card: mechanic SVG icon tinting */
.gds-objref-thumb-svg svg {
    width: 30px; height: 30px;
    color: var(--type-color);
    filter: drop-shadow(0 1px 6px color-mix(in srgb, var(--type-color) 60%, transparent));
}

/* Project hub card: mechanic SVG icon */
.content-card-mech-svg { display: inline-flex; align-items: center; justify-content: center; }
.content-card-mech-svg svg { width: 50px; height: 50px; }

/* ============================================================
   QUEST SHEET — structured editor
   ============================================================ */
.quest-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(4, 8, 18, 0.85);
    backdrop-filter: blur(4px);
    z-index: 1200;
    display: none;
    align-items: center; justify-content: center;
}
.quest-sheet-overlay.open { display: flex; }
.quest-sheet-panel {
    position: relative;
    width: 940px; max-width: 97vw;
    height: 88vh; max-height: 95vh;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.quest-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}
.quest-sheet-title { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.02em; }
.quest-sheet-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 18px; padding: 2px 8px;
    border-radius: 4px;
}
.quest-sheet-close:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.quest-sheet-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px; }
.quest-resize-handle {
    position: absolute; right: 0; bottom: 0;
    width: 16px; height: 16px; cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--text-muted) 50%, var(--text-muted) 60%, transparent 60%);
    border-bottom-right-radius: 12px;
    opacity: 0.4;
}
.quest-resize-handle:hover { opacity: 0.8; }
.quest-resizing { user-select: none; }

.quest-sheet-layout {
    display: flex; flex-direction: column; gap: 18px;
    --qtype-color: #7c8aa0;
}

/* Hero */
.quest-hero {
    display: flex; gap: 22px; align-items: stretch;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.06);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--qtype-color) 14%, transparent) 0%, transparent 65%),
        rgba(0,0,0,0.30);
    position: relative;
    overflow: hidden;
}
.quest-hero-icon-wrap { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.quest-hero-icon {
    width: 144px; height: 144px;
    border-radius: 18px;
    border: 2px solid color-mix(in srgb, var(--qtype-color) 60%, transparent);
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--qtype-color) 22%, transparent) 0%, rgba(0,0,0,0.25) 75%);
    color: var(--qtype-color);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 24px color-mix(in srgb, var(--qtype-color) 35%, transparent);
    transition: transform 0.15s ease;
}
.quest-hero-icon:hover { transform: scale(1.02); }
.quest-hero-svg svg { width: 80px; height: 80px; }
.quest-hero-img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.quest-hero-icon-actions { display: flex; gap: 6px; }
.quest-icon-pick-btn, .quest-icon-upload-btn {
    flex: 1; padding: 6px 10px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px; cursor: pointer;
    transition: all 0.15s ease;
}
.quest-icon-pick-btn:hover, .quest-icon-upload-btn:hover {
    background: color-mix(in srgb, var(--qtype-color) 18%, var(--bg-card-hover));
    border-color: var(--qtype-color);
    color: var(--text-primary);
}

.quest-hero-fields { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.quest-hero-name {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--qtype-color);
    color: var(--text-primary);
    font-size: 26px; font-weight: 800;
    padding: 4px 2px;
    outline: none;
}
.quest-hero-name::placeholder { color: var(--text-muted); }
.quest-hero-meta { display: flex; gap: 10px; align-items: center; }
.quest-hero-qtype {
    padding: 6px 10px;
    background-color: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-left: 4px solid var(--qtype-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    outline: none;
}
.quest-hero-qtype option {
    background-color: var(--bg-card);
    color: var(--text-primary);
}
.quest-type-pill {
    padding: 4px 10px;
    background: color-mix(in srgb, var(--qtype-color) 22%, transparent);
    color: var(--qtype-color);
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--qtype-color) 40%, transparent);
}
.quest-hero-pickers { display: flex; gap: 10px; flex-wrap: wrap; }
.quest-hero-picker {
    flex: 1; min-width: 200px;
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.quest-hero-picker-label {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.quest-ref-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--border);
    border-left: 3px solid var(--type-color, var(--qtype-color));
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
}
.quest-ref-chip:hover { background: rgba(255,255,255,0.04); }
.quest-ref-chip.quest-ref-broken { border-left-color: #cc4040; color: var(--text-muted); cursor: default; }
.quest-ref-icon { font-size: 14px; }
.quest-ref-name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quest-ref-remove {
    background: transparent; border: none;
    color: var(--text-muted); font-size: 14px;
    cursor: pointer; padding: 0; line-height: 1;
}
.quest-ref-remove:hover { color: #ff7766; }
.quest-ref-pick {
    padding: 6px 10px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px; cursor: pointer;
    transition: all 0.15s ease;
}
.quest-ref-pick:hover {
    border-color: var(--qtype-color); color: var(--qtype-color);
    background: color-mix(in srgb, var(--qtype-color) 10%, transparent);
}

/* Sections */
.quest-section {
    padding: 14px 16px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
}
.quest-section-2col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
}
.quest-section-2col > div {
    padding: 14px 16px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
}
.quest-section-title {
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
    color: var(--qtype-color);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.quest-section-title-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.quest-section-title-row .quest-section-title { margin-bottom: 0; }
.quest-field-text {
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.55;
    min-height: 60px;
    outline: none;
}
.quest-field-text:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.quest-field-text:focus { border-color: var(--qtype-color); }

/* Objectives */
.quest-objectives { display: flex; flex-direction: column; gap: 6px; }
.quest-objectives-empty { color: var(--text-muted); font-size: 12px; font-style: italic; padding: 6px 0; }
.quest-objective {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px;
    background: rgba(0,0,0,0.18);
    border: 1px solid var(--border);
    border-left: 3px solid #5aa8ff;
    border-radius: 6px;
}
.quest-obj-flag-primary    { border-left-color: #ffba3d; }
.quest-obj-flag-secondary  { border-left-color: #5aa8ff; }
.quest-obj-flag-optional   { border-left-color: #5fc97d; }
.quest-obj-flag-hidden     { border-left-color: #b27dff; }
.quest-obj-flag-timed      { border-left-color: #e85a5a; }
.quest-objective-main { display: grid; grid-template-columns: 14px 1fr 110px auto auto; gap: 8px; align-items: center; }
.quest-obj-bullet {
    width: 8px; height: 8px;
    background: currentColor;
    border-radius: 50%;
    color: inherit;
}
.quest-objective.quest-obj-flag-primary   .quest-obj-bullet { background: #ffba3d; }
.quest-objective.quest-obj-flag-secondary .quest-obj-bullet { background: #5aa8ff; }
.quest-objective.quest-obj-flag-optional  .quest-obj-bullet { background: #5fc97d; }
.quest-objective.quest-obj-flag-hidden    .quest-obj-bullet { background: #b27dff; }
.quest-objective.quest-obj-flag-timed     .quest-obj-bullet { background: #e85a5a; }
.quest-obj-text {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-size: 13px;
    padding: 4px 6px;
    border-radius: 4px;
    outline: none;
}
.quest-obj-text:focus { border-color: var(--qtype-color); background: rgba(0,0,0,0.30); }
.quest-obj-flag-select {
    background-color: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 11px;
    padding: 3px 6px;
    cursor: pointer;
    outline: none;
}
.quest-obj-flag-select option { background-color: var(--bg-card); color: var(--text-primary); }
.quest-obj-add-sub, .quest-obj-remove, .quest-obj-sub-remove {
    background: transparent; border: none;
    color: var(--text-muted); font-size: 11px;
    cursor: pointer; padding: 2px 5px; border-radius: 3px;
    line-height: 1;
}
.quest-obj-add-sub:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.quest-obj-remove:hover, .quest-obj-sub-remove:hover { background: rgba(204,64,64,0.20); color: #ff7766; }
.quest-objective-subs { display: flex; flex-direction: column; gap: 4px; padding-left: 22px; }
.quest-objective-sub { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; }
.quest-obj-sub-bullet { color: var(--text-muted); font-size: 11px; }
.quest-obj-sub-text {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 4px;
    outline: none;
}
.quest-obj-sub-text:focus { border-color: var(--qtype-color); background: rgba(0,0,0,0.30); color: var(--text-primary); }
.quest-add-objective-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px; cursor: pointer;
}
.quest-add-objective-btn:hover { border-color: var(--qtype-color); color: var(--qtype-color); }

/* Steps with branches */
.quest-steps { display: flex; flex-direction: column; gap: 8px; position: relative; }
.quest-steps-empty { color: var(--text-muted); font-size: 12px; font-style: italic; padding: 6px 0; }
.quest-steps-help { color: var(--text-muted); font-size: 10.5px; font-style: italic; margin-top: 8px; }
.quest-step {
    display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--border);
    border-left: 4px solid var(--qtype-color);
    border-radius: 8px;
    position: relative;
}
.quest-step-main { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 8px; align-items: center; }
.quest-step-num {
    width: 24px; height: 24px;
    background: var(--qtype-color);
    color: #0e1929;
    font-size: 12px; font-weight: 800;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.quest-step-text {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
    outline: none;
}
.quest-step-text:focus { border-color: var(--qtype-color); background: rgba(0,0,0,0.30); }
.quest-step-toggle-branch, .quest-step-remove {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); font-size: 10.5px;
    cursor: pointer; padding: 2px 7px; border-radius: 4px;
    line-height: 1;
}
.quest-step-toggle-branch:hover { color: var(--qtype-color); border-color: var(--qtype-color); }
.quest-step-remove:hover { color: #ff7766; border-color: #ff7766; }
.quest-step-branch {
    display: grid; grid-template-columns: 22px 1fr 18px 110px;
    gap: 8px; align-items: center;
    padding-left: 36px;
}
.quest-step-branch-label, .quest-step-branch-arrow {
    color: var(--qtype-color); font-size: 11px; font-weight: 700;
    text-align: center;
}
.quest-step-condition {
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    outline: none;
}
.quest-step-condition:focus { border-color: var(--qtype-color); }
.quest-step-branchto {
    background-color: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 11px;
    padding: 3px 6px;
    cursor: pointer;
    outline: none;
}
.quest-step-branchto option { background-color: var(--bg-card); color: var(--text-primary); }
.quest-add-step-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 11px; cursor: pointer;
}
.quest-add-step-btn:hover { border-color: var(--qtype-color); color: var(--qtype-color); }

/* Rewards */
.quest-reward-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.quest-reward-row-items { align-items: flex-start; }
.quest-reward-label {
    min-width: 70px;
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.quest-reward-input {
    flex: 1;
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 5px 10px;
    outline: none;
}
.quest-reward-input:focus { border-color: var(--qtype-color); }
.quest-reward-flags { min-height: 40px; }
.quest-reward-items { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-height: 24px; }
.quest-reward-empty { color: var(--text-muted); font-size: 11px; font-style: italic; }
.quest-reward-item-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px;
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--border);
    border-left: 3px solid var(--rarity-color, var(--text-muted));
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.quest-reward-item-chip:hover { background: rgba(255,255,255,0.04); }
.quest-reward-item-chip.quest-reward-broken { border-left-color: #cc4040; color: var(--text-muted); cursor: default; }
.quest-reward-svg { display: inline-flex; align-items: center; justify-content: center; }
.quest-reward-svg svg { width: 16px; height: 16px; }
.quest-reward-item-chip img { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; }
.quest-reward-item-name { font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quest-reward-item-remove {
    background: transparent; border: none;
    color: var(--text-muted); font-size: 13px;
    cursor: pointer; padding: 0; line-height: 1;
}
.quest-reward-item-remove:hover { color: #ff7766; }
.quest-reward-add-items {
    padding: 4px 8px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 10.5px; cursor: pointer;
}
.quest-reward-add-items:hover { border-color: var(--qtype-color); color: var(--qtype-color); }

/* Linked Conversations placeholder */
.quest-section-conversations { opacity: 0.85; }
.quest-coming-soon {
    font-size: 10.5px; font-weight: 600;
    color: var(--text-muted);
    font-style: italic;
}
.quest-conversations { min-height: 24px; margin-bottom: 8px; }
.quest-add-conversation-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: not-allowed;
}

/* Visual notes */
.quest-visual-notes { display: flex; flex-wrap: wrap; gap: 10px; min-height: 40px; margin-bottom: 10px; }
.quest-vn-block {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0,0,0,0.20);
}
.quest-vn-image { width: 140px; height: 140px; }
.quest-vn-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quest-vn-text { width: 220px; padding: 8px 10px; }
.quest-vn-text-content { color: var(--text-primary); font-size: 12px; line-height: 1.45; outline: none; min-height: 60px; }
.quest-vn-text-content:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.quest-vn-remove {
    position: absolute; top: 4px; right: 4px;
    width: 20px; height: 20px;
    background: rgba(0,0,0,0.55);
    border: none; border-radius: 4px;
    color: #fff; cursor: pointer; font-size: 11px; z-index: 2;
}
.quest-vn-remove:hover { background: rgba(204,64,64,0.85); }
.quest-vn-toolbar { display: flex; gap: 8px; }
.quest-vn-btn {
    padding: 5px 10px;
    background: var(--bg-card-hover);
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-secondary); font-size: 11px; cursor: pointer;
}
.quest-vn-btn:hover { border-color: var(--qtype-color); color: var(--qtype-color); }

/* Quest icon picker */
.quest-icon-picker-overlay { z-index: 1300; }

/* Object-ref card: quest SVG icon */
.gds-objref-quest-icon-svg { display: inline-flex; align-items: center; justify-content: center; }
.gds-objref-quest-icon-svg svg {
    width: 18px; height: 18px;
    color: var(--type-color);
    filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--type-color) 60%, transparent));
}

/* Project hub card: quest SVG icon */
.content-card-quest-svg { display: inline-flex; align-items: center; justify-content: center; }
.content-card-quest-svg svg { width: 50px; height: 50px; }

/* ============================================================
   LEVEL (MAP) SHEET — structured editor with map canvas
   ============================================================ */
.level-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(4, 8, 18, 0.85);
    backdrop-filter: blur(4px);
    z-index: 1200;
    display: none;
    align-items: center; justify-content: center;
}
.level-sheet-overlay.open { display: flex; }
.level-sheet-panel {
    position: relative;
    width: 1200px; max-width: 98vw;
    height: 92vh; max-height: 96vh;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.level-sheet-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
}
.level-sheet-title { font-size: 14px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.02em; }
.level-sheet-header-actions { display: flex; align-items: center; gap: 6px; }
.level-sheet-close, .level-sheet-maximize, .level-sheet-preview {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 16px; padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}
.level-sheet-close:hover, .level-sheet-maximize:hover, .level-sheet-preview:hover {
    background: var(--bg-card-hover); color: var(--text-primary);
}
.level-sheet-preview.active {
    color: #ffba3d;
    background: rgba(255,186,61,0.12);
}

/* Full-screen mode — fills the viewport */
.level-sheet-panel.level-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0;
    border: none;
}
.level-sheet-body { flex: 1 1 auto; overflow: hidden; padding: 0; display: flex; }
.level-resize-handle {
    position: absolute; right: 0; bottom: 0;
    width: 16px; height: 16px; cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--text-muted) 50%, var(--text-muted) 60%, transparent 60%);
    border-bottom-right-radius: 12px;
    opacity: 0.4;
}
.level-resize-handle:hover { opacity: 0.8; }
.level-resizing { user-select: none; }

/* Layout */
.level-layout {
    display: flex;
    flex: 1 1 auto;
    min-width: 0; min-height: 0;
    width: 100%;
    height: 100%;
}
.level-side {
    flex: 0 0 300px;
    min-width: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 14px;
    background: var(--bg-card);
}
.level-side input,
.level-side .level-meta-input,
.level-side .level-name { min-width: 0; max-width: 100%; box-sizing: border-box; }
.level-side-section { min-width: 0; }
.level-side-resize {
    flex: 0 0 6px;
    background: var(--border);
    cursor: ew-resize;
    transition: background 0.15s ease;
    position: relative;
}
.level-side-resize::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 2px; height: 24px;
    background: var(--text-muted);
    border-radius: 1px;
}
.level-side-resize:hover, .level-side-resize.dragging { background: #ffba3d; }
.level-side-hint {
    font-size: 9px; font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
    font-style: italic;
}
.level-side-section {
    display: flex; flex-direction: column; gap: 6px;
}
.level-side-title {
    font-size: 10px; font-weight: 800; letter-spacing: 0.16em;
    color: #ffba3d;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: flex; align-items: center; gap: 5px;
    user-select: none;
}
.level-side-section-collapsible .level-side-title:hover {
    color: #ffe2a3;
}
.level-side-chev {
    display: inline-block;
    transition: transform 0.15s ease;
    font-size: 10px;
}
.level-side-section-collapsed .level-side-chev {
    transform: rotate(-90deg);
}
/* Hide everything in the section EXCEPT the title when collapsed */
.level-side-section-collapsed > *:not(.level-side-title) {
    display: none !important;
}
.level-side-section-collapsed { gap: 0; }
.level-name {
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 16px; font-weight: 700;
    padding: 6px 10px;
    outline: none;
}
.level-name:focus { border-color: #ffba3d; }
.level-meta-row { display: flex; gap: 6px; }
.level-meta-input {
    flex: 1;
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    padding: 5px 8px;
    outline: none;
}
.level-meta-input:focus { border-color: #ffba3d; }
.level-objs-group { display: flex; flex-direction: column; gap: 4px; }
.level-objs-label {
    font-size: 9.5px; font-weight: 700; letter-spacing: 0.10em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.level-objs-list { display: flex; flex-direction: column; gap: 3px; }
.level-obj-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 6px; align-items: center;
    padding: 3px 4px;
    border-radius: 4px;
    transition: background 0.12s ease, box-shadow 0.12s ease;
}
.level-obj-row[draggable="true"] { cursor: grab; }
.level-obj-row[draggable="true"]:active { cursor: grabbing; }
.level-obj-row:hover {
    background: rgba(120,160,220,0.08);
    box-shadow: inset 0 0 0 1px rgba(120,160,220,0.25);
}
.level-obj-grip {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    user-select: none;
    text-align: center;
    /* Bigger visual handle that hints at draggability */
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 2px 0;
    cursor: grab;
}
.level-obj-row:hover .level-obj-grip {
    background: rgba(120,160,220,0.18);
    color: #c2d2ec;
    border-color: rgba(120,160,220,0.40);
}
.level-obj-text {
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    padding: 4px 8px;
    outline: none;
}
.level-obj-text:focus { border-color: #ffba3d; }
.level-obj-remove {
    background: transparent; border: none;
    color: var(--text-muted);
    font-size: 11px; cursor: pointer;
    padding: 2px 5px; border-radius: 3px;
    line-height: 1;
}
.level-obj-remove:hover { background: rgba(204,64,64,0.20); color: #ff7766; }
.level-add-obj-btn {
    align-self: flex-start;
    padding: 3px 8px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 10.5px; cursor: pointer;
}
.level-add-obj-btn:hover { border-color: #ffba3d; color: #ffba3d; }
.level-field-text {
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    color: var(--text-primary);
    font-size: 12.5px;
    line-height: 1.5;
    min-height: 50px;
    outline: none;
}
.level-field-text:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.level-field-text:focus { border-color: #ffba3d; }

/* Canvas wrap */
.level-canvas-wrap {
    flex: 1 1 auto;
    min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
    background: var(--bg-base);
    overflow: hidden;
    position: relative;
}

/* Toolbar */
.level-toolbar {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 100%);
    flex-wrap: wrap;
}
.level-tool-btn {
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    /* Equal-size square buttons for icon-only consistency */
    width: 32px; height: 32px;
    padding: 0;
    flex: 0 0 32px;
    display: inline-flex; align-items: center; justify-content: center;
}
.level-tool-btn svg { width: 18px; height: 18px; }
.level-tool-btn:hover {
    background: color-mix(in srgb, #ffba3d 18%, var(--bg-card-hover));
    border-color: #ffba3d;
    color: var(--text-primary);
}
.level-tool-btn.active {
    background: color-mix(in srgb, #ffba3d 30%, var(--bg-card-hover));
    border-color: #ffba3d;
    color: #ffe2a3;
    box-shadow: 0 0 8px rgba(255,186,61,0.30);
}
.level-tool-divider {
    width: 1px;
    align-self: stretch;
    background: var(--border);
    margin: 0 2px;
}
.level-color {
    width: 32px; height: 28px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.level-zoom-display {
    color: var(--text-secondary);
    font-size: 11px; font-weight: 700;
    padding: 0 4px;
    min-width: 44px; text-align: center;
}

/* Canvas frame — dark slate map look (cooler, less brown) */
.level-canvas-frame {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* Block native text/image selection so the browser's translation /
       smart-selection / "search" popups don't interfere with drag. */
    user-select: none;
    -webkit-user-select: none;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(120,160,220,0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 80%, rgba(255,186,61,0.05) 0%, transparent 60%),
        linear-gradient(160deg, #14202e 0%, #0a121d 100%);
    border-top: 2px solid #2c3a52;
    box-shadow: inset 0 0 80px rgba(0,0,0,0.55),
                inset 0 0 0 8px rgba(60,80,110,0.20);
}

/* Rulers */
.level-ruler {
    position: absolute;
    background: rgba(0,0,0,0.40);
    border-color: rgba(255,186,61,0.30);
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}
.level-ruler-top {
    top: 0; left: 18px; right: 0;
    height: 18px;
    border-bottom: 1px solid rgba(255,186,61,0.30);
}
.level-ruler-left {
    top: 18px; left: 0; bottom: 0;
    width: 18px;
    border-right: 1px solid rgba(255,186,61,0.30);
}
.level-ruler-mark {
    position: absolute; top: 0; height: 100%;
    width: 1px;
    background: rgba(255,186,61,0.20);
}
.level-ruler-mark span {
    position: absolute; top: 1px; left: 2px;
    color: rgba(255,186,61,0.7);
    font-size: 8px; font-weight: 700;
}
.level-ruler-mark-v {
    top: auto; left: 0; height: 1px; width: 100%;
}
.level-ruler-mark-v span {
    top: -1px; left: 1px;
    transform: rotate(-90deg); transform-origin: left top;
}

/* Compass */
.level-compass {
    position: absolute;
    top: 22px; right: 8px;
    width: 44px; height: 44px;
    z-index: 12;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.level-compass svg { width: 100%; height: 100%; }

/* Canvas */
.level-canvas {
    position: absolute;
    top: 18px; left: 18px;
    right: 0; bottom: 0;
    overflow: hidden;
    cursor: grab;
}
.level-canvas[data-tool="pin"]    { cursor: crosshair; }
.level-canvas[data-tool="pen"]    { cursor: crosshair; }
.level-canvas[data-tool="text"]   { cursor: text; }
.level-canvas[data-tool="eraser"] { cursor: not-allowed; }
.level-canvas:active { cursor: grabbing; }
.level-canvas-inner {
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: 0 0;
    /* Reference workspace — 1600×1200 (the visible "grid" box). Shapes are
       NOT clamped to this box — they can extend in any direction so the
       effective working area is the entire canvas viewport. */
    width: 1600px; height: 1200px;
    margin-left: -800px; margin-top: -600px;
    overflow: visible;
    /* Faint dashed outline so you can see where the reference grid is */
    outline: 1px dashed rgba(255,186,61,0.20);
}
.level-canvas-inner > .level-svg { overflow: visible; }
.level-canvas-drop-hover {
    box-shadow: inset 0 0 0 3px #ffba3d;
}
.level-canvas-panning, .level-canvas-panning * {
    cursor: grabbing !important;
}
.level-canvas-connecting, .level-canvas-connecting .level-pin {
    cursor: crosshair !important;
}

/* Pin-to-pin connection curves */
.level-connection {
    fill: none;
    stroke: rgba(120,160,220,0.55);
    stroke-width: 0.30;
    stroke-linecap: round;
    pointer-events: none;
    filter: drop-shadow(0 0 1px rgba(120,160,220,0.40));
}
.level-connection-dot {
    fill: rgba(180,210,255,0.85);
    pointer-events: none;
}

/* Hover preview card — sized 2026-05-03 to match the demo project's richer
   content (longer character role + concept lines). The grid `min-width: 0`
   on the middle text column is the critical fix that makes the ellipsis
   actually clip — without it, the column refuses to shrink and the text
   visibly overflows the card's right edge. */
.level-hover-preview {
    position: absolute;
    width: 340px;
    background: var(--bg-card);
    border: 1px solid #ffba3d;
    border-radius: 10px;
    padding: 12px;
    z-index: 16;
    box-shadow: 0 8px 26px rgba(0,0,0,0.75);
    pointer-events: none;
    animation: level-hover-fade 0.18s ease-out;
}
@keyframes level-hover-fade {
    0%   { opacity: 0; transform: translateY(-3px); }
    100% { opacity: 1; transform: translateY(0); }
}
.level-hover-head { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; }
.level-hover-thumb {
    width: 64px; height: 64px;
    border-radius: 8px;
    background: rgba(0,0,0,0.40);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.level-hover-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.level-hover-svg svg { width: 36px; height: 36px; }
.level-hover-emoji { font-size: 32px; }
.level-hover-id {
    /* CRITICAL: lets the column shrink so text-overflow:ellipsis fires.
       Without this, the grid item's intrinsic min-width = its content width
       and the text overflows the card. */
    min-width: 0;
}
.level-hover-name {
    font-size: 14.5px; font-weight: 700;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.level-hover-sub {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
    /* Allow the sub line to wrap to 2 lines instead of truncating to 1.
       Many characters have a role + concept that benefits from the second line. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
}
.level-hover-typetag {
    font-size: 10px; font-weight: 800; letter-spacing: 0.10em;
    text-transform: uppercase;
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 2px;
}
.level-hover-meta {
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.10em;
}

/* Floating hint banner */
.level-floating-hint {
    position: absolute;
    top: 28px; left: 50%;
    transform: translateX(-50%);
    background: rgba(255,186,61,0.92);
    color: #14202e;
    font-size: 11.5px; font-weight: 700;
    padding: 6px 14px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
    z-index: 30;
    animation: level-hover-fade 0.2s ease-out;
}

/* Pin connections list inside popover */
.level-pin-connections {
    border-top: 1px solid var(--border);
    padding-top: 6px;
    margin-top: 2px;
}
.level-pin-connections-title {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}
.level-pin-conn-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 3px 6px;
    background: rgba(0,0,0,0.25);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.level-pin-conn-remove {
    background: transparent; border: none;
    color: var(--text-muted); font-size: 12px;
    cursor: pointer; padding: 0 4px;
    line-height: 1;
    flex: 0;
}
.level-pin-conn-remove:hover { color: #ff7766; }
.level-bg-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.level-bg-hidden {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,186,61,0.50);
    font-size: 12px;
    font-style: italic;
    pointer-events: none;
    user-select: none;
}
.level-bg-empty {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background:
        repeating-linear-gradient(45deg, rgba(120,160,220,0.04), rgba(120,160,220,0.04) 4px, transparent 4px, transparent 18px),
        radial-gradient(ellipse at center, rgba(60,80,110,0.18) 0%, rgba(8,14,24,0.40) 100%);
    border: 1px dashed rgba(120,160,220,0.30);
}
.level-bg-empty-inner {
    text-align: center;
    color: rgba(180,210,255,0.65);
    padding: 0 30px;
}
.level-bg-empty-icon { font-size: 56px; margin-bottom: 8px; opacity: 0.7; }
.level-bg-empty-text { font-size: 12px; font-style: italic; max-width: 360px; line-height: 1.5; }

/* SVG overlay — fills the canvas-inner */
.level-svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: visible;
}
.level-grid-line {
    stroke: rgba(120,160,220,0.10);
    stroke-width: 0.04;
    fill: none;
    pointer-events: none;
}
.level-grid-line-major {
    stroke: rgba(120,160,220,0.22);
    stroke-width: 0.10;
}
.level-stroke {
    cursor: pointer;
    pointer-events: stroke;
    stroke-linecap: round; stroke-linejoin: round;
}
.level-text {
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Pins — base anchored at bottom-center for the classic drop shape; rich
   variants (character/item/quest/level) use bottom-of-tile anchoring instead. */
.level-pin {
    position: absolute;
    transform: translate(-50%, -100%) scale(var(--pin-counter-scale, 1));
    transform-origin: 50% 100%;
    pointer-events: auto;
    cursor: pointer;
    z-index: 5;
    width: 32px; height: 44px;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
    transition: transform 0.12s ease;
    /* Block native image/text drag so our custom drag is never preempted */
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
/* Children must NOT consume mouse events — let everything bubble to .level-pin
   so its mousedown/click handlers always run, even when hovering over the
   inner portrait <img> or SVG glyphs. */
.level-pin > * { pointer-events: none; }
.level-pin img, .level-pin svg {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}
.level-pin[data-variant="character"],
.level-pin[data-variant="gameitem"],
.level-pin[data-variant="quest"],
.level-pin[data-variant="level"] {
    width: auto; height: auto;
    transform: translate(-50%, -50%) scale(var(--pin-counter-scale, 1));
    transform-origin: 50% 50%;
}
.level-pin[data-variant="character"]:hover,
.level-pin[data-variant="gameitem"]:hover,
.level-pin[data-variant="quest"]:hover,
.level-pin[data-variant="level"]:hover {
    transform: translate(-50%, -50%) scale(calc(var(--pin-counter-scale, 1) * 1.08));
}
.level-pin:hover { transform: translate(-50%, -100%) scale(calc(var(--pin-counter-scale, 1) * 1.10)); }
/* Selection ring — uses box-shadow on the inner shape so it follows the
   pin's actual border-radius (circle for character, square for item, etc.)
   instead of an outline rectangle around the bounding box. */
.level-pin.level-pin-selected .level-pin-character-frame,
.level-pin.level-pin-selected .level-pin-item-tile,
.level-pin.level-pin-selected .level-pin-quest-flag,
.level-pin.level-pin-selected .level-pin-level-tile {
    box-shadow: 0 0 0 3px #5dd5e0, 0 0 0 5px rgba(93,213,224,0.30), 0 4px 10px rgba(0,0,0,0.6);
}
.level-pin.level-pin-selected[data-variant="plain"] .level-pin-shape {
    filter: drop-shadow(0 0 0 #5dd5e0) drop-shadow(0 0 6px #5dd5e0);
}
.level-text-overlay {
    transform: translate(-50%, -50%) scale(var(--pin-counter-scale, 1));
    transform-origin: 50% 50%;
}
.level-pin.level-pin-highlight {
    animation: level-pin-pulse 1.1s ease 2;
}
@keyframes level-pin-pulse {
    0%, 100% { transform: translate(-50%, -100%) scale(1); }
    50%      { transform: translate(-50%, -100%) scale(1.45); }
}
.level-pin-shape {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    color: var(--pin-color);
}
.level-pin-glyph {
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 20px;
    color: #1a1208;
    pointer-events: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.level-pin-glyph svg { width: 18px; height: 18px; stroke-width: 2; }
.level-pin-layer-dot {
    position: absolute;
    top: 0; right: -2px;
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.6);
    background: var(--layer-color, #9aa6b8);
}
.level-pin-label {
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    background: rgba(14,25,41,0.92);
    color: #c2d2ec;
    font-size: 10px; font-weight: 600;
    padding: 1px 8px;
    border-radius: 3px;
    white-space: nowrap;
    border: 1px solid rgba(120,160,220,0.40);
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ── Rich pin variants ─────────────────────────────────────── */
/* CHARACTER — circular portrait with gold ring */
.level-pin-character {
    width: 56px; height: 56px;
    position: relative;
}
.level-pin-character-frame {
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 3px solid #ffba3d;
    background: var(--bg-card);
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
}
/* Circular pin frame on the map — same upper-third bias to keep the face in the visible disc. */
.level-pin-character-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.level-pin-fallback { font-size: 22px; }

/* GAMEITEM — rarity-glow tile */
.level-pin-item {
    width: 50px; height: 50px;
    position: relative;
}
.level-pin-item-tile {
    width: 100%; height: 100%;
    border-radius: 8px;
    border: 2px solid var(--rarity-color, #b0b0b0);
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--rarity-color, #b0b0b0) 22%, transparent) 0%, rgba(0,0,0,0.40) 75%),
        rgba(14,25,41,0.85);
    color: var(--rarity-color, #b0b0b0);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 14px color-mix(in srgb, var(--rarity-color, #b0b0b0) 55%, transparent),
                0 4px 10px rgba(0,0,0,0.6);
}
.level-pin-item-svg svg { width: 28px; height: 28px; }
.level-pin-item-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

/* QUEST — flag-shaped banner */
.level-pin-quest {
    width: 46px; height: 50px;
    position: relative;
}
.level-pin-quest-flag {
    width: 100%; height: 100%;
    background: var(--quest-color, #7c8aa0);
    color: #14202e;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid color-mix(in srgb, var(--quest-color, #7c8aa0) 40%, #000);
    /* Pennant flag shape */
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
.level-pin-quest-svg svg { width: 22px; height: 22px; }

/* LEVEL — square map thumb */
.level-pin-level {
    width: 56px; height: 42px;
    position: relative;
}
.level-pin-level-tile {
    width: 100%; height: 100%;
    border-radius: 4px;
    border: 2px solid #5aa8ff;
    background-color: rgba(14,25,41,0.85);
    background-size: cover;
    background-position: center;
    color: #5aa8ff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow: 0 0 12px rgba(90,168,255,0.30), 0 4px 10px rgba(0,0,0,0.6);
}

/* Text overlays (HTML, draggable + inline-editable) */
.level-text-overlay {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: move;
    z-index: 4;
    font-family: serif; font-style: italic; font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.85);
    user-select: none;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.12s ease;
}
.level-text-overlay:hover {
    background: rgba(255,186,61,0.10);
    box-shadow: 0 0 0 1px rgba(255,186,61,0.35);
}
.level-text-edit {
    background: rgba(20,12,8,0.85);
    border: 1px solid #ffba3d;
    border-radius: 4px;
    color: #ffe2a3;
    font-family: inherit; font-style: italic; font-weight: 700;
    font-size: inherit;
    padding: 2px 8px;
    outline: none;
    min-width: 120px;
}

/* Pin popover — uniform 2-col grid layout */
.level-pin-popover {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid #ffba3d;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.7);
    z-index: 20;
    width: 280px;
    display: flex; flex-direction: column; gap: 10px;
    user-select: none;
}
.level-pin-pop-section { display: flex; flex-direction: column; gap: 6px; }
.level-pin-pop-row-label {
    font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.level-pin-pop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.level-pin-pop-grid button {
    /* Uniform fixed-height buttons in a clean 2-col grid */
    height: 30px;
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 0 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.level-pin-pop-grid button:hover { border-color: #ffba3d; color: #ffba3d; background: rgba(255,186,61,0.10); }
.level-pin-pop-grid .level-pin-delete:hover { border-color: #ff7766; color: #ff7766; background: rgba(255,119,102,0.10); }
.level-pin-label-input {
    width: 100%;
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 6px 10px;
    outline: none;
}
.level-pin-label-input:focus { border-color: #ffba3d; }
/* Color preset palette */
.level-pin-color-palette {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 4px;
}
.level-pin-color-swatch {
    aspect-ratio: 1;
    width: 100%;
    border-radius: 4px;
    border: 2px solid rgba(0,0,0,0.40);
    cursor: pointer;
    padding: 0;
    transition: transform 0.10s ease, border-color 0.10s ease;
}
.level-pin-color-swatch:hover { transform: scale(1.10); }
.level-pin-color-swatch.active { border-color: #fff; box-shadow: 0 0 0 1px #ffba3d; }
.level-pin-color-custom {
    aspect-ratio: 1;
    width: 100%;
    border-radius: 4px;
    border: 2px dashed rgba(255,255,255,0.30);
    cursor: pointer;
    background: rgba(0,0,0,0.30);
    color: var(--text-muted);
    font-size: 14px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
}
.level-pin-color-custom:hover { border-color: #ffba3d; color: #ffba3d; }
.level-pin-color-custom input[type="color"] {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
    background: transparent;
}
.level-pin-ref-display {
    background: rgba(255,186,61,0.10);
    border: 1px solid rgba(255,186,61,0.30);
    border-radius: 5px;
    color: var(--text-primary);
    font-size: 11px;
    padding: 6px 10px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 6px;
}
.level-pin-ref-display button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    flex: 0 0 auto;
}
/* The "unlink" + "📂 Open" buttons keep the muted/red-on-hover style */
.level-pin-ref-display .level-pin-unlink:hover { color: #ff7766; }
.level-pin-ref-display .level-pin-drill:hover  { color: #5aa8ff; }

/* The clickable item NAME — visually primary, takes available width, ellipsis on overflow */
.level-pin-ref-display .level-pin-ref-open {
    flex: 1 1 auto;
    text-align: left;
    color: var(--text-primary);
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.level-pin-ref-display .level-pin-ref-open:hover {
    color: #ffba3d;
    background: rgba(255,186,61,0.10);
}

/* Layers panel */
.level-layers-panel {
    position: absolute;
    top: 22px; right: 60px;
    width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    z-index: 11;
    display: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}
.level-layers-panel.open { display: block; }
.level-layers-title {
    font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
    color: #ffba3d;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.level-layers-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.level-layer-row {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    gap: 4px; align-items: center;
    padding: 4px 6px;
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
}
.level-layer-row:hover { background: rgba(255,186,61,0.10); }
.level-layer-row.active { border-color: #ffba3d; background: rgba(255,186,61,0.12); }
.level-layer-vis {
    background: transparent; border: none;
    color: var(--text-secondary);
    font-size: 12px; cursor: pointer;
    padding: 2px;
}
.level-layer-vis:hover { color: #ffba3d; }
.level-layer-name {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-primary);
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
    outline: none;
    width: 100%;
}
.level-layer-name:focus { border-color: #ffba3d; background: rgba(0,0,0,0.30); }
.level-layer-remove {
    background: transparent; border: none;
    color: var(--text-muted);
    font-size: 11px; cursor: pointer;
    padding: 2px;
}
.level-layer-remove:hover { color: #ff7766; }
.level-layers-add {
    margin-top: 8px;
    width: 100%;
    padding: 4px 8px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
}
.level-layers-add:hover { border-color: #ffba3d; color: #ffba3d; }

/* Pin "Create new item" modal */
.level-pin-create-overlay { z-index: 1300; }
.level-pin-create-modal { width: 380px; max-width: 92vw; }
.level-pin-create-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.level-pin-create-label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.10em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.level-pin-create-label select,
.level-pin-create-label input {
    background-color: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    padding: 6px 10px;
    outline: none;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.level-pin-create-label select:focus,
.level-pin-create-label input:focus { border-color: #ffba3d; }
.level-pin-create-label select option { background-color: var(--bg-card); color: var(--text-primary); }

/* Object-ref level pin badge */
.gds-objref-level-pins {
    display: inline-flex; align-items: center; gap: 4px;
    color: #ffba3d;
    font-weight: 700;
}

/* Map Scale section */
.level-scale-row {
    display: grid;
    grid-template-columns: auto 1fr 70px;
    gap: 6px;
    align-items: center;
}
.level-scale-prefix {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}
.level-scale-input {
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    padding: 4px 8px;
    outline: none;
    min-width: 0;
}
.level-scale-input:focus { border-color: #ffba3d; }
.level-scale-unit {
    background-color: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 11px;
    padding: 4px 6px;
    cursor: pointer;
    outline: none;
}
.level-scale-unit option { background-color: var(--bg-card); color: var(--text-primary); }
.level-scale-help {
    font-size: 9.5px; color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
    line-height: 1.4;
}

/* Pin search */
.level-pin-search {
    width: 100%;
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 11.5px;
    padding: 4px 8px;
    outline: none;
    margin-bottom: 4px;
    min-width: 0;
    box-sizing: border-box;
}
.level-pin-search:focus { border-color: #ffba3d; }

/* Lock indicator on pin list */
.level-pin-list-lock {
    font-size: 10px;
    line-height: 1;
    margin-right: 2px;
}

/* Drill-down button on pin popover */
.level-pin-drill {
    background: rgba(90,168,255,0.15);
    border: 1px solid #5aa8ff !important;
    color: #5aa8ff !important;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
}
.level-pin-drill:hover { background: rgba(90,168,255,0.25); }

/* Measure / box-select labels rendered into the SVG inherit defaults */
.level-area { cursor: default; }
.level-area-label { pointer-events: none; user-select: none; }

/* ── Preview mode — hide editor chrome, show the map like a player would ── */
.level-preview-mode .level-toolbar,
.level-preview-mode .level-side,
.level-preview-mode .level-side-resize,
.level-preview-mode .level-layers-panel,
.level-preview-mode .level-ruler,
.level-preview-mode .level-pin-popover,
.level-preview-mode .level-ctx-menu,
.level-preview-mode #level-bg-transform-popover {
    display: none !important;
}
/* Reference grid box outline + layer-color dots are editor-only too */
.level-preview-mode .level-canvas-inner { outline: none !important; }
.level-preview-mode .level-pin-layer-dot { display: none; }
/* No selection ring in preview */
.level-preview-mode .level-pin.level-pin-selected .level-pin-character-frame,
.level-preview-mode .level-pin.level-pin-selected .level-pin-item-tile,
.level-preview-mode .level-pin.level-pin-selected .level-pin-quest-flag,
.level-preview-mode .level-pin.level-pin-selected .level-pin-level-tile {
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
/* Canvas takes up the full body when chrome is hidden */
.level-preview-mode .level-canvas {
    top: 0 !important;
    left: 0 !important;
}
/* Compass rose stays — it's part of the map, not chrome */

/* ── BG transform popover ───────────────────────────────────── */
.level-bg-transform-popover {
    position: absolute;
    z-index: 22;
    background: var(--bg-card);
    border: 1px solid #ffba3d;
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.7);
    min-width: 280px;
    display: flex; flex-direction: column; gap: 8px;
    user-select: none;
}
.level-bg-tx-row {
    display: grid;
    grid-template-columns: 50px 1fr 60px auto;
    gap: 6px;
    align-items: center;
}
.level-bg-tx-label {
    font-size: 10px; font-weight: 800; letter-spacing: 0.10em;
    color: var(--text-muted);
    text-transform: uppercase;
}
.level-bg-tx-row input[type="range"] {
    width: 100%;
    accent-color: #ffba3d;
}
.level-bg-tx-row input[type="number"] {
    width: 100%;
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 11px;
    padding: 3px 6px;
    outline: none;
}
.level-bg-tx-row input[type="number"]:focus { border-color: #ffba3d; }
.level-bg-tx-row span:last-child {
    font-size: 11px; color: var(--text-muted);
}
.level-bg-tx-quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 4px;
}
.level-bg-tx-quick button {
    background: var(--bg-card-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 10.5px; font-weight: 600;
    padding: 4px 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.level-bg-tx-quick button:hover {
    border-color: #ffba3d;
    color: #ffba3d;
}
.level-bg-tx-reset { color: var(--text-muted) !important; }

/* Side: Placed Pins list */
.level-pin-list { display: flex; flex-direction: column; gap: 3px; }
.level-pin-list-empty {
    color: var(--text-muted); font-size: 11px; font-style: italic;
    padding: 6px 0; line-height: 1.4;
}
.level-pin-list-row {
    display: grid;
    grid-template-columns: 10px 1fr auto 16px;
    gap: 6px; align-items: center;
    padding: 4px 6px;
    background: rgba(0,0,0,0.20);
    border: 1px solid var(--border);
    border-left: 3px solid var(--layer-color, #9aa6b8);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.level-pin-list-row:hover { background: rgba(255,186,61,0.12); }
.level-pin-list-bullet {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.5);
}
.level-pin-list-name {
    font-size: 11.5px; font-weight: 600;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.level-pin-list-link {
    font-size: 9.5px;
    color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 80px;
}
.level-pin-list-layer {
    width: 16px; height: 16px;
    border-radius: 3px;
    background: var(--layer-color, rgba(255,255,255,0.10));
    color: rgba(0,0,0,0.7);
    font-size: 9.5px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.level-pin-list-count {
    font-size: 10px; font-weight: 600;
    color: var(--text-muted);
    margin-left: 4px;
    text-transform: none;
    letter-spacing: 0;
}

/* Right-click context menu */
.level-ctx-menu {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid #ffba3d;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.7);
    z-index: 25;
    display: none;
    min-width: 180px;
    overflow: hidden;
}
.level-ctx-menu.open { display: block; }
.level-ctx-item {
    padding: 7px 12px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.10s ease;
    white-space: nowrap;
}
.level-ctx-item:hover { background: rgba(255,186,61,0.18); color: #ffe2a3; }

/* Layers panel — show layer color dot */
.level-layer-row {
    grid-template-columns: 24px 10px 1fr 24px !important;
}
.level-layer-color-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.5);
}
.level-layers-help {
    font-size: 9.5px; font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
    font-style: italic;
}
.level-layer-row.active {
    box-shadow: inset 0 0 0 1px #ffba3d, 0 0 8px rgba(255,186,61,0.30);
}

/* ========================================================================
   CONVERSATION (DIALOG FLOW) EDITOR
   ======================================================================== */
.conv-sheet-overlay {
    position: fixed; inset: 0;
    background: rgba(8, 12, 18, 0.78);
    display: none;
    z-index: 1200;
    align-items: center; justify-content: center;
}
.conv-sheet-overlay.open { display: flex; }
.conv-sheet-panel {
    width: 1280px; max-width: 97vw;
    height: 850px; max-height: 95vh;
    background: linear-gradient(160deg, #14202e 0%, #0a121d 100%);
    border: 1px solid rgba(58,166,196,0.25);
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    display: flex; flex-direction: column;
    overflow: hidden;
    position: relative;
    color: var(--text-primary);
}
.conv-sheet-panel.conv-maximized {
    width: 100vw !important; height: 100vh !important;
    max-width: 100vw !important; max-height: 100vh !important;
    border-radius: 0;
}
.conv-resize-handle {
    position: absolute; right: 0; bottom: 0;
    width: 18px; height: 18px;
    cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, rgba(58,166,196,0.45) 50%);
    z-index: 10;
}
.conv-sheet-panel.conv-resizing { transition: none !important; }

.conv-sheet-header {
    display: flex; align-items: center;
    padding: 10px 16px;
    background: rgba(58,166,196,0.10);
    border-bottom: 1px solid rgba(58,166,196,0.22);
    gap: 12px;
}
.conv-sheet-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #c0e7f1;
    letter-spacing: 0.3px;
}
.conv-sheet-header-actions {
    display: flex; gap: 6px;
}
.conv-sheet-play, .conv-sheet-maximize, .conv-sheet-close {
    background: rgba(58,166,196,0.12);
    border: 1px solid rgba(58,166,196,0.30);
    color: #c0e7f1;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.12s ease;
}
.conv-sheet-play:hover, .conv-sheet-maximize:hover { background: rgba(58,166,196,0.22); }
.conv-sheet-close:hover { background: rgba(196,74,74,0.22); border-color: rgba(196,74,74,0.45); color: #ffb0b0; }
.conv-sheet-play {
    background: linear-gradient(180deg, #4aab6d 0%, #3a8a58 100%);
    border-color: #5dc782;
    color: #fff;
}
.conv-sheet-play:hover { background: linear-gradient(180deg, #5dc782 0%, #4aab6d 100%); }

.conv-sheet-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    min-height: 0;
}
.conv-sheet-layout {
    display: flex; flex-direction: column;
    flex: 1;
    min-width: 0; min-height: 0;
}

/* Toolbar */
.conv-toolbar {
    display: flex; align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(8,14,22,0.6);
    border-bottom: 1px solid rgba(58,166,196,0.18);
    flex-wrap: wrap;
}
.conv-title-input {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(58,166,196,0.25);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    width: 280px;
    max-width: 30%;
}
.conv-title-input:focus { outline: none; border-color: #3aa6c4; box-shadow: 0 0 0 2px rgba(58,166,196,0.20); }

.conv-toolbar-sep {
    width: 1px;
    height: 22px;
    background: rgba(58,166,196,0.20);
    margin: 0 4px;
}
.conv-toolbar-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.conv-tool-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(58,166,196,0.25);
    color: var(--text-secondary);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.12s ease;
    white-space: nowrap;
}
.conv-tool-btn:hover {
    background: rgba(58,166,196,0.18);
    border-color: rgba(58,166,196,0.50);
    color: #d0effa;
}
.conv-add-btn { font-weight: 600; }
.conv-zoom-display {
    font-size: 11px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: center;
}
.conv-save-indicator {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.conv-save-indicator.visible { opacity: 1; }

/* Main area: side + canvas */
.conv-main {
    flex: 1;
    display: flex;
    min-height: 0;
}
.conv-side {
    width: 260px;
    min-width: 200px;
    background: rgba(6,12,20,0.55);
    border-right: 1px solid rgba(58,166,196,0.18);
    display: flex; flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}
.conv-side-resize {
    width: 4px;
    background: rgba(58,166,196,0.10);
    cursor: ew-resize;
    flex-shrink: 0;
    transition: background 0.12s;
}
.conv-side-resize:hover { background: rgba(58,166,196,0.40); }
.conv-side-section {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(58,166,196,0.10);
}
.conv-side-section-title {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 8px;
    display: block;
}
.conv-side-section-title-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.conv-side-section-title-row .conv-side-section-title { margin-bottom: 0; }
.conv-side-count {
    font-size: 10.5px;
    color: #3aa6c4;
    background: rgba(58,166,196,0.15);
    padding: 1px 8px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}
.conv-side-hint {
    font-size: 9.5px;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
}
.conv-summary {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(58,166,196,0.20);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    box-sizing: border-box;
}
.conv-summary:focus { outline: none; border-color: #3aa6c4; }
.conv-side-search {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(58,166,196,0.20);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 6px;
    box-sizing: border-box;
}
.conv-side-search:focus { outline: none; border-color: #3aa6c4; }
.conv-side-node-list {
    display: flex; flex-direction: column;
    gap: 3px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}
/* Scrollbar for the node list — subtle */
.conv-side-node-list::-webkit-scrollbar { width: 6px; }
.conv-side-node-list::-webkit-scrollbar-thumb { background: rgba(58,166,196,0.30); border-radius: 3px; }
.conv-side-node-list::-webkit-scrollbar-thumb:hover { background: rgba(58,166,196,0.50); }
.conv-side-node-row {
    display: flex; align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.02);
    border-left: 2px solid var(--node-color, #7c8aa0);
    border-radius: 3px;
    cursor: pointer;
    font-size: 11.5px;
    transition: background 0.12s ease;
}
.conv-side-node-row:hover { background: rgba(58,166,196,0.12); }
.conv-side-node-icon {
    color: var(--node-color, #7c8aa0);
    font-size: 13px;
    flex-shrink: 0;
}
.conv-side-node-title {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-side-chip-list {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.conv-side-chip {
    background: rgba(58,166,196,0.18);
    border: 1px solid rgba(58,166,196,0.35);
    color: #c0e7f1;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10.5px;
    font-family: 'Courier New', monospace;
}
.conv-side-empty {
    font-size: 10.5px;
    color: var(--text-muted);
    font-style: italic;
}

/* Canvas */
.conv-canvas {
    flex: 1;
    position: relative;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(58,166,196,0.06) 0%, transparent 50%),
        linear-gradient(160deg, #0c1622 0%, #050a11 100%);
    overflow: hidden;
    cursor: grab;
}
.conv-canvas.conv-canvas-panning { cursor: grabbing; }
.conv-canvas-inner {
    position: absolute;
    top: 0; left: 0;
    width: 6000px; height: 4000px;
    transform-origin: 0 0;
    background-image: radial-gradient(circle, rgba(58,166,196,0.12) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: 0 0;
}
.conv-edges, .conv-edge-preview {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    overflow: visible;
}
.conv-edges { z-index: 1; }
.conv-nodes { position: absolute; top: 0; left: 0; z-index: 2; }
.conv-edge-preview { z-index: 3; }

.conv-edge-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 18;
    pointer-events: stroke;
    cursor: pointer;
}
.conv-edge-path {
    fill: none;
    stroke: rgba(58,166,196,0.55);
    stroke-width: 2.2;
    pointer-events: none;
    transition: stroke 0.12s ease;
}
.conv-edge:hover .conv-edge-path { stroke: #5dd5e0; stroke-width: 2.8; }
.conv-edge-path.selected {
    stroke: #ffba3d;
    stroke-width: 3;
    stroke-dasharray: 6 4;
}
.conv-edge { color: rgba(58,166,196,0.55); }
.conv-edge:hover { color: #5dd5e0; }
.conv-edge-label {
    fill: #d0effa;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    pointer-events: none;
}
.conv-edge-preview-path {
    fill: none;
    stroke: #ffba3d;
    stroke-width: 2.2;
    stroke-dasharray: 6 4;
    pointer-events: none;
}

/* Nodes */
.conv-node {
    position: absolute;
    width: 280px;
    background: rgba(20, 30, 42, 0.96);
    border: 1.5px solid rgba(58,166,196,0.25);
    border-left: 4px solid var(--node-color, #7c8aa0);
    border-radius: 7px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    color: var(--text-primary);
    user-select: none;
    transition: box-shadow 0.12s ease;
    box-sizing: border-box;
}
.conv-node.selected {
    box-shadow: 0 0 0 2px var(--node-color, #5dd5e0), 0 6px 20px rgba(0,0,0,0.5);
}
.conv-node.conv-node-pulse {
    animation: convNodePulse 1s ease-out;
}
@keyframes convNodePulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,186,61,0.7), 0 6px 20px rgba(0,0,0,0.5); }
    70%  { box-shadow: 0 0 0 16px rgba(255,186,61,0), 0 6px 20px rgba(0,0,0,0.5); }
    100% { box-shadow: 0 0 0 0 rgba(255,186,61,0), 0 6px 20px rgba(0,0,0,0.5); }
}
.conv-node-header {
    display: flex; align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--node-color, #7c8aa0) 25%, transparent) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: grab;
    user-select: none;
}
.conv-node-header:active { cursor: grabbing; }
.conv-node-icon {
    color: var(--node-color, #7c8aa0);
    font-size: 14px;
    font-weight: bold;
}
.conv-node-type-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--node-color, #c0e7f1);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.conv-node-id {
    font-size: 9.5px;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
    margin-left: 4px;
}
.conv-node-actions {
    margin-left: auto;
    display: flex; gap: 2px;
}
.conv-node-act {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-muted);
    width: 22px; height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    transition: all 0.12s ease;
}
.conv-node-act:hover {
    background: rgba(58,166,196,0.20);
    border-color: rgba(58,166,196,0.50);
    color: #c0e7f1;
}
.conv-node-del:hover {
    background: rgba(196,74,74,0.25);
    border-color: rgba(196,74,74,0.55);
    color: #ffb0b0;
}
.conv-node-body {
    padding: 10px;
    font-size: 12px;
}
.conv-body-text {
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 6px 8px;
    min-height: 40px;
    line-height: 1.5;
    outline: none;
    word-break: break-word;
}
.conv-body-text:focus {
    border-color: var(--node-color, #3aa6c4);
    background: rgba(0,0,0,0.45);
}
.conv-body-text:empty:before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    font-style: italic;
    pointer-events: none;
}
.conv-body-start { text-align: center; padding: 8px 0; }
.conv-body-start-msg { color: #f5c518; font-size: 12px; font-style: italic; }

.conv-speaker-row { margin-bottom: 8px; }
.conv-speaker-slot {
    display: flex; align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    transition: background 0.12s;
}
.conv-speaker-slot:hover { background: rgba(58,166,196,0.12); }
.conv-speaker-portrait {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid #ffba3d;
    object-fit: cover;
    background: rgba(255,186,61,0.12);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    box-sizing: border-box;
}
.conv-speaker-portrait-empty { color: #ffba3d; font-size: 14px; }
.conv-speaker-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-speaker-broken { color: #ff8888; font-style: italic; font-weight: 400; }
.conv-speaker-clear, .conv-speaker-pick {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-muted);
    width: 22px; height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}
.conv-speaker-clear:hover { background: rgba(196,74,74,0.20); color: #ffb0b0; }
.conv-speaker-pick {
    width: auto;
    padding: 0 8px;
    color: #c0e7f1;
    font-size: 11px;
}
.conv-speaker-pick:hover { background: rgba(58,166,196,0.20); }
.conv-tags-row {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 8px;
}
.conv-tag-chip {
    display: inline-flex; align-items: center;
    gap: 3px;
    background: rgba(155,89,182,0.18);
    border: 1px solid rgba(155,89,182,0.40);
    color: #d8b9e8;
    padding: 1px 4px 1px 7px;
    border-radius: 8px;
    font-size: 10.5px;
}
.conv-tag-remove {
    background: transparent; border: 0; color: inherit;
    cursor: pointer; padding: 0 2px;
    font-size: 12px; line-height: 1;
}
.conv-tag-remove:hover { color: #ffb0b0; }
.conv-tag-input {
    background: transparent;
    border: 1px dashed rgba(155,89,182,0.40);
    color: #d8b9e8;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10.5px;
    width: 80px;
    outline: none;
}
.conv-tag-input:focus { border-style: solid; background: rgba(155,89,182,0.10); }

.conv-choice-prompt { margin-bottom: 8px; }
.conv-choice-list { display: flex; flex-direction: column; gap: 5px; }
.conv-choice-row {
    display: flex; align-items: center;
    gap: 4px;
    background: rgba(58,166,196,0.10);
    border: 1px solid rgba(58,166,196,0.25);
    border-radius: 4px;
    padding: 4px 6px;
}
.conv-choice-num {
    font-size: 10.5px;
    color: #3aa6c4;
    font-weight: 700;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.conv-choice-input {
    flex: 1;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary);
    padding: 4px 7px;
    border-radius: 3px;
    font-size: 11.5px;
    min-width: 0;
}
.conv-choice-input:focus { outline: none; border-color: #3aa6c4; }
.conv-choice-cond, .conv-choice-del {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-muted);
    width: 22px; height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    flex-shrink: 0;
}
.conv-choice-cond:hover { background: rgba(212,136,30,0.20); color: #f0a030; }
.conv-choice-del:hover { background: rgba(196,74,74,0.20); color: #ffb0b0; }
.conv-choice-add, .conv-cond-add, .conv-action-add {
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(58,166,196,0.40);
    color: var(--text-muted);
    padding: 4px 0;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    width: 100%;
    transition: all 0.12s ease;
    margin-top: 2px;
}
.conv-choice-add:hover, .conv-cond-add:hover, .conv-action-add:hover {
    background: rgba(58,166,196,0.15);
    border-color: rgba(58,166,196,0.60);
    color: #c0e7f1;
}

.conv-cond-list, .conv-action-list { display: flex; flex-direction: column; gap: 6px; }
.conv-cond-row {
    background: rgba(212,136,30,0.08);
    border: 1px solid rgba(212,136,30,0.25);
    border-radius: 4px;
    padding: 6px 7px;
    display: flex; flex-direction: column;
    gap: 5px;
}
.conv-cond-row-top, .conv-cond-row-bot {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: wrap;
}
/* Dropdowns — dark theme, custom chevron, readable */
.conv-cond-op, .conv-action-op, .conv-jump-node-select {
    background-color: rgba(20,30,42,0.95);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0' fill='%23c0e7f1'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px 6px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-primary);
    padding: 5px 22px 5px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 500;
    flex-shrink: 0;
    cursor: pointer;
    min-width: 0;
    line-height: 1.2;
    height: 26px;
    box-sizing: border-box;
}
.conv-cond-op { background-color: rgba(28,22,12,0.95); border-color: rgba(212,136,30,0.40); }
.conv-action-op { background-color: rgba(12,28,18,0.95); border-color: rgba(74,171,109,0.40); }
.conv-jump-node-select { background-color: rgba(28,12,28,0.95); border-color: rgba(155,89,182,0.40); }
.conv-cond-op:focus, .conv-action-op:focus, .conv-jump-node-select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(58,166,196,0.35);
}
.conv-cond-op:hover, .conv-action-op:hover, .conv-jump-node-select:hover {
    border-color: rgba(255,255,255,0.30);
}
/* Style the option list (these inherit OS chrome but we can hint colors) */
.conv-cond-op option, .conv-action-op option, .conv-jump-node-select option {
    background-color: #14202e;
    color: var(--text-primary);
    padding: 6px 8px;
}
.conv-cond-lhs, .conv-cond-rhs, .conv-cond-label, .conv-action-target, .conv-action-value, .conv-end-label {
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--text-primary);
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 11.5px;
    min-width: 0;
    height: 26px;
    box-sizing: border-box;
}
.conv-cond-lhs, .conv-cond-rhs, .conv-action-target, .conv-action-value {
    flex: 1 1 80px;        /* Wrap to next line if needed */
    min-width: 60px;
}
.conv-cond-label { flex: 1 1 100%; font-style: italic; color: #d8b9e8; }
.conv-cond-lhs:focus, .conv-cond-rhs:focus, .conv-cond-label:focus,
.conv-action-target:focus, .conv-action-value:focus, .conv-end-label:focus {
    outline: none; border-color: #3aa6c4;
}
.conv-cond-pick, .conv-action-pick {
    background: transparent;
    border: 1px solid rgba(58,166,196,0.30);
    color: #3aa6c4;
    width: 22px; height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    flex-shrink: 0;
}
.conv-cond-pick:hover, .conv-action-pick:hover { background: rgba(58,166,196,0.18); }
.conv-cond-del, .conv-action-del {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted);
    width: 22px; height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    flex-shrink: 0;
}
.conv-cond-del:hover, .conv-action-del:hover { background: rgba(196,74,74,0.20); color: #ffb0b0; }
.conv-cond-arrow { color: #d4881e; font-weight: bold; margin-right: 2px; }
.conv-cond-else-hint {
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
    font-style: italic;
    padding-right: 4px;
}
.conv-action-row {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: wrap;
    background: rgba(74,171,109,0.08);
    border: 1px solid rgba(74,171,109,0.25);
    border-radius: 4px;
    padding: 6px 7px;
}

/* Jump body */
.conv-body-jump { display: flex; flex-direction: column; gap: 8px; }
.conv-jump-target { display: flex; flex-direction: column; gap: 4px; }
.conv-jump-target label { font-size: 10.5px; color: var(--text-muted); flex-shrink: 0; }
.conv-jump-node-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.conv-jump-xref { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.conv-jump-xref-label { font-size: 10.5px; color: var(--text-muted); }
.conv-jump-xref-chip {
    background: rgba(155,89,182,0.18);
    border: 1px solid rgba(155,89,182,0.40);
    color: #d8b9e8;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
}
.conv-jump-xref-clear {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-muted);
    width: 22px; height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
}
.conv-jump-xref-clear:hover { background: rgba(196,74,74,0.20); color: #ffb0b0; }
.conv-jump-xref-pick {
    background: rgba(155,89,182,0.10);
    border: 1px dashed rgba(155,89,182,0.40);
    color: #d8b9e8;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    width: 100%;
}
.conv-jump-xref-pick:hover { background: rgba(155,89,182,0.18); }
.conv-body-end .conv-end-label {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 12px;
}

/* Handles */
.conv-handle {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--node-color, #3aa6c4);
    border: 2px solid rgba(20,30,42,0.96);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.10);
    z-index: 5;
    box-sizing: border-box;
}
.conv-handle-in {
    left: -8px;
    top: 22px;
    background: rgba(58,166,196,0.7);
    cursor: crosshair;
}
.conv-handle-out {
    right: -8px;
    background: var(--node-color, #3aa6c4);
    cursor: crosshair;
    transition: transform 0.12s ease;
}
.conv-handle-out:hover {
    transform: scale(1.4);
    box-shadow: 0 0 0 2px rgba(58,166,196,0.6);
}
.conv-handle-label {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    background: rgba(20,30,42,0.96);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 1px 5px;
    border-radius: 3px;
    pointer-events: none;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.conv-edge-dragging * { cursor: crosshair !important; }
body.conv-edge-dragging .conv-node:hover .conv-handle-in {
    transform: scale(1.5);
    box-shadow: 0 0 0 3px rgba(255,186,61,0.5);
    background: #ffba3d;
}

.conv-canvas-hint {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(20,30,42,0.96);
    border: 1px solid rgba(255,186,61,0.45);
    color: #ffe2a3;
    padding: 8px 14px;
    border-radius: 5px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 20;
}
.conv-canvas-hint.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.conv-add-menu {
    position: fixed;
    z-index: 1500;
    background: rgba(20,30,42,0.98);
    border: 1px solid rgba(58,166,196,0.40);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    padding: 4px 0;
    min-width: 160px;
}
.conv-add-menu-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    padding: 7px 12px;
    cursor: pointer;
    font-size: 12px;
    text-align: left;
    border-left: 3px solid transparent;
    transition: all 0.10s ease;
}
.conv-add-menu-item:hover {
    background: rgba(58,166,196,0.18);
    border-left-color: var(--node-color, #3aa6c4);
}
.conv-add-menu-icon {
    color: var(--node-color, #7c8aa0);
    font-weight: bold;
    width: 18px;
    text-align: center;
}

/* Inline cond popover (gates a Choice option) — structured editor */
.conv-inline-cond-pop {
    position: fixed;
    z-index: 1500;
    background: rgba(20,30,42,0.98);
    border: 1px solid rgba(212,136,30,0.45);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    padding: 10px 12px;
    width: 320px;
    box-sizing: border-box;
}
.conv-inline-cond-title {
    font-size: 11px;
    font-weight: 700;
    color: #f0a030;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.conv-inline-cond-hint {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.4;
}
.conv-inline-cond-hint code,
.conv-inline-cond-hint b {
    color: #ffe2a3;
}
.conv-inline-cond-form {
    display: flex; flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.conv-inline-cond-form select,
.conv-inline-cond-form input,
.conv-inline-cond-form .conv-rowtarget-slot {
    width: 100%;
    box-sizing: border-box;
}
.conv-inline-cond-form select { min-width: 0; }
.conv-inline-cond-row-hint {
    font-size: 10.5px;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 8px;
    line-height: 1.4;
    min-height: 14px;
}
.conv-inline-cond-actions {
    display: flex; gap: 6px; justify-content: flex-end;
}
.conv-inline-cond-clear, .conv-inline-cond-save {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11.5px;
}
.conv-inline-cond-save {
    background: rgba(212,136,30,0.20);
    border-color: rgba(212,136,30,0.50);
    color: #ffe2a3;
}
.conv-inline-cond-clear:hover { background: rgba(196,74,74,0.20); color: #ffb0b0; }
.conv-inline-cond-save:hover { background: rgba(212,136,30,0.35); }

/* Row "target" slot — a compact wrapper that hosts either:
     • a flag-name <input> (with autocomplete + new-flag hint), or
     • an object-ref chip (with name + clear ×), or
     • a "+ Pick {kind}" button when no value is set yet. */
.conv-rowtarget-slot {
    flex: 1 1 80px;
    min-width: 60px;
    display: flex; flex-direction: column;
    gap: 2px;
}
.conv-rowtarget-input {
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-primary);
    padding: 4px 7px;
    border-radius: 4px;
    font-size: 11.5px;
    height: 26px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}
.conv-rowtarget-input:focus { outline: none; border-color: #3aa6c4; }
.conv-rowtarget-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--type-color, rgba(58,166,196,0.40));
    border-left-width: 3px;
    color: var(--text-primary);
    padding: 3px 5px 3px 7px;
    border-radius: 4px;
    font-size: 11.5px;
    height: 26px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.10s ease;
    overflow: hidden;
}
.conv-rowtarget-chip:hover { background: rgba(58,166,196,0.12); }
.conv-rowtarget-chip.conv-rowtarget-broken {
    border-color: rgba(196,74,74,0.45);
    color: #ffb0b0;
    cursor: default;
}
.conv-rowtarget-chip.conv-rowtarget-broken:hover { background: rgba(0,0,0,0.30); }
.conv-rowtarget-icon {
    color: var(--type-color, #c0e7f1);
    font-size: 13px;
    flex-shrink: 0;
}
.conv-rowtarget-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.conv-rowtarget-clear {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1;
}
.conv-rowtarget-clear:hover { color: #ffb0b0; }
.conv-rowtarget-pick {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(58,166,196,0.10);
    border: 1px dashed rgba(58,166,196,0.40);
    color: #c0e7f1;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11.5px;
    height: 26px;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-rowtarget-pick:hover {
    background: rgba(58,166,196,0.22);
    border-style: solid;
}
.conv-newflag-hint {
    font-size: 9.5px;
    color: #4aab6d;
    font-style: italic;
    padding-left: 2px;
}

/* Per-row hint line under each cond/action row (and the topline wrapper) */
.conv-row-topline {
    display: flex; align-items: center; gap: 4px;
    flex-wrap: wrap;
}
.conv-row-hint {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    padding: 4px 2px 0;
    line-height: 1.4;
}

/* Box-select rectangle (shift-drag on canvas bg) */
.conv-box-select {
    position: fixed;
    pointer-events: none;
    background: rgba(58,166,196,0.10);
    border: 1px dashed #5dd5e0;
    border-radius: 2px;
    z-index: 9500;
}

/* Collapsible side-panel sections */
.conv-side-section-collapse-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    display: flex; align-items: center; gap: 4px;
    margin-bottom: 8px;
    width: 100%;
    text-align: left;
}
.conv-side-section-collapse-toggle .conv-side-section-title {
    margin-bottom: 0;
    color: inherit;
}
.conv-side-section-chev {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 0.18s ease;
    width: 10px; display: inline-block;
}
.conv-side-section-collapsed .conv-side-section-chev {
    transform: rotate(-90deg);
}
.conv-side-section-collapsed .conv-side-stats,
.conv-side-section-collapsed .conv-side-chip-list,
.conv-side-section-collapsed .conv-side-node-list,
.conv-side-section-collapsed .conv-side-search,
.conv-side-section-collapsed .conv-summary {
    display: none;
}

/* Side panel: section title row + add button */
.conv-side-add-btn {
    background: rgba(58,166,196,0.10);
    border: 1px dashed rgba(58,166,196,0.40);
    color: #c0e7f1;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10.5px;
    transition: all 0.10s ease;
}
.conv-side-add-btn:hover {
    background: rgba(58,166,196,0.22);
    border-style: solid;
}

/* Side panel: ref chips (clickable) */
.conv-side-flag-chip {
    /* same as base .conv-side-chip — slightly emphasised */
    background: rgba(212,136,30,0.18);
    border-color: rgba(212,136,30,0.40);
    color: #ffe2a3;
}
.conv-side-ref-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--type-color, rgba(58,166,196,0.40));
    border-left-width: 3px;
    color: var(--text-primary);
    padding: 2px 8px 2px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.10s ease;
    max-width: 100%;
    overflow: hidden;
}
.conv-side-ref-chip:hover { background: rgba(58,166,196,0.16); }
.conv-side-ref-chip.conv-side-ref-broken {
    border-color: rgba(196,74,74,0.45);
    color: #ffb0b0;
    cursor: default;
}
.conv-side-ref-icon { color: var(--type-color, #c0e7f1); font-size: 12px; flex-shrink: 0; }
.conv-side-ref-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Play mode */
.conv-play-shell {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #0a121d 0%, #050a11 100%);
    z-index: 50;
    display: none;
    overflow-y: auto;
    padding: 60px 40px 40px;
}
.conv-sheet-overlay.conv-play-mode .conv-play-shell { display: block; }
.conv-play-exit {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(196,74,74,0.18);
    border: 1px solid rgba(196,74,74,0.45);
    color: #ffb0b0;
    padding: 6px 14px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    z-index: 51;
}
.conv-play-exit:hover { background: rgba(196,74,74,0.30); }
.conv-play-stage {
    max-width: 720px;
    margin: 0 auto;
    display: flex; flex-direction: column;
    gap: 18px;
}
.conv-play-card {
    background: rgba(20,30,42,0.92);
    border: 1px solid rgba(58,166,196,0.30);
    border-left: 4px solid #3aa6c4;
    border-radius: 8px;
    padding: 22px 24px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    animation: convPlayCardIn 0.25s ease-out;
}
@keyframes convPlayCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.conv-play-card-dialogue { border-left-color: #7c8aa0; }
.conv-play-card-choice   { border-left-color: #3aa6c4; }
.conv-play-card-condition{ border-left-color: #d4881e; }
.conv-play-card-action   { border-left-color: #4aab6d; }
.conv-play-card-jump     { border-left-color: #9b59b6; }
.conv-play-card-end      { border-left-color: #c44a4a; text-align: center; }
.conv-play-card-start    { border-left-color: #f5c518; text-align: center; }
.conv-play-meta {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
    font-weight: 700;
}
.conv-play-speaker {
    display: flex; align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.conv-play-portrait {
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 2px solid #ffba3d;
    object-fit: cover;
    background: rgba(255,186,61,0.10);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    color: #ffba3d;
    flex-shrink: 0;
    box-sizing: border-box;
}
.conv-play-speaker-name { font-size: 16px; font-weight: 700; color: #ffba3d; }
.conv-play-tags { display: flex; gap: 4px; margin-left: auto; }
.conv-play-tag {
    background: rgba(155,89,182,0.18);
    border: 1px solid rgba(155,89,182,0.45);
    color: #d8b9e8;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 10.5px;
}
.conv-play-body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 18px;
}
.conv-play-cont {
    background: linear-gradient(180deg, #3aa6c4 0%, #2c8aa3 100%);
    border: 1px solid #5dd5e0;
    color: #fff;
    padding: 8px 22px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.conv-play-cont:hover { background: linear-gradient(180deg, #5dd5e0 0%, #3aa6c4 100%); }
.conv-play-choices { display: flex; flex-direction: column; gap: 8px; }
.conv-play-choice {
    display: flex; align-items: center;
    gap: 10px;
    background: rgba(58,166,196,0.10);
    border: 1px solid rgba(58,166,196,0.35);
    color: var(--text-primary);
    padding: 10px 14px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    transition: all 0.12s ease;
}
.conv-play-choice:hover {
    background: rgba(58,166,196,0.22);
    border-color: #5dd5e0;
    transform: translateX(3px);
}
.conv-play-choice-else { border-color: rgba(212,136,30,0.40); }
.conv-play-choice-else:hover { background: rgba(212,136,30,0.18); border-color: #f0a030; }
.conv-play-choice-num {
    background: #3aa6c4;
    color: #fff;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.conv-play-choice-text { flex: 1; }
.conv-play-choice-gate {
    font-size: 10.5px;
    color: #f0a030;
    background: rgba(212,136,30,0.15);
    padding: 2px 6px;
    border-radius: 4px;
}
.conv-play-cond-meta {
    font-size: 10.5px;
    color: var(--text-muted);
    background: rgba(0,0,0,0.30);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
}
.conv-play-action-list {
    margin: 0 0 16px 0;
    padding-left: 18px;
    color: var(--text-primary);
}
.conv-play-action-list li {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 4px;
}
.conv-play-action-val {
    color: #4aab6d;
    font-family: 'Courier New', monospace;
    font-size: 11.5px;
}
.conv-play-end-banner {
    font-size: 22px;
    font-weight: 700;
    color: #c44a4a;
    text-align: center;
    margin: 12px 0 18px;
}
.conv-play-restart {
    background: rgba(58,166,196,0.18);
    border: 1px solid rgba(58,166,196,0.45);
    color: #c0e7f1;
    padding: 8px 18px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}
.conv-play-restart:hover { background: rgba(58,166,196,0.30); }
.conv-play-restart-row { text-align: center; margin-top: 8px; }
.conv-play-end {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 0;
}
.conv-play-end h2 { color: var(--text-primary); margin-bottom: 8px; }
.conv-play-log {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed rgba(58,166,196,0.20);
    font-size: 11px;
}
.conv-play-log-title {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    font-weight: 700;
}
.conv-play-log-row {
    color: var(--text-secondary);
    padding: 3px 8px;
    background: rgba(0,0,0,0.20);
    border-left: 2px solid rgba(58,166,196,0.30);
    margin-bottom: 2px;
    border-radius: 0 3px 3px 0;
    font-family: 'Courier New', monospace;
}

/* Project hub card thumbnail for conversation */
.content-card-conv-svg {
    font-size: 38px;
    color: #3aa6c4;
    filter: drop-shadow(0 0 12px rgba(58,166,196,0.55));
}
.content-card-conv-meta {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Object-ref card variant for conversation */
.gds-objref-card-conversation {
    padding: 12px;
    background: linear-gradient(160deg, rgba(58,166,196,0.10) 0%, rgba(20,30,42,0.95) 100%);
    display: flex; flex-direction: column;
    min-height: 120px;
}
.gds-objref-conv-hdr {
    display: flex; align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.gds-objref-conv-icon {
    font-size: 18px;
    color: #3aa6c4;
}
.gds-objref-conv-summary {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
}
.gds-objref-conv-stats {
    display: flex; gap: 10px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.gds-objref-conv-stats b { color: #c0e7f1; font-weight: 600; }
.gds-objref-conv-portraits { display: flex; }
.gds-objref-conv-portrait {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(20,30,42,0.95);
    margin-left: -6px;
    object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    background: rgba(255,186,61,0.20);
    color: #ffba3d;
    box-sizing: border-box;
}
.gds-objref-conv-portrait:first-child { margin-left: 0; }
.gds-objref-conv-portrait-empty { font-size: 14px; }

/* Player / Narrator special speakers */
.conv-speaker-portrait-player {
    color: #ffba3d;
    background: rgba(255,186,61,0.20);
    border-color: #ffba3d;
}
.conv-speaker-portrait-narrator {
    color: #c0e7f1;
    background: rgba(58,166,196,0.20);
    border-color: #3aa6c4;
}
.conv-speaker-special.conv-speaker-player .conv-speaker-name { color: #ffba3d; }
.conv-speaker-special.conv-speaker-narrator .conv-speaker-name { color: #c0e7f1; }

.conv-speaker-menu {
    position: fixed;
    z-index: 1500;
    background: rgba(20,30,42,0.98);
    border: 1px solid rgba(58,166,196,0.40);
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    padding: 4px 0;
    min-width: 200px;
}
.conv-speaker-menu-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    padding: 7px 14px;
    cursor: pointer;
    font-size: 12px;
    text-align: left;
    border-left: 3px solid transparent;
    transition: all 0.10s ease;
}
.conv-speaker-menu-item:hover {
    background: rgba(58,166,196,0.18);
    border-left-color: #3aa6c4;
}
.conv-speaker-menu-player:hover { border-left-color: #ffba3d; background: rgba(255,186,61,0.15); }
.conv-speaker-menu-narrator:hover { border-left-color: #c0e7f1; background: rgba(58,166,196,0.15); }

/* Comment node */
.conv-node-comment {
    background: rgba(45,38,18,0.95) !important;
    border-color: rgba(184,160,96,0.40) !important;
    border-left-color: #b8a060 !important;
}
.conv-body-comment .conv-comment-text {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(184,160,96,0.30);
    color: #f0e0a0;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    font-style: italic;
    resize: vertical;
    min-height: 60px;
    line-height: 1.5;
}
.conv-body-comment .conv-comment-text:focus {
    outline: none;
    border-color: #b8a060;
    background: rgba(0,0,0,0.30);
}

/* Format toolbar above dialogue body */
.conv-body-fmt-bar {
    display: none;
    align-items: center; gap: 4px;
    margin-bottom: 4px;
    padding: 3px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.conv-body-fmt-bar.visible { display: flex; }
.conv-fmt-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-secondary);
    width: 22px; height: 22px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.conv-fmt-btn:hover { background: rgba(58,166,196,0.18); color: #c0e7f1; }
.conv-fmt-hint {
    margin-left: auto;
    font-size: 9.5px;
    color: var(--text-muted);
    font-style: italic;
}

/* Issues button — toolbar */
.conv-issues-btn {
    display: inline-flex !important; align-items: center; gap: 5px;
}
.conv-issues-btn .conv-issues-icon { font-size: 12px; }
.conv-issues-btn.has-issues {
    background: rgba(212,136,30,0.18);
    border-color: rgba(212,136,30,0.50);
    color: #ffe2a3;
}
.conv-issues-btn.has-issues:hover {
    background: rgba(212,136,30,0.28);
}
.conv-issues-btn.active {
    background: rgba(212,136,30,0.30);
    border-color: #f0a030;
    color: #ffe2a3;
    box-shadow: 0 0 0 2px rgba(212,136,30,0.20);
}
.conv-issues-badge {
    display: none;
    background: #f0a030;
    color: #1a1208;
    border-radius: 8px;
    font-size: 9.5px;
    font-weight: 700;
    padding: 1px 6px;
    min-width: 14px;
    text-align: center;
    line-height: 1.3;
}
.conv-issues-badge.visible { display: inline-block; }

/* Floating issues panel — anchored top-right of the canvas, always visible */
.conv-lint-floating {
    position: absolute;
    top: 56px;
    right: 16px;
    width: 360px;
    max-height: 440px;
    background: rgba(20,30,42,0.98);
    border: 1px solid rgba(212,136,30,0.50);
    border-radius: 8px;
    box-shadow: 0 10px 36px rgba(0,0,0,0.7);
    z-index: 25;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: convLintIn 0.18s ease-out;
}
@keyframes convLintIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.conv-lint-head {
    display: flex; align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(212,136,30,0.18);
    border-bottom: 1px solid rgba(212,136,30,0.30);
}
.conv-lint-head-title {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    color: #ffe2a3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.conv-lint-refresh, .conv-lint-close {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-secondary);
    width: 24px; height: 24px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.conv-lint-refresh:hover { background: rgba(58,166,196,0.20); color: #c0e7f1; }
.conv-lint-close:hover   { background: rgba(196,74,74,0.20); color: #ffb0b0; }
.conv-lint-list-floating {
    flex: 1; overflow-y: auto;
    padding: 8px 10px;
    display: flex; flex-direction: column;
    gap: 4px;
}

/* Old in-side-panel lint section retained for graceful degradation but unused */
.conv-side-section-lint {
    background: rgba(212,136,30,0.06);
    border-bottom: 1px solid rgba(212,136,30,0.25);
}
.conv-lint-list {
    display: flex; flex-direction: column;
    gap: 3px;
}
.conv-lint-clean {
    color: #4aab6d !important;
    font-style: normal !important;
    font-weight: 500;
}
.conv-lint-row {
    display: flex; align-items: flex-start;
    gap: 6px;
    padding: 5px 6px;
    background: rgba(0,0,0,0.25);
    border-left: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.35;
    transition: background 0.12s ease;
}
.conv-lint-row:hover { background: rgba(212,136,30,0.18); }
.conv-lint-row.conv-lint-error { border-left-color: #c44a4a; }
.conv-lint-row.conv-lint-warn  { border-left-color: #d4881e; }
.conv-lint-row.conv-lint-info  { border-left-color: #3aa6c4; }
.conv-lint-sev {
    font-size: 11px;
    width: 12px; flex-shrink: 0;
}
.conv-lint-row.conv-lint-error .conv-lint-sev { color: #ff8888; }
.conv-lint-row.conv-lint-warn  .conv-lint-sev { color: #f0a030; }
.conv-lint-row.conv-lint-info  .conv-lint-sev { color: #5dd5e0; }
.conv-lint-icon { font-size: 12px; width: 14px; flex-shrink: 0; }
.conv-lint-msg { color: var(--text-primary); flex: 1; word-break: break-word; }

/* Stats */
.conv-side-stats {
    display: flex; flex-direction: column;
    gap: 2px;
    font-size: 11.5px;
}
.conv-stat-row {
    display: flex; justify-content: space-between;
    padding: 3px 6px;
    background: rgba(255,255,255,0.02);
    border-radius: 3px;
}
.conv-stat-row span { color: var(--text-secondary); }
.conv-stat-row b { color: #c0e7f1; font-variant-numeric: tabular-nums; }
.conv-stat-row.conv-stat-warn { background: rgba(196,74,74,0.10); }
.conv-stat-row.conv-stat-warn span { color: #ff8888; }
.conv-stat-row.conv-stat-warn b { color: #ffb0b0; }

/* Play header bar (state pills + scenario controls) */
.conv-play-header-bar {
    max-width: 720px;
    margin: 0 auto 12px;
    padding: 10px 14px;
    background: rgba(20,30,42,0.85);
    border: 1px solid rgba(58,166,196,0.20);
    border-radius: 6px;
    display: flex; flex-direction: column;
    gap: 8px;
}
.conv-play-header-left {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
}
.conv-play-tool-btn {
    background: rgba(58,166,196,0.12);
    border: 1px solid rgba(58,166,196,0.35);
    color: #c0e7f1;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11.5px;
}
.conv-play-tool-btn:hover { background: rgba(58,166,196,0.22); }
.conv-play-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}
.conv-play-toggle input { margin: 0; cursor: pointer; }
.conv-play-state-pills {
    display: flex; flex-wrap: wrap; gap: 4px;
    min-height: 22px;
}
.conv-state-pill {
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(58,166,196,0.18);
    border: 1px solid rgba(58,166,196,0.35);
    color: #c0e7f1;
}
.conv-state-flag    { background: rgba(212,136,30,0.18); border-color: rgba(212,136,30,0.40); color: #ffe2a3; }
.conv-state-item    { background: rgba(204,119,34,0.18); border-color: rgba(204,119,34,0.40); color: #f5b87a; }
.conv-state-affinity{ background: rgba(224,92,138,0.18); border-color: rgba(224,92,138,0.40); color: #f5b8d0; }
.conv-state-quest   { background: rgba(155,89,182,0.18); border-color: rgba(155,89,182,0.40); color: #d8b9e8; }

/* Auto-eval condition result */
.conv-play-cond-result {
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(212,136,30,0.30);
    border-radius: 5px;
    padding: 12px 14px;
    margin-bottom: 16px;
    display: flex; flex-direction: column;
    gap: 4px;
}
.conv-play-cond-pass {
    color: #5dc782;
    font-size: 14px;
    font-weight: 600;
}
.conv-play-cond-else {
    color: #f0a030;
    font-size: 14px;
    font-style: italic;
}

/* Locked / gated choice in Play */
.conv-play-choice-locked {
    opacity: 0.5;
    cursor: not-allowed !important;
    background: rgba(50,50,50,0.30) !important;
    border-color: rgba(255,255,255,0.10) !important;
}
.conv-play-choice-locked:hover { transform: none !important; }

/* Test scenarios modal */
.conv-scenarios-modal .conv-scenario-explainer {
    background: rgba(58,166,196,0.08);
    border-left: 3px solid #3aa6c4;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
.conv-scenarios-modal .conv-scenario-explainer code {
    background: rgba(0,0,0,0.30);
    padding: 1px 6px;
    border-radius: 3px;
    color: #ffe2a3;
    font-size: 10.5px;
}
.conv-scenarios-modal .conv-scenario-explainer b {
    color: #c0e7f1;
}
.conv-scenarios-modal .conv-scenario-section {
    margin-bottom: 14px;
}
.conv-scenarios-modal .conv-scenario-section-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.conv-scenarios-modal .conv-scenario-section-hint {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    font-style: italic;
}
.conv-scenarios-modal .conv-scenario-key-chip {
    display: inline-flex; align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.30);
    border: 1px solid var(--type-color, rgba(58,166,196,0.40));
    border-left-width: 3px;
    color: var(--text-primary);
    padding: 4px 8px 4px 6px;
    border-radius: 4px;
    font-size: 11.5px;
    height: 26px;
    box-sizing: border-box;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.conv-scenarios-modal .conv-scenario-key-chip.conv-scenario-key-empty {
    color: var(--text-muted);
    font-style: italic;
    border-style: dashed;
}
.conv-scenario-keychip-icon { color: var(--type-color, #c0e7f1); flex-shrink: 0; font-size: 13px; }
.conv-scenarios-modal .conv-scenario-flags-list {
    display: flex; flex-direction: column; gap: 4px;
    margin-bottom: 6px;
}
.conv-scenarios-modal .conv-scenario-row {
    display: flex; align-items: center; gap: 4px;
}
.conv-scenarios-modal .conv-scenario-key,
.conv-scenarios-modal .conv-scenario-val {
    flex: 1;
    background: rgba(0,0,0,0.30);
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-primary);
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    min-width: 0;
}
.conv-scenarios-modal .conv-scenario-pick,
.conv-scenarios-modal .conv-scenario-del {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--text-muted);
    width: 26px; height: 26px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    padding: 0;
    flex-shrink: 0;
}
.conv-scenarios-modal .conv-scenario-pick:hover { background: rgba(58,166,196,0.20); color: #c0e7f1; }
.conv-scenarios-modal .conv-scenario-del:hover { background: rgba(196,74,74,0.20); color: #ffb0b0; }
.conv-scenarios-modal .conv-scenario-add {
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(58,166,196,0.40);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
}
.conv-scenarios-modal .conv-scenario-add:hover {
    background: rgba(58,166,196,0.12);
    border-style: solid;
    color: #c0e7f1;
}

/* Quest sheet's Linked Conversations list */
.quest-conv-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(58,166,196,0.12);
    border: 1px solid rgba(58,166,196,0.35);
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.12s ease;
    margin: 0 6px 6px 0;
}
.quest-conv-chip:hover {
    background: rgba(58,166,196,0.22);
    border-color: #5dd5e0;
}
.quest-conv-icon { color: #3aa6c4; font-size: 14px; }
.quest-conv-name { color: var(--text-primary); font-size: 12px; font-weight: 500; }
.quest-conv-meta { color: var(--text-muted); font-size: 10.5px; }
.quest-conv-remove {
    background: transparent; border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-muted); width: 18px; height: 18px;
    border-radius: 3px; cursor: pointer;
    font-size: 11px; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.quest-conv-remove:hover { background: rgba(196,74,74,0.20); color: #ffb0b0; }
.quest-add-conversation-btn {
    background: rgba(58,166,196,0.10);
    border: 1px dashed rgba(58,166,196,0.40);
    color: #c0e7f1;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11.5px;
    transition: all 0.12s;
}
.quest-add-conversation-btn:hover {
    background: rgba(58,166,196,0.20);
    border-style: solid;
    border-color: #3aa6c4;
}
.quest-add-conversation-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}


/* ============================================================
   PROJECT HUB FOLDERS (filesystem-style — folder strip + flat grid)
   ============================================================ */

/* The grid container is now a vertical stack: breadcrumb → strip → items */
.cards-grid-flat {
    display: block;
}

/* Inner items grid — same look as the legacy .cards-grid */
.hub-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}
.hub-items-empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 28px 20px;
    text-align: center;
    border: 1.5px dashed rgba(255,255,255,0.10);
    border-radius: var(--radius-md);
    margin: 8px 0 18px;
    line-height: 1.5;
}

/* Breadcrumb — shown when navigating into a folder */
.hub-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0 14px;
    font-size: 13px;
    color: var(--text-secondary);
}
.hub-breadcrumb-link {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.12s ease;
}
.hub-breadcrumb-link:hover {
    border-color: var(--blue-mid);
    color: var(--blue-bright);
    background: var(--blue-glow);
}
.hub-breadcrumb-sep {
    color: var(--text-muted);
    font-size: 14px;
}
.hub-breadcrumb-current {
    --folder-color: #4a9eff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--folder-color) 12%, transparent);
    border-radius: var(--radius-md);
}
.hub-breadcrumb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--folder-color);
    box-shadow: 0 0 8px color-mix(in srgb, var(--folder-color) 60%, transparent);
}

/* Folder strip — horizontal row of folder tiles at the top of the hub */
.hub-folder-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 0 18px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.hub-folder-tile {
    --folder-color: #4a9eff;
    width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
}
.hub-folder-tile::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--folder-color);
}
.hub-folder-tile:hover {
    border-color: color-mix(in srgb, var(--folder-color) 50%, var(--border));
    background: color-mix(in srgb, var(--folder-color) 6%, var(--bg-card));
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.hub-folder-icon {
    color: var(--folder-color);
    flex-shrink: 0;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: background 0.12s ease;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--folder-color) 30%, transparent));
}
.hub-folder-icon:hover {
    background: color-mix(in srgb, var(--folder-color) 14%, transparent);
}

.hub-folder-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hub-folder-name {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 4px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    min-width: 0;
    width: 100%;
    outline: none;
    text-overflow: ellipsis;
}
.hub-folder-name:hover {
    border-color: rgba(255,255,255,0.08);
}
.hub-folder-name:focus {
    border-color: var(--folder-color);
    background: var(--bg-base);
}

.hub-folder-count {
    color: var(--text-muted);
    font-size: 11px;
    padding: 0 4px;
}

.hub-folder-menu {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.hub-folder-tile:hover .hub-folder-menu {
    opacity: 1;
}
.hub-folder-menu:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

/* "+ New folder" tile */
.hub-folder-add {
    border: 2px dashed rgba(255,255,255,0.12);
    background: transparent;
    color: var(--text-muted);
    width: 220px;
    cursor: pointer;
    transition: all 0.15s ease;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13px;
}
.hub-folder-add::before { content: none; }
.hub-folder-add:hover {
    border-color: var(--blue-bright);
    color: var(--blue-bright);
    background: var(--blue-glow);
    transform: none;
}
.hub-folder-add-glyph {
    font-size: 22px;
    line-height: 1;
    font-weight: 300;
}
.hub-folder-add-label {
    font-weight: 500;
}

/* Drag-drop visuals */
.hub-folder-tile.hub-folder-drop-target {
    border-color: var(--folder-color);
    background: color-mix(in srgb, var(--folder-color) 16%, var(--bg-card));
    box-shadow: 0 0 0 2px var(--folder-color), 0 8px 28px rgba(0,0,0,0.4);
    transform: scale(1.02);
}
.hub-folder-tile.hub-folder-dragging {
    opacity: 0.55;
    transform: rotate(-1.5deg);
    cursor: grabbing;
}
.hub-folder-tile.hub-folder-reorder-target {
    border-color: var(--blue-bright);
    box-shadow: -3px 0 0 0 var(--blue-bright);
}

/* ── Folder cards rendered INLINE in the items grid (Mixed mode) ──
   Drive-style: top half is a colored "container" showing mini-thumbnails of
   the items inside the folder; bottom is a tight name strip with a folder icon.
   Double-click anywhere opens the folder.                                       */
.folder-grid-card {
    --folder-color: #4a9eff;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: default;
    position: relative;
    transition: all 0.15s ease;
    min-height: 180px;
}
.folder-grid-card:hover {
    border-color: color-mix(in srgb, var(--folder-color) 50%, var(--border));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.folder-grid-strip {
    height: 4px;
    background: var(--folder-color);
    flex-shrink: 0;
}

/* The "container" area showing mini-thumbnails of contained items */
.folder-grid-thumb-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--folder-color) 22%, var(--bg-base)) 0%,
            color-mix(in srgb, var(--folder-color) 12%, var(--bg-base)) 100%);
    cursor: pointer;
    min-height: 110px;
}
.folder-grid-thumb-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top left, color-mix(in srgb, var(--folder-color) 25%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--folder-color) 15%, transparent) 0%, transparent 60%);
    pointer-events: none;
}

/* Mini-preview of contained items (up to 3 + an overflow tile) */
.folder-grid-previews {
    position: relative;
    z-index: 1;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 14px 14px 28px;
    align-items: center;
}
.folder-grid-mini-thumb,
.folder-grid-mini-more {
    aspect-ratio: 1 / 1;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4),
                0 0 0 1px color-mix(in srgb, var(--folder-color) 30%, transparent);
    transition: transform 0.18s ease;
}
.folder-grid-card:hover .folder-grid-mini-thumb:nth-child(1) { transform: rotate(-3deg) translateX(-2px); }
.folder-grid-card:hover .folder-grid-mini-thumb:nth-child(2) { transform: translateY(-3px); }
.folder-grid-card:hover .folder-grid-mini-thumb:nth-child(3) { transform: rotate(3deg) translateX(2px); }
.folder-grid-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.folder-mini-glyph {
    font-size: 22px;
    filter: drop-shadow(0 0 6px currentColor);
}
.folder-grid-mini-more {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    background: color-mix(in srgb, var(--folder-color) 18%, var(--bg-card));
}

/* Empty folder — single big folder icon centered */
.folder-grid-empty-glyph {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--folder-color);
    gap: 4px;
    opacity: 0.7;
}
.folder-grid-empty-glyph svg {
    filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--folder-color) 40%, transparent));
}
.folder-grid-empty-glyph span {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.folder-grid-count-badge {
    position: absolute;
    bottom: 6px;
    right: 8px;
    background: rgba(0,0,0,0.62);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    z-index: 2;
}

/* Action buttons — top-right corner of the thumb area, hover-revealed */
.folder-grid-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    gap: 4px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.folder-grid-card:hover .folder-grid-actions { opacity: 1; }
.folder-grid-act {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.10);
    color: #fff;
    font-size: 12px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.folder-grid-act:hover {
    background: rgba(0,0,0,0.85);
    transform: translateY(-1px);
}
.folder-grid-act-delete:hover {
    background: rgba(204, 68, 68, 0.85);
    border-color: rgba(255, 100, 100, 0.4);
}

/* Bottom name strip */
.folder-grid-body {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.folder-grid-folder-icon {
    font-size: 16px;
    color: var(--folder-color);
    flex-shrink: 0;
}
.folder-grid-name {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 2px 4px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    outline: none;
    text-overflow: ellipsis;
}
.folder-grid-name:hover { border-color: rgba(255,255,255,0.08); }
.folder-grid-name:focus {
    border-color: var(--folder-color);
    background: var(--bg-base);
}

/* Drop hover state */
.folder-grid-card.folder-grid-drop-target {
    border-color: var(--folder-color);
    box-shadow: 0 0 0 2px var(--folder-color), 0 8px 28px rgba(0,0,0,0.4);
    transform: scale(1.02) translateY(-2px);
}
.folder-grid-card.folder-grid-drop-target .folder-grid-thumb-wrap {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--folder-color) 38%, var(--bg-base)) 0%,
            color-mix(in srgb, var(--folder-color) 28%, var(--bg-base)) 100%);
}

/* Strip-mode trash button (replaces ⋯ menu) */
.hub-folder-trash {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 14px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    border-radius: 6px;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.15s ease;
}
.hub-folder-tile:hover .hub-folder-trash { opacity: 1; }
.hub-folder-trash:hover {
    background: rgba(204, 68, 68, 0.18);
    border-color: rgba(204, 68, 68, 0.45);
    color: #ff6b6b;
}

/* Asset Library button in the filter bar */
.btn-asset-library {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.12s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.btn-asset-library:hover {
    border-color: var(--blue-mid);
    color: var(--blue-bright);
    background: var(--blue-glow);
}

/* ── Custom confirm dialog (replaces window.confirm) ── */
.confirm-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 18, 0.78);
    backdrop-filter: blur(6px);
    /* Must sit above other modals (share modal = 99998, upgrade = 99998).
       Confirm dialogs are user-blocking and must always win the stacking
       fight -- otherwise they appear behind their parent modal and the
       user can't see them. */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.confirm-dialog-overlay.open { opacity: 1; }

.confirm-dialog {
    width: 420px;
    max-width: 92vw;
    background: var(--bg-card);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-lg);
    padding: 26px 26px 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 80px rgba(21,96,168,0.18);
    text-align: center;
    transform: translateY(12px) scale(0.96);
    transition: transform 0.18s ease;
}
.confirm-dialog-overlay.open .confirm-dialog {
    transform: translateY(0) scale(1);
}
.confirm-dialog-danger {
    box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 60px rgba(204,68,68,0.18);
    border-color: rgba(204, 68, 68, 0.42);
}

.confirm-dialog-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--blue-glow);
    color: var(--blue-bright);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    border: 1px solid var(--blue-mid);
}
.confirm-dialog-danger .confirm-dialog-icon {
    background: rgba(204, 68, 68, 0.15);
    color: #ff7070;
    border-color: rgba(204, 68, 68, 0.5);
}

.confirm-dialog-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
}
.confirm-dialog-message {
    margin: 0 0 22px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Prompt-dialog flavour: same shell as confirm-dialog plus an input field. */
.confirm-dialog-prompt {
    text-align: left;
}
.prompt-dialog-input {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text-primary, #f0f6ff);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    margin: 8px 0 0;
    transition: border-color 0.15s, background 0.15s;
}
.prompt-dialog-input:focus {
    border-color: rgba(212, 168, 71, 0.7);
    background: rgba(0,0,0,0.55);
}
textarea.prompt-dialog-input {
    resize: vertical;
    min-height: 70px;
    line-height: 1.5;
}
.prompt-dialog-error {
    color: #e88787;
    font-size: 12px;
    margin: 8px 0 0;
    padding: 6px 10px;
    background: rgba(220, 80, 80, 0.08);
    border-left: 3px solid rgba(220, 80, 80, 0.5);
    border-radius: 4px;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}
.confirm-dialog-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 9px 22px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.12s ease;
    min-width: 110px;
}
.confirm-dialog-btn:hover {
    border-color: var(--border-active);
    background: var(--bg-card);
}
.confirm-dialog-confirm {
    background: var(--blue-mid);
    border-color: var(--blue-mid);
    color: #fff;
}
.confirm-dialog-confirm:hover {
    background: var(--blue-bright);
    border-color: var(--blue-bright);
}
.confirm-dialog-danger .confirm-dialog-confirm {
    background: #c44444;
    border-color: #c44444;
    color: #fff;
}
.confirm-dialog-danger .confirm-dialog-confirm:hover {
    background: #d65555;
    border-color: #d65555;
}

/* Layout-mode toggle: original simple "one-frame" look the user preferred
   -- a single rounded container border, both buttons sharing it, active
   button just gets a flat blue-glow fill (NO inset border). Container
   keeps overflow:hidden so the active button's color stops cleanly at
   the rounded corner of whichever side it's on. */
.hub-layout-toggle {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}
.hub-layout-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: inherit;
}
.hub-layout-btn:hover {
    background: var(--blue-glow);
    color: var(--blue-bright);
}
.hub-layout-btn.active {
    background: var(--blue-glow-strong);
    color: var(--blue-bright);
    /* Match the .filter-pill.active treatment -- a blue mid-tone border via
       inset shadow so the active button reads as "selected" the same way
       filter pills do, without changing the layout. */
    box-shadow: inset 0 0 0 1px var(--blue-mid);
}

/* Breadcrumb-as-drop-target when dragging an item */
.hub-breadcrumb-link.hub-breadcrumb-drop-target {
    border-color: var(--blue-bright);
    background: var(--blue-glow);
    color: var(--blue-bright);
    box-shadow: 0 0 0 2px var(--blue-bright), 0 4px 16px rgba(0,0,0,0.35);
    transform: scale(1.04);
}

/* Card right-click context menu (Move to folder, set thumbnail, etc.) */
.card-ctx-menu {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-md);
    min-width: 220px;
    box-shadow: 0 10px 38px rgba(0,0,0,0.6), 0 0 24px rgba(21,96,168,0.18);
    z-index: 9500;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.card-ctx-item {
    background: transparent;
    border: none;
    color: var(--text-primary);
    text-align: left;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s ease;
    --row-color: var(--blue-bright);
}
.card-ctx-item:hover {
    background: color-mix(in srgb, var(--row-color) 14%, transparent);
    color: var(--text-primary);
}
.card-ctx-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--row-color);
    flex-shrink: 0;
    box-shadow: 0 0 6px color-mix(in srgb, var(--row-color) 50%, transparent);
}
.card-ctx-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.card-ctx-empty {
    color: var(--text-muted);
    font-size: 12px;
    padding: 12px 14px;
    text-align: center;
}

/* Item card drag-drop visuals (used in flat items grid) — Trello-style.
   The source card becomes a quiet "ghost slot" (dashed outline, low opacity,
   NO transform) so the grid layout doesn't jiggle while you're dragging.
   The actual cursor follower is a tilted, shadow-heavy clone fed to
   `dataTransfer.setDragImage()` (see attachCardDragDrop in main.js); that
   clone uses `.content-card-drag-clone` below. Drop targets push themselves
   aside with a smooth translate + a thick gold insertion bar so the user
   sees a real GAP open up where the card will land. */
.content-card.card-dragging {
    opacity: 0.32;
    transform: none;
    cursor: grabbing;
    background: rgba(255,255,255,0.02);
    border-style: dashed;
    border-color: rgba(212,168,71,0.45) !important;
    box-shadow: none !important;
}
.content-card.card-dragging:hover {
    transform: none;            /* override base hover translateY(-3px) */
    box-shadow: none;
}
.content-card.card-drag-over { border-color: var(--blue-bright) !important; }
.content-card.card-drag-over-above {
    transform: translateY(8px);
    box-shadow: 0 -4px 0 0 #d4a847, 0 -10px 14px rgba(212,168,71,0.25);
}
.content-card.card-drag-over-below {
    transform: translateY(-8px);
    box-shadow: 0 4px 0 0 #d4a847, 0 10px 14px rgba(212,168,71,0.25);
}
.content-card.card-flying-out {
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
}

/* Off-screen clone built in dragstart and handed to setDragImage(). The
   browser snapshots it once for the cursor follower, so position:fixed +
   left:-9999px keeps it invisible; only the snapshot matters. */
.content-card-drag-clone {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: 240px;
    pointer-events: none;
    transform: rotate(-3deg) scale(1.04);
    box-shadow:
        0 18px 36px rgba(0,0,0,0.55),
        0 0 0 1px rgba(212,168,71,0.55),
        0 0 22px rgba(212,168,71,0.25);
    border-radius: var(--radius-lg);
    opacity: 1;
    z-index: 999999;
}

/* Smooth reflow when a neighbour gets the drag-over translate. Limited to
   transform/box-shadow so the existing :hover transition isn't disturbed. */
.content-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.15s ease, background-color 0.15s ease; }

/* ── Project Files-tab right-click context menu ───────────────────────
   Right-click on empty space in the Files tab opens a small floating menu
   listing every content type. Click a type → opens the Add Content modal
   pre-selected to that type (uses window.openAddContentForCanvas, which is
   misnamed but does the right thing in both Files + Canvas mode). */
.proj-ctx-menu {
    position: fixed;
    z-index: 99996;
    min-width: 240px;
    background: rgba(13, 18, 32, 0.97);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 10px 10px 12px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    display: none;            /* shown by JS via .open */
    font-family: 'Inter', sans-serif;
}
.proj-ctx-menu.open { display: block; animation: projCtxFadeIn 0.12s ease-out; }
@keyframes projCtxFadeIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }

.proj-ctx-label {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 6px 8px;
}
.proj-ctx-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.proj-ctx-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 8px 14px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
}
.proj-ctx-btn:hover {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
.proj-ctx-strip {
    position: absolute;
    left: 6px; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 2px;
    background: var(--type-color, #6e90b8);
}


/* ============================================================
   GENERIC IMAGE DROP-ZONE FEEDBACK
   The .drag-over class is toggled by attachImageDropZone() while a
   file is hovering over an element. Each consumer can also add their
   own visuals; this is the baseline.
   ============================================================ */
.cs-portrait.drag-over,
.gds-img-empty-zone.drag-over,
.item-hero-icon.drag-over,
.mech-hero-icon.drag-over,
.level-canvas-wrap.drag-over,
.gds-gallery-block.drag-over {
    outline: 2px dashed var(--blue-bright);
    outline-offset: -4px;
    background: rgba(21, 96, 168, 0.08);
    transition: outline-color 0.12s ease;
}


/* ============================================================
   ASSET LIBRARY
   ============================================================ */
.asset-lib-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 18, 0.88);
    backdrop-filter: blur(6px);
    z-index: 1300;
    display: none;
    align-items: center;
    justify-content: center;
}
.asset-lib-overlay.open { display: flex; animation: fadeIn 0.2s ease; }

.asset-lib-panel {
    width: 1080px;
    max-width: 95vw;
    height: 86vh;
    background: var(--bg-card);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-lg);
    box-shadow: 0 0 80px rgba(21,96,168,0.2), 0 24px 80px rgba(0,0,0,0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: panelIn 0.22s ease;
}

.asset-lib-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-sidebar);
    flex-shrink: 0;
}
.asset-lib-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.asset-lib-sub {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-muted);
}
.asset-lib-close {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 14px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
}
.asset-lib-close:hover {
    color: var(--text-primary);
    background: var(--bg-surface);
    border-color: var(--border-active);
}

.asset-lib-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    flex-shrink: 0;
}
.asset-lib-search {
    flex: 0 0 280px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 7px 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    outline: none;
}
.asset-lib-search:focus { border-color: var(--blue-mid); }
.asset-lib-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}
.asset-lib-fbtn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.asset-lib-fbtn:hover {
    border-color: var(--blue-mid);
    color: var(--text-primary);
    background: var(--blue-glow);
}
.asset-lib-fbtn.active {
    border-color: var(--blue-mid);
    background: var(--blue-glow);
    color: var(--blue-bright);
}

.asset-lib-grid {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: min-content;     /* let each row hug its content height */
    align-items: start;              /* stop tiles from stretching to a tiny row track */
    gap: 14px;
    align-content: start;
}
.asset-lib-empty {
    grid-column: 1/-1;
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.asset-lib-stats {
    padding: 8px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-sidebar);
    color: var(--text-muted);
    font-size: 11px;
    flex-shrink: 0;
}

.asset-tile {
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.15s ease;
}
.asset-tile:hover {
    border-color: var(--border-active);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.asset-tile.asset-orphan { border-style: dashed; opacity: 0.85; }

.asset-tile-thumb {
    width: 100%;
    height: 140px;            /* explicit height — aspect-ratio in flex column was unreliable */
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}
.asset-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.asset-tile-glyph {
    font-size: 42px;
    opacity: 0.6;
}

.asset-tile-info {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    flex: 1;
}
.asset-tile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}
.asset-tile-meta {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 11px;
}
.asset-tile-usage {
    margin-top: 2px;
}
.asset-usage-pill {
    display: inline-block;
    background: var(--blue-glow);
    color: var(--blue-bright);
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 500;
}
.asset-usage-pill.asset-usage-orphan {
    background: rgba(204,119,34,0.15);
    color: #d4881e;
}
.asset-tile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 18px;
}
.asset-tag {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 4px;
}
.asset-tile-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.asset-tile-actions .asset-tile-btn {
    flex: 1 1 calc(50% - 2px);
    min-width: 0;
}
.asset-tile-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.asset-tile-btn:hover {
    border-color: var(--blue-mid);
    background: var(--blue-glow);
    color: var(--blue-bright);
}
.asset-tile-btn-danger:hover {
    border-color: rgba(204,68,68,0.5);
    background: rgba(204,68,68,0.12);
    color: #ff6b6b;
}

.asset-lib-side {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 320px;
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    z-index: 5;
}
.asset-lib-side.visible { transform: translateX(0); }
.asset-lib-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.asset-lib-side-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 4px;
}
.asset-lib-side-close:hover { color: var(--text-primary); background: var(--bg-card); }
.asset-lib-side-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.asset-usage-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--type-color, var(--text-secondary));
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 12px;
    transition: all 0.12s ease;
}
.asset-usage-row:hover {
    border-color: var(--type-color, var(--blue-mid));
    background: var(--bg-surface);
}
.asset-usage-row span:first-child {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.asset-usage-type {
    color: var(--text-muted);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}


/* ============================================================
   APP TOAST (generic transient notification)
   ============================================================ */
.app-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-md);
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 24px rgba(21,96,168,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 9999;
    max-width: 480px;
    text-align: center;
}
.app-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.app-toast-success {
    border-color: rgba(74,171,109,0.5);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 24px rgba(74,171,109,0.18);
}
.app-toast-error {
    border-color: rgba(204,68,68,0.5);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 24px rgba(204,68,68,0.2);
}

/* Comment count badge on hub cards (Team+) */
.content-card-comment-badge {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(212, 168, 71, 0.15);
    border: 1px solid rgba(212, 168, 71, 0.4);
    color: #d4a847;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    pointer-events: none;
}

/* ── Comments side rail (Team tier — §5.3.7 Phase D) ───────────────
   Auto-shows when an item sheet is open on a Team+ project. Two states:
   collapsed tab + expanded panel.

   POSITIONING (founder request 2026-05-07): the rail attaches INSIDE
   the active sheet's panel so it slides out from the sheet's right
   edge, not the viewport's. JS toggles `.rail-in-sheet` on the rail;
   CSS picks position:absolute (in-sheet) vs position:fixed (fallback). */
.item-comments-rail {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 99997;     /* below confirmDialog (100000), share modal (99998), upgrade modal (99998) */
    display: none;      /* shown when .visible is added */
    pointer-events: none;
}
.item-comments-rail.visible { display: block; }
/* Rail attached to a sheet panel: tab pokes OUT to the right of the
   sheet's border (tab is OUTSIDE), and when expanded the panel extends
   FURTHER RIGHT (away from the sheet -- so the sheet content stays
   uncovered). Founder phrasing 2026-05-07: "an extension of the sheet
   to the right". The PANEL is full-height of the sheet (and resizes
   with it -- it's anchored top:0 / bottom:0 of the rail container,
   which itself spans the sheet's height). */
.item-comments-rail.rail-in-sheet {
    position: absolute;
    top: 0;
    bottom: 0;
    right: auto;
    /* Anchor at the sheet's RIGHT edge; the tab sits flush to that
       edge, OUTSIDE the sheet's border. Spans the FULL height of the
       sheet so the expanded panel can match its height. */
    left: 100%;
    transform: none;
    z-index: 50;        /* above sheet content, below sheet's own modals */
    width: 38px;        /* base width = the tab; expanded panel positions
                           absolutely outside this */
    /* Defense in depth: explicit height: 100% makes child `height: 100%`
       work too. Without this, top/bottom might be treated as
       "indefinite" by % children. */
    height: 100%;
}
.item-comments-rail.rail-in-sheet .comments-rail-toggle {
    /* Tab is on the LEFT side of the rail (touching the sheet's right
       border) and vertically centred. Rounded on the OUTSIDE (right). */
    right: auto;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0 8px 8px 0;
}
.item-comments-rail.rail-in-sheet .comments-rail-panel {
    /* Panel sits to the RIGHT of the tab, FULL height of the sheet.
       Sliding animation: hidden behind the tab, slides RIGHT into view.

       2026-05-08 height fix: `height: 100%` failed because the parent
       (rail) has intrinsic height from top:0/bottom:0 -- some browsers
       don't treat that as "definite" for % children. Using `height:
       auto; top:0; bottom:0` is unambiguous: the box fills the rail
       container vertically. Plus `max-height: none` to defeat the
       base rule's `min(80vh, 640px)` cap.

       2026-05-08 click-blocker fix: when collapsed, the panel uses
       `transform: translateX(-110%)` to hide -- but the rail itself sits
       at `left: 100%` of the sheet (just OUTSIDE the right edge), so the
       -110% translate moves the invisible panel BACK INTO the sheet area,
       directly on top of the header buttons (Save / Close / Backlinks /
       toolbar). Even at opacity:0, pointer-events:auto means the panel
       eats every click. Fix: pointer-events:none in the hidden state,
       only re-enabled when .expanded -- so the buttons it was covering
       become clickable again. */
    right: auto;
    left: 38px;
    top: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 10px 10px 32px rgba(0,0,0,0.5);
    transform: translateX(-110%);   /* hidden state, no Y-translate now */
    opacity: 0;
    pointer-events: none;
}
.item-comments-rail.rail-in-sheet.expanded .comments-rail-panel {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Sheet panels need (a) position:relative as the rail's positioning
   context AND (b) overflow:visible WHILE the rail is inside, so the
   rail (which extends OUTSIDE the panel's right edge) doesn't get
   clipped by the panel's overflow:hidden. The .has-comments-rail class
   is added by JS only when the rail is currently parented in the
   panel; removed when it leaves. */
.char-sheet-panel,
.item-sheet-panel,
.mech-sheet-panel,
.quest-sheet-panel,
.gdd-sheet-panel,
.note-editor-panel {
    position: relative;
}
.char-sheet-panel.has-comments-rail,
.item-sheet-panel.has-comments-rail,
.mech-sheet-panel.has-comments-rail,
.quest-sheet-panel.has-comments-rail,
.gdd-sheet-panel.has-comments-rail,
.note-editor-panel.has-comments-rail {
    overflow: visible;
}
.comments-rail-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    min-height: 100px;
    /* Solid, dark fill (was translucent gold which read as "transparent
       and possibly broken" per founder feedback). Gold accents stay on
       the icon + count + border. */
    background: linear-gradient(180deg, #1a1f33 0%, #141826 100%);
    border: 1px solid rgba(212,168,71,0.5);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: #d4a847;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 4px;
    transition: background 0.15s, border-color 0.15s;
    box-shadow: -2px 0 12px rgba(0,0,0,0.3);
}
.comments-rail-toggle:hover {
    background: linear-gradient(180deg, #232a44 0%, #1c2236 100%);
    border-color: rgba(212,168,71,0.85);
}
.comments-rail-toggle-icon { font-size: 16px; }
.comments-rail-toggle-count {
    font-size: 11px;
    font-weight: 700;
    background: rgba(212,168,71,0.3);
    color: #f0f6ff;
    border-radius: 10px;
    padding: 2px 6px;
    min-width: 20px;
    text-align: center;
}
.comments-rail-toggle-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 4px;
}

.comments-rail-panel {
    position: absolute;
    top: 50%;
    right: 38px;     /* sit beside the toggle tab */
    transform: translateY(-50%) translateX(110%);
    width: 340px;
    max-width: calc(100vw - 60px);
    height: min(80vh, 640px);
    background: linear-gradient(180deg, #1a1f33 0%, #141826 100%);
    border: 1px solid rgba(212,168,71,0.35);
    border-radius: 12px 0 0 12px;
    box-shadow: -10px 10px 40px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    transition: transform 0.22s ease, opacity 0.18s ease;
    opacity: 0;
}
.item-comments-rail.expanded .comments-rail-panel {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
}
.comments-rail-header {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.comments-rail-title {
    font-size: 14px;
    font-weight: 700;
    color: #f0f6ff;
}
.comments-rail-subtitle {
    display: block;
    font-size: 11px;
    opacity: 0.7;
    margin-top: 2px;
    max-width: 240px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.comments-rail-close {
    background: transparent;
    border: none;
    color: #98a0b6;
    font-size: 16px;
    cursor: pointer;
}
.comments-rail-close:hover { color: #f0f6ff; }

.comments-rail-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.comments-empty {
    text-align: center;
    padding: 40px 16px;
    color: #98a0b6;
    font-size: 12px;
    line-height: 1.5;
}

.comment-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}
.comment-card.comment-reply {
    margin-left: 24px;
    background: rgba(255,255,255,0.02);
    border-left: 2px solid rgba(212,168,71,0.4);
}
.comment-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.comment-content { flex: 1; min-width: 0; }
.comment-meta {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    margin-bottom: 4px;
}
.comment-author { color: #f0f6ff; font-weight: 600; }
.comment-time { color: #98a0b6; }
.comment-edited { color: #98a0b6; font-style: italic; }
.comment-body {
    color: #e0e6f4;
    font-size: 13px;
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.comment-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.comment-action {
    background: transparent;
    border: none;
    color: #98a0b6;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: color 0.12s;
}
.comment-action:hover { color: #d4a847; }
.comment-action-danger:hover { color: #e88787; }

.comments-rail-composer {
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.comments-rail-reply-banner {
    background: rgba(212,168,71,0.1);
    border: 1px solid rgba(212,168,71,0.3);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    color: #d4a847;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.comments-rail-reply-banner button {
    background: transparent;
    border: none;
    color: #d4a847;
    font-size: 11px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.comments-rail-input {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 8px 10px;
    color: #f0f6ff;
    font-size: 13px;
    font-family: inherit;
    line-height: 1.4;
    outline: none;
    /* Contenteditable composer — auto-grows up to 200px then scrolls. */
    min-height: 50px;
    max-height: 200px;
    overflow-y: auto;
    word-wrap: break-word;
    cursor: text;
}
.comments-rail-input:focus { border-color: rgba(212,168,71,0.55); }
/* Placeholder for the contenteditable — only shown when empty.  */
.comments-rail-input:empty::before {
    content: attr(data-placeholder);
    color: #98a0b6;
    pointer-events: none;
    white-space: pre-line;
}
.comments-rail-input .mention-chip {
    /* Inherits from the global .mention-chip styling (set elsewhere). */
    cursor: pointer;
}
.comments-rail-composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.comments-rail-hint { font-size: 10px; color: #98a0b6; opacity: 0.7; }
.comments-rail-send {
    background: #d4a847;
    color: #1a1a1a;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.15s;
}
.comments-rail-send:hover:not(:disabled) { transform: translateY(-1px); }
.comments-rail-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Viewer mode: hide the composer (viewers can read but not comment).
   Add a small "read-only" hint at the bottom of the body instead. */
.item-comments-rail.read-only .comments-rail-composer { display: none; }
.item-comments-rail.read-only .comments-rail-body::after {
    content: "👁  You're a viewer — comments are read-only.";
    display: block;
    text-align: center;
    color: #98a0b6;
    font-size: 11px;
    padding: 12px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    margin-top: 12px;
}

/* ── Project header: Activity button (Team+) ──────────────────────── */
.proj-activity-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.18);
    color: #eaecf2;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    /* Spacing handled by the parent .proj-member-strip's gap now -- the
       previous margin-left double-stacked with the parent gap and made
       this button feel detached from the avatar. */
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.proj-activity-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.35);
    transform: translateY(-1px);
}
.proj-activity-icon { font-size: 12px; }

/* ── Activity feed slide-in panel ──────────────────────────────────── */
.activity-panel {
    position: fixed; inset: 0;
    z-index: 99997;
    pointer-events: none;
    visibility: hidden;
}
.activity-panel.open {
    visibility: visible;
    pointer-events: auto;
}
.activity-panel-overlay {
    position: absolute; inset: 0;
    background: rgba(4,8,18,0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.18s ease;
}
.activity-panel.open .activity-panel-overlay { opacity: 1; }
.activity-panel-content {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 420px;
    max-width: calc(100vw - 40px);
    background: linear-gradient(180deg, #1a1f33 0%, #141826 100%);
    border-left: 1px solid rgba(212,168,71,0.3);
    box-shadow: -16px 0 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease;
}
.activity-panel.open .activity-panel-content {
    transform: translateX(0);
}
.activity-panel-header {
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.activity-panel-title { font-size: 16px; font-weight: 700; color: #f0f6ff; margin: 0; }
.activity-panel-sub { font-size: 11px; opacity: 0.7; margin: 2px 0 0; }
.activity-panel-close {
    background: transparent;
    border: none;
    color: #98a0b6;
    font-size: 16px;
    cursor: pointer;
}
.activity-panel-close:hover { color: #f0f6ff; }

.activity-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}
.activity-loading,
.activity-empty {
    text-align: center;
    padding: 40px 16px;
    color: #98a0b6;
    font-size: 12px;
    line-height: 1.5;
}
.activity-section { margin-bottom: 16px; }
.activity-section-label {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #1a1f33 75%, transparent);
    padding: 8px 6px 6px;
    font-size: 10px;
    font-weight: 700;
    color: #98a0b6;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 4px;
}
.activity-row {
    display: flex;
    gap: 10px;
    padding: 10px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    align-items: flex-start;
}
.activity-row:last-child { border-bottom: none; }
.activity-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.activity-text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #c5cbdb;
}
.activity-line strong { color: #f0f6ff; font-weight: 700; }
.activity-target {
    background: rgba(212,168,71,0.12);
    border: 1px solid rgba(212,168,71,0.3);
    color: #d4a847;
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 600;
    margin-left: 2px;
}
.activity-time {
    font-size: 10px;
    color: #98a0b6;
    margin-top: 2px;
}

/* ── Item authorship footer inside open sheets (§5.3.7) ──────────────
   Moved here from the hub-card corner per founder request 2026-05-07.
   Sits at the bottom of the sheet body so it only appears when the
   user scrolls to the end. */
.item-authorship-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 4px 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    font-size: 12px;
}
.item-authorship-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.item-authorship-text {
    color: #c5cbdb;             /* clearly readable, not faint */
    line-height: 1.4;
}
.item-authorship-text strong {
    color: #f0f6ff;
    font-weight: 700;
}

/* ── Viewer read-only mode (§5.3.7) ─────────────────────────────────
   Per founder request 2026-05-07: don't HIDE the action buttons --
   keep them visible (so the project doesn't feel crippled) and
   intercept clicks via JS to show a friendly "viewer access" modal
   (mirrors the upgrade-modal UX). Only the in-place editing of text
   fields stays soft-disabled here so a viewer can't ghost-type
   changes that get silently rejected by the server. */
body[data-project-role="viewer"] [contenteditable="true"] {
    pointer-events: none;
    user-select: text;     /* let them at least select-and-copy */
}

/* Viewer-blocked modal (built by showViewerBlockedModal()). Same
   visual language as the upgrade modal so the user immediately
   recognises "this is a permission gate", not a crash. */
.viewer-blocked-overlay {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(4, 8, 18, 0.78);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.viewer-blocked-card {
    background: linear-gradient(180deg, #1a1f33 0%, #141826 100%);
    border: 1px solid rgba(74, 158, 255, 0.45);
    border-radius: 14px;
    width: min(440px, 100%);
    padding: 20px 24px 22px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    position: relative;
    overflow: hidden;
}
.viewer-blocked-accent-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, #4a9eff, transparent);
}
.viewer-blocked-icon {
    font-size: 30px;
    margin: 6px 0 8px;
}
.viewer-blocked-title {
    font-size: 18px; font-weight: 700;
    color: #f0f6ff;
    margin: 0 0 8px;
}
.viewer-blocked-message {
    font-size: 13px; line-height: 1.55;
    color: #c5cbdb;
    margin: 0 0 14px;
}
.viewer-blocked-message strong { color: #f0f6ff; }
.viewer-blocked-message em {
    color: #d4a847; font-style: normal; font-weight: 700;
}
.viewer-blocked-suggestion {
    background: rgba(74, 158, 255, 0.08);
    border-left: 3px solid rgba(74, 158, 255, 0.5);
    color: #b8cdf0;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    margin-bottom: 16px;
}
.viewer-blocked-suggestion strong { color: #f0f6ff; }
.viewer-blocked-actions {
    display: flex; justify-content: center; gap: 10px;
}
.viewer-blocked-close {
    background: rgba(74, 158, 255, 0.18);
    border: 1px solid rgba(74, 158, 255, 0.55);
    color: #4a9eff;
    border-radius: 8px;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.viewer-blocked-close:hover {
    background: rgba(74, 158, 255, 0.3);
    transform: translateY(-1px);
}
/* Read-only banner above the header */
.project-readonly-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(74, 158, 255, 0.08);
    border: 1px solid rgba(74, 158, 255, 0.25);
    border-left: 3px solid #4a9eff;
    color: #b8cdf0;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 8px 0 14px;
    font-size: 12px;
    line-height: 1.5;
}
.project-readonly-banner strong { color: #f0f6ff; }
.project-readonly-banner em { color: #d4a847; font-style: normal; font-weight: 600; }
.project-readonly-icon {
    font-size: 18px;
    flex-shrink: 0;
}
.project-readonly-text { flex: 1; }

/* ── Project member strip (Package §5.3.7) ────────────────────────────
   Avatars + Invite button beside the project title in the project
   detail header. Inline with the title; wraps to a second line on
   narrow viewports. */
.proj-member-strip {
    display: flex;
    align-items: center;
    /* Was gap:10px / margin-left:14px / flex-shrink:0 — the strip stacked
       BELOW the title (because <h1> is block-level above it) and felt jammed
       between title and date on its own row. Spacing is now symmetric:
       same vertical breathing room ABOVE the strip (between title and
       avatar) as BELOW it (between buttons and the "Created" date). */
    gap: 14px;
    margin: 14px 0 12px;
    flex-wrap: wrap;
}
/* Push the "Created..." date down a touch so it doesn't crowd the strip. */
#space-project-detail .space-subtitle { margin-top: 2px; }
.proj-member-avatars {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 4px;                   /* slight separation, NOT overlap */
}
.proj-member-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #d4a847;
    background: rgba(212,168,71,0.18);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    transition: transform 0.15s;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.proj-member-avatar:hover {
    transform: translateY(-2px);
    z-index: 5;
}
.proj-member-avatar-letter { line-height: 1; }
.proj-member-avatar-more {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: var(--text-muted);
    font-size: 11px;
}
.proj-member-invite-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    background: rgba(212,168,71,0.12);
    color: #d4a847;
    border: 1px solid rgba(212,168,71,0.45);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.proj-member-invite-btn:hover {
    background: rgba(212,168,71,0.22);
    border-color: rgba(212,168,71,0.7);
    transform: translateY(-1px);
}
.proj-member-invite-plus {
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}
.proj-member-invite-label { letter-spacing: 0.04em; }

/* ── Share modal ────────────────────────────────────────────────────── */
.share-modal-overlay {
    position: fixed; inset: 0; z-index: 99998;
    background: rgba(0,0,0,0.78);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: shareFadeIn 0.18s ease-out;
}
@keyframes shareFadeIn { from { opacity: 0; } to { opacity: 1; } }

.share-modal {
    background: linear-gradient(180deg, #1a1f33 0%, #141826 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-top: 3px solid #d4a847;
    border-radius: 14px;
    width: min(560px, 100%);
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    animation: shareSlideIn 0.22s ease-out;
}
@keyframes shareSlideIn {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

.share-modal-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 22px 24px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.share-modal-eyebrow {
    font-size: 11px; opacity: 0.55;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: #d4a847;
    margin-bottom: 4px;
}
.share-modal-title {
    font-size: 20px; font-weight: 700;
    color: #f0f6ff;
    margin: 0;
    word-break: break-word;
}
.share-modal-close {
    background: transparent; border: none;
    color: rgba(255,255,255,0.6); cursor: pointer;
    font-size: 18px; padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.share-modal-close:hover {
    color: #f0f6ff;
    background: rgba(255,255,255,0.06);
}
.share-modal-body {
    overflow-y: auto;
    padding: 18px 24px 22px;
}
.share-section + .share-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.share-section-label {
    font-size: 11px; font-weight: 700;
    color: var(--text-muted, #98a0b6);
    text-transform: uppercase; letter-spacing: 0.07em;
    margin-bottom: 10px;
}
.share-non-owner-note {
    font-size: 12px; opacity: 0.7;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.12);
    padding: 12px 14px;
    border-radius: 8px;
    text-align: center;
}
/* Leave-project button (non-owner only). Subdued, with red on hover so
   the user knows it's destructive but isn't visually loud about it. */
.share-leave-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    background: transparent;
    border: 1px solid rgba(220, 80, 80, 0.35);
    color: #e88787;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.share-leave-btn:hover {
    background: rgba(220, 80, 80, 0.08);
    border-color: rgba(220, 80, 80, 0.6);
}
.share-leave-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Members list */
.share-members-list { display: flex; flex-direction: column; gap: 8px; }
.share-member-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
}
.share-member-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid #d4a847;
    font-size: 13px;
    font-weight: 700;
}
.share-member-email {
    font-size: 13px;
    color: #eaecf2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-member-email em { opacity: 0.55; font-style: italic; font-weight: 500; }
.share-role-pill {
    /* Bigger + more breathing room. The previous 10px / 0.08em / 2px-9px
       made the text look squished, especially on words like "VIEWER".  */
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    border: 1px solid;
    border-radius: 999px;
    padding: 4px 12px;
    background: transparent;
    line-height: 1.2;
    flex-shrink: 0;
}
.share-member-actions { display: flex; gap: 6px; align-items: center; }
.share-role-select {
    /* Native <select> dropdowns are hard to fully theme on every OS, so we
       at least force the *control* (closed state) to match. The OPTIONS in
       the open menu inherit dark-mode rendering on most platforms via
       color-scheme. */
    background-color: rgba(0,0,0,0.4);
    color: #eaecf2;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 4px 28px 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Custom chevron arrow (since appearance:none removes the native one). */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'><path fill='%23d4a847' d='M0 0l4 6 4-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    color-scheme: dark;
    transition: border-color 0.15s, background-color 0.15s;
}
.share-role-select:hover  { border-color: rgba(212, 168, 71, 0.6); }
.share-role-select:focus  { border-color: rgba(212, 168, 71, 0.85); }
.share-role-select option {
    background: #1a1f33;
    color: #eaecf2;
}
.share-remove-btn {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid rgba(220,80,80,0.4);
    color: #e88787;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.share-remove-btn:hover {
    background: rgba(220,80,80,0.12);
    border-color: rgba(220,80,80,0.7);
}

/* Pending invitations */
.share-pending-list { display: flex; flex-direction: column; gap: 8px; }
.share-pending-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px 12px;
    gap: 10px;
}
.share-pending-info { flex: 1; min-width: 0; }
.share-pending-email {
    font-size: 13px;
    color: #f0f6ff;
    font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-pending-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-faint, #6e7790);
}
.share-pending-meta .share-role-pill {
    color: #4a9eff; border-color: #4a9eff;
}
.share-pending-actions { display: flex; gap: 6px; }
.share-pending-copy {
    background: rgba(212,168,71,0.1);
    color: #d4a847;
    border: 1px solid rgba(212,168,71,0.4);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: background 0.15s;
}
.share-pending-copy:hover { background: rgba(212,168,71,0.2); }
.share-pending-revoke {
    width: 28px; height: 28px;
    background: transparent;
    border: 1px solid rgba(220,80,80,0.4);
    color: #e88787;
    border-radius: 6px;
    cursor: pointer;
}
.share-pending-revoke:hover { background: rgba(220,80,80,0.12); }

/* Invite form */
.share-invite-row {
    display: grid;
    grid-template-columns: 1fr 110px auto;
    gap: 8px;
}
.share-invite-email,
.share-invite-role {
    background-color: rgba(0,0,0,0.4);
    color: #f0f6ff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
    color-scheme: dark;
}
.share-invite-email:focus,
.share-invite-role:focus { border-color: rgba(212,168,71,0.6); }
/* Same chevron treatment as .share-role-select for the invite-form select */
.share-invite-role {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 30px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23d4a847' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.share-invite-role option {
    background: #1a1f33;
    color: #eaecf2;
}
.share-invite-btn {
    background: #d4a847;
    color: #1a1a1a;
    border: none;
    border-radius: 6px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.15s;
    white-space: nowrap;
}
.share-invite-btn:hover:not(:disabled) { transform: translateY(-1px); }
.share-invite-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.share-invite-hint {
    font-size: 11px;
    color: var(--text-faint, #6e7790);
    line-height: 1.55;
    margin-top: 8px;
}
.share-invite-result { margin-top: 12px; }
.share-link-row {
    display: flex; gap: 8px; align-items: stretch;
}
.share-link-url {
    flex: 1;
    background: rgba(0,0,0,0.4);
    color: #f0f6ff;
    border: 1px solid rgba(212,168,71,0.4);
    border-radius: 6px;
    padding: 9px 12px;
    font-family: 'SF Mono', 'Monaco', monospace;
    font-size: 11px;
    outline: none;
}
.share-link-copy {
    background: #d4a847;
    color: #1a1a1a;
    border: none;
    border-radius: 6px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.share-link-success {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(80, 200, 120, 0.08);
    border-left: 3px solid rgba(80, 200, 120, 0.5);
    color: #7ad88f;
    font-size: 11px;
}
.share-error {
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(220,80,80,0.08);
    border-left: 3px solid rgba(220,80,80,0.5);
    color: #e88787;
    font-size: 12px;
}
.share-loading,
.share-empty {
    font-size: 12px;
    color: var(--text-faint, #6e7790);
    font-style: italic;
    text-align: center;
    padding: 14px;
}