/* 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}
/* A reply from a person (sent from Telegram), 29 Sep 2026: warm, and labelled
   with who answered, so it is never mistaken for the assistant. */
.ecw-team{background:#fff4e6;border:1px solid #ffd3a1;color:#1b2733;border-bottom-left-radius:4px}
.ecw-from{font-size:11px;font-weight:700;color:#b85c00;margin-bottom:3px;letter-spacing:.01em}
.ecw-new{display:block;margin:4px auto 2px;background:transparent;border:none;color:#0079a6;font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ecw-bubble{position:relative}
.ecw-dot{position:absolute;top:1px;right:1px;width:15px;height:15px;border-radius:50%;background:#e5322d;border:2px solid #fff}
.ecw-dot[hidden]{display:none}

/* 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)}
}
/* PICTURE M3 (8 Oct 2026). On a phone the 56px bubble sat over "Clear search",
   the end of "Proceed to checkout" and the product pop-up's buttons. There it
   is now smaller and tucked into the corner, every page ends with room for it
   so the last button can always be scrolled clear, and it steps aside while a
   product pop-up is open (the pop-up has its own close button). */
@media (max-width:480px){
  .ecw-wrap{right:10px;bottom:10px}
  .ecw-bubble{width:44px;height:44px}
  .ecw-bubble svg{width:21px;height:21px}
  body:has(#ecw-wrap)::after{content:"";display:block;height:60px;flex:none}
  body:has(.tpl-modal.active) .ecw-wrap{display:none}
}
/* PICTURE 4 (9 Oct 2026). On a phone the bubble still sat on the right end of the template search's
   "Clear search" while typing (the results bar appears low on the screen then). It now steps aside
   while the search box has the cursor, and comes back when the box is left (Enter on a phone does that). */
@media (max-width:640px){
  body:has(#tplSearch:focus) .ecw-wrap{display:none}
}
@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}