/*
 * Nevai Diagram - Design System
 * Nevai Suit | Nevai-Org | https://nevai.vercel.app
 * Copyright (c) 2026 Nevai. All rights reserved.
 *
 * Modern minimal light/dark themes, refined chrome, mobile overlay-drawer
 * sidebars, and silent (animation-free) state changes throughout.
 */

/* ------------------------------------------------------------------
   Design tokens - Light (default)
------------------------------------------------------------------ */
:root {
    --nv-bg: #F7F7F5;
    --nv-surface: #FFFFFF;
    --nv-surface-2: #FBFBFA;
    --nv-border: #E9E9E7;
    --nv-border-strong: #DEDEDC;
    --nv-text: #37352F;
    --nv-text-muted: #787774;
    --nv-text-faint: #9B9A97;
    --nv-accent: #2383E2;
    --nv-accent-hover: #1B74CC;
    --nv-accent-contrast: #FFFFFF;
    --nv-danger: #EB5757;
    --nv-ok: #2E9E5B;
    --nv-hover: rgba(55, 53, 47, 0.05);
    --nv-active: rgba(55, 53, 47, 0.09);
    --nv-selected: rgba(35, 131, 226, 0.14);
    --nv-focus-ring: rgba(35, 131, 226, 0.38);
    --nv-shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.04), 0 1px 1px rgba(15, 15, 15, 0.03);
    --nv-shadow-md: 0 4px 16px rgba(15, 15, 15, 0.08), 0 1px 4px rgba(15, 15, 15, 0.05);
    --nv-shadow-lg: 0 18px 48px rgba(15, 15, 15, 0.16), 0 4px 14px rgba(15, 15, 15, 0.07);
    --nv-radius-sm: 6px;
    --nv-radius-md: 9px;
    --nv-radius-lg: 13px;
}

/* ------------------------------------------------------------------
   Design tokens - Dark
   Applied by .geDarkMode on the editor container, .nv-dark on
   body-level overlays, and prefers-color-scheme as a fallback base.
------------------------------------------------------------------ */
.geDarkMode,
body.geDark,
.nv-dark {
    --nv-bg: #191919;
    --nv-surface: #202020;
    --nv-surface-2: #252525;
    --nv-border: #333330;
    --nv-border-strong: #40403C;
    --nv-text: #FFFFFF;
    --nv-text-muted: #C6C6C4;
    --nv-text-faint: #9E9E9B;
    --nv-accent: #4FA3E8;
    --nv-accent-hover: #63B0EE;
    --nv-accent-contrast: #10171E;
    --nv-danger: #FF7369;
    --nv-ok: #4CB782;
    --nv-hover: rgba(255, 255, 255, 0.055);
    --nv-active: rgba(255, 255, 255, 0.09);
    --nv-selected: rgba(79, 163, 232, 0.24);
    --nv-focus-ring: rgba(79, 163, 232, 0.45);
    --nv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --nv-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.42);
    --nv-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.58), 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* White text in dark mode across all editor chrome. These variables are
   consumed through light-dark() by the base stylesheet, so overriding them
   here affects dark rendering only. */
:root {
    --dark-text-color: #FFFFFF;
    --dark-strong-text-color: #FFFFFF;
    --dark-secondary-text-color: #C9C9C7;
    --dark-faint-text-color: #A2A2A0;
    --dark-inverse-active-color: #F2F2F0;
}

html body.geDarkMode .mxCellEditor {
    color: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
    html:not(.geEditor) {
        background-color: #191919;
    }
}

/* ------------------------------------------------------------------
   Base
------------------------------------------------------------------ */
html, body {
    height: 100%;
    overscroll-behavior: none;
}

body.geEditor {
    background-color: var(--nv-bg);
    color: var(--nv-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--nv-selected);
}

:focus {
    outline: none;
}

.geEditor :focus-visible,
.nv-overlay :focus-visible {
    box-shadow: 0 0 0 2px var(--nv-focus-ring);
    outline: none;
}

/* Silent interactions everywhere: only colors fade, nothing moves,
   nothing bounces, nothing spins. */
