/* ═══════════════════════════════════════════════════════════════════
   Phase X.4 — Mobile-Perfect Layer
   Wird NACH mobile.css geladen → höchste Cascade-Priorität für Mobile-Fixes
   Behebt iOS-spezifische Quirks + bessere Touch-UX + neue Imagery-Anpassungen
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. dvh/svh Units für iOS-Safari URL-Bar ────────────────────────
   Problem: 100vh enthält die URL-Bar (Browser-Chrome), so dass Container
   unten von Bar überdeckt werden. dvh (dynamic viewport height) reagiert
   auf URL-Bar-State. svh (static) ist die kleinere Variante.
   Fallback-Stack: vh → dvh.
   ─────────────────────────────────────────────────────────────── */
:root {
  --vh-fix: 100vh;
}
@supports (height: 100dvh) {
  :root { --vh-fix: 100dvh; }
}

/* iOS Safari + new browsers: replace 100vh references */
html, body {
  min-height: var(--vh-fix);
}

@media (max-width: 720px) {
  /* Webchat-Shell + Identity-Editor + Docs: alle auf dvh */
  .webchat-shell {
    height: calc(var(--vh-fix) - 200px) !important;
    min-height: 360px;
  }
  #docs-shell, .docs-shell {
    min-height: calc(var(--vh-fix) - 100px) !important;
  }
  .archmap-svg {
    max-height: calc(var(--vh-fix) - 200px) !important;
  }
}

/* ── 2. iOS Safe-Area-Inset für Notch + Home-Indicator ─────────── */
@supports (padding: env(safe-area-inset-top)) {
  #header {
    padding-top: calc(0.4rem + env(safe-area-inset-top));
    padding-left: calc(0.7rem + env(safe-area-inset-left));
    padding-right: calc(0.7rem + env(safe-area-inset-right));
  }
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Bottom-fixed elements respektieren home-indicator */
  #toast-el {
    bottom: calc(0.7rem + env(safe-area-inset-bottom)) !important;
  }
  #events-ticker {
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* Login-Screen */
  #login-screen {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ── 3. Touch-Targets auf Apple-Standard 44×44px ───────────────── */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn-primary, .btn-secondary, .btn-danger, .sec-add, .nav-tab,
  .id-subnav-btn, .v-select, .crud-modal-close, .notif-bell, .cmdk-hint,
  .theme-toggle, .btn-logout, .notif-action, .notif-x, .w1-wizard-x,
  .widget-close-btn, .crud-modal-actions .btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  .chat-item { min-height: 56px; }
  .nav-tab { min-height: 44px; padding-top: 0.7rem; padding-bottom: 0.7rem; }

  /* Klickbare Sub-Items in Listen */
  .id-list-item, .webhook-list-item, .mcp-card,
  .v-channel-card, .v-health-item {
    min-height: 48px;
  }
  /* Avatar-/Icon-only Buttons */
  .notif-bell, .theme-toggle, .cmdk-hint, .btn-logout {
    padding-left: 0.7rem !important;
    padding-right: 0.7rem !important;
  }
}

/* ── 4. Tab-Nav: Edge-Fade-Indikatoren für scroll-affordance ────── */
@media (max-width: 1180px) {
  #tab-nav {
    position: relative;
    scroll-behavior: smooth;
    /* gradient masks zeigen overflow */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, black 14px, black calc(100% - 14px), transparent 100%);
  }
  /* Active-Tab indikator stärker */
  .nav-tab.active {
    position: relative;
    z-index: 1;
  }
}

/* ── 5. Header — Mini-Phone: Notif-Bell + Cmdk noch verstecken ──── */
@media (max-width: 380px) {
  /* Konsolidiere Header für Atemraum */
  .header-akh-avatar { display: none !important; }
  .header-stats { display: none !important; }
  /* Header bleibt: Logo-Sparkle + Wortmarke + Theme + Logout + Bell */
  .notif-bell {
    padding: 0.45rem 0.55rem !important;
  }
}

