/* ══════════════════════════════════════════════════════════════════════════
   JARVIS MOBILE LAYER  (assets/css/jarvis-mobile.css)
   Macht ALLE JARVIS-Seiten auf dem Telefon bedienbar:
   - Sidebar (display:none ab 900px) wird zum Slide-in-Drawer
   - feste Bedienleiste unten + "MEHR" -> vollstaendiger Options-Katalog
   - Touch-Ziele >= 44 px, keine Schrift unter 12 px, kein seitliches Scrollen
   Nur im Telefon-Breakpoint aktiv. Desktop bleibt unveraendert.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --jm-g: var(--neon-green, var(--ki-green, #00ff41));
  --jm-bg: rgba(3, 7, 4, 0.97);
  --jm-bd: var(--border-panel, var(--ki-border, rgba(0, 255, 65, 0.25)));
  --jm-tx: var(--text-dim, var(--ki-text-2, #9fbfa8));
  --jm-bar-h: 58px;
}

.jm-btn, .jm-bottombar, .jm-overlay, .jm-drawer-head, .jm-drawer, .jm-katalog { display: none; }

@media (max-width: 900px) {

  /* ── 1. Sidebar wird Drawer (statt display:none) ─────────────────────── */
  /* T6JMDISP: display-Flip statt left/transform — in einigen Chrome/
     Emulations-Versionen blieben left/transform-Drawer trotz !important
     geschlossen (Overlay öffnete, Sidebar nicht). display:none/flex
     greift immer und ist animationsfrei (robust, einfacher). */
  .sidebar, .ki-sidebar, aside.sidebar {
    display: none !important;
    position: fixed !important;
    top: 0; left: 0;
    height: 100vh;
    width: min(86vw, 330px);
    max-width: 330px;
    z-index: 9400;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    background: var(--jm-bg) !important;
    border-right: 1px solid var(--jm-bd) !important;
    box-shadow: 6px 0 26px rgba(0, 0, 0, 0.6);
    padding-bottom: calc(var(--jm-bar-h) + 10px) !important;
    -webkit-overflow-scrolling: touch;
  }
  /* zweite Design-Familie: ki-sidebar ist grid-area -> aus dem Grid loesen */
  .ki-sidebar { grid-area: auto !important; }
  .ki-app { grid-template-columns: minmax(0, 1fr) !important; }

  body.jm-open .sidebar,
  body.jm-open .ki-sidebar,
  body.jm-open aside.sidebar { display: flex !important; left: 0 !important; }

  /* TICK249-SECHSIDEBAR: die Drawer-Regeln gelten fuer JEDE .sidebar.
     Drei Traeger haben zwei (linke .sidebar + .sidebar.sidebar-right)
     - beide bekommen position:fixed und z-index:9400, und die
     rechte liegt als spaeter im DOM eingefuegte Schicht ueber dem
     eigentlichen Drawer. Gemessen: der Schliess-Knopf (44x44) war
     nicht bedienbar, ein Klick blieb ohne Wirkung.
     WICHTIG: diese Regel muss NACH der body.jm-open-Regel stehen.
     Beide sind !important; bei gleicher Spezifitaet gewinnt die
     SPATERE. Ein Versuch davor hat die Regel wirkungslos gemacht -
     genau das ist die Messfalle 176e. */
  body.jm-open .sidebar.sidebar-right,
  body.jm-open .sidebar-right {
    display: none !important;
  }

  /* ── 2. Hauptbereich nutzt die volle Breite ─────────────────────────── */
  .body, .ki-main, main.main, .main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* App-Shell auf Dokument-Scroll umstellen: overflow hidden/auto der
     Desktop-Shell wuerde den Inhalt am Telefon abschneiden (kein Scrollweg).
     Stattdessen waechst das Dokument und scrollt natuerlich. */
  .body, .app, .app-shell, .shell,
  .ki-app, .ki-main, main.main, .main {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  .main, .ki-main { padding-bottom: calc(var(--jm-bar-h) + 14px) !important; }
  html, body {
    max-width: 100%; overflow-x: hidden; overflow-y: auto;
    height: auto !important; min-height: 100vh !important;
    scroll-behavior: auto !important;
  }

  /* ── 3. Overlay hinter dem Drawer ───────────────────────────────────── */
  .jm-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.62);
    z-index: 9300;
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
  }
  body.jm-open .jm-overlay { opacity: 1; pointer-events: auto; }
  /* TICK249-STAPEL: der Dialog muss ueber dem Overlay liegen, sonst
     ist er sichtbar, aber nicht bedienbar. Geprueft mit
     elementFromPoint() an allen 14 sichtbaren Menuepunkten. */
  body.jm-open .jm-overlay { z-index: 9290 !important; }

  /* TICK249-STAPEL: das neural-voice-dock traegt z-index 2147483000 und
     liegt damit ueber ALLEN Ebenen - auch ueber dem Drawer. Gemessen:
     4 weitere Menuepunkte (MODELLE, SKILLS, TERMINAL, LOGS) waren unter
     dem Dock begraben. Das Dock ist ein Bedienelement des Hintergrunds
     und hat waehrend der modalen Zusage nichts oben zu sein. */
  body.jm-open .neural-voice-dock {
    display: none !important;
    pointer-events: none !important;
  }

  /* TICK251-DAUMENZONE: das Dock liegt mit z-index 2147483000 ueber
     ALLEN Ebenen und mit bottom:10px direkt auf der Daumen-Zone.
     Gemessen 0 von 5 Bedienleisten-Punkten zeigererreichbar, obwohl
     die Leiste sichtbar ist. Der Drawer-Fix von TICK249 half nur bei
     offenem Menue (body.jm-open), im Normalzustand blieb die Leiste
     begraben. Additiv: das Dock ueber die Leiste heben, statt die
     Leiste zu verstecken - die Daumen-Zone ist der Hauptweg. */
  .neural-voice-dock { bottom: calc(var(--jm-bar-h) + 10px) !important; }

  /* ── 4. Untere Bedienleiste (Daumen-Zone) ───────────────────────────── */
  .jm-bottombar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--jm-bar-h);
    z-index: 9500;
    background: var(--jm-bg);
    border-top: 1px solid var(--jm-bd);
    backdrop-filter: blur(6px);
    align-items: stretch;
    padding: 0 2px;
  }
  .jm-bottombar a, .jm-bottombar button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    color: var(--jm-tx) !important;
    text-decoration: none !important;
    font-size: 10px !important;
    letter-spacing: 0.6px;
    background: none; border: 0; cursor: pointer;
    padding: 6px 2px;
    font-family: inherit;
    border-top: 2px solid transparent;
    -webkit-tap-highlight-color: transparent;
  }
  .jm-bottombar a .jm-bi, .jm-bottombar button .jm-bi { font-size: 17px; line-height: 1; }
  .jm-bottombar a.jm-aktiv, .jm-bottombar button.jm-aktiv {
    color: var(--jm-g) !important;
    border-top-color: var(--jm-g);
    text-shadow: 0 0 8px var(--jm-g);
  }
  .jm-bottombar span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── 5. Touch-Ziele und Lesbarkeit ──────────────────────────────────── */
  .sidebar a, .ki-sidebar a, .nav-item, .ki-nav-item, .ki-nav a {
    min-height: 44px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    font-size: 12px !important;
  }
  .sidebar-footer, .ki-vm-box, .jm-hint { font-size: 11px !important; }
  .ki-status, .ki-vm-row, .stat-label, .nav-group-titel { font-size: 11px !important; }

  /* Kleinstschrift auf dem Telefon lesbar machen (nur <=900px).
     Die Seiten setzen intern 8-10px; auf dem Telefon ist das nicht lesbar.
     Angehoben auf mindestens 11px - Farben/Layout bleiben unveraendert. */
  small, .stat-label, .kv-key, .kv-val, .meta, .hint, .sub, .eyebrow,
  .pill, .tag, .badge, .ph-sub, .ki-mode, td, th, label, .mono {
    font-size: 11px !important;
  }
  .sidebar span, .ki-sidebar span, .jm-katalog span { font-size: 11px; }
  .jm-katalog .jm-n { font-size: 12px; }

  h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; }
  p, li, td, th, .nav-item span, .ki-nav-item span { overflow-wrap: break-word; }

  /* ── 6. Drawer-Kopf + Options-Katalog ───────────────────────────────── */
  .jm-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    position: sticky; top: 0;
    padding: 12px 14px;
    background: var(--jm-bg);
    border-bottom: 1px solid var(--jm-bd);
    z-index: 2;
  }
  .jm-drawer-head b { color: var(--jm-g); font-size: 12px; letter-spacing: 2px; }
  .jm-drawer-head button {
    min-width: 44px; min-height: 44px;
    background: none; border: 1px solid var(--jm-bd);
    color: var(--jm-tx); border-radius: 4px; font-size: 18px;
    cursor: pointer; font-family: inherit; line-height: 1;
  }

  .jm-katalog { display: block; border-top: 1px solid var(--jm-bd); margin-top: 8px; padding-top: 8px; }
  .jm-katalog details { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
  .jm-katalog summary {
    min-height: 44px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    color: var(--jm-g); font-size: 11px; letter-spacing: 1.4px;
    cursor: pointer; list-style: none;
  }
  .jm-katalog summary::-webkit-details-marker { display: none; }
  .jm-katalog summary::after { content: '+'; font-size: 15px; color: var(--jm-tx); }
  .jm-katalog details[open] summary::after { content: '\2212'; }
  .jm-katalog a {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px;
    padding: 10px 14px 10px 22px;
    color: var(--jm-tx); text-decoration: none;
    font-size: 12px; letter-spacing: 0.6px;
    border-left: 2px solid transparent;
  }
  .jm-katalog a:active { background: rgba(0, 255, 65, 0.08); }
  .jm-katalog a.jm-aktiv {
    color: var(--jm-g); border-left-color: var(--jm-g);
    background: rgba(0, 255, 65, 0.07);
  }
  .jm-katalog a .jm-k { width: 18px; text-align: center; font-size: 13px; flex-shrink: 0; }
  .jm-katalog a .jm-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ── 7. Tabellen/Code duerfen nicht sprengen ────────────────────────── */
  table { display: block; max-width: 100%; overflow-x: auto; }
  pre, code, .mono { max-width: 100%; overflow-x: auto; }

  /* ── 8. Kopf-Knopf (☰) ─────────────────────────────────────────────── */
  .jm-btn {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
    margin-right: 6px;
    background: none;
    border: 1px solid var(--jm-bd);
    border-radius: 4px;
    color: var(--jm-g) !important;
    font-size: 20px; line-height: 1;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    order: -1;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .jm-btn:active { background: rgba(0, 255, 65, 0.12); }
  .jm-btn.jm-schwebend {
    position: fixed;
    top: 10px; right: 10px;
    z-index: 9550;
    background: var(--jm-bg);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
  }
  /* Damit der Kopf-Knopf nicht von bestehenden Kopf-Elementen verdeckt wird */
  .header-right, .ki-header, header.header, .header { position: relative; }

  /* TICK249-STAPEL: der App-Wrapper erzeugt einen Stapelkontext.
     .app (jarvis-os-shared.css) traegt position:relative; z-index:10 -
     der Drawer ist die Sidebar und haengt DARIN. Ihr z-index:9400
     zaehlt deshalb nur innerhalb dieses Kontextes, waehrend das
     jm-overlay (z-index:9300) direkt am body haengt. 10 < 9300: das
     Overlay lag ueber dem Drawer, 0 von 14 sichtbaren Menuepunkten
     waren mit der Maus erreichbar und ein Klick schloss nur das Menue.
     Im Telefon-Breakpoint verliert der Wrapper seinen Stapelkontext,
     damit der Drawer-z-index wieder global zaehlt. */
  .app, .app-shell, .shell, .ki-app, .body {
    position: static !important;
    z-index: auto !important;
  }

  /* ── 9. Eigenstaendiger Drawer fuer Seiten OHNE Sidebar ─────────────── */
  .jm-drawer {
    display: none !important;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: min(86vw, 330px);
    max-width: 330px;
    z-index: 9400;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--jm-bg);
    border-right: 1px solid var(--jm-bd);
    box-shadow: 6px 0 26px rgba(0, 0, 0, 0.6);
    padding-bottom: calc(var(--jm-bar-h) + 10px);
    -webkit-overflow-scrolling: touch;
  }
  body.jm-open .jm-drawer { display: block !important; left: 0 !important; }
  .jm-drawer .jm-katalog { border-top: 0; margin-top: 0; padding-top: 0; }

  /* ── 10. Kein Drawer-Inhalt bei offener Seite durchscheinen ─────────── */
  body.jm-open { overflow: hidden; }
}

@media (max-width: 400px) {
  .sidebar, .ki-sidebar { width: 92vw; max-width: 92vw; }
  .jm-bottombar a, .jm-bottombar button { font-size: 9px !important; letter-spacing: 0; }
}

@media print {
  .jm-bottombar, .jm-overlay, .jm-drawer-head, .jm-drawer { display: none !important; }
}