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

@media (min-width: 641px) {
  body.layout-cinema #chatheader {
    cursor: grab;
  }
  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;
  }
  #chat-float-resize::before {
    content: "";
    position: absolute;
    right: 1px;
    bottom: 1px;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    opacity: 0.45;
  }
  body.layout-cinema.cinema-hot-chat #chat-float-resize,
  body.layout-cinema.cinema-chat-stay #chat-float-resize {
    display: block;
  }

  body.layout-cinema #videowrap-header {
    cursor: grab;
  }
  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: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    opacity: 0.45;
  }
  body.layout-cinema.cinema-hot-queue #queue-float-resize {
    display: block;
  }
}

.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; }