/* ============================================================
   ECHOES — Comprehensive Mobile & Tablet Pass
   Breakpoints:
     xs:  <480px   (small phones)
     sm:  <640px   (phones)
     md:  <768px   (phones/small tablet)
     lg:  <1024px  (tablet portrait)
     xl:  <1280px  (tablet landscape / small laptop)
   ============================================================ */

/* ---- Base touch improvements ---- */
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"] { touch-action: manipulation; }
input, textarea, select { font-size: 16px !important; } /* prevent iOS zoom */

/* ---- Scrollable tab bars everywhere ---- */
.tabs {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
  gap: 0;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-item { flex-shrink: 0; }

/* ---- Touch-friendly minimum tap targets ---- */
@media (max-width: 1024px) {
  .btn { min-height: 36px; }
  .btn-sm { min-height: 32px; }
  .nav-item { min-height: 40px; }
  .tab-item { min-height: 44px; padding: 10px 16px; }
  input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
}

/* ============================================================
   TABLET (769px – 1024px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Sidebar narrower */
  :root { --sidebar-width: 200px; }
  .sidebar { width: 200px; }
  .main-content { margin-left: 200px; }

  /* Page padding tighter */
  .page { padding: 20px 20px; }
  .dash-section { padding: 0 20px; }
  .dash-hero { padding: 20px 20px 24px; gap: 20px; }

  /* Dashboard gauges smaller */
  .gauge-svg { width: 80px !important; height: 80px !important; }
  .gauge-value { font-size: 1rem; }

  /* Table view: collapse right sidebar into bottom drawer */
  .table-view { grid-template-columns: 200px minmax(0, 1fr) 220px; }

  /* Module list: 2 col */
  .module-list { grid-template-columns: repeat(2, 1fr) !important; }
  .table-list { grid-template-columns: repeat(2, 1fr) !important; }

  /* Grid 4 → 2x2 */
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* Admin stat strip: 4 col */
  [data-admin-view] .grid-4 { grid-template-columns: repeat(4, 1fr); }

  /* DM hub */
  .dmhub-shell { padding: 16px; }
  .dmhub-header { flex-wrap: wrap; gap: 8px; }

  /* Filter bar */
  .filter-bar { gap: 8px; }
  .search-input { min-width: 150px; }
}

