:root {
  color-scheme: dark;
  --ink: #020402;
  --deep: #070807;
  --panel: rgba(17, 21, 18, 0.72);
  --panel-strong: rgba(23, 28, 24, 0.9);
  --line: rgba(224, 198, 139, 0.2);
  --text: #f4efe1;
  --muted: #b9b09b;
  --dim: #837d70;
  --gold: #d4af37; /* 采用 Logo 中那种饱满的古金色彩 */
  --ember: #d95d39;
  --jade: #4aa37a;
  --paper: #fff7df;
  --shadow: 0 25px 80px rgba(0, 0, 0, 0.65);
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-ritual: "Eagle Lake", cursive, serif;
  --font-inscription: "Metamorphous", serif;
  --font-classic: "Cinzel", serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  font-family: var(--font-ui);
  background: var(--ink);
  color: var(--text);
  overflow: hidden;
}

#sky {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(2, 4, 2, 0.52), rgba(2, 4, 2, 0.18) 42%, rgba(2, 4, 2, 0.68)),
    linear-gradient(180deg, rgba(2, 4, 2, 0.32), rgba(2, 4, 2, 0.92)),
    url("./assets/yuan-star-chart-bg.png") center top / cover no-repeat,
    linear-gradient(160deg, #020402 0%, #070807 45%, #0a0812 100%);
}

.oracle-shell {
  position: relative;
  z-index: 1;
  height: 100dvh;
  padding: 24px;
  display: flex;
  overflow: hidden;
}

.oracle-stage {
  width: min(1320px, 100%);
  margin: auto;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 48px);
  min-height: 0;
}

/* BRAND BAR & LOGO */
.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 20px;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.mark-symbol {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 175, 55, 0.4);
  background:
    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.15), rgba(0, 0, 0, 0.48) 54%, rgba(0, 0, 0, 0.72)),
    rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.1);
}

.mark-symbol img {
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter: drop-shadow(0 0 9px rgba(212, 175, 55, 0.35));
}

/* 移除旧的 CSS 绘图 */
.mark-symbol::before,
.mark-symbol::after {
  display: none;
}

.brand-mark strong {
  font-family: var(--font-classic);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.brand-mark small {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* TOP ACTIONS & STATUS */
.top-actions { display: inline-flex; align-items: center; gap: 10px; }
.language-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: rgba(0,0,0,0.3); }
.lang-btn { min-width: 42px; height: 34px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.lang-btn.active { color: var(--text); background: rgba(217, 180, 95, 0.14); }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 34px; border: 1px solid var(--line); background: rgba(0,0,0,0.4); color: var(--muted); font-size: 13px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 12px var(--ember); }
.status-pill.online .status-dot { background: var(--jade); box-shadow: 0 0 12px var(--jade); }

/* GRID LAYOUT */
.stage-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
}

.presence, .chat-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  min-height: 0;
}

/* PRESENCE: THE ABYSSOS (LEFT SIDE) */
.presence {
  position: relative;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(3, 8, 6, 0.36), rgba(5, 10, 8, 0.9)),
    linear-gradient(90deg, rgba(217, 180, 95, 0.035), transparent 28%, rgba(74, 163, 122, 0.025) 70%, transparent),
    rgba(7, 13, 10, 0.88);
}

.presence::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(224, 198, 139, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224, 198, 139, 0.045) 1px, transparent 1px);
  background-size:
    54px 54px,
    54px 54px;
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  mask-image: linear-gradient(to bottom, black 0%, black 64%, transparent 100%);
  pointer-events: none;
  opacity: 0.25; /* 保持低调的背景感 */
}

