:root { --vito-w: clamp(280px, 34vw, 420px); --v-r: 22px; --v-shadow: 0 24px 60px rgba(0,0,0,.40); }

.vito-stream{ display:grid; gap:28px; justify-items:center; scroll-snap-type:y mandatory; }
@media (min-width:1024px){ .vito-stream{ scroll-snap-type:none; } }

.vito-card{
  width:var(--vito-w); aspect-ratio:9/16; border-radius:var(--v-r);
  overflow:hidden; position:relative; background:#0b1220; box-shadow:var(--v-shadow);
  cursor:pointer;
  scroll-snap-align:start; outline:none;
}
.vito-media{ position:relative; width:100%; height:100%; background:center/cover no-repeat var(--blur); }
.vito-video{ width:100%; height:100%; object-fit:cover; display:block; }

/* soft overlays to keep text readable */
.vito-top-grad, .vito-bottom-grad{
  position:absolute; left:0; right:0; pointer-events:none; z-index:1;
}
.vito-top-grad{ top:0; height:28%; background:linear-gradient(180deg,rgba(0,0,0,.45),transparent); }
.vito-bottom-grad{ bottom:0; height:34%; background:linear-gradient(0deg,rgba(0,0,0,.62),transparent); }

.vito-mute{
  position:absolute; top:10px; right:10px; border-radius:50%;
}
.vito-mute[aria-pressed="false"]{ background:rgba(0,0,0,.62); }

/* RIGHT side vote stack */
.vito-side{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:grid; gap:12px; z-index:4;
}
.side-btn{
  border-radius:50%; backdrop-filter:blur(8px);
  font-size:16px;
}
.side-btn .count{ display:block; font-size:.8rem; margin-top:2px; opacity:.92; }

/* BOTTOM bar: caption + CTAs */
.vito-bottom{
  position:absolute; left:12px; right:12px; bottom:10px; z-index:4;
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; color:#fff;
}
.vito-caption{ min-width:0; }
.vito-author{ color:#fff; font-weight:700; text-decoration:none; }
.vito-text{ margin:.35rem 0 0; line-height:1.25; max-height:4.8em; overflow:hidden; }

.vito-cta{ display:flex; align-items:center; gap:10px; z-index:4; }
.cta-btn{
  border-radius:50%; backdrop-filter:blur(8px);
}
.cta-btn .cnt{ display:block; font-size:.8rem; margin-top:4px; color:#fff; }

/* icon sizing and visibility */

/* Preserve FA font-family and weights */
.fa, .fa-solid, .fa-regular, .fa-brands,
.fa::before, .fa-solid::before, .fa-regular::before, .fa-brands::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900;
}
.fa-regular, .fa-regular::before { font-weight: 400 !important; }
.fa-brands,  .fa-brands::before  { font-family: "Font Awesome 6 Brands" !important; font-weight: 400 !important; }

.vito-mute i,
.vito-side .side-btn i,
.vito-cta .cta-btn i {
  display: inline-block;
  line-height: 1;
  color: #fff;
  font-size: 18px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
}

.vito-mute,
.vito-side .side-btn,
.vito-cta .cta-btn {
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  z-index: 5;
}

.vito-mute { width: 44px; height: 44px; display:grid; place-items:center; z-index:5; }
.vito-side .side-btn,
.vito-cta .cta-btn { width: 50px; height: 50px; display:grid; place-items:center; }

.vito-side .count,
.vito-cta .cnt { color:#fff; }

.side-btn.active,
.cta-btn.active {
  box-shadow: 0 0 0 2px #4cc9f0 inset;
}

.vito-progress{
  position:absolute; left:12px; right:12px; bottom:8px; height:4px; z-index:4;
  background:rgba(255,255,255,.22); border-radius:999px; overflow:hidden;
}
.vito-progress .bar{ width:0%; height:100%; background:#4cc9f0; }

.like-burst{
  position:absolute; inset:0; display:grid; place-items:center; font-size:72px;
  color:rgba(255,60,120,.9); opacity:0; transform:scale(.6); transition:opacity .2s, transform .2s;
  pointer-events:none; z-index:2;
}
.like-burst.show{ opacity:1; transform:scale(1); }

/* avoid “weird” overlay shift on round corners */
.vito-card:focus-visible{ box-shadow:0 0 0 3px #4cc9f0; }

#vito-composer .composer-box { margin-bottom: 16px; }

.modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.5); }
.modal.hidden{ display:none; }
.modal-card{ width:min(680px, 92vw); max-height:86vh; background:var(--card,#0f172a); border:1px solid var(--card-border,rgba(255,255,255,.12)); border-radius:16px; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; }
.modal-header, .modal-footer{ padding:12px 14px; display:flex; align-items:center; gap:10px; }
.modal-body{ padding:10px 14px; overflow:auto; }
.modal-close{ margin-left:auto; }
#commentInput{ flex:1; }

/* Ensure vote/comment counts never disappear */
.vito-side .count,
.vito-cta .cnt {
  display: inline-block;
  min-width: 1.2em;
  text-align: center;
  color: #fff;
  opacity: .95;
  user-select: none;
}

/* Active vote state shouldn't hide the count */
.side-btn.active .count { opacity: 1; }

/* Progress bar: make it clickable and show a time tooltip */
.vito-progress { position:absolute; left:12px; right:12px; bottom:8px; height:6px; border-radius:999px; background:rgba(255,255,255,.25); overflow:visible; cursor:pointer; }
.vito-progress .bar { height:100%; width:0%; background:#4cc9f0; }
.vito-progress .ghost { position:absolute; top:0; left:0; height:100%; width:0%; background:rgba(255,255,255,.35); pointer-events:none; }
.vito-progress .tip {
  position:absolute; bottom:110%; transform:translateX(-50%);
  padding:2px 6px; border-radius:6px; background:rgba(0,0,0,.75); color:#fff; font-size:.75rem; white-space:nowrap; display:none;
}
.vito-progress.show-tip .tip { display:block; }

/* Kill any old pseudo placeholders that cover icons */
.cta-btn.share::before,
.cta-btn.comment::before,
.cta-btn.report::before,
.vito-mute::before,
.side-btn.upvote::before,
.side-btn.downvote::before { content: none !important; }

/* Counts must always be visible */
.vito-side .count, .vito-cta .cnt {
  display:inline-block; min-width:1.2em; text-align:center; color:#fff; opacity:.95;
}