/* ── 6. Chat-Sidebar Drawer auf Phone (BB.10.19 — fixed) ──────────────
   Strategy: Auf Mobile wird die Sidebar ein slide-in-Drawer der LINKS
   reinkommt + Backdrop zum Dimmen. Hamburger-Button im chat-area-header
   öffnet ihn, Tap auf Chat / Backdrop / ESC schließt ihn wieder.
   ─────────────────────────────────────────────────────────────────── */
.mobile-chat-toggle { display: none; } /* default hide on desktop */
.chat-sidebar-backdrop { display: none; } /* default hide on desktop */

@media (max-width: 720px) {
  /* Hamburger-Button */
  .mobile-chat-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--ink);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    margin-right: 0.6rem;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    transition: background 160ms, border-color 160ms;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-chat-toggle:active { background: var(--bg-hover); }
  .mobile-chat-toggle[aria-expanded="true"] {
    background: var(--bg-hover);
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Chat-Tab Layout: chat-area volle Breite, sidebar absolut overlay */
  #tab-chats {
    position: relative;
    overflow: hidden;
  }
  #tab-chats #chat-area {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Sidebar als Off-canvas-Drawer */
  #tab-chats #chat-sidebar {
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 340px) !important;
    min-width: 0 !important;
    max-width: 340px;
    height: 100%;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    will-change: transform;
  }
  #tab-chats #chat-sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Backdrop */
  .chat-sidebar-backdrop {
    display: block !important;
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 49;
  }
  .chat-sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Chat-list-items: bigger tap-targets in drawer */
  #tab-chats #chat-sidebar .chat-item {
    min-height: 56px;
    padding: 0.75rem 0.9rem;
  }

  /* Sidebar-Header bekommt einen Close-Hint */
  #tab-chats #chat-sidebar .sidebar-header {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
    padding: 0.9rem 0.9rem 0.5rem;
    border-bottom: 1px solid var(--border);
  }
  #tab-chats #chat-sidebar .chat-search-wrap {
    padding: 0.5rem 0.7rem;
    background: var(--bg-card);
    position: sticky;
    top: 0;
  }
}

/* Desktop: Hamburger immer hidden */
@media (min-width: 721px) {
  .mobile-chat-toggle { display: none !important; }
  .chat-sidebar-backdrop { display: none !important; }
  /* Restore desktop sidebar layout (defensive — falls Klassen aus
     Mobile-Tap übrig blieben). */
  #tab-chats #chat-sidebar {
    position: relative !important;
    transform: none !important;
    box-shadow: none;
  }
}

/* ── 7. Login-Screen: lighter background image on phone ────────── */
@media (max-width: 720px) {
  #login-screen {
    /* CSS image-set für device-pixel-ratio-aware loading.
       Browser pickt automatisch passende Variante. */
    background-image: -webkit-image-set(
      url('img/akhilius/login-hero-pipe-1280.png') 1x,
      url('img/akhilius/login-hero-pipe-1920.png') 2x
    );
    background-image: image-set(
      url('img/akhilius/login-hero-pipe-1280.png') 1x,
      url('img/akhilius/login-hero-pipe-1920.png') 2x
    );
    background-position: 60% 50%;
    background-size: cover;
  }
  /* Login-Form vertikales spacing für comfort */
  #login-screen h1 { font-size: 1.5rem; }
  #login-screen p { font-size: 0.85rem; text-align: center; padding: 0 1rem; }
}

/* ── 8. Modal-Overlay: edge-to-edge auf phone-portrait ──────────── */
@media (max-width: 520px) {
  .crud-modal-box,
  .w1-wizard-modal,
  #widget-modal .modal-box,
  .cmdk-modal {
    max-width: 100vw !important;
    width: 100vw !important;
    max-height: var(--vh-fix) !important;
    height: var(--vh-fix) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto;
  }
  .crud-modal-overlay,
  .w1-wizard-overlay,
  #cmdk-overlay {
    padding: 0 !important;
  }
  /* Sticky-Footer für Action-Buttons */
  .crud-modal-actions {
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    padding: 0.85rem 0.95rem !important;
    border-top: 1px solid var(--border);
    margin: 1rem -0.95rem 0;
    z-index: 5;
  }
  /* Modal-X Button immer reachable, top-right floatend */
  .crud-modal-close, .w1-wizard-x, .widget-close-btn {
    position: sticky !important;
    top: 0.7rem !important;
    margin-left: auto !important;
    z-index: 10 !important;
  }
}