.geEditor *,
.nv-overlay * {
    transition-property: background-color, border-color, color, opacity, fill, stroke !important;
    transition-duration: 0.1s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
}

img[src*="spin.gif"],
img[src*="ajax-loader"],
.mxSpinner {
    display: none !important;
}

/* Instant splash removal - no fade-out on startup or reload */
#geInfo {
    transition: none !important;
    animation: none !important;
}

/* Thin unobtrusive scrollbars everywhere */
.geEditor ::-webkit-scrollbar,
.nv-overlay ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.geEditor ::-webkit-scrollbar-thumb,
.nv-overlay ::-webkit-scrollbar-thumb {
    background: var(--nv-border-strong);
    border-radius: 8px;
}

.geEditor ::-webkit-scrollbar-track,
.nv-overlay ::-webkit-scrollbar-track {
    background: transparent;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--nv-border-strong) transparent;
}

/* ------------------------------------------------------------------
   Chrome surfaces: menubar, toolbar, panels
------------------------------------------------------------------ */
.geMenubarContainer,
.geToolbarContainer,
.geSidebarContainer,
.geFormatContainer,
.geFooterContainer,
.geTabContainer {
    border-color: var(--nv-border) !important;
    background-color: var(--nv-surface) !important;
}

.geMenubarContainer {
    box-shadow: var(--nv-shadow-sm) !important;
}

.geToolbarContainer {
    box-shadow: none !important;
}

.geSidebarContainer,
.geFormatContainer {
    box-shadow: none !important;
}

.geHsplit,
.geVsplit {
    background-color: var(--nv-border) !important;
}

.geHsplit:hover,
.geVsplit:hover {
    background-color: var(--nv-accent) !important;
}

.geStatus {
    color: var(--nv-text-muted) !important;
    font-size: 12px;
}

.geStatusItem:hover {
    background-color: var(--nv-hover) !important;
    border-radius: var(--nv-radius-sm);
}

.geDiagramContainer {
    background-color: var(--nv-bg) !important;
}

/* Menus */
.geMenubarMenu > a,
.mxPopupMenu {
    border-radius: var(--nv-radius-md) !important;
    overflow: hidden;
    border: 1px solid var(--nv-border) !important;
    box-shadow: var(--nv-shadow-lg) !important;
    background-color: var(--nv-surface) !important;
}

.mxPopupMenu table {
    background-color: transparent !important;
}

.geMenubar .geItem,
.mxPopupMenu .mxMenuItem {
    border-radius: var(--nv-radius-sm);
}

.geMenubar .geItem:hover {
    background-color: var(--nv-hover);
}

.mxPopupMenuItem:hover {
    background-color: var(--nv-hover) !important;
}

.mxPopupMenuItemHover {
    background-color: var(--nv-hover) !important;
    color: var(--nv-text) !important;
}

/* Windows and dialogs */
div.mxWindow {
    border-radius: var(--nv-radius-lg) !important;
    border: 1px solid var(--nv-border) !important;
    box-shadow: var(--nv-shadow-lg) !important;
    overflow: hidden;
}

div.mxWindow .mxWindowTitle {
    background-color: var(--nv-surface-2) !important;
    color: var(--nv-text) !important;
    border-bottom: 1px solid var(--nv-border) !important;
}

.geDialog,
.geDialogFooter {
    border-radius: var(--nv-radius-lg) !important;
}

.geDialog {
    max-width: min(94vw, 720px) !important;
    box-shadow: var(--nv-shadow-lg) !important;
}

.geDialogClose {
    border-radius: var(--nv-radius-sm);
}

/* Buttons */
button.geBtn,
a.geBtn,
button.geShareBtn,
.geBtnBtn {
    border-radius: var(--nv-radius-sm) !important;
    font-weight: 500;
}

button.gePrimaryBtn,
button.geBtn[type="button"].gePrimaryBtn {
    font-weight: 600;
}

/* Sidebar shape palettes */
.geSidebarContainer {
    overscroll-behavior: contain;
}

.geSidebar {
    contain: layout paint;
}

.geSidebar .geItem {
    border-radius: var(--nv-radius-sm);
    background-color: transparent;
}

