/* Chat widget (B4): the Chat button, its panel, and the room it keeps free.
   Loaded after shop.css. chat.js builds the elements (#pcBtn, #pcDock, #pcPanel) only when chat_config says the chat is on,
   and sets body.pcOn while the button can show.
   Where the button sits (chosen so it never covers a control, the phone slot strip, the toast or the Turnstile box):
     - landing, cart, account and the replacement view (top bar showing): at the top bar's left (B22: the home button
       moved to the right, beside the Cart, so the chat button starts the bar on every one of them)
     - desktop shop view (no top bar): a footer under the right-hand pack panel; the panel gives up that room
     - phone shop view: bottom right, just above the slot strip (chat.js measures the strip into --pcStrip); on short
       upright screens the binder gives up 54 px of height for it (see "Phone shop view, upright screen" below)
   It hides while the zoom, a phone sheet or the chat panel is open, and while a toast or the bot check would overlap it. */

/* ---------- the button ---------- */
.pcBtn{position:fixed;z-index:40;top:9px;left:22px;height:38px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;
  border-radius:8px;background:rgba(232,184,75,.16);border:1px solid rgba(232,184,75,.32);color:var(--goldT);
  font-family:var(--util);font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pcBtn:hover{background:rgba(232,184,75,.26)}
.pcBtn svg{width:19px;height:19px;flex:0 0 auto}
.pcBtn b{min-width:19px;height:19px;border-radius:10px;background:#E5534B;color:#fff;font-size:12.5px;display:flex;align-items:center;justify-content:center;
  padding:0 5px;letter-spacing:0;font-weight:700}
.pcBtn[hidden],.pcDock[hidden],.pcPanel[hidden],.pcPanel [hidden]{display:none!important}
body.zoomOpen .pcBtn,body.sheetOpen .pcBtn,body.adminMode .pcBtn,body.pcIsOpen .pcBtn,.pcBtn.pcAway{visibility:hidden}
body.adminMode .pcDock,body.adminMode .pcPanel{display:none}

/* ---------- desktop shop view: a footer under the right panel ---------- */
.pcDock{display:none}
@media(min-width:900px){
  body.vShop.pcOn .sideR{margin-bottom:64px}                     /* the pack panel scrolls above the chat footer */
  body.vShop.pcOn .pcDock{display:block;position:fixed;right:0;bottom:0;z-index:20;width:clamp(210px,19vw,270px);height:64px;
    background:rgba(var(--bgr),.55);border-left:1px solid rgba(var(--fgr),.06);border-top:1px solid rgba(var(--fgr),.07)}
  body.vShop .pcBtn{top:auto;left:auto;right:14px;bottom:12px;height:40px;width:calc(clamp(210px,19vw,270px) - 28px)}
}

/* ---------- phone ---------- */
@media(max-width:899px){
  .pcBtn{top:7px;left:8px}
  body.vShop .pcBtn{top:auto;left:auto;right:10px;bottom:calc(var(--pcStrip,72px) + 10px);height:44px;padding:0 14px;
    background:var(--vinyl);border-color:rgba(232,184,75,.5);box-shadow:0 8px 22px rgba(0,0,0,.55)}
}
@media(max-width:400px){ .pcBtn{padding:0 11px} }
/* Phone shop view, upright screen: on short phones (375x667, 414x736, 320x568, tablets) shop.css sizes the pockets by the
   screen height, so the binder reaches down to the slot strip and the button would sit on the last card. While the chat is
   on, the same formula as shop.css keeps 54 px more free for the button (212px -> 266px). Tall phones (390x844, 360x740)
   are sized by width and don't change. Landscape: the binder is narrow and centred, the button sits clear of it. */
@media(max-width:899px) and (orientation:portrait){
  body.vShop.pcOn .binder{--pw:min(calc((100vw - 56px) / 3), calc((100vh - 266px - env(safe-area-inset-bottom)) / 3 * 5 / 7))}
  @supports (height:100dvh){ body.vShop.pcOn .binder{--pw:min(calc((100vw - 56px) / 3), calc((100dvh - 266px - env(safe-area-inset-bottom)) / 3 * 5 / 7))} }
}

/* ---------- B21: "Request photos" (#pcReq) right beside the chat button, Vault view only ----------
   chat.js sets --pcW = the chat button's width + 8px, so it sits just left of it. Desktop: in the footer under the right panel,
   the chat button shrinks to its label and "Request photos" takes the rest of the row. Phone: left of the floating chat button,
   the same height and look, above the slot strip; like the chat button it steps aside (.pcAway) while the toast would overlap it. */
.pcReq{display:none}
.pcReq[hidden]{display:none!important}
body.vShop.vVault.pcOn .pcReq{position:fixed;z-index:40;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;border-radius:8px;
  background:rgba(232,184,75,.16);border:1px solid rgba(232,184,75,.32);color:var(--goldT);font-family:var(--util);font-size:15px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;line-height:1.05;text-align:center}
.pcReq:hover{background:rgba(232,184,75,.26)}
.pcReq svg{width:18px;height:18px;flex:0 0 auto}
body.zoomOpen .pcReq,body.sheetOpen .pcReq,body.adminMode .pcReq,body.pcIsOpen .pcReq,.pcReq.pcAway{visibility:hidden}
@media(min-width:900px){
  body.vShop.vVault .pcBtn{width:auto;padding:0 14px}
  body.vShop.vVault.pcOn .pcReq{right:calc(14px + var(--pcW,0px));bottom:12px;height:40px;width:calc(clamp(210px,19vw,270px) - 28px - var(--pcW,0px));
    padding:0 9px;font-size:14px;letter-spacing:.04em}
}
@media(min-width:900px) and (max-width:1299px){   /* a narrower right panel: the label may take two lines, no icon */
  body.vShop.vVault.pcOn .pcReq{white-space:normal;font-size:13px}
  body.vShop.vVault.pcOn .pcReq svg{display:none}
}
@media(max-width:899px){
  body.vShop.vVault.pcOn .pcReq{right:calc(10px + var(--pcW,0px));bottom:calc(var(--pcStrip,72px) + 10px);height:44px;padding:0 13px;
    background:var(--vinyl);border-color:rgba(232,184,75,.5);box-shadow:0 8px 22px rgba(0,0,0,.55)}
}
@media(max-width:359px){ body.vShop.vVault.pcOn .pcReq svg{display:none} }

/* ---------- the panel ---------- */
.pcPanel{position:fixed;z-index:70;right:16px;bottom:16px;width:380px;height:560px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);
  display:flex;flex-direction:column;background:var(--vinyl);border:1px solid rgba(var(--fgr),.12);border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);color:var(--paper);font-family:var(--disp);animation:pcUp .18s ease}
