/*
  SorenXI Aurora Theme
  --------------------
  Designed for the current MediaXi/SorenXI CSS variable system.
  Load this file AFTER public/styles.css.

  Activate with:
  document.documentElement.dataset.theme = "sorenxi-aurora";
*/

:root[data-theme="sorenxi-aurora"] {
  color-scheme: dark;

  /* Core surfaces */
  --bg: #081225;
  --bg-2: #101d37;
  --panel: rgba(24, 40, 76, 0.82);
  --panel-solid: #172747;
  --panel-raised: #1c2f57;
  --panel-soft: rgba(31, 51, 92, 0.72);

  /* Typography */
  --text: #f6f8ff;
  --text-dim: #a9b7d3;
  --text-soft: #cbd5ed;

  /* Brand accents */
  --accent: #4f7cff;
  --accent-2: #6f63f5;
  --accent-3: #a653e8;
  --accent-cyan: #3ca7ff;
  --accent-violet: #8d5cff;

  /* States */
  --warn: #f4c24e;
  --ok: #4dde82;
  --err: #ff6072;

  /* Borders, chips, shadows */
  --border: rgba(149, 177, 255, 0.18);
  --border-strong: rgba(127, 153, 255, 0.38);
  --chip: rgba(83, 107, 224, 0.18);
  --chip-hover: rgba(102, 117, 235, 0.28);
  --shadow: 0 18px 48px rgba(1, 8, 24, 0.42);
  --shadow-soft: 0 10px 30px rgba(3, 12, 34, 0.28);
  --glow: 0 0 28px rgba(86, 103, 255, 0.34);
  --glow-strong: 0 0 42px rgba(93, 83, 242, 0.48);

  /* Reusable gradients */
  --gradient-page:
    radial-gradient(1100px 620px at 74% -12%, rgba(70, 101, 224, 0.28), transparent 62%),
    radial-gradient(850px 520px at 8% 108%, rgba(114, 70, 224, 0.18), transparent 58%),
    linear-gradient(145deg, #081225 0%, #0c1930 42%, #101d39 100%);

  --gradient-panel:
    linear-gradient(145deg, rgba(31, 51, 92, 0.90), rgba(17, 31, 59, 0.88));

  --gradient-primary:
    linear-gradient(135deg, #3974f5 0%, #5865ea 48%, #8755e7 100%);

  --gradient-assistant:
    linear-gradient(135deg, rgba(111, 73, 222, 0.52) 0%, rgba(49, 79, 164, 0.70) 58%, rgba(25, 49, 95, 0.94) 100%);

  --gradient-user:
    linear-gradient(135deg, rgba(32, 93, 178, 0.95) 0%, rgba(34, 117, 205, 0.92) 50%, rgba(83, 93, 222, 0.92) 100%);

  --gradient-draft:
    linear-gradient(145deg, rgba(33, 54, 99, 0.97), rgba(26, 44, 82, 0.96));
}

/* Page atmosphere */
:root[data-theme="sorenxi-aurora"] body {
  background-color: var(--bg);
  background-image: var(--gradient-page);
  background-attachment: fixed;
}

/* Main layout */
:root[data-theme="sorenxi-aurora"] .sidebar {
  background:
    linear-gradient(180deg, rgba(7, 17, 35, 0.98), rgba(10, 22, 44, 0.98));
  border-right-color: rgba(129, 157, 231, 0.16);
  box-shadow: 12px 0 40px rgba(2, 8, 24, 0.18);
}

:root[data-theme="sorenxi-aurora"] .main {
  position: relative;
}

:root[data-theme="sorenxi-aurora"] .panel,
:root[data-theme="sorenxi-aurora"] .stat-card,
:root[data-theme="sorenxi-aurora"] .stage-col,
:root[data-theme="sorenxi-aurora"] .history-col {
  background: var(--gradient-panel);
  border-color: var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(118%);
}

/* Brand */
:root[data-theme="sorenxi-aurora"] .brand-mark {
  background: var(--gradient-primary);
  box-shadow:
    0 0 30px rgba(82, 98, 255, 0.40),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

:root[data-theme="sorenxi-aurora"] .brand-wordmark-xi {
  fill: #7295ff;
}

/* Navigation */
:root[data-theme="sorenxi-aurora"] .nav-item {
  color: #9facc8;
}

:root[data-theme="sorenxi-aurora"] .nav-item:hover {
  color: var(--text);
  background: rgba(74, 96, 176, 0.14);
}

:root[data-theme="sorenxi-aurora"] .nav-item.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(94, 71, 206, 0.30), rgba(44, 84, 167, 0.18));
  border-color: rgba(130, 149, 236, 0.20);
  box-shadow:
    inset 3px 0 0 #8d62ff,
    0 8px 28px rgba(27, 38, 94, 0.24);
}

/* Buttons */
:root[data-theme="sorenxi-aurora"] .btn {
  border-color: var(--border);
  background: rgba(27, 45, 82, 0.76);
}

:root[data-theme="sorenxi-aurora"] .btn:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft);
}

