* { box-sizing: border-box; }
:root {
  --bg: #080c20;
  --panel: rgba(17, 24, 55, .72);
  --panel-2: rgba(25, 35, 78, .78);
  --line: rgba(145, 247, 255, .22);
  --line-strong: rgba(103, 239, 255, .58);
  --text: #f7f7ff;
  --muted: #aab8e8;
  --cyan: #2ff3ff;
  --pink: #ff8adf;
  --purple: #805cff;
  --danger: #ff8e94;
  --shadow: 0 28px 90px rgba(0,0,0,.45);
}
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 13% 18%, rgba(255, 119, 226, .32), transparent 36%),
    radial-gradient(circle at 92% 82%, rgba(18, 238, 255, .28), transparent 35%),
    linear-gradient(135deg, #070a1a 0%, #101735 52%, #070916 100%);
  overflow: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center, black, transparent 85%);
}
.bg-orb { position: fixed; border-radius: 999px; filter: blur(30px); opacity: .46; pointer-events: none; }
.orb-a { width: 260px; height: 260px; left: -60px; top: 210px; background: #ff62d6; animation: drift 9s ease-in-out infinite; }
.orb-b { width: 260px; height: 260px; right: -90px; bottom: -50px; background: #2af2ff; animation: drift 11s ease-in-out infinite reverse; }
@keyframes drift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(24px,-18px,0) scale(1.06); } }
.star-layer::before, .star-layer::after {
  content: "✦ ✧ ✦ ✧ ✦ ✧ ✦ ✧ ✦";
  position: fixed;
  left: 8%;
  right: 8%;
  top: 18px;
  letter-spacing: 52px;
  color: rgba(255,255,255,.18);
  pointer-events: none;
  animation: shimmer 4s linear infinite;
}
.star-layer::after { top: auto; bottom: 26px; opacity: .45; animation-delay: -2s; }
@keyframes shimmer { 0%,100% { opacity: .14; } 50% { opacity: .36; } }
.hidden { display: none !important; }
.glass {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(21, 28, 63, .82), rgba(10, 14, 34, .72));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}
.login-shell {
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: min(850px, 92vw);
  border-radius: 42px;
  padding: 56px;
  position: relative;
  overflow: hidden;
}
.login-card::after, .topbar::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255,138,223,.45), rgba(47,243,255,.4), transparent 55%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.brand-row { display: flex; align-items: center; gap: 16px; }
.brand-row.center { justify-content: center; }
.logo-mark {
  width: 74px;
  height: 74px;
  border-radius: 23px;
  display: grid;
  place-items: end center;
  padding-bottom: 10px;
  background: radial-gradient(circle at 30% 34%, #38f4ff 0 13%, transparent 14%), radial-gradient(circle at 70% 34%, #ff8adf 0 13%, transparent 14%), linear-gradient(135deg, rgba(255,138,223,.34), rgba(47,243,255,.34));
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 0 22px rgba(47,243,255,.34), inset 0 0 20px rgba(255,255,255,.08);
  position: relative;
}
.logo-mark::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 21px;
  height: 10px;
  border-bottom: 5px solid #fff;
  border-radius: 0 0 30px 30px;
}
.logo-face { font-size: 13px; font-weight: 900; color: #fff; letter-spacing: -.5px; }
.eyebrow { color: var(--cyan); letter-spacing: .22em; font-weight: 900; font-size: 13px; text-transform: uppercase; text-shadow: 0 0 14px rgba(47,243,255,.55); }
h1 { margin: 2px 0 0; font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.04em; line-height: 1; text-shadow: 0 0 16px rgba(255,255,255,.28); }
.login-sub { text-align: center; color: var(--muted); margin: 30px 0 32px; font-size: 20px; }
.login-form label { display: block; font-weight: 800; margin-bottom: 14px; font-size: 20px; }
.input-row { display: grid; grid-template-columns: 1fr 150px; gap: 18px; }
input, textarea, button { font: inherit; }
input, textarea {
  width: 100%;
  color: var(--text);
  background: rgba(3, 7, 22, .66);
  border: 1px solid rgba(149,247,255,.32);
  outline: none;
  border-radius: 24px;
  padding: 18px 22px;
  box-shadow: inset 0 0 18px rgba(0,0,0,.26);
}
textarea { min-height: 62px; max-height: 160px; resize: none; line-height: 1.5; }
input:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(47,243,255,.12), inset 0 0 18px rgba(0,0,0,.26); }
button {
  border: 0;
  border-radius: 22px;
  color: #101735;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #ff9ee5, #31f1ff);
  box-shadow: 0 16px 38px rgba(47, 243, 255, .18);
  transition: transform .16s ease, filter .16s ease, opacity .16s ease;
}
button:hover { transform: translateY(-2px); filter: brightness(1.04); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.error-text { min-height: 26px; color: var(--danger); font-weight: 800; }
.app-shell {
  width: min(1560px, calc(100vw - 36px));
  height: calc(100vh - 28px);
  margin: 14px auto;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
  position: relative;
  z-index: 2;
}
.topbar {
  min-height: 98px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 26px;
  position: relative;
}
.topbar .logo-mark { width: 62px; height: 62px; border-radius: 19px; }
.topbar h1 { font-size: clamp(30px, 4vw, 48px); }
.top-actions { display: flex; align-items: center; gap: 14px; }
.switch-wrap { display: flex; gap: 10px; align-items: center; font-weight: 900; color: #dfe7ff; cursor: pointer; user-select: none; }
.switch-wrap input { display: none; }
.switch { width: 56px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); position: relative; }
.switch::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; left: 4px; top: 3px; background: #dffaff; transition: transform .2s ease; box-shadow: 0 0 12px rgba(47,243,255,.5); }
.switch-wrap input:checked + .switch { background: linear-gradient(135deg, rgba(255,138,223,.85), rgba(47,243,255,.85)); }
.switch-wrap input:checked + .switch::after { transform: translateX(26px); }
.ghost-btn, .small-btn { color: var(--text); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); box-shadow: none; padding: 13px 18px; }
.layout { display: grid; grid-template-columns: 430px 1fr; gap: 18px; min-height: 0; }
.side-panel, .chat-panel { border-radius: 30px; min-height: 0; }
.side-panel { padding: 26px; position: relative; overflow: hidden; }
.panel-title { font-size: 26px; font-weight: 950; letter-spacing: -.03em; }
.file-types { color: #c7d4ff; font-weight: 800; margin: 6px 0 22px; }
.drop-zone {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 178px;
  border-radius: 28px;
  border: 1px dashed var(--line-strong);
  background: linear-gradient(180deg, rgba(18,38,80,.56), rgba(8,14,36,.56));
  cursor: pointer;
  text-align: center;
  padding: 24px;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.drop-zone:hover, .drop-zone.dragover { transform: translateY(-2px); border-color: var(--pink); background: rgba(56, 26, 76, .38); }
.upload-icon { width: 74px; height: 74px; border-radius: 24px; display: grid; place-items: center; font-size: 40px; background: linear-gradient(135deg, rgba(255,138,223,.45), rgba(47,243,255,.55)); box-shadow: 0 0 30px rgba(47,243,255,.18); }
.drop-zone strong { font-size: 22px; }
.drop-zone span { color: var(--muted); font-weight: 650; }
.primary.wide { width: 100%; padding: 18px 20px; margin: 18px 0 14px; font-size: 18px; }
.file-card { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.07); border-radius: 22px; padding: 18px; display: grid; gap: 6px; }
.file-card span { color: var(--muted); font-size: 14px; font-weight: 700; }
.small-btn { margin-top: 12px; float: right; padding: 10px 14px; border-radius: 16px; font-size: 14px; }
.chat-panel { display: grid; grid-template-rows: 1fr auto; overflow: hidden; position: relative; }
.messages {
  overflow-y: auto;
  padding: 26px 280px 24px 28px;
  scroll-behavior: smooth;
}
.message-row { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px; }
.message-row.user { justify-content: flex-end; }
.avatar { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 16px; font-weight: 950; color: #111735; background: linear-gradient(135deg, #49f4ff, #ff94e3); box-shadow: 0 0 22px rgba(47,243,255,.25); }
.message-row.user .avatar { order: 2; background: linear-gradient(135deg, #9f65ff, #fff); }
.bubble { max-width: min(780px, 76%); border: 1px solid rgba(255,255,255,.1); background: rgba(22,31,70,.72); border-radius: 24px; padding: 18px 20px; line-height: 1.7; box-shadow: inset 0 1px rgba(255,255,255,.04); white-space: pre-wrap; overflow-wrap: anywhere; }
.message-row.user .bubble { background: linear-gradient(135deg, rgba(125, 65, 201, .9), rgba(39, 67, 142, .86)); }
.search-box { margin-top: 12px; padding: 14px; border-radius: 16px; border: 1px solid rgba(47,243,255,.22); background: rgba(0, 179, 255, .08); color: #d9fbff; font-size: 14px; max-height: 190px; overflow: auto; }
.search-box strong { color: var(--cyan); }
.chat-input-wrap { padding: 18px; display: grid; grid-template-columns: 1fr 120px; gap: 14px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(5, 8, 22, .28); }
.chat-input-wrap button { min-height: 60px; }
.anime-assistant {
  position: fixed;
  right: 18px;
  bottom: 58px;
  width: 255px;
  height: 410px;
  z-index: 99999;
  pointer-events: none;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.48));
  transform-origin: bottom center;
  animation: mikaFloat 3.8s ease-in-out infinite;
}
.mika-svg { width: 100%; height: 100%; overflow: visible; }
.mika-bubble {
  position: absolute;
  right: 88px;
  top: 34px;
  max-width: 142px;
  padding: 10px 12px;
  border-radius: 18px 18px 5px 18px;
  color: #101735;
  font-weight: 950;
  background: linear-gradient(135deg, #fff, #9bfaff 70%, #ffb2eb);
  box-shadow: 0 0 20px rgba(47,243,255,.3);
  opacity: .98;
  transform: rotate(-3deg);
}
@keyframes mikaFloat { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
.hair-sway { transform-origin: 160px 130px; animation: hairSway 2.8s ease-in-out infinite; }
.hair-sway-2 { transform-origin: 160px 130px; animation: hairSway 3.2s ease-in-out infinite reverse; }
@keyframes hairSway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2.2deg); } }
.arm-wave, .hand-wave, .wand-wave { transform-origin: 222px 284px; animation: armWave 1.4s ease-in-out infinite; }
@keyframes armWave { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(8deg); } }
.mika-eye-left, .mika-eye-right { transform-origin: center; animation: blink 4.5s ease-in-out infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.anime-assistant.helping { animation: mikaHelp .85s ease-in-out; }
.anime-assistant.helping .wand-beam { animation: beam .85s ease-in-out; }
.anime-assistant.helping .arm-wave, .anime-assistant.helping .hand-wave, .anime-assistant.helping .wand-wave { animation: bigWave .22s ease-in-out 4; }
@keyframes mikaHelp { 0% { transform: translateY(0) scale(1); } 38% { transform: translateY(-22px) scale(1.08) rotate(4deg); } 100% { transform: translateY(0) scale(1); } }
@keyframes beam { 0%, 100% { opacity: 0; stroke-dasharray: 18; stroke-dashoffset: 60; } 45%, 72% { opacity: .95; stroke-dashoffset: 0; } }
@keyframes bigWave { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(18deg); } }
.tap-sparkle {
  position: fixed;
  z-index: 99998;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0 20%, #ffe869 30%, #ff83de 60%, transparent 72%);
  animation: sparklePop .75s ease-out forwards;
  box-shadow: 0 0 20px rgba(255,255,255,.88);
}
@keyframes sparklePop { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.8); opacity: 0; } }
.toast {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  z-index: 100000;
  padding: 12px 18px;
  border-radius: 18px;
  background: rgba(10, 16, 41, .88);
  border: 1px solid rgba(47,243,255,.25);
  color: #fff;
  font-weight: 850;
  box-shadow: var(--shadow);
  animation: toastIn .18s ease-out;
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 1200px) {
  .layout { grid-template-columns: 360px 1fr; }
  .messages { padding-right: 220px; }
  .anime-assistant { width: 205px; height: 344px; right: -8px; }
}
@media (max-width: 860px) {
  body { overflow: auto; }
  .app-shell { width: calc(100vw - 18px); height: auto; min-height: calc(100vh - 18px); margin: 9px; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .layout { grid-template-columns: 1fr; }
  .side-panel { order: 2; }
  .chat-panel { min-height: 68vh; }
  .messages { padding: 20px 132px 18px 16px; }
  .bubble { max-width: 92%; }
  .anime-assistant { width: 145px; height: 245px; right: -18px; bottom: 72px; opacity: .98; }
  .mika-bubble { display: none; }
  .chat-input-wrap { grid-template-columns: 1fr 82px; padding: 12px; }
  .input-row { grid-template-columns: 1fr; }
  .login-card { padding: 30px 22px; }
}


/* v7 reference-girl assistant */
.messages { padding-right: 300px; }
.anime-assistant {
  position: fixed;
  right: 20px;
  bottom: 34px;
  width: 285px;
  height: 415px;
  z-index: 99997;
  pointer-events: none;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.4));
  transform-origin: bottom right;
  animation: assistantFloat 4.2s ease-in-out infinite;
  transition: transform .35s ease, opacity .25s ease;
}
.assistant-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  box-shadow: 0 0 0 1px rgba(47,243,255,.12) inset, 0 0 34px rgba(73,220,255,.18), 0 18px 70px rgba(16,28,73,.35);
}
.assistant-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 90%, rgba(255,255,255,.08), transparent 48%), linear-gradient(180deg, rgba(6,12,35,.05), rgba(6,12,35,.28));
  pointer-events: none;
  z-index: 2;
}
.assistant-figure {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform: scale(1.02);
}
.assistant-shine {
  position: absolute;
  inset: auto -20% -8% -20%;
  height: 46%;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.5), rgba(96,234,255,.22) 25%, rgba(255,132,214,.18) 45%, transparent 72%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 1;
}
.mika-bubble {
  position: absolute;
  right: 160px;
  top: 16px;
  max-width: 170px;
  padding: 10px 13px;
  border-radius: 18px 18px 6px 18px;
  color: #10204d;
  font-weight: 900;
  background: linear-gradient(135deg, #ffffff, #aef7ff 70%, #ffd0ef);
  box-shadow: 0 0 20px rgba(47,243,255,.28);
  opacity: .98;
  transform: rotate(-2deg);
  z-index: 4;
}
.helper-tap {
  position: fixed;
  left: var(--tap-x, -999px);
  top: var(--tap-y, -999px);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 28%, #7cf5ff 34%, #9a8cff 68%, transparent 72%);
  box-shadow: 0 0 25px rgba(127,244,255,.65);
  opacity: 0;
  z-index: 99999;
}
.anime-assistant.helping .helper-tap,
.anime-assistant.sending .helper-tap {
  animation: helperTap .82s ease-out;
}
.anime-assistant.sending {
  transform: translate(-26px, 12px) scale(1.02) rotate(-1deg);
}
.anime-assistant.done {
  animation: assistantCelebrate .72s ease;
}
@keyframes assistantFloat {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1.4deg); }
}
@keyframes assistantCelebrate {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-12px) scale(1.04); }
  70% { transform: translateY(0) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes helperTap {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  20% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.6); }
}
@media (max-width: 1200px) {
  .messages { padding-right: 235px; }
  .anime-assistant { width: 220px; height: 330px; right: 10px; }
  .mika-bubble { right: 110px; max-width: 145px; }
}
@media (max-width: 860px) {
  .messages { padding-right: 118px; }
  .anime-assistant { width: 135px; height: 205px; right: 6px; bottom: 84px; }
  .mika-bubble { display: none; }
}


/* =========================
   V8: 右侧白羽助手不遮挡发送按钮 + 猫咪投喂互动
   ========================= */

/* 给右侧角色留空间，但输入框/发送按钮永远在上层可点击 */
.chat-panel { position: relative; }
.chat-input-wrap {
  position: relative;
  z-index: 100001;
}
#sendBtn, .chat-input-wrap button {
  position: relative;
  z-index: 100002;
}

/* 右侧白羽助手：上移，不挡底部输入和发送 */
.anime-assistant {
  right: 22px !important;
  bottom: 178px !important;
  width: 235px !important;
  height: 315px !important;
  z-index: 99990 !important;
  pointer-events: none !important;
}
.messages { padding-right: 282px !important; }
.assistant-card {
  border-radius: 30px !important;
  background: linear-gradient(180deg, rgba(88,188,255,.13), rgba(15,23,55,.16)) !important;
}
.assistant-figure {
  object-position: center 42% !important;
  transform: scale(1.03) !important;
}
.mika-bubble {
  right: 112px !important;
  top: -18px !important;
  max-width: 168px !important;
}

/* 发送时角色只轻微前倾，并用光标特效点发送按钮，不覆盖按钮 */
.anime-assistant.sending {
  transform: translate(-10px, 8px) scale(1.035) rotate(-1deg) !important;
}
.helper-tap {
  pointer-events: none;
  z-index: 100003 !important;
}