.geSidebar .geItem:hover {
    background-color: var(--nv-hover);
}

.geSidebar h2,
.geTitle,
.geSidebarTitle {
    color: var(--nv-text) !important;
    font-weight: 600;
}

.geSearchBar input,
.geSidebarContainer input[type="text"] {
    border-radius: var(--nv-radius-sm) !important;
    border-color: var(--nv-border) !important;
}

/* Format panel */
.geFormatSection {
    border-color: var(--nv-border);
}

/* Diagram page in dark mode gets depth */
.geDarkMode .geBackgroundPage,
body.geDark .geBackgroundPage {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.55) !important;
}

.geDarkMode .geToolbarContainer,
.geDarkMode .geMenubarContainer,
body.geDark .geToolbarContainer,
body.geDark .geMenubarContainer {
    box-shadow: none !important;
}

.geDarkMode div.mxWindow,
body.geDark div.mxWindow {
    background-color: var(--nv-surface) !important;
}

/* ------------------------------------------------------------------
   Nevai Cloud status pill (in the status bar)
------------------------------------------------------------------ */
.nv-cloud-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    margin-left: 10px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 18px;
    color: var(--nv-text-muted);
    background: var(--nv-hover);
    border: 1px solid var(--nv-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.nv-cloud-status:hover {
    color: var(--nv-text);
    background: var(--nv-active);
}

/* ------------------------------------------------------------------
   Mobile: overlay drawers for shapes and format panels
------------------------------------------------------------------ */
.nv-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    margin-right: 4px;
    border: 1px solid transparent;
    border-radius: var(--nv-radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.nv-mobile-toggle-icon {
    font-size: 17px;
    line-height: 1;
}

.nv-mobile-toggle:hover {
    background: var(--nv-hover);
}

.nv-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(15, 15, 15, 0.42);
    opacity: 0;
    pointer-events: none;
}

.nv-backdrop.nv-visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 900px), (pointer: coarse) {

    /* Show the drawer toggles in the menubar */
    .nv-mobile-toggle {
        display: inline-flex;
    }

    /* Never allow horizontal page overflow */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Larger touch targets */
    .geToolbarContainer button,
    .geMenubarContainer > div,
    .geSidebar .geItem,
    .nv-mobile-toggle {
        min-height: 36px;
        min-width: 36px;
    }

    /* Menubar and toolbar become horizontally scrollable rails */
    .geMenubarContainer {
        max-width: 100vw !important;
        width: 100% !important;
    }

    .geMenubar {
        overflow-x: auto !important;
        max-width: 100% !important;
        scrollbar-width: none;
    }

    .geMenubar::-webkit-scrollbar {
        display: none;
    }

    .geToolbarContainer {
        overflow-x: auto !important;
        max-width: 100vw !important;
        scrollbar-width: none;
    }

    .geToolbarContainer::-webkit-scrollbar {
        display: none;
    }

    .geButtonContainer {
        max-width: 46vw !important;
        overflow-x: auto !important;
    }

    .geFullWidthElement {
        max-width: 40vw !important;
    }

    /* Shape sidebar becomes a left overlay drawer */
    .geSidebarContainer:not(.geFormatContainer) {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 9995 !important;
        width: min(82vw, 340px) !important;
        max-width: 82vw !important;
        box-shadow: var(--nv-shadow-lg) !important;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform 0.16s ease-out, visibility 0s linear 0.16s !important;
    }

    .geSidebarContainer:not(.geFormatContainer).nv-drawer-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.16s ease-out !important;
    }

    /* Format panel becomes a right overlay drawer */
    .geFormatContainer {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        z-index: 9995 !important;
        width: min(86vw, 360px) !important;
        max-width: 86vw !important;
        box-shadow: var(--nv-shadow-lg) !important;
        transform: translateX(105%);
        visibility: hidden;
        transition: transform 0.16s ease-out, visibility 0s linear 0.16s !important;
    }

    .geFormatContainer.nv-drawer-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.16s ease-out !important;
    }

    /* Drag handles are meaningless on touch layouts */
    .geHsplit {
        display: none !important;
    }

    /* Prevent double-tap zoom jank on editor chrome */
    .geToolbarContainer, .geMenubarContainer, .geDialog, .mxPopupMenu,
    .nv-mobile-toggle, .nv-dialog {
        touch-action: manipulation;
    }

    /* Dialogs fit small screens */
    .geDialog {
        left: 3vw !important;
        max-height: 84vh !important;
        overflow-y: auto !important;
    }
}