/* ── 9. Sticky chat-input auf phone ───────────────────────────── */
@media (max-width: 720px) {
  #chat-input-row {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 5;
    padding: 0.7rem 0.85rem !important;
  }
  @supports (padding: env(safe-area-inset-bottom)) {
    #chat-input-row {
      padding-bottom: calc(0.7rem + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ── 10. Akhilius-Imagery Mobile-Tweaks ──────────────────────── */
@media (max-width: 720px) {
  /* Hero side-image schon hidden — nichts zu tun */
  /* Login-background Stack-Order: gradient muss SICHTBAR sein */
  #login-screen::before {
    background: linear-gradient(180deg,
      var(--bg) 0%,
      rgba(245,239,231,0.92) 25%,
      rgba(245,239,231,0.55) 50%,
      rgba(245,239,231,0.85) 75%,
      var(--bg) 100%
    );
  }
  [data-theme="dark"] #login-screen::before {
    background: linear-gradient(180deg,
      var(--bg) 0%,
      rgba(38,32,26,0.92) 25%,
      rgba(38,32,26,0.6) 50%,
      rgba(38,32,26,0.85) 75%,
      var(--bg) 100%
    );
  }

  /* Akhilius-System-Banner kompakter + Caption kleiner */
  .akh-system-banner {
    height: 60px !important;
    margin-bottom: 0.9rem;
  }
  .akh-system-banner::after {
    font-size: 0.7rem !important;
    bottom: 0.35rem;
    left: 0.7rem;
    padding: 0.12rem 0.5rem;
  }

  /* Empty-state-Bilder sind schon kleiner — fine */
  .empty-state.akh-empty-image {
    min-height: 200px;
    padding: 1.4rem 0.85rem 1.1rem;
  }
  .empty-state.akh-empty-image .akh-empty-caption {
    font-size: 0.85rem;
  }

  /* Identity-Sub-Header Ornaments: weiter rein für mehr Headline-Platz */
  .id-sub-header { padding-right: 60px; }
  .id-sub-header::after { width: 44px !important; height: 36px !important; }

  /* Docs-Sidebar-Hero Höhe weiter reduziert */
  .docs-sidebar-hero { height: 70px; margin-bottom: 0.7rem; }

  /* Channels-Card Watermark stärker einblenden auf Phone (war zu sub) */
  #tab-channels .v-channel-card::after { display: none; }
}

/* ── 11. Avoid pull-to-refresh + over-scroll on body ─────────── */
@media (max-width: 720px) {
  html, body {
    overscroll-behavior-y: contain;
  }
}