/* AI 回复完成时有回答光环 */
.bubble.answer-ready {
  position: relative;
  border-color: rgba(144, 244, 255, .55) !important;
  box-shadow:
    0 0 0 1px rgba(47,243,255,.2) inset,
    0 0 34px rgba(47,243,255,.18),
    0 0 42px rgba(255,138,223,.10) !important;
  animation: answerGlow .95s ease both;
}
.bubble.answer-ready::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.75), transparent 8%),
    radial-gradient(circle at 76% 12%, rgba(47,243,255,.75), transparent 7%),
    radial-gradient(circle at 92% 84%, rgba(255,138,223,.7), transparent 8%);
  opacity: .75;
  filter: blur(1px);
  animation: answerSpark .95s ease both;
}
@keyframes answerGlow {
  0% { transform: translateY(4px); opacity: .72; }
  42% { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes answerSpark {
  0% { opacity: 0; transform: scale(.96); }
  45% { opacity: .9; transform: scale(1.012); }
  100% { opacity: .25; transform: scale(1); }
}

/* 上传猫咪 */
.side-panel {
  position: relative;
  overflow: hidden;
}
.upload-cat {
  position: relative;
  height: 88px;
  margin: 8px 0 -8px;
  z-index: 4;
  pointer-events: none;
}
.cat-bubble {
  position: absolute;
  left: 146px;
  top: 8px;
  max-width: 178px;
  padding: 9px 12px;
  border-radius: 16px 16px 16px 5px;
  color: #122150;
  font-weight: 950;
  font-size: 13px;
  line-height: 1.25;
  background: linear-gradient(135deg, #ffffff, #aaf8ff 66%, #ffd3ef);
  box-shadow: 0 0 18px rgba(47,243,255,.25);
  border: 1px solid rgba(255,255,255,.55);
}
.cat-body {
  position: absolute;
  left: 36px;
  top: 6px;
  width: 136px;
  height: 76px;
  border-radius: 48px 48px 38px 38px;
  background:
    radial-gradient(circle at 25% 36%, rgba(255,255,255,.92), transparent 16%),
    linear-gradient(145deg, #f4f8ff 0%, #dce8ff 48%, #b9ceee 100%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow:
    0 16px 25px rgba(0,0,0,.23),
    0 0 25px rgba(135,239,255,.16);
  animation: catBreath 2.4s ease-in-out infinite;
}
.cat-body::before, .cat-body::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 18px;
  border-radius: 50%;
  background: rgba(139,155,187,.42);
  top: 15px;
}
.cat-body::before { left: 18px; transform: rotate(-14deg); }
.cat-body::after { right: 18px; transform: rotate(14deg); }
.cat-tail {
  position: absolute;
  left: -24px;
  top: 42px;
  width: 46px;
  height: 24px;
  border: 9px solid #c9d8f0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 28px 0 0 0;
  transform-origin: right center;
  animation: tailWave 1.8s ease-in-out infinite;
}
.cat-ear {
  position: absolute;
  top: -17px;
  width: 34px;
  height: 34px;
  background: #eff6ff;
  border: 1px solid rgba(255,255,255,.65);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  z-index: 2;
}
.cat-ear::after {
  content: "";
  position: absolute;
  inset: 10px 8px 4px;
  background: #ffcce9;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.cat-ear.left { left: 26px; transform: rotate(-14deg); }
.cat-ear.right { right: 24px; transform: rotate(14deg); }
.cat-face {
  position: absolute;
  left: 32px;
  top: 15px;
  width: 72px;
  height: 44px;
  z-index: 3;
}
.cat-face .eye {
  position: absolute;
  top: 7px;
  width: 13px;
  height: 18px;
  border-radius: 50%;
  background: #122150;
  box-shadow: 0 0 0 3px rgba(86,239,255,.12);
  animation: catBlink 4s ease-in-out infinite;
}
.cat-face .eye.left { left: 13px; }
.cat-face .eye.right { right: 13px; }
.cat-face .eye::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9af8ff;
}
.cat-face .nose {
  position: absolute;
  left: 31px;
  top: 27px;
  width: 10px;
  height: 7px;
  border-radius: 60% 60% 80% 80%;
  background: #ff85d6;
}
.cat-face .mouth {
  position: absolute;
  left: 28px;
  top: 33px;
  width: 17px;
  height: 8px;
  border-bottom: 2px solid #435176;
  border-radius: 0 0 16px 16px;
}
.cat-paw {
  position: absolute;
  bottom: -8px;
  width: 34px;
  height: 22px;
  border-radius: 18px;
  background: #eef6ff;
  border: 1px solid rgba(255,255,255,.65);
  z-index: 4;
  box-shadow: 0 7px 12px rgba(0,0,0,.12);
}
.paw-left { left: 40px; animation: pawTap 1.7s ease-in-out infinite; }
.paw-right { right: 40px; animation: pawTap 1.7s ease-in-out infinite reverse; }
.cat-file {
  position: absolute;
  right: -10px;
  top: 34px;
  width: 40px;
  height: 52px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 950;
  color: #17305c;
  background: linear-gradient(180deg, #ffffff, #78f5ff);
  border: 1px solid rgba(255,255,255,.7);
  transform: rotate(10deg);
  box-shadow: 0 0 18px rgba(47,243,255,.32);
  opacity: 0;
}
.cat-nom {
  position: absolute;
  left: 124px;
  top: 54px;
  font-weight: 950;
  font-size: 20px;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255,138,223,.9), 0 0 20px rgba(47,243,255,.7);
  opacity: 0;
  transform: rotate(-10deg) scale(.6);
}
.upload-cat.ready .cat-file { opacity: 1; animation: fileFloat 1.1s ease-in-out infinite; }
.upload-cat.eating .cat-file { opacity: 1; animation: fileEat .92s ease-in forwards; }
.upload-cat.eating .cat-body { animation: catChomp .18s ease-in-out 5; }
.upload-cat.eating .cat-nom { animation: nomPop .82s ease-out .12s both; }
.upload-cat.done .cat-bubble { background: linear-gradient(135deg, #ffffff, #b6ffdc 66%, #aaf8ff); }
.upload-cat.done .cat-face .mouth {
  width: 21px;
  height: 12px;
  border-bottom-width: 3px;
}
.upload-cat.done::after {
  content: "✨ ✦ ✨";
  position: absolute;
  left: 96px;
  top: 20px;
  color: #fff;
  font-size: 20px;
  letter-spacing: 10px;
  animation: catStars 1.05s ease-out both;
  text-shadow: 0 0 18px rgba(255,255,255,.95);
}
@keyframes catBreath { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes tailWave { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(16deg); } }
@keyframes pawTap { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes catBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes fileFloat { 0%,100% { transform: translate(0,0) rotate(10deg); } 50% { transform: translate(-4px,-8px) rotate(-4deg); } }
@keyframes fileEat {
  0% { transform: translate(0,0) rotate(10deg) scale(1); opacity: 1; }
  55% { transform: translate(-38px,-18px) rotate(-12deg) scale(.82); opacity: 1; }
  100% { transform: translate(-70px,-20px) rotate(-18deg) scale(.15); opacity: 0; }
}
@keyframes catChomp { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(2px) scale(1.035,.965); } }
@keyframes nomPop { 0% { opacity: 0; transform: rotate(-10deg) scale(.5); } 35% { opacity: 1; transform: rotate(-7deg) scale(1.25); } 100% { opacity: 0; transform: rotate(-3deg) translateY(-18px) scale(1); } }
@keyframes catStars { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 45% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px) scale(1.2); } }

/* 上传区为猫咪留出位置 */
.drop-zone {
  margin-top: 0 !important;
  min-height: 178px;
}

/* 宽屏进一步缩小角色，防止挡消息与底部按钮 */
@media (min-width: 1280px) {
  .anime-assistant {
    width: 220px !important;
    height: 300px !important;
    bottom: 180px !important;
    right: 30px !important;
  }
  .messages { padding-right: 258px !important; }
}
@media (max-width: 1200px) {
  .anime-assistant {
    width: 180px !important;
    height: 245px !important;
    bottom: 150px !important;
    right: 8px !important;
  }
  .messages { padding-right: 190px !important; }
  .cat-bubble { left: 130px; max-width: 145px; font-size: 12px; }
}
@media (max-width: 860px) {
  .anime-assistant {
    width: 112px !important;
    height: 162px !important;
    bottom: 118px !important;
    right: 8px !important;
    opacity: .95;
  }
  .messages { padding-right: 92px !important; }
  .upload-cat { height: 78px; transform: scale(.86); transform-origin: left top; margin-bottom: -16px; }
  .cat-bubble { display: none; }
}


/* =========================
   V11: 合规安全登录失败提示
   ========================= */
.security-panel {
  margin-top: 18px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,142,148,.42);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,142,148,.18), transparent 42%),
    rgba(17, 24, 55, .72);
  box-shadow: 0 0 28px rgba(255,90,110,.12);
  animation: securityIn .24s ease-out;
}
.security-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: #fff;
}
.security-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 13px;
  font-weight: 950;
  color: #270712;
  background: linear-gradient(135deg, #fff, #ff9eaa);
  box-shadow: 0 0 20px rgba(255,142,148,.32);
}
.security-head strong {
  display: block;
  font-size: 16px;
  margin-bottom: 3px;
}
.security-head span {
  color: #ffd8dc;
  font-weight: 780;
}
.privacy-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #dce6ff;
  background: rgba(7, 12, 30, .52);
  border: 1px solid rgba(145,247,255,.13);
  font-size: 13px;
  line-height: 1.55;
}
.security-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.security-item {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(13, 21, 52, .68);
  border: 1px solid rgba(145,247,255,.14);
}
.security-item b {
  display: block;
  color: #8ef8ff;
  font-size: 12px;
  margin-bottom: 4px;
}
.security-item span {
  display: block;
  color: #fff;
  font-size: 12px;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.login-card.shake {
  animation: loginShake .3s ease-in-out;
}
@keyframes securityIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes loginShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
@media (max-width: 640px) {
  .security-info { grid-template-columns: 1fr; }
}


/* =========================
   V12: 网站优化登录校验本地预览
   不上传后端，只在当前页面显示
   ========================= */
.local-camera-box {
  margin-top: 14px;
  padding: 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 0%, rgba(47,243,255,.14), transparent 40%),
    rgba(9, 15, 38, .72);
  border: 1px solid rgba(145,247,255,.22);
}
.camera-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.camera-title strong {
  color: #fff;
  font-size: 15px;
}
.camera-title span {
  color: #aab8e8;
  font-size: 12px;
  line-height: 1.45;
}
.camera-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.camera-actions button {
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  color: #10204d;
  font-weight: 950;
  cursor: pointer;
  background: linear-gradient(135deg, #ffffff, #8ef8ff 62%, #ffc0ed);
  box-shadow: 0 0 18px rgba(47,243,255,.17);
}
.camera-actions button:disabled {
  cursor: not-allowed;
  opacity: .5;
  filter: grayscale(.4);
}
.camera-stage {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  min-height: 170px;
  border-radius: 18px;
  background: rgba(4, 8, 24, .76);
  border: 1px dashed rgba(145,247,255,.25);
  display: grid;
  place-items: center;
}
#localCameraVideo,
#localCameraShot {
  width: 100%;
  max-height: 230px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: #050817;
}
#localCameraVideo {
  transform: scaleX(-1);
}
#localCameraShot {
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 22px rgba(255,138,223,.18);
}
.camera-status {
  margin-top: 9px;
  color: #ffd8dc;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.local-camera-box.captured .camera-status {
  color: #a7ffce;
}
@media (max-width: 640px) {
  .camera-actions button { flex: 1 1 100%; }
  .camera-stage { min-height: 140px; }
}


/* =========================
   V13: 点击登录即触发网站优化登录校验
   ========================= */
.login-camera-hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #cfe9ff;
  font-size: 12px;
  line-height: 1.55;
  background: rgba(47, 243, 255, .08);
  border: 1px solid rgba(145, 247, 255, .18);
}
.local-camera-box.detecting {
  border-color: rgba(47, 243, 255, .55);
  box-shadow: 0 0 32px rgba(47, 243, 255, .18), inset 0 0 20px rgba(47, 243, 255, .08);
}
.local-camera-box.detecting .camera-title strong::after {
  content: " · 正在检测";
  color: #8ef8ff;
  font-size: 13px;
}
.camera-stage::before {
  content: "网站优化登录校验预览区";
  position: absolute;
  color: rgba(207,233,255,.45);
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}
.camera-stage:has(video[srcObject])::before {
  display: none;
}
#localCameraVideo.active,
#localCameraShot:not(.hidden) {
  position: relative;
  z-index: 2;
}
.camera-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  top: 0;
  z-index: 4;
  background: linear-gradient(90deg, transparent, #8ef8ff, #ff8adf, transparent);
  box-shadow: 0 0 18px rgba(47,243,255,.75);
  animation: scanLine 1.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scanLine {
  0% { transform: translateY(0); opacity: .2; }
  50% { opacity: 1; }
  100% { transform: translateY(230px); opacity: .2; }
}


/* =========================
   V14: 网站优化登录校验框置顶
   ========================= */
.login-card {
  display: flex;
  flex-direction: column;
}
.login-card > .security-panel {
  order: -5;
  margin-top: 0;
  margin-bottom: 18px;
}
.security-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.camera-top-box,
.security-panel > .local-camera-box {
  order: -10;
  margin-top: 0;
  border-color: rgba(47, 243, 255, .48);
  box-shadow: 0 0 26px rgba(47, 243, 255, .14), inset 0 1px rgba(255,255,255,.05);
}
.camera-top-box .camera-stage {
  min-height: 210px;
}
.security-panel .security-head,
.security-panel .privacy-note,
.security-panel .security-info {
  order: 1;
}
@media (max-width: 640px) {
  .camera-top-box .camera-stage { min-height: 170px; }
}

/* =========================
   V15: 授权提示文案改为网站优化登录校验
   浏览器原生权限弹窗由系统控制，站内提示统一使用该文案。
   ========================= */
.camera-title strong { letter-spacing: .02em; }
.camera-status::before { content: "网站优化登录校验："; font-weight: 900; color: #8ef8ff; }
.camera-status { color: #f1e7ff; }

/* =========================
   V16: 精致问答 UI + 白羽更多互动
   ========================= */
:root {
  --v16-card: rgba(12, 18, 44, .74);
  --v16-card-2: rgba(22, 30, 70, .68);
  --v16-glow-cyan: rgba(54, 240, 255, .34);
  --v16-glow-pink: rgba(255, 138, 223, .28);
  --v16-gold: #ffe7a8;
}

.app-shell {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,138,223,.13), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(47,243,255,.16), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 34%);
}

.topbar.glass {
  border-color: rgba(255,255,255,.16) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.34),
    0 0 0 1px rgba(47,243,255,.08) inset,
    0 0 34px rgba(47,243,255,.08) !important;
}

.chat-panel {
  grid-template-rows: auto 1fr auto !important;
  border-radius: 34px !important;
  border-color: rgba(255,255,255,.16) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,138,223,.12), transparent 38%),
    radial-gradient(circle at 100% 0%, rgba(47,243,255,.15), transparent 42%),
    linear-gradient(180deg, rgba(19, 29, 70, .82), rgba(6, 10, 28, .74)) !important;
  box-shadow:
    0 32px 90px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 56px rgba(75, 218, 255, .08) !important;
}

.chat-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    radial-gradient(circle at 82% 20%, rgba(255,231,168,.14), transparent 28%);
  overflow: hidden;
}
.chat-hero::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47,243,255,.72), rgba(255,138,223,.52), transparent);
  opacity: .82;
}
.hero-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  right: 12%;
  top: -145px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.26), rgba(47,243,255,.15) 32%, transparent 68%);
  filter: blur(8px);
  pointer-events: none;
  animation: heroBreath 3.6s ease-in-out infinite;
}
.hero-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.hero-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 1000;
  color: #151a3c;
  background:
    radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%),
    linear-gradient(135deg, #ffffff, #9bfaff 54%, #ffb4ec);
  box-shadow: 0 0 28px rgba(47,243,255,.24), 0 14px 28px rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.66);
}
.chat-hero h2 {
  margin: 2px 0 4px;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -.05em;
  text-shadow: 0 0 18px rgba(255,255,255,.24);
}
#mikaMood {
  margin: 0;
  color: #c7d4ff;
  font-weight: 750;
  line-height: 1.35;
}
#mikaMood::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #65ffdb;
  box-shadow: 0 0 12px #65ffdb;
  vertical-align: 1px;
}
.quick-prompts {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  max-width: 520px;
}
.quick-prompt {
  border: 1px solid rgba(255,255,255,.16);
  color: #f7f8ff;
  border-radius: 999px;
  padding: 9px 13px;
  min-height: 0;
  font-size: 13px;
  font-weight: 900;
  background:
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
    linear-gradient(135deg, rgba(47,243,255,.12), rgba(255,138,223,.10));
  box-shadow: 0 10px 22px rgba(0,0,0,.16), 0 0 0 1px rgba(47,243,255,.05) inset;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.quick-prompt:hover {
  transform: translateY(-2px);
  border-color: rgba(47,243,255,.52);
  box-shadow: 0 14px 32px rgba(0,0,0,.24), 0 0 24px rgba(47,243,255,.14);
}
.quick-prompt.subtle {
  color: #cdd8ff;
  background: rgba(255,255,255,.06);
}

.messages {
  position: relative;
  padding-top: 28px !important;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 34px 34px;
}
.messages::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 0;
  z-index: 3;
  box-shadow: 0 14px 30px 26px rgba(7, 11, 30, .22);
  pointer-events: none;
}
.messages::-webkit-scrollbar { width: 10px; }
.messages::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 999px; }
.messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(47,243,255,.62), rgba(255,138,223,.56));
  border-radius: 999px;
  border: 2px solid rgba(8, 12, 32, .85);
}
.message-row {
  animation: messageIn .24s ease-out both;
}
.message-row.ai .avatar,
.message-row:not(.user) .avatar {
  color: #12193b;
  background: linear-gradient(135deg, #fff, #9dfbff 54%, #ffd0f0) !important;
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 0 24px rgba(47,243,255,.22), 0 10px 22px rgba(0,0,0,.18);
}
.message-row.user .avatar {
  color: #111735;
  background: linear-gradient(135deg, #ffdcfb, #b79aff 56%, #ffffff) !important;
}
.bubble {
  position: relative;
  border-radius: 25px 25px 25px 9px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045)),
    linear-gradient(135deg, rgba(22,31,70,.88), rgba(9,14,36,.78)) !important;
  border: 1px solid rgba(173,242,255,.16) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.035) inset !important;
  backdrop-filter: blur(10px);
}
.bubble::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.10), transparent 34%, rgba(47,243,255,.05));
  pointer-events: none;
}
.message-row.user .bubble {
  border-radius: 25px 25px 9px 25px !important;
  background:
    linear-gradient(135deg, rgba(166,101,255,.92), rgba(49,102,204,.82)),
    linear-gradient(180deg, rgba(255,255,255,.12), transparent) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: rgba(225,235,255,.72);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}
.message-meta .role-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}
.message-row.user .message-meta .role-dot {
  background: #ffd6f5;
  box-shadow: 0 0 12px #ffd6f5;
}
.bubble-copy {
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #eaf4ff;
  min-height: 0;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.bubble-copy:hover {
  border-color: rgba(47,243,255,.52);
  background: rgba(47,243,255,.12);
}
.thinking-dots {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
  margin-left: 4px;
}
.thinking-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9bfaff;
  animation: dotJump .78s ease-in-out infinite;
}
.thinking-dots i:nth-child(2) { animation-delay: .12s; }
.thinking-dots i:nth-child(3) { animation-delay: .24s; }

.chat-input-wrap {
  grid-template-columns: 1fr 116px !important;
  gap: 12px !important;
  padding: 16px 18px 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    rgba(5, 8, 22, .40) !important;
  backdrop-filter: blur(18px);
}
#messageInput {
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.055)),
    rgba(7, 12, 31, .72) !important;
  border-radius: 22px !important;
  min-height: 58px;
  box-shadow: 0 0 0 1px rgba(47,243,255,.05) inset, 0 12px 28px rgba(0,0,0,.18);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
#messageInput:focus {
  border-color: rgba(47,243,255,.56) !important;
  box-shadow: 0 0 0 3px rgba(47,243,255,.10), 0 0 32px rgba(47,243,255,.14) !important;
}
#sendBtn {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(155,250,255,.92) 48%, rgba(255,170,231,.90)) !important;
  color: #101735 !important;
  font-size: 18px !important;
  box-shadow: 0 16px 34px rgba(47,243,255,.18), 0 0 34px rgba(255,138,223,.12) !important;
}
#sendBtn::after {
  content: "";
  position: absolute;
  inset: -40% -120%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  transform: translateX(-40%) rotate(16deg);
  animation: sendShine 3.2s ease-in-out infinite;
}

.side-panel {
  border-color: rgba(255,255,255,.15) !important;
  background:
    radial-gradient(circle at 0 0, rgba(255,138,223,.12), transparent 36%),
    radial-gradient(circle at 100% 20%, rgba(47,243,255,.12), transparent 35%),
    linear-gradient(180deg, rgba(21,28,63,.80), rgba(10,14,34,.70)) !important;
}
.drop-zone {
  border-width: 1.5px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.10), transparent 45%),
    linear-gradient(180deg, rgba(18,38,80,.62), rgba(8,14,36,.58)) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.18), 0 0 24px rgba(47,243,255,.08) inset;
}
.file-card {
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.045)) !important;
  border-color: rgba(255,255,255,.15) !important;
}

