@media (max-width: 768px) {
  body { overflow: hidden; height: 100vh; height: 100dvh; }
  .bg-grid { display: none; }
  .app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    grid-template-columns: none;
  }
  .sidebar {
    order: 2;
    flex-direction: row;
    padding: 8px 12px;
    border-right: none;
    border-top: 1px solid var(--border);
    background: var(--bg-deep);
    gap: 8px;
    overflow-x: auto;
    flex-shrink: 0;
  }
  .logo, .sidebar-label, .stats-bar, .advisor-group { display: contents; }
  .logo, .sidebar-label, .stats-bar { display: none; }
  .advisor-group {
    border: none;
    padding: 0;
    margin: 0;
    flex-direction: row;
    gap: 8px;
  }
  .character-card {
    min-width: 180px;
    padding: 10px 12px;
    flex-shrink: 0;
  }
  .character-card.active::before { display: none; }
  .avatar-container { width: 40px; height: 40px; }
  .char-name { font-size: 0.88rem; }
  .char-title { font-size: 0.66rem; }

  /* Theme toggle on mobile: compact icon-only at the end of the sidebar row */
  .theme-toggle {
    margin: 0;
    padding: 8px 12px;
    flex-shrink: 0;
  }
  .theme-toggle .label-dark,
  .theme-toggle .label-light { display: none !important; }

  .chat-area {
    order: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    border-left: none;
  }
  .chat-header { padding: 12px 16px; flex-shrink: 0; }
  .chat-header h2 { font-size: 1.05rem; }
  .chat-header p { font-size: 0.7rem; }
  .messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    min-height: 0;
    gap: 12px;
  }
  .msg { max-width: 88%; font-size: 0.9rem; padding: 13px 15px; }
  .input-area {
    flex-shrink: 0;
    padding: 10px 14px 14px;
  }
  .send-btn { padding: 0 18px; height: 40px; font-size: 0.78rem; }
  .welcome { padding: 24px 16px; }
  .welcome::before { font-size: 0.62rem; margin-bottom: 12px; }
  .welcome h2 { font-size: 1.8rem; margin-bottom: 14px; }
  .welcome p { font-size: 0.92rem; }
  .welcome .hint-cards { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
  .welcome .hint-card { font-size: 0.82rem; padding: 12px 14px; }
  .typing { margin: 0 16px; }
}