/* Touch devices: comfortable tap targets, no zoom when a field gets focus, and no accidental page-level gestures.
   Everything that depends on how the device is held or pointed is here; layout rules for narrow screens stay in styles.css. */

/* iOS enlarges text after rotating to landscape unless told not to. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* A pull-down on the top of a scroll area would otherwise reload the installed app or rubber-band the whole page. */
body { overscroll-behavior: none; }
.sidebar-body, .side, .modal, .settings-body, .emoji-grid, .popover, .stage-rest { overscroll-behavior: contain; }

/* No 300 ms double-tap-to-zoom delay on controls, and no grey flash when one is tapped. */
button, a, select, label, summary, [role="button"], [data-action] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

@media (pointer: coarse) {
  /* Safari zooms the page when a field under 16px takes focus, so this stays in px whatever the text size setting. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  select, textarea { font-size: 16px; }

  /* "Enter to send" is wrong here: on a touch screen Enter adds a line and the send button sends. */
  .fmt-row .hint { display: none; }

  /* Controls whose visible size is the tap size. */
  .icon-btn { min-width: 40px; min-height: 40px; }
  .ub-btn, .user-stack .ub-btn { width: 40px; height: 40px; }
  .dust-btn, .status-btn { min-height: 40px; }
  .btn.sm, .jump-latest { min-height: 40px; }
  .seg button { min-height: 40px; }
  .popover .item { min-height: 44px; }
  .msg .tools button { min-width: 36px; height: 36px; }
  .emoji-grid button { height: 40px; }
  .swatches button, .swatch { width: 36px; height: 36px; }
  .note-dot { width: 26px; height: 26px; }
  .note-x::before { content: ''; position: absolute; inset: -8px; }
  .tri button { min-height: 40px; }
  .sp-scope button, .sp-sort button { min-height: 40px; }
  .sp-sugg .row { min-height: 44px; }
  .sp-help .recent { min-height: 40px; }
  .composer-row .icon-btn { width: 40px; height: 40px; margin-bottom: 3px; }

  /* Small controls keep their look; an invisible layer around them makes up the missing tap area. */
  .brand-tile, .cat-head .add, .cat-head .toggle, .channel .edit, .fmt-row button, .reaction,
  .whisper-btn, .help-btn, .link-btn, .msg .meta .author, .chan-icon, #toJoin, button[data-action="pin"] { position: relative; }
  .brand-tile::before { content: ''; position: absolute; inset: -3px; }
  .tab-close::before { content: ''; position: absolute; inset: -9px; }
  .cat-head .add::before, .channel .edit::before { content: ''; position: absolute; inset: -8px; }
  .cat-head .toggle::before { content: ''; position: absolute; inset: -12px 0; }
  .fmt-row button::before { content: ''; position: absolute; inset: -8px -1px; }
  .reaction::before { content: ''; position: absolute; inset: -8px -2px; }
  .whisper-btn::before { content: ''; position: absolute; inset: -9px; }
  .help-btn::before { content: ''; position: absolute; inset: -5px; }
  .link-btn::before, #toJoin::before, button[data-action="pin"]::before { content: ''; position: absolute; inset: -12px -4px; }
  .msg .meta .author::before { content: ''; position: absolute; inset: -11px -4px; }
  .chan-icon::before { content: ''; position: absolute; inset: -3px; }
  .sp-chip button { position: relative; }
  .sp-chip button::before, .sp-clear::before { content: ''; position: absolute; inset: -10px; }
}

/* One-time tip above the message box (touch-hint.js). Only touch-first devices ever get the element. */
.msg-hint {
  position: absolute; left: 50%; translate: -50% 0; bottom: calc(100% + 8px); z-index: 4; max-width: calc(100% - 24px);
  padding: 9px 16px; border-radius: 99px; background: var(--raised-2); color: var(--text); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow); font-size: 0.84375rem; font-weight: 600; white-space: nowrap; animation: fade .2s ease-out; pointer-events: none;
}

/* Floating call bubble (call-bubble.js). Phones only; wider screens keep the call bar and top bar controls.
   z-index 38 puts it over the channel list drawer (36) and under dialogs (40), menus (50) and toasts (80). */
.call-bubble {
  position: fixed; left: 0; top: 0; z-index: 38; display: flex; align-items: center; gap: 6px; user-select: none; -webkit-user-select: none;
}
.call-bubble[hidden] { display: none; }
.call-bubble:not(.on-left) { flex-direction: row-reverse; }
.call-bubble.snapping { transition: transform .22s cubic-bezier(.2, .8, .3, 1); }
.call-bubble.dragging .cb-main { transform: scale(1.08); box-shadow: 0 14px 34px rgba(2, 5, 15, .6); }
@media (min-width: 761px) and (hover: hover), (min-width: 761px) and (min-height: 501px), (min-width: 1001px) { .call-bubble { display: none !important; } }
.cb-probe {
  position: absolute; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.cb-main {
  position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%; padding: 0; touch-action: none;
  background: var(--raised-2); border: 2px solid var(--line-strong); box-shadow: 0 8px 22px rgba(2, 5, 15, .5);
  transition: transform .12s, box-shadow .12s;
}
.cb-face { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.cb-face .avatar { width: 100%; height: 100%; border-radius: 50%; font-size: 1.25rem; }
.cb-face .avatar.has-img > img { border-radius: 50%; }
.cb-icon { display: grid; place-items: center; width: 100%; height: 100%; color: var(--online); }
.call-bubble.speaking .cb-main { border-color: var(--online); box-shadow: 0 0 0 3px var(--online), 0 8px 22px rgba(2, 5, 15, .5); }
.cb-off {
  position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; display: none; place-items: center; border-radius: 50%;
  background: var(--danger); color: #fff; border: 2px solid var(--panel);
}
.call-bubble.muted .cb-off { display: grid; }
.cb-chev {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--soft);
  background: var(--raised); border: 1px solid var(--line-strong); box-shadow: 0 4px 12px rgba(2, 5, 15, .4); position: relative;
}
.cb-chev::before { content: ''; position: absolute; inset: -8px; }
.cb-chev svg { transition: rotate .15s; }
.call-bubble.on-left .cb-chev svg { rotate: -90deg; }
.call-bubble:not(.on-left) .cb-chev svg { rotate: 90deg; }
.call-bubble.open .cb-chev svg { rotate: 0deg; }
.cb-panel {
  display: none; align-items: center; gap: 4px; padding: 4px 6px 4px 14px; max-width: calc(100vw - 150px);
  background: var(--raised-2); border: 1px solid var(--line-strong); border-radius: 99px; box-shadow: var(--shadow);
}
.call-bubble.open .cb-panel { display: flex; }
.cb-name { font-size: 0.8125rem; font-weight: 700; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-actions { display: flex; gap: 2px; flex: none; }
.cb-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.cb-btn.off { color: var(--danger); }
.cb-btn.leave { background: var(--danger-strong); color: #fff; }
@media (prefers-reduced-motion: reduce) { :root:not([data-motion="full"]) .call-bubble.snapping, :root:not([data-motion="full"]) .cb-main { transition: none; } }
.cb-main { order: 1; }
.cb-chev { order: 2; }
.cb-panel { order: 3; }