/* ── MOBILE RESPONSIVE ─────────────────────────────────
   Breakpoints: 768px (tablet), 640px (phone)
   Touch targets: 44px minimum
   ───────────────────────────────────────────────────── */

/* ── Hamburger button (hidden on desktop) ──────────── */
.mob-menu-btn{display:none;width:44px;height:44px;background:none;border:1px solid var(--border);border-radius:3px;cursor:pointer;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;color:var(--muted);transition:all 0.15s;}
.mob-menu-btn:hover{border-color:var(--border-lt);color:var(--text);}
.sidebar-backdrop{display:none;position:fixed;inset:0;z-index:19;background:rgba(0,0,0,0.6);backdrop-filter:blur(3px);}
.sidebar-backdrop.visible{display:block;}

/* ══════════════════════════════════════════════════════
   TABLET — max-width 768px
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Topbar ──────────────────────────────────────── */
  .topbar{padding:0 10px;gap:8px;height:48px;}
  .tb-platform{display:none;}
  .tb-name{font-size:14px;}
  .tb-right{gap:4px;}
  .tb-btn{padding:6px 8px;font-size:11px;}
  .tb-btn .btn-label{display:none;}
  .voice-bar{gap:3px;}
  .vc-label,.vc-status,.vc-divider{display:none;}

  /* ── Hamburger visible ───────────────────────────── */
  .mob-menu-btn{display:flex;}

  /* ── Sidebar becomes slide-out drawer ─────────────── */
  .agent-sidebar{position:fixed;left:-260px;top:0;bottom:0;width:250px;z-index:20;transition:left 0.25s ease;box-shadow:none;padding-top:12px;background:var(--surface);border-right:1px solid var(--border);}
  .agent-sidebar.open{left:0;box-shadow:8px 0 32px rgba(0,0,0,0.5);}

  /* ── Sidebar buttons — larger touch targets ──────── */
  .agent-btn{padding:12px 16px;gap:10px;min-height:48px;}
  .agent-icon{width:36px;height:36px;font-size:17px;}
  .agent-name{font-size:15px;}
  .agent-role{font-size:11px;}

  /* ── Job bar stacks ──────────────────────────────── */
  .job-bar{height:auto;padding:8px 12px;flex-wrap:wrap;gap:6px;}
  .jb-div{display:none;}
  .jb-num{width:90px;}
  .jb-client{width:140px;}
  .jb-site{max-width:none;flex:1;min-width:120px;}
  .jb-tag{width:100%;justify-content:center;margin-top:2px;}
  .jb-input{height:32px;font-size:13px;padding:5px 10px;}

  /* ── Chat messages — prevent overflow ─────────────── */
  .msg{max-width:100%;}
  .msg-bubble{overflow-wrap:break-word;word-break:break-word;}

  /* ── Chat split → stacked ────────────────────────── */
  .est-main{flex-direction:column;}
  .est-chat{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:50vh;}
  .est-output{min-height:200px;}

  /* ── Brief panel → full width overlay ────────────── */
  .brief-panel{position:fixed;right:-100%;top:0;bottom:0;width:85vw;max-width:380px;z-index:25;transition:right 0.25s ease;box-shadow:none;}
  .brief-panel.visible{right:0;box-shadow:-8px 0 32px rgba(0,0,0,0.5);}

  /* ── Control Panel → full width ──────────────────── */
  .cp-panel{width:100vw;max-width:400px;}

  /* ── Login card ──────────────────────────────────── */
  .lcard{width:90vw;max-width:460px;padding:32px 28px;}

  /* ── Guide modal ─────────────────────────────────── */
  .guide-modal{width:95vw;max-height:92vh;}
  .guide-tab{padding:8px 12px;font-size:12px;}

  /* ── Textarea sizing ─────────────────────────────── */
  .est-textarea{height:100px;min-height:60px;}
  .est-top{flex-direction:column;gap:8px;}
  .est-actions{flex-direction:row;gap:8px;width:100%;}
  .est-go{flex:1;}
}

