/* ============================================================
   design-new.css — Linear-style dark reskin ("index-new" prototype)
   Loaded AFTER main.css. Overrides the app's existing CSS custom
   properties so every widget that already consumes var(--surface-0)
   etc. (task-edit-modal, search-overlay, graph-widget, create-menu,
   folder-editor, folder-tree, people-panel, notifications,
   context-modal, session-context, commands-modal, ...) reskins
   automatically without per-widget edits.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ---- raw DESIGN.md palette (kept available for new markup) ---- */
    --color-void: #08090a;
    --color-carbon: #0f1011;
    --color-obsidian: #161718;
    --color-graphite: #23252a;
    --color-smoke: #383b3f;
    --color-ash: #7d838c;   /* tertiary/muted text — lifted from #62666d for WCAG-AA contrast (~5:1) */
    --color-fog: #9297a1;   /* secondary text — lifted from #8a8f98 to keep a clear step above tertiary (~6:1) */
    --color-mist: #d0d6e0;
    --color-bone: #e5e5e6;
    --color-paper: #ffffff;
    --color-acid-lime: #e4f222;
    --color-pulse-green: #27a644;
    --color-coral-red: #eb5757;
    --color-signal-teal: #02b8cc;
    --color-iris-violet: #6366f1;
    --color-lavender: #8b5cf6;

    /* ---- remap of the app's EXISTING variable names ----
       This is what actually reskins every included widget. */
    --surface-0: var(--color-carbon);      /* content/card bg (was white) */
    --surface-1: var(--color-void);        /* page bg, sidebar (was #F9FAFB) */
    --surface-2: var(--color-obsidian);    /* hover / inputs */
    --surface-3: var(--color-graphite);    /* active states / dividers */

    --border-subtle: var(--color-graphite);
    --border-focus: var(--color-smoke);

    --text-main: var(--color-mist);        /* body/main text — Linear body copy tone */
    --text-secondary: var(--color-fog);
    --text-tertiary: var(--color-ash);
    --text-muted: var(--color-ash);

    /* Existing app uses ONE --brand-primary for many "emphasis" buttons/links/badges
       scattered across widgets we are not hand-restyling in this pass (task-edit,
       search-overlay, graph, people-panel, ...). DESIGN.md's acid-lime is reserved for
       the single "Начать запись" action per screen (see inbox-new.php's .btn-acid) —
       reusing it here would paint dozens of unrelated buttons lime and break the
       "one accent" rule it exists to enforce. Iris Violet is DESIGN.md's own secondary
       chromatic accent and keeps the existing color:#fff button-text pairings legible. */
    --brand-primary: var(--color-iris-violet);
    --brand-hover: #4f46e5;
    --brand-light: rgba(99, 102, 241, .16);
    --brand-light-border: rgba(99, 102, 241, .4);

    --status-success: var(--color-pulse-green);
    --status-warning: #d97706;
    --status-error: var(--color-coral-red);

    --entity-session: var(--color-pulse-green);
    --entity-task: var(--color-iris-violet);
    --entity-event: var(--color-lavender);
    --entity-kb: var(--color-signal-teal);

    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

    /* DESIGN.md radius vocabulary: cards 12 / buttons+inputs 6 / badges 4 / pills 9999.
       Compressed from the app's original 6/8/12/16/20 scale, capped at 12px per the
       "no radii 16px+ on cards/panels" rule. */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-xl: 12px;
    --radius-2xl: 12px;
    --radius-pill: 9999px;

    --shadow-sm: rgba(0, 0, 0, .4) 0 2px 4px 0;
    --shadow-md: rgba(0, 0, 0, .3) 0 0 12px 0 inset;
    --shadow-lg: rgba(8, 9, 10, .55) 0 8px 24px -4px;
    --shadow-xl: rgba(8, 9, 10, .6) 0 4px 32px 0;
    --shadow-focus: 0 0 0 3px rgba(99, 102, 241, .35);
    --shadow-focus-sm: 0 0 0 2px rgba(99, 102, 241, .35);

    /* Chrome layout — --nav-height is the app's existing var (default 60px in main.css,
       consumed e.g. by inbox.php's `calc(100vh - var(--nav-height,60px))`). There is no
       top bar left at all on desktop now (everything moved into the sidebar), so this is
       0 — #app-content/#inbox-root get the full viewport height back, no dead gap.
       On mobile the sidebar transforms into a horizontal top strip instead (see the
       max-width:768px block below), so --nav-height goes back to a real value there. */
    --nav-height: 0px;
    --sidebar-width: 232px;
    --sidebar-width-collapsed: 60px;
}

