/* =====================================================================
   Responsive behaviour
   Desktop  >= 1100px : sidebar + chat + info side by side
   Tablet   768-1099  : narrower sidebar, info panel overlays
   Mobile   < 768px   : one pane at a time, sidebar slides away
   ===================================================================== */

/* ---------------------------------------------------------------------
   Large desktop
   --------------------------------------------------------------------- */
@media (min-width: 1500px) {
  :root {
    --sidebar-w: 386px;
    --info-w: 372px;
    --bubble-max: min(620px, 68%);
  }
}

/* ---------------------------------------------------------------------
   Tablet
   --------------------------------------------------------------------- */
@media (max-width: 1099px) {
  :root {
    --sidebar-w: 300px;
    --info-w: 320px;
    --bubble-max: min(520px, 80%);
  }

  /* The info panel floats over the conversation instead of squeezing it. */
  .shell, .shell.info-open {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 0;
  }

  .info-panel {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(var(--info-w), 88vw);
    z-index: var(--z-panel);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--ease-out);
  }
  html[dir="rtl"] .info-panel { transform: translateX(-100%); }
  .shell.info-open .info-panel { transform: translateX(0); }

  .msg-row.is-in  .msg-actions { inset-inline-start: auto; inset-inline-end: 4px; }
  .msg-row.is-out .msg-actions { inset-inline-end: auto; inset-inline-start: 4px; }
}

/* ---------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --head-h: 56px;
    --bubble-max: 82%;
    --fs-base: 15px;
  }

  .shell, .shell.info-open {
    grid-template-columns: 100% 100% 0;
    width: 200%;
    transform: translateX(0);
    transition: transform var(--t-slow) var(--ease-out);
  }

  /* Opening a chat slides the whole shell across. */
  .shell.chat-open { transform: translateX(-50%); }
  html[dir="rtl"] .shell.chat-open { transform: translateX(50%); }

  .sidebar { border-inline-end: 0; }

  .back-btn { display: grid; }

  .info-panel { width: 100vw; max-width: none; }

  /* Composer sits above the home indicator on iOS. */
  .composer {
    padding-inline: var(--sp-2);
    padding-block-end: max(var(--sp-3), env(safe-area-inset-bottom));
  }
  .message-scroll { padding-inline: var(--sp-2); }
  .sidebar-head { padding-inline: var(--sp-2); }

  /* Touch targets stay comfortable. */
  .icon-btn { width: 40px; height: 40px; }

  /* Hover-only affordances do not work on touch; long-press opens the
     context menu instead, so hide the inline action rail. */
  .msg-actions { display: none !important; }

  .fab {
    inset-block-end: max(var(--sp-4), env(safe-area-inset-bottom));
    inset-inline-end: var(--sp-4);
    width: 50px; height: 50px;
  }

  .modal-layer { padding: 0; place-items: end stretch; }
  .modal {
    max-width: none;
    max-height: 92dvh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    animation: sheetUp var(--t-slow) var(--ease-out);
  }
  .modal-wide { max-width: none; }

  @keyframes sheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .toast-stack { inset-block-end: calc(var(--composer-min-h) + var(--sp-3)); width: calc(100vw - 24px); }

  .emoji-panel { width: 100vw; inset-inline: 0 !important; border-radius: var(--r-md) var(--r-md) 0 0; }
  .emoji-grid { grid-template-columns: repeat(7, 1fr); }

  .field-row { grid-template-columns: 1fr; }

  .auth-card {
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .auth-screen { background: var(--bg-surface); }

  .day-sep span { font-size: 11px; }
  .scroll-bottom { inset-inline-end: var(--sp-3); }
  .selection-bar { padding-block-end: max(var(--sp-3), env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------------
   Very small phones
   --------------------------------------------------------------------- */
@media (max-width: 380px) {
  :root { --bubble-max: 88%; --fs-base: 14.5px; }
  .chat-head-actions .icon-btn:not(#chat-menu-btn) { display: none; }
  .emoji-grid { grid-template-columns: repeat(6, 1fr); }
  .media-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   Landscape phones: the composer must not eat the viewport
   --------------------------------------------------------------------- */
@media (max-height: 460px) and (max-width: 900px) {
  .composer-input textarea { max-height: 72px; }
  .chat-placeholder .placeholder-art { display: none; }
}

/* ---------------------------------------------------------------------
   Pointer-coarse: keep tap targets at 44px regardless of width
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  .menu-item { padding-block: 12px; }
  .pick-row { padding-block: 11px; }
  .member-row { padding-block: 11px; }
  .chat-row { padding-block: 10px; }
}

/* ---------------------------------------------------------------------
   Print: a plain readable transcript
   --------------------------------------------------------------------- */
@media print {
  .sidebar, .composer, .chat-head-actions, .msg-actions,
  .scroll-bottom, .fab, .info-panel, .typing-strip { display: none !important; }

  .shell { grid-template-columns: 1fr; width: auto; transform: none; }
  .message-scroll { overflow: visible; height: auto; }
  .bubble { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .msg-row.is-out .bubble { background: #f0f0f0 !important; color: #000 !important; }
  body { background: #fff; }
}