/* ===== БАЗОВЫЕ СТИЛИ ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f0f2f5;
    color: #2c3e50;
    height: 100vh;
    overflow: hidden;
    user-select: none;
}

/* ===== КОНТЕЙНЕР ===== */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    background: #f8f9fa;
}

/* ===== HEADER ===== */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #1a2a4a 0%, #2a3a6a 100%);
    color: white;
    flex-shrink: 0;
    min-height: 52px;
}

.header h1 {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.3px;
}

.header h1 span { font-size: 22px; }

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    border-radius: 8px;
    color: white;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.header-btn:hover { background: rgba(255,255,255,0.2); }

/* ===== STATUS BAR ===== */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 16px;
    background: #e8eaed;
    font-size: 12px;
    color: #555;
    flex-shrink: 0;
    border-bottom: 1px solid #d5d8dd;
    min-height: 30px;
}

#statusText { font-weight: 500; }
#nodeCount { color: #3a5a7a; font-weight: 500; }

/* ===== MAIN LAYOUT ===== */
.main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
    background: white;
}

/* ===== CHAT AREA ===== */
.chat-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background: white;
}

/* ===== CHAT HEADER ===== */
.chat-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: white;
    border-bottom: 1px solid #e5e8ec;
    flex-shrink: 0;
    min-height: 48px;
    gap: 8px;
}

.chat-header-info {
    flex: 1;
    min-width: 0;
}

.chat-title {
    font-size: 16px;
    font-weight: 600;
    color: #1a2a4a;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-subtitle {
    font-size: 11px;
    color: #888;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.chat-actions-btn {
    background: none;
    border: none;
    font-size: 18px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    color: #666;
    transition: all 0.2s;
}

.chat-actions-btn:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.chat-actions-btn:active { transform: scale(0.95); }

.back-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    color: #4a5a7a;
}

.back-btn:hover { color: #1a2a4a; }

/* ===== CHAT LIST ===== */
.chat-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px;
}

.chat-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    background: white;
    border: 1px solid transparent;
}

.chat-item:hover {
    background: #f0f4f8;
    transform: translateX(2px);
}

.chat-item.has-unread {
    background: #fafff5;
    border-left: 3px solid #ff5722;
}

.chat-item.has-unread:hover { background: #f5ffe8; }

.chat-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: #e8ecf0;
}

