.outer {
    width: 100%;
    min-height: 100vh;
}

.ide {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #2a2230;
    overflow-y: auto;
    background-color: #0d0b0f;
    color: #e0ceed;
    font-family: monospace;
    font-size: 11pt;
}

.sidebar.collapsed {
    width: 0;
    border-right: none;
    overflow: hidden;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

h1 {
    text-align: center;
}

.repl-text {
    color: #e0ceed;
    background-color: #110e13;
    font-size: clamp(10pt, 2.5vw, 12pt);
    font-family: monospace;
}

.repl {
    display: flex;
    flex-direction: column;
    white-space: pre;
    padding: 0;
    border-radius: 4px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* In outer mode, allow overflow so sticky prompt works against body scroll */
.outer .repl {
    overflow: visible;
}

.repl .log {
    white-space: pre-wrap;
    color: #e0ceed;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    padding-bottom: 0.5rem;
}

.repl .prompt {
    white-space: pre;
    display: flex;
    align-items: flex-start;
    padding: 0.25rem 1rem;
    border-top: 1px solid #1a1520;
    flex-shrink: 0;
}

/* Sticky prompt: stays at viewport bottom when scrolled away, seamlessly
   rejoins normal flow once the user scrolls down to the repl's end. */
.outer .repl .prompt {
    position: sticky;
    bottom: 0;
    background-color: #110e13;
    z-index: 10;
}

.repl .prompt textarea {
    flex-grow: 100;
    border: 0;
    padding: 0;
    color: #e0ceed;
    background-color: transparent;
    resize: none;
    overflow: hidden;
    min-height: 1.5em;
}

.repl .prompt textarea:focus {
    outline:none;
}

.repl .prompt .prompt-text {
    color: #a8e6cf;
    user-select: none;
    padding-right: 0.25em;
    flex-shrink: 0;
}

.repl .prompt:focus-within {
    box-shadow: none;
}

.mic-btn {
    flex-shrink: 0;
    cursor: pointer;
    padding: 0 0.4rem;
    font-size: 1rem;
    line-height: 1.5em;
    opacity: 0.5;
    transition: opacity 0.15s;
    user-select: none;
}
.mic-btn:hover { opacity: 0.85; }

.mic-options {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    position: relative;
}
.mic-option {
    flex: 1;
    border: 1px solid #3a2f44;
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    background-color: #181420;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
}
.mic-option:hover {
    border-color: #c4a7e7;
    background-color: #1f1a2a;
}
.mic-option-label {
    color: #c4a7e7;
    font-size: 0.85em;
    margin-bottom: 0.25rem;
}
.mic-option-body {
    color: #e0ceed;
    font-family: monospace;
    font-size: 0.9em;
    white-space: pre-wrap;
    word-break: break-word;
}
.mic-option-dismiss {
    position: absolute;
    top: 0.25rem;
    right: 0.5rem;
    cursor: pointer;
    color: #6b5b7b;
    user-select: none;
    font-size: 0.9em;
}
.mic-option-dismiss:hover { color: #e0ceed; }
.mic-active {
    opacity: 1 !important;
    animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.prompt-text { color: #8b7b96; }
.input-text  { color: #e0ceed; }
.result-text { color: #a8e6cf; }
.error-text  { color: #ff6b6b; }
.output-text { color: #e0ceed; }
.info-text   { color: #b8a8c8; }
.heading-text { color: #c4a7e7; }
.accent-text  { color: #a8e6cf; }
.dim-text     { color: #6b5b7b; }
.title-text   { color: #c4a7e7; font-size: 1.4em; }
.tagline-text { color: #f6c177; }

.paren-indicator {
    color: #8b7b96;
    padding-left: 0.5em;
    font-size: 0.9em;
}

/* Sidebar header */
.sidebar-header {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #2a2230;
    flex-shrink: 0;
}
.sidebar-title {
    color: #8b7b96;
    font-size: 10pt;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.sidebar-toggle {
    cursor: pointer;
    color: #8b7b96;
    padding: 0 0.5rem;
    user-select: none;
}
.sidebar-toggle:hover { color: #e0ceed; }

/* Expand tab (visible when sidebar collapsed) */
.expand-tab {
    position: absolute;
    top: 0.5rem;
    left: 0.25rem;
    cursor: pointer;
    color: #8b7b96;
    font-family: monospace;
    font-size: 11pt;
    z-index: 1;
    user-select: none;
    padding: 0.25rem;
}
.expand-tab:hover { color: #e0ceed; }

/* Org list items */
.org-item {
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.org-item:hover { background-color: #1a1520; }
.org-item.selected { background-color: #1e1828; }
.org-item.active .org-name { color: #a8e6cf; }
.org-name { flex: 1; }
.org-action {
    color: #8b7b96;
    font-size: 10pt;
    cursor: pointer;
}
.org-action:hover { color: #e0ceed; }

/* Inspector detail (unified view) */
.org-detail {
    border-top: 1px solid #2a2230;
    padding: 0.5rem 0;
}
.section-header {
    color: #8b7b96;
    font-size: 9pt;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.5rem 0.75rem 0.25rem;
    border-bottom: 1px solid #1a1520;
    margin-top: 0.25rem;
}
.section-header:first-child { margin-top: 0; }
.inspector-row {
    padding: 0.15rem 0.75rem;
    font-size: 10pt;
    color: #b8a8c8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inspector-row .name { color: #e0ceed; }
.inspector-row .value { color: #8b7b96; }
.inspector-row .version { color: #a8e6cf; }
.inspector-row .expressor-id { color: #b8a8c8; }

/* Empty state + detail header */
.sidebar-empty {
    color: #8b7b96;
    padding: 1rem 0.75rem;
    font-size: 10pt;
    white-space: pre-wrap;
}
.detail-header {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #2a2230;
}
.detail-header .org-name {
    flex: 1;
    color: #e0ceed;
}
.detail-header .org-action {
    color: #8b7b96;
    font-size: 10pt;
    cursor: pointer;
}
.detail-header .org-action:hover { color: #e0ceed; }

/* Delete button */
.org-delete { color: #ff6b6b; margin-left: 0.5rem; }
.org-delete:hover { color: #ff4444; }

/* Clickable inspector items */
.clickable { cursor: pointer; }
.clickable:hover { text-decoration: underline; }

/* Expressor filter */
.active-filter { background-color: #1e1828; }
.filter-badge { color: #ff6b6b; font-size: 9pt; cursor: pointer; margin-left: 0.5rem; }
.filter-badge:hover { color: #ff4444; }

/* Tab bar */
.tab-bar {
    display: flex;
    border-bottom: 1px solid #2a2230;
    background-color: #0d0b0f;
    flex-shrink: 0;
    overflow-x: auto;
    font-family: monospace;
    font-size: 10pt;
}
.tab {
    padding: 0.4rem 0.75rem;
    color: #8b7b96;
    cursor: pointer;
    white-space: nowrap;
    border-right: 1px solid #1a1520;
    user-select: none;
}
.tab:hover { background-color: #1a1520; color: #e0ceed; }
.tab-active { color: #a8e6cf; background-color: #110e13; border-bottom: 2px solid #a8e6cf; }

/* Ghost text autocomplete suggestion */
.ghost-text-suggestion {
    color: #4a4450;
    pointer-events: none;
    font-family: monospace;
    font-size: 12pt;
}

/* Code Viewer */
.code-viewer {
    position: fixed;
    top: 0;
    right: 0;
    width: 45%;
    height: 100vh;
    background-color: #0d0b0f;
    border-left: 1px solid #2a2230;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.code-viewer-header {
    padding: 0.75rem;
    border-bottom: 1px solid #2a2230;
    color: #8b7b96;
    font-size: 10pt;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: monospace;
    flex-shrink: 0;
}

.code-viewer-content {
    flex: 1;
    margin: 0;
    padding: 1rem;
    overflow: auto;
    color: #e0ceed;
    background-color: #0d0b0f;
    font-family: monospace;
    font-size: 11pt;
    line-height: 1.5;
    white-space: pre;
    tab-size: 2;
}

/* Terminal mount for xterm.js */
.terminal-mount {
    flex: 1;
    padding: 0;
    overflow: hidden;
}
.terminal-mount .xterm {
    height: 100%;
}
.code-viewer-header .cp-btn {
    margin-left: 0.5rem;
    font-size: 9pt;
    padding: 0.1rem 0.4rem;
}

/* Governed UI widgets — rendered from org's ui-widgets binding */
.ui-widgets:not(:empty) {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #1a1520;
    color: #e0ceed;
    font-family: monospace;
    font-size: 11pt;
}

/* Adjust main layout to accommodate code viewer */
body:has(.code-viewer) .ide {
    margin-right: 45%;
}

/* ── Control Panel ───────────────────────────────────────────────────── */

.action-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #2a2230;
    background-color: #0d0b0f;
    font-family: monospace;
    font-size: 10pt;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.cp-btn {
    padding: 0.2rem 0.6rem;
    color: #b8a8c8;
    background-color: #1a1520;
    border: 1px solid #2a2230;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    font-family: monospace;
    font-size: 10pt;
    white-space: nowrap;
}
.cp-btn:hover {
    color: #e0ceed;
    background-color: #1e1828;
    border-color: #3a3240;
}

.cp-btn-primary {
    color: #a8e6cf;
    border-color: #2a4a3a;
}
.cp-btn-primary:hover {
    background-color: #1a2a22;
    border-color: #3a6a4a;
}

.cp-btn-danger {
    color: #ff6b6b;
    border-color: #4a2a2a;
}
.cp-btn-danger:hover {
    background-color: #2a1a1a;
    border-color: #6a3a3a;
}

.cp-action {
    color: #8b7b96;
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    font-family: monospace;
    font-size: 10pt;
}
.cp-action:hover {
    color: #a8e6cf;
}

.cp-form {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #1a1520;
}

.cp-input {
    width: calc(100% - 1rem);
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.4rem;
    color: #e0ceed;
    background-color: #110e13;
    border: 1px solid #2a2230;
    border-radius: 3px;
    font-family: monospace;
    font-size: 10pt;
    outline: none;
    box-sizing: border-box;
}
.cp-input:focus {
    border-color: #a8e6cf;
    box-shadow: 0 0 4px rgba(168, 230, 207, 0.1);
}
.cp-input::placeholder {
    color: #4a4450;
}

.cp-btn-row {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.3rem;
}

.cp-status {
    color: #8b7b96;
    font-size: 9pt;
    margin-left: auto;
    font-family: monospace;
}
.cp-status-connected {
    color: #a8e6cf;
}
.cp-status-disconnected {
    color: #ff6b6b;
}

/* ── Session selectors (scope + acting-as in the action-bar) ─────────── */

.session-field {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.session-label {
    color: #8b7b96;
    font-size: 9pt;
    font-family: monospace;
    text-transform: lowercase;
}
.session-select {
    background-color: #1a1520;
    border: 1px solid #2a2230;
    border-radius: 3px;
    color: #b8a8c8;
    font-family: monospace;
    font-size: 10pt;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
}
.session-select:hover {
    color: #e0ceed;
    border-color: #3a3240;
}
.session-select:focus {
    outline: none;
    border-color: #a8e6cf;
}

.inspector-actions {
    padding: 0.4rem 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    border-bottom: 1px solid #1a1520;
}

.cp-confirm {
    color: #ff6b6b;
    font-size: 10pt;
    font-family: monospace;
    padding: 0.2rem 0.4rem;
}

/* Responsive */
@media (max-width: 768px) {
    .sidebar { width: 0; border-right: none; overflow: hidden; }
    .repl .prompt { padding: 0.25rem 0; }

    .code-viewer {
        width: 100%;
        height: 40vh;
        top: auto;
        bottom: 0;
        border-left: none;
        border-top: 1px solid #2a2230;
    }

    body:has(.code-viewer) .ide {
        margin-right: 0;
        margin-bottom: 40vh;
    }

    /* Inventory: stack sidebar / grid / detail vertically so each fits.
       Category sidebar becomes a horizontally-scrollable strip on top;
       detail becomes a bottom sheet. */
    .inv-body { flex-direction: column; }
    .inv-cat-sidebar {
        width: 100%;
        flex: 0 0 auto;
        max-height: none;
        padding: 4px 6px;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
    }
    .inv-cat-header {
        padding: 4px 8px 4px 0;
        align-self: center;
        flex-shrink: 0;
        border-right: 1px solid #2a2230;
    }
    .inv-cat-row {
        padding: 4px 8px;
        border-left: none;
        border-bottom: 2px solid transparent;
        flex-shrink: 0;
    }
    .inv-cat-row.active {
        border-left: none;
        border-bottom-color: #a8e6cf;
    }
    .inv-detail {
        width: 100%;
        flex: 0 0 auto;
        max-height: 45vh;
        border-left: none;
        border-top: 1px solid #2a2230;
    }
}

/* ─── Inventory tab ─────────────────────────────────────────────────────── */
/* Minecraft-style resource library: left category sidebar + spec grid +
   right detail pane. The grid cells are square, the right pane shows
   either spec-detail (concrete resources conforming to the clicked spec)
   or resource-detail (custodian + collapsed history + nested children). */

.inv-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.inv-body {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    padding: 8px;
    min-height: 0;
}

/* ── View-mode toggle (personal / scope) ── */
.inv-view-toggle {
    display: flex;
    gap: 0;
    padding: 4px 8px;
}
.inv-view-pill {
    background: transparent;
    border: 1px solid #2a2230;
    color: #5a4d65;
    font-family: monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 14px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.inv-view-pill:first-child {
    border-radius: 3px 0 0 3px;
    border-right: none;
}
.inv-view-pill:last-child {
    border-radius: 0 3px 3px 0;
}
.inv-view-pill:hover {
    border-color: #6b5b7b;
    color: #8e7ea0;
}
.inv-view-pill.active {
    background: #2a2230;
    color: #c8b8d8;
    border-color: #6b5b7b;
}

/* ── Category sidebar ── */
.inv-cat-sidebar {
    width: 180px;
    flex: 0 0 180px;
    overflow-y: auto;
    background: #0d0b0f;
    border: 1px solid #2a2230;
    padding: 6px 0;
    font-size: 9pt;
    font-family: monospace;
}
.inv-cat-header {
    padding: 4px 10px 8px 10px;
    color: #5a4d65;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 8pt;
}
.inv-cat-row {
    padding: 4px 10px;
    cursor: pointer;
    color: #8b7b96;
    border-left: 2px solid transparent;
}
.inv-cat-row:hover {
    color: #a8e6cf;
    background: #1a1520;
}
.inv-cat-row.active {
    color: #a8e6cf;
    border-left-color: #a8e6cf;
    background: #1a1520;
}

/* ── Minecraft grid ── */
.inv-grid-wrap {
    flex: 1 1 auto;
    overflow-y: auto;
    min-width: 0;
}
.inv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 4px;
    padding: 6px;
    background: #0d0b0f;
    border: 2px solid #2a2230;
}
.inv-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #1a1520;
    border: 1px solid #2a2230;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.inv-cell:hover {
    background: #251c30;
    border-color: #a8e6cf;
}
.inv-cell.selected {
    border-color: #e8b04e;
    box-shadow: 0 0 0 1px #e8b04e inset;
}
.inv-cell-icon {
    font-size: 14pt;
    color: #e0ceed;
    font-family: monospace;
    font-weight: bold;
    text-align: center;
    pointer-events: none;
}
.inv-cell-img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
}
.inv-cell-count {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 9pt;
    color: #a8e6cf;
    font-family: monospace;
    pointer-events: none;
    text-shadow: 0 0 2px #000;
}
.inv-cell-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #0d0b0f;
    border: 1px solid #a8e6cf;
    padding: 6px 8px;
    z-index: 10;
    min-width: 160px;
    font-size: 9pt;
    color: #e0ceed;
    pointer-events: none;
    white-space: nowrap;
}
.inv-cell:hover .inv-cell-tooltip {
    display: block;
}
.tt-name {
    color: #a8e6cf;
    font-weight: bold;
    margin-bottom: 2px;
}
.tt-onhand {
    color: #8b7b96;
    font-family: monospace;
}
.tt-cats {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.tt-cat-chip {
    font-size: 8pt;
    color: #5a4d65;
    background: #1a1520;
    padding: 1px 4px;
    border: 1px solid #2a2230;
}

.inv-empty {
    padding: 16px;
    color: #5a4d65;
    font-size: 9pt;
    font-family: monospace;
    text-align: center;
}

/* ── Right detail pane ── */
.inv-detail {
    width: 340px;
    flex: 0 0 340px;
    background: #110e13;
    border: 1px solid #2a2230;
    padding: 12px;
    overflow-y: auto;
    font-size: 9pt;
    color: #e0ceed;
    font-family: monospace;
}
.inv-detail-hint {
    color: #5a4d65;
}
.inv-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #2a2230;
}
.inv-detail-title {
    color: #a8e6cf;
    font-weight: bold;
    font-size: 11pt;
}
.inv-detail-close {
    cursor: pointer;
    color: #5a4d65;
    font-size: 14pt;
    padding: 0 4px;
    line-height: 1;
}
.inv-detail-close:hover {
    color: #fc5858;
}
.inv-detail-cats {
    margin: 4px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.inv-detail-note {
    margin: 6px 0;
    padding: 6px 8px;
    background: #0d0b0f;
    color: #8b7b96;
    border-left: 2px solid #2a2230;
}
.inv-detail-section {
    margin: 12px 0 6px 0;
    color: #5a4d65;
    text-transform: uppercase;
    font-size: 8pt;
    letter-spacing: 0.05em;
}
.inv-detail-meta {
    margin: 6px 0;
}
.inv-meta-row {
    display: flex;
    gap: 8px;
    padding: 2px 0;
}
.inv-meta-key {
    color: #5a4d65;
    width: 80px;
    flex: 0 0 80px;
}
.inv-meta-val {
    color: #e0ceed;
    word-break: break-all;
}

.inv-current-custodian {
    padding: 8px 10px;
    background: #0d0b0f;
    border-left: 3px solid #a8e6cf;
    margin: 8px 0;
    color: #a8e6cf;
    font-weight: bold;
}

/* ── Custody history (collapsible) ── */
.inv-custody-block {
    margin: 8px 0;
}
.inv-custody-toggle {
    cursor: pointer;
    color: #8b7b96;
    font-family: monospace;
    padding: 4px 0;
    user-select: none;
}
.inv-custody-toggle:hover {
    color: #a8e6cf;
}
.inv-custody {
    border-left: 2px solid #2a2230;
    margin: 4px 0 8px 8px;
    padding-left: 12px;
}
.inv-custody-step {
    padding: 4px 0;
    color: #8b7b96;
    font-size: 9pt;
    font-family: monospace;
}
.inv-custody-step.current {
    color: #a8e6cf;
}
.inv-custody-agent {
    color: #e0ceed;
}
.inv-custody-action {
    color: #e8b04e;
}
.inv-custody-when {
    color: #5a4d65;
}

/* ── Breadcrumb ── */
.inv-breadcrumb {
    font-size: 9pt;
    color: #8b7b96;
    margin: 4px 0 8px 0;
    word-break: break-all;
}
.inv-breadcrumb .crumb {
    cursor: pointer;
    color: #8b7b96;
}
.inv-breadcrumb .crumb:hover {
    color: #a8e6cf;
}
.inv-breadcrumb .crumb-current {
    color: #a8e6cf;
}
.inv-breadcrumb .crumb-sep {
    color: #2a2230;
    margin: 0 2px;
}

/* ── Concrete resource cards (used by spec-detail and child grid) ── */
.inv-children-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
    margin-top: 4px;
}
.inv-rcard {
    background: #0d0b0f;
    border: 1px solid #2a2230;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 9pt;
    font-family: monospace;
}
.inv-rcard:hover {
    border-color: #a8e6cf;
}
.inv-rcard.selected {
    border-color: #e8b04e;
}
.inv-rcard-name {
    color: #e0ceed;
    margin-bottom: 2px;
    word-break: break-word;
}
.inv-rcard-qty {
    color: #a8e6cf;
    font-size: 8pt;
}
.inv-rcard-meta {
    margin-top: 2px;
    display: flex;
    gap: 6px;
    align-items: center;
    color: #5a4d65;
    font-size: 8pt;
}
.inv-rcard-custodian {
    color: #8b7b96;
}
.inv-rcard-nested {
    color: #e8b04e;
}

/* ── Map tab ──────────────────────────────────────────────────────────────── */
.map-tab {
    position: relative;
    width: 100%;
    /* .outer doesn't propagate height; pin to viewport minus tab/action bars. */
    height: calc(100vh - 96px);
    min-height: 320px;
    background: #0a0810;
    overflow: hidden;
}
.map-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #0a0810;
}
.map-canvas .maplibregl-canvas { outline: none; }
.map-canvas .maplibregl-map { width: 100%; height: 100%; }

/* Side panel — floating card overlaid on the map, top-left */
.map-side-panel {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 320px;
    max-height: calc(100% - 24px);
    background: rgba(24, 20, 32, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(110, 78, 168, 0.35);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    color: #d8c8e6;
    overflow: hidden;
    z-index: 10;
}
.map-side-panel .panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
}
.map-side-panel .panel-hint {
    color: #6a5a78;
    font-size: 9pt;
    font-style: italic;
}
.map-side-panel .panel-meta {
    color: #8b7b96;
    font-size: 8.5pt;
    margin-bottom: 4px;
}
.map-side-panel .panel-section-title {
    margin: 10px 0 6px;
    color: #cbb8d8;
    font-size: 9pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.map-side-panel .panel-close {
    cursor: pointer;
    color: #8b7b96;
    padding: 0 6px;
}
.map-side-panel .panel-close:hover { color: #efe2fa; }
.map-side-panel .panel-row,
.map-side-panel .panel-slot {
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 4px;
    background: rgba(26, 20, 34, 0.55);
}
.map-side-panel .panel-row:hover { background: rgba(38, 26, 50, 0.85); }
.map-side-panel .panel-row-inner {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 9pt;
}
.map-side-panel .row-emoji { font-size: 13pt; }
.map-side-panel .row-label { flex: 1; color: #efe2fa; }
.map-side-panel .row-count { color: #8b7b96; font-size: 8pt; }

/* Journey (Valhalla routing) — same card language, route-blue accent */
.map-side-panel .journey-route-btn {
    margin: 6px 0 10px;
    padding: 6px 10px;
    border-radius: 8px;
    text-align: center;
    font-size: 9pt;
    color: #bcd8ff;
    background: rgba(78, 161, 255, 0.12);
    border: 1px solid rgba(78, 161, 255, 0.35);
    cursor: pointer;
}
.map-side-panel .journey-route-btn:hover {
    background: rgba(78, 161, 255, 0.25);
    color: #eaf4ff;
}
.map-side-panel .journey-dest { color: #cbb8d8; font-size: 9.5pt; }
.map-side-panel .journey-profiles {
    display: flex;
    gap: 6px;
    margin: 8px 0;
}
.map-side-panel .journey-profile-pill {
    flex: 1;
    text-align: center;
    padding: 4px 0;
    border-radius: 8px;
    font-size: 11pt;
    cursor: pointer;
    background: rgba(26, 20, 34, 0.55);
    border: 1px solid transparent;
    opacity: 0.6;
}
.map-side-panel .journey-profile-pill:hover { opacity: 1; }
.map-side-panel .journey-profile-pill.active {
    opacity: 1;
    background: rgba(78, 161, 255, 0.15);
    border-color: rgba(78, 161, 255, 0.45);
}
.map-side-panel .journey-summary {
    margin: 4px 0 8px;
    font-size: 10pt;
    color: #eaf4ff;
}
/* the journey's chat — strata as read-side chips, authors tinted by
   what they WERE when they spoke */
.map-side-panel .walkie-live { margin: 6px 0; }
.map-side-panel .walkie-join, .map-side-panel .walkie-ptt {
    display: inline-block; padding: 5px 12px; border-radius: 12px; cursor: pointer;
    font-size: 9pt; border: 1px solid rgba(126, 208, 154, 0.5); color: #9fdcb2; }
.map-side-panel .walkie-join.on { background: rgba(126, 208, 154, 0.18);
    color: #bfeccd; }
.map-side-panel .chat-walkie.live { border-color: #e08a8a; color: #ffc8c8; }
.map-side-panel .chat-walkie.on { background: rgba(220, 80, 80, 0.3);
    border-color: #e08a8a; color: #ffe0e0; }
.map-side-panel .network-open-btn { display: inline-block; margin-top: 8px;
    padding: 6px 12px; border-radius: 10px; cursor: pointer; font-size: 9pt;
    color: #bcd8ff; background: rgba(78, 161, 255, 0.12);
    border: 1px solid rgba(78, 161, 255, 0.35); }
.map-side-panel .network-open-btn:hover { background: rgba(78, 161, 255, 0.25); }
.map-side-panel .chat-walkie { padding: 3px 9px; border-radius: 9px; cursor: pointer;
    border: 1px solid rgba(126, 208, 154, 0.5); color: #9fdcb2; }
.map-side-panel .chat-walkie.on { background: rgba(200, 80, 80, 0.3);
    border-color: #d27a7a; color: #ffd9d9; }
.map-side-panel .journey-chat { border-top: 1px solid rgba(110, 78, 168, 0.25);
    padding-top: 7px; margin-top: 8px; }
.map-side-panel .chat-chips { display: flex; gap: 5px; margin-bottom: 6px; }
.map-side-panel .chat-chip { font-size: 7.5pt; padding: 1px 8px; border-radius: 9px;
    border: 1px solid; cursor: pointer; opacity: 0.4; user-select: none; }
.map-side-panel .chat-chip.on { opacity: 1; }
.map-side-panel .s-public    { color: #9a9aa8; border-color: #9a9aa8; }
.map-side-panel .s-willing   { color: #6fb3d2; border-color: #6fb3d2; }
.map-side-panel .s-committed { color: #4ea1ff; border-color: #4ea1ff; }
.map-side-panel .s-satisfied { color: #7ed09a; border-color: #7ed09a; }
.map-side-panel .s-transcript { color: #d8b25a; border-color: #d8b25a; }
.map-side-panel .chat-list { max-height: 150px; overflow-y: auto; margin-bottom: 6px; }
.map-side-panel .chat-msg { font-size: 8.5pt; padding: 2px 0; line-height: 1.4;
    color: #d8c8e6; }
.map-side-panel .chat-auth { font-weight: 600; font-size: 7.5pt; margin-right: 6px;
    border: none; }
.map-side-panel .chat-empty { color: #6a5a78; font-size: 8.5pt; font-style: italic;
    margin-bottom: 6px; }
.map-side-panel .chat-row { display: flex; gap: 5px; }
.map-side-panel .chat-row input { flex: 1; font-size: 9pt; padding: 4px 9px;
    border-radius: 9px; border: 1px solid rgba(110, 78, 168, 0.35);
    background: rgba(26, 20, 34, 0.55); color: #efe2fa; font-family: inherit; }
.map-side-panel .chat-send { padding: 3px 10px; border-radius: 9px; cursor: pointer;
    border: 1px solid rgba(78, 161, 255, 0.45); color: #bcd8ff; }
.map-side-panel .chat-send:hover { background: rgba(78, 161, 255, 0.2); }
.map-side-panel .journey-divergence {
    margin: 2px 0 8px;
    font-size: 8.5pt;
    color: #ffd9a0;
}
.map-side-panel .journey-recorded {
    margin: 6px 0 10px;
    padding: 6px 10px;
    border-radius: 8px;
    text-align: center;
    font-size: 8.5pt;
    color: #9fdcb2;
    background: rgba(80, 200, 120, 0.10);
    border: 1px solid rgba(80, 200, 120, 0.30);
}
.map-side-panel .journey-turns {
    border-top: 1px solid rgba(110, 78, 168, 0.25);
    padding-top: 6px;
}
.map-side-panel .journey-turn {
    font-size: 8.5pt;
    color: #b7a8c4;
    padding: 3px 0 3px 12px;
    position: relative;
}
.map-side-panel .journey-turn::before {
    content: "•";
    position: absolute;
    left: 0;
    color: rgba(78, 161, 255, 0.7);
}

/* Search row at the top of the panel */
.map-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(110, 78, 168, 0.25);
}
.map-search-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid rgba(110, 78, 168, 0.35);
    background: rgba(10, 8, 16, 0.7);
    color: #efe2fa;
    border-radius: 8px;
    font: inherit;
    font-size: 10pt;
    outline: none;
}
.map-search-input::placeholder { color: #6a5a78; }
.map-search-clear {
    cursor: pointer;
    color: #8b7b96;
    padding: 2px 8px;
    border-radius: 6px;
    user-select: none;
}
.map-search-clear:hover { color: #efe2fa; background: rgba(110, 78, 168, 0.25); }

/* Bottom-right floating control cluster (cog + expanded menu) */
.map-fab {
    position: absolute;
    right: 12px;
    bottom: 44px;             /* sits above maplibre's geolocate dot */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    z-index: 10;
}
.map-fab-toggle {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(110, 78, 168, 0.5);
    background: rgba(24, 20, 32, 0.92);
    color: #efe2fa;
    cursor: pointer;
    font-size: 14pt;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.map-fab-toggle:hover { background: rgba(40, 30, 56, 0.95); }
.map-fab-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    background: rgba(24, 20, 32, 0.95);
    border: 1px solid rgba(110, 78, 168, 0.45);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.map-fab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(34, 26, 44, 0.85);
    color: #cbb8d8;
    cursor: pointer;
    font-size: 9pt;
    white-space: nowrap;
}
.map-fab-btn:hover { background: rgba(48, 36, 64, 0.95); }
.map-fab-btn.active {
    background: #6f4ea8;
    border-color: #8a64c8;
    color: #fff;
}

/* Markers (DOM elements handed to maplibre) */
.map-slot-marker, .map-cluster-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transform-origin: center bottom;
}
.map-slot-marker .marker-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #6f4ea8;
    border: 2px solid #efe2fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.map-slot-marker .marker-label {
    margin-top: 2px;
    padding: 1px 6px;
    background: rgba(24,20,32,0.85);
    color: #efe2fa;
    border-radius: 8px;
    font-size: 8pt;
    white-space: nowrap;
}
.map-cluster-marker .emoji-pack {
    display: flex;
    gap: 2px;
    padding: 4px 8px;
    background: #ff6b6b;
    border: 2px solid #efe2fa;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.map-cluster-marker .packed-emoji { font-size: 14px; }
.map-cluster-marker .cluster-count {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #ff6b6b;
    border: 2px solid #efe2fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.map-cluster-marker .cluster-count-n { font-weight: 700; font-size: 12pt; line-height: 1; }
.map-cluster-marker .cluster-count-label { font-size: 6.5pt; opacity: 0.85; }

/* Search row — input + time-filter pill side by side */
.map-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(110, 78, 168, 0.25);
}
.map-search-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.map-time-pill {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: 1px solid rgba(110, 78, 168, 0.35);
    background: rgba(10, 8, 16, 0.5);
    border-radius: 8px;
    font-size: 9pt;
    color: #cbb8d8;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.map-time-pill:hover { background: rgba(40, 30, 56, 0.8); }
.map-time-icon { font-size: 10pt; opacity: 0.85; }
.map-time-caret { font-size: 8pt; opacity: 0.6; }

/* Search results header + result cards */
.search-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(110, 78, 168, 0.18);
}
.search-summary-count {
    font-size: 9pt;
    color: #cbb8d8;
    font-weight: 600;
    letter-spacing: 0.06em;
}
.search-summary-sort {
    font-size: 9pt;
    color: #8b7b96;
    cursor: pointer;
}
.search-summary-sort:hover { color: #efe2fa; }
.search-card {
    padding: 10px 12px;
    margin: 6px 0;
    border-radius: 10px;
    background: rgba(26, 20, 34, 0.65);
    border: 1px solid rgba(110, 78, 168, 0.2);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.search-card:hover {
    background: rgba(42, 30, 56, 0.85);
    border-color: rgba(140, 100, 200, 0.5);
}
.search-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5pt;
    color: #8ab4ff;
    font-weight: 600;
    margin-bottom: 4px;
}
.search-card-emoji { font-size: 13pt; flex-shrink: 0; }
.search-card-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 8.5pt;
    color: #8b7b96;
    gap: 8px;
}
.search-card-provider {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-card-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(50, 80, 140, 0.4);
    color: #b8d0ff;
    font-weight: 500;
}

.toast-container {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    background: #1e1a22;
    border: 1px solid #3a3340;
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    animation: toast-in 0.2s ease-out;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.toast-alert  { border-left: 3px solid #ff6b6b; }
.toast-info   { border-left: 3px solid #b8a8c8; }
.toast-normal { border-left: 3px solid #a8e6cf; }
.toast-title  { font-weight: 600; margin-bottom: 2px; }
.toast-body   { font-size: 0.9em; opacity: 0.8; }
@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Priority tree (treemap) ──────────────────────────────────────────���─ */
.prio-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 96px);
    min-height: 320px;
}
.prio-breadcrumb {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    font-family: monospace;
    font-size: 10pt;
    color: #8b7b96;
    border-bottom: 1px solid #2a2230;
    background: #0d0b0f;
    overflow-x: auto;
    white-space: nowrap;
    flex-shrink: 0;
}
.prio-crumb {
    cursor: pointer;
    padding: 0.1rem 0.2rem;
    border-radius: 2px;
}
.prio-crumb:hover { color: #e0ceed; background: #1a1520; }
.prio-crumb-active { color: #a8e6cf; cursor: default; }
.prio-crumb-active:hover { background: transparent; color: #a8e6cf; }
.prio-crumb-sep { color: #4a3d55; margin: 0 0.1rem; }
.prio-treemap-container {
    position: relative;
    flex: 1;
    margin: 0.25rem;
    min-height: 0;
}
.prio-node {
    position: absolute;
    border: 1px solid #2a2230;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: box-shadow 0.15s ease;
    box-sizing: border-box;
}
.prio-node:hover { border-color: #4a3d55; }
.prio-node.prio-resizing {
    box-shadow: 0 0 12px rgba(168, 230, 207, 0.4);
    border-color: #a8e6cf;
    z-index: 10;
}
.prio-node.prio-dimmed { opacity: 0.5; }
.prio-node.prio-deleting {
    cursor: not-allowed;
    border-style: dashed;
    border-color: #ff6b6b;
}
.prio-node.prio-deleting:hover {
    background: rgba(255, 107, 107, 0.15) !important;
    border-color: #ff6b6b;
}
.prio-node.prio-has-children .prio-node-label::after {
    content: ' ▸';
    color: rgba(168, 230, 207, 0.5);
    font-size: 0.8em;
}
.prio-node-label {
    font-family: monospace;
    font-size: clamp(9px, 2.5vw, 15px);
    color: #e0ceed;
    text-align: center;
    padding: 0.25rem 0.4rem;
    word-break: break-word;
    overflow: hidden;
    max-height: 80%;
    cursor: text;
}
.prio-node-points {
    font-family: monospace;
    font-size: 9px;
    color: rgba(168, 230, 207, 0.35);
    position: absolute;
    bottom: 3px;
    right: 6px;
}
.prio-node-input {
    font-family: monospace;
    font-size: 13px;
    color: #e0ceed;
    background: #1a1520;
    border: 1px solid #a8e6cf;
    border-radius: 3px;
    padding: 0.3rem 0.5rem;
    outline: none;
    width: 80%;
    text-align: center;
    z-index: 100;
}
.prio-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.prio-empty-prompt { text-align: center; }
.prio-add-btn {
    font-family: monospace;
    font-size: 12pt;
    color: #a8e6cf;
    background: #1a1520;
    border: 1px dashed #4a3d55;
    border-radius: 6px;
    padding: 0.8rem 1.5rem;
    cursor: pointer;
}
.prio-add-btn:hover { background: #2a2230; border-color: #a8e6cf; }
.prio-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.3rem;
    padding: 0.3rem 0.5rem;
    border-top: 1px solid #2a2230;
    background: #0d0b0f;
    flex-shrink: 0;
}
.prio-toolbar-btn {
    font-family: monospace;
    font-size: 14pt;
    color: #a8e6cf;
    background: none;
    border: 1px solid #2a2230;
    border-radius: 4px;
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}
.prio-toolbar-btn:hover { background: #1a1520; border-color: #a8e6cf; }
.prio-toolbar-btn.prio-toolbar-active {
    color: #ff6b6b;
    border-color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

/* ══ Reproduction-labour surface (treemap) — responsive layout ══════════════ */
.surface-view   { height: calc(100vh - 92px); background:#0e0e0e;
                  display:flex; flex-direction:column; padding:4px 8px 6px; }
.surface-hint   { font-size:10px; color:#666; font-style:italic; margin-bottom:3px; }
.surface-main   { display:flex; flex:1; min-height:0; }
.surface-left   { display:flex; flex-direction:column; flex:1; min-width:0; }
.surface-frame  { flex:1; min-height:0; min-width:0; }
/* Sidebar column: a header bar (level with the breadcrumb) + the panel body. */
.surface-sidebar-col { width:230px; flex:0 0 230px; display:flex; flex-direction:column;
                       min-height:0; border-left:1px solid #1c2a2a; }
.surface-sidebar-header { display:flex; align-items:center; flex:0 0 auto;
                          background:#16252b; border:1px solid #24424a; border-bottom:none;
                          border-left:none; padding:6px 10px; min-height:31px; box-sizing:border-box; }
.surface-sidebar-body { flex:1; min-height:0; min-width:0; padding:6px 8px 6px 10px;
                        display:flex; flex-direction:column; }
.surface-breadcrumb { display:flex; align-items:center; gap:0; background:#16252b;
                  color:white; border:1px solid #24424a; border-bottom:none;
                  padding:6px 12px; font-size:14px; flex:0 0 auto;
                  min-height:31px; box-sizing:border-box; }
.sh-path    { display:flex; align-items:center; flex-wrap:wrap; }
.sh-toggles { margin-left:auto; display:flex; align-items:center; flex-wrap:wrap; }
.sh-caption { color:#9fb8b0; font-weight:400; margin-left:6px; }

/* Narrow / mobile: stack the header (path → toggles → caption, taller) and
   move the sidebar below the surface as a row of bars. */
@media (max-width: 820px) {
  .surface-breadcrumb { flex-direction:column; align-items:stretch; padding:7px 10px; }
  .sh-path    { order:1; }
  .sh-toggles { order:2; margin-left:0; margin:6px 0; }
  .sh-caption { order:3; margin-left:0; }
  .surface-main    { flex-direction:column; }
  .surface-sidebar-col { width:auto; flex:0 0 auto; border-left:none;
                         border-top:1px solid #1c2a2a; }
  .surface-sidebar-header { border-left:1px solid #24424a; }
  .surface-sidebar-body { height:180px; flex-direction:row; gap:8px; padding:6px 4px; }
}

/* When the map opens *inside* the surface frame, fill the frame (not the
   viewport-pinned height the standalone map tab uses). */
.surface-frame { position: relative; }
.surface-frame .map-tab { height: 100%; min-height: 0; }

/* ── Clock view: the social-time dial ─────────────────────────────────── */
/* touch-action none so two-finger pinch reaches the dial instead of the
   browser's page zoom; the slider underneath is the desktop fallback. */
.clock-frame { display:flex; flex-direction:column; align-items:center;
               padding:12px 8px 20px; }
.clock-svg   { width:min(92vw, 620px); height:auto; touch-action:none;
               user-select:none; -webkit-user-select:none; cursor:ns-resize; }
.clock-controls { display:flex; align-items:center; gap:10px; margin-top:6px; }
.clock-zoom-slider { width:220px; accent-color:#1581a8; }
.clock-zoom-end { font-size:12px; color:#2c4a6e; font-style:italic; }