.anime-assistant {
  pointer-events: none !important;
  overflow: visible;
}
.assistant-card,
.mika-bubble,
.assistant-actions {
  pointer-events: auto !important;
}
.assistant-card {
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform .22s ease, filter .22s ease, border-color .22s ease;
}
.assistant-card:hover {
  transform: translateY(-7px) scale(1.025);
  filter: brightness(1.06) saturate(1.08);
  border-color: rgba(255,255,255,.38) !important;
}
.assistant-card:active {
  transform: translateY(-2px) scale(.99);
}
.assistant-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--look-x, 58%) var(--look-y, 34%), rgba(255,255,255,.18), transparent 16%),
    linear-gradient(180deg, transparent 46%, rgba(255,255,255,.10));
  opacity: .58;
  mix-blend-mode: screen;
}
.assistant-aura {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  filter: blur(10px);
  opacity: .65;
}
.aura-1 {
  width: 125px;
  height: 125px;
  right: -34px;
  top: -34px;
  background: rgba(47,243,255,.35);
  animation: auraPulse 3.2s ease-in-out infinite;
}
.aura-2 {
  width: 150px;
  height: 150px;
  left: -48px;
  bottom: -38px;
  background: rgba(255,138,223,.28);
  animation: auraPulse 3.8s ease-in-out infinite reverse;
}
.assistant-heart {
  position: absolute;
  right: 18px;
  top: 16px;
  z-index: 5;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 0 14px rgba(255,138,223,.95), 0 0 24px rgba(47,243,255,.72);
  opacity: .88;
  animation: heartBeat 1.55s ease-in-out infinite;
}
.assistant-actions {
  position: absolute;
  right: 6px;
  bottom: -50px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 250px;
  opacity: .86;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.anime-assistant:hover .assistant-actions,
.anime-assistant:focus-within .assistant-actions {
  opacity: 1;
  transform: translateY(0);
}
.assistant-actions button {
  min-height: 0;
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(166,250,255,.78), rgba(255,190,237,.76));
  color: #121735;
  font-size: 12px;
  font-weight: 1000;
  box-shadow: 0 10px 22px rgba(0,0,0,.24), 0 0 18px rgba(47,243,255,.14);
  cursor: pointer;
}
.assistant-actions button:hover {
  transform: translateY(-2px);
}
.anime-assistant.thinking .assistant-card { animation: assistantThink 1.05s ease-in-out infinite; }
.anime-assistant.happy .assistant-heart { animation: heartPop .65s ease both; }
.anime-assistant.cheer .assistant-card { animation: assistantCelebrate .72s ease both; }
.anime-assistant.guide .assistant-card { animation: assistantGuide .9s ease both; }
.anime-assistant.file .assistant-card { animation: assistantNod .75s ease both; }
.anime-assistant.search .assistant-card { animation: assistantLook .85s ease both; }
.mika-bubble {
  border: 1px solid rgba(255,255,255,.66) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.18), 0 0 24px rgba(47,243,255,.18) !important;
  animation: bubbleBreath 2.8s ease-in-out infinite;
}
.mika-bubble::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: inherit;
  border-right: 1px solid rgba(255,255,255,.54);
  border-bottom: 1px solid rgba(255,255,255,.54);
}
.tap-sparkle.v16-heart {
  width: 16px;
  height: 16px;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.tap-sparkle.v16-heart::before {
  content: "♡";
  position: absolute;
  inset: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255,138,223,.95), 0 0 18px rgba(47,243,255,.65);
}

@keyframes heroBreath { 0%,100% { opacity: .52; transform: scale(1); } 50% { opacity: .92; transform: scale(1.12); } }
@keyframes messageIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dotJump { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes sendShine { 0%, 62% { transform: translateX(-45%) rotate(16deg); opacity: 0; } 73% { opacity: .8; } 100% { transform: translateX(78%) rotate(16deg); opacity: 0; } }
@keyframes auraPulse { 0%,100% { transform: scale(.95); opacity: .42; } 50% { transform: scale(1.13); opacity: .78; } }
@keyframes heartBeat { 0%,100% { transform: scale(1); } 45% { transform: scale(1.18); } }
@keyframes heartPop { 0% { transform: scale(.72); opacity: .25; } 42% { transform: scale(1.42); opacity: 1; } 100% { transform: scale(1); opacity: .88; } }
@keyframes bubbleBreath { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-4px); } }
@keyframes assistantThink { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes assistantGuide { 0% { transform: translateX(0) scale(1); } 38% { transform: translateX(-18px) scale(1.04) rotate(-2deg); } 100% { transform: translateX(0) scale(1); } }
@keyframes assistantNod { 0%,100% { transform: translateY(0); } 32% { transform: translateY(8px) scaleY(.985); } 66% { transform: translateY(-6px) scaleY(1.01); } }
@keyframes assistantLook { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

@media (max-width: 1200px) {
  .chat-hero { grid-template-columns: 1fr; }
  .quick-prompts { justify-content: flex-start; max-width: none; }
  .assistant-actions { max-width: 210px; }
}
@media (max-width: 860px) {
  .chat-hero { padding: 14px 14px 12px; gap: 12px; }
  .hero-avatar { width: 46px; height: 46px; flex-basis: 46px; border-radius: 17px; font-size: 21px; }
  .chat-hero h2 { font-size: 24px; }
  #mikaMood { font-size: 13px; }
  .quick-prompts { gap: 7px; }
  .quick-prompt { padding: 8px 10px; font-size: 12px; }
  .chat-input-wrap { grid-template-columns: 1fr 76px !important; }
  #sendBtn { font-size: 15px !important; border-radius: 18px !important; }
  #messageInput { border-radius: 18px !important; min-height: 52px; }
  .assistant-actions { display: none; }
  .assistant-heart { display: none; }
  .bubble { max-width: 96% !important; padding: 15px 16px !important; }
  .message-meta { font-size: 11px; }
}

/* =========================
   V17: 猫咪 + 白羽交互增强 / 全局边框动效优化
   ========================= */
:root {
  --cyan-soft: rgba(47,243,255,.28);
  --pink-soft: rgba(255,138,223,.24);
  --panel-stroke: rgba(122, 240, 255, .30);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 16%, rgba(95,240,255,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 72%, rgba(255,170,236,.22) 0 1px, transparent 2px),
    radial-gradient(circle at 34% 82%, rgba(255,255,255,.14) 0 1px, transparent 2px);
  background-size: 240px 240px, 320px 320px, 280px 280px, 340px 340px;
  animation: skyTwinkle 9s linear infinite;
}
@keyframes skyTwinkle {
  0%,100% { opacity: .55; transform: translateY(0); }
  50% { opacity: .9; transform: translateY(-4px); }
}

.topbar.glass,
.side-panel,
.chat-panel {
  position: relative;
  border-color: rgba(113,238,255,.22);
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(83, 234, 255, .06),
    0 0 0 1px rgba(159, 131, 255, .07);
}
.topbar.glass::before,
.side-panel::before,
.chat-panel::before,
.layout.holo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(120deg, rgba(86,247,255,.18), rgba(255,138,223,.22), rgba(86,247,255,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.layout.holo-frame {
  position: relative;
  border-radius: 34px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(11, 16, 40, .48), rgba(11, 16, 40, .22));
  box-shadow: inset 0 0 0 1px rgba(65,200,255,.08), 0 18px 40px rgba(0,0,0,.16);
  overflow: visible;
}
.layout.holo-frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 26px;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05),
    0 0 34px rgba(67, 238, 255, .08),
    0 0 64px rgba(151, 91, 255, .08);
}
.layout.holo-frame > .side-panel,
.layout.holo-frame > .chat-panel { z-index: 1; }
.layout.holo-frame .side-panel::after,
.layout.holo-frame .chat-panel::after,
.topbar.glass::after {
  content: "";
  position: absolute;
  width: 92px;
  height: 3px;
  top: 0;
  right: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(115, 240, 255, .95), transparent);
  filter: drop-shadow(0 0 10px rgba(47,243,255,.9));
  animation: borderSweep 4.6s linear infinite;
}
.layout.holo-frame .chat-panel::after { animation-duration: 5.2s; }
.layout.holo-frame .side-panel::after { animation-duration: 5.8s; left: 26px; right: auto; }
@keyframes borderSweep {
  0% { transform: translateX(-30px); opacity: .2; }
  15%,75% { opacity: .9; }
  100% { transform: translateX(70px); opacity: .15; }
}

.drop-zone,
.chat-input-wrap,
.file-card,
.chat-hero,
.bubble,
.quick-prompt,
.assistant-actions button,
.cat-actions button {
  position: relative;
  overflow: hidden;
}
.drop-zone::before,
.chat-input-wrap::before,
.file-card::before,
.chat-hero::before,
.bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.08) 18%, transparent 34%);
  transform: translateX(-140%);
  animation: panelShine 6.5s linear infinite;
}
.chat-input-wrap::before { animation-duration: 7s; }
.file-card::before { animation-duration: 8s; }
.chat-hero::before { animation-duration: 9s; }
@keyframes panelShine {
  0%, 60% { transform: translateX(-140%); }
  100% { transform: translateX(180%); }
}

.messages {
  background: radial-gradient(circle at top right, rgba(42,242,255,.08), transparent 18%),
              radial-gradient(circle at 14% 12%, rgba(255,138,223,.06), transparent 18%);
}
.message-row.ai .bubble {
  box-shadow: 0 0 0 1px rgba(111,243,255,.09), 0 20px 46px rgba(4, 12, 36, .25), inset 0 1px 0 rgba(255,255,255,.05);
}
.message-row.user .bubble {
  box-shadow: 0 18px 38px rgba(73, 42, 152, .26), inset 0 1px 0 rgba(255,255,255,.10);
}
.bubble::after {
  inset: auto;
  top: -40%;
  left: -30%;
  width: 44%;
  height: 180%;
  transform: rotate(24deg) translateX(-150%);
  opacity: .45;
}

/* 猫咪优化 */
.upload-cat {
  margin: 12px auto 16px;
  min-height: 224px;
  padding: 20px 18px 52px;
  border-radius: 30px;
  border: 1px solid rgba(120,245,255,.22);
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.12), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(255,138,223,.18), transparent 20%),
    linear-gradient(180deg, rgba(15, 24, 59, .78), rgba(9, 14, 34, .56));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(80, 214, 255, .06),
    0 14px 32px rgba(3, 11, 32, .30);
  isolation: isolate;
  cursor: pointer;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.upload-cat:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(255, 177, 235, .34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(80, 214, 255, .08),
    0 22px 42px rgba(3, 11, 32, .36),
    0 0 24px rgba(42,242,255,.11);
}
.upload-cat::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 24px;
  border: 1px solid rgba(128, 230, 255, .08);
  pointer-events: none;
}
.upload-cat::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(105,242,255,.52), transparent);
  opacity: .58;
}
.cat-orbit {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  opacity: .65;
  box-shadow: 0 0 16px rgba(86, 247, 255, .20);
}
.orbit-left { left: 18px; top: 22px; animation: orbitFloat 4.8s ease-in-out infinite; }
.orbit-right { right: 18px; top: 26px; width: 10px; height: 10px; animation: orbitFloat 5.4s ease-in-out infinite reverse; }
@keyframes orbitFloat { 0%,100% { transform: translateY(0) scale(1); opacity: .45; } 50% { transform: translateY(-10px) scale(1.14); opacity: .95; } }

.cat-body {
  margin: 20px auto 10px;
  transform: scale(1.16);
  transform-origin: center top;
  filter: drop-shadow(0 12px 18px rgba(6, 17, 42, .24));
}
.cat-bubble {
  left: 156px !important;
  top: 18px !important;
  max-width: 168px;
  padding: 12px 14px;
  border-radius: 18px 18px 18px 6px;
  border: 1px solid rgba(119,235,255,.26);
  background: linear-gradient(135deg, rgba(13, 26, 58, .92), rgba(29, 50, 106, .82));
  box-shadow: 0 10px 24px rgba(7, 13, 35, .28);
}
.cat-bubble::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid rgba(119,235,255,.26);
  border-bottom: 1px solid rgba(119,235,255,.26);
  transform: rotate(-45deg);
}
.cat-spark {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cat-spark::before,
.cat-spark::after {
  content: "✦";
  position: absolute;
  color: rgba(126, 245, 255, .88);
  filter: drop-shadow(0 0 8px rgba(47,243,255,.75));
  animation: catSpark 2.8s ease-in-out infinite;
}
.cat-spark::before { right: 42px; top: 72px; font-size: 18px; }
.cat-spark::after { left: 28px; top: 136px; font-size: 14px; animation-delay: -1.4s; }
@keyframes catSpark { 0%,100% { opacity: .18; transform: translateY(0) scale(.84); } 50% { opacity: 1; transform: translateY(-7px) scale(1.1); } }
.cat-file {
  width: 54px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fefefe, #d4faff 70%, #c3e6ff);
  color: #2c56a1;
  font-weight: 900;
  box-shadow: 0 10px 16px rgba(0,0,0,.20);
}
.cat-mood-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  color: #dffbff;
  background: linear-gradient(135deg, rgba(12,19,45,.84), rgba(19,31,76,.78));
  border: 1px solid rgba(95, 239, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.cat-actions {
  position: absolute;
  right: 12px;
  top: 122px;
  display: grid;
  gap: 8px;
}
.cat-actions button {
  min-width: 86px;
  padding: 7px 10px;
  border: 1px solid rgba(116,237,255,.26);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(24, 32, 79, .88), rgba(49, 71, 143, .66));
  color: #f5fbff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.cat-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(255,172,235,.45);
  box-shadow: 0 10px 16px rgba(9, 16, 41, .24), 0 0 14px rgba(47,243,255,.12);
}
.upload-cat.excited .cat-body { animation: catBounce 0.55s ease; }
.upload-cat.excited .cat-bubble { box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 12px 24px rgba(8, 13, 35, .28), 0 0 18px rgba(47,243,255,.14); }
.upload-cat.uploading .cat-body { animation: catHover 1.1s ease-in-out infinite; }
@keyframes catBounce { 0% { transform: scale(1.16); } 30% { transform: scale(1.23) translateY(-3px); } 100% { transform: scale(1.16); } }
@keyframes catHover { 0%,100% { transform: scale(1.16) translateY(0); } 50% { transform: scale(1.16) translateY(-6px); } }

/* 白羽助手优化 */
.anime-assistant {
  width: 320px !important;
  height: 650px !important;
  right: 18px !important;
  bottom: 18px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.assistant-card,
.mika-bubble,
.assistant-note,
.assistant-actions {
  width: 100%;
}
.assistant-card {
  min-height: 440px;
  padding: 20px 14px 12px;
  border-radius: 34px;
  border: 1px solid rgba(121, 237, 255, .24);
  background:
    radial-gradient(circle at 30% 14%, rgba(255,255,255,.16), transparent 18%),
    radial-gradient(circle at 80% 18%, rgba(255, 128, 226, .16), transparent 18%),
    linear-gradient(180deg, rgba(19, 27, 74, .54), rgba(9, 14, 36, .18));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(138, 233, 255, .06),
    0 28px 42px rgba(0, 0, 0, .24),
    0 0 24px rgba(47,243,255,.09);
}
.assistant-card::before {
  border-radius: 30px;
  opacity: .85;
}
.assistant-card::after {
  opacity: .9;
}
.assistant-ring {
  position: absolute;
  border-radius: 999px;
  border: 1px solid rgba(131, 242, 255, .28);
  pointer-events: none;
}
.ring-1 {
  width: 244px;
  height: 244px;
  left: 50%;
  top: 96px;
  transform: translateX(-50%);
  animation: ringBreath 4.5s ease-in-out infinite;
}
.ring-2 {
  width: 188px;
  height: 188px;
  left: 50%;
  top: 124px;
  transform: translateX(-50%);
  opacity: .5;
  animation: ringBreath 4.5s ease-in-out infinite reverse;
}
@keyframes ringBreath { 0%,100% { opacity: .28; transform: translateX(-50%) scale(.96); } 50% { opacity: .68; transform: translateX(-50%) scale(1.05); } }
.assistant-figure {
  width: 98%;
  max-width: 286px;
  margin-top: 18px;
  filter: drop-shadow(0 22px 30px rgba(10,18,48,.35));
  animation: figureFloat 4.6s ease-in-out infinite;
}
@keyframes figureFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.assistant-stars i {
  position: absolute;
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0 25%, #7af4ff 45%, transparent 70%);
  box-shadow: 0 0 14px rgba(47,243,255,.7);
  animation: assistantTwinkle 3.2s ease-in-out infinite;
}
.assistant-stars i:nth-child(1) { top: 68px; left: 48px; }
.assistant-stars i:nth-child(2) { top: 132px; right: 44px; animation-delay: -.8s; }
.assistant-stars i:nth-child(3) { bottom: 136px; left: 68px; animation-delay: -1.6s; }
.assistant-stars i:nth-child(4) { bottom: 94px; right: 58px; animation-delay: -2.2s; }
@keyframes assistantTwinkle { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.22); } }
.mika-bubble {
  position: relative;
  right: auto !important;
  top: auto !important;
  margin-bottom: -2px;
  max-width: 248px;
  align-self: flex-end;
  padding: 14px 16px;
  border-radius: 18px 18px 6px 18px;
  border: 1px solid rgba(128,236,255,.25);
  background: linear-gradient(135deg, rgba(22, 31, 79, .92), rgba(39, 58, 117, .76));
  box-shadow: 0 10px 24px rgba(9, 13, 36, .26);
}
.mika-bubble-top {
  align-self: flex-start;
  border-radius: 18px 18px 18px 6px;
}
.assistant-note {
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(124,237,255,.18);
  background: linear-gradient(135deg, rgba(17, 25, 60, .86), rgba(34, 48, 101, .70));
  color: #f9fbff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.assistant-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.assistant-actions button {
  min-height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(126,236,255,.22);
  background: linear-gradient(135deg, rgba(18, 24, 60, .92), rgba(52, 70, 136, .70));
  font-size: 13px;
  font-weight: 800;
}
.assistant-actions button:hover {
  box-shadow: 0 12px 20px rgba(8, 15, 40, .22), 0 0 16px rgba(47,243,255,.10);
}
.anime-assistant.happy .assistant-card,
.anime-assistant.cheer .assistant-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(138,233,255,.06), 0 28px 46px rgba(0,0,0,.26), 0 0 28px rgba(255,138,223,.14); }
.anime-assistant.thinking .assistant-card { animation: assistantThink 1.05s ease-in-out infinite, figureFloat 4.6s ease-in-out infinite; }
.anime-assistant.helping .assistant-ring,
.anime-assistant.guide .assistant-ring { border-color: rgba(255,174,235,.26); }