:root[data-theme="sorenxi-aurora"] .btn-primary {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
  box-shadow:
    0 10px 28px rgba(43, 79, 202, 0.36),
    0 0 22px rgba(113, 80, 232, 0.26);
}

:root[data-theme="sorenxi-aurora"] .btn-secondary,
:root[data-theme="sorenxi-aurora"] .btn-mini {
  color: #c2c9ff;
  background: linear-gradient(135deg, rgba(87, 79, 202, 0.22), rgba(53, 91, 180, 0.18));
  border-color: rgba(126, 133, 245, 0.34);
}

:root[data-theme="sorenxi-aurora"] .btn-ghost {
  background: rgba(13, 27, 52, 0.36);
}

/* Inputs */
:root[data-theme="sorenxi-aurora"] .input,
:root[data-theme="sorenxi-aurora"] .textarea,
:root[data-theme="sorenxi-aurora"] select.input {
  background: rgba(8, 19, 39, 0.72);
  border-color: rgba(137, 164, 231, 0.17);
  color: var(--text);
}

:root[data-theme="sorenxi-aurora"] .input::placeholder,
:root[data-theme="sorenxi-aurora"] .textarea::placeholder {
  color: #7f8dab;
}

:root[data-theme="sorenxi-aurora"] .input:focus,
:root[data-theme="sorenxi-aurora"] .textarea:focus {
  border-color: #6689ff;
  box-shadow:
    0 0 0 3px rgba(79, 124, 255, 0.14),
    0 0 24px rgba(87, 79, 230, 0.15);
}

/* Consultant shell */
:root[data-theme="sorenxi-aurora"] .stage-col {
  background:
    radial-gradient(700px 420px at 58% 16%, rgba(86, 93, 207, 0.20), transparent 68%),
    linear-gradient(145deg, rgba(27, 45, 83, 0.94), rgba(16, 29, 55, 0.95));
}

:root[data-theme="sorenxi-aurora"] .history-col {
  background:
    linear-gradient(160deg, rgba(28, 46, 84, 0.91), rgba(15, 28, 53, 0.96));
}

/* Stage screen */
:root[data-theme="sorenxi-aurora"] .stage-screen,
:root[data-theme="sorenxi-aurora"] .stage-showcase {
  background:
    radial-gradient(520px 320px at 50% 42%, rgba(77, 93, 215, 0.14), transparent 72%),
    linear-gradient(160deg, rgba(9, 22, 44, 0.98), rgba(14, 29, 55, 0.97));
  border-color: rgba(138, 164, 229, 0.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025),
    inset 0 -40px 90px rgba(4, 12, 30, 0.20);
}