/* Safe areas for notched devices when installed as PWA */
@supports (padding: env(safe-area-inset-top)) {
    body.geEditor {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ------------------------------------------------------------------
   Nevai Cloud components (dialogs, toasts)
------------------------------------------------------------------ */.nv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 15, 15, 0.46);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.nv-dialog {
    background: var(--nv-surface);
    color: var(--nv-text);
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius-lg);
    box-shadow: var(--nv-shadow-lg);
    width: min(92vw, 520px);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nv-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--nv-border);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--nv-text);
    background: var(--nv-surface-2);
    flex-shrink: 0;
}

.nv-close {
    border: none;
    background: transparent;
    color: var(--nv-text-muted);
    font-size: 20px;
    line-height: 1;
    width: 30px;
    height: 30px;
    border-radius: var(--nv-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nv-close:hover {
    background: var(--nv-hover);
    color: var(--nv-text);
}

.nv-dialog-body {
    padding: 16px 18px 18px;
    overflow-y: auto;
    font-size: 13.5px;
    line-height: 1.5;
}

.nv-row {
    margin: 0 0 12px;
}

.nv-row > label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nv-text-muted);
    margin-bottom: 5px;
}

.nv-row.nv-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 16px;
}

.nv-row.nv-actions-left {
    justify-content: flex-start;
}

.nv-section {
    border-top: 1px solid var(--nv-border);
    padding-top: 12px;
    margin-top: 14px;
}

.nv-section-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--nv-text-faint);
    margin-bottom: 10px;
}

.nv-input,
.nv-select {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 11px;
    border: 1px solid var(--nv-border-strong);
    border-radius: var(--nv-radius-sm);
    background: var(--nv-surface);
    color: var(--nv-text);
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
}

.nv-input::placeholder {
    color: var(--nv-text-faint);
}

.nv-input:focus {
    border-color: var(--nv-accent);
    box-shadow: 0 0 0 2px var(--nv-focus-ring);
}

.nv-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23787774' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    padding-right: 30px;
}

.nv-btn {
    padding: 7px 14px;
    border-radius: var(--nv-radius-sm);
    border: 1px solid var(--nv-border-strong);
    background: var(--nv-surface);
    color: var(--nv-text);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.nv-btn:hover {
    background: var(--nv-hover);
}

.nv-btn.nv-primary {
    background: var(--nv-accent);
    border-color: var(--nv-accent);
    color: var(--nv-accent-contrast);
}

.nv-btn.nv-primary:hover {
    background: var(--nv-accent-hover);
    border-color: var(--nv-accent-hover);
}

.nv-btn.nv-danger {
    color: var(--nv-danger);
    border-color: var(--nv-danger);
}

.nv-btn.nv-small {
    padding: 4px 10px;
    font-size: 12px;
}

.nv-icon-btn {
    padding: 4px 9px;
    border-radius: var(--nv-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--nv-text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}

.nv-icon-btn:hover {
    background: var(--nv-hover);
    color: var(--nv-text);
}

.nv-icon-btn.nv-danger:hover {
    color: var(--nv-danger);
    background: rgba(235, 87, 87, 0.1);
}

.nv-msg {
    padding: 9px 12px;
    border-radius: var(--nv-radius-sm);
    background: var(--nv-hover);
    color: var(--nv-text-muted);
    margin-bottom: 12px;
    font-size: 13px;
}

.nv-msg.nv-error {
    background: rgba(235, 87, 87, 0.1);
    color: var(--nv-danger);
}

.nv-msg.nv-ok {
    background: rgba(46, 158, 91, 0.1);
    color: var(--nv-ok);
}

.nv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.nv-grid-item {
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius-md);
    padding: 9px 12px;
    background: var(--nv-surface-2);
    min-width: 0;
}

.nv-k {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--nv-text-faint);
}

