/* The watch page's layout (SPEC 67; static/watch.js): the ⋯ More menu's own rows, Autoplay and the chips at the top of
   Up next, Theater mode, the Keyboard shortcuts box and a quieter My notes. Colours come from style.css's tokens. */

/* The ⋯ More button at the end of the control row, and its first and last rows (Loop, Mini player, Listen, Playback
   speed, Theater mode; Keyboard shortcuts, Report). The player settings in between keep playertools.css's look. */
.menu.tools-menu > summary.more-btn { width: 40px; padding: 0; justify-content: center; } /* (beats playertools.css's summary) */
.more-btn .icon circle { fill: currentColor; } /* the three dots, solid */
.more-items { display: grid; gap: 2px; }
.tools-pop .more-item { /* (beats style.css's .menu-pop button) */
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 6px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
}
.tools-pop .more-item[hidden] { display: none; } /* Mini player and Listen until playback.js finds them possible */
.tools-pop .more-item:hover { background: var(--surface-2); }
.more-item .icon { flex: none; }
.more-item > span:first-of-type, .more-label { flex: 1; min-width: 0; }
.more-label { display: flex; align-items: center; gap: 12px; }
/* a switched-on row (Loop, Mini player, Listen, Theater mode): its text in the accent colour and a check at the end */
.more-item[aria-pressed="true"] { color: var(--accent-text); }
.more-item[aria-pressed="true"]::after {
  content: ""; flex: none; width: 5px; height: 10px; margin: 0 4px 3px 2px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.more-speed { cursor: default; }
.more-speed select {
  flex: none; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.more-items .autoplay-toggle { justify-content: flex-start; width: 100%; } /* (only when the page has no Up next) */
@media (max-width: 1100px) { .tools-pop .more-theater { display: none; } } /* one column there already */
/* the menu opens under the ⋯ button, along its right edge */
.watch-actions .tools-pop { left: auto; right: 0; }

/* Touch screens (style.css's "Touch screens", 2026-10-29): the More menu's rows 44 px tall, the speed list too, and the
   channel's picture beside its name a 44 px target (padding taken back by a negative margin) */
@media (pointer: coarse) {
  .tools-pop .more-item { min-height: 44px; }
  .more-speed select { height: 44px; }
  .channel-chip > a[aria-hidden="true"] { padding: 1px; margin: -1px; }
}

/* Up next: the heading with the Autoplay switch, then the chips */
.up-next-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.up-next .up-next-head h2 { margin: 0; }
.up-next-head .autoplay-toggle .hide-sm { display: inline; }
.up-next-chips { display: flex; gap: 8px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.up-next-chips[hidden] { display: none; }
.up-next-chips .chip { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.up-next-chips .chip[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* Theater mode: the player across the page with everything else, Up next included, below it (computers only; at 1100 px
   and narrower the page is one column anyway). Pages with a chat replay or a playlist beside the player stack them
   under it the way narrower screens do. */
@media (min-width: 1101px) {
  body[data-theater] main.watch-page { grid-template-columns: minmax(0, 1fr); }
  body[data-theater] .player { max-height: calc(100vh - 150px); }
  body[data-theater] .up-next { border-top: 1px solid var(--line); padding-top: 20px; }
  body[data-theater] main.watch-page.has-chat-replay { grid-template-areas: "player" "replay" "info" "next"; grid-template-rows: none; }
  body[data-theater] main.watch-page.has-chat-replay .chat-replay { align-self: start; min-height: 0; contain: none; }
  body[data-theater] main.watch-page.has-chat-replay .chat-replay .chat-list { height: min(40vh, 300px); }
  body[data-theater] main.watch-page.has-list-panel { grid-template-areas: "player" "panel" "info" "next"; grid-template-rows: none; }
  body[data-theater] main.watch-page.has-list-panel .list-panel { contain: none; align-self: start; max-height: none; }
  body[data-theater] main.watch-page.has-chat-replay.has-list-panel {
    grid-template-areas: "player" "replay" "panel" "info" "next"; grid-template-rows: none;
  }
  body[data-theater] main.watch-page.has-chat-replay.has-tools-row { grid-template-areas: "player" "tools" "replay" "info" "next"; grid-template-rows: none; }
  body[data-theater] main.watch-page.has-list-panel.has-tools-row { grid-template-areas: "player" "tools" "panel" "info" "next"; grid-template-rows: none; }
  body[data-theater] main.watch-page.has-chat-replay.has-list-panel.has-tools-row {
    grid-template-areas: "player" "tools" "replay" "panel" "info" "next"; grid-template-rows: none;
  }
}

/* Keyboard shortcuts (⋯ › Keyboard shortcuts, the ? key) */
.shortcuts-dialog { width: min(560px, calc(100vw - 32px)); }
.shortcuts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.shortcuts-head .dialog-title { margin: 0; }
.shortcuts-dialog .shortcut-hint { margin: 0; font-size: 15px; line-height: 2.1; color: var(--text-2); }

/* My notes stays one line (the heading and Add note) until there's a note or the form is open */
.notes-box:not(:has(.notes-list:not([hidden]))):not(:has(.note-form:not([hidden]))) .notes-private { display: none; }
.notes-box:not(:has(.notes-list:not([hidden]))):not(:has(.note-form:not([hidden]))) { padding-top: 8px; padding-bottom: 8px; }

/* The smallest phones: Save shows just its icon, so Like/Dislike, Share, Save and ⋯ stay on one line */
@media (max-width: 360px) {
  .watch-actions .save-menu > summary > span, .watch-actions [data-save-signin] > span { display: none; }
}

/* The Theater button over the player (the owner, 2026-10-21: "as obvious as it is on YouTube"), on every video and live
   stream: top right, while the pointer is over the player or it has keyboard focus, always on touch screens; its icon
   shows what pressing it does (a wide box for Theater mode, a narrower one back to the default view) */
.player-theater {
  position: absolute; top: 10px; right: 10px; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 10px; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer;
  opacity: 0; transition: opacity 0.15s;
}
.player:hover .player-theater, .player-theater:focus-visible { opacity: 1; }
.player-theater:hover { background: rgba(0, 0, 0, 0.75); }
.player-theater .player-theater-on, .player-theater[aria-pressed="true"] .player-theater-off { display: none; }
.player-theater[aria-pressed="true"] .player-theater-on { display: contents; }
@media (hover: none) { .player-theater { opacity: 1; } }
@media (max-width: 1100px) { .player-theater { display: none; } }

/* Theater mode on a live stream's page: the player across the page, the stream's details and its chat side by side
   under it (a page without chat: just the wider player) */
@media (min-width: 1101px) {
  body[data-theater] main.live-page:has(.live-chat-slot .chat) {
    grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "player player" "info chat"; grid-template-rows: auto 1fr;
  }
  body[data-theater] main.live-page:has(.live-chat-slot .chat) .watch-main { display: contents; }
  body[data-theater] main.live-page:has(.live-chat-slot .chat) .live-player { grid-area: player; }
  body[data-theater] main.live-page:has(.live-chat-slot .chat) .watch-info { grid-area: info; min-width: 0; }
  body[data-theater] main.live-page:has(.live-chat-slot .chat) .watch-main > :not(.live-player):not(.watch-info) { grid-column: 1; }
  body[data-theater] main.live-page:has(.live-chat-slot .chat) .live-chat-slot { grid-area: chat; }
}

/* ===================================================================================================================
   The owner, 2026-10-29: "the comments section is burried by all the add ons. I need it to look more like youtube where
   the comments sit right below the video, and then other videos below that. all of the thumbs up and tip options along
   with details on the video need to be in drop down menus" (phones), and "this is also how id like the desktop version
   to look" (a YouTube desktop watch page). main.video-page is the watch page's own (the live page shares this file).
   =================================================================================================================== */

/* The channel row: the creator's tools where Subscribe goes, like YouTube's Analytics / Edit video (no row of their own) */
.channel-manage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ⋯'s first rows: Tip and My notes on every screen, and on phones (below) Dislike, Share and Save, which leave the row */
.tools-pop .more-phone { display: none; }
.more-first.is-phone-only, .more-first-sep.is-phone-only { display: none; }
.more-react { display: contents; }
.more-react[hidden] { display: none; }
.more-count { flex: none; margin-left: auto; color: var(--text-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.more-item[aria-pressed="true"] .more-count { color: inherit; }
.tools-pop .more-form { display: grid; margin: 0; }

/* The description box (YouTube's): the views and the date and the first lines; …more opens the rest in place, the
   chapters, My notes and the background sound line included (.desc-extra). A closed box with more in it opens on a click. */
.desc-meta-short { display: none; }
body[data-watch-js] .desc-box.clamped .desc-extra { display: none; } /* (without JavaScript they stay in view) */
.desc-box.clamped:has(> .desc-more:not([hidden])) { cursor: pointer; }
.desc-extra > .chapter-box, .desc-extra > .notes-box {
  margin-top: 12px; padding: 12px 0 0; border-top: 1px solid var(--line); border-radius: 0; background: none;
}
.desc-extra > .chapter-box .chapter-box-title { padding: 0; }
.desc-extra > .bgplay-hint { margin-top: 12px; }
.desc-box:not(.clamped) > .desc-more { display: block; margin-top: 10px; }
.notes-title[tabindex="-1"]:focus { outline: none; } /* (⋯ › My notes takes focus there, quietly) */

/* The comments card (phones; hidden elsewhere) and the comments panel (opened on phones only, static/watch.js) */
.comments-card { display: none; }
.comments-panel {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: var(--bg); color: var(--text); overflow: hidden;
}
.comments-panel[open] { display: flex; flex-direction: column; animation: comments-panel-in 0.18s ease-out; }
.comments-panel::backdrop { background: rgba(0, 0, 0, 0.55); }
@keyframes comments-panel-in { from { transform: translateY(32px); opacity: 0; } }
.comments-panel-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 6px calc(16px + env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
}
.comments-panel-title { font-size: 17px; font-weight: 700; }
.comments-panel-count { margin-left: 4px; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.comments-panel-close { flex: none; width: 44px; height: 44px; }
.comments-panel-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 12px calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.comments-panel-body > .comments { margin-top: 0; }
/* (its title says "Comments N"; the comments' own heading stays for screen readers) */
.comments-panel .comments-bar > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.comments-panel .comments-bar { margin-bottom: 14px; }
.comments-panel > .toast { bottom: calc(16px + env(safe-area-inset-bottom)); }
html.watch-panel-open { overflow: hidden; }

/* A stream's replay (phones, static/watch.js): the chat replay's own panel, the comments panel's look, UNDER the video
   (the owner, 2026-10-29: "Video stays above the chat", like YouTube's app). While it's open (<html class="replay-pinned">)
   the player is pinned to the top of the screen, as wide as the screen, and keeps playing with its own controls; the
   panel fills the screen under it. On a phone on its side (as wide as it's tall, or wider) the video above would leave
   the chat almost no room: the video is pinned on the left (60%, its height letterboxed in black) and the chat fills the
   right. Both stay above the top bar, the phone bar and the page (made inert by watch.js). Under the panel's title and ×
   the chat itself (#chat-replay, moved in while it's open) fills the rest: its list scrolls, "Replay of the live chat.
   It's read-only." stays at the bottom. Its own header (the same "Chat replay" and count) is kept for screen readers only,
   and Hide chat has nothing to do here. */
.chat-replay-panel .comments-panel-head { padding-top: 6px; } /* (under the video: no notch to clear) */
.chat-replay-panel-body {
  display: flex; flex-direction: column; overflow: hidden;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
@media (max-width: 720px) {
  html.replay-pinned .video-page .watch-main > .player {
    position: fixed; z-index: 120; top: env(safe-area-inset-top, 0px); left: 0; right: 0; width: auto; height: 56.25vw;
    max-height: none; margin: 0; border-radius: 0; aspect-ratio: auto;
  }
  .chat-replay-panel.comments-panel {
    z-index: 120; inset: calc(env(safe-area-inset-top, 0px) + 56.25vw) 0 0; width: auto; height: auto;
  }
}
@media (max-width: 720px) and (min-aspect-ratio: 1/1) {
  html.replay-pinned .video-page .watch-main > .player {
    top: 0; bottom: 0; right: auto; width: 60vw; height: auto; padding-left: env(safe-area-inset-left, 0px); box-sizing: border-box;
  }
  .chat-replay-panel.comments-panel { inset: 0 0 0 60vw; }
  .chat-replay-panel .comments-panel-title { font-size: 15px; } /* (one line in the narrower column) */
  .chat-replay-panel-body { padding-left: 0; }
}
main.watch-page .chat-replay-panel .chat-replay { /* (beats chat.css's place for it beside or under the player) */
  flex: 1 1 auto; align-self: stretch; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; background: none;
  contain: none;
}
main.watch-page .chat-replay-panel .chat-replay .chat-head {
  position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
main.watch-page .chat-replay-panel .chat-replay .chat-tools { display: none; }
main.watch-page .chat-replay-panel .chat-replay .chat-body { display: flex; } /* (also after Hide chat on a wider screen) */
main.watch-page .chat-replay-panel .chat-replay .chat-list { flex: 1 1 auto; height: auto; min-height: 0; }
main.watch-page .chat-replay-panel .chat-msg { padding-left: 16px; }
main.watch-page .chat-replay-panel .chat-replay-note { padding: 10px 16px 12px; }
/* (a finger: each message's ⋮ a 44 x 44 px target level with its first line, so each message is at least that tall and
   two never share a spot; the "New messages" pill 44 px tall) */
@media (pointer: coarse) {
  main.watch-page .chat-replay-panel .chat-msg { min-height: 44px; padding-top: 12px; padding-right: 48px; padding-bottom: 6px; }
  main.watch-page .chat-replay-panel .chat-msg-more { top: 0; right: 2px; width: 44px; height: 44px; }
  main.watch-page .chat-replay-panel .chat-pill { height: 44px; }
}

/* Phones: title, "{views} · {date} …more", the channel row, 👍 and ⋯, the comments card, then Up next ------------------ */
@media (max-width: 720px) {
  .video-page .watch-info { display: flex; flex-direction: column; }
  .video-page .watch-info > .desc-box { order: 1; }
  .video-page .watch-info > .watch-bar { order: 2; }
  .video-page .watch-info > .comments-card, .video-page .watch-info > .comments { order: 3; }
  .video-page .watch-info > .workout-card, .video-page .watch-info > .workout-versions,
  .video-page .watch-info > .workout-scores, .video-page .watch-info > [data-workout-part] { order: 4; }
  .video-page .watch-title { margin-bottom: 2px; }

  /* the description box, closed: one line, the short views and date with …more at its end (the whole line opens it) */
  body[data-watch-js] .video-page .desc-box.clamped {
    display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 0; padding: 0; border-radius: 0; background: none;
  }
  body[data-watch-js] .video-page .desc-box.clamped .desc-meta {
    flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--text-2); font-size: 13.5px; font-weight: 600;
    white-space: nowrap; text-overflow: ellipsis;
  }
  body[data-watch-js] .video-page .desc-box.clamped .desc-meta-full {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  body[data-watch-js] .video-page .desc-box.clamped .desc-meta-short { display: inline; }
  body[data-watch-js] .video-page .desc-box.clamped .desc-text { display: none; }
  body[data-watch-js] .video-page .desc-box > .desc-more[hidden] { display: inline-flex; } /* (always: the full date and views are in it) */
  body[data-watch-js] .video-page .desc-box.clamped > .desc-more {
    flex: none; align-items: center; min-height: 44px; margin: 0; padding: 0 0 0 8px; color: var(--text); font-size: 13.5px;
  }
  .video-page .desc-box:not(.clamped) { margin: 6px 0 14px; }

  /* the channel row, then 👍 and ⋯ on a slim line of their own, on the right */
  .video-page .watch-bar { flex-direction: column; align-items: stretch; gap: 0; margin-top: 2px; }
  /* (the name keeps at least 80 px: Subscribe, its bell and the creator's tools go under it only when it wouldn't) */
  .video-page .channel-chip, .video-page .channel-chip:has(.btn-bell) { flex-wrap: wrap; gap: 8px 10px; }
  .video-page .channel-chip .channel-chip-text, .video-page .channel-chip:has(.btn-bell) .channel-chip-text { flex: 1 1 80px; margin-right: 0; }
  /* (one line each: a long name or count ends in "…", so the row keeps its height when the bell comes in) */
  .video-page .channel-chip .name-line { flex-wrap: nowrap; }
  .video-page .channel-chip [data-sub-count] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .video-page .channel-chip .avatar { --size: 36px !important; }
  .video-page .channel-chip .btn-sub, .video-page .channel-chip:has(.btn-bell) .btn-sub { margin-left: auto; padding: 0 14px; }
  /* (Subscribe keeps its right edge when its bell appears: the bell goes in before it, so the spot tapped stays on it) */
  .video-page .channel-chip .btn-bell { order: 2; }
  .video-page .channel-chip .btn-sub { order: 3; }
  .video-page .channel-chip .btn-sub + .btn-bell:not([hidden]) { margin-left: auto; }
  .video-page .channel-chip .btn-sub:has(+ .btn-bell:not([hidden])) { margin-left: 0; }
  .video-page .channel-manage { order: 4; margin-left: auto; }
  .video-page .channel-chip .channel-manage .btn { margin-left: 0; padding: 0 14px; }
  .video-page .watch-actions:has(> [data-player-menu]) { justify-content: flex-end; gap: 2px; margin: 2px -8px 0 0; }
  /* (with JavaScript: without it ⋯ stays hidden, and the row keeps them) */
  body[data-watch-js] .video-page .watch-actions:has(> [data-player-menu]) .react-btn[data-react="-1"],
  body[data-watch-js] .video-page .watch-actions:has(> [data-player-menu]) > [data-share],
  body[data-watch-js] .video-page .watch-actions:has(> [data-player-menu]) > [data-save-signin],
  body[data-watch-js] .video-page .watch-actions:has(> [data-player-menu]) > .save-menu > summary { display: none; }
  .video-page .watch-actions:has(> [data-player-menu]) > .save-menu { position: absolute; } /* (opened from ⋯ › Save: its sheet, below) */
  body[data-watch-js] .video-page .watch-actions:has(> [data-player-menu]) .react-group { background: none; }
  body[data-watch-js] .video-page .watch-actions:has(> [data-player-menu]) .react-group .react-btn:first-child { border-radius: 999px; padding: 0 14px; }
  body[data-watch-js] .video-page .watch-actions:has(> [data-player-menu]) .react-group .react-btn:first-child::after { display: none; }
  .video-page .watch-actions:has(> [data-player-menu]) .menu.tools-menu > summary.more-btn { background: none; }
  .video-page .watch-actions:has(> [data-player-menu]) .menu.tools-menu[open] > summary.more-btn { background: var(--hover); }
  /* Save from ⋯: a sheet along the bottom of the screen at every phone width (lists.css does it under 480 px) */
  .video-page .watch-actions:has(> [data-player-menu]) .save-pop {
    position: fixed; left: 12px !important; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 70vh; max-height: 70dvh;
  }
  body:has(.video-page .save-menu[open]) .toast { top: 12px; bottom: auto; }

  /* ⋯ on a phone: Dislike, Share and Save at the top; no Keyboard shortcuts */
  .tools-pop .more-phone { display: flex; }
  .more-first.is-phone-only { display: grid; }
  .more-first-sep.is-phone-only { display: block; }
  .tools-pop .more-shortcuts { display: none; }

  /* the comments: a card right under the buttons, all of them in the panel (without JavaScript: in place, here) */
  body[data-watch-js] .video-page .watch-info > #comments { display: none; }
  .video-page .watch-info > .comments { margin-top: 16px; }
  body[data-watch-js] .video-page .comments-card {
    display: grid; gap: 8px; width: 100%; margin-top: 10px; padding: 12px 14px; border: 0; border-radius: var(--radius);
    background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer;
  }
  .comments-card:hover { background: var(--surface-2); }
  .comments-card-head { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 700; }
  .comments-card-count { color: var(--text-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .comments-card-top, .comments-card-add { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .comments-card-top[hidden], .comments-card-add[hidden] { display: none; }
  .comments-card-avatar { display: contents; }
  .comments-card-text {
    min-width: 0; font-size: 13.5px; line-height: 1.4; overflow: hidden; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .comments-card-box {
    flex: 1 1 auto; min-width: 0; padding: 8px 12px; border-radius: 999px; background: var(--surface-2); color: var(--text-2);
    font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* A stream's replay: the chat replay isn't drawn between the player and the title (without JavaScript it stays there);
     its card follows the Comments card (the same look): "Chat replay", the count, and the newest message on ONE line, so
     the card keeps its height as messages come in while the video plays. Without the chat's place (chat.css's grid), the
     page flows like any other video's: the title right under the player, and what goes under the player (a sponsor's
     "Presented by", the comment dots, a shared moment, the A-B loop) there again, not after Up next; with a playlist, as
     a playlist's page. */
  body[data-watch-js] .video-page .watch-main > [data-chat-replay] { display: none; }
  body[data-watch-js] main.video-page:not(.has-list-panel):has([data-replay-open]) { grid-template-areas: none; }
  body[data-watch-js] main.video-page:not(.has-list-panel):has([data-replay-open]) > .watch-main { display: block; }
  body[data-watch-js] main.video-page:not(.has-list-panel):has([data-replay-open]) > .up-next { grid-area: auto; }
  body[data-watch-js] main.video-page:not(.has-list-panel):has([data-replay-open]) .tools-under > :first-child { margin-top: 10px; }
  body[data-watch-js] main.video-page.has-list-panel:has([data-replay-open]) { grid-template-areas: "player" "panel" "info" "next"; }
  body[data-watch-js] main.video-page.has-list-panel.has-tools-row:has([data-replay-open]) {
    grid-template-areas: "player" "tools" "panel" "info" "next";
  }
  .chat-replay-card-line { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 24px; }
  .chat-replay-card-text {
    flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chat-replay-card-name { margin-right: 2px; color: var(--text-2); font-weight: 700; unicode-bidi: isolate; }
  .chat-replay-card-name[hidden] { display: none; }
}
/* The smallest phones (360 px and under): the name gets the channel row, and Subscribe (or the creator's tools) starts
   the next line, with 👍 and ⋯ at its end, so nothing moves when Subscribe adds its bell */
@media (max-width: 360px) {
  .video-page .watch-bar { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 10px; }
  .video-page .channel-chip { display: contents; }
  .video-page .channel-chip .channel-chip-text, .video-page .channel-chip:has(.btn-bell) .channel-chip-text { flex: 1 1 calc(100% - 46px); }
  .video-page .channel-chip .btn-sub, .video-page .channel-chip:has(.btn-bell) .btn-sub, .video-page .channel-manage { margin-left: 0; }
  /* (here Subscribe starts the line and its bell comes after it, so Subscribe stays put) */
  .video-page .channel-chip .btn-bell, .video-page .channel-chip .btn-sub, .video-page .channel-manage { order: 0; }
  .video-page .channel-chip .btn-sub + .btn-bell:not([hidden]) { margin-left: 0; }
  .video-page .watch-actions:has(> [data-player-menu]) { margin: 0 -8px 0 auto; }
}
@media (forced-colors: active) {
  .comments-card { border: 1px solid CanvasText; }
}