#chat-float-resize,
#queue-float-resize { display: none; }

@media (min-width: 641px) {
  /* Visible grip on every draggable window header.
     `cursor: grab` alone only tells you a header is draggable AFTER you have
     already guessed to put the pointer there — and on the queue the header is a
     long video title, which reads as a text label, not a handle (Sean,
     2026-08-19: "I'm trying to move the queue around and having a hard time
     finding where I can click and drag it"). The dots are the standard
     drag-affordance the queue ROWS already use (.q-grab), so this is the same
     vocabulary, not a new one.

     Drawn with a repeating-gradient ::before rather than new markup, so no
     shared template changes and nothing to keep in sync per window. */
  body.layout-cinema #chatheader,
  /* The window as a whole is the grab surface (see QUEUE_NO_DRAG in
     chat-float.js for what is carved out). cursor:grab on the container would
     inherit into the seek bar and the list and promise a drag that will not
     happen, so the excluded regions take their cursor back explicitly below. */
  body.layout-cinema #bottom-queue,
  body.layout-cinema #videowrap-header {
    cursor: grab;
  }
  body.layout-cinema #bottom-queue #leader-seekbar,
  body.layout-cinema #bottom-queue #leader-seekbar *,
  body.layout-cinema #bottom-queue #queue,
  body.layout-cinema #bottom-queue #addfromurl,
  body.layout-cinema #bottom-queue #addfromurl * {
    cursor: auto;
  }
  body.layout-cinema #bottom-queue #leader-seek-track,
  body.layout-cinema #bottom-queue #leader-seek-fill,
  body.layout-cinema #bottom-queue #leader-seek-handle {
    cursor: pointer;
  }
  body.layout-cinema #bottom-queue button,
  body.layout-cinema #bottom-queue a {
    cursor: pointer;
  }
  body.layout-cinema #bottom-queue.is-queue-dragging,
  body.layout-cinema #bottom-queue.is-queue-dragging * {
    cursor: grabbing;
  }
  body.layout-cinema #chatheader::before,
  body.layout-cinema #videowrap-header::before {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 9px;
    height: 14px;
    margin-right: 7px;
    /* Two columns of dots, the same 2x3 grip used on queue rows. */
    background-image: radial-gradient(circle at 1.5px 1.5px, var(--text) 1.2px, transparent 1.3px);
    background-size: 4px 5px;
    background-repeat: repeat;
    opacity: 0.3;
    transition: opacity 0.15s ease;
    /* pointer-events stay ON: the grip is part of the header's drag surface. */
  }
  /* Brighten on approach so it reads as interactive, and while actually
     dragging so the thing you grabbed stays visible under the cursor. */
  body.layout-cinema #chatheader:hover::before,
  body.layout-cinema #videowrap-header:hover::before,
  body.layout-cinema #chatwrap.is-chat-dragging #chatheader::before,
  body.layout-cinema #bottom-queue.is-queue-dragging #videowrap-header::before {
    opacity: 0.75;
  }
  /* The grip recedes with the rest of the chrome on idle, matching the resize
     corner below — it must not become the one element that never fades. */
  body.layout-cinema #chatwrap.chat-idle #chatheader::before {
    opacity: 0;
  }
  body.layout-cinema #chatwrap.chat-idle:hover #chatheader::before,
  body.layout-cinema #chatwrap.is-chat-dragging #chatheader::before {
    opacity: 0.75;
  }
  /* Edge-resize affordance. chat-float.js arms exactly one of these while the
     pointer is inside a 6px band on that border, and disarms the moment it
     leaves — so the `*` descendant rules can never strand a resize cursor on a
     link or a button. They have to outrank the `cursor: grab` on #chatheader
     above, because the top band and the header are the same pixels; the extra
     class on #chatwrap is what does it. */
  body.layout-cinema #chatwrap.ch-rz-n,
  body.layout-cinema #chatwrap.ch-rz-n *,
  body.layout-cinema #chatwrap.ch-rz-s,
  body.layout-cinema #chatwrap.ch-rz-s * {
    cursor: ns-resize;
  }
  body.layout-cinema #chatwrap.ch-rz-e,
  body.layout-cinema #chatwrap.ch-rz-e *,
  body.layout-cinema #chatwrap.ch-rz-w,
  body.layout-cinema #chatwrap.ch-rz-w * {
    cursor: ew-resize;
  }
  body.layout-cinema #chatwrap.is-chat-dragging {
    user-select: none;
  }
  body.layout-cinema #chatwrap.is-chat-dragging #chatheader {
    cursor: grabbing;
  }
  body.layout-cinema #chatwrap.chat-floated {
    bottom: auto;
    max-height: none;
  }
  body.layout-cinema #chatwrap.chat-floated #chatbody,
  body.layout-cinema #chatwrap.chat-floated #messagebuffer {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }
  #chat-float-resize {
    display: none;
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    z-index: 32;
    cursor: nwse-resize;
    opacity: 1;
    transition: opacity 0.5s ease;
  }
  /* 2px at 45% was the hardest edge on the screen in cinema — a pure 90°
     corner of solid --text sitting directly on video, with nothing else
     around it drawn that crisply. 1px at 28% with a rounded joint keeps it
     findable without competing with the picture (Sean, 2026-08-19: "it's too
     sharp against everything else"). */
  #chat-float-resize::before {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 9px;
    height: 9px;
    border-right: 1px solid var(--text);
    border-bottom: 1px solid var(--text);
    border-bottom-right-radius: 3px;
    opacity: 0.28;
  }
  body.layout-cinema.cinema-hot-chat #chat-float-resize,
  body.layout-cinema.cinema-chat-stay #chat-float-resize {
    display: block;
  }
  /* ...but NEVER on the Twitch surface. There #chatwrap is not a floating box
     you can drag or resize — it is a fixed reserved band, so the handle has
     nothing to act on. It is also 14px tall anchored 2px off the bottom, so
     once the cold strip shrank to 8px (2026-09-09) it stuck out of the top of
     its own parent and onto the iframe, which is occlusion and pauses the
     stream. Twitch forces chat mode 'always', i.e. .cinema-chat-stay, so the
     rule directly above is exactly what put it there.
     Caught by scripts/verify/cinema_nav_reveal.py as hits:["chat-float-resize"]
     against a clean baseline. */
  body.layout-cinema.twitch-safe-surface #chat-float-resize {
    display: none !important;
  }
  /* ...and then take it away when nothing is happening. With chat PINNED
     (cinema-chat-stay) the display:block above is permanent, so this corner
     was the one piece of chrome that never receded — it outlived the input
     box it hangs off, which already fades via #chatline.is-idle. Same 2s
     timer drives both now: chatIdlePoke() in coolhole.js puts .chat-idle on
     #chatwrap. Hovering chat brings it straight back, and a drag/resize in
     progress pins it so the handle can never vanish under the cursor. */
  body.layout-cinema #chatwrap.chat-idle #chat-float-resize {
    opacity: 0;
    pointer-events: none;
  }
  body.layout-cinema #chatwrap.chat-idle:hover #chat-float-resize,
  body.layout-cinema #chatwrap.is-chat-dragging #chat-float-resize {
    opacity: 1;
    pointer-events: auto;
  }

  body.layout-cinema #bottom-queue.is-queue-dragging {
    user-select: none;
  }
  body.layout-cinema #bottom-queue.is-queue-dragging #videowrap-header {
    cursor: grabbing;
  }
  body.layout-cinema #bottom-queue.queue-floated {
    right: auto;
    bottom: auto;
    overflow: hidden;
  }
  body.layout-cinema #bottom-queue.queue-floated #rightpane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* Collapsed + floated: shrink to the seekbar/summary instead of keeping the
     window at its dragged-out height. The resize handle writes an INLINE
     height onto #bottom-queue, which outranks any normal rule, so hiding
     #queue left the saved height (measured: 500px inline holding ~96px of
     content) as an empty panel below the "Show video menu" row.
     !important is what beats the inline style; the height returns when the
     menu is reopened because this rule stops matching. */
  body.layout-cinema #bottom-queue.queue-floated.queue-collapsed {
    height: auto !important;
  }
  body.layout-cinema #bottom-queue.queue-floated.queue-collapsed #rightpane {
    flex: 0 0 auto;
  }
  body.layout-cinema #bottom-queue.queue-floated #queue {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
  }
  #queue-float-resize {
    display: none;
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 14px;
    height: 14px;
    z-index: 32;
    cursor: nwse-resize;
  }
  #queue-float-resize::before {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 9px;
    height: 9px;
    border-right: 1px solid var(--text);
    border-bottom: 1px solid var(--text);
    border-bottom-right-radius: 3px;
    opacity: 0.28;
  }
  body.layout-cinema.cinema-hot-queue #queue-float-resize {
    display: block;
  }
}

