/* MeshCenter UI Kit
   Shared design tokens and reusable primitives.
   Keep feature-specific layout rules in style.css. */

:root {
    /* Surfaces and text */
    --mc-surface: #ffffff;
    --mc-surface-soft: #f8fafc;
    --mc-text: #0f172a;
    --mc-muted: #64748b;
    --mc-border: #dfe5ee;
    --mc-accent: #1e4f8f;

    /* Spacing and geometry */
    --mc-page-pad: 14px;
    --mc-card-pad: 16px;
    --mc-card-radius: 12px;
    --mc-control-height: 36px;
    --mc-control-radius: 8px;

    /* Typography */
    --mc-page-title-size: 18px;
    --mc-page-title-weight: 700;
    --mc-page-title-line-height: 1.25;
    --mc-card-title-size: 14px;
    --mc-body-size: 12px;
    --mc-caption-size: 10px;
    --mc-control-font-size: 12px;

    /* Workspace headers */
    --mc-workspace-header-height: 72px;
    --mc-workspace-header-padding-x: 16px;
    --mc-workspace-header-padding-y: 14px;
    --mc-workspace-header-bg: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    --mc-page-subtitle-gap: 4px;
    --mc-page-subtitle-line-height: 1.4;

    /* Secondary buttons - Media Refresh is the visual reference */
    --mc-button-secondary-bg: #edf3f9;
    --mc-button-secondary-bg-hover: #e2ebf5;
    --mc-button-secondary-border: #cbd8e6;
    --mc-button-secondary-border-hover: #bdccdc;
    --mc-button-secondary-text: #274766;

    /* Camera controls */
    --mc-camera-control-label-offset: 18px;
}

/* ============================================================
   UI KIT STAGE 2 - unified surfaces, tabs and interaction states
   Loaded after style.css and acts as the final visual layer.
   ============================================================ */

:root {
    /* Application surfaces */
    --mc-bg-app: #eef2f7;
    --mc-bg-workspace: #f5f7fa;
    --mc-bg-panel: #ffffff;
    --mc-bg-subtle: #f7f9fc;
    --mc-bg-muted: #eef3f8;
    --mc-bg-media-stage: #e9edf2;

    /* Borders */
    --mc-border: #d7e0ea;
    --mc-border-soft: #e4eaf1;
    --mc-border-active: #2f73d9;
    --mc-border-focus: #1f6feb;

    /* Brand / interaction */
    --mc-primary: #1f6fdb;
    --mc-primary-hover: #175fc0;
    --mc-primary-soft: #eaf3ff;
    --mc-primary-muted: #dbeafd;

    /* Text */
    --mc-text-primary: #10233f;
    --mc-text-secondary: #58708f;
    --mc-text-muted: #8798ad;
    --mc-text-inverse: #ffffff;

    /* Status */
    --mc-success: #27b96f;
    --mc-success-soft: #e9f8f0;
    --mc-warning: #e6ad22;
    --mc-warning-soft: #fff7df;
    --mc-danger: #e6505d;
    --mc-danger-soft: #fdecee;
    --mc-info: #2f80ed;
    --mc-info-soft: #eaf3ff;

    /* Tabs */
    --mc-tab-bg: #f7f9fc;
    --mc-tab-bg-hover: #ffffff;
    --mc-tab-bg-active: #ffffff;
    --mc-tab-text: #334b68;
    --mc-tab-text-active: #102f5c;
    --mc-tab-line-active: #214f91;

    /* Elevation */
    --mc-shadow-panel: 0 2px 8px rgba(15, 35, 63, 0.045);
    --mc-shadow-hover: 0 6px 16px rgba(15, 35, 63, 0.09);

    /* Backward-compatible aliases */
    --mc-surface: var(--mc-bg-panel);
    --mc-surface-soft: var(--mc-bg-subtle);
    --mc-text: var(--mc-text-primary);
    --mc-muted: var(--mc-text-secondary);
    --mc-accent: var(--mc-tab-line-active);
}

/* ---------- Global surfaces ---------- */
body {
    background: var(--mc-bg-app);
    color: var(--mc-text-primary);
}

.app-container,
.main-layout {
    background: var(--mc-bg-workspace);
}

.chat-area,
.video-view,
.workspace-view,
.media-view,
.system-view,
.settings-view {
    background: var(--mc-bg-workspace);
}

.base-sidebar,
.sidebar {
    background: var(--mc-bg-subtle);
    border-color: var(--mc-border);
}

/* ---------- Shared panel language ---------- */
.video-panel,
.media-panel,
.system-panel,
.settings-header,
.settings-card,
.node-details,
.node-detail-card,
.node-position-card {
    background: var(--mc-bg-panel);
    border-color: var(--mc-border);
    box-shadow: var(--mc-shadow-panel);
}

.system-card,
.node-detail-pane .node-detail-section,
.node-detail-overview-card,
.node-detail-radio-card,
.node-detail-data-section,
.node-detail-log-summary,
.node-event-history,
.node-tool-result,
.camera-image-controls {
    background: var(--mc-bg-subtle);
    border-color: var(--mc-border-soft);
}

.video-header,
.media-header,
.system-header,
.settings-header {
    background: var(--mc-bg-panel);
    border-color: var(--mc-border);
}

.video-frame-wrap,
.media-preview {
    background: var(--mc-bg-media-stage);
}

.video-controls,
.video-info-bar,
.camera-image-controls,
.media-content {
    background: var(--mc-bg-subtle);
    border-color: var(--mc-border-soft);
}

/* ---------- Primary application tabs ---------- */
.main-content-tabs {
    background: var(--mc-bg-workspace);
    border-bottom-color: var(--mc-border);
}

.main-content-tab {
    background: var(--mc-tab-bg);
    color: var(--mc-tab-text);
    border: 1px solid var(--mc-border-soft);
    border-bottom: 3px solid transparent;
    border-radius: 10px 10px 0 0;
    box-shadow: none;
}

.main-content-tab:hover {
    background: var(--mc-tab-bg-hover);
    color: var(--mc-tab-text-active);
}

.main-content-tab.active {
    background: var(--mc-tab-bg-active);
    color: var(--mc-tab-text-active);
    border-color: var(--mc-border);
    border-bottom-color: var(--mc-tab-line-active);
    box-shadow: none;
}

/* ---------- Secondary tabs: Camera and Nodes ---------- */
.camera-control-tabs,
.node-detail-tabs {
    background: transparent;
    border-bottom-color: var(--mc-border);
}

.camera-control-tab,
.node-detail-tab {
    background: var(--mc-tab-bg);
    color: var(--mc-tab-text);
    border-color: var(--mc-border-soft);
    box-shadow: none;
}

.camera-control-tab:hover,
.node-detail-tab:hover {
    background: var(--mc-tab-bg-hover);
    color: var(--mc-tab-text-active);
    border-color: var(--mc-border);
}

.camera-control-tab.active,
.node-detail-tab.active {
    background: var(--mc-tab-bg-active);
    color: var(--mc-primary);
    border-color: var(--mc-border);
    border-bottom-color: var(--mc-primary);
    box-shadow: none;
}

/* ---------- Compact tabs / range selectors ---------- */
.time-btn,
.cpu-range-btn,
.telemetry-time-controls .time-btn {
    background: var(--mc-bg-subtle);
    color: var(--mc-text-secondary);
    border-color: var(--mc-border);
}

.time-btn:hover,
.cpu-range-btn:hover,
.telemetry-time-controls .time-btn:hover {
    background: var(--mc-primary-soft);
    color: var(--mc-primary);
}

.time-btn.active,
.cpu-range-btn.active,
.telemetry-time-controls .time-btn.active {
    background: var(--mc-primary);
    color: var(--mc-text-inverse);
    border-color: var(--mc-primary);
}

/* ---------- Nodes panel ---------- */
.nodes-section,
.nodes-controls,
.nodes-scroll {
    background: var(--mc-bg-workspace);
}

.node-card {
    background: var(--mc-bg-panel);
    border-color: var(--mc-border);
    box-shadow: none;
}

.node-card:hover {
    background: var(--mc-bg-panel);
    border-color: #b9c8d8;
    box-shadow: var(--mc-shadow-hover);
}

.node-card.selected {
    background: var(--mc-primary-soft);
    border-color: #87bce7;
    box-shadow: 0 0 0 1px rgba(47, 115, 217, 0.12);
}

.node-card.favorite {
    background: var(--mc-warning-soft);
    border-color: #e2bd45;
}

.node-card.ignored {
    background: var(--mc-danger-soft);
    border-color: #ebc5c9;
}

.node-details {
    background: var(--mc-bg-panel);
}

.node-detail-empty,
.node-detail-placeholder,
.node-detail-pane .empty-state,
.node-event-history-empty {
    background: var(--mc-bg-subtle);
    color: var(--mc-text-muted);
    border-color: var(--mc-border-soft);
}

/* ---------- Media ---------- */
.media-content {
    background: var(--mc-bg-panel);
}

.media-toolbar {
    border-bottom-color: var(--mc-border-soft);
}

.media-item {
    background: var(--mc-bg-panel);
    border-color: var(--mc-border);
    box-shadow: var(--mc-shadow-panel);
}

.media-item:hover {
    border-color: #b9c8d8;
    box-shadow: var(--mc-shadow-hover);
}

.media-sort-label,
.media-icon-btn {
    background: var(--mc-bg-muted);
    border-color: var(--mc-border);
    color: var(--mc-text-secondary);
}

.media-delete-all-btn {
    background: var(--mc-danger-soft);
    border-color: #efc8cc;
    color: #a23e48;
}

/* ---------- System ---------- */
.system-card {
    background: var(--mc-bg-subtle);
    border-color: var(--mc-border);
}

.system-row {
    border-bottom-color: var(--mc-border-soft);
}

.system-row span,
.system-subtitle {
    color: var(--mc-text-secondary);
}

.system-row strong,
.system-card-title,
.system-header h3 {
    color: var(--mc-text-primary);
}

/* ---------- Settings: color adoption only, no layout changes ---------- */
.settings-view {
    background: var(--mc-bg-workspace);
}

.system-card,
.settings-card {
    background: var(--mc-bg-subtle);
    border: 1px solid var(--mc-border);
    box-shadow: none;
}

.settings-title,
.settings-card-title,
.settings-option-label {
    color: var(--mc-text-primary);
}

.settings-subtitle,
.settings-card-text {
    color: var(--mc-text-secondary);
}

