/* ── Responsive layer ─────────────────────────────────────────────────────
   Loaded last so it wins over the desktop rules it overrides.
   Desktop keeps the fixed sidebar; below 860px it becomes an off-canvas drawer
   and the chat takes the full width. */

.menu-btn {
  display: none;              /* desktop: the sidebar is always there */
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  color: #C6CBDC;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s;
}
.menu-btn svg { width: 17px; height: 17px; }
.menu-btn:hover { border-color: var(--accent); }

.sidebar-scrim { display: none; }

@media (max-width: 860px) {

  body { height: 100dvh; }    /* dodge the mobile URL bar / virtual keyboard */

  .menu-btn { display: flex; }

  header { height: 56px; padding: 0 14px; gap: 10px; }
  .header-sep,
  .header-title,
  .session-label { display: none; }
  .logo { font-size: 17px; }
  .brand-mark { width: 25px; height: 25px; border-radius: 8px; }
  .brand-mark svg { width: 13px; height: 13px; }

  /* The dot survives, its sentence doesn't — and the rates link stays reachable */
  .hdr-status { margin-left: auto; padding: 5px 10px; }
  .kb-text { font-size: 11px; }
  .hdr-link { padding: 6px 10px; font-size: 11px; }

  /* Sidebar → drawer */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 800;
    width: 300px;
    max-width: 86vw;
    transform: translateX(-100%);
    transition: transform .24s ease-out;
    box-shadow: 0 0 40px rgba(0,0,0,.5);
  }
  .sidebar.open { transform: translateX(0); }

  .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 700;
    background: rgba(9,10,14,.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .sidebar-scrim[hidden] { display: none; }

  .chat-area { width: 100%; }
  .messages  { padding: 16px 14px; gap: 16px; }
  .input-area { padding: 11px 14px 18px; }

  /* Bubbles get the width back that the sidebar was taking */
  .msg { max-width: 100%; }
  .msg.user .msg-content { max-width: 88%; }

  /* Hero: thumb-sized targets, no cramped copy */
  .empty-state { max-width: 100%; padding: 4px; gap: 16px; }
  .hero-title { font-size: 32px; letter-spacing: -1.3px; }
  .hero-sub { font-size: 13.5px; }
  .hero-dropzone { padding: 22px 18px; border-radius: 20px; }
  .hero-actions { flex-direction: column; gap: 10px; width: 100%; }
  .hero-btn { width: 100%; justify-content: center; padding: 15px 20px; font-size: 15px; }

  .overlay-card { padding: 26px 22px 22px; border-radius: 22px; }
  .overlay-message { font-size: 17px; }
  .overlay-elapsed { font-size: 19px; }
  .drag-veil-card { padding: 32px 28px; }

  .clt-bubble { padding: 22px 20px 20px; border-radius: 22px; }
  .cw-title { font-size: 23px; letter-spacing: -.9px; }
  .cw-actions { flex-direction: column; }
  .cw-cta, .cw-ghost { width: 100%; }
}

/* Very small phones */
@media (max-width: 480px) {
  .hero-icon { width: 48px; height: 48px; border-radius: 15px; }
  .hero-icon svg { width: 21px; height: 21px; }
  .hero-title { font-size: 28px; }
  .hero-eyebrow { font-size: 9px; letter-spacing: 1.3px; }
  .input-hint { font-size: 10.5px; }
  .cmp-tabs { gap: 6px; }
  .cmp-tab { padding: 9px 11px; }
  .cmp-tab-amount { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}