/* Yaloo — Light & Dark futuristic skins (global shell, menubar, pages) */

/* ========== Shared tokens ========== */
:root,
html[data-yal-theme="dark"],
html:not([data-yal-theme]) {
  --yal-skin-bg: #000000;
  --yal-skin-bg-2: #04020a;
  --yal-skin-panel: rgba(12, 10, 22, 0.88);
  --yal-skin-panel-solid: #16181c;
  --yal-skin-border: rgba(255, 255, 255, 0.1);
  --yal-skin-text: #e7e9ea;
  --yal-skin-muted: #8b98a5;
  --yal-skin-accent: #1d9bf0;
  --yal-skin-accent-2: #8a63ff;
  --yal-skin-accent-3: #38bdf8;
  --yal-skin-glow: rgba(138, 99, 255, 0.45);
  --yal-skin-mesh-a: rgba(29, 155, 240, 0.14);
  --yal-skin-mesh-b: rgba(138, 99, 255, 0.12);
  --yal-skin-mesh-c: rgba(240, 36, 155, 0.08);
  --yal-skin-nav-bg: linear-gradient(180deg, rgba(6, 4, 14, 0.92), rgba(0, 0, 0, 0.78));
  --yal-skin-nav-active: rgba(138, 99, 255, 0.14);
  --yal-skin-glass: rgba(255, 255, 255, 0.05);
  --yal-skin-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  --yal-skin-grad: linear-gradient(115deg, #1d9bf0, #8a63ff, #f0249b, #38bdf8, #1d9bf0);
  --bg: var(--yal-skin-bg);
  --panel: var(--yal-skin-panel-solid);
  --border: var(--yal-skin-border);
  --text: var(--yal-skin-text);
  --muted: var(--yal-skin-muted);
  --blue: var(--yal-skin-accent);
}

html[data-yal-theme="light"] {
  --yal-skin-bg: #f4f7fb;
  --yal-skin-bg-2: #e8eef6;
  --yal-skin-panel: rgba(255, 255, 255, 0.82);
  --yal-skin-panel-solid: #ffffff;
  --yal-skin-border: rgba(15, 23, 42, 0.1);
  --yal-skin-text: #0f172a;
  --yal-skin-muted: #64748b;
  --yal-skin-accent: #0284c7;
  --yal-skin-accent-2: #7c3aed;
  --yal-skin-accent-3: #0ea5e9;
  --yal-skin-glow: rgba(124, 58, 237, 0.28);
  --yal-skin-mesh-a: rgba(14, 165, 233, 0.16);
  --yal-skin-mesh-b: rgba(124, 58, 237, 0.12);
  --yal-skin-mesh-c: rgba(236, 72, 153, 0.08);
  --yal-skin-nav-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 251, 0.92));
  --yal-skin-nav-active: rgba(14, 165, 233, 0.12);
  --yal-skin-glass: rgba(255, 255, 255, 0.72);
  --yal-skin-shadow: 0 16px 48px rgba(15, 23, 42, 0.08);
  --yal-skin-grad: linear-gradient(115deg, #0284c7, #7c3aed, #ec4899, #0ea5e9, #0284c7);
  --bg: var(--yal-skin-bg);
  --panel: var(--yal-skin-panel-solid);
  --border: var(--yal-skin-border);
  --text: var(--yal-skin-text);
  --muted: var(--yal-skin-muted);
  --blue: var(--yal-skin-accent);
}

html[data-yal-theme="dim"] {
  --yal-skin-bg: #0d1520;
  --yal-skin-bg-2: #15202b;
  --yal-skin-panel: rgba(21, 32, 43, 0.92);
  --yal-skin-panel-solid: #192734;
  --yal-skin-border: rgba(255, 255, 255, 0.08);
  --yal-skin-text: #e7e9ea;
  --yal-skin-muted: #8b98a5;
  --bg: var(--yal-skin-bg);
  --panel: var(--yal-skin-panel-solid);
  --border: var(--yal-skin-border);
  --text: var(--yal-skin-text);
  --muted: var(--yal-skin-muted);
}