/* ── 12. Smooth-scroll behavior ────────────────────────────── */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── 13. Tab-View enthält iOS bottom safe-area ───────────── */
@media (max-width: 720px) {
  .tab-view {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 14. Bessere :focus-Visible für Tastatur-User ──────────── */
@media (hover: hover) {
  /* desktop: keep current */
}
@media (hover: none) and (pointer: coarse) {
  /* mobile: aktive Buttons sollen pulse beim Tap */
  .btn:active, .btn-primary:active, .nav-tab:active, .sec-add:active {
    transform: scale(0.97);
    transition: transform 80ms ease-out;
  }
}

/* ── 15. Forms: Input-Padding für comfort ──────────────────── */
@media (max-width: 720px) {
  input[type="text"], input[type="search"], input[type="number"],
  input[type="email"], input[type="password"], input[type="date"],
  textarea, select {
    padding: 0.6rem 0.85rem !important;
  }
}

/* ── 16. Skeleton + Loading-states bei Phone weniger Padding ── */
@media (max-width: 520px) {
  .skeleton, .polish-skeleton {
    border-radius: 4px;
  }
}

/* ── 17. SSE-status-bar always visible at top ───────────────── */
@media (max-width: 720px) {
  /* "live"-Indicator kommt aus header-right */
}

/* ── 18. Notification-popover: bessere Positionierung auf Phone */
@media (max-width: 520px) {
  .notif-popover {
    width: calc(100vw - 0.8rem) !important;
    max-width: 100vw !important;
    right: 0.4rem !important;
    left: 0.4rem;
    max-height: calc(var(--vh-fix) - 100px);
    overflow-y: auto;
  }
}

/* ── 19. Cmd-Palette: full-screen modal auf Phone ────────────── */
@media (max-width: 520px) {
  #cmdk-overlay {
    align-items: flex-start;
    padding-top: 0;
  }
  .cmdk-modal {
    border-radius: 0 !important;
    height: var(--vh-fix);
    width: 100vw;
    max-width: 100vw;
    max-height: var(--vh-fix);
  }
  .cmdk-list {
    max-height: calc(var(--vh-fix) - 130px) !important;
  }
}

/* ── 20. Events-Ticker swipe-handle indicator ──────────────── */
@media (max-width: 720px) {
  #events-ticker.bottom-sheet::before,
  #events-ticker::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--ink-dim);
    border-radius: 2px;
    margin: 0.5rem auto 0;
    opacity: 0.5;
  }
}

/* ── 21. Identity-Tab Editor: mehr Höhe nutzen auf Phone ─── */
@media (max-width: 720px) {
  #id-editor-textarea {
    min-height: calc(var(--vh-fix) - 380px);
    max-height: 60vh;
  }
}

/* ── 22. Card-Hover: KEIN transform auf Touch-Geräten ───── */
@media (hover: none) and (pointer: coarse) {
  .card:hover, .v-card:hover, .stat-card:hover,
  .crud-card:hover, .mcp-card:hover, .chat-item:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* ── 23. Long-press menu prevention auf Phone-images ───── */
@media (max-width: 720px) {
  img.logo-icon, img.header-akh-avatar,
  .empty-state.akh-empty-image::before,
  .akh-system-banner, .docs-sidebar-hero,
  .editorial-hero::after {
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
  }
}

/* ── 24. Print & screen-reader: hide pure decorative imagery ── */
@media print {
  .akh-system-banner,
  .empty-state.akh-empty-image::before,
  .docs-sidebar-hero,
  .editorial-hero::after,
  #login-screen { background: none !important; }
}

/* ── 25. Header-Overlap-Fix: row-gap zwischen brand+actions, padding-bottom ── */
@media (max-width: 720px) {
  #header {
    flex-wrap: wrap !important;
    row-gap: 0.55rem !important;
    column-gap: 0.5rem !important;
    padding: 0.5rem 0.75rem 0.7rem !important;
    align-items: center !important;
  }
  .header-brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  .header-right {
    flex: 1 1 100%;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
}

/* Mini-phone: Brand-row und Action-row deutlich voneinander trennen */
@media (max-width: 380px) {
  #header {
    row-gap: 0.45rem !important;
    padding-bottom: 0.55rem !important;
  }
  .header-right { gap: 0.3rem !important; }
}

/* Tab-Nav Top-Border als optisches Trennzeichen statt Berührung */
@media (max-width: 720px) {
  #tab-nav {
    border-top: 1px solid var(--border);
    padding-top: 0.4rem !important;
    padding-bottom: 0.2rem;
    background: var(--bg);
  }
}

/* ── 26. Header-Akh-Avatar: bei Mobile sichtbar machen wenn nicht hidden ── */
@media (max-width: 720px) {
  /* nichts erzwingen — Avatar wird durch JS sichtbar geschaltet wenn /api/identity/avatar 200 returnt */
}

/* ── 27. CRITICAL FIX: Header fixed-height kollidiert mit flex-wrap ── */
@media (max-width: 720px) {
  #header {
    height: auto !important;
    min-height: 58px !important;
    /* let content determine actual height when wrapped */
  }
}

