/* Flow editor on touch screens and phones (Juanlu 2026-10-01: the flow builder "compatible
   with mobile when opening the flow from iPhone"; "don't change the current design").

   Layout and touch only, and only where a desktop with a mouse never goes: touch-action
   (which a mouse ignores), (pointer: coarse), windows under 768px, and the classes the touch
   gestures set. Desktop renders stay pixel-identical. The gestures themselves are in
   chatflow.html (setupTouch); the Edit Block panel is already the full width under 768px
   (flows-panel.css), and the editor bar already one sideways-scrolling row up to 480px
   (flows-list.css), as it was. */

/* The canvas takes every gesture itself: no page scroll, bounce or page zoom while a finger
   is on it. */
.viewport { touch-action: none; overscroll-behavior: none; }

/* The touch gestures' cues (setupTouch): a long press lifts a block for a move (a 4px ring,
   4.4:1 on the day canvas and 4.1:1 on the night one, plus a shadow), and arms an output port
   for a connection. */
#world .node.cf-lifted { box-shadow: 0 0 0 4px #2563eb, 0 14px 30px rgba(15, 23, 42, .3); }
:root[data-theme="night"] #world .node.cf-lifted { box-shadow: 0 0 0 4px rgba(76, 141, 246, .8), 0 14px 30px rgba(0, 0, 0, .6); }
#world .port.cf-armed { transform: scale(1.8); }

@media (pointer: coarse) {
  /* a long press on a block starts a move, never the text callout or a text selection */
  .viewport { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  /* the Edit Block panel takes the palette's corner of the screen on a touch screen of any
     size: the palette steps aside while the panel is open, so the panel's fields are never
     under it */
  body:has(#panel.open) .toolbar { display: none; }
  /* palette buttons: a 44px touch target, drawn size unchanged (4px past each edge; where the
     palette wraps onto two rows they sit 8px apart instead of 6, so the targets meet, not overlap) */
  .toolbar { row-gap: 8px; }
  .toolbar button { position: relative; }
  .toolbar button::before { content: ""; position: absolute; inset: -4px 0; }
}

@media (max-width: 767px) {
  /* Palette: the same buttons in the same order, still centred; on a phone too narrow for one
     row they wrap onto a second one, so none is cut off at either edge. */
  .toolbar { flex-wrap: wrap; justify-content: center; width: max-content; max-width: calc(100% - 16px); }
  /* the Edit Block sheet covers the canvas: the palette steps aside while it is open, so the
     sheet's last fields and its own scrolling are not under it */
  body:has(#panel.open) .toolbar { display: none; }
  /* iOS zooms the whole page into a field whose text is under 16px when it takes focus, and
     the page then stays zoomed: the timezone choice uses 16px text on phones */
  #flow-timezone { font-size: 16px !important; }
}

/* Touch screens 768px and wider (tablets, and phones turned sideways): the editor bar is the
   phones' one sideways-scrolling row (same buttons, same order) instead of wrapping out of the
   52px bar, where the top of its buttons was off the screen and Skip Old Leads hung over the
   canvas. */
@media (pointer: coarse) and (min-width: 768px) {
  #editor-buttons:not(.hidden) { flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  #editor-buttons > * { flex: none; }
  #editor-buttons:not(.hidden)::after { content: ""; position: sticky; right: 0; flex: none; align-self: stretch; width: 24px; margin-left: -4px; background: linear-gradient(to right, transparent, var(--bg)); pointer-events: none; }
}
/* Phones turned sideways (a touch screen under 500px tall): their fields use 16px text too
   (iOS zooms the page into smaller ones) */
@media (pointer: coarse) and (max-height: 500px) {
  #flow-timezone { font-size: 16px !important; }
  .panel .input, .panel .fbp-tag-input { font-size: 16px; }
}
/* 44px touch targets in the editor bar wherever it is one row (phones up to 480px, touch screens
   768px and wider), drawn size unchanged: each button's target takes the bar's full height (the
   row clips it there) and half of the 4px gap on each side; the timezone choice, a select that
   cannot carry a pseudo-element, is 44px tall, as fields are on touch screens (tokens.css). */
@media (pointer: coarse) and (max-width: 480px), (pointer: coarse) and (min-width: 768px) {
  #editor-buttons > .btn { position: relative; }
  #editor-buttons > .btn::before { content: ""; position: absolute; inset: -9px -2px; }
  #flow-timezone { min-height: 44px; }
}