/* ==========================================================================
   Responsive behaviour
   Mobile-first priority: sidebar becomes an overlay drawer under 860px.
   ========================================================================== */

@media (max-width: 860px){
  .sidebar{
    position: fixed;
    top: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    transition: transform var(--dur-med) var(--ease);
    box-shadow: var(--shadow-1);
  }
  .sidebar.is-open{ transform: translateX(0); }
  .sidebar__close{ display: inline-flex; margin-left: auto; }

  #openSidebarBtn{ display: inline-flex; }
  #newChatTopBtn{ display: inline-flex; }

  .conversation{ padding: 14px 12px 6px; }
  .conversation__inner{ gap: 16px; }
  .msg__bubble{ max-width: 88%; }

  .composer-wrap{ padding: 8px 10px 12px; }
  .welcome__title{ font-size: 21px; }
  .welcome__suggestions{ grid-template-columns: 1fr 1fr; }

  .settings{ flex-direction: column; }
  .settings__nav{
    flex-direction: row;
    overflow-x: auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
  .settings__navitem{ white-space: nowrap; }
  .modal__panel--wide{ max-height: 92vh; }
}

@media (max-width: 480px){
  .welcome__suggestions{ grid-template-columns: 1fr; }
  .msg__bubble{ font-size: 14px; }
}

/* Ensure large touch targets on touch devices */
@media (hover: none){
  .icon-btn{ width: 42px; height: 42px; }
  .chat-item__menu{ opacity: 1; }
}