* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  background: #f2f3f5;
  color: #1f2329;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 顶部标题栏 48px 固定 */
.chat-header {
  position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1f6feb 0%, #2f9e44 100%);
  color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* 消息区：默认底部为输入栏 56px + 快捷问题栏 46px */
.chat-body {
  position: fixed; top: 48px; bottom: 104px; left: 0; right: 0;
  overflow-y: auto; padding: 14px 12px 6px;
  -webkit-overflow-scrolling: touch;
  transition: bottom .2s ease;
}
.msg-row { display: flex; flex-direction: column; margin-bottom: 12px; max-width: 78%; }
.msg-row.left  { align-items: flex-start; }
.msg-row.right { align-items: flex-end; margin-left: auto; }
.bubble {
  padding: 10px 13px; border-radius: 12px; font-size: 15px; line-height: 1.55;
  word-break: break-word; white-space: pre-wrap;
}
.msg-row.left .bubble  { background: #fff; color: #1f2329; border-top-left-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.msg-row.right .bubble { background: #1f6feb; color: #fff; border-top-right-radius: 3px; }
.msg-time { font-size: 11px; color: #a8abb2; margin-top: 4px; }

/* 系统提示消息（居中灰条） */
.msg-row.system { max-width: 90%; margin-left: auto; margin-right: auto; }
.msg-row.system .bubble { background: #e8eaed; color: #6b7076; font-size: 12px; text-align: center; border-radius: 10px; }

/* 快捷问题区：紧凑单行、可横向滑动、可收起 */
.quick-area {
  position: fixed; left: 0; right: 0; bottom: 56px; z-index: 15;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 12px;
  background: #f2f3f5;
  border-top: 1px solid #e5e6eb;
}
.quick-area[hidden] { display: none; }
.quick-scroll {
  flex: 1; min-width: 0;
  display: flex; gap: 8px; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.quick-scroll::-webkit-scrollbar { display: none; }
.quick-btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid #c9cdd4; border-radius: 17px;
  background: #fff; color: #333; font-size: 13px;
  white-space: nowrap; cursor: pointer;
}
.quick-btn:active { background: #eef3ff; border-color: #1f6feb; color: #1f6feb; }
.quick-toggle {
  flex: 0 0 auto; width: 28px; height: 28px;
  border: none; border-radius: 50%;
  background: #e3e5e8; color: #5b6069;
  font-size: 16px; line-height: 1; cursor: pointer;
}
.quick-toggle:active { background: #d0d3d8; }

/* 收起快捷问题后：消息区与两个操作按钮下移，让出完整聊天空间 */
body.quick-hidden .quick-area { display: none; }
body.quick-hidden .chat-body { bottom: 68px; }
body.quick-hidden .transfer-btn { bottom: 66px; }
body.quick-hidden .end-btn { bottom: 66px; }

/* 收起后，点击可重新展开的小按钮（左下角、输入栏上方） */
.quick-reopen {
  position: fixed; left: 12px; bottom: 66px; z-index: 25;
  height: 34px; padding: 0 14px; border-radius: 17px;
  border: 1px solid #c9cdd4; background: #fff; color: #1f6feb;
  font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.quick-reopen[hidden] { display: none; }
.quick-reopen:active { background: #eef3ff; }

/* 底部输入区 */
.chat-inputbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 56px;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: #fff; border-top: 1px solid #e5e6eb;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
.chat-inputbar input {
  flex: 1; height: 38px; border: 1px solid #c9cdd4; border-radius: 19px;
  padding: 0 14px; font-size: 15px; outline: none; background: #f7f8fa;
}
.chat-inputbar input:focus { border-color: #1f6feb; background: #fff; }
.chat-inputbar button {
  height: 38px; padding: 0 18px; border: none; border-radius: 19px;
  background: #1f6feb; color: #fff; font-size: 15px; cursor: pointer;
}
.chat-inputbar button:active { opacity: .85; }

/* 右下角固定「转人工」红色边框 */
.transfer-btn {
  position: fixed; right: 14px; bottom: 128px; z-index: 25;
  height: 40px; padding: 0 16px; border-radius: 20px;
  border: 1.5px solid #e5484d; background: #fff; color: #e5484d;
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(229,72,77,.25);
  transition: bottom .2s ease;
}
.transfer-btn:active { background: #fdecec; }
.transfer-btn.done { border-color: #c9cdd4; color: #a8abb2; background: #f2f3f5; box-shadow: none; }

/* 左下角固定「结束服务」 */
.end-btn {
  position: fixed; left: 14px; bottom: 128px; z-index: 25;
  height: 40px; padding: 0 16px; border-radius: 20px;
  border: 1.5px solid #2f9e44; background: #fff; color: #2f9e44;
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 2px 8px rgba(47,158,68,.22);
  transition: bottom .2s ease;
}
.end-btn:active { background: #e9f7ec; }
.end-btn:disabled { border-color: #c9cdd4; color: #a8abb2; background: #f2f3f5; box-shadow: none; cursor: not-allowed; }