/* ── Global mobile safety ─────────────────────────────────────── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
* { box-sizing: border-box; }

/* ── Mobile nav — hidden by default on desktop ────────────────── */
.mob-nav-btn    { display: none; }
.mob-nav-drawer { display: none; }

/* ── Forge Mobile Styles — max-width 768px ─────────────────────── */
@media (max-width: 768px) {

  /* ── Header & Nav ─────────────────────────────────────────────── */
  .header {
    padding: 0 14px;
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: visible !important;
  }
  .logo-sub { display: none; }
  .nav-tabs {
    display: none;
  }
  .header-right { margin-left: auto; }

  /* Hamburger nav toggle */
  .mob-nav-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,0.15));
    background: rgba(255,255,255,0.05);
    color: var(--text, #fff);
    font-size: 20px;
    cursor: pointer;
    margin-left: 8px;
    flex-shrink: 0;
  }
  .mob-nav-drawer {
    display: none;
    position: fixed;
    top: 52px; left: 0; right: 0;
    background: var(--surface, #111118);
    border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
    border-radius: 0 0 16px 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    z-index: 999;
    flex-direction: column;
    padding: 4px 0 12px;
    max-height: 80vh;
    overflow-y: auto;
  }
  .mob-nav-drawer.open { display: flex !important; }
  .mob-nav-drawer a {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim, #9090aa);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }
  .mob-nav-drawer a:hover { color: var(--orange, #ff6b35); }

  /* ── Layouts ──────────────────────────────────────────────────── */
  .forge-layout,
  .excel-layout,
  .doc-layout {
    grid-template-columns: 1fr !important;
    padding: 12px !important;
  }
  .forge-sidebar { display: none !important; }

  /* ── Excel companion ──────────────────────────────────────────── */
  .companion-hdr {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px !important;
  }
  .companion-hdr-right {
    width: 100%;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 6px;
  }
  .clear-chat {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
  .mode-chips-bar {
    padding: 8px 10px !important;
    gap: 5px !important;
  }
  .sug-chip {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }
  .chat-input, .forge-textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
  }
  .send-btn, .forge-send-btn {
    padding: 10px 14px !important;
    font-size: 13px !important;
    min-height: 44px;
  }

  /* ── Upload zone ──────────────────────────────────────────────── */
  .upload-zone {
    padding: 24px 16px !important;
  }
  .fmt-badges { flex-wrap: wrap; }

  /* ── Detail drawer tabs ───────────────────────────────────────── */
  .tab-bar, #docTabBar, #perspTabBar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Provider chips ───────────────────────────────────────────── */
  .provider-chips {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  /* ── Response cards ───────────────────────────────────────────── */
  .response-grid,
  .cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Sweep / Broadcast ────────────────────────────────────────── */
  .sweep-cards {
    grid-template-columns: 1fr !important;
  }

  /* ── Buttons & touch targets ──────────────────────────────────── */
  button, .btn, .nav-item {
    min-height: 36px;
  }

  /* ── Input row stacking ───────────────────────────────────────── */
  .forge-input-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .forge-input-row textarea {
    width: 100% !important;
  }
  .forge-input-row button {
    width: 100% !important;
  }

  /* ── Stat cards ───────────────────────────────────────────────── */
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Tables ───────────────────────────────────────────────────── */
  .data-table {
    font-size: 11px;
  }
  .data-table td, .data-table th {
    padding: 6px 8px !important;
  }
}

@media (max-width: 480px) {
  .stats-row { grid-template-columns: 1fr !important; }
  .companion-name { font-size: 13px !important; }
}

/* ── Sweep mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cards-row, .response-cards { grid-template-columns:1fr !important; gap:12px !important; }
  .sweep-input-row { flex-direction:column !important; }
  .sweep-send-btn { width:100% !important; min-height:44px; }
  .provider-row, .providers-bar { overflow-x:auto; flex-wrap:nowrap !important; -webkit-overflow-scrolling:touch; }
  .forge-run-row { flex-wrap:wrap; gap:8px; }
  .forge-run-row button { flex:1 1 45%; min-height:44px; font-size:12px !important; }
}

/* ── Profile mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-layout, .profile-grid { grid-template-columns:1fr !important; padding:12px !important; }
  .tier-card, .usage-card { width:100% !important; }
  .plan-cards-row { grid-template-columns:1fr !important; }
}

/* ── Pricing mobile ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pricing-grid, .plans-grid { grid-template-columns:1fr !important; gap:16px !important; }
  .pricing-card { max-width:100% !important; }
}

/* ── Perspectives mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .perspectives-grid, .ai-grid { grid-template-columns:1fr !important; }
  .top-bar, .your-top-bar { flex-wrap:wrap; gap:8px; }
}

/* ── Footer / content pages ───────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-grid, .content-grid { grid-template-columns:1fr !important; }
  .page-content { padding:20px 16px !important; }
}

/* ── Landing page nav ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .header-right .btn {
    display: none !important;
  }
  .header-right {
    margin-left: auto;
  }
}

/* ── Admin/SuperAdmin badge — push below hamburger on mobile ─────── */
@media (max-width: 768px) {
  #forge-role-badge {
    top: 60px !important;
    right: 12px !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
    z-index: 99 !important;
  }
}

/* ── Perspectives — prompt chips smaller on mobile ───────────────── */
@media (max-width: 768px) {
  #providerChips {
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center;
  }
  #providerChips button {
    max-width: 140px !important;
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  /* AI provider toggle buttons — center and wrap */
  .provider-chip,
  .provider-btn {
    min-width: 0 !important;
    flex: 0 0 calc(33% - 8px) !important;
    text-align: center;
    font-size: 11px !important;
    padding: 6px 4px !important;
  }
  /* Get Perspectives button — full width */
  .btn-compare {
    width: 100% !important;
    min-height: 44px;
    margin-top: 8px;
  }
  /* Results grid — single column */
  .results-grid,
  .perspectives-results {
    grid-template-columns: 1fr !important;
  }
}

/* ── Profile sidebar — mobile drawer overlay ─────────────────────── */
@media (max-width: 768px) {

  /* Sidebar becomes a fixed left drawer */
  .profile-sidebar {
    display: block !important;
    position: fixed !important;
    top: 0; left: 0;
    width: 280px;
    height: 100vh;
    z-index: 1000;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .profile-sidebar.mob-open {
    transform: translateX(0);
  }

  /* Backdrop */
  .profile-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 999;
  }
  .profile-sidebar-backdrop.mob-open {
    display: block;
  }

  /* Toggle button — fixed at bottom left */
  .mob-profile-nav-btn {
    display: flex !important;
    position: fixed;
    bottom: 20px;
    left: 16px;
    z-index: 998;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255,107,53,0.4);
    background: #111118;
    color: #ff6b35;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    font-family: inherit;
  }

  /* Main content full width */
  .profile-content,
  .profile-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ── Profile page mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Container padding */
  .profile-container {
    grid-template-columns: 1fr !important;
    padding: 1rem 14px !important;
    gap: 1rem !important;
  }

  /* Hide static sidebar (our drawer handles it) */
  .profile-sidebar {
    position: fixed !important;
  }

  /* Section cards */
  .section {
    padding: 1rem !important;
    border-radius: 10px !important;
  }

  /* Section header */
  .section-header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .section-icon { font-size: 16px !important; }

  /* Stats grid — 2 cols on mobile */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* Stat card */
  .stat-card {
    padding: 0.75rem !important;
  }
  .stat-value { font-size: 1.4rem !important; }
  .stat-label { font-size: 10px !important; }

  /* Plan cards — single column */
  .plan-cards-grid,
  .plans-grid,
  .pricing-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .plan-card {
    padding: 1rem !important;
  }

  /* Profile header */
  .profile-header {
    padding: 1rem 14px !important;
    flex-direction: column;
    gap: 10px;
  }

  /* Form rows */
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .form-group label { font-size: 12px !important; }
  .form-control { font-size: 16px !important; }

  /* Diary entries */
  .diary-entry, .diary-card {
    padding: 12px !important;
  }

  /* Prompt library */
  .prompt-grid {
    grid-template-columns: 1fr !important;
  }

  /* Provider connections grid */
  .connections-grid,
  .providers-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Usage bar */
  .usage-bar-wrap { font-size: 12px !important; }

  /* Nav tabs inside profile (if any) */
  .profile-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .connections-grid, .providers-grid { grid-template-columns: 1fr !important; }
}

/* ── Sweep responses-area — single column on mobile ─────────────── */
@media (max-width: 768px) {
  .responses-area {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── Sweep input row — button row on mobile ──────────────────────── */
@media (max-width: 768px) {
  .forge-prompt-wrap .forge-input-row {
    flex-direction: column !important;
  }
  .forge-prompt-wrap .forge-input-row > button:not(.forge-send-btn) {
    width: auto !important;
    flex: 1 !important;
  }
  .forge-prompt-wrap .forge-input-row > button.forge-send-btn {
    width: 100% !important;
    min-height: 44px;
  }
  /* Library + Save side by side */
  .forge-prompt-wrap .forge-input-row {
    flex-wrap: wrap !important;
  }
}

/* ── Sweep input row — mobile restructure ────────────────────────── */
@media (max-width: 768px) {
  .forge-input-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Textarea div takes full width */
  .forge-input-row > div:first-child {
    width: 100% !important;
    flex: none !important;
  }
  /* Send button full width */
  .forge-input-row > #forgeSendBtn {
    width: 100% !important;
    order: 2;
  }
  /* Library + Save sit side by side */
  .forge-input-row > button:not(#forgeSendBtn) {
    flex: 1 1 calc(50% - 4px) !important;
    width: auto !important;
    order: 3;
    min-height: 40px;
    font-size: 12px !important;
  }
  /* File tag full width when visible */
  #sweepFileTag {
    width: 100% !important;
    order: 4;
  }
  /* Run row wraps cleanly */
  .forge-run-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .forge-counter {
    width: 100% !important;
  }
  .forge-best-btn {
    width: 100% !important;
    min-height: 44px;
  }
}

/* ── Sweep Library + Save — side by side below Send ─────────────── */
@media (max-width: 768px) {
  #sweepLibBtn, #sweepSaveBtn {
    flex: 1 1 calc(50% - 4px) !important;
    width: auto !important;
    white-space: nowrap !important;
    min-height: 40px;
    font-size: 12px !important;
    box-sizing: border-box;
  }
  /* Attach icon stays small, doesn't stretch */
  .forge-input-row > div:first-child {
    width: 100% !important;
    flex: none !important;
    order: 1;
  }
  #forgeSendBtn { order: 2; width: 100% !important; }
  #sweepLibBtn  { order: 3; }
  #sweepSaveBtn { order: 3; }
  #sweepFileTag { order: 4; width: 100% !important; }
}

