/* ==========================================================================
   Pickngo Mall — storefront chat widget (Phase 2, workstream A)
   Uses only the tokens defined in app.css. Amber for the one primary action,
   ink for structure. Mobile-first: full-height sheet at 600px and below.
   ========================================================================== */

.chatw{
  position:fixed; right:16px; bottom:16px; z-index:180;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  font-size:14.5px;
}

/* ------------------------------------------------------------- launcher --- */

.chatw-launch{
  position:relative; width:56px; height:56px; flex:0 0 auto;
  border:0; border-radius:50%; cursor:pointer;
  background:var(--ink); color:#fff;
  box-shadow:var(--shadow-md);
  display:grid; place-items:center;
  transition:transform .18s var(--ease), background .18s var(--ease);
}
.chatw-launch:hover{ background:var(--ink-3); transform:translateY(-1px) }
.chatw-launch:active{ transform:translateY(0) }
.chatw-launch-x{ display:none }
.chatw.is-open .chatw-launch-i{ display:none }
.chatw.is-open .chatw-launch-x{ display:block }
.chatw.is-open .chatw-launch{ background:var(--ink-3) }

.chatw-dot{
  position:absolute; top:5px; right:5px; width:12px; height:12px;
  border-radius:50%; background:var(--amber); border:2px solid var(--ink);
}

/* --------------------------------------------------------------- teaser --- */

.chatw-tease{
  order:-1; max-width:288px;
  background:var(--paper); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:14px;
}
.chatw-tease-t{ margin:0 0 10px; font-size:14px; line-height:1.5 }
.chatw-tease-a{ display:flex; gap:8px; flex-wrap:wrap }

/* ---------------------------------------------------------------- panel --- */

.chatw-panel{
  order:-1;
  width:380px; height:560px; max-height:calc(100vh - 110px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
}
.chatw-panel[hidden]{ display:none }

.chatw-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 12px 12px 14px;
  background:var(--ink); color:#fff; flex:0 0 auto;
}
.chatw-av{
  width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  display:grid; place-items:center;
  background:var(--amber); color:var(--ink); font-weight:800;
}
.chatw-title{ margin:0; font-size:14.5px; font-weight:700; color:#fff; line-height:1.25 }
.chatw-state{ margin:1px 0 0; font-size:12px; color:rgba(255,255,255,.72) }
.chatw-state.is-on::before{
  content:""; display:inline-block; width:7px; height:7px; margin-right:6px;
  border-radius:50%; background:var(--green); vertical-align:1px;
}
.chatw-x{
  border:0; background:transparent; color:rgba(255,255,255,.85);
  padding:6px; border-radius:var(--radius-xs); cursor:pointer; flex:0 0 auto;
}
.chatw-x:hover{ background:rgba(255,255,255,.12); color:#fff }

/* ------------------------------------------------------------- messages --- */

.chatw-body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:14px 12px 4px }
.chatw-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px }

