/* =====================================================================
   Kvill — Mobile CSS Module
   Loaded on /app route (adaptive desktop+mobile)
   Dependencies: style.css (tokens), mobile-animations.css (keyframes)

   Sections:
   1.  Mobile Custom Properties
   2.  Mobile Reset & Base
   3.  Auth Overlay
   4.  Toolbar
   5.  Empty State
   6.  Slide Feed
   7.  FAB Group
   8.  Chat Panel
   9.  Scrim
   10. Drag Handle
   11. Fullscreen Overlay
   12. Sidebar Drawer (incl. Sections, Folders, Actions, Context Menu)
   13. Loading States
   14. Toast Notifications
   15. Breakpoint Overrides
   16. Accessibility
   17. iOS Safari Fixes
   ===================================================================== */


/* =====================================================================
   1. MOBILE CUSTOM PROPERTIES
   Mobile-only tokens with --m- prefix.
   Shared tokens (--canvas, --text-*, --accent-*, etc.) come from style.css.
   ===================================================================== */

:root {
  --m-fab-size: 56px;
  --m-fab-secondary-size: 48px;
  --m-fab-bg: rgba(255, 255, 255, 0.72);
  --m-fab-bg-hover: rgba(255, 255, 255, 0.88);
  --m-fab-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
  --m-fab-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.10);
  --m-panel-bg: rgba(255, 255, 255, 0.82);
  --m-panel-border: rgba(0, 0, 0, 0.06);
  --m-panel-shadow: 0 12px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  --m-sidebar-bg: #ffffff;
  /* Neutral accent — graphite instead of black */
  --accent-blue: #36363e;
  --accent-blue-hover: #2e2e35;
  --m-accent-faded: rgba(0, 0, 0, 0.25);
  --m-msg-user-bg: rgba(0, 0, 0, 0.04);
  --m-msg-ai-bg: rgba(255, 255, 255, 0.92);
  --m-msg-ai-border: rgba(0, 0, 0, 0.08);
  --m-toolbar-bg: rgba(255, 255, 255, 0.78);
  --m-toolbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  --m-safe-top: env(safe-area-inset-top, 0px);
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-vvh: 100dvh;
  --m-keyboard-height: 0px;
}

[data-theme="dark"] {
  --m-fab-bg: rgba(36, 36, 40, 0.78);
  --m-fab-bg-hover: rgba(44, 44, 48, 0.90);
  --m-fab-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.25);
  --m-fab-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.30);
  --m-panel-bg: rgba(28, 28, 32, 0.88);
  --m-panel-border: rgba(255, 255, 255, 0.06);
  --m-panel-shadow: 0 12px 48px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.30);
  --m-msg-user-bg: rgba(255, 255, 255, 0.06);
  --m-msg-ai-bg: rgba(255, 255, 255, 0.10);
  --m-msg-ai-border: rgba(255, 255, 255, 0.08);
  --m-sidebar-bg: #18181b;
  /* Neutral accent — soft gray for dark mode */
  --accent-blue: #8b8b96;
  --accent-blue-hover: #9d9da8;
  --m-accent-faded: rgba(255, 255, 255, 0.25);
  --m-toolbar-bg: rgba(24, 24, 27, 0.82);
  --m-toolbar-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}


/* =====================================================================
   2. MOBILE RESET & BASE
   ===================================================================== */

body {
  font-family: var(--font-body);
  background: var(--canvas);
  color: var(--text-1);
  width: 100%;
  height: 100dvh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  overscroll-behavior: none;
  overflow: hidden;
}

/* Main app container — fills viewport, flex column */
.m-app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  height: 100vh;
  overflow: hidden;
}

/* Main content area — wraps toolbar + slide feed.
   On mobile: acts as simple flex column (same as .m-app).
   On desktop (>=768px): takes remaining space after sidebar. */
.m-app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}


/* =====================================================================
   3. AUTH OVERLAY
   Full-screen centered card with glassmorphism.
   ===================================================================== */

.m-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.m-auth-card {
  width: 100%;
  max-width: 380px;
  padding: 32px 28px;
  background: var(--bg-solid);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Logo block */
.m-auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
}

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

