/* Browser window around the fake YouTube page */
.stage {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--sloth-line);
  background: var(--yt-bg); box-shadow: var(--sloth-shadow-stage);
}
.stage-bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; background: var(--sloth-bg-1); border-bottom: 1px solid var(--sloth-line); }
.stage-dots { display: flex; gap: 7px; }
.stage-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--sloth-line); }
.stage-url {
  flex: 0 1 420px; margin: 0 auto; height: 24px; padding: 0 12px; border-radius: 6px;
  background: var(--sloth-bg-0); color: var(--sloth-fg-3); font: 12px/24px var(--font-ui);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}

.yt { color: var(--yt-fg); font-family: Roboto, Arial, sans-serif; }
.yt-mast { display: flex; align-items: center; gap: 16px; height: 52px; padding: 0 18px; }
.yt .sk { background: var(--yt-sk); border-radius: 4px; }
.yt-watch { display: grid; grid-template-columns: minmax(0, 1fr) 402px; gap: 22px; padding: 6px 22px 26px; }
.yt-player { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #050505; color: #fff; }
.yt-frame { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: rgb(255 255 255 / 0.3); font: 500 14px/1.6 Roboto, Arial, sans-serif; }
.yt-frame b { display: block; font-size: 22px; font-weight: 500; color: rgb(255 255 255 / 0.55); }
.yt-player.is-flash .yt-frame { animation: yt-flash 0.5s ease; }
@keyframes yt-flash { from { background: rgb(255 255 255 / 0.09); } to { background: transparent; } }
.yt-ctl { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 12px 4px; background: linear-gradient(transparent, rgb(0 0 0 / 0.6)); }
.yt-track { position: relative; height: 3px; background: rgb(255 255 255 / 0.3); }
.yt-fill { position: absolute; inset: 0; background: #E8262B; transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease); }
.yt-row { display: flex; align-items: center; gap: 10px; height: 34px; font: 12.5px Roboto, Arial, sans-serif; }
.yt-row svg { width: 18px; height: 18px; }
.yt-time { font-variant-numeric: tabular-nums; }
.yt-title { margin: 12px 0 8px; font: 700 18px/1.35 Roboto, Arial, sans-serif; }
.yt-chan { display: flex; align-items: center; gap: 10px; }
.yt-av { width: 36px; height: 36px; border-radius: 50%; background: #6D7F6A; }
.yt-chan b { display: block; font: 500 15px/1.3 Roboto, Arial, sans-serif; }
.yt-chan small { color: var(--yt-fg2); font-size: 12px; }
.yt-sub { margin-left: 10px; padding: 0 14px; height: 34px; border-radius: 17px; background: var(--yt-fg); color: var(--yt-bg); display: grid; place-items: center; font: 500 13px Roboto, Arial, sans-serif; }
.yt-desc { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--yt-sk); display: flex; flex-direction: column; gap: 8px; }
.yt-desc .sk { background: var(--yt-sk2); height: 9px; }
.yt-recs { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.yt-rec { display: flex; gap: 8px; }
.yt-rec .t { width: 150px; aspect-ratio: 16 / 9; border-radius: 8px; flex-shrink: 0; }
.yt-rec .l { flex: 1; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.yt-rec .l .sk { height: 9px; }
@media (max-width: 1000px) {
  .yt-watch { grid-template-columns: minmax(0, 402px); justify-content: center; }
  .yt-primary { display: none; }
}

/* The SlothTube panel, drawn with the extension's paper theme */
.pm {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 520px;
  background: var(--sloth-bg-0); color: var(--sloth-fg-1);
  border: 1px solid var(--sloth-line); border-radius: var(--radius-lg); overflow: hidden;
  font: 14px/1.55 var(--font-ui); text-align: left;
  container-type: inline-size;
}
.pm.is-tall { height: 580px; }
:where(.pm) button { all: unset; box-sizing: border-box; cursor: pointer; }
.pm .ic { width: 18px; height: 18px; flex-shrink: 0; }
.pm-head { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--sloth-line); flex-shrink: 0; }
.pm-logo { width: 22px; height: 22px; margin-right: 6px; }
.pm-brand { font-weight: 600; font-size: 16px; color: var(--sloth-fg-0); letter-spacing: -0.01em; }
.pm-mode { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--sloth-bg-1); }
.pm-mode span { padding: 3px 10px; border-radius: 8px; font-weight: 500; color: var(--sloth-fg-3); white-space: nowrap; }
.pm-mode span.on { background: var(--sloth-bg-0); color: var(--sloth-fg-0); font-weight: 600; box-shadow: 0 0 0 1px var(--sloth-line); }
.pm-spacer { flex: 1; }
.pm-credits { padding: 4px 6px; font-size: 12px; color: var(--sloth-fg-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-ibtn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--sloth-fg-3); flex-shrink: 0; }
.pm-tabs { display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--sloth-line); flex-shrink: 0; }
.pm-tab { position: relative; padding: 11px 8px 10px; font-weight: 500; color: var(--sloth-fg-3); white-space: nowrap; }
.pm-tab.on { color: var(--sloth-fg-0); font-weight: 600; }
.pm-tab.on::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--sloth-accent); }
.pm-body { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 16px; }
.pm-body.is-flush { padding: 0; display: flex; flex-direction: column; }
.pm-scroll { height: 100%; overflow-y: auto; scrollbar-width: none; }
.pm-body.is-flush > .pm-scroll { flex: 1; padding: 16px; }
.pm-scroll::-webkit-scrollbar { display: none; }
.pm-in { animation: pm-in var(--dur-slow) var(--ease) both; }
@keyframes pm-in { from { opacity: 0; transform: translateY(4px); } }