.settings-segmented button,
.map-provider-select,
.reference-location-card select,
.reference-location-card input {
    background: var(--mc-bg-subtle);
    border-color: var(--mc-border);
    color: var(--mc-text-primary);
}

.settings-segmented button:hover {
    background: var(--mc-primary-soft);
}

.settings-segmented button.active {
    background: var(--mc-primary);
    border-color: var(--mc-primary);
    color: var(--mc-text-inverse);
}

/* ---------- Buttons ---------- */
.mc-refresh-btn,
.media-refresh-btn,
.system-refresh-btn,
.media-primary-btn {
    background: var(--mc-bg-muted);
    border-color: var(--mc-border);
    color: #274766;
}

.mc-refresh-btn:hover,
.media-refresh-btn:hover,
.system-refresh-btn:hover,
.media-primary-btn:hover {
    background: var(--mc-primary-soft);
    border-color: #b8cce2;
    color: var(--mc-primary-hover);
}

.screenshot-btn,
.primary-btn,
.send-btn {
    background: var(--mc-primary);
    color: var(--mc-text-inverse);
    border-color: var(--mc-primary);
}

.screenshot-btn:hover,
.primary-btn:hover,
.send-btn:hover {
    background: var(--mc-primary-hover);
    border-color: var(--mc-primary-hover);
}

/* ---------- Status colors ---------- */
.status-online,
.status-ready,
.status-running,
.status-ok,
.text-success {
    color: var(--mc-success);
}

.status-warning,
.text-warning {
    color: var(--mc-warning);
}

.status-offline,
.status-error,
.text-danger {
    color: var(--mc-danger);
}

/* ---------- Focus and keyboard accessibility ---------- */
button:focus,
select:focus,
input:focus,
a:focus {
    outline: none;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--mc-border-focus);
    outline-offset: 2px;
}

.main-content-tab:focus-visible,
.camera-control-tab:focus-visible,
.node-detail-tab:focus-visible {
    outline-offset: -2px;
}

/* ---------- Scrollbars ---------- */
.media-content::-webkit-scrollbar-track,
.nodes-scroll::-webkit-scrollbar-track,
.settings-view::-webkit-scrollbar-track,
.system-view::-webkit-scrollbar-track {
    background: var(--mc-bg-subtle);
}

.media-content::-webkit-scrollbar-thumb,
.nodes-scroll::-webkit-scrollbar-thumb,
.settings-view::-webkit-scrollbar-thumb,
.system-view::-webkit-scrollbar-thumb {
    background: #9aa8b8;
    border-radius: 999px;
}


/* ============================================================
   UI KIT STAGE 3 - Workspace structure and reliable scrolling
   ============================================================ */

/* System: keep the common page header visible and scroll the content area. */
.system-view {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.system-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.system-header.mc-workspace-header {
    flex: 0 0 var(--mc-workspace-header-height);
}

.system-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.system-layout::-webkit-scrollbar {
    width: 8px;
}

.system-layout::-webkit-scrollbar-track {
    background: var(--mc-bg-subtle);
}

.system-layout::-webkit-scrollbar-thumb {
    background: #9aa8b8;
    border-radius: 999px;
}

.system-layout::-webkit-scrollbar-thumb:hover {
    background: #7f8fa2;
}

/* Settings: use the same outer workspace panel and header structure as System. */
.settings-view {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    padding: var(--mc-page-pad);
    box-sizing: border-box;
}

.settings-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    background: var(--mc-bg-panel);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-card-radius);
    box-shadow: var(--mc-shadow-panel);
    box-sizing: border-box;
}

.settings-header.mc-workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 var(--mc-workspace-header-height);
    height: var(--mc-workspace-header-height);
    min-height: var(--mc-workspace-header-height);
    margin: 0;
    padding: var(--mc-workspace-header-padding-y) var(--mc-workspace-header-padding-x);
    background: var(--mc-bg-panel);
    border: 0;
    border-bottom: 1px solid var(--mc-border);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.settings-header .workspace-page-title {
    margin: 0;
    color: var(--mc-text-primary);
    font-size: var(--mc-page-title-size);
    font-weight: var(--mc-page-title-weight);
    line-height: var(--mc-page-title-line-height);
}

.settings-header .workspace-page-subtitle {
    margin: var(--mc-page-subtitle-gap) 0 0;
    color: var(--mc-text-secondary);
    font-size: var(--mc-body-size);
    font-weight: 400;
    line-height: var(--mc-page-subtitle-line-height);
}

.settings-grid {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    box-sizing: border-box;
}

.settings-grid::-webkit-scrollbar {
    width: 8px;
}

.settings-grid::-webkit-scrollbar-track {
    background: var(--mc-bg-subtle);
}

.settings-grid::-webkit-scrollbar-thumb {
    background: #9aa8b8;
    border-radius: 999px;
}

.settings-grid::-webkit-scrollbar-thumb:hover {
    background: #7f8fa2;
}


/* ============================================================
   UI KIT STAGE 3.1 - Settings header parity with System
   ============================================================ */
.settings-panel > .settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 var(--mc-workspace-header-height);
    height: var(--mc-workspace-header-height);
    min-height: var(--mc-workspace-header-height);
    margin: 0;
    padding: var(--mc-workspace-header-padding-y) var(--mc-workspace-header-padding-x);
    background: var(--mc-bg-panel);
    border: 0;
    border-bottom: 1px solid var(--mc-border);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

/* ============================================================
   UI KIT v1.0 - workspace alignment and shared scrollbars
   Final visual layer. Feature layout remains in style.css.
   ============================================================ */
:root {
    /* Scrollbars */
    --mc-scrollbar-size: 8px;
    --mc-scrollbar-track: var(--mc-bg-subtle);
    --mc-scrollbar-thumb: #9fb3c8;
    --mc-scrollbar-thumb-hover: #829bb5;

    /* Shared workspace surfaces */
    --mc-workspace-panel-bg: var(--mc-bg-panel);
    --mc-workspace-content-bg: var(--mc-bg-subtle);
    --mc-workspace-border: var(--mc-border);
}

/* Camera must start at exactly the same top offset as System/Media. */
.video-view {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: 100%;
    min-height: 0;
    padding: var(--mc-page-pad);
    overflow: hidden;
    box-sizing: border-box;
}

.video-panel {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: var(--mc-workspace-panel-bg);
    border: 1px solid var(--mc-workspace-border);
    border-radius: var(--mc-card-radius);
    box-shadow: var(--mc-shadow-panel);
    box-sizing: border-box;
}

/* Same surface hierarchy in every workspace. */
.video-header,
.media-header,
.system-header,
.settings-header {
    background: var(--mc-workspace-panel-bg);
    border-color: var(--mc-workspace-border);
}

.video-frame-wrap {
    background: var(--mc-bg-media-stage);
}

.video-info-bar,
.video-controls,
.media-content,
.system-layout,
.settings-grid {
    border-color: var(--mc-border-soft);
}

/* Shared scrollbar geometry and blue-grey UI Kit palette. */
.media-content,
.system-layout,
.settings-grid,
.nodes-scroll,
.chat-list-panel,
.messages-panel,
.chat-list-container,
.messages-container {
    scrollbar-width: thin;
    scrollbar-color: var(--mc-scrollbar-thumb) var(--mc-scrollbar-track);
}

.media-content::-webkit-scrollbar,
.system-layout::-webkit-scrollbar,
.settings-grid::-webkit-scrollbar,
.nodes-scroll::-webkit-scrollbar,
.chat-list-panel::-webkit-scrollbar,
.messages-panel::-webkit-scrollbar,
.chat-list-container::-webkit-scrollbar,
.messages-container::-webkit-scrollbar {
    width: var(--mc-scrollbar-size);
    height: var(--mc-scrollbar-size);
}

.media-content::-webkit-scrollbar-track,
.system-layout::-webkit-scrollbar-track,
.settings-grid::-webkit-scrollbar-track,
.nodes-scroll::-webkit-scrollbar-track,
.chat-list-panel::-webkit-scrollbar-track,
.messages-panel::-webkit-scrollbar-track,
.chat-list-container::-webkit-scrollbar-track,
.messages-container::-webkit-scrollbar-track {
    background: var(--mc-scrollbar-track);
    border-radius: 999px;
}

.media-content::-webkit-scrollbar-thumb,
.system-layout::-webkit-scrollbar-thumb,
.settings-grid::-webkit-scrollbar-thumb,
.nodes-scroll::-webkit-scrollbar-thumb,
.chat-list-panel::-webkit-scrollbar-thumb,
.messages-panel::-webkit-scrollbar-thumb,
.chat-list-container::-webkit-scrollbar-thumb,
.messages-container::-webkit-scrollbar-thumb {
    min-height: 34px;
    background: var(--mc-scrollbar-thumb);
    border: 2px solid var(--mc-scrollbar-track);
    border-radius: 999px;
    background-clip: padding-box;
}

.media-content::-webkit-scrollbar-thumb:hover,
.system-layout::-webkit-scrollbar-thumb:hover,
.settings-grid::-webkit-scrollbar-thumb:hover,
.nodes-scroll::-webkit-scrollbar-thumb:hover,
.chat-list-panel::-webkit-scrollbar-thumb:hover,
.messages-panel::-webkit-scrollbar-thumb:hover,
.chat-list-container::-webkit-scrollbar-thumb:hover,
.messages-container::-webkit-scrollbar-thumb:hover {
    background: var(--mc-scrollbar-thumb-hover);
    border-color: var(--mc-scrollbar-track);
}

/* Keep scrollbars inside rounded workspace panels. */
.media-panel,
.system-panel,
.settings-panel,
.video-panel {
    overflow: hidden;
}

/* ============================================================
   UI KIT v1.0 - unified workspace header surface
   Camera, Media, System and Settings use one visual component.
   ============================================================ */
:root {
    --mc-workspace-header-bg: #f4f7fb;
    --mc-workspace-header-border: #d7e0ea;
}

.video-header.mc-workspace-header,
.media-header.mc-workspace-header,
.system-header.mc-workspace-header,
.settings-header.mc-workspace-header {
    background: var(--mc-workspace-header-bg);
    border-color: var(--mc-workspace-header-border);
    border-bottom: 1px solid var(--mc-workspace-header-border);
    box-shadow: none;
}

/* ============================================================
   WORKSPACE FOUNDATION
   Device-local interface preferences: panels, theme and density.
   ============================================================ */
.dock-left {
    position: relative;
}