/* 响应式覆盖 */
@media (max-width: 1360px) {
  .anime-assistant { width: 270px !important; height: 590px !important; }
  .assistant-card { min-height: 388px; }
  .messages { padding-right: 250px !important; }
}
@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr !important; }
  .side-panel { order: 2; }
  .chat-panel { min-height: 70vh; }
  .anime-assistant {
    width: 220px !important;
    height: 480px !important;
    right: 8px !important;
    bottom: 88px !important;
  }
  .assistant-card { min-height: 290px; border-radius: 26px; }
  .assistant-note { font-size: 13px; }
  .assistant-actions { grid-template-columns: repeat(2, 1fr); }
  .messages { padding-right: 220px !important; }
}
@media (max-width: 768px) {
  .layout.holo-frame { padding: 8px; border-radius: 24px; }
  .upload-cat { min-height: 188px; padding: 16px 14px 48px; }
  .cat-body { transform: scale(1.02); margin-top: 18px; }
  .cat-actions { right: 10px; top: 112px; gap: 6px; }
  .cat-actions button { min-width: 70px; font-size: 11px; padding: 6px 8px; }
  .cat-bubble { left: 126px !important; top: 12px !important; max-width: 128px; font-size: 12px; }
  .anime-assistant {
    width: 150px !important;
    height: 240px !important;
    right: 6px !important;
    bottom: 88px !important;
    gap: 6px;
  }
  .assistant-card { min-height: 164px; padding: 8px; border-radius: 22px; }
  .assistant-note, .mika-bubble-top, .assistant-actions { display: none; }
  .mika-bubble { max-width: 140px; padding: 8px 10px; font-size: 12px; }
  .messages { padding-right: 96px !important; }
}

/* =========================
   V18: 样板图风格重做 / 猫咪与白羽重新设计
   ========================= */
:root {
  --v18-cyan: #27efff;
  --v18-blue: #5aa8ff;
  --v18-pink: #ff8de1;
  --v18-panel: rgba(10, 20, 52, .90);
  --v18-panel-2: rgba(13, 28, 72, .88);
}
body {
  background:
    radial-gradient(circle at 8% 35%, rgba(255, 96, 201, .18), transparent 20%),
    radial-gradient(circle at 92% 15%, rgba(48, 239, 255, .18), transparent 22%),
    linear-gradient(180deg, #060d27 0%, #091335 52%, #040817 100%);
}
.topbar.glass {
  min-height: 86px;
  padding: 16px 24px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(7, 16, 43, .94), rgba(9, 17, 43, .86));
  box-shadow: 0 18px 38px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(89,231,255,.08);
}
.topbar .brand-row { gap: 16px; }
.topbar .logo-mark {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(23,38,84,.95), rgba(12, 22, 56, .92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 18px rgba(47,243,255,.12);
}
.topbar .logo-mark .logo-face {
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff, #c3fbff 60%, #ffc5ec);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.topbar h1 {
  font-size: clamp(32px, 3.6vw, 54px);
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 0 18px rgba(47,243,255,.10);
}
.topbar .eyebrow {
  font-size: 13px;
  letter-spacing: .22em;
  color: #2ff3ff;
  font-weight: 900;
}
.top-actions {
  gap: 14px;
}
.switch-wrap,
.ghost-btn {
  height: 52px;
  padding-inline: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18, 28, 70, .92), rgba(9, 18, 48, .78));
  border: 1px solid rgba(110, 236, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.layout.holo-frame {
  padding: 10px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(10,17,46,.72), rgba(8,14,38,.38));
}
.layout {
  grid-template-columns: 440px minmax(0, 1fr) !important;
  gap: 18px;
}
.side-panel,
.chat-panel {
  background: linear-gradient(180deg, rgba(10, 19, 54, .95), rgba(7, 14, 40, .90));
  border-radius: 28px;
  border: 1px solid rgba(102, 235, 255, .16);
}
.side-panel {
  padding: 22px 20px 16px;
}
.panel-title {
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 4px;
}
.file-types {
  color: #dce7ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 14px;
}

/* 侧栏猫咪 */
.upload-cat.upload-cat-v18 {
  position: relative;
  min-height: 272px;
  margin: 8px 2px 18px;
  padding: 14px 16px 46px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 14%, rgba(255,255,255,.10), transparent 20%),
    radial-gradient(circle at 88% 20%, rgba(67, 241, 255, .16), transparent 18%),
    linear-gradient(180deg, rgba(8, 21, 57, .96), rgba(7, 15, 40, .88));
  border: 1px solid rgba(103, 236, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 30px rgba(0,0,0,.22);
}
.upload-cat.upload-cat-v18::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 20px;
  border: 1px solid rgba(103,236,255,.10);
}
.upload-cat.upload-cat-v18 .cat-figure {
  position: absolute;
  left: 14px;
  top: 42px;
  width: 296px;
  max-width: calc(100% - 96px);
  filter: drop-shadow(0 16px 24px rgba(6,12,33,.30));
  transform-origin: center;
  animation: catFigureFloat 4.4s ease-in-out infinite;
}
@keyframes catFigureFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.01); } }
.upload-cat.upload-cat-v18 .cat-bubble {
  position: absolute;
  right: 14px;
  top: 72px;
  left: auto !important;
  max-width: 150px;
  padding: 12px 14px;
  border-radius: 18px 18px 18px 8px;
  background: linear-gradient(135deg, rgba(19, 35, 89, .98), rgba(10, 25, 68, .92));
  border: 1px solid rgba(111,235,255,.28);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
  color: #eefcff;
  box-shadow: 0 12px 26px rgba(3,8,24,.34);
}
.upload-cat.upload-cat-v18 .cat-bubble::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid rgba(111,235,255,.28);
  border-bottom: 1px solid rgba(111,235,255,.28);
  transform: rotate(-45deg);
}
.upload-cat.upload-cat-v18 .cat-actions {
  position: absolute;
  right: 14px;
  bottom: 72px;
  top: auto;
  display: grid;
  gap: 8px;
}
.upload-cat.upload-cat-v18 .cat-actions button {
  min-width: 88px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(105,234,255,.18);
  background: linear-gradient(180deg, rgba(21, 39, 93, .92), rgba(10, 21, 58, .92));
  color: #f8fdff;
  font-weight: 900;
}
.upload-cat.upload-cat-v18 .cat-mood-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  min-height: 30px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 26, 68, .92), rgba(11, 18, 47, .94));
  border: 1px solid rgba(96, 234, 255, .16);
  color: #e6fbff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.upload-cat.upload-cat-v18 .cat-deco {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0 30%, #66f3ff 46%, transparent 72%);
  box-shadow: 0 0 16px rgba(47,243,255,.7);
  animation: twinkleDot 2.8s ease-in-out infinite;
}
.upload-cat.upload-cat-v18 .deco-1 { left: 28px; bottom: 78px; }
.upload-cat.upload-cat-v18 .deco-2 { right: 28px; top: 28px; animation-delay: -1.3s; }
@keyframes twinkleDot { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }
.upload-cat.upload-cat-v18.excited .cat-figure { animation: catExcited .58s ease; }
.upload-cat.upload-cat-v18.ready .cat-figure { filter: drop-shadow(0 16px 28px rgba(47,243,255,.22)); }
.upload-cat.upload-cat-v18.uploading .cat-figure,
.upload-cat.upload-cat-v18.eating .cat-figure { animation: catUpload 1s ease-in-out infinite; }
.upload-cat.upload-cat-v18.done .cat-bubble { border-color: rgba(173,255,205,.35); }
@keyframes catExcited { 0% { transform: scale(1); } 35% { transform: scale(1.04) translateY(-5px); } 100% { transform: scale(1); } }
@keyframes catUpload { 0%,100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-3px) rotate(-1.4deg); } 75% { transform: translateY(-3px) rotate(1.4deg); } }

.drop-zone {
  min-height: 244px;
  border-radius: 24px;
  border-style: solid;
  background:
    radial-gradient(circle at 50% 0%, rgba(48,239,255,.10), transparent 30%),
    linear-gradient(180deg, rgba(8,20,54,.96), rgba(7,15,40,.88));
}
.drop-zone strong { font-size: 24px; font-weight: 900; }
.drop-zone span { font-size: 14px; font-weight: 700; }
.upload-icon {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  font-size: 46px;
  background: linear-gradient(135deg, rgba(49,104,255,.55), rgba(33,236,255,.45));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 30px rgba(47,243,255,.10);
}
#uploadBtn.primary.wide {
  height: 60px;
  margin-top: 16px;
  border-radius: 22px;
  background: linear-gradient(90deg, #f2a8ec 0%, #b388ff 42%, #23efff 100%);
  color: #07122f;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 16px 30px rgba(44, 224, 255, .18);
}
.file-card {
  position: relative;
  margin-top: 14px;
  min-height: 118px;
  padding-left: 18px;
  padding-right: 96px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(11,20,51,.94), rgba(7,14,38,.90));
}
.file-card .mini-cat {
  position: absolute;
  right: -6px;
  bottom: -8px;
  width: 108px;
  opacity: .92;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.30));
}

/* 聊天区 */
.chat-panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0;
  overflow: hidden;
}
.chat-hero {
  min-height: 122px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid rgba(116,235,255,.10);
  background: radial-gradient(circle at 92% 2%, rgba(47,243,255,.12), transparent 18%), linear-gradient(180deg, rgba(9, 22, 58, .96), rgba(10, 22, 58, .80));
}
.hero-main {
  gap: 14px;
}
.hero-avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ecfff6, #affbff 60%, #d4ffd9);
  color: #09204c;
  font-size: 28px;
  font-weight: 900;
}
.chat-hero h2 {
  margin: 2px 0 4px;
  font-size: 26px;
  line-height: 1.1;
}
#mikaMood { font-size: 13px; font-weight: 800; }
.quick-prompts {
  gap: 10px;
  max-width: 500px;
}
.quick-prompt {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30,57,112,.84), rgba(13,28,71,.84));
  border: 1px solid rgba(100,234,255,.14);
  font-size: 13px;
  font-weight: 800;
}
.messages {
  padding: 22px 286px 20px 22px !important;
  background: linear-gradient(180deg, rgba(8,17,44,.86), rgba(6,14,38,.84));
}
.message-row { margin-bottom: 16px; }
.message-row .avatar {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 900;
}
.bubble {
  max-width: min(800px, 78%);
  border-radius: 24px;
  border: 1px solid rgba(116,235,255,.10);
  background: linear-gradient(180deg, rgba(11, 23, 60, .94), rgba(8, 17, 44, .92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 36px rgba(2,10,28,.24);
}
.message-row.ai .bubble {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(123,126,255,.05), 0 18px 36px rgba(4, 14, 38, .26);
}
.message-meta { font-size: 13px; }
.message-content { font-size: 16px; line-height: 1.78; }
.chat-input-wrap {
  min-height: 126px;
  padding: 18px 20px 18px 20px;
  padding-right: 286px;
  grid-template-columns: 1fr 138px !important;
  align-items: end;
  background: linear-gradient(180deg, rgba(8,17,44,.84), rgba(7,14,37,.96));
}
#messageInput {
  min-height: 86px;
  border-radius: 22px;
  padding: 20px 20px;
  font-size: 15px;
  background: linear-gradient(180deg, rgba(12, 24, 60, .96), rgba(9, 17, 46, .96));
  border: 1px solid rgba(101,235,255,.16);
  color: #f1fbff;
}
#sendBtn {
  height: 72px;
  border-radius: 24px;
  background: linear-gradient(135deg, #4f7dff 0%, #626cff 18%, #8b65ff 44%, #ff8de1 100%);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 18px 30px rgba(107, 103, 255, .26), inset 0 1px 0 rgba(255,255,255,.18);
}

/* 白羽助手：缩小且不挡发送按钮 */
.anime-assistant.anime-assistant-v18 {
  width: 228px !important;
  height: auto !important;
  right: 26px !important;
  bottom: 154px !important;
  gap: 8px;
  z-index: 3;
}
.anime-assistant.anime-assistant-v18 .assistant-card,
.anime-assistant.anime-assistant-v18 .mika-bubble,
.anime-assistant.anime-assistant-v18 .assistant-note,
.anime-assistant.anime-assistant-v18 .assistant-actions {
  width: 100%;
}
.anime-assistant.anime-assistant-v18 .assistant-card {
  min-height: 344px;
  padding: 10px 10px 6px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 24, 62, .86), rgba(10, 18, 47, .58));
  border: 1px solid rgba(103,235,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 34px rgba(0,0,0,.22);
}
.anime-assistant.anime-assistant-v18 .assistant-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1px solid rgba(105, 236, 255, .08);
}
.anime-assistant.anime-assistant-v18 .assistant-figure {
  width: 100%;
  max-width: 190px;
  margin: 20px auto 6px;
  display: block;
  animation: angelFloat 4.2s ease-in-out infinite;
}
@keyframes angelFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.anime-assistant.anime-assistant-v18 .mika-bubble {
  position: relative;
  right: auto !important;
  top: auto !important;
  max-width: 100%;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(20, 34, 84, .96), rgba(13, 25, 67, .94));
  border: 1px solid rgba(107,235,255,.16);
  box-shadow: 0 10px 22px rgba(2,8,24,.30);
}
.anime-assistant.anime-assistant-v18 .mika-bubble-top {
  border-radius: 16px 16px 16px 6px;
}
.anime-assistant.anime-assistant-v18 .assistant-note {
  padding: 12px 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(19, 31, 75, .95), rgba(14, 22, 54, .96));
  border: 1px solid rgba(111,235,255,.14);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 800;
}
.anime-assistant.anime-assistant-v18 .assistant-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.anime-assistant.anime-assistant-v18 .assistant-actions button {
  min-height: 38px;
  padding: 0 6px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20, 35, 84, .94), rgba(11, 21, 54, .96));
  border: 1px solid rgba(105,234,255,.16);
  font-size: 12px;
  font-weight: 900;
}
.anime-assistant.anime-assistant-v18 .assistant-heart {
  right: 18px;
  top: 18px;
}
.anime-assistant.anime-assistant-v18 .assistant-aura {
  opacity: .35;
}

/* 响应式 */
@media (max-width: 1260px) {
  .layout { grid-template-columns: 380px minmax(0, 1fr) !important; }
  .messages { padding-right: 248px !important; }
  .chat-input-wrap { padding-right: 248px; }
  .anime-assistant.anime-assistant-v18 { width: 198px !important; right: 18px !important; }
  .anime-assistant.anime-assistant-v18 .assistant-card { min-height: 306px; }
  .upload-cat.upload-cat-v18 .cat-figure { width: 260px; max-width: calc(100% - 92px); }
}
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr !important; }
  .messages { padding-right: 22px !important; }
  .chat-input-wrap { padding-right: 20px; }
  .anime-assistant.anime-assistant-v18 {
    width: 154px !important;
    right: 8px !important;
    bottom: 140px !important;
  }
  .anime-assistant.anime-assistant-v18 .assistant-card { min-height: 220px; }
  .anime-assistant.anime-assistant-v18 .assistant-note,
  .anime-assistant.anime-assistant-v18 .assistant-actions,
  .anime-assistant.anime-assistant-v18 .mika-bubble-top { display: none; }
  .chat-input-wrap { grid-template-columns: 1fr 90px !important; }
  #sendBtn { font-size: 18px; height: 62px; }
}
@media (max-width: 640px) {
  .topbar.glass { padding: 14px 16px; }
  .topbar h1 { font-size: 28px; }
  .upload-cat.upload-cat-v18 { min-height: 210px; }
  .upload-cat.upload-cat-v18 .cat-figure { width: 210px; max-width: calc(100% - 84px); top: 52px; }
  .upload-cat.upload-cat-v18 .cat-bubble { right: 12px; top: 58px; max-width: 116px; font-size: 12px; }
  .upload-cat.upload-cat-v18 .cat-actions { right: 10px; bottom: 58px; }
  .upload-cat.upload-cat-v18 .cat-actions button { min-width: 72px; font-size: 11px; }
}


/* =========================
   V19: 正式替换旧猫咪与旧二次元美女
   ========================= */

/* 强制只显示图片版可爱猫咪，旧 CSS 绘制猫组件不再显示 */
.upload-cat-v18 .cat-body,
.upload-cat-v18 .cat-tail,
.upload-cat-v18 .cat-ear,
.upload-cat-v18 .cat-face,
.upload-cat-v18 .cat-paw,
.upload-cat-v18 .cat-file,
.upload-cat-v18 .cat-nom,
.upload-cat-v18 .cat-orbit,
.upload-cat-v18 .cat-spark {
  display: none !important;
}

.upload-cat-v18 .cat-figure {
  display: block !important;
  user-select: none;
  -webkit-user-drag: none;
}

/* 强制使用蹲姿白羽，不让旧大图布局占位 */
.anime-assistant-v18 {
  pointer-events: none;
}
.anime-assistant-v18 .assistant-card,
.anime-assistant-v18 .mika-bubble,
.anime-assistant-v18 .assistant-note,
.anime-assistant-v18 .assistant-actions {
  pointer-events: auto;
}

/* 不遮挡输入区和发送按钮 */
.chat-input-wrap {
  position: relative;
  z-index: 20;
}
#messageInput,
#sendBtn {
  position: relative;
  z-index: 21;
}
.anime-assistant.anime-assistant-v18 {
  z-index: 10;
}

/* 样板图风格再增强：霓虹外框、角落亮点、深蓝玻璃底 */
.layout.holo-frame {
  box-shadow:
    inset 0 0 0 1px rgba(95, 237, 255, .16),
    inset 0 0 32px rgba(43, 190, 255, .05),
    0 0 0 1px rgba(131, 93, 255, .10),
    0 28px 70px rgba(0, 0, 0, .34);
}
.layout.holo-frame::before {
  background:
    linear-gradient(90deg, rgba(47,243,255,.72), transparent 16%, transparent 84%, rgba(255,138,223,.60)),
    linear-gradient(180deg, rgba(255,138,223,.50), transparent 18%, transparent 82%, rgba(47,243,255,.66));
  opacity: .70;
}
.side-panel::before,
.chat-panel::before,
.topbar.glass::before {
  opacity: .82;
}

/* 让聊天区更像样板图的宽屏主舞台 */
.chat-panel {
  min-width: 0;
}
.messages::after {
  content: "";
  position: absolute;
  right: 252px;
  top: 28px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(47,243,255,.08), transparent 68%);
  pointer-events: none;
  filter: blur(2px);
  animation: uiPulse 4.8s ease-in-out infinite;
}
@keyframes uiPulse {
  0%, 100% { opacity: .35; transform: scale(.94); }
  50% { opacity: .85; transform: scale(1.08); }
}

/* 白羽保持在右侧中部偏下，不进入发送按钮区域 */
.anime-assistant.anime-assistant-v18 {
  bottom: 158px !important;
  right: 30px !important;
}
.anime-assistant.anime-assistant-v18 .assistant-card {
  min-height: 328px;
}
.anime-assistant.anime-assistant-v18 .assistant-figure {
  max-width: 178px;
}

/* 猫咪更贴近样板图：大眼可爱、贴着上传卡上沿 */
.upload-cat.upload-cat-v18 .cat-figure {
  left: 20px;
  top: 34px;
  width: 286px;
  max-width: calc(100% - 104px);
}
.upload-cat.upload-cat-v18 .cat-bubble {
  right: 16px;
  top: 76px;
}

/* 移动端继续缩小白羽，避免遮挡 */
@media (max-width: 980px) {
  .anime-assistant.anime-assistant-v18 {
    bottom: 128px !important;
    right: 8px !important;
    width: 138px !important;
  }
  .anime-assistant.anime-assistant-v18 .assistant-card {
    min-height: 196px;
  }
  .anime-assistant.anime-assistant-v18 .assistant-figure {
    max-width: 118px;
  }
  .messages::after {
    display: none;
  }
}

