/* mobile.css */

@media (max-width: 768px) {
  :root {
    --sidebar-w: 0px;
    --input-h: 116px;
  }

  body { font-size: 16px; }

  .mobile-only { display: inline-flex; }

  .app-main {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    top: var(--header-h); right: 0;
    height: calc(100vh - var(--header-h) - var(--input-h));
    width: 280px;
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    z-index: 80;
    box-shadow: -8px 0 24px rgba(0,0,0,0.4);
  }
  .sidebar.open { transform: translateX(0); }

  .chat-history { padding: 14px 14px 8px; }

  .input-row {
    grid-template-columns: 1fr 64px 56px;
    grid-template-areas:
      "txt mic submit"
      "sel sel sel";
    gap: 6px;
  }
  #text-input { grid-area: txt; }
  .mic-btn { grid-area: mic; width: 64px; height: 64px; }
  .submit-btn { grid-area: submit; height: 56px; }
  #model-override { grid-area: sel; height: 36px; width: 100%; }

  .api-status .dot { font-size: 9px; padding-left: 10px; }
  .api-status .dot::before { width: 6px; height: 6px; }
  .header-title { font-size: 13px; letter-spacing: 0.16em; }

  .login-card { max-width: 100%; }
}

@media (max-width: 380px) {
  .api-status { padding: 3px 6px; gap: 4px; }
  .api-status .dot { font-size: 8px; }
}