:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;color:#454c54;background:#eef1f4;font-synthesis:none;--blue:#0D9488;--muted:#92989f;--border:#eceef1;letter-spacing:0}
.embed-mode .chat{padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}
.embed-mode .modal-backdrop{top:calc(78px + env(safe-area-inset-top));right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left)}
*{box-sizing:border-box}body{margin:0;min-width:280px}button,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button,textarea{outline:none}button:focus-visible{outline:2px solid #0964d5;outline-offset:3px}textarea:focus-visible{outline:1px solid #a7cdff}button{touch-action:manipulation}button svg{pointer-events:none;flex-shrink:0}svg{stroke-width:1.7}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.chat{height:100vh;height:100dvh;min-height:340px;width:100%;max-width:438px;margin:0 auto;background:#fff;position:relative;display:flex;flex-direction:column;overflow:hidden;border-left:1px solid #e5e8ec;border-right:1px solid #e5e8ec}.chat-header{height:78px;min-height:78px;background:var(--blue);display:flex;align-items:center;padding:10px 11px;color:white;gap:10px}.agent-avatar{width:50px;height:50px;object-fit:cover;border-radius:50%;background:#fff;border:2px solid rgba(255,255,255,.5)}.agent-heading{flex:1;min-width:0;overflow:hidden}.agent-heading h1{font-size:18px;font-weight:500;margin:0 0 4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:1.4}.agent-heading p{font-size:11px;line-height:1.25;margin:0;color:#eaf4ff;display:flex;align-items:flex-start;gap:5px;overflow:hidden}.agent-heading #agent-status{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere}.online-dot{width:6px;height:6px;background:#9bffcf;border-radius:50%;display:inline-block;flex:0 0 6px;margin-top:4px}.online-dot.away{background:#ffd178}.header-button{display:flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:36px;background:transparent;border:0;color:#fff;padding:5px;border-radius:4px}.header-button:hover{background:rgba(255,255,255,.16)}.header-button svg{width:22px;height:22px}.connection-notice{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.5;padding:8px 12px;background:#fff7e6;color:#9a6c23;flex-shrink:0}.connection-notice svg{width:15px;height:15px;flex-shrink:0}.connection-notice span{flex:1}.connection-notice button{border:0;background:transparent;color:#9a6c23;text-decoration:underline;font-size:11px;white-space:nowrap}
.message-list{flex:1;min-height:0;overflow-y:auto;padding:22px 16px 8px;scrollbar-width:thin;scrollbar-color:#d8dce1 transparent;overscroll-behavior:contain;background:#fafbfc}.message-list::-webkit-scrollbar{width:5px}.message-list::-webkit-scrollbar-thumb{background:#d8dce1;border-radius:3px}.day-divider{text-align:center;color:#a0a5ab;font-size:11px;margin:1px 0 21px;line-height:1.5}.message-row{display:flex;gap:8px;margin:0 0 20px;align-items:flex-start}.message-row.visitor{justify-content:flex-end}.message-avatar{width:30px;height:30px;flex-shrink:0;object-fit:cover;background:white;border:1px solid #e7edf3;border-radius:50%;margin-top:3px}.message-content{max-width:calc(100% - 42px);min-width:0}.message-label{font-size:11px;color:#a0a5ab;margin:0 0 5px}.message-label time{margin-left:7px}.visitor .message-label{text-align:right}.bubble{position:relative;background:#fff;border:1px solid #e7e9ed;padding:11px 13px;line-height:1.65;font-size:14px;border-radius:4px;word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap;max-width:300px;min-width:32px}.visitor .bubble{background:#e6f7f5;border-color:#b2ece4;color:#134e4a}.bubble a{color:#1677e8}.bubble-image{display:block;border:0;padding:0;background:transparent;max-width:100%;margin:0 auto}.bubble-image img{display:block;width:auto;max-width:100%;max-height:220px;object-fit:contain;border-radius:2px}.attachment-link{display:flex;gap:10px;align-items:center;text-decoration:none;color:#454c54!important;white-space:normal}.attachment-link svg{width:28px;height:32px;color:#1880ff;flex-shrink:0}.attachment-link strong{font-weight:400;font-size:13px;display:block;word-break:break-all}.attachment-link small{font-size:11px;color:#939ba5;display:block;margin-top:2px}.attachment-with-text{margin-bottom:8px}.message-delivery{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:10px;color:#a0a5ab;margin-top:4px;height:15px}.message-delivery svg{width:11px;height:11px}.message-delivery.failed{color:#db6868}.message-delivery button{background:none;border:0;color:#d25c5c;padding:0 0 0 5px;font-size:11px}.system-message{color:#999fa7;font-size:12px;text-align:center;margin:4px 0 20px;line-height:1.7;white-space:pre-wrap;word-break:break-word}.rating-system strong{font-weight:400;color:#05c78b;margin-left:4px}.initial-loading{display:flex;gap:5px;justify-content:center;padding:40px}.initial-loading span{width:5px;height:5px;background:#b2c6e1;border-radius:50%;animation:pulse 1.3s infinite}.initial-loading span:nth-child(2){animation-delay:.15s}.initial-loading span:nth-child(3){animation-delay:.3s}@keyframes pulse{0%,70%,100%{opacity:.3}35%{opacity:1}}
.composer{position:relative;flex-shrink:0;border-top:1px solid #e8ebef;padding:10px 12px 7px;background:#fff}.composer>textarea{display:block;border:0;background:transparent;resize:none;min-height:58px;max-height:110px;width:100%;font-size:14px;color:#454c54;line-height:1.5;padding:0 1px 5px;outline:none}.composer>textarea::placeholder{color:#a3a8ae}.composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.composer-tools{display:flex;gap:6px;align-items:center}.icon-button{display:flex;width:32px;height:32px;align-items:center;justify-content:center;border:0;border-radius:4px;background:transparent;color:#888f96;padding:4px}.icon-button svg{width:22px;height:22px}.icon-button:hover{color:var(--blue);background:#f0fdfa}.send-button{background:var(--blue);color:#fff;border:0;border-radius:3px;width:68px;height:33px;font-size:14px}.send-button:hover:not(:disabled){filter:brightness(.95)}.send-button:disabled{background:#99f6e4;color:#115e59}.attachment-preview{display:flex;align-items:center;gap:9px;background:#f2f7fc;border:1px solid #e4edf6;padding:6px 8px;margin:0 0 9px;max-height:64px;border-radius:4px}.attachment-preview>img{height:42px;width:42px;object-fit:cover;border-radius:2px}.attachment-preview>svg{width:30px;height:30px;color:var(--blue)}.attachment-preview>span{font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-preview small{display:block;font-size:10px;color:#929aa4;margin-top:3px}.attachment-preview .icon-button{flex-shrink:0}.emoji-picker{position:absolute;left:12px;bottom:49px;width:min(268px,calc(100% - 24px));max-height:min(180px,calc(100vh - 120px));overflow-y:auto;display:grid;grid-template-columns:repeat(7,1fr);padding:8px;background:#fff;border:1px solid #e4e9ef;border-radius:5px;box-shadow:0 4px 22px rgba(37,58,85,.12);z-index:6}.emoji-picker button{font-size:23px;border:0;width:35px;height:36px;display:flex;justify-content:center;align-items:center;background:#fff;border-radius:3px}.emoji-picker button:hover{background:#f0f5fc}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:1px}.panel-heading h2{font-size:14px;font-weight:500;margin:0;color:#454c54}.panel-heading .icon-button{height:28px;width:28px}.panel-heading .icon-button svg{height:17px;width:17px}
.modal-backdrop{position:absolute;inset:78px 0 0;background:rgba(0,0,0,.33);z-index:10;overflow-y:auto;overscroll-behavior:contain}.rating-dialog{background:#fff;padding:12px 25px 24px;outline:none}.rating-heading{position:relative;text-align:center;min-height:39px;padding:0 13px 4px;display:flex;align-items:center;justify-content:center}.rating-heading h2{font-size:17px;color:#777;font-weight:400;line-height:1.4;margin:0}.rating-heading .icon-button{position:absolute;right:-18px;top:-2px;color:#c3c3c3}.rating-heading .icon-button svg{width:22px;height:22px}.rating-options{display:flex;justify-content:center;gap:15px;margin:1px 0 13px}.rating-option{border:0;background:transparent;border-radius:3px;height:111px;width:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:10px;color:#777;font-size:17px}.rating-option svg{width:49px;height:49px;stroke-width:1.4}.rating-option.positive svg{color:#05ce8c}.rating-option.neutral svg{color:#ffb444}.rating-option.negative svg{color:#ff5868}.rating-option.selected{background:#f0f0f0}.rating-option.positive.selected{color:#05ce8c}.rating-option.neutral.selected{color:#ffb444}.rating-option.negative.selected{color:#ff5868}.rating-dialog>textarea{display:block;width:100%;height:81px;border:1px solid #ececec;resize:none;padding:12px 14px;font-size:15px;line-height:1.5;border-radius:0;color:#666;margin:0 0 14px}.rating-dialog>textarea::placeholder{color:#9a9a9a}.rating-submit{height:47px;width:100%;background:var(--blue);color:#fff;border:0;border-radius:3px;font-size:16px}.rating-submit:disabled{opacity:.6}.toast{position:absolute;z-index:30;bottom:170px;left:50%;transform:translateX(-50%);background:rgba(44,52,62,.94);color:#fff;padding:10px 16px;font-size:12px;line-height:1.5;border-radius:4px;max-width:calc(100% - 36px);width:max-content;text-align:center;word-break:break-word}.reopen-button{position:fixed;right:28px;bottom:28px;display:flex;align-items:center;gap:10px;background:var(--blue);color:#fff;padding:9px 14px 9px 9px;border:0;border-radius:6px;box-shadow:0 3px 16px rgba(13,148,136,.28);font-size:14px}.reopen-button>img{width:34px;height:34px;object-fit:cover;border-radius:50%;background:#fff}.reopen-button svg{width:18px;height:18px}.reopen-button #collapsed-unread{background:#ff6068;border:2px solid #fff;border-radius:50%;width:11px;height:11px;position:absolute;left:36px;top:5px}.image-backdrop{position:absolute;inset:0;background:rgba(19,24,31,.92);z-index:25;display:flex;align-items:center;justify-content:center;padding:calc(48px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}.image-backdrop>img{max-width:100%;max-height:100%;object-fit:contain}.image-close{position:absolute;right:calc(10px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:#fff;height:34px;width:34px}.image-close svg{width:25px;height:25px}
@media(max-width:480px){body{background:white}.chat{border:0;max-width:none}.reopen-button{right:18px;bottom:18px}.message-list{padding-left:14px;padding-right:14px}.composer{padding-bottom:8px}}@media(max-width:400px){.agent-avatar{display:none}.chat-header{gap:7px}}@media(max-width:330px){.agent-heading h1{font-size:16px}.header-button{flex-basis:29px;width:29px}.composer-tools{gap:3px}.rating-dialog{padding-left:15px;padding-right:15px}.rating-options{gap:8px}.rating-option{width:72px}.rating-heading h2{font-size:15px}.rating-heading .icon-button{right:-10px}}@media(max-height:440px){.rating-dialog{padding-top:8px;padding-bottom:14px}.rating-options{margin-bottom:8px}.rating-option{height:84px}.rating-option svg{width:38px;height:38px}.rating-dialog>textarea{height:62px;margin-bottom:9px}.rating-submit{height:42px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
.embed-mode{background:transparent;min-width:0;overflow:hidden}.embed-mode .chat{height:100vh;height:100dvh;min-height:0;max-width:none;margin:0;border:0;border-radius:8px;box-shadow:0 12px 38px rgba(19,44,74,.2)}.embed-mode .reopen-button{display:none!important}
.bubble-video{display:block;width:100%;max-width:260px;border-radius:4px;background:#000}
.message-attachment video{width:100%;max-width:260px;border-radius:4px;display:block}
.queue-banner{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:#0f766e;background:#f0fdfa;border-bottom:1px solid #ccfbf1;padding:7px 12px}
.queue-banner:empty{display:none}
.language-select{flex:0 0 96px;width:96px;height:30px;border:1px solid rgba(255,255,255,.48);border-radius:4px;background:rgba(0,0,0,.08);color:#fff;padding:0 4px;font-size:11px;line-height:30px}.language-select option{background:#fff;color:#39424c}.language-select:hover{background:rgba(255,255,255,.13)}.language-select:focus-visible{outline:2px solid #fff;outline-offset:2px}@media(max-width:360px){.language-select{flex-basis:94px;width:94px}}
@media(max-width:480px){.embed-mode .chat{border-radius:0}}
.typing-bubble{position:relative;flex-shrink:0;display:flex;align-items:center;gap:5px;padding:9px 14px;margin:0 16px 10px;width:max-content;background:#fff;border:1px solid #e7e9ed;border-radius:16px}.typing-bubble span{width:7px;height:7px;border-radius:50%;background:#a4adbe;animation:typing-dot 1.2s ease-in-out infinite}.typing-bubble span:nth-child(2){animation-delay:.2s}.typing-bubble span:nth-child(3){animation-delay:.4s}.typing-bubble[hidden]{display:none}@keyframes typing-dot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}.bubble-quote{border-left:3px solid #99f6e4;background:#f0fdfa;border-radius:3px;padding:5px 8px;margin-bottom:6px;font-size:11px;color:#115e59}.bubble-quote .bubble-quote-name{display:block;color:#0d9488;font-weight:600;margin-bottom:1px}.bubble-quote .bubble-quote-text{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.chat-watermark {
  flex-shrink: 0 !important;
  text-align: center;
  padding: 6px 0;
  font-size: 11px;
  color: #94a3b8;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  user-select: none;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 5;
}
.chat-watermark a {
  color: #0D9488 !important;
  text-decoration: none !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.chat-watermark a:hover {
  text-decoration: underline !important;
}

/* --- 快捷常见问题引导 --- */
.faq-chips-container {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 8px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #f1f5f9;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.faq-chips-container::-webkit-scrollbar {
  display: none;
}
.faq-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  color: #334155;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: all 0.15s ease-in-out;
}
.faq-chip:hover {
  background: #f0fdfa;
  border-color: #0d9488;
  color: #0d9488;
  transform: translateY(-1px);
}
.faq-chip:active {
  transform: translateY(0);
}

/* --- 留资名片模态框 --- */
.profile-dialog {
  max-width: 380px;
  width: 90%;
  margin: 40px auto 0;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.profile-tip {
  font-size: 12px;
  color: #64748b;
  margin: 4px 0 14px;
  line-height: 1.5;
}
.profile-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 4px;
}
.profile-form input,
.profile-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 12px;
  box-sizing: border-box;
  font-family: inherit;
}
.profile-form input:focus,
.profile-form textarea:focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.15);
}
.profile-form textarea {
  height: 64px;
  resize: none;
}