@keyframes pcUp{from{transform:translateY(14px);opacity:.4}to{transform:none;opacity:1}}
@media(max-width:899px){
  .pcPanel{inset:0;right:auto;bottom:auto;width:100%;height:100vh;height:100dvh;max-height:none;border:0;border-radius:0;box-shadow:none}
  body.pcIsOpen{overflow:hidden}
}
.pcHead{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:58px;padding:10px 12px 10px 16px;background:var(--ink);border-bottom:1px solid rgba(var(--fgr),.08)}
.pcWho{flex:1;min-width:0;display:flex;flex-direction:column}
.pcWho b{font-size:16px;font-weight:900;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcWho small{font-family:var(--util);font-size:13px;letter-spacing:.03em;color:var(--muted);line-height:1.25}
.pcPerson{flex:0 0 auto;height:32px;padding:0 9px;border-radius:7px;background:rgba(232,184,75,.14);border:1px solid rgba(232,184,75,.3);color:var(--goldT);
  font-family:var(--util);font-size:13.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.pcPerson:hover{background:rgba(232,184,75,.24)}
.pcPerson:disabled{opacity:.5;cursor:default}
.pcX{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(var(--fgr),.08);font-size:22px;line-height:1;color:var(--paper)}
.pcX:hover{background:rgba(var(--fgr),.18)}

.pcLog{flex:1;min-height:0;overflow-y:auto;padding:14px 12px 10px;display:flex;flex-direction:column;gap:4px;scrollbar-width:thin;overscroll-behavior:contain}
.pcName{font-family:var(--util);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:8px 0 1px 4px}
.pcMsg{max-width:84%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.pcMsg.me{align-self:flex-end;background:rgba(232,184,75,.2);border-bottom-right-radius:4px;margin-top:4px}
.pcMsg.me+.pcMsg.me{margin-top:0}
.pcMsg.staff{align-self:flex-start;background:rgba(var(--fgr),.075);border-bottom-left-radius:4px}
.pcMsg.pend{opacity:.55}
.pcMsg a{color:var(--goldT);text-decoration:underline}
.pcSys{align-self:center;max-width:92%;margin:8px 0 4px;text-align:center;font-family:var(--util);font-size:14px;letter-spacing:.03em;color:var(--muted);line-height:1.35}
.pcGreet{align-self:center;max-width:92%;margin:6px 0;padding:10px 12px;border-radius:10px;border:1px dashed rgba(var(--fgr),.14);text-align:center;
  font-size:13.5px;line-height:1.5;color:var(--muted)}
.pcTyping{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:14px;border-bottom-left-radius:4px;background:rgba(var(--fgr),.075);margin-top:4px}
.pcTyping i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:pcDot 1.1s infinite ease-in-out}
.pcTyping i:nth-child(2){animation-delay:.15s}
.pcTyping i:nth-child(3){animation-delay:.3s}
@keyframes pcDot{0%,80%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-3px)}}

