/**
 * OAO V2 Phase 2 — Visual system
 * Additive only. Unifies chrome, surfaces, status, motion, dark mode.
 * Does not replace legacy page/modals/AI business logic styles.
 */

/* ── Page atmosphere (home) ── */
#pageHome.active {
  position: relative;
}

#pageHome.active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 55% at 12% -10%, var(--oao-color-accent-soft), transparent 55%),
    radial-gradient(ellipse 70% 50% at 92% 8%, rgba(37, 99, 235, 0.06), transparent 50%),
    linear-gradient(180deg, var(--oao-color-bg) 0%, var(--oao-color-bg) 62%, var(--oao-color-surface-soft) 100%);
}

[data-theme="dark"] #pageHome.active::before {
  background:
    radial-gradient(ellipse 80% 55% at 10% -8%, var(--oao-color-accent-soft), transparent 55%),
    radial-gradient(ellipse 60% 40% at 95% 0%, rgba(147, 197, 253, 0.08), transparent 48%),
    linear-gradient(180deg, var(--oao-color-bg) 0%, #161616 100%);
}

/* Do NOT force side panels to relative — that collapses AI/Tools off fixed and causes overlap */
#pageHome.active > *:not(.oao-side-panel):not(.oao-toolbar-toggle):not(.ai-home-toggle) {
  position: relative;
  z-index: 1;
}

#pageHome.active > .oao-side-panel,
#pageHome.active > .oao-toolbar-toggle,
#pageHome.active > .ai-home-toggle {
  position: fixed !important;
  z-index: 50;
}

/* ── Topbar / logo brand weight ── */
.topbar {
  border-bottom: 1px solid var(--oao-color-border-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--topbar-bg, var(--oao-color-bg)) 88%, transparent);
}

.oao-v2-logo-btn.topbar-logo,
button.oao-v2-logo-btn {
  font-family: var(--oao-font-family-display);
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: color var(--oao-transition-fast);
}

.oao-v2-logo-btn:hover {
  color: var(--oao-color-primary);
}

.oao-v2-topnav-link {
  font-family: var(--oao-font-family);
  border-radius: var(--oao-radius-full);
  transition:
    opacity var(--oao-transition-fast),
    background var(--oao-transition-fast),
    color var(--oao-transition-fast);
}

.oao-v2-topnav-link.is-active,
.oao-v2-topnav-link[aria-current="page"] {
  opacity: 1;
  background: var(--oao-color-primary);
  color: #fff;
}

.oao-v2-menu-btn {
  border-color: var(--oao-color-border-soft);
  border-radius: var(--oao-radius-md);
  transition: background var(--oao-transition-fast), border-color var(--oao-transition-fast);
}

.oao-v2-menu-btn:hover,
.oao-v2-menu-btn[aria-expanded="true"] {
  background: var(--oao-color-surface-soft);
  border-color: var(--oao-color-primary);
}

/* ── Hero ── */
.oao-v2-hero {
  position: relative;
  overflow: hidden;
  border-color: var(--oao-color-border-soft);
  background:
    linear-gradient(135deg, var(--oao-color-accent-soft) 0%, transparent 42%),
    var(--oao-color-surface);
  box-shadow: var(--oao-shadow-sm);
  animation: oaoV2HeroIn var(--oao-duration-slow) var(--oao-ease-out) both;
}

.oao-v2-hero::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--oao-color-primary), transparent 70%);
  opacity: 0.85;
}

.oao-v2-kicker {
  color: var(--oao-color-primary);
  opacity: 1;
  letter-spacing: 0.2em;
}

.oao-v2-hero-title {
  font-family: var(--oao-font-family-display);
  font-size: clamp(1.4rem, 3.4vw, 2.15rem);
  letter-spacing: 0.02em;
}

.oao-v2-hero-lead {
  color: var(--oao-color-text-muted);
  opacity: 1;
}

.oao-v2-ask label {
  opacity: 1;
  color: var(--oao-color-text);
}

#oaoAskInput {
  border: var(--oao-input-border);
  border-color: var(--oao-color-border-soft);
  border-radius: var(--oao-input-radius);
  background: var(--input-bg, var(--oao-color-surface));
  min-height: 76px;
  transition: border-color var(--oao-transition-fast), box-shadow var(--oao-transition-fast);
}

#oaoAskInput:focus {
  outline: none;
  border-color: var(--oao-color-primary);
  box-shadow: var(--oao-focus-ring);
}

#oaoAskBtn {
  border: 0;
  border-radius: var(--oao-btn-radius);
  background: var(--oao-color-primary);
  color: #fff;
  min-height: var(--oao-btn-height-lg);
  font-family: var(--oao-font-family);
  font-weight: var(--oao-font-bold);
  transition: transform var(--oao-transition-fast), box-shadow var(--oao-transition-fast), opacity var(--oao-transition-fast);
}

