/* Phone chrome. One gutter, one rail, one tap floor, step type only.
   DESIGN_MATH §5 + token bible: equal gutters, one left rail, equal siblings,
   stack parity, glyphs on the space scale. Derived extents live on :root so a
   late m-mobile class cannot leave the desktop-width drawer on the glass.
   Zero design literals. */

:root {
  --rq-gutter-inline: max(var(--sp2), env(safe-area-inset-left), env(safe-area-inset-right));
  --rq-gutter-block-start: max(var(--sp2), env(safe-area-inset-top));
  --rq-gutter-block-end: max(var(--sp3), env(safe-area-inset-bottom));
  --rq-sheet-max: calc(100dvh - var(--sp-tap));
  --rq-glyph: var(--sp2);
}

body:is(.m-mobile, .m-touch) {
  --rq-gutter-inline: max(var(--sp2), env(safe-area-inset-left), env(safe-area-inset-right));
  --rq-gutter-block-start: max(var(--sp2), env(safe-area-inset-top));
  --rq-gutter-block-end: max(var(--sp3), env(safe-area-inset-bottom));
  --rq-sheet-max: calc(100dvh - var(--sp-tap));
  --rq-glyph: var(--sp2);
}

/* ── one sheet recipe: full bleed, content on the rail ── */
body:is(.m-mobile, .m-touch) .chatmenu,
body:is(.m-mobile, .m-touch) .modelmenu,
body:is(.m-mobile, .m-touch) .createmenu,
body:is(.m-mobile, .m-touch) .toolsmenu,
body:is(.m-mobile, .m-touch) .attachmenu,
body:is(.m-mobile, .m-touch) .retrymenu,
body:is(.m-mobile, .m-touch) #acctmenu.open,
body:is(.m-mobile, .m-touch) #acctBarMenu,
body:is(.m-mobile, .m-touch) #atMenu.open,
body:is(.m-mobile, .m-touch) .setcard,
body:is(.m-mobile, .m-touch) #auth .authcard,
body:is(.m-mobile, .m-touch) #adminhub .ahcard,
body:is(.m-mobile, .m-touch) .kbdhelp .kbx,
body:is(.m-mobile, .m-touch) #projov .setcard,
body:is(.m-mobile, .m-touch) #joinScreen .card {
  position: fixed;
  left: 0;
  right: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: var(--rq-sheet-max);
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0;
  padding: var(--rq-gutter-block-start) var(--rq-gutter-inline) var(--rq-gutter-block-end);
  border-left: 0;
  border-right: 0;
  transform: none;
  z-index: var(--z-header);
}

body:is(.m-mobile, .m-touch) .chatmenu,
body:is(.m-mobile, .m-touch) .modelmenu,
body:is(.m-mobile, .m-touch) .createmenu,
body:is(.m-mobile, .m-touch) .toolsmenu,
body:is(.m-mobile, .m-touch) .attachmenu,
body:is(.m-mobile, .m-touch) .retrymenu,
body:is(.m-mobile, .m-touch) #acctmenu.open,
body:is(.m-mobile, .m-touch) #acctBarMenu,
body:is(.m-mobile, .m-touch) #atMenu.open,
body:is(.m-mobile, .m-touch) .setcard,
body:is(.m-mobile, .m-touch) #auth .authcard,
body:is(.m-mobile, .m-touch) #adminhub .ahcard,
body:is(.m-mobile, .m-touch) .kbdhelp .kbx,
body:is(.m-mobile, .m-touch) #projov .setcard,
body:is(.m-mobile, .m-touch) #joinScreen .card {
  top: auto;
  bottom: 0;
}

/* top sheets: same recipe, mirrored */
body:is(.m-mobile, .m-touch) #incomingCall,
body:is(.m-mobile, .m-touch) #inviteInbox,
body:is(.m-mobile, .m-touch) #toastHost {
  position: fixed;
}

body:is(.m-mobile, .m-touch) #alertsOptIn,
body:is(.m-mobile, .m-touch) #incomingCall,
body:is(.m-mobile, .m-touch) #inviteInbox,
body:is(.m-mobile, .m-touch) #toastHost {
  left: 0;
  right: 0;
  top: 0;
  bottom: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  padding: var(--rq-gutter-block-start) var(--rq-gutter-inline) var(--sp2);
  transform: none;
  z-index: var(--z-header);
}

/* An open collaboration paints the strip at 55, its sheet at 56, the room at 60
   and the join screen at 62. A call left on the header layer is underneath, so
   Accept video never receives the tap and the caller keeps offering. History
   (95) and toasts (90) stay above the card. */
body:is(.m-mobile, .m-touch) #incomingCall {
  z-index: calc(var(--z-header) + var(--z-menu));
}

body:is(.m-mobile, .m-touch) #alertsOptIn {
  position: sticky;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp1);
}

body:is(.m-mobile, .m-touch) #alertsOptIn .ao-t,
body:is(.m-mobile, .m-touch) #alertsOptIn .ao-actions {
  flex: 1 1 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp1);
}