/* waiting notice, email row, errors */
.pcNote{flex:0 0 auto;margin:0 12px 8px;padding:8px 11px;border-radius:9px;background:rgba(232,184,75,.12);border:1px solid rgba(232,184,75,.28);
  color:var(--goldT);font-size:13px;font-weight:700;line-height:1.4}
.pcEmail{flex:0 0 auto;margin:0 12px 8px;font-size:13px;color:var(--muted);line-height:1.4}
.pcEmail form{display:flex;gap:6px;align-items:center}
.pcEmail input{flex:1;min-width:0;background:var(--ink);border:1px solid rgba(var(--fgr),.16);border-radius:7px;color:var(--paper);padding:7px 9px;font-family:var(--disp);font-size:14px}
.pcEmail input:focus{outline:none;border-color:var(--gold)}
.pcEmail .pcSave{flex:0 0 auto;height:33px;padding:0 12px;border-radius:7px;background:rgba(var(--fgr),.1);color:var(--paper);font-weight:700;font-size:13px}
.pcEmail .pcSave:hover{background:rgba(var(--fgr),.18)}
.pcEmail .pcSave:disabled{opacity:.5;cursor:default}
.pcEmail p{margin:0 0 5px}
.pcLink{font-family:var(--util);font-size:14px;letter-spacing:.05em;color:var(--goldT);text-decoration:underline;padding:0}
.pcHide{flex:0 0 auto;width:28px;height:28px;border-radius:50%;color:var(--muted);font-size:17px;line-height:1}
.pcHide:hover{background:rgba(var(--fgr),.1);color:var(--paper)}
.pcEErr,.pcErr{color:var(--bad);font-size:13px;line-height:1.4}
.pcEErr{margin:5px 0 0}
.pcErr{flex:0 0 auto;margin:0 12px 8px}

/* B13: "Just send a message (no live chat)" line under the header, its email box and the thank-you note */
.pcMode{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:7px 16px;background:rgba(var(--bgr),.35);border-bottom:1px solid rgba(var(--fgr),.06);
  font-family:var(--util);font-size:14px;letter-spacing:.03em;color:var(--muted);cursor:pointer;user-select:none;-webkit-user-select:none}