.m-auth-logo .logo-mark::before,
.m-auth-logo .logo-mark::after {
  width: 23px;
  height: 18px;
}

.m-auth-logo .logo-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.5px;
}

/* Input */
.m-auth-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 16px; /* Prevents iOS zoom on focus */
  line-height: 48px;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.m-auth-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.m-auth-input::placeholder {
  color: var(--text-2);
}

/* Primary CTA button */
.m-btn-primary {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--canvas);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.m-btn-primary:hover {
  background: var(--accent-hover);
}

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

.m-btn-primary:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Google sign-in: overlay-trick — visible custom button + invisible GIS button on top */
.m-google-shell {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.m-btn-google {
  width: 100%;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-solid);
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: none; /* clicks pass through to invisible GIS iframe above */
}

.m-google-shell:hover .m-btn-google {
  background: var(--bg-input);
  border-color: var(--border-hover);
}

.m-google-shell:active .m-btn-google {
  transform: scale(0.97);
}

.m-btn-google svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Невидимая Google кнопка поверх кастомного скина — реальный user-gesture */
.m-google-shell-anchor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

.m-google-shell-anchor > div,
.m-google-shell-anchor iframe {
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
}

/* Error message */
.m-auth-error {
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-xs);
  color: #dc2626;
  font-size: 13px;
  line-height: 1.4;
}

[data-theme="dark"] .m-auth-error {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

/* Email badge (shown after email step) */
.m-auth-email-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  align-self: center;
}

/* Divider with text */
.m-auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

.m-auth-divider::before,
.m-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Footer links */
.m-auth-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
}

.m-auth-links a {
  color: var(--accent-blue);
  text-decoration: none;
}

.m-auth-links a:active {
  opacity: 0.7;
}

/* Consent text */
.m-auth-consent {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-2);
  text-align: center;
}

.m-auth-consent a {
  color: var(--text-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Confirmation icon (for email code sent screen) */
.m-auth-confirm-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent-blue);
}

.m-auth-confirm-icon svg {
  width: 28px;
  height: 28px;
}

.m-auth-confirm-text {
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-1);
}


/* =====================================================================
   4. TOOLBAR
   Sticky top bar with glassmorphism, safe-area padding.
   ===================================================================== */

.m-toolbar {
  flex-shrink: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  padding-top: max(8px, var(--m-safe-top));
  background: var(--m-toolbar-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--m-toolbar-shadow);
}

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

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

.m-toolbar-btn svg {
  width: 20px;
  height: 20px;
}

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

.m-toolbar-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}

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

/* Slide counter pill */
.m-slide-counter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--bg-input);
  padding: 3px 10px;
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
}

/* Toolbar actions group */
.m-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Slide nav pill — HIDDEN (scroll is enough on both mobile and desktop) ── */
.m-slide-nav {
  display: none !important;
}

.m-slide-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.m-slide-nav-btn:active {
  background: var(--bg-input);
}

.m-slide-nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.m-slide-nav-btn svg {
  width: 18px;
  height: 18px;
}

.m-slide-nav-counter {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  min-width: 48px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  user-select: none;
}


/* =====================================================================
   5. EMPTY STATE
   Shown when no presentation is loaded.
   ===================================================================== */

/* ═══════ Hero state (empty — no presentation loaded) ═══════ */

.m-hero-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 120px;
  gap: 28px;
}

/* Demo slide cards — floating animated mockups */
.m-demo-slides {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 360px;
}

.m-demo-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
  overflow: hidden;
}

/* Accent strip at top of each card */
.m-demo-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-blue));
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Placeholder lines */
.m-demo-line {
  border-radius: 4px;
  background: var(--bg-input);
}

.m-demo-title-line {
  width: 55%;
  height: 12px;
  margin-bottom: 10px;
  background: var(--bg-input-hover);
}

.m-demo-text-line {
  width: 85%;
  height: 7px;
  margin-bottom: 6px;
}

.m-demo-text-line.short {
  width: 50%;
}

/* Mini chart in card 1 */
.m-demo-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 36px;
  margin-top: auto;
  padding-top: 8px;
}

