/* chat.css —— 星语：AI 对话页（v4 浅色云雾版——除宇宙页外全站不使用深色底） */
.chat-page {
  --xy-bg: #FAF8FD;
  --xy-card: #ffffff;
  --xy-ink: #3D3040;
  --xy-dim: #8a7f95;
  --xy-line: #eee7f5;
  --xy-line2: rgba(139, 92, 246, .16);
  --xy-a: #EC4899;
  --xy-b: #8B5CF6;
  background:
    radial-gradient(1000px 520px at 85% -12%, rgba(167, 139, 250, .17), transparent 60%),
    radial-gradient(860px 460px at -10% 30%, rgba(244, 114, 182, .13), transparent 60%),
    radial-gradient(760px 520px at 70% 112%, rgba(125, 211, 252, .15), transparent 60%),
    var(--xy-bg);
  color: var(--xy-ink);
  min-height: 100vh;min-height: 100dvh;
  font-family: Nunito, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
}

.xy-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 22px 40px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
  min-height: calc(100vh - 60px);min-height: calc(100dvh - 60px);
}
@media (max-width: 880px) {
  .xy-wrap { grid-template-columns: 1fr; padding-top: 84px; gap: 16px; }
  .xy-side { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; }
  .xy-side .kicker, .xy-side .xy-lede, .xy-side .xy-note { display: none; }
  .xy-side .xy-title { grid-column: 1; font-size: 26px; margin: 0; }
  .xy-side .xy-field { grid-column: 2; }
  .xy-status, .xy-btn#xyClear { grid-column: 1 / -1; }
}

