/* css/chat-widget.css
   ==========================================================================
   The chat bubble. Scoped with .ecw- throughout so it cannot collide with
   anything on the pages it is dropped into - it appears on the designer, the
   store and the policy pages, which have three different stylesheets between
   them and no shared component layer.

   Deliberately plain. These are trade customers at work, and a chat widget
   that shouts is a chat widget people close.
   ========================================================================== */

.ecw-wrap{position:fixed;right:20px;bottom:20px;z-index:9000;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}

.ecw-bubble{
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:#00a9e0;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.ecw-bubble:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.ecw-bubble svg{width:26px;height:26px}

.ecw-panel{
  position:absolute;right:0;bottom:70px;width:340px;max-width:calc(100vw - 40px);
  height:460px;max-height:calc(100vh - 120px);
  background:#fff;border:1px solid #dde4e8;border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  display:none;flex-direction:column;overflow:hidden;
}
.ecw-panel.open{display:flex}

.ecw-head{background:#0e1620;color:#fff;padding:13px 44px 13px 16px;position:relative}
.ecw-title{font-weight:700;font-size:15px;letter-spacing:.01em}
.ecw-sub{font-size:11.5px;opacity:.72;margin-top:2px}
.ecw-close{
  position:absolute;right:8px;top:8px;width:30px;height:30px;
  background:transparent;border:none;color:#fff;font-size:22px;line-height:1;
  cursor:pointer;opacity:.75;border-radius:6px;
}
.ecw-close:hover{opacity:1;background:rgba(255,255,255,.12)}

.ecw-log{flex:1;overflow-y:auto;padding:14px;background:#f7f9fb}
.ecw-msg{max-width:84%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;margin-bottom:9px;white-space:pre-wrap;word-wrap:break-word}
.ecw-bot{background:#fff;border:1px solid #e3e8ec;color:#1b2733;border-bottom-left-radius:4px}
.ecw-me{background:#00a9e0;color:#fff;margin-left:auto;border-bottom-right-radius:4px}

/* Three dots while the assistant thinks. Without it a slow reply reads as a
   broken widget and people close the panel. */
.ecw-typing{display:flex;gap:4px;align-items:center;padding:12px}
.ecw-typing span{width:6px;height:6px;border-radius:50%;background:#9fb0bb;animation:ecwBlink 1.3s infinite}
.ecw-typing span:nth-child(2){animation-delay:.18s}
.ecw-typing span:nth-child(3){animation-delay:.36s}
@keyframes ecwBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.ecw-handoff{background:#fff;border:1px solid #e3e8ec;border-radius:12px;padding:12px;margin-bottom:9px}
.ecw-handoff-note{font-size:13px;color:#1b2733;line-height:1.45;margin-bottom:9px}
.ecw-btn-primary{
  width:100%;background:#ff8c00;color:#fff;border:none;border-radius:8px;
  padding:9px 12px;font-size:13.5px;font-weight:700;cursor:pointer;
}
.ecw-btn-primary:hover{background:#ea6c0a}
.ecw-btn-primary:disabled{opacity:.6;cursor:default}
.ecw-err{color:#b91c1c;font-size:12px;margin-top:6px;min-height:1em}

.ecw-human{
  background:#fff;border:none;border-top:1px solid #e8edf1;
  padding:9px;font-size:12.5px;font-weight:600;color:#0079a6;cursor:pointer;
}
.ecw-human:hover{background:#f2f8fb}

.ecw-foot{display:flex;gap:8px;padding:10px;border-top:1px solid #e8edf1;background:#fff}
.ecw-input{
  flex:1;border:1px solid #dde4e8;border-radius:8px;padding:9px 11px;
  font-size:13.5px;font-family:inherit;color:#1b2733;min-width:0;
}
.ecw-handoff .ecw-input{width:100%;margin-bottom:7px}
.ecw-input:focus{outline:none;border-color:#00a9e0}
.ecw-send{background:#00a9e0;color:#fff;border:none;border-radius:8px;padding:9px 15px;font-size:13.5px;font-weight:700;cursor:pointer}
.ecw-send:hover{background:#0079a6}

@media (max-width:480px){
  .ecw-wrap{right:14px;bottom:14px}
  .ecw-panel{width:calc(100vw - 28px);height:min(70vh,470px)}
}
@media (prefers-reduced-motion:reduce){
  .ecw-bubble{transition:none}
  .ecw-typing span{animation:none;opacity:.5}
}

/* Dark mode. The policy pages and the designer both set data-theme on <html>;
   js/theme.js also adds body.dark-mode, so both are matched. */
[data-theme="dark"] .ecw-panel,body.dark-mode .ecw-panel{background:#141a21;border-color:#2d3748}
[data-theme="dark"] .ecw-log,body.dark-mode .ecw-log{background:#0f141a}
[data-theme="dark"] .ecw-bot,body.dark-mode .ecw-bot{background:#1a222c;border-color:#2d3748;color:#e6edf3}
[data-theme="dark"] .ecw-foot,body.dark-mode .ecw-foot{background:#141a21;border-top-color:#2d3748}
[data-theme="dark"] .ecw-human,body.dark-mode .ecw-human{background:#141a21;border-top-color:#2d3748;color:#4cc3ea}
[data-theme="dark"] .ecw-input,body.dark-mode .ecw-input{background:#0f141a;border-color:#2d3748;color:#e6edf3}
[data-theme="dark"] .ecw-handoff,body.dark-mode .ecw-handoff{background:#1a222c;border-color:#2d3748}
[data-theme="dark"] .ecw-handoff-note,body.dark-mode .ecw-handoff-note{color:#e6edf3}