/* ================================================
   ArgusOS — Mobiel (telefoon en tablet, ≤ 980px)
   Laadt als laatste: alles hier overschrijft de desktop-regels alleen
   binnen de media query. Boven 980px verandert er niets.
   ================================================ */

:root {
  --mobile-nav-h: 60px;
  /* Hoogte van header + ticker + main-padding, gemeten door js/mobile.js.
     Sinds 23-09 niet meer nodig voor de chat (die is flex, zie onder), maar
     beschikbaar voor wie een ander scherm exact wil laten passen. */
  --mobile-chrome: 200px;
}

@media (max-width: 980px) {
  html, body { height: 100%; overflow: hidden; }
  body { font-size: 14px; }

  /* ===== Shell: één kolom, rail weg, nav onderin ===== */
  .shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 28px 1fr;
    grid-template-areas:
      "header"
      "ticker"
      "main";
    height: 100dvh;
  }
  .rail { display: none; }

  .main {
    padding: 14px 14px calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* ===== Header compact ===== */
  .header {
    padding: 8px 12px; min-height: 0; gap: 8px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
  }
  .brand-word { font-size: 13px; }
  .core-wrap { gap: 8px; justify-self: center; min-width: 0; }
  .core { width: 44px; height: 44px; }
  .core-readout { min-width: 0; }
  .core-readout .status { font-size: 10px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
  .core-readout .sub { display: none; }
  .speak-btn { padding: 6px; gap: 0; border-radius: 50%; width: 44px; height: 44px; justify-content: center; }
  .speak-btn .mic-icon { width: 30px; height: 30px; }
  .speak-btn #speakBtnLabel { display: none; }
  .wake-badge { display: none; }
  .whoami { display: none; }
  .header-right { gap: 10px; flex-wrap: nowrap; justify-self: end; }
  .header-stat .val { font-size: 12px; }
  .header-stat .lbl { font-size: 7.5px; letter-spacing: .03em; }
  .chat-input input, .chat-input textarea { min-width: 0; }

  .ticker::before { font-size: 7.5px; padding: 2px 7px; }
  .ticker-track { font-size: 10px; gap: 28px; }

  /* ===== Views ===== */
  .view-head { margin-bottom: 14px; gap: 8px; }
  .view-title { font-size: 18px; }
  .view-sub { font-size: 12.5px; }
  .panel { padding: 12px; }
  .external-redirect-panel { min-height: 40dvh; }

  /* Geen zoom bij focus op iOS: invoer minimaal 16px. */
  input, select, textarea { font-size: 16px !important; }
  .chat-input input, .chat-input textarea { font-size: 16px; }

  /* Tikdoelen */
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn svg { width: 18px; height: 18px; }
  .edit-btn, .movebtn, .new-session-btn, .group-manage-btn, .group-delete-btn,
  .ma-edit-btn, .ma-delete-btn, .tweak-btn, .btn-sm { min-height: 40px; }
  .task-card-foot { flex-wrap: wrap; gap: 8px; }

  /* ===== Chat & Groepen: het venster krijgt alle hoogte tussen kop en nav =====
     Tot 23-09 kreeg .chat-shell een berekende hoogte (100dvh min een gemeten
     "chrome"). Die meting kende de groepskop en de lange uitleg boven Groepen
     niet, dus daar bleef voor de berichten bijna niets over en scrolde de
     pagina onder de nav door. Nu is het gewoon flex: .main wordt een kolom
     zonder eigen scroll, de view vult hem, de shell vult de view, en alleen de
     berichten scrollen. De uitleg (.view-sub) verdwijnt: op een telefoon is
     elke regel boven de chat een regel chat minder. */
  .main:has(#view-chat.active), .main:has(#view-groups.active) {
    display: flex; flex-direction: column; overflow: hidden;
    padding: 8px 10px calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px) + 6px);
  }
  #view-chat.active, #view-groups.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #view-chat .view-head, #view-groups .view-head { flex: none; margin: 0 0 6px; align-items: center; }
  #view-chat .view-title, #view-groups .view-title { font-size: 15px; }
  #view-chat .view-sub, #view-groups .view-sub { display: none; }
  .chat-shell {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
    height: auto; padding: 8px; gap: 6px;
    /* Zonder :has (oude browsers) is .main geen flexkolom; dan alsnog een
       redelijke hoogte in plaats van een ingeklapte shell. */
    min-height: min(55dvh, 100%);
  }
  .chat-list, .chat-list-col, .chat-shell .chat-list-col .chat-list { display: flex; flex: none; }
  .chat-list-col { flex-direction: column; }
  .chat-list {
    flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 2px 2px 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .chat-list::-webkit-scrollbar { display: none; }
  .chat-contact {
    flex: none; flex-direction: column; width: 58px; padding: 4px 2px; gap: 4px; margin: 0;
    text-align: center; scroll-snap-align: start;
  }
  .chat-contact img, .chat-contact .group-icon { width: 32px; height: 32px; font-size: 15px; }
  .chat-contact-meta { width: 100%; }
  .chat-contact-name { font-size: 10.5px; justify-content: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .chat-contact-name .mini-dot { display: inline-block; vertical-align: middle; }
  .chat-contact-preview { display: none; }
  .group-list-head { padding: 0 2px 4px; }
  .group-new-form { margin: 0 0 8px; }

  .chat-window { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  /* Kop van het venster: één regel. Naam en rol knippen af, de knoppen blijven
     staan; niets wikkelt naar een tweede regel. */
  .chat-window-head { flex: none; flex-wrap: nowrap; gap: 8px; padding-bottom: 6px; margin-bottom: 6px; min-width: 0; }
  .chat-window-head img { width: 30px; height: 30px; flex: none; }
  .chat-window-head .group-icon { width: 30px !important; height: 30px !important; font-size: 15px !important; flex: none; }
  .chat-window-head > div:not(.group-icon) { flex: 1 1 auto; min-width: 0; }
  .chat-window-head .name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-window-head .role { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-window-head .group-manage-btn, .chat-window-head .group-delete-btn, .chat-window-head .new-session-btn {
    flex: none; min-height: 34px; padding: 0 8px; font-size: 11px; white-space: nowrap;
  }
  /* Leden: één scrollende regel in plaats van een blok dat wikkelt. */
  .group-members {
    flex: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    padding-bottom: 6px; margin-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .group-members::-webkit-scrollbar { display: none; }
  .group-member-pill { flex: none; }
  .chat-messages { flex: 1; min-height: 0; overflow-y: auto; gap: 8px; padding-right: 2px; }
  .msg { max-width: 88%; }
  .msg-bubble { font-size: 14px; padding: 9px 12px; }
  .chat-input { flex: none; margin-top: 6px; padding: 4px 4px 4px 12px; gap: 4px; }
  .pending-attachment { flex-wrap: wrap; }
  .mention-menu { left: 8px; right: 8px; min-width: 0; }

  /* ===== Vloer ===== */
  .floor-stage { height: 360px; }
  .canvas-outer { min-height: 280px; padding: 6px 0; }
  .canvas-note { font-size: 11.5px; }
  .tweaks { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .tweak-btn { white-space: nowrap; }

  /* ===== Health ===== */
  .summary-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
  .summary-card .val { font-size: 20px; }
  .health-grid { grid-template-columns: 1fr; }

  /* ===== Taken ===== */
  .new-task-bar { gap: 8px; }
  .new-task-bar input[type="text"], .new-task-bar input[type="date"], .new-task-bar select, .new-task-bar button { width: 100%; min-width: 0; flex: 1 1 100%; }
  .task-done-btn, .task-del-btn, .task-run-btn { min-height: 40px; }
  #view-tasks .view-head { flex-wrap: wrap; gap: 8px; }
  .board { grid-template-columns: 1fr; }
  .board-col { min-height: 80px; }

  /* ===== Mijn Agents / formulieren ===== */
  .ma-list { grid-template-columns: 1fr; }
  .ma-new-toggle-btn { width: 100%; text-align: center; min-height: 44px; }
  .createagent-form { max-width: none; }
  .ca-task-row { grid-template-columns: 1fr 96px 40px; }
  .ca-visibility-options { gap: 10px; }

  /* ===== Admin: tabellen scrollen binnen hun paneel, nooit de pagina ===== */
  .panel:has(> .admin-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table { min-width: 560px; }
  .admin-table td { padding: 10px 8px; }
  .add-user-bar input, .add-user-bar select, .add-user-bar button { width: 100%; min-width: 0; flex: 1 1 100%; }
  .perm-grid { grid-template-columns: 1fr repeat(3, 52px); font-size: 10px; }
  .wz-rij { flex-direction: column; gap: 2px; }
  .wz-rij > span { flex: none; }
  .worker-actions { white-space: normal; }

  /* ===== Profiel ===== */
  #view-profiel .panel { max-width: none !important; }

  /* ===== Modals ===== */
  .modal-overlay { padding: 10px; align-items: flex-end; }
  .modal-panel { max-height: 92dvh; padding: 18px 14px; border-radius: 16px 16px 0 0; }
  .confirm-modal { width: 96%; padding: 18px; }

  /* ===== Onderste navigatie ===== */
  .mobile-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: stretch;
    height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(11,19,23,0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
  }
  .mobile-nav-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: transparent; border: none; color: var(--text-dim); min-width: 0; padding: 6px 2px;
    transition: color var(--transition-fast);
  }
  .mobile-nav-btn svg { width: 22px; height: 22px; }
  .mobile-nav-btn span { font-size: 10px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
  .mobile-nav-btn.active { color: var(--teal); }
  .mobile-nav-btn.active svg { filter: drop-shadow(0 0 6px var(--teal-glow)); }
  .mobile-nav-btn.admin-nav.active { color: var(--salmon); }

  /* ===== "Meer"-paneel ===== */
  .mobile-more-backdrop {
    position: fixed; inset: 0; z-index: 70; background: rgba(5,9,11,0.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: fade-in 0.15s var(--ease-out);
  }
  .mobile-more {
    position: fixed; left: 0; right: 0; z-index: 71;
    bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
    background: var(--bg-panel); border-top: 1px solid var(--border-strong);
    border-radius: 16px 16px 0 0; padding: 10px 10px 12px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    animation: fade-in-up 0.2s var(--ease-out);
    max-height: 70dvh; overflow-y: auto;
  }
  .mobile-more-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-height: 68px; padding: 10px 6px; border-radius: var(--radius-sm);
    background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted);
    font-size: 11.5px; font-weight: 500;
  }
  .mobile-more-item svg, .mobile-more-item .model-monogram { width: 22px; height: 22px; }
  .mobile-more-item.active { color: var(--teal); border-color: rgba(9,175,150,0.3); background: var(--teal-soft); }
  .mobile-more-item.admin-nav { color: var(--salmon); }
  .mobile-more-item.danger { color: var(--err); }
  .mobile-more-user {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 11px; color: var(--text-muted); padding: 4px 6px 2px;
  }
  .mobile-more-user b { color: var(--text); }
}

/* Telefoon (≤ 600px): het merk mag weg — het icoon staat al in de nav — en de
   kop bestaat uit de kern (links) en de drie getallen (rechts). */
@media (max-width: 600px) {
  .brand { display: none; }
  .header { grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; }
  .core-wrap { justify-self: start; gap: 6px; }
  .core-readout .status { font-size: 9px; max-width: 96px; }
  .header-right { gap: 7px; }
  .header-stat { min-width: 44px; }
  .header-stat .val { font-size: 11px; }
  .header-stat .lbl { font-size: 6.5px; letter-spacing: 0; }
}

/* Smalle telefoons (≤ 400px): de statusregel past niet meer naast de drie
   getallen; de kleur van de kern zegt hetzelfde. */
@media (max-width: 400px) {
  .core-readout { display: none; }
  .header-stat { min-width: 40px; }
}

/* Tablet liggend/breed (700–980px): twee kolommen waar dat past. */
@media (min-width: 700px) and (max-width: 980px) {
  .board { grid-template-columns: repeat(3, 1fr); }
  .health-grid { grid-template-columns: repeat(2, 1fr); }
  .ma-list { grid-template-columns: repeat(2, 1fr); }
  .summary-strip { grid-template-columns: repeat(4, 1fr); }
  .core-readout .sub { display: block; }
  .core-readout .status { max-width: 260px; }
  .whoami { display: flex; }
  .mobile-more { grid-template-columns: repeat(5, 1fr); }
}

/* Desktop: de mobiele elementen bestaan niet. */
@media (min-width: 981px) {
  .mobile-nav, .mobile-more, .mobile-more-backdrop { display: none !important; }
}