.dp-engagement{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0;align-items:center}.dp-engagement button{border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;border-radius:999px;padding:9px 13px;cursor:pointer;font:inherit}.dp-engagement button:hover{background:rgba(127,127,127,.1)}.dp-engagement button.active{font-weight:700;background:rgba(255,0,0,.12);border-color:rgba(255,0,0,.35)}.dp-engagement .dp-count{opacity:.72;margin-left:4px}.dp-comments{margin:18px 0}.dp-comment-form{display:flex;gap:8px;margin:12px 0}.dp-comment-form textarea{flex:1;min-height:70px;padding:10px;border:1px solid rgba(127,127,127,.35);border-radius:10px;background:transparent;color:inherit;resize:vertical}.dp-comment-list{display:grid;gap:10px}.dp-comment{padding:12px;border:1px solid rgba(127,127,127,.2);border-radius:10px}.dp-comment-meta{font-size:.85em;opacity:.7;margin-bottom:5px}.dp-save-note,.dp-share-note{font-size:.9em;opacity:.75;margin-top:8px}.short-engagement{position:absolute;right:18px;bottom:86px;z-index:5;display:flex;flex-direction:column;gap:8px}.short-engagement button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.48);color:#fff;cursor:pointer;font-size:18px}.short-engagement .dp-count{display:block;font-size:10px}.short-feed-item{position:relative}
@media(max-width:700px){.dp-engagement{gap:6px}.dp-engagement button{padding:8px 10px}.short-engagement{right:10px;bottom:72px}}

/* DoliPlay 2.5.6 - Shorts comments interaction fix */
.short-feed-item .dp-comments{
  position:relative;
  z-index:50;
  pointer-events:auto;
  touch-action:auto;
  background:inherit;
}
.short-feed-item .dp-comments[hidden]{display:none !important}
.short-feed-item .dp-comment-form,
.short-feed-item .dp-comment-form textarea,
.short-feed-item .dp-comment-form button,
.short-feed-item .dp-comment-list{
  position:relative;
  z-index:51;
  pointer-events:auto;
}
.short-feed-item .dp-comment-form textarea{
  user-select:text;
  -webkit-user-select:text;
  touch-action:auto;
}
.short-feed-item .dp-comment-form button{
  touch-action:manipulation;
}