/* ── 28. CRITICAL: Right-side panels werden Bottom-Sheets auf Mobile ──
   Alte Phase-X-Regel hatte falschen Selektor (#events-ticker statt
   .events-ticker-panel). Beide Panels (Inbox + Events-Ticker) jetzt
   korrekt als Full-Width-Bottom-Sheets auf Phone. */
@media (max-width: 720px) {
  .events-ticker-panel,
  .crud-inbox-panel {
    top: auto !important;
    bottom: -100% !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 65vh !important;
    border-radius: 14px 14px 0 0 !important;
    transition: bottom 240ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.14) !important;
  }
  .events-ticker-panel.open,
  .crud-inbox-panel.open {
    bottom: 0 !important;
  }
  /* Drag-handle indicator */
  .events-ticker-panel::before,
  .crud-inbox-panel::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--ink-dim);
    border-radius: 2px;
    margin: 0.5rem auto 0;
    opacity: 0.45;
    flex-shrink: 0;
  }
  /* Heads bleiben sticky-top im Bottom-Sheet */
  .events-ticker-head,
  .crud-inbox-head {
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 2;
  }
  /* Safe-area-bottom für Home-Indicator */
  @supports (padding: env(safe-area-inset-bottom)) {
    .events-ticker-panel,
    .crud-inbox-panel {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BB.10.18 — Flawless Mobile Polish
   Sammelfixes nach systematischem Audit:
   ① Body-scroll-lock wenn Modal offen (iOS-jitter fixen)
   ② Editorial-Hero overflow-Schutz (kein Title-Crash am rechten Rand)
   ③ Input-font-size 16px für ALLE inputs/textareas (iOS auto-zoom-prevention)
   ④ Tap-highlight Color subtil im Akhilius-Coral statt Browser-Default-Blau
   ⑤ Touch-action manipulation: kein 350ms-double-tap-delay auf clickables
   ⑥ Smooth scrolling auf Tab-Nav mit scroll-snap-Hint
   ⑦ Image-srcset für Hero-Fortune (kleine Variante auf Mobile)
   ⑧ Tab-view padding-bottom über dvh statt env() pro Komponente
   ⑨ Reduced-motion-respect (für User mit prefers-reduced-motion)
   ⑩ Selection-color in Coral statt System-blau
   ═══════════════════════════════════════════════════════════════════ */

/* ① Modal scroll-lock — funktioniert auf allen Modal-Klassen.
   :has() deckt jeden Modal-Typ ab (curiosity, crud, w1-wizard, cmdk) ohne
   dass jeder JS-Handler eine body-Klasse setzen muss. Fallback bleibt
   body.modal-open (manuell von openWidget gesetzt). */
@supports selector(:has(*)) {
  body:has(#widget-modal.open),
  body:has(.crud-modal-overlay.open),
  body:has(.w1-wizard-overlay.open),
  body:has(#cmdk-overlay.open) {
    overflow: hidden !important;
    touch-action: none;
  }
}
body.modal-open {
  overflow: hidden !important;
  touch-action: none;
}
body.modal-open #dashboard,
body:has(#widget-modal.open) #dashboard {
  /* Hintergrund nicht sichtbar bewegen lassen (iOS rubber-band) */
  overflow: hidden;
}

/* ② Editorial-Hero: garantiert keine Kollision zwischen Title und Marginalia */
.editorial-hero {
  padding-right: 1rem;
  overflow-x: clip;  /* Safer than 'hidden' weil keine scroll-bar auf overflow-y entsteht */
}
@media (max-width: 919px) {
  /* Marginalia ist an dieser Breite hidden via editorial.css media query —
     hier sicherstellen dass der hero-title volle Breite bekommt. */
  .editorial-hero-title { padding-right: 0; max-width: 100%; }
  .editorial-hero-meta { flex-wrap: wrap; row-gap: 0.4rem; }
}
@media (min-width: 920px) and (max-width: 1100px) {
  /* Sweet-spot tablet: marginalia + bild + title — keiner darf den anderen
     überlappen. Title bekommt explizit 60% breite. */
  .editorial-hero-title { max-width: 62%; }
  .editorial-hero-marginalia { top: 2.4rem; max-width: 220px; }
}

/* ③ iOS-Auto-Zoom-Prevention: jedes input/textarea/select ≥16px */
@media (hover: none) and (pointer: coarse) {
  input, textarea, select,
  input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], input[type="number"], input[type="tel"],
  input[type="url"], input[type="date"], input[type="time"],
  .crud-modal-form input, .crud-modal-form textarea, .crud-modal-form select,
  .v-input, .v-textarea, .v-select,
  #token-input, #chat-search, #docs-search, #memory-search-input {
    font-size: 16px !important;
    /* line-height erhalten — sonst werden buttons zu groß */
  }
  /* Login-Screen darf trotzdem optisch passen */
  #token-input { padding: 0.7rem 0.9rem; }
}

/* ④ Tap-Highlight in Akhilius-Coral (subtil, nicht aufdringlich) */
@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-tap-highlight-color: rgba(251, 132, 113, 0.18);
  }
  /* Bei aktiven Buttons den Highlight ausschalten weil :active eigene
     Visual-Response gibt */
  button:active, .btn:active, .nav-tab:active, a:active {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ⑤ Touch-action: kein 350ms-tap-delay, aber pan-y darf bleiben (scrolling) */
@media (hover: none) and (pointer: coarse) {
  button, .btn, .nav-tab, a, [role="button"], [onclick],
  .chat-item, .id-list-item, .stat-card,
  input[type="checkbox"], input[type="radio"], label {
    touch-action: manipulation;
  }
  /* Scroll-Container: pan-y damit vertical scrolling weiter geht */
  #main-content, .tab-view, .modal-content, .crud-modal-box,
  #chat-list, #message-list {
    touch-action: pan-y;
  }
}

