:root {
  --sc-ink: #17151f;
  --sc-muted: #716d7b;
  --sc-line: #e8e5ed;
  --sc-brand: #6d3df5;
  --sc-brand-dark: #4c22cc;
  --sc-bg: #f7f6fa;
}

.support-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 9998;
  width: 58px; height: 58px; border: 0; border-radius: 50%;
  background: linear-gradient(145deg, var(--sc-brand), var(--sc-brand-dark));
  color: white; font: 700 23px/1 sans-serif; cursor: pointer;
  box-shadow: 0 14px 36px rgba(71, 31, 190, .35);
}
.support-launcher[data-unread]:after {
  content: attr(data-unread); position: absolute; right: -3px; top: -4px;
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: 12px;
  background: #ef4444; color: white; font: 700 11px/20px sans-serif;
}
.support-panel {
  position: fixed; right: 22px; bottom: 92px; z-index: 9999;
  width: min(390px, calc(100vw - 24px)); height: min(650px, calc(100vh - 116px));
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--sc-line); border-radius: 20px;
  box-shadow: 0 24px 70px rgba(22, 15, 42, .24);
  color: var(--sc-ink); font: 14px/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
}
.support-panel[hidden], .support-launcher[hidden] { display: none !important; }
.support-full-page { margin: 0; min-height: 100vh; background: var(--sc-bg); }
.support-page-shell { width: min(760px, calc(100% - 28px)); margin: 0 auto; padding: 24px 0; }
.support-page-shell .support-panel {
  position: relative; inset: auto; width: 100%; height: calc(100vh - 92px); min-height: 560px;
}
.support-back { display: inline-block; margin-bottom: 12px; color: var(--sc-brand-dark); text-decoration: none; font: 700 14px system-ui; }
.support-head {
  display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 13px 16px;
  color: #fff; background: linear-gradient(120deg, #24154d, var(--sc-brand));
}
.support-avatar {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.2); font-weight: 800; overflow: hidden;
}
.support-avatar img { width: 100%; height: 100%; object-fit: cover; }
.support-title { flex: 1; }
.support-title strong, .support-title small { display: block; }
.support-title small { margin-top: 2px; color: rgba(255,255,255,.78); }
.support-close { border: 0; background: none; color: white; font-size: 23px; cursor: pointer; }
.support-start { padding: 22px; overflow: auto; }
.support-start h2 { margin: 0 0 7px; font-size: 22px; }
.support-start p { color: var(--sc-muted); margin: 0 0 20px; }
.support-field { display: block; margin-bottom: 13px; font-weight: 650; font-size: 12px; }
.support-field input {
  display: block; box-sizing: border-box; width: 100%; margin-top: 5px; padding: 12px;
  border: 1px solid var(--sc-line); border-radius: 10px; outline: none; font: inherit;
}
.support-field input:focus { border-color: var(--sc-brand); box-shadow: 0 0 0 3px rgba(109,61,245,.1); }
.support-primary {
  width: 100%; border: 0; border-radius: 11px; padding: 12px 16px; cursor: pointer;
  background: var(--sc-brand); color: white; font: 750 14px system-ui;
}
.support-messages { flex: 1; overflow: auto; padding: 16px; background: var(--sc-bg); }
.support-message { display: flex; margin: 8px 0; }
.support-message.customer { justify-content: flex-end; }
.support-bubble { max-width: 78%; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: white; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
.support-message.customer .support-bubble { border-radius: 14px 14px 4px 14px; background: var(--sc-brand); color: white; }
.support-bubble time { display: block; margin-top: 4px; opacity: .64; font-size: 10px; }
.support-bubble a { color: inherit; font-weight: 700; }
.support-typing { min-height: 20px; padding: 0 16px; color: var(--sc-muted); background: var(--sc-bg); font-size: 12px; }
.support-compose { padding: 10px 12px; border-top: 1px solid var(--sc-line); background: white; }
.support-compose-row { display: flex; align-items: end; gap: 8px; }
.support-compose textarea {
  flex: 1; min-height: 42px; max-height: 120px; resize: none; box-sizing: border-box;
  border: 1px solid var(--sc-line); border-radius: 13px; padding: 10px 12px; font: inherit; outline: none;
}
.support-send, .support-attach {
  width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 12px;
  cursor: pointer; font-size: 17px;
}
.support-send { background: var(--sc-brand); color: white; }
.support-attach { background: #eeebf7; color: var(--sc-brand-dark); }
.support-file-name, .support-error { padding-top: 5px; font-size: 11px; color: var(--sc-muted); }
.support-error { color: #c62828; }
.support-empty { text-align: center; color: var(--sc-muted); margin-top: 35%; }
@media (max-width: 520px) {
  .support-panel:not(.support-page-shell .support-panel) { right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 0; }
  .support-launcher { right: 14px; bottom: 14px; }
}