/* ============================================================
   ui-theme.css — Reusable themed CSS classes for UI elements
   All colors reference CSS custom properties set by Themes.js
   
   Usage: Replace inline styles with these classes, e.g.
   Before: style="background: #1a2a2e; border: 1px solid #18484a; ..."
   After:  class="ui-panel"
   ============================================================ */

/* ===== TYPEFACE =====
   The UI has ONE font, and it is named here once. Every rule and every inline
   style in the chrome points at these tokens, so changing what the app is set
   in is this line rather than eighty scattered declarations — the same reason
   the z-index ladder lives above.

   What deliberately does NOT come through here:
   - node CONTENT fonts (a label's or sticky's chosen face, the theme fonts
     Comfortaa / Playfair / Noto) — those are the user's choice, not the UI's;
   - retro faces picked for a look ('Courier New' in the artillery game);
   - canvas text: ctx.font is a JS string and cannot read a CSS variable, so
     those ~400 call sites still name their family literally (mostly
     sans-serif / system-ui, i.e. the OS face). The canvas has never been set
     in the UI font; unifying it is a separate job that also needs a
     document.fonts gate and a forced redraw, or the first paint falls back
     silently and never repaints.
   - the two standalone pages that load no stylesheet of ours (offline.html,
     the synth) — a token they cannot see would leave them fontless.

   Outfit is already loaded (the wordmark uses it) if this is ever swapped;
   mind that it is a display face, wider and weaker at 10-12px than Inter,
   and that its weights here are 400/500/700 where Inter gives 400/500/600. */
:root {
    --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ui-font-mono: ui-monospace, Menlo, Consolas, 'Courier New', monospace;

    /* The colour a NAME wears when it is quoted as a thing rather than said as
       text — a label's name in the activity list, and any tag pill that
       follows. Violet on purpose: the accent already means "unread" and amber
       already means "selected", so a third meaning needed a third hue rather
       than a reused one. One colour, named once. */
    --ui-tag-rgb: 167, 139, 250;
}

/* ===== Z-INDEX LADDER =====
   The only place to reason about stacking. Token values keep the app's
   historical numbers (zero-regression tokenization) — the calc(+N)
   offsets at usage sites are visible debt: squash them onto plain rungs
   as surfaces get verified. Order:
   panel < hud < nav < game < viewer < org-modal < modal < modal-2 < tools
   < loading < lightbox < system < lock < top < max */
:root {
    --z-panel: 1000;      /* floating panels, pickers, badges */
    --z-hud: 1200;        /* location HUD, voice call bar */
    --z-nav: 2000;        /* burger/mobile menus (+1 = toolbar above) */
    --z-game: 2150;       /* GameZone HUD/overlays */
    --z-viewer: 2500;     /* inline video viewer */
    --z-org-modal: 3000;  /* org/admin modals */
    --z-modal: 5000;      /* standard dialogs */
    --z-modal-2: 6000;    /* dialogs that stack on dialogs */
    --z-tools: 7000;      /* floating tool panels, comment modal */
    --z-profile: 7500;    /* the profile card: it opens FROM dialogs (space profile,
                             comments, chat), so it may never open beneath them */
    --z-loading: 8000;    /* space loading overlay */
    --z-lightbox: 10000;  /* image/video/3d fullscreen viewers */
    --z-system: 12000;    /* connection overlays — above the app */
    --z-lock: 20000;      /* full-screen lock/confirm overlays */
    --z-top: 100000;      /* toasts, color pickers — above everything */
    --z-max: 2147483647;  /* help/report overlays — int32 max, wins all */

    /* The house curve for things that rise to meet you: a little overshoot,
       then settle. One token so every panel pops the same way — the landing
       cards each had their own timing, which is how a page ends up feeling
       assembled rather than designed. */
    --pop: cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

/* --- Surfaces / Containers --- */

.ui-card {
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-border-faint);
    border-radius: 8px;
    color: var(--ui-text);
}

/* Padding variants — compose with .ui-card */
.ui-card-pad     { padding: 12px 14px; }
.ui-card-pad-sm  { padding: 8px 10px; }
.ui-card-pad-lg  { padding: 16px 18px; }

/* Row layout (split content left+right, vertically centered).
   Compose with .ui-card and a padding variant. */