/* ⑥ Tab-Nav scroll-snap so dass Wisch-Geste auf einen Tab landet */
@media (max-width: 1180px) {
  #tab-nav {
    scroll-snap-type: x proximity;  /* proximity statt mandatory — manueller scroll bleibt frei */
    scroll-padding-left: 0.5rem;
  }
  #tab-nav .nav-tab {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

/* ⑦ Hero-Fortune-Image: auf Mobile kleinere Varianten, falls verfügbar.
   Die ::after-rule definiert background-image über CSS-var, die JS setzt.
   Wir können hier per media-query die Bildgröße kappen. */
@media (max-width: 1100px) {
  .editorial-hero::after {
    width: 200px !important;
    height: 140px !important;
    opacity: 0.32 !important;
  }
}

/* ⑧ Tab-View Padding-bottom konsistent mit dvh-fix */
@media (max-width: 720px) {
  .tab-view {
    /* Bottom-Sheet (events-ticker) hat eigene safe-area; tab-view bekommt
       grundsätzlich nur 1rem damit sich nichts unter den Bottom-Sheet
       schiebt. */
    padding-bottom: 1rem;
  }
  .tab-view.active {
    /* sichtbarer Tab darf ein bisschen mehr Atem haben */
    min-height: calc(var(--vh-fix) - 60px);
  }
}

/* ⑨ Respect prefers-reduced-motion — wichtig für Vestibular-Issues */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Logo-Spin + Konami-Easter-Eggs würden sonst flickern */
  .logo-icon.intro { animation: none !important; }
  .editorial-hero::after { transition: none !important; }
}

/* ⑩ Selection-Color in Coral (Akhilius-Brand) */
::selection { background: rgba(251, 132, 113, 0.3); color: var(--ink); }
::-moz-selection { background: rgba(251, 132, 113, 0.3); color: var(--ink); }

/* ⑪ Image-loading: das echte loading-attribute setzt JS via mutationObserver
   (siehe index.html ensureLazyImages-helper). CSS allein kann es nicht. */

/* ⑫ Pull-to-Refresh global disablen für SPA-Verhalten.
   Browser-default ist refresh wenn man oben overscrolled — beim Dashboard
   würde das die ganze App neu laden statt SSE-refresh. */