.m-demo-bar {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, var(--accent), var(--accent-blue));
  opacity: 0.6;
  animation: m-demo-bar-grow 3s ease-in-out infinite alternate;
}

.m-demo-bar:nth-child(1) { animation-delay: 0s; }
.m-demo-bar:nth-child(2) { animation-delay: 0.3s; }
.m-demo-bar:nth-child(3) { animation-delay: 0.6s; }
.m-demo-bar:nth-child(4) { animation-delay: 0.9s; }

@keyframes m-demo-bar-grow {
  0%   { transform: scaleY(0.7); }
  100% { transform: scaleY(1); }
}

/* Dots in card 2 */
.m-demo-dots {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.m-demo-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-input-hover);
  animation: m-demo-pulse 2.5s ease-in-out infinite;
}

.m-demo-dot:nth-child(1) { animation-delay: 0s; }
.m-demo-dot:nth-child(2) { animation-delay: 0.4s; }
.m-demo-dot:nth-child(3) { animation-delay: 0.8s; }

@keyframes m-demo-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* Tagline under demo slides */
.m-hero-tagline {
  color: var(--text-2);
  font-size: 13px;
  font-weight: 400;
  text-align: center;
  padding: 8px 20px;
  letter-spacing: -0.01em;
  margin-bottom: 80px;
}

@media (prefers-reduced-motion: reduce) {
  .m-demo-card,
  .m-demo-bar,
  .m-demo-dot {
    animation: none;
  }
}



/* =====================================================================
   6. SLIDE FEED
   Vertical scroll of slide cards.
   ===================================================================== */

.m-slide-feed {
  flex: 1;
  min-height: 0;
  padding: 12px;
  padding-bottom: calc(80px + var(--m-safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
  overscroll-behavior: contain;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Floating stop button (visible during generation) ── */
.m-stop-fab {
  position: fixed;
  bottom: calc(24px + var(--m-safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9500;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid #ef4444;
  border-radius: 999px;
  background: var(--bg-solid);
  color: #ef4444;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.25);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.m-stop-fab.visible {
  display: flex;
}
.m-stop-fab:active {
  transform: translateX(-50%) scale(0.95);
}
.m-stop-fab svg {
  width: 16px;
  height: 16px;
}

.m-slide-card {
  width: 100%;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg-solid);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s var(--ease);
}

.m-slide-card:active {
  transform: scale(0.985);
}

/* Active slide highlight */
.m-slide-card.active {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--accent-glow);
}

/* Slide number badge */
.m-slide-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  background: var(--bg-glass-strong);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  pointer-events: none;
}

/* Canvas wrapper — maintains aspect ratio */
.m-slide-canvas-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

/* Actual 1920x1080 content scaled down (div or iframe) */
.m-slide-canvas,
.m-slide-canvas iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: top left;
  overflow: hidden;
  pointer-events: none;
  border: none;
}


/* → mobile/fab.css */
/* → mobile/chat.css */
/* =====================================================================
   11. FULLSCREEN OVERLAY
   Full-screen slide viewer with prev/next navigation.
   ===================================================================== */

.m-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: flex;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  outline: none;
}
.m-fullscreen.m-fs-active {
  visibility: visible;
  pointer-events: auto;
  /* No animation here — CSS animations on the fullscreen element
     break Chrome's visual fullscreen transition (known Chromium bug) */
}

@keyframes m-fs-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Close button — top-right, glass pill */
.m-fs-close {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: all 0.2s ease;
}

.m-fs-close svg {
  width: 18px;
  height: 18px;
}

.m-fs-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Slide container — fills entire viewport */
.m-fs-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Canvas — 1920x1080, positioned absolutely, JS sets scale + left/top */
.m-fs-canvas {
  position: absolute;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  background: #000;
  border: none;
  overflow: hidden;
  pointer-events: none; /* Prevent iframe from stealing focus */
  will-change: transform;
  -webkit-backface-visibility: hidden;
}

/* Bottom navigation bar — floating centered pill */
.m-fs-nav {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10001;
}

/* Prev/Next buttons */
.m-fs-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: all 0.2s ease;
}