/* ============================================================
   MOBILE (≤768px) — comprehensive pass
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Global typography scale-down ---- */
  .page-title { font-size: 1.3rem !important; }
  .page-subtitle { font-size: 0.8rem !important; }
  .section-title { font-size: 0.7rem !important; }

  /* ---- Page layout ---- */
  .page { padding: 14px 14px !important; }
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .page-actions { width: 100%; display: flex; gap: 6px; flex-wrap: wrap; }

  /* ---- Filter bar ---- */
  .filter-bar { gap: 8px; }
  .search-input {
    min-width: 0 !important;
    width: 100%;
    max-width: none !important;
    font-size: 16px !important;
  }
  .filter-bar select { font-size: 16px !important; width: 100%; max-width: none; }
  .filter-bar .btn { flex-shrink: 0; }

  /* ---- Grids ---- */
  .grid-2 { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* ---- Tabs: scrollable, compact ---- */
  .tabs { margin-bottom: 16px; }
  .tab-item { padding: 10px 14px; font-size: 0.8rem; }

  /* ---- Dashboard ---- */
  .dash-page { overflow-x: hidden; }
  .dash-hero {
    flex-direction: column !important;
    padding: 16px 14px 20px !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
  }
  .dash-hero-left { width: 100%; min-width: 0 !important; }
  .dash-greeting-name { font-size: 1.3rem !important; }
  .dash-gauges {
    gap: 12px !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  .gauge-svg { width: 72px !important; height: 72px !important; }
  .gauge-value { font-size: 0.95rem !important; }
  .gauge-sub { font-size: 0.55rem !important; }
  .dash-slots { width: 100% !important; min-width: 0 !important; }
  .dash-slots-row { gap: 10px !important; }
  .session-slot {
    min-width: 0 !important;
    flex: 1 !important;
    max-width: none !important;
  }
  .dash-section { padding: 0 14px !important; margin-bottom: 24px !important; }
  .dash-section-header { margin-bottom: 10px !important; }
  .dash-hubs-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .dash-hub-card { padding: 12px 14px !important; }
  .dash-chars-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .dash-char-card { padding: 10px !important; }
  .friends-strip {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px !important;
  }
  .friend-chip { flex-shrink: 0; }

  /* ---- Module / Table browse ---- */
  .module-list,
  .table-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .module-card,
  .table-card { padding: 14px !important; }
  .module-detail-card { padding: 16px !important; }
  .module-detail-card .module-cover {
    width: 100% !important;
    max-height: 160px !important;
    object-fit: cover;
  }
  .start-table-btn { width: 100%; justify-content: center; }

  /* ---- DM Hub ---- */
  .dmhub-shell { padding: 14px 14px !important; }
  .dmhub-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding-bottom: 14px !important;
  }
  .dmhub-header > div:last-child {
    width: 100%;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .dmhub-row { padding: 12px !important; gap: 10px !important; }
  .dmhub-row-name { font-size: 0.9rem !important; }
  .dmhub-row-meta { font-size: 0.72rem !important; flex-wrap: wrap; }
  .dmhub-row-actions { flex-wrap: wrap; gap: 6px !important; }

  /* ---- Admin ---- */
  [data-admin-view] .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [data-admin-view] .admin-kpi-value { font-size: 20px !important; }
  [data-admin-view] .tabs { margin-bottom: 0; }
  [data-admin-view] table { font-size: 11px; }
  [data-admin-view] th, [data-admin-view] td { padding: 6px 8px; }

  /* ---- Post cards ---- */
  .post-card { padding: 12px !important; }
  .post-header { flex-wrap: wrap; gap: 6px; }
  .post-author { font-size: 0.82rem !important; }
  .post-time { font-size: 0.7rem !important; }
  .post-content { font-size: 0.875rem !important; line-height: 1.65 !important; }
  .post-actions { flex-wrap: wrap; gap: 4px; }
  .post-action-btn { padding: 4px 8px !important; font-size: 0.72rem !important; }

  /* ---- Modals ---- */
  .modal-header { padding: 14px 16px !important; }
  .modal-title { font-size: 1rem !important; }
  .modal-body { padding: 14px 16px !important; }
  .modal-footer { padding: 12px 16px !important; flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn { flex: 1; justify-content: center; }

  /* ---- Forms ---- */
  .form-group { margin-bottom: 14px !important; }
  .form-group label { font-size: 0.8rem !important; margin-bottom: 5px !important; }
  .form-row { flex-direction: column !important; gap: 14px !important; }

  /* ---- Buttons ---- */
  .btn-full { width: 100%; }
  .page-actions .btn { flex: 1; min-width: 0; justify-content: center; text-align: center; }

  /* ---- Inventory ---- */
  .inventory-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .item-card { padding: 10px !important; }

  /* ---- Market ---- */
  .market-grid { grid-template-columns: 1fr !important; gap: 8px !important; }

  /* ---- Stat card strip (admin KPIs) ---- */
  [data-admin-view] .stat-card { padding: 12px 14px; }
  [data-admin-view] .stat-card-value { font-size: 22px; }

  /* ---- Tour callout ---- */
  .tour-callout {
    max-width: min(90vw, 320px) !important;
    font-size: 0.82rem !important;
  }
}

/* ============================================================
   SMALL PHONES (≤480px)
   ============================================================ */
@media (max-width: 480px) {

  .page { padding: 10px 10px !important; }
  .page-title { font-size: 1.15rem !important; }

  /* Grids all single col */
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr !important; }

  [data-admin-view] .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Gauges smaller */
  .gauge-svg { width: 62px !important; height: 62px !important; }
  .gauge-value { font-size: 0.85rem !important; }

  /* Session slots stack */
  .dash-slots-row { flex-direction: column !important; align-items: stretch !important; }
  .session-slot { max-width: none !important; }

  /* Tabs even more compact */
  .tab-item { padding: 8px 12px; font-size: 0.75rem; }

  /* DM hub full width actions */
  .dmhub-row-actions .btn { flex: 1; }

  /* Modal full height */
  .modal-content { max-height: 96vh !important; }

  /* Composer */
  .composer-textarea { min-height: 48px !important; }

  /* Table header actions wrap */
  .table-header { flex-wrap: wrap !important; gap: 6px !important; }
  .table-header-title { font-size: 0.82rem !important; }

  /* Char grid single col */
  .dash-chars-grid { grid-template-columns: 1fr !important; }

  /* Post feed tighter */
  .post-feed { padding: 10px 8px 8px !important; gap: 6px !important; }
  .post-card { padding: 10px !important; border-radius: var(--radius-sm) !important; }

  /* Inventory single col */
  .inventory-grid { grid-template-columns: 1fr !important; }

  /* Friends strip: smaller chips */
  .friend-chip { padding: 6px 8px !important; }
  .friend-name { font-size: 0.65rem !important; max-width: 52px !important; }
}

/* ============================================================
   TABLET LANDSCAPE (1024px – 1280px)
   ============================================================ */
@media (min-width: 1025px) and (max-width: 1280px) {
  .page { padding: 22px 24px; }
  .dash-hero { padding: 22px 24px 28px; }
  .dash-section { padding: 0 24px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .table-view { grid-template-columns: 210px minmax(0, 1fr) 230px; }
}

/* ============================================================
   UTILITY: safe scrolling containers
   ============================================================ */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-x::-webkit-scrollbar { display: none; }

/* Ensure no horizontal overflow at root level */
html, body { max-width: 100vw; overflow-x: hidden; }

/* ============================================================
   MOBILE POPUP / PANEL HARD PASS (≤768px)
   Every panel that opens must:
     1. Fit within the viewport (max-height: 80dvh)
     2. Scroll internally if content overflows
     3. Be reachable to close (close btn, overlay tap)
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Floating panels: notif, user-menu, theme-picker ----
     Convert all fixed bottom-left panels to full-width
     bottom sheets so they never clip off-screen.            */
  .notif-panel,
  .user-menu,
  .theme-picker {
    left: 0 !important;
    right: 0 !important;
    bottom: 52px !important; /* above mobile topbar */
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    max-height: 80dvh !important;
    overflow-y: auto !important;
  }

  /* Notif panel list already scrolls — just constrain height */
  .notif-panel { display: flex; flex-direction: column; }
  .notif-list { flex: 1; overflow-y: auto; min-height: 0; }

  /* User menu: wider padding */
  .user-menu-items { padding: 8px; }

  /* Theme picker: wrap swatches */
  .theme-swatches { flex-wrap: wrap; gap: 10px; }

  /* Custom color panel — inline, not secondary floating */
  .custom-theme-panel {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    margin-top: 8px;
    padding: 10px 0 0 !important;
  }

  /* ---- Vibe picker panel ---- */
  .vibe-picker-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 75dvh !important;
    overflow-y: auto !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    z-index: 9001 !important;
    padding-bottom: env(safe-area-inset-bottom, 12px);
  }

  /* Vibe grid: 4-col on mobile for compactness */
  .vibe-grid { grid-template-columns: repeat(4, 1fr) !important; }

  /* ---- Macro dropdown ---- */
  .macro-dropdown {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 110px !important; /* above composer */
    top: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-height: 50dvh !important;
    overflow-y: auto !important;
    border-radius: var(--radius-md) !important;
  }

  /* ---- Icon picker — bottom sheet (JS also handles this) ---- */
  .iconpicker-popover {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 80dvh !important;
    overflow-y: auto !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    z-index: 9100 !important;
  }
  /* Icon grid: more columns on mobile for compactness */
  .iconpicker-grid {
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)) !important;
  }

  /* ---- Sidebar panels (character, dice, etc.) inside table view ----
     On mobile the table is single-column so panels are stacked.
     Make sure any floating sidebar panel is also scrollable.   */
  .sidebar-panel,
  .table-sidebar-right .sidebar-panel {
    max-height: 60dvh !important;
    overflow-y: auto !important;
  }

  /* ---- Composer help panel ---- */
  .composer-help-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 60dvh !important;
    overflow-y: auto !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    z-index: 8000 !important;
  }

  /* ---- Mention autocomplete dropdown ---- */
  .mention-list,
  .mention-dropdown {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 110px !important;
    top: auto !important;
    max-height: 40dvh !important;
    overflow-y: auto !important;
    border-radius: var(--radius-md) !important;
  }

  /* ---- Tour callout: never go off-screen ---- */
  .echoes-tour-callout {
    max-width: calc(100vw - 24px) !important;
    max-height: 80dvh !important;
    overflow-y: auto !important;
  }
}