body:is(.m-mobile, .m-touch) #alertsOptIn .ao-sub {
  color: var(--ink);
  font-size: var(--fs-step--2);
}

/* ── equal siblings: every control is --sp-tap × full rail, step −1 ── */
body:is(.m-mobile, .m-touch) .chatmenu button,
body:is(.m-mobile, .m-touch) .modelmenu button,
body:is(.m-mobile, .m-touch) .createmenu button,
body:is(.m-mobile, .m-touch) .toolsmenu button,
body:is(.m-mobile, .m-touch) .attachmenu button,
body:is(.m-mobile, .m-touch) .retrymenu button,
body:is(.m-mobile, .m-touch) #acctmenu button,
body:is(.m-mobile, .m-touch) #acctBarMenu button,
body:is(.m-mobile, .m-touch) #atMenu .opt,
body:is(.m-mobile, .m-touch) #alertsOptIn button,
body:is(.m-mobile, .m-touch) #incomingCall .ic-row button,
body:is(.m-mobile, .m-touch) #roomShare.rq-card a,
body:is(.m-mobile, .m-touch) #roomShare.rq-card button,
body:is(.m-mobile, .m-touch) #inviteInbox .inv-join,
body:is(.m-mobile, .m-touch) #inviteInbox .inv-no,
body:is(.m-mobile, .m-touch) #peopleActions .pa-acts a,
body:is(.m-mobile, .m-touch) #peopleActions .pa-acts button,
body:is(.m-mobile, .m-touch) #joinNow,
body:is(.m-mobile, .m-touch) .sethead .setbtn,
body:is(.m-mobile, .m-touch) .setsave,
body:is(.m-mobile, .m-touch) .setbtn,
body:is(.m-mobile, .m-touch) #adminhub .ahx,
body:is(.m-mobile, .m-touch) #adminhub a.fn,
body:is(.m-mobile, .m-touch) #adminhub button.fn,
body:is(.m-mobile, .m-touch) #cvhead .cvbtn {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--sp-tap);
  min-width: var(--sp-tap);
  height: auto;
  justify-content: flex-start;
  font-size: var(--fs-step--1);
}

body:is(.m-mobile, .m-touch) #incomingCall .ic-row {
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp1);
}

body:is(.m-mobile, .m-touch) #incomingCall .ic-row button {
  justify-content: center;
}

/* The mic/video glyphs have a viewBox and no width. In a full-width flex button they
   stretch to the rail and the answer control becomes a tall block. The glyph stays one step. */
body:is(.m-mobile, .m-touch) #incomingCall .ic-row button svg {
  width: var(--sp2);
  height: var(--sp2);
  flex: none;
}

/* ── drawer: one full-bleed sheet. A half-width overlay leaves a slit; the
   thread then wraps mid-word and the follow-ups sit in the gap. ── */
body:is(.m-mobile, .m-touch) #side,
body:is(.m-mobile, .m-touch) #side.open {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--chat-bar-h, var(--sp-tap));
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  box-sizing: border-box;
  padding: var(--rq-gutter-block-start) var(--rq-gutter-inline) var(--rq-gutter-block-end);
}

body:is(.m-mobile, .m-touch) #scrim.show {
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--chat-bar-h, var(--sp-tap));
}

body:is(.m-mobile, .m-touch) #side:has(#acctmenu.open) {
  overflow: visible;
}

body:is(.m-mobile, .m-touch) #sidescroll {
  min-height: 0;
}

body:is(.m-mobile, .m-touch) #side .newbtn {
  margin-left: 0;
  margin-right: 0;
}

body:is(.m-mobile, .m-touch) #side .newbtn,
body:is(.m-mobile, .m-touch) #side .ci-show,
body:is(.m-mobile, .m-touch) #side .acctpill,
body:is(.m-mobile, .m-touch) #hist .h,
body:is(.m-mobile, .m-touch) #hist .collab-start,
body:is(.m-mobile, .m-touch) #hist .collab-f,
body:is(.m-mobile, .m-touch) .goal-item,
body:is(.m-mobile, .m-touch) #drawerClose,
body:is(.m-mobile, .m-touch) #hist .h .hbtn,
body:is(.m-mobile, .m-touch) #histSearch,
body:is(.m-mobile, .m-touch) #goalNewIn,
body:is(.m-mobile, .m-touch) #goalNew button,
body:is(.m-mobile, .m-touch) .side-foot .ec-copy a {
  min-height: var(--sp-tap);
  min-width: var(--sp-tap);
  box-sizing: border-box;
}

body:is(.m-mobile, .m-touch) #hist .h .hact {
  position: static;
  transform: none;
  opacity: 1;
  flex: 0 0 auto;
}

body:is(.m-mobile, .m-touch) #hist .h .ht {
  padding-right: 0;
}

