/* -- Creation Studio Styles -- */

/* ============================================================
   Voxel Editor (AAA overhaul)
   Cyan/teal studio identity layered on the shared --gf-* tokens.
   ============================================================ */

:root {
    --vox-accent: #5ad6ff;
    --vox-accent-soft: rgba(90, 214, 255, 0.16);
    --vox-accent-glow: rgba(90, 214, 255, 0.40);
    --vox-teal: #4aa090;
    --vox-panel: rgba(22, 25, 32, 0.96);
    --vox-panel-2: rgba(28, 32, 42, 0.92);
    --vox-line: rgba(120, 200, 255, 0.12);
    --vox-line-soft: rgba(255, 255, 255, 0.06);
    --vox-ink: #d6dbe6;
    --vox-ink-dim: #8a93a6;
    --vox-ink-faint: #6f7a90;
}

.voxel-editor-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
    background: linear-gradient(160deg, #181b22 0%, #14161b 100%);
    color: var(--vox-ink);
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
}

.gf-icon { display: block; flex: 0 0 auto; }

/* -- App bar -- */
.vox-appbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    flex-shrink: 0;
    background: var(--vox-panel);
    border-bottom: 1px solid var(--vox-line);
    box-shadow: 0 1px 0 rgba(120, 200, 255, 0.05);
}
.vox-appbar-identity { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
.vox-appbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.vox-state-dot {
    width: 9px; height: 9px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--vox-teal);
    box-shadow: 0 0 6px rgba(74, 160, 144, 0.6);
    transition: background 0.2s, box-shadow 0.2s;
}
.vox-state-dot.vox-dirty {
    background: #e0b84a;
    box-shadow: 0 0 7px rgba(224, 184, 74, 0.7);
}

.vox-name-input {
    flex: 1; min-width: 80px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--vox-line);
    border-radius: var(--gf-radius-sm, 4px);
    color: #e6f2f6; font-size: 13px; font-weight: 600;
}
.vox-sub-input {
    width: 108px; flex-shrink: 0;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--vox-line);
    border-radius: var(--gf-radius-sm, 4px);
    color: var(--vox-ink); font-size: 12px;
}
.vox-name-input:focus, .vox-sub-input:focus, .vox-select:focus, .vox-dim-input:focus {
    outline: none; border-color: var(--vox-accent); box-shadow: 0 0 0 1px var(--vox-accent-soft);
}

.vox-select {
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--vox-line);
    border-radius: var(--gf-radius-sm, 4px);
    color: var(--vox-ink); font-size: 12px;
    cursor: pointer;
}

.vox-dims-badge {
    flex-shrink: 0;
    font-family: var(--gf-mono, 'Consolas', monospace);
    font-size: 11px; color: var(--vox-accent);
    background: var(--vox-accent-soft);
    border: 1px solid var(--vox-line);
    border-radius: 10px;
    padding: 2px 9px;
}

