/* 万核基因在线客服 · 微信风样式 */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #f4f6f9;
  color: #0f172a;
  font-size: 14.5px;
  line-height: 1.6;
  overflow: hidden;
}

.ch-page{
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 24px rgba(15,23,42,0.05);
}

/* ════ Header ════ */
.ch-header{
  background: linear-gradient(135deg, #1976D2 0%, #00ACC1 100%);
  color: #fff;
  padding: 14px 20px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ch-header-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ch-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
}
.ch-dot{
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(74,222,128,0.25);
  animation: pulse 2s ease infinite;
}
@keyframes pulse{
  0%,100%{ opacity: 1; }
  50%{ opacity: 0.5; }
}
.ch-status{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  opacity: 0.9;
}

/* ════ 消息区 ════ */
.ch-body{
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f7fafc;
}
.ch-msgs{
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 8px;
}

.ch-msg{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: fadeIn .25s ease;
}
@keyframes fadeIn{ from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ch-avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
}
.ch-avatar-bot{
  background: linear-gradient(135deg, #1976D2, #00ACC1);
}
.ch-avatar-user{
  background: linear-gradient(135deg, #DC2626, #f97316);
}

.ch-bubble{
  background: #fff;
  border-radius: 14px;
  padding: 11px 14px;
  max-width: 75%;
  box-shadow: 0 1px 4px rgba(15,23,42,0.05);
  border: 1px solid #e2e8f0;
  position: relative;
}
.ch-msg-user .ch-bubble{
  background: linear-gradient(135deg, #DC2626, #ef4444);
  color: #fff;
  border-color: transparent;
}

.ch-msg-user{
  flex-direction: row-reverse;
}
.ch-msg-user .ch-bubble{
  border-radius: 14px 4px 14px 14px;
}
.ch-msg-bot .ch-bubble{
  border-radius: 4px 14px 14px 14px;
}

.ch-name{
  font-size: 11px;
  color: #64748b;
  margin-bottom: 2px;
  font-weight: 600;
}
.ch-msg-user .ch-name{ display: none; }

.ch-text{
  font-size: 14.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.ch-text strong{ font-weight: 700; }
.ch-text a{ 
  color: #1976D2;
  text-decoration: underline;
}
.ch-msg-user .ch-text a{
  color: #fff;
  text-decoration: underline;
}

/* AI 流式光标 */
.ch-cursor{
  display: inline-block;
  width: 7px;
  height: 14px;
  background: #1976D2;
  margin-left: 2px;
  animation: blink 0.8s infinite;
  vertical-align: text-bottom;
}
@keyframes blink{ 50% { opacity: 0; } }

/* 快捷问题 */
.ch-quick{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ch-quick-btn{
  padding: 5px 11px;
  font-size: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  cursor: pointer;
  color: #475569;
  transition: all .2s;
  font-family: inherit;
}
.ch-quick-btn:hover{
  background: #1976D2;
  color: #fff;
  border-color: transparent;
}

/* ════ 输入区 ════ */
.ch-footer{
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 10px 16px;
}
.ch-input-wrap{
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.ch-input-wrap textarea{
  flex: 1;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  padding: 10px 16px;
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  resize: none;
  max-height: 120px;
  line-height: 1.5;
  transition: border-color .2s;
  background: #f7fafc;
}
.ch-input-wrap textarea:focus{
  border-color: #1976D2;
  background: #fff;
}
.ch-send{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #1976D2, #00ACC1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(25,118,210,0.3);
}
.ch-send:hover:not(:disabled){
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(25,118,210,0.4);
}
.ch-send:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}
.ch-tip{
  text-align: center;
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 6px;
}
.ch-tip a{
  color: #1976D2;
  text-decoration: none;
  font-weight: 600;
}

/* ════ 联系方式 modal ════ */
.ch-modal{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 999;
  justify-content: center;
  align-items: center;
}
.ch-modal.show{ display: flex; }
.ch-modal-inner{
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 380px;
  overflow: hidden;
  animation: zoomIn .25s ease;
}
@keyframes zoomIn{ from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ch-modal-head{
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ch-modal-head h3{ font-size: 15px; }
.ch-modal-close{
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #94a3b8;
  width: 24px;
  height: 24px;
}
.ch-modal-body{ padding: 16px 18px; }
.ch-modal-tip{
  font-size: 13px;
  color: #64748b;
  margin-bottom: 10px;
}
.ch-form{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ch-form input{
  padding: 9px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.ch-form input:focus{
  border-color: #1976D2;
}
.ch-modal-foot{
  padding: 0 18px 18px;
}
.ch-btn-primary{
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #1976D2, #00ACC1);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

/* 移动端 */
@media (max-width: 640px){
  .ch-header{ padding: 12px 14px; }
  .ch-body{ padding: 12px; }
  .ch-bubble{ max-width: 80%; padding: 10px 12px; }
  .ch-text{ font-size: 14px; }
  .ch-footer{ padding: 8px 12px; }
}