/* ============================================================
   SMX.Y · 深蓝海洋主题
   基础样式已做色彩重映射，这里只做定向修正与点缀
   ============================================================ */

:root {
  --ink: #e6f4ff;
  --violet: #7fd8f2;
  --slate: #a9c7d8;
  --mist: #2f7fa3;
  --line: rgba(120, 200, 235, 0.18);
  --lavender-1: #071a28;
  --lavender-2: #0a2233;
  --lavender-3: #0e2c40;
  --moon: #eaf7ff;
  --silver: #7fa3b5;
  --fog: #5f8296;
}

html {
  background: #04121e;
  color-scheme: dark;
}

body {
  color: var(--ink);
  background: linear-gradient(180deg, #04121e 0%, #081f2e 52%, #04121e 100%);
}

input::placeholder,
textarea::placeholder {
  color: rgba(190, 220, 235, 0.42);
}

input,
textarea,
select {
  color: var(--ink);
}

input[type="range"] {
  accent-color: #7fd8f2;
}

/* 主行动按钮：深底上给一块亮海水，层级才立得住 */
.message-primary {
  color: #062634;
  border-color: transparent;
  background: linear-gradient(135deg, #a3e7f8, #5cc0e2);
  box-shadow: 0 16px 40px rgba(0, 18, 30, 0.4);
}

.message-primary:hover {
  border-color: transparent;
}

/* 卡片稍微抬一档，避免和背景糊在一起 */
.message-card,
.message-orb,
.message-result,
.x-subpage-shell,
.ix-chat {
  background: linear-gradient(160deg, rgba(26, 72, 98, 0.72), rgba(8, 28, 42, 0.84));
}

/* TA 气泡在深底上要抬一档，否则和聊天底融在一起 */
.ix-bubble.ta {
  border: 1px solid rgba(120, 200, 235, 0.14);
  background: rgba(24, 66, 90, 0.88);
}

.x-bubble.ta {
  border: 1px solid rgba(120, 200, 235, 0.14);
  background: rgba(24, 66, 90, 0.88);
}

::selection {
  color: #f4fcff;
  background: rgba(127, 216, 242, 0.3);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 1px solid #7fd8f2;
  outline-offset: 3px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #06192a;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #06192a;
  border-radius: 999px;
  background: rgba(120, 200, 235, 0.24);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(120, 200, 235, 0.4);
}

/* ---------- 首屏 ---------- */

.landing {
  background: #04121e;
}

.pill {
  border-color: rgba(150, 215, 240, 0.42);
  background: rgba(10, 40, 58, 0.42);
}

.pill.primary {
  color: #062634;
  border-color: transparent;
  background: linear-gradient(135deg, #a3e7f8, #5cc0e2);
  box-shadow: 0 18px 46px rgba(0, 14, 24, 0.45);
}

.landing::after {
  background:
    radial-gradient(circle at 22% 18%, rgba(120, 200, 230, 0.07), transparent 24rem),
    linear-gradient(270deg, rgba(2, 8, 14, 0.55), rgba(2, 8, 14, 0.1) 45%, rgba(2, 8, 14, 0.28)),
    linear-gradient(180deg, rgba(2, 8, 14, 0.1), transparent 54%, rgba(2, 8, 14, 0.52));
}

.moon-hero-frame {
  background: #04121e;
  filter: brightness(1.02) contrast(1.02) saturate(1.02);
}

/* ---------- 旧组件里把 --moon 当底色的位置 ---------- */

.wechat-box,
.searchline,
.certificate {
  background: #0b2334;
}

/* ---------- 主色按钮：白字需要更深的底 ---------- */

.x-btn.primary,
.assistant-form button,
.ix-chat-form button,
.featured .course-action,
.wechat-close {
  color: #f3fbff;
  background: linear-gradient(135deg, #1c6d90, #2b93b8);
}

.x-bubble.user {
  color: #f3fbff;
  background: linear-gradient(135deg, #1f6f92, #2f96bb);
}

/* ---------- 关于 / 陪伴 ---------- */

.about-contact {
  background:
    radial-gradient(circle at 22% 16%, rgba(20, 74, 104, 0.5), transparent 15rem),
    radial-gradient(circle at 82% 74%, rgba(34, 112, 148, 0.32), transparent 18rem),
    linear-gradient(135deg, #081e2d, #0b2a3e);
}

.x-companion-stage:not(#xCompanionStage) {
  background:
    radial-gradient(circle at 24% 20%, rgba(56, 150, 190, 0.22), transparent 26rem),
    radial-gradient(circle at 78% 82%, rgba(24, 90, 124, 0.28), transparent 24rem),
    linear-gradient(160deg, #051624, #082234 58%, #04121e) !important;
}

.x-companion-stage:not(#xCompanionStage)::before {
  background:
    linear-gradient(180deg, rgba(4, 18, 30, 0.1), rgba(4, 18, 30, 0.42)),
    radial-gradient(circle at 22% 18%, rgba(127, 216, 242, 0.1), transparent 20rem);
}

/* ---------- 细节 ---------- */

.message-status span.active::before,
.ix-status::before,
.course-points li::before {
  background: #7fd8f2;
  box-shadow: 0 0 16px rgba(127, 216, 242, 0.7);
}

.ix-log::before,
.transmission::after,
.assistant-shell::after,
.about-contact::after {
  opacity: 0.22;
}

.message-card:hover,
.message-orb:hover {
  border-color: rgba(127, 216, 242, 0.34);
}