.chatw-msg{ max-width:86%; display:flex; flex-direction:column; gap:4px }
.chatw-msg.is-me{ align-self:flex-end; align-items:flex-end }
.chatw-bub{
  padding:9px 12px; border-radius:var(--radius-sm);
  background:var(--paper); border:1px solid var(--line);
  line-height:1.5; white-space:pre-wrap; word-break:break-word;
}
.chatw-msg.is-me .chatw-bub{ background:var(--ink); border-color:var(--ink); color:#fff }
.chatw-msg.is-sys{ align-self:center; max-width:94%; align-items:center; text-align:center }
.chatw-msg.is-sys .chatw-bub{
  background:var(--amber-soft); border-color:#F3DFB8; color:var(--text); font-size:13.5px;
}
.chatw-when{ font-size:11.5px; color:var(--text-4) }
.chatw-bub a{ color:var(--blue); text-decoration:underline; word-break:break-all }
.chatw-msg.is-me .chatw-bub a{ color:var(--amber-2) }

/* product / order / link cards ------------------------------------------- */

.chatw-cards{ display:flex; flex-direction:column; gap:6px; margin-top:2px }
.chatw-card{
  display:flex; align-items:center; gap:10px; padding:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:inherit;
}
.chatw-card:hover{ border-color:var(--line-2); box-shadow:var(--shadow-xs) }
.chatw-card img{ width:44px; height:44px; flex:0 0 auto; object-fit:cover; border-radius:var(--radius-xs) }
.chatw-card-i{
  width:36px; height:36px; flex:0 0 auto; border-radius:var(--radius-xs);
  display:grid; place-items:center; background:var(--paper-3); color:var(--ink);
}
.chatw-card-b{ min-width:0; flex:1 1 auto }
.chatw-card-n{ display:block; font-weight:650; font-size:13.5px; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.chatw-card-m{ display:block; font-size:12.5px; color:var(--text-3) }
.chatw-card-p{ font-weight:800; color:var(--ink) }
.chatw-card-oos{ color:var(--red) }
.chatw-card-in{ color:var(--green) }

/* typing indicator ------------------------------------------------------- */

.chatw-typing{ display:flex; gap:4px; align-items:center; margin:10px 0 2px; padding-left:4px }
.chatw-typing[hidden]{ display:none }
.chatw-typing i{
  width:7px; height:7px; border-radius:50%; background:var(--text-4);
  animation:chatw-blink 1s infinite ease-in-out;
}
.chatw-typing i:nth-child(3){ animation-delay:.16s }
.chatw-typing i:nth-child(4){ animation-delay:.32s }
@keyframes chatw-blink{ 0%,80%,100%{ opacity:.3 } 40%{ opacity:1 } }

/* ---------------------------------------------------------- quick chips --- */

.chatw-quick{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px 0 }
.chatw-quick:empty{ display:none }
.chatw-chip{
  border:1px solid var(--line-2); background:var(--paper); color:var(--text);
  border-radius:999px; padding:6px 12px; font-size:13px; cursor:pointer;
}
.chatw-chip:hover{ border-color:var(--ink); background:var(--paper-3) }

/* ---------------------------------------------------------------- CSAT --- */

.chatw-rate{ padding:12px; border-top:1px solid var(--line); background:var(--paper) }
.chatw-rate[hidden]{ display:none }
.chatw-rate-q{ margin:0 0 8px; font-weight:650 }
.chatw-stars{ display:flex; gap:4px; margin-bottom:8px }
.chatw-star{
  border:0; background:transparent; cursor:pointer; padding:2px;
  font-size:24px; line-height:1; color:var(--line-2);
}
.chatw-star.is-on{ color:var(--amber) }
.chatw-rate-n{ margin-bottom:8px }

/* ------------------------------------------------------------ composer --- */

.chatw-form{
  display:flex; align-items:flex-end; gap:8px; padding:10px 12px;
  background:var(--paper); border-top:1px solid var(--line); flex:0 0 auto;
}
.chatw-input{
  flex:1 1 auto; min-width:0; resize:none; max-height:112px;
  padding:9px 12px; border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--paper); line-height:1.45;
}
.chatw-input:focus{ border-color:var(--ink); outline:none; box-shadow:0 0 0 3px rgba(46,107,230,.18) }
.chatw-send{
  width:40px; height:40px; flex:0 0 auto; border:0; border-radius:50%; cursor:pointer;
  background:var(--amber); color:var(--ink); display:grid; place-items:center;
}
.chatw-send:hover{ background:var(--amber-2) }
.chatw-send[disabled]{ opacity:.5; cursor:not-allowed }

.chatw-foot{
  display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center;
  padding:8px 12px 10px; background:var(--paper); border-top:1px solid var(--line);
  font-size:12.5px;
}
.chatw-link{
  border:0; background:transparent; padding:0; cursor:pointer;
  color:var(--text-2); font-size:12.5px; text-decoration:underline;
}
.chatw-link:hover{ color:var(--ink) }
.chatw-noscript{
  margin:0; max-width:288px; padding:12px 14px; font-size:13px; color:var(--text-2);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
.chatw-err{ margin:8px 0 0; font-size:13px; color:var(--red) }

/* -------------------------------------------------------------- mobile --- */

@media (max-width:600px){
  .chatw{ right:12px; bottom:12px; left:12px; align-items:flex-end }
  .chatw-tease{ max-width:none; width:100% }
  .chatw.is-open{ inset:0; padding:0; gap:0 }
  .chatw.is-open .chatw-panel{
    width:100%; height:100%; max-height:none; border:0; border-radius:0;
  }
  .chatw.is-open .chatw-launch{ display:none }
  .chatw-msg{ max-width:90% }
  /* the sheet covers the page, so stop the page behind it scrolling */
  body.chatw-lock{ overflow:hidden }
}

/* keep the launcher clear of the sticky mobile buy bar on product pages */
@media (max-width:900px){
  body.pdp .chatw{ bottom:80px }
}

@media (prefers-reduced-motion:reduce){
  .chatw-launch, .chatw-card{ transition:none }
  .chatw-typing i{ animation:none; opacity:.6 }
}