/* Feed αναρτήσεων video — πάντα σκούρο, ανεξάρτητα από το θέμα της συσκευής. */

/* ===========================================================
   Feed αναρτήσεων video (τύπου TikTok) — πάντα σκούρο
   =========================================================== */
.feed-page {
  background: #07060a;
  color: #fff;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.feed {
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.feed::-webkit-scrollbar { display: none; }

/* Σε οθόνη υπολογιστή το feed μένει σε στήλη πλάτους κινητού. */
@media (min-width: 761px) {
  .feed {
    max-width: 440px;
    margin: 0 auto;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 90px -30px rgba(0,0,0,.9);
  }
  .feed-top { max-width: 440px; left: 50%; transform: translateX(-50%); }
  .feed-hint { max-width: 440px; left: 50%; transform: translateX(-50%); }
}

.feed-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 22px;
  background: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,0));
  pointer-events: none;
}
.feed-top > * { pointer-events: auto; }
.feed-back {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; text-decoration: none;
  display: grid; place-items: center; font-size: 1.3rem; line-height: 1;
  backdrop-filter: blur(6px);
}
.feed-brand {
  font-weight: 650; font-size: .95rem; letter-spacing: -.01em;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-book {
  margin-left: auto; flex: none;
  padding: .4em 1em; border-radius: 999px;
  background: #fff; color: #111; text-decoration: none;
  font-weight: 650; font-size: .85rem;
}

.slide {
  position: relative;
  height: 100vh;
  height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #000;
}

.slide-media { position: absolute; inset: 0; cursor: pointer; }
.slide-media video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

/* Οριζόντιο κλιπ: ολόκληρο το καρέ πάνω σε τονισμένο φόντο αντί για βίαιη περικοπή. */
.slide.is-wide .slide-media {
  background:
    radial-gradient(90% 55% at 50% 42%, color-mix(in srgb, var(--tint) 45%, transparent), transparent 70%),
    linear-gradient(170deg, #1b1020, #07060a 65%);
}
.slide.is-wide .slide-media video { object-fit: contain; background: transparent; }

/* Εξώφυλλο όταν δεν έχει ανέβει ακόμη αρχείο video */
.slide-media-placeholder {
  display: grid; place-items: center; text-align: center; padding: 32px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tint) 70%, transparent), transparent 70%),
    linear-gradient(160deg, #1a1020, #07060a 60%);
}
.ph-inner { max-width: 22ch; }
.ph-mark {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%;
  background: rgba(255,255,255,.16); display: grid; place-items: center;
  font-size: 1.5rem; backdrop-filter: blur(6px);
}
.ph-title { font-size: 1.25rem; font-weight: 650; line-height: 1.25; margin-bottom: .5rem; }
.ph-note  { font-size: .85rem; color: rgba(255,255,255,.6); }

.slide-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 28%, rgba(0,0,0,0) 52%);
}

/* Ένδειξη παύσης */
.slide.paused .slide-media::after {
  content: '▶';
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 3.4rem; color: rgba(255,255,255,.82);
  text-shadow: 0 4px 20px rgba(0,0,0,.7);
  pointer-events: none;
}

.slide-info {
  position: absolute; left: 0; right: 84px; bottom: 0; z-index: 6;
  padding: 0 16px calc(88px + env(safe-area-inset-bottom));
  text-shadow: 0 1px 4px rgba(0,0,0,.65);
}
.slide-info .handle { font-weight: 700; font-size: .95rem; margin-bottom: .3rem; }
.slide-info .ttl    { font-size: 1.02rem; font-weight: 620; margin: 0 0 .32rem; line-height: 1.3; }
.slide-info .cap    { font-size: .88rem; margin: 0 0 .32rem; color: rgba(255,255,255,.92); line-height: 1.4; }
.slide-info .tags   { font-size: .84rem; margin: 0; color: #9fd0ff; font-weight: 550; }
.slide-info .by     { font-size: .8rem; margin: .3rem 0 0; color: rgba(255,255,255,.66); }

.slide-rail {
  position: absolute; right: 8px; bottom: 0; z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.rail-btn, .rail-views {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: 0; color: #fff; font: inherit; cursor: pointer;
  padding: 0; width: 58px;
}
.rail-btn .ic, .rail-views .ic {
  font-size: 1.7rem; line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.55));
  transition: transform .18s;
}
.rail-btn .n, .rail-views .n {
  font-size: .76rem; font-weight: 650;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.rail-views { cursor: default; opacity: .78; }
.rail-btn.like.on .ic { color: #ff3b5c; }
.rail-btn.pop .ic { transform: scale(1.32); }
.rail-btn:active .ic { transform: scale(.9); }

.slide-cta {
  position: absolute; left: 16px; right: 16px; z-index: 8;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: .66em 1em; border-radius: 14px;
  background: #fff; color: #111; text-decoration: none;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.8);
}
.slide-cta:active { transform: translateY(1px); }
.slide-cta .cta-main { font-weight: 700; font-size: .98rem; }
.slide-cta .cta-sub  { font-size: .78rem; color: #5a5560; }

.feed-empty {
  height: 100vh; height: 100dvh;
  display: grid; place-content: center; text-align: center; gap: .6rem; padding: 32px;
}
.feed-empty h2 { margin: 0; }
.feed-empty p  { color: rgba(255,255,255,.66); margin: 0 0 1rem; }

.feed-loading { display: grid; place-items: center; height: 100vh; color: rgba(255,255,255,.5); }

/* Η υπόδειξη κάθεται ψηλά, στο κενό κάτω από τη μπάρα — δεν πατάει το κείμενο. */
.feed-hint {
  position: fixed; left: 0; right: 0; z-index: 15;
  top: calc(64px + env(safe-area-inset-top));
  display: flex; justify-content: center;
  pointer-events: none;
}
.feed-hint::before {
  content: attr(data-text);
  padding: .38em 1em; border-radius: 999px;
  background: rgba(0,0,0,.52); backdrop-filter: blur(6px);
  font-size: .78rem; color: rgba(255,255,255,.88);
  animation: hint-bob 1.7s ease-in-out infinite;
}
@keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  .feed { scroll-behavior: auto; }
  .feed-hint { animation: none; }
  .rail-btn .ic { transition: none; }
}