/**
 * Whisper — front-end widget styles.
 * Off-canvas drawer, both themes, fully driven by CSS variables so the admin
 * appearance controls (accent hex, theme, font, launcher side, radius) take effect live.
 * Accent, icon colour, radius and font are injected inline on #whisper.
 */

.whisper{
  --wh-r: var(--wh-radius, 22px);
  --wh-r-msg: 18px;
  font-family: var(--wh-font, 'Manrope', system-ui, sans-serif);
  font-size:15px; line-height:1.55; font-feature-settings:'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.whisper *{ box-sizing:border-box; }
html.whisper-lock, html.whisper-lock body{ overflow:hidden !important; overscroll-behavior:none; }
/* The components below set display, which would override the [hidden] attribute — restore it. */
.whisper [hidden]{ display:none !important; }

/* ---- Theme tokens ---- */
.whisper[data-theme="dark"]{
  --wh-bg:#101217; --wh-panel:#171A20; --wh-surface:#20242C; --wh-surface-2:#292E37;
  --wh-line:rgba(255,255,255,.075); --wh-line-2:rgba(255,255,255,.15);
  --wh-text:#F7F7F8; --wh-muted:#AEB4BF; --wh-faint:#7D8592;
  --wh-ring:rgba(201,160,99,.34);
  --wh-shadow:0 28px 80px -24px rgba(0,0,0,.75), 0 12px 32px -16px rgba(0,0,0,.62);
  --wh-shadow-sm:0 8px 24px -16px rgba(0,0,0,.72);
}
.whisper[data-theme="light"]{
  --wh-bg:#F5F6F8; --wh-panel:#FFFFFF; --wh-surface:#FFFFFF; --wh-surface-2:#EEF1F4;
  --wh-line:rgba(20,28,40,.085); --wh-line-2:rgba(20,28,40,.16);
  --wh-text:#171D26; --wh-muted:#687382; --wh-faint:#939CA8;
  --wh-ring:rgba(180,134,60,.3);
  --wh-shadow:0 28px 80px -26px rgba(18,28,45,.28), 0 12px 32px -18px rgba(18,28,45,.2);
  --wh-shadow-sm:0 8px 24px -16px rgba(18,28,45,.2);
}

/* ---- Scrim (mobile only) ---- */
.wh-scrim{
  position:fixed; inset:0; z-index:2147482998; background:rgba(10,7,4,.5);
  opacity:0; transition:opacity .3s ease; backdrop-filter:blur(2px);
}
.whisper.wh-open .wh-scrim{ opacity:1; }
@media (min-width:561px){ .wh-mode-popup .wh-scrim{ display:none; } }

/* ---- Launcher ---- */
.wh-launcher{
  position:fixed; bottom:24px; z-index:2147483000; width:58px; height:58px; border-radius:18px;
  border:0; cursor:pointer; background:linear-gradient(155deg, var(--wh-accent-2), var(--wh-accent));
  color:var(--wh-icon-color, var(--wh-accent-ink)); display:grid; place-items:center;
  box-shadow:0 18px 38px -14px rgba(0,0,0,.5), 0 5px 14px -6px rgba(0,0,0,.28);
  isolation:isolate; transition:transform .2s ease, box-shadow .2s ease, border-radius .2s ease;
}
.wh-pos-right .wh-launcher{ right:24px; }
.wh-pos-left  .wh-launcher{ left:24px; }
.wh-launcher:hover{ transform:translateY(-3px); box-shadow:0 22px 42px -14px rgba(0,0,0,.55), 0 7px 16px -7px rgba(0,0,0,.3); }
.wh-launcher:active{ transform:scale(.95); }
.wh-launcher svg{ width:26px; height:26px; }
.wh-launcher::before{ content:""; position:absolute; inset:1px; border-radius:17px; border:1px solid rgba(255,255,255,.22); pointer-events:none; }
.wh-launcher::after{ content:""; position:absolute; z-index:-1; inset:-8px; border-radius:24px; opacity:.28;
  background:color-mix(in srgb, var(--wh-accent) 55%, transparent); filter:blur(14px); transition:opacity .2s ease; }
.wh-launcher:hover::after{ opacity:.46; }
.wh-i-close{ display:none; }
.whisper.wh-open .wh-i-open{ display:none; }
.whisper.wh-open .wh-i-close{ display:block; }
.whisper.wh-open .wh-launcher{ border-radius:50%; }

/* ---- Teaser ---- */
.wh-teaser{
  position:fixed; bottom:31px; z-index:2147482999; max-width:240px;
  display:flex; align-items:center; gap:10px;
  background:var(--wh-panel); color:var(--wh-text); border:1px solid var(--wh-line);
  font-size:13.5px; font-weight:650; letter-spacing:-.005em; padding:11px 12px 11px 15px; border-radius:14px;
  box-shadow:var(--wh-shadow); animation:wh-rise .5s both;
}
.wh-pos-right .wh-teaser{ right:96px; }
.wh-pos-left  .wh-teaser{ left:96px; }
.wh-teaser-x{ border:0; background:transparent; color:var(--wh-faint); font-size:18px; line-height:1; cursor:pointer; padding:0 2px; }
.wh-teaser-x:hover{ color:var(--wh-text); }

/* ---- Panel (off-canvas drawer) ---- */
.wh-panel{
  position:fixed; bottom:96px; z-index:2147483000;
  width:420px; max-width:calc(100vw - 32px); height:min(700px, calc(100vh - 128px));
  background:var(--wh-panel); border:1px solid var(--wh-line);
  border-radius:var(--wh-r); box-shadow:var(--wh-shadow);
  display:flex; flex-direction:column; overflow:hidden; isolation:isolate;
  opacity:0; transition:opacity .32s cubic-bezier(.2,.7,.2,1), transform .32s cubic-bezier(.2,.7,.2,1);
}
.wh-pos-right .wh-panel{ right:24px; transform:translateY(18px) scale(.965); transform-origin:bottom right; }
.wh-pos-left  .wh-panel{ left:24px; transform:translateY(18px) scale(.965); transform-origin:bottom left; }
.whisper.wh-open .wh-panel{ opacity:1; transform:none; }
.wh-panel::before{ content:""; position:absolute; z-index:3; inset:0 16% auto; height:2px; border-radius:0 0 3px 3px; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--wh-accent), var(--wh-accent-2), transparent); opacity:.9; }
.wh-panel::after{ content:""; position:absolute; z-index:-1; width:240px; height:240px; right:-105px; top:-125px;
  border-radius:50%; pointer-events:none; background:var(--wh-accent); opacity:.07; filter:blur(16px); }