.pm-meta { margin: 0; font-size: 12px; line-height: 1.45; color: var(--sloth-fg-3); }
.pm-meta b { color: var(--sloth-fg-1); font-weight: 600; }
.pm-link { color: var(--sloth-accent-text); font-weight: 500; }
.pm-read { font: 16px/1.6 var(--font-read); color: var(--sloth-fg-1); }
.pm-read b { font-weight: 600; color: var(--sloth-fg-0); }

.pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--radius-md); font-weight: 600; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.pm-btn.primary { background: var(--sloth-accent); color: var(--sloth-on-accent); }
.pm-btn.quiet { color: var(--sloth-fg-1); box-shadow: inset 0 0 0 1px var(--sloth-line-strong); }
.pm-btn.block { width: 100%; height: 44px; }
.pm-btn.is-pressed { background: var(--sloth-accent-hover); transform: translateY(1px); }
.pm-btn .ic { width: 16px; height: 16px; }

@container (max-width: 360px) {
  .pm-logo, .pm-credits { display: none; }
  .pm-head { padding-left: 8px; }
  .pm-tabs { overflow-x: auto; scrollbar-width: none; }
  .pm-tabs::-webkit-scrollbar { display: none; }
}

/* Start screen */
.pm-start { display: flex; flex-direction: column; gap: 12px; }
.pm-prefs { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; color: var(--sloth-fg-2); }
.pm-cost { text-align: center; font-size: 12px; color: var(--sloth-fg-3); margin-top: -4px; font-variant-numeric: tabular-nums; }
.pm-alt { margin-top: 8px; border-top: 1px solid var(--sloth-line); }
.pm-alt-item { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--sloth-line); }
.pm-alt-item b { font-weight: 600; color: var(--sloth-fg-0); }
.pm-alt-item small { grid-column: 1; font-size: 12px; color: var(--sloth-fg-3); }
.pm-alt-item .ic { grid-row: 1 / 3; grid-column: 2; width: 16px; height: 16px; color: var(--sloth-fg-3); }

/* Waiting */
.pm-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pm-steps li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: start; color: var(--sloth-fg-3); }
.pm-steps .mk { width: 14px; height: 14px; margin-top: 4px; display: grid; place-items: center; }
.pm-steps .mk::before { content: ''; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sloth-line-strong); }
.pm-steps li.done { color: var(--sloth-fg-2); }
.pm-steps li.done .mk::before { display: none; }
.pm-steps li.done .mk .ic { width: 14px; height: 14px; color: var(--sloth-accent-text); }
.pm-steps li.now { color: var(--sloth-fg-0); font-weight: 600; }
.pm-steps li.now .mk::before { background: var(--sloth-accent); box-shadow: none; animation: pm-pulse 1.1s ease-in-out infinite alternate; }
.pm-steps .t { font-size: 12px; color: var(--sloth-fg-3); font-weight: 400; font-variant-numeric: tabular-nums; }
.pm-wait { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; margin-bottom: 22px; }
.pm-wait img { width: 76px; height: auto; }
.pm-sk { display: block; height: 10px; border-radius: 4px; background: var(--sloth-bg-2); animation: pm-pulse 1.6s ease-in-out infinite alternate; }
.pm-sk-blk { display: flex; flex-direction: column; gap: 8px; }
@keyframes pm-pulse { from { opacity: 0.45; } to { opacity: 1; } }

/* Tool row + live label */
.pm-toolrow { display: flex; align-items: center; gap: 4px; margin: -6px -6px 12px 0; min-height: 32px; }
.pm-toolrow .pm-meta { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-live { display: inline-flex; align-items: center; gap: 6px; color: var(--sloth-accent-text); font-weight: 600; }
.pm-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sloth-accent); animation: pm-pulse 1.1s ease-in-out infinite alternate; }

