/* =====================================================================
   Kvill — Visual Polish: Toolbar & Sidebar
   Premium glassmorphic toolbar + refined sidebar drawer

   HTML CHANGES NEEDED:
   ────────────────────
   1. In <header class="m-toolbar"> — no HTML changes needed, CSS-only polish.

   2. In .m-sidebar-footer, wrap the theme + logout buttons in a div:
      BEFORE:
        <button class="m-sidebar-footer-btn" id="mThemeToggle">...</button>
        <button class="m-sidebar-footer-btn" id="mLogoutBtn">...</button>
      AFTER:
        <div class="m-sidebar-footer-actions">
          <button class="m-sidebar-footer-btn" id="mThemeToggle">...</button>
          <button class="m-sidebar-footer-btn" id="mLogoutBtn">...</button>
        </div>

   3. Optionally add .m-sidebar-empty inside .m-sidebar-list for empty state:
      <div class="m-sidebar-empty">Нет сохранённых презентаций</div>

   LOAD ORDER: After mobile.css
   ===================================================================== */


/* ── Telegram-style undo toast ── */
.m-undo-toast {
  position: fixed;
  bottom: calc(24px + var(--m-safe-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1a1a1a;
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  z-index: 10000;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
.m-undo-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.m-undo-toast.exit {
  opacity: 0;
  transform: translateX(-50%) translateY(20px);
}
.m-undo-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-undo-timer {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  min-width: 10px;
  text-align: center;
}
.m-undo-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #60a5fa;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 100ms ease;
}
.m-undo-btn:hover { opacity: 0.8; }
[data-theme="dark"] .m-undo-toast {
  background: #2a2a2e;
  color: #e4e4e7;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
}
[data-theme="dark"] .m-undo-timer { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .m-undo-btn { color: #60a5fa; }

/* ── Section add button: hidden on mobile, shown on desktop ── */
.m-section-add-btn { display: none; }

/* ══════════════════════════════════════════════════════════════
   MOBILE SIDEBAR STYLES (base scope — applies to ALL viewports)
   Moved from desktop @media block so mobile matches desktop look
   ══════════════════════════════════════════════════════════════ */

/* ── Doc icons (CSS mask-image) ── */
.m-sidebar-doc-icon {
  display: inline-block; width: 16px; height: 16px;
  background: #8b8fa3;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='13' y2='17'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='13' y2='17'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  flex-shrink: 0;
}
.m-sidebar-doc-icon svg { display: none; }
[data-theme="dark"] .m-sidebar-doc-icon { background: #5a5a5f; }
.m-sidebar-item.active .m-sidebar-doc-icon { background: #1a1a1a; }
[data-theme="dark"] .m-sidebar-item.active .m-sidebar-doc-icon { background: #ffffff; }

/* ── Folder colored dots (replace folder icon) ── */
.m-sidebar-folder-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  margin-left: 5px; transition: box-shadow 200ms ease;
}
.m-sidebar-folder-icon { display: none; }
.m-sidebar-folder-header:not(.collapsed) .m-sidebar-folder-dot { box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.m-sidebar-folder-header.collapsed .m-sidebar-folder-dot { box-shadow: none; }
[data-theme="dark"] .m-sidebar-folder-header:not(.collapsed) .m-sidebar-folder-dot { box-shadow: 0 0 0 3px rgba(255,255,255,0.08); }

/* ── Section labels ── */
.m-sidebar-section-label { font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #8b8fa3; }
[data-theme="dark"] .m-sidebar-section-label { color: #5a5a5f; }

/* ── Section dividers (via ::before pseudo, no border-top) ── */
.m-sidebar-section + .m-sidebar-section { margin-top: 0; padding-top: 16px; }
.m-sidebar-section + .m-sidebar-section::before { content: ''; display: block; height: 1px; background: rgba(0,0,0,0.06); margin: 0 8px 12px; }
[data-theme="dark"] .m-sidebar-section + .m-sidebar-section::before { background: rgba(255,255,255,0.06); }

/* ── Item title ── */
.m-sidebar-item-title { font-size: 13px; font-weight: 400; color: #1a1d2e; }
[data-theme="dark"] .m-sidebar-item-title { color: #e4e4e7; }
.m-sidebar-item.active .m-sidebar-item-title { font-weight: 500; color: #1a1a1a; }
[data-theme="dark"] .m-sidebar-item.active .m-sidebar-item-title { color: #ffffff; }

/* ── Folder name ── */
.m-sidebar-folder-name { font-size: 13px; font-weight: 400; color: #1a1d2e; }
[data-theme="dark"] .m-sidebar-folder-name { color: #e4e4e7; }

/* ── Folder chevron — always visible on mobile ── */
.m-sidebar-folder-chevron { width: 14px; height: 14px; color: #8b8fa3; flex-shrink: 0; transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.m-sidebar-folder-header.collapsed .m-sidebar-folder-chevron { transform: rotate(-90deg); }
[data-theme="dark"] .m-sidebar-folder-chevron { color: #5a5a5f; }

/* ── Three dots — always visible on mobile (no hover) ── */
.m-sidebar-more-btn { opacity: 0.4; width: 18px; height: 18px; min-width: 18px; border-radius: 50%; }
.m-sidebar-folder-more { opacity: 0.4; width: 18px; height: 18px; min-width: 18px; border-radius: 50%; }

/* ── Section empty ── */
.m-sidebar-section-empty { font-size: 12px; color: #8b8fa3; }
[data-theme="dark"] .m-sidebar-section-empty { color: #5a5a5f; }

/* ── Date headers ── */
.m-sidebar-date-header span { font-size: 11px; font-weight: 400; color: #8b8fa3; }
[data-theme="dark"] .m-sidebar-date-header span { color: #5a5a5f; }

/* ── Sidebar background — prototype palette ── */
.m-sidebar-drawer { background: #ffffff; }
[data-theme="dark"] .m-sidebar-drawer { background: #18181b; }

/* ── Sidebar footer border ── */
.m-sidebar-footer { border-top: 1px solid rgba(0,0,0,0.06); }
[data-theme="dark"] .m-sidebar-footer { border-top-color: rgba(255,255,255,0.06); }

/* ── New button prototype colors ── */
.m-sidebar-new-btn { color: #4a4e69; }
[data-theme="dark"] .m-sidebar-new-btn { color: #8c8c91; }

/* ── Footer text prototype colors ── */
.m-footer-name { color: #1a1d2e; }
[data-theme="dark"] .m-footer-name { color: #e4e4e7; }
.m-footer-balance { color: #4a4e69; }
[data-theme="dark"] .m-footer-balance { color: #8c8c91; }
.m-footer-chevron { color: #8b8fa3; }
[data-theme="dark"] .m-footer-chevron { color: #5a5a5f; }

/* ── Theme transition — overlay fade ── */
.theme-fade {
  position: fixed; inset: 0; z-index: 99999;
  pointer-events: none;
  opacity: 1;
  animation: themeFadeOut 350ms ease forwards;
}
@keyframes themeFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ── Search bar: hidden on mobile, shown on desktop via media query ── */
.m-sidebar-search-wrapper {
  display: none;
}

/* ── Sidebar design-system variables (on :root — popover lives outside sidebar DOM) ── */
:root {
  --sb-hover: rgba(0,0,0,0.04);
  --sb-active: rgba(0,0,0,0.08);
  --sb-divider: rgba(0,0,0,0.06);
  --sb-popover-border: rgba(0,0,0,0.10);
  --sb-avatar-bg: #1a1a1a;
  --sb-avatar-text: #ffffff;
}

[data-theme="dark"] {
  --sb-hover: rgba(255,255,255,0.05);
  --sb-active: rgba(255,255,255,0.10);
  --sb-divider: rgba(255,255,255,0.06);
  --sb-popover-border: rgba(255,255,255,0.10);
  --sb-avatar-bg: #ffffff;
  --sb-avatar-text: #18181b;
}


/* =====================================================================
   TOOLBAR — Glassmorphic top bar
   ===================================================================== */

.m-toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  padding-top: max(10px, calc(var(--m-safe-top) + 4px));
  background: var(--m-toolbar-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--m-toolbar-shadow);
}

[data-theme="dark"] .m-toolbar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ─── Toolbar buttons ─── */

.m-toolbar-btn {
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-1);
  cursor: pointer;
  border-radius: 10px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              transform 0.15s var(--ease);
  position: relative;
}

.m-toolbar-btn:active {
  background: var(--accent-subtle);
  transform: scale(0.92);
}

.m-toolbar-btn svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s var(--ease-spring);
}

/* Hamburger animation hint on hover/active */
.m-toolbar-btn#menuBtn:active svg {
  transform: scale(0.9);
}

/* Theme toggle rotation */
.m-toolbar-btn#themeBtn svg {
  transition: transform 0.5s var(--ease-spring);
}

.m-toolbar-btn#themeBtn:active svg {
  transform: rotate(30deg) scale(0.9);
}

/* ─── Toolbar center ─── */

.m-toolbar-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: 2px;
}

/* ─── Title — premium typography ─── */

.m-toolbar-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  line-height: 1.2;
}

.m-toolbar-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  text-align: center;
  margin-top: -1px;
}

/* ─── Slide counter — glass pill badge ─── */

.m-slide-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--accent-subtle);
  padding: 3px 12px;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease-spring);
}

[data-theme="dark"] .m-slide-counter {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}


/* =====================================================================
   SIDEBAR SCRIM — Smooth overlay backdrop
   ===================================================================== */

.m-sidebar-scrim {
  position: fixed;
  inset: 0;
  z-index: 9499;
  background: transparent;
  pointer-events: none;
  transition: background 0.35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.m-sidebar-scrim.active {
  background: rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

[data-theme="dark"] .m-sidebar-scrim.active {
  background: rgba(0, 0, 0, 0.55);
}


/* =====================================================================
   SIDEBAR DRAWER — Premium glass panel
   ===================================================================== */

.m-sidebar-drawer {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(300px, 85vw);
  z-index: 9500;
  background: var(--m-sidebar-bg);
  border-right: 1px solid var(--m-panel-border);
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform 0.4s var(--ease-spring);
  will-change: transform;
}

[data-theme="dark"] .m-sidebar-drawer {
  background: #1a1a1e;
  border-right-color: rgba(255, 255, 255, 0.08);
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.5);
}

.m-sidebar-drawer.open {
  transform: translateX(0);
}

/* ─── Sidebar header ─── */

/* Sidebar header — clean, no border, no gradient (matches desktop) */
.m-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px 8px;
  padding-top: max(12px, calc(var(--m-safe-top) + 4px));
  border-bottom: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.m-sidebar-header::after {
  display: none;
}

/* ─── Logo ─── */

.m-sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-sidebar-header .logo-mark {
  width: 32px;
  height: 28px;
}

.m-sidebar-header .logo-text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.3px;
}


/* ─── New presentation button — subtle fill, compact ─── */

.m-sidebar-new-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: calc(100% - 32px);
  margin: 8px 16px 0;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-1);
  font-family: 'Instrument Sans', var(--font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color 50ms ease, background 50ms ease;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  padding: 0 12px;
  white-space: nowrap;
}

/* No shine overlay — flat button */
.m-sidebar-new-btn::before {
  display: none;
}

.m-sidebar-new-btn:hover {
  color: var(--bg-solid, #fff);
  background: var(--text-0);
}

.m-sidebar-new-btn:active {
  transform: scale(0.97);
}

.m-sidebar-new-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

[data-theme="dark"] .m-sidebar-new-btn {
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .m-sidebar-new-btn:hover {
  color: var(--bg-solid, #18181b);
  background: var(--text-0);
}


/* ─── Presentation list — hover-to-show scrollbar ─── */

.m-sidebar-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0 8px;
  scrollbar-width: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.m-sidebar-drawer:hover .m-sidebar-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

[data-theme="dark"] .m-sidebar-drawer:hover .m-sidebar-list {
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.m-sidebar-list::-webkit-scrollbar {
  width: 0;
}

.m-sidebar-drawer:hover .m-sidebar-list::-webkit-scrollbar {
  width: 3px;
}

.m-sidebar-drawer:hover .m-sidebar-list::-webkit-scrollbar-track {
  background: transparent;
}

.m-sidebar-drawer:hover .m-sidebar-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

[data-theme="dark"] .m-sidebar-drawer:hover .m-sidebar-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

/* ─── Presentation item — compact, matches desktop ─── */

.m-sidebar-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 44px;
  padding: 0;
  margin: 0 4px;
  cursor: pointer;
  border-radius: 6px;
  border-left: none;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.m-sidebar-item:hover .m-sidebar-item-content {
  background: rgba(0, 0, 0, 0.04);
}

.m-sidebar-item:active .m-sidebar-item-content {
  background: rgba(0, 0, 0, 0.06);
}

/* Active item — stronger bg for clear selection */
.m-sidebar-item.active .m-sidebar-item-content {
  background: rgba(0, 0, 0, 0.08);
}

.m-sidebar-item.active .m-sidebar-item-title {
  font-weight: 500;
  color: var(--text-0);
}

[data-theme="dark"] .m-sidebar-item:hover .m-sidebar-item-content {
  background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .m-sidebar-item:active .m-sidebar-item-content {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .m-sidebar-item.active .m-sidebar-item-content {
  background: rgba(255, 255, 255, 0.10);
}

/* Item title — match prototype: 13px, normal weight, secondary color */
.m-sidebar-item-title {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.m-sidebar-item.active .m-sidebar-item-title {
  font-weight: 500;
  color: var(--text-0);
}

/* Item date — hidden like desktop */
.m-sidebar-item-date {
  display: none;
}

/* Item icon — matches folder icon weight/contrast */
.m-sidebar-item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-sidebar-item-icon svg {
  width: 16px;
  height: 16px;
  color: var(--text-2);
}

/* Item content — swipe wrapper (row: icon + title)
   MUST stay opaque to hide swipe-action buttons behind it.
   z-index:1 + position:relative ensures it stacks above .m-sidebar-swipe-actions (z-index:0). */
.m-sidebar-item-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  background: transparent;
  position: relative;
  z-index: 1;
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Empty state for sidebar list */
.m-sidebar-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 32px 16px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}


/* ─── Section headers — match prototype: 10px uppercase, wide tracking ─── */

.m-sidebar-section-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}

.m-sidebar-section-header {
  height: auto;
  padding: 8px 16px 3px;
}

.m-sidebar-section + .m-sidebar-section {
  margin-top: 0;
  padding-top: 12px;
}

/* Subtle divider between sections */
.m-sidebar-section + .m-sidebar-section::before {
  content: '';
  display: block;
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 16px 8px;
}

[data-theme="dark"] .m-sidebar-section + .m-sidebar-section::before {
  background: rgba(255, 255, 255, 0.06);
}

/* ─── Folder headers — aligned with prototype ─── */

.m-sidebar-folder-header {
  height: 28px;
  padding: 0 8px;
  gap: 8px;
}

/* ─── Sidebar footer — compact bar, profile+balance left, theme right ─── */

/* Sidebar footer — subtle top border (matches prototype) */
.m-sidebar-footer {
  display: flex;
  align-items: center;
  padding: 6px 8px 8px;
  padding-bottom: max(8px, calc(var(--m-safe-bottom) + 4px));
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  gap: 4px;
  margin-top: auto;
}

[data-theme="dark"] .m-sidebar-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* Balance — interactive, same height as footer buttons (32px) */
.m-sidebar-balance {
  font-size: 13px;
  font-weight: 425;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  background: none;
  height: 32px;
  padding: 0 8px;
  border: none;
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.m-sidebar-balance:hover {
  color: var(--text-0);
  background: var(--bg-input);
}

.m-sidebar-balance:active {
  color: var(--text-0);
  background: var(--bg-input-hover);
}

/* Theme toggle — inline with other footer buttons, no push right */

/* Footer buttons — 44px touch target on mobile */
.m-sidebar-footer-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--text-2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease;
}

.m-sidebar-footer-btn:active {
  background: var(--bg-input);
  color: var(--text-0);
}

.m-sidebar-footer-btn svg {
  width: 16px;
  height: 16px;
}


/* ── Footer Profile Row ── */
.m-footer-profile { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:8px; cursor:pointer; transition:background 50ms ease; user-select:none; min-height:44px; width:100%; box-sizing:border-box; }
.m-footer-profile:hover { background: var(--sb-hover); }
.m-footer-profile:active { background: var(--sb-active); }
.m-footer-avatar { width:28px; height:28px; border-radius:50%; background:var(--sb-avatar-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.m-footer-avatar-initials { font-size:10px; font-weight:500; color:var(--sb-avatar-text); letter-spacing:0.02em; }
.m-footer-info { flex:1; min-width:0; }
.m-footer-name { font-size:12px; font-weight:500; color:var(--text-0); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-footer-balance { font-size:10px; color:var(--text-1); line-height:1.3; }
.m-footer-chevron { width:14px; height:14px; color:var(--text-2); flex-shrink:0; transition:transform 200ms cubic-bezier(0.34,1.56,0.64,1), color 100ms ease; }
.m-footer-profile:hover .m-footer-chevron { color:var(--text-1); }
.m-sidebar-footer.popover-open .m-footer-chevron { transform:rotate(180deg); }


/* ── Profile Popover ── */
.m-popover-backdrop { position:fixed; inset:0; z-index:9699; display:none; }
.m-popover-backdrop.visible { display:block; }
.m-profile-popover { position:fixed; z-index:9700; background:var(--bg-solid); border:1px solid var(--sb-popover-border); border-radius:10px; padding:4px; opacity:0; transform:translateY(6px) scale(0.98); pointer-events:none; transition:opacity 120ms ease, transform 120ms ease; box-shadow:0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04); max-width:calc(100vw - 16px); }
.m-profile-popover.visible { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
[data-theme="dark"] .m-profile-popover { background:#1c1c1f; box-shadow:0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06); }
.m-popover-email { font-size:11px; color:var(--text-2); padding:6px 10px 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-popover-balance-row { display:flex; align-items:center; justify-content:space-between; padding:4px 10px 6px; }
.m-popover-balance { font-size:13px; font-weight:600; color:var(--text-0); }
.m-popover-topup { font-size:11px; font-weight:500; color:var(--text-0); background:var(--sb-active); border:none; border-radius:5px; padding:3px 10px; cursor:pointer; font-family:inherit; transition:background 80ms ease; }
.m-popover-topup:hover { background:var(--sb-hover); }
.m-popover-divider { height:1px; background:var(--sb-divider); margin:3px 6px; }
.m-popover-item { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--text-0); transition:background 50ms ease; white-space:nowrap; border:none; background:none; width:100%; font-family:inherit; text-align:left; }
.m-popover-item:hover { background:var(--sb-hover); }
.m-popover-item:active { background:var(--sb-active); }
.m-popover-item svg { width:15px; height:15px; color:var(--text-1); flex-shrink:0; }
.m-popover-item span:first-of-type { flex:1; }
.m-popover-shortcut { font-size:10px; color:var(--text-2); font-weight:500; }
.m-popover-danger { color:#c53030; }
.m-popover-danger svg { color:#c53030; }
[data-theme="dark"] .m-popover-danger { color:#fc8181; }
[data-theme="dark"] .m-popover-danger svg { color:#fc8181; }


/* ── Collapsed Avatar ── */
.m-collapsed-avatar { width:24px; height:24px; border-radius:50%; background:var(--sb-avatar-bg); color:var(--sb-avatar-text); font-size:9px; font-weight:500; display:flex; align-items:center; justify-content:center; }


/* ── Sidebar footer border-top override ── */
.m-sidebar-footer { border-top:1px solid var(--sb-divider); }


/* =====================================================================
   BREAKPOINT OVERRIDES
   ===================================================================== */

@media (max-width: 380px) {
  .m-toolbar {
    padding: 8px 10px;
    padding-top: max(8px, calc(var(--m-safe-top) + 2px));
  }

  .m-toolbar-title {
    font-size: 15px;
  }

  .m-sidebar-drawer {
    width: min(300px, 90vw);
  }
}


/* =====================================================================
   ACCESSIBILITY — Reduced motion
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .m-toolbar-btn svg,
  .m-sidebar-footer-btn svg,
  .m-sidebar-drawer,
  .m-sidebar-scrim,
  .m-sidebar-new-btn,
  .m-sidebar-item {
    transition-duration: 0.01ms !important;
  }
}


/* =====================================================================
   iOS SAFARI FIXES
   ===================================================================== */

@supports (-webkit-touch-callout: none) {
  .m-sidebar-drawer {
    -webkit-overflow-scrolling: auto;
    isolation: isolate;
  }
}


/* =====================================================================
   DESKTOP BREAKPOINTS — Toolbar & Sidebar
   ===================================================================== */

@media (min-width: 768px) {

  /* ── Toolbar: HIDDEN on desktop ── */
  .m-toolbar {
    display: none !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     SIDEBAR — Exact copy of prototype v1a-refined-geometry.html
     All values are LITERAL from prototype. No interpretation.
     Prototype vars resolved to actual values inline.
     ══════════════════════════════════════════════════════════════════ */

  /* ── Sidebar container ── */
  .m-sidebar-drawer {
    position: relative !important;
    transform: none !important;
    width: var(--m-sidebar-width, 180px);
    min-width: var(--m-sidebar-width, 180px);
    z-index: auto !important;
    box-shadow: none !important;
    will-change: auto !important;
    transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1), min-width 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms ease !important;
    /* Prototype: var(--bg) = #ffffff */
    background: #ffffff !important;
    font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    /* Prototype: border via ::after pseudo, but production uses border-right */
    border-right: 1px solid rgba(0,0,0,0.06) !important;
  }

  [data-theme="dark"] .m-sidebar-drawer {
    background: #18181b !important;
    border-right-color: rgba(255,255,255,0.06) !important;
  }

  /* Collapsed — 48px icon strip */
  .m-sidebar-drawer.m-sidebar-collapsed {
    width: 48px !important;
    min-width: 48px !important;
    overflow: hidden !important;
  }
  .m-sidebar-drawer.m-sidebar-collapsed .m-sidebar-content {
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    width: 0 !important;
  }
  .m-sidebar-drawer.m-sidebar-collapsed .m-sidebar-strip {
    display: flex !important;
  }

  /* Resize drag — instant feedback */
  .m-sidebar-drawer.is-resizing,
  .m-sidebar-drawer.is-resizing *,
  .m-sidebar-drawer.is-resizing .m-sidebar-header,
  .m-sidebar-drawer.is-resizing .m-sidebar-list,
  .m-sidebar-drawer.is-resizing .m-sidebar-footer {
    transition: none !important;
  }

  /* Hide scrim on desktop */
  .m-sidebar-scrim {
    display: none !important;
  }

  /* ── Header ── */
  /* Prototype narrow: padding: 20px 10px 0 10px */
  .m-sidebar-header {
    padding: 20px 10px 0 10px !important;
  }

  /* Prototype: .wm = Outfit 800, 16px, -0.01em */
  .m-sidebar-header .wm {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
  }

  /* Prototype: .icon-btn = 28x28, color #8b8fa3, hover bg rgba(0,0,0,0.04) color #4a4e69 */
  .m-sidebar-header-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 6px !important;
    color: #8b8fa3 !important;
    transition: background 50ms ease, color 50ms ease !important;
  }
  .m-sidebar-header-btn:hover {
    background: rgba(0,0,0,0.04) !important;
    color: #4a4e69 !important;
  }
  [data-theme="dark"] .m-sidebar-header-btn {
    color: #5a5a5f !important;
  }
  [data-theme="dark"] .m-sidebar-header-btn:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #8c8c91 !important;
  }
  .m-sidebar-header-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Show desktop-only header buttons (hidden in mobile.css) */
  /* New pres button hidden — big button below handles this */
  #mNewPresHeaderBtn {
    display: none !important;
  }
  .m-sidebar-collapse-btn {
    display: flex !important;
  }
  .m-sidebar-resize-handle {
    display: block !important;
  }

  /* ── New presentation button ── */
  /* Prototype: h34, bg rgba(0,0,0,0.04), color #4a4e69, 13px 400, hover: color #fff bg #1a1a1a */
  .m-sidebar-new-btn {
    background: rgba(0,0,0,0.04) !important;
    border: none !important;
    border-radius: 8px !important;
    height: 34px !important;
    color: #4a4e69 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    margin: 16px 10px 0 !important;
    width: calc(100% - 20px) !important;
    padding: 0 12px !important;
    transition: color 50ms ease, background 50ms ease !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .m-sidebar-new-btn::before { display: none !important; }
  .m-sidebar-new-btn:hover {
    color: #ffffff !important;
    background: #1a1a1a !important;
  }
  .m-sidebar-new-btn:active {
    transform: scale(0.98) !important;
  }
  .m-sidebar-new-btn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  .m-sidebar-new-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }
  [data-theme="dark"] .m-sidebar-new-btn {
    background: rgba(255,255,255,0.06) !important;
    color: #8c8c91 !important;
  }
  [data-theme="dark"] .m-sidebar-new-btn:hover {
    color: #18181b !important;
    background: #ffffff !important;
  }

  /* ── Search bar ── */
  /* Prototype: wrapper padding 10px 16px 0 16px */
  .m-sidebar-search-wrapper {
    display: block !important;
    padding: 10px 10px 0 10px !important;
    flex-shrink: 0 !important;
  }
  .m-sidebar-search-container { position: relative !important; }

  /* Prototype: h32, bg rgba(0,0,0,0.04), 12.5px, border-radius 8px */
  .m-sidebar-search-bar {
    width: 100% !important;
    height: 32px !important;
    background: rgba(0,0,0,0.04) !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: #1a1d2e !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    padding: 0 36px 0 30px !important;
    outline: none !important;
    transition: border-color 100ms ease, background 100ms ease, box-shadow 100ms ease !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
  }
  /* Prototype: placeholder = var(--text-tertiary) = #8b8fa3 */
  .m-sidebar-search-bar::placeholder { color: #8b8fa3 !important; }
  /* Prototype: focus border = var(--accent) = #1a1a1a, bg = #ffffff, shadow = 0 0 0 3px rgba(0,0,0,0.06) */
  .m-sidebar-search-bar:focus {
    border-color: #1a1a1a !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
  }
  [data-theme="dark"] .m-sidebar-search-bar {
    background: rgba(255,255,255,0.06) !important;
    color: #e4e4e7 !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
  }
  [data-theme="dark"] .m-sidebar-search-bar::placeholder { color: #5a5a5f !important; }
  [data-theme="dark"] .m-sidebar-search-bar:focus {
    border-color: #ffffff !important;
    background: #18181b !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08) !important;
  }

  /* Prototype: search icon = #8b8fa3, focus-within = #1a1a1a */
  .m-sidebar-search-icon {
    position: absolute !important;
    left: 9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #8b8fa3 !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
  }
  .m-sidebar-search-container:focus-within .m-sidebar-search-icon { color: #1a1a1a !important; }
  [data-theme="dark"] .m-sidebar-search-icon { color: #5a5a5f !important; }
  [data-theme="dark"] .m-sidebar-search-container:focus-within .m-sidebar-search-icon { color: #ffffff !important; }

  /* Prototype: shortcut = #8b8fa3 on rgba(0,0,0,0.06) bg */
  .m-sidebar-search-shortcut {
    position: absolute !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important;
    font-size: 10px !important; color: #8b8fa3 !important; background: rgba(0,0,0,0.06) !important;
    padding: 2px 5px !important; border-radius: 4px !important; pointer-events: none !important; line-height: 1 !important;
    transition: opacity 100ms ease !important;
  }
  [data-theme="dark"] .m-sidebar-search-shortcut { color: #5a5a5f !important; background: rgba(255,255,255,0.06) !important; }
  .m-sidebar-search-bar:focus ~ .m-sidebar-search-shortcut { opacity: 0 !important; }

  .m-sidebar-search-clear {
    position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 18px !important; height: 18px !important; border: none !important; background: transparent !important;
    border-radius: 50% !important; cursor: pointer !important; display: none !important; align-items: center !important;
    justify-content: center !important; color: #8b8fa3 !important; padding: 0 !important;
  }
  .m-sidebar-search-clear:hover { background: rgba(0,0,0,0.04) !important; color: #4a4e69 !important; }
  .m-sidebar-search-bar.has-value ~ .m-sidebar-search-shortcut { display: none !important; }
  .m-sidebar-search-bar.has-value ~ .m-sidebar-search-clear { display: flex !important; }

  /* ── Scrollable list ── */
  /* Prototype: padding 12px 0 8px, scrollbar hidden, show on hover */
  .m-sidebar-list {
    padding: 12px 0 8px !important;
    scrollbar-width: none !important;
  }
  .m-sidebar-drawer:hover .m-sidebar-list {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0,0,0,0.12) transparent !important;
  }
  [data-theme="dark"] .m-sidebar-drawer:hover .m-sidebar-list {
    scrollbar-color: rgba(255,255,255,0.12) transparent !important;
  }
  .m-sidebar-list::-webkit-scrollbar { width: 0 !important; }
  .m-sidebar-drawer:hover .m-sidebar-list::-webkit-scrollbar { width: 3px !important; }
  .m-sidebar-drawer:hover .m-sidebar-list::-webkit-scrollbar-track { background: transparent !important; }
  .m-sidebar-drawer:hover .m-sidebar-list::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12) !important; border-radius: 3px !important; }
  [data-theme="dark"] .m-sidebar-drawer:hover .m-sidebar-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12) !important; }

  /* ── Section "+" button — barely visible, blends in ── */
  .m-section-add-btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important;
    border: none !important; background: transparent !important; outline: none !important;
    border-radius: 4px !important; cursor: pointer !important;
    color: var(--text-2, #8b8fa3) !important;
    opacity: 0 !important;
    transition: opacity 120ms ease, background 60ms ease, color 60ms ease !important;
    padding: 0 !important; margin: 0 !important; margin-left: auto !important; flex-shrink: 0 !important;
    -webkit-appearance: none !important; appearance: none !important;
    box-shadow: none !important;
  }
  .m-sidebar-section-header:hover .m-section-add-btn { opacity: 0.5 !important; }
  .m-section-add-btn:hover { opacity: 1 !important; background: rgba(0,0,0,0.06) !important; color: #1a1a1a !important; }
  [data-theme="dark"] .m-section-add-btn:hover { background: rgba(255,255,255,0.08) !important; color: #fff !important; }

  /* ── Sections — prototype: padding 0 8px on each section ── */
  .m-sidebar-section {
    padding: 0 4px !important;
  }

  /* ── Section headers ── */
  /* Prototype: 10px 500 0.12em uppercase, color #8b8fa3, hover #4a4e69 */
  .m-sidebar-section-label {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #8b8fa3 !important;
    transition: color 120ms ease !important;
  }
  .m-sidebar-section-header:hover .m-sidebar-section-label { color: #4a4e69 !important; }
  [data-theme="dark"] .m-sidebar-section-label { color: #5a5a5f !important; }
  [data-theme="dark"] .m-sidebar-section-header:hover .m-sidebar-section-label { color: #8c8c91 !important; }

  .m-sidebar-section-header {
    height: auto !important;
    padding: 0 8px !important;
    margin-bottom: 3px !important;
    gap: 2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    user-select: none !important;
  }

  /* Prototype: section + section margin-top 16px, divider rgba(0,0,0,0.06) margin 0 8px 12px 8px */
  .m-sidebar-section + .m-sidebar-section { margin-top: 0 !important; padding-top: 16px !important; }
  .m-sidebar-section + .m-sidebar-section::before {
    content: '' !important; display: block !important; height: 1px !important;
    background: rgba(0,0,0,0.06) !important; margin: 0 8px 12px !important;
  }
  [data-theme="dark"] .m-sidebar-section + .m-sidebar-section::before { background: rgba(255,255,255,0.06) !important; }

  /* Prototype: section-chevron = #8b8fa3 opacity 0, hover opacity 1 color #4a4e69 */
  .m-sidebar-section-chevron {
    width: 14px !important;
    height: 14px !important;
    opacity: 0 !important;
    margin-left: 0 !important;
    transition: transform 200ms ease, color 120ms ease, opacity 100ms ease !important;
    color: #8b8fa3 !important;
    flex-shrink: 0 !important;
  }
  .m-sidebar-section-header:hover .m-sidebar-section-chevron { opacity: 1 !important; color: #4a4e69 !important; }
  [data-theme="dark"] .m-sidebar-section-chevron { color: #5a5a5f !important; }
  [data-theme="dark"] .m-sidebar-section-header:hover .m-sidebar-section-chevron { opacity: 1 !important; color: #8c8c91 !important; }

  .m-sidebar-section-badge { font-size: 10px !important; color: #8b8fa3 !important; background: none !important; padding: 0 !important; }
  [data-theme="dark"] .m-sidebar-section-badge { color: #5a5a5f !important; }

  /* Prototype: section-empty padding matches section inner spacing */
  .m-sidebar-section-empty { padding: 6px 8px 8px !important; font-size: 12px !important; color: #8b8fa3 !important; }
  [data-theme="dark"] .m-sidebar-section-empty { color: #5a5a5f !important; }

  /* ── Items ── */
  /* Prototype: padding 4px 8px, border-radius 8px, gap 8px */
  /* No margin — section already provides 8px padding */
  .m-sidebar-item { margin: 0 !important; border-radius: 8px !important; min-height: auto !important; }
  .m-sidebar-item-content {
    min-height: 28px !important; padding: 4px 6px !important; gap: 6px !important;
    border-radius: 8px !important;
    will-change: auto !important;
    transition: background 50ms ease !important;
  }

  /* Prototype: title 13px 400, color #1a1d2e (--text-primary) */
  .m-sidebar-item-title {
    font-size: 13px !important; font-weight: 400 !important;
    color: #1a1d2e !important; line-height: 1.4 !important;
  }
  [data-theme="dark"] .m-sidebar-item-title { color: #e4e4e7 !important; }

  /* Prototype: icon 16px, color #8b8fa3 */
  .m-sidebar-item-icon { width: 16px !important; height: 16px !important; }
  .m-sidebar-item-icon svg { width: 16px !important; height: 16px !important; color: #8b8fa3 !important; }
  [data-theme="dark"] .m-sidebar-item-icon svg { color: #5a5a5f !important; }

  /* Doc icon (CSS mask) — prototype: background currentColor inherits from parent */
  .m-sidebar-doc-icon {
    display: inline-block !important; width: 16px !important; height: 16px !important;
    background: #8b8fa3 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='13' y2='17'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='8' y1='13' x2='16' y2='13'/%3E%3Cline x1='8' y1='17' x2='13' y2='17'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: contain !important; mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important; mask-position: center !important;
    flex-shrink: 0 !important;
  }
  .m-sidebar-doc-icon svg { display: none !important; }
  [data-theme="dark"] .m-sidebar-doc-icon { background: #5a5a5f !important; }

  /* Prototype: hover bg rgba(0,0,0,0.04), active bg rgba(0,0,0,0.08) */
  .m-sidebar-item:hover .m-sidebar-item-content { background: rgba(0,0,0,0.04) !important; }
  [data-theme="dark"] .m-sidebar-item:hover .m-sidebar-item-content { background: rgba(255,255,255,0.05) !important; }

  /* Prototype: active: bg rgba(0,0,0,0.08), title 500 #1a1a1a, icon #1a1a1a */
  .m-sidebar-item.active .m-sidebar-item-content { background: rgba(0,0,0,0.08) !important; }
  .m-sidebar-item.active .m-sidebar-item-title { font-weight: 500 !important; color: #1a1a1a !important; }
  .m-sidebar-item.active .m-sidebar-item-icon svg { color: #1a1a1a !important; }
  .m-sidebar-item.active .m-sidebar-doc-icon { background: #1a1a1a !important; }

  [data-theme="dark"] .m-sidebar-item.active .m-sidebar-item-content { background: rgba(255,255,255,0.10) !important; }
  [data-theme="dark"] .m-sidebar-item.active .m-sidebar-item-title { color: #ffffff !important; }
  [data-theme="dark"] .m-sidebar-item.active .m-sidebar-item-icon svg { color: #ffffff !important; }
  [data-theme="dark"] .m-sidebar-item.active .m-sidebar-doc-icon { background: #ffffff !important; }

  /* Archive section — dimmed content */
  .m-sidebar-section[data-section*="рхив"] .m-sidebar-section-content,
  .m-sidebar-section[data-section*="rchive"] .m-sidebar-section-content {
    opacity: 0.5 !important;
  }
  .m-sidebar-section[data-section*="рхив"] .m-sidebar-section-content:hover,
  .m-sidebar-section[data-section*="rchive"] .m-sidebar-section-content:hover {
    opacity: 0.7 !important;
  }

  /* Prototype: .item-menu = 18x18 circle, opacity 0, hover opacity 0.6, hover: bg #1a1a1a color #fff */
  .m-sidebar-more-btn {
    opacity: 0 !important; width: 18px !important; height: 18px !important;
    min-width: 18px !important; min-height: 18px !important;
    border-radius: 50% !important; color: #8b8fa3 !important;
    margin-left: 0 !important; flex-shrink: 0 !important;
    transition: opacity 50ms ease, background 50ms ease, color 50ms ease !important;
    padding: 0 !important;
  }
  .m-sidebar-more-btn svg {
    width: 12px !important;
    height: 12px !important;
  }
  .m-sidebar-item:hover .m-sidebar-more-btn { opacity: 0.6 !important; }
  .m-sidebar-item .m-sidebar-more-btn:hover { opacity: 1 !important; background: #1a1a1a !important; color: #fff !important; }
  [data-theme="dark"] .m-sidebar-more-btn { color: #5a5a5f !important; background: transparent !important; }
  [data-theme="dark"] .m-sidebar-item .m-sidebar-more-btn:hover { background: #ffffff !important; color: #18181b !important; }

  /* ── Date headers ── */
  /* Prototype: 11px 400, color #8b8fa3, padding 8px 8px 2px 8px */
  .m-sidebar-date-header { padding: 8px 8px 2px 8px !important; gap: 4px !important; }
  .m-sidebar-date-header span { font-size: 11px !important; font-weight: 400 !important; color: #8b8fa3 !important; user-select: none !important; }
  [data-theme="dark"] .m-sidebar-date-header span { color: #5a5a5f !important; }

  /* ── Folders ── */
  /* Prototype: dot 6x6 circle */
  .m-sidebar-folder-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; flex-shrink: 0 !important; margin-left: 5px !important; }
  .m-sidebar-folder-icon { display: none !important; }

  /* Prototype: folder-header padding 4px 8px, gap 8px, border-radius 8px, hover rgba(0,0,0,0.04) */
  .m-sidebar-folder-header {
    height: 28px !important; padding: 4px 6px !important; gap: 6px !important;
    margin: 1px 0 !important;
    border-radius: 8px !important; transition: background 50ms ease !important;
  }
  .m-sidebar-folder-header:hover { background: rgba(0,0,0,0.04) !important; }
  [data-theme="dark"] .m-sidebar-folder-header:hover { background: rgba(255,255,255,0.05) !important; }

  /* Prototype: folder-name 13px 400 #1a1d2e */
  .m-sidebar-folder-name { font-size: 13px !important; font-weight: 400 !important; color: #1a1d2e !important; }
  [data-theme="dark"] .m-sidebar-folder-name { color: #e4e4e7 !important; }

  /* Prototype: folder-chevron opacity 0, hover opacity 1, spring animation */
  /* Prototype: folder-chevron = 14px, #8b8fa3, opacity 0, spring animation */
  .m-sidebar-folder-chevron {
    width: 14px !important;
    height: 14px !important;
    color: #8b8fa3 !important;
    opacity: 0 !important;
    flex-shrink: 0 !important;
    transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 100ms ease !important;
  }
  [data-theme="dark"] .m-sidebar-folder-chevron { color: #5a5a5f !important; }
  .m-sidebar-folder-header:hover .m-sidebar-folder-chevron { opacity: 1 !important; }

  /* Prototype: folder-menu = 18x18 circle, opacity 0, hover bg #1a1a1a color #fff */
  .m-sidebar-folder-more {
    opacity: 0 !important; width: 18px !important; height: 18px !important;
    min-width: 18px !important; min-height: 18px !important;
    border-radius: 50% !important; color: #8b8fa3 !important;
    transition: opacity 50ms ease, background 50ms ease, color 50ms ease !important;
    padding: 0 !important;
  }
  .m-sidebar-folder-more svg {
    width: 12px !important;
    height: 12px !important;
  }
  .m-sidebar-folder-header:hover .m-sidebar-folder-more { opacity: 0.6 !important; }
  .m-sidebar-folder-header .m-sidebar-folder-more:hover { opacity: 1 !important; background: #1a1a1a !important; color: #fff !important; border-radius: 50% !important; }
  [data-theme="dark"] .m-sidebar-folder-more { color: #5a5a5f !important; background: transparent !important; }
  [data-theme="dark"] .m-sidebar-folder-header .m-sidebar-folder-more:hover { background: #ffffff !important; color: #18181b !important; }

  /* ── Footer ── */
  /* Prototype: padding 6px 8px 8px, border-top 1px rgba(0,0,0,0.06) */
  .m-sidebar-footer {
    padding: 6px 4px 8px 4px !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    gap: 4px !important;
  }
  [data-theme="dark"] .m-sidebar-footer { border-top-color: rgba(255,255,255,0.06) !important; }

  /* Prototype: footer-profile padding 5px 8px, border-radius 8px, hover rgba(0,0,0,0.04) */
  .m-footer-profile {
    padding: 5px 4px !important; border-radius: 8px !important;
    transition: background 50ms ease !important;
    width: 100% !important; box-sizing: border-box !important;
    gap: 6px !important;
  }
  .m-footer-profile:hover { background: rgba(0,0,0,0.04) !important; }
  .m-footer-profile:active { background: rgba(0,0,0,0.08) !important; }
  [data-theme="dark"] .m-footer-profile:hover { background: rgba(255,255,255,0.05) !important; }
  [data-theme="dark"] .m-footer-profile:active { background: rgba(255,255,255,0.10) !important; }

  /* Prototype: avatar 28x28, bg #1a1a1a, initials 10px 500 #fff */
  .m-footer-avatar { width: 28px !important; height: 28px !important; background: #1a1a1a !important; }
  .m-footer-avatar-initials { font-size: 10px !important; font-weight: 500 !important; color: #ffffff !important; letter-spacing: 0.02em !important; }
  [data-theme="dark"] .m-footer-avatar { background: #ffffff !important; }
  [data-theme="dark"] .m-footer-avatar-initials { color: #18181b !important; }

  /* Prototype: user-name 12px 500 #1a1d2e */
  .m-footer-name { font-size: 12px !important; font-weight: 500 !important; color: #1a1d2e !important; }
  [data-theme="dark"] .m-footer-name { color: #e4e4e7 !important; }

  /* Prototype: user-balance 10px #4a4e69 */
  .m-footer-balance { font-size: 10px !important; color: #4a4e69 !important; }
  [data-theme="dark"] .m-footer-balance { color: #8c8c91 !important; }

  /* Prototype: footer-chevron 14px #8b8fa3, hover #4a4e69, spring animation */
  .m-footer-chevron {
    width: 14px !important; height: 14px !important; color: #8b8fa3 !important;
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), color 100ms ease !important;
  }
  .m-footer-profile:hover .m-footer-chevron { color: #4a4e69 !important; }
  [data-theme="dark"] .m-footer-chevron { color: #5a5a5f !important; }
  [data-theme="dark"] .m-footer-profile:hover .m-footer-chevron { color: #8c8c91 !important; }

  /* Footer buttons — 28px compact (theme toggle etc if present) */
  .m-sidebar-footer-btn {
    width: 28px !important; height: 28px !important; min-width: 28px !important; min-height: 28px !important;
    border-radius: 6px !important; color: #8b8fa3 !important;
    transition: background 50ms ease, color 50ms ease !important;
  }
  .m-sidebar-footer-btn:hover { background: rgba(0,0,0,0.04) !important; color: #4a4e69 !important; }
  [data-theme="dark"] .m-sidebar-footer-btn { color: #5a5a5f !important; }
  [data-theme="dark"] .m-sidebar-footer-btn:hover { background: rgba(255,255,255,0.05) !important; color: #8c8c91 !important; }
  .m-sidebar-footer-btn svg { width: 16px !important; height: 16px !important; }

  /* Balance button */
  .m-sidebar-balance {
    font-size: 12px !important; font-weight: 400 !important; color: #4a4e69 !important;
    height: 28px !important; padding: 0 8px !important; border-radius: 6px !important;
    transition: background 50ms ease, color 50ms ease !important;
  }
  .m-sidebar-balance:hover { background: rgba(0,0,0,0.04) !important; color: #1a1d2e !important; }
  [data-theme="dark"] .m-sidebar-balance { color: #8c8c91 !important; }
  [data-theme="dark"] .m-sidebar-balance:hover { background: rgba(255,255,255,0.05) !important; color: #e4e4e7 !important; }

  /* ── Resize handle ── */
  /* Prototype: position absolute right -1px, width 3px, hover 4px bg #1a1a1a */
  .m-sidebar-resize-handle {
    position: absolute !important; right: -1px !important; left: auto !important;
    top: 0 !important; bottom: 0 !important; width: 3px !important;
    cursor: col-resize !important; z-index: 10 !important; background: transparent !important;
    transition: background 150ms ease, width 150ms ease !important;
  }
  .m-sidebar-resize-handle:hover,
  .m-sidebar-resize-handle.active {
    width: 4px !important; background: #1a1a1a !important;
  }
  [data-theme="dark"] .m-sidebar-resize-handle:hover,
  [data-theme="dark"] .m-sidebar-resize-handle.active {
    background: #ffffff !important;
  }

  /* ── Folder chevron — override mobile display:none ── */
  /* Prototype: 14px, #8b8fa3, opacity 0, show on hover, rotate -90deg when collapsed */
  .m-sidebar-folder-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .m-sidebar-folder-header.collapsed .m-sidebar-folder-chevron {
    transform: rotate(-90deg) !important;
  }

  /* ── Folder dot — prototype: 6x6 circle, expanded pulse ── */
  .m-sidebar-folder-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    transition: box-shadow 200ms ease !important;
  }
  /* Expanded folder dot — subtle pulse ring */
  .m-sidebar-folder-header:not(.collapsed) .m-sidebar-folder-dot {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
  }
  .m-sidebar-folder-header.collapsed .m-sidebar-folder-dot {
    box-shadow: none !important;
  }
  [data-theme="dark"] .m-sidebar-folder-header:not(.collapsed) .m-sidebar-folder-dot {
    box-shadow: 0 0 0 3px rgba(255,255,255,0.08) !important;
  }

  /* ── Folder children container — override mobile styles ── */
  /* Prototype: padding-left 16px, max-height transition, no indent guide */
  .m-sidebar-folder-children {
    padding-left: 12px !important;
    overflow: hidden !important;
    transition: max-height 200ms ease, opacity 200ms ease !important;
  }
  /* Hide VS Code indent guide on desktop */
  .m-sidebar-folder-children::before {
    display: none !important;
  }
  /* Collapsed state */
  .m-sidebar-folder-children.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }



  /* ── Folder count (on hover) ── */
  .m-sidebar-folder-count {
    font-size: 10px !important;
    color: #8b8fa3 !important;
    margin-right: 2px !important;
    opacity: 0 !important;
    transition: opacity 100ms ease !important;
  }
  .m-sidebar-folder-header:hover .m-sidebar-folder-count {
    opacity: 1 !important;
  }
  [data-theme="dark"] .m-sidebar-folder-count {
    color: #5a5a5f !important;
  }

  /* ── Section content — smooth collapse/expand (override mobile display:none) ── */
  .m-sidebar-section-content {
    overflow: hidden !important;
    transition: max-height 200ms ease, opacity 200ms ease !important;
    max-height: 2000px !important;
    opacity: 1 !important;
    display: block !important;
  }
  .m-sidebar-section.collapsed .m-sidebar-section-content,
  .m-sidebar-section-content.collapsed {
    max-height: 0 !important;
    opacity: 0 !important;
    display: block !important;
    pointer-events: none !important;
  }

  /* ── Section chevron — prototype: opacity 0, hover show ── */
  .m-sidebar-section-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .m-sidebar-section.collapsed .m-sidebar-section-chevron {
    transform: rotate(-90deg) !important;
  }

  /* ── Section label hover underline (prototype) ── */
  .m-sidebar-section-label {
    position: relative !important;
  }
  .m-sidebar-section-label::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -1px !important;
    width: 0 !important;
    height: 1px !important;
    background: #4a4e69 !important;
    transition: width 150ms ease !important;
  }
  .m-sidebar-section-header:hover .m-sidebar-section-label::after {
    width: 100% !important;
  }
  [data-theme="dark"] .m-sidebar-section-label::after {
    background: #8c8c91 !important;
  }

  /* ── Section badge — override mobile pill bg ── */
  .m-sidebar-section-badge {
    font-size: 9px !important;
    font-weight: 500 !important;
    color: #8b8fa3 !important;
    background: rgba(0,0,0,0.06) !important;
    padding: 1px 5px !important;
    border-radius: 8px !important;
    margin-left: 4px !important;
    line-height: 1.3 !important;
    opacity: 0 !important;
    transition: opacity 100ms ease !important;
  }
  .m-sidebar-section-header:hover .m-sidebar-section-badge {
    opacity: 1 !important;
  }
  [data-theme="dark"] .m-sidebar-section-badge {
    color: #5a5a5f !important;
    background: rgba(255,255,255,0.06) !important;
  }

  /* ── Item active press (prototype) ── */
  .m-sidebar-item:active .m-sidebar-item-content {
    background: rgba(0,0,0,0.08) !important;
    transition-duration: 0ms !important;
  }
  [data-theme="dark"] .m-sidebar-item:active .m-sidebar-item-content {
    background: rgba(255,255,255,0.10) !important;
  }

  /* ── Desktop context menu popover ── */
  /* Override mobile bottom-sheet to popover style */
  .m-context-backdrop,
  .m-folder-menu-backdrop {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 9890 !important;
  }
  .m-context-menu {
    position: fixed !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 180px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    border-radius: 10px !important;
    padding: 4px !important;
    z-index: 9901 !important;
    transform: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 120ms ease, transform 120ms ease !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04) !important;
    overflow: visible !important;
  }
  [data-theme="dark"] .m-context-menu {
    background: #18181b !important;
    border-color: rgba(255,255,255,0.10) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) !important;
  }
  .m-context-menu.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* Hide the mobile title header */
  .m-context-title,
  .m-context-menu-title {
    display: none !important;
  }

  /* Context menu items — compact popover style */
  .m-context-menu-item {
    gap: 10px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    border-radius: 7px !important;
    color: #1a1d2e !important;
    transition: background 50ms ease !important;
    line-height: 1 !important;
  }
  .m-context-menu-item:hover {
    background: rgba(0,0,0,0.04) !important;
  }
  .m-context-menu-item:active {
    background: rgba(0,0,0,0.08) !important;
    transition-duration: 0ms !important;
  }
  [data-theme="dark"] .m-context-menu-item {
    color: #e4e4e7 !important;
  }
  [data-theme="dark"] .m-context-menu-item:hover {
    background: rgba(255,255,255,0.05) !important;
  }
  [data-theme="dark"] .m-context-menu-item:active {
    background: rgba(255,255,255,0.10) !important;
  }

  /* Context icon badge — remove mobile pill style, use inline icon */
  .m-context-menu-item .m-ctx-icon {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
    border-radius: 0 !important;
    background: none !important;
    color: #4a4e69 !important;
  }
  .m-context-menu-item .m-ctx-icon svg {
    width: 15px !important;
    height: 15px !important;
  }
  [data-theme="dark"] .m-context-menu-item .m-ctx-icon {
    color: #8c8c91 !important;
  }

  /* Danger items */
  .m-context-menu-item.danger {
    color: #c53030 !important;
  }
  .m-context-menu-item.danger .m-ctx-icon {
    background: none !important;
    color: #c53030 !important;
  }
  .m-context-menu-item.danger:hover {
    background: rgba(197, 48, 48, 0.06) !important;
  }
  .m-context-menu-item.danger:active {
    background: rgba(197, 48, 48, 0.12) !important;
  }
  [data-theme="dark"] .m-context-menu-item.danger {
    color: #fc8181 !important;
  }
  [data-theme="dark"] .m-context-menu-item.danger .m-ctx-icon {
    color: #fc8181 !important;
  }
  [data-theme="dark"] .m-context-menu-item.danger:hover {
    background: rgba(252, 129, 129, 0.08) !important;
  }

  /* Context separator — compact */
  .m-context-separator {
    height: 1px !important;
    background: rgba(0,0,0,0.06) !important;
    margin: 3px 6px !important;
  }
  [data-theme="dark"] .m-context-separator {
    background: rgba(255,255,255,0.06) !important;
  }

  /* Context actions wrapper — no padding (popover padding is 4px) */
  .m-context-actions {
    padding: 0 !important;
  }

  /* ── Narrow sidebar adaptation (prototype) ── */
  .m-sidebar-drawer[style*="width"] .m-sidebar-section-badge,
  .m-sidebar-drawer[style*="width"] .m-sidebar-folder-count,
  .m-sidebar-drawer[style*="width"] .m-sidebar-search-shortcut {
    /* These are already hidden via opacity; narrow adaptation handled by JS */
  }

  /* ── Keyboard nav focus ring ── */
  .m-sidebar-item:focus-visible {
    outline: 2px solid #1a1a1a !important;
    outline-offset: -1px !important;
    border-radius: 8px !important;
  }
  .m-sidebar-folder-header:focus-visible {
    outline: 2px solid #1a1a1a !important;
    outline-offset: -1px !important;
    border-radius: 8px !important;
  }
  [data-theme="dark"] .m-sidebar-item:focus-visible,
  [data-theme="dark"] .m-sidebar-folder-header:focus-visible {
    outline-color: #ffffff !important;
  }

  /* ── New button active press (prototype) ── */
  .m-sidebar-new-btn:active {
    transform: scale(0.98) !important;
    transition-duration: 0ms !important;
  }

  /* ── Inline rename input (prototype .inline-rename-input) ── */
  .m-sidebar-inline-rename {
    font-size: 13px !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    color: #1a1d2e !important;
    background: #ffffff !important;
    border: 1.5px solid #1a1a1a !important;
    border-radius: 5px !important;
    padding: 2px 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    outline: none !important;
    box-sizing: border-box !important;
    flex: 1 !important;
  }
  [data-theme="dark"] .m-sidebar-inline-rename {
    color: #e4e4e7 !important;
    background: #18181b !important;
    border-color: #ffffff !important;
  }

  /* ── Desktop context menu: popover (not bottom sheet) ── */
  /* duplicate context menu block removed — styles already at line ~1503 */

}

@media (min-width: 1024px) {
  /* .m-toolbar hidden via 768px rule */
}

/* ── Keyframes for desktop sidebar (must be outside @media) ── */
@keyframes sidebarFolderChildIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}