#oaoAskBtn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: var(--oao-shadow-hover);
}

#oaoAskBtn:active {
  transform: translateY(0);
}

.oao-v2-ask-hint {
  color: var(--oao-color-text-muted);
  opacity: 1;
}

.oao-v2-pill {
  border-color: var(--oao-color-border-soft);
  background: var(--oao-color-surface);
  border-radius: var(--oao-radius-full);
  transition: border-color var(--oao-transition-fast), color var(--oao-transition-fast);
}

.oao-v2-pill:nth-child(1) { animation: oaoV2FadeUp 420ms var(--oao-ease-out) 40ms both; }
.oao-v2-pill:nth-child(2) { animation: oaoV2FadeUp 420ms var(--oao-ease-out) 90ms both; }
.oao-v2-pill:nth-child(3) { animation: oaoV2FadeUp 420ms var(--oao-ease-out) 140ms both; }
.oao-v2-pill:nth-child(4) { animation: oaoV2FadeUp 420ms var(--oao-ease-out) 190ms both; }
.oao-v2-pill:nth-child(5) { animation: oaoV2FadeUp 420ms var(--oao-ease-out) 240ms both; }

/* ── Sections / cards ── */
.oao-v2-section-head h2 {
  font-family: var(--oao-font-family-display);
}

.oao-v2-section-head p {
  color: var(--oao-color-text-muted);
  opacity: 1;
}

.oao-v2-card {
  border-color: var(--oao-color-border-soft);
  background: var(--oao-color-surface);
  border-radius: var(--oao-radius-xl);
  box-shadow: var(--oao-shadow-xs);
  transition:
    transform var(--oao-transition-fast),
    box-shadow var(--oao-transition-fast),
    border-color var(--oao-transition-fast);
}

.oao-v2-card:hover {
  transform: translateY(-2px);
  border-color: var(--oao-color-accent-mid);
  box-shadow: var(--oao-shadow-md);
}

.oao-v2-card:focus-visible {
  border-color: var(--oao-color-primary);
}

.oao-v2-card-sub {
  color: var(--oao-color-text-muted);
  opacity: 1;
}

.oao-v2-card-title {
  font-family: var(--oao-font-family-display);
}

.oao-v2-card-desc {
  color: var(--oao-color-text-muted);
  opacity: 1;
}

.oao-v2-card-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border-radius: var(--oao-radius-full);
  font-size: var(--oao-text-xs);
  letter-spacing: 0.06em;
  opacity: 1;
}

.oao-v2-card-status.is-live {
  color: var(--oao-status-live);
  background: var(--oao-status-live-bg);
}

.oao-v2-card-status.is-soon {
  color: var(--oao-status-soon);
  background: var(--oao-status-soon-bg);
}

.oao-v2-card-status.is-prototype,
#oaoCardTasksStatus {
  color: var(--oao-status-prototype);
  background: var(--oao-status-prototype-bg);
}

.oao-v2-task-panel {
  border-color: var(--oao-color-accent-mid);
  background: var(--oao-color-accent-soft);
  border-radius: var(--oao-radius-lg);
}

.oao-v2-task-list li {
  border-color: var(--oao-color-border-soft);
  background: var(--oao-color-surface);
  border-radius: var(--oao-radius-md);
}

/* ── Drawer ── */
.oao-v2-drawer {
  z-index: var(--oao-z-drawer);
}

.oao-v2-drawer-backdrop {
  background: var(--oao-overlay-bg);
  backdrop-filter: blur(var(--oao-overlay-blur));
  -webkit-backdrop-filter: blur(var(--oao-overlay-blur));
}

.oao-v2-drawer-panel {
  background: var(--oao-color-surface);
  border-left: 1px solid var(--oao-color-border-soft);
  box-shadow: var(--oao-shadow-lg);
}

.oao-v2-drawer-link {
  border-color: var(--oao-color-border-soft);
  border-radius: var(--oao-radius-md);
  transition: background var(--oao-transition-fast), border-color var(--oao-transition-fast);
}

.oao-v2-drawer-link:hover {
  background: var(--oao-color-surface-soft);
  border-color: var(--oao-color-primary);
}

/* ── Bottom nav chrome ── */
.nav-menu {
  border-top: 1px solid var(--oao-color-border-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--topbar-bg, var(--oao-color-bg)) 90%, transparent);
}

.nav-menu:not(.nav-menu--four) .nav-item {
  font-family: var(--oao-font-family);
  font-weight: var(--oao-font-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--oao-text-xs);
  transition: color var(--oao-transition-fast), opacity var(--oao-transition-fast);
}

.nav-menu:not(.nav-menu--four) .nav-item.active {
  color: var(--oao-color-primary);
}