.presence::after {
  content: "";
  position: absolute;
  inset: -18% -22% -16% -16%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 86%, transparent 0 48%, rgba(217, 180, 95, 0.08) 48.2%, transparent 48.7%),
    radial-gradient(ellipse at 75% 16%, transparent 0 42%, rgba(217, 180, 95, 0.055) 42.2%, transparent 42.7%),
    linear-gradient(30deg, transparent 0 52%, rgba(217, 180, 95, 0.055) 52.08%, transparent 52.18%),
    linear-gradient(150deg, transparent 0 59%, rgba(74, 163, 122, 0.045) 59.08%, transparent 59.18%),
    radial-gradient(ellipse at center, transparent 0 42%, rgba(0, 0, 0, 0.32) 78%, rgba(0, 0, 0, 0.72) 100%);
  opacity: 0.95;
  mix-blend-mode: screen;
}

.presence-sigil {
  position: absolute;
  top: 27%;
  left: 52%;
  width: 210px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 6;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.76;
  filter: drop-shadow(0 0 24px rgba(217, 180, 95, 0.18));
  animation: sigil-breathe 5.8s ease-in-out infinite;
  background:
    radial-gradient(circle, rgba(217, 180, 95, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle, transparent 0 24%, rgba(217, 180, 95, 0.12) 24.4%, transparent 25%),
    radial-gradient(circle, transparent 0 41%, rgba(217, 180, 95, 0.095) 41.4%, transparent 42%),
    radial-gradient(circle, transparent 0 52%, rgba(74, 163, 122, 0.08) 52.4%, transparent 53%);
}

.presence-sigil::before,
.presence-sigil::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.presence-sigil::before {
  inset: 32px;
  border: 1px solid rgba(217, 180, 95, 0.14);
  box-shadow:
    inset 0 0 28px rgba(217, 180, 95, 0.05),
    0 0 30px rgba(217, 180, 95, 0.08);
}

.presence-sigil::after {
  inset: 70px;
  background:
    radial-gradient(circle at center, rgba(255, 247, 223, 0.96) 0 5px, rgba(217, 180, 95, 0.54) 6px 15px, transparent 16px),
    radial-gradient(ellipse at center, transparent 0 43%, rgba(217, 180, 95, 0.58) 44%, transparent 48%),
    radial-gradient(ellipse at center, rgba(217, 180, 95, 0.12), transparent 66%);
  box-shadow:
    0 0 24px rgba(217, 180, 95, 0.32),
    0 0 84px rgba(217, 180, 95, 0.16);
  animation: eye-pulse 5.8s ease-in-out infinite;
}

.sigil-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118px;
  height: 50px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(217, 180, 95, 0.5);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(2, 4, 2, 0.98) 0 8px, rgba(217, 180, 95, 0.62) 9px 14px, rgba(255, 247, 223, 0.58) 15px 17px, transparent 18px),
    radial-gradient(ellipse at center, rgba(217, 180, 95, 0.18), transparent 66%),
    linear-gradient(90deg, transparent, rgba(255, 247, 223, 0.2), transparent);
  box-shadow:
    inset 0 0 20px rgba(217, 180, 95, 0.16),
    0 0 26px rgba(217, 180, 95, 0.25);
  animation: eye-core-breathe 5.8s ease-in-out infinite;
}

@keyframes sigil-breathe {
  0%, 100% { opacity: 0.56; filter: drop-shadow(0 0 14px rgba(217, 180, 95, 0.12)); }
  48% { opacity: 0.86; filter: drop-shadow(0 0 34px rgba(217, 180, 95, 0.28)); }
}

@keyframes eye-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.66; }
  48% { transform: scale(1.04); opacity: 1; }
}

@keyframes eye-core-breathe {
  0%, 100% { box-shadow: inset 0 0 18px rgba(217, 180, 95, 0.12), 0 0 16px rgba(217, 180, 95, 0.16); }
  48% { box-shadow: inset 0 0 22px rgba(217, 180, 95, 0.24), 0 0 38px rgba(217, 180, 95, 0.36); }
}

.presence-copy {
  position: relative;
  z-index: 20;
}