.ui-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Interactive cards that respond to hover (list items, clickable rows) */
.ui-card-interactive {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ui-card-interactive:hover {
    background: var(--ui-surface-hover);
    border-color: var(--ui-border-accent);
}

.ui-overlay {
    background: var(--ui-overlay);
}

/* --- Inputs --- */

.ui-input {
    background: var(--ui-input-bg);
    border: 2px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    width: 100%;
}

.ui-input:focus {
    border-color: var(--ui-border-accent);
}

.ui-input::placeholder {
    color: var(--ui-text-dim);
}

.ui-select {
    background: var(--ui-input-bg);
    border: 2px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    width: 100%;
    cursor: pointer;
}

.ui-select:focus {
    border-color: var(--ui-border-accent);
}

.ui-textarea {
    background: var(--ui-input-bg);
    border: 2px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    width: 100%;
    resize: vertical;
    font-family: inherit;
}

.ui-textarea:focus {
    border-color: var(--ui-border-accent);
}

.ui-textarea::placeholder {
    color: var(--ui-text-dim);
}

/* --- Buttons ---
   One base + small set of variants. Every button uses .ui-btn for shape +
   transitions; layer color/shape/size modifiers as needed.

   Color:  .ui-btn-primary | -primary-strong | -ghost | -danger | -accent |
           -success | -neutral
   Shape:  (default rounded square) | .ui-btn-pill | .ui-btn-circle |
           .ui-btn-bare (no bg/border, e.g. × close buttons)
   Size:   (default) | .ui-btn-sm | .ui-btn-lg

   Editing .ui-btn updates EVERY button in the app at once. */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    color: var(--ui-text);
    background: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s, filter 0.12s, box-shadow 0.15s, transform 0.1s;
}

.ui-btn:hover    { filter: brightness(1.15); box-shadow: 0 0 12px rgba(var(--ui-accent-rgb), 0.45); transform: scale(1.03); }
.ui-btn:active   { transform: translateY(1px); }
.ui-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Color variants */
.ui-btn-primary {
    background: var(--ui-primary);
    color: var(--ui-text-bright);
    border-color: var(--ui-border-accent);
}

.ui-btn-primary-strong {
    background: var(--ui-primary-strong);
    color: var(--ui-text-bright);
    border-color: var(--ui-border-accent);
}

.ui-btn-ghost {
    background: transparent;
    color: var(--ui-text);
    border-color: var(--ui-border);
}

.ui-btn-ghost:hover {
    background: var(--ui-surface-hover);
    border-color: var(--ui-border-accent);
    opacity: 1;
}

.ui-btn-danger {
    background: color-mix(in srgb, var(--ui-danger) 30%, transparent);
    color: var(--ui-danger);
    border-color: color-mix(in srgb, var(--ui-danger) 30%, transparent);
}

.ui-btn-danger:hover {
    background: color-mix(in srgb, var(--ui-danger) 45%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--ui-danger) 40%, transparent);
    opacity: 1;
}

.ui-btn-accent {
    background: rgba(255, 107, 53, 0.18);
    color: #ff9a6b;
    border-color: rgba(255, 107, 53, 0.3);
}

.ui-btn-accent:hover {
    background: rgba(255, 107, 53, 0.32);
    opacity: 1;
}

.ui-btn-success {
    background: var(--ui-success);
    color: var(--ui-accent-teal);
    border-color: var(--ui-border-accent);
}

/* Amber: an action that is safe but worth a second look (reconcile, suspend). */
.ui-btn-warn {
    background: color-mix(in srgb, var(--ui-warn-text) 16%, transparent);
    color: var(--ui-warn-text);
    border-color: color-mix(in srgb, var(--ui-warn-text) 35%, transparent);
}

.ui-btn-neutral {
    background: var(--ui-neutral);
    color: var(--ui-text-muted);
    border-color: var(--ui-neutral);
}

/* Shape modifiers */
.ui-btn-pill   { border-radius: 999px; }
.ui-btn-circle { padding: 0; width: 32px; height: 32px; border-radius: 50%; }
.ui-btn-bare {
    background: transparent;
    border-color: transparent;
    padding: 4px 8px;
}
.ui-btn-bare:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    transform: none;
    opacity: 1;
}

/* Size modifiers */
.ui-btn-sm { padding: 4px 10px; font-size: 11px; }
.ui-btn-lg { padding: 12px 22px; font-size: 14px; }
.ui-btn-circle.ui-btn-sm { width: 24px; height: 24px; padding: 0; }
.ui-btn-circle.ui-btn-lg { width: 40px; height: 40px; padding: 0; }

/* --- Search filter / tag pills ---
   Pill-style toggle buttons used in the search modal filter row and tag
   cloud. Inactive = muted teal; .active toggled by JS for the selected
   filter. Adds .ui-btn base shape on top via JS classlist or markup. */