.chat-icon.channel { background: #d4e0f0; }
.chat-icon.dm { background: #e8e0f0; }

.chat-info {
    flex: 1;
    min-width: 0;
}

.chat-name {
    font-weight: 500;
    font-size: 14px;
    color: #1a2a4a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-last-msg {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chat-last-sender {
    color: #1e3c72;
    font-weight: 500;
    flex-shrink: 0;
    font-size: 11px;
}

.chat-last-text { color: #888; overflow: hidden; text-overflow: ellipsis; }

.chat-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 2px;
}

.chat-time { font-size: 10px; color: #aaa; }

.chat-unread-badge {
    background: #ff5722;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.chat-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    padding: 8px 8px 4px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 4px;
}

/* ===== MESSAGES VIEW ===== */
.messages-view {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fafbfc;
}

.loading {
    text-align: center;
    color: #999;
    padding: 30px 16px;
    font-size: 14px;
}

/* ===== MESSAGES ===== */
.message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    animation: fadeIn 0.2s ease;
}

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

.message.me { align-self: flex-end; }
.message.rx { align-self: flex-start; }
.message.system { align-self: center; max-width: 90%; }

.bubble {
    padding: 8px 12px;
    border-radius: 12px;
    word-wrap: break-word;
    position: relative;
}

.message.me .bubble {
    background: linear-gradient(135deg, #1a73e8, #1557b0);
    color: white;
    border-bottom-right-radius: 4px;
}

.message.rx .bubble {
    background: white;
    color: #1a2a4a;
    border: 1px solid #e5e8ec;
    border-bottom-left-radius: 4px;
}

.message.system .bubble {
    background: #f5f0e8;
    color: #7a6a5a;
    border: 1px solid #e8e0d5;
    border-radius: 16px;
    text-align: center;
    font-size: 13px;
    padding: 6px 14px;
}

.bubble .sender {
    font-size: 11px;
    font-weight: 600;
    color: #4a7aaa;
    margin-bottom: 2px;
}

.message.me .bubble .sender { color: rgba(255,255,255,0.8); }

.bubble .text { font-size: 14px; line-height: 1.4; }
.bubble .time { font-size: 10px; opacity: 0.6; margin-top: 4px; text-align: right; }

/* ===== INPUT AREA ===== */
.input-area {
    padding: 4px 12px 6px;
    background: white;
    border-top: 1px solid #e5e8ec;
    flex: 0 0 auto;
    position: relative;
}

.input-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.input-form input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d5d8dd;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
    background: #f5f7fa;
    transition: border-color 0.2s;
    min-height: 38px;
}

.input-form input[type="text"]:focus {
    border-color: #1a73e8;
    background: white;
    box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}

.input-form button[type="submit"] {
    padding: 8px 24px;
    min-width: 80px;
    min-height: 38px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, #1a73e8, #1557b0);
    color: white;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.input-form button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(26,115,232,0.3);
}

.input-form button[type="submit"]:active { transform: scale(0.96); }
.input-form button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
.input-form button[type="submit"].sending {
    min-width: 100px;
}

/* ===== EMOJI BUTTON ===== */
.emoji-btn {
    width: 38px;
    height: 38px;
    border: 1px solid #d5d8dd;
    border-radius: 50%;
    background: #f5f7fa;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    text-align: center;
}

.emoji-btn:hover {
    background: #e8ecf0;
    transform: scale(1.05);
}

/* ===== EMOJI PICKER ===== */
.emoji-picker {
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 340px;
    max-height: 400px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.15);
    border: 1px solid #e5e8ec;
    display: none;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
}

.emoji-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.emoji-picker-header span { font-size: 14px; font-weight: 600; color: #1a2a4a; }

.emoji-close-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
    padding: 0 4px;
}

.emoji-close-btn:hover { color: #333; }

.emoji-categories {
    display: flex;
    gap: 2px;
    padding: 6px 10px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.emoji-cat-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
    opacity: 0.6;
    white-space: nowrap;
}

.emoji-cat-btn:hover { opacity: 1; background: #f0f0f0; }
.emoji-cat-btn.active { opacity: 1; background: #e8ecf0; }

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
}

.emoji-item {
    background: none;
    border: none;
    font-size: 22px;
    padding: 3px 1px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-item:hover { background: #f0f0f0; transform: scale(1.1); }

/* ===== SIDEBAR ===== */
.sidebar {
    display: flex;
    flex-direction: column;
    width: 400px;
    background: #f8f9fa;
    border-left: 1px solid #e5e8ec;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar.hidden { display: none; }

/* ===== BASE CARD ===== */
.base-card {
    background: linear-gradient(135deg, #e8f0f8, #d5e0ec);
    padding: 8px 14px;
    border-bottom: 1px solid #d5d8dd;
    flex-shrink: 0;
}

.base-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a3a5a;
    display: flex;
    justify-content: space-between;
}

.base-status-line {
    font-size: 12px;
    color: #2a4a6a;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* ===== SENSORS CARD ===== */
.sensors-card {
    background: #f0f4f0;
    padding: 8px 10px;
    border-bottom: 1px solid #d5d8dd;
    flex-shrink: 0;
}

.sensors-title {
    font-size: 12px;
    font-weight: 600;
    color: #2a5a3a;
    margin-bottom: 4px;
}

.sensors-grid {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    justify-content: space-between;
    column-gap: 14px;
    row-gap: 2px;
}

.sensor-item {
    display: flex;
    align-items: baseline;
    gap: 2px;
    font-size: 11px;
}

.sensor-label { color: #888; font-size: 9px; text-transform: uppercase; }
.sensor-value { font-weight: 600; color: #1a3a2a; }
.sensor-unit { color: #aaa; font-size: 9px; }

.battery-indicator {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #d5d8dd;
}

.battery-bar {
    width: 100%;
    height: 6px;
    background: #d5d8dd;
    border-radius: 4px;
    overflow: hidden;
}

.battery-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    transition: width 0.5s;
    border-radius: 4px;
}

.sensor-update { font-size: 9px; color: #aaa; margin-top: 4px; }

/* ===== SIDEBAR TABS ===== */
.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid #e5e8ec;
    background: #f0f2f5;
    flex-shrink: 0;
}

.sidebar-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #888;
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
}

.sidebar-tab:hover { color: #333; background: #e8eaed; }
.sidebar-tab.active {
    color: #1e3c72;
    border-bottom-color: #1e3c72;
    background: white;
}

.sidebar-tab-content {
    flex: 1;
    overflow: hidden;
    display: none;
    flex-direction: column;
}

.sidebar-tab-content.active { display: flex; }

/* ===== NODES SECTION ===== */
.nodes-section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0 12px 12px;
    overflow: hidden;
}

.nodes-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 8px;
    padding-bottom: 4px;
}

.search-container.search-row {
    display: grid;
    grid-template-columns: 1fr 36px;
    gap: 6px;
    align-items: stretch;
    width: 100%;
}

.search-input-wide {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid #d5d8dd;
    border-radius: 8px;
    outline: none;
    background: #f8f8f8;
    color: #333;
}

.search-input-wide:focus {
    border-color: #8a9bb5;
    background: white;
    box-shadow: 0 0 0 2px rgba(30,60,114,0.08);
}

.clear-search-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: #e8dcc8;
    color: #7a6b5a;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.clear-search-btn:hover { background: #d5cbb8; }

.nodes-actions-row {
    display: flex;
    gap: 6px;
}

.rescan-nodes-btn {
    flex: 1;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    background: #d8e4f0;
    color: #2a5a8a;
}

.rescan-nodes-btn:hover { background: #c0d4e8; transform: translateY(-1px); }
.rescan-nodes-btn:active { transform: scale(0.95); }
.rescan-nodes-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ===== NODE DETAILS ===== */
#nodeDetails {
    flex-shrink: 0;
    margin-bottom: 8px;
}

.node-details {
    background: linear-gradient(135deg, #f5f3ef, #edebe7);
    border: 1px solid #d5d0c8;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

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

.node-title-btn {
    background: linear-gradient(135deg, #4a5a7a, #3a4a6a);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-align: left;
}

.node-title-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(50,70,100,0.25); }
.node-title-btn:active { transform: scale(0.98); }

.node-title-name {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.node-title-action {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.node-title-action::after { content: '→'; font-size: 14px; opacity: 0.6; }

.node-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 2px 10px;
    align-items: start;
}

.node-details-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.node-details-col-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-width: 75px;
    gap: 4px;
}

.node-details-item {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-size: 12px;
    line-height: 1.4;
    min-height: 20px;
}

.node-details-item .label {
    color: #999;
    min-width: 42px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 500;
}

.node-details-item .value {
    color: #4a5a6a;
    font-weight: 500;
    font-size: 12px;
    word-break: break-word;
    line-height: 1.3;
}

.node-details-placeholder {
    font-size: 12px;
    color: #aaa;
    text-align: center;
    padding: 8px 0;
}

/* ===== NODE DETAILS BUTTONS ===== */
.node-details-col-actions .favorite-btn,
.node-details-col-actions .ignore-btn {
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    width: 100%;
    height: 26px;
    line-height: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    letter-spacing: 0.3px;
    border: 1px solid;
}

.node-details-col-actions .favorite-btn {
    background: #e8ddc0;
    color: #8a7a4a;
    border-color: #d5c8a8;
}

.node-details-col-actions .favorite-btn::before { content: '⚑'; font-size: 12px; }
.node-details-col-actions .favorite-btn.active::before { content: '⚑'; }

.node-details-col-actions .favorite-btn:hover { background: #dccfad; transform: translateY(-1px); }
.node-details-col-actions .favorite-btn.active {
    background: #f5d980;
    color: #7a6a2a;
    border-color: #d4b85a;
}
.node-details-col-actions .favorite-btn.active:hover { background: #edcc6a; }

.node-details-col-actions .ignore-btn {
    background: #f0ddda;
    color: #9a5a4a;
    border-color: #e0c8c0;
}

.node-details-col-actions .ignore-btn::before { content: '🚫'; font-size: 12px; }
.node-details-col-actions .ignore-btn.active::before { content: '🔓'; }

.node-details-col-actions .ignore-btn:hover { background: #e8d0cc; transform: translateY(-1px); }
.node-details-col-actions .ignore-btn.active {
    background: #f0b8b0;
    color: #8a3a2a;
    border-color: #d9988a;
}
.node-details-col-actions .ignore-btn.active:hover { background: #e8a89e; }

/* ===== NODES SCROLL ===== */
.nodes-scroll {
    flex: 1;
    overflow-y: auto;
    padding-right: 8px;
    margin-right: -4px;
}

.nodes-scroll::-webkit-scrollbar {
    width: 4px;
}

.nodes-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.nodes-scroll::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 4px;
}

.nodes-scroll::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

/* ===== NODE CARD ===== */
.node-card {
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 6px;
    margin-right: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.node-card:hover { transform: translateX(3px); border-color: #b0b8c5; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.node-card.selected {
    background: linear-gradient(135deg, #f0eeea, #e8e5e0);
    border-color: #7a8aaa;
    border-width: 2px;
}
.node-card.ignored { opacity: 0.5; background: #f8f5f5; border-color: #e8d5d5; }
.node-card.ignored:hover { opacity: 0.7; }
.node-card.favorite {
    border-color: #d4c06a;
    border-width: 2px;
    background: linear-gradient(135deg, #fdf8e8, #f8f0d8);
}
.node-card.favorite:hover { border-color: #c0a84a; box-shadow: 0 2px 10px rgba(200,180,60,0.2); }

.node-card .unignore-btn-mini {
    background: #b0c8a0;
    color: white;
    border: none;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
    flex-shrink: 0;
}

.node-card .unignore-btn-mini:hover { background: #90b080; }

.node-card-heading {
    min-width: 0;
}

.node-card-title-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.node-card-title {
    flex: 1 1 auto;
    min-width: 0;
    color: #3a4a5a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.node-card-subtitle-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-top: 3px;
    padding-left: 1px;
}

.node-name {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #3a4a5a;
}

.node-inline-id {
    min-width: 0;
    font-size: 10px;
    font-weight: 400;
    color: #9aa5b5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-meta {
    font-size: 10px;
    color: #777;
    line-height: 1.4;
    margin-top: 4px;
}

.node-last-text {
    font-size: 10px;
    color: #6a7a8a;
    margin-top: 4px;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 600;
    flex-shrink: 0;
}
.badge-online { background: #b0d0b0; color: #3a6a3a; }
.badge-medium { background: #e8d8a0; color: #7a6a2a; }
.badge-offline { background: #d5d5d5; color: #777; }

/* ===== IGNORE BANNER ===== */
.ignore-banner {
    background: #f5ede8;
    border: 1px solid #e0c8b8;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideDown 0.3s ease-out;
}

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

.ignore-banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 12px;
}

.ignore-banner-content span {
    font-size: 13px;
    color: #8a6a5a;
    font-weight: 500;
}

.unignore-btn {
    background: #b0c8a0;
    color: white;
    border: none;
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.unignore-btn:hover { background: #90b080; transform: scale(1.02); }
.unignore-btn:active { transform: scale(0.95); }

/* ===== NODES MANAGEMENT ===== */
.nodes-tools {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
    position: relative;
}

.nodes-tools-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e3c72;
    margin-bottom: 8px;
}

.nodes-tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.nodes-tool-btn {
    padding: 6px 10px;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
}

.nodes-tool-btn:hover { transform: translateY(-1px); }
.nodes-tool-btn:active { transform: scale(0.95); }
.nodes-tool-btn.export { background: #e8f0e8; color: #2a6a3a; }
.nodes-tool-btn.export:hover { background: #d0e8d0; }
.nodes-tool-btn.import { background: #e8ecf5; color: #2a4a7a; }
.nodes-tool-btn.import:hover { background: #d0d8ec; }
.nodes-tool-btn.merge { background: #f5f0e8; color: #7a6a3a; }
.nodes-tool-btn.merge:hover { background: #ece0d0; }
.nodes-tool-btn.show { background: #f0e8f5; color: #5a3a7a; }
.nodes-tool-btn.show:hover { background: #e0d0ec; }
.nodes-tool-btn.cleanup { background: #f5e8e8; color: #8a3a3a; }
.nodes-tool-btn.cleanup:hover { background: #ecd0d0; }

.nodes-stats {
    font-size: 12px;
    color: #888;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f0f0f0;
}

.nodes-stats span { font-weight: 600; color: #1e3c72; }

/* ===== FORMAT MENU ===== */
.format-menu {
    position: absolute;
    background: white;
    border: 1px solid #d5d0c8;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    padding: 8px 0;
    z-index: 100;
    min-width: 180px;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
}

.format-menu-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.format-menu-content span {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #888;
    border-bottom: 1px solid #f0f0f0;
}

.format-menu-btn {
    padding: 8px 14px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    transition: background 0.2s;
    border-radius: 4px;
}

.format-menu-btn:hover { background: #f0f0f0; }
.format-menu-btn.cancel {
    color: #999;
    border-top: 1px solid #f0f0f0;
    margin-top: 4px;
    padding-top: 8px;
    text-align: center;
}

.format-menu-btn.cancel:hover { background: #f5f5f5; }

/* ===== NODES MANAGEMENT LIST ===== */
#tab-tools {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#nodesManagementList {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 8px 8px;
}

#nodesManagementList::-webkit-scrollbar {
    width: 4px;
}

#nodesManagementList::-webkit-scrollbar-track {
    background: transparent;
}

#nodesManagementList::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 4px;
}

#nodesManagementList::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

.nodes-management-item {
    padding: 8px 10px;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    font-size: 12px;
    gap: 8px;
    min-height: 36px;
}

.nodes-management-item .name-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.nodes-management-item .name {
    font-weight: 500;
    color: #333;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    overflow: hidden;
    flex-shrink: 1;
    line-height: 1.3;
    max-height: 2.6em;
}

.nodes-management-item .id {
    color: #999;
    font-size: 10px;
    font-family: monospace;
    flex-shrink: 0;
    word-break: break-all;
    max-width: 85px;
}

.nodes-management-item .status {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
}

.nodes-management-item .status.duplicate { background: #f5e8e8; color: #8a3a3a; }
.nodes-management-item .status.normal { background: #e8f0e8; color: #2a6a3a; }
.nodes-management-item .status.ignored { background: #f0f0f0; color: #888; }

/* ===== FILTERS ===== */
.nodes-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #555;
    user-select: none;
}

.toggle-label input { display: none; }

.toggle-slider {
    position: relative;
    width: 36px;
    height: 20px;
    background: #d0d0d0;
    border-radius: 10px;
    transition: background 0.3s;
    flex-shrink: 0;
}

.toggle-slider::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.toggle-label input:checked + .toggle-slider { background: #b0a090; }
.toggle-label input:checked + .toggle-slider::after { transform: translateX(16px); }
.toggle-label input:checked + .toggle-slider.favorite-slider { background: #e8c86a; }

.toggle-text { font-size: 12px; font-weight: 500; color: #666; }
.ignored-count { font-size: 11px; color: #c08880; font-weight: 500; }
.favorites-count { font-size: 11px; color: #c0a040; font-weight: 600; }

/* ===== MODALS ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-radius: 14px;
    min-width: 280px;
    max-width: 380px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    overflow: hidden;
}

.modal-header {
    padding: 14px 18px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header span { font-size: 15px; font-weight: 600; color: #3a4a5a; }

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
    padding: 0 4px;
}

.modal-body { padding: 14px 18px; }

.confirm-text {
    font-size: 15px;
    color: #444;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.confirm-btn {
    padding: 8px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.confirm-btn:hover { transform: translateY(-1px); }
.confirm-btn:active { transform: scale(0.95); }
.confirm-cancel { background: #e8e8e8; color: #666; }
.confirm-cancel:hover { background: #d5d5d5; }
.confirm-danger { background: #f0b8b0; color: #8a3a2a; }
.confirm-danger:hover { background: #e8a89e; }

.modal-action-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    text-align: center;
}

.modal-action-btn.danger { background: #f5e8e8; color: #b04a4a; }
.modal-action-btn.danger:hover { background: #ecd5d5; }
.modal-action-btn:not(.danger) { background: #e8e8e8; color: #555; }
.modal-action-btn:not(.danger):hover { background: #d5d5d5; }

/* ===== TOAST ===== */
.toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    max-width: 90%;
    text-align: center;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.success { background: #2e7d32; }
.toast.error { background: #c62828; }
.toast.info { background: #1a73e8; }

/* ===== ANIMATIONS ===== */
@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

.dots::after {
    content: '';
    animation: dots 1.5s steps(4, end) infinite;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
    .sidebar { 
        display: none;
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 85%;
        max-width: 400px;
        z-index: 100;
        border-left: 1px solid #e0e0e0;
        background: #f8f9fa;
    }
    .sidebar.hidden { display: none; }
    .sidebar:not(.hidden) {
        display: flex;
    }
    .bubble { max-width: 85%; }
    .modal-content { min-width: 260px; max-width: 320px; margin: 0 16px; }
    .nodes-management-item .id {
        max-width: 60px;
        font-size: 9px;
    }
}

@media (max-width: 768px) {
    .emoji-btn { 
        width: 44px; 
        height: 44px; 
        font-size: 20px; 
    }
    .input-form button[type="submit"] { 
        min-height: 44px; 
        min-width: 70px;
        padding: 6px 16px;
        font-size: 13px;
    }
    .input-form button[type="submit"].sending {
        min-width: 90px;
    }
    .emoji-picker { 
        width: 300px; 
        right: 0; 
        bottom: 64px; 
        max-height: 350px; 
    }
    .emoji-grid { 
        grid-template-columns: repeat(7, 1fr); 
        gap: 2px; 
        max-height: 230px; 
    }
    .emoji-item { 
        font-size: 20px; 
        padding: 3px 1px; 
        min-height: 30px; 
    }
    .sidebar:not(.hidden) {
        width: 85%;
        max-width: 380px;
    }
    .nodes-management-item .id {
        max-width: 50px;
        font-size: 9px;
    }
}

@media (max-width: 480px) {
    .emoji-btn { 
        width: 38px; 
        height: 38px; 
        font-size: 18px; 
    }
    .input-form button[type="submit"] { 
        min-height: 38px; 
        min-width: 60px;
        padding: 4px 12px;
        font-size: 12px;
    }
    .input-form button[type="submit"].sending {
        min-width: 80px;
    }
    .emoji-picker { 
        width: 260px; 
        right: 0; 
        bottom: 56px; 
        max-height: 280px; 
        border-radius: 12px; 
    }
    .emoji-grid { 
        grid-template-columns: repeat(6, 1fr); 
        gap: 1px; 
        max-height: 200px; 
    }
    .emoji-item { 
        font-size: 18px; 
        padding: 2px 1px; 
        min-height: 28px; 
    }
    .emoji-cat-btn { 
        font-size: 13px; 
        padding: 2px 4px; 
    }
    .chat-title { font-size: 15px; }
    .chat-subtitle { font-size: 10px; }
    .sidebar:not(.hidden) {
        width: 95%;
        max-width: 340px;
    }
    .nodes-management-item {
        padding: 6px 8px;
        gap: 4px;
        min-height: 32px;
    }
    .nodes-management-item .name {
        font-size: 11px;
        max-height: 2.2em;
    }
    .nodes-management-item .id {
        max-width: 40px;
        font-size: 8px;
    }
    .nodes-management-item .status {
        font-size: 9px;
        padding: 1px 6px;
    }
    .nodes-tools-grid {
        gap: 3px;
    }
    .nodes-tool-btn {
        font-size: 10px;
        padding: 4px 6px;
    }
}

/* ============================================================
   ТЕЛЕМЕТРИЯ
   ============================================================ */
.telemetry-section {
    padding: 4px 10px;
    border-top: 1px solid #d5d8dd;
    flex-shrink: 0;
    background: #f5f7fa;
}

.telemetry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    color: #3a5a7a;
    padding: 1px 0 2px 0;
}

.telemetry-header .telemetry-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.telemetry-header .telemetry-status {
    font-size: 9px;
    font-weight: 400;
    color: #888;
}

.telemetry-buttons {
    display: flex;
    gap: 6px;
    padding: 2px 0;
}

.telemetry-btn {
    flex: 1;
    padding: 4px 10px 5px 10px;
    border: 1px solid #d5d0c8;
    border-radius: 6px;
    background: #f8f6f2;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    font-family: inherit;
    min-height: 38px;
    justify-content: center;
}

.telemetry-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.telemetry-btn:active {
    transform: scale(0.98);
}

.telemetry-btn .telemetry-top {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.telemetry-btn .telemetry-icon {
    font-size: 13px;
    flex-shrink: 0;
    line-height: 1;
}

.telemetry-btn .telemetry-label {
    font-size: 9px;
    font-weight: 600;
    color: #555;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

.telemetry-btn .telemetry-update {
    font-size: 8px;
    color: #aaa;
    flex-shrink: 0;
    line-height: 1;
    margin-left: auto;
}

.telemetry-btn .telemetry-value {
    font-size: 13px;
    font-weight: 600;
    color: #1a2a4a;
    text-align: left;
    line-height: 1.3;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 17px;
}

.telemetry-btn.environment {
    border-color: #8ab4d8;
    background: #eef4f8;
}

.telemetry-btn.environment:hover {
    background: #dde8f0;
    border-color: #6a9ab8;
}

.telemetry-btn.environment .telemetry-value {
    color: #1a5a7a;
}

.telemetry-btn.power {
    border-color: #d4b85a;
    background: #f8f4e8;
}

.telemetry-btn.power:hover {
    background: #f0e8d0;
    border-color: #c0a040;
}

.telemetry-btn.power .telemetry-value {
    color: #7a6a2a;
}

.telemetry-config-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0 1px 0;
    font-size: 10px;
    color: #666;
    flex-wrap: wrap;
}

.telemetry-config-row select {
    padding: 2px 6px;
    border: 1px solid #d5d8dd;
    border-radius: 4px;
    font-size: 10px;
    background: white;
    outline: none;
    height: 22px;
}

.telemetry-config-row select:focus {
    border-color: #8a9bb5;
}

.telemetry-refresh-btn {
    padding: 2px 10px;
    border: none;
    border-radius: 12px;
    background: #d8e4f0;
    color: #2a5a8a;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    height: 22px;
    line-height: 1;
}

.telemetry-refresh-btn:hover {
    background: #c0d4e8;
}

.telemetry-refresh-btn:active {
    transform: scale(0.95);
}

.telemetry-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== МОДАЛЬНОЕ ОКНО ТЕЛЕМЕТРИИ ===== */
.modal-overlay.telemetry-modal {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-overlay.telemetry-modal .modal-content {
    min-width: 500px;
    max-width: 750px;
    max-height: 90vh;
    width: 92%;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    background: #ffffff;
}

.modal-overlay.telemetry-modal .modal-body {
    padding: 16px 20px 20px;
    overflow-y: auto;
    max-height: 75vh;
}

/* ===== КАРТОЧКИ ТЕКУЩИХ ЗНАЧЕНИЙ ===== */
.telemetry-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.telemetry-card {
    background: linear-gradient(135deg, #f8f9fc, #f0f2f5);
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
    border: 1px solid #e8eaed;
    transition: all 0.2s;
}

.telemetry-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.telemetry-card .card-label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.telemetry-card .card-value {
    font-size: 30px;
    font-weight: 700;
    color: #1a2a4a;
    margin: 6px 0 3px 0;
    line-height: 1.2;
}

.telemetry-card .card-range {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: #999;
}

.telemetry-card .card-range .range-min {
    color: #4a9eff;
    font-weight: 500;
}

.telemetry-card .card-range .range-max {
    color: #ff6b35;
    font-weight: 500;
}

.telemetry-card .card-range .range-sep {
    color: #ccc;
}

/* Цвета для карточек */
.telemetry-card:nth-child(1) .card-value { color: #ff6b35; }
.telemetry-card:nth-child(2) .card-value { color: #4a9eff; }
.telemetry-card:nth-child(3) .card-value { color: #2ecc71; }

/* ===== ГРАФИК ===== */
.telemetry-chart-container {
    width: 100%;
    height: 280px;
    position: relative;
    background: #f0f2f5;
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #e5e8ec;
    margin-bottom: 12px;
}

.telemetry-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* ===== ФУТЕР ===== */
.telemetry-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #aaa;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
    flex-wrap: wrap;
    gap: 6px;
}

.telemetry-time-controls {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.telemetry-time-controls .time-btn {
    padding: 4px 12px;
    border: 1px solid #d5d8dd;
    border-radius: 16px;
    background: white;
    font-size: 10px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.telemetry-time-controls .time-btn:hover {
    background: #f0f2f5;
    border-color: #b0b8c5;
}

.telemetry-time-controls .time-btn.active {
    background: #1a73e8;
    color: white;
    border-color: #1a73e8;
}

.telemetry-records-count {
    font-size: 10px;
    color: #888;
}

.telemetry-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.telemetry-export-btn {
    padding: 4px 14px;
    border: 1px solid #d5d8dd;
    border-radius: 16px;
    background: white;
    font-size: 10px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

.telemetry-export-btn:hover {
    background: #eef4ff;
    border-color: #b0c8f0;
    color: #1a73e8;
}

/* ===== АДАПТАЦИЯ ===== */
@media (max-width: 768px) {
    .modal-overlay.telemetry-modal .modal-content {
        min-width: auto;
        max-width: 96%;
        width: 96%;
        margin: 10px;
        max-height: 95vh;
    }
    
    .telemetry-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .telemetry-card .card-value {
        font-size: 24px;
    }
    
    .telemetry-card {
        padding: 10px 12px;
    }
    
    .telemetry-chart-container {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .modal-overlay.telemetry-modal .modal-content {
        max-width: 98%;
        width: 98%;
        border-radius: 12px;
    }
    
    .modal-overlay.telemetry-modal .modal-body {
        padding: 10px 12px 16px;
    }
    
    .telemetry-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }
    
    .telemetry-card .card-value {
        font-size: 18px;
    }
    
    .telemetry-card .card-label {
        font-size: 9px;
    }
    
    .telemetry-card .card-range {
        font-size: 10px;
    }
    
    .telemetry-card {
        padding: 6px 8px;
        border-radius: 8px;
    }
    
    .telemetry-chart-container {
        height: 160px;
        padding: 4px;
    }
    
    .telemetry-time-controls .time-btn {
        padding: 2px 8px;
        font-size: 9px;
    }
    
    .telemetry-records-count {
        font-size: 9px;
    }
}

/* ===== MAIN CONTENT TABS: CHATS / VIDEO ===== */
.main-content-tabs {
    display: flex;
    background: #f0f2f5;
    border-bottom: 1px solid #e5e8ec;
    flex-shrink: 0;
}

.main-content-tab {
    flex: 0 0 auto;
    min-width: 130px;
    padding: 9px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #777;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.main-content-tab:hover {
    background: #e8eaed;
    color: #333;
}

.main-content-tab.active {
    background: white;
    color: #1e3c72;
    border-bottom-color: #1e3c72;
}

/* ===== VIDEO VIEW ===== */
.video-view {
    flex: 1;
    min-height: 0;
    background: #fafbfc;
    padding: 14px;
    overflow: auto;
    flex-direction: column;
}

.video-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: white;
    border: 1px solid #e5e8ec;
    border-radius: 12px;
    overflow: hidden;
}

.video-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f5f7fa;
    border-bottom: 1px solid #e5e8ec;
    flex-shrink: 0;
}

.video-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2a4a;
}

.video-subtitle {
    font-size: 12px;
    color: #777;
    margin-top: 2px;
}

.video-refresh-btn {
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    background: #d8e4f0;
    color: #2a5a8a;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.video-refresh-btn:hover {
    background: #c0d4e8;
    transform: translateY(-1px);
}

.video-frame-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #101820;
    padding: 12px;
}

.camera-stream {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    background: #000;
    object-fit: contain;
}

.video-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12px;
    color: #666;
    background: #f5f7fa;
    border-top: 1px solid #e5e8ec;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .main-content-tab {
        flex: 1;
        min-width: 0;
    }

    .video-view {
        padding: 8px;
    }

    .video-header,
    .video-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== VIDEO CONTROLS ===== */
.video-controls {
    padding: 10px 14px;
    background: #f5f7fa;
    border-top: 1px solid #e5e8ec;
}

.video-controls-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: end;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.control-group label {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.control-group select {
    padding: 6px 8px;
    border: 1px solid #d5d8dd;
    border-radius: 6px;
    font-size: 12px;
    background: white;
    outline: none;
    width: 100%;
    height: 34px;
}

.control-group select:focus {
    border-color: #1a73e8;
}

.quality-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quality-control input[type="range"] {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    background: #d5d8dd;
    border-radius: 2px;
    outline: none;
}

.quality-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1a73e8;
    cursor: pointer;
}

.quality-control input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1a73e8;
    cursor: pointer;
    border: none;
}

.camera-quality-value{
    display:inline-block;
    min-width:42px;
    text-align:right;

    color:#1265d6;
    font-size:12px;
    font-weight:600;
    line-height:1;

    font-variant-numeric:tabular-nums;
}

#videoQualityLabel,
#photoQualityLabel {
    display: inline-block;
    min-width: 42px;

    text-align: right;

    color: #1265d6;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    font-variant-numeric: tabular-nums;
}

.screenshot-btn, .screenshots-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.screenshot-btn {
    background: #1a73e8;
    color: white;
}

.screenshot-btn:hover {
    background: #1557b0;
    transform: translateY(-1px);
}

.screenshot-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.screenshots-btn {
    background: #e8e0d0;
    color: #6a5a3a;
}

.screenshots-btn:hover {
    background: #d5d0c0;
}

.camera-info {
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: #666;
    padding: 4px 0;
    flex-wrap: wrap;
}

.camera-info span {
    display: flex;
    align-items: center;
    gap: 4px;
}

#cameraStatus {
    color: #4caf50;
    font-weight: 600;
}

.control-group.full-width {
    grid-column: 1 / -1;
}

/* ===== SCREENSHOTS GALLERY ===== */
#screenshotsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
}

#screenshotsGrid .loading {
    grid-column: 1 / -1;
}

.screenshot-item {
    border: 1px solid #e5e8ec;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
}

.screenshot-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.screenshot-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: #000;
}

.screenshot-item .screenshot-info {
    padding: 8px 10px;
    font-size: 11px;
    color: #666;
    display: flex;
    justify-content: space-between;
    background: #f8f9fa;
}

.screenshot-item .screenshot-info .screenshot-time {
    color: #999;
}

.screenshot-item .screenshot-info .screenshot-size {
    color: #aaa;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .video-controls-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .control-group.full-width {
        grid-column: 1 / -1;
    }
    
    #screenshotsGrid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 480px) {
    .video-controls-grid {
        grid-template-columns: 1fr;
    }
    
    .control-group.full-width {
        grid-column: 1;
    }
    
    .camera-info {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .control-group select {
        height: 40px;
        font-size: 14px;
    }
    
    .screenshot-btn, .screenshots-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

/* ===== ВИДЕО ИНФОРМАЦИОННАЯ СТРОКА ===== */
.video-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    background: #f0f2f5;
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #e5e8ec;
    flex-shrink: 0;
}

#videoStatus {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

#videoLiveInfo {
    color: #555;
    font-weight: 500;
}

/* ===== СВЕТЛЫЙ ФОН ПОД ВИДЕО ===== */
.video-frame-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8eaed !important;
    padding: 12px;
}

/* ===== ГАЛЕРЕЯ С КНОПКАМИ УДАЛЕНИЯ ===== */
.gallery-toolbar {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e8eaed;
    margin-bottom: 8px;
}

.gallery-delete-all-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: #f5e8e8;
    color: #8a3a3a;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.gallery-delete-all-btn:hover {
    background: #ecd0d0;
    transform: scale(1.02);
}

.gallery-count {
    font-size: 12px;
    color: #888;
}

.screenshot-item {
    position: relative;
    border: 1px solid #e5e8ec;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
    background: white;
}

.screenshot-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.screenshot-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    background: #f0f0f0;
    cursor: pointer;
}

.screenshot-item .screenshot-info {
    padding: 6px 10px;
    font-size: 11px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.screenshot-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.screenshot-delete-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.screenshot-delete-btn:hover {
    background: #f5e8e8;
    color: #c62828;
}

/* ===== АДАПТАЦИЯ ===== */
@media (max-width: 768px) {
    .video-info-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        font-size: 12px;
    }
    
    .gallery-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .video-info-bar {
        font-size: 11px;
        padding: 4px 10px;
    }
}

/* ===== PHOTO VIEW ===== */
.photo-view {
    flex: 1;
    min-height: 0;
    background: #fafbfc;
    padding: 14px;
    overflow: auto;
    flex-direction: column;
}

.photo-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: white;
    border: 1px solid #e5e8ec;
    border-radius: 12px;
    overflow: hidden;
}

.photo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f5f7fa;
    border-bottom: 1px solid #e5e8ec;
    flex-shrink: 0;
}

.photo-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2a4a;
}

.photo-subtitle {
    font-size: 12px;
    color: #777;
    margin-top: 2px;
}

.photo-frame-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8eaed !important;
    padding: 12px;
}

.photo-display {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    background: #000;
    object-fit: contain;
}

.photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    gap: 8px;
}

.photo-placeholder-icon {
    font-size: 48px;
}

.photo-placeholder-text {
    font-size: 18px;
    font-weight: 500;
}

.photo-placeholder-hint {
    font-size: 14px;
    color: #bbb;
}

.photo-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    background: #f0f2f5;
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #e5e8ec;
    flex-shrink: 0;
}

#photoStatus {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

#photoInfo {
    color: #555;
    font-weight: 500;
}

.photo-controls {
    padding: 10px 14px;
    background: #f5f7fa;
    border-top: 1px solid #e5e8ec;
}

.photo-controls-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: end;
}

.photo-refresh-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: #d8e4f0;
    color: #2a5a8a;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.photo-refresh-btn:hover {
    background: #c0d4e8;
    transform: translateY(-1px);
}

.photo-save-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: #4caf50;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.photo-save-btn:hover {
    background: #43a047;
    transform: translateY(-1px);
}

.photo-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.photo-save-info {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #eee;
    font-size: 11px;
    color: #888;
    text-align: center;
}

/* ===== АДАПТАЦИЯ PHOTO ===== */
@media (max-width: 768px) {
    .photo-controls-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .photo-save-info {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    .photo-controls-grid {
        grid-template-columns: 1fr;
    }
    
    .photo-placeholder-icon {
        font-size: 32px;
    }
    
    .photo-placeholder-text {
        font-size: 14px;
    }
    
    .photo-placeholder-hint {
        font-size: 12px;
    }
    
    .photo-save-info {
        font-size: 9px;
    }
}

/* ===== SETTINGS VIEW ===== */

.settings-view {
    flex: 1;
    height: 100%;
    overflow-y: auto;
    background: #f5f7fb;
}

.settings-panel {
    padding: 18px;
    width: 100%;
}

.settings-header {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 16px;
    border: 1px solid #e6e9ef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.settings-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
}

.settings-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.settings-card {
    background: var(--mc-card-bg);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid #e6e9ef;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.settings-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.settings-card-text {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }
}

.settings-option {
    margin-top: 14px;
}

.settings-option-label {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}

.settings-segmented {
    display: flex;
    gap: 8px;
}

.settings-segmented button {
    border: 1px solid #d7dce5;
    background: #f8fafc;
    color: #334155;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.settings-segmented button:hover {
    background: #edf3fb;
}

.settings-segmented button.active {
    background: #1f6fe5;
    color: #ffffff;
    border-color: #1f6fe5;
}

.telemetry-export-menu {
    position: absolute;
    right: 0;
    bottom: 28px;
    min-width: 150px;
    background: #ffffff;
    border: 1px solid #dfe3ea;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    padding: 8px 0;
    z-index: 9999;
    font-size: 13px;
    color: #333;
}

.export-menu-title {
    padding: 8px 14px;
    font-size: 12px;
    color: #666;
    border-bottom: 1px solid #eef0f4;
}

.telemetry-export-menu button {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 14px;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: #222;
}

.telemetry-export-menu button:hover {
    background: #f3f6fb;
}

.export-menu-separator {
    height: 1px;
    background: #eef0f4;
    margin: 4px 0;
}

.telemetry-export-menu .export-menu-cancel {
    color: #777;
    text-align: center;
}

.telemetry-card {
    cursor: pointer;
    user-select: none;
}

.telemetry-card.inactive {
    opacity: 0.45;
    filter: grayscale(0.8);
    background: #f1f3f6;
}

.telemetry-card.inactive:hover {
    opacity: 0.65;
}

.custom-export-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.custom-export-dialog {
    width: min(520px, 100%);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    border: 1px solid #e5e8ec;
}

.custom-export-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 20px;
    border-bottom: 1px solid #edf0f4;
}

.custom-export-title {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
}

.custom-export-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: #6b7280;
}

.custom-export-close {
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #888;
}

.custom-export-body {
    padding: 18px 20px;
}

.export-section {
    margin-bottom: 18px;
}

.export-section:last-child {
    margin-bottom: 0;
}

.export-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.export-radio-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 9px;
    cursor: pointer;
}

.export-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.export-date-grid label span {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 6px;
}

.export-date-grid input {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #d7dce5;
    border-radius: 10px;
    font-size: 13px;
}

.export-series-summary {
    background: #f5f7fb;
    border: 1px solid #e5e8ec;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: #374151;
}

.export-format-row {
    display: flex;
    gap: 10px;
}

.export-format-option {
    flex: 1;
    border: 1px solid #d7dce5;
    border-radius: 12px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
}

.custom-export-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #edf0f4;
    background: #fafbfc;
}

.custom-export-cancel,
.custom-export-primary {
    border-radius: 10px;
    padding: 9px 16px;
    font-weight: 700;
    cursor: pointer;
}

.custom-export-cancel {
    border: 1px solid #d7dce5;
    background: white;
    color: #374151;
}

.custom-export-primary {
    border: 1px solid #1a73e8;
    background: #1a73e8;
    color: white;
}

@media (max-width: 600px) {
    .export-date-grid {
        grid-template-columns: 1fr;
    }

    .export-format-row {
        flex-direction: column;
    }
}

/* ============================================================
   HEADER / BRAND
   ============================================================ */
.header-brand {
    display: flex;
    align-items: center;
    min-width: 0;
}

.app-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 32px;
    font-weight: 600;
}

.app-name {
    font-size: 35px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.header-logo {
    width: 25px;
    height: 25px;
    object-fit: contain;
    flex: 0 0 auto;
    transition: transform .2s ease;
}

.app-title:hover .header-logo {
    transform: scale(1.15);
}

.header-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 10px;
    padding: 4px 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #b7c1d6;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color .18s ease,
        color .18s ease,
        opacity .18s ease;
}

.header-status:hover {
    background: rgba(255, 255, 255, 0.08);
}

.header-status:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
    flex: 0 0 auto;
}

.status-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.header-status.status-ok {
    color: #3ddc84;
}

.header-status.status-warning {
    color: #f3b63f;
}

.header-status.status-warning .status-dot {
    animation: header-status-pulse 1.2s ease-in-out infinite;
}

.header-status.status-error {
    color: #ff6262;
}

.header-status.status-offline {
    color: #9aa4b7;
}

.header-status.status-connecting {
    color: #8fb8ff;
}

.header-status.status-connecting .status-dot {
    animation: header-status-pulse 1.2s ease-in-out infinite;
}

@keyframes header-status-pulse {
    0%,
    100% {
        opacity: .45;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* ============================================================
   STATUS DOCK
   ============================================================ */

.dock-main-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: 100% !important;
}

.dock-extra-row {
    display: none !important;
}

.dock-section {
    display: flex;
    align-items: center;
    min-width: 0;
}

.dock-left {
    justify-content: flex-start;
    gap: 14px;
}

.dock-center {
    justify-content: center;
    gap: 7px;
    font-weight: 600;
}

.dock-right {
    justify-content: flex-end;
    gap: 8px;
    color: #64748b;
}

.dock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34,197,94,0.55);
    flex: 0 0 auto;
}

.dock-camera-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #16a34a;
    font-weight: 700;
    white-space: nowrap;
}

.dock-video-live {
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

.dock-action-btn {
    height: 24px;
    padding: 0 11px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.dock-action-neutral {
    background: #e8eef7;
    color: #24415f;
}

.dock-action-primary {
    background: #1a73e8;
    color: white;
}

.dock-action-secondary {
    background: #e8ddc8;
    color: #654b18;
}


/* ============================================================
   VIDEO COMPACT HEADER OVERRIDES
   ============================================================ */

.video-header {
    min-height: 38px;
    padding: 8px 14px;
}

.video-subtitle {
    display: none;
}

/* ============================================================
   APPLICATION LAYOUT / STATUS DOCK
   One height model for Chats, Camera, System and Settings.
   ============================================================ */

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.main-layout {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 36px;
}

.chat-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.status-dock {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(1400px, 100vw);
    height: 36px;
    z-index: 900;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 14px;
    background: #f6f8fb;
    border-top: 1px solid #dfe3ea;
    color: #334155;
    font-size: 12px;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.06);
}

/* Main views all consume the same available height. */
.chat-list-container,
.messages-view,
.video-view,
.photo-view,
.settings-view,
.system-view {
    box-sizing: border-box;
    min-height: 0;
}

.chat-list-container {
    flex: 1 1 auto;
    height: auto;
    overflow-y: auto;
    padding: 4px 8px;
}

.messages-view {
    display: none;
    flex-direction: column;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.messages-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    padding: 8px 12px;
    gap: 4px;
    background: #fafbfc;
}

.input-area {
    flex: 0 0 auto;
    padding: 8px 12px;
}

.video-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 14px;
}

.video-panel {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 0;
}

.photo-view,
.settings-view,
.system-view {
    flex: 1 1 auto;
    min-height: 0;
}

.video-controls,
.photo-controls {
    margin-bottom: 6px;
}

#screenshotsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.gallery-actions-left,
.gallery-actions-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gallery-sort {
    font-size: 12px;
    color: #6b7280;
    background: #eef2f7;
    border: 1px solid #dfe3ea;
    border-radius: 999px;
    padding: 4px 10px;
}

.screenshot-name {
    margin-top: 3px;
    font-size: 10px;
    color: #8a94a3;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.screenshot-download-btn {
    border: none;
    background: #e8eef7;
    color: #24415f;
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.screenshot-download-btn:hover {
    background: #d8e4f0;
}

@media (max-width: 700px) {
    #screenshotsGrid {
        grid-template-columns: 1fr;
    }

    .gallery-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

#screenshotsModal .modal-content {
    width: min(720px, 92vw);
    max-width: 720px;
}

#screenshotsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.gallery-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:14px;
    padding-bottom:10px;
    border-bottom:1px solid #eceff3;
}

.gallery-info{
    display:flex;
    flex-direction:column;
}

.gallery-info-main{
    font-size:15px;
    font-weight:600;
    color:#2f3b4d;
}

.gallery-info-sub{
    margin-top:4px;
    font-size:12px;
    color:#7b8796;
}

.video-controls-grid {
    grid-template-columns: 180px 120px 1fr 180px 1fr 150px 150px;
    gap: 10px;
}

.video-controls .control-group select {
    height: 34px;
}

.video-controls .screenshot-btn,
.video-controls .screenshots-btn {
    height: 34px;
}

@media (max-width: 900px) {
    .video-controls-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.video-controls-grid {
    display: grid;
    grid-template-columns: 460px 330px 120px;
    gap: 14px;
    align-items: stretch;
}

.camera-settings-block {
    display: grid;
    grid-template-rows: auto auto;
    gap: 8px;
}

.camera-settings-row {
    display: flex;
    align-items: end;
    gap: 10px;
}

.camera-settings-row .control-group {
    min-width: 0;
}

.video-resolution-group select {
    width: 150px;
}

.video-fps-group select {
    width: 80px;
}

.capture-resolution-group select {
    width: 155px;
}

.video-quality-group,
.capture-quality-group {
    min-width: 190px;
}

.camera-actions-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: end;
}

.camera-actions-block .screenshot-btn,
.camera-actions-block .screenshots-btn {
    width: 120px;
    height: 34px;
}

@media (max-width: 1100px) {
    .video-controls-grid {
        grid-template-columns: 1fr;
    }

    .camera-actions-block {
        flex-direction: row;
    }
}

.video-resolution-group select{
    width:170px;
}

.video-fps-group select{
    width:75px;
}

.capture-resolution-group select{
    width:170px;
}

.video-quality-group,
.capture-quality-group{
    width:100%;
}

.camera-settings-row{
    display:flex;
    gap:10px;
    align-items:flex-end;
}

.camera-settings-block{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.camera-actions-block{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:8px;
}

.camera-settings-block .quality-control {
    width: 170px;
    max-width: 170px;
}

.camera-settings-block .quality-control input[type="range"] {
    width: 120px;
}

.video-quality-group,
.capture-quality-group {
    width: 170px;
}

.video-controls-grid {
    grid-template-columns: 300px 220px 120px;
    gap: 16px;
}

.video-controls-grid {
    grid-template-columns: 300px 220px 120px;
    gap: 16px;
    align-items: end;
}

.camera-settings-block .quality-control {
    width: 170px;
    max-width: 170px;
}

.camera-settings-block .quality-control input[type="range"] {
    width: 125px;
}

.video-quality-group,
.capture-quality-group {
    width: 170px;
}

.video-resolution-group select {
    width: 170px;
}

.video-fps-group select {
    width: 75px;
}

.capture-resolution-group select {
    width: 170px;
}

.camera-stream.camera-capturing {
    opacity: .75;
    transition: opacity .2s ease;
    cursor: progress;
}

.system-view {
    flex: 1;
    overflow-y: auto;
    background: #f3f6fa;
    padding: 14px;
}

.system-panel {
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    padding: 14px;
}

.system-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.system-header h3 {
    margin: 0;
    font-size: 18px;
    color: #0f172a;
}

.system-subtitle {
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

.system-refresh-btn {
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 600;
    cursor: pointer;
}

.system-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 14px;
}

.system-card-title {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.system-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 13px;
}

.system-row:last-child {
    border-bottom: none;
}

.system-row span {
    color: #64748b;
}

.system-row strong {
    color: #0f172a;
    text-align: right;
}

.wifi-network-item{

    padding:10px 0;

    border-bottom:1px solid #e7e7e7;

}

.wifi-name{

    font-weight:600;

}

.wifi-info{

    margin-top:5px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:13px;

    color:#666;

}

.wifi-toggle-btn {
    width: 100%;
    border: 1px solid #dbe3ee;
    background: #eef5ff;
    color: #1e3a8a;
    border-radius: 9px;
    padding: 9px 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wifi-network-item {
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    margin-top: 8px;
}

.wifi-name {
    font-weight: 700;
    color: #0f172a;
}

.wifi-info {
    margin-top: 6px;
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #64748b;
}

.wifi-connected {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 32px;
    min-width: 86px;
    padding: 0 14px;

    color: #16a34a;

    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    cursor: default;
    box-sizing: border-box;
}

.wifi-info {
    margin-top: 6px;
    display: grid;
    grid-template-columns: 60px 75px 1fr auto;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    color: #64748b;
}

.wifi-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.wifi-scan-action {
    border: 1px solid #dbe3ee;
    background: #eef5ff;
    color: #1e3a8a;
    border-radius: 9px;
    padding: 9px 11px;
    font-weight: 700;
    cursor: pointer;
}

.wifi-scan-action:hover,
.wifi-toggle-btn:hover {
    background: #dbeafe;
}

.wifi-connect-modal {
    max-width: 420px;
}

.wifi-connect-ssid {
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 14px;
    color: #0f172a;
}

.wifi-connect-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.wifi-connect-input {
    width: 100%;
    padding: 10px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
}

.wifi-show-password {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
    font-size: 13px;
    color: #475569;
}

.wifi-connect-btn {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #1e3a8a;
    border-radius: 7px;
    padding: 4px 8px;
    font-weight: 700;
    cursor: pointer;
}

.wifi-connect-btn:hover {
    background: #dbeafe;
}

.wifi-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.wifi-saved-badge {
    margin-left: 7px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 10px;
    font-weight: 700;
}

.wifi-forget-btn {
    border: 1px solid #fecaca;
    background: #fff5f5;
    color: #b91c1c;
    border-radius: 7px;
    padding: 4px 8px;
    font-weight: 700;
    cursor: pointer;
}

.wifi-forget-btn:hover {
    background: #fee2e2;
}

@media (max-width: 980px) {
    .system-grid {
        grid-template-columns: 1fr;
    }
}

.system-layout {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    width: 100%;
}

.system-left-column {
    width: 420px;
    flex: 0 0 420px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.system-right-column {
    flex: 1 1 auto;
    min-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.system-layout .system-card {
    margin-bottom: 0;
}

@media (max-width: 980px) {
    .system-layout {
        flex-direction: column;
    }

    .system-left-column,
    .system-right-column {
        width: 100%;
        flex: 0 0 auto;
        min-width: 0;
    }
}

.system-view {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    background: #f3f6fa;
    padding: 14px;
    flex-direction: column;
}

.system-panel {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    padding: 14px;
}

.system-layout {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
}

.system-left-column,
.system-right-column {
    flex: 1 1 0;
    min-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.system-layout .system-card {
    margin-bottom: 0;
}

@media (max-width: 980px) {
    .system-layout {
        flex-direction: column;
    }

    .system-left-column,
    .system-right-column {
        width: 100%;
        flex: 0 0 auto;
        min-width: 0;
    }
}

body.context-chat-mode .messages-view {
    flex: 0 0 37.5%;
    min-height: 260px;
    max-height: 42vh;
}

body.context-chat-mode .video-view,
body.context-chat-mode .system-view,
body.context-chat-mode .settings-view {
    flex: 1 1 62.5%;
    min-height: 0;
}

.video-controls-grid {
    align-items: start;
}

.camera-settings-block,
.camera-actions-block {
    align-self: start;
}

.camera-actions-block {
    padding-top: 16px;
}

.radio-history-section {
    margin-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 10px;
}

.radio-history-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 7px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #34445f;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.radio-history-toggle:hover {
    color: #145fc6;
}

.radio-history-panel {
    margin-top: 6px;
    max-height: 190px;
    overflow-y: auto;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.018);
    padding: 4px 9px;
}

.radio-history-item {
    padding: 7px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 12px;
    line-height: 1.4;
}

.radio-history-item:last-child {
    border-bottom: none;
}

.radio-history-line {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.radio-history-time {
    flex: 0 0 auto;
    color: #8b94a3;
    font-variant-numeric: tabular-nums;
}

.radio-history-event {
    font-weight: 600;
}

.radio-history-details {
    margin-top: 2px;
    margin-left: 55px;
    color: #7a8391;
    overflow-wrap: anywhere;
}

.radio-history-empty {
    padding: 10px 0;
    color: #999;
    font-size: 12px;
}


/* ===== SYSTEM ACTIONS AND PERSISTENT LOG ===== */
.radio-health-recommendation {
    font-size: 13px;
    line-height: 1.4;
    min-height: 30px;
    padding-top: 9px;
}

.system-actions-section {
    margin-top: 12px;
    padding-top: 11px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.system-actions-title {
    margin-bottom: 8px;
    color: #34445f;
    font-size: 13px;
    font-weight: 600;
}

.system-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.system-action-btn {
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid #bfd0e8;
    border-radius: 7px;
    background: #dceafb;
    color: #1d5da8;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.18s, opacity 0.18s;
}

.system-action-btn:hover:not(:disabled) {
    background: #cbdff7;
    transform: translateY(-1px);
}

.system-action-btn.warning {
    border-color: #e0c98b;
    background: #f5edcf;
    color: #7c641d;
}

.system-action-btn.danger {
    border-color: #dfb3b3;
    background: #f5dddd;
    color: #9a3434;
}

.system-action-btn:disabled {
    opacity: 0.55;
    cursor: wait;
}

.radio-history-time {
    min-width: 122px;
    font-size: 10px;
}

.radio-history-source {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 10px;
    background: #e9edf3;
    color: #7b8492;
    font-size: 9px;
    text-transform: uppercase;
}

.radio-history-details {
    margin-left: 148px;
}

@media (max-width: 520px) {
    .system-actions-grid {
        grid-template-columns: 1fr;
    }

    .radio-history-line {
        flex-wrap: wrap;
    }

    .radio-history-details {
        margin-left: 0;
    }
}

/* ============================================================
   CAMERA IMAGE CONTROLS
   ============================================================ */

.video-controls {
    padding: 10px 14px 12px;
}

.video-controls-grid {
    display: grid;
    grid-template-columns:
        250px
        190px
        120px
        minmax(250px, 1fr);
    gap: 10px;
    align-items: stretch;
}

.camera-settings-block {
    gap: 6px;
}

.camera-settings-row {
    gap: 8px;
}

.camera-actions-block {
    align-self: center;
    justify-content: center;
}

.camera-image-controls {
    min-width: 0;
    padding-left: 14px;
    border-left: 1px solid #d8dee8;
}

.camera-image-controls-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: #334155;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.camera-defaults-btn {
    height: 25px;
    padding: 0 9px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    cursor: pointer;
}

.camera-defaults-btn:hover {
    background: #eef3f8;
    border-color: #aeb9c8;
}

.camera-image-controls-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    column-gap: 14px;
    row-gap: 6px;
}

.camera-control-slider {
    min-width: 0;
}

.camera-control-slider label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 1px;
    color: #526178;
    font-size: 10px;
    line-height: 1.2;
    text-transform: uppercase;
}

.camera-control-slider label span {
    color: #1265d6;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.camera-control-slider input[type="range"] {
    display: block;
    width: 100%;
    height: 16px;
    margin: 0;
}

.camera-exposure-slider {
    grid-column: 1 / -1;
}

@media (max-width: 1250px) {
    .video-controls-grid {
        grid-template-columns:
            270px
            195px
            115px
            minmax(250px, 1fr);
        gap: 10px;
    }

    .camera-image-controls {
        padding-left: 10px;
    }
}

@media (max-width: 1050px) {
    .video-controls-grid {
        grid-template-columns: 1fr 1fr 120px;
    }

    .camera-image-controls {
        grid-column: 1 / -1;
        padding-top: 9px;
        padding-left: 0;
        border-top: 1px solid #d8dee8;
        border-left: 0;
    }

    .camera-image-controls-grid {
        grid-template-columns: repeat(5, minmax(110px, 1fr));
    }

    .camera-exposure-slider {
        grid-column: auto;
    }
}

@media (max-width: 700px) {
    .video-controls-grid {
        grid-template-columns: 1fr;
    }

    .camera-actions-block {
        flex-direction: row;
        justify-content: flex-start;
    }

    .camera-image-controls {
        grid-column: auto;
    }

    .camera-image-controls-grid {
        grid-template-columns: 1fr 1fr;
    }

    .camera-exposure-slider {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   CAMERA STREAM RECONNECT OVERLAY
   ============================================================ */

.video-frame-wrap {
    position: relative;
}

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

.camera-freeze-frame {
    position: absolute;
    z-index: 2;
    object-fit: contain;
    border-radius: 8px;
    opacity: 1;
    pointer-events: none;
    transition: opacity .22s ease;
}

.camera-freeze-frame-hide {
    opacity: 0;
}

/* ============================================================
   NODE TOOLS
   ============================================================ */

.node-tools-wrap {
    position: relative;
    width: 100%;
    margin-top: 2px;
}

.node-tools-btn {
    width: 100%;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid #b9c6d6;
    border-radius: 8px;
    background: #e8eef5;
    color: #405875;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    white-space: nowrap;
    transition: all .2s ease;
}

.node-tools-btn:hover {
    background: #dbe5f0;
    border-color: #9fb0c5;
    transform: translateY(-1px);
}

.node-tools-btn:active {
    transform: scale(.97);
}

.node-tools-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 5px);
    right: 0;
    min-width: 190px;
    padding: 5px;
    border: 1px solid #cbd4df;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(45, 60, 80, .18);
}

.node-tools-menu-item {
    width: 100%;
    min-height: 32px;
    padding: 6px 9px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #3f5065;
    font-family: inherit;
    font-size: 11px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background .15s ease;
}

.node-tools-menu-item:hover:not(:disabled) {
    background: #edf3f8;
}

.node-tools-menu-item:disabled {
    color: #a8b0ba;
    cursor: default;
    opacity: .7;
}

.node-tools-menu-divider {
    height: 1px;
    margin: 4px 3px;
    background: #e7ebef;
}


/* ============================================================
   NODE TOOL RESULT
   ============================================================ */

.node-tool-result {
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid #ccd5df;
    border-radius: 8px;
    background: #f6f8fa;
    font-size: 11px;
}

.node-tool-result.pending {
    border-color: #d8c788;
    background: #fffaf0;
    color: #806a25;
}

.node-tool-result.success {
    border-color: #a9cbb3;
    background: #f1f8f3;
    color: #386445;
}

.node-tool-result.error {
    border-color: #dfb5af;
    background: #fff4f2;
    color: #93463c;
}

.node-tool-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.node-tool-result-close {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
}

.node-tool-result-close:hover {
    opacity: 1;
}

.node-tool-result-message {
    margin-bottom: 6px;
    line-height: 1.35;
}

.node-tool-route-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.node-tool-route-item {
    min-width: 0;
    padding: 6px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .65);
}

.node-tool-route-label {
    display: block;
    margin-bottom: 3px;
    color: #788596;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.node-tool-route-item code {
    display: block;
    color: #405268;
    font-family: monospace;
    font-size: 10px;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 650px) {
    .node-tools-menu {
        right: auto;
        left: 0;
    }

    .node-tool-route-grid {
        grid-template-columns: 1fr;
    }
}

.route-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:8px;
}

.route-card{
    background:#f8fafc;
    border-radius:8px;
    padding:8px;
}

.route-badge{
    display:inline-block;
    padding:2px 8px;
    border-radius:12px;
    font-size:11px;
    font-weight:700;
    color:#fff;
    margin-bottom:6px;
    letter-spacing:.3px;
}

.route-forward{
    background:#22a447;
}

.route-return{
    background:#2f7df6;
}

.route-path{
    font-size:13px;
    line-height:1.4;
    word-break:break-word;
}

/* ============================================================
   COMPACT HEIGHTS / SPLIT VIEW
   Keep the chat composer pinned to the bottom without extra gap.
   ============================================================ */
@media (max-height: 760px) {
    .messages-view {
        padding-bottom: 0;
    }

    .input-area {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .video-view,
    .system-view,
    .settings-view,
    .photo-view {
        padding-bottom: 10px;
    }
}

/* Keep the chat input above the fixed Status Dock */
.messages-view {
    padding-bottom: 8px;
}

.input-area {
    padding: 4px 12px 6px;
    flex: 0 0 auto;
}

/* ============================================================
   TRACEROUTE ROUTE CHAIN
   ============================================================ */

.route-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.route-card {
    min-width: 0;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.72);
}

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

.route-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 9px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .25px;
}

.route-forward {
    background: #16a34a;
}

.route-return {
    background: #2563eb;
}

.route-chain-meta {
    margin-bottom: 7px;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.route-chain {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.route-chain-node {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
}

.route-chain-dot {
    width: 9px;
    height: 9px;
    margin-top: 5px;
    border: 2px solid #94a3b8;
    border-radius: 50%;
    background: #fff;
    flex: 0 0 auto;
}

.route-chain-source .route-chain-dot {
    border-color: #16a34a;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, .45);
}

.route-chain-destination .route-chain-dot {
    border-color: #dc2626;
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, .35);
}

.route-chain-node-content {
    min-width: 0;
    flex: 1;
}

.route-endpoint-label {
    display: block;
    margin-bottom: 1px;
    color: #94a3b8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .45px;
}

.route-chain-name {
    color: #1e293b;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.route-chain-id {
    margin-top: 1px;
    color: #94a3b8;
    font-family: monospace;
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.route-chain-connector {
    position: relative;
    display: grid;
    grid-template-columns: 10px minmax(0, auto);
    grid-template-rows: auto auto;
    column-gap: 7px;
    min-height: 35px;
    padding: 3px 0;
}

.route-chain-line {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 2px;
    height: 100%;
    margin: 0 auto;
    border-radius: 999px;
    background: #cbd5e1;
}

.route-chain-arrow {
    position: absolute;
    left: 1px;
    bottom: -1px;
    width: 9px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1;
    text-align: center;
}

.route-snr-badge {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: start;
    max-width: 100%;
    padding: 2px 6px;
    border: 1px solid #f2d38c;
    border-radius: 999px;
    background: #fff7df;
    color: #8a5a00;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.route-empty {
    padding: 7px;
    border-radius: 6px;
    background: #f8fafc;
    color: #94a3b8;
    font-size: 10px;
    text-align: center;
}

@media (max-width: 1250px) {
    .route-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   NODE TOOLS - TELEMETRY RESULT
   ============================================================ */

.telemetry-request-output {
    margin-top: 8px;
    padding: 9px;
    border: 1px solid #dbe4ef;
    border-radius: 8px;
    background: #f8fbff;
}

.telemetry-request-status {
    color: #166534;
    font-size: 11px;
    font-weight: 700;
}

.telemetry-request-note {
    margin-top: 5px;
    color: #64748b;
    font-size: 10px;
    line-height: 1.35;
}

.telemetry-request-output pre {
    max-height: 180px;
    margin: 8px 0 0;
    padding: 8px;
    overflow: auto;
    border-radius: 6px;
    background: #eef3f8;
    color: #334155;
    font-family: monospace;
    font-size: 9px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ============================================================
   NODE POSITION
   ============================================================ */

.node-position-card {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #b7d8c0;
    border-radius: 9px;
    background: #f4fbf6;
}

.node-position-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
    color: #28663a;
    font-size: 11px;
    font-weight: 700;
}

.node-position-updated {
    color: #748278;
    font-size: 9px;
    font-weight: 500;
    white-space: nowrap;
}

.node-position-grid {
    display: grid;
    row-gap: 5px;
    column-gap: 7px;
    margin-top: 5px;
    grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);
   
}

.node-position-item {
    display: flex;
    align-items: baseline;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.node-position-item .label {
    margin-right: 4px;
    color: #6f7d73;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15px;
    white-space: nowrap;
}

.node-position-item .value {
    overflow: hidden;
    color: #243a2b;
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-position-map-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 30px;
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid #8abf99;
    border-radius: 7px;
    background: #e2f3e7;
    color: #236337;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.node-position-map-btn:hover {
    border-color: #68a77a;
    background: #d3ebda;
    transform: translateY(-1px);
}

.node-position-map-btn:active {
    transform: translateY(0);
}

@media (max-width: 420px) {
    .node-position-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MAP SETTINGS
   ============================================================ */

.map-settings-card {
    padding: 14px;
    border: 1px solid #dce3ec;
    border-radius: 10px;
    background: #ffffff;
}

.map-settings-title {
    margin-bottom: 12px;
    color: #1d3557;
    font-size: 14px;
    font-weight: 700;
}

.map-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.map-settings-label {
    color: #34495e;
    font-size: 12px;
    font-weight: 600;
}

.map-settings-description {
    margin-top: 3px;
    color: #7a8794;
    font-size: 10px;
}

.map-provider-select {
    min-width: 145px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #cad4e0;
    border-radius: 6px;
    background: #f8fafc;
    color: #243447;
    font-size: 11px;
    cursor: pointer;
}

/* ============================================================
   REFERENCE LOCATION SETTINGS
   ============================================================ */

.reference-location-card {
    --reference-label-width: 78px;
    padding: 16px;
    border: 1px solid #dce3ec;
    border-radius: 10px;
    background: #ffffff;
}

.reference-location-title {
    margin: 0 0 4px;
    color: #1d3557;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.reference-location-description {
    margin: 0 0 14px;
    color: #7a8794;
    font-size: 10px;
    line-height: 1.45;
}

.reference-location-row,
.reference-location-coordinate {
    display: grid;
    grid-template-columns: var(--reference-label-width) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 34px;
}

.reference-location-row,
.reference-location-fields {
    margin-bottom: 10px;
}

.reference-location-fields {
    display: grid;
    gap: 10px;
}

.reference-location-fields label,
.reference-location-row label {
    min-width: 0;
    color: #34495e;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
}

.reference-location-card select,
.reference-location-card input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #cad4e0;
    border-radius: 6px;
    background: #f8fafc;
    color: #243447;
    font: inherit;
    font-size: 11px;
    box-sizing: border-box;
}

.reference-location-card select:focus,
.reference-location-card input:focus {
    outline: none;
    border-color: #7eb28d;
    box-shadow: 0 0 0 2px rgba(83, 166, 110, .12);
}

.reference-location-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    margin: 2px 0 0;
    padding: 7px 12px;
    border: 1px solid #8abf99;
    border-radius: 7px;
    background: #e2f3e7;
    color: #236337;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
}

.reference-location-save-btn:hover:not(:disabled) {
    border-color: #68a77a;
    background: #d3ebda;
}

.reference-location-save-btn:disabled {
    border-color: #d5dde5;
    background: #f2f4f7;
    color: #7a8794;
    cursor: default;
}

.reference-location-status {
    min-height: 13px;
    margin-top: 6px;
    color: #66756b;
    font-size: 9px;
    line-height: 1.4;
}

@media (max-width: 520px) {
    .reference-location-card {
        --reference-label-width: 72px;
        padding: 14px;
    }
}

/* Reference location in Base card */

.base-reference-location {
    margin-top: 4px;
    color: #496274;
    font-size: 9px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.node-position-navigation {
    gap: 4px;
}

.node-position-bearing {
    margin-left: 3px;
    color: #486b54;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}

.node-position-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.node-position-map-btn {
    width: 100%;
    margin-top: 0;
}

.node-position-action-reserve {
    min-height: 30px;
}



/* ============================================================
   THREE-PANEL DESKTOP WORKSPACE - STAGE 1
   Local node | Workspace | Nodes
   ============================================================ */

.app-container {
    width: 98%;
    max-width: 1600px;
    margin: auto;
}

.main-layout {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.base-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 400px;
    width: 400px;
    min-width: 400px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f8f9fa;
    border-right: 1px solid #e5e8ec;
}

.chat-area {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.sidebar {
    display: flex;
    flex-direction: column;
    width: 400px;
    background: #f8f9fa;
    border-left: 1px solid #e5e8ec;
    flex-shrink: 0;
    overflow: hidden;
}

/* Recover useful horizontal space inside the node panel. */
.nodes-section {
    padding-right: 7px;
    padding-left: 7px;
    padding-bottom: 8px;
}

.nodes-controls {
    gap: 6px;
    padding-top: 6px;
    padding-bottom: 3px;
}

.chat-list-container,
.nodes-scroll {
    scrollbar-gutter: stable;
}

/* Bottom dock follows the application container. */
.status-dock {
    width: 98%;
    max-width: 1600px;
}

/* Keep local-node components intact after moving them left. */
.base-sidebar .base-card,
.base-sidebar .base-reference-location,
.base-sidebar .sensors-card,
.base-sidebar .telemetry-section {
    width: 100%;
    flex-shrink: 0;
}

@media (max-width: 1180px) {
    .base-sidebar {
        flex-basis: 240px;
        width: 240px;
        min-width: 240px;
    }

    .sidebar {
        flex-basis: 280px;
        width: 280px;
        min-width: 280px;
    }
}

/* ============================================================
   THREE-PANEL DESKTOP WORKSPACE - STAGE 2
   Independent Base / Nodes panel visibility.
   ============================================================ */
.base-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 400px;
    width: 400px;
    min-width: 400px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: #f8f9fa;
    border-right: 1px solid #e5e8ec;
}

.sidebar {
    display: flex;
    flex-direction: column;
    width: 400px;
    background: #f8f9fa;
    border-left: 1px solid #e5e8ec;
    flex-shrink: 0;
    overflow: hidden;
}

.base-sidebar.panel-hidden {
    flex-basis: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0;
    overflow: hidden;
    border-right-color: transparent;
    pointer-events: none;
}

.sidebar.panel-hidden {
    flex-basis: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    opacity: 0;
    overflow: hidden;
    border-left-color: transparent;
    pointer-events: none;
}

/* Keep header controls visually consistent and show active hidden state. */
.header-btn.panel-is-hidden {
    background: rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.header-btn svg {
    display: block;
}

/* On narrow layouts panels continue to behave as drawers later.
   Stage 2 remains desktop-first, but hidden state must still win. */
@media (max-width: 900px) {
    .base-sidebar.panel-hidden,
    .sidebar.panel-hidden {
        display: none !important;
    }
}

/* ============================================================
   LOCAL NODE DASHBOARD - STAGE 3
   Compact Base panel, Battery + Reference cards.
   ============================================================ */

.base-card {
    padding: 9px 12px 8px;
}

.base-card-title {
    align-items: center;
    gap: 8px;
}

.base-card-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.base-card-caption {
    flex-shrink: 0;
    color: #718198;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.base-status-line {
    gap: 7px 10px;
    font-size: 11px;
}

.sensors-card {
    padding: 8px 10px 7px;
}

.sensors-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sensors-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: initial;
    column-gap: 6px;
    row-gap: 3px;
}

.sensor-item {
    min-width: 0;
    gap: 2px;
    white-space: nowrap;
}

.sensor-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.base-dashboard-row {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 7px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #d5d8dd;
}

.battery-indicator,
.base-reference-location {
    min-width: 0;
    min-height: 55px;
    margin: 0;
    padding: 7px 8px;
    border: 1px solid #cbd8cf;
    border-radius: 8px;
    background: rgba(255, 255, 255, .58);
}

.battery-indicator {
    align-self: stretch;
}

.base-mini-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 8px;
    color: #315b3d;
    font-size: 10px;
    font-weight: 600;
}

.base-mini-card-heading strong {
    color: #216b36;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.battery-bar {
    height: 7px;
}

.base-reference-location {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    color: #29485d;
    border-color: #9ecbb0;
    background: #eef8f1;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        transform 150ms ease;
}

.base-reference-location:hover {
    border-color: #6fac88;
    background: #e2f3e7;
    transform: translateY(-1px);
}

.base-reference-location.reference-is-disabled {
    color: #687585;
    border-color: #ccd3dc;
    background: #f2f4f7;
}

.reference-card-icon {
    flex-shrink: 0;
    font-size: 15px;
}

.reference-card-copy {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.reference-card-title {
    color: #617184;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.reference-card-name {
    overflow: hidden;
    color: #214d35;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reference-is-disabled .reference-card-name {
    color: #596675;
}

.reference-card-coordinates {
    overflow: hidden;
    color: #718198;
    font-size: 8px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.reference-card-arrow {
    flex-shrink: 0;
    color: #6b8976;
    font-size: 18px;
    line-height: 1;
}

.sensor-update {
    margin-top: 5px;
}

.reference-location-card {
    transition:
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.reference-location-card-highlight {
    border-color: #53a66e !important;
    box-shadow:
        0 0 0 3px rgba(83, 166, 110, .16),
        0 8px 22px rgba(43, 92, 58, .12);
}

/* ============================================================
   CAMERA POWER CONTROL
   ============================================================ */

.video-header {
    gap: 12px;
}

.camera-power-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 104px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid #d5a4a4;
    border-radius: 7px;
    background: #fff5f5;
    color: #a32929;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 150ms ease,
        border-color 150ms ease,
        color 150ms ease,
        opacity 150ms ease;
}

.camera-power-btn:hover:not(:disabled) {
    background: #ffe8e8;
    border-color: #c87d7d;
}

.camera-power-btn.camera-power-off {
    border-color: #94c7a5;
    background: #eef9f1;
    color: #267340;
}

.camera-power-btn.camera-power-off:hover:not(:disabled) {
    background: #e0f3e5;
    border-color: #69a87f;
}

.camera-power-btn:disabled {
    opacity: .58;
    cursor: wait;
}

.camera-power-btn-icon {
    font-size: 14px;
    line-height: 1;
}

.camera-off-placeholder {
    position: absolute;
    inset: 0;
    z-index: 4;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    background:
        linear-gradient(
            180deg,
            rgba(247, 249, 252, .98),
            rgba(237, 242, 247, .98)
        );
    color: #526178;
    text-align: center;
}

.camera-off-icon {
    font-size: 40px;
    filter: grayscale(.35);
    opacity: .8;
}

.camera-off-title {
    color: #334155;
    font-size: 16px;
    font-weight: 700;
}

.camera-off-text {
    font-size: 12px;
}

.camera-off-start-btn {
    margin-top: 6px;
    height: 34px;
    padding: 0 15px;
    border: 1px solid #7eb391;
    border-radius: 7px;
    background: #e9f7ed;
    color: #216b3a;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.camera-off-start-btn:hover {
    background: #dff2e5;
    border-color: #5d9b72;
}

.camera-controls-disabled {
    opacity: .52;
}

.camera-controls-disabled input,
.camera-controls-disabled select,
.camera-controls-disabled button {
    cursor: not-allowed;
}

.camera-controls-disabled #cameraGalleryBtn {
    cursor: pointer;
    opacity: 1;
}

.video-frame-wrap {
    position: relative;
}

/* ============================================================
   NODE LIST MAP BADGE
   Mobile-friendly position shortcut.
   ============================================================ */

.node-map-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    margin-top: 6px;
    padding: 4px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}

.node-map-badge:active {
    transform: translateY(1px);
}

.node-map-badge-neutral {
    border-color: #b9c7d6;
    background: #eef3f8;
    color: #41576d;
}

.node-map-badge-near {
    border-color: #8ac39a;
    background: #e8f6ec;
    color: #23663a;
}

.node-map-badge-medium {
    border-color: #8eb8dd;
    background: #eaf3fb;
    color: #275f8d;
}

.node-map-badge-far {
    border-color: #d9bd72;
    background: #fbf5df;
    color: #7b5d16;
}

.node-map-badge-very-far {
    border-color: #d99b91;
    background: #fcecea;
    color: #8b3d34;
}

@media (hover: hover) {
    .node-map-badge:hover {
        filter: brightness(.97);
        transform: translateY(-1px);
    }
}

@media (max-width: 520px) {
    .node-map-badge {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 11px;
    }
}

.node-position-navigation {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.node-position-navigation .value {
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.node-position-bearing {
    margin-left: auto;
    white-space: nowrap;
}


/* ===== CPU MONITORING ===== */
.cpu-history-panel {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #dfe4eb;
}

.cpu-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 12px;
}

.cpu-history-header > div:first-child {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpu-history-current {
    font-weight: 700;
    color: #2470d8;
}

.cpu-history-ranges {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cpu-range-btn {
    border: 1px solid #d5dce6;
    background: #f6f8fb;
    color: #53657b;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 10px;
    cursor: pointer;
}

.cpu-range-btn:hover { background: #edf3fb; }
.cpu-range-btn.active {
    background: #2470d8;
    border-color: #2470d8;
    color: white;
}

.cpu-history-chart-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 125px;
    min-height: 125px;
}

.cpu-history-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

.cpu-history-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8592a3;
    font-size: 11px;
    pointer-events: none;
}

#dockContextText {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

.dock-context-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock-system-metrics {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.dock-system-metrics span + span::before {
    content: '·';
    margin-right: 8px;
    color: #9aa5b4;
}

.dock-system-metrics .normal,
.cpu-history-current.normal { color: #239b62; }
.dock-system-metrics .warning,
.cpu-history-current.warning { color: #c78616; }
.dock-system-metrics .danger,
.cpu-history-current.danger { color: #d74343; }

@media (max-width: 760px) {
    .dock-context-label { display: none; }
    .dock-system-metrics { gap: 5px; font-size: 10px; }
    .dock-system-metrics span + span::before { margin-right: 5px; }
    .cpu-history-header { align-items: flex-start; flex-direction: column; }
    .cpu-history-ranges { justify-content: flex-start; }
}

/* ============================================================
   NODE CARD V2 - compact visual overview
   ============================================================ */
.node-card {
    padding: 10px 11px;
}

.node-card-topline {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.node-favorite-slot {
    width: 18px;
    min-width: 18px;
    text-align: center;
    font-size: 15px;
    line-height: 1;
}

/* Dark theme */
body[data-theme="dark"] .node-favorite-slot,
html[data-theme="dark"] .node-favorite-slot {
    color: #f5c542;
}

/* Light theme */
body[data-theme="light"] .node-favorite-slot,
html[data-theme="light"] .node-favorite-slot {
    color: #165CBA;
}

body[data-theme="dark"] .node-card.favorite .node-favorite-slot,
html[data-theme="dark"] .node-card.favorite .node-favorite-slot {
    color: #f5c542;
}

body[data-theme="light"] .node-card.favorite .node-favorite-slot,
html[data-theme="light"] .node-card.favorite .node-favorite-slot {
    color: #165CBA;
}

.node-card-name-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.node-card-topline .node-card-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: #33475b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-ignore-mark {
    flex: 0 0 auto;
    font-size: 11px;
}

.node-state-dot {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
}

.node-card-id-row {
    margin-top: 5px;
    padding-left: 25px;
    min-width: 0;
}

.node-card-id-row .node-inline-id {
    display: block;
    color: #66788a;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .15px;
}

.node-card-identity-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin-top: 4px;
    padding-left: 25px;
    font-size: 12px;
    line-height: 1.25;
}

.node-short-name {
    color: #a5afba;
    font-weight: 600;
    white-space: nowrap;
}

.node-identity-separator {
    color: #a5afba;
}

.node-hardware-name {
    min-width: 0;
    color: #738191;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-card-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(120, 135, 150, .16);
}

.node-card-signal-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.node-status-label {
    color: #8995a2;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .35px;
}

.node-signal-indicator {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 10px;
}

.node-signal-segment {
    width: 7px;
    height: 7px;
    border: 1px solid #c7ced6;
    border-radius: 1px;
    background: transparent;
    box-sizing: border-box;
}

.node-signal-indicator.signal-good .node-signal-segment.filled {
    background: #6fa67c;
    border-color: #6fa67c;
}

.node-signal-indicator.signal-medium .node-signal-segment.filled {
    background: #c7a84d;
    border-color: #c7a84d;
}

.node-signal-indicator.signal-weak .node-signal-segment.filled {
    background: #b97870;
    border-color: #b97870;
}

.node-last-seen {
    flex: 0 1 auto;
    min-width: 0;
    color: #738191;
    font-size: 10px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-card-status-row .node-map-badge {
    margin: 0 0 0 auto;
    min-height: 24px;
    padding: 4px 8px;
    font-size: 9px;
    flex: 0 0 auto;
}

.node-card .node-last-text {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding-left: 25px;
    color: #617386;
    font-size: 10px;
    font-style: normal;
}

.node-last-text-icon {
    flex: 0 0 auto;
    font-size: 10px;
}

@media (max-width: 520px) {
    .node-card-topline .node-card-title {
        font-size: 14px;
    }

    .node-card-id-row .node-inline-id,
    .node-card-identity-row {
        font-size: 11px;
    }

    .node-card-status-row {
        gap: 6px;
    }

    .node-signal-segment {
        width: 6px;
        height: 7px;
    }

    .node-card-status-row .node-map-badge {
        min-height: 28px;
        padding: 5px 8px;
        font-size: 10px;
    }
}

/* ============================================================
   COMPACT NODE CARD V1.2
   Route -> signal -> last seen, plus compact navigation panel.
   ============================================================ */

.node-card-status-row {
    gap: 7px;
}

.node-card-signal-wrap {
    gap: 0;
}

.node-status-label {
    display: none;
}

.node-card-status-row .node-map-badge {
    flex: 0 0 86px;
    width: 86px;
    min-width: 86px;
    min-height: 43px;
    margin: 0 0 0 auto;
    padding: 5px 7px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-radius: 8px;
    line-height: 1.05;
    text-align: center;
    box-sizing: border-box;
}

.node-map-distance {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 750;
}

.node-map-bearing {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 750;
}

.node-card .node-last-text {
    padding-left: 2px;
}

@media (max-width: 520px) {
    .node-card-status-row {
        gap: 5px;
    }

    .node-card-status-row .node-map-badge {
        flex-basis: 82px;
        width: 82px;
        min-width: 82px;
        min-height: 42px;
        padding: 5px 6px;
    }

    .node-map-distance {
        font-size: 10px;
    }

    .node-map-bearing {
        font-size: 8.5px;
    }
}

/* Compact node identity line:
   short name • hardware • node ID */

.node-card-identity-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-top: 4px;
    padding-left: 6px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
}

.node-card-identity-row .node-short-name {
    flex: 0 0 auto;
    color: #a5afba;
    font-weight: 700;
}

.node-card-identity-row .node-hardware-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #60748b;
}

.node-card-identity-row .node-inline-id {
    flex: 0 0 auto;
    color: #6a97a6;
    font-size: 12px;
    font-weight: 700;
}

.node-card-identity-row .node-identity-separator {
    flex: 0 0 auto;
    color: #9aa7b5;
}

/* Rounded square node state indicator */

.node-state-square {
    width: 6px;
    height: 11px;
    flex: 0 0 11px;

    margin-left: auto;

    border-radius: 2px;
    box-sizing: border-box;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.06);
}

.node-state-square.excellent,
.node-state-square.good {
    background: #55b870;
}

.node-state-square.fair {
    background: #e9b53c;
}

.node-state-square.poor,
.node-state-square.bad {
    background: #df4b5a;
}

.node-state-square.offline,
.node-state-square.unknown {
    background: #aeb7c1;
}

/* ==========================================================
   Rounded square signal indicator
   ========================================================== */

.node-state-square{
    width:6px;
    height:11px;

    flex:0 0 11px;

    margin-left:auto;

    border-radius:2px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.35),
        0 0 0 1px rgba(0,0,0,.06);
}

.node-state-square.badge-online{
    background:#58b76c;
}

.node-state-square.badge-medium{
    background:#d9b437;
}

.node-state-square.badge-offline{
    background:#df5b64;
}



/* ==========================================================
   Compact node card: activity indicator beside the node name
   ========================================================== */

.node-activity-square {
    width: 6px;
    height: 11px;
    flex: 0 0 7px;
    margin: 0;
    border-radius: 2px;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 0 1px rgba(0, 0, 0, 0.06);
}

.node-activity-square.activity-online {
    background: #58b76c;
}

.node-activity-square.activity-away {
    background: #e8b437;
}

.node-activity-square.activity-offline {
    background: #df5b64;
}

.node-activity-square.activity-unknown {
    background: #aeb7c1;
}

.node-favorite-slot{
    font-size:16px;
    font-weight:500;
    color:#165CBA;

    display:flex;
    align-items:center;
    justify-content:center;

    width:14px;
    flex:0 0 6px;

    line-height:1;
}



/* ======================== */
/* ============================================================
   НОВАЯ ДЕТАЛЬНАЯ КАРТОЧКА НОДЫ
   ============================================================ */
.node-detail-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #e8eaed;
    margin-bottom: 12px;
}

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

.node-detail-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.node-detail-favorite {
    font-size: 18px;
    cursor: pointer;
    color: #f5c542;
}

.node-detail-activity {
    font-size: 16px;
}

.node-detail-name {
    font-size: 18px;
    font-weight: 700;
    color: #1a2a4a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.node-detail-short-id {
    font-size: 12px;
    color: #7a8aa0;
    background: #f0f2f5;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.node-detail-actions-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    color: #6a7a8a;
    transition: background 0.2s;
}

.node-detail-actions-btn:hover {
    background: #eef2f5;
    border-radius: 4px;
}

.node-detail-subheader {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #5a6a7a;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.node-detail-role {
    font-weight: 600;
}

.node-detail-separator {
    color: #c0c8d0;
}

.node-detail-hw {
    color: #4a5a6a;
}

.node-detail-id {
    font-family: monospace;
    background: #f5f7fa;
    padding: 0 6px;
    border-radius: 4px;
    color: #3a4a5a;
}

.node-detail-copy-id {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: #7a8aa0;
    padding: 0 2px;
}

.node-detail-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #6a7a8a;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.node-detail-last-seen {
    display: flex;
    align-items: center;
    gap: 4px;
}

.node-detail-hops {
    font-weight: 500;
}

.node-detail-ignored {
    color: #c62828;
    font-weight: 600;
}

/* Вкладки */
.node-detail-tabs {
    display: flex;
    border-bottom: 1px solid #e5e8ec;
    margin-bottom: 12px;
    gap: 4px;
}

.node-detail-tab {
    padding: 6px 10px;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 600;
    color: #7a8aa0;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.node-detail-tab:hover {
    color: #1a2a4a;
    background: #f5f7fa;
}

.node-detail-tab.active {
    color: #1a73e8;
    border-bottom-color: #1a73e8;
}

/* Контент */
.node-detail-pane {
    display: none;
    animation: fadeIn 0.25s ease;
}

.node-detail-pane.active {
    display: block;
}

/* Overview */
.node-detail-overview {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.node-detail-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.tile {
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e5e8ec;
}

.tile-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #8a9aa8;
    letter-spacing: 0.4px;
}

.tile-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a2a4a;
    margin-top: 2px;
}

.node-detail-last-msg {
    background: #f5f8fc;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 4px solid #1a73e8;
}

.last-msg-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #6a7a8a;
    display: block;
}

.last-msg-text {
    font-size: 14px;
    color: #1a2a4a;
    font-weight: 500;
}

.last-msg-time {
    font-size: 11px;
    color: #8a9aa8;
    margin-left: 8px;
}

.node-detail-quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-action {
    padding: 6px 14px;
    border: 1px solid #d5d8dd;
    border-radius: 20px;
    background: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: #3a4a5a;
}

.quick-action:hover {
    background: #eef2f5;
    border-color: #b0b8c5;
}

.quick-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Radio */
.node-detail-radio {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
}

.radio-param {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed #e5e8ec;
}

.radio-param .label {
    color: #6a7a8a;
    font-size: 12px;
}

.radio-param .value {
    font-weight: 600;
    color: #1a2a4a;
}

.radio-history {
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
}

.radio-history-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: #4a5a6a;
    margin-bottom: 6px;
}

.radio-history-range {
    font-weight: 400;
    color: #8a9aa8;
}

.radio-history-placeholder {
    text-align: center;
    color: #aab5c0;
    font-size: 12px;
    padding: 16px 0;
}

.radio-actions {
    display: flex;
    gap: 8px;
}

.radio-action {
    padding: 6px 14px;
    border: 1px solid #d5d8dd;
    border-radius: 6px;
    background: white;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.radio-action:hover {
    background: #eef2f5;
}

/* Position */
.node-detail-position {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.position-coords {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
}

.coord {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed #e5e8ec;
}

.coord .label {
    color: #6a7a8a;
    font-size: 12px;
}

.coord .value {
    font-weight: 600;
    color: #1a2a4a;
}

.position-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.position-actions button {
    padding: 6px 14px;
    border: 1px solid #d5d8dd;
    border-radius: 6px;
    background: white;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.position-actions button:hover {
    background: #eef2f5;
}

.position-reference {
    font-size: 12px;
    color: #6a7a8a;
}

.position-no-data {
    text-align: center;
    padding: 20px 0;
    color: #8a9aa8;
}

.position-no-data button {
    margin-top: 8px;
    padding: 6px 14px;
    border: 1px solid #1a73e8;
    background: #e8f0fe;
    color: #1a73e8;
    border-radius: 6px;
    cursor: pointer;
}

/* Data */
.node-detail-data {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.data-group {
    background: #f8fafc;
    padding: 12px;
    border-radius: 8px;
}

.data-group-title {
    font-weight: 700;
    color: #1a2a4a;
    margin-bottom: 8px;
    font-size: 14px;
}

.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
}

.data-grid > div {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px dashed #e5e8ec;
}

.data-grid .label {
    color: #6a7a8a;
    font-size: 12px;
}

.data-grid .value {
    font-weight: 600;
    color: #1a2a4a;
}

.data-no-data {
    color: #8a9aa8;
    font-size: 12px;
    padding: 6px 0;
}

.data-request {
    margin-top: 6px;
    padding: 4px 12px;
    border: 1px solid #1a73e8;
    background: #e8f0fe;
    color: #1a73e8;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.data-actions {
    display: flex;
    gap: 8px;
}

.data-actions button {
    padding: 6px 14px;
    border: 1px solid #d5d8dd;
    border-radius: 6px;
    background: white;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.data-actions button:hover {
    background: #eef2f5;
}

/* Log */
.node-detail-log {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.log-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
}

.log-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
    border-bottom: 1px dashed #e5e8ec;
}

.log-summary-item .label {
    color: #6a7a8a;
    font-size: 12px;
}

.log-summary-item .value {
    font-weight: 600;
    color: #1a2a4a;
}

.log-events {
    background: #f8fafc;
    padding: 10px;
    border-radius: 8px;
}

.log-events-title {
    font-weight: 700;
    font-size: 14px;
    color: #1a2a4a;
    margin-bottom: 6px;
}

.log-event {
    display: flex;
    gap: 12px;
    padding: 4px 0;
    border-bottom: 1px solid #eef2f5;
}

.log-time {
    color: #7a8aa0;
    font-size: 11px;
    min-width: 50px;
}

.log-text {
    color: #1a2a4a;
    font-size: 12px;
}

.log-more {
    margin-top: 8px;
    padding: 4px 12px;
    border: none;
    background: #eef2f5;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #4a5a6a;
}

.log-more:hover {
    background: #e0e6ee;
}

/* Меню действий */
.node-actions-menu {
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #d5d8dd;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 100;
    min-width: 200px;
    padding: 6px 0;
}

.node-actions-menu-inner {
    display: flex;
    flex-direction: column;
}

.node-actions-menu-inner button {
    padding: 8px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
    color: #1a2a4a;
}

.node-actions-menu-inner button:hover {
    background: #f0f4f8;
}

.node-actions-menu-inner button.danger {
    color: #c62828;
    border-top: 1px solid #e5e8ec;
    margin-top: 4px;
}

.node-actions-menu-inner button.danger:hover {
    background: #ffe8e8;
}

/* Адаптивность */
@media (max-width: 768px) {
    .node-detail-tiles {
        grid-template-columns: repeat(3, 1fr);
    }
    .radio-params,
    .position-coords,
    .data-grid,
    .log-summary {
        grid-template-columns: 1fr;
    }
    .node-detail-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
    .node-detail-tab {
        flex: 0 0 auto;
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ============================================================
   TABBED SELECTED NODE CARD — MeshCenter Sprint 2.3 adjustments
   ============================================================ */
.node-detail-activity {
    display: inline-block;
    width: 7px;
    height: 18px;
    flex: 0 0 7px;
    border-radius: 2px;
    background: var(--mc-text-muted, #9aa4b2);
}
.node-detail-activity.activity-online { background: var(--mc-success, #22a559); }
.node-detail-activity.activity-away { background: var(--mc-warning, #e7af27); }
.node-detail-activity.activity-offline { background: var(--mc-danger, #db5a63); }
.node-detail-activity.activity-unknown { background: var(--mc-text-muted, #9aa4b2); }
.node-detail-favorite:empty { display: none; }
.node-detail-favorite {
    font-size: 18px;
    line-height: 1;
}

[data-theme="light"] .node-detail-favorite{
    color:#165CBA;
}

[data-theme="dark"] .node-detail-favorite{
    color:#f5c542;
}
.radio-history-range { opacity: .55; cursor: help; }
.log-history-placeholder {
    padding: var(--space-lg, 16px);
    color: var(--mc-text-secondary, #667085);
    text-align: center;
    background: var(--mc-surface-alt, #f7f9fb);
    border: 1px dashed var(--mc-border, #d8dee6);
    border-radius: var(--radius-md, 10px);
}


/* ============================================================
   UNIFIED TOP WORKSPACE HEADER - STAGE 1
   Align local-node title, main tabs and right sidebar tabs.
   ============================================================ */

:root {
    --workspace-nav-height: 42px;
    --local-node-status-height: 25px;
}

/* Local node: a two-level blue header. */
.base-card {
    padding: 0;
    background: linear-gradient(135deg, #e8f0f8, #d5e0ec);
    border-bottom: 1px solid #cbd5df;
}

.base-card-title {
    box-sizing: border-box;
    min-height: var(--workspace-nav-height);
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(79, 105, 132, 0.16);
}

.base-card-name {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    overflow: hidden;
    color: #173a5e;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.base-card-icon {
    flex: 0 0 auto;
    font-size: 14px;
}

.base-status-line {
    box-sizing: border-box;
    min-height: var(--local-node-status-height);
    margin-top: 0;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
    color: #2a4a6a;
    font-size: 10px;
    line-height: 1;
}

.base-status-metrics {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.base-status-item,
.base-status-uptime {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.base-status-uptime {
    flex: 0 0 auto;
    margin-left: auto;
    color: #415d78;
    font-weight: 600;
}

.base-status-loading {
    color: #718198;
}

/* One shared height for the center and right navigation rows. */
.main-content-tabs,
.sidebar-tabs {
    box-sizing: border-box;
    min-height: var(--workspace-nav-height);
    height: var(--workspace-nav-height);
}

.main-content-tab,
.sidebar-tab {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-tab {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
}

@media (max-width: 1180px) {
    .base-status-line {
        padding-left: 9px;
        padding-right: 9px;
        font-size: 9px;
    }

    .base-status-metrics {
        gap: 5px;
    }
}


/* =========================================================
   Rounded workspace navigation tabs
   Chats / Camera / System / Settings + Nodes / Tools
   ========================================================= */

.main-content-tabs,
.sidebar-tabs {
    gap: 5px;
    padding: 6px 8px 0;
    align-items: flex-end;
    overflow: visible;
}

.main-content-tab,
.sidebar-tab {
    height: calc(100% - 0px);
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;

    background: rgba(255, 255, 255, 0.48);
    border: 1px solid #dfe4eb;
    border-bottom: 3px solid transparent;
    border-radius: 10px 10px 0 0;

    box-shadow: 0 -1px 4px rgba(26, 46, 78, 0.04);
}

.main-content-tab:hover,
.sidebar-tab:hover {
    background: #f8fafc;
    border-color: #d4dbe5;
    border-bottom-color: transparent;
}

.main-content-tab.active,
.sidebar-tab.active {
    background: #ffffff;
    border-color: #d8dee7;
    border-bottom-color: #1e3c72;
    box-shadow: 0 -2px 7px rgba(26, 46, 78, 0.08);
}

/* Keep all central tabs visually even while preserving their current width. */
.main-content-tab {
    margin: 0;
}

/* Right-side tabs share the available width evenly. */
.sidebar-tab {
    margin: 0;
}


/* =========================================================
   Direct-message avatars: Meshtastic node short names
   ========================================================= */

.chat-icon.dm.node-short-name {
    background: #dfe7f2;
    color: #24456f;
    border: 1px solid #cbd7e7;

    font-family:
        "Roboto Mono",
        "Consolas",
        monospace;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.2px;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}

/* Preserve the existing circle size; only the content changes. */
.chat-icon.dm.node-short-name {
    width: 36px;
    height: 36px;
}


/* ============================================================
   Selected Node Inspector: rounded tabs + direct state controls
   ============================================================ */

.node-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.node-detail-state-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--mc-text-secondary, #667085);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
}

.node-detail-state-btn:hover {
    background: var(--mc-surface-alt, #f5f7fa);
    border-color: var(--mc-border, #d8dee6);
    transform: translateY(-1px);
}

.node-detail-state-btn:active {
    transform: translateY(0);
}

/* Dark theme */
[data-theme="dark"] .node-detail-favorite-btn.active {
    color: #f5c542;
    background: rgba(245,197,66,.18);
    border-color: rgba(245,197,66,.45);
}

/* Light theme */
[data-theme="light"] .node-detail-favorite-btn.active {
    color: #165CBA;
    background: rgba(22,92,186,.12);
    border-color: rgba(22,92,186,.30);
}

.node-detail-ignore-btn.active {
    color: #a43d45;
    background: #fff0f1;
    border-color: #e8b9bd;
}

.node-detail-actions-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
}

.node-detail-tabs {
    align-items: flex-end;
    gap: 4px;
    padding: 4px 4px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--mc-border, #dfe4eb);
    overflow: visible;
}

.node-detail-tab {
    margin: 0;
    padding: 7px 10px 6px;
    border: 1px solid var(--mc-border, #dfe4eb);
    border-bottom: 3px solid transparent;
    border-radius: 9px 9px 0 0;
    background: var(--mc-surface-alt, #f7f9fb);
    color: var(--mc-text-secondary, #667085);
    box-shadow: 0 -1px 3px rgba(26, 46, 78, 0.035);
}

.node-detail-tab:hover {
    color: var(--mc-text-primary, #1a2a4a);
    background: #ffffff;
    border-color: #d4dbe5;
    border-bottom-color: transparent;
}

.node-detail-tab.active {
    color: var(--mc-primary, #1a73e8);
    background: #ffffff;
    border-color: #d8dee7;
    border-bottom-color: var(--mc-primary, #1a73e8);
    box-shadow: 0 -2px 6px rgba(26, 46, 78, 0.07);
}

@media (max-width: 700px) {
    .node-detail-tabs {
        padding-left: 2px;
        padding-right: 2px;
    }

    .node-detail-tab {
        padding-left: 9px;
        padding-right: 9px;
    }
}

/* ============================================================
   Camera Control Workspace
   Camera / Image tabs, responsive panels and live status
   ============================================================ */

.video-info-bar {
    min-height: 42px;
    padding: 0 12px;
    gap: 12px;
}

.camera-control-tabs {
    display: flex;
    align-self: stretch;
    align-items: flex-end;
    gap: 4px;
    padding-top: 5px;
}

.camera-control-tab {
    min-width: 92px;
    height: 37px;
    padding: 0 14px;
    border: 1px solid #d7dee8;
    border-bottom: 3px solid transparent;
    border-radius: 9px 9px 0 0;
    background: #f7f9fc;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease;
}

.camera-control-tab:hover {
    background: #ffffff;
    color: #24456f;
}

.camera-control-tab.active {
    background: #ffffff;
    color: #163e72;
    border-color: #d3dce8;
    border-bottom-color: #1e4f8f;
}

.camera-live-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.camera-status-divider {
    color: #9aa8ba;
}

#videoStatus {
    font-weight: 600;
}

.video-controls {
    min-width: 0;
    overflow: hidden;
}

.camera-control-panel {
    display: none;
    min-width: 0;
    padding: 10px 14px 12px;
}

.camera-control-panel.active {
    display: block;
}

.camera-control-panel[hidden] {
    display: none !important;
}

.camera-basic-controls-grid {
    display: grid;
    grid-template-columns:
        minmax(260px, 300px)
        minmax(205px, 230px)
        120px;
    align-items: end;
    gap: 16px;
    min-width: 0;
}

.camera-image-workspace {
    min-width: 0;
}

.camera-image-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 11px;
}

.camera-preset-group,
.camera-white-balance-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min(260px, 100%);
}

.camera-white-balance-group {
    width: min(220px, 100%);
}

.camera-preset-group label,
.camera-white-balance-group label {
    color: #526178;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.camera-preset-group select,
.camera-white-balance-group select {
    width: 100%;
    height: 34px;
    padding: 5px 9px;
    border: 1px solid #cfd8e5;
    border-radius: 7px;
    background: #ffffff;
    color: #243b5a;
    font-size: 12px;
}


@media (max-width: 760px) {
    .camera-image-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .camera-preset-group,
    .camera-white-balance-group {
        width: 100%;
        flex: 1 1 190px;
    }

    .camera-defaults-btn {
        margin-left: auto;
        align-self: flex-end;
    }
}

#imageControlsPanel .camera-image-controls-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    column-gap: 22px;
    row-gap: 10px;
}

#imageControlsPanel .camera-exposure-slider {
    grid-column: 1 / -1;
}

#imageControlsPanel .camera-control-slider input[type="range"] {
    width: 100%;
}

@media (max-width: 900px) {
    .camera-basic-controls-grid {
        grid-template-columns: 1fr 1fr;
    }

    .camera-actions-block {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    .camera-actions-block .screenshot-btn,
    .camera-actions-block .screenshots-btn {
        flex: 1 1 0;
        width: auto;
    }
}

@media (max-width: 700px) {
    .video-info-bar {
        align-items: stretch;
        flex-direction: column;
        padding: 0 10px 7px;
        gap: 7px;
    }

    .camera-control-tabs {
        width: 100%;
    }

    .camera-control-tab {
        flex: 1 1 0;
    }

    .camera-live-status {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        white-space: normal;
    }

    .camera-basic-controls-grid {
        grid-template-columns: 1fr;
    }

    .camera-settings-row {
        flex-wrap: wrap;
    }

    #imageControlsPanel .camera-image-controls-grid {
        grid-template-columns: 1fr;
    }

    #imageControlsPanel .camera-exposure-slider {
        grid-column: auto;
    }
}

/* ============================================================
   WORKSPACE FOUNDATION: MEDIA + WEATHER MODULE
   ============================================================ */

.workspace-view,
.media-view {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 14px;
    background: var(--color-bg, #f5f7fa);
    flex-direction: column;
}

.media-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #dfe5ec);
    border-radius: 12px;
}

.media-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    padding: 16px 18px;
    border-bottom: 1px solid var(--color-border, #e5e8ec);
    background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
}

.media-title {
    margin: 0;
    color: var(--color-text, #243247);
    font-size: 18px;
    line-height: 1.25;
}

.media-subtitle {
    margin: 4px 0 0;
    color: var(--color-text-muted, #7b8796);
    font-size: 12px;
}

.media-refresh-btn,
.media-primary-btn {
    border: 1px solid #cbd8e6;
    border-radius: 8px;
    background: #edf3f9;
    color: #274766;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.media-refresh-btn:hover,
.media-primary-btn:hover {
    background: #e2ebf5;
}

.media-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 18px 20px;
}

.media-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8edf3;
}

.media-summary {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.media-summary strong {
    color: #2b3b50;
    font-size: 15px;
}

.media-summary span {
    color: #7b8796;
    font-size: 11px;
}

.media-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.media-sort-label {
    padding: 5px 10px;
    border: 1px solid #dfe5ec;
    border-radius: 999px;
    background: #f3f6f9;
    color: #667487;
    font-size: 11px;
}

.media-delete-all-btn {
    border: 1px solid #ead0d0;
    border-radius: 7px;
    background: #f8eded;
    color: #914343;
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}

.media-delete-all-btn:hover {
    background: #f2dddd;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 16px;
}

.media-item {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dfe5ec;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(34, 50, 71, 0.05);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.media-item:hover {
    transform: translateY(-2px);
    border-color: #cbd7e4;
    box-shadow: 0 7px 18px rgba(34, 50, 71, 0.10);
}

.media-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 175px;
    overflow: hidden;
    background: #e9edf2;
}

.media-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.media-item:hover .media-preview img {
    transform: scale(1.025);
}

.media-preview-error-text {
    display: none;
    color: #8a94a3;
    font-size: 12px;
}

.media-preview-error .media-preview-error-text {
    display: block;
}

.media-item-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
}

.media-item-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.media-item-copy strong {
    overflow: hidden;
    color: #344359;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-item-copy span {
    color: #8a95a4;
    font-size: 10px;
}

.media-item-actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
}

.media-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: #edf2f7;
    color: #43566d;
    text-decoration: none;
    cursor: pointer;
}

.media-icon-btn:hover {
    background: #dfe8f1;
}

.media-delete-btn:hover {
    background: #f7e5e5;
    color: #a33f3f;
}

.media-loading,
.media-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 280px;
    padding: 30px;
    color: #7b8796;
    text-align: center;
}

.media-empty-icon {
    margin-bottom: 10px;
    font-size: 38px;
    opacity: 0.75;
}

.media-empty-title {
    color: #344359;
    font-size: 15px;
    font-weight: 700;
}

.media-empty-text {
    max-width: 380px;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
}

.media-error-state .media-primary-btn {
    margin-top: 14px;
}

/* Weather is intentionally a display-only module in this milestone. */
.weather-card {
    flex: 0 0 auto;
    margin: 10px 10px 12px;
    overflow: hidden;
    border: 1px solid #dce4ed;
    border-radius: 11px;
    background: linear-gradient(160deg, #f8fbff 0%, #eef4fa 100%);
    box-shadow: 0 3px 10px rgba(37, 56, 78, 0.06);
}

.weather-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px 8px;
}

.weather-card-title {
    color: #2d4057;
    font-size: 13px;
    font-weight: 750;
}

.weather-location {
    margin-top: 2px;
    color: #79879a;
    font-size: 10px;
}

.weather-state-badge {
    border: 1px solid #d2deea;
    border-radius: 999px;
    background: rgba(255,255,255,0.72);
    color: #718095;
    padding: 3px 7px;
    font-size: 9px;
    font-weight: 650;
}

.weather-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 10px;
}

.weather-icon {
    font-size: 31px;
    line-height: 1;
}

.weather-temperature {
    color: #263b52;
    font-size: 24px;
    font-weight: 750;
    line-height: 1;
}

.weather-condition {
    margin-top: 4px;
    color: #7c8999;
    font-size: 9px;
}

.weather-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    border-top: 1px solid #e0e7ef;
    border-bottom: 1px solid #e0e7ef;
    background: #dde6ef;
}

.weather-metric {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
    padding: 8px 6px;
    background: rgba(255,255,255,0.78);
    text-align: center;
}

.weather-metric span {
    overflow: hidden;
    color: #8390a0;
    font-size: 8px;
    text-overflow: ellipsis;
}

.weather-metric strong {
    color: #41536a;
    font-size: 10px;
}

.weather-footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 11px;
    color: #8793a2;
    font-size: 8px;
}

@media (max-width: 900px) {
    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    }
}

@media (max-width: 420px) {
    .weather-summary {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .weather-current--compact {
        min-width: 118px;
    }

    .weather-current--compact .weather-icon { font-size: 32px; }
    .weather-current--compact .weather-temperature { font-size: 26px; }
}

@media (max-width: 620px) {
    .media-header,
    .media-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .media-grid {
        grid-template-columns: 1fr;
    }
}

/* Live Weather module states */
.weather-state-badge {
    appearance: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.weather-state-badge:hover {
    background: #ffffff;
    border-color: #b9c9da;
}

.weather-online .weather-state-badge {
    border-color: #b9dfc9;
    background: #eefaf3;
    color: #218653;
}

.weather-loading .weather-state-badge {
    color: #6d7c8f;
}

.weather-error .weather-state-badge {
    border-color: #edc5c5;
    background: #fff3f3;
    color: #b14b4b;
}

.weather-stale .weather-state-badge {
    border-color: #ead8ae;
    background: #fff9ea;
    color: #9b7421;
}

.weather-loading .weather-icon {
    animation: weatherPulse 1.25s ease-in-out infinite;
}

@keyframes weatherPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.04); }
}

/* Compact three-day forecast */
.weather-forecast {
    border-top: 1px solid #e0e7ef;
    padding: 8px 9px 9px;
    background: rgba(255, 255, 255, 0.34);
}

.weather-forecast-title {
    margin: 0 2px 7px;
    color: #6f7e90;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.weather-forecast-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

.weather-forecast-day {
    min-width: 0;
    padding: 6px 3px 5px;
    border: 1px solid rgba(215, 225, 235, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.62);
    text-align: center;
}

.weather-forecast-label {
    overflow: hidden;
    color: #66758a;
    font-size: 8px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-forecast-date {
    margin-top: 1px;
    color: #8794a4;
    font-size: 7px;
    line-height: 1.2;
    white-space: nowrap;
}

.weather-forecast-icon {
    margin: 3px 0 2px;
    font-size: 20px;
    line-height: 1.1;
}

.weather-forecast-temperature {
    color: #344a62;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}

.weather-forecast-description {
    overflow: hidden;
    margin-top: 2px;
    color: #8a96a5;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-forecast-placeholder {
    grid-column: 1 / -1;
    padding: 7px 4px;
    color: #8a96a5;
    font-size: 8px;
    text-align: center;
}

/* ============================================================
   UI/UX POLISH - SHARED WORKSPACE DESIGN SYSTEM
   ============================================================ */

.workspace-page-title,
.video-title,
.media-title,
.system-header h3,
.settings-title {
    margin: 0;
    color: var(--mc-text);
    font-size: var(--mc-page-title-size);
    font-weight: 700;
    line-height: 1.25;
}

.workspace-page-subtitle,
.video-subtitle,
.media-subtitle,
.system-subtitle,
.settings-subtitle {
    margin: 4px 0 0;
    color: var(--mc-muted);
    font-size: var(--mc-body-size);
    font-weight: 400;
    line-height: 1.4;
}

.video-view,
.workspace-view,
.media-view,
.system-view,
.settings-panel {
    padding: var(--mc-page-pad);
}

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

.video-header,
.media-header,
.system-header,
.settings-header {
    min-height: 64px;
    padding: 14px 16px;
    box-sizing: border-box;
}

.video-header,
.media-header {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.system-panel {
    padding: 0;
    overflow: hidden;
}

.system-header {
    margin: 0;
    border-bottom: 1px solid var(--mc-border);
}

.system-layout {
    padding: 14px;
}

.settings-header {
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.settings-grid {
    gap: 14px;
    align-items: stretch;
}

.settings-card,
.map-settings-card,
.reference-location-card {
    padding: var(--mc-card-pad);
    background: var(--mc-surface);
    box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
    box-sizing: border-box;
}

.settings-card-title,
.map-settings-title,
.reference-location-title,
.system-card-title {
    margin: 0 0 10px;
    color: #1e293b;
    font-size: var(--mc-card-title-size);
    font-weight: 700;
    line-height: 1.3;
}

.settings-card-text,
.map-settings-description,
.reference-location-description {
    color: var(--mc-muted);
    font-size: var(--mc-body-size);
    line-height: 1.45;
}

.settings-card--reference {
    grid-column: span 2;
}

.settings-card--map {
    grid-column: span 1;
}

.main-content-tab,
.sidebar-tab,
.camera-control-tab {
    min-height: 38px;
    line-height: 1;
}

.camera-control-tab {
    height: 38px;
    min-width: 92px;
    padding: 0 14px;
    font-size: 12px;
}

.video-info-bar {
    min-height: 43px;
}

.system-refresh-btn,
.media-refresh-btn,
.media-primary-btn,
.camera-power-btn,
.camera-defaults-btn,
.system-action-btn,
.reference-location-save-btn,
.settings-segmented button {
    min-height: var(--mc-control-height);
    box-sizing: border-box;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.2;
}

.system-card {
    padding: var(--mc-card-pad);
    margin-bottom: 14px;
}

.system-row {
    min-height: 34px;
    align-items: center;
    padding: 6px 0;
    box-sizing: border-box;
}

.system-actions-grid {
    gap: 8px;
}

.system-action-btn {
    padding: 8px 10px;
}

/* Camera workspace: reduce unused vertical space without cropping the stream. */
.video-frame-wrap {
    padding-top: 12px;
    padding-bottom: 12px;
}

.camera-stream {
    max-height: calc(100vh - 330px);
}

/* Settings controls */
.settings-option {
    margin-top: 12px;
}

.settings-segmented button {
    padding: 0 14px;
}

.map-settings-row {
    align-items: center;
}

.map-provider-select,
.reference-location-card select,
.reference-location-card input,
.camera-preset-group select,
.control-group select {
    height: var(--mc-control-height);
    border: 1px solid #cad4e0;
    border-radius: 7px;
    background-color: #f8fafc;
    color: #243447;
    font-size: 12px;
    box-sizing: border-box;
}

/* Reference Location: stable grid and a consistent custom select arrow. */
.reference-location-card {
    --reference-label-width: 96px;
}

.reference-location-description {
    margin-bottom: 14px;
}

.reference-location-row,
.reference-location-coordinate {
    grid-template-columns: var(--reference-label-width) minmax(170px, 1fr);
    gap: 14px;
    min-height: var(--mc-control-height);
}

.reference-location-row,
.reference-location-fields {
    margin-bottom: 10px;
}

.reference-location-fields {
    gap: 10px;
}

.reference-location-fields label,
.reference-location-row label {
    font-size: 12px;
    line-height: 1.3;
}

.reference-location-card select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 34px 0 11px;
    background-image:
        linear-gradient(45deg, transparent 50%, #526178 50%),
        linear-gradient(135deg, #526178 50%, transparent 50%);
    background-position:
        calc(100% - 16px) 15px,
        calc(100% - 11px) 15px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.reference-location-card select:hover,
.reference-location-card input:hover {
    border-color: #aebdce;
}

.reference-location-save-btn {
    margin-top: 2px;
    padding: 0 14px;
    font-size: 11px;
}

.reference-location-status {
    min-height: 14px;
    margin-top: 8px;
    font-size: 10px;
    line-height: 1.4;
}

/* Common status presentation */
.camera-live-status,
.dock-camera-status,
.dock-system-metrics {
    font-size: 11px;
}

@media (max-width: 1100px) {
    .settings-card--reference,
    .settings-card--map {
        grid-column: span 3;
    }
}

@media (max-width: 900px) {
    .settings-card--reference,
    .settings-card--map {
        grid-column: auto;
    }

    .reference-location-row,
    .reference-location-coordinate {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .reference-location-card {
        --reference-label-width: 82px;
    }

    .reference-location-row,
    .reference-location-coordinate {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}


/* ============================================================
   UI KIT ADOPTION - Camera, Media and System workspaces
   Settings is intentionally excluded from this refinement pass.
   ============================================================ */
.video-header.mc-workspace-header,
.media-header.mc-workspace-header,
.system-header.mc-workspace-header {
    height: var(--mc-workspace-header-height);
    min-height: var(--mc-workspace-header-height);
    padding: var(--mc-workspace-header-padding-y) var(--mc-workspace-header-padding-x);
    box-sizing: border-box;
    flex: 0 0 var(--mc-workspace-header-height);
}

.video-header.mc-workspace-header,
.media-header.mc-workspace-header {
    background: var(--mc-workspace-header-bg);
}

.system-header.mc-workspace-header {
    margin: 0;
    border-bottom: 1px solid var(--mc-border);
}

.video-header .workspace-page-title,
.media-header .workspace-page-title,
.system-header .workspace-page-title {
    margin: 0;
    color: var(--mc-text);
    font-size: var(--mc-page-title-size);
    font-weight: var(--mc-page-title-weight);
    line-height: var(--mc-page-title-line-height);
}

.video-header .workspace-page-subtitle,
.media-header .workspace-page-subtitle,
.system-header .workspace-page-subtitle {
    margin: var(--mc-page-subtitle-gap) 0 0;
    color: var(--mc-muted);
    font-size: var(--mc-body-size);
    font-weight: 400;
    line-height: var(--mc-page-subtitle-line-height);
}

.mc-refresh-btn,
.media-refresh-btn.mc-refresh-btn,
.system-refresh-btn.mc-refresh-btn {
    min-height: var(--mc-control-height);
    padding: 0 13px;
    border: 1px solid var(--mc-button-secondary-border);
    border-radius: var(--mc-control-radius);
    background: var(--mc-button-secondary-bg);
    color: var(--mc-button-secondary-text);
    font-size: var(--mc-control-font-size);
    font-weight: 650;
    line-height: 1;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}

.mc-refresh-btn:hover,
.media-refresh-btn.mc-refresh-btn:hover,
.system-refresh-btn.mc-refresh-btn:hover {
    background: var(--mc-button-secondary-bg-hover);
    border-color: var(--mc-button-secondary-border-hover);
    transform: none;
}

.camera-basic-controls-grid {
    align-items: start;
}

.camera-actions-block {
    align-self: start;
    padding-top: var(--mc-camera-control-label-offset);
}

.camera-actions-block .screenshot-btn {
    height: var(--mc-control-height);
    min-height: var(--mc-control-height);
    margin: 0;
}

/* ===== CHAT PANELS ===== */
.chat-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-panels {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.chat-list-container {
    flex: 0 0 40%;
    min-width: 220px;
    overflow-y: auto;
    border-right: 1px solid var(--mc-border, #dfe5ec);
    padding: 4px 8px;
    background: var(--mc-bg-subtle, #f7f9fc);
}

.messages-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: white;
}

.chat-item.selected {
    background: var(--mc-primary-soft, #eaf3ff);
    border-left: 3px solid var(--mc-primary, #1f6fdb);
}

/* Адаптивность: на маленьких экранах стек */
@media (max-width: 768px) {
    .chat-panels {
        flex-direction: column;
    }
    .chat-list-container {
        flex: none;
        height: 40%;
        border-right: none;
        border-bottom: 1px solid var(--mc-border, #dfe5ec);
    }
    .messages-view {
        flex: 1;
    }
}

/* ===== CHAT PANELS ===== */
.chat-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.chat-panels {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.chat-list-container {
    flex: 0 0 40%;
    min-width: 220px;
    overflow-y: auto;
    border-right: 1px solid var(--mc-border, #dfe5ec);
    padding: 4px 8px;
    background: var(--mc-bg-subtle, #f7f9fc);
}

.messages-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: white;
}

.chat-item.selected {
    background: var(--mc-primary-soft, #eaf3ff);
    border-left: 3px solid var(--mc-primary, #1f6fdb);
}

/* Адаптивность: на маленьких экранах стек */
@media (max-width: 768px) {
    .chat-panels {
        flex-direction: column;
    }
    .chat-list-container {
        flex: none;
        height: 40%;
        border-right: none;
        border-bottom: 1px solid var(--mc-border, #dfe5ec);
    }
    .messages-view {
        flex: 1;
    }
}


/* ============================================================
   WORKSPACE SHELL - STAGE 1
   Brand belongs to the local-node panel; panel controls live in
   the persistent bottom status dock.
   ============================================================ */
.header {
    display: none;
}

.base-brand-strip {
    flex: 0 0 auto;
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 7px 14px;
    color: #fff;
    background: linear-gradient(135deg, #1a2a4a 0%, #2a3a6a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.base-brand-strip .header-brand {
    width: 100%;
}

.base-brand-strip .app-title {
    gap: 8px;
    min-width: 0;
}

.base-brand-strip .app-name {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.25px;
}

.base-brand-strip .header-logo {
    width: 24px;
    height: 24px;
}

.base-brand-strip .header-status {
    margin-left: 9px;
    padding: 4px 5px;
}

.base-brand-strip .status-label {
    font-size: 13px;
}

.dock-left {
    gap: 10px;
}

.dock-layout-controls {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}

.dock-panel-btn {
    width: 28px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #d5dce7;
    border-radius: 7px;
    background: #ffffff;
    color: #52627a;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease,
                color .16s ease, box-shadow .16s ease;
}

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

.dock-panel-btn:focus-visible {
    outline: 2px solid #6e9fe8;
    outline-offset: 1px;
}

.dock-panel-btn.panel-is-hidden {
    color: #ffffff;
    border-color: #49689f;
    background: #49689f;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.dock-panel-btn svg {
    display: block;
}

.dock-workspace-label {
    color: #64748b;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .dock-workspace-label {
        display: none;
    }

    .status-dock {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ===== SYSTEM LOG STANDALONE CARD ===== */
.system-log-card {
    min-height: 0;
}

.system-log-toggle {
    padding: 0;
    margin: 0 0 10px;
}

.system-log-toggle .system-card-title {
    margin: 0;
}

.system-log-panel {
    margin-top: 0;
    max-height: 260px;
    border: 1px solid rgba(31, 78, 121, 0.10);
    background: rgba(255, 255, 255, 0.52);
}

body[data-theme="dark"] .system-log-panel,
html[data-theme="dark"] .system-log-panel {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.28);
}



/* ============================================================
   STAGE 2A — LOCAL NODE DASHBOARD / WEATHER LOCATION
   ============================================================ */
.base-sidebar {
    --sidebar-font-secondary: 10px;
    --sidebar-font-body: 11px;
    --sidebar-font-heading: 12px;
    --sidebar-font-title: 14px;
}

.base-sidebar .base-card-name { font-size: var(--sidebar-font-title); }
.base-sidebar .sensors-title,
.base-sidebar .telemetry-title { font-size: var(--sidebar-font-heading); }
.base-sidebar .base-status-line,
.base-sidebar .telemetry-value,
.base-sidebar .weather-condition { font-size: var(--sidebar-font-body); }
.base-sidebar .sensor-label,
.base-sidebar .sensor-update,
.base-sidebar .telemetry-update,
.base-sidebar .weather-footer,
.base-sidebar .weather-metric span { font-size: var(--sidebar-font-secondary); }

.base-dashboard-row--battery-only {
    grid-template-columns: 1fr;
}

.base-dashboard-row--battery-only .battery-indicator {
    width: 100%;
    min-height: 48px;
}

.weather-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    position: relative;
    gap: 12px;
    padding: 12px 12px 34px;
}

.weather-location-block {
    display: flex;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.weather-location-name {
    overflow: hidden;
    color: #2d4057;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weather-location-coordinates {
    color: #79879a;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

.weather-location-block:hover .weather-location-name { color: #1769c2; }
.weather-location-block.reference-is-disabled .weather-location-name,
.weather-location-block.reference-is-disabled .weather-location-coordinates { color: #8a96a5; }

.weather-current--compact {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 9px;
    min-width: 132px;
    padding: 0;
    text-align: right;
}
.weather-current--compact .weather-icon {
    font-size: 42px;
    line-height: 1;
}
.weather-current--compact .weather-temperature {
    font-size: 29px;
    line-height: 1;
}
.weather-current--compact .weather-condition {
    max-width: 112px;
    margin-top: 5px;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.weather-current-copy { min-width: 0; }
.weather-summary-state {
    position: absolute;
    left: 12px;
    bottom: 8px;
}

@media (max-width: 420px) {
    .weather-current--compact .weather-icon { font-size: 38px; }
}

.settings-card--telemetry .settings-option--select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}
.settings-select {
    min-width: 132px;
    padding: 8px 10px;
    border: 1px solid var(--mc-border, #cbd5e1);
    border-radius: 8px;
    background: var(--mc-input-bg, #fff);
    color: var(--mc-text, #10233c);
    font: inherit;
}

@media (max-width: 340px) {
    .weather-summary { grid-template-columns: 1fr; }
    .weather-current--compact { justify-self: stretch; }
}

/* ============================================================
   STAGE 2A — UNIFIED LOCAL NODE INFORMATION PANEL
   Base status, live sensors, battery and telemetry history share
   one visual container while preserving their existing IDs/API.
   ============================================================ */
.node-info-panel {
    margin: 0 10px 10px;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid #ccd6e2;
    border-radius: 11px;
    background: #f5f8fb;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .08);
}

.node-info-panel > .base-card,
.node-info-panel > .sensors-card,
.node-info-panel > .telemetry-section {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.node-info-panel > .base-card {
    padding: 10px 11px 9px;
}

.node-info-panel > .sensors-card,
.node-info-panel > .telemetry-section {
    position: relative;
    padding: 9px 11px 10px;
}

.node-info-panel > .sensors-card::before,
.node-info-panel > .telemetry-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 11px;
    right: 11px;
    height: 1px;
    background: #d4dde8;
}

.node-info-panel .base-card-name {
    font-size: 15px;
    line-height: 1.25;
}

.node-info-panel .base-status-line {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.35;
}

.node-info-panel .sensors-title,
.node-info-panel .telemetry-title {
    font-size: 12px;
    font-weight: 700;
}

.node-info-panel .sensors-grid {
    margin-top: 7px;
}

.node-info-panel .sensor-label {
    font-size: 10px;
}

.node-info-panel .sensor-value,
.node-info-panel .sensor-unit {
    font-size: 11px;
}

.node-info-panel .base-dashboard-row {
    margin-top: 8px;
    padding-top: 8px;
}

.node-info-panel .battery-indicator {
    min-height: 50px;
    border-color: #c2ceda;
    background: rgba(255, 255, 255, .72);
}

.node-info-panel .sensor-update {
    margin-top: 6px;
}

.node-info-panel .telemetry-header {
    margin-bottom: 7px;
}

.node-info-panel .telemetry-buttons {
    gap: 7px;
}

.node-info-panel .telemetry-btn {
    min-height: 54px;
}

/* Keep the user's preferred location emphasis. */
.weather-location-name {
    font-size: 18px;
}

body[data-theme="dark"] .node-info-panel,
html[data-theme="dark"] .node-info-panel {
    border-color: #263c52;
    background: #172638;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .24);
}

body[data-theme="dark"] .node-info-panel > .sensors-card::before,
body[data-theme="dark"] .node-info-panel > .telemetry-section::before,
html[data-theme="dark"] .node-info-panel > .sensors-card::before,
html[data-theme="dark"] .node-info-panel > .telemetry-section::before {
    background: #31465c;
}

body[data-theme="dark"] .node-info-panel .battery-indicator,
html[data-theme="dark"] .node-info-panel .battery-indicator {
    border-color: #40556b;
    background: rgba(255, 255, 255, .08);
}

@media (max-width: 1180px) {
    .node-info-panel {
        margin-right: 7px;
        margin-left: 7px;
    }

    .node-info-panel > .base-card,
    .node-info-panel > .sensors-card,
    .node-info-panel > .telemetry-section {
        padding-right: 8px;
        padding-left: 8px;
    }

    .node-info-panel > .sensors-card::before,
    .node-info-panel > .telemetry-section::before {
        left: 8px;
        right: 8px;
    }
}

/* ============================================================
   STAGE 2B PREVIEW — LOCAL NODE DASHBOARD
   ============================================================ */
.node-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.node-uptime-badge {
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid #c7d3df;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #60758a;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.node-info-panel .sensors-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    color: #5e7388;
    font-size: 11px;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.node-info-panel .sensors-title .sensor-update {
    margin: 0;
    color: #8293a5;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.node-info-panel .node-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 0;
}

.node-info-panel .node-metrics-grid .sensor-item {
    min-width: 0;
    padding: 7px 5px 6px;
    border: 1px solid #d5dee8;
    border-radius: 8px;
    background: rgba(255, 255, 255, .62);
    text-align: center;
}

.node-info-panel .node-metrics-grid .sensor-label {
    margin-bottom: 3px;
    color: #6c8195;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .035em;
}

.node-info-panel .node-metrics-grid .sensor-value,
.node-info-panel .node-metrics-grid .sensor-unit {
    display: inline;
    color: #17344f;
    font-size: 12px;
    font-weight: 750;
}

.node-info-panel .base-dashboard-row--battery-only {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
}

.node-info-panel .battery-indicator {
    min-height: 0;
    padding: 9px 10px 8px;
}

.node-info-panel .base-mini-card-heading {
    margin-bottom: 6px;
    font-size: 12px;
}

.battery-runtime-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    color: #64798d;
    font-size: 10px;
}

.battery-runtime-value {
    color: #17344f;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.node-info-panel .telemetry-title {
    color: #60758a;
    font-size: 11px;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.node-info-panel .telemetry-status {
    color: #8293a5;
    font-size: 10px;
}

.settings-inline-input {
    display: flex;
    align-items: center;
    gap: 7px;
}

.settings-number-input {
    width: 110px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid #c9d5e1;
    border-radius: 7px;
    background: #fff;
    color: #16324c;
    font: inherit;
    font-weight: 650;
}

.settings-card-note {
    margin-top: 8px;
    font-size: 11px;
}

body[data-theme="dark"] .node-uptime-badge,
html[data-theme="dark"] .node-uptime-badge {
    border-color: #3d5369;
    background: #22364a;
    color: #a9bdd0;
}

body[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-item,
html[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-item {
    border-color: #334a61;
    background: #1c2e41;
}

body[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-label,
html[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-label,
body[data-theme="dark"] .battery-runtime-row,
html[data-theme="dark"] .battery-runtime-row {
    color: #8ea6bc;
}

body[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-value,
body[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-unit,
body[data-theme="dark"] .battery-runtime-value,
html[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-value,
html[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-unit,
html[data-theme="dark"] .battery-runtime-value {
    color: #f2f7fb;
}

body[data-theme="dark"] .settings-number-input,
html[data-theme="dark"] .settings-number-input {
    border-color: #334a61;
    background: #0e1c2a;
    color: #f2f7fb;
}

@media (max-width: 1180px) {
    .node-info-panel .node-metrics-grid {
        gap: 4px;
    }

    .node-info-panel .node-metrics-grid .sensor-item {
        padding-right: 3px;
        padding-left: 3px;
    }
}

/* ============================================================
   STAGE 2C — LEFT DASHBOARD VISUAL POLISH
   ============================================================ */
.base-brand-strip {
    min-height: 46px;
    padding: 5px 12px;
    background: linear-gradient(135deg, #294766 0%, #365a7a 100%);
    border-bottom-color: rgba(255,255,255,.10);
}

.base-brand-strip .header-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.base-brand-strip .app-name {
    font-size: 19px;
    font-weight: 600;
}

.base-brand-strip .header-logo {
    width: 22px;
    height: 22px;
}

.base-brand-strip .header-status {
    margin-left: auto;
    padding: 3px 4px;
}

.base-brand-strip .status-label {
    font-size: 11px;
    font-weight: 600;
}

.base-brand-strip .app-title.is-reloading .header-logo {
    opacity: .65;
}

.base-brand-strip .app-title.is-reloading .app-name {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
}

.node-info-panel {
    margin-top: 8px;
}

.node-info-panel > .base-card {
    padding: 7px 11px 6px;
}

.node-info-panel .base-card-title {
    min-height: 32px;
    padding: 0;
    border-bottom: 0;
}

.node-info-panel > .sensors-card::before,
.node-info-panel > .telemetry-section::before {
    left: 0;
    right: 0;
}

.node-info-panel .sensors-title {
    margin-bottom: 7px;
}

.node-telemetry-surface {
    overflow: hidden;
    border: 1px solid #cbd6e1;
    border-radius: 9px;
    background: rgba(255,255,255,.58);
}

.node-info-panel .node-metrics-grid {
    gap: 0;
    margin: 0;
}

.node-info-panel .node-metrics-grid .sensor-item {
    min-height: 48px;
    padding: 7px 8px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
}

.node-info-panel .node-metrics-grid .sensor-item:not(:nth-child(3n+1)) {
    border-left: 1px solid #d8e1ea;
}

.node-info-panel .node-metrics-grid .sensor-item:nth-child(n+4) {
    border-top: 1px solid #d8e1ea;
}

.node-info-panel .node-metrics-grid .sensor-label {
    margin-bottom: 3px;
    color: #647b91;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.node-info-panel .sensor-reading {
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-width: 0;
}

.node-info-panel .node-metrics-grid .sensor-value,
.node-info-panel .node-metrics-grid .sensor-unit {
    color: #17344f;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.node-info-panel .battery-indicator {
    padding: 9px 10px 8px;
}

.node-info-panel .base-mini-card-heading {
    margin-bottom: 5px;
}

.battery-percent-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.battery-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: #d9e0e7;
}

.battery-fill {
    height: 100%;
    border-radius: inherit;
    transition: width .35s ease, background-color .35s ease;
}

.battery-scale {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 4px;
    color: #7d8fa1;
    font-size: 8px;
    line-height: 1;
}

.battery-scale span {
    position: relative;
    text-align: center;
}

.battery-scale span:first-child { text-align: left; }
.battery-scale span:last-child { text-align: right; }

.battery-scale span::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 1px;
    height: 3px;
    background: currentColor;
    opacity: .7;
}

.battery-scale span:first-child::before { left: 0; }
.battery-scale span:last-child::before { left: auto; right: 0; }

.settings-select,
.settings-number-input {
    font-weight: 400;
}

.settings-card--placeholder {
    display: none !important;
}

body[data-theme="dark"] .node-telemetry-surface,
html[data-theme="dark"] .node-telemetry-surface {
    border-color: #334a61;
    background: #1c2e41;
}

body[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-item:not(:nth-child(3n+1)),
html[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-item:not(:nth-child(3n+1)),
body[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-item:nth-child(n+4),
html[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-item:nth-child(n+4) {
    border-color: #334a61;
}

body[data-theme="dark"] .battery-bar,
html[data-theme="dark"] .battery-bar {
    background: #34485a;
}

body[data-theme="dark"] .battery-scale,
html[data-theme="dark"] .battery-scale {
    color: #71879b;
}

@media (max-width: 1180px) {
    .node-info-panel .node-metrics-grid .sensor-item {
        padding: 6px 5px;
    }
    .node-info-panel .node-metrics-grid .sensor-value,
    .node-info-panel .node-metrics-grid .sensor-unit {
        font-size: 12px;
    }
}


/* ============================================================
   STAGE 2C.1 — BRAND HEIGHT + BATTERY RUNTIME FIX POLISH
   Keep the left brand strip aligned with the 42px workspace nav.
   ============================================================ */
.base-brand-strip {
    box-sizing: border-box;
    height: var(--workspace-nav-height, 42px);
    min-height: var(--workspace-nav-height, 42px);
    padding: 4px 11px;
}

.base-brand-strip .header-brand,
.base-brand-strip .app-title {
    height: 100%;
}

.base-brand-strip .app-name {
    font-size: 18px;
    line-height: 1;
}

.base-brand-strip .header-logo {
    width: 20px;
    height: 20px;
}

.base-brand-strip .header-status {
    padding: 2px 3px;
    line-height: 1;
}

.base-brand-strip .status-dot {
    width: 8px;
    height: 8px;
}

.base-brand-strip .status-label {
    font-size: 10px;
    line-height: 1;
}

/* ============================================================
   STAGE 2C.2 — SOFT BRAND RELOAD + LOCAL NODE IDENTITY
   ============================================================ */
.base-brand-strip .app-name {
    transition: opacity .15s ease, transform .15s ease;
}

.base-brand-strip .app-name.brand-fade-out {
    opacity: 0;
    transform: translateY(-2px);
}

.base-brand-strip .app-name.brand-fade-in {
    animation: meshcenterBrandFadeIn .22s ease both;
}

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

.base-brand-strip .app-title.is-reloading .header-logo {
    opacity: .72;
    transform: none !important;
}

.base-brand-strip .app-title.is-reloading .app-name {
    font-size: 15px;
    font-weight: 600;
}

.node-info-panel .base-card-name {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
    color: #15314f;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.node-info-panel #baseNodeName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.base-node-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #c7d4e1;
    border-radius: 7px;
    background: #eaf1f7;
    box-shadow: 0 1px 2px rgba(15, 37, 61, .10);
    cursor: pointer;
    overflow: hidden;
}

.base-node-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.base-node-avatar:hover {
    border-color: #5da4ef;
    box-shadow: 0 0 0 2px rgba(93, 164, 239, .15);
}

.base-node-avatar:focus-visible {
    outline: 2px solid #5da4ef;
    outline-offset: 2px;
}

body[data-theme="dark"] .node-info-panel .base-card-name,
html[data-theme="dark"] .node-info-panel .base-card-name {
    color: #f3f7fb;
}

body[data-theme="dark"] .base-node-avatar,
html[data-theme="dark"] .base-node-avatar {
    border-color: #40556b;
    background: #22364b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
}

@media (max-width: 1180px) {
    .node-info-panel .base-card-name {
        font-size: 16px;
        gap: 7px;
    }
    .base-node-avatar {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
    }
}

/* ============================================================
   STAGE 2C.3 — NODE IDENTITY / TELEMETRY VISUAL POLISH
   ============================================================ */
/* Reload changes only the text; typography and layout stay fixed. */
.base-brand-strip .app-name,
.base-brand-strip .app-title.is-reloading .app-name {
    font-size: 18px;
    font-weight: 650;
    line-height: 1;
    transform: none;
}

.base-brand-strip .app-name.brand-fade-out {
    opacity: 0;
    transform: none;
}

@keyframes meshcenterBrandFadeInStable {
    from { opacity: 0; }
    to { opacity: 1; }
}

.base-brand-strip .app-name.brand-fade-in {
    animation: meshcenterBrandFadeInStable .24s ease both;
}

/* Keep the node heading compact while making the node name prominent. */
.node-info-panel .base-card-title.node-dashboard-heading {
    min-height: 46px;
    padding: 8px 11px;
}

.node-info-panel .base-card-name {
    gap: 10px;
    color: #112f4d;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.15;
}

.node-info-panel #baseNodeName {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-shadow: none;
}

/* Small node image: transparent images remain transparent and are contained. */
.base-node-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.8), rgba(229,238,247,.72));
}

.base-node-avatar img {
    width: 100%;
    height: 100%;
    padding: 2px;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border-radius: 8px;
}

body[data-theme="dark"] .node-info-panel .base-card-name,
html[data-theme="dark"] .node-info-panel .base-card-name {
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0,0,0,.28);
}

body[data-theme="dark"] .base-node-avatar,
html[data-theme="dark"] .base-node-avatar {
    background: linear-gradient(135deg, #263d52, #1a2c3f);
    border-color: #4c647b;
}

/* Telemetry: six values in a clean 3 × 2 table, labels above values. */
.node-info-panel .node-metrics-grid .sensor-item {
    min-width: 0;
    padding: 9px 5px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}

.node-info-panel .node-metrics-grid .sensor-label {
    margin: 0;
    color: #607a92;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.node-info-panel .sensor-reading {
    justify-content: center;
    gap: 2px;
    width: 100%;
}

.node-info-panel .node-metrics-grid .sensor-value,
.node-info-panel .node-metrics-grid .sensor-unit {
    color: #122f4a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
}

body[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-label,
html[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-label {
    color: #9eb5c9;
}

body[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-value,
body[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-unit,
html[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-value,
html[data-theme="dark"] .node-info-panel .node-metrics-grid .sensor-unit {
    color: #f7fbff;
}

/* Weather metrics use the same two-line hierarchy, but slightly larger. */
.weather-metric {
    padding-top: 9px;
    padding-bottom: 9px;
}

.weather-metric span {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
}

.weather-metric strong {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
}

@media (max-width: 1180px) {
    .node-info-panel .base-card-name { font-size: 17px; }
    .base-node-avatar {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
    }
    .node-info-panel .node-metrics-grid .sensor-value,
    .node-info-panel .node-metrics-grid .sensor-unit,
    .weather-metric strong {
        font-size: 13px;
    }
}

/* Stage 2C.4 - brand strip exact height */
.base-brand-strip{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
    padding:2px 10px!important;
}
.base-brand-strip .header-brand,
.base-brand-strip .app-title{
    min-height:0!important;
    height:100%!important;
    align-items:center!important;
}
.base-brand-strip .app-name{
    font-size:17px!important;
    line-height:1!important;
}
.base-brand-strip .header-logo{
    width:18px!important;
    height:18px!important;
}
.base-brand-strip .header-status{
    padding:1px 3px!important;
}
.base-brand-strip .status-label{
    font-size:10px!important;
    line-height:1!important;
}

/* ============================================================
   STAGE 2C.4 — NODE-FIRST HEADER + STATUS-DOCK BRAND
   ============================================================ */
/* The local node is the primary object: it starts at the top edge. */
.base-brand-strip {
    display: none !important;
}

.base-sidebar .node-info-panel {
    margin-top: 0;
}

.node-info-panel .base-card-title.node-dashboard-heading {
    min-height: var(--workspace-nav-height, 42px);
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Compact MeshCenter identity in the right side of the status dock. */
.dock-right {
    gap: 7px;
    white-space: nowrap;
}

.dock-brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.dock-brand-logo {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    object-fit: contain;
}

.dock-brand-name {
    color: var(--mc-text-secondary, #64748b);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.dock-online-status.header-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    line-height: 1;
}

.dock-online-status.header-status:hover {
    background: transparent;
}

.dock-online-status .status-dot {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 6px currentColor;
}

.dock-online-status .status-label {
    font-size: 10px;
    font-weight: 650;
}

.dock-separator {
    color: #9aa5b4;
    font-size: 10px;
    line-height: 1;
}

#dockContextText {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    min-width: 0;
}

#dockContextText .dock-system-metrics {
    gap: 8px;
}

/* Selected node: reserve the first row for the full node name. */
.node-detail-header {
    align-items: flex-start;
}

.node-detail-title-wrap {
    width: 100%;
}

.node-detail-name {
    flex: 1 1 auto;
    min-width: 0;
}

.node-detail-subheader {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    flex-wrap: nowrap;
}

.node-detail-identity-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
}

.node-detail-subheader .node-detail-header-actions {
    flex: 0 0 auto;
    margin-left: auto;
    align-self: flex-start;
    transform: translateY(-3px);
}

@media (max-width: 760px) {
    .dock-brand-name {
        display: none;
    }

    .dock-right {
        gap: 5px;
    }

    .node-detail-subheader {
        align-items: center;
    }
}


/* ============================================================
   STAGE 2C.5 — TOP ALIGNMENT + STATUS DOCK POLISH
   ============================================================ */
/* Align the Flint Base card with the top edge of the center/right tabs. */
.base-sidebar {
    padding-top: 5px;
    box-sizing: border-box;
}

/* Slightly stronger product identity in the status dock. */
.dock-brand {
    gap: 6px;
}

.dock-brand-logo {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}

.dock-brand-name {
    font-size: 13px;
}

.dock-online-status .status-label {
    font-size: 12px;
}

/* Use one and the same separator treatment everywhere. */
#dockContextText::before {
    content: '•';
    margin-right: 8px;
    color: #9aa5b4;
    font-size: 10px;
    line-height: 1;
}

.dock-system-metrics span + span::before {
    color: #9aa5b4;
}

@media (max-width: 760px) {
    .base-sidebar {
        padding-top: 5px;
    }

    .dock-brand-logo {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }
}


/* ============================================================
   STAGE 2C.6 — NODE PROFILE ICON + SELECTED NODE ACTION POLISH
   ============================================================ */
.node-detail-header {
    margin-bottom: 5px;
}

.node-detail-title-wrap {
    gap: 7px;
}

.node-detail-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.node-detail-subheader {
    display: block;
    margin-bottom: 7px;
}

.node-detail-identity-line {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 5px;
}

.node-detail-identity-line .node-detail-short-id {
    order: -10;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--mc-text-secondary, #7a8aa0);
    font-size: 12px;
    font-weight: 700;
}

.node-detail-id {
    appearance: none;
    border: 0;
    cursor: copy;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.node-detail-id:hover {
    background: #e7edf5;
    color: #1a5fa8;
}

.node-detail-id:active {
    transform: translateY(1px);
}

.node-detail-copy-id {
    display: none !important;
}

.node-detail-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.node-detail-status-copy {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.node-detail-action-group {
    display: grid;
    grid-template-columns: repeat(3, 32px);
    flex: 0 0 auto;
    gap: 0;
    overflow: hidden;
    margin-left: auto;
    border: 1px solid var(--mc-border, #d8dee6);
    border-radius: 9px;
    background: var(--mc-surface-alt, #f5f7fa);
    box-shadow: 0 1px 3px rgba(20, 35, 55, .06);
}

.node-detail-action-group .node-detail-state-btn,
.node-detail-action-group .node-detail-actions-btn {
    width: 32px;
    height: 30px;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--mc-border, #d8dee6);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.node-detail-action-group > :last-child {
    border-right: 0;
}

.node-detail-action-group .node-detail-state-btn:hover,
.node-detail-action-group .node-detail-actions-btn:hover {
    transform: none;
    background: rgba(120, 145, 175, .12);
}

[data-theme="dark"] .node-detail-id:hover {
    background: #26394d;
    color: #8fc4ff;
}

[data-theme="dark"] .node-detail-action-group {
    background: #17283a;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

@media (max-width: 520px) {
    .node-detail-status-row {
        align-items: flex-start;
    }

    .node-detail-action-group {
        grid-template-columns: repeat(3, 30px);
    }

    .node-detail-action-group .node-detail-state-btn,
    .node-detail-action-group .node-detail-actions-btn {
        width: 30px;
    }
}


/* ============================================================
   STAGE 2C.6.1 — STABLE STATUS DOCK METRICS
   Keep MeshCenter / Online fixed while live values change width.
   ============================================================ */
#dockCpuMetric,
#dockRamMetric,
#dockTempMetric {
    display: inline-block;
    box-sizing: border-box;
    text-align: left;
    white-space: pre;
    font-variant-numeric: tabular-nums;
}

#dockCpuMetric,
#dockRamMetric {
    width: 9.2ch;
}

#dockTempMetric {
    width: 11.2ch;
}


/* ============================================================
   STAGE 2C.7 — NODE STATE CONTROL + NOTIFICATION CENTER
   ============================================================ */
/* The action group is the single source of truth for favorite/ignored state. */
.node-detail-favorite,
.node-detail-ignored {
    display: none !important;
}

.node-detail-action-group {
    grid-template-columns: repeat(3, 34px);
    border-color: color-mix(in srgb, var(--mc-border, #d8dee6) 82%, #7890aa 18%);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mc-surface-alt, #f5f7fa) 92%, #dbe7f4 8%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.5),
        0 1px 3px rgba(20,35,55,.08);
}

.node-detail-action-group .node-detail-state-btn,
.node-detail-action-group .node-detail-actions-btn {
    width: 34px;
    height: 31px;
    color: var(--mc-text-secondary, #64748b);
    font-size: 14px;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.node-detail-action-group .node-detail-state-btn:hover,
.node-detail-action-group .node-detail-actions-btn:hover {
    background: rgba(72, 110, 152, .12);
}

.node-detail-action-group .node-detail-favorite-btn.active {
    color: #b17a00;
    background: #fff2c7;
    box-shadow: inset 0 -2px 0 #d8a51d;
}

.node-detail-action-group .node-detail-ignore-btn.active {
    color: #b43842;
    background: #ffe7e9;
    box-shadow: inset 0 -2px 0 #d9545f;
}

[data-theme="dark"] .node-detail-action-group {
    border-color: #344a60;
    background: #17283a;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 1px 3px rgba(0,0,0,.2);
}

[data-theme="dark"] .node-detail-action-group .node-detail-favorite-btn.active {
    color: #ffd35a;
    background: rgba(224, 171, 28, .17);
    box-shadow: inset 0 -2px 0 #d4a31f;
}

[data-theme="dark"] .node-detail-action-group .node-detail-ignore-btn.active {
    color: #ff858c;
    background: rgba(218, 76, 87, .16);
    box-shadow: inset 0 -2px 0 #d9545f;
}

/* Toasts appear just above the fixed dock and never cover the header. */
.toast.notification-toast {
    position: fixed;
    left: 50%;
    bottom: 46px;
    top: auto;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 260px;
    max-width: min(520px, calc(100vw - 28px));
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    transform: translateX(-50%) translateY(16px);
    opacity: 0;
    color: #fff;
    box-shadow: 0 8px 28px rgba(0,0,0,.22);
    pointer-events: none;
    z-index: 9999;
    transition: opacity .22s ease, transform .22s ease;
}

.toast.notification-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.notification-toast-icon {
    font-size: 14px;
    font-weight: 800;
}

.toast.notification-toast.success { background: #277b4b; }
.toast.notification-toast.warning { background: #9b6b18; }
.toast.notification-toast.error { background: #a93e46; }
.toast.notification-toast.info { background: #286da8; }

.dock-notification-wrap {
    position: relative;
    flex: 0 0 auto;
}

.dock-notification-btn {
    position: relative;
    width: 27px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mc-border, #d8dee6);
    border-radius: 7px;
    background: var(--mc-surface-alt, #eef2f7);
    color: var(--mc-text-secondary, #526178);
    cursor: pointer;
    font-size: 12px;
}

.dock-notification-btn:hover {
    background: #dfe9f4;
}


.notification-popover {
    position: absolute;
    left: 0;
    bottom: 34px;
    width: min(360px, calc(100vw - 24px));
    max-height: min(430px, calc(100vh - 90px));
    overflow: hidden;
    border: 1px solid var(--mc-border, #d8dee6);
    border-radius: 12px;
    background: var(--mc-surface, #fff);
    color: var(--mc-text, #1e293b);
    box-shadow: 0 14px 38px rgba(20,35,55,.22);
    z-index: 1600;
}

.notification-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 13px;
    border-bottom: 1px solid var(--mc-border, #e1e6ed);
}

.notification-popover-header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notification-popover-header strong { font-size: 13px; }
.notification-popover-header span { color: var(--mc-muted, #7b8796); font-size: 9px; }

.notification-clear-btn {
    border: 0;
    border-radius: 6px;
    padding: 5px 8px;
    background: var(--mc-surface-alt, #eef2f7);
    color: var(--mc-text-secondary, #526178);
    font-size: 10px;
    cursor: pointer;
}

.notification-list {
    max-height: 335px;
    overflow-y: auto;
    padding: 5px;
}

.notification-item {
    width: 100%;
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 8px;
    padding: 9px 8px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--mc-border, #e1e6ed) 70%, transparent);
    border-radius: 7px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: var(--mc-surface-alt, #f4f7fa); }
.notification-item.is-read { opacity: .72; }
.notification-item-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 800;
}
.notification-success .notification-item-icon { color: #217648; background: #e7f5ec; }
.notification-warning .notification-item-icon { color: #946316; background: #fff3d8; }
.notification-error .notification-item-icon { color: #a43d45; background: #fde9eb; }
.notification-info .notification-item-icon { color: #23699f; background: #e6f1fa; }
.notification-item-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.notification-item-copy strong { overflow-wrap: anywhere; font-size: 11px; font-weight: 650; line-height: 1.3; }
.notification-item-copy small { color: var(--mc-muted, #7b8796); font-size: 9px; }
.notification-empty { padding: 30px 16px; color: var(--mc-muted, #7b8796); font-size: 11px; text-align: center; }

[data-theme="dark"] .dock-notification-btn { background: #17283a; border-color: #344a60; color: #bdd0e4; }
[data-theme="dark"] .dock-notification-btn:hover { background: #21364b; }
[data-theme="dark"] .notification-popover { background: #172638; border-color: #34485e; }
[data-theme="dark"] .notification-item:hover { background: #203449; }
[data-theme="dark"] .notification-success .notification-item-icon { color: #72d69a; background: rgba(57,164,100,.16); }
[data-theme="dark"] .notification-warning .notification-item-icon { color: #f0c86a; background: rgba(196,143,31,.17); }
[data-theme="dark"] .notification-error .notification-item-icon { color: #ff9299; background: rgba(207,71,82,.17); }
[data-theme="dark"] .notification-info .notification-item-icon { color: #8fc7f0; background: rgba(48,126,184,.18); }

@media (max-width: 620px) {
    .notification-popover { left: -62px; }
    .toast.notification-toast { bottom: 48px; min-width: 0; width: calc(100vw - 24px); }
}


/* ============================================================
   WI-FI NETWORK ROW POLISH — Stage 2C.7.2
   Keep network parameters compact and place Forget + Connect together.
   ============================================================ */
.wifi-info {
    grid-template-columns: max-content max-content max-content minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 6px;
    justify-content: start;
    min-width: 0;
}

.wifi-info > span {
    white-space: nowrap;
}

.wifi-actions {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: max-content;
    margin-left: 14px;
}

.wifi-connect-btn,
.wifi-forget-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-left: 7px;
    padding-right: 7px;
}

@media (max-width: 1180px) {
    .wifi-info {
        grid-template-columns: max-content max-content minmax(0, 1fr);
    }

    .wifi-info > span:nth-child(3) {
        grid-column: 1 / 3;
    }

    .wifi-actions {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        margin-left: 8px;
    }
}

/* ============================================================
   STAGE 2C.7.3 — UNIFIED STATUS DOCK SEPARATORS
   Use the same full bullet between every status item.
   ============================================================ */
#dockContextText::before,
.dock-system-metrics span + span::before {
    content: none !important;
    display: none !important;
}

#dockContextText .dock-system-metrics {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#dockContextText .dock-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    color: #9aa5b4;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}



/* ============================================================
   MESSAGE ACTIONS — Stage 1
   ============================================================ */
.message .bubble {
    padding-right: 34px;
}

.message-actions-trigger {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.message:hover .message-actions-trigger,
.message.actions-open .message-actions-trigger,
.message-actions-trigger:focus-visible {
    opacity: 0.72;
}

.message-actions-trigger:hover,
.message-actions-trigger:focus-visible {
    opacity: 1;
    background: rgba(15, 23, 42, 0.10);
}

.message.me .message-actions-trigger:hover,
.message.me .message-actions-trigger:focus-visible {
    background: rgba(255, 255, 255, 0.18);
}

.message-actions-trigger:active {
    transform: scale(0.92);
}

.message.actions-open .bubble {
    outline: 2px solid rgba(26, 115, 232, 0.20);
    outline-offset: 2px;
}

.message-actions-menu {
    position: fixed;
    z-index: 10050;
    min-width: 205px;
    padding: 6px;
    border: 1px solid #dfe5ec;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}

.message-actions-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.message-action-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #22324a;
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.message-action-item:hover,
.message-action-item:focus-visible {
    background: #edf4ff;
    color: #1557b0;
}

.message-action-item.danger {
    color: #b42318;
}

.message-action-item.danger:hover,
.message-action-item.danger:focus-visible {
    background: #fff0ef;
    color: #8f1d14;
}

.message-action-divider {
    height: 1px;
    margin: 5px 4px;
    background: #e7ebf0;
}

.message-info-modal {
    width: min(460px, calc(100vw - 24px));
}

.message-info-content {
    display: grid;
    gap: 0;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    overflow: hidden;
}

.message-info-row {
    display: grid;
    grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.6fr);
    gap: 12px;
    padding: 9px 11px;
    border-bottom: 1px solid #edf0f3;
}

.message-info-row:last-child {
    border-bottom: 0;
}

.message-info-label {
    color: #6b778c;
    font-size: 12px;
}

.message-info-value {
    color: #22324a;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.message-info-text {
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    background: #f8fafc;
    color: #1f2d3d;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.message-delete-note {
    margin: 10px 0 0;
    color: #7a8595;
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .message {
        max-width: 88%;
    }

    .message-actions-trigger {
        opacity: 0.68;
        width: 30px;
        height: 30px;
        top: 2px;
        right: 3px;
    }

    .message .bubble {
        padding-right: 38px;
    }

    .message-actions-menu {
        left: 10px !important;
        right: 10px;
        top: auto !important;
        bottom: 10px;
        width: auto;
        min-width: 0;
        padding: 8px;
        border-radius: 15px;
        transform: translateY(12px);
        transform-origin: bottom center;
    }

    .message-actions-menu.open {
        transform: translateY(0);
    }

    .message-action-item {
        min-height: 44px;
        font-size: 14px;
    }

    .message-info-row {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}


/* ============================================================
   MESSAGE REPLY UI — Stage 2
   ============================================================ */
.reply-composer[hidden] {
    display: none !important;
}

.reply-composer {
    display: grid;
    grid-template-columns: 4px minmax(0, 1fr) 34px;
    align-items: stretch;
    gap: 10px;
    margin: 0 0 8px;
    padding: 9px 9px 9px 0;
    border: 1px solid #d9e3ef;
    border-radius: 11px;
    background: #f7faff;
}

.reply-composer-accent {
    border-radius: 0 3px 3px 0;
    background: #1a73e8;
}

.reply-composer-content {
    min-width: 0;
}

.reply-composer-sender {
    color: #1557b0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.reply-composer-text {
    margin-top: 2px;
    color: #4f5f73;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reply-composer-close {
    align-self: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #7a8798;
    cursor: pointer;
}

.reply-composer-close:hover,
.reply-composer-close:focus-visible {
    background: #e7eef8;
    color: #22324a;
}

.message-reply-quote {
    width: 100%;
    display: block;
    margin: 1px 0 7px;
    padding: 6px 8px;
    border: 0;
    border-left: 3px solid #1a73e8;
    border-radius: 6px;
    background: rgba(26, 115, 232, 0.08);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.message.me .message-reply-quote {
    border-left-color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.13);
}

.message-reply-label,
.message-reply-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-reply-label {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.92;
}

.message-reply-text {
    margin-top: 2px;
    font-size: 11px;
    opacity: 0.78;
}

.message-reply-highlight .bubble {
    animation: messageReplyHighlight 1.6s ease;
}

@keyframes messageReplyHighlight {
    0%, 100% { box-shadow: none; }
    25%, 70% { box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.24); }
}

@media (max-width: 720px) {
    .reply-composer {
        margin-bottom: 7px;
    }
}


/* ===== SPLIT CHANNELS / DIRECT MESSAGES LIST ===== */
.split-chat-list-container {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    overflow: hidden !important;
    padding: 4px 8px 8px;
    min-height: 0;
}
.chat-list-section {
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.channels-section {
    flex: 0 0 auto;
    max-height: 245px;
}
.dm-section {
    min-height: 0;
    border-top: 1px solid var(--border-color, #d8e0ea);
    padding-top: 6px;
}
.chat-section-heading {
    flex: 0 0 auto;
    padding: 4px 8px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #667085);
}
.channels-list {
    flex: 0 1 auto;
    max-height: 205px;
    overflow-y: auto;
    padding-right: 2px;
}
.dm-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}
.demo-channel {
    opacity: .72;
    cursor: default;
    border-style: dashed;
}
.demo-channel:hover {
    transform: none;
}
.chat-icon.channel.demo {
    filter: grayscale(.15);
}
@media (max-width: 900px) {
    .channels-section { max-height: 210px; }
    .channels-list { max-height: 170px; }
}

/* ===== SPLIT CHAT LIST: FIXED CHANNELS + INDEPENDENT DM SCROLL ===== */
.chat-panels > .split-chat-list-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden !important;
}

.chat-panels > .split-chat-list-container > .channels-section {
    flex: 0 0 auto;
    min-height: 0;
    overflow: hidden;
}

.chat-panels > .split-chat-list-container > .dm-section {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.chat-panels > .split-chat-list-container .channels-list {
    flex: 0 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chat-panels > .split-chat-list-container .dm-list {
    flex: 1 1 0;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ===== SPLIT CHAT LIST: CHANNELS FIXED, DM LIST SCROLLS ===== */
.chat-panels > .split-chat-list-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 40%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
}

.chat-panels > .split-chat-list-container > .channels-section {
    flex: 0 0 auto !important;
    min-height: auto !important;
    max-height: 245px;
    overflow: hidden !important;
}

.chat-panels > .split-chat-list-container > .dm-section {
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 0;
    overflow: hidden !important;
}

.chat-panels > .split-chat-list-container .channels-list {
    flex: none !important;
    max-height: 205px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.chat-panels > .split-chat-list-container .dm-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
}

.chat-panels > .split-chat-list-container .dm-list > .chat-item,
.chat-panels > .split-chat-list-container .channels-list > .chat-item {
    flex: 0 0 auto;
}


/* ============================================================
   EMBEDDED MAP WORKSPACE (Leaflet)
   ============================================================ */
.map-view {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
}
.map-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.map-fit-btn {
    border: 1px solid var(--mc-border, #314a62);
    background: var(--mc-surface-2, #17293a);
    color: var(--mc-text, #eaf3fb);
    border-radius: 8px;
    padding: 7px 11px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}
.map-fit-btn:hover { border-color:#55a9f5; background:#20384e; }
.map-toolbar {
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 14px;
    border-bottom:1px solid var(--mc-border, #314a62);
    background:var(--mc-surface, #142434);
    color:var(--mc-muted, #9db0c1);
    font-size:12px;
}
.map-legend { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.map-toolbar-right {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin-left:auto;
}
.map-node-count {
    white-space:nowrap;
}
.map-legend span { display:inline-flex; align-items:center; gap:6px; }
.map-legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; box-shadow:0 0 0 2px rgba(255,255,255,.12); }
.map-legend-reference { background:#38d68a; }
.map-legend-node { background:#4aa3ff; }
.map-legend-selected { background:#df5d68; }
.mesh-map { flex:1 1 auto; min-height:280px; width:100%; background:#0e1b28; }
.mesh-map .leaflet-control-zoom a { background:#172a3d; color:#eaf3fb; border-color:#304a63; }
.mesh-map .leaflet-control-zoom a:hover { background:#203a52; }
.mesh-map .leaflet-control-attribution { background:rgba(10,21,32,.78); color:#a9bac9; }
.mesh-map .leaflet-control-attribution a { color:#72b8ff; }
[data-theme="dark"] .mesh-map .leaflet-tile-pane { filter: brightness(.72) saturate(.72) contrast(1.12); }
.meshcenter-map-marker { background:transparent; border:0; }
.meshcenter-map-marker-dot {
    width:18px; height:18px; border-radius:50%;
    border:3px solid #eaf4ff;
    background:#4aa3ff;
    box-shadow:0 3px 12px rgba(0,0,0,.42), 0 0 0 5px rgba(74,163,255,.18);
}
.meshcenter-map-marker.selected .meshcenter-map-marker-dot { background:#df5d68; box-shadow:0 3px 12px rgba(0,0,0,.42),0 0 0 7px rgba(223,93,104,.20); transform:scale(1.12); }
.meshcenter-map-marker.reference .meshcenter-map-marker-dot { background:#38d68a; box-shadow:0 3px 12px rgba(0,0,0,.42),0 0 0 6px rgba(56,214,138,.22); }
.meshcenter-map-popup .leaflet-popup-content-wrapper,
.meshcenter-map-popup .leaflet-popup-tip { background:#17293a; color:#eef6fc; }
.meshcenter-map-popup .leaflet-popup-content-wrapper { border:1px solid #36516b; border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.38); }
.meshcenter-map-popup .leaflet-popup-content { margin:13px 15px; min-width:190px; }
.map-popup-name { font-weight:800; font-size:14px; margin-bottom:8px; color:#fff; }
.map-popup-grid { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:12px; }
.map-popup-grid span:nth-child(odd) { color:#91a8bc; }
.map-popup-grid strong { text-align:right; font-weight:700; }
.map-popup-details-btn { width:100%; margin-top:10px; border:1px solid #3a5973; background:#203b53; color:white; border-radius:7px; padding:7px 9px; cursor:pointer; font-weight:700; }
.map-popup-details-btn:hover { background:#285071; }
[data-theme="light"] .map-toolbar { background:#f4f8fc; color:#5c7082; }
[data-theme="light"] .map-fit-btn { background:#fff; color:#27435c; border-color:#c4d3df; }
[data-theme="light"] .meshcenter-map-popup .leaflet-popup-content-wrapper,
[data-theme="light"] .meshcenter-map-popup .leaflet-popup-tip { background:#fff; color:#183048; }
[data-theme="light"] .map-popup-name { color:#183048; }
@media (max-width: 720px) {
    .map-toolbar { align-items:flex-start; flex-direction:column; }
    .map-toolbar-right {
        width:100%;
        justify-content:space-between;
        margin-left:0;
    }
}


/* Map workspace sizing hardening */
.center-content,
.content-area,
.main-content,
.workspace-content {
    min-height: 0;
}
.map-view {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
.map-panel {
    flex: 1 1 auto;
    min-height: 0;
}
.mesh-map {
    flex: 1 1 auto;
    min-height: 420px;
    width: 100%;
    position: relative;
    z-index: 0;
}


/* ============================================================
   MAP WORKSPACE REFINEMENT
   Unified spacing/header, stable viewport and compact markers.
   ============================================================ */
.map-view {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: var(--mc-page-pad, 14px);
    overflow: hidden;
    box-sizing: border-box;
    background: var(--mc-bg-workspace, #101b27);
}

.map-panel.mc-workspace-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

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

.map-header.mc-workspace-header > div:first-child {
    min-width: 0;
}

.map-header.mc-workspace-header > .workspace-page-close-btn {
    margin-left: auto;
}

.map-title,
.map-subtitle {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.map-toolbar {
    min-height: 46px;
    box-sizing: border-box;
}

.mesh-map {
    flex: 1 1 auto;
    min-height: 0;
}

/* Compact markers without halo/glow rings. */
.meshcenter-map-marker-dot {
    width: 12px;
    height: 12px;
    border: 2px solid #eaf4ff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.meshcenter-map-marker.reference .meshcenter-map-marker-dot {
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

.meshcenter-map-marker.selected .meshcenter-map-marker-dot {
    background: #df5d68;
    transform: scale(1.12);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}

@media (max-width: 720px) {
    .map-view {
        padding: 8px;
    }
}

/* ============================================================
   MAP WORKSPACE EDGE ALIGNMENT
   Match the narrow gutters used by the side-column cards.
   ============================================================ */
.map-view {
    padding: 6px;
}

@media (max-width: 720px) {
    .map-view {
        padding: 4px;
    }
}


/* ============================================================
   MAP SELECTION UX — stable viewport, larger markers, selected label
   ============================================================ */
.meshcenter-map-marker-dot {
    width: 15px;
    height: 15px;
    border-width: 2px;
}

.meshcenter-map-marker.selected .meshcenter-map-marker-dot {
    transform: scale(1.12);
}

.meshcenter-map-selected-label.leaflet-tooltip {
    margin: 0;
    padding: 5px 9px;
    border: 1px solid #d9606b;
    border-radius: 7px;
    background: #fff4f5;
    color: #7e2530;
    box-shadow: 0 3px 10px rgba(57, 24, 29, .18);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    pointer-events: none;
}

.meshcenter-map-selected-label.leaflet-tooltip-bottom::before {
    border-bottom-color: #d9606b;
}

[data-theme="dark"] .meshcenter-map-selected-label.leaflet-tooltip {
    border-color: #df6b76;
    background: #3d242b;
    color: #ffe8eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .30);
}

[data-theme="dark"] .meshcenter-map-selected-label.leaflet-tooltip-bottom::before {
    border-bottom-color: #df6b76;
}

/* Demo preview banner */
#demoPreviewBar {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 14px;
    background: #073744;
    color: #c9e6eb;
    border-bottom: 1px solid #14515c;
    font: 600 11px/1 system-ui, sans-serif;
    box-sizing: border-box;
    position: relative;
    z-index: 99999;
}

#demoPreviewBar strong {
    color: #55e0a8;
}

#demoPreviewBar span {
    font-weight: 500;
}

#demoPreviewBar a {
    color: #e8f6fa;
    text-decoration: underline;
    margin-left: 10px;
}

.demo-preview-mode {
    height: 100vh;
    overflow: hidden;
}

.demo-preview-mode > .app-container,
.demo-preview-mode > .app-shell {
    height: calc(100vh - 26px) !important;
}

@media (max-width: 700px) {
    #demoPreviewBar {
        gap: 8px;
        padding: 0 8px;
        font-size: 10px;
        white-space: nowrap;
    }

    #demoPreviewBar a {
        margin-left: 2px;
    }
}


/* Leaflet attribution styling */
.leaflet-control-attribution{
 background:rgba(255,255,255,.88)!important;
 color:#444!important;
 font-size:11px;
 line-height:1.3;
 padding:2px 8px;
 border-top-left-radius:6px;
 box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.leaflet-control-attribution a{
 color:#2b6cb0!important;
 text-decoration:none;
}
.leaflet-control-attribution a:hover{text-decoration:underline;}


/* ============================================================
   DEMO MAP BOTTOM EDGE FIX
   The map view is a flex child below the workspace tabs. Using
   height:100% made it extend under the fixed status dock, which
   hid the Leaflet/OpenStreetMap attribution.
   ============================================================ */
.chat-area > .map-view {
    height: auto !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
}

.mesh-map .leaflet-bottom {
    bottom: 0;
}

.mesh-map .leaflet-control-attribution {
    max-width: calc(100% - 12px);
    margin: 0 6px 6px 0 !important;
    white-space: nowrap;
    position: relative;
    z-index: 20;
}


/* ===== Preview banner polish ===== */
#demoPreviewBar{
  display:grid!important;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  height:24px;
  padding:0 10px;
  font-size:10.5px;
}
#demoPreviewBar strong{justify-self:center;color:#56e3aa;}
#demoPreviewBar span{justify-self:center;opacity:.95;}
#demoPreviewBar a{justify-self:end;margin-left:0;color:#dff7ff;text-decoration:underline;}

/* Ensure Leaflet attribution is fully visible above status bar */
.mesh-map .leaflet-control-container{padding-bottom:24px;}
.mesh-map .leaflet-control-attribution{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  margin:0 8px 8px 0!important;
  z-index:1000!important;
}

/* ============================================================
   FULL-WIDTH MAP WORKSPACE
   Map is a primary center workspace, not part of the chat split.
   ============================================================ */
.chat-area:has(> .map-view[style*="display: flex"]) > .chat-panels {
    display: none !important;
}

.chat-area > .map-view {
    width: 100% !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    align-self: stretch !important;
}

.chat-area > .map-view > .map-panel {
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
}

/* ============================================================
   MAP WORKSPACE — FULL CENTER HEIGHT (robust demo fix)
   The demo stylesheet contains legacy repeated chat-panel rules.
   An explicit state class prevents those rules from keeping the
   chat split visible above the map.
   ============================================================ */
.chat-area.map-workspace-active > .chat-header,
.chat-area.map-workspace-active > .chat-panels {
    display: none !important;
}

.chat-area.map-workspace-active > .map-view {
    display: flex !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.chat-area.map-workspace-active > .map-view > .map-panel {
    display: flex !important;
    flex: 1 1 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

.chat-area.map-workspace-active .mesh-map {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
}


/* ============================================================
   MAP LAYOUT CONTROLS + SPLIT WORKSPACE
   ============================================================ */
.dock-map-wrap { position: relative; flex: 0 0 auto; }
.dock-map-btn.map-active { color: var(--mc-primary, #1f6fdb); background: rgba(31,111,219,.12); }
.map-layout-popover {
    position: absolute; left: 0; bottom: 34px; width: 250px; z-index: 1000;
    border: 1px solid var(--mc-border, #d8e0e8); border-radius: 12px;
    background: var(--mc-surface, #fff); color: var(--mc-text, #17283a);
    box-shadow: 0 12px 32px rgba(0,0,0,.22); overflow: hidden;
}
.map-layout-popover[hidden] { display:none !important; }
.map-layout-options, .map-split-position { padding: 8px; }
.map-split-position { border-top: 1px solid var(--mc-border, #d8e0e8); }
.map-split-position.disabled { opacity:.48; pointer-events:none; }
.map-layout-option { display:flex; align-items:center; gap:8px; padding:8px 9px; border-radius:8px; cursor:pointer; }
.map-layout-option:hover { background: var(--mc-surface-alt, #eef4fa); }
.map-layout-option input { margin:0; }
[data-theme="dark"] .map-layout-popover { background:#142434; border-color:#314a62; color:#eef6fc; }
[data-theme="dark"] .map-layout-option:hover { background:#20384e; }

.chat-area.map-layout-split > .map-view {
    display:flex !important; flex: 0 0 50%; height:auto; min-height:240px; max-height:60%;
    border-top: 1px solid var(--mc-border, #314a62); border-bottom: 1px solid var(--mc-border, #314a62);
}
.chat-area.map-layout-split.map-on-top > .map-view { order:1; }
.chat-area.map-layout-split.map-on-top > .chat-header,
.chat-area.map-layout-split.map-on-top > .chat-panels,
.chat-area.map-layout-split.map-on-top > .video-view,
.chat-area.map-layout-split.map-on-top > .media-view,
.chat-area.map-layout-split.map-on-top > .devices-view { order:2; }
.chat-area.map-layout-split.map-on-bottom > .map-view { order:20; }
.chat-area.map-layout-split > .main-content-tabs { order:0; }
.chat-area.map-layout-split > .chat-panels,
.chat-area.map-layout-split > .video-view,
.chat-area.map-layout-split > .media-view,
.chat-area.map-layout-split > .devices-view { min-height:0; flex:1 1 50%; }
.chat-area.map-layout-split > .chat-header { flex:0 0 auto; }
.chat-area.map-layout-split .map-view { padding:6px; }
.chat-area.map-layout-split .map-header.mc-workspace-header { min-height:54px; height:54px; flex-basis:54px; padding:8px 12px; }
.chat-area.map-layout-split .map-toolbar { min-height:38px; padding:5px 10px; }
.chat-area.map-layout-split .mesh-map { min-height:150px; }

.chat-area.map-layout-full > .map-view { display:flex !important; flex:1 1 auto; order:1; }
.chat-area.map-layout-full > .main-content-tabs { order:0; }

.node-detail-header { position:relative; padding-right:22px; }
.node-detail-close {
    position:absolute; right:0; top:-4px; width:22px; height:22px; padding:0; border:0;
    background:transparent; color:var(--mc-muted,#708399); font-size:20px; line-height:1;
    cursor:pointer; opacity:.78;
}
.node-detail-close:hover { opacity:1; color:var(--mc-danger,#d94b57); }
#nodeDetails { margin-top:8px; }

.map-popup-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px; }
.map-popup-actions button { border:1px solid #3a5973; background:#203b53; color:white; border-radius:7px; padding:7px 8px; cursor:pointer; font-weight:700; font-size:11px; }
.map-popup-actions button:hover { background:#285071; }
.map-popup-primary-btn { grid-column:1 / -1; }
[data-theme="light"] .map-popup-actions button { background:#f5f9fd; color:#24425e; border-color:#bfd0df; }
[data-theme="light"] .map-popup-actions button:hover { background:#e8f2fb; }

@media (max-height:700px) {
    .chat-area.map-layout-split > .map-view { flex-basis:45%; min-height:190px; }
}

/* Map layout restoration fix: chat content is one workspace block. */
.chat-area.map-layout-split > .chat-panels {
    display: flex;
}
.chat-area.map-layout-split.map-on-top > .chat-header { order: 2; }
.chat-area.map-layout-split.map-on-top > .chat-panels { order: 3; }
.chat-area.map-layout-split.map-on-bottom > .chat-header { order: 1; }
.chat-area.map-layout-split.map-on-bottom > .chat-panels { order: 2; }
.chat-area.map-layout-split.map-on-bottom > .map-view { order: 20; }


/* Demo integration guard: the new MapLayout state owns map sizing. */
.chat-area.map-layout-full.map-workspace-active > .map-view,
.chat-area.map-layout-full > .map-view {
    min-height: 0 !important;
    max-height: none !important;
}


/* ============================================================
   DEMO SPLIT MAP — FINAL LAYOUT FIX
   Keep the map and the active workspace at a true 50/50 split.
   Chats need both the chat header and the full chat-panels block
   in the lower/upper half; legacy full-map rules must not hide it.
   ============================================================ */
.chat-area.map-layout-split {
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Visibility of Chats is controlled by restoreOperationalView() according to
   the active main tab. Do not force these blocks visible in every split view. */
.chat-area.map-layout-split > .chat-header {
    flex: 0 0 auto !important;
    min-height: 0 !important;
}

.chat-area.map-layout-split > .chat-panels {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.chat-area.map-layout-split > .chat-panels > .split-chat-list-container {
    display: flex !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.chat-area.map-layout-split > .chat-panels > .messages-view {
    display: flex !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Exactly half of the usable center workspace belongs to the map. */
.chat-area.map-layout-split > .map-view {
    display: flex !important;
    flex: 0 0 50% !important;
    height: 50% !important;
    min-height: 0 !important;
    max-height: 50% !important;
    padding: 4px 6px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.chat-area.map-layout-split > .map-view > .map-panel {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: 100% !important;
}

.chat-area.map-layout-split .mesh-map {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

/* Preserve correct stacking for both split positions. */
.chat-area.map-layout-split.map-on-top > .map-view { order: 1 !important; }
.chat-area.map-layout-split.map-on-top > .chat-header { order: 2 !important; }
.chat-area.map-layout-split.map-on-top > .chat-panels,
.chat-area.map-layout-split.map-on-top > .video-view,
.chat-area.map-layout-split.map-on-top > .media-view,
.chat-area.map-layout-split.map-on-top > .devices-view { order: 3 !important; }

.chat-area.map-layout-split.map-on-bottom > .chat-header { order: 1 !important; }
.chat-area.map-layout-split.map-on-bottom > .chat-panels,
.chat-area.map-layout-split.map-on-bottom > .video-view,
.chat-area.map-layout-split.map-on-bottom > .media-view,
.chat-area.map-layout-split.map-on-bottom > .devices-view { order: 2 !important; }
.chat-area.map-layout-split.map-on-bottom > .map-view { order: 20 !important; }

/* Non-chat operational views occupy the other half. */
.chat-area.map-layout-split > .video-view,
.chat-area.map-layout-split > .media-view,
.chat-area.map-layout-split > .devices-view {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: auto !important;
}


/* Smooth map/workspace transitions */
.chat-area > .map-view,
.chat-area > .chat-header,
.chat-area > .chat-panels,
.chat-area > .video-view,
.chat-area > .media-view,
.chat-area > .devices-view {
    transition: opacity 180ms ease, transform 180ms ease;
}

.chat-area > .map-view {
    transform-origin: center top;
}

.chat-area.map-layout-split > .map-view,
.chat-area.map-layout-full > .map-view {
    animation: meshcenter-map-enter 180ms ease both;
}

@keyframes meshcenter-map-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-area > .map-view,
    .chat-area > .chat-header,
    .chat-area > .chat-panels,
    .chat-area > .video-view,
    .chat-area > .media-view,
    .chat-area > .devices-view {
        transition: none !important;
        animation: none !important;
    }
}