/* ===== ATLAS AI — responsive.css ===== */

/* Tablet and below */
@media (max-width: 1024px) {
  .suggestions { max-width: 520px; margin: 0 auto; }
}

/* Mobile-first sidebar as drawer */
@media (max-width: 768px) {
  #sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50;
    width: min(300px, 86vw);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow);
  }
  [dir="rtl"] #sidebar { transform: translateX(100%); }
  #sidebar.open { transform: translateX(0); }
  [dir="rtl"] #sidebar.open { transform: translateX(0); }
  #sbClose { display: inline-flex; }
  #sbBackdrop {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(2, 8, 20, 0.5); opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
  }
  #sbBackdrop.show { opacity: 1; pointer-events: auto; }

  .messages { padding: 12px 10px 8px; }
  #welcome h1 { font-size: 21px; }
  .suggestions { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sug-card { padding: 11px 12px; font-size: 12.5px; }

  .msg.user .bubble { max-width: 92%; }
  .msg-actions { opacity: 1; } /* always visible on touch */
  .composer-hint { display: none; }

  /* Bigger touch targets */
  .icon-btn { width: 42px; height: 42px; min-width: 42px; }
  .send-btn { width: 42px; height: 42px; min-width: 42px; }
  #composer { padding: 7px 8px; gap: 6px; }
  #input { min-height: 46px; }
  #input { font-size: 16px; } /* prevents iOS zoom */
  .modal-box { width: 100vw; max-width: 100vw; border-radius: 16px 16px 0 0; align-self: flex-end; max-height: 85dvh; }
  .modal { align-items: flex-end; }
}

/* Phone portrait: explicit grid so the writing area always gets its own full-width row */
@media (max-width: 480px) {
  #composer {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    grid-template-areas:
      "attach mic web model model"
      "input  input input input send";
    gap: 6px 6px;
    align-items: center;
  }
  #btnAttach { grid-area: attach; }
  #btnMic { grid-area: mic; }
  #btnWeb { grid-area: web; }
  #modelSelect { grid-area: model; width: 100%; max-width: none; font-size: 13px; margin-bottom: 0; }
  #input {
    grid-area: input; width: 100%; min-width: 0; max-width: 100%;
    min-height: 46px; box-sizing: border-box;
  }
  #btnSend { grid-area: send; }
}

@media (max-width: 420px) {
  .suggestions { grid-template-columns: 1fr; }
}

/* Desktop hint: allow hover on sidebar */
@media (min-width: 769px) {
  #btnMenu { display: none; }
  .modal { align-items: center; }
}