.m-fs-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.m-fs-btn:active {
  background: rgba(255, 255, 255, 0.25);
}

.m-fs-btn svg {
  width: 18px;
  height: 18px;
}

.m-fs-btn:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Slide counter */
.m-fs-counter {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 50px;
  text-align: center;
}

/* Auto-hide nav/close in fullscreen (show on mouse move) */
.m-fullscreen .m-fs-close,
.m-fullscreen .m-fs-nav {
  transition: opacity 0.4s ease;
}
.m-fullscreen.m-fs-autohide .m-fs-close,
.m-fullscreen.m-fs-autohide .m-fs-nav {
  opacity: 0;
  pointer-events: none;
}


/* → mobile/sidebar.css */
/* → mobile/sheets.css */
/* → mobile/loading.css */
/* =====================================================================
   13B. RECONNECT BANNER
   Fixed top bar shown while attemptReconnect() retries after an SSE
   disconnect (graceful deploy / transient network). Slides in from above.
   ===================================================================== */

.m-reconnect-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11500;
  padding: calc(10px + var(--m-safe-top)) 16px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: color-mix(in srgb, var(--m-fab-bg) 85%, #f59e0b);
  border-bottom: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  transform: translateY(-110%);
  transition: transform 0.3s var(--ease-spring);
  pointer-events: none;
}

.m-reconnect-banner.visible {
  transform: translateY(0);
  pointer-events: auto;
}

.m-reconnect-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(245, 158, 11, 0.35);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: m-reconnect-spin 0.9s linear infinite;
}

@keyframes m-reconnect-spin {
  to { transform: rotate(360deg); }
}

/* =====================================================================
   14. TOAST NOTIFICATIONS
   Fixed bottom-center notification pills above the FAB group.
   ===================================================================== */

.m-toast-container {
  position: fixed;
  bottom: calc(90px + var(--m-safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 11000;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.m-toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--m-fab-bg);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-0);
  max-width: min(400px, calc(100vw - 32px));
  text-align: center;
  pointer-events: auto;
  animation: m-toast-in 0.35s var(--ease-spring) both;
}

