/* ─── MOBILE RESPONSIVE  (≤ 768px) ────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Shell ─────────────────────────────────────── */
  .app-shell {
    max-width: 100%;
    position: relative;
    overflow: hidden;
  }

  /* ── Sidebar: full-width, slide-in panel ────────── */
  .sidebar {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  .sidebar.sidebar-active {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* ── Chat panel: full-width, hidden until active ── */
  .chat-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  .chat-panel.panel-active {
    transform: translateX(0);
    pointer-events: auto;
  }

  #simRightPanel {
    position: absolute;
    inset: 0;
    width: 100%;
    z-index: 25;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  #simRightPanel.sim-panel-active {
    transform: translateX(0);
    pointer-events: auto;
  }

  /* ── Back button: show on mobile ───────────────── */
  .back-to-sidebar {
    display: flex !important;
  }

  /* ── Topbar tweaks ─────────────────────────────── */
  .topbar {
    padding: 10px 8px 10px;
    padding-top: calc(10px + env(safe-area-inset-top));
    gap: 6px;
  }
  .topbar-coins { display: none; }
  .status-info .name { font-size: 15px; }
  .online { font-size: 11px; }

  /* ── Input bar ─────────────────────────────────── */
  .input-bar {
    padding: 8px 8px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  .input-bar textarea, .input-bar input {
    font-size: 16px; /* prevents iOS zoom on focus */
  }

  /* ── Chat bubbles ──────────────────────────────── */
  .msg { max-width: 88%; font-size: 14px; }

  /* ── User messages: push to rightmost edge ─────── */
  .chat { padding-right: 8px; }
  .msg.user { margin-right: -4px; }

  /* ── Screens: full-screen on mobile ────────────── */
  .screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 30;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Modals: bottom sheet style ────────────────── */
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh;
    overflow-y: auto;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  /* ── Export modal ──────────────────────────────── */
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    flex-direction: column !important;
  }

  /* ── Sidebar bottom bar ────────────────────────── */
  .sidebar-bottom-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  /* ── Companion list items: bigger tap targets ──── */
  .companion-item { min-height: 68px; }

  /* ── Segment tabs: scrollable ───────────────────── */
  .segment-tabs {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .segment-tabs::-webkit-scrollbar { display: none; }

  /* ── Select bar ────────────────────────────────── */
  #selectBar { padding: 10px 12px; }

  /* ── Profile face picker: wider buttons ─────────── */
  #profileFaceGrid button { width: 56px; height: 56px; }

  /* ── Settings rows ─────────────────────────────── */
  .settings-row { min-height: 52px; }

  /* ── GIF picker ────────────────────────────────── */
  .gif-picker { max-height: 50vh; }

  /* ── Topbar icon buttons: slightly bigger hit area  */
  .icon-btn { width: 40px; height: 40px; }

  /* ── Video/call screen ─────────────────────────── */
  #videoScreen .call-controls { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}

/* ── Very small screens (iPhone SE etc.) ─────────── */
@media (max-width: 375px) {
  .topbar-actions { gap: 0; }
  .icon-btn { width: 36px; height: 36px; }
  .msg { max-width: 93%; font-size: 13.5px; }
}