/* Phone controls (lane 37). Rules are scoped to body.touch-controls or (pointer:coarse) so mouse/keyboard play is unchanged. */
body.touch-controls #canvas-container, body.touch-controls canvas { touch-action: none; -webkit-touch-callout: none; }
body.touch-controls { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body.touch-controls input, body.touch-controls textarea, body.touch-controls [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
#touch-context { position: fixed; right: max(12px, var(--safe-right, 0px)); bottom: calc(max(84px, var(--safe-bottom, 0px) + 78px)); z-index: 22; display: none; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
body.touch-controls #touch-context { display: flex; }
.touch-ctx-btn { pointer-events: auto; min-width: 56px; min-height: 56px; padding: 6px 10px; border-radius: 28px; border: 2px solid rgba(255,255,255,.55); background: rgba(24,41,56,.92); color: #fff; font: 700 13px system-ui, sans-serif; touch-action: none; -webkit-user-select: none; user-select: none; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.touch-ctx-btn[hidden] { display: none; }
.touch-ctx-btn[aria-pressed="true"] { background: #2f7d4f; }
#touch-menu-toggle { position: fixed; right: max(8px, var(--safe-right, 0px)); top: 46%; z-index: 22; width: 48px; height: 48px; min-width: 44px; min-height: 44px; border-radius: 24px; border: 1px solid rgba(255,255,255,.5); background: rgba(24,41,56,.85); color: #fff; font: 700 24px/1 system-ui, sans-serif; display: none; touch-action: manipulation; }
body.touch-controls #touch-menu-toggle { display: block; }
#touch-menu { position: fixed; right: max(64px, calc(var(--safe-right, 0px) + 60px)); top: 8vh; max-height: 78vh; width: min(260px, calc(100vw - 84px)); overflow-y: auto; z-index: 10020; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; background: rgba(16,36,59,.96); border: 1px solid #6ca6b9; border-radius: 12px; touch-action: pan-y; }
#touch-menu[hidden] { display: none; }
.touch-menu-item { min-width: 44px; min-height: 44px; padding: 4px 6px; border-radius: 8px; border: 1px solid #6ca6b9; background: #182938; color: #fff; font: 600 12px system-ui, sans-serif; touch-action: manipulation; }
/* The legacy always-on Unload/Drop buttons are replaced by the context buttons on touch devices. */
body.touch-controls #unload-hold-btn, body.touch-controls #btn-touch-drop { display: none !important; }
@media (pointer: coarse) {
  .action-slot, #actionbar-side button, .actionbar-page { min-width: 44px !important; min-height: 44px !important; }
  .action-slot { width: 44px !important; height: 44px !important; }
}

/* ---- Lane 120: touch HUD layout (phones, tablets). Everything is scoped to body.touch-controls so mouse and keyboard play is unchanged.
   Selectors start with `html body.touch-controls` so they out-rank the older !important HUD rules in style.css / wowbars.css / wowframes.css.
   Bottom stack, bottom to top: action bar, micro menu, then a "reach row" (joystick left, zoom row, context buttons + the all-actions toggle right). ---- */
html body.touch-controls { --tc-pad-l: max(8px, var(--safe-left, 0px)); --tc-pad-r: max(8px, var(--safe-right, 0px)); --tc-pad-b: max(12px, var(--safe-bottom, 0px)); --tc-bar-h: 60px; --tc-micro-bottom: calc(var(--tc-pad-b) + var(--tc-bar-h) + 8px); --tc-micro-h: 104px; --tc-actions-h: 0px; --tc-reach: calc(var(--tc-micro-bottom) + var(--tc-micro-h) + var(--tc-actions-h) + 8px); }
@media (min-width: 624px) { html body.touch-controls { --tc-micro-h: 54px; } }
/* Every touch control is at least 44 x 44 CSS px. */
html body.touch-controls #micro-menu > button, html body.touch-controls #micro-menu .micro-bag-button, html body.touch-controls #micro-menu .micro-bag-button:first-child,
html body.touch-controls .mmo-mini-tool, html body.touch-controls .mmo-mini-calendar, html body.touch-controls .btn-zoom, html body.touch-controls .mmo-mini-zoom .btn-zoom,
html body.touch-controls .touch-menu-item, html body.touch-controls #chat-panel button, html body.touch-controls .actionbar-page, html body.touch-controls #actionbar-touch-menu button { box-sizing: border-box !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; flex: 0 0 44px !important; touch-action: manipulation !important; }
html body.touch-controls .touch-menu-item { width: auto !important; flex: 1 1 auto !important; }
html body.touch-controls #chat-panel input { min-height: 44px !important; box-sizing: border-box !important; font-size: 16px !important; } /* 16px stops iOS zooming the page on focus */
/* Micro menu: wraps instead of running off the screen, centred above the action bar. */
html body.touch-controls #micro-menu { left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; bottom: var(--tc-micro-bottom) !important; transform: none !important; flex-wrap: wrap !important; justify-content: center !important; gap: 2px !important; width: max-content !important; max-width: calc(100vw - var(--tc-pad-l) - var(--tc-pad-r)) !important; box-sizing: border-box !important; z-index: 21 !important; }
html body.touch-controls #micro-menu { height: auto !important; min-height: 0 !important; padding: 3px !important; overflow: visible !important; }
html body.touch-controls #micro-menu .micro-menu-bags, html body.touch-controls #micro-menu .micro-menu-bag { position: static !important; right: auto !important; bottom: auto !important; margin: 0 !important; display: flex !important; flex-direction: row !important; gap: 2px !important; height: 44px !important; width: auto !important; }
html body.touch-controls #micro-menu-more { bottom: calc(var(--tc-micro-bottom) + var(--tc-micro-h)) !important; }
/* Minimap: tools wrap in a right-aligned row and the map filter strip (12 px wide toggles) is left to the full map. */
html body.touch-controls #mmo-minimap .wmu-mini-controls { display: none !important; }
html body.touch-controls #mmo-minimap .mmo-mini-tools { flex-wrap: nowrap !important; justify-content: flex-end !important; width: max-content !important; justify-self: end !important; gap: 4px !important; }
html body.touch-controls #mmo-minimap { grid-template-columns: minmax(0, 1fr) !important; }
html body.touch-controls #mmo-minimap .mmo-mini-calendar { position: absolute !important; left: -48px !important; top: 34px !important; right: auto !important; bottom: auto !important; }
/* Zoom row sits above the joystick, off the minimap, fully inside the screen. */
html body.touch-controls #zoom-controls { position: fixed !important; left: var(--tc-pad-l) !important; bottom: calc(var(--tc-reach) + 116px + 8px) !important; top: auto !important; right: auto !important; flex-direction: row !important; gap: 4px !important; z-index: 21 !important; }
/* Joystick above the micro menu in portrait; beside the action bar in landscape. */
html body.touch-controls #joystick-zone { left: var(--tc-pad-l) !important; bottom: var(--tc-reach) !important; top: auto !important; z-index: 21 !important; }
/* Context buttons (2 columns) and the all-actions toggle share the right-hand reach row. */
html body.touch-controls #touch-context { right: calc(var(--tc-pad-r) + 52px) !important; bottom: var(--tc-reach) !important; flex-direction: row !important; flex-wrap: wrap-reverse !important; width: 124px !important; min-height: 118px !important; align-content: flex-start !important; justify-content: flex-end !important; gap: 6px !important; }
html body.touch-controls #touch-menu-toggle { right: var(--tc-pad-r) !important; top: auto !important; bottom: var(--tc-reach) !important; width: 44px !important; height: 44px !important; z-index: 22 !important; }
/* Landscape phones: little height, so the stack collapses next to the bar instead of above it. */
@media (orientation: landscape) and (max-height: 520px) {
  html body.touch-controls { --tc-micro-bottom: calc(var(--tc-pad-b) + var(--tc-bar-h) + 8px); --tc-micro-h: 54px; --tc-reach: var(--tc-pad-b); }
  html body.touch-controls #micro-menu { width: 0 !important; height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
  html body.touch-controls #micro-menu > button, html body.touch-controls #micro-menu .micro-menu-bags, html body.touch-controls #micro-menu .micro-menu-bag { display: none !important; } /* every action stays reachable through the all-actions menu */
  html body.touch-controls { --tc-actions-h: 0px; }
  html body.touch-controls #zoom-controls { bottom: calc(var(--tc-reach) + 116px + 8px) !important; }
  html body.touch-controls #chat-panel:not(.open) { display: none !important; }
  /* Lane 370: a landscape phone opens the chat from the all-actions menu in the free top strip between the player frame and the minimap (clear of the stick, the bar, the touch buttons and the weapon row). */
  html body.touch-controls #chat-panel.open { display: block !important; left: 270px !important; top: 8px !important; bottom: auto !important; width: min(360px, max(240px, calc(100vw - 540px))) !important; height: min(40vh, 150px) !important; max-height: min(40vh, 150px) !important; }
  html body.touch-controls #action-bar > .action-slot:nth-of-type(n+7), html body.touch-controls #action-bar > .actionbar-pages, html body.touch-controls .msh-currency-strip, html body.touch-controls .quest-tracker { display: none !important; } /* 6 slots like portrait phones; tracker and coins live in the quest log and bags here */
  html body.touch-controls #touch-context { bottom: var(--tc-reach) !important; right: calc(var(--tc-pad-r) + 52px) !important; width: 102px !important; min-height: 102px !important; }
  html body.touch-controls .touch-ctx-btn { min-width: 48px !important; min-height: 48px !important; width: 48px !important; padding: 2px !important; }
}
/* Touch action row (Fight, Auto, Bags, Pallet, Stable, Ride, weapons; tablets) sits above the micro menu instead of on top of the skill slots. */
html body.touch-controls #actionbar-touch-menu { position: fixed !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; bottom: calc(var(--tc-micro-bottom) + var(--tc-micro-h) + 4px) !important; width: max-content !important; max-width: calc(100vw - var(--tc-pad-l) - var(--tc-pad-r)) !important; justify-content: center !important; z-index: 21 !important; }
/* Rewards pill sits above the zoom row; the chat (hud-layout.js) stacks above it. */
html body.touch-controls #account-rewards-panel { left: var(--tc-pad-l) !important; right: auto !important; top: auto !important; bottom: calc(var(--tc-reach) + 116px + 8px + 44px + 8px) !important; }
html body.touch-controls #account-rewards-panel button { min-height: 44px !important; min-width: 44px !important; }
/* Cargo pill (a child of the micro menu) joins the left column above the rewards pill; landscape phones put it above the action bar. */
html body.touch-controls #micro-menu #cargo-floating-pill { position: fixed !important; left: var(--tc-pad-l) !important; right: auto !important; top: auto !important; bottom: calc(var(--tc-reach) + 116px + 8px + 44px + 8px + 44px + 8px) !important; width: max-content !important; max-width: 160px !important; z-index: 21 !important; }
html body.touch-controls #micro-menu-more button { min-height: 44px !important; min-width: 44px !important; }
html body.touch-controls .msh-window-close, html body.touch-controls .msh-dialog button, html body.touch-controls #msh-game-menu button, html body.touch-controls .micro-more-close { min-height: 44px !important; min-width: 44px !important; }
/* Page zoom and scroll never fight the game: pinch zoom is blocked only while playing (the title and login screens keep the browser's zoom, which low-vision players need),
   the canvas owns every gesture, and the document itself cannot scroll or rubber-band. */
html:has(body.touch-playing), body.touch-controls.touch-playing { touch-action: pan-x pan-y !important; overflow: hidden !important; overscroll-behavior: none !important; }
html body.touch-controls.touch-playing #canvas-container, html body.touch-controls.touch-playing canvas { touch-action: none !important; }
/* Text size setting: the HUD panels that carry running text follow --ui-text-scale (the controls' own labels too). */
html body.touch-controls .touch-ctx-btn { font-size: calc(13px * var(--ui-text-scale, 1)) !important; }
html body.touch-controls .touch-menu-item { font-size: calc(12px * var(--ui-text-scale, 1)) !important; }
html body .quest-tracker strong, html body .quest-tracker .quest-tracker-step, html body .quest-tracker .quest-tracker-objective, html body .quest-tracker .quest-tracker-count, html body .quest-tracker .quest-tracker-arrow, html body #chat-panel .chat-lines, html body #chat-panel .chat-tag { font-size: calc(10px * var(--ui-text-scale, 1)) !important; }
html body.touch-controls .quest-tracker strong, html body.touch-controls .quest-tracker .quest-tracker-step, html body.touch-controls .quest-tracker .quest-tracker-objective, html body.touch-controls .quest-tracker .quest-tracker-count, html body.touch-controls .quest-tracker .quest-tracker-arrow, html body.touch-controls #chat-panel .chat-lines, html body.touch-controls #chat-panel .chat-tag { font-size: calc(12px * var(--ui-text-scale, 1)) !important; }
/* The unstyled chat tool strip is parked at the top-left corner on touch, on top of the player frame, with 12 px buttons. */
html body.touch-controls > .chat-tools { display: none !important; }
html body.touch-controls .action-slot, html body.touch-controls #open-loadout { flex: 0 0 44px !important; min-width: 44px !important; min-height: 44px !important; }
html body.touch-controls .touch-ctx-btn { width: 56px !important; padding: 2px !important; overflow: hidden !important; }
/* Bounds: nothing the HUD draws may be wider than the screen. */
html body.touch-controls #action-bar { max-width: 100vw !important; }

html body.mmo-launch-hud:not(.touch-controls) #mmo-minimap { grid-template-columns: minmax(0, 1fr) !important; }
html body.mmo-launch-hud:not(.touch-controls) #mmo-minimap .mmo-mini-tools { width: max-content !important; justify-self: end !important; flex-wrap: nowrap !important; justify-content: flex-end !important; }
/* Laptops: the zoom buttons leave the minimap (they ran off the right edge at 1366 px) and stand on the left edge; the rewards pill moves to the top centre, clear of the chat. */
html body.mmo-launch-hud:not(.touch-controls) #zoom-controls { position: fixed !important; left: 8px !important; right: auto !important; top: calc(20% - 40px) !important; bottom: auto !important; flex-direction: column !important; z-index: 21 !important; }
/* Lane 226: the one rewards position off touch (the older competing rules in wowbars.css / wowframes.css are removed): top centre, clear of party/raid frames, target frame, minimap and action bar. Hidden when nothing is ready (js/rewards.js sets [hidden]). */
html body:not(.touch-controls) #account-rewards-panel { left: 50% !important; right: auto !important; top: 8px !important; bottom: auto !important; transform: translateX(-50%) !important; }
@media (orientation: landscape) and (max-height: 520px) { html body.touch-controls .touch-ctx-btn { width: 48px !important; min-width: 48px !important; } }
@media (orientation: landscape) and (max-height: 520px) {
  html body.touch-controls #micro-menu #cargo-floating-pill { left: 50% !important; transform: translateX(-50%) !important; bottom: calc(var(--tc-pad-b) + var(--tc-bar-h) + 8px) !important; }
}
/* The tracker (z-index 40) must never swallow touches meant for the action buttons. */
html body.touch-controls #touch-context, html body.touch-controls #touch-menu-toggle { z-index: 45 !important; }
/* Dodge (lane 179): cooldown chip on the action bar and a 44 px touch button stacked directly above the all-actions toggle (right reach column; joystick is on the left, context buttons sit left of this column). */
.dodge-chip, .touch-dodge-btn { position: relative; overflow: hidden; box-sizing: border-box; color: #fff; font: 700 11px system-ui, sans-serif; border: 2px solid rgba(255,255,255,.55); background: rgba(24,41,56,.92); text-align: center; user-select: none; -webkit-user-select: none; }
.dodge-chip { flex: 0 0 auto; align-self: center; min-width: 44px; height: 32px; line-height: 28px; border-radius: 8px; padding: 0 6px; pointer-events: none; }
.dodge-chip-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0,0,0,.6); pointer-events: none; }
.dodge-chip-label { position: relative; }
.dodge-chip[data-state="ready"], .touch-dodge-btn[data-state="ready"] { border-color: #7dd3fc; }
.touch-dodge-btn { display: none; position: fixed; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 22px; z-index: 22; touch-action: none; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
body.touch-controls .touch-dodge-btn { display: block; right: var(--tc-pad-r, 8px); bottom: calc(var(--tc-reach, 84px) + 44px + 8px); }
body.touch-controls .dodge-chip { display: none; }

/* ---- Lane 226 (P6.2): main windows on phones and tablets sit in the free area between the HUD blocks (js/ui-kit.js measureSheet sets --msh-sheet-*),
   never over the joystick, action bar or micro menu, and scroll inside themselves. Same placement as the lane 172 .msh-sheet windows. ---- */
@media (pointer: coarse), (max-width: 767px) {
  html body .carried-panel, html body #character-sheet, html body #skill-book, html body .quest-log, html body #talent-board, html body .st-panel, html body .sui-panel, html body #sui-panel {
    position: fixed !important; left: var(--msh-sheet-left, 8px) !important; right: var(--msh-sheet-right, 8px) !important; top: var(--msh-sheet-top, 8px) !important; bottom: var(--msh-sheet-bottom, 96px) !important;
    width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; max-height: none !important; transform: none !important; translate: none !important;
    box-sizing: border-box !important; overflow: auto !important; overflow-x: hidden !important; overscroll-behavior: contain; }
  html body .ftue-help, html body .wow-game-menu, html body #touch-menu { max-height: calc(100vh - var(--msh-sheet-top, 8px) - var(--msh-sheet-bottom, 96px)) !important; overflow-y: auto !important; box-sizing: border-box; }
  html body .ftue-help, html body .wow-game-menu { top: var(--msh-sheet-top, 8px) !important; transform: translateX(-50%) !important; }
  #touch-menu { top: var(--msh-sheet-top, 8px) !important; }
}
@media (pointer: coarse), (max-width: 767px) {
  /* the close button comes first, so it never scrolls out of a short window */
  html body .wow-game-menu:not([hidden]) { display: flex !important; flex-direction: column; }
  html body .wow-game-menu [data-msh-close], html body #touch-menu [data-msh-close] { order: -1; }
  /* spellbook: the school tabs sit in a row above the list instead of outside the book (they ran off the right edge) */
  html body #skill-book nav[aria-label="Spell schools"] { position: static !important; flex-direction: row !important; flex-wrap: wrap; gap: 4px; margin: 0 0 6px !important; }
  html body #skill-book nav[aria-label="Spell schools"] button { width: auto !important; min-width: 44px; overflow: visible !important; font-size: 12px !important; white-space: normal; }
  html body #skill-book nav[aria-label="Spellbook pages"] { position: static !important; justify-content: space-between; margin-top: 6px; }
  html body #skill-book .wow-spell-list { height: auto !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; grid-auto-flow: row !important; }
  html body #skill-book .wow-spell-row { min-height: 44px !important; }
}
@media (pointer: coarse), (max-width: 767px) {
  /* the title bar (with its close button) stays at the top of a scrolling window */
  html body .carried-panel > .msh-titlebar, html body .carried-panel > .msh-window-titlebar, html body #character-sheet > .msh-titlebar, html body #character-sheet > .msh-window-titlebar,
  html body #skill-book > .msh-titlebar, html body #skill-book > .msh-window-titlebar, html body #talent-board > .msh-titlebar, html body #talent-board > .msh-window-titlebar,
  html body .st-panel > .msh-titlebar, html body .st-panel > .msh-window-titlebar, html body .sui-panel > .msh-titlebar, html body .sui-panel > .msh-window-titlebar,
  html body .quest-log > .msh-titlebar, html body .quest-log > .msh-window-titlebar { position: sticky !important; top: 0; z-index: 3; }
}

html body #account-rewards-panel[hidden] { display: none !important; }
/* tablets: the world map window keeps clear of the action bar and joystick like the other main windows */
@media (pointer: coarse) and (min-width: 768px) {
  html body .wmu-panel { position: fixed !important; left: var(--msh-sheet-left, 8px) !important; right: var(--msh-sheet-right, 8px) !important; top: var(--msh-sheet-top, 8px) !important; bottom: var(--msh-sheet-bottom, 96px) !important; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important; transform: none !important; box-sizing: border-box !important; overflow: auto !important; }
}
html body.touch-controls #auction-open, html body.touch-controls #msh-pvp-btn { min-height: 44px !important; min-width: 44px !important; }
/* Lane 226: the tracker title and rows follow the text size too (they stayed at 10 px, and ignored the text scale setting, on touch) */
html body.touch-controls .quest-tracker .quest-tracker-title, html body.touch-controls .quest-tracker .quest-tracker-row, html body.touch-controls .quest-tracker-row { font-size: calc(12px * var(--ui-text-scale, 1)) !important; }
/* Lane 226: with multiplayer off the Trade button kept its bottom-left default and covered the joystick on landscape phones; it sits between joystick and action bar instead. (With multiplayer on, lane 172 places it.) */
@media (orientation: landscape) and (max-height: 520px) { html body.touch-controls:not(:has(.lfgw-btn)) #auction-open { left: 124px !important; right: auto !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; } }
/* Lane 370: the NPC tip floats above the whole control cluster (stick, Talk/Fight buttons, all-actions toggle, the weapon/auto-attack row), never over it, and stays inside the screen width. */
html body.touch-controls .hubnpc-prompt { bottom: calc(max(var(--tc-reach, 84px) + 116px, var(--tc-micro-bottom, 80px) + var(--tc-micro-h, 54px) + 52px) + 12px) !important; max-width: calc(100vw - var(--tc-pad-l, 8px) - var(--tc-pad-r, 8px)) !important; box-sizing: border-box !important; text-align: center !important; }
/* Lane 370: the Close button of the chat shows on touch while the chat is open (the hint says Esc closes, a phone has no Esc). */
#chat-panel .chat-close-row { display: none; }
html body.touch-controls #chat-panel.open .chat-close-row { display: block !important; position: sticky !important; top: 0 !important; height: 0 !important; z-index: 3 !important; }
html body.touch-controls #chat-panel.open .chat-close { display: block !important; position: absolute !important; right: 4px !important; top: 4px !important; min-width: 44px !important; min-height: 44px !important; pointer-events: auto !important; }
/* Lane 370: while the first-run welcome card is up the NPC tip waits (the Talk button is still there); the two cards used to sit on top of each other on a landscape phone. */
html body.touch-controls:has(#ftue-intro) .hubnpc-prompt { display: none !important; }
/* Lane 370: on a phone the quest dialog scrolls inside 80% of the height, and in landscape the Accept / Decline row sat under the fold: it now stays at the bottom edge of the dialog while its quest is in view. */
@media (pointer: coarse), (max-width: 700px), (max-height: 520px) { .qd-actions { position: sticky; bottom: 0; z-index: 1; margin-top: 8px; padding: 8px 0 2px; background: var(--msh-text-gold); } }

/* Lane 424: the chat channel tabs are 44 px targets; seven of them are wider than the narrow landscape chat panel (304 px), which made the whole panel scroll sideways. The tab row scrolls inside itself instead. */
html body.touch-controls #chat-panel .chat-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; max-width: 100% !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x !important; }
/* Lane 438: landscape phone. The touch action row (Fight, Auto, Bags, Pallet, Stable, Ride, weapons) is docked to the right screen edge in a 5-wide grid just under the minimap,
   clear of the stick, the touch context buttons, the dodge/menu buttons and the action bar, instead of floating across the middle of the hub. Buttons stay 44 px. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  html body.touch-controls #actionbar-touch-menu { left: auto !important; right: var(--tc-pad-r) !important; bottom: auto !important; top: 132px !important; transform: none !important; width: 268px !important; max-width: calc(100vw - 16px) !important; justify-content: flex-end !important; gap: 4px !important; }
  /* Lane 475: the open chat panel (left 270px, 304px wide here) reached 10px under the docked action row; 40px narrower keeps it clear (tabs scroll inside the panel). */
  html body.touch-controls #chat-panel.open { width: min(360px, max(240px, calc(100vw - 580px))) !important; }
}