/* ── Responsive ──────────────────────────────────────────────────────── */

/* Sidebar overlay (mobile drawer backdrop) */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.38); z-index:150; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.sidebar-overlay.open { display:block; }

/* Hamburger button in topbar */
.menu-btn { display:none; width:36px; height:36px; border-radius:8px; border:none; background:none; cursor:pointer; align-items:center; justify-content:center; color:var(--text-2); flex-shrink:0; margin-right:4px; -webkit-tap-highlight-color:transparent; }
.menu-btn:hover { background:rgba(0,0,0,0.05); }
.menu-btn svg { width:18px; height:18px; }

/* Mobile back button */
.mobile-back { display:none; align-items:center; gap:2px; font-size:14px; font-weight:500; color:var(--accent); cursor:pointer; padding:4px 10px 4px 4px; border-radius:7px; -webkit-tap-highlight-color:transparent; flex-shrink:0; }
.mobile-back:active { background:rgba(0,113,227,0.08); }
.mobile-back svg { width:18px; height:18px; }

/* Mobile bottom navigation bar */
.mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(255,255,255,0.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--border); z-index:90; align-items:stretch; justify-content:space-around; height:56px; padding-bottom:env(safe-area-inset-bottom,0); }
.mnav-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; color:var(--text-3); position:relative; -webkit-tap-highlight-color:transparent; transition:color .12s; min-width:0; }
.mnav-item.active { color:var(--accent); }
.mnav-item svg { width:22px; height:22px; flex-shrink:0; }
.mnav-item-label { font-size:9.5px; font-weight:500; white-space:nowrap; overflow:hidden; max-width:100%; text-overflow:ellipsis; padding:0 2px; }
.mnav-badge { position:absolute; top:4px; right:calc(50% - 20px); background:var(--red); color:#fff; font-size:9px; font-weight:700; border-radius:8px; padding:0 4px; min-width:14px; height:14px; line-height:14px; text-align:center; display:none; }
.mnav-badge.show { display:block; }
.mnav-badge.orange { background:#f97316; }
.mnav-badge.green { background:var(--green); }

/* ── Tablet (769–1024px) ─────────────────────────────────────────────── */
@media (max-width:1024px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .preview { max-width:200px; }
}

/* ── Mobile (≤768px) ─────────────────────────────────────────────────── */
@media (max-width:768px) {
  /* Sidebar → slide-out drawer */
  .sidebar {
    position:fixed; top:0; left:0; height:100%;
    transform:translateX(-100%);
    transition:transform 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index:160; width:240px;
    padding-top:calc(env(safe-area-inset-top,0) + 12px);
  }
  .sidebar.mobile-open { transform:translateX(0); box-shadow:4px 0 32px rgba(0,0,0,0.18); }
  .sidebar-collapse-btn { display:none !important; }

  /* Show hamburger & mobile nav, hide topbar refresh label */
  .menu-btn { display:flex; }
  .mobile-nav { display:flex; }
  .refresh-btn span { display:none; }

  /* Push content above bottom nav */
  .content { padding:16px 14px calc(72px + env(safe-area-inset-bottom,0)); }
  #page-overview.active { padding-bottom:calc(72px + env(safe-area-inset-bottom,0)); }
  .page.content { padding-bottom:calc(72px + env(safe-area-inset-bottom,0)); }
  /* Fix: .page.active { overflow:hidden } blocks scrolling on content pages */
  .page.active.content { overflow-y:auto; -webkit-overflow-scrolling:touch; }

  /* Topbar */
  .topbar { padding:0 12px 0 4px; gap:6px; }
  .topbar-title { font-size:15px; }

  /* Stats: 2 columns */
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:14px; }
  .stat-value { font-size:26px; }
  .stat-card { padding:14px 16px; }

  /* Cards: tighter padding */
  .card { padding:14px 16px; }
  .card:last-child { margin-bottom:0; }

  /* Chart card */
  #chart-card { overflow:visible; padding:0; }
  #chart-card .card-header { padding:14px 14px 10px; }
  .chart-wrap { position:relative; width:100%; height:160px; padding:0 4px 12px; }

  /* Team activity: scrollable */
  #team-activity-card { padding:14px 16px; }
  #team-activity-card .card-header { padding:0 0 12px; }
  #team-activity-card .table-scroll-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -16px; padding:0 16px; scrollbar-width:none; }
  #team-activity-card .table-scroll-wrap::-webkit-scrollbar { display:none; }
  #team-activity-card table { min-width:480px; }

  /* Prevent flex items from shrinking so #page-overview scrolls properly */
  #page-overview .stats-grid,
  #page-overview .card { flex-shrink:0; }

  /* Overview recent convos + flat pages: card scrolls, table has min-width */
  #page-flagged .card, #page-escalations .card, #page-team .card:last-child, #page-audit .card { overflow-x:auto; padding:14px 0 0; }
  #page-overview .card:last-child { padding:14px 0 0; }
  #page-overview .card:last-child .table-scroll-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  #page-overview .card:last-child .table-scroll-wrap::-webkit-scrollbar { display:none; }
  #page-overview .card:last-child .card-header,
  #page-flagged .card-header, #page-escalations .card-header, #page-team .card:last-child .card-header { padding:0 14px 14px; }
  #page-overview .card:last-child table,
  #page-flagged table, #page-team table { min-width:520px; }
  #page-escalations table { min-width:820px; }

  /* Team tab forms: stack on mobile */
  #page-team .card:first-child { padding:14px 16px; overflow:visible; }
  .team-add-grid { grid-template-columns:1fr !important; }
  .team-add-grid button { width:100%; padding:10px !important; }
  .tn-add-grid { grid-template-columns:1fr !important; }
  .tn-add-grid button { width:100%; padding:10px !important; }

  /* Team tab tables: scroll wrappers */
  #team-members-card { padding:14px 0 0; }
  #team-members-card .card-header { padding:0 14px 14px; }
  #team-members-card .table-scroll-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  #team-members-card .table-scroll-wrap::-webkit-scrollbar { display:none; }
  #team-members-card table { min-width:460px; }

  #agent-presence-card { padding:14px 0 0; }
  #agent-presence-card .card-header { padding:0 14px 14px; }
  #agent-presence-card .table-scroll-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  #agent-presence-card .table-scroll-wrap::-webkit-scrollbar { display:none; }
  #agent-presence-card table { min-width:480px; }

  /* ── Conversations: slide two-pane ── */
  .convos-layout { position:relative; overflow:hidden; flex:1; }
  .sessions-col {
    position:absolute; inset:0; width:100%;
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
    border-right:none; z-index:1;
  }
  .sessions-body { padding-bottom:calc(72px + env(safe-area-inset-bottom,0)); }

  .thread-col {
    position:absolute; inset:0;
    transform:translateX(100%);
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index:2; background:var(--surface);
    padding-bottom:calc(56px + env(safe-area-inset-bottom,0));
  }
  .convos-layout.detail-open .sessions-col { transform:translateX(-28%); }
  .convos-layout.detail-open .thread-col { transform:translateX(0); }
  .mobile-back { display:flex; }
  .thread-head { flex-direction:row; align-items:center; gap:8px; padding:10px 12px; }

  /* ── Live Agents & Live Sessions: slide two-pane ── */
  .live-wrap { position:relative; overflow:hidden; }
  .live-left {
    position:absolute; inset:0; width:100%;
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
    overflow-y:auto; border-right:none; z-index:1;
    padding-bottom:calc(72px + env(safe-area-inset-bottom,0));
  }
  .live-right {
    position:absolute; inset:0;
    transform:translateX(100%);
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index:2; background:var(--surface);
    padding-bottom:calc(56px + env(safe-area-inset-bottom,0));
    min-width:0;
  }
  .live-wrap.detail-open .live-left { transform:translateX(-28%); }
  .live-wrap.detail-open .live-right { transform:translateX(0); }

  /* Back button inside live chat head */
  .live-chat-head { gap:6px; padding:10px 12px; flex-wrap:wrap; }
  .live-chat-foot { padding-bottom:calc(10px + env(safe-area-inset-bottom,0)); }

  /* Action buttons (Create Ticket / Transfer / Release): wrap to second row */
  .live-action-btns { width:100%; justify-content:flex-end; }
  .live-action-btn { padding:5px 9px; font-size:11.5px; }

  /* ── Simulator: stack vertically ── */
  #page-simulator { overflow-y:auto; padding-bottom:calc(72px + env(safe-area-inset-bottom,0)); }
  .sim-wrap { flex-direction:column; overflow:visible; flex:none; }
  .sim-input-col { width:100%; border-right:none; border-bottom:1px solid var(--border); max-height:none; overflow-y:visible; flex-shrink:0; padding:14px; gap:10px; }
  .sim-textarea { min-height:110px !important; }
  .sim-chat-col { flex:none; height:52vh; min-height:300px; }

  /* ── Agent panel & slide panel full width ── */
  .slide-panel { width:100%; right:-100%; }
  .slide-panel.open { right:0; }
  .agent-panel { width:100%; right:-100%; }
  .agent-panel.open { right:0; }

  /* ── Login card ── */
  .login-card { width:calc(100% - 40px); padding:24px 20px; }


  /* ── Topbar back button when detail open ── */
  .topbar-back { display:flex !important; }

  /* Bubbles wider on mobile */
  .bubble, .msg-col { max-width:84%; }

  /* Session pills horizontal scroll */
  .sess-jump { padding:6px 10px; }

  /* ── Account Lookup ───────────────────────────── */
  /* Tab bar: scroll horizontally, don't wrap */
  .acct-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; scrollbar-width:none; margin:20px -14px 0; padding:0 14px; }
  .acct-tabs::-webkit-scrollbar { display:none; }
  .acct-tab { white-space:nowrap; flex-shrink:0; padding:9px 12px; }

  /* Profile header: stack on very small screens */
  #acct-result .card > div:first-child { flex-wrap:wrap; }

  /* Info grid: 2 columns instead of 3 */
  .acct-data-grid { grid-template-columns:repeat(2,1fr) !important; gap:16px 12px; }

  /* Wallet cards: full width */
  .acct-wallet-card { min-width:0; width:100%; max-width:100%; }

  /* Tab content tables: scrollable */
  #acct-tab-transactions .table-scroll-wrap,
  #acct-tab-calls .table-scroll-wrap,
  #acct-tab-sessions .table-scroll-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  #acct-tab-transactions .table-scroll-wrap::-webkit-scrollbar,
  #acct-tab-calls .table-scroll-wrap::-webkit-scrollbar,
  #acct-tab-sessions .table-scroll-wrap::-webkit-scrollbar { display:none; }
  #acct-tab-transactions table { min-width:560px; }
  #acct-tab-calls table { min-width:420px; }
  #acct-tab-sessions table { min-width:640px; }
}


@media (max-width:768px) {
  /* Connection graph: stack hub above nodes, tree-style connector instead of SVG lines */
  .conn-graph { flex-direction:column; align-items:stretch; gap:0; }
  .conn-svg { display:none; }
  .conn-hub { width:100%; }
  .conn-nodes-col { border-left:2px solid var(--border); margin-left:20px; padding:14px 0 0 14px; }
}