/* Full-height drawer attached to the configured screen edge. */
.wh-mode-offcanvas .wh-panel{
  top:0; bottom:0; width:min(460px, 100vw); max-width:100vw; height:100vh; height:100dvh;
  border-radius:0; transform-origin:center; transition:transform .36s cubic-bezier(.22,.75,.22,1), opacity .28s ease;
}
.wh-mode-offcanvas.wh-pos-right .wh-panel{ right:0; left:auto; border-width:0 0 0 1px; transform:translateX(100%); }
.wh-mode-offcanvas.wh-pos-left .wh-panel{ left:0; right:auto; border-width:0 1px 0 0; transform:translateX(-100%); }
.wh-mode-offcanvas.wh-open .wh-panel{ opacity:1; transform:translateX(0); }
.wh-mode-offcanvas.wh-open .wh-launcher{ opacity:0; visibility:hidden; pointer-events:none; transform:scale(.9); }
.wh-mode-offcanvas .wh-head{ padding-top:max(18px, env(safe-area-inset-top)); }
.wh-mode-offcanvas .wh-inputbar{ margin-bottom:max(14px, env(safe-area-inset-bottom)); }

/* header */
.wh-head{ position:relative; z-index:1; display:flex; align-items:center; gap:14px; padding:19px 18px 18px; border-bottom:1px solid var(--wh-line);
  background:linear-gradient(135deg, color-mix(in srgb, var(--wh-accent) 10%, transparent), transparent 62%); }
