.support-widget { --support-primary:#17856a; --support-ink:#243936; --support-border:#e5ece8; color:var(--support-ink); }
/* Adapted from Tabler core 1.6.1, MIT. See docs/ui_sources.md. */
.support-widget .chat-bubbles { display:flex; flex-direction:column; gap:1rem; }
.support-widget .chat-item { display:flex; }
.support-widget .chat-bubble { position:relative; max-width:85%; padding:1rem; background:#f0f4f1; border-radius:8px; overflow-wrap:anywhere; }
.support-widget .chat-bubble-me { margin-left:auto; background:#e9f6f0; box-shadow:none; }
.support-widget .chat-bubble-title { display:flex; flex-wrap:wrap; gap:4px 9px; margin-bottom:.25rem; font-size:11px; color:#708378; }
.support-widget .chat-bubble-body { white-space:pre-wrap; font-size:13px; line-height:1.7; }
.support-widget .chat-bubble-body > :last-child { margin-bottom:0; }
.support-launcher { position:fixed; right:28px; bottom:26px; z-index:110; display:flex; align-items:center; gap:9px; padding:15px 21px; border:1px solid #ffffff22; border-radius:25px; background:#173f35; color:white; box-shadow:0 7px 24px #163d3230; font-size:14px; font-weight:650; cursor:pointer; transition:transform .15s,box-shadow .15s; }
.support-launcher:hover { transform:translateY(-2px); box-shadow:0 9px 28px #163d323d; }
.support-launcher svg { height:21px; width:21px; }
.support-launcher:focus-visible,.support-widget button:focus-visible,.support-widget a:focus-visible { outline:3px solid #8bcdbb; outline-offset:3px; }
.support-unread { position:absolute; top:-11px; right:2px; border:2px solid white; border-radius:12px; background:#d35436; padding:3px 8px; font-size:10px; }
.support-panel { position:fixed; right:28px; bottom:100px; z-index:120; display:flex; flex-direction:column; width:388px; height:min(650px,calc(100dvh - 130px)); border:1px solid #dbe6df; border-radius:23px; background:white; box-shadow:0 20px 80px #153b3028,0 4px 18px #1b3e2410; overflow:hidden; animation:support-appear .18s ease-out; }
.support-widget [hidden] { display:none !important; }
.support-header { display:flex; align-items:center; gap:12px; padding:22px; border-bottom:1px solid var(--support-border); background:linear-gradient(120deg,#f7fbf8,#eef7f2); }
.support-brand-mark { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; background:#258b6c; border-radius:14px; color:white; font-weight:750; font-size:22px; }
.support-header h2 { font-size:15px; font-weight:700; margin:0 0 3px; color:#243936; }
.support-header p { margin:0; font-size:12px; color:#6b8076; }
.support-close { margin-left:auto; width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:50%; background:#e5efe9; color:#65776d; font-size:23px; cursor:pointer; }
.support-thread { flex:1; min-height:100px; overflow-y:auto; overscroll-behavior:contain; padding:20px; background:#fbfcfb; }
.support-welcome { padding:18px 4px 26px; }
.support-welcome-mark { width:42px; height:42px; display:grid; place-items:center; background:#e8f3ec; color:#288b68; border-radius:14px; font-size:27px; margin-bottom:17px; }
.support-welcome h3,.support-welcome h2 { font-size:22px; line-height:1.45; font-weight:700; letter-spacing:-.7px; margin:0 0 9px; }
.support-welcome p { margin:0; font-size:13px; color:#7b8a82; line-height:1.8; }
.support-topics { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:23px; }
.support-topics button { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:13px 11px; border-radius:10px; border:1px solid #dce7df; background:white; color:#4e685b; font-size:12px; font-weight:550; cursor:pointer; }
.support-topics button:hover { border-color:#9dbfaf; background:#f2f8f4; }
.support-status { min-height:0; margin:0; padding:0 18px; font-size:12px; color:#697d71; line-height:1.65; background:#fbfcfb; }
.support-status:not(:empty) { padding-top:7px; padding-bottom:10px; }
.support-compose { padding:13px 16px 10px; border-top:1px solid var(--support-border); background:white; }
.support-compose textarea { display:block; resize:none; width:100%; border:0; outline:0; background:transparent; box-shadow:none; padding:4px 2px; color:#294139; font-family:inherit; font-size:13px; line-height:1.7; max-height:135px; }
.support-compose textarea:focus { outline:0; box-shadow:none; }
.support-compose textarea::placeholder { color:#9aa99f; }
.support-compose-footer { display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:4px; }
.support-compose-footer>span { color:#95a198; font-size:10px; }
.support-send { width:35px; height:35px; border:0; border-radius:11px; display:grid; place-items:center; flex-shrink:0; background:#238a69; color:white; cursor:pointer; }
.support-send svg { width:20px; height:20px; }
.support-send:disabled { opacity:.45; cursor:wait; }
.support-footer { text-align:center; color:#a3afa8; font-size:10px; padding:9px; background:white; }
.support-inbox-link { display:block; text-align:center; padding:4px; font-size:12px; color:#278366; }
.support-older { display:block; margin:0 auto 14px; padding:6px 12px; color:#678072; font-size:12px; border:1px solid #dfe9e2; border-radius:14px; background:white; cursor:pointer; }
.support-guest { padding:28px; flex:1; }
.support-guest a { margin-top:24px; }
.support-inline .support-panel { position:relative; inset:auto; width:min(780px,100%); height:680px; max-height:calc(100dvh - 220px); min-height:380px; margin:0 auto; box-shadow:0 8px 30px #1c4b3610; }
.support-filters { display:flex; gap:12px; margin-bottom:18px; font-size:13px; }
.support-filters a { padding:8px 14px; border-radius:18px; background:white; border:1px solid #dee7df; }
.support-inbox-row { display:flex; align-items:center; gap:16px; padding:20px; border-bottom:1px solid #edf2ee; }
.support-inbox-row:hover { background:#f7fbf8; }
.support-inbox-row p { margin:4px 0 0; color:#7a897f; font-size:12px; }
.support-inbox-row time { margin-left:auto; color:#7a897f; font-size:12px; }
.support-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes support-appear { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
@media(prefers-reduced-motion:reduce) { .support-panel { animation:none; } .support-launcher { transition:none; } }
@media(max-width:540px) { .support-launcher { right:18px; bottom:18px; } .support-panel { right:12px; bottom:90px; width:calc(100vw - 24px); height:min(620px,calc(100dvh - 110px)); } .support-inline .support-panel { min-height:380px; max-height:none; height:650px; } .support-inbox-row { flex-wrap:wrap; } }
@media(max-width:540px) { body:has(.support-launcher) { padding-bottom:90px; } }