/* ══════════════════════════════════════════════════════
   PHONE — max-width 640px
   ══════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Topbar compact ──────────────────────────────── */
  .topbar{height:44px;padding:0 8px;gap:6px;}
  .tb-mark{width:28px;height:28px;font-size:11px;}
  .tb-name{font-size:13px;letter-spacing:0;}
  .tb-div{display:none;}
  .tb-btn{font-size:10px;padding:5px 7px;}
  #director-btn .btn-label,
  #theme-btn .btn-label{display:none;}

  /* ── Hide non-essential topbar buttons ────────────── */
  .tb-btn.feedback{display:none;}

  /* ── Agent topbar ────────────────────────────────── */
  .agent-topbar{padding:0 10px;height:40px;gap:6px;overflow-x:auto;}
  .at-role{display:none;}
  .at-phase{font-size:9px;padding:2px 6px;}
  .sm-btn{font-size:10px;padding:4px 8px;}

  /* ── Chat messages ───────────────────────────────── */
  .msg{gap:8px;max-width:100%;}
  .msg-av{width:28px;height:28px;font-size:10px;}
  .msg-bubble{padding:10px 12px;font-size:13px;line-height:1.6;overflow-wrap:break-word;word-break:break-word;}
  .chat-msgs{padding:12px;}

  /* ── Input area — bigger touch targets ───────────── */
  .input-area{padding:8px 10px;gap:6px;}
  textarea{font-size:14px;padding:10px;min-height:44px;}
  .send-btn{width:44px;height:44px;}
  .mic-btn{width:44px;height:44px;font-size:17px;}
  .input-hint{display:none;}

  /* ── Job bar full stack ──────────────────────────── */
  .job-bar{flex-direction:column;align-items:stretch;gap:4px;padding:6px 10px;}
  .jb-label{font-size:9px;}
  .jb-num,.jb-client,.jb-site{width:100%;}
  .jb-input{height:36px;font-size:14px;}

  /* ── Login card full width ───────────────────────── */
  .lcard{width:95vw;padding:24px 20px;}
  .lcard-title{font-size:24px;}
  .lcard-desc{font-size:12px;}
  .logo-mark{width:38px;height:38px;font-size:14px;}
  .logo-name{font-size:18px;}
  .pill{font-size:10px;padding:3px 7px;}
  .fi{font-size:15px;padding:14px;box-sizing:border-box;width:100%;}
  .pb{padding:14px;font-size:15px;min-height:48px;}

  /* ── Control Panel full screen ───────────────────── */
  #cp-overlay{padding:0;}
  .cp-panel{width:100vw;max-width:100vw;height:100vh;}
  .cp-input{font-size:14px;width:90px;}
  .cp-label{font-size:13px;}
  .cp-save{min-height:48px;font-size:16px;}

  /* ── Buttons — touch target sizing ───────────────── */
  .est-clear{min-height:40px;padding:8px 12px;}
  .vt-btn{min-height:40px;padding:8px 12px;}
  .est-go{min-height:44px;}

  /* ── Quote tables scroll ─────────────────────────── */
  .qt{display:block;overflow-x:auto;white-space:nowrap;}

  /* ── Est-chat full height on phone ───────────────── */
  .est-chat{max-height:60vh;}
  .est-output{padding:12px;}

  /* ── Guide modal full screen ─────────────────────── */
  .guide-modal{width:100vw;max-width:100vw;max-height:100vh;border-radius:0;}
  .guide-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .guide-tab{padding:8px 10px;font-size:11px;}
  .guide-body{padding:16px;}
  .g-agent-cards{grid-template-columns:1fr;}
  .g-p{font-size:14px;}

  /* ── Toast ───────────────────────────────────────── */
  .toast{right:10px;bottom:10px;left:10px;max-width:none;}

  /* ── Voice controls ──────────────────────────────── */
  .vc-btn{width:36px;height:36px;font-size:15px;}
}

/* ══════════════════════════════════════════════════════
   SMALL PHONE — max-width 380px
   ══════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .lcard{padding:20px 16px;}
  .logo-row{gap:8px;margin-bottom:20px;}
  .pill-row{display:none;}
  .tb-btn:not(.mob-menu-btn):not(#theme-btn):not(#director-btn){font-size:9px;padding:4px 6px;}
  .agent-topbar .sm-btn{display:none;}
}

/* ══════════════════════════════════════════════════════
   TOUCH IMPROVEMENTS — all sizes
   ══════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch — prevent sticky hover */
  .agent-btn:hover{background:transparent;}
  .agent-btn.active:hover{background:var(--amber-dim);}
  .tb-btn:hover{border-color:var(--border);color:var(--muted);}

  /* Ensure tap targets are at least 44px */
  .agent-btn{min-height:48px;}
  .send-btn,.mic-btn{min-width:44px;min-height:44px;}
  .sm-btn{min-height:36px;padding:6px 12px;}
  .cp-close,.guide-close{width:36px;height:36px;}
  .vc-btn{width:36px;height:36px;}

  /* Smooth scrolling for touch */
  .chat-msgs,.est-output,.cp-body,.guide-body,.bp-body{-webkit-overflow-scrolling:touch;}

  /* Prevent text selection on buttons */
  button{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
}