/* ══════════════════════════════════════════════════════════════════
   Helvetiq OS — Handy-Layer (360–767 px)

   Wird als LETZTES Stylesheet jeder App-Seite eingebunden. JEDE Regel
   steht in einer Media-Query mit max-width ≤ 767px — Desktop/Tablet ab
   768 px bleibt dadurch pixelgleich (Test: tests/test_static_mobile_css.py).
   Keine Tailwind-Utilities verwenden (Bundle kennt evtl. nicht alle) —
   nur eigene Regeln, Seiten über IDs bzw. :has() eingegrenzt.
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

  /* ── Allgemein ─────────────────────────────────────────────────── */

  /* Fehler-melden-Knopf (Sentry-Feedback, «Space-Invader», aus
     /sentry-init.js): auf dem Handy aus. Er lag dort auf Schaltern,
     Eingabefeldern und «Anmelden»; die Ecke unten rechts gehört dem
     Such-Knopf. Melden geht weiter am Desktop. Doppelte ID-Spezifität,
     weil das Sentry-Script sein <style> erst zur Laufzeit anhängt. */
  #hos-bug-btn#hos-bug-btn { display: none !important; }

  /* Seiten mit Standard-Kopf (Menü · Home · Titel · Aktionen):
     Kopf darf umbrechen statt die Seite zu verbreitern. */
  .main-header:has(.home-btn) { flex-wrap: wrap; row-gap: 8px; padding-left: 16px; padding-right: 16px; }
  .main-header:has(.home-btn) > div { min-width: 0; }
  .main-header .home-btn + span { white-space: nowrap; }

  /* Inhalt: 16 px Rand statt 24 px, unten Platz für den Such-Knopf. */
  .main-area > .main-content { padding: 16px 16px 96px; }

  /* Eingabefelder in Flex-Zeilen dürfen schrumpfen. */
  .main-content .flex > input,
  .main-content .flex > select { min-width: 0; }

  /* Seitlich scrollende Leisten: Scrollbalken weg, rechts sanft
     ausblenden (zeigt «da geht es weiter»). */
  .m-scroll-x,
  #widgetBar,
  #helpChips,
  .main-content > .frost-panel:has(> .tab-btn) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .m-scroll-x::-webkit-scrollbar,
  #widgetBar::-webkit-scrollbar,
  #helpChips::-webkit-scrollbar,
  .main-content > .frost-panel:has(> .tab-btn)::-webkit-scrollbar { display: none; }

  /* ── 1. Hilfe (/help): Seitenleiste als Schublade ─────────────── */
  body:has(#helpTopics) .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; margin-left: -260px;
  }
  body:has(#helpTopics) .sidebar.mobile-open { margin-left: 0; box-shadow: 0 0 40px rgba(0, 0, 0, 0.4); }
  body:has(#helpTopics) .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 40; }
  body:has(#helpTopics) .mobile-overlay.open { display: block; }
  body:has(#helpTopics) .glass-card { padding: 16px; }
  #helpChips {
    flex-wrap: nowrap;
    margin-left: -16px; margin-right: -16px;
    padding: 2px 16px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 28px), transparent 100%);
  }
  #helpChips > .chip { flex: 0 0 auto; }
  .help-body { padding: 4px 16px 16px 20px; }

  /* ── 2. Präsentationen: eine Scroll-Fläche statt abgeschnittener Liste ── */
  /* Scroll-Fläche selbst: presentations.html (≤ 900 px) */
  .main-content:has(> #deckLeft) { padding: 0; }
  #deckLeft > .deck-scroll { padding: 16px; }
  #deckLeft > .deck-scroll:last-child { padding-bottom: 96px; }
  #deckToolbar { flex-wrap: wrap; row-gap: 8px; }
  #deckToolbar > div:last-child { flex-wrap: wrap; flex-shrink: 1; }

  /* ── 3. Inbox ──────────────────────────────────────────────────── */
  /* Reiter: seitlich scrollbar, ohne Seitenüberlauf */
  .main-content > .frost-panel:has(> .tab-btn) {
    display: flex; max-width: 100%; margin-bottom: 16px;
  }
  .main-content > .frost-panel:has(> .tab-btn) > .tab-btn { flex: 0 0 auto; white-space: nowrap; }

  /* Filter einklappbar (Knopf setzt mobile.js) */
  .m-filter-toggle[hidden] { display: inline-flex; }
  .m-filter-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 0 12px; padding: 8px 14px; min-height: 40px;
    border-radius: 10px; border: 1px solid #3a3a3a; background: #262626;
    color: #d4d4d4; font-size: 13px; font-weight: 500; cursor: pointer;
  }
  .m-filter-toggle svg { width: 16px; height: 16px; transition: transform 0.15s; }
  .m-filter-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .m-filter-toggle .m-filter-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent, #55d6e3); display: none;
  }
  .m-filter-toggle.has-active .m-filter-dot { display: inline-block; }
  [data-theme="light"] .m-filter-toggle { background: #ffffff; border-color: #d1d5db; color: #374151; }
  [data-m-filter]:not(.m-open) { display: none !important; }
  /* Auswahl-Leiste (sobald etwas angehakt ist) bricht um statt die Seite zu verbreitern */
  #bulkToolbar { flex-wrap: wrap; row-gap: 8px; }
  #searchInput { flex: 1 1 140px; width: auto; }

  /* Nachrichten-Tabelle → Karten */
  #messagesContent .overflow-x-auto:has(> table > #messagesTable),
  #spamTableWrapper { overflow-x: visible; }
  #messagesContent table:has(> #messagesTable),
  #spamTableWrapper > table { min-width: 0; width: 100%; display: block; }
  #messagesContent table:has(> #messagesTable) > thead { display: block; }
  #messagesContent table:has(> #messagesTable) > thead > tr { display: flex; align-items: center; }
  #messagesContent table:has(> #messagesTable) > thead th { display: none; }
  #messagesContent table:has(> #messagesTable) > thead th:first-child {
    display: flex; align-items: center; gap: 10px; flex: 1 1 auto; width: auto; padding: 9px 14px 9px 15px; min-height: 40px; cursor: pointer;
    font-size: 12px; font-weight: 500; color: #a3a3a3; text-transform: none;
  }
  #messagesContent table:has(> #messagesTable) > thead th:first-child::after { content: "Alle auswählen"; }
  #messagesTable, #spamTable { display: block; }
  tr.message-row {
    display: flex; flex-wrap: wrap; align-items: baseline;
    position: relative; padding: 12px 14px 12px 52px; column-gap: 8px;
  }
  tr.message-row > td { display: block; padding: 0 !important; min-width: 0; }
  /* Checkbox: 22 px Box in 40×40 px Tippfläche (Klick auf die Zelle hakt an, mobile.js) */
  tr.message-row > td:nth-child(1) { position: absolute; left: 6px; top: 4px; width: auto; padding: 9px !important; cursor: pointer; }
  tr.message-row > td:nth-child(1) input[type="checkbox"],
  #messagesContent table:has(> #messagesTable) > thead th:first-child input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
  tr.message-row > td:nth-child(2) { display: none; }
  tr.message-row > td:nth-child(3) { order: 1; flex: 1 1 0; }
  tr.message-row > td:nth-child(3) .flex { gap: 8px; align-items: center; }
  tr.message-row > td:nth-child(3) .flex > div:last-child { min-width: 0; }
  tr.message-row > td:nth-child(3) .flex > div:last-child > div:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  tr.message-row > td:nth-child(3) .flex > div:last-child > div:last-child { display: none; }
  tr.message-row > td:nth-child(8) { order: 2; flex: 0 0 auto; font-size: 12px; }
  tr.message-row > td:nth-child(8) button { padding: 4px 8px; }
  tr.message-row > td:nth-child(4) { order: 3; flex: 0 0 100%; margin-top: 6px; }
  tr.message-row > td:nth-child(4) .truncate { max-width: 100%; }
  tr.message-row > td:nth-child(5) { order: 4; margin-top: 8px; }
  tr.message-row > td:nth-child(6) { order: 5; margin-top: 8px; font-size: 12px; color: #a3a3a3; }
  tr.message-row > td:nth-child(6)::before { content: "Prio "; }
  tr.message-row > td:nth-child(7) { order: 6; margin-top: 8px; font-size: 12px; }
  #messagesTable > tr:not(.message-row), #spamTable > tr:not(.message-row) { display: block; }
  #messagesTable > tr:not(.message-row) > td, #spamTable > tr:not(.message-row) > td { display: block; }

  /* ── 4. Meetings: Tabelle → Karten ─────────────────────────────── */
  .overflow-x-auto:has(> table > #draftsTable) { overflow-x: visible; }
  table:has(> #draftsTable) { display: block; }
  table:has(> #draftsTable) > thead { display: none; }
  #draftsTable { display: block; }
  #draftsTable > tr { display: block; }
  #draftsTable > tr:has(> td:nth-child(7)) {
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px;
    padding: 14px 16px;
  }
  #draftsTable > tr > td { display: block; padding: 0 !important; }
  /* Status «Fehler» steht schon als Badge — «⚠ Fehler» (Desktop-Tooltip) auf dem Handy nicht doppelt */
  #draftsTable .status-error ~ span.text-red-400 { display: none; }
  /* Zeilenumbruch nach Titel + Status (Pseudo-Element als volle Flex-Zeile) */
  #draftsTable > tr:has(> td:nth-child(7))::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(2) { order: 1; flex: 1 1 0; min-width: 0; font-size: 15px; }
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(4) { order: 2; flex: 0 0 auto; }
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(1) { order: 3; font-size: 12px; }
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(3) { order: 4; font-size: 12px; }
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(5) { order: 5; font-size: 12px; }
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(6) { order: 6; font-size: 12px; }
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(5)::before { content: "Aktionspunkte: "; }
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(6)::before { content: "Dauer: "; }
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(7) { order: 7; flex: 0 0 100%; }
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(7) > div { gap: 18px; }
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(7) a,
  #draftsTable > tr:has(> td:nth-child(7)) > td:nth-child(7) button { font-size: 13px; padding: 6px 0; }

  /* ── 5. Chat ──────────────────────────────────────────────────── */
  /* Schnellzugriff: eine scrollbare Zeile, Chips in voller Länge */
  #widgetBar {
    display: flex; flex-wrap: nowrap; gap: 6px;
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  #widgetBar .widget-chip { overflow: visible; flex: 0 0 auto; min-width: 0; }
  #connectionsBar {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
    scrollbar-width: none;
  }
  #connectionsBar::-webkit-scrollbar { display: none; }
  /* Modellwahl (R34): Tippfläche wie die Knöpfe; darf schrumpfen (Text
     wird abgeschnitten), damit «Senden» nie aus dem Eingabefeld ragt. */
  #chatForm #inputContainer > .flex > .flex:first-child { min-width: 0; }
  .chat-model-picker { min-width: 0; flex-shrink: 1; }
  #chatModelSelect {
    white-space: nowrap; min-height: 44px; min-width: 0; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis;
  }

  /* ── 6. ROI ───────────────────────────────────────────────────── */
  #roiContent .stat-value { font-size: 1.6rem; overflow-wrap: anywhere; }
  #roiContent table { min-width: 0; }
  #roiContent th { padding-right: 12px; vertical-align: bottom; line-height: 1.25; }
  #roiContent td { padding-right: 12px; }

  /* ── 7. Einstellungen ─────────────────────────────────────────── */
  .flex:has(> #maLabel), .flex:has(> #inviteName) { flex-wrap: wrap; }
  .flex:has(> #maLabel) > *, .flex:has(> #inviteName) > input { flex: 1 1 100%; }
  .flex:has(> #inviteName) > select { flex: 1 1 auto; }
  /* Integrationen: Name/Konto auf voller Breite (statt «Micros…»),
     Knöpfe darunter, bündig mit dem Text. */
  .provider-card, #mcpServersGrid > div { flex-wrap: wrap; row-gap: 10px; }
  .provider-card > div:first-child, #mcpServersGrid > div > div:first-child { flex: 1 1 100%; }
  .provider-card > div:first-child .font-semibold.truncate,
  #mcpServersGrid > div > div:first-child .font-semibold.truncate { white-space: normal; }
  .provider-card > div:last-child, #mcpServersGrid > div > div:last-child { margin-left: 52px; }
  /* Benutzerliste: Name/E-Mail volle Breite, Rolle + Knöpfe darunter */
  #usersTable > div.flex { flex-wrap: wrap; row-gap: 8px; }
  #usersTable > div.flex > div:first-child { flex: 1 1 100%; }
  #usersTable > div.flex > div:last-child { margin-left: 44px; flex: 1 1 calc(100% - 44px); min-width: 0; flex-wrap: wrap; row-gap: 6px; }
  label:has(+ #adMaxPerTick), label:has(+ #adMinPriority) { min-height: 2.6em; display: flex; align-items: flex-end; }

  /* ── 9. Wissen: Graph ─────────────────────────────────────────── */
  #grSubject, #grPredicate, #grObject { flex: 1 1 100%; width: 100%; }
  .m-desk { display: none !important; }
  .m-mob[hidden] { display: inline !important; }

  /* ── 10. Login: eine Karte (Regeln in login.html), hier nur Innenabstand ── */
  #oauthPanel:not(.hidden) { padding: 28px 24px 8px; }
  #oauthPanel:not(.hidden) + #legacyPanel { padding: 16px 24px 28px; }

  /* ── 11. Governance ───────────────────────────────────────────── */
  #wsAuditCard span.text-\[10px\], #wsAuditVerify { white-space: nowrap; }
  /* Protokoll: kein Scrollen im Scrollen — Liste wächst, «Mehr laden» bleibt */
  #wsListAudit > div[style*="max-height"] { max-height: none !important; overflow: visible !important; }

  /* ── Partner: Reiter nicht umbrechen ──────────────────────────── */
  .tab-btn { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
  #tabPartners, #tabCalendar, #tabSkills { padding-left: 8px; padding-right: 8px; }
}

/* Kopfzeilen-Chips im Chat (Termine · Emails · Tasks · Erinnerungen ·
   Freigaben) bis 600 px: nur Symbol + Zähler, alle fünf in einer Zeile
   sichtbar — vorher seitlich scrollend, die Zähler von Erinnerungen und
   Freigaben lagen ausserhalb des Bildes (R34 UI-Folgen C). Die
   Beschriftung wird über font-size 0 ausgeblendet und bleibt für
   Screenreader im DOM; Tippfläche mindestens 44 × 44 px. */
@media (max-width: 600px) {
  #widgetBar {
    overflow-x: visible; padding-right: 0; gap: 6px;
    -webkit-mask-image: none;
            mask-image: none;
  }
  #widgetBar .widget-chip {
    flex: 1 1 0; min-width: 44px; min-height: 44px;
    justify-content: center; gap: 4px; padding: 0 2px;
    font-size: 0;
  }
  #widgetBar .widget-chip .chip-count { font-size: 10px; }
}

/* Sehr schmale Handys: Symbolzeile im Chat-Eingabefeld */
@media (max-width: 400px) {
  #chatForm #inputContainer > .flex > .flex > button { min-width: 36px; }
  #chatForm #inputContainer > .flex { padding-left: 8px; padding-right: 8px; }
  #chatModelSelect { padding-left: 6px; padding-right: 18px; }
  .chat-model-picker .chat-model-chevron { right: 4px; }
}