/* ============================================================
   Light theme — same DESIGN.md structure (radii/spacing/shadows/
   accent hues), just the neutral scale + a few accent shades
   inverted for a white/light-gray surface stack. Toggled via
   html[data-theme="light"] (see the toggle in navbar-new.php, next
   to the language switcher). Only the RAW palette (--color-*) is
   redeclared here — every semantic var (--surface-0, --text-main,
   ...) is defined elsewhere as var(--color-X), so it picks up these
   values automatically through the normal CSS custom-property
   cascade; no need to repeat --surface-0/--text-main/etc. here too.
   ============================================================ */
html[data-theme="light"] {
    --color-void: #f6f6f7;
    --color-carbon: #ffffff;
    --color-obsidian: #f0f0f2;
    --color-graphite: #e3e3e6;
    --color-smoke: #c9c9cf;
    --color-ash: #6c6c74;   /* tertiary/muted text — darkened from #8a8a92 for WCAG-AA contrast (~5:1 on white) */
    --color-fog: #55555f;   /* secondary text — nudged darker to stay a clear step above tertiary */
    --color-mist: #1a1a1f;
    --color-bone: #f1f1f3;
    --color-paper: #0a0a0c;
    --color-acid-lime: #8bc400;
    --color-pulse-green: #16a34a;
    --color-coral-red: #dc2626;
    --color-signal-teal: #0891b2;
    --color-iris-violet: #6366f1;
    --color-lavender: #7c3aed;

    --shadow-sm: rgba(0, 0, 0, .06) 0 1px 3px 0;
    --shadow-md: rgba(0, 0, 0, .08) 0 0 12px 0 inset;
    --shadow-lg: rgba(0, 0, 0, .12) 0 8px 24px -4px;
    --shadow-xl: rgba(0, 0, 0, .15) 0 4px 32px 0;

    color-scheme: light;
}

/* Acid-lime reads fine on dark surfaces but fails contrast (~1.7:1) as a small
   foreground icon on light ones — swap just this one spot to brand-primary
   (iris-violet, ~3.9:1) rather than adjusting the shared --color-acid-lime,
   which still needs to stay vivid lime for the dark-surface "Начать запись"
   button background it's actually designed for. */
html[data-theme="light"] #langDropdownMenu .dropdown-link i[data-lucide="check"] { color: var(--brand-primary); }

html { background: var(--color-void); color-scheme: dark; }

body {
    background-color: var(--surface-1);
    font-feature-settings: "cv01" on, "ss03" on, "zero" on;
    letter-spacing: -0.011em;
}

::selection { background: rgba(99, 102, 241, .35); color: var(--color-paper); }

/* Scrollbars — dark-friendly, matches the hairline/graphite system */
* { scrollbar-color: var(--color-graphite) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--color-graphite); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--color-smoke); background-clip: content-box; }

/* The MemRecorder engine (navbar.php, unchanged) sets these two states via
   pill.style.background/borderColor/color = '#hex' directly in JS. Inline styles
   beat a plain rule, so these need !important to keep the pill legible in dark —
   this does NOT touch the JS, only how its output paints. */
#desktop-rec-pill { background: var(--color-obsidian) !important; }
#desktop-rec-pill:not([style*="FFFBEB"]) { border-color: var(--color-graphite) !important; }
/* 'on'/'connecting' (red) */
#desktop-rec-pill[style*="FEF2F2"] { background: rgba(235, 87, 87, .12) !important; border-color: rgba(235, 87, 87, .4) !important; color: var(--color-coral-red) !important; }
/* 'paused' (amber) */
#desktop-rec-pill[style*="FFFBEB"] { background: rgba(217, 119, 6, .14) !important; border-color: rgba(217, 119, 6, .4) !important; color: #d97706 !important; }

/* ============================================================
   Shell: left sidebar (nav + search + recording status + account),
   no top bar at all — see sidebar-new-search/-rec/-account below for
   what used to hang in an orphaned strip above the content.
   ============================================================ */
.shell-new { display: flex; align-items: stretch; min-height: 100vh; background: var(--color-void); }

.sidebar-new {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-carbon);
    border-right: .5px solid var(--color-graphite);
    height: 100vh;
    position: sticky;
    top: 0;
    transition: width .18s ease;
    z-index: 210;
}
.sidebar-new.collapsed { width: var(--sidebar-width-collapsed); }