.m-toast.warning {
  border-color: rgba(245, 158, 11, 0.25);
  background: color-mix(in srgb, var(--m-fab-bg) 92%, #f59e0b);
}

.m-toast.error {
  border-color: rgba(239, 68, 68, 0.25);
  background: color-mix(in srgb, var(--m-fab-bg) 92%, #ef4444);
}

@keyframes m-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.m-toast.exit {
  animation: m-toast-out 0.2s var(--ease) forwards;
}

@keyframes m-toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
}

.m-toast-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.m-toast.success .m-toast-icon {
  color: #22c55e;
}

.m-toast.error .m-toast-icon {
  color: #ef4444;
}

.m-toast.info .m-toast-icon {
  color: var(--accent-blue);
}

.m-toast.warning .m-toast-icon {
  color: #f59e0b;
}


/* =====================================================================
   15. BREAKPOINT OVERRIDES
   Phone-specific adjustments for narrow viewports.
   ===================================================================== */

@media (max-width: 480px) {
  /* FAB position tighter to edge */
  .m-fab-group {
    bottom: calc(12px + var(--m-safe-bottom));
    right: 12px;
  }

  /* Chat panel goes full-width */
  .m-chat-panel {
    left: 8px;
    right: 8px;
    bottom: calc(8px + var(--m-safe-bottom));
    width: auto;
    height: min(70vh, calc(var(--m-vvh, 100dvh) - 60px));
    max-height: calc(var(--m-vvh, 100dvh) - 60px);
    border-radius: 16px;
    transform-origin: calc(100% - 8px) 100%;
  }

  /* Messages slightly wider */
  .m-chat-msg {
    max-width: 90%;
    font-size: 14px;
  }

  /* 16px input prevents iOS zoom */
  .m-chat-input {
    font-size: 16px;
  }

  /* Ensure 44x44 tap targets */
  .m-chat-close-btn {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
  }

  /* Sidebar takes more width */
  .m-sidebar-drawer {
    width: min(300px, 90vw);
  }

  /* Toast above FAB */
  .m-toast-container {
    bottom: calc(80px + var(--m-safe-bottom));
    max-width: calc(100vw - 32px);
  }

  .m-toast {
    font-size: 12px;
    padding: 8px 16px;
  }
}


/* =====================================================================
   16. ACCESSIBILITY
   Respect user's reduced-motion preference.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .m-fab-btn,
  .m-chat-panel,
  .m-chat-msg,
  .m-fab-badge,
  .m-fab-chat-icon,
  .m-fab-chat-close-icon,
  .m-slide-card,
  .m-fab-wrap,
  .m-fab-popup,
  .m-fab-label,
  .m-composer-action-btn,
  .m-sidebar-drawer,
  .m-sidebar-scrim,
  .m-sidebar-section-chevron,
  .m-sidebar-folder-chevron,
  .m-sidebar-folder-children,
  .m-context-backdrop,
  .m-context-menu,
  .m-scrim,
  .m-toast,
  .m-fullscreen,
  .m-drag-handle {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .m-skeleton,
  .m-slide-skeleton,
  .m-shimmer-overlay,
  .m-shimmer-aurora,
  .m-shimmer-sweep,
  .m-chat-shimmer .m-shimmer-text {
    animation: none;
    background: var(--bg-input);
  }

  .m-reassurance,
  .m-reassurance.fade-out {
    animation-duration: 0.01ms !important;
  }

  .m-typing-dot {
    animation: none;
    opacity: 0.5;
  }

  .m-typing-dot:nth-child(1) { opacity: 0.35; }
  .m-typing-dot:nth-child(2) { opacity: 0.55; }
  .m-typing-dot:nth-child(3) { opacity: 0.75; }
}


/* =====================================================================
   17. iOS SAFARI FIXES
   Workarounds for Safari-specific rendering quirks.
   ===================================================================== */

/* Suppress tap highlight everywhere */
.m-toolbar-btn,
.m-fab-btn,
.m-slide-card,
.m-chat-close-btn,
.m-chat-send,
.m-composer-action-btn,
.m-composer-circle-btn,
.m-composer-send,
.m-fs-close,
.m-fs-btn,
.m-sidebar-close,
.m-sidebar-new-btn,
.m-sidebar-item,
.m-sidebar-footer-btn,
.m-sidebar-section-header,
.m-sidebar-folder-header,
.m-sidebar-more-btn,
.m-context-menu-item,
.m-context-cancel,
.m-btn-primary,
.m-btn-google,
.m-fab-popup-btn {
  -webkit-tap-highlight-color: transparent;
}

/* Manipulation touch-action on all buttons */
.m-toolbar-btn,
.m-fab-btn,
.m-chat-close-btn,
.m-chat-send,
.m-composer-action-btn,
.m-composer-circle-btn,
.m-composer-send,
.m-fs-close,
.m-fs-btn,
.m-sidebar-close,
.m-sidebar-new-btn,
.m-sidebar-item,
.m-sidebar-footer-btn,
.m-sidebar-more-btn,
.m-context-menu-item,
.m-context-cancel,
.m-btn-primary,
.m-btn-google,
.m-fab-popup-btn {
  touch-action: manipulation;
}

/* Overscroll containment */
.m-slide-feed,
.m-chat-messages,
.m-sidebar-list {
  overscroll-behavior: contain;
}

/* 100dvh fallback */
.m-fullscreen,
.m-auth-overlay {
  height: 100vh;
  height: 100dvh;
}

@supports (-webkit-touch-callout: none) {
  .m-chat-panel,
  .m-toolbar {
    isolation: isolate;
  }

  /* Fix iOS rubber-band scrolling interference with panels */
  .m-chat-panel,
  .m-sidebar-drawer {
    -webkit-overflow-scrolling: auto;
  }
}

/* Logo marks (reused in auth and sidebar) — two overlapping slides */
.logo-mark {
  display: block;
  position: relative;
  width: 28px;
  height: 24px;
  flex-shrink: 0;
}

.logo-mark::before,
.logo-mark::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--text-1);
}

.logo-mark::before {
  top: 0;
  left: 0;
  background: var(--accent-subtle);
}