/* ---- 侧栏 ---- */
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .35em; text-transform: uppercase; color: var(--xy-dim); }
.k-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--xy-b); box-shadow: 0 0 8px rgba(139, 92, 246, .6); }
.xy-title {
  margin: 12px 0 10px; font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: .04em;
  background: linear-gradient(135deg, #db2777, #7c3aed 55%, #0284c7);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.xy-lede { color: var(--xy-dim); font-size: 13.5px; line-height: 1.8; margin-bottom: 22px; }
.xy-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.xy-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--xy-dim); }
#xyModel {
  appearance: none;
  background: #fff; color: var(--xy-ink);
  border: 1.5px solid var(--xy-line2); border-radius: 12px;
  font-family: inherit; font-size: 14px;
  padding: 11px 14px; min-height: 46px; outline: none;
  cursor: pointer;
  box-shadow: 0 8px 20px -12px rgba(124, 58, 237, .25);
}
#xyModel:focus-visible { border-color: var(--xy-b); box-shadow: 0 0 0 4px rgba(139, 92, 246, .13); }
.xy-status {
  font-size: 12.5px; color: var(--xy-dim); line-height: 1.6;
  padding: 9px 12px; border-radius: 10px; border: 1.5px dashed var(--xy-line2);
  margin-bottom: 14px; background: rgba(255, 255, 255, .6);
}
.xy-status.on { color: #059669; border-color: rgba(5, 150, 105, .3); background: rgba(209, 250, 229, .35); }
.xy-status.off { color: #be123c; border-color: rgba(225, 29, 72, .25); background: rgba(255, 228, 230, .4); }

.xy-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--xy-line2); border-radius: 999px;
  background: #fff; color: #5b4b66;
  font-family: inherit; font-size: 13.5px; font-weight: 800;
  min-height: 44px; padding: 10px 20px;
  box-shadow: 0 8px 20px -12px rgba(124, 58, 237, .25);
  transition: all .2s ease;
}
.xy-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xy-btn:hover { border-color: var(--xy-b); color: #6d28d9; }
.xy-btn:active { transform: scale(.97); }
.xy-btn:focus-visible { outline: 2px solid var(--xy-b); outline-offset: 2px; }
.xy-btn.primary {
  background: linear-gradient(135deg, #EC4899, #8B5CF6);
  border-color: transparent; color: #fff;
  box-shadow: 0 12px 26px -10px rgba(236, 72, 153, .55);
}
.xy-btn.primary:hover { color: #fff; transform: translateY(-2px); }
.xy-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.xy-note { color: var(--xy-dim); font-size: 11.5px; line-height: 1.8; margin-top: 16px; }
.xy-note a { color: #7c3aed; font-weight: 700; text-decoration: none; }
.xy-note a:hover { color: #db2777; text-decoration: underline; }

/* ---- 对话区 ---- */
.xy-main {
  display: flex; flex-direction: column;
  border: 1px solid var(--xy-line2); border-radius: 24px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 60px -34px rgba(124, 58, 237, .35);
  min-height: 560px; max-height: calc(100vh - 160px);max-height: calc(100dvh - 160px);
  overflow: hidden;
}
.xy-list { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.xy-msg { max-width: 86%; padding: 13px 17px; border-radius: 18px; font-size: 14.5px; line-height: 1.75; word-break: break-word; }
.xy-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #EC4899, #8B5CF6);
  color: #fff; font-weight: 600;
  border-bottom-right-radius: 6px;
  box-shadow: 0 12px 24px -12px rgba(236, 72, 153, .5);
}
.xy-msg.ai {
  align-self: flex-start;
  background: #fff; border: 1px solid var(--xy-line);
  color: var(--xy-ink);
  border-bottom-left-radius: 6px;
  box-shadow: 0 8px 18px -12px rgba(124, 58, 237, .18);
}
.xy-msg.sys {
  align-self: center; background: rgba(244, 114, 182, .08); border: 1.5px dashed rgba(236, 72, 153, .3);
  color: #be185d; font-size: 12.5px; padding: 8px 16px; border-radius: 999px;
}
.xy-msg pre {
  background: #F6F2FB; border: 1px solid var(--xy-line);
  border-radius: 12px; padding: 12px 14px; overflow-x: auto;
  font-size: 13px; margin: 8px 0; line-height: 1.6; color: #4a3d5c;
}
.xy-msg code { font-family: Consolas, 'JetBrains Mono', monospace; font-size: .92em; color: #7c3aed; }
.xy-msg pre code { color: #4a3d5c; }
.xy-msg strong { color: #6d28d9; }
.xy-typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.xy-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--xy-b); animation: xyBlink 1.2s infinite; }
.xy-typing i:nth-child(2) { animation-delay: .2s; }
.xy-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes xyBlink { 0%, 100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* 空状态 */
.xy-empty { flex: 1; display: grid; place-content: center; gap: 18px; text-align: center; padding: 30px; }
.xy-orb { display: flex; justify-content: center; gap: 10px; }
.xy-orb i { width: 10px; height: 10px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 14px rgba(167, 139, 250, .7); animation: xyFloat 3s ease-in-out infinite; }
.xy-orb i:nth-child(2) { width: 16px; height: 16px; background: #f9a8d4; box-shadow: 0 0 18px rgba(249, 168, 212, .8); animation-delay: .5s; }
.xy-orb i:nth-child(3) { width: 8px; height: 8px; background: #7dd3fc; box-shadow: 0 0 12px rgba(125, 211, 252, .8); animation-delay: 1s; }
@keyframes xyFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.xy-empty > p { color: var(--xy-dim); font-size: 14px; margin: 0; }
.xy-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.xy-chip {
  appearance: none; cursor: pointer;
  border: 1.5px solid var(--xy-line2); border-radius: 999px;
  background: #fff; color: #5b4b66;
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 10px 18px; min-height: 44px;
  box-shadow: 0 8px 18px -12px rgba(124, 58, 237, .25);
  transition: all .2s ease;
}
.xy-chip:hover { border-color: var(--xy-a); color: #db2777; transform: translateY(-2px); }

/* 输入区 */
.xy-composer {
  display: flex; gap: 12px; align-items: flex-end;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--xy-line);
  background: rgba(255, 255, 255, .7);
}
#xyInput {
  flex: 1; resize: none; outline: none;
  background: #FBF9FE; color: var(--xy-ink);
  border: 1.5px solid var(--xy-line2); border-radius: 14px;
  font-family: inherit; font-size: 14.5px; line-height: 1.6;
  padding: 12px 14px; min-height: 46px; max-height: 140px;
}
#xyInput:focus-visible { border-color: var(--xy-b); box-shadow: 0 0 0 4px rgba(139, 92, 246, .13); }
#xyInput::placeholder { color: #b9aec9; }
.xy-actions { display: flex; gap: 8px; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link {
  position: fixed; left: -9999px; top: 10px; z-index: 100;
  background: var(--xy-b); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 12px; }

@media (prefers-reduced-motion: reduce) {
  .xy-orb i, .xy-typing i { animation: none; }
  .xy-list { scroll-behavior: auto; }
}

/* iOS Safari：输入控件字号 ≥16px，避免聚焦时页面自动放大 */
@media(max-width:620px){input,textarea{font-size:16px}}