/* Yaloo — futuristic, AI-dynamic UI layer.
   Pretty gradient buttons + an animated "AI" menu bar across every device
   (desktop / Mac sidebar .x-left, and mobile bottom bar #yal-mnav).
   Additive overrides only; respects prefers-reduced-motion. */

:root {
  --yft-grad: linear-gradient(100deg, #1d9bf0, #8a63ff, #f0249b, #38bdf8, #1d9bf0);
}

/* ========== Pretty primary buttons (front page + compose) ========== */
.x-auth-card form button[type="submit"],
.x-auth-card form > button:not(.x-segment button),
.x-post-btn {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em;
  background: var(--yft-grad) !important;
  background-size: 280% auto !important;
  box-shadow: 0 8px 26px rgba(120, 86, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  animation: yft-flow 6s linear infinite;
}

.x-auth-card form button[type="submit"]:hover,
.x-post-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 34px rgba(138, 99, 255, 0.6);
  filter: brightness(1.06);
}

/* Light sweep across primary buttons. */
.x-auth-card form button[type="submit"]::after,
.x-post-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  animation: yft-sweep 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* Segmented Sign in / Create account toggle. */
.x-segment button {
  position: relative;
  border-radius: 999px !important;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.x-segment .active {
  color: #fff !important;
  border-color: transparent !important;
  background: var(--yft-grad) !important;
  background-size: 280% auto !important;
  box-shadow: 0 6px 20px rgba(120, 86, 255, 0.45);
  animation: yft-flow 6s linear infinite;
}

/* ========== Desktop / Mac menu bar (.x-left sidebar) ========== */
.x-left {
  position: relative;
}

/* Animated neon edge running down the right of the sidebar. */
.x-left::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: var(--yft-grad);
  background-size: auto 300%;
  opacity: 0.55;
  animation: yft-flow-y 7s linear infinite;
  pointer-events: none;
}

.x-left .x-nav-btn {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.x-left .x-nav-btn:hover {
  background: linear-gradient(100deg, rgba(29, 155, 240, 0.16), rgba(138, 99, 255, 0.16), rgba(240, 36, 155, 0.14));
  transform: translateX(4px);
  box-shadow: 0 6px 20px rgba(120, 86, 255, 0.28);
}

/* Active nav item: glowing gradient pill with a left accent bar. */
.x-left .x-nav-btn.active {
  background: linear-gradient(100deg, rgba(29, 155, 240, 0.22), rgba(138, 99, 255, 0.22), rgba(240, 36, 155, 0.18));
  box-shadow: 0 8px 24px rgba(120, 86, 255, 0.4), 0 0 0 1px rgba(160, 140, 255, 0.4) inset;
}

.x-left .x-nav-btn.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--yft-grad);
  background-size: auto 300%;
  animation: yft-flow-y 5s linear infinite;
}

.x-left .x-nav-btn.active .x-nav-icon-wrap {
  filter: drop-shadow(0 0 8px rgba(138, 99, 255, 0.85));
}

/* ========== Mobile menu bar (#yal-mnav) ========== */
@media (max-width: 1100px) and (pointer: coarse), (max-width: 760px) {
  body.yal-has-shell #yal-mnav {
    background: linear-gradient(180deg, rgba(10, 6, 24, 0.86), rgba(4, 1, 13, 0.95)) !important;
    border-top: 0 !important;
    box-shadow: 0 -8px 30px rgba(80, 40, 200, 0.28);
  }

  /* Animated gradient line riding the top edge of the bar. */
  body.yal-has-shell #yal-mnav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--yft-grad);
    background-size: 300% auto;
    animation: yft-flow 6s linear infinite;
    pointer-events: none;
  }

  .yal-mnav-btn {
    transition: color 0.2s ease, transform 0.18s ease;
  }

  .yal-mnav-btn svg {
    transition: filter 0.2s ease, transform 0.2s ease;
  }

  /* Active tab: gradient text, glowing icon, and a floating indicator dot. */
  .yal-mnav-btn.active {
    color: transparent !important;
    background: var(--yft-grad);
    background-size: 280% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: yft-flow 6s linear infinite;
  }

  .yal-mnav-btn.active svg {
    filter: drop-shadow(0 0 7px rgba(138, 99, 255, 0.95));
    transform: translateY(-1px) scale(1.08);
  }

  .yal-mnav-btn.active::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #8a63ff;
    box-shadow: 0 0 8px rgba(138, 99, 255, 0.95);
    animation: yft-dot 1.8s ease-in-out infinite;
  }

  /* Futuristic floating compose button. */
  body.yal-has-shell #yal-fab {
    background: var(--yft-grad) !important;
    background-size: 260% auto !important;
    border: 0 !important;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(120, 86, 255, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
    animation: yft-flow 6s linear infinite, yft-fab-pulse 3.2s ease-in-out infinite;
  }
}