.logo-mark::after {
  bottom: 0;
  right: 0;
  background: var(--accent-subtle);
}

.logo-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-0);
  letter-spacing: -0.5px;
}

/* → mobile/brand-picker.css */
/* =====================================================================
   18c. FILE BADGE (attached file chip above composer)
   ===================================================================== */

/* ── File chips (above composer) ── */
.m-composer-files {
  display: flex;
  gap: 6px;
  padding: 8px 12px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: 1px solid var(--border);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.m-composer-files::-webkit-scrollbar {
  display: none;
}

.m-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 8px;
  background: var(--m-msg-user-bg, rgba(0,0,0,0.04));
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-1);
  animation: m-fade-in 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.m-file-chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-file-chip-remove {
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s;
}

.m-file-chip-remove:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Loading state */
.m-file-chip.loading {
  opacity: 0.7;
}
.m-file-chip-spinner {
  width: 10px;
  height: 10px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  animation: m-chip-spin 0.6s linear infinite;
}
@keyframes m-chip-spin {
  to { transform: rotate(360deg); }
}


/* =====================================================================
   18d. PAYWALL BANNER
   ===================================================================== */

.m-paywall-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0 10px 4px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, rgba(59, 130, 246, 0.04) 100%);
  border: 1px solid rgba(37, 99, 235, 0.12);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-1);
  flex-shrink: 0;
}

.m-paywall-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0071e3, #2997ff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.m-paywall-icon svg {
  width: 16px;
  height: 16px;
  color: #fff;
}

.m-paywall-body { flex: 1; min-width: 0; }
.m-paywall-title { font-weight: 600; font-size: 13px; color: var(--text-0); line-height: 1.3; }
.m-paywall-sub { font-size: 11px; color: var(--text-2); margin-top: 1px; }

.m-paywall-topup-btn {
  padding: 6px 16px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: var(--canvas, #fff);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.m-paywall-topup-btn:active {
  transform: scale(0.96);
}

/* =====================================================================
   18e. DRAG OVER STATE
   ===================================================================== */

/* Full-page drop overlay */
.m-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.m-drop-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.m-drop-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 48px;
  border-radius: 20px;
  background: var(--bg-glass-strong);
  border: 2px dashed var(--accent);
  box-shadow: var(--shadow-lg);
}
.m-drop-overlay-icon {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
}
.m-drop-overlay-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  font-family: var(--font-body);
}


/* =====================================================================
   19. DESKTOP LAYOUT — TABLET (>=768px)
   Sidebar pinned left, main content pushed right.
   Chat panel as floating window instead of bottom sheet.
   ===================================================================== */

