/* ABYSECHO · Cosmic preview overlay.
   This file is intentionally isolated for chat-cosmic.html. */

:root {
  --font-cn: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-display: "Cinzel", serif;
  --font-mono: "JetBrains Mono", monospace;
  --accent: #93a4ff;
  --accent-strong: #6d7df4;
  --accent-warm: #d9b779;
  --accent-mint: #77d3a8;
  --text: #eef2ff;
  --text-strong: #ffffff;
  --dim: rgba(224, 232, 255, .58);
  --soft: rgba(238, 242, 255, .78);
  --glass-bg: rgba(20, 25, 48, .54);
  --glass-border: rgba(220, 226, 255, .16);
  --glass-blur: blur(22px) saturate(150%);
  --time-me: rgba(232, 238, 255, .72);
  --time-them: rgba(226, 232, 255, .56);
  --cosmic-card: rgba(24, 30, 58, .62);
  --cosmic-card-2: rgba(250, 252, 255, .08);
  --cosmic-line: rgba(222, 230, 255, .13);
}

html,
body {
  background: #070a13;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  color: var(--text);
  font-family: var(--font-cn);
}

.stage-chat {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 22%),
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, .78), transparent 60%),
    radial-gradient(1px 1px at 31% 12%, rgba(217, 183, 121, .65), transparent 60%),
    radial-gradient(1px 1px at 72% 18%, rgba(147, 164, 255, .72), transparent 60%),
    radial-gradient(1px 1px at 87% 43%, rgba(119, 211, 168, .5), transparent 60%),
    linear-gradient(165deg, #101427 0%, #1b2039 36%, #11172a 66%, #070a13 100%);
}

.stage-chat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.48'/%3E%3C/svg%3E");
}

.chat-header,
.messages,
.chat-bottom,
.cfg-settings {
  position: relative;
  z-index: 1;
}

.chat-header::before {
  background: linear-gradient(180deg, rgba(7, 10, 19, .86), rgba(7, 10, 19, 0));
}

.chat-header {
  padding-top: calc(env(safe-area-inset-top, 44px) + 12px) !important;
}

.glass-circle,
.header-pill,
.input-capsule {
  background: rgba(246, 248, 255, .10);
  border-color: rgba(236, 240, 255, .17);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .13);
}

.glass-circle svg,
.header-name,
.chat-input {
  color: var(--text);
  stroke: currentColor;
}

.header-pill {
  min-width: 168px;
}

.header-name {
  font-size: 17px;
  letter-spacing: .03em;
  text-shadow: 0 0 18px rgba(147, 164, 255, .22);
}

.header-avatar span {
  color: #dfe6ff;
}

.messages {
  padding: 8px 12px 12px;
  gap: 3px;
}

.bubble {
  max-width: min(82%, 520px);
  padding: 9px 13px;
  font-size: 15px;
  line-height: 1.54;
  letter-spacing: 0;
}