/* ── Profile — fix horizontal overflow ──────────────────────────── */
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }
  .profile-container {
    grid-template-columns: 1fr !important;
    padding: 1rem 14px !important;
    gap: 1rem !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .search-box {
    min-width: 0 !important;
    width: 100% !important;
  }
  .search-input {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .dropdown-menu {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* Streak row — prevent overflow */
  .streak-row, .streak-wrap {
    flex-wrap: wrap !important;
    overflow: hidden !important;
  }
  /* AI performance section */
  .ai-name {
    width: 60px !important;
  }
  /* Insight box — clip long text */
  .insight-box, .insight-row {
    overflow: hidden !important;
    word-break: break-word !important;
  }
  /* Any card with fixed width */
  .profile-card, .section, .stat-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Profile — AI Performance card overflow fix ──────────────────── */
@media (max-width: 768px) {
  .streak-hero {
    flex-wrap: wrap !important;
    gap: 10px !important;
    overflow: hidden !important;
  }
  .streak-best {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: left !important;
  }
  .streak-sep {
    display: none !important;
  }
  .streak-dots {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .streak-dot {
    width: 20px !important;
  }
  /* Insight line — clip overflow text */
  .insight-line {
    overflow: hidden !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  /* Section — prevent any child overflowing */
  .section {
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Stats grid full width */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    width: 100% !important;
  }
}

/* ── Profile — root overflow fix ────────────────────────────────── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .profile-container {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .profile-content {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }
  .profile-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .section-header h2 {
    font-size: 1rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .stat-card {
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

/* ── Pricing page mobile ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .plans-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    background: transparent !important;
  }
  .plan-card {
    border-radius: 14px !important;
    border: 1px solid var(--border) !important;
    outline: none !important;
  }
  .plan-card.popular {
    outline: 2px solid rgba(34,197,94,.4) !important;
    outline-offset: -2px !important;
    order: -1 !important;
  }
  .value-props {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }
  .steps-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
  }
  .wl-card {
    grid-template-columns: 1fr !important;
  }
  .wl-compare {
    grid-template-columns: 1fr !important;
  }
}

/* ── Why Forge / content pages mobile ───────────────────────────── */
@media (max-width: 768px) {
  .why-grid, .features-grid, .comparison-grid {
    grid-template-columns: 1fr !important;
  }
  .hero-btns, .cta-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .hero-btns a, .cta-btns a {
    text-align: center !important;
  }
}

/* ── Privacy / Terms — content pages mobile ─────────────────────── */
@media (max-width: 768px) {
  .legal-content, .privacy-content, .terms-content, .page-body {
    padding: 20px 16px !important;
    max-width: 100% !important;
  }
  .legal-content h1, .privacy-content h1, .terms-content h1 {
    font-size: 1.5rem !important;
  }
  .legal-content h2, .privacy-content h2, .terms-content h2 {
    font-size: 1.1rem !important;
  }
}

/* ── Terms — sidebar + content stack on mobile ───────────────────── */
@media (max-width: 768px) {
  .page-layout {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
  }
  .sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 16px !important;
  }
  .sidebar-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .sidebar-link {
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    border: 1px solid var(--border) !important;
  }
  .content-col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }
  /* Privacy */
  .content-wrap {
    padding: 20px 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .page-hero {
    padding: 40px 16px 24px !important;
  }
  .page-h1 {
    font-size: 2rem !important;
  }
}

/* ── Privacy — inner grids mobile ───────────────────────────────── */
@media (max-width: 768px) {
  .page-hero {
    grid-template-columns: 1fr !important;
    padding: 40px 16px 32px !important;
    gap: 24px !important;
  }
  .promise-card {
    grid-template-columns: 1fr !important;
    padding: 24px 16px !important;
    gap: 16px !important;
  }
  .contact-card {
    grid-template-columns: 1fr !important;
    padding: 24px 16px !important;
    gap: 16px !important;
  }
  .content-wrap {
    padding: 0 16px 60px !important;
  }
}

/* ── Why Excel — all multi-col grids mobile ──────────────────────── */
@media (max-width: 768px) {
  /* Target all inline grids by forcing single column on known containers */
  .why-excel-page [style*="grid-template-columns: 1fr 1fr"],
  .why-excel-page [style*="grid-template-columns: repeat(3"],
  .why-excel-page [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  /* Companion grid already has a 768px rule — reinforce */
  .companion-grid {
    grid-template-columns: 1fr !important;
  }
  /* Feature rows with icon + text — keep as row */
  [style*="grid-template-columns: 56px 1fr"],
  [style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: auto 1fr !important;
  }
}

/* ── Why Excel — all grids single column on mobile ───────────────── */
@media (max-width: 768px) {
  /* Hero */
  .hero {
    grid-template-columns: 1fr !important;
    padding: 48px 16px 0 !important;
    gap: 32px !important;
  }
  /* Mock UI */
  .mock-q-row {
    grid-template-columns: 1fr !important;
  }
  /* Problem grid */
  .problem-grid {
    grid-template-columns: 1fr !important;
    background: transparent !important;
    gap: 12px !important;
  }
  /* Runs */
  .runs-intro {
    grid-template-columns: 1fr !important;
  }
  .run-item {
    grid-template-columns: 1fr !important;
  }
  .run-outcome-grid {
    grid-template-columns: 1fr !important;
  }
  /* Questions & output */
  .questions-grid {
    grid-template-columns: 1fr !important;
  }
  .output-grid {
    grid-template-columns: 1fr !important;
  }
  /* Companion */
  .companion-grid {
    grid-template-columns: 1fr !important;
  }
  /* Indicator pane */
  .ind-pane.active {
    grid-template-columns: 1fr !important;
  }
}

/* ── Landing page — hide header CTAs on mobile (hamburger handles nav) ── */
@media (max-width: 768px) {
  #landingSignIn, #landingStartFree {
    display: none !important;
  }
  #footerInviteBtn {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 12px auto 0 !important;
  }
}

/* ── Landing — hide dynamic Go to workspace button on mobile ─────── */
@media (max-width: 768px) {
  .landing-workspace-btn {
    display: none !important;
  }
}

/* ── Hide desktop-only elements on mobile ─────────────────────── */
@media(max-width:768px) {
  .desktop-only-install { display: none !important; }
}