@media (min-width: 768px) {

  /* ── App container: horizontal layout ── */
  .m-app {
    flex-direction: row;
    height: 100dvh;
    height: 100vh;
  }

  /* ── Sidebar: always visible, pinned left ── */
  .m-sidebar-scrim {
    display: none;
  }

  .m-sidebar-drawer {
    position: relative;
    transform: none;
    width: var(--m-sidebar-width, 180px);
    min-width: var(--m-sidebar-width, 180px);
    z-index: auto;
    border-right: 1px solid var(--sidebar-border, var(--border));
    box-shadow: none;
    transition: width 0.3s var(--ease), min-width 0.3s var(--ease);
  }

  /* Disable transition during drag for instant feedback */
  .m-sidebar-drawer.is-resizing {
    transition: none;
  }

  .m-sidebar-drawer.open {
    transform: none;
  }

  /* Collapsed sidebar — show icon strip */
  .m-sidebar-drawer.m-sidebar-collapsed {
    width: 48px;
    min-width: 48px;
    overflow: hidden;
  }

  .m-sidebar-drawer.m-sidebar-collapsed .m-sidebar-content {
    opacity: 0;
    pointer-events: none;
    width: 0;
    overflow: hidden;
  }

  .m-sidebar-drawer.m-sidebar-collapsed .m-sidebar-strip {
    display: flex;
  }

  /* Collapsed strip layout */
  .m-sidebar-strip {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    width: 48px;
    min-width: 48px;
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .m-sidebar-collapsed-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  .m-sidebar-collapsed-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .m-sidebar-collapsed-icon {
    position: relative;
    width: 32px;
    height: 32px;
    cursor: pointer;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .m-sidebar-collapsed-icon .logo-mark {
    width: 24px;
    height: 20px;
    transition: opacity 0.15s var(--ease);
  }

  .m-sidebar-collapsed-icon .logo-mark::before,
  .m-sidebar-collapsed-icon .logo-mark::after {
    width: 17px;
    height: 14px;
    border-radius: 4px;
  }

  .m-sidebar-expand-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    color: var(--text-1);
    transition: opacity 0.15s var(--ease);
  }

  .m-sidebar-collapsed-icon:hover .logo-mark {
    opacity: 0;
  }

  .m-sidebar-collapsed-icon:hover .m-sidebar-expand-icon {
    opacity: 1;
  }

  .m-sidebar-collapsed-btn {
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s var(--ease);
    padding: 0;
  }

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

  .m-sidebar-collapsed-balance {
    font-size: 10px;
    font-weight: 500;
    font-family: var(--font-display);
  }

  /* Show desktop-only collapse button (+ is permanently hidden) */
  .m-sidebar-collapse-btn {
    display: flex;
  }

  /* Keep "Новая презентация" big button visible on desktop */

  /* Sidebar header: match desktop compact padding */
  .m-sidebar-header {
    padding: 12px 10px 8px;
    padding-top: 12px;
  }

  /* Sidebar resize handle (draggable edge) */
  .m-sidebar-resize-handle {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background 0.15s;
  }
  .m-sidebar-resize-handle:hover,
  .m-sidebar-resize-handle.active {
    background: var(--accent-blue);
  }

  /* ── Main content wrapper: column layout taking remaining space ── */
  .m-app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100dvh;
    height: 100vh;
    overflow: hidden;
  }

  /* ── Toolbar: HIDDEN on desktop (sidebar has its own header) ── */
  .m-toolbar {
    display: none !important;
  }

  /* ── Slide feed starts from top since toolbar is hidden ── */
  .m-slide-feed {
    padding-top: 16px;
  }

  /* ── Slide feed: centered with max-width, account for FAB area ── */
  .m-slide-feed {
    padding: 16px 104px 32px 32px;
    gap: 16px;
    align-items: center;
  }

  .m-slide-card {
    max-width: 900px;
    width: 100%;
  }

  .m-hero-state {
    padding: 48px 32px 60px;
    gap: 32px;
  }

  .m-demo-slides {
    max-width: 480px;
  }

  /* ── FAB group: adjust position for desktop ── */
  .m-fab-group {
    right: 24px;
    bottom: calc(24px + var(--m-safe-bottom));
  }

  /* ── Desktop: hide slide nav pill (scroll/keyboard is enough) ── */
  .m-slide-nav {
    display: none !important;
  }

  /* ── Chat panel: opens to the LEFT of the FAB, bottom-aligned ── */
  .m-chat-panel {
    bottom: calc(28px + var(--m-safe-bottom));
    right: calc(24px + var(--m-fab-size) + 12px);
    width: var(--m-chat-panel-width);
    height: min(440px, calc(100vh - 80px));
    border-radius: 16px;
    transform-origin: bottom right;
  }

  .m-chat-panel.keyboard-open {
    bottom: calc(28px + var(--m-safe-bottom));
    left: auto;
    right: calc(24px + var(--m-fab-size) + 12px);
    width: var(--m-chat-panel-width);
    border-radius: 16px;
    height: min(440px, calc(100vh - 80px));
    max-height: calc(100vh - 60px);
  }

  /* ── Chat header: keep hidden on desktop too (same as mobile) ── */

  /* ── Chat drag handle: hide on desktop ── */
  .m-chat-drag-handle {
    display: none;
  }

  /* ── Scrim: no scrim on desktop (chat doesn't block content) ── */
  .m-scrim {
    display: none;
  }

  /* ── Brand picker: reposition for desktop (left of FAB column) ── */
  .m-brand-picker {
    right: calc(24px + var(--m-fab-size) + 12px);
    bottom: calc(24px + var(--m-safe-bottom));
    max-height: min(400px, calc(100vh - 80px));
  }

  /* ── Toast: centered above content ── */
  .m-toast-container {
    bottom: 32px;
  }

  /* ── Toolbar: hidden on desktop (sidebar has branding) ── */
  #menuBtn {
    display: none;
  }
  #newPresToolbarBtn {
    display: none;
  }

  /* ── Slide nav pill: larger on desktop ── */
  .m-slide-nav {
    padding: 4px 6px;
  }

  .m-slide-nav-btn {
    width: 38px;
    height: 38px;
  }

  .m-slide-nav-btn:hover:not(:disabled) {
    background: var(--bg-input);
    color: var(--text-0);
  }

  .m-slide-nav-counter {
    font-size: 14px;
    min-width: 52px;
  }

  /* ── Fullscreen: no safe-area needed ── */
  .m-fs-nav {
    margin-bottom: 16px;
  }

  /* ── Context menu: floating card instead of bottom sheet ── */
  .m-context-menu {
    bottom: auto;
    left: auto;
    right: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    max-width: 320px;
    width: calc(100vw - 48px);
    border-radius: 14px;
    transition: transform 0.25s var(--ease-spring), opacity 0.2s var(--ease);
    opacity: 0;
  }

  .m-context-menu.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  /* ── Profile sheet: centered modal on desktop ── */
  .m-profile-sheet {
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    max-width: 400px;
    width: calc(100vw - 48px);
    border-radius: 14px;
    opacity: 0;
    transition: transform 0.25s var(--ease-spring), opacity 0.2s var(--ease);
  }

  .m-profile-sheet.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  /* ── Topup sheet: centered modal on desktop ── */
  .m-topup-sheet {
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    max-width: 520px;
    width: calc(100vw - 48px);
    border-radius: 14px;
    opacity: 0;
    transition: transform 0.25s var(--ease-spring), opacity 0.2s var(--ease);
    max-height: 85vh;
  }

  .m-topup-sheet.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  .m-usage-summary {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* ── Share sheet: centered modal on desktop ── */
  .m-share-sheet {
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    max-width: 480px;
    width: calc(100vw - 48px);
    border-radius: 20px;
    opacity: 0;
    transition: transform 0.25s var(--ease-spring), opacity 0.2s var(--ease);
    max-height: 85vh;
  }

  .m-share-sheet.visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

}


