* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; background:#f0f2f5; color:#333; }

/* ===== 开屏动画（科技粒子风） ===== */
#splash {
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(160deg,#0a1f4d 0%,#123a7d 45%,#1e5aa8 100%);
  overflow:hidden;
  transition:opacity .7s ease;
}
#splash.hide { opacity:0; pointer-events:none; }
#splash-canvas { position:absolute; inset:0; width:100%; height:100%; }

/* 右下角半圆弧虚线装饰 */
.splash-arc {
  position:absolute; right:-140px; bottom:-140px;
  width:320px; height:320px; border-radius:50%;
  border:2px dashed rgba(160,205,255,0.35);
  box-shadow:0 0 40px rgba(90,170,255,0.2) inset;
  animation:splashArcRotate 14s linear infinite;
}
@keyframes splashArcRotate { from { transform:rotate(0); } to { transform:rotate(360deg); } }

.splash-top {
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; gap:12px;
  padding:22px 24px;
  animation:splashFadeDown .8s ease both;
}
.splash-logo {
  width:42px; height:42px; border-radius:10px;
  background:#fff; object-fit:contain;
  box-shadow:0 2px 10px rgba(0,0,0,0.25);
}
.splash-brand { color:#fff; font-size:19px; font-weight:600; letter-spacing:1px; }

.splash-center {
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-58%);
  display:flex; flex-direction:column; align-items:center;
  padding:0 32px; text-align:center;
}
/* 中央：空心圆角方块 + 内发光圆点（1:1还原参考图） */
.splash-icon {
  width:96px; height:96px; border-radius:22px;
  border:2px solid rgba(140,200,255,0.85);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:34px; position:relative;
  box-shadow:0 0 30px rgba(90,170,255,0.55), inset 0 0 22px rgba(90,170,255,0.35);
  animation:splashGlow 2.2s ease-in-out infinite, splashZoomIn .9s cubic-bezier(.2,.8,.3,1) both;
}
.splash-icon-dot {
  width:14px; height:14px; border-radius:50%;
  background:#cfe6ff;
  box-shadow:0 0 14px 4px rgba(160,210,255,0.9);
  animation:splashDotPulse 1.6s ease-in-out infinite;
}
@keyframes splashDotPulse {
  0%,100% { transform:scale(1); opacity:1; }
  50% { transform:scale(1.35); opacity:.75; }
}
.splash-title {
  color:#fff; font-size:30px; font-weight:700; letter-spacing:1px;
  text-shadow:0 2px 14px rgba(0,0,0,0.35);
  min-height:1.3em;
}
.splash-cursor {
  color:#9fd0ff; font-weight:400;
  animation:splashBlink .8s step-end infinite;
}
@keyframes splashBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }
.splash-desc {
  margin-top:22px; color:rgba(215,232,255,0.85);
  font-size:15px; line-height:1.9; letter-spacing:.5px;
  animation:splashFadeUp 1s .5s ease both;
}

