/* Purple belongs to the conversation; green identifies the next action. */
.website-support {
  --support-surface:#221732;
  --support-user:#35204d;
  --support-line:#674782;
  --support-muted:#d0bddf;
  --support-lilac:#dfbdff;
  --support-green:#7ee3b2;
  --support-green-ink:#102b23;
  min-width:0;
  color:var(--white,#fff);
  scrollbar-color:#ae7cd6 var(--support-surface);
}
.website-support button,.website-support input,.website-support select,.website-support textarea { font:inherit; }
.website-support :focus-visible { outline:2px solid var(--support-lilac); outline-offset:4px; }
.website-support ::selection { background:#b88bdf; color:#1f1030; }
.website-support .account-title-row { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--support-line); }
.website-support .account-title-row h2 { color:var(--support-lilac); }
.website-support .account-copy { color:var(--support-muted); margin-top:0; }
.support-list { display:grid; gap:10px; margin-block:24px 12px; }
.support-ticket { width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 20px; border:1px solid var(--support-line); border-radius:12px; background:var(--support-surface); color:inherit; text-align:start; cursor:pointer; }
.support-ticket:hover { background:#2e1b42; border-color:#a778cb; }
.support-ticket:hover strong { text-decoration:underline; text-underline-offset:5px; }
.support-ticket span { min-width:0; }
.support-ticket strong { display:block; overflow-wrap:anywhere; font-size:1rem; font-weight:700; }
.support-ticket small { display:block; margin-top:6px; color:var(--support-muted); font-size:.8rem; }
.support-unread { color:var(--support-green); font-weight:700; }
.support-nav-badge { font-size:11px; line-height:1.6; padding:3px 6px; border-radius:5px; color:#a0efc4; background:#183c30; }
.account-nav [data-account-page=support] { flex-wrap:wrap; }
.support-state { display:inline-flex; align-items:center; align-self:start; flex:none; max-width:100%; padding:5px 10px; border-radius:8px; color:#e0c9f0; background:#33263f; font-size:.8rem; line-height:1.7; }
.support-state[data-support-status=waiting_support] { color:#ffdd98; background:#3b2b21; }
.support-state[data-support-status=waiting_user] { color:#94edbf; background:#183c30; }
.support-state[data-support-status=escalated] { color:#ffc69d; background:#432c30; }
.support-state[data-support-status=closed] { color:#cabbd6; background:#2d2537; }
.support-empty { padding:24px 0; line-height:1.9; }
.support-empty h3 { color:var(--support-lilac); margin-bottom:8px; }
.support-empty p { color:var(--support-muted); }
.support-refresh { border:0; background:none; color:var(--support-lilac); cursor:pointer; padding:12px 0; min-height:44px; text-underline-offset:4px; text-decoration:underline; }
.support-refresh:hover { color:#f2dfff; }
.support-subject { overflow-wrap:anywhere; margin-block:16px 12px; }
.website-support form { display:grid; gap:18px; margin-top:28px; }
.website-support label { display:grid; gap:8px; color:#ead9f9; font-size:.95rem; }
.website-support input,.website-support textarea,.website-support select { width:100%; box-sizing:border-box; background:var(--support-surface); color:#fff; border:1px solid #a785c1; border-radius:12px; padding:12px; min-height:48px; caret-color:var(--support-lilac); }
.website-support input::placeholder,.website-support textarea::placeholder { color:var(--support-muted); }
.website-support textarea { resize:vertical; line-height:1.9; }
.website-support input[type=file] { line-height:1.6; }
.website-support input[type=file]::file-selector-button { font:inherit; color:#e8ceff; background:#45255f; border:0; border-radius:7px; padding:5px 12px; margin-inline-end:12px; cursor:pointer; }
.website-support .button { justify-self:start; min-height:48px; }
.website-support .button.support-primary { color:var(--support-green-ink); background:var(--support-green); border:1px solid transparent; }
.website-support .button.support-primary:hover { background:#a0efca; }
.website-support .button.outline { color:var(--support-lilac); border-color:#ad88c8; }
.website-support .button.outline:hover { background:var(--support-user); }
.website-support .button:disabled { opacity:.55; cursor:wait; }
.support-privacy,.support-hint { font-size:.85rem; line-height:1.9; color:var(--support-muted); max-width:70ch; margin:0; }
.support-privacy { padding-block:14px 0; border-top:1px solid var(--support-line); }
.support-previews:empty { display:none; }
.support-messages { display:grid; gap:14px; margin-top:24px; }
.support-message { padding:20px; background:var(--support-surface); border:1px solid #674782; border-radius:14px; min-width:0; }
.support-from-user { background:var(--support-user); border-color:#9062b0; }
.support-message header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.support-message header strong { font-size:.85rem; font-weight:500; color:var(--support-lilac); }
.support-message time { font-size:.8rem; color:var(--support-muted); }
.website-support time { font-variant-numeric:tabular-nums; }
.support-message p { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.9; margin:12px 0 0; max-width:70ch; }
.support-photos,.support-previews { display:flex; flex-wrap:wrap; gap:12px; }
.support-photos img { max-width:100%; max-height:300px; border-radius:10px; display:block; margin-top:12px; }
.support-photos a { max-width:100%; }
.support-previews figure { margin:0; max-width:160px; }
.support-previews img { width:100%; max-height:140px; object-fit:contain; border-radius:10px; }
.support-previews button { display:block; background:none; border:0; color:var(--support-lilac); min-height:44px; cursor:pointer; }
.website-support .form-error:empty { display:none; }
.website-support .form-error { color:#ffd1da; line-height:1.8; margin-top:16px; overflow-wrap:anywhere; }
.website-support [role=status] { line-height:1.8; }
@media(max-width:760px) {
  .account-grid:has(.website-support) { grid-template-columns:minmax(0,1fr); }
  .account-grid:has(.website-support) .account-nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .account-grid:has(.website-support) .account-nav button { min-width:0; white-space:normal; }
}
@media(max-width:600px) {
  .support-ticket { align-items:flex-start; flex-direction:column; gap:12px; padding:16px; }
  .support-message { padding:16px; }
  .support-message header { flex-wrap:wrap; }
  .website-support .account-title-row { flex-wrap:wrap; gap:12px; }
  .website-support .account-title-row h2 { font-size:1.5rem; }
}