.dock-workspace-btn {
    height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid #d5dce7;
    border-radius: 7px;
    background: #fff;
    color: #52627a;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.dock-workspace-btn:hover,
.dock-workspace-btn.active {
    color: #24457b;
    border-color: #b9c7db;
    background: #edf3fb;
}

.dock-workspace-btn:focus-visible,
.workspace-popover button:focus-visible,
.workspace-popover input:focus-visible + span {
    outline: 2px solid #6e9fe8;
    outline-offset: 1px;
}

.dock-workspace-btn-icon {
    font-size: 15px;
    line-height: 1;
}

.dock-workspace-chevron {
    font-size: 9px;
    opacity: .7;
}

.workspace-popover[hidden] {
    display: none;
}

.workspace-popover {
    position: absolute;
    left: 70px;
    bottom: calc(100% + 10px);
    z-index: 1100;
    width: 286px;
    overflow: hidden;
    border: 1px solid #d7dee8;
    border-radius: 11px;
    background: #fff;
    color: #26364b;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .2);
    user-select: none;
}

.workspace-popover::after {
    content: "";
    position: absolute;
    left: 54px;
    bottom: -6px;
    width: 11px;
    height: 11px;
    border-right: 1px solid #d7dee8;
    border-bottom: 1px solid #d7dee8;
    background: #fff;
    transform: rotate(45deg);
}

.workspace-popover-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px 11px;
    border-bottom: 1px solid #e5eaf0;
    background: #f7f9fc;
}

.workspace-popover-header strong,
.workspace-popover-header span {
    display: block;
}

.workspace-popover-header strong {
    font-size: 14px;
}

.workspace-popover-header span {
    margin-top: 2px;
    color: #7a8798;
    font-size: 10px;
    font-weight: 500;
}

.workspace-popover-close {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #718096;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
}

.workspace-popover-close:hover {
    background: #e8edf4;
    color: #334155;
}

.workspace-menu-section {
    padding: 10px 13px;
    border-bottom: 1px solid #edf0f4;
}

.workspace-menu-section:last-child {
    border-bottom: 0;
}

.workspace-menu-title {
    margin-bottom: 7px;
    color: #8995a5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.workspace-setting-row {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.workspace-setting-row small {
    display: block;
    margin-top: 1px;
    color: #8a96a6;
    font-size: 9px;
    font-weight: 500;
}

.workspace-setting-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.workspace-switch {
    position: relative;
    width: 34px;
    height: 19px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #c7d0dc;
    transition: background-color .16s ease;
}

.workspace-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
    transition: transform .16s ease;
}

.workspace-setting-row input:checked + .workspace-switch {
    background: #3f6fae;
}

.workspace-setting-row input:checked + .workspace-switch::after {
    transform: translateX(15px);
}

.workspace-theme-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.workspace-theme-option {
    cursor: pointer;
}

.workspace-theme-option input {
    position: absolute;
    opacity: 0;
}

.workspace-theme-option span {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe2eb;
    border-radius: 7px;
    background: #fafbfd;
    color: #5c6b7e;
    font-size: 11px;
    font-weight: 700;
    transition: .16s ease;
}

.workspace-theme-option input:checked + span {
    border-color: #6f94c6;
    background: #eaf2fc;
    color: #244d82;
    box-shadow: inset 0 0 0 1px rgba(63, 111, 174, .08);
}

/* Compact mode intentionally changes density only, not information architecture. */
body.workspace-compact .base-brand-strip {
    min-height: 44px;
    padding-top: 4px;
    padding-bottom: 4px;
}

body.workspace-compact .base-card,
body.workspace-compact .sensors-card,
body.workspace-compact .telemetry-section,
body.workspace-compact .weather-card,
body.workspace-compact .base-reference-location {
    margin-top: 6px;
    margin-bottom: 6px;
}

body.workspace-compact .chat-header,
body.workspace-compact .video-header.mc-workspace-header,
body.workspace-compact .media-header.mc-workspace-header,
body.workspace-compact .system-header.mc-workspace-header,
body.workspace-compact .settings-header.mc-workspace-header {
    min-height: 40px;
    height: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
}

body.workspace-compact .sidebar-tab {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Dark theme. It is scoped to Workspace and does not alter application data. */
html[data-theme="dark"] {
    color-scheme: dark;
    --mc-workspace-header-bg: #202936;
    --mc-workspace-header-border: #364253;
    --mc-border: #364253;
    --mc-scrollbar-track: #202936;
    --mc-scrollbar-thumb: #526174;
    --mc-scrollbar-thumb-hover: #67788d;
}

html[data-theme="dark"] body {
    background: #111821;
    color: #dbe5f1;
}

html[data-theme="dark"] .app-container,
html[data-theme="dark"] .main-layout,
html[data-theme="dark"] .chat-area,
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] .chat-list-container,
html[data-theme="dark"] .messages-view,
html[data-theme="dark"] .video-panel,
html[data-theme="dark"] .media-panel,
html[data-theme="dark"] .system-panel,
html[data-theme="dark"] .settings-panel,
html[data-theme="dark"] .base-sidebar,
html[data-theme="dark"] .sidebar {
    background-color: #18212c;
    color: #dbe5f1;
}

html[data-theme="dark"] .base-card,
html[data-theme="dark"] .sensors-card,
html[data-theme="dark"] .telemetry-section,
html[data-theme="dark"] .weather-card,
html[data-theme="dark"] .base-reference-location,
html[data-theme="dark"] .node-card,
html[data-theme="dark"] .chat-item,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .system-card {
    background-color: #202a36;
    border-color: #364253;
    color: #dbe5f1;
}

html[data-theme="dark"] .chat-title,
html[data-theme="dark"] .workspace-page-title,
html[data-theme="dark"] .base-card-title,
html[data-theme="dark"] .sensors-title,
html[data-theme="dark"] .telemetry-title,
html[data-theme="dark"] .weather-card-title {
    color: #edf4fb;
}

html[data-theme="dark"] .chat-subtitle,
html[data-theme="dark"] .workspace-page-subtitle,
html[data-theme="dark"] .sensor-label,
html[data-theme="dark"] .node-meta,
html[data-theme="dark"] .message-time {
    color: #96a6b8;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .message-input {
    background-color: #111a24;
    border-color: #3b4859;
    color: #e7eef7;
}