html, body {
  overscroll-behavior-y: contain;
}
@media (max-width: 720px) {
  /* Aber innerhalb von Modals soll bouncen erlaubt sein damit der User merkt
     dass da Content unter dem Bildschirm ist */
  .crud-modal-box, #widget-modal-content { overscroll-behavior: contain; }
}

/* ⑬ iOS Keyboard-Fix für Chat-Input.
   Wenn das Keyboard erscheint, soll der Input über dem Keyboard sichtbar
   bleiben. visualViewport API würde es exakter machen, aber CSS-only:
   wir geben sticky-Bottom + ausreichend Margin am Ende des Message-Lists. */
@media (max-width: 720px) {
  #message-list {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  /* Wenn body.keyboard-open Klasse gesetzt ist (kommt von visualViewport-JS) */
  body.keyboard-open .editorial-hero,
  body.keyboard-open #header {
    /* Kein sticky während Keyboard offen — gibt Platz */
  }
}

/* ⑭ Accessibility: Focus-Ring sichtbar auch auf Mobile bei Keyboard-Nav */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   BB.10.49 — iPhone-Layout-Stabilität (31.05.2026)
   Behebt die gemeldeten iPhone-17-Pro-Probleme: Dashboard verrutscht /
   springt beim Scrollen / bleibt nicht in place / schon beim ersten Öffnen
   misplaced / Elemente nicht erreichbar.
   ═══════════════════════════════════════════════════════════════════ */

/* A) ⚑ HAUPTFIX: App-Shell + Login an die DYNAMISCHE Viewport-Höhe binden.
   index.html setzt #app/#login-screen auf hartes 100vh. Auf iOS Safari ist
   100vh die Höhe bei EINGEKLAPPTER URL-Bar → die Shell ragt unter die
   sichtbare URL-Bar; ihr unterer Teil ist unerreichbar (body hat
   overflow:hidden) und das Layout SPRINGT, sobald die Bar beim Scrollen
   ein-/ausklappt. var(--vh-fix) = 100dvh (dynamic) wo unterstützt, sonst
   100vh-Fallback → folgt der echten sichtbaren Höhe, kein Springen mehr. */
/* --app-vh wird per JS (visualViewport) auf die ECHTE sichtbare Höhe gesetzt
   — robust für In-App-Browser wie Perplexity Comet, deren UI-Leisten von
   100dvh nicht erfasst werden. Fallback var(--vh-fix)=100dvh bis JS läuft. */
#app { height: var(--app-vh, var(--vh-fix)); }
#login-screen { height: var(--app-vh, var(--vh-fix)); }

/* B) Horizontaler Overflow = seitliches Wackeln/Verrutschen. Garantieren,
   dass NICHTS breiter als der Viewport rendert. 'clip' (statt 'hidden')
   erzeugt KEINEN Scroll-Container und bricht daher position:sticky in
   Kindern nicht; 'hidden' davor ist der Fallback für ältere Engines. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* C) Flex-Scroll-Kette robust: #main-content darf in der Flexbox schrumpfen
   (min-height:0 verhindert das berüchtigte Flex-Overflow-Problem), und der
   sichtbare Tab scrollt mit Momentum, ohne den Root mitzuziehen. */