.search-filter,
.search-tag-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    border: 2px solid var(--ui-border);
    background: rgba(var(--ui-text-rgb), 0.06);
    color: var(--ui-text-muted);
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.search-filter:hover,
.search-tag-btn:hover {
    background: rgba(var(--ui-accent-rgb), 0.14);
    border-color: var(--ui-border-accent);
    color: var(--ui-text);
}

.search-filter.active {
    background: rgba(var(--ui-accent-rgb), 0.26);
    border-color: var(--ui-border-accent);
    color: var(--ui-text-bright);
}

/* Filter groups — Type / Task / Priority. Each group is a flex row that
   wraps independently, so Task and Priority stay together on their own
   line instead of mixing into the long Type stream. */
.search-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 4px 0;
}

.search-filter-group + .search-filter-group {
    border-top: 1px solid var(--ui-border-faint);
    margin-top: 2px;
}

.search-filter-group-label {
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ui-text-dim);
    margin-right: 4px;
    -webkit-user-select: none;
    user-select: none;
}

/* Compact emoji-only filter pill — square-ish, no leading text. Keeps the
   Task and Priority strips tight so they read as a row of states. */
.search-filter-compact {
    padding: 4px 8px;
    font-size: 13px;
    min-width: 28px;
    justify-content: center;
}

/* --- Tabs --- */

.ui-tab {
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s;
}

.ui-tab-active {
    background: var(--ui-tab-active);
    color: var(--ui-text-bright);
    border-color: var(--ui-border-accent);
}

.ui-tab-inactive {
    background: var(--ui-tab-inactive);
    color: var(--ui-text-muted);
}

.ui-tab-inactive:hover {
    background: var(--ui-surface-hover);
    color: var(--ui-text);
}

/* Smaller variant for compact tab rows (activity panel etc.) */
.ui-tab-sm {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
}

/* Underline-style tabs (org settings panel, profile settings) — bottom
   border slides in on active state; bg tint optional via active variant.
   Compose: .ui-tab .ui-tab-underline + .ui-tab-active/-inactive */
.ui-tab-underline {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 9px 16px;
    background: transparent;
    color: var(--ui-text-dim);
    font-weight: 500;
}
.ui-tab-underline.ui-tab-active {
    background: var(--ui-tab-active);
    border-bottom-color: var(--ui-border-accent);
    color: var(--ui-text-bright);
}

/* Top-attached tab variant — top corners rounded only, sits flush above a
   tab-content area. Compose: .ui-tab .ui-tab-top + .ui-tab-active/-inactive */
.ui-tab-top {
    border-radius: 6px 6px 0 0;
    border: none;
}

/* --- Text --- */

.ui-text {
    color: var(--ui-text);
}

.ui-text-bright {
    color: var(--ui-text-bright);
}

.ui-text-muted {
    color: var(--ui-text-muted);
}

.ui-text-dim {
    color: var(--ui-text-dim);
}

.ui-text-accent {
    color: var(--ui-accent);
}

.ui-text-teal {
    color: var(--ui-accent-teal);
}

.ui-text-danger {
    color: var(--ui-danger);
}

/* --- Chat-specific --- */

.ui-msg-own {
    background: var(--ui-primary);
    border-radius: 12px 12px 4px 12px;
}

.ui-msg-other {
    background: var(--ui-card-bg);
    border-radius: 12px 12px 12px 4px;
}

/* Plain (Slack/Discord-style) chat row — no bubble bg, hover tints the row.
   Applied to space-chat messages via renderChatBubble({ layout: 'plain' }). */
.chat-bubble--plain:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Subtle row-hover for the bubble layout too — the msgBox bg gets a tiny
   brightness lift so it's easy to see which message your cursor's on. */
#spaceChatMessages > div[data-msg-id]:hover > div:nth-child(2),
#directChatMessages > div[data-msg-id]:hover > div:nth-child(2) {
    filter: brightness(1.25);
}

/* Inline emojis inside chat messages — Discord/Slack-style: ~30% larger
   than surrounding text so they read clearly without being shouty. Skipped
   inside .chat-jumbo where the whole message is already huge. */
.chat-inline-emoji {
    font-size: 1.3em;
    line-height: 1;
    vertical-align: -0.12em;
}
.chat-jumbo .chat-inline-emoji {
    font-size: 1em;
    vertical-align: baseline;
}

/* --- Dialogs / Modals --- */


.ui-dialog-header {
    color: var(--ui-text-bright);
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
}

/* --- Context menus --- */

.ui-menu {
    background: var(--ui-surface);
    border: 2px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px var(--ui-shadow);
    color: var(--ui-text);
    overflow: hidden;
}

/* When clampMenuToViewport flips overflow to auto for tall menus, we want the
   project's own scrollbar — not the browser default. */