.nv-v {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nv-text);
    word-break: break-all;
    margin-top: 3px;
}

.nv-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 400;
}

.nv-list {
    max-height: 44vh;
    min-height: 120px;
    overflow-y: auto;
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius-md);
    overscroll-behavior: contain;
}

.nv-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--nv-border);
    cursor: pointer;
}

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

.nv-item:hover {
    background: var(--nv-hover);
}

.nv-item-main {
    min-width: 0;
}

.nv-item-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--nv-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-item-sub {
    font-size: 11.5px;
    color: var(--nv-text-muted);
    margin-top: 2px;
}

.nv-item-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s !important;
}

.nv-item:hover .nv-item-actions,
.nv-item:focus-within .nv-item-actions {
    opacity: 1;
}

@media (hover: none) {
    .nv-item-actions {
        opacity: 1;
    }
}

.nv-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.nv-search-row .nv-input:first-child {
    flex: 1;
}

.nv-sort {
    width: auto;
    flex-shrink: 0;
}

/* Toggle switch */
.nv-switch-row {
    margin-bottom: 10px;
}

.nv-switch {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}

.nv-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.nv-switch-slider {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: var(--nv-border-strong);
    transition: background-color 0.12s !important;
}

.nv-switch-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 15, 15, 0.25);
}

.nv-switch input:checked + .nv-switch-slider {
    background: var(--nv-accent);
}

.nv-switch input:checked + .nv-switch-slider::before {
    transform: translateX(14px);
    transition: transform 0.12s ease-out;
}

.nv-switch input:focus-visible + .nv-switch-slider {
    box-shadow: 0 0 0 2px var(--nv-focus-ring);
}

.nv-switch-label {
    font-size: 13px;
    color: var(--nv-text);
}

/* Member chips */
.nv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nv-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--nv-hover);
    border: 1px solid var(--nv-border);
    color: var(--nv-text);
    font-size: 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Toast */
.nv-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #1F1F1E;
    color: #F5F5F3;
    padding: 9px 16px;
    border-radius: var(--nv-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: var(--nv-shadow-lg);
    z-index: 100000;
    max-width: min(86vw, 480px);
    text-align: center;
}

.nv-toast.nv-dark {
    background: #F1F1EF;
    color: #2C2C28;
    border-color: rgba(15, 15, 15, 0.1);
}

@media (max-width: 640px) {
    .nv-dialog {
        width: 95vw;
        max-height: 88vh;
    }

    .nv-grid {
        grid-template-columns: 1fr;
    }

    .nv-cloud-status {
        display: none;
    }

    .nv-toast {
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        font-size: 12px;
    }
}

/* ------------------------------------------------------------------
   Mobile bottom insert toolbar
------------------------------------------------------------------ */
.nv-bottombar {
    display: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 9985;
    max-width: 96vw;
    padding: 5px;
    gap: 2px;
    background: var(--nv-surface);
    border: 1px solid var(--nv-border);
    border-radius: 16px;
    box-shadow: var(--nv-shadow-lg);
    overflow-x: auto;
    scrollbar-width: none;
}

.nv-bottombar::-webkit-scrollbar {
    display: none;
}

.nv-bb-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 52px;
    min-height: 48px;
    padding: 4px 8px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--nv-text);
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
}

.nv-bb-btn:hover {
    background: var(--nv-hover);
}

.nv-bb-btn:active {
    background: var(--nv-active);
}

.nv-bb-ic {
    font-size: 17px;
    line-height: 20px;
    pointer-events: none;
}

.nv-bb-tl {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nv-text-muted);
    pointer-events: none;
    white-space: nowrap;
}

.nv-bb-sep {
    width: 1px;
    align-self: stretch;
    margin: 6px 4px;
    background: var(--nv-border);
    flex-shrink: 0;
}

@media (max-width: 900px), (pointer: coarse) {
    .nv-bottombar {
        display: flex;
    }
}

/* ------------------------------------------------------------------
   Command palette
------------------------------------------------------------------ */
.nv-palette-overlay {
    align-items: flex-start;
    padding-top: 12vh;
}