/* ── Shared status utility (for Phase 3/4 reuse) ── */
.oao-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--oao-radius-full);
  font-size: var(--oao-text-xs);
  font-weight: var(--oao-font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.oao-status--live {
  color: var(--oao-status-live);
  background: var(--oao-status-live-bg);
}

.oao-status--soon {
  color: var(--oao-status-soon);
  background: var(--oao-status-soon-bg);
}

.oao-status--prototype {
  color: var(--oao-status-prototype);
  background: var(--oao-status-prototype-bg);
}

/* ── Shared surface / input helpers ── */
.oao-surface {
  background: var(--oao-color-surface);
  border: 1px solid var(--oao-color-border-soft);
  border-radius: var(--oao-radius-lg);
}

.oao-input,
input.oao-input,
textarea.oao-input {
  font-family: var(--oao-font-family);
  border: 1px solid var(--oao-color-border-soft);
  border-radius: var(--oao-input-radius);
  background: var(--input-bg, var(--oao-color-surface));
  color: var(--oao-color-text);
  min-height: var(--oao-input-height);
  padding: var(--oao-space-2) var(--oao-input-padding-x);
}

.oao-input:focus,
input.oao-input:focus,
textarea.oao-input:focus {
  outline: none;
  border-color: var(--oao-color-primary);
  box-shadow: var(--oao-focus-ring);
}

.oao-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oao-space-2);
  min-height: var(--oao-btn-height);
  padding: var(--oao-btn-padding-y) var(--oao-btn-padding-x);
  font-family: var(--oao-font-family);
  font-size: var(--oao-btn-font-size);
  font-weight: var(--oao-btn-font-weight);
  border-radius: var(--oao-btn-radius);
  border: 1px solid var(--oao-color-border-soft);
  background: transparent;
  color: var(--oao-color-text);
  cursor: pointer;
  transition: background var(--oao-transition-base), color var(--oao-transition-base), transform var(--oao-transition-fast);
}

.oao-btn:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-text);
}

.oao-btn--primary {
  border-color: transparent;
  background: var(--oao-color-primary);
  color: #fff;
}

.oao-btn--primary:hover {
  background: var(--oao-color-primary);
  color: #fff;
  opacity: 0.92;
  transform: translateY(-1px);
}

/* ── Icon button sizing ── */
.oao-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--oao-btn-height);
  height: var(--oao-btn-height);
  padding: 0;
  border-radius: var(--oao-radius-md);
  border: 1px solid var(--oao-color-border-soft);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.oao-icon-btn svg {
  width: var(--oao-btn-icon-size);
  height: var(--oao-btn-icon-size);
}

/* ── Modal polish (additive) ── */
.modal-content,
.login-modal-content,
.kb-upload-panel {
  border: 1px solid var(--oao-color-border-soft);
  background: var(--oao-color-surface);
}

/* ── Dark overrides for V2 surfaces ── */
[data-theme="dark"] .oao-v2-hero,
[data-theme="dark"] .oao-v2-card,
[data-theme="dark"] .oao-v2-drawer-panel,
[data-theme="dark"] .oao-v2-task-list li {
  background: #1a1a1a;
}

[data-theme="dark"] .oao-v2-hero {
  background:
    linear-gradient(135deg, var(--oao-color-accent-soft) 0%, transparent 42%),
    #1a1a1a;
}

[data-theme="dark"] #oaoAskInput {
  background: #121212;
  color: var(--oao-color-text);
}

/* ── Motion ── */
@keyframes oaoV2HeroIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes oaoV2FadeUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.oao-v2-card {
  animation: oaoV2FadeUp 480ms var(--oao-ease-out) both;
}

.oao-v2-card-grid .oao-v2-card:nth-child(1) { animation-delay: 40ms; }
.oao-v2-card-grid .oao-v2-card:nth-child(2) { animation-delay: 80ms; }
.oao-v2-card-grid .oao-v2-card:nth-child(3) { animation-delay: 120ms; }
.oao-v2-card-grid .oao-v2-card:nth-child(4) { animation-delay: 160ms; }
.oao-v2-card-grid .oao-v2-card:nth-child(5) { animation-delay: 200ms; }
.oao-v2-card-grid .oao-v2-card:nth-child(6) { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .oao-v2-hero,
  .oao-v2-pill,
  .oao-v2-card {
    animation: none !important;
  }

  #oaoAskBtn:hover,
  .oao-v2-card:hover,
  .oao-btn--primary:hover {
    transform: none;
  }
}

/* ── Responsive visual tweaks ── */
@media (max-width: 720px) {
  .oao-v2-hero {
    padding: 22px 16px 10px;
  }

  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--topbar-bg, var(--oao-color-bg));
  }
}

/* color-mix fallback for older engines */
@supports not (background: color-mix(in srgb, white 50%, black)) {
  .topbar,
  .nav-menu {
    background: var(--topbar-bg, var(--oao-color-bg));
  }
}