.pcMode input{width:17px;height:17px;margin:0;flex:0 0 auto;accent-color:#E8B84B;cursor:pointer}
.pcMode:hover,.pcMode.on{color:var(--goldT)}
.pcMEmail{flex:0 0 auto;margin:0 12px 8px}
.pcMEmail input{display:block;width:100%;background:var(--ink);border:1px solid rgba(var(--fgr),.16);border-radius:7px;color:var(--paper);padding:7px 9px;
  font-family:var(--disp);font-size:14px}
.pcMEmail input:focus{outline:none;border-color:var(--gold)}
.pcMEmail input::placeholder{color:var(--muted)}
.pcDone{align-self:center;max-width:92%;margin:8px 0 4px;padding:10px 12px;border-radius:10px;background:rgba(78,158,122,.14);border:1px solid rgba(78,158,122,.42);
  color:var(--ok);text-align:center;font-size:13.5px;font-weight:700;line-height:1.5}

/* input */
.pcForm{flex:0 0 auto;display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid rgba(var(--fgr),.08);background:rgba(var(--bgr),.45)}
.pcIn{flex:1;min-width:0;position:relative;display:flex;flex-direction:column}
.pcIn textarea{display:block;width:100%;resize:none;min-height:40px;max-height:140px;background:var(--ink);border:1px solid rgba(var(--fgr),.16);border-radius:9px;
  color:var(--paper);padding:9px 11px;font-family:var(--disp);font-size:14px;line-height:1.4}
.pcIn textarea:focus{outline:none;border-color:var(--gold)}
.pcIn textarea::placeholder{color:var(--muted)}
.pcCount{align-self:flex-end;margin-top:3px;font-family:var(--util);font-size:12.5px;letter-spacing:.05em;color:var(--muted)}
.pcCount.over{color:var(--bad)}
.pcSend{flex:0 0 auto;height:40px;padding:0 16px;border-radius:9px;background:var(--gold);color:#1A1206;font-weight:900;font-size:14px}
.pcSend:disabled{background:rgba(var(--fgr),.09);color:var(--muted);cursor:default}
.pcClosed{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-top:1px solid rgba(var(--fgr),.08);
  background:rgba(var(--bgr),.45);font-size:14px;font-weight:700}
.pcClosed button{flex:0 0 auto;height:38px;padding:0 14px;border-radius:8px;background:var(--gold);color:#1A1206;font-weight:900;font-size:14px}
.pcFoot{flex:0 0 auto;padding:0 12px 9px;background:rgba(var(--bgr),.45);font-family:var(--util);font-size:13px;letter-spacing:.04em;color:var(--muted)}
.pcFoot a{color:inherit}
@media(max-width:899px){
  .pcFoot{padding-bottom:calc(9px + env(safe-area-inset-bottom))}
  .pcIn textarea,.pcEmail input,.pcMEmail input{font-size:16px}  /* 16px: iPhones zoom into smaller fields */
  .pcMsg{font-size:15px}
}

/* ---------- B14: "Sign up / Sign in" beside the chat button (landing and cart only) ----------
   chat.js sets --pcW = the chat button's width + 8px (0 when there is no chat button), so this sits right after it. */
.pcSign{display:none}
body.vHome .pcSign,body.vCart .pcSign{position:fixed;z-index:40;top:9px;left:calc(22px + var(--pcW,0px));height:38px;display:flex;align-items:center;gap:7px;padding:0 13px;
  border-radius:8px;background:rgba(var(--fgr),.06);border:1px solid rgba(var(--fgr),.18);color:var(--paper);text-decoration:none;
  font-family:var(--util);font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pcSign:hover{border-color:var(--gold);color:var(--goldT)}
.pcSign svg{width:18px;height:18px;flex:0 0 auto}
.pcSign[hidden],body.adminMode .pcSign,body.zoomOpen .pcSign,body.sheetOpen .pcSign{display:none!important}
@media(max-width:899px){
  body.vHome .pcSign,body.vCart .pcSign{top:7px;left:calc(8px + var(--pcW,0px))}
}
@media(max-width:640px){ body.vHome .pcSign,body.vCart .pcSign{width:38px;padding:0;justify-content:center} .pcSign span{display:none} }
/* B16: the music button joined the top bar: on the smallest phones the chat button there is just its icon (its aria-label still says Chat) */
@media(max-width:359px){ body.vHome .pcBtn>span,body.vCart .pcBtn>span{display:none} body.vHome .pcBtn,body.vCart .pcBtn{padding:0 10px} }
.pcFace{flex:0 0 auto;width:38px;height:38px;border-radius:50%;margin-right:2px;border:2px solid var(--gold);object-fit:cover}   /* B48: Anna */