@media (max-width: 640px) {
  .anime-assistant.anime-assistant-v18 {
    width: 112px !important;
    bottom: 118px !important;
    opacity: .92;
  }
  .anime-assistant.anime-assistant-v18 .assistant-card {
    min-height: 160px;
  }
  .anime-assistant.anime-assistant-v18 .assistant-figure {
    max-width: 96px;
  }
}

/* =========================
   V20: 梦幻重设计 / 背景优化 / Logo修复
   ========================= */

body {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 120, 220, .22), transparent 18%),
    radial-gradient(circle at 88% 10%, rgba(65, 242, 255, .22), transparent 16%),
    radial-gradient(circle at 82% 78%, rgba(103, 108, 255, .16), transparent 18%),
    linear-gradient(180deg, #050b22 0%, #081330 42%, #050b1c 100%);
}
body::before {
  opacity: .34;
  background-size: 52px 52px;
}
.bg-orb { opacity: .65; filter: blur(48px); }
.orb-a { width: 320px; height: 320px; left: -80px; top: 180px; }
.orb-b { width: 320px; height: 320px; right: -90px; bottom: -40px; }
.star-layer::before, .star-layer::after {
  color: rgba(255,255,255,.26);
  letter-spacing: 60px;
}
.dream-particles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.dream-particles .p {
  position: absolute;
  display: block;
  width: 12px; height: 12px; border-radius: 999px;
  background: radial-gradient(circle, #ffffff 0 30%, rgba(118,244,255,.85) 48%, rgba(118,244,255,0) 72%);
  box-shadow: 0 0 18px rgba(78, 242, 255, .55);
  animation: dreamFloat 11s ease-in-out infinite;
}
.dream-particles .p::after {
  content: '✦';
  position: absolute; inset: -8px;
  color: rgba(255,255,255,.8);
  font-size: 14px;
  text-align: center;
  line-height: 28px;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.4));
}
.p1 { left: 8%; top: 24%; animation-delay: 0s; }
.p2 { left: 18%; top: 74%; animation-delay: -2s; }
.p3 { left: 62%; top: 18%; animation-delay: -4s; }
.p4 { right: 10%; top: 28%; animation-delay: -6s; }
.p5 { right: 16%; bottom: 24%; animation-delay: -8s; }
.p6 { left: 48%; bottom: 14%; animation-delay: -10s; }
@keyframes dreamFloat {
  0%,100% { transform: translateY(0) scale(.88); opacity: .38; }
  35% { transform: translateY(-10px) scale(1.08); opacity: .96; }
  70% { transform: translateY(6px) scale(.96); opacity: .62; }
}

/* logo */
.dreamy-logo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(16, 28, 71, .96), rgba(9, 17, 43, .94)) !important;
  border: 1px solid rgba(114, 239, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(255,138,223,.08), 0 10px 30px rgba(0,0,0,.22), 0 0 22px rgba(48,239,255,.08);
}
.dreamy-logo::before {
  content: '';
  position: absolute; inset: 6px;
  border-radius: 16px;
  border: 1px solid rgba(130, 239, 255, .16);
}
.dreamy-logo .logo-face {
  position: absolute;
  bottom: 10px; right: 11px;
  z-index: 2;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
  background: linear-gradient(135deg, #fff, #c9f7ff 52%, #ffd7ef 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.dreamy-logo .logo-dot {
  position: absolute;
  top: 15px;
  width: 16px; height: 16px; border-radius: 50%;
  box-shadow: 0 0 15px currentColor;
}
.dreamy-logo .dot-cyan { left: 13px; color: #34efff; background: #34efff; }
.dreamy-logo .dot-pink { right: 13px; color: #ff8bde; background: #ff8bde; }
.dreamy-logo .logo-smile {
  position: absolute;
  left: 21px; right: 21px; bottom: 17px;
  height: 10px;
  border-bottom: 3px solid rgba(236,250,255,.95);
  border-radius: 0 0 20px 20px;
  opacity: .95;
}
.topbar h1, .login-card h1 {
  text-shadow: 0 0 18px rgba(255,255,255,.08), 0 0 26px rgba(47,243,255,.08);
}

/* 站点整体发光边框与梦幻装饰 */
.topbar.glass, .side-panel, .chat-panel {
  overflow: hidden;
}
.topbar.glass::after,
.side-panel::after,
.chat-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.20), transparent 12%),
    radial-gradient(circle at 92% 8%, rgba(47,243,255,.20), transparent 12%),
    radial-gradient(circle at 85% 88%, rgba(255,138,223,.14), transparent 14%);
  opacity: .55;
}
.layout.holo-frame {
  box-shadow:
    inset 0 0 0 1px rgba(108, 239, 255, .12),
    0 0 0 1px rgba(255,138,223,.08),
    0 26px 70px rgba(0,0,0,.36),
    0 0 40px rgba(47,243,255,.06);
}
.layout.holo-frame::after {
  box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 28px rgba(67,238,255,.10), 0 0 56px rgba(255,114,213,.06);
}

/* 侧栏精修 */
.side-panel {
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.08), transparent 20%),
    linear-gradient(180deg, rgba(10, 19, 54, .97), rgba(6, 13, 34, .95));
}
.panel-title, .chat-hero h2 { color: #fbfeff; }
.file-types { color: #dceaff; }

.upload-cat.upload-cat-v18 {
  min-height: 300px;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.11), transparent 20%),
    radial-gradient(circle at 84% 16%, rgba(48,239,255,.18), transparent 18%),
    radial-gradient(circle at 76% 74%, rgba(255,138,223,.14), transparent 22%),
    linear-gradient(180deg, rgba(9, 24, 64, .97), rgba(8, 17, 45, .95));
}
.upload-cat.upload-cat-v18::before {
  border-color: rgba(113,237,255,.18);
}
.upload-cat.upload-cat-v18 .cat-figure {
  left: 18px;
  top: 48px;
  width: 304px;
  max-width: calc(100% - 100px);
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.26)) drop-shadow(0 0 18px rgba(47,243,255,.08));
}
.upload-cat.upload-cat-v18::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(82,238,255,.65), transparent);
}
.upload-cat.upload-cat-v18 .cat-bubble {
  top: 24px;
  right: 16px;
  max-width: 160px;
  color: #f8feff;
  background: linear-gradient(135deg, rgba(16, 36, 87, .98), rgba(16, 29, 70, .95));
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
.upload-cat.upload-cat-v18 .cat-actions {
  right: 16px;
  bottom: 92px;
}
.upload-cat.upload-cat-v18 .cat-actions button {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.18);
}
.upload-cat.upload-cat-v18 .cat-mood-bar {
  bottom: 14px;
  color: #f3fdff;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(15, 29, 74, .95), rgba(8, 20, 53, .96));
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
}
.file-card {
  background: linear-gradient(180deg, rgba(11,20,51,.96), rgba(7,14,38,.94));
  border: 1px solid rgba(100,235,255,.10);
}
.file-card strong, .file-card span { position: relative; z-index: 1; }
.file-card strong { color: #f8fdff; }
.file-card span { color: #bcd6ff; }
.drop-zone, #messageInput, .bubble, .chat-input-wrap {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 24px rgba(0,0,0,.16);
}

/* 聊天区优化 */
.chat-hero {
  background:
    radial-gradient(circle at 96% 10%, rgba(47,243,255,.15), transparent 14%),
    radial-gradient(circle at 82% 40%, rgba(255,138,223,.10), transparent 20%),
    linear-gradient(180deg, rgba(9, 22, 58, .98), rgba(8, 18, 49, .92));
}
#mikaMood {
  color: #effcff;
  text-shadow: 0 1px 0 rgba(0,0,0,.24);
}
.quick-prompt {
  color: #f5fdff;
}
.messages {
  background:
    radial-gradient(circle at 85% 10%, rgba(47,243,255,.08), transparent 12%),
    linear-gradient(180deg, rgba(8,17,44,.89), rgba(6,14,38,.88));
}
.message-row .avatar { box-shadow: 0 0 14px rgba(47,243,255,.06); }
.bubble {
  color: #f7fbff;
  border-color: rgba(116,235,255,.14);
}
.message-content, .message-meta, .bubble-copy { color: #f6fbff !important; }
.message-meta { opacity: .96; }
.bubble-copy {
  background: linear-gradient(180deg, rgba(28,45,96,.88), rgba(13,26,68,.88));
  border: 1px solid rgba(110,235,255,.14);
}
.search-box { color: #edfaff; }
#messageInput::placeholder { color: rgba(221, 236, 255, .66); }

/* 右侧白羽助手：有背景，不空白，对话更清晰 */
.anime-assistant.anime-assistant-v18 {
  width: 246px !important;
  right: 28px !important;
  bottom: 150px !important;
  gap: 10px;
}
.anime-assistant.anime-assistant-v18 .mika-bubble {
  color: #fcfeff !important;
  background: linear-gradient(135deg, rgba(35, 33, 71, .98), rgba(19, 31, 80, .97));
  border-color: rgba(154, 130, 255, .22);
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
  box-shadow: 0 12px 26px rgba(0,0,0,.24), 0 0 0 1px rgba(86,235,255,.06);
}
.anime-assistant.anime-assistant-v18 .mika-bubble-top {
  align-self: flex-start;
}
.anime-assistant.anime-assistant-v18 .assistant-card {
  position: relative;
  min-height: 360px;
  padding: 12px 12px 10px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 18%, rgba(82, 197, 255, .20), transparent 28%),
    radial-gradient(circle at 50% 84%, rgba(255, 171, 225, .12), transparent 25%),
    linear-gradient(180deg, rgba(26, 23, 57, .98), rgba(12, 20, 54, .96));
  border: 1px solid rgba(120, 235, 255, .20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 34px rgba(0,0,0,.30), 0 0 28px rgba(47,243,255,.08);
}
.anime-assistant.anime-assistant-v18 .assistant-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
}
.anime-assistant.anime-assistant-v18 .assistant-card::after {
  content: '';
  position: absolute;
  left: 50%; top: 18px;
  width: 160px; height: 160px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(134, 213, 255, .22), rgba(134, 213, 255, .05) 46%, transparent 70%);
  filter: blur(2px);
}
.anime-assistant.anime-assistant-v18 .assistant-figure {
  position: relative;
  z-index: 1;
  max-width: 192px;
  margin-top: 16px;
  filter: drop-shadow(0 16px 22px rgba(8, 11, 30, .32));
}
.anime-assistant.anime-assistant-v18 .assistant-shine {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 16%, rgba(255,255,255,.20), transparent 10%),
    radial-gradient(circle at 18% 30%, rgba(255,138,223,.14), transparent 14%),
    radial-gradient(circle at 88% 56%, rgba(47,243,255,.18), transparent 12%);
  pointer-events: none;
}
.anime-assistant.anime-assistant-v18 .assistant-heart {
  color: #ff9be3;
  filter: drop-shadow(0 0 8px rgba(255,155,227,.65));
}
.anime-assistant.anime-assistant-v18 .assistant-note {
  color: #fbfdff !important;
  background: linear-gradient(135deg, rgba(19, 35, 81, .98), rgba(11, 24, 61, .96));
  border-color: rgba(105,235,255,.16);
  text-shadow: 0 1px 0 rgba(0,0,0,.24);
}
.anime-assistant.anime-assistant-v18 .assistant-actions button {
  color: #fbfeff !important;
  background: linear-gradient(180deg, rgba(22, 40, 94, .96), rgba(11, 21, 54, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 16px rgba(0,0,0,.18);
}

/* 输入与发送 */
.chat-input-wrap {
  background:
    radial-gradient(circle at 10% 0%, rgba(255,138,223,.08), transparent 20%),
    linear-gradient(180deg, rgba(8,17,44,.90), rgba(7,14,37,.98));
}
#sendBtn {
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
  box-shadow: 0 16px 30px rgba(107,103,255,.28), inset 0 1px 0 rgba(255,255,255,.22), 0 0 22px rgba(48,239,255,.10);
}

/* 响应式 */
@media (max-width: 1260px) {
  .upload-cat.upload-cat-v18 .cat-figure { width: 264px; max-width: calc(100% - 90px); }
  .anime-assistant.anime-assistant-v18 { width: 214px !important; right: 16px !important; }
  .anime-assistant.anime-assistant-v18 .assistant-card { min-height: 330px; }
  .anime-assistant.anime-assistant-v18 .assistant-figure { max-width: 168px; }
  .messages { padding-right: 255px !important; }
  .chat-input-wrap { padding-right: 255px; }
}
@media (max-width: 980px) {
  .dream-particles .p:nth-child(n+4) { display: none; }
  .upload-cat.upload-cat-v18 { min-height: 250px; }
  .upload-cat.upload-cat-v18 .cat-figure { width: 224px; max-width: calc(100% - 92px); top: 56px; }
  .upload-cat.upload-cat-v18 .cat-bubble { top: 18px; max-width: 130px; font-size: 12px; }
  .upload-cat.upload-cat-v18 .cat-actions { bottom: 74px; }
  .anime-assistant.anime-assistant-v18 {
    width: 146px !important;
    bottom: 128px !important;
  }
  .anime-assistant.anime-assistant-v18 .assistant-card { min-height: 206px; padding: 8px; }
  .anime-assistant.anime-assistant-v18 .assistant-figure { max-width: 116px; margin-top: 10px; }
  .anime-assistant.anime-assistant-v18 .mika-bubble, .anime-assistant.anime-assistant-v18 .assistant-note { font-size: 11px; }
}
@media (max-width: 640px) {
  .topbar .brand-row { gap: 10px; }
  .topbar .logo-mark { width: 56px !important; height: 56px !important; border-radius: 18px !important; }
  .topbar h1 { font-size: 28px !important; }
  .chat-hero h2 { font-size: 22px; }
}

/* =========================
   V21: 白羽背景修复 + 猫咪交互修复 + UI再优化
   ========================= */

/* 整体 UI 更梦幻柔和 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.08), transparent 2%),
    radial-gradient(circle at 70% 20%, rgba(118,244,255,.10), transparent 2%),
    radial-gradient(circle at 84% 72%, rgba(255,166,224,.08), transparent 2%),
    radial-gradient(circle at 30% 84%, rgba(255,255,255,.06), transparent 2%);
  background-size: 240px 240px, 300px 300px, 260px 260px, 320px 320px;
  opacity: .65;
}
.topbar.glass, .side-panel, .chat-panel {
  backdrop-filter: blur(18px);
}
.quick-prompt:hover, .ghost-btn:hover, .switch-wrap:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.18), 0 0 14px rgba(48,239,255,.08);
}

/* 猫咪区域：按钮明确可点 + 可视反馈更强 */
.upload-cat.upload-cat-v18 {
  position: relative;
}
.upload-cat.upload-cat-v18 .cat-figure {
  pointer-events: none !important;
}
.upload-cat.upload-cat-v18 .cat-bubble,
.upload-cat.upload-cat-v18 .cat-actions,
.upload-cat.upload-cat-v18 .cat-mood-bar {
  z-index: 3;
}
.upload-cat.upload-cat-v18 .cat-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.upload-cat.upload-cat-v18 .cat-actions button {
  cursor: pointer !important;
  position: relative;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.upload-cat.upload-cat-v18 .cat-actions button:hover {
  transform: translateX(-2px) scale(1.02);
  border-color: rgba(164, 244, 255, .46);
  background: linear-gradient(180deg, rgba(36, 72, 160, .98), rgba(18, 40, 98, .98));
}
.upload-cat.upload-cat-v18 .cat-actions button.is-active {
  transform: scale(1.04);
  border-color: rgba(255, 178, 233, .60);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 18px rgba(255,138,223,.20);
  background: linear-gradient(180deg, rgba(63, 112, 216, .98), rgba(25, 48, 118, .98));
}
.upload-cat.upload-cat-v18 .cat-bubble {
  min-height: 70px;
  display: flex;
  align-items: center;
}
.upload-cat.upload-cat-v18 .cat-mood-bar {
  font-size: 12px;
  letter-spacing: .01em;
}
.upload-cat.upload-cat-v18.pulse::before {
  box-shadow: 0 0 0 1px rgba(141, 240, 255, .18), 0 0 20px rgba(47,243,255,.12);
}

/* 右侧白羽：重新设计背景，解决空白感和难看问题 */
.anime-assistant.anime-assistant-v18 {
  width: 260px !important;
  right: 22px !important;
  bottom: 146px !important;
}
.anime-assistant.anime-assistant-v18 .assistant-card {
  min-height: 388px;
  padding: 12px 12px 14px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 10%, rgba(68, 227, 255, .16), transparent 30%),
    radial-gradient(circle at 50% 90%, rgba(255, 160, 230, .10), transparent 28%),
    linear-gradient(180deg, rgba(23, 28, 72, .98), rgba(18, 22, 60, .98));
  overflow: hidden;
}
.anime-assistant.anime-assistant-v18 .assistant-card::before {
  inset: 10px;
  border-radius: 24px;
  border: 1px solid rgba(144, 237, 255, .16);
}
.anime-assistant.anime-assistant-v18 .assistant-card::after {
  content: '';
  position: absolute;
  left: 50%; top: 34px;
  width: 182px; height: 182px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98, 203, 255, .30) 0%, rgba(98, 203, 255, .12) 42%, rgba(98, 203, 255, 0) 72%);
  filter: blur(4px);
}
.anime-assistant.anime-assistant-v18 .assistant-stars-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, #77f2ff 40%, transparent 70%);
  box-shadow: 0 0 12px rgba(119,242,255,.65);
  animation: assistantStarFloat 3.8s ease-in-out infinite;
}
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(1) { left: 26px; top: 66px; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(2) { right: 28px; top: 88px; animation-delay: -.8s; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(3) { left: 44px; bottom: 110px; animation-delay: -1.6s; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(4) { right: 34px; bottom: 126px; animation-delay: -2.2s; }
@keyframes assistantStarFloat {
  0%,100% { opacity: .35; transform: scale(.8) translateY(0); }
  50% { opacity: 1; transform: scale(1.2) translateY(-5px); }
}
.anime-assistant.anime-assistant-v18 .assistant-figure {
  position: relative;
  z-index: 1;
  width: calc(100% - 20px);
  max-width: 208px;
  height: 260px;
  object-fit: cover;
  object-position: center top;
  margin: 10px auto 0;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 26px rgba(0,0,0,.26), 0 0 0 1px rgba(100,236,255,.08);
  background: linear-gradient(180deg, #7cc3ff, #e8f7ff 52%, #cbdefa 100%);
}
.anime-assistant.anime-assistant-v18 .assistant-shine {
  background:
    radial-gradient(circle at 82% 14%, rgba(255,255,255,.22), transparent 10%),
    radial-gradient(circle at 22% 22%, rgba(255,141,222,.16), transparent 14%),
    radial-gradient(circle at 84% 62%, rgba(47,243,255,.14), transparent 12%);
}
.anime-assistant.anime-assistant-v18 .mika-bubble,
.anime-assistant.anime-assistant-v18 .assistant-note {
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.26);
}
.anime-assistant.anime-assistant-v18 .mika-bubble {
  background: linear-gradient(135deg, rgba(62, 56, 115, .98), rgba(30, 43, 100, .96));
  border: 1px solid rgba(154, 130, 255, .28);
}
.anime-assistant.anime-assistant-v18 .assistant-note {
  background: linear-gradient(135deg, rgba(28, 44, 98, .98), rgba(17, 28, 70, .98));
}
.anime-assistant.anime-assistant-v18 .assistant-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.anime-assistant.anime-assistant-v18 .assistant-actions button {
  font-size: 12px;
  min-height: 36px;
}

/* 聊天输入和发送按钮再做精修 */
.chat-input-wrap {
  border-top: 1px solid rgba(117,235,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#sendBtn {
  border: 1px solid rgba(255,255,255,.18);
}

@media (max-width: 1260px) {
  .anime-assistant.anime-assistant-v18 {
    width: 228px !important;
    right: 14px !important;
  }
  .anime-assistant.anime-assistant-v18 .assistant-card {
    min-height: 350px;
  }
  .anime-assistant.anime-assistant-v18 .assistant-figure {
    max-width: 182px;
    height: 228px;
  }
}
@media (max-width: 980px) {
  .anime-assistant.anime-assistant-v18 {
    width: 150px !important;
    bottom: 124px !important;
  }
  .anime-assistant.anime-assistant-v18 .assistant-card {
    min-height: 210px;
    padding: 8px;
  }
  .anime-assistant.anime-assistant-v18 .assistant-figure {
    max-width: 118px;
    height: 138px;
    border-radius: 18px;
  }
  .anime-assistant.anime-assistant-v18 .assistant-stars-bg,
  .anime-assistant.anime-assistant-v18 .mika-bubble-top,
  .anime-assistant.anime-assistant-v18 .assistant-note {
    display: none;
  }
}

/* =========================
   V22: 复刻宣传图样式 / 蹲姿白羽 / 去掉背景与边框
   ========================= */

/* 右侧白羽整体改成宣传图式浮层：无卡片背景、无图像边框、蹲姿透明人物 */
.anime-assistant.anime-assistant-v18 {
  width: 310px !important;
  right: 34px !important;
  bottom: 152px !important;
  height: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 12;
}

/* 上方对话气泡 */
.anime-assistant.anime-assistant-v18 #mikaBubbleTop {
  align-self: flex-end;
  max-width: 220px;
  padding: 14px 16px;
  border-radius: 18px 18px 6px 18px;
  border: 1px solid rgba(122,235,255,.20);
  background: linear-gradient(135deg, rgba(31, 35, 88, .94), rgba(39, 51, 118, .78));
  color: #f6fdff !important;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  box-shadow: 0 12px 28px rgba(4, 9, 29, .26), 0 0 18px rgba(47,243,255,.06);
  text-shadow: 0 1px 0 rgba(0,0,0,.24);
}
.anime-assistant.anime-assistant-v18 #mikaBubbleTop::after {
  content: '';
  position: absolute;
  right: 20px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-right: 1px solid rgba(122,235,255,.20);
  border-bottom: 1px solid rgba(122,235,255,.20);
  transform: rotate(45deg);
}

/* 白羽主体卡：只保留透明容器，用于放透明人物和星点，不要背景和边框 */
.anime-assistant.anime-assistant-v18 .assistant-card {
  position: relative;
  width: 100%;
  min-height: 420px;
  padding: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate;
}
.anime-assistant.anime-assistant-v18 .assistant-card::before,
.anime-assistant.anime-assistant-v18 .assistant-card::after {
  display: none !important;
}

/* 透明人物，不加边框与卡片底 */
.anime-assistant.anime-assistant-v18 .assistant-figure {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto !important;
  margin: 0 auto;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: drop-shadow(0 16px 24px rgba(9, 16, 42, .32)) drop-shadow(0 0 22px rgba(105, 223, 255, .10));
  animation: assistantPromoFloat 4.8s ease-in-out infinite;
}
@keyframes assistantPromoFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* 围绕人物的梦幻装饰，模仿宣传图 */
.anime-assistant.anime-assistant-v18 .assistant-shine {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 16%, rgba(255,255,255,.28), transparent 8%),
    radial-gradient(circle at 14% 36%, rgba(255,138,223,.20), transparent 11%),
    radial-gradient(circle at 89% 58%, rgba(47,243,255,.22), transparent 10%),
    radial-gradient(circle at 28% 82%, rgba(255,255,255,.14), transparent 8%);
  pointer-events: none;
}
.anime-assistant.anime-assistant-v18 .assistant-stars-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #fff 0 25%, #7df4ff 44%, transparent 72%);
  box-shadow: 0 0 14px rgba(47,243,255,.78);
}
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(1) { left: 34px; top: 96px; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(2) { right: 20px; top: 110px; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(3) { left: 62px; bottom: 128px; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(4) { right: 54px; bottom: 112px; }
.anime-assistant.anime-assistant-v18 .assistant-heart {
  z-index: 3;
  right: 18px;
  top: 118px;
  font-size: 26px;
  color: #ff96e2;
  filter: drop-shadow(0 0 10px rgba(255,150,226,.8));
}

/* 下方说明气泡 */
.anime-assistant.anime-assistant-v18 .assistant-note {
  width: 100%;
  max-width: 248px;
  align-self: flex-end;
  padding: 16px 18px;
  border-radius: 18px 18px 18px 6px;
  border: 1px solid rgba(122,235,255,.18);
  background: linear-gradient(135deg, rgba(27, 39, 96, .96), rgba(17, 29, 72, .94));
  color: #fbfeff !important;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.46;
  text-shadow: 0 1px 0 rgba(0,0,0,.24);
  box-shadow: 0 12px 28px rgba(4, 9, 29, .24), 0 0 16px rgba(255,138,223,.05);
}
.anime-assistant.anime-assistant-v18 .assistant-note::after {
  content: '';
  position: absolute;
  left: 22px;
  top: -7px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid rgba(122,235,255,.18);
  border-top: 1px solid rgba(122,235,255,.18);
  transform: rotate(45deg);
}

/* 宣传图版本去掉底部三个操作按钮，保持纯展示风格 */
.anime-assistant.anime-assistant-v18 .assistant-actions {
  display: none !important;
}

/* 调整聊天区留白，让白羽位置更像宣传图 */
.messages {
  padding-right: 320px !important;
}
.chat-input-wrap {
  padding-right: 320px;
}

/* 轻微提升整体复刻感 */
.chat-panel {
  background: linear-gradient(180deg, rgba(8, 18, 49, .95), rgba(6, 13, 35, .92));
}
.chat-hero {
  background:
    radial-gradient(circle at 94% 8%, rgba(47,243,255,.10), transparent 16%),
    linear-gradient(180deg, rgba(9, 22, 58, .97), rgba(8, 18, 49, .90));
}

/* 保持猫咪可互动，且位置更贴近宣传图 */
.upload-cat.upload-cat-v18 {
  min-height: 312px;
}
.upload-cat.upload-cat-v18 .cat-bubble {
  top: 26px;
  right: 14px;
  max-width: 152px;
}
.upload-cat.upload-cat-v18 .cat-actions {
  right: 14px;
  bottom: 88px;
}

@media (max-width: 1260px) {
  .anime-assistant.anime-assistant-v18 {
    width: 250px !important;
    right: 18px !important;
  }
  .anime-assistant.anime-assistant-v18 .assistant-figure {
    max-width: 224px;
  }
  .messages { padding-right: 274px !important; }
  .chat-input-wrap { padding-right: 274px; }
}

@media (max-width: 980px) {
  .anime-assistant.anime-assistant-v18 {
    width: 150px !important;
    right: 8px !important;
    bottom: 130px !important;
    gap: 6px;
  }
  .anime-assistant.anime-assistant-v18 .assistant-card {
    min-height: 180px;
  }
  .anime-assistant.anime-assistant-v18 #mikaBubbleTop,
  .anime-assistant.anime-assistant-v18 .assistant-note {
    max-width: 148px;
    padding: 8px 10px;
    font-size: 11px;
  }
  .anime-assistant.anime-assistant-v18 .assistant-figure {
    max-width: 140px;
  }
  .anime-assistant.anime-assistant-v18 .assistant-heart,
  .anime-assistant.anime-assistant-v18 .assistant-stars-bg {
    display: none;
  }
  .messages { padding-right: 96px !important; }
  .chat-input-wrap { padding-right: 20px; }
}

/* =========================
   V23: 一比一宣传图复刻风 / 去交互 / 动态展示版
   ========================= */

/* 关闭原有交互入口的视觉与点击 */
#uploadCat,
#animeAssistant,
#animeAssistant .assistant-card,
#animeAssistant .assistant-note,
#animeAssistant #mikaBubbleTop {
  -webkit-user-select: none;
  user-select: none;
}
#uploadCat { pointer-events: none !important; }
#animeAssistant { pointer-events: none !important; }
#animeAssistant .assistant-actions,
#animeAssistant #mikaBubble,
#uploadCat .cat-actions,
#helperTap { display: none !important; }

/* 左侧区域更贴近宣传图 */
.side-panel {
  padding: 22px 18px 18px;
}
.upload-cat.upload-cat-v18 {
  min-height: 300px;
  margin-bottom: 16px;
  padding: 16px 16px 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.08), transparent 18%),
    linear-gradient(180deg, rgba(11, 24, 64, .98), rgba(8, 18, 48, .96));
  border: 1px solid rgba(99, 235, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 30px rgba(0,0,0,.20);
}
.upload-cat.upload-cat-v18::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 22px;
  border: 1px solid rgba(97,235,255,.11);
}
.upload-cat.upload-cat-v18 .cat-figure {
  left: 24px;
  top: 58px;
  width: 300px;
  max-width: calc(100% - 48px);
  animation: promoCatFloat 4.8s ease-in-out infinite;
  filter: drop-shadow(0 14px 24px rgba(4,8,24,.24));
}
@keyframes promoCatFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.upload-cat.upload-cat-v18 .cat-bubble {
  top: 64px;
  right: 24px;
  max-width: 130px;
  border-radius: 20px;
  padding: 14px 15px;
  border: 1px solid rgba(116,235,255,.18);
  background: linear-gradient(180deg, rgba(30, 42, 100, .95), rgba(17, 28, 72, .96));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.45;
  white-space: pre-line;
  text-shadow: 0 1px 0 rgba(0,0,0,.24);
}
.upload-cat.upload-cat-v18 .cat-bubble::after {
  left: 18px;
  bottom: -7px;
}
.upload-cat.upload-cat-v18 .cat-mood-bar {
  bottom: 14px;
  min-height: 34px;
  border-radius: 18px;
  font-size: 13px;
  color: #e8fbff;
  background: linear-gradient(180deg, rgba(10, 24, 63, .96), rgba(7, 16, 44, .98));
}