.sidebar-new-brand {
    display: flex; align-items: center; gap: 8px;
    height: 52px; flex-shrink: 0;
    padding: 0 14px;
    border-bottom: .5px solid var(--color-graphite);
    color: var(--color-paper);
    font-weight: 590; font-size: 15px; letter-spacing: -.011em;
    text-decoration: none !important; overflow: hidden; white-space: nowrap;
}
.sidebar-new-brand-mark {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--radius-md);
    background: var(--color-acid-lime); color: var(--color-void);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.sidebar-new.collapsed .sidebar-new-brand-label { display: none; }

/* Search — moved here from the old topbar (item 1). Same SearchOverlay/index as
   "Найти в базе" in the Смыслы panel; both stay (see navbar-new.php comment) since
   this one is reachable from every page and #ibx-find has slightly different
   fallback behavior that lives in inbox-new.php's untouched <script>. */
.sidebar-new-search-row { padding: 8px; border-bottom: .5px solid var(--color-graphite); flex-shrink: 0; }
.sidebar-new-search {
    width: 100%; display: flex; align-items: center; gap: 8px;
    background: var(--surface-2); border: .5px solid var(--color-graphite); border-radius: var(--radius-md);
    color: var(--text-tertiary); font-size: 12px; font-weight: 400; padding: 7px 8px; cursor: pointer;
}
.sidebar-new-search:hover { border-color: var(--color-smoke); color: var(--color-mist); }
.sidebar-new-search i, .sidebar-new-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.sidebar-new-search-label { flex: 1; text-align: left; }
.sidebar-new-search-kbd { font-family: var(--font-berkeley-mono, ui-monospace, monospace); font-size: 10px; color: var(--text-tertiary); flex-shrink: 0; }
.sidebar-new.collapsed .sidebar-new-search { justify-content: center; padding: 8px; }
.sidebar-new.collapsed .sidebar-new-search-label, .sidebar-new.collapsed .sidebar-new-search-kbd { display: none; }

/* Recording status/mic — moved here from the old topbar (item 3). This has to stay
   part of the persistent shell (not the Смыслы panel) because the Смыслы panel is
   inside #app-content and gets swapped out by the SPA router on every other page —
   the whole point of the Phase 5 "persistent bar" is that it survives navigating
   away from Inbox mid-recording. */
.sidebar-new-rec-row { padding: 8px; border-bottom: .5px solid var(--color-graphite); flex-shrink: 0; display: flex; }
.sidebar-new.collapsed .sidebar-new-rec-row { justify-content: center; }
#desktop-rec-btn { border-radius: var(--radius-md); }
#desktop-rec-btn:hover { background: var(--surface-2); }

.sidebar-new-nav { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }

.sidebar-new-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: var(--radius-md);
    color: var(--color-fog); font-size: 13px; font-weight: 400;
    text-decoration: none !important; white-space: nowrap; overflow: hidden;
    transition: background .12s, color .12s;
    position: relative;
}
.sidebar-new-item i, .sidebar-new-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-new-item:hover { background: var(--color-obsidian); color: var(--color-mist); }
.sidebar-new-item.active { background: var(--color-obsidian); color: var(--color-paper); }
.sidebar-new-item.active::before {
    content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 16px; border-radius: 2px; background: var(--color-acid-lime);
}
.sidebar-new-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sidebar-new-item-badge {
    background: var(--color-graphite); color: var(--color-mist); font-size: 10px; font-weight: 700;
    border-radius: var(--radius-pill); padding: 1px 6px; flex-shrink: 0;
}
.sidebar-new.collapsed .sidebar-new-item { justify-content: center; padding: 8px; }
.sidebar-new.collapsed .sidebar-new-item-label,
.sidebar-new.collapsed .sidebar-new-item-badge { display: none; }
.sidebar-new.collapsed .sidebar-new-item.active::before { left: -8px; }

/* Account / system — language, notifications: icon row; profile: its own explicit
   row right above the collapse toggle (item 2 + the follow-up "make profile more
   explicit" request), moved here from the old topbar's right-hand cluster. */
.sidebar-new-account { border-top: .5px solid var(--color-graphite); padding: 8px; flex-shrink: 0; }
.sidebar-new-account-row { display: flex; align-items: center; gap: 2px; }
.sidebar-new.collapsed .sidebar-new-account-row { flex-direction: column; align-items: stretch; }
.sidebar-new-account .btn-ghost.icon-btn, .sidebar-new-account .nav-item { color: var(--color-fog); }
.sidebar-new-account .btn-ghost.icon-btn:hover { color: var(--color-mist); background: var(--surface-2); }
.sidebar-new-account .nav-lang-wrap { margin-right: auto; }
.sidebar-new.collapsed .sidebar-new-account .nav-lang-wrap { margin-right: 0; }
/* Profile/notifications/language dropdowns are anchored near the BOTTOM of a 100vh
   sidebar now — opening downward (the widgets' own default) would push them off-screen,
   so flip them upward. Can't edit widgets/notifications/widget.php's inline style,
   hence !important there. */
