/*!
 * SML Group Mobile — /groups/{slug} phone polish.
 *
 * The WPCode loader (wpcode/group-mobile.php) adds the viewport meta the group
 * renderer's head is missing — that alone activates the renderer's own
 * @media(max-width:860px) rules (single-column grid, stacked head). This file
 * only adds the phone tier on top: overflow guards, compact hero, swipeable
 * tab pills. Desktop and tablet are untouched.
 *
 * Every selector is prefixed with #sml-group-root: the renderer's own
 * stylesheet is an inline <style> in the BODY (after the root), so a
 * head-loaded sheet loses every equal-specificity tie — the id prefix wins on
 * specificity instead of order.
 */

@media (max-width: 768px) {
  /* nothing inside the group UI may force horizontal scroll */
  #sml-group-root .sml-groups-wrap img,
  #sml-group-root .sml-groups-wrap video,
  #sml-group-root .sml-groups-wrap canvas,
  #sml-group-root .sml-groups-wrap iframe { max-width: 100%; height: auto; }
  #sml-group-root .sml-group-panel,
  #sml-group-root .sml-group-card,
  #sml-group-root .sml-group-post,
  #sml-group-root .sml-group-chat-row { min-width: 0; overflow-wrap: anywhere; }
  #sml-group-root .sml-group-floor-footer input,
  #sml-group-root .sml-group-floor-footer textarea { width: 100%; box-sizing: border-box; }
}

@media (max-width: 480px) {
  body #sml-group-root { padding: 10px 0 44px; }
  #sml-group-root .sml-groups-wrap { padding: 0 10px; }
  #sml-group-root .sml-groups-wrap > h1 { font-size: clamp(26px, 7.5vw, 34px); }

  /* hero: shallower banner, tighter head, smaller icon */
  #sml-group-root .sml-group-hero { border-radius: 10px; }
  #sml-group-root .sml-group-banner { height: 130px; }
  #sml-group-root .sml-group-head {
    grid-template-columns: 60px 1fr;
    gap: 10px;
    padding: 0 12px 12px;
    margin-top: -30px;
  }
  #sml-group-root .sml-group-icon { width: 60px; height: 60px; border-radius: 14px; border-width: 2px; }
  #sml-group-root .sml-group-head h1,
  #sml-group-root .sml-group-head h2 { font-size: 22px; line-height: 1.08; }
  #sml-group-root .sml-group-meta { font-size: 13px; }
  #sml-group-root .sml-group-btn { padding: 11px 14px; font-size: 14px; }

  /* tabs: one swipeable row of pills instead of two wrapped rows */
  #sml-group-root .sml-group-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 12px 0;
    padding-bottom: 2px;
  }
  #sml-group-root .sml-group-tabs::-webkit-scrollbar { display: none; }
  #sml-group-root .sml-group-tabs button { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }

  #sml-group-root .sml-group-grid { gap: 12px; }
  #sml-group-root .sml-group-panel,
  #sml-group-root .sml-group-card,
  #sml-group-root .sml-group-form { padding: 12px; }
  #sml-group-root .sml-group-chat-log { max-height: 56dvh; }
}

/* ------------------------------------------------------------------ phone layer (owner call 2026-09-09)
   html.sml-mobile is stamped before first paint by mu-plugin sml-device-layers. The group shell (Group Shell v11)
   turns its channel sidebar into a 25px-tall strip on phones and clips the 36px channel pills; the conversation
   gets a short fixed box. Give phones a real chat layout. */
html.sml-mobile .sml-gshell__channels {
  height: auto !important;
  min-height: 56px;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px !important;
  padding: 8px 10px 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
html.sml-mobile .sml-gshell__channels::-webkit-scrollbar { display: none; }
html.sml-mobile .sml-gshell__channel {
  flex: 0 0 auto !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  scroll-snap-align: start;
  white-space: nowrap;
}
html.sml-mobile .sml-gshell__category-head { flex: 0 0 auto; }
html.sml-mobile .sml-gshell__conversation { min-height: 58dvh !important; }
html.sml-mobile .sml-gshell__messages { max-height: none !important; }
html.sml-mobile .sml-gshell__composer { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); z-index: 5; }
html.sml-mobile .sml-gshell__composer input,
html.sml-mobile .sml-gshell__composer textarea { font-size: 16px !important; }  /* no iOS zoom-on-focus */
html.sml-mobile .sml-gshell__composer button { min-height: 44px; }
/* the shell's phone grid reserves the first row at ~50vh for a 190px sidebar → a 215px hole above the chat */
html.sml-mobile .sml-gshell { grid-template-rows: auto minmax(0, 1fr) !important; height: auto !important; min-height: 0 !important; }
html.sml-mobile .sml-gshell__side { height: auto !important; }
/* the sidebar head is height-capped by the shell on phones while the market countdown card (.sml-ghx-cd) inside it is taller —
   it spilled over the channel strip and hid the pills. Let the head grow; the strip always sits below it. */
html.sml-mobile .sml-gshell__side-head { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; }
html.sml-mobile .sml-gshell__channels { position: relative; z-index: 2; }
/* measured live 2026-09-09: the sidebar is a flex column capped at max-height:190px by the shell and its head shrinks
   (flex 0 1 auto) to fit — so the countdown card spilled over the strip. Lift the cap and stop the head shrinking. */
html.sml-mobile .sml-gshell__side { max-height: none !important; height: auto !important; }
html.sml-mobile .sml-gshell__side-head { flex: 0 0 auto !important; }

/* ---- channel banner resize by touch (owner call 2026-09-09) ----
   Phones have no hover, so managers see the grip on the banner's bottom edge whenever the channel has a banner;
   it is bigger than the desktop pill and touch-action:none so a finger drag resizes instead of scrolling the page. */
html.sml-mobile .sml-gshell .sml-gshell__main-head > button.sml-cbanner-resize {
  display: flex !important;
  touch-action: none;
  width: 140px !important;
  height: 30px !important;
  bottom: -15px !important;
  border-radius: 999px;
}
html.sml-mobile .sml-gshell .sml-gshell__main-head.sml-cbanner-is-hidden > button.sml-cbanner-resize { display: none !important; }
html.sml-mobile .sml-gshell .sml-cbanner-resize > span { top: 10px !important; width: 44px !important; height: 4px !important; }
html.sml-mobile .sml-gshell .sml-cbanner-resize output { font-size: 12px !important; }
html.sml-mobile body.sml-cbanner-resizing { overflow: hidden; touch-action: none; overscroll-behavior: none; }

/* ---- channel background on phones (owner report 2026-09-12) ----
   The shell positions its Channel Background modal absolute inside .sml-gshell__conversation and
   centres it there. On phones this page-scroll layout makes the conversation as tall as the whole
   message list (13k px measured), so the form was centred ~6,500px below the fold and the Save
   button was unreachable — "the channel background doesn't save". Anchor it to the viewport. */
html.sml-mobile .sml-gshell__channel-watermark-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483100 !important;
  overflow: auto;
  padding: 14px !important;
}
html.sml-mobile .sml-gshell__channel-watermark-modal form {
  max-height: calc(100dvh - 28px);
  overflow: auto;
  width: 100% !important;
}
/* The background layer is kept viewport-sized by js/group-categories.js (SMLMobileBgViewport) so
   background-size:cover and the drag/zoom editor see a phone-sized box, not the whole list. */
html.sml-mobile .sml-gshell__watermark { bottom: auto !important; }