/* Vlotube Shorts player - YouTube-style vertical feed, same on every theme. */
.vts {
  --vts-top: 64px;
  --vts-h: calc(100dvh - var(--vts-top));
  --vts-fg: #fff;
  --vts-accent: var(--vt-tally, var(--vt-brand, #ff0033));
  position: relative; width: 100%; height: var(--vts-h); overflow: hidden; color: inherit;
  font-family: "Roboto", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}
.vts *, .vts *::before, .vts *::after { box-sizing: border-box; }
.vts svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.vts button { font: inherit; color: inherit; }
.vts [hidden] { display: none !important; }

.vts-feed { height: 100%; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; scroll-behavior: smooth; }
.vts-feed::-webkit-scrollbar { display: none; }
.vts-item { height: var(--vts-h); scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 0; }

/* the 9:16 stage */
.vts-stage { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: calc(100vw - 120px); border-radius: 16px; overflow: hidden; background: #000; color: var(--vts-fg); box-shadow: 0 10px 40px -18px rgba(0, 0, 0, .6); isolation: isolate; }
.vts-poster, .vts-media, .vts-media video, .vts-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vts-poster { object-fit: cover; z-index: 0; }
.vts-media { z-index: 1; }
.vts-media video { object-fit: cover; background: transparent; }
.vts-media iframe { pointer-events: none; transform: scale(1.02); }
.vts-tap { position: absolute; inset: 0; z-index: 2; background: transparent; border: 0; cursor: pointer; }
.vts-shade { position: absolute; inset: auto 0 0 0; height: 45%; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); }
.vts-shade--top { inset: 0 0 auto 0; height: 90px; background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }

.vts-top { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 4; display: flex; justify-content: space-between; pointer-events: none; }
.vts-top .vts-iconbtn { pointer-events: auto; }
.vts-iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .35); color: #fff !important; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); transition: background .15s, transform .15s; }
.vts-iconbtn:hover { background: rgba(0, 0, 0, .55); }
.vts-iconbtn:active { transform: scale(.92); }
.vts-iconbtn svg { width: 22px; height: 22px; }

.vts-bigplay { position: absolute; left: 50%; top: 50%; z-index: 3; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0, 0, 0, .45); display: grid; place-items: center; pointer-events: none; opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s; }
.vts-bigplay svg { width: 38px; height: 38px; }
.vts-item.is-paused .vts-bigplay { opacity: 1; transform: none; }
.vts-spinner { position: absolute; left: 50%; top: 50%; z-index: 3; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: vts-spin .8s linear infinite; opacity: 0; pointer-events: none; transition: opacity .2s; }
.vts-item.is-loading .vts-spinner { opacity: 1; }
@keyframes vts-spin { to { transform: rotate(360deg); } }

.vts-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 14px 16px 20px; pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.vts-info a, .vts-info button { pointer-events: auto; }
.vts-owner { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; }
.vts-owner img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: #333; }
.vts-owner a { color: #fff !important; font-weight: 600; font-size: 15px; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vts-sub { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: #0f0f0f !important; font-weight: 600; font-size: 13px; cursor: pointer; flex: none; text-shadow: none; }
.vts-sub.is-on { background: rgba(255, 255, 255, .22); color: #fff !important; }
.vts-title { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 500; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vts-channel { margin: 4px 0 0; font-size: 13px; opacity: .85; }
.vts-desc { margin: 6px 0 0; font-size: 13px; opacity: .85; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.vts-progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; height: 3px; background: rgba(255, 255, 255, .25); cursor: pointer; }
.vts-progress i { display: block; height: 100%; width: 0; background: var(--vts-accent); }
.vts-progress:hover { height: 6px; }
.vts-note { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); z-index: 4; text-align: center; font-weight: 600; padding: 14px; border-radius: 12px; background: rgba(0, 0, 0, .55); }

/* action rail */
.vts-rail { display: flex; flex-direction: column; align-items: center; gap: 14px; align-self: flex-end; padding-bottom: 8px; }
.vts-act { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; text-decoration: none !important; color: inherit !important; }
.vts-act__btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(127, 127, 127, .16); transition: background .15s, transform .15s; }
.vts-act:hover .vts-act__btn { background: rgba(127, 127, 127, .28); }
.vts-act:active .vts-act__btn { transform: scale(.9); }
.vts-act.is-on .vts-act__btn { background: var(--vts-accent); color: #fff; }
.vts-act.is-on .vts-act__btn svg { fill: currentColor; }
.vts-act__label { font-size: 12px; font-weight: 600; line-height: 1; }
.vts-act img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }

.vts-nav { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); z-index: 10; display: flex; flex-direction: column; gap: 14px; }
.vts-navbtn { width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(127, 127, 127, .18); display: grid; place-items: center; cursor: pointer; transition: background .15s, opacity .15s; }
.vts-navbtn:hover { background: rgba(127, 127, 127, .3); }
.vts-navbtn[disabled] { opacity: .3; cursor: default; }
.vts-create { position: absolute; top: 14px; right: 24px; z-index: 10; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(127, 127, 127, .16); color: inherit !important; text-decoration: none !important; font-weight: 600; font-size: 14px; }
.vts-create:hover { background: rgba(127, 127, 127, .28); }
.vts-create svg { width: 20px; height: 20px; }