/* ========== Dynamic ambient backdrop ========== */
body.yal-has-shell,
body:has(.x-shell) {
  background-color: var(--yal-skin-bg) !important;
  color: var(--yal-skin-text);
}

body.yal-has-shell::after,
body:has(.x-shell)::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 10% 8%, var(--yal-skin-mesh-a), transparent 58%),
    radial-gradient(ellipse 45% 38% at 92% 12%, var(--yal-skin-mesh-b), transparent 55%),
    radial-gradient(ellipse 55% 42% at 50% 100%, var(--yal-skin-mesh-c), transparent 60%);
  background-size: 200% 200%, 220% 220%, 210% 210%;
  opacity: 0.95;
  animation: none;
}

html[data-yal-theme="light"] body.yal-has-shell::after,
html[data-yal-theme="light"] body:has(.x-shell)::after {
  opacity: 0.65;
}

@keyframes yal-skin-mesh-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(1.5%, -1%) scale(1.02); }
  66% { transform: translate(-1%, 1.5%) scale(0.99); }
}

/* ========== Shell columns ========== */
.x-shell {
  position: relative;
  z-index: 1;
}

.x-center {
  background:
    linear-gradient(180deg, var(--yal-skin-glass), transparent 22%),
    var(--yal-skin-panel) !important;
  border-color: var(--yal-skin-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-yal-theme="light"] .x-center {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.x-right {
  background: linear-gradient(180deg, var(--yal-skin-glass), transparent 35%);
  border-color: var(--yal-skin-border) !important;
}

.x-center-head,
.x-compose,
.x-post,
.yal-pref-card,
.x-modal-backdrop article,
.x-share-modal,
.x-profile-card {
  border-color: var(--yal-skin-border);
  color: var(--yal-skin-text);
}

html[data-yal-theme="light"] .x-post,
html[data-yal-theme="light"] .x-compose,
html[data-yal-theme="light"] .x-center-head {
  background: rgba(255, 255, 255, 0.72);
}

html[data-yal-theme="dark"] .x-post,
html[data-yal-theme="dark"] .x-compose,
html[data-yal-theme="dim"] .x-post,
html[data-yal-theme="dim"] .x-compose {
  background: rgba(0, 0, 0, 0.35);
}

/* ========== Sidebar — centered logo above Home ========== */
.x-left {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--yal-skin-nav-bg) !important;
  border-right: 1px solid var(--yal-skin-border);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.x-left .x-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0.35rem 0 1.1rem;
  padding: 0.25rem 0 0.5rem;
  flex-shrink: 0;
  order: -2;
  gap: 0.45rem;
}

.x-left .x-logo-wrap.ym-has-brand {
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.x-left .x-logo-badge {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.x-left .x-logo-image {
  display: block;
  margin: 0 auto;
  max-width: 52px;
  max-height: 52px;
  object-fit: contain;
}

.x-left .ym-brand-logo {
  margin: 0 auto;
}

/* Theme toggle under logo */
.yal-skin-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--yal-skin-border);
  background: var(--yal-skin-glass);
  color: var(--yal-skin-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.15s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.yal-skin-toggle:hover {
  color: var(--yal-skin-text);
  border-color: var(--yal-skin-accent-3);
  box-shadow: 0 0 16px var(--yal-skin-glow);
  transform: translateY(-1px);
}

.yal-skin-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Nav items */
.x-left .x-nav-btn,
.x-left .x-nav-item {
  width: 100%;
  border-radius: 999px;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.x-left .x-nav-btn:hover {
  background: var(--yal-skin-nav-active);
}

.x-left .x-nav-btn.active {
  background: var(--yal-skin-nav-active) !important;
  box-shadow: inset 0 0 0 1px rgba(138, 99, 255, 0.22), 0 0 20px var(--yal-skin-glow);
}

html[data-yal-theme="light"] .x-left .x-nav-btn.active {
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.25), 0 4px 18px rgba(14, 165, 233, 0.12);
}

.x-left .x-post-btn {
  align-self: center;
  width: calc(100% - 0.5rem);
  max-width: 200px;
}

/* Icon-only sidebar: keep logo centered, visible */
@media (min-width: 761px) and (max-width: 1100px) {
  .x-left .x-logo-wrap,
  .x-left .x-logo-badge,
  .x-left .x-logo-image {
    display: flex !important;
  }

  .x-left .x-logo-image {
    max-width: 40px;
    max-height: 40px;
  }

  .x-left .yal-skin-toggle span.yal-skin-toggle-label {
    display: none;
  }

  .x-left .ym-brand-logo {
    width: 24px;
    height: 24px;
  }

  .x-left .ym-brand-logo svg {
    width: 20px;
    height: 20px;
  }
}

/* ========== Mobile bottom bar ========== */
@media (max-width: 1100px) and (pointer: coarse), (max-width: 760px) {
  body.yal-has-shell #yal-mnav {
    background: var(--yal-skin-nav-bg) !important;
    border-top: 1px solid var(--yal-skin-border) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
  }

  .yal-mnav-btn.active {
    color: var(--yal-skin-accent-2) !important;
  }
}

/* ========== Inputs & buttons (all pages) ========== */
body.yal-has-shell input,
body.yal-has-shell textarea,
body.yal-has-shell select {
  background: var(--yal-skin-panel-solid);
  color: var(--yal-skin-text);
  border-color: var(--yal-skin-border);
}

html[data-yal-theme="light"] body.yal-has-shell input,
html[data-yal-theme="light"] body.yal-has-shell textarea {
  background: #ffffff;
}

body.yal-has-shell .x-muted,
body.yal-has-shell .yal-admin-hint {
  color: var(--yal-skin-muted) !important;
}

/* Primary actions keep gradient energy in both skins */
.x-post-btn,
.x-auth-card form button[type="submit"],
.x-center form.x-compose .x-compose-actions-icons > button[type="submit"] {
  background: var(--yal-skin-grad) !important;
  background-size: 280% auto !important;
}

/* Light skin: soften heavy dark overlays from legacy layers */
html[data-yal-theme="light"] body.yal-has-shell::before,
html[data-yal-theme="light"] body:has(.x-shell)::before {
  opacity: 0.35 !important;
  filter: saturate(0.85) brightness(1.15);
}

html[data-yal-theme="light"] .x-left::after,
html[data-yal-theme="light"] .x-center {
  animation: none;
}

html[data-yal-theme="light"] .x-logo-badge {
  box-shadow: 0 8px 28px rgba(124, 58, 237, 0.22), 0 0 0 1px rgba(124, 58, 237, 0.12);
}

html[data-yal-theme="light"] .x-logo-badge::after {
  opacity: 0.75;
}

/* Login / auth */
html[data-yal-theme="light"] .x-auth-wrap:not(.yal-login-enhanced) .x-auth-card {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(14, 165, 233, 0.18);
  color: var(--yal-skin-text);
}

html[data-yal-theme="light"] .x-auth-wrap:not(.yal-login-enhanced) {
  background: linear-gradient(160deg, #eef6ff, #f8fafc, #ede9fe);
}

/* Modals */
html[data-yal-theme="light"] .x-modal-backdrop {
  background: rgba(15, 23, 42, 0.35);
}

html[data-yal-theme="light"] .x-modal-backdrop article,
html[data-yal-theme="light"] .x-share-modal {
  background: #ffffff;
  color: var(--yal-skin-text);
}

html[data-yal-theme="dark"] .x-modal-backdrop article,
html[data-yal-theme="dim"] .x-modal-backdrop article {
  background: linear-gradient(165deg, rgba(16, 14, 28, 0.98), rgba(0, 0, 0, 0.96));
}

@media (prefers-reduced-motion: reduce) {
  body.yal-has-shell::after,
  body:has(.x-shell)::after,
  .x-logo-badge,
  .x-logo-badge::after {
    animation: none !important;
  }
}