.bubble.them {
  color: #f4f6ff;
  background: rgba(248, 250, 255, .10);
  border: 1px solid rgba(236, 240, 255, .14);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.bubble.me {
  color: #fff;
  background: linear-gradient(145deg, #8fa1ff 0%, #6c7df0 48%, #40549f 100%);
  box-shadow: 0 10px 24px rgba(57, 75, 155, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.bubble.them.tail {
  border-radius: 18px 18px 18px 6px;
}

.bubble.me.tail {
  border-radius: 18px 18px 6px 18px;
}

.bubble.new-turn,
.chat-media.new-turn,
.thinking-card.new-turn {
  margin-top: 12px;
}

.msg-time,
.media-time {
  display: none !important;
}

.msg-time-row {
  max-width: min(82%, 520px);
  margin-top: 2px;
  padding: 0 7px;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--time-them);
  white-space: nowrap;
  user-select: none;
}

.msg-time-row.me {
  align-self: flex-end;
  text-align: right;
  color: var(--time-me);
}

.msg-time-row.them {
  align-self: flex-start;
  text-align: left;
}

.msg-check {
  margin-left: 2px;
  color: inherit;
}

.thinking-card {
  max-width: min(90%, 560px);
  color: #fff;
  background: linear-gradient(145deg, #8fa1ff 0%, #6c7df0 48%, #40549f 100%);
  border: 1px solid rgba(255, 255, 255, .20);
  box-shadow: 0 10px 24px rgba(57, 75, 155, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.think-quote {
  background: rgba(255, 255, 255, .16);
}

.think-quote::before {
  background: rgba(255, 255, 255, .74);
}

.think-summary {
  color: #f5f7ff;
}

.think-body {
  color: rgba(255, 255, 255, .84);
}

.think-meta {
  color: rgba(238, 242, 255, .48);
}

.think-chevron {
  color: rgba(255, 255, 255, .82);
}

.chat-input::placeholder,
.input-icon svg {
  color: rgba(232, 238, 255, .45);
  stroke: currentColor;
}

.send-btn {
  background: linear-gradient(145deg, #92a2ff, #5367d8);
  box-shadow: 0 8px 18px rgba(83, 103, 216, .34);
}

.cfg-settings {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 28%),
    linear-gradient(165deg, #11162a 0%, #1a2038 42%, #080b15 100%) !important;
  color: var(--text);
  max-width: 100%;
  overflow-x: hidden;
}

.cfg-profile .nm,
.cfg-sec .h,
.cfg-row .l .tx,
.sticker-sheet-title {
  color: var(--text);
}

.cfg-profile .at,
.cfg-row .l .tx small,
.cfg-sec .h,
.relay-note,
.cfg-foot-note {
  color: var(--dim);
}

.cfg-group,
.cfg-sheet,
.sticker-sheet,
.monitor-detail pre,
.relay-provider-item,
.memory-candidate-card {
  background: var(--cosmic-card);
  border-color: var(--cosmic-line);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.cfg-row {
  border-bottom-color: var(--cosmic-line);
}

.cfg-row .l .ico,
.monitor-grid div,
.relay-route,
.relay-source label,
.relay-fields input,
.relay-fields select,
.sw-chip,
.sticker-search,
.sticker-cell {
  background: var(--cosmic-card-2);
  border-color: var(--cosmic-line);
  color: var(--text);
}

.monitor-grid {
  gap: 10px;
}

.monitor-grid div {
  border-radius: 14px;
}

.monitor-grid span {
  color: var(--dim);
}

.monitor-grid b,
#cacheHitRate,
#cacheTokens,
.relay-provider-name {
  color: var(--text-strong);
}

.monitor-pill,
.relay-provider-tag,
.pill {
  background: rgba(147, 164, 255, .16);
  color: #cdd4ff;
}

.memory-candidates {
  border-top-color: var(--cosmic-line) !important;
}

.memory-candidate-head {
  padding: 2px 0 0 !important;
}

#memoryExtractBtn,
.relay-actions button,
.seg.on {
  background: linear-gradient(145deg, #8fa1ff, #5468d6) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(84, 104, 214, .26);
}

.seg,
.sw,
.sticker-act,
.sticker-close {
  background: rgba(248, 250, 255, .09);
  color: var(--text);
}

.media-stack img {
  border-color: rgba(236, 240, 255, .16);
  background: rgba(248, 250, 255, .08);
}

/* ===== 顶部宇宙化（2026-07-04 墨亦：顶部按宇宙壳来） ===== */

.header-avatar {
  background: linear-gradient(145deg, #8fa1ff 0%, #6c7df0 55%, #40549f 100%);
  border-color: rgba(236, 240, 255, .22);
  box-shadow: 0 10px 24px rgba(57, 75, 155, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.header-avatar span {
  color: #fff;
  font-family: "Noto Serif SC", serif;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(20, 28, 70, .5);
}

.header-name {
  font-family: "Noto Serif SC", serif;
  font-weight: 600;
}

.header-status {
  font-size: 11.5px;
  letter-spacing: .02em;
}

.header-status .cfg-status {
  color: var(--accent);
}

.header-status .cfg-dot.s-online {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(147, 164, 255, .8);
}

@media (prefers-color-scheme: light) {
  :root {
    --text: #1f2638;
    --text-strong: #121827;
    --dim: rgba(38, 50, 76, .52);
    --glass-bg: rgba(255, 255, 255, .58);
    --glass-border: rgba(255, 255, 255, .72);
    --cosmic-card: rgba(255, 255, 255, .66);
    --cosmic-card-2: rgba(132, 151, 190, .10);
    --cosmic-line: rgba(70, 91, 136, .13);
    --time-me: rgba(255, 255, 255, .78);
    --time-them: rgba(38, 50, 76, .42);
  }

  .stage-chat {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .72), transparent 24%),
      radial-gradient(1px 1px at 16% 14%, rgba(90, 110, 170, .42), transparent 60%),
      radial-gradient(1px 1px at 76% 18%, rgba(217, 183, 121, .42), transparent 60%),
      linear-gradient(165deg, #edf3fb 0%, #d9e6f7 40%, #c9d8ed 100%);
  }

  .chat-header::before {
    background: linear-gradient(180deg, rgba(236, 244, 252, .90), rgba(236, 244, 252, 0));
  }

  .bubble.them,
  .thinking-card {
    color: var(--text);
    background: rgba(255, 255, 255, .70);
    border-color: rgba(255, 255, 255, .72);
  }

  .thinking-card {
    box-shadow: 0 12px 28px rgba(68, 91, 130, .14), inset 3px 0 0 rgba(119, 211, 168, .82);
  }

  .think-summary,
  .think-body {
    color: var(--text);
  }

  .cfg-settings {
    background: linear-gradient(180deg, #eaf3fc, #c9d8ed) !important;
  }
}

/* 2026-07-05 墨亦：聊天页不要进出场动画，思考链降成低调毛玻璃。 */
.stage-chat,
.stage-chat.page-enter,
.stage-chat.page-leave,
.stage-chat.exit-to-nav {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.thinking-card {
  color: var(--think-text, rgba(232, 238, 255, .68)) !important;
  background: var(--think-bg, rgba(0, 0, 0, .10)) !important;
  border-color: var(--think-border, rgba(255, 255, 255, .12)) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
}
.think-summary,
.think-body,
.think-meta,
.think-chevron {
  color: var(--think-text, rgba(232, 238, 255, .68)) !important;
}
.header-status,
.header-status .cfg-status,
.cfg-status.s-online {
  color: var(--accent) !important;
}
.header-status .cfg-dot.s-online,
.cfg-dot.s-online {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(147, 164, 255, .8) !important;
}