.wh-avatar{ position:relative; width:46px; height:46px; border-radius:15px; flex:none; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(150deg, var(--wh-accent-2), var(--wh-accent)); color:var(--wh-icon-color, var(--wh-accent-ink));
  border:1px solid color-mix(in srgb, var(--wh-accent) 36%, var(--wh-line)); box-shadow:0 10px 24px -14px color-mix(in srgb, var(--wh-accent) 65%, #000); }
.wh-avatar svg{ width:22px; height:22px; }
.wh-avatar-has-logo{ padding:5px; background:#fff; border:1px solid var(--wh-line); }
.wh-avatar img{ width:100%; height:100%; display:block; object-fit:contain; border-radius:9px; }
.wh-id{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; }
.wh-name{ font-weight:760; font-size:16px; line-height:1.25; letter-spacing:-.018em; color:var(--wh-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wh-sub{ display:inline-flex; align-items:center; gap:6px; width:max-content; font-size:10.5px; line-height:1; font-weight:650;
  letter-spacing:.035em; text-transform:uppercase; color:var(--wh-muted); padding:5px 8px; border-radius:999px;
  background:color-mix(in srgb, var(--wh-surface-2) 72%, transparent); border:1px solid var(--wh-line); }
.wh-dot{ width:6px; height:6px; border-radius:50%; background:#57c98a; animation:wh-pulse 2.4s infinite; }
.wh-close{ margin-left:auto; width:34px; height:34px; border-radius:11px; border:1px solid var(--wh-line); cursor:pointer;
  background:color-mix(in srgb, var(--wh-surface) 74%, transparent); color:var(--wh-muted); display:grid; place-items:center; transition:.16s; }
.wh-close:hover{ background:var(--wh-surface-2); border-color:var(--wh-line-2); color:var(--wh-text); transform:rotate(3deg); }
.wh-close svg{ width:17px; height:17px; }

/* messages */
.wh-msgs{ flex:1; overflow-y:auto; padding:22px 18px 14px; display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth;
  background:radial-gradient(circle at 86% 2%, color-mix(in srgb, var(--wh-accent) 7%, transparent), transparent 150px),
    linear-gradient(180deg, color-mix(in srgb, var(--wh-bg) 72%, transparent), transparent 190px); }
.wh-msgs::-webkit-scrollbar{ width:8px; }
.wh-msgs::-webkit-scrollbar-thumb{ background:var(--wh-line-2); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }

.wh-message-row{ align-self:stretch; display:flex; align-items:flex-end; gap:9px; min-width:0; }
.wh-message-row-bot{ justify-content:flex-start; }
.wh-message-avatar{ width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; overflow:hidden; border-radius:10px;
  background:linear-gradient(150deg, var(--wh-accent-2), var(--wh-accent)); color:var(--wh-icon-color, var(--wh-accent-ink));
  box-shadow:0 7px 18px -12px color-mix(in srgb, var(--wh-accent) 75%, #000); }
.wh-message-avatar svg{ width:16px; height:16px; }
.wh-message-avatar-has-logo{ padding:3px; background:#fff; }
.wh-message-avatar img{ width:100%; height:100%; display:block; object-fit:contain; border-radius:7px; }

.wh-msg{ max-width:88%; font-size:14.75px; line-height:1.62; letter-spacing:-.004em; padding:12px 15px; border-radius:var(--wh-r-msg);
  animation:wh-rise .4s cubic-bezier(.2,.7,.2,1) both; word-wrap:break-word; overflow-wrap:anywhere; }
.wh-msg-bot{ max-width:calc(88% - 40px); position:relative; background:var(--wh-surface); color:var(--wh-text); border:0; border-bottom-left-radius:6px; box-shadow:var(--wh-shadow-sm); }
.wh-msg-user{ align-self:flex-end; background:linear-gradient(150deg, var(--wh-accent-2), var(--wh-accent)); color:var(--wh-accent-ink); border-bottom-right-radius:6px; font-weight:550;
  box-shadow:0 10px 24px -18px color-mix(in srgb, var(--wh-accent) 75%, #000); }
.wh-msg-welcome{ max-width:calc(94% - 40px); padding:16px 17px; font-size:15px; line-height:1.65;
  background:linear-gradient(135deg, color-mix(in srgb, var(--wh-accent) 8%, var(--wh-surface)), var(--wh-surface) 58%); }
.wh-msg-welcome strong:first-child{ color:var(--wh-accent); font-size:15.5px; letter-spacing:-.01em; }
.wh-msg-bot a{ color:var(--wh-accent); font-weight:600; }
.wh-msg-bot strong{ font-weight:720; }
.wh-msg-bot p{ margin:0 0 8px; }
.wh-msg-bot p:last-child{ margin-bottom:0; }
.wh-msg-bot ul{ margin:8px 0 4px; padding-left:19px; }
.wh-msg-bot li + li{ margin-top:4px; }

.wh-src{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--wh-muted);
  margin:-6px 0 2px 40px; padding:5px 8px; border-radius:999px; border:0;
  background:color-mix(in srgb, var(--wh-accent) 5%, var(--wh-surface)); }
.wh-src svg{ width:13px; height:13px; color:var(--wh-accent); flex:none; }

/* chips */
.wh-chips{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; padding:0 18px 15px; }
.wh-chip{ position:relative; min-height:42px; text-align:left; border:1px solid var(--wh-line); background:var(--wh-surface); color:var(--wh-text); font-family:inherit;
  font-size:12.75px; line-height:1.35; font-weight:600; letter-spacing:-.005em; padding:9px 29px 9px 12px; border-radius:13px; cursor:pointer; transition:.18s; box-shadow:0 6px 18px -18px rgba(0,0,0,.4); }
.wh-chip::after{ content:'›'; position:absolute; right:11px; top:50%; transform:translateY(-52%); color:var(--wh-accent); font-size:19px; font-weight:400; transition:transform .18s ease; }
.wh-chip:hover{ border-color:color-mix(in srgb, var(--wh-accent) 55%, var(--wh-line)); background:color-mix(in srgb, var(--wh-accent) 5%, var(--wh-surface)); transform:translateY(-2px); box-shadow:var(--wh-shadow-sm); }
.wh-chip:hover::after{ transform:translate(2px,-52%); }

/* product cards */
.wh-products{ align-self:flex-start; display:flex; flex-direction:column; gap:9px; width:94%;
  animation:wh-rise .45s cubic-bezier(.2,.7,.2,1) both; }
.wh-product{ position:relative; display:flex; align-items:center; gap:13px; min-height:76px; padding:8px 34px 8px 8px; border:1px solid var(--wh-line); border-radius:16px;
  background:var(--wh-surface); text-decoration:none; color:var(--wh-text); transition:.18s; overflow:hidden; }
.wh-product::after{ content:'›'; position:absolute; right:14px; color:var(--wh-accent); font-size:22px; transition:transform .18s ease; }
.wh-product:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--wh-accent) 42%, var(--wh-line)); box-shadow:var(--wh-shadow-sm); }
.wh-product:hover::after{ transform:translateX(2px); }
.wh-product img{ width:58px; height:58px; border-radius:12px; object-fit:cover; flex:none; background:var(--wh-surface-2); border:1px solid var(--wh-line); }
.wh-product-info{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.wh-product-title{ font-size:13.5px; line-height:1.35; font-weight:650; letter-spacing:-.008em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wh-product-price{ font-size:13px; color:var(--wh-accent); font-weight:750; letter-spacing:.005em; }
.wh-product-price del{ color:var(--wh-faint); font-weight:400; margin-right:5px; }
.wh-more{ align-self:flex-start; font-size:12.5px; color:var(--wh-accent); font-weight:700; text-decoration:none; margin:3px 0 2px 4px; }
.wh-more:hover{ text-decoration:underline; }

/* typing */
.wh-typing{ background:var(--wh-surface); border:0; border-radius:var(--wh-r-msg); border-bottom-left-radius:6px;
  padding:14px 16px; display:flex; gap:5px; box-shadow:var(--wh-shadow-sm); }
.wh-typing span{ width:7px; height:7px; border-radius:50%; background:var(--wh-muted); animation:wh-blink 1.3s infinite; }
.wh-typing span:nth-child(2){ animation-delay:.18s; } .wh-typing span:nth-child(3){ animation-delay:.36s; }

/* input bar */
.wh-inputbar{ position:relative; display:flex; gap:8px; align-items:center; margin:0 14px 14px; padding:6px; border:1px solid var(--wh-line-2); border-radius:18px;
  background:var(--wh-surface); box-shadow:0 12px 32px -22px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.025); transition:border-color .18s, box-shadow .18s; }
.wh-inputbar:focus-within{ border-color:color-mix(in srgb, var(--wh-accent) 70%, var(--wh-line)); box-shadow:0 0 0 3px var(--wh-ring), 0 14px 34px -22px rgba(0,0,0,.46); }
.wh-input{ min-width:0; flex:1; background:transparent; border:0; border-radius:12px; padding:9px 9px 9px 10px;
  color:var(--wh-text); font-family:inherit; font-size:14.5px; line-height:1.5; outline:none; transition:.16s; }
.wh-input::placeholder{ color:var(--wh-faint); }
.wh-input:focus{ box-shadow:none; }
.wh-input:focus-visible{ outline:none; }
.wh-send{ width:42px; height:42px; flex:none; border:0; border-radius:13px; cursor:pointer;
  background:linear-gradient(155deg, var(--wh-accent-2), var(--wh-accent)); color:var(--wh-icon-color, var(--wh-accent-ink));
  display:grid; place-items:center; transition:.16s; box-shadow:var(--wh-shadow-sm); }
.wh-send:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.wh-send:active{ transform:translateY(0) scale(.94); }
.wh-send:disabled{ opacity:.5; cursor:default; transform:none; }
.wh-send svg{ width:19px; height:19px; }

/* contact form */
.wh-form{ position:relative; align-self:stretch; display:flex; flex-direction:column; gap:9px; background:var(--wh-surface);
  border:1px solid var(--wh-line); border-radius:18px; padding:17px 15px 15px; animation:wh-rise .4s both; overflow:hidden; }
.wh-form::before{ content:""; position:absolute; inset:0 22% auto; height:2px; background:linear-gradient(90deg, transparent, var(--wh-accent), transparent); }
.wh-form-title{ font-weight:750; font-size:15px; letter-spacing:-.012em; color:var(--wh-text); margin-bottom:3px; }
.wh-form input, .wh-form textarea{ background:color-mix(in srgb, var(--wh-panel) 82%, var(--wh-surface-2)); border:1px solid var(--wh-line); border-radius:11px;
  padding:11px 12px; color:var(--wh-text); font-family:inherit; font-size:13.75px; outline:none; transition:.16s; width:100%; }
.wh-form input:focus, .wh-form textarea:focus{ border-color:var(--wh-accent); box-shadow:0 0 0 3px var(--wh-ring); }
.wh-form textarea{ min-height:76px; resize:vertical; }
.wh-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.wh-form-error{ display:none; color:#e0645f; font-size:12.5px; }
.wh-form-submit{ border:0; border-radius:12px; cursor:pointer; padding:12px 14px; font-family:inherit; font-size:13.75px; font-weight:700;
  background:linear-gradient(155deg, var(--wh-accent-2), var(--wh-accent)); color:var(--wh-accent-ink); transition:.16s; }
.wh-form-submit:hover{ filter:brightness(1.06); }
.wh-form-submit:disabled{ opacity:.6; cursor:default; }

/* focus visibility */
.whisper :where(button,input,textarea,a):focus-visible{ outline:2px solid var(--wh-accent); outline-offset:2px; }

/* animations */
@keyframes wh-rise{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } }
@keyframes wh-blink{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
@keyframes wh-pulse{ 0%{ box-shadow:0 0 0 0 rgba(87,201,138,.5);} 70%{ box-shadow:0 0 0 6px rgba(87,201,138,0);} 100%{ box-shadow:0 0 0 0 rgba(87,201,138,0);} }
@keyframes wh-ring{ 0%{ box-shadow:0 0 0 0 var(--wh-ring);} 70%{ box-shadow:0 0 0 15px rgba(201,160,99,0);} 100%{ box-shadow:0 0 0 0 rgba(201,160,99,0);} }

/* mobile: full drawer */
@media (max-width:560px){
  .wh-panel{ inset:0; width:100%; max-width:100%; height:100%; height:100dvh; border-radius:0; border:0; bottom:0; }
  .wh-pos-right .wh-panel{ right:0; transform:translateX(100%); }
  .wh-pos-left  .wh-panel{ left:0;  transform:translateX(-100%); }
  .whisper.wh-open .wh-panel{ transform:none; }
  .wh-launcher{ bottom:18px; }
  .wh-pos-right .wh-launcher{ right:18px; } .wh-pos-left .wh-launcher{ left:18px; }
  .wh-teaser{ display:none; }
  .wh-head{ padding-left:16px; padding-right:16px; }
  .wh-msgs{ padding-left:15px; padding-right:15px; }
  .wh-chips{ padding-left:15px; padding-right:15px; }
  .wh-inputbar{ margin-left:12px; margin-right:12px; margin-bottom:max(12px, env(safe-area-inset-bottom)); }
}

@media (max-width:380px){
  .wh-chips{ grid-template-columns:1fr; }
  .wh-msg{ max-width:92%; }
  .wh-msg-welcome{ max-width:calc(100% - 40px); }
  .wh-products{ max-width:100%; width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .whisper *, .wh-panel, .wh-scrim{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}