* { 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(135deg,#1a3a6b 0%,#2d6cb5 50%,#4a9fd8 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity .6s;
}
#splash.hide { opacity:0; pointer-events:none; }
.cube-wrap { width:120px; height:120px; perspective:600px; margin-bottom:30px; }
.cube { width:100%; height:100%; position:relative; transform-style:preserve-3d; animation:cubeSpin 3s linear infinite; }
.cube-face {
  position:absolute; width:120px; height:120px;
  background:rgba(255,255,255,0.15);
  border:2px solid rgba(255,255,255,0.6);
}
.cube-face.front  { transform:translateZ(60px); }
.cube-face.back   { transform:rotateY(180deg) translateZ(60px); }
.cube-face.right  { transform:rotateY(90deg) translateZ(60px); }
.cube-face.left   { transform:rotateY(-90deg) translateZ(60px); }
.cube-face.top    { transform:rotateX(90deg) translateZ(60px); }
.cube-face.bottom { transform:rotateX(-90deg) translateZ(60px); }
@keyframes cubeSpin { 0% { transform:rotateX(0) rotateY(0); } 100% { transform:rotateX(360deg) rotateY(360deg); } }
.splash-text { color:rgba(255,255,255,0.9); font-size:16px; letter-spacing:2px; animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:0.6; } 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; }
}