/* -- Buttons (icon + optional label) -- */
.vox-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 5px 9px;
    background: linear-gradient(180deg, #353c48 0%, #2b313c 100%);
    border: 1px solid #444c5c;
    border-radius: var(--gf-radius-sm, 4px);
    color: var(--vox-ink);
    cursor: pointer;
    font-size: 11px; font-family: inherit;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, color 0.12s;
}
.vox-btn:hover { background: #434b5b; border-color: #5a647a; color: #fff; }
.vox-btn:active { transform: translateY(0.5px); }
.vox-btn:disabled { opacity: 0.5; cursor: default; }
.vox-btn .gf-icon { width: 16px; height: 16px; }
.vox-btn-label { white-space: nowrap; }
.vox-btn-sm { padding: 4px 6px; font-size: 10px; gap: 3px; }
.vox-btn-sm .gf-icon { width: 15px; height: 15px; }

.vox-btn.active, .vox-toggle.active {
    background: linear-gradient(180deg, #4f9fd6 0%, #3a78c0 100%);
    border-color: var(--vox-accent); color: #fff;
    box-shadow: 0 0 8px var(--vox-accent-glow);
}

.vox-btn-primary {
    background: linear-gradient(180deg, #2f7d63 0%, #245c4c 100%);
    border-color: #4aa090; color: #d8fff4; font-weight: 600;
}
.vox-btn-primary:hover { background: linear-gradient(180deg, #38967a 0%, #2c6f5c 100%); color: #fff; }
.vox-btn-primary.vox-save-ok { background: #2f8d4f; border-color: #46c06a; }
.vox-btn-primary.vox-save-fail { background: #8d3030; border-color: #c04a4a; }

.vox-btn-preview {
    background: linear-gradient(180deg, #2c5a52 0%, #224640 100%);
    border-color: #4aa090; color: #cdfdf2;
    text-shadow: 0 0 8px rgba(120, 240, 220, 0.4);
}
.vox-btn-preview:hover { background: #357066; }
.vox-btn-submit {
    background: linear-gradient(180deg, #4a3f6a 0%, #392f55 100%);
    border-color: #7a68b0; color: #e6dcff;
}
.vox-btn-submit:hover { background: #5a4d80; }

/* -- Body: tool rail | canvas | props -- */
.vox-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

.vox-toolrail {
    display: flex; flex-direction: column; gap: 10px;
    padding: 8px 6px;
    flex-shrink: 0;
    background: var(--vox-panel-2);
    border-right: 1px solid var(--vox-line);
    overflow-y: auto;
}
.vox-toolrail-group {
    display: flex; flex-direction: column; gap: 4px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--vox-line-soft);
}
.vox-toolrail-group:last-child { border-bottom: none; padding-bottom: 0; }

.vox-tool {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #353c48 0%, #2b313c 100%);
    border: 1px solid #444c5c;
    border-radius: 6px;
    color: var(--vox-ink);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s, color 0.12s;
}
.vox-tool:hover { background: #434b5b; border-color: #5a647a; color: #fff; }
.vox-tool .gf-icon { width: 20px; height: 20px; }
.vox-tool.active {
    background: linear-gradient(180deg, #4f9fd6 0%, #3a78c0 100%);
    border-color: var(--vox-accent); color: #fff;
    box-shadow: 0 0 10px var(--vox-accent-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.voxel-editor-canvas {
    flex: 1; min-width: 0; min-height: 0;
    display: block;
    cursor: crosshair;
    background: #20232b;
}

/* -- Properties panel -- */
.vox-props {
    width: 214px; flex-shrink: 0;
    padding: 6px 8px 14px;
    background: var(--vox-panel-2);
    border-left: 1px solid var(--vox-line);
    overflow-y: auto;
}
.vox-prop-section { margin-bottom: 12px; }
.vox-prop-header {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--vox-ink-faint);
    padding: 6px 0 5px;
    margin-bottom: 7px;
    border-bottom: 1px solid var(--vox-line-soft);
}
.vox-prop-body { display: flex; flex-direction: column; gap: 6px; }

.vox-btn-row { display: flex; gap: 5px; flex-wrap: wrap; }
.vox-btn-row .vox-btn { flex: 1; }
.vox-wide { width: 100%; }

.vox-field { display: flex; align-items: center; gap: 6px; }
.vox-field-label { font-size: 11px; color: var(--vox-ink-dim); width: 42px; flex-shrink: 0; }
.vox-field .vox-select, .vox-field .vox-dim-input { flex: 1; }

/* Palette grid + recent colours */
.voxel-palette-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.voxel-swatch {
    width: 100%; aspect-ratio: 1 / 1; min-height: 22px;
    border-radius: 4px; cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.1s, transform 0.06s;
}
.voxel-swatch:hover { border-color: #8890a0; transform: scale(1.06); }
.voxel-swatch.selected { border-color: #ffcc33; }
.voxel-swatch.glowing { box-shadow: 0 0 7px 1px var(--vox-accent-glow); border-color: var(--vox-accent); }

.vox-recent-row { display: flex; gap: 3px; flex-wrap: wrap; }
.vox-recent-swatch {
    width: 18px; height: 18px; border-radius: 3px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.vox-recent-swatch:hover { border-color: #aab; }
.vox-recent-swatch.selected { border-color: #ffcc33; }

.voxel-label { color: var(--vox-ink-dim); font-size: 11px; white-space: nowrap; }
.vox-anchor-label { font-family: var(--gf-mono, 'Consolas', monospace); font-size: 11px; color: var(--vox-accent); }

/* Picker row (colour input + add / replace) */
.voxel-picker-row { display: flex; gap: 5px; align-items: center; }
.voxel-picker-row input[type="color"] {
    width: 38px; height: 28px; flex-shrink: 0;
    border: 1px solid var(--vox-line); background: none; border-radius: 4px; cursor: pointer; padding: 0;
}
.voxel-picker-row .vox-btn { flex: 1; }

/* Lighting sliders */
.vox-prop-body input[type="range"] { accent-color: var(--vox-accent); }

/* Dimensions / resize */
.vox-resize-row { display: flex; align-items: flex-end; gap: 5px; flex-wrap: wrap; }
.vox-resize-row .vox-field { flex-direction: column; align-items: stretch; gap: 2px; width: 42px; }
.vox-resize-row .vox-field-label { width: auto; font-size: 10px; text-align: center; }
.vox-dim-input {
    width: 100%; padding: 3px 4px; text-align: center;
    background: rgba(0, 0, 0, 0.35); border: 1px solid var(--vox-line);
    border-radius: 3px; color: var(--vox-ink); font-size: 12px;
}
.vox-resize-row .vox-btn { flex: 1; align-self: stretch; }

/* Rig editor */
.vox-rig-hint { font-size: 10.5px; color: var(--vox-ink-faint); font-style: italic; line-height: 1.4; }
.vox-rig-list { font-size: 12px; }
.vox-rig-editor { display: flex; flex-direction: column; gap: 6px; }
.vox-rig-empty { font-size: 11px; color: var(--vox-ink-faint); font-style: italic; padding: 2px 0; }
.vox-rig-readout { font-family: var(--gf-mono, 'Consolas', monospace); font-size: 10.5px; color: var(--vox-accent); }
.vox-rig-check { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--vox-ink-dim); cursor: pointer; }
.vox-rig-check input { accent-color: var(--vox-accent); }

/* -- Status bar -- */
.vox-statusbar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 5px 9px;
    flex-shrink: 0;
    background: var(--vox-panel);
    border-top: 1px solid var(--vox-line);
}
.vox-status-group { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vox-status-sep { width: 1px; height: 18px; background: var(--vox-line); margin: 0 3px; }
.vox-status-spacer { flex: 1; min-width: 8px; }


/* Keyboard-shortcut overlay */
.voxel-shortcuts {
    position: absolute;
    top: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    max-width: 460px;
    padding: 12px 16px;
    background: rgba(16, 18, 26, 0.96);
    border: 1px solid #5ad6ff44;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(90, 214, 255, 0.12);
    color: #cdd6e6;
    font-size: 12px;
    line-height: 1.7;
    cursor: pointer;
}
.voxel-shortcuts b { color: #8fe0ff; }

/* Inline editor toast */
.voxel-toast {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 31;
    padding: 6px 14px;
    background: rgba(16, 18, 26, 0.95);
    border: 1px solid #5ad6ff55;
    border-radius: 6px;
    color: #cdeaf5;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}

/* ── Staff Ribbon ──────────────────────────────────────────────────────────
   Top-center launcher pill that expands into a horizontal toolbar of tiles.
   Each tile opens a dropdown flyout. Built on the --gf-* gold-glass HUD tokens
   and tinted per role via --ribbon-accent (set from JS). The colour-mix lines
   each follow a plain fallback so engines without color-mix keep the base. */
.staff-ribbon-root {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 0;
    z-index: 8000;
    pointer-events: none;
    --ribbon-accent: #5ad6ff;
    font-family: 'Segoe UI', sans-serif;
}

/* Launcher pill */
.staff-ribbon-pill {
    position: absolute;
    top: 8px; left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 13px;
    background: var(--gf-panel-bg, rgba(18,18,26,0.82));
    backdrop-filter: blur(var(--gf-blur, 7px));
    -webkit-backdrop-filter: blur(var(--gf-blur, 7px));
    border: 1px solid var(--ribbon-accent);
    border-color: color-mix(in srgb, var(--ribbon-accent) 55%, transparent);
    border-radius: 999px;
    color: var(--gf-text-1, #f4ecd8);
    font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
    cursor: pointer;
    box-shadow: var(--gf-shadow, 0 6px 22px rgba(0,0,0,0.55)),
                0 0 14px color-mix(in srgb, var(--ribbon-accent) 30%, transparent);
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.staff-ribbon-pill:hover {
    transform: translateX(-50%) translateY(1px);
    border-color: var(--ribbon-accent);
    box-shadow: var(--gf-shadow-strong, 0 10px 38px rgba(0,0,0,0.7)),
                0 0 20px color-mix(in srgb, var(--ribbon-accent) 45%, transparent);
}
.staff-ribbon-pill.active { border-color: var(--ribbon-accent); }
.staff-ribbon-pill-icon {
    color: var(--ribbon-accent); font-size: 13px;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ribbon-accent) 60%, transparent));
}
.staff-ribbon-pill-caret { color: var(--gf-text-3, #948d80); font-size: 9px; transition: transform 0.18s ease; }
.staff-ribbon-pill.active .staff-ribbon-pill-caret { transform: rotate(180deg); }

/* Expanding clip box — width animates 0→content, revealing the inner panel */
.staff-ribbon {
    position: absolute;
    top: 44px; left: 50%;
    transform: translateX(-50%);
    height: 60px; width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: width 0.30s cubic-bezier(0.2, 0.85, 0.25, 1), opacity 0.2s ease;
}
.staff-ribbon.open { opacity: 1; pointer-events: auto; }
.staff-ribbon-inner {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    display: flex; align-items: stretch; gap: 5px;
    height: 100%;
    padding: 5px 8px;
    box-sizing: border-box;
    background: var(--gf-panel-bg, rgba(18,18,26,0.82));
    backdrop-filter: blur(var(--gf-blur, 7px));
    -webkit-backdrop-filter: blur(var(--gf-blur, 7px));
    border: 1px solid var(--gf-border, rgba(255,255,255,0.12));
    border-color: color-mix(in srgb, var(--ribbon-accent) 30%, rgba(255,255,255,0.12));
    border-top: none;
    border-radius: 0 0 12px 12px;
    box-shadow: var(--gf-shadow, 0 6px 22px rgba(0,0,0,0.55)),
                0 0 24px color-mix(in srgb, var(--ribbon-accent) 16%, transparent);
}

/* Tiles */
.staff-ribbon-tile {
    flex: 0 0 auto;
    width: 58px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 4px 2px;
    background: var(--gf-slot-bg, rgba(255,255,255,0.045));
    border: 1px solid var(--gf-border-soft, rgba(255,255,255,0.07));
    border-radius: var(--gf-radius-sm, 4px);
    color: var(--gf-text-2, #c9c2b4);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease, color 0.12s ease;
}
.staff-ribbon-tile:hover {
    background: var(--gf-slot-bg-hover, rgba(255,255,255,0.10));
    border-color: color-mix(in srgb, var(--ribbon-accent) 50%, transparent);
    color: var(--gf-text-1, #f4ecd8);
    transform: translateY(-1px);
}
.staff-ribbon-tile.active {
    background: color-mix(in srgb, var(--ribbon-accent) 16%, transparent);
    border-color: var(--ribbon-accent);
    color: var(--gf-text-1, #f4ecd8);
    box-shadow: 0 0 10px color-mix(in srgb, var(--ribbon-accent) 35%, transparent);
}
.staff-ribbon-tile-icon { font-size: 18px; line-height: 1; }
.staff-ribbon-tile-label {
    font-size: 9px; letter-spacing: 0.3px; text-transform: uppercase;
    white-space: nowrap; opacity: 0.85;
}
.staff-ribbon-sep { flex: 0 0 auto; width: 1px; margin: 5px 3px; background: var(--gf-border, rgba(255,255,255,0.12)); }

/* Dropdown flyouts */
.staff-ribbon-flyout {
    position: fixed;
    z-index: 8001;
    min-width: 200px;
    max-width: min(460px, 94vw);
    max-height: 72vh;
    overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--gf-panel-bg-strong, rgba(14,14,20,0.94));
    backdrop-filter: blur(var(--gf-blur, 7px));
    -webkit-backdrop-filter: blur(var(--gf-blur, 7px));
    border: 1px solid var(--gf-border, rgba(255,255,255,0.12));
    border-color: color-mix(in srgb, var(--ribbon-accent) 40%, rgba(255,255,255,0.12));
    border-radius: var(--gf-radius, 7px);
    box-shadow: var(--gf-shadow-strong, 0 10px 38px rgba(0,0,0,0.7)),
                0 0 22px color-mix(in srgb, var(--ribbon-accent) 14%, transparent);
    color: var(--gf-text-1, #f4ecd8);
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    animation: staff-flyout-in 0.14s ease;
}
@keyframes staff-flyout-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.staff-ribbon-flyout.pinned {
    border-color: var(--ribbon-accent);
    box-shadow: var(--gf-shadow-strong, 0 10px 38px rgba(0,0,0,0.7)),
                0 0 0 1px color-mix(in srgb, var(--ribbon-accent) 50%, transparent),
                0 0 22px color-mix(in srgb, var(--ribbon-accent) 22%, transparent);
}
.staff-ribbon-flyout-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.staff-ribbon-flyout-title {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--gf-text-2, #c9c2b4);
    color: color-mix(in srgb, var(--ribbon-accent) 70%, var(--gf-text-2, #c9c2b4));
    border-bottom: 1px solid var(--gf-border-soft, rgba(255,255,255,0.07));
    background: rgba(255,255,255,0.02);
}
.staff-ribbon-refresh, .staff-ribbon-pin {
    background: none; border: none; cursor: pointer;
    color: var(--gf-text-3, #948d80); font-size: 13px; padding: 0 2px; line-height: 1;
    transition: color 0.12s, transform 0.12s, opacity 0.12s, filter 0.12s;
}
.staff-ribbon-refresh:hover { color: var(--ribbon-accent); }
.staff-ribbon-pin { font-size: 12px; opacity: 0.55; filter: grayscale(1); }
.staff-ribbon-pin:hover { opacity: 0.9; }
.staff-ribbon-pin.pinned { opacity: 1; filter: none; transform: rotate(-20deg); }

.staff-ribbon-btnrow { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.staff-ribbon-btn {
    flex: 1 0 auto;
    padding: 6px 11px;
    background: var(--gf-slot-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--gf-border-soft, rgba(255,255,255,0.08));
    border-radius: var(--gf-radius-sm, 4px);
    color: var(--gf-text-1, #f4ecd8);
    cursor: pointer; font-size: 12px; font-family: inherit; white-space: nowrap;
    transition: background 0.12s, border-color 0.12s;
}
.staff-ribbon-btn:hover {
    background: var(--gf-slot-bg-hover, rgba(255,255,255,0.10));
    border-color: color-mix(in srgb, var(--ribbon-accent) 55%, transparent);
}
.staff-ribbon-muted { padding: 10px 12px; color: var(--gf-text-3, #948d80); font-size: 11px; font-style: italic; }

/* Command-category flyouts: re-theme the shared sepia .cmd-* rows to gold-glass.
   (The standalone /commands window keeps its own .cmd-* look, untouched.) */
.staff-ribbon-flyout-cmds .cmd-list { padding: 4px 0 8px 0; }
.staff-ribbon-flyout-cmds .cmd-row:hover {
    background: color-mix(in srgb, var(--ribbon-accent) 10%, transparent);
    border-left-color: var(--ribbon-accent);
}
.staff-ribbon-flyout-cmds .cmd-label { color: var(--gf-text-1, #f4ecd8); }
.staff-ribbon-flyout-cmds .cmd-slash { font-family: var(--gf-mono, 'Consolas', monospace); }
.staff-ribbon-flyout-cmds .cmd-arg-input:focus { border-color: var(--ribbon-accent); }
.staff-ribbon-flyout-cmds .cmd-run-btn {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ribbon-accent) 30%, transparent),
        color-mix(in srgb, var(--ribbon-accent) 14%, transparent));
    border-color: color-mix(in srgb, var(--ribbon-accent) 50%, transparent);
    color: var(--gf-text-1, #f4ecd8);
}
.staff-ribbon-flyout-cmds .cmd-run-btn:hover {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ribbon-accent) 44%, transparent),
        color-mix(in srgb, var(--ribbon-accent) 20%, transparent));
}
.staff-ribbon-flyout-cmds .cmd-run-btn.confirm {
    background: linear-gradient(180deg, rgba(224,82,74,0.5), rgba(224,82,74,0.25));
    border-color: var(--gf-danger, #e0524a);
    color: #ffe2de;
}

/* Staff chat flyout (pinnable + draggable by its header) */
.staff-ribbon-flyout-chat .staff-chat-draghandle { cursor: move; user-select: none; }
.staff-ribbon-flyout-chat.dragging { animation: none; cursor: move; }
.staff-ribbon-chat { width: 300px; max-width: 90vw; }
.staff-ribbon-chat .staff-dash-chatlog { margin: 8px 10px 0; height: 150px; }
.staff-ribbon-chat .staff-dash-input {
    display: block; box-sizing: border-box; width: calc(100% - 20px); margin: 8px 10px 10px;
}

/* ── Reused staff sub-styles (chat log, presence, picker rows) ── */
.staff-dash-presence {
    display: flex; flex-direction: column; gap: 3px;
    padding: 8px 12px;
    max-height: 160px; overflow-y: auto; color: var(--gf-text-2, #aab3c4); font-size: 11px;
}
.staff-dash-presence-row { display: flex; align-items: center; gap: 6px; }
.staff-dash-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.staff-dash-chatlog {
    overflow-y: auto;
    background: rgba(0,0,0,0.35); border: 1px solid var(--gf-border-soft, rgba(255,255,255,0.07));
    border-radius: var(--gf-radius-sm, 4px);
    padding: 5px 7px; font-size: 11px; line-height: 1.5;
}
.staff-dash-chatline { color: #ffd479; }
.staff-dash-chatline b { color: #ffb938; }
.staff-dash-input {
    padding: 6px 9px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--gf-border-soft, rgba(255,255,255,0.07));
    border-radius: var(--gf-radius-sm, 4px); color: var(--gf-text-1, #f4ecd8); font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
}
.staff-dash-input:focus { outline: none; border-color: var(--ribbon-accent, #5ad6ff); }
.staff-dash-pick-row {
    padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer;
    color: var(--gf-text-1, #cdd6e6); font-size: 12px;
}
.staff-dash-pick-row:hover { background: rgba(255,255,255,0.08); }

/* Bottom bar (legacy classes; superseded by the .vox-* app bar) */
.voxel-editor-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: #2a2a30;
    border-top: 1px solid #444;
    flex-shrink: 0;
}

.voxel-name-input {
    flex: 1;
    padding: 3px 6px;
    background: #1a1a1e;
    color: #ddd;
    border: 1px solid #555;
    border-radius: 3px;
    font-size: 12px;
}

.voxel-cat-select {
    padding: 3px 6px;
    background: #1a1a1e;
    color: #ddd;
    border: 1px solid #555;
    border-radius: 3px;
    font-size: 12px;
}

.voxel-save-btn {
    padding: 4px 16px;
    background: #408040;
    color: #fff;
    border: 1px solid #509050;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}
.voxel-save-btn:hover { background: #509050; }

/* ── Studio Preview Widget ── */
.studio-preview-container {
    display: inline-block;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #444;
    background: #2a2a2e;
}

/* ── Studio Manager Toolbar ── */
.studio-toolbar {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: rgba(30, 30, 35, 0.9);
    border-radius: 6px;
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    border: 1px solid #444;
}

.studio-toolbar-btn {
    padding: 6px 14px;
    background: #3a3a45;
    color: #ddd;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-family: 'Segoe UI', sans-serif;
}
.studio-toolbar-btn:hover { background: #4a4a58; }
.studio-toolbar-btn.active {
    background: #5080c0;
    border-color: #6090d0;
    color: #fff;
}

/* ── Item Editor ── */
.item-editor-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #1e1e22;
    color: #ccc;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
}

.item-editor-tabs {
    display: flex;
    background: #2a2a30;
    border-bottom: 1px solid #444;
}

.item-editor-tab {
    padding: 6px 14px;
    cursor: pointer;
    color: #999;
    border-bottom: 2px solid transparent;
    font-size: 11px;
    text-transform: uppercase;
}
.item-editor-tab:hover { color: #ccc; }
.item-editor-tab.active {
    color: #fff;
    border-bottom-color: #5080c0;
}

.item-editor-panel {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.item-editor-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.item-editor-row label {
    width: 100px;
    text-align: right;
    color: #999;
    font-size: 11px;
    flex-shrink: 0;
}

.item-editor-row input,
.item-editor-row select,
.item-editor-row textarea {
    flex: 1;
    padding: 3px 6px;
    background: #1a1a1e;
    color: #ddd;
    border: 1px solid #555;
    border-radius: 3px;
    font-size: 12px;
}

/* Effect cards */
.effect-card {
    background: #252530;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 6px;
}

.effect-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.effect-card-title {
    font-weight: bold;
    color: #ddd;
    font-size: 12px;
}

.effect-card-remove {
    background: #803030;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 10px;
}

.effect-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
}

.effect-card-body label {
    color: #999;
    font-size: 10px;
    text-align: right;
    padding-top: 3px;
}

.effect-card-body input,
.effect-card-body select {
    padding: 2px 4px;
    background: #1a1a1e;
    color: #ddd;
    border: 1px solid #555;
    border-radius: 2px;
    font-size: 11px;
}

/* Rarity colors */
.rarity-junk { color: #808080; }
.rarity-common { color: #ffffff; }
.rarity-uncommon { color: #40c040; }
.rarity-rare { color: #4080ff; }
.rarity-epic { color: #a040d0; }
.rarity-legendary { color: #ff8020; }
.rarity-artifact { color: #ff2020; }

.rarity-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
}
.rarity-badge.junk { background: #404040; color: #808080; }
.rarity-badge.common { background: #333; color: #fff; }
.rarity-badge.uncommon { background: #204020; color: #40c040; }
.rarity-badge.rare { background: #203060; color: #4080ff; }
.rarity-badge.epic { background: #302040; color: #a040d0; }
.rarity-badge.legendary { background: #403020; color: #ff8020; }
.rarity-badge.artifact { background: #401010; color: #ff2020; }

/* ── Studio Dialog System ── */
.studio-dialog-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.studio-dialog {
    background: #2a2a30;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 16px;
    color: #ccc;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    min-width: 320px;
}

.studio-dialog-title {
    font-size: 14px;
    font-weight: bold;
    color: #eee;
    margin-bottom: 8px;
}

.studio-dialog-info {
    font-size: 11px;
    color: #999;
    margin-bottom: 12px;
}

.studio-dialog-group {
    margin-bottom: 12px;
    padding: 8px;
    background: #222228;
    border-radius: 4px;
}

.studio-dialog-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    cursor: pointer;
    color: #ccc;
    font-size: 12px;
}

.studio-dialog-radio input[type="radio"] {
    accent-color: #5080c0;
}

.studio-dialog-size-inputs {
    margin-left: 8px;
    color: #999;
    font-size: 11px;
}

.studio-size-input {
    width: 48px !important;
    text-align: center;
}

.studio-dialog-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.studio-dialog-field label {
    width: 90px;
    text-align: right;
    color: #999;
    font-size: 11px;
    flex-shrink: 0;
}

.studio-dialog-input {
    padding: 3px 6px;
    background: #1a1a1e;
    color: #ddd;
    border: 1px solid #555;
    border-radius: 3px;
    font-size: 12px;
}

.studio-dialog-select {
    padding: 3px 6px;
    background: #1a1a1e;
    color: #ddd;
    border: 1px solid #555;
    border-radius: 3px;
    font-size: 12px;
}

.studio-dialog-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.studio-dialog-btn {
    padding: 5px 16px;
    background: #3a3a42;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.studio-dialog-btn:hover { background: #4a4a55; }
.studio-dialog-btn:disabled { opacity: 0.5; cursor: default; }
.studio-dialog-btn.primary {
    background: #406080;
    color: #fff;
    border-color: #5080a0;
}
.studio-dialog-btn.primary:hover { background: #507090; }

/* ── The Forge (creation launcher) ── */
.studio-forge-dialog {
    width: 560px;
    max-width: 90vw;
    background: linear-gradient(180deg, #25272e 0%, #1d1f25 100%);
    border-color: #3a5566;
    box-shadow: 0 0 32px rgba(80, 190, 230, 0.12), inset 0 0 40px rgba(40, 90, 110, 0.08);
}
.studio-forge-header {
    border-bottom: 1px solid #33414a;
    padding-bottom: 10px;
    margin-bottom: 12px;
    position: relative;
}
.studio-forge-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #cdeaf5;
    text-shadow: 0 0 10px rgba(120, 210, 240, 0.45);
}
.studio-forge-sub {
    font-size: 11px;
    color: #8aa3ad;
    font-style: italic;
    margin-top: 2px;
}
.studio-forge-chip {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10.5px;
    color: #8fd6ff;
    background: rgba(40, 90, 110, 0.35);
    border: 1px solid #335;
    border-radius: 10px;
    padding: 3px 9px;
}
.studio-forge-body { min-height: 180px; }
.studio-forge-prompt {
    font-size: 13px;
    color: #d6e6ec;
    margin-bottom: 10px;
}
.studio-forge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}
.studio-forge-tile {
    flex: 1 1 150px;
    min-width: 140px;
    background: #20222a;
    border: 1px solid #3a3f4a;
    border-radius: 7px;
    padding: 12px 10px;
    color: #cdd;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.studio-forge-tile:hover {
    border-color: #59b6d6;
    box-shadow: 0 0 14px rgba(90, 182, 214, 0.25);
    transform: translateY(-1px);
}
.studio-forge-tile.selected {
    border-color: #6fd0ee;
    box-shadow: 0 0 16px rgba(111, 208, 238, 0.4);
    background: #243038;
}
.studio-forge-tile-icon { font-size: 26px; line-height: 1.2; }
.studio-forge-tile-label { font-size: 13px; font-weight: 600; color: #e6f2f6; margin-top: 4px; }
.studio-forge-tile-hint { font-size: 10px; color: #8298a1; margin-top: 3px; }
.studio-forge-template { flex: 0 1 120px; min-width: 100px; padding: 14px 8px; }
.studio-forge-namerow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.studio-forge-namerow label { color: #8aa3ad; font-size: 11px; }
.studio-forge-namerow .studio-dialog-input { flex: 1; }

/* "Bring into the Grid" preview button in the voxel editor */
.voxel-preview-btn {
    margin-left: 8px;
    background: #2c5a52 !important;
    border-color: #4aa090 !important;
    color: #cdfdf2 !important;
    text-shadow: 0 0 8px rgba(120, 240, 220, 0.4);
}
.voxel-preview-btn:hover { background: #357066 !important; }

/* "Submit for Approval" button in the voxel editor */
.voxel-submit-btn {
    margin-left: 8px;
    background: #4a3f6a !important;
    border-color: #7a68b0 !important;
    color: #e6dcff !important;
}
.voxel-submit-btn:hover { background: #5a4d80 !important; }

/* ── Submissions / Review Queue ── */
.studio-subs-dialog { width: 600px; max-width: 92vw; }
.studio-subs-list {
    max-height: 56vh;
    overflow-y: auto;
    margin: 8px 0;
    border: 1px solid #3a3f4a;
    border-radius: 6px;
}
.studio-sub-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid #2c2f38;
}
.studio-sub-row:last-child { border-bottom: none; }
.studio-sub-info { flex: 1; min-width: 0; }
.studio-sub-name { font-size: 13px; color: #e6f2f6; font-weight: 600; }
.studio-sub-meta { font-size: 10.5px; color: #8298a1; margin-top: 2px; }
.studio-sub-note { font-size: 10.5px; color: #e0a060; margin-top: 3px; font-style: italic; }
.studio-sub-actions { display: flex; gap: 5px; flex-shrink: 0; }
.studio-sub-badge {
    flex-shrink: 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 9px;
    border: 1px solid #444;
    color: #ccc;
    background: #2a2a30;
    min-width: 64px;
    text-align: center;
}
.studio-sub-badge.draft     { color: #aab; border-color: #556; }
.studio-sub-badge.submitted { color: #8fd6ff; border-color: #3a6678; background: rgba(40,90,110,0.3); }
.studio-sub-badge.approved  { color: #8fe6a0; border-color: #3a7850; background: rgba(40,90,60,0.3); }
.studio-sub-badge.rejected  { color: #f09090; border-color: #784040; background: rgba(90,40,40,0.3); }

/* Transient status toast */
.studio-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: rgba(30, 34, 42, 0.95);
    border: 1px solid #4aa090;
    color: #cdfdf2;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 10002;
}
.studio-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Batch Import ── */
.studio-batch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-bottom: 1px solid #333;
}

.studio-batch-dim {
    color: #777;
    font-size: 11px;
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
}

.studio-batch-progress {
    margin-top: 8px;
    color: #8cb8e0;
    font-size: 11px;
}

/* ── Model Library ── */
.studio-library-dialog {
    min-width: 600px;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.studio-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.studio-library-search {
    margin-bottom: 8px;
}

.studio-library-content {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 1px;
    border: 1px solid #444;
    border-radius: 4px;
    overflow: hidden;
}

.studio-library-sidebar {
    width: 180px;
    flex-shrink: 0;
    background: #222228;
    overflow-y: auto;
    padding: 4px 0;
}

.studio-library-cat {
    padding: 5px 8px;
    cursor: pointer;
    color: #bbb;
    font-size: 12px;
    user-select: none;
}
.studio-library-cat:hover { background: #2e2e36; }
.studio-library-cat.selected { background: #3a3a48; color: #fff; }

.studio-library-arrow {
    display: inline-block;
    width: 12px;
    text-align: center;
    font-size: 9px;
    color: #777;
}

.studio-library-subcats {
    padding-left: 20px;
}

.studio-library-subcat {
    padding: 3px 8px;
    cursor: pointer;
    color: #999;
    font-size: 11px;
}
.studio-library-subcat:hover { background: #2e2e36; color: #ccc; }
.studio-library-subcat.selected { background: #3a3a48; color: #fff; }

.studio-library-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
    min-height: 300px;
}

.studio-library-model-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    border-radius: 3px;
}
.studio-library-model-row:hover { background: #333; }

.studio-library-model-name {
    color: #ddd;
    font-size: 12px;
}

.studio-library-model-meta {
    color: #777;
    font-size: 11px;
}

.studio-library-empty {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 12px;
}

/* ── Staff quick-toggle tiles (Creative / God / Vanish ON state) ── */
/* Distinct green "on" look so an active toggle reads apart from the blue
   accent .active state used for an open flyout. */
.staff-ribbon-tile.on {
    background: color-mix(in srgb, #57c97a 20%, transparent);
    border-color: #57c97a;
    color: #eafff0;
    box-shadow: 0 0 10px color-mix(in srgb, #57c97a 38%, transparent);
}
.staff-ribbon-tile.on .staff-ribbon-tile-label { opacity: 1; }

/* Tools-flyout player dropdown */
.staff-ribbon-select {
    margin: 8px 12px 2px;
    padding: 5px 8px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--gf-border-soft, rgba(255,255,255,0.08));
    border-radius: var(--gf-radius-sm, 4px);
    color: var(--gf-text-1, #f4ecd8);
    font-size: 12px; font-family: 'Segoe UI', sans-serif;
}
.staff-ribbon-select:focus { outline: none; border-color: var(--ribbon-accent, #5ad6ff); }

/* ── Staff Speed widget (presets + slider) ── */
.staff-speed-presets .staff-ribbon-btn.on {
    background: color-mix(in srgb, var(--ribbon-accent, #5ad6ff) 26%, transparent);
    border-color: var(--ribbon-accent, #5ad6ff);
    color: #eafff7;
}
.staff-speed-sliderrow {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 12px 10px;
}
.staff-speed-slider { flex: 1; accent-color: var(--ribbon-accent, #5ad6ff); cursor: pointer; }
.staff-speed-val {
    min-width: 34px; text-align: right;
    font-size: 12px; color: var(--gf-text-1, #f4ecd8);
    font-variant-numeric: tabular-nums;
}

/* ── Staff Character Editor / Inspector window ── */
.staff-insp {
    position: fixed;
    z-index: 8050;
    width: 440px; max-width: 94vw;
    max-height: 82vh;
    display: none; flex-direction: column;
    background: var(--gf-panel-bg-strong, rgba(14,14,20,0.95));
    backdrop-filter: blur(var(--gf-blur, 7px));
    -webkit-backdrop-filter: blur(var(--gf-blur, 7px));
    border: 1px solid color-mix(in srgb, var(--ribbon-accent, #5ad6ff) 42%, rgba(255,255,255,0.12));
    border-radius: var(--gf-radius, 7px);
    box-shadow: var(--gf-shadow-strong, 0 10px 38px rgba(0,0,0,0.7)),
                0 0 22px color-mix(in srgb, var(--ribbon-accent, #5ad6ff) 14%, transparent);
    color: var(--gf-text-1, #f4ecd8);
    font-family: 'Segoe UI', sans-serif; font-size: 12px;
}
.staff-insp-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gf-border-soft, rgba(255,255,255,0.07));
    background: rgba(255,255,255,0.02);
    cursor: move; user-select: none;
}
.staff-insp-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
    color: color-mix(in srgb, var(--ribbon-accent, #5ad6ff) 70%, var(--gf-text-1, #f4ecd8));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.staff-insp-x {
    background: none; border: none; color: var(--gf-text-3, #948d80);
    cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px;
}
.staff-insp-x:hover { color: var(--gf-danger, #e0524a); }

.staff-insp-target { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; }
.staff-insp-select {
    flex: 1 1 auto; min-width: 0;
    padding: 5px 8px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--gf-border-soft, rgba(255,255,255,0.08));
    border-radius: var(--gf-radius-sm, 4px);
    color: var(--gf-text-1, #f4ecd8); font-size: 12px; font-family: inherit;
}
.staff-insp-select:focus { outline: none; border-color: var(--ribbon-accent, #5ad6ff); }
.staff-insp-iconbtn { flex: 0 0 auto; min-width: 30px; }

.staff-insp-tabs { display: flex; gap: 4px; padding: 4px 12px 0; }
.staff-insp-tab {
    padding: 5px 14px; cursor: pointer; font-size: 11px; font-family: inherit;
    background: var(--gf-slot-bg, rgba(255,255,255,0.045));
    border: 1px solid var(--gf-border-soft, rgba(255,255,255,0.07));
    border-bottom: none; border-radius: 5px 5px 0 0;
    color: var(--gf-text-2, #c9c2b4);
}
.staff-insp-tab.active {
    background: color-mix(in srgb, var(--ribbon-accent, #5ad6ff) 16%, transparent);
    border-color: color-mix(in srgb, var(--ribbon-accent, #5ad6ff) 45%, transparent);
    color: var(--gf-text-1, #f4ecd8);
}
.staff-insp-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 8px 12px 12px;
    border-top: 1px solid var(--gf-border-soft, rgba(255,255,255,0.07));
    scrollbar-width: thin;
}

.staff-insp-section { margin-bottom: 12px; }
.staff-insp-sectitle {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--gf-text-3, #948d80); margin: 4px 0 6px;
}
.staff-insp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.staff-insp-rlabel { flex: 0 0 96px; font-size: 12px; color: var(--gf-text-1, #f4ecd8); }
.staff-insp-skname {
    flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.staff-insp-num {
    flex: 0 0 64px; width: 64px;
    padding: 3px 6px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--gf-border-soft, rgba(255,255,255,0.08));
    border-radius: var(--gf-radius-sm, 4px);
    color: var(--gf-text-1, #f4ecd8); font-size: 12px; font-family: inherit;
}
.staff-insp-num:focus { outline: none; border-color: var(--ribbon-accent, #5ad6ff); }
.staff-insp-toggle {
    flex: 0 0 26px; width: 26px; height: 24px; cursor: pointer;
    background: rgba(255,255,255,0.05); border: 1px solid var(--gf-border-soft, rgba(255,255,255,0.08));
    border-radius: var(--gf-radius-sm, 4px); font-size: 11px; line-height: 1;
}
.staff-insp-tg-up { color: #57c97a; }
.staff-insp-tg-down { color: #e0a23a; }
.staff-insp-tg-locked { color: #8a93a4; }

.staff-insp-pools { font-size: 12px; color: var(--gf-text-2, #c9c2b4); margin-bottom: 6px; }
.staff-insp-btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.staff-insp-btn {
    padding: 5px 11px; cursor: pointer; font-size: 12px; font-family: inherit; white-space: nowrap;
    background: var(--gf-slot-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--gf-border-soft, rgba(255,255,255,0.08));
    border-radius: var(--gf-radius-sm, 4px); color: var(--gf-text-1, #f4ecd8);
    transition: background 0.12s, border-color 0.12s;
}
.staff-insp-btn:hover {
    background: var(--gf-slot-bg-hover, rgba(255,255,255,0.10));
    border-color: color-mix(in srgb, var(--ribbon-accent, #5ad6ff) 55%, transparent);
}
.staff-insp-filter {
    box-sizing: border-box; width: 100%; margin: 4px 0 8px;
    padding: 5px 8px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--gf-border-soft, rgba(255,255,255,0.08));
    border-radius: var(--gf-radius-sm, 4px); color: var(--gf-text-1, #f4ecd8);
    font-size: 12px; font-family: inherit;
}
.staff-insp-filter:focus { outline: none; border-color: var(--ribbon-accent, #5ad6ff); }
.staff-insp-skills { display: flex; flex-direction: column; }
.staff-insp-muted { color: var(--gf-text-3, #948d80); font-size: 11px; font-style: italic; padding: 4px 0; }

/* Inventory grids (reuse the .inv-slot visual language from main.css) */
.staff-insp-grid { display: grid; gap: 3px; }
.staff-insp-equip { grid-template-columns: repeat(5, 1fr); }
.staff-insp-bag { grid-template-columns: repeat(8, 1fr); }
.staff-insp-hotbar { grid-template-columns: repeat(10, 1fr); }

/* Take / Delete context menu for a target's item slot */
.staff-insp-menu {
    position: fixed; z-index: 8060;
    display: flex; flex-direction: column; min-width: 130px;
    background: var(--gf-panel-bg-strong, rgba(14,14,20,0.96));
    border: 1px solid color-mix(in srgb, var(--ribbon-accent, #5ad6ff) 40%, rgba(255,255,255,0.12));
    border-radius: var(--gf-radius-sm, 5px);
    box-shadow: var(--gf-shadow-strong, 0 10px 38px rgba(0,0,0,0.7));
    overflow: hidden;
}
.staff-insp-menu-head {
    padding: 6px 10px; font-size: 11px; font-weight: 600;
    color: var(--gf-text-2, #c9c2b4);
    border-bottom: 1px solid var(--gf-border-soft, rgba(255,255,255,0.07));
    white-space: nowrap;
}
.staff-insp-menu button {
    padding: 6px 10px; text-align: left; background: none; border: none; cursor: pointer;
    color: var(--gf-text-1, #f4ecd8); font-size: 12px; font-family: inherit;
}
.staff-insp-menu button:hover { background: rgba(255,255,255,0.08); }
.staff-insp-menu .staff-insp-danger:hover { background: rgba(224,82,74,0.25); color: #ffe2de; }