body:is(.m-mobile, .m-touch) #hist .h .hbtn,
body:is(.m-mobile, .m-touch) #histSearch,
body:is(.m-mobile, .m-touch) #goalNewIn,
body:is(.m-mobile, .m-touch) #goalNew button {
  width: auto;
  height: auto;
}

body:is(.m-mobile, .m-touch) .side-foot .ec-copy a {
  display: inline-flex;
  align-items: center;
}

/* ── modal hosts: no extra inset; the card is the sheet ── */
body:is(.m-mobile, .m-touch) #settings,
body:is(.m-mobile, .m-touch) #agents,
body:is(.m-mobile, .m-touch) #auth,
body:is(.m-mobile, .m-touch) #myemails,
body:is(.m-mobile, .m-touch) #projov,
body:is(.m-mobile, .m-touch) #adminhub,
body:is(.m-mobile, .m-touch) .kbdhelp,
body:is(.m-mobile, .m-touch) #joinScreen {
  padding: 0;
  align-items: stretch;
  justify-content: flex-end;
}

body:is(.m-mobile, .m-touch) .sethead,
body:is(.m-mobile, .m-touch) .setbody,
body:is(.m-mobile, .m-touch) #adminhub .ahhead,
body:is(.m-mobile, .m-touch) #adminhub .ahbody,
body:is(.m-mobile, .m-touch) #inviteInbox .inv-card {
  padding: 0;
}

body:is(.m-mobile, .m-touch) .sethead,
body:is(.m-mobile, .m-touch) #adminhub .ahhead {
  flex-wrap: wrap;
  row-gap: var(--sp1);
}

body:is(.m-mobile, .m-touch) .sethead .ttl {
  flex: 1 1 auto;
  min-width: 0;
}

body:is(.m-mobile, .m-touch) .setin,
body:is(.m-mobile, .m-touch) .setsel,
body:is(.m-mobile, .m-touch) .setta {
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
  min-height: var(--sp-tap);
  box-sizing: border-box;
  font-size: var(--fs-step--1);
}

body:is(.m-mobile, .m-touch) .setrow {
  flex-wrap: wrap;
}

body:is(.m-mobile, .m-touch) #roomStrip .rs-qbtn,
body:is(.m-mobile, .m-touch) #roomStrip .rs-actions button,
body:is(.m-mobile, .m-touch) #roomStrip .rp-call {
  height: auto;
  min-height: var(--sp-tap);
  min-width: var(--sp-tap);
  font-size: var(--fs-step--1);
}

body:is(.m-mobile, .m-touch) #roomStrip .rs-actions,
body:is(.m-mobile, .m-touch) #roomStrip .rs-head {
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  gap: var(--sp1);
}

body:is(.m-mobile, .m-touch) #roomShare.rq-card {
  position: relative;
  z-index: var(--z-header);
}

body:is(.m-mobile, .m-touch) #voiceov .vclose {
  top: var(--rq-gutter-block-start);
  right: var(--rq-gutter-inline);
  width: var(--sp-tap);
  height: var(--sp-tap);
  min-width: var(--sp-tap);
  min-height: var(--sp-tap);
}

body:is(.m-mobile, .m-touch) #canvas.open,
body:is(.m-mobile, .m-touch) #ctxpanel.open {
  inset: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: var(--rq-gutter-block-start) var(--rq-gutter-inline) var(--rq-gutter-block-end);
}

/* Follow-ups and in-call: same rail, same tap floor, tracking none so words stay spaced. */
body:is(.m-mobile, .m-touch) .followups,
body:is(.m-mobile, .m-touch) #roomExit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp1);
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--rq-gutter-inline);
}

body:is(.m-mobile, .m-touch) .followups .fu,
body:is(.m-mobile, .m-touch) #hist .collab-start,
body:is(.m-mobile, .m-touch) #roomExit button,
body:is(.m-mobile, .m-touch) #roomExit .rx-voice,
body:is(.m-mobile, .m-touch) #rxSharePick button {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--sp-tap);
  min-width: var(--sp-tap);
  height: auto;
  font-size: var(--fs-step--1);
  letter-spacing: var(--tr-none);
  word-spacing: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

body:is(.m-mobile, .m-touch) .rx-ico,
body:is(.m-mobile, .m-touch) .rx-ico svg,
body:is(.m-mobile, .m-touch) .chip-ic,
body:is(.m-mobile, .m-touch) .chip-ic svg,
body:is(.m-mobile, .m-touch) .ic {
  width: var(--rq-glyph);
  height: var(--rq-glyph);
}

/* 56rem = the DESIGN_MATH phone breakpoint. Works even if m-mobile is late. */
@media (max-width: 56rem) {
  #side.open {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--chat-bar-h, var(--sp-tap));
    width: auto;
    max-width: none;
    height: auto;
    max-height: none;
    box-sizing: border-box;
    padding: var(--rq-gutter-block-start) var(--rq-gutter-inline) var(--rq-gutter-block-end);
  }

  #scrim.show {
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--chat-bar-h, var(--sp-tap));
  }
}