/* 顾客侧页面（聊天页、预约页）：对照 docs/design/customer-chat。
   颜色全部来自 theme.css，店铺色通过 <html style> 注入的 --accent / --accent-soft。 */
.customer-body{min-height:100vh;min-height:100dvh;background:radial-gradient(420px 260px at 90% 0%,#DCE7FF 0%,rgba(220,231,255,0) 70%),radial-gradient(360px 240px at 0% 8%,#DDF5F1 0%,rgba(221,245,241,0) 70%),var(--bg);background-attachment:fixed}

/* —— 店铺卡片（两页共用） —— */
.shop-header{display:block;padding:16px 16px 12px;font-size:15px;font-weight:400;letter-spacing:0}
.shop-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.shop-card .brand-mark,.shop-avatar{display:flex;align-items:center;justify-content:center;width:46px;height:46px;flex:none;border:0;border-radius:14px;background:var(--accent);color:#fff;font-size:20px;font-weight:900;line-height:1}
.shop-card-text{flex:1;min-width:0}
.shop-card-name{display:block;font-size:17px;font-weight:900;line-height:1.35;overflow-wrap:anywhere}
.shop-card-name .brand-sub{margin-left:8px;font-size:12px;font-weight:500;letter-spacing:0;color:var(--muted)}
.shop-card-status{display:block;margin-top:3px;font-size:12px;line-height:1.5;color:var(--muted)}
.shop-card-status .status-dot{margin-right:6px;vertical-align:1px}
.shop-status-label{margin-right:8px}
.customer-chat .shop-status-label{margin-right:0}
.shop-card-actions,.chat-header-actions{display:flex;align-items:center;gap:6px;margin-left:0;flex:none}
.shop-card-action{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:14px;background:var(--accent-soft);color:var(--accent);text-decoration:none}
.shop-card-action:hover{color:var(--accent);filter:brightness(.97)}
.shop-card-action svg{width:20px;height:20px}
.chat-new-conversation{min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink-2);font-size:13px}
.chat-new-conversation:hover,.chat-new-conversation:focus-visible{border-color:var(--line-strong);background:var(--surface-2)}
.quick-asks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.quick-ask{min-height:44px;padding:0 8px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.85);color:var(--ink-2);font-size:13px;font-weight:500;cursor:pointer}
.quick-ask:hover{border-color:var(--accent);color:var(--accent)}
.quick-ask:disabled{opacity:.55;cursor:default}

/* —— 聊天页布局 —— */
.chat-page.customer-chat{max-width:560px;padding:0;gap:0}
.customer-chat .chat-log{padding:8px 16px 12px;gap:12px}
.customer-chat .chat-log-wrap{min-height:0}
.customer-chat .chat-new-messages{right:16px;min-height:40px;border-color:var(--accent);color:var(--accent);background:var(--surface);box-shadow:var(--shadow)}

/* 消息：AI 带小头像，顾客用店铺色 */
.customer-chat .bubble{max-width:82%;padding:10px 13px;font-size:15px;line-height:1.6;border-radius:16px}
.customer-chat .bubble.assistant,.customer-chat .bubble.staff{position:relative;margin-left:36px;border-radius:4px 16px 16px 16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);max-width:calc(88% - 36px)}
.customer-chat .bubble.assistant::before,.customer-chat .bubble.staff::before{content:"AI";position:absolute;left:-36px;top:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;line-height:1;white-space:normal}
.customer-chat .bubble.staff{background:var(--warning-soft);border-color:var(--warning-line);color:var(--ink)}
.customer-chat .bubble.staff::before{content:"店";background:var(--warning)}
.customer-chat .bubble.staff .staff-name{color:var(--warning)}
.customer-chat .bubble.user{background:var(--accent);color:#fff;border:0;border-radius:16px 4px 16px 16px;max-width:78%}
.customer-chat .bubble.waiting{color:var(--muted)}
.customer-chat .bubble.error{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
.customer-chat .bubble.support-system{border-color:var(--line)}
.customer-chat .bubble.support-receipt{margin-left:36px;padding:2px 4px;border:0;background:transparent;box-shadow:none;color:var(--muted);font-size:12px}
.customer-chat .bubble.support-receipt::before{content:none}
.customer-chat .fallback-link{color:var(--accent)}

/* 确认卡片：票据样式。顶部色条显示类型和到店时间，下方为可编辑明细。 */
.customer-chat .confirm-card{display:flex;flex-direction:column;margin-left:36px;padding:0;border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-lg);opacity:1}
.customer-chat .confirm-card .card-title,.customer-chat .confirm-card .card-preview{background:var(--accent);background:linear-gradient(135deg,var(--accent) 55%,color-mix(in srgb,var(--accent) 72%,#12A6C4))}
.customer-chat .confirm-card .card-title{order:0;margin:0;padding:12px 16px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.5px}
.customer-chat .confirm-card .card-preview{order:1;margin:-6px 0 0;padding:0 16px 14px;color:#fff;font-size:19px;font-weight:900;line-height:1.4;overflow-wrap:anywhere}
.customer-chat .confirm-card .card-body{order:2;gap:10px;padding:14px 16px 4px}
.customer-chat .confirm-card .card-summary{background:var(--accent-soft);color:var(--ink);font-size:14px}
.customer-chat .confirm-card .card-body>p{margin:0;font-size:14px}
.customer-chat .card-field{font-size:12px;color:var(--muted)}
.customer-chat .card-field span{margin-bottom:4px;font-weight:500}
.customer-chat .card-field input,.customer-chat .card-field select{min-height:44px;border-radius:10px;background:var(--surface-2);font-size:16px}
.customer-chat .confirm-card .card-button{order:3;width:auto;margin:12px 16px 14px;min-height:46px;border-radius:12px;background:var(--ink);font-size:15px;font-weight:700;letter-spacing:0}
.customer-chat .confirm-card .card-outcome{order:4;margin:0 16px 14px;background:var(--success-soft);color:var(--success)}
.customer-chat .confirm-card .card-outcome.error{background:var(--danger-soft);color:var(--danger)}
.customer-chat .confirm-card .available-times{order:5;margin:0;padding:0 16px 14px}
.customer-chat .confirm-card .card-history-hint{order:6;margin:0;padding:0 16px 14px}
.customer-chat .confirm-card .arrangement-notice{margin-top:2px}
.customer-chat .confirm-card.expired .card-title,.customer-chat .confirm-card.done .card-title{background:var(--line-soft);color:var(--muted)}
.customer-chat .confirm-card.expired .card-body,.customer-chat .confirm-card.done .card-body{padding-bottom:12px}

/* 可约时间按钮（后端返回的结构化推荐时间） */
.available-times{gap:6px;color:var(--muted)}
.available-times>span{flex-basis:100%}
.available-times button{min-width:72px;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-weight:700}
.available-times button:hover,.available-times button:focus-visible{background:var(--accent);color:#fff}

/* 系统提示：居中小字 */
.customer-chat .chat-system-notice{color:var(--muted);font-size:12px}
.customer-chat .chat-delivery-state{padding:2px 16px;color:var(--muted);font-size:12px}

/* 底部输入栏 */
.customer-footer{flex-shrink:0;padding:10px 16px 12px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:rgba(255,255,255,.94);border-top:1px solid var(--line)}
.customer-chat .chat-input{align-items:flex-end;gap:8px;padding:0;border:0}
.customer-chat .chat-input textarea{min-height:46px;padding:11px 16px;border-radius:23px;border:1px solid var(--line);background:var(--bg);font-size:16px;line-height:1.5}
.customer-chat .send-button{position:relative;width:46px;height:46px;border-radius:50%;background:var(--accent);color:transparent;font-size:0;box-shadow:0 6px 16px rgba(15,26,46,.18)}
.customer-chat .send-button::before{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.customer-chat .chat-foot{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.6}
.customer-chat .chat-foot a{color:var(--accent)}
/* 演示店横幅：在文档流里占一行（窄屏可换行），不遮挡下面的内容 */
.demo-banner{flex-shrink:0;margin:0 0 10px;padding:6px 12px;border-radius:10px;background:var(--accent-soft);color:var(--ink);font-size:12px;line-height:1.6;text-align:center;overflow-wrap:anywhere}
.demo-banner a{color:var(--accent);font-weight:600;white-space:nowrap}
.page-footer.powered a{color:inherit}
.customer-chat>.empty-state{margin:16px;background:var(--surface);border:1px solid var(--line);border-radius:20px}

@media(max-width:440px){
  .chat-page.customer-chat{padding:0}
  .demo-banner{margin:0;border-radius:0}
  .customer-chat .bubble.assistant,.customer-chat .bubble.staff{max-width:calc(92% - 36px)}
  .customer-chat .bubble.user{max-width:84%}
  .shop-header{padding:12px 12px 10px}
  .shop-card{padding:10px 12px;gap:10px}
  .shop-card .brand-mark{width:42px;height:42px;font-size:18px}
  .customer-chat .chat-log{padding:8px 12px 12px}
  .customer-footer{padding-left:12px;padding-right:12px}
  .customer-chat .confirm-card{margin-left:0}
}
@media(min-width:720px){
  .chat-page.customer-chat{padding:0 0 4px}
}

/* —— 预约页：沿用聊天页的店铺卡片、店铺色与卡片表单 —— */
.booking-page.customer-booking{max-width:560px;padding:0 0 28px}
.customer-booking .intro{margin:4px 16px 0;padding:20px 20px 18px;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);overflow:hidden}
.customer-booking .eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:1px;color:var(--muted)}
.customer-booking h1{font-size:28px;line-height:1.35;font-weight:900;letter-spacing:.5px}
.customer-booking .intro-note{margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.customer-booking .brand-note{display:block;margin:6px 0 0;font-size:12px;letter-spacing:0;color:var(--muted)}
.customer-booking .scissors{display:none}
.customer-booking .chat-entry{gap:12px;min-height:60px;margin-top:16px;padding:12px 14px;border:0;border-radius:14px;background:var(--accent-soft);color:var(--ink)}
.customer-booking .chat-entry:hover{filter:brightness(.98)}
/* style.css 的 .chat-entry span 会把图标染成灰色，这里提高优先级保证店铺色底 + 白色图标。 */
.customer-booking .chat-entry .chat-entry-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--accent);color:#fff}
.customer-booking .chat-entry .chat-entry-icon svg{width:20px;height:20px}
.customer-booking .chat-entry>span:nth-child(2){flex:1;min-width:0;color:var(--ink)}
.customer-booking .chat-entry b{font-size:15px}
.customer-booking .chat-entry span span{display:block;font-size:12px;color:var(--ink-2)}
.customer-booking .chat-entry em{color:var(--accent)}
.customer-booking .form-card{margin:14px 16px 0;padding:20px;border-radius:20px;box-shadow:var(--shadow)}
.customer-booking .card-heading .eyebrow{margin-bottom:2px}
.customer-booking .card-heading h2{font-size:20px;font-weight:900}
.customer-booking .step-label{font-size:12px;color:var(--muted)}
.customer-booking .operation{margin:18px 0 6px;border-radius:12px;background:var(--bg)}
.customer-booking .operation span{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:9px;font-size:14px}
.customer-booking .operation input:checked+span{color:var(--accent)}
.customer-booking .field{font-weight:500;color:var(--ink-2)}
.customer-booking .field-hint{font-size:12px}
.customer-booking input:not([type=radio]),.customer-booking select{border-radius:12px;background:var(--surface-2)}
.customer-booking .small-note{font-size:12px}
.customer-booking .primary-button{justify-content:center;gap:8px;border-radius:14px;background:var(--accent);font-weight:700;letter-spacing:0}
.customer-booking .result{border-radius:12px;background:var(--success-soft);color:var(--success)}
.customer-booking .result.error{background:var(--danger-soft);color:var(--danger)}
.customer-booking .page-footer{margin:18px 16px 0;font-size:12px}
.customer-booking .page-footer.powered{margin-top:8px}
@media(max-width:440px){
  .booking-page.customer-booking{padding:0 0 20px}
  .customer-booking .demo-banner{margin:0 0 10px}
  .customer-booking .intro{margin:2px 12px 0;padding:18px 16px}
  .customer-booking h1{font-size:24px}
  .customer-booking .form-card{margin:12px 12px 0;padding:18px 16px}
  .customer-booking .date-row{grid-template-columns:minmax(0,1fr);gap:0}
  .customer-booking .page-footer{margin:16px 12px 0}
}