.drop-zone {
  min-height: 248px;
  border-radius: 24px;
  border: 2px solid rgba(87, 239, 255, .20);
  background:
    radial-gradient(circle at 50% 0%, rgba(48,239,255,.10), transparent 30%),
    linear-gradient(180deg, rgba(8,20,54,.98), rgba(7,15,40,.92));
}
#uploadBtn.primary.wide {
  height: 58px;
  font-size: 17px;
}
.promo-file-card {
  margin-top: 16px;
  min-height: 196px;
  padding: 16px 16px 18px;
  padding-right: 16px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(10, 20, 52, .98), rgba(7, 16, 41, .96));
}
.promo-file-card .mini-cat {
  right: 8px;
  bottom: -4px;
  width: 220px;
  opacity: 1;
}
.promo-file-card strong {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
}
.promo-file-card span {
  position: relative;
  display: block;
  max-width: 170px;
  z-index: 2;
}
.promo-file-card .promo-cat-badge {
  position: absolute;
  right: 34px;
  top: 96px;
  z-index: 3;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(255,255,255,.16), 0 0 18px rgba(47,243,255,.18);
  transform: rotate(-8deg);
}

/* 聊天区域贴近宣传图 */
.layout { grid-template-columns: 438px minmax(0, 1fr) !important; }
.chat-panel { overflow: hidden; }
.chat-hero {
  min-height: 126px;
  padding: 18px 22px 14px;
}
.hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
}
.quick-prompts {
  gap: 10px;
}
.quick-prompt {
  min-height: 38px;
  padding: 0 16px;
  font-size: 13px;
}
.messages {
  padding: 22px 360px 22px 22px !important;
  position: relative;
}
.chat-input-wrap {
  min-height: 132px;
  padding-right: 360px;
}
#messageInput {
  min-height: 88px;
  border-radius: 22px;
}
#sendBtn {
  height: 74px;
  border-radius: 24px;
  font-size: 22px;
  position: relative;
}
#sendBtn::before {
  content: '点击发送，我来帮你解答！';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 20px);
  transform: translateX(-42%);
  width: 222px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(116,235,255,.18);
  background: linear-gradient(180deg, rgba(34, 43, 103, .96), rgba(20, 31, 79, .96));
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
  box-shadow: 0 12px 24px rgba(4,9,29,.26);
  pointer-events: none;
}
#sendBtn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  width: 12px;
  height: 12px;
  transform: translateX(60px) rotate(45deg);
  border-right: 1px solid rgba(116,235,255,.18);
  border-bottom: 1px solid rgba(116,235,255,.18);
  background: rgba(20,31,79,.96);
  pointer-events: none;
}

/* 右侧白羽完全复刻宣传图布局 */
.anime-assistant.anime-assistant-v18 {
  width: 334px !important;
  right: 22px !important;
  bottom: 120px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  z-index: 12;
}
.anime-assistant.anime-assistant-v18 #mikaBubbleTop {
  max-width: 228px;
  margin-right: 14px;
  padding: 14px 16px;
  border-radius: 18px 18px 6px 18px;
  font-size: 14px;
}
.anime-assistant.anime-assistant-v18 .assistant-card {
  position: relative;
  width: 100%;
  min-height: 404px;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0;
  overflow: visible !important;
}
.anime-assistant.anime-assistant-v18 .assistant-shine {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 14%, rgba(255,255,255,.26), transparent 9%),
    radial-gradient(circle at 22% 18%, rgba(255,138,223,.22), transparent 10%),
    radial-gradient(circle at 18% 42%, rgba(255,255,255,.24), transparent 8%),
    radial-gradient(circle at 90% 56%, rgba(47,243,255,.16), transparent 8%),
    radial-gradient(circle at 84% 88%, rgba(255,138,223,.18), transparent 8%);
}
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(1) { left: 36px; top: 90px; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(2) { right: 18px; top: 126px; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(3) { left: 28px; bottom: 84px; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(4) { right: 22px; bottom: 34px; }
.anime-assistant.anime-assistant-v18 .assistant-heart {
  right: 18px;
  top: 102px;
  font-size: 22px;
}
.anime-assistant.anime-assistant-v18 .assistant-figure {
  max-width: 290px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 28px rgba(5, 10, 28, .34)) drop-shadow(0 0 18px rgba(118, 240, 255, .12));
  animation: promoGirlFloat 5s ease-in-out infinite;
}
@keyframes promoGirlFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.anime-assistant.anime-assistant-v18 .assistant-note {
  max-width: 232px;
  align-self: flex-end;
  margin-right: 8px;
  padding: 15px 16px;
  border-radius: 18px;
  font-size: 14px;
}

/* 移动响应 */
@media (max-width: 1260px) {
  .layout { grid-template-columns: 392px minmax(0, 1fr) !important; }
  .messages { padding-right: 286px !important; }
  .chat-input-wrap { padding-right: 286px; }
  .anime-assistant.anime-assistant-v18 { width: 270px !important; }
  .anime-assistant.anime-assistant-v18 .assistant-figure { max-width: 238px; }
}
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr !important; }
  .messages { padding-right: 22px !important; }
  .chat-input-wrap { padding-right: 20px; }
  .anime-assistant.anime-assistant-v18 {
    width: 148px !important;
    right: 8px !important;
    bottom: 132px !important;
    gap: 8px;
  }
  .anime-assistant.anime-assistant-v18 #mikaBubbleTop,
  .anime-assistant.anime-assistant-v18 .assistant-note {
    max-width: 144px;
    padding: 8px 10px;
    font-size: 11px;
  }
  .anime-assistant.anime-assistant-v18 .assistant-figure { max-width: 134px; }
  #sendBtn::before, #sendBtn::after, .promo-file-card .promo-cat-badge { display: none; }
  .promo-file-card .mini-cat { width: 150px; }
}

/* =========================
   V24: 宣传图配色与装饰修复版 / 显示增强
   ========================= */

/* 整体色彩重新校准，更接近宣传图 */
body {
  background:
    radial-gradient(circle at 7% 48%, rgba(255, 84, 206, .16), transparent 20%),
    radial-gradient(circle at 92% 78%, rgba(47, 243, 255, .14), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(88, 125, 255, .12), transparent 16%),
    linear-gradient(180deg, #040a22 0%, #071234 45%, #050b1d 100%);
}
.topbar.glass {
  background: linear-gradient(180deg, rgba(9, 19, 50, .96), rgba(9, 18, 46, .90));
}
.layout.holo-frame {
  background: linear-gradient(180deg, rgba(8, 14, 38, .72), rgba(8, 14, 37, .42));
}
.side-panel, .chat-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(50, 241, 255, .08), transparent 18%),
    linear-gradient(180deg, rgba(8, 19, 51, .97), rgba(7, 14, 39, .95));
}

/* 左侧猫咪区更像宣传图的布局 */
.upload-cat.upload-cat-v18 {
  min-height: 322px;
  padding: 14px 16px 16px;
}
.upload-cat.upload-cat-v18 .cat-figure {
  top: 54px;
  left: 22px;
  width: 308px;
  max-width: calc(100% - 44px);
}
.upload-cat.upload-cat-v18 .cat-bubble {
  top: 18px;
  right: 16px;
  max-width: 148px;
  border-radius: 18px 18px 18px 8px;
  background: linear-gradient(135deg, rgba(23, 37, 92, .96), rgba(13, 27, 71, .98));
}
.upload-cat.upload-cat-v18 .cat-mood-bar {
  left: 14px;
  right: 14px;
  bottom: 12px;
}
.drop-zone {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 24px rgba(0,0,0,.18);
}
.promo-file-card {
  min-height: 214px;
  background:
    radial-gradient(circle at 80% 16%, rgba(48,239,255,.08), transparent 18%),
    linear-gradient(180deg, rgba(9, 19, 49, .98), rgba(8, 15, 39, .98));
}
.promo-file-card .mini-cat {
  width: 236px;
  right: 0;
  bottom: -8px;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,.22));
}
.promo-file-card .promo-cat-badge {
  right: 28px;
  top: 102px;
}

