.customer-chat-launch { position:fixed; right:18px; bottom:calc(86px + env(safe-area-inset-bottom)); z-index:45; width:52px; height:52px; display:grid; place-items:center; background:var(--primary); color:white; border:0; border-radius:50%; box-shadow:0 3px 12px #0002; }
.customer-chat-launch svg { width:26px; height:26px; }
.customer-chat-launch { animation:chat-launch-breathe 4s ease-in-out infinite; }
.customer-chat-launch:hover,.customer-chat-launch:focus-visible { animation-play-state:paused; }
@keyframes chat-launch-breathe {
  0%,100% { transform:translateY(0); box-shadow:0 3px 12px #0002,0 0 0 0 #2d6a4f12; }
  50% { transform:translateY(-5px); box-shadow:0 6px 16px #0002,0 0 0 5px #2d6a4f06; }
}
.customer-chat { position:fixed; inset:auto 18px calc(80px + env(safe-area-inset-bottom)) auto; margin:0; padding:0; width:min(400px,calc(100vw - 24px)); height:min(580px,calc(100dvh - 110px)); max-width:none; max-height:none; border:1px solid #dfe6e2; border-radius:20px; color:var(--text); background:#f8faf9; box-shadow:0 8px 36px #0002; overflow:hidden; }
.customer-chat[open] { display:flex; flex-direction:column; }
.customer-chat::backdrop { background:#0002; }
.customer-chat [hidden] { display:none !important; }
.customer-chat button { cursor:pointer; font:inherit; }
.customer-chat button:disabled { opacity:.5; cursor:default; }
.customer-chat-header { display:flex; align-items:center; gap:12px; min-height:82px; padding:16px; background:var(--primary); color:white; flex-shrink:0; }
.chat-heading { flex:1; min-width:0; }
.customer-chat h2 { margin:0 0 5px; font-size:18px; line-height:1.3; overflow-wrap:anywhere; }
.chat-heading p { margin:0; display:flex; align-items:center; gap:6px; font-size:12px; color:#e2eee7; }
.chat-state-dot { width:7px; height:7px; border-radius:50%; background:#d0d9d5; flex-shrink:0; }
.chat-state-dot.connected { background:#57df85; }
.customer-chat [data-close] { width:36px; height:36px; display:grid; place-items:center; background:none; border:0; color:white; flex-shrink:0; }
.customer-chat [data-close] svg { width:26px; height:26px; }
.chat-message-avatar { position:relative; width:32px; height:32px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:#e6f0eb; color:var(--primary); overflow:hidden; }
.chat-message-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.chat-agent-avatar { width:44px; height:44px; background:#ffffff30; }
.chat-agent-avatar,.customer-chat-message.assistant:last-child .chat-message-avatar { animation:chat-avatar-float 3.8s ease-in-out infinite; }
.customer-chat-message.assistant:last-child .chat-message-avatar { animation-delay:-1.2s; }
@keyframes chat-avatar-float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-2px); }
}
.customer-chat-scopes { display:flex; flex-shrink:0; padding:6px 12px; gap:8px; background:white; border-bottom:1px solid #e7ece9; }
.customer-chat-scopes button { flex:1; padding:6px 8px; border:0; border-radius:4px; font-size:12px; background:#f0f4f2; color:#65736b; }
.customer-chat-scopes [aria-selected=true] { color:var(--primary); background:#e2efe8; }
.customer-chat-tabs { display:flex; flex-shrink:0; background:white; border-bottom:1px solid #e7ece9; }
.customer-chat-tabs button { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 8px; border:0; border-bottom:3px solid transparent; font-size:14px; font-weight:600; background:none; color:#929b96; }
.customer-chat-tabs svg { width:16px; height:16px; }
.customer-chat-tabs [aria-selected=true] { color:var(--primary); border-bottom-color:var(--primary); }
.chat-conversation { display:flex; flex-direction:column; flex:1; min-height:0; position:relative; }
.chat-earlier { flex-shrink:0; align-self:center; padding:8px 12px; color:var(--primary); font-size:12px !important; background:transparent; }
.customer-chat-messages { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:18px 14px; }
.customer-chat-message { display:flex; align-items:flex-end; gap:9px; margin-bottom:16px; }
.customer-chat-message.user { flex-direction:row-reverse; }
.customer-chat-message p { margin:0; padding:12px 14px; min-width:0; max-width:calc(100% - 46px); white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; line-height:1.65; background:white; border-radius:16px 16px 16px 4px; box-shadow:0 2px 5px #00000008; }
.customer-chat-message.user p { background:#e1eee6; border-radius:16px 16px 4px 16px; }
.customer-chat-status { flex-shrink:0; padding:0 16px; font-size:12px; color:#69776e; overflow-wrap:anywhere; max-height:85px; overflow:auto; }
.customer-chat-status:not(:empty) { padding-bottom:10px; }
.customer-chat-status a,.customer-chat-status button { color:var(--primary); margin-left:8px; text-decoration:underline; background:none; border:0; }
.customer-chat form { border-top:1px solid #e7ece9; display:flex; gap:8px; padding:12px; align-items:center; background:white; flex-shrink:0; }
.customer-chat textarea { resize:none; min-width:0; width:0; flex:1; border:1px solid #dce2de; border-radius:22px; padding:10px 14px; font:inherit; font-size:14px; line-height:22px; height:44px; max-height:84px; background:#f6f8f7; }
.customer-chat .chat-send { width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--primary); color:white; flex-shrink:0; }
.chat-voice { display:flex; align-items:center; height:42px; border:1px solid #c9d6ce; border-radius:22px; position:relative; color:var(--primary); flex-shrink:0; }
.chat-voice.is-on { background:var(--primary); color:white; border-color:var(--primary); }
.chat-voice button { background:none; color:inherit; border:0; }
.chat-voice-toggle { display:flex; align-items:center; gap:4px; padding:0 7px; height:40px; font-size:12px !important; }
.chat-voice-toggle svg { width:15px; height:15px; }
.chat-voice-choose { width:23px; height:26px; border-left:1px solid #a7baae !important; display:grid; place-items:center; }
.chat-voice-choose svg { width:14px; height:14px; }
.chat-voice-menu { position:absolute; right:0; bottom:50px; width:166px; padding:6px; border:1px solid #dce2de; border-radius:8px; background:white; box-shadow:0 4px 20px #0002; color:#273e30; z-index:3; }
.chat-voice-menu button { display:block; width:100%; padding:9px; text-align:left; font-size:13px; border-radius:4px; }
.chat-voice-menu [aria-pressed=true],.chat-voice-menu button:hover { background:#e5f1e9; }
.chat-voice-replay { align-self:flex-end; display:grid; place-items:center; width:32px; height:30px; margin:0 14px 4px; background:none; border:0; color:var(--primary); }
.chat-voice-replay svg { width:16px; height:16px; }
.chat-voice-status { font-size:12px; color:#69776e; padding:0 16px; }
.chat-voice-status:empty { display:none; }
.customer-chat-faqs { flex:1; min-height:0; overflow:auto; padding:18px 16px; color:#68766e; font-size:14px; }
.customer-chat-faqs details { border-bottom:1px solid #dfe7e2; padding:14px 0; }
.customer-chat-faqs summary { cursor:pointer; color:#263d2e; line-height:1.6; overflow-wrap:anywhere; }
.customer-chat-faqs p { margin:12px 0 0; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.customer-chat-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(prefers-reduced-motion:reduce) {
  .customer-chat-launch,.chat-agent-avatar,.customer-chat-message.assistant:last-child .chat-message-avatar { animation:none; }
}
@media(max-width:480px) {
  .customer-chat { inset:auto 8px calc(var(--chat-keyboard-offset,0px) + max(8px,env(safe-area-inset-bottom))) 8px; width:auto; height:min(600px,calc(var(--chat-viewport-height,100dvh) - 24px)); border-radius:20px; }
  .customer-chat form { gap:6px; padding:12px 10px max(12px,env(safe-area-inset-bottom)); }
  .customer-chat textarea { font-size:16px; padding-left:10px; padding-right:10px; }
}