/* Support chat on the shop pages (public/boutique/support.js, lib/support.mjs; owner 2026-10-18). Each shop's colours
   come from html[data-sp-theme]; the button keeps each theme's own .msgr look (Cozy Caramels, which has none, gets
   .msgr.sp-own below). Text colours were checked for 4.5:1 contrast on their backgrounds. */
:root{--sp-accent:#5A51C6;--sp-accent-ink:#FFFFFF;--sp-head:#2E2858;--sp-head-ink:#FFFFFF;--sp-me:#5A51C6;--sp-me-ink:#FFFFFF;
  --sp-them:#F1F0F8;--sp-soft:#F6F5FC;--sp-ink:#22203A;--sp-muted:#5D5A73;--sp-line:#E3E1EF;--sp-err:#B42318;--sp-z:2147482000}
html[data-sp-theme=lovekezia-boutique],html[data-sp-theme=rosette-boutique]{--sp-accent:#B03A6E;--sp-head:#4A2540;--sp-me:#B03A6E;
  --sp-them:#FCEAF2;--sp-soft:#FFF5F9;--sp-ink:#3A1D33;--sp-muted:#6E4A63;--sp-line:#F3D5E2}
html[data-sp-theme=yumiverse-kawaii]{--sp-accent:#FFD54A;--sp-accent-ink:#1D3A6E;--sp-head:#1D3A6E;--sp-me:#1D3A6E;--sp-them:#EEF3FB;
  --sp-soft:#F4F7FD;--sp-ink:#14284D;--sp-muted:#4E6A9A;--sp-line:#D9E2F2}
html[data-sp-theme=sweet-counter]{--sp-accent:#8A4B12;--sp-head:#5B3510;--sp-me:#8A4B12;--sp-them:#FFF1DE;--sp-soft:#FFF8EE;
  --sp-ink:#3D2410;--sp-muted:#6B4A2C;--sp-line:#F0DCC0}

/* Cozy Caramels: its own floating button (the boutique themes style .msgr themselves) */
.msgr.sp-own{position:fixed;right:calc(22px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));z-index:45;width:60px;height:60px;border-radius:50%;text-decoration:none}
.msgr.sp-own .msgr-btn{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--sp-accent);box-shadow:0 10px 26px rgba(91,53,16,.32);transition:transform .2s}
.msgr.sp-own .msgr-btn svg{width:30px;height:30px;fill:#FFFFFF}
.msgr.sp-own:hover .msgr-btn,.msgr.sp-own:focus-visible .msgr-btn{transform:translateY(-3px) scale(1.05)}
.msgr.sp-own:focus-visible{outline:3px solid var(--sp-accent);outline-offset:4px}
.msgr.sp-own .msgr-tip{position:absolute;right:72px;top:50%;margin-top:-19px;height:38px;display:flex;align-items:center;padding:0 16px;border-radius:19px;
  background:#FFFFFF;color:var(--sp-ink);font-weight:700;font-size:14px;line-height:1;white-space:nowrap;box-shadow:0 8px 20px rgba(91,53,16,.18);opacity:0;translate:8px 0;transition:opacity .2s,translate .2s;pointer-events:none}
.msgr.sp-own:hover .msgr-tip,.msgr.sp-own:focus-visible .msgr-tip{opacity:1;translate:0 0}
@media (max-width:640px){.msgr.sp-own{right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));width:56px;height:56px}.msgr.sp-own .msgr-tip{display:none}}

/* the red dot: a reply the customer has not read */
.sp-dot{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#E5243B;border:2px solid #FFFFFF;z-index:2}
.tab-msg{position:relative}.tab-msg .sp-dot{top:-26px;right:calc(50% - 30px)}
.sp-dot[hidden]{display:none}

/* ---------- the menu ---------- */
.sp-menu{position:fixed;right:calc(22px + env(safe-area-inset-right));bottom:calc(98px + env(safe-area-inset-bottom));z-index:var(--sp-z);width:min(300px,calc(100vw - 32px));
  padding:8px;border-radius:20px;background:#FFFFFF;color:var(--sp-ink);box-shadow:0 18px 48px rgba(20,16,50,.24),0 0 0 1px var(--sp-line);font-family:inherit;
  opacity:0;translate:0 8px;transition:opacity .18s,translate .18s}
.sp-menu.is-on{opacity:1;translate:0 0}
.sp-menu[hidden]{display:none}
.sp-menu-tab{right:50%;transform:translateX(50%);bottom:calc(96px + env(safe-area-inset-bottom))}
.sp-mi{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 12px;border:0;border-radius:14px;background:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.sp-mi:hover,.sp-mi:focus-visible{background:var(--sp-soft);outline:none}
.sp-mi:focus-visible{box-shadow:inset 0 0 0 2px var(--sp-accent)}
.sp-mi-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sp-me)}
.sp-mi-ic svg{width:22px;height:22px;fill:var(--sp-me-ink)}
.sp-mi-fb{background:linear-gradient(135deg,#0A7CFF,#A334FA 60%,#FF5C87)}.sp-mi-fb svg{fill:#FFFFFF}
.sp-mi-t{display:flex;flex-direction:column;gap:2px}.sp-mi-t b{font-size:15px}.sp-mi-t small{font-size:13px;color:var(--sp-muted)}

/* ---------- the panel ---------- */
.sp-panel{position:fixed;right:calc(22px + env(safe-area-inset-right));bottom:calc(98px + env(safe-area-inset-bottom));z-index:var(--sp-z);
  display:flex;flex-direction:column;width:390px;height:min(640px,calc(100vh - 130px));border-radius:22px;overflow:hidden;background:#FFFFFF;color:var(--sp-ink);
  box-shadow:0 24px 64px rgba(20,16,50,.28),0 0 0 1px var(--sp-line);font-family:inherit;font-size:15px;line-height:1.45;text-align:left;
  opacity:0;translate:0 10px;transition:opacity .2s,translate .2s}
.sp-panel.is-on{opacity:1;translate:0 0}
.sp-panel[hidden]{display:none}
.sp-panel *{box-sizing:border-box}
.sp-head{display:flex;align-items:center;gap:8px;min-height:64px;padding:10px 10px 10px 18px;background:var(--sp-head);color:var(--sp-head-ink)}
.sp-ht{flex:1;min-width:0;display:flex;flex-direction:column}
.sp-title{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-sub{font-size:13px;opacity:.88;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-ib{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer}
.sp-ib svg{width:22px;height:22px;fill:currentColor}
.sp-ib:hover{background:rgba(127,127,127,.16)}
.sp-ib:focus-visible{outline:3px solid currentColor;outline-offset:-3px}
.sp-ib[hidden]{display:none}
.sp-back{margin-left:-8px}
.sp-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 12px;background:#FFFFFF}
.sp-v-chat{background:var(--sp-soft)}
.sp-lead{margin:0 0 8px;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--sp-muted)}
.sp-small{margin:0 0 12px;font-size:13px;color:var(--sp-muted)}
.sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ticket list */
.sp-list{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.sp-tk{display:flex;flex-direction:column;gap:3px;width:100%;padding:12px 14px;border:1px solid var(--sp-line);border-radius:16px;background:#FFFFFF;color:inherit;font:inherit;text-align:left;cursor:pointer}
.sp-tk:hover,.sp-tk:focus-visible{border-color:var(--sp-accent);outline:none;box-shadow:0 0 0 2px var(--sp-soft)}
.sp-tk.is-unread{border-color:var(--sp-me);box-shadow:inset 4px 0 0 var(--sp-me)}
.sp-tk-top{display:flex;justify-content:space-between;gap:8px}.sp-tk-time{font-size:12px;color:var(--sp-muted);white-space:nowrap}
.sp-tk-last{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sp-muted);font-size:14px}
.sp-tk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--sp-muted)}
.sp-chip{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--sp-them);color:var(--sp-ink);font-weight:700;font-size:12px}
.sp-chip-new{background:#E5243B;color:#FFFFFF}

/* buttons and forms */
.sp-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 18px;border:0;border-radius:14px;background:var(--sp-accent);color:var(--sp-accent-ink);
  font:inherit;font-weight:800;cursor:pointer}
.sp-btn:hover{filter:brightness(1.06)}.sp-btn:disabled{opacity:.6;cursor:default}
.sp-btn:focus-visible{outline:3px solid var(--sp-head);outline-offset:2px}
.sp-link{display:block;margin:10px auto 0;min-height:44px;padding:0 8px;border:0;background:none;color:var(--sp-ink);font:inherit;font-size:14px;font-weight:700;text-decoration:underline;cursor:pointer}
.sp-form{display:flex;flex-direction:column;gap:12px}
.sp-f{display:flex;flex-direction:column;gap:5px}
.sp-fl{font-size:14px;font-weight:700}
.sp-f input,.sp-f select,.sp-f textarea{width:100%;min-height:46px;padding:10px 12px;border:1.5px solid var(--sp-line);border-radius:12px;background:#FFFFFF;color:var(--sp-ink);font:inherit;font-size:16px}
.sp-f textarea{min-height:96px;resize:vertical}
.sp-f input:focus,.sp-f select:focus,.sp-f textarea:focus{border-color:var(--sp-accent);outline:2px solid var(--sp-accent);outline-offset:0}
html[data-sp-theme=yumiverse-kawaii] .sp-f :focus{border-color:var(--sp-head);outline-color:var(--sp-head)}
.sp-hint{font-size:12.5px;color:var(--sp-muted)}
.sp-err{color:var(--sp-err);font-size:13.5px;font-weight:700}.sp-err[hidden]{display:none}
.sp-formerr{margin:0}
.sp-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* pictures */
.sp-pics{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sp-form .sp-pick{width:auto;height:44px;padding:0 14px;border-radius:12px;border:1.5px dashed var(--sp-line);gap:8px;display:flex;color:var(--sp-ink)}
.sp-form .sp-pick::after{content:'Add a picture (optional)';font-size:14px;font-weight:700}
.sp-thumbs{display:flex;flex-wrap:wrap;gap:6px}.sp-thumbs[hidden]{display:none}
.sp-thumb{position:relative;width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--sp-them)}
.sp-thumb img{width:100%;height:100%;object-fit:cover}
.sp-thumb.is-busy img{opacity:.45}
.sp-thumb.is-busy::after{content:'';position:absolute;inset:18px;border:3px solid var(--sp-me);border-right-color:transparent;border-radius:50%;animation:sp-spin .8s linear infinite}
@keyframes sp-spin{to{rotate:1turn}}
.sp-thumb-x{position:absolute;top:2px;right:2px;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.66);color:#FFFFFF;font:700 15px/22px system-ui,sans-serif;cursor:pointer}

/* the chat */
.sp-keycard{margin:0 0 14px;padding:14px;border-radius:16px;background:#FFFFFF;border:1.5px solid var(--sp-line)}
.sp-keycard b{display:block;margin-bottom:4px}.sp-keycard p{margin:0 0 6px;font-size:14px;color:var(--sp-muted)}
.sp-key{display:inline-block;padding:6px 12px;border-radius:10px;background:var(--sp-them);font:800 18px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em}
.sp-keycard .sp-link{display:inline-block;margin:0 0 0 6px}
.sp-keyline code{font-weight:800;letter-spacing:.06em}
.sp-msgs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.sp-m{display:flex;flex-direction:column;max-width:84%}
.sp-m.is-me{align-self:flex-end;align-items:flex-end}
.sp-m.is-them{align-self:flex-start;align-items:flex-start}
.sp-who{margin:8px 0 3px 4px;font-size:12px;font-weight:700;color:var(--sp-muted)}
.sp-bub{margin:0;padding:9px 14px;border-radius:18px;white-space:pre-wrap;overflow-wrap:anywhere}
.is-me .sp-bub{background:var(--sp-me);color:var(--sp-me-ink);border-bottom-right-radius:6px}
.is-them .sp-bub{background:#FFFFFF;color:var(--sp-ink);border:1px solid var(--sp-line);border-bottom-left-radius:6px}
.sp-imgs{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.is-me .sp-imgs{justify-content:flex-end}
.sp-img{padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--sp-them);cursor:zoom-in;line-height:0}
.sp-img img{display:block;width:auto;height:auto;max-width:220px;max-height:220px;object-fit:cover}
.sp-img:focus-visible{outline:3px solid var(--sp-accent);outline-offset:2px}
.sp-time{margin:2px 6px 0;font-size:11.5px;color:var(--sp-muted)}
.sp-seen{margin:2px 6px 0;text-align:right;font-size:12px;font-weight:700;color:var(--sp-muted)}
.sp-closed{margin:14px 0 0;padding:10px 12px;border-radius:12px;background:#FFFFFF;border:1px dashed var(--sp-line);font-size:13.5px;color:var(--sp-muted);text-align:center}
.sp-seen[hidden],.sp-closed[hidden]{display:none}
.sp-foot{flex:none;padding:8px 10px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--sp-line);background:#FFFFFF}
.sp-foot[hidden]{display:none}
.sp-foot>.sp-err{margin:0 6px 6px}
.sp-comp{display:flex;align-items:flex-end;gap:4px}
.sp-comp .sp-pics{flex:none;order:0}
.sp-comp .sp-thumbs{position:absolute;bottom:calc(100% + 8px);left:10px;padding:6px;border-radius:12px;background:#FFFFFF;box-shadow:0 6px 18px rgba(20,16,50,.18)}
.sp-comp .sp-pics>.sp-err{position:absolute;bottom:calc(100% + 6px);left:12px;right:12px}
.sp-foot{position:relative}
.sp-pick{color:var(--sp-muted)}
.sp-ta{flex:1;min-height:44px;max-height:140px;padding:11px 14px;border:1.5px solid var(--sp-line);border-radius:22px;background:var(--sp-soft);color:var(--sp-ink);font:inherit;font-size:16px;line-height:1.3;resize:none}
.sp-ta:focus{border-color:var(--sp-accent);outline:none}
html[data-sp-theme=yumiverse-kawaii] .sp-ta:focus{border-color:var(--sp-head)}
.sp-send{background:var(--sp-accent);color:var(--sp-accent-ink)}.sp-send:hover{background:var(--sp-accent);filter:brightness(1.06)}
.sp-send:disabled{opacity:.6}

/* a picture, large */
.sp-light{position:fixed;inset:0;z-index:calc(var(--sp-z) + 1);display:grid;place-items:center;padding:24px;background:rgba(10,8,24,.88);cursor:zoom-out}
.sp-light[hidden]{display:none}
.sp-light img{max-width:100%;max-height:100%;border-radius:10px;object-fit:contain}
.sp-light-x{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;color:#FFFFFF}

/* phones: the chat takes the whole screen */
@media (max-width:640px){
  .sp-menu{right:calc(16px + env(safe-area-inset-right));bottom:calc(88px + env(safe-area-inset-bottom))}
  .sp-menu-tab{right:50%;bottom:calc(100px + env(safe-area-inset-bottom))}
  .sp-panel{inset:0;width:auto;height:auto;height:100dvh;border-radius:0;translate:0 16px}
  .sp-head{padding-top:calc(10px + env(safe-area-inset-top))}
  html.sp-on,html.sp-on body{overflow:hidden}
  html.sp-on .msgr,html.sp-on .tabbar{visibility:hidden}
}
@media (prefers-reduced-motion:reduce){.sp-menu,.sp-panel{transition:none}.sp-thumb.is-busy::after{animation:none}}