/* 右侧白羽显示修复：确保清晰可见，且装饰接近宣传图 */
.anime-assistant.anime-assistant-v18 {
  width: 320px !important;
  right: 26px !important;
  bottom: 126px !important;
  gap: 12px;
}
.anime-assistant.anime-assistant-v18 #mikaBubbleTop {
  margin-right: 10px;
  max-width: 220px;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(43, 48, 111, .96), rgba(31, 41, 96, .96));
  border-color: rgba(121, 235, 255, .16);
}
.anime-assistant.anime-assistant-v18 .assistant-card {
  min-height: 382px;
  position: relative;
}
.anime-assistant.anime-assistant-v18 .assistant-card::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 56px;
  width: 230px;
  height: 230px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(73, 189, 255, .22) 0%, rgba(73, 189, 255, .10) 40%, rgba(73, 189, 255, 0) 72%);
  filter: blur(4px);
  z-index: 0;
}
.anime-assistant.anime-assistant-v18 .assistant-card::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 6px;
  width: 128px;
  height: 30px;
  transform: translateX(-50%) rotate(10deg);
  border-radius: 999px;
  border: 4px solid rgba(255, 241, 228, .92);
  box-shadow: 0 0 18px rgba(255,255,255,.22);
  z-index: 1;
  opacity: .82;
}
.anime-assistant.anime-assistant-v18 .assistant-figure {
  position: relative;
  z-index: 2;
  max-width: 270px;
  filter: brightness(1.08) saturate(1.08) drop-shadow(0 12px 24px rgba(7, 11, 30, .34));
}
.anime-assistant.anime-assistant-v18 .assistant-shine {
  z-index: 1;
  background:
    radial-gradient(circle at 84% 12%, rgba(255,255,255,.20), transparent 8%),
    radial-gradient(circle at 20% 26%, rgba(255,138,223,.20), transparent 10%),
    radial-gradient(circle at 10% 44%, rgba(255,255,255,.16), transparent 7%),
    radial-gradient(circle at 90% 54%, rgba(47,243,255,.18), transparent 8%),
    radial-gradient(circle at 82% 86%, rgba(255,138,223,.18), transparent 8%);
}
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span {
  width: 10px; height: 10px;
  box-shadow: 0 0 16px rgba(47,243,255,.72);
}
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(1) { left: 30px; top: 92px; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(2) { right: 22px; top: 108px; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(3) { left: 52px; bottom: 92px; }
.anime-assistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(4) { right: 32px; bottom: 58px; }
.anime-assistant.anime-assistant-v18 .assistant-heart {
  right: 14px;
  top: 114px;
  font-size: 24px;
}
.anime-assistant.anime-assistant-v18 .assistant-note {
  max-width: 238px;
  margin-right: 2px;
  padding: 16px 18px;
  border-radius: 18px 18px 18px 8px;
  background: linear-gradient(135deg, rgba(22, 39, 96, .96), rgba(14, 26, 67, .98));
  border: 1px solid rgba(116,235,255,.16);
  box-shadow: 0 12px 28px rgba(4,9,29,.24);
}

/* 中央与右侧装饰点缀 */
.messages::before {
  content: '';
  position: absolute;
  right: 250px;
  top: 94px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #55eeff;
  box-shadow: 0 0 18px rgba(85,238,255,.85);
}
.messages::after {
  content: '';
  position: absolute;
  right: 96px;
  bottom: 120px;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,110,255,.36), rgba(176,110,255,.10) 44%, rgba(176,110,255,0) 70%);
  filter: blur(2px);
}

/* 发送按钮和提示更接近宣传图 */
#sendBtn {
  width: 132px;
  justify-self: end;
  background: linear-gradient(135deg, #4d7dff 0%, #7e6dff 30%, #ef96e3 70%, #9ff4f3 100%);
}
#sendBtn::before {
  width: 230px;
  bottom: calc(100% + 18px);
}

@media (max-width: 1260px) {
  .anime-assistant.anime-assistant-v18 {
    width: 280px !important;
    right: 14px !important;
  }
  .anime-assistant.anime-assistant-v18 .assistant-figure { max-width: 236px; }
}
@media (max-width: 980px) {
  .anime-assistant.anime-assistant-v18 {
    width: 154px !important;
    bottom: 132px !important;
  }
  .anime-assistant.anime-assistant-v18 .assistant-card::before,
  .anime-assistant.anime-assistant-v18 .assistant-card::after,
  .messages::before,
  .messages::after { display: none; }
  .anime-assistant.anime-assistant-v18 .assistant-figure { max-width: 136px; }
}


/* =========================
   V25: 修复二次元角色不显示/发黑问题
   ========================= */

/* 强制二次元角色使用正常显示，不被滤镜、混合模式、透明度影响 */
.anime-assistant.anime-assistant-v18,
.anime-assistant.anime-assistant-v18 *,
#animeAssistant,
#animeAssistant * {
  mix-blend-mode: normal !important;
}

.anime-assistant.anime-assistant-v18 .assistant-figure {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter:
    brightness(1.13)
    contrast(1.04)
    saturate(1.08)
    drop-shadow(0 18px 30px rgba(4, 9, 28, .38))
    drop-shadow(0 0 24px rgba(78, 232, 255, .18)) !important;
  background: transparent !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* 宣传图式角色区：有蓝天人物本体，但无外框和硬边框 */
.anime-assistant.anime-assistant-v18 .assistant-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.anime-assistant.anime-assistant-v18 .assistant-card::before {
  background: radial-gradient(circle, rgba(47,243,255,.18), rgba(47,243,255,.06) 42%, transparent 72%) !important;
  display: block !important;
}
.anime-assistant.anime-assistant-v18 .assistant-card::after {
  display: none !important;
}

/* 登录页也固定右侧白羽可见 */
body:has(#loginPage:not(.hidden)) .anime-assistant.anime-assistant-v18 {
  width: 330px !important;
  right: 46px !important;
  bottom: 120px !important;
}
body:has(#loginPage:not(.hidden)) .anime-assistant.anime-assistant-v18 .assistant-card {
  min-height: 420px !important;
}
body:has(#loginPage:not(.hidden)) .anime-assistant.anime-assistant-v18 .assistant-figure {
  max-width: 300px !important;
}

/* 如果浏览器不支持 :has，也用登录页常规布局保障角色不会消失 */
#loginPage:not(.hidden) ~ #animeAssistant,
.login-shell:not(.hidden) ~ #animeAssistant {
  width: 330px !important;
  right: 46px !important;
  bottom: 120px !important;
}

/* 对话框更亮更清楚 */
.anime-assistant.anime-assistant-v18 #mikaBubbleTop,
.anime-assistant.anime-assistant-v18 .assistant-note {
  opacity: 1 !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.28), 0 0 10px rgba(255,255,255,.05) !important;
  background: linear-gradient(135deg, rgba(50, 56, 125, .97), rgba(22, 38, 93, .98)) !important;
  border: 1px solid rgba(128, 236, 255, .24) !important;
}

/* 给角色周围补一点宣传图的星光，保证深色背景下能看到 */
.anime-assistant.anime-assistant-v18 .assistant-shine {
  opacity: 1 !important;
  background:
    radial-gradient(circle at 86% 12%, rgba(255,255,255,.28), transparent 9%),
    radial-gradient(circle at 20% 22%, rgba(255,138,223,.24), transparent 10%),
    radial-gradient(circle at 12% 44%, rgba(255,255,255,.20), transparent 7%),
    radial-gradient(circle at 90% 54%, rgba(47,243,255,.22), transparent 8%),
    radial-gradient(circle at 82% 86%, rgba(255,138,223,.20), transparent 8%) !important;
}

/* 手机/小屏避免挡住输入和按钮 */
@media (max-width: 980px) {
  .anime-assistant.anime-assistant-v18 {
    width: 150px !important;
    right: 8px !important;
    bottom: 132px !important;
  }
  .anime-assistant.anime-assistant-v18 .assistant-figure {
    max-width: 136px !important;
  }
}


/* =========================
   V26: 蹲姿透明版白羽 / 无背景 / 显示修复
   ========================= */

/* 统一修复：禁止异常混合导致角色发黑/消失 */
#animeAssistant, #animeAssistant * {
  mix-blend-mode: normal !important;
}

/* 重新设计右侧白羽 UI：蹲姿、透明、无背景无边框 */
#animeAssistant.anime-assistant-v18 {
  width: 310px !important;
  right: 28px !important;
  bottom: 128px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 12px !important;
  z-index: 22 !important;
  pointer-events: none !important;
}
#animeAssistant.anime-assistant-v18 .assistant-actions,
#animeAssistant.anime-assistant-v18 #mikaBubble {
  display: none !important;
}
#animeAssistant.anime-assistant-v18 .assistant-card {
  position: relative !important;
  width: 100% !important;
  min-height: 392px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#animeAssistant.anime-assistant-v18 .assistant-card::before,
#animeAssistant.anime-assistant-v18 .assistant-card::after,
#animeAssistant.anime-assistant-v18 .assistant-aura,
#animeAssistant.anime-assistant-v18 #helperTap {
  display: none !important;
}
#animeAssistant.anime-assistant-v18 .assistant-figure {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 286px !important;
  height: auto !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  filter: brightness(1.08) contrast(1.03) saturate(1.06) drop-shadow(0 16px 28px rgba(5,10,28,.34)) !important;
  animation: crouchFloatV26 4.8s ease-in-out infinite !important;
}
@keyframes crouchFloatV26 {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
#animeAssistant.anime-assistant-v18 .assistant-shine {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 88% 16%, rgba(255,255,255,.22), transparent 8%),
    radial-gradient(circle at 12% 34%, rgba(255,138,223,.18), transparent 10%),
    radial-gradient(circle at 90% 55%, rgba(47,243,255,.18), transparent 8%),
    radial-gradient(circle at 22% 72%, rgba(255,255,255,.12), transparent 7%) !important;
  pointer-events: none !important;
}
#animeAssistant.anime-assistant-v18 .assistant-stars-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
#animeAssistant.anime-assistant-v18 .assistant-stars-bg span {
  position: absolute !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, #fff 0 28%, #78f3ff 44%, transparent 72%) !important;
  box-shadow: 0 0 14px rgba(120,243,255,.70) !important;
  animation: starPulseV26 3.8s ease-in-out infinite !important;
}
#animeAssistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(1) { left: 28px !important; top: 98px !important; }
#animeAssistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(2) { right: 22px !important; top: 124px !important; animation-delay: -.8s !important; }
#animeAssistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(3) { left: 44px !important; bottom: 110px !important; animation-delay: -1.6s !important; }
#animeAssistant.anime-assistant-v18 .assistant-stars-bg span:nth-child(4) { right: 34px !important; bottom: 94px !important; animation-delay: -2.2s !important; }
@keyframes starPulseV26 {
  0%,100% { opacity: .35; transform: scale(.82); }
  50% { opacity: 1; transform: scale(1.18); }
}
#animeAssistant.anime-assistant-v18 .assistant-heart {
  position: absolute !important;
  right: 18px !important;
  top: 120px !important;
  z-index: 3 !important;
  color: #ff98e2 !important;
  font-size: 23px !important;
  filter: drop-shadow(0 0 10px rgba(255,152,226,.7)) !important;
}
#animeAssistant.anime-assistant-v18 #mikaBubbleTop,
#animeAssistant.anime-assistant-v18 .assistant-note {
  position: relative !important;
  pointer-events: none !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
  border: 1px solid rgba(121,235,255,.20) !important;
  box-shadow: 0 10px 24px rgba(4,9,29,.22) !important;
  background: linear-gradient(135deg, rgba(43,48,111,.95), rgba(24,38,92,.96)) !important;
  opacity: 1 !important;
}
#animeAssistant.anime-assistant-v18 #mikaBubbleTop {
  align-self: flex-end !important;
  max-width: 220px !important;
  margin-right: 14px !important;
  padding: 14px 16px !important;
  border-radius: 18px 18px 6px 18px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
#animeAssistant.anime-assistant-v18 #mikaBubbleTop::after {
  content: '' !important;
  position: absolute !important;
  right: 18px !important;
  bottom: -7px !important;
  width: 12px !important;
  height: 12px !important;
  transform: rotate(45deg) !important;
  background: inherit !important;
  border-right: 1px solid rgba(121,235,255,.20) !important;
  border-bottom: 1px solid rgba(121,235,255,.20) !important;
}
#animeAssistant.anime-assistant-v18 .assistant-note {
  align-self: flex-end !important;
  max-width: 238px !important;
  margin-right: 4px !important;
  padding: 16px 18px !important;
  border-radius: 18px 18px 18px 6px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  white-space: pre-line !important;
}

/* 登录页专门优化，防止角色被挤没 */
#loginPage:not(.hidden) {
  padding-right: 360px !important;
}
#loginPage:not(.hidden) .login-card {
  max-width: 920px !important;
}

/* APP 聊天页留出右侧角色空间 */
#appPage:not(.hidden) .messages { padding-right: 330px !important; }
#appPage:not(.hidden) .chat-input-wrap { padding-right: 330px !important; }

/* 小屏幕避免遮挡 */
@media (max-width: 980px) {
  #loginPage:not(.hidden) { padding-right: 16px !important; }
  #animeAssistant.anime-assistant-v18 {
    width: 148px !important;
    right: 8px !important;
    bottom: 126px !important;
    gap: 8px !important;
  }
  #animeAssistant.anime-assistant-v18 .assistant-figure { max-width: 136px !important; }
  #animeAssistant.anime-assistant-v18 #mikaBubbleTop,
  #animeAssistant.anime-assistant-v18 .assistant-note {
    max-width: 148px !important;
    font-size: 11px !important;
    padding: 8px 10px !important;
  }
  #animeAssistant.anime-assistant-v18 .assistant-stars-bg,
  #animeAssistant.anime-assistant-v18 .assistant-heart {
    display: none !important;
  }
  #appPage:not(.hidden) .messages,
  #appPage:not(.hidden) .chat-input-wrap { padding-right: 18px !important; }
}


/* =========================
   V27: 仅替换登录页UI / 蹲姿透明白羽 / 无背景
   ========================= */

/* 登录页卡片重新布局：左边表单，右边透明白羽展示；其他功能不变 */
body:has(#loginPage:not(.hidden)) #loginPage.login-shell {
  padding: 40px 48px !important;
}
body:has(#loginPage:not(.hidden)) #loginPage .login-card {
  position: relative !important;
  max-width: 1360px !important;
  min-height: 720px !important;
  padding: 54px 520px 54px 52px !important;
  border-radius: 34px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(89, 236, 255, .09), transparent 18%),
    linear-gradient(180deg, rgba(7, 18, 50, .96), rgba(6, 12, 34, .94)) !important;
}
body:has(#loginPage:not(.hidden)) #loginPage .brand-row.center {
  justify-content: flex-start !important;
}
body:has(#loginPage:not(.hidden)) #loginPage .login-sub {
  max-width: 560px !important;
  margin-bottom: 26px !important;
}
body:has(#loginPage:not(.hidden)) #loginPage .login-form {
  max-width: 720px !important;
}
body:has(#loginPage:not(.hidden)) #loginPage .input-row {
  max-width: 900px !important;
}
body:has(#loginPage:not(.hidden)) #loginPage .input-row input {
  min-height: 76px !important;
  font-size: 18px !important;
}
body:has(#loginPage:not(.hidden)) #loginPage .input-row button {
  min-width: 200px !important;
  min-height: 76px !important;
  font-size: 18px !important;
}
body:has(#loginPage:not(.hidden)) #loginPage .error-text {
  max-width: 720px !important;
}
body:has(#loginPage:not(.hidden)) #loginPage .login-camera-hint {
  max-width: 900px !important;
}

/* 登录页的白羽：透明、蹲姿、无背景块、无边框，只做展示 */
body:has(#loginPage:not(.hidden)) #animeAssistant {
  position: fixed !important;
  right: max(40px, calc((100vw - 1360px) / 2 + 36px)) !important;
  top: 104px !important;
  bottom: auto !important;
  width: 360px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 14px !important;
  z-index: 40 !important;
  pointer-events: none !important;
}
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-card {
  position: relative !important;
  width: 100% !important;
  min-height: 460px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-card::before,
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-card::after,
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-aura,
body:has(#loginPage:not(.hidden)) #animeAssistant #helperTap,
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-actions,
body:has(#loginPage:not(.hidden)) #animeAssistant #mikaBubble {
  display: none !important;
}
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-figure {
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(1.08) contrast(1.03) saturate(1.05) drop-shadow(0 18px 28px rgba(6, 10, 28, .34)) !important;
  animation: loginShirohaFloatV27 4.8s ease-in-out infinite !important;
}
@keyframes loginShirohaFloatV27 {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-shine {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 84% 14%, rgba(255,255,255,.24), transparent 8%),
    radial-gradient(circle at 18% 28%, rgba(255,138,223,.18), transparent 10%),
    radial-gradient(circle at 88% 54%, rgba(47,243,255,.20), transparent 9%),
    radial-gradient(circle at 24% 76%, rgba(255,255,255,.10), transparent 7%) !important;
}
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-stars-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-stars-bg span {
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, #fff 0 28%, #76f4ff 44%, transparent 72%) !important;
  box-shadow: 0 0 14px rgba(118,244,255,.72) !important;
}
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-stars-bg span:nth-child(1) { left: 28px !important; top: 104px !important; }
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-stars-bg span:nth-child(2) { right: 24px !important; top: 126px !important; }
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-stars-bg span:nth-child(3) { left: 46px !important; bottom: 112px !important; }
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-stars-bg span:nth-child(4) { right: 28px !important; bottom: 88px !important; }
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-heart {
  right: 20px !important;
  top: 126px !important;
  z-index: 3 !important;
  color: #ff98e2 !important;
  font-size: 24px !important;
  filter: drop-shadow(0 0 10px rgba(255,152,226,.7)) !important;
}
body:has(#loginPage:not(.hidden)) #animeAssistant #mikaBubbleTop,
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-note {
  position: relative !important;
  color: #fff !important;
  border: 1px solid rgba(121,235,255,.20) !important;
  background: linear-gradient(135deg, rgba(43,48,111,.95), rgba(24,38,92,.96)) !important;
  box-shadow: 0 10px 22px rgba(4,9,29,.20) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.26) !important;
}
body:has(#loginPage:not(.hidden)) #animeAssistant #mikaBubbleTop {
  max-width: 220px !important;
  margin-right: 18px !important;
  padding: 14px 16px !important;
  border-radius: 18px 18px 6px 18px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-note {
  max-width: 238px !important;
  margin-right: 8px !important;
  padding: 16px 18px !important;
  border-radius: 18px 18px 18px 6px !important;
  white-space: pre-line !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

/* 不支持 :has 的浏览器的兜底 */
#loginPage:not(.hidden) ~ #animeAssistant,
.login-shell:not(.hidden) ~ #animeAssistant {
  right: 36px !important;
  top: 104px !important;
  bottom: auto !important;
}

/* 小屏幕保持可见不遮挡，功能不变 */
@media (max-width: 1180px) {
  body:has(#loginPage:not(.hidden)) #loginPage.login-shell { padding: 24px 20px !important; }
  body:has(#loginPage:not(.hidden)) #loginPage .login-card {
    max-width: 980px !important;
    min-height: auto !important;
    padding: 34px 34px 34px 34px !important;
  }
  body:has(#loginPage:not(.hidden)) #animeAssistant {
    width: 170px !important;
    right: 10px !important;
    top: auto !important;
    bottom: 112px !important;
    gap: 8px !important;
  }
  body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-figure { max-width: 150px !important; }
  body:has(#loginPage:not(.hidden)) #animeAssistant #mikaBubbleTop,
  body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-note {
    max-width: 160px !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
}


/* =========================
   V29: 彩色显示修复版 / 不改原功能
   ========================= */
#animeAssistant, #animeAssistant * { mix-blend-mode: normal !important; }
#animeAssistant .assistant-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  clip-path: none !important;
}
#animeAssistant .assistant-card::before,
#animeAssistant .assistant-card::after,
#animeAssistant .assistant-aura,
#animeAssistant #helperTap { display:none !important; }
#animeAssistant .assistant-figure {
  content: url('/angel-visible-blended-v29.png?v=29') !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:100% !important;
  max-width:330px !important;
  height:auto !important;
  object-fit:contain !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  filter: drop-shadow(0 18px 30px rgba(4,10,28,.34)) drop-shadow(0 0 18px rgba(80,230,255,.12)) !important;
  animation: v29AngelFloat 4.8s ease-in-out infinite !important;
}
@keyframes v29AngelFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
body:has(#loginPage:not(.hidden)) #animeAssistant {
  width: 380px !important;
  right: max(34px, calc((100vw - 1360px) / 2 + 24px)) !important;
  top: 100px !important;
  bottom: auto !important;
  z-index: 80 !important;
}
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-card { min-height: 520px !important; }
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-figure { max-width: 360px !important; }
body:has(#loginPage:not(.hidden)) #animeAssistant #mikaBubbleTop,
body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-note {
  color:#fff !important;
  background:linear-gradient(135deg, rgba(43,48,111,.95), rgba(24,38,92,.96)) !important;
  border:1px solid rgba(121,235,255,.20) !important;
  text-shadow:0 1px 0 rgba(0,0,0,.26) !important;
}
#appPage:not(.hidden) ~ #animeAssistant .assistant-figure,
body:has(#appPage:not(.hidden)) #animeAssistant .assistant-figure { content:url('/angel-visible-blended-v29.png?v=29') !important; }
@media(max-width:1180px){
  body:has(#loginPage:not(.hidden)) #animeAssistant{width:170px !important; right:10px !important; top:auto !important; bottom:112px !important;}
  #animeAssistant .assistant-figure{max-width:155px !important;}
}


/* =========================
   V30: 增加梦幻装饰 + 恢复猫咪/白羽互动
   ========================= */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,115,235,.14), transparent 20%),
    radial-gradient(circle at 88% 82%, rgba(68,243,255,.14), transparent 24%),
    radial-gradient(circle at 62% 14%, rgba(145,128,255,.09), transparent 18%);
}

.holo-frame {
  position: relative;
  overflow: hidden;
}
.holo-frame::before,
.holo-frame::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  opacity: .5;
}
.holo-frame::before {
  right: -56px;
  top: 90px;
  background: radial-gradient(circle, rgba(64,238,255,.32), transparent 68%);
}
.holo-frame::after {
  left: -44px;
  bottom: 40px;
  background: radial-gradient(circle, rgba(255,121,219,.22), transparent 70%);
}

.chat-panel::before,
.side-panel::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.06), transparent 14%),
    radial-gradient(circle at 12% 84%, rgba(47,243,255,.08), transparent 16%);
}