#main-content { min-height: 0; }
.tab-view {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* D) ⚑ Scroll-Höhe robust — Fix für "unterster Teil nicht erreichbar":
   index.html setzt .tab-view auf height:100%. In der Flex-Kette
   (#app→#main-content[flex:1]→.tab-view) resolved 100% auf iOS unzuverlässig,
   wenn der Header per flex-wrap auf Mobile höher wird → Scroll-Container zu
   kurz → letztes Element abgeschnitten und NICHT scrollbar erreichbar.
   Lösung: #main-content als Flex-Column, aktiver Tab füllt als flex-item den
   Restplatz zuverlässig und scrollt intern bis zum Ende. */
@media (max-width: 720px) {
  #main-content { display: flex; flex-direction: column; }
  .tab-view.active {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* E) ⚑ Scroll-Auslauf groß genug für eine überlappende Browser-Leiste:
     In-App-Browser wie Perplexity Comet legen eine hohe untere Leiste
     (Adresszeile + Werkzeugleiste) als Overlay über den Webinhalt. Diese
     ist per JS NICHT messbar (visualViewport meldet die volle Höhe), also
     muss der letzte Inhalt durch genügend Bottom-Padding über die Leiste
     hinausscrollbar sein. ~160px deckt Comets Doppelleiste + Home-Indicator
     ab; auf Browsern ohne Overlay-Leiste nur etwas Leerraum am Scroll-Ende. */
  .tab-view {
    padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BB.10.50 — Boden-Reserve gegen überlagernde Browser-Leisten (31.05.2026)
   Generalisiert den Übersicht-Fix (BB.10.49-E) auf ALLE bodennahen
   Elemente: Chat-Eingabe, Modal-Footer (Speichern), Bottom-Sheets
   (Events/Inbox), Toast, Popover, Command-Palette. In-App-Browser wie
   Perplexity Comet legen eine hohe untere Leiste als Overlay über den
   Inhalt; weder 100dvh noch visualViewport erfassen sie. Eine einzige
   Variable --cbar reserviert auf Mobile genug Platz, sodass nichts mehr
   hinter der Leiste verschwindet. Desktop: --cbar = 0 (keine Auswirkung).
   ═══════════════════════════════════════════════════════════════════ */
:root { --cbar: 0px; }
@media (max-width: 720px) {
  :root { --cbar: calc(10rem + env(safe-area-inset-bottom, 0px)); }

  /* (a) Scroll-Inhalt aller normalen Tabs — vereinheitlicht BB.10.49-E */
  .tab-view { padding-bottom: var(--cbar); }

  /* (b) Chat-Tab: #tab-chats ist overflow:hidden (Sidebar + Chat-Area mit
     interner Scroll-Liste #messages). Es darf KEIN Tab-Padding bekommen
     (würde die Chat-Area schrumpfen + Lücke lassen). Stattdessen trägt die
     Eingabezeile die Reserve: Textarea+Button sitzen oben in der Zeile,
     der bg-card-Hintergrund füllt den Bereich hinter Comets Leiste. */
  #tab-chats.tab-view { padding-bottom: 0 !important; }
  #chat-input-row { padding-bottom: calc(0.8rem + var(--cbar)) !important; }

  /* (c) Toast über die Leiste heben (statt nur env()) */
  #toast-el { bottom: calc(0.7rem + var(--cbar)) !important; }

  /* (d) Bottom-Sheets (Events-Ticker + Inbox): Inhalt + Schließen-Button
     über die Leiste schieben (Sheets sind bottom:0 positioniert). */
  .events-ticker-panel, .crud-inbox-panel, #events-ticker {
    padding-bottom: var(--cbar) !important;
  }
}

/* (e) Vollbild-Modals auf Phone-Portrait: Box-Höhe so kappen, dass ihr
   unterer Rand (inkl. sticky Footer mit Speichern/Abbrechen) ÜBER der
   Leiste endet; Overlay top-ausgerichtet, damit die Reserve unten frei
   bleibt (zentriert würde sie hälftig oben/unten verteilen → Footer doch
   hinter der Leiste). height:auto, damit kurze Formulare nicht aufgebläht
   werden; max-height kappt lange + lässt sie intern scrollen. */
@media (max-width: 520px) {
  .crud-modal {
    align-items: flex-start !important;
    padding-top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
  }
  .crud-modal-box,
  .w1-wizard-modal,
  #widget-modal .modal-box,
  .cmdk-modal {
    height: auto !important;
    max-height: calc(var(--vh-fix) - var(--cbar)) !important;
  }
  .cmdk-list { max-height: calc(var(--vh-fix) - 130px - var(--cbar)) !important; }
  .notif-popover { max-height: calc(var(--vh-fix) - 100px - var(--cbar)) !important; }
}