/* ═══════════════════════════════════════════════════════════════════
   mobile.css — Mobile-responsive overrides for MyAgent
   Tier 1: home2.html, index.html, org.html, boards.html, tasks.html,
           projects.html, activity.html
   Tier 2: library.html, lab.html, monitor.html, admin.html
   Strategy: Pure CSS. Only kicks in at <= 768px. Desktop is untouched.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── Universal: tap targets, no horizontal scroll ─────────── */
  html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  body {
    -webkit-tap-highlight-color: rgba(56,189,248,0.15);
  }
  button, a, input[type="checkbox"], input[type="radio"], select {
    min-height: 36px;
  }

  /* ─── Topbar (used by home2, index, others) ────────────────── */
  .topbar {
    padding: 0 8px !important;
    height: 44px !important;
    gap: 4px;
  }
  .topbar-logo { margin-right: 6px !important; }
  .logo-text { display: none; }              /* save space; logo mark stays */
  .logo-mark { width: 24px !important; height: 24px !important; }
  /* Tab group: horizontal scroll when overflowing instead of clipping */
  .tab-group {
    gap: 0 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-group::-webkit-scrollbar { display: none; }
  .tab-btn { padding: 12px 8px !important; font-size: 12px !important; }
  .topbar-right { gap: 4px !important; flex-shrink: 0 !important; }
  .header-btn { padding: 4px 7px !important; font-size: 10px !important; }
  .gym-nav-btn { padding: 5px 10px !important; font-size: 11px !important; }
  /* Hide non-essential topbar items on mobile */
  .topbar .topbar-hide-mobile { display: none !important; }

  /* Hub actions bar (home2): absolute-positioned items would clash.
     Allow wrapping so the right cluster (account select) never gets
     pushed off-screen and clipped by body{overflow-x:hidden}. */
  .hub-actions-bar {
    position: relative !important;
    flex-wrap: wrap !important;
    padding: 4px 6px !important;
    height: auto !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .hub-actions-left, .hub-actions-right {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }
  /* Hide hub name/sub text (avatar still shows) to save row space */
  .hub-agent-identity > div:not(.hub-agent-avatar) { display: none !important; }
  .hub-agent-name, .hub-agent-sub { display: none !important; }
  /* Hide Work / AI Gym mode toggle on mobile (desktop-only feature) */
  .mode-toggle { display: none !important; }
  /* Compact account select on mobile — applies to both home2
     (.hub-actions-right) and /ui (chat-header-actions). flex-shrink:0
     keeps it from being squeezed to 0 width when its row is tight. */
  #accountSelect {
    font-size: 10px !important;
    max-width: 110px !important;
    padding: 2px 4px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }
  /* /ui (index.html): chat-header is a flex row with avatar + info + actions.
     Without min-width:0 on info, long agent names push the actions
     cluster (which holds #accountSelect) off-screen where overflow-x:hidden
     on body silently clips it. */
  .chat-header { padding: 10px 12px !important; gap: 8px !important; }
  .chat-header-info { min-width: 0 !important; overflow: hidden !important; }
  .chat-header-info .chat-header-name,
  .chat-header-info .chat-header-alias {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .chat-header-actions {
    flex-shrink: 0 !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }

  /* ─── Landing input (home2 + index hub) ────────────────────── */
  .landing { padding: 24px 16px !important; }
  .landing-logo { font-size: 22px !important; }
  .landing-sub { font-size: 12px !important; margin-bottom: 20px !important; }
  .landing-input-wrap { max-width: 100% !important; padding: 0 4px; }
  .landing-textarea { font-size: 16px !important; /* prevents iOS zoom */ }
  .landing-send {
    min-width: 36px; min-height: 36px;
  }
  .tiles-wrap { gap: 6px !important; padding: 0 8px; }
  .agent-tile { padding: 6px 10px !important; font-size: 12px !important; }

  /* ─── Sidebars: become slide-over drawers ──────────────────── */
  /* Default state on mobile: sidebars hidden unless explicitly opened */
  .sidebar {
    position: fixed !important;
    top: 44px; left: 0; bottom: 0;
    width: 85vw !important;
    max-width: 320px !important;
    min-width: 0 !important;
    z-index: 150;
    box-shadow: 6px 0 24px rgba(0,0,0,0.5);
    transform: translateX(-100%);
    transition: transform 0.25s ease, width 0s !important;
  }
  .sidebar:not(.collapsed) { transform: translateX(0); }
  /* When collapsed on mobile, just slide out (do NOT shrink to width:0
     because the existing rule sets width:0 which we want to override) */
  .sidebar.collapsed {
    width: 85vw !important;
    transform: translateX(-100%);
  }
  /* Hamburger expand button: always visible on mobile */
  .sidebar-expand {
    display: flex !important;
    top: 6px !important; left: 6px !important;
    width: 32px !important; height: 32px !important;
    z-index: 250 !important;
  }
  /* Collapse button label: shorten on mobile */
  .sidebar-collapse button { padding: 8px !important; }

  /* Coach sidebar (home2): same treatment but right-side */
  .coach-sidebar {
    position: fixed !important;
    top: 44px; right: 0; bottom: 0;
    width: 85vw !important; max-width: 320px !important;
    min-width: 0 !important;
    z-index: 150;
    box-shadow: -6px 0 24px rgba(0,0,0,0.5);
  }
  .coach-sidebar.collapsed { width: 0 !important; min-width: 0 !important; }

  /* ─── File drawers (right-side panels) ─────────────────────── */
  .file-drawer {
    position: fixed !important;
    top: 44px; right: 0; bottom: 0;
    width: 85vw !important; max-width: 340px !important;
    z-index: 150;
    box-shadow: -6px 0 24px rgba(0,0,0,0.5);
  }
  .file-drawer-copy { opacity: 1 !important; }  /* always visible on mobile (no hover) */
  .file-drawer-dl { padding: 6px 8px !important; }

  /* Always-visible copy button on remote-file rows (org.html) */
  .remote-file-copy { opacity: 1 !important; }

  /* ─── Chat messages ────────────────────────────────────────── */
  .chat-messages, .chat-messages-home {
    padding: 12px 10px !important;
    gap: 10px;
  }
  .msg {
    max-width: 92% !important;
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
  .msg-system { max-width: 95% !important; }

  /* ─── Modals / overlays (full-screen on mobile) ────────────── */
  .modal-content, .modal-card, .modal-panel,
  .agent-modal, .settings-modal, .goal-modal,
  .org-edit-modal, .agent-edit-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    top: 0 !important; left: 0 !important;
  }
  .modal-overlay, .modal-backdrop { padding: 0 !important; }

  /* ─── Org page (org.html) ──────────────────────────────────── */
  /* Page header: stack the controls */
  .org-page-header, .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .org-controls, .view-toggle, .filter-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Function boxes: full width, stack */
  .function-box {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  .function-body { padding: 12px !important; }
  .dept-zone {
    gap: 12px !important;
    padding: 10px !important;
  }
  /* Inter-box connectors don't make sense at mobile widths */
  .inter-box-connectors { display: none !important; }
  /* Compact view list rows */
  .agent-row, .agent-list-item {
    flex-wrap: wrap !important;
    padding: 10px !important;
  }

  /* ─── Boards (boards.html) ─────────────────────────────────── */
  /* Widget grid: single column */
  .board-canvas, .widget-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .widget-card, .board-widget {
    width: 100% !important;
    min-height: 160px;
  }
  .board-selector, .board-chips {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ─── Tasks (tasks.html) ───────────────────────────────────── */
  .task-row, .task-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  .task-meta { font-size: 11px !important; }
  /* Kanban: stack columns vertically (swap from horizontal scroll) */
  .kanban {
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 12px !important;
    gap: 12px !important;
    /* relax fixed positioning to allow page scroll */
    position: relative !important;
    top: auto !important;
  }
  .kanban-col {
    min-width: 0 !important;
    width: 100% !important;
    max-height: none !important;
  }
  /* Filter row at top: stack and shrink */
  .filters, .filter-row {
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px 12px !important;
  }
  .filters select, .filter-row select { width: 100% !important; }

  /* ─── Projects (projects.html) ─────────────────────────────── */
  .grid {
    /* projects.html already does grid-template-columns:1fr at <=700px,
       this just ensures gap/padding shrink on narrow phones */
    gap: 12px !important;
  }
  /* (.canvas padding handled in Tier 2 block below) */
  .page-header { gap: 8px !important; }
  .project-card { padding: 14px !important; }

  /* ─── Activity (activity.html) ─────────────────────────────── */
  .activity-row, .activity-item {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 12px !important;
  }
  .activity-meta { font-size: 10px !important; }

  /* ─── Tables: horizontal scroll wrapper ────────────────────── */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* ─── Forms / inputs: prevent iOS zoom on focus ────────────── */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="url"],
  textarea, select {
    font-size: 16px !important;
  }

  /* ─── Drop down menus / popovers: full-width when wide ─────── */
  .docs-menu, .dropdown-menu, .popover {
    max-width: calc(100vw - 16px);
  }

  /* ─── Hide pure-decoration elements on mobile ──────────────── */
  .desktop-only,
  .canvas-resize-handle,
  .coach-resize-handle {
    display: none !important;
  }

  /* ─── Topbar tabs: hide ALL on mobile ─────────────────────── */
  /* Pages still reachable via direct URL. Mobile focuses on /ui chat. */
  .tab-btn {
    display: none !important;
  }

  /* ─── Chat header actions (home2 + index) ─────────────────── */
  /* Hide Reset, Files, Canvas, Configure on mobile.
     Reset is destructive, Files/Canvas are unusable at phone width,
     Configure form is too dense for a phone (use desktop instead). */
  #resetBtn,
  #fileDrawerBtn,
  #canvasBtn,
  #configureHubLink,
  .chat-header-actions .canvas-toggle-btn,
  .chat-header-actions .header-btn.danger {
    display: none !important;
  }

  /* ─── Chat input action buttons ───────────────────────────── */
  /* Hide ALL chat-input action buttons on mobile to maximize textarea
     width. ☰ drawer is reachable via topbar hamburger. 📎 🎤 🔇 ⌘
     hidden by user request — chat focuses on text + send only. */
  .chat-input-home-box .input-action,
  #homeClipBtn, #homeMicBtn,
  #clipBtn, #micBtn, #voiceModeBtn,
  #rawLogsBtn,
  .chat-input-box .clip-btn,
  .chat-input-box .mic-btn {
    display: none !important;
  }
  /* Reclaim the freed space for the textarea */
  .chat-input-home-box, .chat-input-box {
    gap: 4px !important;
  }

  /* ─── Chat agent picker bar (home2) ───────────────────────── */
  /* Hide the "Recent" org dropdown + horizontal agent tiles strip
     that sits below the chat input. Too cramped on phones; users can
     mention agents via @ autocomplete or the ☰ drawer. */
  .chat-agent-bar {
    display: none !important;
  }

  /* ─── Topbar right cluster ────────────────────────────────── */
  /* Hide platform Configure / Updates / Profile / theme / minibar
     on mobile. Keep only logo + tab strip (Home / Agents / Chat). */
  .topbar-right {
    display: none !important;
  }

  /* ─── Session tabs (home2 + index) ─────────────────────────── */
  /* Make session context visible on mobile: bigger font, more
     padding, full-width label so users can see what session they
     are in. Without this, the desktop 11px monospace font + 120px
     ellipsis truncation makes it hard to read on a phone. */
  .session-tabs {
    min-height: 40px !important;
    padding: 0 8px !important;
  }
  .session-tab {
    padding: 10px 12px !important;
    font-size: 13px !important;
    min-height: 40px !important;
  }
  .session-tab .tab-label {
    max-width: none !important;       /* let names breathe; bar already scrolls horizontally */
    font-size: 13px !important;
  }
  .session-tab.active {
    /* louder active state so users instantly see current session */
    background: rgba(34,211,238,.12) !important;
    border-bottom-width: 3px !important;
    font-weight: 600 !important;
  }
  .session-tab .tab-close {
    display: inline !important;       /* always visible on mobile (no hover) */
    font-size: 16px !important;
    padding: 2px 6px !important;
  }
  .session-tab-add {
    padding: 8px 12px !important;
    font-size: 18px !important;
    min-height: 40px !important;
  }

  /* ═════════════════════════════════════════════════════════════
     Tier 2 — library, lab, monitor, admin
     ═════════════════════════════════════════════════════════════ */

  /* ─── Secondary nav bars (library .sub-nav, admin .admin-nav) ── */
  /* Both sit directly below the topbar at top:56px on desktop.
     Topbar collapses to 44px on mobile, so re-anchor these bars
     and let their inner tabs scroll horizontally. */
  .sub-nav, .admin-nav {
    top: 44px !important;
    height: 36px !important;
    padding: 0 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .sub-nav::-webkit-scrollbar,
  .admin-nav::-webkit-scrollbar { display: none; }
  .sub-nav .type-tab, .admin-nav .type-tab,
  .sub-nav .tab-btn, .admin-nav .tab-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }

  /* ─── Library (library.html) ──────────────────────────────── */
  /* Canvas: shrink padding (existing rule at line ~265 already had
     `padding: 14px 12px` for projects; this tightens further for
     library/monitor/admin which used `padding: 32px 40px` desktop).
     Don't touch `top:` — each page anchors differently and the
     re-anchored sub-nav/admin-nav covers any small visual gap. */
  .canvas { padding: 12px !important; }
  /* Toolbar: stack search + filters */
  .toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .search-wrap, .search-wrap input {
    width: 100% !important;
    max-width: 100% !important;
  }
  .filter-pills, .type-tabs, .type-toggle {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Card grid: single column */
  .grid, .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .card, .app-card { padding: 12px !important; }
  /* Panels (slide-in detail): full screen */
  .panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    top: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
  }
  .panel-input, .panel textarea { font-size: 16px !important; }
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  /* Import overlay (skill/template import) */
  .imp-overlay { padding: 0 !important; }
  .imp-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* ─── Lab (lab.html) ──────────────────────────────────────── */
  .page { padding-top: 44px !important; }
  .lab-hero { padding: 16px 12px !important; }
  /* Tile grid: 1-column at phone widths (it does 2-col at <=700px). */
  .tile-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 12px !important;
  }
  /* Accordion: tighter padding */
  .accordion-header {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  .accordion-body { padding: 10px 12px !important; }
  /* Intake form: full-width fields */
  .intake-card { padding: 12px !important; margin: 0 12px !important; }
  .intake-field { margin-bottom: 10px !important; }
  .intake-input, .intake-textarea {
    width: 100% !important;
    font-size: 16px !important;
  }
  /* Split layout: stack chat below preview */
  .split {
    flex-direction: column !important;
    height: auto !important;
  }
  .chat-panel, .creation-header {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* ─── Monitor (monitor.html) ──────────────────────────────── */
  /* Canvas anchored at top:56 on desktop. Topbar shrinks to 44 on
     mobile leaving a 12px gap below it; acceptable since the canvas
     just begins a touch lower. Below: setup + dashboard cards. */
  .setup-card, .dash-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  .setup-header, .dash-card-header {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
  .setup-body, .dash-card-body { padding: 10px 12px !important; }
  .checklist-item {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 12px !important;
  }
  /* Activity rows already styled (Tier 1). Add stat / feed / agent rows. */
  .stat-row, .feed-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
  .activity-entry {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 8px 10px !important;
  }
  .activity-response { font-size: 12px !important; }

  /* ─── Admin (admin.html) ──────────────────────────────────── */
  /* Admin canvas anchored at 100px desktop (56 topbar + 44 admin-nav).
     On mobile admin-nav becomes 36px tall and re-anchors at top:44,
     so it ends at 80. Canvas top:100 leaves a 20px gap — minor. */
  .activity-toolbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .activity-toolbar input,
  .activity-toolbar select { width: 100% !important; }
  .channels-grid {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 8px !important;
  }
  .channel-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
  }
  .settings-page {
    padding: 12px !important;
    max-width: 100% !important;
  }
  .section { margin-bottom: 14px !important; }
  .section-body { padding: 12px !important; }
  .service-grid { gap: 8px !important; }
  /* Tab panels: drop side padding */
  .tab-panel { padding: 12px !important; }

}

/* ─── Tablet-only: 769px–1024px (modest tweaks) ────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .sidebar { width: 260px !important; min-width: 260px !important; }
  .file-drawer { width: 240px !important; }
}