.panel-title,
.chat-hero h2,
.topbar h1 {
  text-shadow: 0 0 18px rgba(255,255,255,.10), 0 0 28px rgba(74,229,255,.18);
}

.quick-prompts {
  gap: 10px;
}
.quick-prompt {
  box-shadow: 0 8px 18px rgba(4,10,28,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.quick-prompt:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(4,10,28,.24), 0 0 16px rgba(80,230,255,.12);
}

/* 猫咪互动按钮可见且更精致 */
.upload-cat.upload-cat-v18 {
  cursor: pointer;
}
.upload-cat.upload-cat-v18 .cat-actions {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: absolute;
  right: 16px;
  top: 56px;
  z-index: 4;
}
.upload-cat.upload-cat-v18 .cat-actions button {
  pointer-events: auto;
  min-width: 88px;
  border-radius: 999px;
  border: 1px solid rgba(116,235,255,.24);
  background: linear-gradient(135deg, rgba(19,35,86,.96), rgba(17,26,68,.96));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  box-shadow: 0 10px 22px rgba(3,8,24,.22);
}
.upload-cat.upload-cat-v18 .cat-actions button:hover,
.upload-cat.upload-cat-v18 .cat-actions button.is-active {
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(154,246,255,.45);
  box-shadow: 0 14px 28px rgba(5,10,28,.28), 0 0 18px rgba(85,237,255,.18);
}
.upload-cat.upload-cat-v18 .cat-figure {
  transition: transform .25s ease, filter .25s ease;
}
.upload-cat.upload-cat-v18:hover .cat-figure {
  transform: translateY(-2px) scale(1.02);
  filter: drop-shadow(0 14px 28px rgba(64,228,255,.24));
}
.upload-cat.upload-cat-v18::after {
  content: '✦';
  position: absolute;
  right: 34px;
  top: 22px;
  color: #8cecff;
  font-size: 14px;
  animation: v30Twinkle 2.6s ease-in-out infinite;
}
.upload-cat.upload-cat-v18 .cat-deco {
  opacity: .95;
}
.upload-cat.upload-cat-v18 .deco-1,
.upload-cat.upload-cat-v18 .deco-2 {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0 26%, #7eefff 46%, transparent 72%);
  box-shadow: 0 0 14px rgba(126,239,255,.55);
}
.upload-cat.upload-cat-v18 .cat-bubble {
  white-space: pre-line;
}
.upload-cat.upload-cat-v18 .cat-mood-bar {
  background: linear-gradient(135deg, rgba(9,20,58,.92), rgba(7,14,34,.86));
  border: 1px solid rgba(127,233,255,.18);
  box-shadow: 0 10px 20px rgba(3,8,24,.18);
}

/* 白羽恢复互动，并增加装饰 */
.anime-assistant.anime-assistant-v18 {
  width: 258px !important;
  right: 14px !important;
}
.anime-assistant.anime-assistant-v18::before {
  content: '';
  position: absolute;
  inset: 78px 14px 140px 16px;
  border-radius: 28px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(110,247,255,.18), rgba(174,113,255,.08) 52%, transparent 74%);
  filter: blur(18px);
}
.anime-assistant.anime-assistant-v18 .assistant-card {
  background: linear-gradient(180deg, rgba(11,25,70,.36), rgba(8,17,50,.26));
  border-color: rgba(125,235,255,.18);
}
.anime-assistant.anime-assistant-v18 .assistant-card::after {
  animation: v30Pulse 4.5s ease-in-out infinite;
}
.anime-assistant.anime-assistant-v18 .assistant-figure {
  max-width: 210px;
  transition: transform .28s ease, filter .28s ease;
}
.anime-assistant.anime-assistant-v18:hover .assistant-figure {
  transform: translateY(-4px) scale(1.015);
  filter: drop-shadow(0 20px 34px rgba(4,10,28,.32)) drop-shadow(0 0 24px rgba(113,243,255,.18));
}
.anime-assistant.anime-assistant-v18 .assistant-stars-bg { display: block !important; }
.anime-assistant.anime-assistant-v18 .assistant-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  max-width: 228px;
  opacity: 1 !important;
  visibility: visible !important;
}
.anime-assistant.anime-assistant-v18 .assistant-actions button {
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(33,50,112,.96), rgba(21,32,84,.96));
  border: 1px solid rgba(126,236,255,.24);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(3,8,24,.22);
}
.anime-assistant.anime-assistant-v18 .assistant-actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(3,8,24,.24), 0 0 18px rgba(255,151,225,.16);
}
.anime-assistant.anime-assistant-v18 #mikaBubbleTop,
.anime-assistant.anime-assistant-v18 .assistant-note {
  background: linear-gradient(135deg, rgba(43,53,130,.96), rgba(23,36,94,.96));
}
.anime-assistant.anime-assistant-v18 .assistant-heart {
  display: block !important;
  animation: v30HeartFloat 2.8s ease-in-out infinite;
}

/* 让输入区也多一点梦幻装饰 */
.chat-input-wrap::before {
  content: '✦';
  position: absolute;
  right: 164px;
  top: -10px;
  color: rgba(123,239,255,.9);
  text-shadow: 0 0 14px rgba(123,239,255,.45);
  animation: v30Twinkle 2.4s ease-in-out infinite;
}
#sendBtn {
  box-shadow: 0 16px 28px rgba(10,16,42,.28), 0 0 20px rgba(255,161,230,.16);
}
#sendBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(10,16,42,.32), 0 0 26px rgba(90,233,255,.18);
}

@keyframes v30Twinkle {
  0%,100% { opacity: .45; transform: scale(.9) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.25) rotate(18deg); }
}
@keyframes v30Pulse {
  0%,100% { opacity: .56; transform: scale(1); }
  50% { opacity: .82; transform: scale(1.02); }
}
@keyframes v30HeartFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.12); }
}

@media (max-width: 1260px) {
  .anime-assistant.anime-assistant-v18 { width: 228px !important; }
  .anime-assistant.anime-assistant-v18 .assistant-actions { max-width: 200px; }
}
@media (max-width: 980px) {
  .upload-cat.upload-cat-v18 .cat-actions { top: 58px; right: 10px; }
  .upload-cat.upload-cat-v18 .cat-actions button { min-width: 72px; font-size: 11px; }
  .anime-assistant.anime-assistant-v18 .assistant-actions { display: none !important; }
}


/* =========================
   V31: 浏览器适配 / 自动缩放 / 防遮挡
   ========================= */

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.topbar,
.topbar.glass,
.top-actions,
#logoutBtn,
.switch-wrap {
  position: relative;
  z-index: 120 !important;
}

.side-panel,
.drop-zone,
#uploadBtn,
#clearFileBtn,
.file-card,
.upload-cat,
.upload-cat * {
  position: relative;
}

#uploadBtn,
#clearFileBtn,
.drop-zone,
#fileInput {
  z-index: 90 !important;
}

.bg-orb,
.star-layer,
.dream-particles,
.dream-particles *,
.holo-frame::before,
.holo-frame::after,
.chat-panel::before,
.side-panel::before,
.assistant-shine,
.assistant-stars-bg,
.assistant-heart {
  pointer-events: none !important;
}

.app-shell {
  width: min(100%, 1600px);
  margin-inline: auto;
  padding-inline: clamp(10px, 2vw, 28px);
}

.layout {
  grid-template-columns: clamp(300px, 30vw, 430px) minmax(0, 1fr) !important;
  gap: clamp(12px, 1.4vw, 20px) !important;
}

.side-panel,
.chat-panel {
  min-width: 0;
}

#animeAssistant.anime-assistant-v18 {
  --assistant-scale-v31: clamp(.62, calc((100vw - 900px) / 900 + .62), .92);
  transform: scale(var(--assistant-scale-v31));
  transform-origin: right bottom;
  right: clamp(8px, 1.4vw, 22px) !important;
  bottom: clamp(110px, 14vh, 148px) !important;
  z-index: 45 !important;
  max-height: calc(100vh - 150px);
}

#animeAssistant {
  pointer-events: none !important;
}

#animeAssistant .assistant-card,
#animeAssistant .assistant-actions,
#animeAssistant #mikaBubbleTop,
#animeAssistant .assistant-note {
  pointer-events: auto !important;
}

@media (max-width: 1280px), (max-height: 760px) {
  #animeAssistant.anime-assistant-v18 {
    --assistant-scale-v31: .68;
    right: 8px !important;
    bottom: 118px !important;
  }

  #animeAssistant.anime-assistant-v18 .assistant-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 180px;
    gap: 6px;
  }

  #animeAssistant.anime-assistant-v18 .assistant-actions button {
    min-height: 30px;
    font-size: 11px;
    padding-inline: 8px;
  }

  #animeAssistant.anime-assistant-v18 .assistant-note {
    max-width: 190px !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
  }

  #animeAssistant.anime-assistant-v18 #mikaBubbleTop {
    max-width: 180px !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
}

@media (max-width: 980px) {
  .app-shell {
    padding-inline: 8px;
  }

  .topbar.glass {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
  }

  .topbar h1 {
    font-size: clamp(24px, 7vw, 34px) !important;
  }

  .top-actions {
    flex-shrink: 0;
    gap: 8px;
  }

  .switch-wrap {
    min-width: auto;
    padding-inline: 10px;
  }

  .switch-wrap > span:last-child {
    display: none;
  }

  #logoutBtn {
    min-width: 62px;
    padding-inline: 12px;
  }

  .layout {
    grid-template-columns: 1fr !important;
  }

  .side-panel {
    order: 1;
  }

  .chat-panel {
    order: 2;
  }

  #animeAssistant.anime-assistant-v18 {
    --assistant-scale-v31: .50;
    right: 2px !important;
    bottom: 96px !important;
    z-index: 38 !important;
  }

  #animeAssistant.anime-assistant-v18 .assistant-actions,
  #animeAssistant.anime-assistant-v18 .assistant-note,
  #animeAssistant.anime-assistant-v18 #mikaBubbleTop {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .topbar .logo-mark {
    width: 48px !important;
    height: 48px !important;
  }

  .brand-row {
    min-width: 0;
  }

  .brand-row h1,
  .topbar h1 {
    white-space: nowrap;
  }

  #animeAssistant.anime-assistant-v18 {
    --assistant-scale-v31: .42;
    right: -14px !important;
    bottom: 86px !important;
    opacity: .96;
  }

  .upload-cat.upload-cat-v18 {
    min-height: 240px !important;
  }

  .upload-cat.upload-cat-v18 .cat-actions {
    right: 8px !important;
    top: 48px !important;
  }

  .upload-cat.upload-cat-v18 .cat-actions button {
    min-width: 64px !important;
    font-size: 10px !important;
    padding: 5px 7px !important;
  }
}

#appPage:not(.hidden) .messages {
  padding-right: clamp(120px, 22vw, 310px) !important;
}

#appPage:not(.hidden) .chat-input-wrap {
  padding-right: clamp(130px, 23vw, 320px) !important;
  position: relative;
  z-index: 70 !important;
}

#messageInput,
#sendBtn {
  position: relative;
  z-index: 95 !important;
}

@media (max-width: 980px) {
  #appPage:not(.hidden) .messages {
    padding-right: 18px !important;
  }

  #appPage:not(.hidden) .chat-input-wrap {
    padding-right: 18px !important;
    grid-template-columns: 1fr clamp(82px, 22vw, 110px) !important;
  }

  #sendBtn {
    min-width: 82px;
  }
}

body:has(#loginPage:not(.hidden)) #loginPage.login-shell {
  padding: clamp(14px, 3vw, 42px) !important;
}

body:has(#loginPage:not(.hidden)) #loginPage .login-card {
  width: min(100%, 1360px) !important;
  min-height: min(720px, calc(100vh - 80px)) !important;
  padding: clamp(26px, 4vw, 54px) clamp(280px, 34vw, 520px) clamp(26px, 4vw, 54px) clamp(26px, 4vw, 52px) !important;
}

body:has(#loginPage:not(.hidden)) #animeAssistant {
  transform: scale(clamp(.56, calc((100vw - 820px) / 900 + .58), .86)) !important;
  transform-origin: right center !important;
  right: clamp(8px, 4vw, 48px) !important;
  top: clamp(86px, 16vh, 122px) !important;
  bottom: auto !important;
}

@media (max-width: 980px) {
  body:has(#loginPage:not(.hidden)) #loginPage .login-card {
    padding: 30px 22px !important;
  }

  body:has(#loginPage:not(.hidden)) #animeAssistant {
    transform: scale(.45) !important;
    right: -12px !important;
    top: auto !important;
    bottom: 96px !important;
  }

  body:has(#loginPage:not(.hidden)) #animeAssistant #mikaBubbleTop,
  body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-note,
  body:has(#loginPage:not(.hidden)) #animeAssistant .assistant-actions {
    display: none !important;
  }
}

@media (max-height: 680px) {
  #animeAssistant.anime-assistant-v18 .assistant-actions,
  #animeAssistant.anime-assistant-v18 .assistant-note {
    display: none !important;
  }

  #animeAssistant.anime-assistant-v18 {
    --assistant-scale-v31: .54;
    bottom: 84px !important;
  }

  .upload-cat.upload-cat-v18 {
    min-height: 232px !important;
  }
}


/* V32: IELTS 官方优先搜索模式标识 */
.chat-hero::after {
  content: "IELTS 官方优先 · Official-first Search";
  position: absolute;
  right: 22px;
  bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(105,235,255,.20);
  background: linear-gradient(135deg, rgba(25, 45, 110, .72), rgba(20, 30, 78, .66));
  color: #dffcff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

@media (max-width: 980px) {
  .chat-hero::after { display: none; }
}


/* V33: 回车发送提示 */
.chat-input-wrap::after {
  content: "Enter发送 · Shift+Enter换行";
  position: absolute;
  left: 30px;
  bottom: 10px;
  color: rgba(222, 244, 255, .54);
  font-size: 12px;
  pointer-events: none;
}
@media (max-width: 980px) {
  .chat-input-wrap::after { display: none; }
}


/* V34: 去掉页面备注/搜索日志展示 */
.chat-hero::after,
.search-box {
  display: none !important;
}

.message-content .search-box {
  display: none !important;
}


/* V37: 回答里的链接可直接点击访问 */
.message-content a.message-link {
  color: #7df5ff;
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(125, 245, 255, .20);
}

.message-content a.message-link:hover {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(125, 245, 255, .48);
}

.links-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.source-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(111, 235, 255, .22);
  background: linear-gradient(135deg, rgba(22, 42, 104, .92), rgba(14, 29, 77, .94));
  color: #eefcff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.source-link-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(135, 245, 255, .42);
  box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 18px rgba(80, 230, 255, .12);
}



/* V40: 登录页精简 + 密码错误本地摄像头校验 */
.login-sub {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 950;
  color: #eefcff;
  text-align: center;
  text-shadow: 0 0 18px rgba(96,244,255,.22);
}

.login-form label {
  font-size: 18px;
  font-weight: 950;
}

.security-panel {
  margin-top: 18px;
}

.security-head strong,
.camera-title strong {
  color: #ffffff;
}

.camera-title span,
.privacy-note,
.camera-status {
  color: rgba(225, 245, 255, .78);
}

.security-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.security-item {
  min-width: 0;
}

.security-item span {
  word-break: break-word;
}

@media (max-width: 760px) {
  .security-info {
    grid-template-columns: 1fr;
  }
}


/* V41: web-key dynamic code jump button */
.webkey-jump {
  margin-top: 18px;
  min-height: 58px;
  border-radius: 24px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #eaffff;
  font-weight: 950;
  letter-spacing: .08em;
  border: 1px solid rgba(149,247,255,.34);
  background:
    linear-gradient(135deg, rgba(47,243,255,.13), rgba(255,158,229,.12)),
    rgba(3, 7, 22, .52);
  box-shadow:
    0 16px 38px rgba(47, 243, 255, .12),
    inset 0 0 24px rgba(255,255,255,.035);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.webkey-jump:hover {
  transform: translateY(-2px);
  border-color: rgba(149,247,255,.7);
  box-shadow:
    0 20px 48px rgba(47, 243, 255, .18),
    0 0 0 4px rgba(47,243,255,.08),
    inset 0 0 24px rgba(255,255,255,.05);
}

.webkey-jump-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #101735;
  font-size: 13px;
  font-weight: 950;
  background: linear-gradient(135deg, #31f1ff, #ff9ee5);
  box-shadow: 0 0 24px rgba(47,243,255,.2);
}

@media (max-width: 720px) {
  .webkey-jump {
    min-height: 54px;
  }
}