html[data-theme="dark"] .status-dock {
    background: #151e29;
    border-top-color: #344050;
    color: #cbd7e4;
    box-shadow: 0 -3px 12px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .dock-panel-btn,
html[data-theme="dark"] .dock-workspace-btn {
    background: #222d3a;
    border-color: #3b4859;
    color: #b8c6d6;
}

html[data-theme="dark"] .dock-panel-btn:hover,
html[data-theme="dark"] .dock-workspace-btn:hover,
html[data-theme="dark"] .dock-workspace-btn.active {
    background: #2b3949;
    border-color: #52657c;
    color: #edf4fb;
}

html[data-theme="dark"] .dock-panel-btn.panel-is-hidden {
    background: #4d6f9f;
    border-color: #6688b7;
    color: #fff;
}

html[data-theme="dark"] .dock-workspace-label,
html[data-theme="dark"] .dock-right {
    color: #91a2b6;
}

html[data-theme="dark"] .workspace-popover {
    background: #202a36;
    border-color: #445164;
    color: #e4edf7;
    box-shadow: 0 16px 38px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .workspace-popover::after {
    background: #202a36;
    border-color: #445164;
}

html[data-theme="dark"] .workspace-popover-header {
    background: #18212c;
    border-bottom-color: #364253;
}

html[data-theme="dark"] .workspace-popover-header span,
html[data-theme="dark"] .workspace-setting-row small,
html[data-theme="dark"] .workspace-menu-title {
    color: #91a2b6;
}

html[data-theme="dark"] .workspace-menu-section {
    border-bottom-color: #364253;
}

html[data-theme="dark"] .workspace-setting-row {
    color: #dbe5f1;
}

html[data-theme="dark"] .workspace-theme-option span {
    background: #18212c;
    border-color: #3b4859;
    color: #aebdcd;
}

html[data-theme="dark"] .workspace-theme-option input:checked + span {
    background: #2b405b;
    border-color: #6688b7;
    color: #eef5fc;
}

@media (max-width: 760px) {
    .dock-workspace-btn span:not(.dock-workspace-btn-icon):not(.dock-workspace-chevron) {
        display: none;
    }
    .dock-workspace-btn {
        width: 28px;
        padding: 0;
        justify-content: center;
    }
    .dock-workspace-chevron {
        display: none;
    }
    .workspace-popover {
        left: 0;
        width: min(286px, calc(100vw - 16px));
    }
}

/* ==========================================================
   ABOUT CENTER
   ========================================================== */
.about-view{display:none;flex:1;min-width:0;min-height:0;overflow:hidden;background:var(--mc-bg-app,#f6f8fb)}
.about-shell{display:flex;flex-direction:column;width:100%;height:100%;min-height:0}
.about-header{flex:0 0 auto;padding:14px 18px 11px}
.about-title{font-weight:800}
.about-tabs{display:flex;gap:4px;flex:0 0 auto;padding:0 18px;border-bottom:1px solid var(--mc-border,#d9e1ec);background:var(--mc-surface,#fff);overflow-x:auto}
.about-tab{appearance:none;border:0;border-bottom:3px solid transparent;background:transparent;padding:11px 15px 9px;color:var(--mc-text-muted,#68758a);font:700 13px/1 inherit;cursor:pointer;white-space:nowrap}
.about-tab:hover{color:var(--mc-accent,#1769d2);background:var(--mc-accent-soft,#edf5ff)}
.about-tab.active{color:var(--mc-accent,#1769d2);border-bottom-color:var(--mc-accent,#1769d2)}
.about-content{flex:1;min-height:0;overflow:auto;padding:18px}
.about-section{display:none;max-width:1080px;margin:0 auto}
.about-section.active{display:block}
.about-project-card{display:flex;align-items:center;gap:20px;padding:22px 24px;border:1px solid var(--mc-border,#d9e1ec);border-radius:14px;background:linear-gradient(135deg,var(--mc-surface,#fff),var(--mc-accent-soft,#eef6ff));box-shadow:0 8px 24px rgba(28,58,94,.08)}
.about-logo{width:82px;height:82px;flex:0 0 82px;border-radius:50%;box-shadow:0 6px 18px rgba(21,81,91,.18)}
.about-project-copy h1{margin:0;color:var(--mc-text-primary,#17243a);font-size:30px;line-height:1.05;letter-spacing:-.5px}
.about-motto{margin-top:7px;color:var(--mc-text-secondary,#526177);font-size:15px;font-weight:700}.about-motto span{color:#f59b2f;margin:0 4px}
.about-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.about-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--mc-border,#d9e1ec);border-radius:999px;background:var(--mc-surface,#fff);color:var(--mc-text-secondary,#526177);font-size:11px;font-weight:700}.about-badge-status i{width:7px;height:7px;border-radius:50%;background:#25c66b;box-shadow:0 0 0 3px rgba(37,198,107,.13)}
.about-overview-grid,.about-help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:13px}
.about-card{display:flex;gap:13px;padding:17px;border:1px solid var(--mc-border,#d9e1ec);border-radius:12px;background:var(--mc-surface,#fff);color:var(--mc-text-primary,#17243a);box-shadow:0 3px 12px rgba(28,58,94,.05)}
.about-card>div:last-child{min-width:0;flex:1}.about-card-icon{display:grid;place-items:center;width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:var(--mc-accent-soft,#edf5ff);font-size:17px}
.about-card-kicker{margin-bottom:4px;color:var(--mc-text-muted,#738096);font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.about-card h2{margin:0 0 6px;color:var(--mc-text-primary,#17243a);font-size:16px}.about-card p{margin:0;color:var(--mc-text-secondary,#58677b);font-size:12px;line-height:1.55}.about-muted{font-size:11px!important}.about-aliases{display:flex;gap:7px;margin-top:9px}.about-aliases span{padding:4px 9px;border-radius:999px;background:var(--mc-accent-soft,#edf5ff);color:var(--mc-accent,#1769d2);font-size:11px;font-weight:800}
.about-facts{display:grid;gap:7px}.about-facts div,.about-link-list a{display:flex;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:1px solid var(--mc-border-soft,#edf1f6);font-size:12px}.about-facts div:last-child,.about-link-list a:last-child{padding-bottom:0;border-bottom:0}.about-facts span,.about-link-list span{color:var(--mc-text-muted,#738096)}.about-facts strong,.about-link-list strong{color:var(--mc-text-primary,#17243a);text-align:right}.about-link-list{display:grid;gap:8px}.about-link-list a{text-decoration:none}.about-link-list a:hover strong{color:var(--mc-accent,#1769d2)}
.about-section-heading{margin:2px 0 14px}.about-section-heading h2{margin:0;color:var(--mc-text-primary,#17243a);font-size:21px}.about-section-heading p{margin:4px 0 0;color:var(--mc-text-muted,#738096);font-size:12px}.about-note{margin-top:13px;padding:12px 14px;border:1px dashed var(--mc-border,#d9e1ec);border-radius:10px;background:var(--mc-surface,#fff);color:var(--mc-text-muted,#738096);font-size:12px;text-align:center}
.about-license-card{max-width:760px}.about-legal-line{margin-top:11px!important;font-size:11px!important}.about-primary-link{display:inline-flex;margin-top:14px;padding:8px 12px;border-radius:8px;background:var(--mc-accent,#1769d2);color:#fff!important;text-decoration:none;font-size:12px;font-weight:800}.about-primary-link:hover{filter:brightness(1.05)}
.about-links-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.about-resource-card{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:12px;padding:16px;border:1px solid var(--mc-border,#d9e1ec);border-radius:12px;background:var(--mc-surface,#fff);color:var(--mc-text-primary,#17243a);text-decoration:none}.about-resource-card:hover{border-color:var(--mc-accent,#1769d2);transform:translateY(-1px)}.about-resource-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--mc-accent-soft,#edf5ff);font-size:18px}.about-resource-card span:nth-child(2){display:grid;min-width:0}.about-resource-card small{color:var(--mc-text-muted,#738096);font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:800}.about-resource-card strong{margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.about-resource-card em{margin-top:3px;color:var(--mc-text-secondary,#58677b);font-size:11px;font-style:normal}.about-resource-card b{color:var(--mc-accent,#1769d2)}
.about-release-card{padding:20px;border:1px solid var(--mc-border,#d9e1ec);border-radius:12px;background:var(--mc-surface,#fff);color:var(--mc-text-primary,#17243a)}.about-release-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.about-version{color:var(--mc-accent,#1769d2);font-size:12px;font-weight:900}.about-release-head h2{margin:3px 0 0;font-size:18px}.about-current-label{padding:4px 8px;border-radius:999px;background:rgba(37,198,107,.12);color:#168846;font-size:10px;font-weight:900}.about-release-card ul{margin:16px 0 0;padding-left:20px;color:var(--mc-text-secondary,#58677b);font-size:12px;line-height:1.8}
.about-footer{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding:8px 18px;border-top:1px solid var(--mc-border,#d9e1ec);background:var(--mc-surface,#fff);color:var(--mc-text-muted,#738096);font-size:10px}.about-footer img{width:25px;height:25px;border-radius:50%}.about-footer div{display:grid}.about-footer strong{color:var(--mc-text-primary,#17243a);font-size:11px}.about-footer div span{font-size:9px}.about-footer>span{margin-left:auto}
body.workspace-compact .about-content{padding:11px}body.workspace-compact .about-project-card{padding:15px 18px}body.workspace-compact .about-card{padding:12px}body.workspace-compact .about-tabs{padding-left:12px}body.workspace-compact .about-tab{padding-top:8px;padding-bottom:7px}
@media(max-width:820px){.about-overview-grid,.about-help-grid,.about-links-grid{grid-template-columns:1fr}.about-content{padding:12px}.about-project-card{align-items:flex-start}.about-logo{width:64px;height:64px;flex-basis:64px}.about-project-copy h1{font-size:24px}.about-footer>span{display:none}}
@media(max-width:520px){.about-project-card{display:block;text-align:center}.about-logo{margin-bottom:10px}.about-badges{justify-content:center}.about-header{padding-left:12px}.about-tabs{padding:0 8px}.about-tab{padding-left:11px;padding-right:11px}.about-footer{justify-content:center}}

/* ============================================================
   ABOUT CENTER - layout and navigation polish
   ============================================================ */

/* Keep all six primary tabs visible inside the workspace width. */
.main-content-tabs {
    display: flex;
    min-width: 0;
    gap: 4px;
    padding: 0 6px;
    overflow: hidden;
}

.main-content-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 9px 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* About is a full workspace view, just like Settings and System. */
.about-view {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: var(--mc-page-pad);
    overflow: hidden;
    box-sizing: border-box;
    background: var(--mc-bg-workspace);
}

.about-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--mc-bg-panel);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-card-radius);
    box-shadow: var(--mc-shadow-panel);
    box-sizing: border-box;
}

.about-header.mc-workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 var(--mc-workspace-header-height);
    height: var(--mc-workspace-header-height);
    min-height: var(--mc-workspace-header-height);
    margin: 0;
    padding: var(--mc-workspace-header-padding-y) var(--mc-workspace-header-padding-x);
    background: var(--mc-bg-panel);
    border: 0;
    border-bottom: 1px solid var(--mc-border);
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}

.about-header .workspace-page-title {
    margin: 0;
    color: var(--mc-text-primary);
    font-size: var(--mc-page-title-size);
    font-weight: var(--mc-page-title-weight);
    line-height: var(--mc-page-title-line-height);
}

.about-header .workspace-page-subtitle {
    margin: var(--mc-page-subtitle-gap) 0 0;
    color: var(--mc-text-secondary);
    font-size: var(--mc-body-size);
    font-weight: 400;
    line-height: var(--mc-page-subtitle-line-height);
}

/* Secondary navigation belongs below the shared page header. */
.about-tabs {
    display: flex;
    align-items: stretch;
    flex: 0 0 auto;
    min-width: 0;
    gap: 2px;
    padding: 0 12px;
    overflow: hidden;
    background: var(--mc-bg-panel);
    border-bottom: 1px solid var(--mc-border);
}

.about-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 6px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    white-space: nowrap;
}

.about-content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    box-sizing: border-box;
    background: var(--mc-bg-workspace);
}

.about-section {
    width: 100%;
    max-width: 980px;
    min-width: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

.about-project-card,
.about-card,
.about-resource-card,
.about-release-card {
    min-width: 0;
    box-sizing: border-box;
}

.about-overview-grid,
.about-help-grid,
.about-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-resource-card strong,
.about-resource-card em,
.about-card h2,
.about-card p {
    overflow-wrap: anywhere;
}

.about-resource-card strong {
    white-space: normal;
}

.about-footer {
    flex: 0 0 auto;
    min-width: 0;
}

body.workspace-compact .main-content-tab {
    padding-left: 5px;
    padding-right: 5px;
}

body.workspace-compact .about-view {
    padding: 8px;
}

@media (max-width: 1050px) {
    .main-content-tabs {
        gap: 2px;
        padding-left: 3px;
        padding-right: 3px;
    }

    .main-content-tab {
        padding-left: 4px;
        padding-right: 4px;
        font-size: 12px;
    }

    .about-overview-grid,
    .about-help-grid,
    .about-links-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .main-content-tab {
        font-size: 11px;
    }

    .about-view {
        padding: 8px;
    }

    .about-tabs {
        padding: 0 5px;
    }

    .about-tab {
        padding-left: 3px;
        padding-right: 3px;
        font-size: 11px;
    }
}

/* ============================================================
   ABOUT CENTER - shared MeshCenter workspace color language
   Keep the branded project card as the only gradient accent.
   ============================================================ */
.about-header.mc-workspace-header {
    background: var(--mc-workspace-header-bg);
    border-bottom-color: var(--mc-workspace-header-border);
}

.about-tabs {
    background: var(--mc-bg-panel);
    border-bottom-color: var(--mc-border);
}

.about-content {
    background: var(--mc-bg-workspace);
}

/* Standard cards match Settings/System surfaces. */
.about-card,
.about-resource-card,
.about-release-card,
.about-note {
    background: var(--mc-bg-subtle);
    border-color: var(--mc-border);
    box-shadow: none;
}

/* The main MeshCenter identity card intentionally remains branded. */
.about-project-card {
    background: linear-gradient(135deg, var(--mc-bg-panel) 0%, var(--mc-primary-soft) 100%);
    border-color: var(--mc-border);
    box-shadow: var(--mc-shadow-panel);
}

.about-card-icon,
.about-resource-icon,
.about-aliases span {
    background: var(--mc-primary-soft);
}

.about-footer {
    background: var(--mc-bg-panel);
    border-top-color: var(--mc-border);
}

html[data-theme="dark"] .about-shell,
html[data-theme="dark"] .about-header.mc-workspace-header,
html[data-theme="dark"] .about-tabs,
html[data-theme="dark"] .about-footer {
    background: #18212c;
    border-color: #364253;
}

html[data-theme="dark"] .about-content {
    background: #18212c;
}

html[data-theme="dark"] .about-card,
html[data-theme="dark"] .about-resource-card,
html[data-theme="dark"] .about-release-card,
html[data-theme="dark"] .about-note {
    background: #202a36;
    border-color: #364253;
    color: #dbe5f1;
}

html[data-theme="dark"] .about-project-card {
    background: linear-gradient(135deg, #202a36 0%, #21364d 100%);
    border-color: #364253;
}

/* ============================================================
   UNIFIED PRIMARY NAVIGATION HEIGHT
   Central workspace tabs and right Nodes/Tools tabs use the
   same container geometry and the same visible tab height.
   ============================================================ */
.main-content-tabs,
.sidebar-tabs {
    box-sizing: border-box;
    height: var(--workspace-nav-height, 42px);
    min-height: var(--workspace-nav-height, 42px);
    padding: 6px 8px 0;
    gap: 5px;
    align-items: flex-end;
    overflow: hidden;
}

.main-content-tab,
.sidebar-tab {
    box-sizing: border-box;
    height: 36px;
    min-height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

/* Keep the six central tabs compact while preserving identical height. */
.main-content-tab {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
}

/* Nodes and Tools continue to divide the right panel evenly. */
.sidebar-tab {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
}

body.workspace-compact .main-content-tabs,
body.workspace-compact .sidebar-tabs {
    height: var(--workspace-nav-height, 42px);
    min-height: var(--workspace-nav-height, 42px);
    padding-top: 6px;
}

body.workspace-compact .main-content-tab,
body.workspace-compact .sidebar-tab {
    height: 36px;
    min-height: 36px;
}

/* ============================================================
   DARK THEME CONTRAST + SYSTEM THEME MODE
   Keep all text readable by routing legacy hard-coded colors
   through the shared UI tokens whenever dark mode is active.
   ============================================================ */
html[data-theme="dark"] {
    --mc-bg-app: #0d1723;
    --mc-bg-workspace: #111c29;
    --mc-bg-panel: #1b2837;
    --mc-bg-subtle: #162231;
    --mc-bg-muted: #202f40;
    --mc-bg-media-stage: #101923;

    --mc-border: #3a4a5d;
    --mc-border-soft: #2b3a4b;
    --mc-border-active: #6aa7ff;
    --mc-border-focus: #73b2ff;

    --mc-primary: #66a8ff;
    --mc-primary-hover: #8abeff;
    --mc-primary-soft: #203d5d;
    --mc-primary-muted: #294967;

    --mc-text-primary: #f2f7fc;
    --mc-text-secondary: #c3d1df;
    --mc-text-muted: #90a5ba;
    --mc-text-inverse: #0b1520;

    --mc-tab-bg: #f7f9fc;
    --mc-tab-bg-hover: #ffffff;
    --mc-tab-bg-active: #ffffff;
    --mc-tab-text: #314763;
    --mc-tab-text-active: #102f5c;
    --mc-tab-line-active: #245b9f;

    --mc-surface: var(--mc-bg-panel);
    --mc-surface-soft: var(--mc-bg-subtle);
    --mc-text: var(--mc-text-primary);
    --mc-muted: var(--mc-text-secondary);
    --mc-accent: var(--mc-primary);
    --mc-workspace-header-bg: linear-gradient(180deg, #202e3e 0%, #1a2736 100%);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app-container,
html[data-theme="dark"] .main-layout,
html[data-theme="dark"] .chat-area,
html[data-theme="dark"] .messages-view,
html[data-theme="dark"] .video-view,
html[data-theme="dark"] .workspace-view,
html[data-theme="dark"] .media-view,
html[data-theme="dark"] .system-view,
html[data-theme="dark"] .settings-view,
html[data-theme="dark"] .about-view {
    color: var(--mc-text-primary);
}

/* Shared headings, labels and values */
html[data-theme="dark"] :is(
    h1, h2, h3, h4, h5, h6,
    .chat-title, .chat-name, .chat-header-title,
    .node-name, .node-title, .node-detail-title,
    .workspace-page-title,
    .settings-title, .settings-card-title,
    .system-title, .system-card-title,
    .media-title, .video-title,
    .about-title, .about-card h2, .about-section-heading h2,
    .about-project-copy h1, .about-release-head h2,
    .about-resource-card strong, .about-facts strong,
    .about-link-list strong, .about-footer strong
) {
    color: var(--mc-text-primary) !important;
}

html[data-theme="dark"] :is(
    p, label, dt, dd, li,
    .chat-preview, .chat-last-message, .chat-subtitle,
    .node-meta, .node-subtitle, .node-detail-value,
    .workspace-page-subtitle,
    .settings-subtitle, .settings-card p,
    .system-subtitle, .system-card,
    .media-subtitle, .video-subtitle,
    .about-subtitle, .about-card p, .about-motto,
    .about-resource-card em, .about-release-card ul,
    .about-footer, .about-note
) {
    color: var(--mc-text-secondary) !important;
}

html[data-theme="dark"] :is(
    small, .muted, .hint, .helper-text,
    .message-time, .sensor-label,
    .about-card-kicker, .about-resource-card small,
    .about-facts span, .about-link-list span,
    .about-section-heading p
) {
    color: var(--mc-text-muted) !important;
}

/* Dark surfaces and cards */
html[data-theme="dark"] :is(
    .chat-item, .node-card, .system-card, .settings-card,
    .about-card, .about-resource-card, .about-release-card,
    .about-note, .about-footer,
    .system-log-card, .radio-health-card,
    .wifi-card, .auto-recovery-card
) {
    background: var(--mc-bg-panel) !important;
    border-color: var(--mc-border) !important;
    color: var(--mc-text-primary) !important;
}

html[data-theme="dark"] :is(
    .chat-item:hover, .node-card:hover,
    .about-resource-card:hover
) {
    background: #233346 !important;
}

html[data-theme="dark"] :is(
    .chat-item.active, .chat-item.selected,
    .node-card.active, .node-card.selected
) {
    background: #263e58 !important;
    border-color: #66a8ff !important;
}

/* Inputs, selectors and table-like rows */
html[data-theme="dark"] :is(input, select, textarea, .message-input) {
    background: #0f1a26 !important;
    color: var(--mc-text-primary) !important;
    border-color: var(--mc-border) !important;
}
html[data-theme="dark"] :is(input, textarea)::placeholder {
    color: #8297ab !important;
}
html[data-theme="dark"] :is(option) {
    background: #172432;
    color: var(--mc-text-primary);
}
html[data-theme="dark"] :is(
    .system-info-row, .network-info-row, .radio-health-row,
    .settings-row, .about-facts div, .about-link-list a
) {
    border-color: var(--mc-border-soft) !important;
    color: var(--mc-text-secondary) !important;
}
html[data-theme="dark"] :is(
    .system-info-row strong, .network-info-row strong,
    .radio-health-row strong, .settings-row strong
) {
    color: var(--mc-text-primary) !important;
}

/* About keeps its branded hero, but all text remains readable */
html[data-theme="dark"] .about-project-card {
    background: linear-gradient(135deg, #213b57 0%, #263f5a 55%, #1d344b 100%) !important;
    border-color: #46617c !important;
}
html[data-theme="dark"] .about-project-card :is(h1, .about-motto) {
    color: #f4f8fc !important;
}
html[data-theme="dark"] .about-badge {
    background: #f8fbff !important;
    color: #23415f !important;
    border-color: #d5e2ef !important;
}
html[data-theme="dark"] .about-aliases span {
    background: #f4f8fc !important;
    color: #205b9e !important;
}
html[data-theme="dark"] .about-tab {
    color: var(--mc-text-secondary) !important;
}
html[data-theme="dark"] .about-tab.active {
    color: #8bc0ff !important;
}
html[data-theme="dark"] a {
    color: #8bc0ff;
}

/* System chart and log */
html[data-theme="dark"] :is(.chart-container, .system-chart, .system-log-body, .log-container) {
    background: #162331 !important;
    border-color: var(--mc-border) !important;
    color: var(--mc-text-secondary) !important;
}
html[data-theme="dark"] :is(.system-log-entry, .log-entry) {
    color: var(--mc-text-secondary) !important;
    border-color: var(--mc-border-soft) !important;
}

/* Workspace theme selector: three equal choices */
.workspace-theme-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.workspace-theme-option span {
    min-width: 0;
    white-space: nowrap;
}

/* Browser-native controls should match the resolved theme. */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ============================================================
   DARK THEME POLISH — darker navigation, stronger panel framing
   and higher contrast About content.
   ============================================================ */
html[data-theme="dark"] {
    --mc-tab-bg: #121c28;
    --mc-tab-bg-hover: #182535;
    --mc-tab-bg-active: #1d2b3b;
    --mc-tab-text: #b7c6d6;
    --mc-tab-text-active: #f4f8fc;
    --mc-tab-line-active: #4f9cff;
    --mc-border: #2f3e50;
    --mc-border-soft: #243243;
}

/* Primary and right-side navigation use the same dark treatment. */
html[data-theme="dark"] .main-content-tabs,
html[data-theme="dark"] .sidebar-tabs {
    background: #0f1823 !important;
    border-bottom-color: #0a1119 !important;
}

html[data-theme="dark"] .main-content-tab,
html[data-theme="dark"] .sidebar-tab {
    background: var(--mc-tab-bg) !important;
    color: var(--mc-tab-text) !important;
    border-color: #263547 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] .main-content-tab:hover,
html[data-theme="dark"] .sidebar-tab:hover {
    background: var(--mc-tab-bg-hover) !important;
    color: var(--mc-tab-text-active) !important;
}

html[data-theme="dark"] .main-content-tab.active,
html[data-theme="dark"] .sidebar-tab.active {
    background: var(--mc-tab-bg-active) !important;
    color: var(--mc-tab-text-active) !important;
    border-color: #33465c !important;
    border-bottom-color: var(--mc-tab-line-active) !important;
}

/* Stronger, darker outline around the major workspace panels. */
html[data-theme="dark"] :is(
    .video-panel,
    .media-panel,
    .system-panel,
    .settings-panel,
    .about-shell,
    .chat-area,
    .messages-view,
    .sidebar,
    .base-sidebar
) {
    border-color: #0a121c !important;
}

html[data-theme="dark"] :is(
    .video-panel,
    .media-panel,
    .system-panel,
    .settings-panel,
    .about-shell
) {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .42),
                0 8px 24px rgba(0, 0, 0, .16) !important;
}

/* About: prevent legacy navy text from disappearing on dark surfaces. */
html[data-theme="dark"] .about-project-copy h1,
html[data-theme="dark"] .about-card h2,
html[data-theme="dark"] .about-facts strong,
html[data-theme="dark"] .about-link-list strong,
html[data-theme="dark"] .about-resource-card strong,
html[data-theme="dark"] .about-release-head h2 {
    color: #f4f8fc !important;
}

html[data-theme="dark"] .about-motto,
html[data-theme="dark"] .about-card p,
html[data-theme="dark"] .about-facts,
html[data-theme="dark"] .about-link-list,
html[data-theme="dark"] .about-resource-card em,
html[data-theme="dark"] .about-release-card ul {
    color: #bdcada !important;
}

html[data-theme="dark"] .about-card-kicker,
html[data-theme="dark"] .about-facts span,
html[data-theme="dark"] .about-link-list span,
html[data-theme="dark"] .about-resource-card small {
    color: #91a6bc !important;
}

html[data-theme="dark"] .about-link-list a,
html[data-theme="dark"] .about-resource-card,
html[data-theme="dark"] .about-facts div {
    color: #d7e2ec !important;
    border-color: #35475a !important;
}

html[data-theme="dark"] .about-card,
html[data-theme="dark"] .about-resource-card,
html[data-theme="dark"] .about-release-card {
    background: #1b2837 !important;
    border-color: #35475a !important;
}

html[data-theme="dark"] .about-project-card {
    border-color: #31475f !important;
}

/* ============================================================
   DARK THEME — camera workspace and Management Tools contrast
   ============================================================ */
html[data-theme="dark"] .video-frame-wrap,
html[data-theme="dark"] .video-view .video-frame-wrap {
    background: #111b27 !important;
    border-color: #263547 !important;
}

html[data-theme="dark"] .camera-stream {
    background: #080d13 !important;
    box-shadow: 0 0 0 1px #2b3a4c !important;
}

html[data-theme="dark"] .nodes-management-item {
    border-bottom-color: #334456 !important;
    color: #dce6f0 !important;
}

html[data-theme="dark"] .nodes-management-item:hover {
    background: #1d2b3a !important;
}

html[data-theme="dark"] .nodes-management-item .name {
    color: #e8eef5 !important;
}

html[data-theme="dark"] .nodes-management-item .id {
    color: #9fb1c4 !important;
}

html[data-theme="dark"] .nodes-stats,
html[data-theme="dark"] #totalNodesCount {
    color: #c5d2df !important;
}

html[data-theme="dark"] #nodesManagementList::-webkit-scrollbar-thumb {
    background: #405369 !important;
}

html[data-theme="dark"] #nodesManagementList::-webkit-scrollbar-thumb:hover {
    background: #536a83 !important;
}

/* ==========================================================
   DARK THEME — chat workspace, controls and residual contrast
   ========================================================== */
html[data-theme="dark"] {
    --mc-chat-bg: #111c29;
    --mc-chat-surface: #182636;
    --mc-chat-surface-raised: #203044;
    --mc-chat-border: #2e4258;
    --mc-chat-input: #1b2b3d;
    --mc-chat-text: #eef6ff;
    --mc-chat-muted: #9fb0c3;
}

/* Darken the complete conversation workspace. */
html[data-theme="dark"] .messages-view,
html[data-theme="dark"] .messages-container {
    background: var(--mc-chat-bg) !important;
    color: var(--mc-chat-text) !important;
}

html[data-theme="dark"] .messages-container {
    border-left-color: var(--mc-chat-border) !important;
    border-right-color: var(--mc-chat-border) !important;
}

/* Incoming and system messages must remain readable on the dark canvas. */
html[data-theme="dark"] .message.rx .bubble {
    background: var(--mc-chat-surface-raised) !important;
    color: var(--mc-chat-text) !important;
    border-color: var(--mc-chat-border) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .message.rx .bubble .sender {
    color: #8fc5ff !important;
}

html[data-theme="dark"] .message.system .bubble {
    background: #273140 !important;
    color: #d8e2ed !important;
    border-color: #3b4858 !important;
}

html[data-theme="dark"] .bubble .time,
html[data-theme="dark"] .message-time {
    color: var(--mc-chat-muted) !important;
}

/* Composer: slightly lighter than the chat canvas, with a subdued frame. */
html[data-theme="dark"] .input-area {
    background: #142130 !important;
    border-top-color: var(--mc-chat-border) !important;
}

html[data-theme="dark"] .input-form input[type="text"],
html[data-theme="dark"] .message-input {
    background: var(--mc-chat-input) !important;
    color: var(--mc-chat-text) !important;
    border-color: #36506a !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015);
}

html[data-theme="dark"] .input-form input[type="text"]::placeholder,
html[data-theme="dark"] .message-input::placeholder {
    color: #8fa3b8 !important;
}

html[data-theme="dark"] .input-form input[type="text"]:focus,
html[data-theme="dark"] .message-input:focus {
    background: #203247 !important;
    border-color: #4ea1ff !important;
    box-shadow: 0 0 0 2px rgba(78, 161, 255, 0.16) !important;
}


html[data-theme="dark"] .camera-white-balance-group select {
    background-color: #101d2b !important;
    color: #eef6ff !important;
    border-color: #3a526d !important;
}

html[data-theme="dark"] .camera-white-balance-group label {
    color: #9fb4cc !important;
}

/* Camera defaults button should belong to the dark control surface. */
html[data-theme="dark"] .camera-defaults-btn {
    background: #223349 !important;
    color: #eef6ff !important;
    border-color: #3a526d !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .camera-defaults-btn:hover {
    background: #2b4059 !important;
    border-color: #5b82aa !important;
}

/* Residual navy text inherited from the light theme. */
html[data-theme="dark"] :is(
    .media-title,
    .media-summary strong,
    .media-summary-count,
    .nodes-tools-title,
    .nodes-tools-count,
    .nodes-management-count,
    .camera-image-panel label,
    .camera-control-label,
    .camera-value,
    .workspace-page-title,
    .workspace-page-subtitle,
    .system-card-title,
    .settings-card-title,
    .nodes-list-title,
    .nodes-list-count
) {
    color: var(--mc-chat-text) !important;
}

html[data-theme="dark"] :is(
    .media-summary,
    .media-meta,
    .camera-control-help,
    .nodes-tools-subtitle,
    .nodes-management-meta
) {
    color: var(--mc-chat-muted) !important;
}

/* Management list names and counters — keep hierarchy but never lose contrast. */
html[data-theme="dark"] .nodes-management-item .name,
html[data-theme="dark"] #nodesManagementList .name,
html[data-theme="dark"] #nodesManagementList strong {
    color: #edf5ff !important;
}

html[data-theme="dark"] .nodes-management-item .id,
html[data-theme="dark"] #nodesManagementList .id {
    color: #9eb1c6 !important;
}

html[data-theme="dark"] .nodes-stats,
html[data-theme="dark"] #totalNodesCount,
html[data-theme="dark"] .nodes-tools-total {
    color: #cbd8e6 !important;
}

/* ==========================================================
   DARK THEME — node position actions and search controls
   ========================================================== */
html[data-theme="dark"] {
    --mc-dark-control-bg: #223349;
    --mc-dark-control-bg-hover: #2b4059;
    --mc-dark-control-border: #3a526d;
    --mc-dark-control-text: #eef6ff;
}

/* Position action buttons: keep labels readable and use the standard dark control surface. */
html[data-theme="dark"] .position-actions button,
html[data-theme="dark"] .position-no-data button,
html[data-theme="dark"] .node-position-map-btn,
html[data-theme="dark"] .node-detail-quick-actions .quick-action {
    background: var(--mc-dark-control-bg) !important;
    color: var(--mc-dark-control-text) !important;
    border-color: var(--mc-dark-control-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .position-actions button:hover,
html[data-theme="dark"] .position-no-data button:hover,
html[data-theme="dark"] .node-position-map-btn:hover,
html[data-theme="dark"] .node-detail-quick-actions .quick-action:hover:not(:disabled) {
    background: var(--mc-dark-control-bg-hover) !important;
    color: #ffffff !important;
    border-color: #5b82aa !important;
}

html[data-theme="dark"] .node-detail-quick-actions .quick-action:disabled {
    background: #1a2736 !important;
    color: #718399 !important;
    border-color: #2d3d50 !important;
}

/* Position values and separators should remain legible on the node card. */
html[data-theme="dark"] .coord {
    border-bottom-color: #43566b !important;
}

html[data-theme="dark"] .coord .label,
html[data-theme="dark"] .position-reference,
html[data-theme="dark"] .position-no-data {
    color: #9eb1c6 !important;
}

html[data-theme="dark"] .coord .value {
    color: #edf5ff !important;
}

/* Search clear button: match the search field instead of using the light beige preset. */
html[data-theme="dark"] .clear-search-btn {
    background: var(--mc-dark-control-bg) !important;
    color: #d7e4f1 !important;
    border: 1px solid var(--mc-dark-control-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .clear-search-btn:hover {
    background: var(--mc-dark-control-bg-hover) !important;
    color: #ffffff !important;
    border-color: #5b82aa !important;
}

html[data-theme="dark"] .clear-search-btn:focus-visible {
    outline: 2px solid rgba(78, 161, 255, .45) !important;
    outline-offset: 1px;
}

/* Short node identifier badge in the details header. */
html[data-theme="dark"] .node-detail-short-id {
    background: #32445b !important;
    color: #eaf2ff !important;
    border-color: #51627b !important;
}

/* Dark theme node values contrast */
body.dark-theme .node-detail-value,
body.dark-theme .node-data-value,
body.dark-theme .radio-value,
body.dark-theme .position-value,
body.dark-theme .detail-value,
body.dark-theme .info-value,
body.dark-theme .tab-content .value,
body.dark-theme .node-details-card .value{color:#e8eef7!important;font-weight:600;}
body.dark-theme .quality-good{color:#6fdc8c!important;}
body.dark-theme .quality-fair{color:#f0c75e!important;}
body.dark-theme .quality-poor{color:#ff7d7d!important;}

/* ==========================================================
   DARK THEME — Weather card
   Match the standard MeshCenter dark surfaces used by About,
   System and node cards. Keep weather states readable without
   reintroducing light panels inside the dark sidebar.
   ========================================================== */
html[data-theme="dark"] .weather-card {
    background: #1b2938 !important;
    border-color: #34475b !important;
    color: #eaf2fb !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .weather-card-header {
    background: transparent !important;
}

html[data-theme="dark"] .weather-card-title,
html[data-theme="dark"] .weather-temperature {
    color: #f2f7fd !important;
}

html[data-theme="dark"] .weather-location,
html[data-theme="dark"] .weather-condition,
html[data-theme="dark"] .weather-footer,
html[data-theme="dark"] .weather-forecast-date,
html[data-theme="dark"] .weather-forecast-description,
html[data-theme="dark"] .weather-forecast-placeholder {
    color: #9fb0c2 !important;
}

/* Metrics become three dark sub-panels rather than white tiles. */
html[data-theme="dark"] .weather-metrics {
    background: #34475b !important;
    border-top-color: #34475b !important;
    border-bottom-color: #34475b !important;
}

html[data-theme="dark"] .weather-metric {
    background: #202f40 !important;
}

html[data-theme="dark"] .weather-metric span {
    color: #91a4b8 !important;
}

html[data-theme="dark"] .weather-metric strong {
    color: #edf4fb !important;
}

/* Forecast uses the same raised dark-card hierarchy as About. */
html[data-theme="dark"] .weather-forecast {
    background: #182533 !important;
    border-top-color: #34475b !important;
}

html[data-theme="dark"] .weather-forecast-title {
    color: #b7c6d6 !important;
}

html[data-theme="dark"] .weather-forecast-day {
    background: #223245 !important;
    border-color: #3a4e64 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .weather-forecast-label,
html[data-theme="dark"] .weather-forecast-temperature {
    color: #edf4fb !important;
}

/* Refresh/status pill — dark by default, state colors remain semantic. */
html[data-theme="dark"] .weather-state-badge {
    background: #223349 !important;
    border-color: #3a526d !important;
    color: #dce8f5 !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .weather-state-badge:hover {
    background: #2b4059 !important;
    border-color: #5b82aa !important;
    color: #ffffff !important;
}

html[data-theme="dark"] .weather-online .weather-state-badge {
    background: #17392d !important;
    border-color: #2c6b52 !important;
    color: #8ce2b5 !important;
}

html[data-theme="dark"] .weather-loading .weather-state-badge {
    background: #223349 !important;
    border-color: #3a526d !important;
    color: #b9c9da !important;
}

html[data-theme="dark"] .weather-error .weather-state-badge {
    background: #45272b !important;
    border-color: #744047 !important;
    color: #ffb3ba !important;
}

html[data-theme="dark"] .weather-stale .weather-state-badge {
    background: #493b20 !important;
    border-color: #76602f !important;
    color: #f2d17a !important;
}


/* Dark theme - selected node title contrast */
html[data-theme="dark"] .selected-node-card .node-name,
html[data-theme="dark"] .node-details-panel .node-name,
html[data-theme="dark"] .selected-node-card .node-title,
html[data-theme="dark"] .node-details-panel .node-title{
    color:#f4f8ff !important;
    font-weight:700;
    text-shadow:none;
}

/* Dark theme - node card titles (right panel and selected node header) */
html[data-theme="dark"] .node-card-topline .node-card-title,
html[data-theme="dark"] .node-card .node-card-title {
    color: #f4f8ff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* ==========================================================
   DARK THEME — Selected node header and Radio values
   Exact selectors used by renderNodeDetails()/renderRadioPane().
   ========================================================== */
html[data-theme="dark"] #nodeDetails .node-detail-card .node-detail-name {
    color: #f4f8ff !important;
    -webkit-text-fill-color: #f4f8ff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] #nodeDetails .node-detail-radio .radio-param .value {
    color: #eaf2fb !important;
    -webkit-text-fill-color: #eaf2fb !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] #nodeDetails .node-detail-radio .radio-param .label {
    color: #9fb0c3 !important;
}

html[data-theme="dark"] #nodeDetails .node-detail-radio .radio-param {
    border-bottom-color: #52657a !important;
}

/* ============================================================
   CAMERA PREVIEW — RESPONSIVE, NON-CROPPING STREAM
   ============================================================ */
.video-view {
    overflow: hidden !important;
}

.video-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.video-frame-wrap {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 12px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    contain: layout paint !important;
}

.camera-stream,
.camera-freeze-frame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

.camera-stream {
    position: relative !important;
    z-index: 1 !important;
}

.camera-freeze-frame {
    position: absolute !important;
    inset: 12px !important;
    z-index: 2 !important;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
    pointer-events: none !important;
}

.video-info-bar,
.video-controls {
    min-width: 0 !important;
    flex: none !important;
}

/* Keep the preview usable on shorter browser windows. */
@media (max-height: 760px) {
    .video-header {
        min-height: 52px !important;
        padding-block: 9px !important;
    }

    .video-frame-wrap {
        padding: 8px !important;
    }

    .camera-freeze-frame {
        inset: 8px !important;
        width: calc(100% - 16px) !important;
        height: calc(100% - 16px) !important;
    }

    .video-controls {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}


/* ==========================================================
   Camera feed readiness state
   Hide the browser broken-image UI until the first MJPEG frame.
   ========================================================== */
.video-frame-wrap {
    position: relative;
}

.camera-stream {
    opacity: 1;
    transition: opacity 160ms ease;
}

.camera-stream.camera-stream-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

.camera-loading-placeholder {
    position: absolute;
    inset: 12px;
    z-index: 3;
    display: none;
    place-items: center;
    align-content: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--mc-border, #334155);
    border-radius: 8px;
    background: var(--mc-surface, #f8fafc);
    color: var(--mc-text-secondary, #64748b);
    text-align: center;
    pointer-events: none;
}

.camera-loading-placeholder.camera-loading-visible {
    display: grid;
}

.camera-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(59, 130, 246, .22);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: camera-loading-spin .8s linear infinite;
}

.camera-loading-title {
    color: var(--mc-text-primary, #1e293b);
    font-size: 13px;
    font-weight: 700;
}

.camera-loading-text {
    font-size: 11px;
}

html[data-theme="dark"] .camera-loading-placeholder {
    border-color: #2f4053;
    background: #101c29;
    color: #94a8bd;
}

html[data-theme="dark"] .camera-loading-title {
    color: #eef5ff;
}

@keyframes camera-loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .camera-loading-spinner {
        animation-duration: 1.8s;
    }
    .camera-stream {
        transition: none;
    }
}

/* ==========================================================
   DARK THEME - Chat list preview contrast
   Exact classes used by renderChatItem() in static/chat.js.
   ========================================================== */
html[data-theme="dark"] .chat-item .chat-name {
    color: #f4f8ff !important;
    font-weight: 700 !important;
}

html[data-theme="dark"] .chat-item .chat-last-msg,
html[data-theme="dark"] .chat-item .chat-last-sender,
html[data-theme="dark"] .chat-item .chat-last-text {
    color: #aebed0 !important;
}

html[data-theme="dark"] .chat-item.selected .chat-last-sender,
html[data-theme="dark"] .chat-item.selected .chat-last-text,
html[data-theme="dark"] .chat-item.active .chat-last-sender,
html[data-theme="dark"] .chat-item.active .chat-last-text {
    color: #c9d7e6 !important;
}

html[data-theme="dark"] .chat-item .chat-time {
    color: #9fb0c2 !important;
}


/* ==========================================================
   Workspace Stage 1: application navigation + Devices
   ========================================================== */
.workspace-application-section {
    display: grid;
    gap: 6px;
}

.workspace-nav-btn {
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 14px;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #334155;
    text-align: left;
    cursor: pointer;
}

.workspace-nav-btn:hover,
.workspace-nav-btn.active {
    border-color: #c9d8ea;
    background: #eef5fd;
    color: #173f73;
}

.workspace-nav-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #e6eef8;
}

.workspace-nav-btn strong,
.workspace-nav-btn small {
    display: block;
}

.workspace-nav-btn strong {
    font-size: 12px;
    line-height: 1.2;
}

.workspace-nav-btn small {
    margin-top: 2px;
    color: #8795a8;
    font-size: 9px;
    font-weight: 500;
}

.workspace-nav-arrow {
    color: #8ba0b7;
    font-size: 18px;
}

.devices-view {
    min-width: 0;
    min-height: 0;
    flex: 1;
    padding: 10px;
    overflow: hidden;
}

.devices-panel {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mc-border, #d8e1ec);
    border-radius: 12px;
    background: var(--mc-panel, #f7f9fc);
}

.devices-header {
    flex: 0 0 auto;
}

.devices-content {
    min-height: 0;
    flex: 1;
    display: grid;
    place-items: center;
    padding: 28px;
}

.devices-empty-state {
    width: min(520px, 100%);
    padding: 36px 28px;
    border: 1px dashed #c8d5e5;
    border-radius: 14px;
    background: rgba(255,255,255,.55);
    text-align: center;
}

.devices-empty-icon {
    margin-bottom: 12px;
    font-size: 40px;
}

.devices-empty-state h3 {
    margin: 0 0 7px;
    color: #17365f;
    font-size: 20px;
}

.devices-empty-state p {
    margin: 0 auto;
    max-width: 430px;
    color: #718198;
    font-size: 12px;
    line-height: 1.55;
}

.devices-empty-tags {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.devices-empty-tags span {
    padding: 4px 9px;
    border: 1px solid #cfdae8;
    border-radius: 999px;
    background: #fff;
    color: #48617e;
    font-size: 10px;
    font-weight: 700;
}

html[data-theme="dark"] .workspace-nav-btn {
    color: #dce8f6;
}

html[data-theme="dark"] .workspace-nav-btn:hover,
html[data-theme="dark"] .workspace-nav-btn.active {
    border-color: #36516c;
    background: #22364a;
    color: #fff;
}

html[data-theme="dark"] .workspace-nav-icon {
    background: #273d53;
}

html[data-theme="dark"] .workspace-nav-btn small,
html[data-theme="dark"] .workspace-nav-arrow {
    color: #90a6bc;
}

html[data-theme="dark"] .devices-panel {
    border-color: #2f4357;
    background: #172432;
}

html[data-theme="dark"] .devices-empty-state {
    border-color: #3a5269;
    background: #1d2d3d;
}

html[data-theme="dark"] .devices-empty-state h3 {
    color: #f3f8ff;
}

html[data-theme="dark"] .devices-empty-state p {
    color: #9fb1c5;
}

html[data-theme="dark"] .devices-empty-tags span {
    border-color: #3a5269;
    background: #162534;
    color: #b8cbe0;
}


/* ==========================================================
   Temporary Workspace pages: actions and close controls
   ========================================================== */
.workspace-page-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.workspace-page-close-btn {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--mc-workspace-header-border, #d7e0ea);
    border-radius: 8px;
    background: transparent;
    color: var(--mc-text-primary, #16243a);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 34px;
    vertical-align: middle;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}

.workspace-page-close-btn .workspace-close-icon {
    display: block;
    width: 18px;
    height: 18px;
    overflow: visible;
    pointer-events: none;
}

.workspace-page-close-btn .workspace-close-icon path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.workspace-page-close-btn:hover {
    background: rgba(47, 123, 216, .10);
    border-color: rgba(47, 123, 216, .45);
    color: #165cba;
    transform: translateY(-1px);
}

.workspace-page-close-btn:focus-visible {
    outline: 2px solid rgba(47, 123, 216, .45);
    outline-offset: 2px;
}

html[data-theme="dark"] .workspace-page-close-btn,
body[data-theme="dark"] .workspace-page-close-btn {
    color: #dbe8f7;
    border-color: #405067;
    background: #162331;
}

html[data-theme="dark"] .workspace-page-close-btn:hover,
body[data-theme="dark"] .workspace-page-close-btn:hover {
    color: #ffffff;
    border-color: #5aa7ff;
    background: #20354a;
    transform: translateY(-1px);
}

/* ==========================================================
   Devices workspace: align with standard MeshCenter pages
   ========================================================== */
.devices-view {
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    padding: var(--mc-page-pad, 10px);
    box-sizing: border-box;
    overflow: hidden;
    background: var(--mc-bg-workspace);
}

.devices-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-card-radius, 12px);
    background: var(--mc-bg-panel);
    box-shadow: var(--mc-shadow-panel);
}

.devices-header.mc-workspace-header {
    flex: 0 0 var(--mc-workspace-header-height, 64px);
    min-height: var(--mc-workspace-header-height, 64px);
    margin: 0;
    padding: 14px 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--mc-border);
    background: var(--mc-bg-panel);
}

.devices-content {
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    padding: 14px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--mc-bg-workspace);
    scrollbar-gutter: stable;
}

.devices-empty-state {
    width: 100%;
    max-width: none;
    min-height: 190px;
    margin: 0;
    padding: 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mc-border-soft);
    border-radius: var(--mc-card-radius, 12px);
    background: var(--mc-bg-subtle);
    text-align: center;
    box-shadow: var(--mc-shadow-panel);
}

.devices-empty-icon {
    margin-bottom: 10px;
    font-size: 34px;
}

html[data-theme="dark"] .devices-panel {
    border-color: var(--mc-border);
    background: var(--mc-bg-panel);
}

html[data-theme="dark"] .devices-header.mc-workspace-header {
    border-bottom-color: var(--mc-border);
    background: var(--mc-bg-panel);
}

html[data-theme="dark"] .devices-content {
    background: var(--mc-bg-workspace);
}

html[data-theme="dark"] .devices-empty-state {
    border-color: var(--mc-border-soft);
    background: var(--mc-bg-subtle);
}


/* ==========================================================
   Unified workspace panel container
   Camera, Media, Devices and temporary application pages share
   one border, radius and shadow in both themes.
   ========================================================== */
.mc-workspace-panel {
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--mc-workspace-panel-bg, var(--mc-bg-panel));
    border: 1px solid var(--mc-workspace-border, var(--mc-border));
    border-radius: var(--mc-card-radius, 12px);
    box-shadow: var(--mc-shadow-panel);
}

/* Keep each page's existing flex behavior while using the same shell. */
.video-panel.mc-workspace-panel,
.media-panel.mc-workspace-panel,
.devices-panel.mc-workspace-panel,
.system-panel.mc-workspace-panel,
.settings-panel.mc-workspace-panel,
.about-shell.mc-workspace-panel {
    background: var(--mc-workspace-panel-bg, var(--mc-bg-panel));
    border-color: var(--mc-workspace-border, var(--mc-border));
    border-radius: var(--mc-card-radius, 12px);
    box-shadow: var(--mc-shadow-panel);
}

/* Dark theme: identical deep outline and restrained elevation everywhere. */
html[data-theme="dark"] .mc-workspace-panel,
body[data-theme="dark"] .mc-workspace-panel {
    background: var(--mc-workspace-panel-bg, #18212c);
    border-color: #0a121c !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .42),
        0 8px 24px rgba(0, 0, 0, .16) !important;
}

/* Devices previously had a lighter outline; the shared shell owns it now. */
html[data-theme="dark"] .devices-panel.mc-workspace-panel,
body[data-theme="dark"] .devices-panel.mc-workspace-panel {
    border-color: #0a121c !important;
}

/* Light theme uses the same subtle elevation as the established pages. */
html[data-theme="light"] .mc-workspace-panel,
body[data-theme="light"] .mc-workspace-panel {
    border-color: var(--mc-workspace-border, var(--mc-border));
    box-shadow: var(--mc-shadow-panel);
}


/* Keep temporary workspace page headers and close controls aligned identically. */
.settings-header > .workspace-page-close-btn,
.about-header > .workspace-page-close-btn {
    margin-left: auto;
}

.workspace-page-actions > .workspace-page-close-btn {
    margin-left: 2px;
}


/* Stage 2A weather/location dark-theme alignment */
html[data-theme="dark"] .weather-location-name { color: #f4f8ff; }
html[data-theme="dark"] .weather-location-coordinates { color: #8fa7c2; }
html[data-theme="dark"] .weather-location-block:hover .weather-location-name { color: #66b2ff; }
html[data-theme="dark"] .settings-select {
    border-color: #34475d;
    background: #0f1d2b;
    color: #f4f8ff;
}

/* ============================================================
   UNIFIED POPOVER SURFACES — Stage 2C.7.4
   Workspace and Notifications use one shared visual language.
   ============================================================ */
:root {
    --mc-popover-bg: #ffffff;
    --mc-popover-header-bg: #f7f9fc;
    --mc-popover-item-hover: #eef3f8;
    --mc-popover-border: #d7dee8;
    --mc-popover-divider: #e5eaf0;
    --mc-popover-text: #26364b;
    --mc-popover-muted: #7a8798;
    --mc-popover-control-bg: #eef3f8;
    --mc-popover-control-hover: #e1e9f2;
    --mc-popover-shadow: 0 14px 34px rgba(15, 23, 42, .20);
}

/* Shared shell */
.workspace-popover,
.notification-popover {
    border-color: var(--mc-popover-border);
    background: var(--mc-popover-bg);
    color: var(--mc-popover-text);
    box-shadow: var(--mc-popover-shadow);
}

/* Shared headers */
.workspace-popover-header,
.notification-popover-header {
    background: var(--mc-popover-header-bg);
    border-bottom-color: var(--mc-popover-divider);
}

.workspace-popover-header span,
.notification-popover-header span,
.notification-item-copy small,
.notification-empty {
    color: var(--mc-popover-muted);
}

/* Shared controls */
.workspace-popover-close,
.notification-clear-btn {
    color: var(--mc-popover-muted);
}

.workspace-popover-close:hover,
.notification-clear-btn:hover {
    background: var(--mc-popover-control-hover);
    color: var(--mc-popover-text);
}

.notification-clear-btn,
.dock-notification-btn {
    background: var(--mc-popover-control-bg);
    border-color: var(--mc-popover-border);
    color: var(--mc-popover-text);
}

.dock-notification-btn:hover {
    background: var(--mc-popover-control-hover);
}

/* Shared internal rhythm */
.workspace-menu-section,
.notification-item {
    border-color: var(--mc-popover-divider);
}

.notification-item:hover {
    background: var(--mc-popover-item-hover);
}

.workspace-popover::after {
    background: var(--mc-popover-bg);
    border-color: var(--mc-popover-border);
}

html[data-theme="dark"],
body[data-theme="dark"] {
    --mc-popover-bg: #202a36;
    --mc-popover-header-bg: #18212c;
    --mc-popover-item-hover: #2b3949;
    --mc-popover-border: #445164;
    --mc-popover-divider: #364253;
    --mc-popover-text: #e4edf7;
    --mc-popover-muted: #91a2b6;
    --mc-popover-control-bg: #18212c;
    --mc-popover-control-hover: #2b3949;
    --mc-popover-shadow: 0 16px 38px rgba(0, 0, 0, .50);
}

html[data-theme="dark"] .workspace-popover,
html[data-theme="dark"] .notification-popover,
body[data-theme="dark"] .workspace-popover,
body[data-theme="dark"] .notification-popover {
    background: var(--mc-popover-bg);
    border-color: var(--mc-popover-border);
    color: var(--mc-popover-text);
    box-shadow: var(--mc-popover-shadow);
}

html[data-theme="dark"] .workspace-popover-header,
html[data-theme="dark"] .notification-popover-header,
body[data-theme="dark"] .workspace-popover-header,
body[data-theme="dark"] .notification-popover-header {
    background: var(--mc-popover-header-bg);
    border-bottom-color: var(--mc-popover-divider);
}

html[data-theme="dark"] .notification-item:hover,
body[data-theme="dark"] .notification-item:hover {
    background: var(--mc-popover-item-hover);
}

html[data-theme="dark"] .notification-clear-btn,
html[data-theme="dark"] .dock-notification-btn,
body[data-theme="dark"] .notification-clear-btn,
body[data-theme="dark"] .dock-notification-btn {
    background: var(--mc-popover-control-bg);
    border-color: var(--mc-popover-border);
    color: var(--mc-popover-text);
}

html[data-theme="dark"] .notification-clear-btn:hover,
html[data-theme="dark"] .dock-notification-btn:hover,
body[data-theme="dark"] .notification-clear-btn:hover,
body[data-theme="dark"] .dock-notification-btn:hover {
    background: var(--mc-popover-control-hover);
}

html[data-theme="dark"] .workspace-popover::after,
body[data-theme="dark"] .workspace-popover::after {
    background: var(--mc-popover-bg);
    border-color: var(--mc-popover-border);
}