/* =====================================================================
   20. DESKTOP LAYOUT — DESKTOP (>=1024px)
   Wider sidebar, larger slide previews, more breathing room.
   ===================================================================== */

@media (min-width: 1024px) {

  /* .m-toolbar hidden via 768px media query */

  .m-slide-feed {
    padding: 32px 104px 32px 48px;
    padding-bottom: calc(40px + var(--m-safe-bottom));
    gap: 20px;
  }

  .m-hero-state {
    padding: 64px 48px 80px;
    gap: 40px;
  }

  .m-demo-slides {
    max-width: 560px;
  }

  /* Chat panel: compact, left of FAB */
  .m-chat-panel {
    width: var(--m-chat-panel-width);
    height: min(440px, calc(100vh - 80px));
  }

  .m-chat-panel.keyboard-open {
    width: var(--m-chat-panel-width);
    height: min(440px, calc(100vh - 80px));
  }
}


/* =====================================================================
   21. DESKTOP LAYOUT — WIDE (>=1440px)
   Max-width containment for ultra-wide screens.
   ===================================================================== */

@media (min-width: 1440px) {

  .m-slide-feed {
    padding: 40px 104px 48px 64px;
    padding-bottom: calc(48px + var(--m-safe-bottom));
  }

  .m-slide-card {
    max-width: 1100px;
  }

  .m-demo-slides {
    max-width: 640px;
  }

  .m-hero-state {
    padding: 80px 64px 100px;
  }
}


/* =====================================================================
   GOOGLE SIGN-IN ANCHOR
   Контейнер для встроенной Google renderButton. Кнопка стилизуется
   через Google API options (theme/shape/size) — мы только центрируем.
   ===================================================================== */