/* ═══════════════════════════════════════════════════════════════
   Sivarr — Mobile CSS v6
   All remaining @media overrides for panels and content.
   Shell/login mobile styles already live in layout.css.
   Depends on base.css and panels.css.
   
   FIXES: NO HORIZONTAL SCROLL ON ANY SCREEN SIZE.
   All grids → single column on mobile.
   All tables → horizontally scrollable (not forcing page scroll).
   All containers → overflow-x: hidden.
   ═══════════════════════════════════════════════════════════════ */

/* ── PREVENT HORIZONTAL SCROLL ON ALL SCREENS ──────────────── */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

* {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

/* ── Tablet · 900px ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .g3l,
  .g3r {
    grid-template-columns: 1fr;
  }
  .home-grid {
    grid-template-columns: 1fr;
  }
  .h-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .h2col {
    grid-template-columns: 1fr;
  }
  .org-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .opp-grid {
    grid-template-columns: 1fr;
  }
  .projects-grid {
    grid-template-columns: 1fr;
  }

  /* Academic space */
  .acad-metric-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .acad-split-3 {
    grid-template-columns: 1fr;
  }
  .acad-ai-tutor-layout {
    grid-template-columns: 1fr;
  }
  .acad-research-layout {
    grid-template-columns: 1fr;
  }

  /* Org space */
  .os-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .os-grid2 {
    grid-template-columns: 1fr;
  }

  /* Personal space */
  .sp-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .sp-grid2 {
    grid-template-columns: 1fr;
  }

  /* Marketplace */
  .ag-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ag-detail-grid {
    grid-template-columns: 1fr;
  }
  .ag-featured {
    grid-template-columns: 1fr;
  }
  .ag-feat-thumb {
    min-height: 100px;
  }

  /* Agents */
  .ag-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Paystack */
  .ps-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .ps-stat-row-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Analytics */
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Skills */
  .sk-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Finance */
  .fin-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile · 720px ─────────────────────────────────────────── */
@media (max-width: 720px) {
  /* ── Universal panel max-width reset ────────────────────── */
  :root {
    --panel-max: 9999px;
    --chat-max: 9999px;
  }

  /* ── PREVENT HORIZONTAL SCROLL ───────────────────────────── */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  #dashboard,
  .layout,
  .main,
  .panel {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .panel.active {
    overflow-x: hidden !important;
  }
  .panel > * {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ── Topbar ──────────────────────────────────────────────── */
  .topbar {
    padding: 0 12px;
    gap: 8px;
  }
  .tb-brand {
    width: auto;
  }
  .tb-center {
    display: none;
  }
  .tb-ham {
    display: flex;
  }

  /* ── Sidebar mobile state ────────────────────────────────── */
  .sidebar {
    transform: translateX(calc(-1 * var(--sb-width)));
  }
  .sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow2);
  }
  .main {
    margin-left: 0 !important;
  }
  .overlay {
    display: block;
  }

  /* ── Grids ────────────────────────────────────────────────── */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .g2 {
    grid-template-columns: 1fr;
  }
  .view-head {
    padding: 0 14px;
  }

  /* ── Reset ALL centering on mobile — full width with small padding ── */
  .home-wrap,
  .habits-wrap,
  .journal-wrap,
  .community-wrap,
  .library-wrap,
  .quiz-wrap,
  .stats-wrap,
  .ask-notes-panel,
  .quizzes-wrap,
  .inbox-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Calendar: drop side rail ────────────────────────────── */
  .cal-rail {
    display: none;
  }
  .cal-main-hd {
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  .cal-range {
    min-width: 0;
    font-size: 0.95rem;
  }
  .cal-month-view {
    padding: 12px 14px;
  }

  /* ── Settings ────────────────────────────────────────────── */
  #panel-settings,
  #panel-goals,
  #panel-progress {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #panel-settings > div,
  #panel-goals > div,
  #panel-progress > div {
    max-width: 100% !important;
  }

  /* ── Various panels ──────────────────────────────────────── */
  #panel-courses > div:last-child,
  #panel-lab > div:last-child,
  #panel-announcements > div:last-child,
  #panel-studyplan > div:last-child,
  #panel-contenthub > div:last-child {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #panel-templates .tpl-scroll {
    padding-left: 16px;
    padding-right: 16px;
  }
  .content {
    padding: 14px !important;
  }

  /* ── Chat ────────────────────────────────────────────────── */
  .chat-msgs {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  #chat-welcome {
    max-width: 100%;
  }

  /* ── Settings sub-nav ────────────────────────────────────── */
  .st-layout {
    flex-direction: column;
    padding: 14px 16px;
    gap: 14px;
  }
  .st-subnav {
    width: auto;
    flex-direction: row;
    overflow-x: auto;
    position: static;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .st-subnav-item {
    width: auto;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .st-content {
    overflow-y: visible;
  }
  .st-wheel,
  .st-light-slider {
    width: 160px;
  }
  .st-wheel {
    height: 160px;
  }

  /* ── Org space ────────────────────────────────────────────── */
  .os-hero {
    padding: 10px 12px !important;
    gap: 10px;
  }
  .os-stat {
    padding: 10px 12px !important;
  }
  .os-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .os-scroll {
    padding: 12px !important;
  }
  .os-card {
    padding: 12px !important;
  }
  .os-grid2 {
    grid-template-columns: 1fr !important;
  }
  .os-tabs {
    padding: 0 8px !important;
    gap: 0 !important;
  }
  .os-tab {
    padding: 10px 10px !important;
    font-size: 0.75rem !important;
    min-height: 44px;
  }

  /* ── Org chat: retractable channel drawer ──────────────────── */
  .os-pane-chat {
    flex-direction: column !important;
    position: relative;
    overflow: hidden;
  }
  .oc-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 41;
    width: 78%;
    max-width: 280px;
    height: auto !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow2);
    border-right: 1px solid var(--border);
  }
  .oc-sidebar.open {
    transform: translateX(0);
  }
  .oc-ws-name,
  .oc-section-lbl {
    display: block;
  }
  .oc-ch-item,
  .oc-dm-item {
    padding: 9px 16px;
  }
  .oc-drawer-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.42);
  }
  .oc-drawer-overlay.open {
    display: block;
  }
  .oc-chan-toggle {
    display: inline-flex !important;
  }
  .oc-main {
    flex: 1;
    min-height: 0;
  }
  .oc-msgs {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Personal space ────────────────────────────────────────── */
  .sp-hero {
    padding: 12px 14px 10px;
    gap: 10px;
  }
  .sp-hero-actions {
    display: flex !important;
    gap: 6px;
    flex-shrink: 0;
  }
  .sp-hero-actions .btn-lbl {
    display: none;
  }
  .sp-hero-actions .sp-btn-ghost,
  .sp-hero-actions .sp-btn-primary {
    padding: 7px 9px;
  }
  .sp-scroll {
    padding: 12px 14px;
  }
  .sp-toolbar {
    padding: 8px 12px;
  }
  .sp-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .sp-tabs {
    padding: 0 10px;
  }

  /* ── Academic space ────────────────────────────────────────── */
  .acad-topbar {
    padding: 10px 0 8px;
  }
  .acad-welcome-banner {
    padding: 16px 18px;
  }
  .acad-welcome-headline {
    font-size: 14px;
  }
  .acad-welcome-sub {
    font-size: 10.5px;
  }
  .acad-metric-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .acad-split {
    grid-template-columns: 1fr;
  }
  .acad-kanban {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Marketplace / Agents ──────────────────────────────────── */
  .ag-topbar {
    padding: 0 12px;
  }
  .ag-tb-btn span {
    display: none;
  }
  .ag-grid {
    grid-template-columns: 1fr;
  }
  .ag-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Templates ────────────────────────────────────────────── */
  .tpl-search-wrap input {
    width: 120px;
  }
  .tpl-modal {
    height: 92vh;
  }
  .tpl-modal-use-btn {
    padding: 8px 11px;
    font-size: 0;
    gap: 0;
  }
  .tpl-modal-use-btn i {
    font-size: 16px;
  }

  /* ── Goals ────────────────────────────────────────────────── */
  .gl-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Modal bottom sheets ──────────────────────────────────── */
  .mkt-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .mkt-modal {
    max-width: none !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0)) !important;
    animation: mob-sheet-up 0.26s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  .mkt-modal::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border2, var(--border));
    margin: 2px auto 14px;
  }

  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-overlay .modal-box {
    max-width: none !important;
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0)) !important;
    animation: mob-sheet-up 0.26s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  .modal-overlay .modal-box::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border2, var(--border));
    margin: -4px auto 14px;
  }

  .si-modal-bg {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .si-modal {
    border-radius: 20px 20px 0 0 !important;
    max-height: 88vh !important;
    max-width: 100% !important;
    animation: si-modal-mob-in 0.22s cubic-bezier(0.34, 1.1, 0.64, 1) !important;
  }
  @keyframes si-modal-mob-in {
    from {
      transform: translateY(40px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  .si-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .si-modal-box {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  #pricing-modal.si-modal-bg .si-modal {
    padding: 24px 16px 32px !important;
  }

  /* ── Create Space modal bottom sheet ──────────────────────── */
  .csp-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .csp-modal {
    border-radius: 20px 20px 0 0;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .csp-types {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }
  .csp-type {
    padding: 10px 6px;
    gap: 5px;
  }
  .csp-type-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 0.9rem;
  }
  .csp-type-name {
    font-size: 0.72rem;
  }
  .csp-type-desc {
    display: none;
  }

  /* ── Launcher Space rows: show ⋮ options ──────────────────── */
  .sidebar .si.sp-si::after {
    content: none;
  }
  .sidebar .sb-space-more {
    opacity: 1;
    margin-left: auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ── Home panel breathing room ────────────────────────────── */
  .home-wrap {
    padding: 20px 18px calc(52px + env(safe-area-inset-bottom, 0)) !important;
    -webkit-overflow-scrolling: touch;
  }
  .siva-brief {
    padding: 22px 20px;
    margin-bottom: 18px;
    border-radius: 20px;
  }
  .gs-section {
    padding: 20px 18px;
    margin-bottom: 18px;
    border-radius: 20px;
  }

  .h-stat-grid {
    gap: 7px;
    margin-bottom: 10px;
  }
  .h-stat-card {
    padding: 8px 10px;
    border-radius: 12px;
  }
  .h-stat-ic {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 12px;
    margin-bottom: 3px;
  }
  .h-stat-val {
    font-size: 1.1rem;
  }
  .h-stat-lbl {
    font-size: 0.68rem;
    margin-top: 1px;
  }

  .h2col {
    gap: 14px;
    margin-bottom: 18px;
  }
  .h2col-card {
    padding: 20px 18px;
    border-radius: 18px;
  }

  .siva-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 9px;
    margin: 2px -18px 20px;
    padding: 2px 18px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .siva-pills::-webkit-scrollbar {
    display: none;
  }
  .siva-pill {
    flex-shrink: 0;
    padding: 9px 15px;
    font-size: 0.82rem;
    border-radius: 22px;
  }

  /* ── Global zoom — bigger, closer type ────────────────────── */
  html {
    font-size: calc(17px * var(--font-scale, 1));
  }

  /* ── Agent selector — single swipeable row ────────────────── */
  .agent-selector {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 14px 2px;
    gap: 6px;
  }
  .agent-selector::-webkit-scrollbar {
    display: none;
  }
  .agent-chip {
    flex-shrink: 0;
  }

  /* ── Slim chat header ──────────────────────────────────────── */
  .chat-header {
    padding: 10px 14px 9px;
  }

  /* ── Compact welcome ───────────────────────────────────────── */
  #chat-welcome {
    padding: 1.25rem 1.25rem 0.5rem;
  }
  .chat-welcome-orb {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    margin-bottom: 1rem;
  }
  .chat-welcome-orb img {
    width: 34px;
    height: 34px;
  }
  .chat-welcome-heading {
    font-size: 1.55rem;
    margin-bottom: 0.3rem;
  }
  .chat-welcome-sub {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
  }
  .chat-welcome-hint {
    margin-top: 1rem;
  }
  .chat-prompt-grid {
    gap: 9px;
  }
  .chat-prompt-card {
    padding: 14px 13px 12px;
    border-radius: 14px;
  }

  /* ── Message bubbles ───────────────────────────────────────── */
  .chat-msgs {
    padding: 16px 14px 12px;
    gap: 5px;
  }
  .msg {
    max-width: 90%;
  }

  /* ── Chat bar — hide msg counter ──────────────────────────── */
  .chat-msg-counter {
    display: none;
  }

  /* ── Touch targets — min 44×44 ────────────────────────────── */
  .nav-btn {
    min-height: 44px;
  }
  .tb-icon-btn,
  .chat-icon-btn,
  .chat-send-btn,
  .si-modal-close,
  .os-card-link,
  .os-tool-btn {
    min-height: 44px;
    min-width: 44px;
  }
  .mob-nav-btn {
    min-height: 52px;
  }

  /* ── Personal & academic space tabs ───────────────────────── */
  .sp-tab {
    padding: 10px 10px !important;
    font-size: 0.76rem !important;
    min-height: 44px;
  }

  /* ── Home dashboard grid ───────────────────────────────────── */
  .home-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Doc editor toolbars — horizontal scroll ──────────────── */
  .dh-toolbar,
  .doc-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  .dh-tool-btn,
  .doc-tb-btn {
    min-height: 38px;
  }

  /* ── Profile dropdown ──────────────────────────────────────── */
  .profile-dropdown {
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 16px);
  }

  /* ── Library / integrations grids ──────────────────────────── */
  .int-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .lib-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Topbar ────────────────────────────────────────────────── */
  .tb-brand {
    gap: 6px;
  }
  .tb-name {
    font-size: 13px;
  }

  /* ── Analytics ─────────────────────────────────────────────── */
  .analytics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Org announcements ─────────────────────────────────────── */
  .ann-compose-bar {
    flex-direction: column;
    padding: 12px 14px;
  }
  .ann-feed {
    padding: 10px 14px;
  }

  /* ── Weekly review ─────────────────────────────────────────── */
  .review-body {
    padding: 16px;
  }
  .review-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Paystack ──────────────────────────────────────────────── */
  .ps-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ps-grid2 {
    grid-template-columns: 1fr !important;
  }

  /* ── Notion-style zoom & density for ALL tabs ────────────── */
  /* Already set via html font-size above */
}

/* ── Small mobile · 480px ───────────────────────────────────── */
@media (max-width: 480px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-val {
    font-size: 18px;
  }
  .content {
    padding: 12px;
  }
  .doc-sidebar {
    width: 160px;
  }
  .doc-title-input {
    font-size: 1.1rem;
  }

  /* ── Chat ────────────────────────────────────────────────── */
  .chat-welcome-orb {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .chat-welcome-orb img {
    width: 26px;
    height: 26px;
  }
  .chat-welcome-heading {
    font-size: 1.3rem;
  }
  .chat-prompt-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 360px;
    gap: 7px;
  }
  .chat-prompt-card {
    padding: 10px 10px 9px;
    border-radius: 12px;
  }
  .cpc-title {
    font-size: 0.76rem;
  }
  .cpc-sub {
    font-size: 0.67rem;
  }
  .cpc-icon-wrap {
    display: none;
  }
  .chat-action-pills {
    gap: 4px;
  }
  .chat-pill {
    font-size: 0.72rem;
    padding: 4px 10px;
  }
  .chat-header-av {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .chat-hdr-btn {
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
  }

  /* ── Home ────────────────────────────────────────────────── */
  .h-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .h2col {
    grid-template-columns: 1fr;
  }
  .siva-brief {
    padding: 16px 16px;
  }
  .home-wrap {
    padding: 16px;
  }

  /* ── Brief modal ─────────────────────────────────────────── */
  .brief-card {
    padding: 24px 20px;
  }
  .brief-greeting {
    font-size: 1.3rem;
  }

  /* ── Brief decor popover ────────────────────────────────── */
  .brief-decor-pop {
    width: 180px;
    padding: 10px;
  }
  .bdp-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* ── Onboarding ──────────────────────────────────────────── */
  .si-ob-role-grid {
    grid-template-columns: 1fr;
  }
  .si-ob-int-grid {
    grid-template-columns: 1fr;
  }
  .si-ob-goal-row {
    grid-template-columns: 1fr;
  }
  .si-ob-title {
    font-size: 1.3rem;
  }
  .si-ob-actions {
    flex-direction: column;
    gap: 6px;
  }
  .si-ob-btn-pri {
    width: 100%;
  }
  .si-onboard-box {
    padding: 0 8px;
  }

  /* ── Pricing modal ───────────────────────────────────────── */
  #pricing-cards {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .pricing-card {
    min-width: unset !important;
    max-width: 100% !important;
  }

  /* ── Integrations / library ──────────────────────────────── */
  .int-grid {
    grid-template-columns: 1fr !important;
  }
  .lib-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Analytics ───────────────────────────────────────────── */
  .analytics-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Goals ───────────────────────────────────────────────── */
  .gl-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Finance ─────────────────────────────────────────────── */
  .fin-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Skills ──────────────────────────────────────────────── */
  .sk-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── Content padding ─────────────────────────────────────── */
  .content {
    padding: 12px !important;
  }
  .view-head {
    padding: 0 12px !important;
  }

  /* ── Topbar ──────────────────────────────────────────────── */
  .tb-name {
    display: none;
  }

  /* ── Settings sub-nav ────────────────────────────────────── */
  .st-subnav-item {
    font-size: 0.78rem;
    padding: 7px 10px;
  }

  /* ── Doc editor ──────────────────────────────────────────── */
  .dh-tool-btn,
  .doc-tb-btn {
    min-height: 36px;
  }

  /* ── Chat bar ────────────────────────────────────────────── */
  .chat-bar {
    padding: 8px 10px 12px;
    border-radius: 14px;
  }

  /* ── Very small screens (iPhone SE, 375px) ──────────────── */
  #chat-welcome {
    padding: 0.75rem 1rem 0.25rem;
  }
  .chat-welcome-orb {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    margin-bottom: 0.65rem;
  }
  .chat-welcome-orb img {
    width: 24px;
    height: 24px;
  }
  .chat-welcome-heading {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
  }
  .chat-welcome-sub {
    font-size: 0.78rem;
    margin-bottom: 0.9rem;
  }
  .chat-prompt-card {
    padding: 8px 8px;
  }
  .cpc-icon-wrap {
    display: none;
  }
}

/* ── iOS font-size zoom fix ─────────────────────────────────── */
@media (max-width: 720px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    font-size: 16px !important;
  }
  input::placeholder,
  textarea::placeholder {
    font-size: 14px !important;
  }
}

