/* /support: talk to the support team (start form, conversation, other ways to reach us). Needs styles.css, auth.css and ui.css. No animation. */
.sp-main{padding:18px 0 32px}
.sp{max-width:720px;margin-inline:auto;display:grid;gap:16px}
.sp-head h1{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.1rem);margin:0 0 4px}
.sp-head p{margin:0;color:var(--text-soft2)}
.sp-load{color:var(--muted);margin:0}
.sp-card{border-radius:20px;border:1px solid var(--line-card);background:var(--card);box-shadow:var(--shadow);padding:16px}
@media(min-width:600px){.sp-card{padding:22px}}
.sp-form{display:grid;gap:14px}
.sp-form .fld textarea{min-height:140px}
.sp-count{margin:0;font-size:.82rem;color:var(--muted);text-align:right}
.sp-count.over{color:#BE123C;font-weight:600}
:root[data-theme="dark"] .sp-count.over{color:#FDA4AF}
.sp-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sp-go{justify-self:start;min-width:160px}
.sp-go .sp-spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent}
.sp-go.busy .sp-spin{display:inline-block}
.sp-note{margin:0;font-size:.9rem;color:var(--muted)}
.sp-alert{margin:0;padding:10px 14px;border-radius:14px;background:var(--tint-rose);color:#9F1239;font-weight:600;font-size:.92rem}
:root[data-theme="dark"] .sp-alert{color:#FDA4AF}
.sp-ok{margin:0;padding:10px 14px;border-radius:14px;background:var(--tint);color:var(--ink);font-size:.92rem}

/* conversation */
.sp-conv{padding:0;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.sp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.sp-bar h2{font-size:1.05rem;margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.sp-st{display:inline-block;padding:1px 10px;border-radius:99px;font-size:.78rem;font-weight:700;background:var(--tint);color:var(--primary)}
.sp-st.closed{background:var(--line);color:var(--muted)}
.sp-st.pending{background:var(--tint-warm);color:var(--tag-fg)}
.sp-log{height:min(52dvh,520px);min-height:260px;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.sp-log:focus-visible{outline:3px solid var(--primary);outline-offset:-3px}
.sp-day{align-self:center;margin:8px 0 2px;padding:2px 12px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:.78rem;font-weight:600}
.sp-m{display:flex;flex-direction:column;max-width:86%;min-width:0}
.sp-m.mine{align-self:flex-end;align-items:flex-end}
.sp-m.theirs{align-self:flex-start;align-items:flex-start}
.sp-who{font-size:.76rem;font-weight:700;color:var(--primary);margin:0 8px 2px}
.sp-b{margin:0;padding:8px 14px;border-radius:18px;line-height:1.5;font-size:1rem;overflow-wrap:anywhere;white-space:pre-wrap;box-shadow:0 2px 6px -3px rgba(11,19,36,.25)}
.sp-m.mine .sp-b{background:linear-gradient(135deg,#0F766E,#14B8A6);color:#fff;border-bottom-right-radius:5px}
.sp-m.theirs .sp-b{background:var(--tint);color:var(--ink);border:1px solid var(--line-chip);border-bottom-left-radius:5px}
.sp-t{margin:2px 8px 0;font-size:.72rem;color:var(--muted)}
.sp-empty{margin:auto;color:var(--muted);text-align:center}
.sp-compose{display:grid;gap:6px;padding:10px 12px;border-top:1px solid var(--line);background:var(--card)}
.sp-row{display:flex;gap:8px;align-items:flex-end}
.sp-row textarea{flex:1;min-width:0;min-height:48px;max-height:140px;padding:11px 14px;border-radius:16px;border:1.5px solid var(--line-field);background:var(--field-bg);color:var(--ink);font:inherit;line-height:1.5;resize:none}
.sp-row textarea:focus{outline:3px solid color-mix(in srgb,var(--primary) 35%,transparent);outline-offset:0;border-color:var(--primary)}
.sp-send{flex:none;min-height:48px;padding:0 20px}
.sp-closed{display:grid;gap:10px;justify-items:start;padding:14px 16px;border-top:1px solid var(--line)}
.sp-closed p{margin:0;color:var(--text-soft2)}

/* previous conversations (signed in) */
.sp-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sp-list button{display:grid;gap:2px;width:100%;text-align:left;min-height:48px;padding:10px 14px;border-radius:14px;border:1px solid var(--line-card);background:var(--card);color:var(--ink);font:inherit;cursor:pointer}
.sp-list button:hover{border-color:var(--primary)}
.sp-list .sp-lt{display:flex;gap:8px;align-items:center;font-weight:600}
.sp-list .sp-lp{color:var(--muted);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-dot{display:inline-block;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--coral);color:#fff;font-size:.72rem;font-weight:700;line-height:20px;text-align:center}
.sp-h2{font-size:1.05rem;margin:0 0 10px}
.sp-link{min-height:44px;padding:0 14px;border:1px solid var(--btn-line);border-radius:99px;background:var(--card);color:var(--primary);font:inherit;font-weight:600;cursor:pointer}

/* other ways to reach us */
.sp-contact{border-radius:20px;border:1px solid var(--line-card);background:var(--card);padding:14px 18px}
.sp-contact h2{font-size:1.05rem;margin:0 0 6px}
.sp-contact ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sp-contact a{color:var(--primary);font-weight:600}
.sp-contact[hidden]{display:none}
@media(max-width:380px){.sp-send{padding:0 14px}.sp-m{max-width:94%}}