/* Support chat widget — shared, site-wide (base template include).
   Static phase: the conversation lives on-device only (support-chat.js).
   Chat is the ONLY support channel — no email wording anywhere. */

/* backdrop exists for the mobile sheet; desktop closes via outside
   click / Esc handled in JS, so no backdrop is shown there */
.support-backdrop{
  position:fixed;inset:0;background:rgba(4,4,8,.55);z-index:84;
}
@media (min-width:701px){.support-backdrop{display:none!important}}
.support-backdrop[hidden]{display:none!important}

.support-widget{
  position:fixed;right:20px;bottom:20px;z-index:85;
  width:min(372px,calc(100vw - 32px));height:min(568px,80vh);
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(170deg,var(--panel-2),var(--panel) 70%);
  border:1px solid rgba(167,139,250,.35);border-radius:18px;
  box-shadow:var(--shadow);
  animation:supportIn .22s ease;
}
.support-widget[hidden]{display:none!important}
@keyframes supportIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
/* Lite experience flattens the widget's motion like the rest of the site */
html[data-experience="lite"] .support-widget{animation:none}
@media (prefers-reduced-motion:reduce){
  .support-widget{animation:none}
}
@media (max-width:700px){
  .support-widget{
    left:8px;right:8px;bottom:8px;width:auto;height:min(82vh,660px);
  }
  body.support-open{overflow:hidden}
}

.support-head{
  display:flex;align-items:flex-start;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(140deg,rgba(124,58,237,.25),transparent);
}
.support-head-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.support-head-text strong{font-size:1.05rem}
.support-sub{color:var(--muted);font-size:.82rem;line-height:1.4}
.support-close{
  flex:none;width:38px;height:38px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel-3);color:var(--text);
  font-size:1rem;
}

.support-name{padding:12px 16px;border-bottom:1px solid var(--line)}
.support-name[hidden]{display:none!important}
.support-name label{display:block;font-weight:700;font-size:.88rem;margin-bottom:6px}
.support-name input{
  width:100%;padding:11px 12px;font:inherit;color:var(--text);
  border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--panel);
}
.support-name input:focus{outline:0;border-color:var(--accent-2)}

.support-msgs{
  flex:1;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:8px;
}
.support-msg{
  max-width:86%;padding:10px 13px;border-radius:15px;line-height:1.5;
  font-size:.94rem;white-space:pre-wrap;overflow-wrap:break-word;
}
.support-msg.me{
  align-self:flex-end;color:#fff;border-bottom-right-radius:5px;
  background:linear-gradient(160deg,#8b5cf6,var(--accent) 60%,#6d28d9);
}
.support-msg.them{
  align-self:flex-start;background:var(--panel-3);
  border:1px solid var(--line);border-bottom-left-radius:5px;
}

.support-chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px 0}
.support-chip{
  padding:7px 12px;border-radius:999px;cursor:pointer;font-weight:600;
  border:1px solid var(--line);background:var(--panel-2);
  color:var(--muted);font-size:.84rem;
}
.support-chip:hover{color:var(--text);border-color:rgba(167,139,250,.5)}

.support-note{margin:8px 14px 0;color:#fbbf24;font-size:.86rem;line-height:1.45}
.support-note[hidden]{display:none!important}

.support-form{display:flex;gap:8px;padding:12px 14px 14px}
.support-form input{
  flex:1;min-width:0;padding:12px;font:inherit;color:var(--text);
  border-radius:var(--radius-sm);border:1px solid var(--line);
  background:var(--panel);
}
.support-form input:focus{outline:0;border-color:var(--accent-2)}
.support-send{flex:none}