/* DoliPlay 2.5.7 — Shorts comments split view */
.short-stage{display:flex;align-items:stretch;justify-content:center;gap:14px;width:100%;min-height:min(86vh,900px)}
.short-video-column{position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.short-comments-panel{width:min(520px,42vw);height:min(86vh,900px);background:#fff;color:#111;border:1px solid #d7d7d7;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.short-comments-panel[hidden]{display:none!important}
.short-feed-item.comments-open .short-stage{justify-content:center}
.short-comments-panel .dp-comments-header{display:flex;align-items:center;gap:8px;padding:16px;border-bottom:1px solid #e5e5e5;font-size:18px;flex:0 0 auto}
.short-comments-panel .dp-comments-total{color:#666;font-weight:500}
.short-comments-panel .dp-comments-close{margin-left:auto;border:0;background:transparent;color:inherit;font-size:28px;line-height:1;cursor:pointer;padding:2px 8px}
.short-comments-panel .dp-comment-list{flex:1 1 auto;overflow-y:auto;padding:8px 14px;min-height:0;overscroll-behavior:contain;touch-action:pan-y}
.short-comments-panel .dp-comment{padding:14px 4px;border-bottom:1px solid #eee}
.short-comments-panel .dp-comment-meta{font-weight:600;margin-bottom:5px}
.short-comments-panel .dp-comment-form{display:flex;gap:8px;align-items:flex-end;padding:12px;border-top:1px solid #e5e5e5;background:#fff;flex:0 0 auto}
.short-comments-panel .dp-comment-form textarea{flex:1;min-height:44px;max-height:120px;resize:vertical;border:1px solid #ccc;border-radius:22px;padding:11px 14px;box-sizing:border-box;outline:none;color:#111;background:#fff;user-select:text;-webkit-user-select:text;touch-action:auto}
.short-comments-panel .dp-comment-form button{border:0;border-radius:20px;padding:10px 16px;cursor:pointer;background:#111;color:#fff;touch-action:manipulation}
@media(max-width:900px){
  .short-stage{display:block;min-height:100%;position:relative}
  .short-video-column{width:100%;height:100%}
  .short-comments-panel{position:absolute;z-index:80;left:0;right:0;bottom:0;width:100%;height:min(72vh,720px);border-radius:18px 18px 0 0;box-shadow:0 -10px 35px rgba(0,0,0,.28)}
}

/* DoliPlay 2.5.8 Split View Fix
   Preserve the Shorts player dimensions when the comments panel is opened. */
.shorts-feed{width:100%;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain}
.short-feed-item{width:100%;min-height:min(90vh,920px);height:min(90vh,920px);scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:14px}
.short-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:18px;box-sizing:border-box}
.short-video-column{position:relative;flex:0 0 auto;width:min(56vw,520px);height:min(88vh,900px);display:flex;align-items:center;justify-content:center;min-width:280px;min-height:500px}
.short-player-wrap{position:relative;width:100%;height:100%;max-width:520px;max-height:900px;aspect-ratio:9/16;background:#000;border-radius:14px;overflow:hidden;display:block}
.short-player{display:block;width:100%;height:100%;border:0;background:#000}
.short-overlay{position:absolute;inset:0;pointer-events:none;z-index:4}
.short-info,.short-actions{pointer-events:auto}
.short-engagement{z-index:12}
.short-comments-panel{flex:0 0 min(42vw,520px);width:min(42vw,520px);height:min(88vh,900px);min-height:500px;box-sizing:border-box}
.short-comments-panel:not([hidden]){display:flex}
.short-comments-panel .dp-comment-form,
.short-comments-panel .dp-comment-form textarea,
.short-comments-panel .dp-comment-form button,
.short-comments-panel .dp-comment-list,
.short-comments-panel .dp-comments-close{pointer-events:auto}
.short-comments-panel .dp-comment-form textarea{cursor:text}
.short-feed-item.comments-open .short-video-column{width:min(48vw,520px)}
.short-feed-item.comments-open .short-player-wrap{max-width:520px}
@media (max-width:1100px) and (min-width:701px){
  .short-feed-item{padding:10px}
  .short-stage{gap:10px}
  .short-video-column{width:min(50vw,480px)}
  .short-comments-panel{flex-basis:min(44vw,460px);width:min(44vw,460px)}
}
@media (max-width:700px){
  .short-feed-item{height:100dvh;min-height:100dvh;padding:0}
  .short-stage{display:block;position:relative;width:100%;height:100%}
  .short-video-column{width:100%;height:100%;min-width:0;min-height:0}
  .short-player-wrap{width:100%;height:100%;max-width:none;max-height:none;border-radius:0;aspect-ratio:auto}
  .short-comments-panel{position:absolute;left:0;right:0;bottom:0;z-index:80;width:100%;height:min(72dvh,720px);min-height:0;flex-basis:auto}
}

/* DoliPlay 2.5.8.2 — Preserve complete 9:16 Shorts video */
.short-feed-item{
  width:100%;
  min-height:100vh;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  box-sizing:border-box;
  padding:0;
}
.short-stage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  box-sizing:border-box;
}
.short-video-column{
  position:relative;
  flex:0 0 auto;
  width:auto !important;
  height:calc(100vh - 32px) !important;
  aspect-ratio:9/16 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:calc((100vw - 560px) * 9 / 16) !important;
}
.short-player-wrap{
  width:100% !important;
  height:100% !important;
  aspect-ratio:9/16 !important;
  max-width:none !important;
  max-height:none !important;
  background:#000;
  border-radius:14px;
  overflow:hidden;
}
.short-player{
  width:100% !important;
  height:100% !important;
  display:block;
  object-fit:contain;
  background:#000;
}
.short-comments-panel{
  flex:0 0 min(420px,32vw);
  width:min(420px,32vw);
  height:calc(100vh - 32px);
  max-height:none;
  min-height:0;
  box-sizing:border-box;
  overflow:hidden;
}
.short-feed-item.comments-open .short-video-column{
  width:auto !important;
  height:calc(100vh - 32px) !important;
  aspect-ratio:9/16 !important;
}
.short-feed-item.comments-open .short-player-wrap{
  width:100% !important;
  height:100% !important;
  aspect-ratio:9/16 !important;
}
@media (max-width:1100px) and (min-width:701px){
  .short-stage{gap:16px}
  .short-video-column{
    height:calc(100vh - 24px) !important;
    max-width:calc((100vw - 500px) * 9 / 16) !important;
  }
  .short-comments-panel{
    flex-basis:360px;
    width:360px;
    height:calc(100vh - 24px);
  }
}
@media (max-width:700px){
  .short-feed-item{
    height:100dvh;
    min-height:100dvh;
    padding:0;
  }
  .short-stage{
    display:block;
    width:100%;
    height:100%;
  }
  .short-video-column{
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    max-width:none !important;
  }
  .short-player-wrap{
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    border-radius:0;
  }
  .short-player{
    object-fit:contain;
  }
  .short-comments-panel{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:80;
    width:100%;
    height:min(72dvh,720px);
    flex-basis:auto;
  }
}

/* DoliPlay 2.5.8.3 — Final Shorts layout/theme fix
   Desktop: complete 9:16 Short on the left, comments on the right.
   Mobile: full-screen 9:16-style player with comments as a bottom sheet. */

/* The feed itself is the vertical navigation surface. */
.shorts-feed{
  width:100%;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
.short-feed-item{
  width:100%;
  height:100vh;
  min-height:100vh;
  padding:0;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}
.short-stage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  box-sizing:border-box;
  padding:16px;
}
.short-video-column{
  position:relative;
  flex:0 0 auto;
  width:min(520px, calc(100vw - 444px), 56.25vh);
  height:auto !important;
  aspect-ratio:9 / 16 !important;
  min-width:270px;
  min-height:480px;
  max-height:calc(100vh - 32px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.short-player-wrap{
  position:relative;
  width:100% !important;
  height:100% !important;
  aspect-ratio:9 / 16 !important;
  max-width:none !important;
  max-height:none !important;
  background:#000;
  border-radius:14px;
  overflow:hidden;
}
.short-player{
  display:block;
  width:100% !important;
  height:100% !important;
  aspect-ratio:9 / 16 !important;
  border:0;
  background:#000;
  object-fit:contain;
}
.short-feed-item.comments-open .short-video-column{
  width:min(520px, calc(100vw - 444px), 56.25vh) !important;
  aspect-ratio:9 / 16 !important;
}
.short-comments-panel{
  flex:0 0 min(420px, 32vw);
  width:min(420px, 32vw);
  height:min(calc(100vh - 32px), 900px);
  min-height:480px;
  max-height:calc(100vh - 32px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  border-radius:14px;
  border:1px solid var(--dp-comment-border, #d7d7d7);
  background:var(--dp-comment-bg, #fff);
  color:var(--dp-comment-text, #111);
  box-shadow:0 8px 30px rgba(0,0,0,.18);
}
.short-comments-panel[hidden]{display:none !important}
.short-comments-panel .dp-comments-header{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  padding:16px;
  border-bottom:1px solid var(--dp-comment-divider, #e5e5e5);
  color:var(--dp-comment-text, #111);
}
.short-comments-panel .dp-comments-total{
  color:var(--dp-comment-muted, #666);
  font-weight:500;
}
.short-comments-panel .dp-comments-close{
  margin-left:auto;
  border:0;
  background:transparent;
  color:var(--dp-comment-text, #111);
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.short-comments-panel .dp-comment-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:8px 14px;
  overscroll-behavior:contain;
  touch-action:pan-y;
  color:var(--dp-comment-text, #111);
}
.short-comments-panel .dp-comment{
  padding:14px 4px;
  border-bottom:1px solid var(--dp-comment-divider, #eee);
  color:var(--dp-comment-text, #111);
  background:transparent;
}
.short-comments-panel .dp-comment-meta{
  color:var(--dp-comment-meta, #666);
  font-weight:600;
  margin-bottom:5px;
}
.short-comments-panel .dp-comment-form{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  align-items:flex-end;
  padding:12px;
  margin:0;
  border-top:1px solid var(--dp-comment-divider, #e5e5e5);
  background:var(--dp-comment-form-bg, #fff);
}
.short-comments-panel .dp-comment-form textarea{
  flex:1;
  min-height:44px;
  max-height:120px;
  resize:vertical;
  border:1px solid var(--dp-comment-input-border, #ccc);
  border-radius:22px;
  padding:11px 14px;
  box-sizing:border-box;
  outline:none;
  color:var(--dp-comment-text, #111);
  background:var(--dp-comment-input-bg, #fff);
  caret-color:var(--dp-comment-text, #111);
  user-select:text;
  -webkit-user-select:text;
  touch-action:auto;
}
.short-comments-panel .dp-comment-form textarea::placeholder{
  color:var(--dp-comment-placeholder, #777);
  opacity:1;
}
.short-comments-panel .dp-comment-form button{
  border:0;
  border-radius:20px;
  padding:10px 16px;
  cursor:pointer;
  background:#111;
  color:#fff;
  touch-action:manipulation;
}

/* Dark DoliPlay themes: readable white text on black/dark surfaces. */
html.dark,
body.dark,
html[data-theme="dark"],
body[data-theme="dark"],
html[data-mode="dark"],
body[data-mode="dark"]{
  --dp-comment-bg:#0b0b0d;
  --dp-comment-text:#fff;
  --dp-comment-muted:#c9c9c9;
  --dp-comment-meta:#bdbdbd;
  --dp-comment-border:#2c2c30;
  --dp-comment-divider:#2a2a2e;
  --dp-comment-form-bg:#0b0b0d;
  --dp-comment-input-bg:#17171a;
  --dp-comment-input-border:#4a4a50;
  --dp-comment-placeholder:#bdbdbd;
}
@media (prefers-color-scheme:dark){
  :root{
    --dp-comment-bg:#0b0b0d;
    --dp-comment-text:#fff;
    --dp-comment-muted:#c9c9c9;
    --dp-comment-meta:#bdbdbd;
    --dp-comment-border:#2c2c30;
    --dp-comment-divider:#2a2a2e;
    --dp-comment-form-bg:#0b0b0d;
    --dp-comment-input-bg:#17171a;
    --dp-comment-input-border:#4a4a50;
    --dp-comment-placeholder:#bdbdbd;
  }
}

/* Medium desktop/tablet: keep the entire 9:16 video visible. */
@media (max-width:1100px) and (min-width:701px){
  .short-stage{gap:16px;padding:12px}
  .short-video-column{
    width:min(470px, calc(100vw - 400px), 56.25vh) !important;
    min-width:250px;
  }
  .short-comments-panel{
    flex-basis:360px;
    width:360px;
    height:min(calc(100vh - 24px), 860px);
  }
}

/* Mobile: preserve the vertical player and use a comments sheet. */
@media (max-width:700px){
  .short-feed{
    height:100dvh;
  }
  .short-feed-item{
    height:100dvh;
    min-height:100dvh;
  }
  .short-stage{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    padding:0;
  }
  .short-video-column{
    width:100% !important;
    height:100% !important;
    min-width:0;
    min-height:0;
    max-height:none;
    aspect-ratio:9 / 16 !important;
  }
  .short-player-wrap{
    width:100% !important;
    height:100% !important;
    aspect-ratio:9 / 16 !important;
    border-radius:0;
  }
  .short-player{
    width:100% !important;
    height:100% !important;
    object-fit:contain;
  }
  .short-comments-panel{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:80;
    width:100%;
    height:min(72dvh,720px);
    min-height:0;
    max-height:72dvh;
    border-radius:18px 18px 0 0;
  }
}

/* DoliPlay 2.5.8.4 — YouTube-style centered Shorts presentation
   Desktop: centered complete 9:16 Short. Comments open to the right
   without resizing/cropping the Short. Dark UI uses white text. */

html,body{
  background:#000;
}

.shorts-feed{
  width:100%;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-y:contain;
  background:#000;
}

.short-feed-item{
  width:100%;
  height:100vh;
  min-height:100vh;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  background:#000;
  box-sizing:border-box;
}

.short-stage{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  background:#000;
  box-sizing:border-box;
  padding:16px;
}

/* The Short itself is ALWAYS a complete 9:16 surface. */
.short-video-column{
  position:relative;
  flex:0 0 auto !important;
  width:auto !important;
  height:min(92vh, 920px) !important;
  aspect-ratio:9 / 16 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:none !important;
}

.short-player-wrap{
  position:relative;
  width:100% !important;
  height:100% !important;
  aspect-ratio:9 / 16 !important;
  max-width:none !important;
  max-height:none !important;
  background:#000 !important;
  border-radius:12px;
  overflow:hidden;
}

.short-player{
  display:block;
  width:100% !important;
  height:100% !important;
  aspect-ratio:9 / 16 !important;
  object-fit:contain !important;
  background:#000 !important;
}

/* Comments do NOT resize the Short. They occupy a separate column. */
.short-comments-panel{
  display:none;
  flex:0 0 420px;
  width:420px;
  height:min(92vh, 920px);
  min-height:0;
  max-height:calc(100vh - 32px);
  box-sizing:border-box;
  overflow:hidden;
  background:#090909 !important;
  color:#fff !important;
  border:1px solid #2d2d2d;
  border-radius:12px;
}

.short-feed-item.comments-open .short-comments-panel{
  display:flex !important;
  flex-direction:column;
}

.short-feed-item.comments-open .short-video-column{
  width:auto !important;
  height:min(92vh, 920px) !important;
  aspect-ratio:9 / 16 !important;
  flex:0 0 auto !important;
}

/* Dark comments panel — readable white text everywhere. */
.short-comments-panel,
.short-comments-panel *{
  color:#fff;
}

.short-comments-panel .dp-comments-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:16px;
  background:#090909;
  color:#fff;
  border-bottom:1px solid #2d2d2d;
}

.short-comments-panel .dp-comments-total,
.short-comments-panel .dp-comment-meta{
  color:#cfcfcf !important;
}

.short-comments-panel .dp-comments-close{
  margin-left:auto;
  color:#fff !important;
  background:transparent;
  border:0;
  cursor:pointer;
}

.short-comments-panel .dp-comment-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  background:#090909;
  color:#fff;
  overscroll-behavior:contain;
}

.short-comments-panel .dp-comment{
  color:#fff !important;
  background:#090909;
  border-bottom:1px solid #262626;
}

.short-comments-panel .dp-comment-form{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:12px;
  background:#090909;
  border-top:1px solid #2d2d2d;
}

.short-comments-panel .dp-comment-form textarea{
  flex:1;
  min-height:44px;
  border:1px solid #4a4a4a;
  border-radius:22px;
  padding:11px 14px;
  background:#171717 !important;
  color:#fff !important;
  caret-color:#fff;
  outline:none;
}

.short-comments-panel .dp-comment-form textarea::placeholder{
  color:#bdbdbd !important;
  opacity:1;
}

.short-comments-panel .dp-comment-form button{
  border:0;
  border-radius:20px;
  padding:10px 16px;
  background:#fff;
  color:#000 !important;
  cursor:pointer;
}

/* Keep the centered Short visually centered when comments are closed. */
.short-feed-item:not(.comments-open) .short-stage{
  justify-content:center;
}

/* With comments open: Short remains complete 9:16, panel is simply placed right. */
.short-feed-item.comments-open .short-stage{
  justify-content:center;
}

/* Tablet */
@media (max-width:1100px) and (min-width:701px){
  .short-stage{gap:16px;padding:12px}
  .short-video-column,
  .short-feed-item.comments-open .short-video-column{
    height:min(90vh,820px) !important;
  }
  .short-comments-panel{
    flex-basis:360px;
    width:360px;
    height:min(90vh,820px);
  }
}

/* Mobile: centered vertical Short; comments become a dark bottom sheet. */
@media (max-width:700px){
  .short-feed-item{
    height:100dvh;
    min-height:100dvh;
  }

  .short-stage{
    display:block;
    width:100%;
    height:100%;
    padding:0;
  }

  .short-video-column,
  .short-feed-item.comments-open .short-video-column{
    width:100% !important;
    height:100% !important;
    aspect-ratio:9 / 16 !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .short-player-wrap{
    width:100% !important;
    height:100% !important;
    border-radius:0;
  }

  .short-comments-panel,
  .short-feed-item.comments-open .short-comments-panel{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:80;
    width:100%;
    height:72dvh;
    max-height:72dvh;
    border-radius:18px 18px 0 0;
    flex-basis:auto;
  }
}

/* DoliPlay 2.5.8.5 — final Shorts presentation layer */
.shorts-feed,
.short-feed-item,
.short-stage{
  background:#000 !important;
}

.short-feed-item{
  height:100vh !important;
  min-height:100vh !important;
  overflow:hidden !important;
}

.short-stage{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:24px !important;
  padding:16px !important;
  box-sizing:border-box !important;
}

/* Never resize the actual Short because comments are opened. */
.short-video-column,
.short-feed-item.comments-open .short-video-column{
  flex:0 0 auto !important;
  width:auto !important;
  height:min(92vh,920px) !important;
  aspect-ratio:9 / 16 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:calc(100vh - 32px) !important;
}

.short-player-wrap,
.short-feed-item.comments-open .short-player-wrap{
  width:100% !important;
  height:100% !important;
  aspect-ratio:9 / 16 !important;
  max-width:none !important;
  max-height:none !important;
  background:#000 !important;
}

.short-player{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:#000 !important;
}

/* Comments are a separate right-hand column. */
.short-comments-panel{
  flex:0 0 420px !important;
  width:420px !important;
  height:min(92vh,920px) !important;
  max-height:calc(100vh - 32px) !important;
  min-height:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  background:#090909 !important;
  color:#fff !important;
  border:1px solid #2d2d2d !important;
  border-radius:12px !important;
}

.short-comments-panel .dp-comment-list{
  overflow-y:auto !important;
  min-height:0 !important;
  flex:1 1 auto !important;
  background:#090909 !important;
  color:#fff !important;
}

.short-comments-panel .dp-comment,
.short-comments-panel .dp-comment-meta,
.short-comments-panel .dp-comments-total{
  color:#fff !important;
}

.short-comments-panel .dp-comment-form{
  background:#090909 !important;
  color:#fff !important;
  border-top:1px solid #2d2d2d !important;
}

.short-comments-panel .dp-comment-form textarea{
  background:#171717 !important;
  color:#fff !important;
  border:1px solid #4a4a4a !important;
  caret-color:#fff !important;
}

.short-comments-panel .dp-comment-form textarea::placeholder{
  color:#bdbdbd !important;
}

.short-comments-panel .dp-comment-form button{
  background:#fff !important;
  color:#000 !important;
}

/* Do not allow comment-list scrolling to change the Shorts feed. */
.short-comments-panel .dp-comment-list{
  overscroll-behavior:contain !important;
  touch-action:pan-y !important;
}

@media (max-width:700px){
  .short-stage{
    display:block !important;
    padding:0 !important;
  }

  .short-video-column,
  .short-feed-item.comments-open .short-video-column{
    width:100% !important;
    height:100% !important;
    aspect-ratio:9 / 16 !important;
    max-width:none !important;
    max-height:none !important;
  }

  .short-player-wrap{
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
  }

  .short-comments-panel{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:72dvh !important;
    max-height:72dvh !important;
    border-radius:18px 18px 0 0 !important;
    z-index:80 !important;
  }
}


/* DoliPlay 2.5.8.7 — Shorts navigation controls only. */
.short-video-column{
  position:relative !important;
}

.short-nav-controls{
  position:absolute !important;
  left:-76px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
  z-index:70 !important;
}

.short-nav-button{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  min-height:56px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#f2f2f2 !important;
  color:#111 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:none !important;
  font-size:30px !important;
  line-height:1 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  transition:background .15s ease,transform .15s ease !important;
}

.short-nav-button:hover{
  background:#e7e7e7 !important;
}

.short-nav-button:active{
  transform:scale(.94) !important;
}

.short-nav-button:focus-visible{
  outline:2px solid #111 !important;
  outline-offset:3px !important;
}

@media (max-width:900px){
  .short-nav-controls{
    left:12px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
  }
}

@media (max-width:700px){
  .short-nav-controls{
    left:10px !important;
    top:50% !important;
    gap:12px !important;
  }
  .short-nav-button{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    font-size:27px !important;
    background:rgba(242,242,242,.94) !important;
  }
}
\n\n/* DoliPlay 2.5.8.8 — Arrow navigation only. */
.shorts-feed{
  overflow:hidden !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;
  scroll-snap-type:none !important;
  scroll-behavior:smooth !important;
}
.short-feed-item{
  scroll-snap-align:none !important;
  scroll-snap-stop:normal !important;
}
.short-nav-controls{
  left:auto !important;
  right:-76px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:100 !important;
}
@media (max-width:1100px){
  .short-nav-controls{right:12px !important;left:auto !important;}
}
@media (max-width:700px){
  .short-nav-controls{right:10px !important;left:auto !important;gap:12px !important;}
}

/* DoliPlay 2.5.8.9 — lock the Shorts page itself and use arrows as direct navigation. */
html.dp-shorts-lock,
body.dp-shorts-lock{
  overflow:hidden !important;
  height:100% !important;
}

body.dp-shorts-lock .shorts-page{
  height:100dvh !important;
  max-height:100dvh !important;
  overflow:hidden !important;
}

body.dp-shorts-lock .shorts-feed{
  position:relative !important;
  width:100% !important;
  height:calc(100dvh - 1px) !important;
  max-height:calc(100dvh - 1px) !important;
  overflow:hidden !important;
}

body.dp-shorts-lock .short-feed-item{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  display:none !important;
  padding:0 !important;
}

body.dp-shorts-lock .short-feed-item.is-active,
body.dp-shorts-lock .short-feed-item.is-selected{
  display:flex !important;
}

body.dp-shorts-lock .short-stage{
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

@media (max-width:700px){
  body.dp-shorts-lock .short-feed-item.is-active,
  body.dp-shorts-lock .short-feed-item.is-selected{
    display:block !important;
  }
}

/* DoliPlay 2.5.9.0 — Shorts fullscreen viewport correction.
   Remove only the Shorts title/instruction block that was consuming vertical space.
   Preserve all existing Shorts controls and navigation behavior. */
body.dp-shorts-lock .shorts-head{
  display:none !important;
}
body.dp-shorts-lock .shorts-page{
  width:100vw !important;
  height:100dvh !important;
  max-height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}
body.dp-shorts-lock .shorts-feed{
  width:100vw !important;
  height:100dvh !important;
  max-height:100dvh !important;
  margin:0 !important;
  padding:0 !important;
}
body.dp-shorts-lock .short-feed-item.is-active,
body.dp-shorts-lock .short-feed-item.is-selected{
  height:100dvh !important;
  min-height:100dvh !important;
  padding:0 !important;
}
body.dp-shorts-lock .short-video-column{
  height:100dvh !important;
}
body.dp-shorts-lock .short-player-wrap{
  height:100dvh !important;
}
body.dp-shorts-lock .short-comments-panel{
  height:100dvh !important;
}
@media (max-width:700px){
  body.dp-shorts-lock .short-video-column,
  body.dp-shorts-lock .short-player-wrap{
    height:100dvh !important;
  }
}

/* DoliPlay 2.5.9.1 — Keep the Short centered when comments are closed.
   Only corrects horizontal positioning; preserves all existing Shorts behavior. */
@media (min-width:701px){
  body.dp-shorts-lock .short-feed-item:not(.comments-open) .short-stage{
    position:relative !important;
  }
  body.dp-shorts-lock .short-feed-item:not(.comments-open) .short-video-column{
    position:absolute !important;
    left:50% !important;
    right:auto !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    margin:0 !important;
  }
}

/* DoliPlay 2.5.9.2 — True viewport-centered Shorts position.
   Only corrects the horizontal position of the Short when comments are closed.
   Keeps all existing navigation, arrows, fullscreen and no-page-scroll behavior. */
@media (min-width:701px){
  body.dp-shorts-lock .short-feed-item:not(.comments-open) .short-video-column{
    position:fixed !important;
    left:50vw !important;
    right:auto !important;
    top:50vh !important;
    transform:translate(-50%,-50%) !important;
    margin:0 !important;
  }
}

/* DoliPlay 2.5.9.3 — Move existing Shorts navigation arrows to the left.
   Visual position only. Preserve arrow behavior, comments scrolling and all other Shorts functionality. */
@media (min-width:901px){
  .short-nav-controls{
    left:-76px !important;
    right:auto !important;
  }
}
@media (max-width:900px){
  .short-nav-controls{
    left:12px !important;
    right:auto !important;
  }
}
@media (max-width:700px){
  .short-nav-controls{
    left:10px !important;
    right:auto !important;
  }
}

/* DoliPlay 2.5.9.4 — Shorts split layout: Short center-left, comments right.
   When comments are open, the Short occupies the center of the left area and
   the comments panel stays in a separate fixed-width column on the right.
   The 9:16 Short is not resized or pushed by the comments panel. */
@media (min-width:701px){
  body.dp-shorts-lock .short-feed-item.comments-open .short-stage{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 420px !important;
    align-items:center !important;
    justify-content:stretch !important;
    gap:24px !important;
    padding:16px !important;
    box-sizing:border-box !important;
  }

  body.dp-shorts-lock .short-feed-item.comments-open .short-video-column{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    grid-column:1 !important;
    justify-self:center !important;
    margin:0 !important;
    width:auto !important;
    height:min(92vh,920px) !important;
    aspect-ratio:9 / 16 !important;
  }

  body.dp-shorts-lock .short-feed-item.comments-open .short-comments-panel{
    grid-column:2 !important;
    justify-self:stretch !important;
    width:420px !important;
    height:min(92vh,920px) !important;
    max-height:calc(100vh - 32px) !important;
    margin:0 !important;
  }
}

@media (max-width:1100px) and (min-width:701px){
  body.dp-shorts-lock .short-feed-item.comments-open .short-stage{
    grid-template-columns:minmax(0,1fr) 360px !important;
    gap:16px !important;
  }
  body.dp-shorts-lock .short-feed-item.comments-open .short-comments-panel{
    width:360px !important;
  }
}


/* DoliPlay 2.5.9.5 — Desktop-only refinement.
   Keep the 2.5.9.4 desktop layout, reduce the comments panel to a standard width,
   and restore the mobile Shorts experience so this desktop adjustment does not
   alter the phone/app presentation. */
@media (min-width:1101px){
  body.dp-shorts-lock .short-feed-item.comments-open .short-stage{
    grid-template-columns:minmax(0,1fr) 360px !important;
    gap:24px !important;
  }
  body.dp-shorts-lock .short-feed-item.comments-open .short-comments-panel{
    width:360px !important;
    max-width:360px !important;
  }
}

/* 701–1100px desktop/tablet landscape: keep a compact standard comments panel. */
@media (min-width:701px) and (max-width:1100px){
  body.dp-shorts-lock .short-feed-item.comments-open .short-stage{
    grid-template-columns:minmax(0,1fr) 320px !important;
    gap:16px !important;
  }
  body.dp-shorts-lock .short-feed-item.comments-open .short-comments-panel{
    width:320px !important;
    max-width:320px !important;
  }
}

/* Mobile: do not apply the desktop chat/sidebar treatment or desktop arrows. */
@media (max-width:700px){
  body.dp-shorts-lock .short-feed-item .short-nav-controls{
    display:none !important;
  }
  body.dp-shorts-lock .shorts-feed{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scroll-snap-type:y mandatory !important;
    scroll-behavior:smooth !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }
  body.dp-shorts-lock .short-feed-item{
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;
  }
  body.dp-shorts-lock .short-feed-item.is-active,
  body.dp-shorts-lock .short-feed-item.is-selected{
    display:flex !important;
  }
  body.dp-shorts-lock .short-stage{
    display:block !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
  }
  body.dp-shorts-lock .short-video-column{
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    max-width:none !important;
    max-height:none !important;
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
  }
  body.dp-shorts-lock .short-player-wrap{
    width:100% !important;
    height:100% !important;
    aspect-ratio:auto !important;
    border-radius:0 !important;
  }
}

/* DoliPlay 2.5.9.9 — Custom engagement images */
.dp-engagement .dp-custom-icon,.dp-engagement .dp-default-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;transform:translate(var(--dp-x,0),var(--dp-y,0));flex:0 0 auto}
.dp-engagement .dp-custom-icon{object-fit:contain}
.short-engagement .dp-custom-icon,.short-engagement .dp-default-icon{display:block;transform:translate(var(--dp-x,0),var(--dp-y,0));margin:auto;line-height:1}
.short-engagement{right:var(--short-right,18px);bottom:var(--short-bottom,86px);gap:var(--short-gap,8px)}
.short-engagement button{width:var(--short-button-size,48px);height:var(--short-button-size,48px)}
@media(max-width:700px){.short-engagement{right:10px;bottom:var(--short-bottom,72px)}}


/* DoliPlay 2.5.13 — Mobile Shorts viewport enlargement.
   Fill the phone viewport while preserving the vertical Shorts presentation. */
@media (max-width:700px){
  html,body{width:100%;min-width:0;}
  body.dp-shorts-lock .shorts-page,
  body.dp-shorts-lock .shorts-feed,
  body.dp-shorts-lock .short-feed-item,
  body.dp-shorts-lock .short-stage,
  body.dp-shorts-lock .short-video-column,
  body.dp-shorts-lock .short-player-wrap{
    width:100vw !important;
    max-width:100vw !important;
  }
  body.dp-shorts-lock .shorts-feed{height:100dvh !important;min-height:100dvh !important;}
  body.dp-shorts-lock .short-feed-item{height:100dvh !important;min-height:100dvh !important;padding:0 !important;}
  body.dp-shorts-lock .short-stage,
  body.dp-shorts-lock .short-video-column,
  body.dp-shorts-lock .short-player-wrap{height:100dvh !important;min-height:100dvh !important;}
  body.dp-shorts-lock .short-player{width:100% !important;height:100% !important;min-width:100% !important;min-height:100% !important;}
}


/* DoliPlay 2.5.14 — Mobile Shorts chrome removal. */
@media (max-width:700px){
  html.dp-mobile-shorts,body.dp-mobile-shorts{margin:0 !important;padding:0 !important;}
  body.dp-mobile-shorts .dp-mobile-shorts-hide{display:none !important;}
  body.dp-mobile-shorts .shorts-page{margin:0 !important;padding:0 !important;width:100vw !important;max-width:100vw !important;}
}