.nv-palette {
    width: min(92vw, 600px);
    max-height: 68vh;
    display: flex;
    flex-direction: column;
    background: var(--nv-surface);
    color: var(--nv-text);
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius-lg);
    box-shadow: var(--nv-shadow-lg);
    overflow: hidden;
}

.nv-palette-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--nv-border);
    background: var(--nv-surface-2);
    flex-shrink: 0;
}

.nv-palette-icon {
    color: var(--nv-text-faint);
    font-size: 16px;
}

.nv-palette-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--nv-text);
    font-size: 15.5px;
    font-family: inherit;
    padding: 4px 0;
}

.nv-palette-input::placeholder {
    color: var(--nv-text-faint);
}

.nv-palette-esc {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--nv-text-faint);
    border: 1px solid var(--nv-border-strong);
    border-radius: 5px;
    padding: 2px 6px;
    flex-shrink: 0;
}

.nv-palette-list {
    overflow-y: auto;
    padding: 6px;
    overscroll-behavior: contain;
}

.nv-palette-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--nv-radius-sm);
    cursor: pointer;
}

.nv-palette-item.nv-sel {
    background: var(--nv-selected);
}

.nv-palette-item:hover {
    background: var(--nv-hover);
}

.nv-palette-item.nv-sel:hover,
.nv-palette-item.nv-sel {
    background: var(--nv-selected);
}

.nv-palette-title {
    font-size: 13.5px;
    color: var(--nv-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nv-palette-item.nv-dis .nv-palette-title {
    color: var(--nv-text-faint);
    text-decoration: line-through;
}

.nv-palette-hint {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--nv-text-muted);
    border: 1px solid var(--nv-border);
    border-radius: 5px;
    padding: 2px 6px;
    flex-shrink: 0;
}

.nv-palette-empty {
    text-align: center;
    padding: 26px 12px;
    color: var(--nv-text-faint);
    font-size: 13px;
}

@media (max-width: 640px) {
    .nv-palette-overlay {
        padding-top: 8vh;
    }

    .nv-palette {
        max-height: 74vh;
    }
}

/* ------------------------------------------------------------------
   Signed-in devices list (account dialog)
------------------------------------------------------------------ */
.nv-device-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nv-device {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--nv-border);
    border-radius: var(--nv-radius-md);
    background: var(--nv-surface-2);
    min-width: 0;
}

.nv-device.nv-current {
    border-color: var(--nv-accent);
}

.nv-device-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--nv-text);
    word-break: break-word;
}

.nv-device-sub {
    font-size: 11px;
    color: var(--nv-text-muted);
}

/* ------------------------------------------------------------------
   Page tabs polish
------------------------------------------------------------------ */
.geTabContainer {
    background-color: var(--nv-surface) !important;
    border-color: var(--nv-border) !important;
}

.geTab,
.gePageTab {
    border-radius: var(--nv-radius-sm) var(--nv-radius-sm) 0 0 !important;
    color: var(--nv-text-muted) !important;
}

.geActivePage,
.gePageTab:hover {
    color: var(--nv-text) !important;
}

/* Primary buttons follow the accent in both themes */
button.gePrimaryBtn,
button.geBtn.gePrimaryBtn {
    background-color: var(--nv-accent, #2383E2) !important;
    border-color: var(--nv-accent, #2383E2) !important;
    color: var(--nv-accent-contrast, #FFFFFF) !important;
}

button.gePrimaryBtn:hover,
button.geBtn.gePrimaryBtn:hover {
    background-color: var(--nv-accent-hover, #1B74CC) !important;
    border-color: var(--nv-accent-hover, #1B74CC) !important;
}

/* Respect users who prefer zero motion at the OS level */
@media (prefers-reduced-motion: reduce) {
    .geEditor *,
    .nv-overlay *,
    .geSidebarContainer,
    .geFormatContainer {
        transition: none !important;
        animation: none !important;
    }
}

/* ------------------------------------------------------------------
   Branding: Nevai mark as the menubar app icon
------------------------------------------------------------------ */
.geAppIcon {
    background-color: transparent !important;
    background-size: 100% 100% !important;
}