/* ============================================================
   MOBILE — Smartphones (≤700px)
   Desktop bleibt unverändert!
   ============================================================ */

/* Bottom Navigation Bar */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: var(--surface);
  border-top: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom);
}
.mob-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  padding: 6px 4px;
  cursor: pointer;
  color: var(--text3);
  font-size: 10px;
  font-weight: 500;
  position: relative;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mob-nav-item.active { color: var(--accent2); }
.mob-nav-item svg { flex-shrink: 0; }
.mob-badge {
  position: absolute;
  top: 4px; right: calc(50% - 18px);
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 10px;
  min-width: 14px;
  text-align: center;
}

/* Bottom Sheet */
.mob-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border2);
  border-radius: 16px 16px 0 0;
  z-index: 4999;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  animation: mob-slide-up 0.25s ease;
}
@keyframes mob-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.mob-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 10px auto 8px;
}
.mob-sheet-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.mob-sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}
.mob-sheet-item:active { background: var(--surface2); }
.mob-sheet-danger { color: var(--danger); }

@media (max-width: 700px) {

  /* --- BODY & LAYOUT --- */
  body { font-size: 15px; }

  /* Main content: add bottom padding for nav bar via .main, not .content */
  .main { padding-bottom: 60px; }
  /* Content: kein Padding für Chat-Views, normales Padding sonst via JS gesetzt */

  /* Hide desktop topbar search + proj-chat on mobile */
  #search-btn { display: none !important; }

  /* Topbar kompakter */
  .topbar {
    padding: 0 12px !important;
    height: 52px !important;
  }
  .topbar-title { font-size: 15px !important; }

  /* New task button: icon only on mobile */
  #new-task-btn span { display: none; }
  #new-task-btn {
    width: 36px; height: 36px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 50%;
  }

  /* Proj-Chat Button: icon only */
  #proj-chat-btn span:first-of-type { display: none; }

  /* --- SIDEBAR: slide-in via hamburger, unverändert --- */

  /* --- BOTTOM NAV anzeigen --- */
  .mobile-bottom-nav { display: flex !important; }

  /* --- LOGIN BOX --- */
  .login-box {
    width: calc(100vw - 32px) !important;
    padding: 28px 20px !important;
    border-radius: 16px !important;
  }

  /* --- AUFGABENTABELLE → CARD LIST (nur in .table-wrap, nicht Admin) --- */
  .table-wrap { border: none !important; border-radius: 0 !important; overflow: visible !important; }

  .table-wrap table thead { display: none !important; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block !important; width: 100% !important; }

  .table-wrap tr {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 8px !important;
    padding: 10px 14px !important;
    position: relative !important;
  }
  .table-wrap tr:hover { background: var(--surface) !important; }
  .table-wrap tr.done { opacity: 0.5 !important; }

  .table-wrap td {
    padding: 0 !important;
    border: none !important;
    font-size: 13px !important;
  }

  /* Erste Zelle: Checkbox */
  .table-wrap tr td:first-child {
    position: absolute !important;
    top: 12px; left: 14px !important;
    width: auto !important;
  }

  /* Titel-Zelle: einrücken für Checkbox */
  .table-wrap td .task-title {
    padding-left: 28px !important;
    margin-bottom: 6px !important;
  }
  .table-wrap td .task-name { font-size: 14px !important; font-weight: 500 !important; }

  /* Alle anderen Zellen nebeneinander als Tags */
  .table-wrap td:not(:first-child):not(:nth-child(2)) {
    display: inline-flex !important;
    width: auto !important;
    margin-right: 6px !important;
    margin-top: 4px !important;
  }

  /* Priorität, Status, Datum, Assignees als Chips */
  .table-wrap .prio, .table-wrap .status-badge, .table-wrap .date-cell, .table-wrap .proj-tag {
    font-size: 11px !important;
  }
  .table-wrap .av-stack { display: inline-flex !important; }

  /* Aktionen-Zelle: immer sichtbar rechts oben */
  .table-wrap td:last-child {
    position: absolute !important;
    top: 10px; right: 12px !important;
    width: auto !important;
    opacity: 1 !important;
  }

  /* Subtask-Zeilen ausblenden */
  .table-wrap tr[style*="background:var(--surface2)"] {
    display: none !important;
  }

  /* --- ADMIN-TABELLEN (User-/Kanal-Verwaltung) → Card-Darstellung ---
     Users-Spalten:    1=Name 2=Email 3=Rolle 4=Status   5=Aktionen
     Kanal-Spalten:    1=#Name 2=Mitglieder 3=MsgCount   4=Aktionen
     Auf Mobile: Spalte 2+3 ausblenden, Rest in einer Zeile zeigen */
  .user-table { border-collapse: separate !important; border-spacing: 0 !important; width: 100% !important; }
  .user-table thead { display: none !important; }
  .user-table, .user-table tbody { display: block !important; width: 100% !important; }
  .user-table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    position: relative !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
  }
  .user-table td {
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important; /* killt die durchgehende "Strich"-Linie aus Desktop-CSS */
    border-top: none !important;
    margin: 0 !important;
    font-size: 13px !important;
    background: transparent !important;
  }
  /* Spalte 1 = Name (Users) ODER #Kanal (Channels) – volle Breite,
     damit Reihe 2 mit Rolle/Status/Aktion eigene Zeile bekommt */
  .user-table td:nth-child(1) {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .user-table td:nth-child(1) > div {
    gap: 4px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  /* Avatar / Mitglieder-Stack in Spalte 1 ausblenden – AGGRESSIV,
     weil der Inhalt sonst die "Aktiv"-Pille über den Namen schiebt */
  .user-table .user-av,
  .user-table .av-stack {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }
  /* Users: VOLLEN NAMEN zeigen (1. Div), Username (2. Div) verstecken.
     ACHTUNG: :not(.user-av) ist nötig, sonst überschreibt block:!important
     das display:none der Avatar oben! */
  .user-table td:nth-child(1) > div > div:not(.user-av):not(.av-stack) {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 1 1 0 !important;
  }
  .user-table td:nth-child(1) > div > div > div:first-child {
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
  }
  /* Defensive: jeglicher Strike-Through / Underline auf dem Namen killen */
  .user-table tr,
  .user-table td,
  .user-table td * {
    text-decoration: none !important;
    border-bottom: none !important;
  }
  /* Username (2. Div im Wrapper) hart ausblenden – auch als Geschwister */
  .user-table td:nth-child(1) > div > div > div + div,
  .user-table td:nth-child(1) > div > div > div:last-child:not(:first-child) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }
  /* Kanäle: Name + # sauber, kein Strich, kein Overlap */
  .user-table td:nth-child(1) strong {
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--text) !important;
  }
  /* Spalten 2 ausblenden (E-Mail bzw. Mitglieder), Rolle (Spalte 3) ZEIGEN */
  .user-table td:nth-child(2) {
    display: none !important;
  }
  /* Spalte 3 in Users-Tabelle = Rolle (role-badge) – auf Reihe 2 */
  .user-table tr td:nth-child(3):not(:last-child) {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .user-table tr td:nth-child(3):not(:last-child) .role-badge {
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
  }
  /* Bei Channels (4 Spalten) ist td:nth-child(3) = MsgCount → ausblenden */
  .user-table tr td:nth-child(3):last-child,
  .user-table tr:has(td:nth-child(4):last-child) td:nth-child(3) {
    display: none !important;
  }
  /* Spalte 4 in Users-Tabelle = Status-Pille → wird zu einem
     KOMPAKTEN FARBIGEN DOT (grün=aktiv, rot=inaktiv).
     Vorteil: keine Kollision mit dem Namen, klare visuelle Sprache. */
  .user-table tr td:nth-child(4):not(:last-child) {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 4px 0 8px !important;
    width: 14px !important;
  }
  .user-table tr td:nth-child(4):not(:last-child) span {
    /* Text "Aktiv"/"Inaktiv" verstecken, Pille zu Dot stauchen */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    width: 10px !important;
    height: 10px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    border: none !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.04) !important;
  }
  /* Grün für Aktiv (inline-style enthält "--success") */
  .user-table tr td:nth-child(4):not(:last-child) span[style*="success"] {
    background: var(--success) !important;
    background-color: var(--success) !important;
  }
  /* Rot für Inaktiv (inline-style enthält "--danger") */
  .user-table tr td:nth-child(4):not(:last-child) span[style*="danger"] {
    background: var(--danger) !important;
    background-color: var(--danger) !important;
  }
  /* Letzte Spalte = Aktionen-Buttons (Users td5, Channels td4)
     Rechtsbündig in Reihe 2 platzieren */
  .user-table td:last-child {
    flex: 1 1 auto !important;
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .user-table td:last-child .btn { padding: 6px 10px !important; font-size: 12px !important; }

  /* === KANÄLE-Tabelle (4 Spalten) ===
     Erkennung: td:nth-child(4) IST gleichzeitig last-child.
     Hier brechen wir die Zeile um → Name in Reihe 1,
     Bearbeiten/Löschen in Reihe 2.
     WICHTIG: Action-Buttons brauchen explizite flex-Werte,
     damit sie nicht überlaufen oder die Karte aufstapeln. */
  .user-table tr:has(td:nth-child(4):last-child) {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    align-items: center !important;
  }
  .user-table tr:has(td:nth-child(4):last-child) td:nth-child(1) {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .user-table tr:has(td:nth-child(4):last-child) td:nth-child(1) strong {
    font-size: 15px !important;
  }
  .user-table tr:has(td:nth-child(4):last-child) td:last-child {
    flex: 1 1 100% !important;
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  .user-table tr:has(td:nth-child(4):last-child) td:last-child .btn {
    flex: 0 1 auto !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }

  /* --- FILTER BUTTONS --- */
  .filters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  .filters::-webkit-scrollbar { display: none !important; }
  .filter-btn { flex-shrink: 0 !important; }
  .cols-btn { display: none !important; }

  /* --- MYDAY GRID: single column --- */
  .myday-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* --- CHAT: volle Breite, bessere Input-Zone --- */
  .chat-messages { padding: 10px 12px !important; }
  .chat-input-area { padding: 8px 12px !important; }
  .chat-header { padding: 10px 14px !important; font-size: 13px !important; }

  /* Größere Touch-Targets für Nachrichten-Buttons */
  .msg-action-btn { padding: 8px !important; }
  .msg:hover .msg-actions { display: none !important; }  /* keine hover auf touch */
  .msg-actions { display: none !important; }

  /* --- AUFGABEN-DETAIL: vollständig gestapelt --- */
  .task-detail {
    flex-direction: column !important;
    overflow-y: auto !important;
    height: 100% !important;
  }
  .task-detail-top {
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .task-detail-left {
    padding: 16px !important;
    overflow: visible !important;
  }
  .task-detail-right {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    min-height: 300px !important;
  }
  .detail-top-resize, .detail-vert-resize { display: none !important; }

  /* Detail Inline-Felder: scroll horizontal */
  [style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }

  /* --- ADMIN: gestapelt --- */
  .admin-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }
  .admin-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 8px !important;
    gap: 4px !important;
    scrollbar-width: none !important;
  }
  .admin-nav::-webkit-scrollbar { display: none !important; }
  .admin-nav-item {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    margin-bottom: 0 !important;
  }
  .admin-content { padding: 14px !important; }
  .form-grid { grid-template-columns: 1fr !important; }

  /* --- MODALS: volle Breite, als Bottom-Sheet --- */
  .modal-backdrop { padding: 0 !important; align-items: flex-end !important; }
  .modal {
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .field-row { grid-template-columns: 1fr !important; }

  /* --- SETTINGS PANEL --- */
  .settings-panel {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 16px 16px 0 0 !important;
  }

  /* --- PROJ CARDS in "Alle Chats" --- */
  .proj-card-link { padding: 10px 12px !important; }

  /* --- Subtask in Myday --- */
  .subtask-add-input { font-size: 15px !important; }

  /* --- Touch-Größen --- */
  .btn { min-height: 36px !important; }
  .cb { width: 20px !important; height: 20px !important; }
  input, select, textarea { font-size: 16px !important; } /* verhindert iOS Zoom */

  /* --- Größerer Tap-Bereich für Logout-Button --- */
  #mob-mehr-sheet .mob-sheet-item { min-height: 52px !important; }
}

/* Mobile FAB */
.mob-fab {
  position: fixed;
  bottom: 74px;
  right: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 199;
  box-shadow: 0 4px 20px rgba(91,106,240,0.5);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.15s;
}
.mob-fab:active { transform: scale(0.93); background: var(--accent2); }

@media (max-width: 700px) {
  /* Hide desktop new-task btn, show FAB */
  .hide-mobile { display: none !important; }
  #mob-fab { display: flex !important; }

  /* Topbar: only show title + hamburger + proj-chat */
  #search-btn { display: none !important; }
  .topbar { padding: 0 10px 0 4px !important; height: 52px !important; gap: 6px !important; }
  .topbar-title { font-size: 14px !important; }

  /* Members bar: smaller avatars, wrap */
  #proj-members-bar { flex-wrap: wrap !important; gap: 4px !important; font-size: 11px !important; }

  /* Proj-chat button: icon only */
  #proj-chat-btn .hide-mobile { display: none !important; }
  #proj-chat-btn { padding: 6px 8px !important; }

  /* Project header row: wrap */
  #proj-header-row { gap: 4px !important; }

  /* Content scroll area must not overflow behind FAB — handled via .main padding */
  /* .content { padding-bottom: 80px !important; } — ENTFERNT, wird per JS gesetzt */
  .content.chat-view { padding: 0 !important; }

  /* Table card view fixes */
  .table-wrap table { border-spacing: 0 !important; }

  /* Each task row as card */
  tbody tr {
    display: block !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    padding: 12px 14px 10px 42px !important;
    position: relative !important;
  }
  tbody td { display: block !important; padding: 0 !important; border: none !important; }

  /* Checkbox position */
  tbody tr > td:first-child {
    position: absolute !important;
    left: 12px !important;
    top: 14px !important;
    width: auto !important;
    padding: 0 !important;
  }

  /* Title row */
  tbody tr > td:nth-child(2) { margin-bottom: 6px !important; }
  .task-title { padding-left: 0 !important; }
  .task-name { font-size: 14px !important; white-space: normal !important; }

  /* Hide less important columns on mobile */
  tbody td[style*="project"], tbody td:empty { display: none !important; }

  /* Bottom row with prio + status + date + assignees */
  tbody tr > td:not(:first-child):not(:nth-child(2)):not(:last-child) {
    display: inline-flex !important;
    margin-right: 6px !important;
    margin-top: 2px !important;
    vertical-align: middle !important;
    width: auto !important;
  }

  /* Actions: always visible top-right */
  tbody tr > td:last-child {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: auto !important;
  }

  /* Subtask rows: hide in table view */
  tr[style*="surface2"] { display: none !important; }

  /* Empty state */
  .empty { padding: 40px 20px !important; font-size: 14px !important; }
}

.msg-content{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:4px;}

/* ============================================================
   MOBILE – Alle Aufgaben: Projekt-Gruppen als Karten
   ============================================================ */
@media (max-width: 700px) {

  /* Tabelle → Karten */
  .proj-group-body thead { display: none !important; }
  .proj-group-body table,
  .proj-group-body tbody { display: block !important; width: 100% !important; }

  /* Projekt-Tag-, Priorität- und Status-Spalte ausblenden */
  .proj-group-body td:has(.proj-tag) { display: none !important; }
  .proj-group-body td:has(.prio) { display: none !important; }
  .proj-group-body td:has(.status-badge) { display: none !important; }
  /* Fallback nth-child: 3=project 4=priority 5=status */
  .proj-group-body tbody tr:not([style*="surface2"]) > td:nth-child(3),
  .proj-group-body tbody tr:not([style*="surface2"]) > td:nth-child(4),
  .proj-group-body tbody tr:not([style*="surface2"]) > td:nth-child(5) { display: none !important; }

  /* Subtask-Zeilen ZEIGEN (override: tr[style*="surface2"] oben) */
  .proj-group-body tr[style*="surface2"] {
    display: block !important;
    border: none !important;
    border-left: 2px solid var(--border2) !important;
    border-radius: 6px !important;
    margin: 2px 0 2px 28px !important;
    padding: 6px 10px !important;
    background: var(--surface2) !important;
  }
  .proj-group-body tr[style*="surface2"] td { display: block !important; padding: 0 !important; }

  /* Task-Zeile als Karte */
  .proj-group-body tbody tr:not([style*="surface2"]) {
    display: block !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    margin-bottom: 6px !important;
    padding: 10px 12px 8px 40px !important;
    position: relative !important;
  }
  .proj-group-body tbody tr:not([style*="surface2"]) td {
    display: block !important; padding: 0 !important; border: none !important;
  }
  .proj-group-body tbody tr > td:first-child {
    position: absolute !important; left: 10px !important; top: 12px !important; width: auto !important;
  }
  .proj-group-body .task-name { font-size: 14px !important; font-weight: 500 !important; white-space: normal !important; }
  .proj-group-body .task-title { margin-bottom: 5px !important; }
  .proj-group-body tbody tr > td:not(:first-child):not(:nth-child(2)):not(:last-child) {
    display: inline-flex !important; width: auto !important;
    margin-right: 5px !important; margin-top: 3px !important;
  }
  .proj-group-body tbody tr > td:last-child {
    position: absolute !important; top: 10px !important; right: 10px !important; width: auto !important;
  }

  /* ============================================================
     MOBILE – Aufgaben-Detail: volle Breite, Felder als Zeilen
     ============================================================ */

  /* Titel */
  #detail-title { font-size: 17px !important; width: 100% !important; box-sizing: border-box !important; }

  /* Felder-Block vertikal */
  .task-detail-left [style*="overflow-x:auto"] {
    flex-direction: column !important;
    overflow-x: visible !important;
    gap: 0 !important;
    padding: 8px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .task-detail-left [style*="overflow-x:auto"] > div:not([style*="width:1px"]) {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .task-detail-left [style*="overflow-x:auto"] > div[style*="width:1px"] { display: none !important; }
  .detail-label { font-size: 12px !important; color: var(--text3) !important; }
  .detail-select { font-size: 13px !important; max-width: 60% !important; }

  /* Beschreibung volle Breite */
  #detail-desc {
    width: 100% !important; box-sizing: border-box !important;
    font-size: 14px !important; min-height: 50px !important;
  }
  .task-detail-left { width: 100% !important; box-sizing: border-box !important; overflow: visible !important; }

  /* Chat stapeln, nicht überlagern */
  .task-detail-top {
    flex-direction: column !important;
    height: auto !important; max-height: none !important; overflow: visible !important;
  }
  #detail-container {
    overflow-y: auto !important; flex-direction: column !important; height: 100% !important;
  }
  .task-detail-right {
    width: 100% !important; min-height: 220px !important; max-height: 320px !important;
    border-left: none !important; border-top: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }
  .detail-top-resize, .detail-vert-resize { display: none !important; }

  /* ============================================================
     MOBILE – Chat-Nachrichten: Desktop-Grid aufheben
     ============================================================ */
  .msg {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }
  .msg-avatar { width: 32px !important; height: 32px !important; font-size: 11px !important; flex-shrink: 0 !important; }
  .msg-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    flex: 1 !important; min-width: 0 !important; padding-left: 0 !important;
  }
  .msg-header { display: flex !important; align-items: baseline !important; gap: 6px !important; margin-bottom: 3px !important; grid-column: unset !important; grid-row: unset !important; }
  .msg-name { font-size: 13px !important; font-weight: 600 !important; }
  .msg-time { font-size: 11px !important; color: var(--text3) !important; flex-shrink: 0 !important; }
  .msg-content { display: flex !important; flex-direction: column !important; gap: 4px !important; grid-column: unset !important; grid-row: unset !important; }
  .msg-sep { display: none !important; }
  .msg-text { font-size: 14px !important; line-height: 1.45 !important; word-break: break-word !important; overflow-wrap: anywhere !important; white-space: normal !important; }
  .msg-actions { display: none !important; }

  /* FAB ausblenden im Task-Detail */
  body[data-view="task"] #mob-fab { display: none !important; }
}


/* ============================================================
   MOBILE – Task-Detail Reihenfolge: Links → Unterpunkte → Chat
   display:contents macht task-detail-top "unsichtbar" für Flexbox
   ============================================================ */
@media (max-width: 700px) {

  /* task-detail: flacher Flex-Container */
  .task-detail {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    height: 100% !important;
  }

  /* task-detail-top transparent für Flex → Kinder werden direkte Flex-Items */
  .task-detail-top { display: contents !important; }

  /* Reihenfolge */
  .task-detail-left   { order: 1 !important; }
  .detail-top-resize  { display: none !important; }
  #detail-vert-resize { display: none !important; }
  /* Unterpunkte-Block (sibling nach task-detail-top, enthält border-top) */
  .task-detail > [style*="border-top:1px solid var(--border)"] { order: 2 !important; }
  /* Chat (task-detail-right) */
  .task-detail-right  { order: 3 !important; }

  /* Chat: collapsed by default (JS steuert, aber Fallback) */
  .task-detail-right {
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }
  #mob-chat-toggle { cursor: pointer !important; }
  #mob-chat-arrow { float: right; }

  /* ============================================================
     FAB: höher platzieren damit er nicht Inhalt verdeckt
     ============================================================ */
  #mob-fab { bottom: 130px !important; }
  body[data-view="task"] #mob-fab { display: none !important; }

  /* ============================================================
     Chat-Nachrichten: Desktop-Grid aufheben (zweiter Block)
     ============================================================ */
  .msg {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .msg:last-child { border-bottom: none !important; }
  .msg-avatar {
    width: 30px !important; height: 30px !important; font-size: 10px !important;
    flex-shrink: 0 !important; margin-top: 1px !important;
  }
  .msg-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    flex: 1 !important; min-width: 0 !important; padding-left: 0 !important;
  }
  .msg-actions { display: none !important; }
  .msg-header {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin-bottom: 4px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    grid-column: unset !important; grid-row: unset !important;
  }
  .msg-name {
    font-size: 12px !important; font-weight: 700 !important;
    flex-shrink: 0 !important; max-width: 55% !important;
    overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  .msg-time { font-size: 11px !important; color: var(--text3) !important; flex-shrink: 0 !important; white-space: nowrap !important; }
  .msg-sep { display: none !important; }
  .msg-content {
    display: flex !important; flex-direction: column !important; gap: 5px !important;
    grid-column: unset !important; grid-row: unset !important;
  }
  .msg-text { font-size: 14px !important; line-height: 1.45 !important; word-break: break-word !important; overflow-wrap: anywhere !important; white-space: normal !important; }
}

/* ============================================================
   MOBILE – Alle Aufgaben: Karten-Optimierung
   ============================================================ */
@media (max-width: 700px) {

  /* Projekt, Priorität, Status ausblenden */
  .proj-group-body tbody tr > td:has(.proj-tag),
  .proj-group-body tbody tr > td:has(.prio),
  .proj-group-body tbody tr > td:has(.status-badge) { display: none !important; }

  /* Fälligkeitsdatum: kompakt inline */
  .proj-group-body tbody tr > td:has(.date-cell) {
    display: inline-flex !important;
    width: auto !important;
    margin-top: 4px !important;
    margin-right: 6px !important;
  }

  /* Assignees: unter dem Titel als eigene Zeile */
  .proj-group-body tbody tr > td:has(.av-stack) {
    display: block !important;
    width: 100% !important;
    margin-top: 4px !important;
    padding: 0 !important;
  }
  .proj-group-body .av-stack {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* Subtask-Zeilen anzeigen (override globales hide) */
  .proj-group-body tr[style*="surface2"],
  .proj-group-body tr[style*="var(--surface2)"] {
    display: block !important;
    border: none !important;
    border-left: 2px solid var(--border2) !important;
    border-radius: 6px !important;
    margin: 2px 0 2px 28px !important;
    padding: 6px 10px !important;
    background: var(--surface2) !important;
  }
  .proj-group-body tr[style*="surface2"] td,
  .proj-group-body tr[style*="var(--surface2)"] td {
    display: block !important;
    padding: 0 !important;
  }

  /* Subtask-inner Layout */
  .proj-group-body .subtask-inner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Auch in "Alle Aufgaben" (keine .proj-group-body Klasse) */
  tbody tr[style*="surface2"],
  tbody tr[style*="var(--surface2)"] {
    display: block !important;
    border: none !important;
    border-left: 2px solid var(--border2) !important;
    border-radius: 6px !important;
    margin: 2px 0 2px 28px !important;
    padding: 6px 10px !important;
    background: var(--surface2) !important;
  }
  tbody tr[style*="surface2"] td,
  tbody tr[style*="var(--surface2)"] td {
    display: block !important;
    padding: 0 !important;
  }
  /* ============================================================
     MOBILE ADMIN — Nutzer & Kanäle (komplett neue, isolierte
     Klassen; KEIN Override mehr von .user-table — die alten
     Regeln greifen einfach ins Leere, weil mobile-admin.js die
     Tabellen-Markup auf Mobile gar nicht mehr ausgibt.)
     ============================================================ */
  .mob-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
  }
  .mob-admin-header .btn {
    flex-shrink: 0;
  }

  .mob-admin-search {
    width: 100%;
    padding: 10px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    color: var(--text);
    font-size: 14px;
    box-sizing: border-box;
  }
  .mob-admin-search:focus {
    outline: none;
    border-color: var(--accent);
  }

  .mob-admin-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mob-admin-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .mob-admin-row1 {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .mob-admin-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* defensiv gegen vererbte Strikes / Borders */
    text-decoration: none;
    border: none;
    background: transparent;
  }
  .mob-admin-chan { display: inline-flex; align-items: center; gap: 6px; }
  .mob-chan-hash { color: var(--text3); font-weight: 400; }

  .mob-admin-meta {
    font-size: 12px;
    color: var(--text3);
    margin-top: -4px;
  }

  .mob-admin-row2 {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .mob-admin-row2 .role-badge {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .mob-admin-spacer { flex: 1 1 auto; }

  .mob-admin-action {
    flex: 0 0 auto;
    padding: 7px 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }

  /* Status-Dot */
  .mob-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.04);
  }
  .mob-dot-on  { background: var(--success); }
  .mob-dot-off { background: var(--danger); }
}


/* ============================================================
   FIX: Unterpunkte in Aufgaben-Detail (Mobile)
   Vorher: Titel wurde zwischen Avatar links und 📎/📝-Buttons
   rechts auf wenige Pixel zusammengeschoben (1 Wort pro Zeile).
   Jetzt: Reihe 1 = Checkbox + Avatar + Titel (volle Breite),
          Reihe 2 = Meta (Datum, Datei, Notizen, Aktionen)
   ============================================================ */
@media (max-width: 700px) {
  .subtask-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    column-gap: 8px !important;
    row-gap: 6px !important;
    padding: 10px 6px !important;
  }

  /* Checkbox & Avatar (Kürzel): bleiben oben in 1. Zeile auf
     Höhe der ersten Titel-Zeile (nicht vertikal zentriert über
     den umgebrochenen Block) */
  .subtask-item > .cb,
  .subtask-item > [onclick*="showSubtaskAssigneePicker"] {
    margin-top: 1px !important;
    align-self: flex-start !important;
    flex-shrink: 0 !important;
  }

  /* Titel: belegt zusammen mit Checkbox + Avatar die ganze 1. Zeile.
     flex-basis = 100% minus (cb 20 + avatar ~22 + 2×gap 8) ≈ 60px  */
  .subtask-item .subtask-title {
    flex: 1 1 calc(100% - 64px) !important;
    min-width: 0 !important;
    width: auto !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    font-size: 14px !important;
  }

  /* Alles nach dem Titel (Datum, Datei-Chip, Notiz-Button,
     Verschieben, Löschen) rutscht in die 2. Zeile.
     Per default sind diese Buttons flex-shrink:0 → bleiben kompakt. */
  .subtask-item > *:not(.cb):not(.subtask-title):not([onclick*="showSubtaskAssigneePicker"]) {
    margin-left: 0 !important;
  }

  /* Optional: Datei-Chip darf etwas mehr Platz nehmen,
     aber nie die Zeile sprengen */
  .subtask-item [onclick*="openFileViewer"] {
    flex: 1 1 0 !important;
    min-width: 60px !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    /* gap zwischen Emoji + Text aus dem Inline-Style killen,
       sonst kann Ellipsis nicht greifen */
    gap: 0 !important;
  }

  /* Datum-Chip: nicht schrumpfen, aber knapp halten */
  .subtask-item > span[title="Fälligkeit"] {
    flex-shrink: 0 !important;
  }

  /* Attach-Button (📎 zum Hinzufügen) auf Mobile ausblenden –
     er war eh nur per Hover sichtbar und nutzlos auf Touch */
  .subtask-item .sub-attach-btn {
    display: none !important;
  }

  /* Löschen-Button auf Mobile sichtbar und kompakt –
     KEIN margin-left:auto, sonst springt er auf eine 3. Zeile */
  .subtask-item .subtask-del {
    opacity: 1 !important;
    color: var(--text3) !important;
    font-size: 13px !important;
    padding: 2px 6px !important;
    flex-shrink: 0 !important;
  }

  /* Notiz- & Verschieben-Button: fix klein halten */
  .subtask-item .sub-note-btn,
  .subtask-item .sub-move-btn {
    flex-shrink: 0 !important;
  }
}


/* ============================================================
   MEIN BEREICH — Mobile (v23)
   ============================================================ */
@media (max-width: 700px) {
  .notes-header { padding: 12px 14px; }
  .notes-header-title { font-size: 16px; }
  .notes-toolbar { padding: 8px 14px; flex-wrap: wrap; gap: 6px; }
  .notes-search { flex: 1 1 100%; }
  .notes-tabs { flex: 1 1 100%; }
  .notes-tab { flex: 1; }

  .notes-list-header { padding: 6px 14px; grid-template-columns: 24px 1fr 70px; gap: 8px; }
  .note-row {
    padding: 10px 14px;
    grid-template-columns: 24px 1fr 70px;
    gap: 8px;
  }
  .note-row .col-title { font-size: 13px; }
  .note-row .col-date { font-size: 10px; }
  .note-row .col-icon .icon-box { width: 20px; height: 20px; font-size: 11px; }

  /* Kein Hover-Preview auf Mobile */
  .note-preview { display: none !important; }

  .note-modal-overlay { padding: 0; align-items: stretch; }
  .note-modal {
    width: 100%; max-width: 100%;
    min-width: 0;                 /* überschreibt Desktop min-width:480px → kein Überlauf */
    border-radius: 0; border: none;
    height: 100dvh;               /* exakt sichtbarer Bereich (berücksichtigt Browserleiste) */
    min-height: 0;                /* Desktop min-height neutralisieren */
    max-height: 100dvh;           /* Desktop max-height:92vh neutralisieren */
    resize: none;                 /* kein Resize-Grip auf Touch */
  }
  .note-modal::after { display: none; }   /* Resize-Eckgriff ausblenden */
  .note-modal-title { padding: 12px 14px 4px; }
  .note-modal-title input { font-size: 18px; }
  .note-modal-shared { padding: 0 14px 10px; }
  .note-modal-body { padding: 4px 14px 12px; }
  .note-modal-body textarea { min-height: 280px; font-size: 14px; }
  .note-modal-attachments { padding: 0 14px 12px; }
  .note-modal-link-row { padding: 4px 14px 12px; }
  .note-modal-footer { padding: 8px 14px; }

  .note-share-modal {
    width: 100%; max-width: 100%;
    border-radius: 0; border: none;
    min-height: 100vh;
  }
}

/* ============================================================
   MEDIATHEK — Mobile-Anpassungen
   ============================================================ */
@media (max-width: 700px) {
  .mediathek-box { padding: 6px 8px; margin-bottom: 4px; }
  .mediathek-title { font-size: 12px; }
  .mediathek-count { font-size: 10px; padding: 1px 6px; }
  .media-view-switch button { width: 22px; height: 20px; font-size: 12px; }
  .media-btn { height: 22px; font-size: 11px; padding: 0 6px; }
  .media-grid-tile { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 5px; }
  .media-grid-sm   { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; }
  .media-grid-max  { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .media-tile-label { font-size: 9px; padding: 2px 4px; }
  .media-tile-del { width: 22px; height: 22px; display: flex; opacity: 0.85; }
  .media-row { grid-template-columns: 24px 1fr 80px 22px; }
  .media-row-size { display: none; }
  .mediathek-max-overlay { padding: 8px; }
  .mediathek-max-box { height: 96vh; }
  .mediathek-max-head { padding: 10px 12px; }
  .mediathek-max-strip { padding: 8px 10px; gap: 4px; }
  .media-strip-thumb { width: 50px; height: 50px; }
  .media-preview-wrap { padding: 8px; }
  .media-preview-meta { padding: 6px 10px; font-size: 11px; }
  .media-nav-arrow { width: 40px; font-size: 28px; }
  .media-nav-prev, .media-nav-next { left: auto; right: auto; }
}