/* ==========================================================================
   Responsive — desktop first, tablet collapses, mobile becomes two screens
   ========================================================================== */

/* -------- Large desktop: give the conversation more air -------- */
@media (min-width: 1440px) {
  :root { --sidebar-w: 380px; --info-w: 360px; }
}

/* -------- Tablet / small laptop -------- */
@media (max-width: 1180px) and (min-width: 769px) {
  :root { --sidebar-w: 312px; }
  .app, .app.has-info { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .app.sb-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
  .app.sb-collapsed .sidebar { visibility: hidden; }
  .ch .ch__sbtoggle { display: grid; margin-left: -6px; }

  .info {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 30;
    width: var(--info-w); box-shadow: var(--sh-3);
    transform: translateX(100%);
    transition: transform var(--motion-smooth) var(--ease-emphasized);
  }
  .app.has-info .info { transform: none; }
}

/* -------- Mobile: list and chat are separate screens -------- */
@media (max-width: 768px) {
  :root { --header-h: 58px; --fs-base: 15px; }

  .app, .app.has-info { display: block; }
  .sidebar, .chat, .info {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    transition: transform var(--motion-slow) var(--ease-emphasized), opacity var(--motion-slow) var(--ease-standard);
  }
  .app.is-dragging .sidebar, .app.is-dragging .chat { will-change: transform; }
  .sidebar { border-right: 0; z-index: 1; }
  .chat { z-index: 2; transform: translateX(100%); }
  .app[data-view="chat"] .chat { transform: none; box-shadow: -10px 0 30px rgba(0,0,0,.06); }
  .app[data-view="chat"] .sidebar { transform: translateX(-28%); opacity: .6; pointer-events: none; }
  .info { z-index: 5; border-left: 0; transform: translateX(100%); }
  .app.has-info .info { transform: none; }
  .info__body { width: 100%; }
  .app.is-dragging .chat, .app.is-dragging .sidebar { transition: none; }

  .ch { padding-left: var(--s2); gap: var(--s2); }
  .ch .ch__back { display: grid; margin-left: 0; }
  .ch__id .avatar { width: 36px; height: 36px; }
  .ch__name { font-size: 15.5px; }
  .ch__actions .hide-sm { display: none; }

  .msgs__inner { padding: 0 10px; }
  .bwrap { max-width: 84%; }
  .row__avatar { width: 28px; }
  .row__avatar .avatar { width: 28px; height: 28px; }
  .unread-sep { margin-left: -10px; margin-right: -10px; }
  .tools { display: none; }
  .bubble { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .bubble a { -webkit-touch-callout: default; }

  .composer { padding-left: 10px; padding-right: 10px; padding-bottom: calc(8px + var(--safe-b)); }
  .composer__inner { padding: 8px 8px 9px; }
  .composer__row { gap: 6px; }
  .composer__quick { padding-left: 2px; padding-bottom: 7px; }
  .cfield { min-height: 40px; }
  .cfield textarea { padding: 9px 40px 9px 14px; height: 40px; }
  .cbtn, .send { width: 40px; height: 40px; }
  .reply-card { margin-left: 4px; margin-right: 4px; }
  .cbtn { width: 40px; height: 40px; }
  .cfield textarea { font-size: 16px; } /* prevents iOS zoom */
  .ch { flex-wrap: wrap; height: auto; min-height: calc(var(--header-h) + var(--safe-t)); padding-bottom: 8px; }
  .ch__chips { width: 100%; margin-top: 2px; padding-left: 40px; }

  .presence { bottom: 8px; max-width: calc(100% - 90px); }
  .fab { right: 12px; bottom: 8px; }
  .msgs { padding-bottom: 28px; scroll-padding-bottom: 120px; }

  .sb__top { padding-left: var(--s4); }
  .sb__ctas { padding: 0 var(--s3) var(--s3); }
  .sb__search, .sb__filters { padding-left: var(--s3); padding-right: var(--s3); }
  .sb__list { padding-left: 4px; padding-right: 4px; }
  .ci { padding: 10px; border-radius: var(--r-md); }
  .ci.is-active { background: transparent; }
  .ci.is-active::before { display: none; }
  .ci:active { background: var(--surface-2); }
  .field input { font-size: 16px; }

  /* Modals become bottom sheets */
  .modal, .modal--lg, .modal--sm {
    left: 0; right: 0; top: auto; bottom: 0;
    width: 100%; height: auto;
    max-height: calc(var(--app-h) - 24px - var(--safe-t));
    border-radius: 26px 26px 0 0;
    transform: translateY(100%);
    transition: transform var(--motion-slow) var(--ease-emphasized), opacity var(--motion-normal);
    opacity: 1;
  }
  .modal--lg { height: calc(var(--app-h) - 12px - var(--safe-t)); }
  .modal.is-on { transform: translateY(var(--drag, 0px)); }
  .modal.is-dragging { transition: none; }
  .modal__grip { display: block; position: absolute; top: 0; left: 0; right: 0; height: 22px; z-index: 1; touch-action: none; }
  .modal__grip::after { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--line-2); }
  .modal__head { padding: 22px var(--s4) var(--s2) var(--s5); }
  .modal__body { padding-left: var(--s5); padding-right: var(--s5); }
  .modal__foot { padding-left: var(--s4); padding-right: var(--s4); }
  .modal__foot .btn { flex: 1; }
  .modal__foot .spacer, .modal__foot .hint { display: none; }
  .input, .textarea, .hex { font-size: 16px; }

  /* Action sheet for message long-press */
  .pop.pop--sheet {
    left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + var(--safe-b));
    width: auto; border-radius: 26px;
    transform: translateY(24px); opacity: 0;
  }
  .pop.pop--sheet.is-on { transform: none; opacity: 1; }
  .pop--sheet .menu button { height: 48px; font-size: var(--fs-lg); }
  .pop--sheet .rxbar { justify-content: space-between; padding: 10px 10px 6px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .pop--sheet .rxbar button { width: 44px; height: 44px; font-size: 27px; }
  .pop--sheet .emoji { width: 100%; max-width: none; }
  .pop--sheet .emoji__grid { grid-template-columns: repeat(8, 1fr); height: 280px; }
  .pop--sheet .cpick { width: 100%; max-width: none; }
  .pop--sheet .cpick__list { max-height: 50vh; }
  .sheet-preview { padding: 14px 16px 8px; font-size: var(--fs-sm); color: var(--text-3); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Wizard */
  .wiz__steps { padding: 0 var(--s5) var(--s3); }
  .wiz__step span { display: none; }
  .wiz__step.is-on span { display: inline; }
  .guide { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat--wide { grid-column: span 2; }
  .map { grid-template-columns: 1fr auto; grid-template-areas: "wa mid" "target target" "sugs sugs"; row-gap: 10px; }
  .map__wa { grid-area: wa; }
  .map__mid { grid-area: mid; flex-direction: row; }
  .map__target { grid-area: target; }
  .map .seg button { padding: 0 9px; }
  .map .seg button span { display: none; }
  .filter-grid, .summary-grid { grid-template-columns: 1fr; }
  .sample-box { flex-direction: column; align-items: stretch; }
  .sample-box__actions { justify-content: stretch; }
  .sample-box__actions .btn { flex: 1; }
  .kv { grid-template-columns: 110px 1fr; }
  .color-row { flex-wrap: wrap; }
  .color-row__label { width: 100%; }
  .toasts { bottom: calc(108px + var(--safe-b)); }
}

@media (max-width: 380px) {
  .sb__ctas .btn span { display: none; }
}

@media (hover: none) {
  .ci:hover, .ibtn:hover, .btn--ghost:hover { background: transparent; }
  .rx:hover, .rxbar button:hover, .emoji__grid button:hover, .swatch:hover, .theme-card:hover { transform: none; }
}