/* Ergo Snob concierge. Brand palette from c-brand.css:
   ink #1B2024 · forest #365454 · terracotta #B5603A (#E19A6B on dark) · cream #F5EFE6.
   Values are set locally so the widget renders the same on every page.
   Product photos are white studio shots, so they sit on cream with
   mix-blend multiply, the same treatment as the site's light product cards. */
.escc-launch,.escc-panel{
  --escc-ink:#1B2024;--escc-panel:#20272b;--escc-line:#34404a;
  --escc-cream:#F5EFE6;--escc-paper:#FBF9F4;--escc-sand-line:#e2dccf;
  --escc-body:#eef0ee;--escc-muted:#cfd5d8;--escc-ink-muted:#4c5357;
  --escc-forest:#365454;--escc-terra:#B5603A;--escc-terra-deep:#a5532f;--escc-amber:#E19A6B;
  --escc-ease:cubic-bezier(.2,.7,.2,1);
  font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------------------------------------------------------------- launcher */
.escc-launch{
  position:fixed;right:24px;bottom:24px;z-index:9998;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border:0;border-radius:999px;
  background:var(--escc-terra);color:#fff;
  font-size:16px;font-weight:600;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 10px 30px rgba(15,19,22,.35);
  transition:transform .2s ease,background .2s ease;
}
.escc-launch:hover{transform:translateY(-2px);background:var(--escc-terra-deep)}
.escc-launch:focus-visible{outline:2px solid var(--escc-amber);outline-offset:3px}
.escc-launch.is-open{opacity:0;pointer-events:none}
.escc-dot{width:8px;height:8px;border-radius:50%;background:var(--escc-cream);box-shadow:0 0 0 4px rgba(245,239,230,.25)}

/* ------------------------------------------------------------------- panel */
.escc-panel{
  position:fixed;right:24px;bottom:24px;z-index:9999;
  width:400px;max-width:calc(100vw - 32px);
  height:min(640px,calc(100vh - 48px));
  display:flex;flex-direction:column;
  background:var(--escc-ink);color:var(--escc-body);
  border:1px solid var(--escc-line);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  animation:escc-in .22s ease-out;
  transition:width .45s var(--escc-ease),height .45s var(--escc-ease);
}
.escc-panel[hidden]{display:none}
@keyframes escc-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Engaged: the panel opens up to show the products. */
.escc-panel.is-wide{width:min(1120px,calc(100vw - 48px));height:min(820px,calc(100vh - 48px))}

.escc-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 20px 16px;background:var(--escc-forest)}
.escc-kick{margin:0 0 4px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#dfe8e5}
.escc-title{margin:0;font-family:Fraunces,Georgia,serif;font-weight:500;font-size:26px;line-height:1.1;letter-spacing:-.02em;color:var(--escc-cream)}
.escc-tools{display:flex;gap:8px}
.escc-iconbtn{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:transparent;color:#fff;cursor:pointer}
.escc-iconbtn[hidden]{display:none}
.escc-iconbtn:hover{background:rgba(255,255,255,.12)}
.escc-iconbtn-ink{border-color:var(--escc-sand-line);color:var(--escc-ink)}
.escc-iconbtn-ink:hover{background:var(--escc-cream)}
.escc-panel :focus-visible{outline:2px solid var(--escc-amber);outline-offset:2px}

.escc-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
.escc-panel.is-wide .escc-body{grid-template-columns:400px minmax(0,1fr)}
.escc-chat{min-height:0;display:flex;flex-direction:column}
.escc-panel.is-wide .escc-chat{border-right:1px solid var(--escc-line)}

/* -------------------------------------------------------------------- chat */
.escc-log{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.escc-msg{flex:none;max-width:88%;padding:11px 14px;border-radius:16px;font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.escc-msg p{margin:0}
.escc-msg p+p,.escc-msg p+ul,.escc-msg ul+p{margin-top:8px}
.escc-msg ul{margin:6px 0 0;padding-left:18px;list-style:disc}
.escc-msg li+li{margin-top:4px}
.escc-msg strong{color:var(--escc-cream);font-weight:600}
.escc-msg a{color:var(--escc-amber);text-decoration:underline;text-underline-offset:2px}
.escc-assistant{align-self:flex-start;background:var(--escc-panel);border:1px solid var(--escc-line);border-bottom-left-radius:6px}
.escc-user{align-self:flex-end;background:var(--escc-cream);color:var(--escc-ink);border-bottom-right-radius:6px;white-space:pre-wrap}

.escc-typing{display:flex;gap:5px;padding:14px 16px}
.escc-typing span{width:7px;height:7px;border-radius:50%;background:var(--escc-muted);animation:escc-dot 1.1s infinite ease-in-out}
.escc-typing span:nth-child(2){animation-delay:.15s}
.escc-typing span:nth-child(3){animation-delay:.3s}
@keyframes escc-dot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}

/* Product cards under a reply: swipe on phones, tap to show on the stage on desktop. */
.escc-strip{flex:none;display:flex;gap:10px;margin:2px -16px 4px;padding:2px 16px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;animation:escc-rise .35s var(--escc-ease) both}
.escc-strip::-webkit-scrollbar{display:none}
.escc-card{flex:none;width:168px;scroll-snap-align:start;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--escc-paper);color:var(--escc-ink);text-decoration:none;transition:transform .2s ease}
.escc-card:hover{transform:translateY(-2px)}
.escc-card-img{display:block;aspect-ratio:1/1;background:var(--escc-cream)}
.escc-card-cap{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;font-size:14px;line-height:1.3}
.escc-card-cap b{font-family:Fraunces,Georgia,serif;font-weight:500;font-size:17px}
.escc-card-price s,.escc-hero-price s,.escc-thumb-price s{color:#6b7175;font-weight:400}
.escc-panel.is-wide .escc-card{width:120px}
.escc-panel.is-wide .escc-card-cap b{font-size:15px}
@keyframes escc-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.escc-card-img img,.escc-hero-img img,.escc-thumb-img img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

.escc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 12px}
.escc-chips[hidden]{display:none}
.escc-chip{padding:8px 14px;border:1px solid var(--escc-line);border-radius:999px;background:transparent;color:var(--escc-body);font:inherit;font-size:14px;cursor:pointer}
.escc-chip:hover{border-color:var(--escc-amber);color:var(--escc-amber)}

.escc-form{flex:none;display:flex;align-items:flex-end;gap:8px;margin:0 12px;padding:8px;border:1px solid var(--escc-line);border-radius:16px;background:var(--escc-panel)}
.escc-form:focus-within{border-color:var(--escc-amber)}
.escc-input{flex:1;min-height:24px;max-height:120px;padding:6px;border:0;background:transparent;color:var(--escc-body);font:inherit;font-size:16px;line-height:1.5;resize:none;outline:none}
.escc-input::placeholder{color:#9aa4aa}
.escc-send{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:var(--escc-terra);color:#fff;cursor:pointer}
.escc-send:hover{background:var(--escc-terra-deep)}
.escc-send:disabled{opacity:.5;cursor:default}

.escc-foot{flex:none;margin:0;padding:10px 16px 14px;font-size:12px;line-height:1.5;color:var(--escc-muted)}
.escc-foot a{color:var(--escc-amber)}

/* ------------------------------------------------------------------- stage */
.escc-stage{display:none}
.escc-panel.is-wide .escc-stage{
  display:flex;flex-direction:column;gap:20px;min-height:0;overflow-y:auto;
  padding:22px 28px 26px;background:var(--escc-paper);color:var(--escc-ink);
  animation:escc-fade .4s .15s var(--escc-ease) both;
}
@keyframes escc-fade{from{opacity:0}to{opacity:1}}
.escc-mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--escc-ink-muted)}
.escc-stage-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.escc-stage-nav{display:flex;align-items:center;gap:8px}

/* flex:none so the hero never shrinks below its content (the stage scrolls
   instead); shrinking it is what let the photo overlap the text. */
.escc-hero{flex:none;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:center;animation:escc-rise .4s var(--escc-ease) both}
/* The photo box has its own shape and the image is pinned inside it, so the
   box never depends on the image (or on theme img rules) for its height. */
.escc-hero-img{position:relative;display:block;width:100%;aspect-ratio:1/1;max-height:min(480px,55vh);border-radius:18px;background:var(--escc-cream);overflow:hidden}
.escc-panel .escc-hero-img img{position:absolute;top:20px;left:20px;width:calc(100% - 40px);height:calc(100% - 40px);max-width:none;max-height:none;margin:0}
.escc-hero-info{display:flex;flex-direction:column;gap:12px}
.escc-hero-cat{margin:0;color:#9a4c2b}
.escc-hero-name{margin:0;font-family:Fraunces,Georgia,serif;font-weight:500;font-size:clamp(30px,3.2vw,42px);line-height:1.05;letter-spacing:-.02em;color:var(--escc-ink)}
.escc-hero-price{font-size:22px;font-weight:600}
.escc-hero-blurb{margin:0;font-size:16px;line-height:1.55;color:#3a403d}
.escc-hero-points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.escc-hero-points li{position:relative;padding-left:18px;font-size:15px;line-height:1.45;color:#3a403d}
.escc-hero-points li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--escc-terra)}
.escc-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.escc-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:999px;font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.escc-btn-fill{border:1px solid var(--escc-terra);background:var(--escc-terra);color:#fff}
.escc-btn-fill:hover{background:var(--escc-ink);border-color:var(--escc-ink);color:#fff}
.escc-btn-line{border:1px solid var(--escc-ink);background:transparent;color:var(--escc-ink)}
.escc-btn-line:hover{background:var(--escc-ink);color:#fff}

.escc-thumbs{flex:none;display:flex;gap:12px;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.escc-thumb{flex:none;display:flex;align-items:center;gap:10px;width:200px;padding:8px;border:1px solid var(--escc-sand-line);border-radius:14px;background:#fff;color:var(--escc-ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s ease}
.escc-thumb:hover{border-color:var(--escc-ink-muted)}
.escc-thumb.is-active{border-color:var(--escc-terra);box-shadow:inset 0 0 0 1px var(--escc-terra)}
.escc-thumb-img{flex:none;display:block;width:56px;height:56px;border-radius:10px;background:var(--escc-cream);padding:4px}
.escc-thumb-cap{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.3;min-width:0}
.escc-thumb-cap b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:1100px){
  .escc-panel.is-wide .escc-body{grid-template-columns:360px minmax(0,1fr)}
  .escc-hero{grid-template-columns:minmax(0,1fr);align-items:start}
  .escc-hero-img{aspect-ratio:16/10;max-height:min(300px,30vh)}
}

/* ------------------------------------------------------------------ phones */
@media (max-width:600px){
  .escc-launch{right:16px;bottom:16px;padding:13px 18px}
  .escc-panel{inset:0;right:0;bottom:0;width:100%;max-width:none;height:100%;height:100dvh;border:0;border-radius:0}
  html.escc-locked,html.escc-locked body{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .escc-panel,.escc-typing span,.escc-strip,.escc-hero,.escc-panel.is-wide .escc-stage{animation:none}
  .escc-launch,.escc-panel,.escc-card{transition:none}
}