/* comments drawer */
.vts-drawer { position: absolute; z-index: 30; top: 12px; bottom: 12px; right: 12px; width: min(420px, calc(100% - 24px)); display: flex; flex-direction: column; border-radius: 16px; background: var(--vt-raised, var(--vt-surface, #fff)); color: var(--vt-ink, var(--vt-text, #0f0f0f)); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .5); animation: vts-in .25s cubic-bezier(.2, .7, .2, 1); overflow: hidden; }
@keyframes vts-in { from { opacity: 0; transform: translateX(24px); } }
.vts-drawer .vts-iconbtn { background: transparent; color: inherit !important; }
.vts-drawer .vts-iconbtn:hover { background: rgba(127, 127, 127, .16); }
.vts-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; border-bottom: 1px solid rgba(127, 127, 127, .2); }
.vts-drawer__head h2 { margin: 0; font-size: 18px; font-weight: 700; color: inherit; }
.vts-drawer__head h2 span { font-weight: 400; opacity: .6; margin-left: 6px; }
.vts-drawer__list { flex: 1; overflow-y: auto; padding: 8px 20px; }
.vts-c { display: flex; gap: 12px; padding: 10px 0; }
.vts-c img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.vts-c__head { font-size: 13px; font-weight: 600; }
.vts-c__head a { color: inherit !important; }
.vts-c__head span { font-weight: 400; opacity: .6; margin-left: 6px; }
.vts-c__text { font-size: 14px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; margin-top: 2px; }
.vts-c__pin { font-size: 11px; opacity: .7; }
.vts-drawer__empty { text-align: center; opacity: .65; padding: 40px 10px; }
.vts-drawer__more { display: block; margin: 8px auto; border: 1px solid rgba(127, 127, 127, .3); background: transparent; border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.vts-drawer__form { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid rgba(127, 127, 127, .2); }
.vts-drawer__form img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.vts-drawer__form input { flex: 1; min-width: 0; height: 40px; border: 0; border-bottom: 1px solid rgba(127, 127, 127, .4); background: transparent; color: inherit; font: inherit; font-size: 14px; outline: none; }
.vts-drawer__form input:focus { border-bottom: 2px solid currentColor; }
.vts-drawer__form button { height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: #065fd4; color: #fff !important; font-weight: 600; cursor: pointer; }
.vts-drawer__form button[disabled] { opacity: .5; }
.vts-drawer__login { display: block; text-align: center; padding: 14px; border-top: 1px solid rgba(127, 127, 127, .2); font-weight: 600; }

.vts-toast { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 40; background: #0f0f0f; color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; }
.vts-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.vts-empty > svg { width: 64px; height: 64px; opacity: .4; }
.vts-empty h2 { margin: 0; font-size: 20px; }
.vts-empty__btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--vts-accent); color: #fff !important; font-weight: 600; text-decoration: none !important; }

/* phones: full-bleed player, rail over the video */
@media (max-width: 700px) {
  .vts-item { padding: 0; gap: 0; position: relative; }
  .vts-stage { height: 100%; width: 100%; max-width: none; aspect-ratio: auto; border-radius: 0; }
  .vts-rail { position: absolute; right: 8px; bottom: 90px; z-index: 6; color: #fff; }
  .vts-act__btn { background: rgba(0, 0, 0, .3); backdrop-filter: blur(6px); }
  .vts-act__label { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
  .vts-info { padding-right: 72px; }
  .vts-nav { display: none; }
  .vts-create { top: 12px; right: 64px; color: #fff !important; background: rgba(0, 0, 0, .35); z-index: 12; }
  .vts-drawer { top: auto; bottom: 0; right: 0; left: 0; width: 100%; height: 70%; border-radius: 16px 16px 0 0; }
}
@media (min-width: 701px) and (max-width: 1100px) { .vts-nav { right: 12px; } .vts-navbtn { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .vts-feed { scroll-behavior: auto; } .vts *, .vts *::before { animation: none !important; transition: none !important; } }