.sidebar-new-account .dropdown-menu { top: auto !important; bottom: 100%; left: 0; right: auto; margin-top: 0; margin-bottom: 6px; }
.sidebar-new-account #notif-modal { top: auto !important; right: auto !important; left: 0 !important; bottom: 100% !important; margin-top: 0 !important; margin-bottom: 8px !important; }
#langDropdownMenu .dropdown-link i[data-lucide="check"] { width: 14px; height: 14px; color: var(--color-acid-lime); }

/* Profile — separate, more prominent row: avatar + full name + chevron, own hover state */
.sidebar-new-profile-wrap { margin-top: 6px; padding-top: 6px; border-top: .5px solid var(--color-graphite); }
.sidebar-new-profile-row {
    width: 100%; display: flex; align-items: center; gap: 9px;
    background: none; border: none; cursor: pointer; text-align: left;
    padding: 6px; border-radius: var(--radius-md);
}
.sidebar-new-profile-row:hover { background: var(--surface-2); }
.sidebar-new-profile-avatar {
    width: 27px; height: 27px; flex-shrink: 0; border-radius: 50%;
    background: var(--brand-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px;
}
.sidebar-new-profile-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--color-mist); }
.sidebar-new-profile-chev { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-tertiary); }
.sidebar-new.collapsed .sidebar-new-profile-row { justify-content: center; padding: 8px; }
.sidebar-new.collapsed .sidebar-new-profile-name, .sidebar-new.collapsed .sidebar-new-profile-chev { display: none; }

.sidebar-new-toggle {
    width: 100%; display: flex; align-items: center; gap: 10px; justify-content: flex-start;
    background: none; border: none; color: var(--color-ash); cursor: pointer;
    padding: 7px 10px; border-radius: var(--radius-md); font-size: 12px; font-weight: 500;
}
.sidebar-new-toggle:hover { background: var(--color-obsidian); color: var(--color-mist); }
.sidebar-new-toggle i, .sidebar-new-toggle svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .18s; }
.sidebar-new.collapsed .sidebar-new-toggle { justify-content: center; }
.sidebar-new.collapsed .sidebar-new-toggle i, .sidebar-new.collapsed .sidebar-new-toggle svg { transform: rotate(180deg); }
.sidebar-new.collapsed .sidebar-new-toggle-label { display: none; }

.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#app-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }

@media (max-width: 768px) {
    :root { --nav-height: 56px; } /* the sidebar becomes a real top strip again on mobile */
    .shell-new { flex-direction: column; }
    .sidebar-new {
        width: 100%; height: auto; position: sticky; top: 0; z-index: 210;
        flex-direction: row; align-items: center; gap: 4px;
        padding: 6px 10px; border-right: none; border-bottom: .5px solid var(--color-graphite);
    }
    /* Primary nav moves to the existing mobile-bottom-nav tab bar — no need for it twice. */
    .sidebar-new-nav { display: none; }
    .sidebar-new-toggle { display: none; } /* collapse-to-icon-rail is a desktop concept */
    .sidebar-new-brand { height: auto; padding: 4px; border-bottom: none; flex-shrink: 0; }
    .sidebar-new-brand-label { display: none; }
    .sidebar-new-search-row { flex: 1; padding: 0; border-bottom: none; }
    .sidebar-new-search { justify-content: center; padding: 8px; border-radius: 50%; width: 34px; height: 34px; }
    .sidebar-new-search-label, .sidebar-new-search-kbd { display: none; }
    .sidebar-new-rec-row { padding: 0; border-bottom: none; flex-shrink: 0; }
    /* Account block stacks (icon row, then a full explicit profile row) on desktop —
       on the mobile horizontal strip both need to sit inline as icons instead, or the
       "explicit" profile row would make the top strip multi-line. */
    .sidebar-new-account { border-top: none; padding: 0; flex-shrink: 0; display: flex; align-items: center; gap: 2px; }
    .sidebar-new-account .dropdown-menu, .sidebar-new-account #notif-modal { left: auto !important; right: 0 !important; }
    .sidebar-new-profile-wrap { margin-top: 0; padding-top: 0; border-top: none; flex-shrink: 0; }
    .sidebar-new-profile-row { width: auto; padding: 7px; }
    .sidebar-new-profile-name, .sidebar-new-profile-chev { display: none; }
    /* .nav-graph-btn's mobile-visible rule already lives in navbar-new.php's own <style> block */
}