.splash-bottom {
  position:absolute; left:0; right:0; bottom:48px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  animation:splashFadeUp 1s .8s ease both;
}
.splash-progress {
  width:180px; height:3px; border-radius:3px;
  background:rgba(255,255,255,0.18); overflow:hidden;
}
.splash-progress-bar {
  display:block; height:100%; width:0;
  background:linear-gradient(90deg,#6fb6ff,#bfe0ff);
  border-radius:3px;
  animation:splashLoad 2.3s .2s ease forwards;
}
.splash-loading {
  color:rgba(200,225,255,0.85); font-size:13px; letter-spacing:2px;
  animation:splashPulse 1.4s ease-in-out infinite;
}

@keyframes splashFadeDown { from { opacity:0; transform:translateY(-18px); } to { opacity:1; transform:translateY(0); } }
@keyframes splashFadeUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes splashZoomIn { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
@keyframes splashGlow {
  0%,100% { box-shadow:0 0 22px rgba(90,170,255,0.45), inset 0 0 18px rgba(90,170,255,0.3); }
  50% { box-shadow:0 0 46px rgba(120,190,255,0.8), inset 0 0 30px rgba(120,190,255,0.5); }
}
@keyframes splashLoad { from { width:0; } to { width:100%; } }
@keyframes splashPulse { 0%,100% { opacity:.55; } 50% { opacity:1; } }

#chat-app { max-width:480px; margin:0 auto; height:100vh; display:flex; flex-direction:column; background:#f0f2f5; }
.chat-header { background:linear-gradient(135deg,#1a3a6b,#2d6cb5); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 8px rgba(0,0,0,0.15); flex-shrink:0; }
.header-left { display:flex; align-items:center; gap:10px; }
.logo { width:36px; height:36px; border-radius:8px; background:#fff; object-fit:contain; }
.header-info { display:flex; flex-direction:column; }
.brand { color:#fff; font-size:16px; font-weight:600; }
.status { color:rgba(255,255,255,0.75); font-size:12px; }
.transfer-btn { background:rgba(255,255,255,0.2); border:1px solid rgba(255,255,255,0.4); color:#fff; padding:6px 16px; border-radius:20px; font-size:13px; cursor:pointer; }
.transfer-btn:hover { background:rgba(255,255,255,0.35); }

.chat-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.msg-row { display:flex; margin-bottom:4px; }
.msg-ai, .msg-system { justify-content:flex-start; }
.msg-visitor { justify-content:flex-end; }
.bubble { max-width:75%; padding:10px 14px; border-radius:12px; font-size:14px; line-height:1.6; word-break:break-word; white-space:pre-wrap; }
.msg-ai .bubble, .msg-system .bubble { background:#fff; color:#333; border-top-left-radius:4px; }
.msg-visitor .bubble { background:#2d6cb5; color:#fff; border-top-right-radius:4px; }
.msg-system .bubble { background:#fff3cd; color:#856404; font-size:13px; text-align:center; max-width:90%; }
.msg-time { font-size:11px; color:#999; margin-top:4px; }
.msg-visitor .msg-time { text-align:right; }
.bubble img, .bubble video { max-width:100%; border-radius:8px; display:block; }
.bubble audio { max-width:100%; }
.bubble a { color:inherit; text-decoration:underline; }
.bubble.recalled { background:#f5f5f5 !important; color:#999; font-size:12px; text-align:center; }

.chat-footer { flex-shrink:0; background:#fff; border-top:1px solid #e0e0e0; padding:8px 12px 4px; }
.footer-tools { display:flex; gap:12px; margin-bottom:8px; }
.tool-btn { cursor:pointer; color:#666; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:6px; }
.tool-btn:hover { background:#f0f0f0; }
.input-row { display:flex; gap:8px; align-items:center; }
#msg-input { flex:1; border:1px solid #ddd; border-radius:20px; padding:8px 16px; font-size:14px; outline:none; }
#msg-input:focus { border-color:#2d6cb5; }
.send-btn { background:#2d6cb5; color:#fff; border:none; padding:8px 20px; border-radius:20px; font-size:14px; cursor:pointer; }
.send-btn:hover { background:#1a5a9e; }
.footer-brand { text-align:center; padding:6px 0 2px; font-size:11px; color:#999; }
.brand-link { text-decoration:underline !important; text-underline-offset:2px; }

.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:100; }
.modal-box { position:fixed; inset:5% 5% auto 5%; height:85vh; background:#fff; border-radius:12px; z-index:101; display:flex; flex-direction:column; overflow:hidden; }
.modal-header { padding:12px 16px; background:#f5f5f5; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e0e0e0; }
.modal-close { background:none; border:none; font-size:24px; cursor:pointer; color:#666; }
#link-frame { flex:1; border:none; width:100%; }

.chat-body::-webkit-scrollbar { width:4px; }
.chat-body::-webkit-scrollbar-thumb { background:#ccc; border-radius:2px; }

/* 手机端适配 */
@media (max-width: 500px) {
  #chat-app { max-width:100vw; }
  .bubble { max-width:85%; font-size:13px; padding:8px 12px; }
  .chat-body { padding:10px; gap:8px; }
  .footer-tools { gap:8px; }
  .tool-btn { width:28px; height:28px; }
  .modal-box { inset:2% 2% auto 2%; height:92vh; }
}