/* panel-mobile-perfect.css
 * Panel-Haelfte: alles Panel-interne Mobile-Wissen. Diese Haelfte laedt auch index-v3.html.
 *
 * Automatisch aus mobile-perfect.css getrennt (Dashboard-v3 WP4, 27.07.2026).
 * Grund: die Datei enthielt Shell-Chrome- und Panel-Regeln gemischt, und
 * 94 !important darin haetten in index-v3.html gegen die neue Rail
 * gearbeitet. v1 laedt beide Haelften an Originalposition und in Reihenfolge
 * (shell, dann panel) - die Kaskade bleibt damit unveraendert.
 * v3 laedt NUR die panel-Haelfte.
 *
 * Klassifikation: Alles, was NICHT Shell-Chrome ist. Panel-Regeln mit Body-Zustands-Scope (z.B. body.keyboard-open .x) gehoeren hierher.
 * NICHT von Hand pflegen, ohne die Aufteilungsregel zu kennen -
 * siehe tests/e2e/README.md und docs/dashboard/V3_CONTRACT.md.
 */

@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)) {
  /* 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);
    }
}
/* ── 3. Touch-Targets auf Apple-Standard 44×44px ───────────────── */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn-primary, .btn-secondary, .btn-danger, .sec-add, .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; }
  /* 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;
    }
}
/* ── 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;
    }
}
/* ── 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) {
  /* 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; }
}
/* ── 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, .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 { background: none !important; }
}
/* ── 25. Header-Overlap-Fix: row-gap zwischen brand+actions, padding-bottom ── */
@media (max-width: 720px) {
  .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-right { gap: 0.3rem !important; }
}
/* ── 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 */
}
/* ── 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);
        }
  }
}
/* ② 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, 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, 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 */
  .modal-content, .crud-modal-box, #chat-list, #message-list {
      touch-action: pan-y;
    }
}
/* ⑦ 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;
    }
}
/* ⑨ 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); }
@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 {
      /* 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;
}
@media (max-width: 720px) {
  #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; }
}