/* ── Org chat: channel toggle button (desktop hidden) ──────── */
.oc-chan-toggle {
  display: none;
}

/* ── Mobile bottom nav safe area ────────────────────────────── */
@media (max-width: 480px) {
  .mobile-nav {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  }
  .layout {
    --mob-nav-h: env(safe-area-inset-bottom, 0px);
  }
}

/* ── Extremely small screens (<=360px) ──────────────────────── */
@media (max-width: 360px) {
  html {
    font-size: calc(15px * var(--font-scale, 1));
  }
  .chat-welcome-heading {
    font-size: 1rem;
  }
  .chat-prompt-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .chat-prompt-card {
    padding: 8px 10px;
  }
  .cpc-title {
    font-size: 0.72rem;
  }
  .h-stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
  .h-stat-card {
    padding: 6px 8px;
  }
  .h-stat-val {
    font-size: 0.95rem;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .stat {
    padding: 10px 12px;
  }
  .stat-val {
    font-size: 16px;
  }
  .sidebar .si {
    padding: 8px 10px;
  }
  .sidebar .si .si-lb {
    font-size: 0.78rem;
  }
  .sidebar .sb-scroll {
    padding: 4px 12px 20px;
  }
  .sidebar .sb-header {
    padding: 8px 12px;
  }
  .msg {
    max-width: 94%;
  }
  .msg-bub {
    font-size: 0.82rem;
    padding: 9px 12px;
  }
}

/* ── Landscape mobile ────────────────────────────────────────── */
@media (max-width: 800px) and (orientation: landscape) {
  .chat-welcome-orb {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    margin-bottom: 0.75rem;
  }
  .chat-welcome-orb img {
    width: 26px;
    height: 26px;
  }
  .chat-welcome-heading {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
  }
  .chat-welcome-sub {
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }
  .chat-prompt-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .chat-prompt-card {
    padding: 10px 10px;
  }
  .cpc-sub {
    display: none;
  }
  .cpc-title {
    font-size: 0.72rem;
  }
  .chat-msgs {
    padding: 12px 14px 8px;
  }
  #chat-welcome {
    padding: 0.75rem 1rem 0.25rem;
    min-height: auto;
  }
  .chat-bar {
    padding: 6px 10px 8px;
  }
  .chat-header {
    padding: 6px 12px;
  }
  .chat-header-av {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
  .msg {
    max-width: 75%;
  }
  .msg-bub {
    padding: 8px 12px;
    font-size: 0.82rem;
  }
  .agent-selector {
    padding: 4px 10px 0;
  }
  .agent-chip {
    font-size: 0.65rem;
    padding: 3px 8px;
  }
  .siva-brief {
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .h-stat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  .h-stat-card {
    padding: 6px 8px;
  }
  .h-stat-val {
    font-size: 0.95rem;
  }
  .h-stat-lbl {
    font-size: 0.6rem;
  }
  .home-wrap {
    padding: 12px 14px !important;
  }
  .siva-pills {
    gap: 5px;
    margin: 0 -12px 12px;
    padding: 2px 12px 6px;
  }
  .siva-pill {
    font-size: 0.72rem;
    padding: 5px 10px;
  }
  .gs-section {
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .gs-tip {
    width: 190px;
  }
  .gs-vid-card {
    width: 140px;
  }
}

/* ── Reduce motion for all mobile devices ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX: OVERFLOW-X: HIDDEN ON ALL PANEL CONTAINERS
   Prevents horizontal scroll on any screen size
   ═══════════════════════════════════════════════════════════════ */
.panel,
.panel > div:last-child,
.panel .content,
.panel .home-wrap,
.panel .habits-wrap,
.panel .journal-wrap,
.panel .community-wrap,
.panel .library-wrap,
.panel .quiz-wrap,
.panel .stats-wrap,
.panel .help-wrap,
.panel .review-body,
.panel .mkt-grid,
.panel .tpl-grid,
.panel .ag-grid,
.panel .lib-grid,
.panel .int-grid,
.panel .os-scroll,
.panel .sp-scroll,
.panel .acad-scroll,
.panel .cal-main-body,
.panel .doc-editor-area,
.panel .doc-content,
.panel .st-content,
.panel .fin-wrap,
.panel .sk-wrap,
.panel .opp-grid,
.panel .ann-feed,
.panel .analytics-grid,
.panel .ps-overview-content,
.panel .ps-txn-table,
.panel .ps-balance-content,
.panel .ps-settlements-content,
.panel .ps-customers-content,
.panel .ps-refunds-content,
.panel .ps-analytics-content,
.panel .ag-view-wrap,
.panel .mkt-view-browse,
.panel .mkt-view-installed,
.panel .mkt-view-published,
.panel .ch-dashboard,
.panel .ch-connect-screen,
.panel .tpl-scroll,
.panel .lab-content,
.panel .sp-result,
.panel .sp-countdown,
.panel .gs-section,
.panel .siva-brief,
.panel .h2col,
.panel .h-stat-grid,
.panel .siva-pills,
.panel .home-priorities-list,
.panel .home-schedule-list,
.panel .home-habits-list,
.panel .home-finance-section,
.panel .home-skills-section,
.panel .home-goals-section,
.panel .home-notes-section,
.panel .home-journal-section,
.panel .home-templates-list {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ── FIX: TABLES — horizontally scrollable ──────────────────── */
#sh-overview-view {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
#sh-overview-table {
  min-width: 100% !important;
  width: 100% !important;
  table-layout: auto !important;
}
.sh-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── FIX: ALL GRIDS → SINGLE COLUMN ON MOBILE ──────────────── */
@media (max-width: 720px) {
  .tpl-grid {
    grid-template-columns: 1fr !important;
  }
  .mkt-grid {
    grid-template-columns: 1fr !important;
  }
  .ag-grid {
    grid-template-columns: 1fr !important;
  }
  .lib-grid {
    grid-template-columns: 1fr !important;
  }
  .int-grid {
    grid-template-columns: 1fr !important;
  }
  .os-proj-grid {
    grid-template-columns: 1fr !important;
  }
  .sp-goals-grid {
    grid-template-columns: 1fr !important;
  }
  .sp-notes-grid {
    grid-template-columns: 1fr !important;
  }
  .acad-course-grid {
    grid-template-columns: 1fr !important;
  }
  .acad-groups-grid {
    grid-template-columns: 1fr !important;
  }
  .acad-notes-grid {
    grid-template-columns: 1fr !important;
  }
  .acad-ai-tools-grid {
    grid-template-columns: 1fr !important;
  }
  .help-grid {
    grid-template-columns: 1fr !important;
  }
  .gs-tips,
  .gs-videos {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .profile-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .achievements-grid {
    flex-wrap: wrap !important;
  }
  .opp-grid {
    grid-template-columns: 1fr !important;
  }
  .review-stats-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .ps-grid2 {
    grid-template-columns: 1fr !important;
  }
  .analytics-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .gl-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .fin-summary-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .sk-summary-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .cal-grid {
    grid-template-columns: repeat(7, 1fr) !important;
  }
  .acad-kanban {
    grid-template-columns: 1fr 1fr !important;
  }
  .os-kanban {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .os-col {
    flex: none !important;
    width: 100% !important;
  }
  .sp-kanban {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .sh-col {
    width: 100% !important;
    flex: none !important;
  }
  #sh-board-view {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .sh-col-body {
    min-height: 60px !important;
  }
}

/* ── FIX: CARDS — prevent overflow ──────────────────────────── */
@media (max-width: 720px) {
  .card,
  .h2col-card,
  .h-stat-card,
  .os-card,
  .sp-card,
  .acad-card,
  .mkt-card,
  .tpl-card,
  .ag-card,
  .lib-card,
  .int-card,
  .opp-card,
  .review-stat,
  .ps-stat,
  .profile-stat,
  .gl-stat,
  .fin-stat,
  .sk-stat,
  .an-stat-card,
  .mkt-metric-card,
  .mkt-installed-row,
  .ag-agent-row,
  .ag-stat-card,
  .ps-stat-card,
  .stat,
  .goal-card,
  .habit-card,
  .feed-card,
  .journal-entry,
  .note-card,
  .class-card,
  .flash-card-face {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* ── FIX: CHAT ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .chat-bar {
    max-width: 100% !important;
    width: calc(100% - 16px) !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .chat-msgs {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .msg {
    max-width: 92% !important;
  }
  .chat-prompt-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── FIX: SIDEBAR ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .sidebar {
    width: 75% !important;
    max-width: 300px !important;
    transform: translateX(-100%);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .sidebar .si::after {
    content: "›" !important;
    margin-left: auto !important;
    color: var(--text4) !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }
}

/* ── FIX: MOBILE NAV ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .mobile-nav {
    display: flex !important;
  }
  .mob-fab {
    display: flex !important;
  }
  /* The two rules above force these on for every screen ≤720px with no
     awareness of the login/auth screen. Since #login-screen (z-index 500)
     sits well below .mob-fab (z-index 7999), the FAB was painting on top
     of the login form instead of being hidden behind it. Explicitly kill
     both whenever the auth screen is showing — this must come after the
     rules above (same specificity) to win. */
  body.auth-screen .mobile-nav,
  body.auth-screen .mob-fab {
    display: none !important;
  }
}

/* ── FIX: ALL IMAGES ─────────────────────────────────────────── */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* ── FIX: PRE ────────────────────────────────────────────────── */
pre,
code {
  max-width: 100% !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* ── FIX: INPUTS ─────────────────────────────────────────────── */
input,
textarea,
select,
button {
  max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════
   PARITY PATCH — rules restored from original styles.css that were
   missing after the base/layout/panels/mobile split.
   ═══════════════════════════════════════════════════════════════ */
/* ── NGN / Currency toggle ───────────────────────────────── */
.ag-currency-toggle {
  display: flex;
  align-items: center;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  flex-shrink: 0;
}

.ag-currency-opt {
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  background: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font);
  white-space: nowrap;
}

.ag-currency-opt.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.ag-currency-opt.ngn.active {
  color: #22c55e;
}

.ag-currency-opt.usd.active {
  color: var(--accent);
}

/* ── Paystack button ─────────────────────────────────────── */
.ag-paystack-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  background: #0ba4db;
  color: #fff;
  transition: var(--transition);
  margin-bottom: 8px;
  justify-content: center;
}

.ag-paystack-btn:hover {
  background: #0991c4;
}

.ag-paystack-btn .ag-paystack-logo {
  font-size: 0.72rem;
  background: #fff;
  color: #0ba4db;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

.ag-paystack-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* NGN price display */
.ag-price-ngn {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 1px;
  font-weight: 600;
}

.ag-price.ngn-active {
  display: none;
}

.ag-currency-ngn .ag-price {
  display: none;
}

.ag-currency-ngn .ag-price-ngn {
  display: block !important;
  color: var(--green, #22c55e);
}

/* ── NGN price badge on cards ────────────────────────────── */
.ag-ngn-price {
  font-size: 0.8rem;
  font-weight: 800;
  font-family: var(--font);
  color: #22c55e;
}

.ag-ngn-price.free {
  color: var(--green, #22c55e);
}

/* ── Payment method selector ─────────────────────────────── */
.ag-pay-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.ag-pay-method {
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
  background: var(--bg2);
}

.ag-pay-method:hover {
  border-color: var(--accent);
}

.ag-pay-method.active.stripe {
  border-color: var(--accent);
  background: var(--accent) 10;
}

.ag-pay-method.active.paystack {
  border-color: #0ba4db;
  background: #0ba4db10;
}

.ag-pay-method-icon {
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.ag-pay-method-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text2);
}

.ag-pay-method-sub {
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 1px;
}

/* override csp-types inside modal to have horizontal padding */
#create-space-modal .csp-types {
  padding: 0 20px;
}

#create-space-modal #csp-name-row {
  padding: 0 20px;
}

#create-space-modal .csp-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* ── Quick-Add topbar button ───────────────────────────────── */
.tb-quickadd-btn {
  background: var(--teal) !important;
  color: #fff !important;
  border-radius: var(--radius) !important;
  width: 32px !important;
  height: 32px !important;
}

.tb-quickadd-btn:hover {
  opacity: 0.88;
}

/* ── PARITY PATCH — restored @media content ── */

@media (max-width: 900px) {
  .gs-tip {
    width: 200px;
  }
}

@media (max-width: 560px) {
  .gs-tip {
    width: 180px;
  }

  .gs-header {
    flex-direction: column;
  }

  .acad-metric-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .os-hero {
    padding: 14px 16px 10px;
    gap: 10px;
  }

  .os-hero-actions {
    display: flex !important;
    gap: 6px;
    flex-shrink: 0;
  }

  /* Icon-only on small screens — hide text labels, keep icons */
  .os-hero-actions .btn-lbl {
    display: none;
  }

  .os-hero-actions .os-btn-ghost,
  .os-hero-actions .os-btn-primary {
    padding: 7px 9px;
  }

  .os-scroll {
    padding: 14px 16px;
  }

  .os-toolbar {
    padding: 10px 14px;
  }

  .os-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .os-tabs {
    padding: 0 12px;
  }

  .sp-hero {
    padding: 12px 14px 10px;
    gap: 10px;
  }

  .sp-hero-actions {
    display: flex !important;
    gap: 6px;
    flex-shrink: 0;
  }

  /* Icon-only on small screens — hide text labels, keep icons */
  .sp-hero-actions .btn-lbl {
    display: none;
  }

  .sp-hero-actions .sp-btn-ghost,
  .sp-hero-actions .sp-btn-primary {
    padding: 7px 9px;
  }

  .sp-scroll {
    padding: 12px 14px;
  }

  .sp-toolbar {
    padding: 8px 12px;
  }

  .sp-stat-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .sp-tabs {
    padding: 0 10px;
  }

  /* Modal becomes a bottom-anchored sheet so all content is reachable */
  .csp-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .csp-modal {
    border-radius: 20px 20px 0 0;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep 3-column grid but shrink the cards to not eat the screen */
  .csp-types {
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
  }

  .csp-type {
    padding: 10px 6px;
    gap: 5px;
  }

  .csp-type-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 0.9rem;
  }

  .csp-type-name {
    font-size: 0.72rem;
  }

  .csp-type-desc {
    display: none;
  }

  /* Role cards — keep side-by-side but slimmer */
  .acad-role-card {
    padding: 10px 8px;
  }

  .acad-role-icon {
    font-size: 20px;
    margin-bottom: 3px;
  }

  .acad-role-name {
    font-size: 12px;
  }

  .acad-role-desc {
    font-size: 10px;
  }

  .ag-grid {
    grid-template-columns: 1fr;
  }

  .ag-topbar {
    padding: 0 12px;
  }

  .ag-tb-btn span {
    display: none;
  }

  #create-space-modal .csp-types {
    padding: 0 14px;
  }

  #create-space-modal #csp-name-row {
    padding: 0 14px;
  }

  #create-space-modal #acadRoleStep {
    padding: 0 14px;
  }

  .ps-stat-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .ps-grid2 {
    grid-template-columns: 1fr !important;
  }
}