/*
 * Native shell theme — flat Catppuccin surfaces, no neon gradients (Monica/Spaces exempt)
 * Loaded after yal-futuristic.css to normalize light/dark chrome.
 */

html[data-yal-theme="light"]:not([data-yal-skin="monica"]),
html[data-yal-theme="dark"]:not([data-yal-skin="monica"]),
html:not([data-yal-theme="light"]):not([data-yal-skin="monica"]) {
  --yft-grad: var(--yal-skin-accent);
  --yft-grad-text: var(--yal-skin-accent);
}

/* ---- Kill gradient text / neon chrome on neutral shell ---- */
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-left .x-nav-btn.active > span:not(.x-nav-icon-wrap),
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-home-tab.active,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-profile-tabs button.active,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-notif-tabs button.active,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-explore-tabs button.active,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center-head > h3,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-profile-topbar h2,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-share-head h3,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-mnav-btn.active {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--yal-skin-accent) !important;
  color: var(--yal-skin-accent) !important;
  filter: none !important;
  animation: none !important;
  text-shadow: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-left::after,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell #yal-mnav::before {
  display: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-left .x-nav-btn.active::before {
  background: var(--yal-skin-accent) !important;
  background-size: 100% 100% !important;
  animation: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-left .x-nav-btn.active {
  background: var(--yal-skin-nav-active) !important;
  box-shadow: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-left .x-nav-btn:hover {
  background: var(--yal-skin-nav-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-left .x-nav-btn:hover > span:not(.x-nav-icon-wrap) {
  color: var(--yal-skin-text) !important;
  text-shadow: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-left .x-nav-btn:hover svg,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-left .x-nav-btn:hover .x-nav-icon-wrap svg {
  color: var(--yal-skin-text) !important;
  filter: none !important;
  transform: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-left .x-nav-btn.active svg,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-left .x-nav-btn.active .x-nav-icon-wrap svg {
  color: var(--yal-skin-accent) !important;
  animation: none !important;
  filter: none !important;
}

/* ---- Headers & tab rails ---- */
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center-head {
  background: var(--yal-skin-panel-solid) !important;
  border-bottom: 1px solid var(--yal-skin-border) !important;
  color: var(--yal-skin-text) !important;
  backdrop-filter: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-home-tabs,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-profile-tabs,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-notif-tabs,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-explore-tabs {
  background: var(--yal-skin-panel-solid) !important;
  border-bottom: 1px solid var(--yal-skin-border) !important;
  animation: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-home-tab,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-profile-tabs button,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-notif-tabs button,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-explore-tabs button {
  color: var(--yal-skin-muted) !important;
  -webkit-text-fill-color: var(--yal-skin-muted) !important;
  font-weight: 600;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-home-tab.active,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-profile-tabs button.active,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-notif-tabs button.active,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-explore-tabs button.active {
  color: var(--yal-skin-accent) !important;
  -webkit-text-fill-color: var(--yal-skin-accent) !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-home-tab::after,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-profile-tabs button::after,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-notif-tabs button::after,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-explore-tabs button::after {
  background: var(--yal-skin-accent) !important;
  animation: none !important;
}

/* ---- Primary buttons: solid accent, not rainbow ---- */
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post-btn,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-auth-card form button[type="submit"],
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center form.x-compose .x-compose-actions-icons > button[type="submit"],
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-share-foot > button[type="submit"]:not(:disabled),
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell #yal-fab {
  background: var(--yal-skin-accent) !important;
  background-image: none !important;
  background-size: 100% 100% !important;
  color: var(--yal-skin-accent-fg) !important;
  -webkit-text-fill-color: var(--yal-skin-accent-fg) !important;
  border: 0 !important;
  box-shadow: var(--yal-skin-btn-shadow) !important;
  text-shadow: none !important;
  animation: none !important;
  letter-spacing: 0.01em;
  text-transform: none;
  font-weight: 700 !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post-btn::after,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-auth-card form button[type="submit"]::after,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center form.x-compose .x-compose-actions-icons > button[type="submit"]::after,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center form.x-compose .x-compose-actions-icons > button[type="submit"]::before {
  display: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post-btn:hover,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-auth-card form button[type="submit"]:hover,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center form.x-compose .x-compose-actions-icons > button[type="submit"]:not(:disabled):hover,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell #yal-fab:hover {
  background: var(--yal-skin-accent-hover) !important;
  filter: none !important;
  transform: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center form.x-compose .x-compose-actions-icons > button[type="submit"]:disabled {
  background: var(--yal-skin-surface) !important;
  color: var(--yal-skin-muted) !important;
  -webkit-text-fill-color: var(--yal-skin-muted) !important;
}

/* ---- Segmented controls (login etc.) ---- */
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-segment {
  background: var(--yal-skin-surface) !important;
  border: 1px solid var(--yal-skin-border) !important;
  border-radius: 999px !important;
  padding: 3px !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-segment button:not(.active) {
  color: var(--yal-skin-muted) !important;
  background: transparent !important;
  border-color: transparent !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-segment .active {
  color: var(--yal-skin-accent-fg) !important;
  background: var(--yal-skin-accent) !important;
  background-image: none !important;
  box-shadow: var(--yal-skin-btn-shadow) !important;
  animation: none !important;
}

/* ---- Secondary / icon buttons ---- */
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell button:not([type="submit"]):not(.x-post-btn):not(.yal-pref-save):not(.x-segment .active):not(#yal-fab):not(.primary):not(.yal-cta-btn):not(.x-follow > button):not(.x-nav-btn):not(.yal-mnav-btn),
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-auth-wrap button:not([type="submit"]):not(.x-segment .active) {
  color: var(--yal-skin-text) !important;
  border-color: var(--yal-skin-border) !important;
  background: transparent;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-icon-btn,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-tool-btn,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post-more,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-compose-actions-icons button:not([type="submit"]) {
  color: var(--yal-skin-muted) !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-icon-btn:hover,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-tool-btn:hover,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post-more:hover,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-compose-actions-icons button:not([type="submit"]):hover {
  background: var(--yal-skin-nav-hover) !important;
  box-shadow: none !important;
  transform: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-icon-btn:hover svg,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-tool-btn:hover svg,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-compose-actions-icons button:not([type="submit"]):hover svg {
  color: var(--yal-skin-text) !important;
  filter: none !important;
  transform: none !important;
}

/* ---- Forms ---- */
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell input,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell textarea,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell select,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-auth-wrap input,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-auth-wrap textarea,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-auth-wrap select,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-pref-field input,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-pref-field select,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-pref-field textarea,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell .x-search input {
  background: var(--yal-skin-input-bg) !important;
  color: var(--yal-skin-text) !important;
  border: 1px solid var(--yal-skin-border) !important;
  border-radius: 10px;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell input:focus,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell textarea:focus,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-shell select:focus,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-auth-wrap input:focus,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-auth-wrap textarea:focus {
  border-color: var(--yal-skin-accent) !important;
  outline: 2px solid var(--yal-skin-focus-ring) !important;
  outline-offset: 0;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-compose textarea::placeholder {
  background: none !important;
  -webkit-text-fill-color: var(--yal-skin-muted) !important;
  color: var(--yal-skin-muted) !important;
  animation: none !important;
}

/* ---- Shell columns ---- */
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-left {
  background: var(--yal-skin-nav-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center {
  background: var(--yal-skin-bg) !important;
  border-color: var(--yal-skin-border) !important;
  box-shadow: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center::before,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-right {
  background: var(--yal-skin-bg) !important;
  border-color: var(--yal-skin-border) !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center article.x-post,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center .x-post,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post {
  background: var(--yal-skin-panel-solid) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: 1px solid var(--yal-skin-border) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  transform: none !important;
  color: var(--yal-skin-text) !important;
  animation: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center article.x-post::before,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center .x-post::before,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center article.x-post::after,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center .x-post::after,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post::before,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post::after {
  display: none !important;
  content: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center article.x-post:hover,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center .x-post:hover,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-post:hover {
  background: var(--yal-skin-bg-2) !important;
  border-bottom-color: var(--yal-skin-border) !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell .x-center form.x-compose,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-center form.x-compose,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-compose {
  background: var(--yal-skin-panel-solid) !important;
  border-bottom: 1px solid var(--yal-skin-border) !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-show-posts-bar {
  background: var(--yal-skin-panel-solid) !important;
  color: var(--yal-skin-accent) !important;
  border-color: var(--yal-skin-border) !important;
  text-shadow: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-show-posts-bar:hover {
  background: var(--yal-skin-bg-2) !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-quote-card {
  background: var(--yal-skin-bg-2) !important;
  border-color: var(--yal-skin-border) !important;
  backdrop-filter: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-repost-header {
  color: var(--yal-skin-muted) !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-repost-header strong,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-quote-head strong {
  color: var(--yal-skin-text) !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-quote-handle,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-quote-text {
  color: var(--yal-skin-muted) !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-right > .x-panel,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-pref-card {
  background: var(--yal-skin-panel-solid) !important;
  border: 1px solid var(--yal-skin-border) !important;
  border-radius: 16px;
  color: var(--yal-skin-text) !important;
}

/* ---- Mobile nav ---- */
@media (max-width: 1100px) and (pointer: coarse), (max-width: 760px) {
  html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) body.yal-has-shell #yal-mnav {
    background: var(--yal-skin-nav-bg) !important;
    border-top: 1px solid var(--yal-skin-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-mnav-btn {
    color: var(--yal-skin-muted) !important;
  }

  html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-mnav-btn.active svg {
    color: var(--yal-skin-accent) !important;
    filter: none !important;
    transform: none !important;
  }

  html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-mnav-btn.active::after {
    background: var(--yal-skin-accent) !important;
    box-shadow: none !important;
    animation: none !important;
  }
}

/* ---- Auth (non-enhanced login) ---- */
html[data-yal-theme="light"]:not([data-yal-skin="monica"]) .x-auth-wrap:not(.yal-login-enhanced) {
  background: var(--ctp-base) !important;
}

html[data-yal-theme="light"]:not([data-yal-skin="monica"]) .x-auth-wrap:not(.yal-login-enhanced) .x-auth-card {
  background: var(--ctp-mantle) !important;
  border: 1px solid var(--ctp-surface0) !important;
  box-shadow: 0 8px 32px rgba(76, 79, 105, 0.08) !important;
}

html[data-yal-theme="dark"]:not([data-yal-skin="monica"]) .x-auth-wrap:not(.yal-login-enhanced),
html:not([data-yal-theme="light"]):not([data-yal-skin="monica"]) .x-auth-wrap:not(.yal-login-enhanced) {
  background: #000 !important;
}

html[data-yal-theme="dark"]:not([data-yal-skin="monica"]) .x-auth-wrap:not(.yal-login-enhanced) .x-auth-card,
html:not([data-yal-theme="light"]):not([data-yal-skin="monica"]) .x-auth-wrap:not(.yal-login-enhanced) .x-auth-card {
  background: var(--ctp-crust) !important;
  border: 1px solid var(--ctp-surface0) !important;
}

/* ---- Modals ---- */
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-modal-backdrop {
  background: var(--yal-skin-overlay) !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-modal-backdrop article,
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-share-modal {
  background: var(--yal-skin-panel-solid) !important;
  color: var(--yal-skin-text) !important;
  border: 1px solid var(--yal-skin-border) !important;
  box-shadow: var(--yal-skin-shadow) !important;
}

/* ---- Badges ---- */
html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .x-nav-count-badge {
  background: var(--yal-skin-accent) !important;
  color: var(--yal-skin-accent-fg) !important;
  animation: none !important;
  box-shadow: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-skin-toggle {
  background: var(--yal-skin-surface) !important;
  border-color: var(--yal-skin-border) !important;
  color: var(--yal-skin-muted) !important;
  box-shadow: none !important;
}

html:not([data-yal-skin="monica"]):not([data-yal-skin="spaces"]) .yal-skin-toggle:hover {
  color: var(--yal-skin-text) !important;
  border-color: var(--yal-skin-accent) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ---- Isweet Spaces UI must never inherit neutral shell theme ---- */
#yi-spaces-root,
#yi-live-dock-root,
#yi-live-overlay,
.yi-spaces-tab-panel {
  isolation: isolate;
}

body.yi-in-space #yi-live-dock-root,
body.yi-in-space #yi-live-overlay,
#yi-live-dock-root:not([hidden]),
#yi-live-overlay .yi-live-room,
#yi-live-overlay .yi-dj-bar,
#yi-live-overlay .yi-host-panel,
#yi-live-overlay .yi-admin-refresh-btn {
  /* Ensure visibility — neutral theme must not collapse these */
  visibility: visible !important;
}

#yi-live-dock-root:not([hidden]) {
  display: block !important;
  pointer-events: none;
}

#yi-live-dock-root:not([hidden]) > * {
  pointer-events: auto;
}