/* Time rail */
.pm-rail { position: relative; --g: 52px; }
.pm-rail::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: calc(var(--g) - 12px); width: 1px; background: var(--sloth-line); }
.pm-blk { position: relative; padding-left: var(--g); }
.pm-blk + .pm-blk { margin-top: 14px; }
.pm-blk.src::before { content: ''; position: absolute; left: calc(var(--g) - 16px); top: 12.8px; width: 9px; height: 1px; background: var(--sloth-line-strong); }
.pm-ts { position: absolute; left: -4px; width: calc(var(--g) - 18px); top: 3.8px; height: 18px; line-height: 18px; text-align: right; font: 500 12px/18px var(--font-ui); color: var(--sloth-fg-3); font-variant-numeric: tabular-nums; }
.pm-ts:hover { color: var(--sloth-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.pm-blk.now .pm-ts { color: var(--sloth-accent-text); font-weight: 600; }
.pm-dot { position: absolute; left: calc(var(--g) - 16px); top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--sloth-accent); box-shadow: 0 0 0 3px var(--sloth-bg-0); opacity: 0; transition: top var(--dur-slow) var(--ease), opacity var(--dur-base); }
.pm-dot.on { opacity: 1; }
.pm-h { font: 600 14px/1.3 var(--font-ui); color: var(--sloth-fg-0); }
.pm-blk.pm-h { margin-top: 26px; }
.pm-blk.pm-h:first-child { margin-top: 0; }
.pm-chip { display: inline-block; padding: 0 4px; border-radius: 4px; background: var(--sloth-accent-soft); color: var(--sloth-accent-text); font: 600 0.8em/1.5 var(--font-ui); font-variant-numeric: tabular-nums; vertical-align: 0.06em; }
.pm-vref { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 9px; background: var(--sloth-bg-2); color: var(--sloth-fg-1); font: 600 11px/1 var(--font-ui); vertical-align: 0.1em; }
.pm-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.16em; background: var(--sloth-accent); animation: pm-blink 1s steps(1) infinite; }
@keyframes pm-blink { 50% { opacity: 0; } }
.pm-end { margin-top: 22px; padding: 14px 0 4px 52px; border-top: 1px solid var(--sloth-line); }
.pm-end .pm-meta { margin-bottom: 12px; }
.pm-end-actions { display: flex; gap: 8px; }

/* Transcript */
.pm-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--sloth-line-strong); color: var(--sloth-fg-1); margin-bottom: 14px; }
.pm-search .ic { width: 16px; height: 16px; color: var(--sloth-fg-3); }
.pm-search small { margin-left: auto; font-size: 12px; color: var(--sloth-fg-3); }
.pm-tr .pm-blk { font-size: 14px; line-height: 1.6; color: var(--sloth-fg-2); }
.pm-tr .pm-blk.src::before { top: 11px; }
.pm-tr .pm-ts { top: 2px; }
.pm-tr .pm-blk.now { color: var(--sloth-fg-0); }
.pm-tr mark { background: var(--sloth-accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Chat */
.pm-chat { display: flex; flex-direction: column; height: 100%; }
.pm-chat .pm-scroll { flex: 1; padding: 16px; }
.pm-user { margin: 0 0 18px auto; max-width: 82%; padding: 9px 12px; border-radius: var(--radius-md); background: var(--sloth-bg-1); color: var(--sloth-fg-1); width: fit-content; }
.pm-typing { display: inline-flex; gap: 4px; padding: 8px 0 8px 52px; }
.pm-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sloth-fg-3); animation: pm-bounce 1.2s infinite ease-in-out; }
.pm-typing i:nth-child(2) { animation-delay: 0.15s; }
.pm-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes pm-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.pm-input { border-top: 1px solid var(--sloth-line); padding: 10px 16px 8px; flex-shrink: 0; }
.pm-box { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 6px 0 12px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--sloth-line-strong); color: var(--sloth-fg-3); }
.pm-send { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--sloth-bg-2); color: var(--sloth-fg-3); }
.pm-send .ic { width: 16px; height: 16px; }
.pm-hints { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--sloth-fg-3); }

/* Quiz */
.pm-seg { display: flex; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--sloth-bg-1); }
.pm-seg span { flex: 1; text-align: center; height: 30px; line-height: 30px; border-radius: 8px; color: var(--sloth-fg-2); white-space: nowrap; padding: 0 10px; }
.pm-seg span.on { background: var(--sloth-bg-0); color: var(--sloth-fg-0); font-weight: 600; box-shadow: 0 0 0 1px var(--sloth-line); }
.pm-seg.inline { display: inline-flex; }
.pm-seg.inline span { flex: none; }
.pm-prog { height: 3px; border-radius: 2px; background: var(--sloth-bg-2); margin: 14px 0 16px; overflow: hidden; }
.pm-prog i { display: block; height: 100%; background: var(--sloth-accent); }
.pm-card { min-height: 196px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--sloth-bg-1); transition: background-color var(--dur-slow) var(--ease); }
.pm-card.flipped { background: var(--sloth-accent-soft); }
.pm-card-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--sloth-fg-3); margin-bottom: 10px; }
.pm-card .pm-read { font-size: 16px; }
.pm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.pm-pair .pm-btn { height: 44px; }