/* Existing orb, upgraded by theme */
:root[data-theme="sorenxi-aurora"] .mentor-orb {
  background:
    radial-gradient(circle at 34% 25%, #86b2ff 0%, #6d80ef 32%, #7658e8 68%, #2c236a 100%);
  border: 1px solid rgba(175, 196, 255, 0.30);
  box-shadow:
    0 0 18px rgba(100, 122, 255, 0.50),
    0 0 48px rgba(115, 76, 226, 0.34),
    inset 0 1px 14px rgba(255,255,255,0.20);
}

:root[data-theme="sorenxi-aurora"] .mentor-orb.speaking {
  box-shadow:
    0 0 24px rgba(87, 151, 255, 0.68),
    0 0 62px rgba(119, 78, 232, 0.50),
    inset 0 1px 18px rgba(255,255,255,0.24);
}

:root[data-theme="sorenxi-aurora"] .mentor-orb.listening {
  box-shadow:
    0 0 22px rgba(71, 208, 255, 0.58),
    0 0 64px rgba(74, 121, 247, 0.40),
    inset 0 1px 18px rgba(255,255,255,0.22);
}

/* Chat bubbles — the gradient look from the concept images */
:root[data-theme="sorenxi-aurora"] .chat-scroll {
  background:
    radial-gradient(520px 360px at 16% 18%, rgba(128, 75, 226, 0.09), transparent 72%),
    radial-gradient(520px 360px at 82% 64%, rgba(44, 125, 224, 0.08), transparent 72%);
}

:root[data-theme="sorenxi-aurora"] .chat-msg {
  position: relative;
  max-width: 78%;
  padding: 13px 16px;
  border-radius: 16px;
  color: var(--text);
  box-shadow: 0 10px 26px rgba(2, 9, 27, 0.22);
  backdrop-filter: blur(12px) saturate(115%);
}

:root[data-theme="sorenxi-aurora"] .chat-msg.assistant {
  background: var(--gradient-assistant);
  border: 1px solid rgba(145, 118, 255, 0.42);
  border-bottom-left-radius: 5px;
  box-shadow:
    0 10px 28px rgba(9, 14, 44, 0.28),
    0 0 24px rgba(125, 77, 232, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

:root[data-theme="sorenxi-aurora"] .chat-msg.user {
  background: var(--gradient-user);
  border: 1px solid rgba(90, 174, 255, 0.42);
  border-bottom-right-radius: 5px;
  box-shadow:
    0 10px 28px rgba(6, 24, 61, 0.28),
    0 0 24px rgba(48, 125, 228, 0.13),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

:root[data-theme="sorenxi-aurora"] .chat-msg.assistant::before,
:root[data-theme="sorenxi-aurora"] .chat-msg.user::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,0.08), transparent 36%);
  opacity: 0.70;
}

:root[data-theme="sorenxi-aurora"] .chat-msg .prov {
  color: rgba(210, 220, 245, 0.64);
}

/* Right-side history */
:root[data-theme="sorenxi-aurora"] .history-item {
  background: linear-gradient(145deg, rgba(25, 43, 79, 0.86), rgba(18, 33, 63, 0.91));
  border-color: rgba(132, 157, 225, 0.15);
  box-shadow: 0 8px 22px rgba(2, 8, 24, 0.18);
}

:root[data-theme="sorenxi-aurora"] .history-item:hover {
  border-color: rgba(113, 130, 235, 0.34);
}

/* Generated media on stage */
:root[data-theme="sorenxi-aurora"] .showcase-body img,
:root[data-theme="sorenxi-aurora"] .showcase-body video {
  border: 1px solid rgba(144, 168, 234, 0.20);
  box-shadow:
    0 20px 50px rgba(1, 7, 23, 0.38),
    0 0 30px rgba(70, 89, 211, 0.16);
}

/* Optional reusable final-draft classes for the upgraded stage */
:root[data-theme="sorenxi-aurora"] .stage-draft-card {
  background: var(--gradient-draft);
  border: 1px solid rgba(137, 163, 233, 0.20);
  border-radius: 18px;
  padding: 20px;
  color: var(--text);
  box-shadow:
    0 18px 44px rgba(2, 9, 28, 0.34),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

:root[data-theme="sorenxi-aurora"] .stage-draft-title {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

:root[data-theme="sorenxi-aurora"] .stage-draft-copy {
  color: #dbe4f7;
  line-height: 1.65;
}

:root[data-theme="sorenxi-aurora"] .stage-platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #dbe5ff;
  background: rgba(15, 28, 55, 0.72);
  border: 1px solid rgba(139, 162, 230, 0.18);
}

:root[data-theme="sorenxi-aurora"] .stage-platform-chip.is-connected {
  color: #a8f6c4;
  background: rgba(32, 119, 76, 0.24);
  border-color: rgba(70, 220, 130, 0.24);
}

:root[data-theme="sorenxi-aurora"] .stage-action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* Scrollbars */
:root[data-theme="sorenxi-aurora"] * {
  scrollbar-color: rgba(103, 120, 217, 0.55) rgba(8, 19, 38, 0.42);
  scrollbar-width: thin;
}

:root[data-theme="sorenxi-aurora"] *::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

:root[data-theme="sorenxi-aurora"] *::-webkit-scrollbar-track {
  background: rgba(8, 19, 38, 0.42);
}

:root[data-theme="sorenxi-aurora"] *::-webkit-scrollbar-thumb {
  background: linear-gradient(#4f7cff, #755ae7);
  border-radius: 999px;
  border: 2px solid rgba(8, 19, 38, 0.42);
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce) {
  :root[data-theme="sorenxi-aurora"] .mentor-orb,
  :root[data-theme="sorenxi-aurora"] .mentor-orb.speaking,
  :root[data-theme="sorenxi-aurora"] .mentor-orb.listening {
    animation: none !important;
    transition: none !important;
  }
}