/* ================= Support chat widget (storefront-facing) ================= */
/* Self-contained: index.html has no generic .hidden rule (only .auth-form.hidden),
   so this widget defines its own instead of depending on the host page's CSS. */
.kaffik-support-precontact.hidden{ display:none !important; }
.kaffik-support-bubble{
  position:fixed; bottom:24px; right:24px; z-index:120;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; box-shadow:0 14px 30px -10px rgba(0,0,0,0.55);
  transition:transform .25s ease;
}
.kaffik-support-bubble:hover{ transform:translateY(-2px); }
.kaffik-support-bubble svg{ width:26px; height:26px; color:#241228; }
.kaffik-support-dot{
  position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%;
  background:#e8546a; border:2px solid var(--bg-deep); display:none;
}
.kaffik-support-dot.show{ display:block; }

.kaffik-support-panel{
  position:fixed; bottom:92px; right:24px; z-index:120;
  width:360px; max-width:92vw; height:480px; max-height:75vh;
  background:linear-gradient(165deg, var(--bg-mid), var(--bg-deep));
  border:1px solid var(--line); border-radius:10px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.6);
  opacity:0; pointer-events:none; transform:translateY(16px);
  transition:opacity .25s ease, transform .25s ease;
}
.kaffik-support-panel.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.kaffik-support-head{
  padding:16px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex:none;
}
.kaffik-support-head h4{ margin:0; font-family:var(--font-display); color:var(--gold-light); font-size:1.05rem; font-weight:600; }
.kaffik-support-close{ background:none; border:none; color:var(--ink-muted); font-size:1.3rem; cursor:pointer; line-height:1; padding:2px 6px; }
.kaffik-support-close:hover{ color:var(--gold-light); }

.kaffik-support-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.kaffik-support-msg{ max-width:80%; padding:9px 13px; border-radius:12px; font-size:0.86rem; line-height:1.5; }
.kaffik-support-msg.customer{ align-self:flex-end; background:linear-gradient(135deg, rgba(244,229,176,0.18), rgba(212,175,55,0.14)); color:var(--ink); border:1px solid var(--line); border-bottom-right-radius:3px; }
.kaffik-support-msg.admin{ align-self:flex-start; background:rgba(0,0,0,0.25); color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:3px; }
.kaffik-support-msg time{ display:block; margin-top:4px; font-size:0.65rem; color:var(--ink-muted); }
.kaffik-support-empty{ color:var(--ink-muted); text-align:center; font-size:0.85rem; margin:auto; padding:20px; }

.kaffik-support-precontact{ padding:14px 16px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px; flex:none; }
.kaffik-support-precontact input{
  background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:4px; padding:9px 12px;
  color:var(--ink); font-family:var(--font-body); font-size:0.85rem;
}
.kaffik-support-precontact input:focus{ outline:none; border-color:var(--gold); }

.kaffik-support-inputrow{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); flex:none; }
.kaffik-support-inputrow textarea{
  flex:1; resize:none; background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:6px;
  padding:9px 12px; color:var(--ink); font-family:var(--font-body); font-size:0.86rem; max-height:80px;
}
.kaffik-support-inputrow textarea:focus{ outline:none; border-color:var(--gold); }
.kaffik-support-send{
  background:linear-gradient(135deg, var(--gold-light), var(--gold) 60%, var(--gold-deep));
  border:none; border-radius:6px; padding:0 16px; color:#241228; font-weight:700; cursor:pointer;
  font-family:var(--font-label); font-size:0.78rem; flex:none;
}
.kaffik-support-send:disabled{ opacity:0.5; cursor:not-allowed; }

@media (max-width:480px){
  .kaffik-support-panel{ width:92vw; right:4vw; bottom:82px; height:70vh; }
  .kaffik-support-bubble{ right:16px; bottom:16px; }
}