/* Drag shield. Exists only while a mouse button is down on a panel edge/header:
   the player is an iframe and eats every mousemove once the cursor crosses it,
   which kills the gesture. See window.chFloat.shield() for the measurement. */
#ch-drag-shield {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: transparent;
}

/* Classic layout: the chat/video seam. The band is mostly the 10px gutter that
   already sits between the columns (it belongs to #main and holds nothing), so
   there is normally no chat content under it at all. Armed and disarmed by
   chat-float.js the same way the cinema bands are. */
body:not(.layout-cinema) #main.ch-rz-col,
body:not(.layout-cinema) #main.ch-rz-col * {
  cursor: col-resize;
}

/* Hold the cursor for the whole gesture. Dragging an edge INWARD moves the
   pointer off the edge it grabbed by definition, so without this the cursor
   reverts to whatever is underneath mid-drag and the drag reads as dropped.
   Only ever on <body> while a button is actually down. */
body.ch-rz-drag-ew, body.ch-rz-drag-ew * { cursor: ew-resize !important; }
body.ch-rz-drag-ns, body.ch-rz-drag-ns * { cursor: ns-resize !important; }
body.ch-rz-drag-nwse, body.ch-rz-drag-nwse * { cursor: nwse-resize !important; }
body.ch-rz-drag-col, body.ch-rz-drag-col * { cursor: col-resize !important; }
body.ch-rz-drag-ew, body.ch-rz-drag-ns,
body.ch-rz-drag-nwse, body.ch-rz-drag-col { user-select: none; }

.q-eta:not(.q-sched) { display: none; }
.q-plays-in {
  flex: 1;
  max-width: 180px;
  color: var(--text);
  font-size: 12px;
  padding: 6px 10px;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}
.q-plays-in[hidden] { display: none; }