/* @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;
    position: relative;
    flex-direction: row;
    padding: 6px 10px;
    border-right: none;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: var(--bg-surface);
    gap: 8px;
    overflow-x: auto;
    flex-shrink: 0;
  }
  .character-card { min-width: 130px; padding: 8px; }
  .avatar-container { width: 40px; height: 40px; margin-bottom: 4px; }
  .char-name { font-size: 0.85rem; }
  .char-title, .tap-hint, .stats-bar, .logo { display: none; }
  .chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    order: 1;
  }
  .chat-header { padding: 8px 14px; flex-shrink: 0; }
  .chat-header .active-avatar { width: 36px; height: 36px; font-size: 1.2rem; }
  .chat-header .active-info h2 { font-size: 0.9rem; }
  .chat-header .active-info p { font-size: 0.7rem; }
  .emotion-badge { font-size: 0.65rem; padding: 4px 10px; }
  .messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px;
    min-height: 0;
  }
  .input-area {
    flex-shrink: 0;
    padding: 8px 12px;
    position: relative;
    background: var(--bg-surface);
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .input-wrap { padding: 6px 6px 6px 14px; border-radius: 12px; }
  .send-btn { width: 38px; height: 38px; border-radius: 10px; }
  .msg { max-width: 88%; font-size: 0.88rem; padding: 12px 14px; }
  .welcome { padding: 16px; }
  .welcome h2 { font-size: 1.2rem; }
  .welcome p { font-size: 0.85rem; }
  .welcome .hint-cards { flex-direction: column; align-items: center; gap: 8px; }
  .welcome .hint-card { max-width: 100%; width: 100%; font-size: 0.8rem; padding: 10px 14px; }
  .typing { margin-left: 14px; }
} */

@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 { display: none; }
  .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; }

  .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; }
}