.ui-menu::-webkit-scrollbar { width: 6px; height: 6px; }
.ui-menu::-webkit-scrollbar-track { background: transparent; }
.ui-menu::-webkit-scrollbar-thumb { background: var(--ui-border); border-radius: 3px; }
.ui-menu::-webkit-scrollbar-thumb:hover { background: var(--ui-border-accent); }

.ui-menu-item {
    padding: 5px 11px;
    cursor: pointer;
    transition: background 0.12s;
    color: var(--ui-text);
}

.ui-menu-item:hover {
    background: var(--ui-surface-hover);
}

/* Ad-hoc menu rows (safe menu, quest reward chooser, …) use .ctx-item —
   give them the same hover feedback as proper .ui-menu-item rows. */
.ui-menu .ctx-item:hover {
    background: var(--ui-surface-hover);
}
.ui-menu .ctx-item-danger:hover {
    background: color-mix(in srgb, var(--ui-danger) 15%, transparent);
}

/* Node context menu — dressed like the Look panel (surface card, soft
   deep shadow, roomier radius). Sits after .ui-menu so it wins the tie. */
.node-context-menu {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-faint);
    border-radius: 12px;
    box-shadow: 0 26px 54px -18px var(--ui-shadow);
    padding: 4px 0;
    min-width: 210px;
}

.ui-menu-item-danger {
    color: var(--ui-danger);
}

.ui-menu-item-danger:hover {
    background: color-mix(in srgb, var(--ui-danger) 15%, transparent);
}

.ui-menu-divider {
    border-top: 1px solid var(--ui-border-faint);
    margin: 4px 0;
}

/* --- Badges / Tags --- */

.ui-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: var(--ui-primary-light);
    color: var(--ui-text-muted);
    border: 1px solid var(--ui-border-faint);
}

.ui-badge-accent {
    background: var(--ui-primary);
    color: var(--ui-text-bright);
}

/* --- Indicators --- */

.ui-indicator {
    background: var(--ui-primary-light);
    border-left: 3px solid var(--ui-accent-teal);
    border-radius: 4px;
    padding: 6px 10px;
    color: var(--ui-text-muted);
    font-size: 12px;
}

/* --- @mention highlight (chat / comments / notifications / canvas via JS) --- */

.kk-mention {
    color: #4ec5c1;
    font-weight: 600;
}

/* Mentions OF the current user — slightly warmer, draws the eye when scanning */
.kk-mention-self {
    color: #ff8a5a;
    background: rgba(255, 107, 53, 0.12);
    border-radius: 4px;
    padding: 0 4px;
}

/* --- Scrollbar theming --- */

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

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

.ui-scrollbar::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 3px;
}

.ui-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--ui-border-accent);
}

/* --- Highlight (search) --- */

.ui-highlight {
    background: var(--ui-highlight);
    border-radius: 2px;
    padding: 0 2px;
}

/* --- Tooltip --- */

.ui-tooltip {
    background: var(--ui-surface);
    border: 2px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
    box-shadow: 0 4px 12px var(--ui-shadow);
    padding: 6px 10px;
    font-size: 12px;
}

/* Native controls (sliders, checkboxes, selects) follow the theme accent */
input[type="range"], input[type="checkbox"], input[type="radio"], progress { accent-color: var(--ui-accent); }

/* ===== Image Edit / Grade / Path Tracer panels — dressed like the Look panel ===== */
#imageEditPanel,
#gradePropertiesPanel,
#ptPropertiesPanel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-faint);
    border-radius: 11px;
    width: 272px;
    box-shadow: 0 26px 54px -18px var(--ui-shadow);
    font-family: var(--ui-font);
    padding: 0 12px 10px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    max-height: 84vh;
    overflow-y: auto;
}
#imageEditPanel input[type="range"],
#gradePropertiesPanel input[type="range"],
#ptPropertiesPanel input[type="range"] {
    accent-color: var(--ui-accent);
    cursor: ew-resize;
}
#imageEditPanel label,
#gradePropertiesPanel label,
#ptPropertiesPanel label {
    color: var(--ui-text-muted);
    font-size: 11px;
}
/* PT keeps its amber identity — one accent variable's worth of difference */
#ptPropertiesPanel input[type="range"] { accent-color: #e0a040; }
.imgEditTab,
.grade-tab {
    flex: 1;
    min-width: 50px;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 11px;
    font-family: var(--ui-font);
    background: rgba(0, 0, 0, 0.3);
    color: var(--ui-text-muted);
}
.imgEditTab.active,
.grade-tab.active {
    background: rgba(var(--ui-accent-rgb), 0.18);
    color: var(--ui-text-bright);
    font-weight: 600;
}