/* ========== Posts, content & engagement icons ========== */
/* Subtle interactive lift + glow on each post card. */
.x-post {
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.x-post:hover {
  background: linear-gradient(100deg, rgba(29, 155, 240, 0.05), rgba(138, 99, 255, 0.06), rgba(240, 36, 155, 0.04));
  box-shadow: inset 3px 0 0 rgba(138, 99, 255, 0.55), 0 6px 26px rgba(80, 40, 200, 0.12);
}

/* Engagement buttons: springy, glowing micro-interactions. */
.x-post-stats .x-stat-btn,
.x-actions .x-stat-btn {
  transition: color 0.18s ease, transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s ease;
  border-radius: 999px;
}

.x-post-stats .x-stat-btn svg,
.x-actions .x-stat-btn svg {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}

.x-post-stats button.x-stat-btn:hover,
.x-actions button.x-stat-btn:hover {
  color: #38bdf8;
  transform: translateY(-1px);
}

.x-post-stats button.x-stat-btn:hover svg,
.x-actions button.x-stat-btn:hover svg {
  transform: scale(1.22);
  filter: drop-shadow(0 0 7px rgba(56, 189, 248, 0.85));
}

/* Reposted = green energy. */
.x-stat-btn.is-reposted {
  color: #23d18b !important;
}

.x-stat-btn.is-reposted svg {
  filter: drop-shadow(0 0 8px rgba(35, 209, 139, 0.9));
  animation: yft-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Liked = glowing heart with a burst pop. */
.x-stat-btn.is-liked {
  color: #f0249b !important;
}

.x-stat-btn.is-liked svg {
  fill: #f0249b;
  filter: drop-shadow(0 0 9px rgba(240, 36, 155, 0.95));
  animation: yft-heart 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Likeable heart turns pink on hover even before it's liked. */
.x-post-stats button.x-stat-btn:not(.is-liked):hover svg[class*="heart"],
.x-actions button.x-stat-btn:not(.is-liked):hover svg[class*="heart"] {
  filter: drop-shadow(0 0 7px rgba(240, 36, 155, 0.85));
}

/* ========== Keyframes ========== */
@keyframes yft-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

@keyframes yft-heart {
  0% { transform: scale(1); }
  30% { transform: scale(0.8); }
  55% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

@keyframes yft-flow {
  0% { background-position: 0% center; }
  100% { background-position: 280% center; }
}

@keyframes yft-flow-y {
  0% { background-position: center 0%; }
  100% { background-position: center 300%; }
}

@keyframes yft-sweep {
  0% { left: -60%; }
  55%, 100% { left: 130%; }
}

@keyframes yft-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.65; }
}

@keyframes yft-fab-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(120, 86, 255, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) inset; }
  50% { box-shadow: 0 14px 40px rgba(56, 189, 248, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.18) inset; }
}

@media (prefers-reduced-motion: reduce) {
  .x-auth-card form button[type="submit"],
  .x-post-btn,
  .x-auth-card form button[type="submit"]::after,
  .x-post-btn::after,
  .x-segment .active,
  .x-left::after,
  .x-left .x-nav-btn.active::before,
  .yal-mnav-btn.active,
  body.yal-has-shell #yal-mnav::before,
  .yal-mnav-btn.active::after,
  body.yal-has-shell #yal-fab,
  .x-stat-btn.is-reposted svg,
  .x-stat-btn.is-liked svg {
    animation: none !important;
  }
}