/* TYPOGRAPHY */
.kicker { color: var(--gold); font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; }
h1 { font-size: 72px; line-height: 1.05; margin: 0 0 24px; }
.lead { font-size: 20px; line-height: 1.8; color: var(--muted); margin: 0; max-width: 580px; }
.lead-cta { font-size: 17px; color: var(--gold); margin-top: 16px; }

.signal-strip {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.signal-strip span {
  height: 60px; display: grid; place-items: center;
  color: var(--muted); border-right: 1px solid var(--line); font-size: 14px;
}
.signal-strip span:last-child { border-right: 0; }

html[lang="en"] .brand-mark strong,
html[lang="en"] h1,
html[lang="en"] .chat-head h2 {
  font-family: var(--font-inscription);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html[lang="en"] h1 {
  font-size: 76px;
}

html[lang="en"] .chat-head h2 {
  font-size: 38px;
}

html[lang="en"] .lead,
html[lang="en"] .lead-cta {
  font-family: var(--font-ritual);
  font-size: 21px;
}

html[lang="en"] body {
  font-family: var(--font-ritual);
}

html[lang="en"] .kicker,
html[lang="en"] .eyebrow {
  font-family: var(--font-inscription);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[lang="en"] textarea,
html[lang="en"] .send-button,
html[lang="en"] .icon-button,
html[lang="en"] .status-pill,
html[lang="en"] .brand-mark small {
  font-family: var(--font-ritual);
}

html[lang="en"] .signal-strip span {
  font-family: var(--font-ritual);
  font-size: 15px;
}

/* CHAT PANEL (RIGHT SIDE) */
.chat-panel { display: flex; flex-direction: column; background: var(--panel-strong); overflow: hidden; }
.chat-head { padding: 32px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: flex-start; }
.chat-head h2 { font-size: 32px; margin: 0; line-height: 1.2; }
.eyebrow { font-size: 12px; color: var(--gold); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }

.messages {
  flex: 1;
  min-height: 0;
  padding: 28px 32px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.message {
  padding: 16px 20px; border: 1px solid var(--line); line-height: 1.7; font-size: 16px; white-space: pre-wrap;
  width: fit-content; max-width: 85%;
}
.oracle-message { background: rgba(255, 247, 223, 0.05); align-self: flex-start; }
.user-message { background: rgba(74, 163, 122, 0.1); border-color: rgba(74, 163, 122, 0.3); align-self: flex-end; }

.composer {
  padding: 0 32px 52px;
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: 12px;
}
textarea {
  background: rgba(0,0,0,0.5); border: 1px solid var(--line); color: var(--text);
  padding: 16px; font-size: 16px; line-height: 1.5; resize: none; min-height: 56px; max-height: 150px; outline: none;
}
textarea:focus { border-color: var(--gold); }
.send-button {
  height: 56px; border: 1px solid var(--gold); background: rgba(217,180,95,0.1); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.send-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 1024px) {
  .oracle-shell { padding: 16px; }
  .oracle-stage { height: calc(100dvh - 32px); }
  .stage-grid { grid-template-columns: 1fr; grid-template-rows: minmax(260px, 0.46fr) minmax(0, 1fr); }
  .presence { padding: 28px 24px; justify-content: flex-end; }
  .presence-sigil {
    top: 18%;
    left: 78%;
    width: 140px;
    opacity: 0.36;
  }
  .sigil-core { width: 78px; height: 34px; }
  .signal-strip { display: none; }
  h1 { font-size: 44px; margin-bottom: 18px; }
  .lead { font-size: 18px; line-height: 1.65; }
  .lead-cta { margin-top: 12px; }

  html[lang="en"] .stage-grid { grid-template-rows: minmax(320px, 0.52fr) minmax(0, 1fr); }
  html[lang="en"] h1 { font-size: 48px; margin-bottom: 16px; }
  html[lang="en"] .lead {
    font-size: 16px;
    line-height: 1.5;
  }
  html[lang="en"] .lead-cta {
    font-size: 17px;
    line-height: 1.45;
  }
  html[lang="en"] .chat-head h2 { font-size: 34px; }
}