/* Channel sub-header */
.pm-sub { display: flex; align-items: center; gap: 6px; height: 50px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--sloth-line); flex-shrink: 0; color: var(--sloth-fg-0); font-weight: 500; }
.pm-sub .ic { width: 16px; height: 16px; color: var(--sloth-fg-3); }

/* Fake pointer used by the hero demo */
.pm-cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: transform 700ms var(--ease), opacity var(--dur-base); filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35)); }
.pm-cursor.on { opacity: 1; }
.pm-cursor.click::after { content: ''; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--sloth-accent); animation: pm-ripple 500ms var(--ease) forwards; }
@keyframes pm-ripple { from { transform: scale(0.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

/* Channel mode: describe → AI pick → analyze */
.pm-mode [data-act] { cursor: pointer; }
.pm-ch-top { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--sloth-line); flex-shrink: 0; }
.pm-ch-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pm-ch-row b { font-size: 15px; font-weight: 600; color: var(--sloth-fg-0); }
.pm-ask-text { color: var(--sloth-fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-ask-text.is-typed { color: var(--sloth-fg-0); }
.pm-send.on { background: var(--sloth-accent); color: var(--sloth-on-accent); }
.pm-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pm-chips > span:not(.pm-meta) { padding: 3px 9px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--sloth-line-strong); font-size: 12px; color: var(--sloth-fg-1); }
.pm-chips .pm-meta { margin-left: auto; }
.pm-body.is-flush > .pm-ch-list { padding: 10px 0 0; }
.pm-note { display: grid; grid-template-columns: 18px 1fr; gap: 8px; margin: 10px 12px 0; flex-shrink: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--sloth-bg-1); color: var(--sloth-fg-1); font-size: 13px; line-height: 1.5; }
.pm-note .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--sloth-accent-text); }
.pm-vrow { display: grid; grid-template-columns: 18px 72px 1fr; gap: 10px; align-items: start; padding: 9px 16px; transition: background-color var(--dur-base) var(--ease); }
.pm-vrow.on { background: var(--sloth-accent-soft); }
.pm-check { width: 18px; height: 18px; margin-top: 12px; display: grid; place-items: center; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--sloth-line-strong); color: transparent; }
.pm-check .ic { width: 12px; height: 12px; }
.pm-vrow.on .pm-check { background: var(--sloth-accent); box-shadow: none; color: var(--sloth-on-accent); }
.pm-thumb { position: relative; width: 72px; aspect-ratio: 16 / 9; border-radius: 6px; background: hsl(var(--h) 14% 80%); }
:root[data-theme="dark"] .pm-thumb { background: hsl(var(--h) 10% 26%); }
.pm-thumb i { position: absolute; right: 3px; bottom: 3px; padding: 0 3px; border-radius: 3px; background: rgb(0 0 0 / 0.78); color: #fff; font: 600 10px/1.5 var(--font-ui); font-style: normal; }
.pm-vrow b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; font-size: 13.5px; line-height: 1.35; color: var(--sloth-fg-0); }
.pm-vrow small { display: block; margin-top: 2px; font-size: 12px; color: var(--sloth-fg-3); }
.pm-vrow em { font-style: normal; font-weight: 600; color: var(--sloth-accent-text); }
.pm-bulk { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--sloth-line); flex-shrink: 0; }
.pm-bulk b { display: block; font-weight: 600; color: var(--sloth-fg-0); }
.pm-bulk small { font-size: 12px; color: var(--sloth-fg-3); }

.pm-box.is-focus { box-shadow: inset 0 0 0 1.5px var(--sloth-accent); }
.pm-card[data-act] { cursor: pointer; }
.pm-flip-hint { margin-top: 18px; }

.pm-opts { display: flex; flex-direction: column; gap: 8px; }
.pm-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--sloth-line-strong); color: var(--sloth-fg-1); }
.pm-opt i { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; background: var(--sloth-bg-1); font: 600 12px/1 var(--font-ui); font-style: normal; color: var(--sloth-fg-2); }
.pm-opt i .ic { width: 14px; height: 14px; }
.pm-opt.right { background: var(--sloth-success-soft); box-shadow: inset 0 0 0 1.5px var(--sloth-success); color: var(--sloth-fg-0); font-weight: 600; }
.pm-opt.right i { background: var(--sloth-success); color: var(--sloth-bg-0); }
.pm-explain { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--sloth-fg-2); }
.pm-qfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; min-height: 36px; }