/* AIX Feed — full-screen vertical feed */
body.aix-feed-page { overflow: hidden; background: #000; }
body.aix-feed-page #wpadminbar { display: none; }
html:has(body.aix-feed-page) { margin-top: 0 !important; }
/* Hide floating widgets (Hostinger assistant, scroll-to-top) over the feed */
body.aix-feed-page [id*="hostinger-ai"], body.aix-feed-page [class*="hostinger-chatbot"],
body.aix-feed-page [id*="chatbot"], body.aix-feed-page .chatbot-overwrite, body.aix-feed-page .float-btn__wrapper,body.aix-feed-page .scroll-to-top, body.aix-feed-page #scroll-to-top { display: none !important; }

.aix-feed {
  position: fixed; inset: 0; z-index: 99990;
  background: #000; color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.aix-feed-track {
  height: 100%; height: 100dvh;
  overflow-y: scroll; scroll-snap-type: y mandatory;
  overscroll-behavior: contain; scrollbar-width: none;
  outline: none;
}
.aix-feed-track::-webkit-scrollbar { display: none; }

/* Top bar */
.aix-feed-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events: none;
}
.aix-feed-topbar > * { pointer-events: auto; }
.aix-feed-brand { font-family: 'the-seasons', serif; font-size: 20px; letter-spacing: .04em; }
.aix-feed-close, .aix-feed-sound {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35); color: #fff; border: 0; font-size: 26px; line-height: 1;
  text-decoration: none; cursor: pointer; padding: 0;
}
.aix-feed-sound { font-size: 18px; }
.aix-feed-sound .on { display: none; }
.aix-feed.unmuted .aix-feed-sound .on { display: inline; }
.aix-feed.unmuted .aix-feed-sound .off { display: none; }

/* Card */
.aix-card {
  position: relative; height: 100%; height: 100dvh; width: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #0b0b0b;
}
.aix-card-bg {
  position: absolute; inset: -40px; background-size: cover; background-position: center;
  filter: blur(28px) brightness(.45); transform: scale(1.1);
}
.aix-card-media {
  position: relative; z-index: 1; width: 100%; height: 100%;
  max-width: min(100%, calc(100dvh * 9 / 16 * 1.6));
  display: flex; align-items: center; justify-content: center;
}
.aix-card-media img, .aix-card-media video, .aix-card-media iframe {
  width: 100%; height: 100%; object-fit: contain; border: 0; display: block;
}
.aix-card-media iframe { aspect-ratio: auto; }

/* Overlay */
.aix-card-info {
  position: absolute; left: 0; right: 72px; bottom: 0; z-index: 3;
  padding: 24px 16px max(24px, calc(env(safe-area-inset-bottom) + 16px));
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.65));
}
.aix-card-model { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.aix-card-model img, .aix-card-model .aix-ph {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; flex: none;
}
.aix-card-model .aix-ph { display: inline-flex; align-items: center; justify-content: center; background: #b8935a; font-weight: 700; }
.aix-card-name { font-weight: 700; font-size: 16px; }
.aix-card-cat { font-size: 12px; opacity: .8; }
.aix-card-title { margin-top: 8px; font-size: 14px; opacity: .95; }
.aix-card-rail {
  position: absolute; right: 12px; bottom: max(32px, calc(env(safe-area-inset-bottom) + 24px)); z-index: 3;
  display: flex; flex-direction: column; gap: 14px;
}
.aix-rail-btn {
  width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,.4);
  display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none;
  font-size: 11px; text-align: center; line-height: 1.1;
}
.aix-rail-btn svg { width: 22px; height: 22px; }

/* Locked */
.aix-card.locked .aix-card-media { filter: blur(22px) brightness(.6); transform: scale(1.08); }
.aix-lock {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 24px;
}
.aix-lock svg { width: 44px; height: 44px; }
.aix-lock h3 { margin: 0; font-size: 22px; color: #fff; font-family: 'the-seasons', serif; }
.aix-lock p { margin: 0; opacity: .85; max-width: 280px; font-size: 14px; }
.aix-lock a.aix-btn {
  background: #b8935a; color: #111; font-weight: 700; padding: 12px 22px; border-radius: 999px;
  text-decoration: none; font-size: 15px;
}
.aix-lock a.aix-sub { color: #fff; font-size: 13px; opacity: .85; }

/* Tap-to-unmute hint + end card + loading */
.aix-unmute-tip {
  position: absolute; top: 72px; left: 50%; transform: translateX(-50%); z-index: 4;
  background: rgba(0,0,0,.6); padding: 8px 14px; border-radius: 999px; font-size: 13px;
  pointer-events: none; transition: opacity .4s;
}
.aix-feed.unmuted .aix-unmute-tip { opacity: 0; }
.aix-card.end { flex-direction: column; gap: 16px; text-align: center; }
.aix-card.end a.aix-btn { background: #b8935a; color: #111; font-weight: 700; padding: 12px 22px; border-radius: 999px; text-decoration: none; }
.aix-spinner {
  width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
  animation: aixspin .9s linear infinite; position: absolute; z-index: 2;
}
@keyframes aixspin { to { transform: rotate(360deg); } }
.aix-feed-hint {
  position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: rgba(0,0,0,.55); padding: 8px 16px; border-radius: 999px; font-size: 13px;
  animation: aixhint 1.6s ease-in-out 3; pointer-events: none;
}
.aix-feed.scrolled .aix-feed-hint { display: none; }
@keyframes aixhint { 50% { transform: translate(-50%, -10px); } }

@media (min-width: 900px) {
  .aix-card-info { right: auto; width: 420px; left: calc(50% - 300px); }
  .aix-card-rail { right: calc(50% - 320px); }
}

/* Reactions (like / hmm) on the side rail */
.aix-react {
  width: 48px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0; color: #fff; cursor: pointer; font: inherit;
}
.aix-react img {
  width: 44px; height: 44px; padding: 10px; box-sizing: border-box; border-radius: 50%;
  background: rgba(0,0,0,.4); filter: grayscale(1) brightness(1.6); opacity: .85;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.aix-react.on img { filter: none; opacity: 1; background: rgba(255,255,255,.18); transform: scale(1.08); }
.aix-react:active img { transform: scale(.9); }
.aix-react-count { font-size: 12px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.6); }