/* ============================================================
   v4.01 mobile pass — bottom tabs, safe areas, sheets
   ============================================================ */

/* Bottom-tab nav: hidden by default, shown only on phones. */
.mobile-bottom-tabs {
  display: none;
}

@media (max-width: 767px) {
  .mobile-bottom-tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(56px + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--bg-surface, #0f172a);
    border-top: var(--border-thin) solid var(--border, #1e293b);
    z-index: var(--z-sticky);
    align-items: stretch;
    justify-content: space-around;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
  }

  .mtab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 4px;
    color: var(--text-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    min-height: 44px;
    position: relative;
    transition: color var(--motion-fast) var(--easing-out);
  }
  .mtab:hover { color: var(--text-secondary); }
  .mtab.active { color: var(--accent-a-light, var(--text-primary)); }
  .mtab svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }
  .mtab-label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .mtab-fab {
    background: var(--accent-a, #3b82f6);
    color: #fff !important;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    align-self: center;
    margin-top: -16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4),
                0 0 0 4px var(--bg-surface, #0f172a);
  }
  .mtab-fab svg { width: 24px; height: 24px; }
  .mtab-fab .mtab-label { display: none; }
  .mtab-fab:hover {
    background: var(--accent-a-light, #60a5fa) !important;
  }
  .mtab-badge {
    position: absolute;
    top: 4px;
    right: 18%;
    background: var(--accent-danger, #ef4444);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 999px;
    min-width: 16px;
    text-align: center;
    line-height: 1.2;
  }
  .mtab-badge.hidden { display: none; }

  /* Push main content up so it doesn't hide behind the bottom tabs. */
  .main-content {
    padding-bottom: calc(56px + var(--safe-bottom) + var(--space-2));
  }

  /* Composer should sit ABOVE the bottom tabs on phone (table view). */
  .composer,
  .post-composer,
  #composer-area,
  .composer-anchor {
    position: sticky;
    bottom: calc(56px + var(--safe-bottom));
    z-index: calc(var(--z-sticky) - 1);
  }

  /* Hide the legacy mobile top-bar notif button — bottom tabs own that now. */
  .mobile-notif-btn { display: none !important; }

  /* iOS notch handling on top bar */
  .mobile-topbar {
    padding-top: var(--safe-top);
    height: calc(48px + var(--safe-top));
  }

  /* Modals fill screen on phone */
  .modal,
  .overlay-modal,
  .modal-card {
    max-width: 100vw !important;
    max-height: 100dvh !important;
    width: 100vw !important;
    border-radius: 0 !important;
    border-width: 0 !important;
  }

  /* Notification panel becomes a sheet */
  #notif-panel:not(.hidden) {
    position: fixed !important;
    top: auto !important;
    bottom: calc(56px + var(--safe-bottom)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-height: 70dvh !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    transform: none !important;
    border-bottom: none !important;
  }

  /* User menu becomes a sheet */
  #user-menu:not(.hidden) {
    position: fixed !important;
    top: auto !important;
    bottom: calc(56px + var(--safe-bottom)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-height: 75dvh !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    transform: none !important;
  }

  /* Theme picker as sheet */
  .theme-picker {
    position: fixed !important;
    top: auto !important;
    bottom: calc(56px + var(--safe-bottom)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-height: 70dvh !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    transform: none !important;
  }
}

/* ============================================================
   Tablet portrait — single column with slide-over right panel
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .table-sidebar-right {
    position: fixed !important;
    top: 48px;
    right: 0;
    bottom: 0;
    width: min(380px, 86vw);
    transform: translateX(100%);
    transition: transform var(--motion-base) var(--easing-out);
    z-index: var(--z-overlay);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
  }
  .table-sidebar-right.open {
    transform: translateX(0);
  }
}

/* ============================================================
   Safe-area insets for landscape iOS
   ============================================================ */
@media (orientation: landscape) {
  .main-content {
    padding-left: max(var(--space-3), var(--safe-left));
    padding-right: max(var(--space-3), var(--safe-right));
  }
}

/* ============================================================
   v4.01 mobile sheet — utility menu, alerts, me
   ============================================================ */

.mobile-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  z-index: var(--z-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--easing-out);
}
.mobile-sheet-overlay.visible { opacity: 1; pointer-events: auto; }
.mobile-sheet-overlay.hidden { display: none; }

.mobile-sheet {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: calc(var(--z-overlay) + 1);
  background: var(--bg-surface, #0f172a);
  border-top: var(--border-thin) solid var(--border, #1e293b);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--motion-base) var(--easing-out);
  padding-bottom: var(--safe-bottom);
}
.mobile-sheet.open { transform: translateY(0); }
.mobile-sheet.hidden { display: none; }

.mobile-sheet-handle {
  width: 36px;
  height: 4px;
  margin: 8px auto 4px;
  background: var(--border-strong, #475569);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.mobile-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-thin) solid var(--border, #1e293b);
}
.mobile-sheet-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.mobile-sheet-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.6em;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mobile-sheet-close:hover {
  background: var(--bg-hover, rgba(148,163,184,0.08));
  color: var(--text-primary);
}

.mobile-sheet-body {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* ---- Utility tile grid ---- */

.util-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.util-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  background: var(--bg-card, #1e293b);
  border: var(--border-thin) solid var(--border, #334155);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  min-height: 84px;
  transition: background var(--motion-fast) var(--easing-out),
              border-color var(--motion-fast) var(--easing-out),
              transform var(--motion-fast) var(--easing-out);
  font-family: inherit;
}
.util-tile:hover {
  background: var(--bg-hover, var(--bg-elevated));
  border-color: var(--border-strong, var(--text-muted));
}
.util-tile:active { transform: scale(0.97); }
.util-tile-icon {
  font-size: 1.5em;
  line-height: 1;
}
.util-tile-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  text-align: center;
}

/* ---- Notif sheet list ---- */

.util-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }

.util-notif-list { display: flex; flex-direction: column; gap: var(--space-2); }
.util-notif {
  padding: var(--space-3);
  background: var(--bg-card);
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--easing-out);
}
.util-notif:hover { border-color: var(--border-strong, var(--text-muted)); }
.util-notif.unread { border-left: 3px solid var(--accent-a, #3b82f6); }
.util-notif-title { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text-primary); }
.util-notif-body  { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; line-height: 1.4; }
.util-notif-meta  { font-size: var(--text-2xs); color: var(--text-muted); margin-top: var(--space-2); font-family: var(--font-mono); }

/* ---- Me sheet ---- */

.util-me-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-thin) solid var(--border, #1e293b);
  margin-bottom: var(--space-3);
}
.util-me-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: 1.4em;
}
.util-me-name { font-size: var(--text-lg); font-weight: var(--weight-semi); color: var(--text-primary); }
.util-me-role { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.util-me-actions { display: flex; flex-direction: column; gap: 2px; }
.util-me-row {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  min-height: 44px;
  transition: background var(--motion-fast) var(--easing-out);
}
.util-me-row:hover { background: var(--bg-hover, var(--bg-elevated)); }
.util-me-danger { color: var(--accent-danger, #ef4444); }

/* ---- Theme grid ---- */

.util-themes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.util-theme {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: var(--border-thin) solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  text-align: left;
  min-height: 44px;
  transition: border-color var(--motion-fast) var(--easing-out);
}
.util-theme:hover { border-color: var(--border-strong, var(--text-muted)); }
.util-theme.active {
  border-color: var(--accent-a, #3b82f6);
  background: var(--bg-elevated);
}
.util-theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-a, #3b82f6), var(--accent-b, #06b6d4));
}
.util-theme[data-theme="void"]          .util-theme-dot { background: linear-gradient(135deg, #8B5CF6, #06B6D4); }
.util-theme[data-theme="embertide"]     .util-theme-dot { background: linear-gradient(135deg, #EA580C, #DC2626); }
.util-theme[data-theme="deepwater"]     .util-theme-dot { background: linear-gradient(135deg, #0891B2, #0EA5E9); }
.util-theme[data-theme="grovewick"]     .util-theme-dot { background: linear-gradient(135deg, #16A34A, #65A30D); }
.util-theme[data-theme="ironveil"]      .util-theme-dot { background: linear-gradient(135deg, #818CF8, #A78BFA); }
.util-theme[data-theme="ashglass"]      .util-theme-dot { background: linear-gradient(135deg, #14B8A6, #94A3B8); }
.util-theme[data-theme="prestige-dark"] .util-theme-dot { background: linear-gradient(135deg, #C9A84C, #0F0E0C); }
.util-theme[data-theme="prestige"]      .util-theme-dot { background: linear-gradient(135deg, #C9A84C, #FAFAF7); }

/* ---- Hex FAB glyph centering ---- */

.mtab-fab .mtab-fab-glyph {
  font-size: 1.55em;
  line-height: 1;
  font-family: var(--font-display, 'Cinzel'), Georgia, serif;
  font-weight: 700;
  letter-spacing: 0;
  display: inline-block;
  transform: translateY(-1px);
}

/* ---- Sheet content scoped only to phone width ---- */

@media (min-width: 768px) {
  .mobile-sheet, .mobile-sheet-overlay { display: none !important; }
}

/* ============================================================
   v4.01 — phone table view: chat-first, panels off-canvas
   Overrides earlier mobile.css "stack everything" rules.
   ============================================================ */

@media (max-width: 767px) {
  /* Hide left sidebar (party / characters) on phone — surface via Panels button */
  .table-sidebar-left {
    display: none !important;
  }

  /* Right sidebar becomes a right-side slide-over (chat-first feel) */
  .table-sidebar-right {
    position: fixed !important;
    top: calc(48px + var(--safe-top));
    right: 0 !important;
    bottom: calc(56px + var(--safe-bottom));
    width: min(420px, 92vw) !important;
    max-height: none !important;
    overflow-y: auto !important;
    transform: translateX(100%);
    transition: transform var(--motion-base) var(--easing-out);
    z-index: var(--z-overlay);
    background: var(--bg-surface, #0f172a) !important;
    border-left: var(--border-thin) solid var(--border, #1e293b) !important;
    border-bottom: none !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.4);
    order: unset !important;
    display: flex !important;
    flex-direction: column;
    padding: var(--space-3) !important;
  }
  .table-sidebar-right.phone-panels-open {
    transform: translateX(0);
  }

  /* Backdrop overlay for the panels drawer */
  .phone-panels-overlay {
    position: fixed;
    top: calc(48px + var(--safe-top));
    left: 0;
    right: 0;
    bottom: calc(56px + var(--safe-bottom));
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-overlay) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--easing-out);
  }
  .phone-panels-overlay.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Chat takes the screen */
  .table-main {
    order: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
    padding-bottom: var(--space-2) !important;
  }
  .table-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-base);
    border-bottom: var(--border-thin) solid var(--border);
    padding: var(--space-2) var(--space-3) !important;
  }
  .table-header > div:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .table-header-title {
    font-size: var(--text-md) !important;
    font-weight: var(--weight-semi);
  }

  /* Hide the desktop-only inline buttons (inventory, party-inv, market, tour) */
  .desktop-only-inline { display: none !important; }
  /* Show the phone-only inline button (Panels) */
  .phone-only-inline { display: inline-flex !important; }

  /* Posts list — let it grow, no max-height */
  .post-feed,
  .posts-list,
  #posts-list {
    max-height: none !important;
    height: auto !important;
    flex: 1 1 auto;
    padding: var(--space-2) var(--space-3) !important;
  }

  /* Smaller post bubbles for phone density */
  .post {
    padding: var(--space-2) var(--space-3) !important;
    margin-bottom: var(--space-2) !important;
    font-size: var(--text-sm);
  }
  .post-content { font-size: var(--text-sm); line-height: 1.55; }
  .post-meta { font-size: var(--text-2xs); }

  /* Composer — sticky above bottom tab nav */
  .composer,
  .post-composer,
  #composer-area {
    padding: var(--space-2) var(--space-3) !important;
  }

  /* Scene banner gets less vertical real estate */
  .scene-banner-img { max-height: 30vh !important; }
}

/* Default state — Panels button hidden on desktop, shown on phone */
.phone-only-inline { display: none; }

/* ============================================================
   v4.01 phone — viewport-bound composer popovers
   On phone, every floating composer popover (vibe, icon, mention list,
   composer help, shortcut suggestions, macro dropdown) becomes a fixed
   bottom-edge sheet that stays inside the viewport.
   ============================================================ */

@media (max-width: 767px) {
  /* Vibe picker panel */
  .vibe-picker-panel.open {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(56px + var(--safe-bottom) + 12px) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: 60dvh !important;
    overflow-y: auto !important;
    z-index: var(--z-overlay) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
  }
  .vibe-picker-panel .vibe-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .vibe-picker-panel .vibe-option {
    padding: 10px 4px !important;
    min-height: 64px;
  }
  .vibe-option-icon { font-size: 1.25em !important; }
  .vibe-option-label {
    font-size: 0.65rem !important;
    text-align: center;
  }

  /* Icon picker — full bottom sheet on phone */
  .iconpicker-popover {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(56px + var(--safe-bottom)) !important;
    top: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 75dvh !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    z-index: var(--z-overlay) !important;
  }

  /* Composer help panel — viewport-clamped */
  .composer-help-panel {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(56px + var(--safe-bottom) + 12px) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: 65dvh !important;
    overflow-y: auto !important;
    z-index: var(--z-overlay) !important;
    border-radius: var(--radius-lg) !important;
  }
  .composer-help-grid {
    grid-template-columns: 1fr !important;
  }

  /* Macro / shortcut dropdown — match mention-list pattern */
  .macro-dropdown {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(56px + var(--safe-bottom) + 110px) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: 40dvh !important;
    overflow-y: auto !important;
    z-index: var(--z-overlay) !important;
    border-radius: var(--radius-md) !important;
  }
}

/* ============================================================
   v4.01 — kill the mobile topbar/hamburger on phone (replaced by ⬡ FAB).
   The hex menu in the bottom-tab nav owns navigation now.
   ============================================================ */

@media (max-width: 767px) {
  .mobile-topbar,
  .mobile-nav-toggle,
  .mobile-sidebar-overlay {
    display: none !important;
  }

  /* Reclaim the 52px we were padding for the topbar. */
  #app {
    padding-top: var(--safe-top, 0) !important;
  }

  /* Sidebar can never slide in on phone — bottom-tab + ⬡ menu cover all entries. */
  #sidebar.sidebar.mobile-open {
    left: -240px !important;
  }
}

/* ============================================================
   v4.01 — composer / feed gap fix
   The composer is sticky-bottom on phone; give the feed bottom padding
   so the most recent post doesn't sit under the composer.
   ============================================================ */

@media (max-width: 767px) {
  .post-feed,
  .posts-list,
  #posts-list {
    /* Composer is ~96-120px tall depending on toolbar wrap; pad generously
       so two-line posts have breathing room before the composer edge. */
    padding-bottom: calc(140px + var(--safe-bottom)) !important;
  }

  /* Composer gets a top edge that visually separates it from the feed. */
  .composer,
  .post-composer,
  #composer-area {
    border-top: var(--border-thin) solid var(--border, #1e293b) !important;
    box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.35);
    background: var(--bg-surface, var(--bg-base)) !important;
  }
}