@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: dark;
  font-family: Inter, "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f6f5f9;
  background: #08090c;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --surface: #0b0c10;
  --surface-raised: #191a20;
  --text-muted: #8c8d98;
  --purple: #7258ff;
  --line: rgba(255, 255, 255, .08);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: #08090c; }
button, input, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(ellipse at 20% 15%, #21194b 0, transparent 42%), #08090c; }
.login-card { width: min(100%, 420px); padding: 42px; border: 1px solid var(--line); border-radius: 24px; background: rgba(14, 15, 20, .94); box-shadow: 0 26px 100px #0008; }
.eyebrow { color: #a699ff !important; font-size: 11px !important; font-weight: 700; letter-spacing: .15em; }
.login-card h1 { margin: 18px 0 10px; font-size: clamp(28px, 6vw, 37px); letter-spacing: -.04em; line-height: 1.1; }
.login-card p { color: #a4a4ae; font-size: 14px; line-height: 1.65; }
.discord-login { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; padding: 13px 18px; color: #fff; background: #5865f2; border-radius: 11px; text-decoration: none; font-weight: 700; transition: background .18s, transform .18s; }
.discord-login:hover { background: #4752c4; transform: translateY(-1px); }
.discord-login svg { width: 20px; height: 20px; }
.login-card .login-note { margin: 17px 0 0; font-size: 11px; text-align: center; color: #777983; }
.team-discover-link { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; color: #b6bdc8; font-size: 11px; transition: color .18s; }
.team-discover-link span { transition: transform .18s; }
.team-discover-link:hover { color: #fff; }
.team-discover-link:hover span { transform: translateX(3px); }

.workspace { min-height: 100vh; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(18px, 5vw, 64px); border-bottom: 1px solid rgba(255,255,255,.04); }
.topbar-title { color: #e7e5ee; font-size: 14px; font-weight: 700; letter-spacing: -.025em; text-decoration: none; }
.account-button { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; color: #c5c5ce; cursor: pointer; font-size: 12px; }
.account-button img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: #202127; }
.blank-canvas { min-height: calc(100vh - 72px); }

.launcher { position: fixed; right: 28px; bottom: 26px; z-index: 10; display: grid; width: 54px; height: 54px; place-items: center; border: 0; border-radius: 50%; background: linear-gradient(145deg, #9174ff, #7352f4); box-shadow: 0 8px 30px #6e4bff55; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 34px #6e4bff75; }
.launcher svg { width: 23px; fill: none; stroke: white; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.widget { position: fixed; z-index: 9; right: 28px; bottom: 94px; display: flex; width: min(408px, calc(100vw - 32px)); height: min(660px, calc(100dvh - 124px)); min-height: 410px; flex-direction: column; overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.09); border-radius: 27px; background: var(--surface); box-shadow: 0 26px 90px #0009; animation: rise .2s ease-out; }
.widget-ambient-canvas { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 290px; opacity: .92; filter: blur(.25px); mix-blend-mode: screen; pointer-events: none; }
.widget.widget-closing { animation: widget-close .22s cubic-bezier(.4, 0, .8, .4) both; pointer-events: none; }
@keyframes widget-close { to { opacity: 0; filter: blur(5px); transform: translate3d(0, 12px, 0) scale(.96); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.widget-content { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3c3d46 transparent; }
.widget-content::-webkit-scrollbar { width: 5px; }
.widget-content::-webkit-scrollbar-thumb { border-radius: 10px; background: #393a44; }
.widget-nav { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); flex: 0 0 62px; border-top: 1px solid rgba(255,255,255,.035); background: #0b0c10; }
.widget-nav[hidden] { display: none; }
.nav-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; flex-direction: column; border: 0; background: transparent; color: #686970; cursor: pointer; font-size: 10px; }
.nav-button.active { color: #fff; font-weight: 700; }
.nav-icon { display: block; width: 17px; height: 17px; fill: currentColor; transition: color .18s, transform .18s; }
.nav-button:hover .nav-icon { transform: translateY(-1px); color: #c0b6ff; }
.nav-icon-message .message-dots { fill: var(--surface); }
.nav-icon-help .help-mark { fill: none; stroke: var(--surface); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-button.active .nav-icon-help .help-mark { stroke: #0b0c10; }
.nav-dot { position: absolute; top: 10px; left: calc(50% + 5px); width: 7px; height: 7px; border: 1px solid #0b0c10; border-radius: 50%; background: #6953ff; }

.home-view { padding: 24px 21px 22px; }
.home-topline { display: flex; height: 31px; align-items: center; justify-content: flex-end; gap: 12px; }
.team-avatars { display: flex; align-items: center; padding-right: 1px; }
.team-avatar-wrap { position: relative; isolation: isolate; width: 33px; height: 33px; margin-left: -8px; border: 2px solid var(--surface); border-radius: 50%; background: #282932; }
.team-avatar-wrap:focus-visible { outline: 2px solid #aab4c3; outline-offset: 2px; }
.team-avatar-wrap:first-child { margin-left: 0; }
.team-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.team-decoration { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.team-more { display: grid; width: 33px; height: 33px; margin-left: -6px; place-items: center; border: 2px solid var(--surface); border-radius: 50%; background: #24252d; color: #ecebf1; font-size: 10px; }
.greeting { margin: 30px 0 18px; }
.greeting h1 { margin: 0; color: #f4f4f6; font-size: 27px; font-weight: 700; letter-spacing: -.055em; line-height: 1.13; }
.greeting h1 span { color: #777883; font-size: 27px; }
.greeting h1 .wave-emoji { display: inline-block; width: 25px; height: 25px; margin-left: 9px; color: #fff; vertical-align: -4px; }
.greeting h1 .wave-emoji path { transform-box: view-box; transform-origin: 24px 64px; animation: greeting-wave 3.8s ease-in-out infinite; will-change: transform; }
.greeting h2 { margin: 0; color: #62636a; font-size: 27px; font-weight: 700; letter-spacing: -.055em; line-height: 1.13; }
.greeting p { max-width: 315px; margin: 11px 0 0; color: #92939d; font-size: 12px; line-height: 1.6; }
.support-home { display: flex; min-height: 100%; flex-direction: column; padding-top: 24px; }
.support-home.home-return { animation: main-page-arrive .56s cubic-bezier(.18,.78,.25,1) both; }
@keyframes main-page-arrive { from { opacity: 0; filter: blur(5px); transform: translate3d(0, 13px, 0) scale(.975); } to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } }
.support-home .greeting { margin: 22px 0 36px; }
.suggested-replies { margin: 0 0 18px; }
.suggested-replies .home-section-label { margin: 0 0 11px; color: #c5c7cf; font-size: 12px; font-weight: 600; }
.suggestion-list { display: flex; flex-wrap: wrap; gap: 7px; }
.suggestion-list button { padding: 8px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: #141518; color: #c6c8cf; cursor: pointer; font-size: 11px; transition: border-color .18s, background .18s, color .18s; }
.suggestion-list button:hover { border-color: rgba(87,157,232,.38); background: #17212d; color: #eef6ff; }
.panel-notice { display: flex; align-items: center; gap: 11px; margin: 0 0 14px; padding: 12px 14px; border: 0; border-radius: 13px; background: #17181e; }
.panel-notice-icon { display: block; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 8px; object-fit: contain; }
.closed-notice.panel-closed-enter { animation: panel-closed-enter .52s cubic-bezier(.16,1,.3,1) both; }
@keyframes panel-closed-enter { from { opacity: 0; filter: blur(7px); transform: translate3d(0, 13px, 0) scale(.985); } 70% { opacity: 1; filter: blur(0); transform: translate3d(0, -1px, 0) scale(1.003); } to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } }
.panel-notice h2 { margin: 0 0 5px; color: #f0f0f2; font-size: 13px; font-weight: 650; letter-spacing: -.015em; }
.panel-notice p { margin: 0; color: #a3a4ae; font-size: 11px; line-height: 1.55; }
.incident-notice { display: flex; width: 100%; min-height: 64px; align-items: center; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 15px; background: linear-gradient(120deg, #17181c, #101115 62%); color: inherit; text-align: left; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.12); transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.closed-notice { cursor: default; }
.closed-notice:hover { transform: none; border-color: rgba(255,255,255,.07); background: linear-gradient(120deg, #17181c, #101115 62%); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.incident-notice:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.16); background: linear-gradient(120deg, #1d1e23, #121317 62%); box-shadow: 0 11px 28px rgba(0,0,0,.2); }
.incident-notice:focus-visible { outline: 2px solid rgba(255,255,255,.55); outline-offset: 3px; }
.incident-notice-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.incident-notice-copy strong { overflow: hidden; color: #f1f1f2; font-size: 12px; font-weight: 650; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.incident-notice-copy > span { overflow: hidden; color: #92939c; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.closed-notice .incident-notice-copy > span { overflow: visible; text-overflow: clip; white-space: normal; }
.incident-notice-arrow { color: #aeb0b8; font-size: 23px; line-height: 1; transition: transform .2s; }
.incident-notice:hover .incident-notice-arrow { transform: translateX(3px); }
.incidents-view { min-height: 100%; animation: incidents-view-enter .4s cubic-bezier(.2,.8,.2,1) both; }
.incidents-view.incident-view-exit { animation: incident-view-leave .22s cubic-bezier(.4,0,.8,.4) both; pointer-events: none; }
.incidents-header { position: sticky; z-index: 2; top: 0; justify-content: center; background: linear-gradient(180deg, #101116, #0b0c10); }
.incidents-header .back-button { position: absolute; left: 16px; }
.incidents-header .conversation-heading { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.incidents-content { padding: 18px 22px 24px; }
.incident-list { display: flex; flex-direction: column; gap: 27px; }
.incident-card { padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; }
.incident-card.incident-card-float-up { animation: incident-card-float-up .48s cubic-bezier(.16,1,.3,1) both; }
.incident-card.incident-card-float-down { animation: incident-card-float-down .4s cubic-bezier(.4,0,.8,.4) both; pointer-events: none; }
.incident-card-author { display: flex; align-items: center; gap: 13px; }
.incident-card-avatar { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: #191a20; object-fit: cover; }
.incident-card-author-info { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.incident-card-posted-by { color: #858c9c; font-size: 10px; line-height: 1.3; }
.incident-card-name { display: flex; min-width: 0; align-items: center; gap: 6px; }
.incident-card-name > strong { overflow: hidden; color: #f0f1f4; font-size: 14px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.incident-badge-tooltip-anchor { position: relative; isolation: isolate; display: inline-flex; width: 16px; height: 17px; flex: 0 0 16px; align-items: center; justify-content: center; border-radius: 3px; color: #c2ccda; cursor: pointer; }
.incident-badge-tooltip-anchor:focus-visible { outline: 2px solid #b8c5d8; outline-offset: 2px; }
.incident-badge-icon { display: block; width: 14px; height: 14px; flex: 0 0 14px; }
.incident-badge-icon.team-owner-crown, .incident-badge-icon.team-cove-manager-badge, .incident-badge-icon.team-employee-badge { color: #c2ccda; }
.incident-badge-tooltip { position: fixed; z-index: 100; display: flex; align-items: center; gap: 7px; overflow: hidden; max-width: calc(100vw - 16px); padding: 7px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: #111318; box-shadow: 0 8px 24px rgba(0,0,0,.48); color: #eff1f5; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.incident-badge-tooltip[hidden] { display: none; }
.incident-badge-tooltip-icon { width: 14px; height: 14px; flex: 0 0 14px; color: #c2ccda; }
.incident-badge-tooltip::before { position: absolute; inset: -40% auto -40% -55%; width: 35%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent); content: ""; transform: skewX(-24deg); }
.incident-badge-tooltip.first-view::before { animation: team-badge-shine .75s cubic-bezier(.2,.65,.3,1) both; }
.incident-badge-tooltip::after { position: absolute; bottom: -4px; left: calc(50% - 4px); width: 7px; height: 7px; border-right: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); background: #111318; content: ""; transform: rotate(45deg); }
.incident-badge-tooltip.below::after { top: -4px; bottom: auto; border: 0; border-top: 1px solid rgba(255,255,255,.12); border-left: 1px solid rgba(255,255,255,.12); }
@keyframes team-badge-shine { from { left: -55%; } to { left: 125%; } }
.incident-card-username { overflow: hidden; color: #aeb8d2; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.incident-card-time { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; color: #aeb8d2; font-size: 11px; line-height: 1.4; }
.incident-card-time svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.incident-card > h2 { margin: 22px 0 0; color: #f0f1f4; font-size: 16px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.incident-card-details { margin: 9px 0 0; color: #aeb8d2; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.incident-card-title.incident-text-fade-out, .incident-card-details.incident-text-fade-out { animation: incident-text-fade-out .17s ease both; }
.incident-card-title.incident-text-fade-in, .incident-card-details.incident-text-fade-in { animation: incident-text-fade-in .28s cubic-bezier(.2,.8,.2,1) both; }
.panel-settings-button { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; padding: 7px; border: 0; border-radius: 50%; background: transparent; color: #a8a9b2; cursor: pointer; transition: color .18s, transform .2s cubic-bezier(.2,.8,.2,1); }
.panel-settings-button svg { width: 16px; height: 16px; fill: currentColor; }
.panel-settings-button:hover { transform: scale(1.12); color: #f1f1f1; }
.panel-settings-button:focus-visible, .panel-toggle:focus-visible, .panel-primary-button:focus-visible, .panel-danger-button:focus-visible { outline: 0; }
.panel-settings-view { min-height: 100%; background: #0b0c10; }
.panel-settings-view.panel-settings-enter { animation: incidents-view-enter .32s cubic-bezier(.2,.8,.2,1) both; }
.panel-settings-view > .conversation-header { position: sticky; z-index: 2; top: 0; justify-content: center; background: linear-gradient(180deg, rgba(16,17,22,.97), rgba(11,12,16,.94)); backdrop-filter: blur(16px); }
.panel-settings-view > .conversation-header .back-button { position: absolute; left: 16px; }
.panel-settings-content { display: flex; flex-direction: column; gap: 12px; padding: 24px 18px 30px; }
.panel-settings-section { padding: 16px; border: 0; border-radius: 16px; background: linear-gradient(145deg, rgba(24,25,31,.94), rgba(15,16,20,.97)); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.panel-settings-enter .panel-settings-section { animation: panel-option-enter .48s cubic-bezier(.16,1,.3,1) both; }
.panel-settings-enter .panel-availability-section { animation-delay: 70ms; }
.panel-settings-enter .panel-incidents-section { animation-delay: 145ms; }
.panel-settings-enter .panel-new-incident { animation-delay: 220ms; }
.panel-availability-section { transition: background .24s, box-shadow .24s; }
.panel-availability-section.panel-setting-changed { animation: panel-setting-confirm .42s ease-out; }
@keyframes panel-setting-confirm { 45% { background: #202126; box-shadow: 0 0 22px rgba(255,255,255,.045); } }
.panel-settings-heading { display: flex; align-items: center; gap: 11px; }
.panel-availability-copy, .panel-incidents-copy { min-width: 0; flex: 1; }
.panel-settings-heading h2, .panel-new-incident-heading h2 { margin: 0; color: #efedf4; font-size: 12px; font-weight: 650; letter-spacing: -.01em; }
.panel-settings-heading p, .panel-new-incident-heading p { margin: 4px 0 0; color: #90919c; font-size: 10px; line-height: 1.5; }
.panel-toggle { position: relative; width: 46px; height: 27px; flex: 0 0 46px; padding: 0; border: 0; border-radius: 20px; background: #25262b; cursor: pointer; transition: background .36s ease, box-shadow .36s ease, transform .2s ease; }
.panel-toggle:hover:not(:disabled) { transform: scale(1.04); }
.panel-toggle span { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: #93949c; box-shadow: 0 1px 4px #0009; transition: transform .38s cubic-bezier(.2,.85,.25,1), background .3s ease, box-shadow .3s ease; }
.panel-toggle.is-open { background: #5a5b60; box-shadow: 0 0 18px rgba(255,255,255,.07); }
.panel-toggle.is-open span { transform: translateX(19px); background: #f1f1f1; box-shadow: 0 1px 5px rgba(0,0,0,.5); }
.panel-toggle:disabled { cursor: wait; opacity: .82; }
.panel-incidents-section > .panel-settings-heading { margin: -2px 0 14px; padding: 0 0 13px; }
.panel-incident-count { display: none; }
.panel-incident-card { margin-top: 10px; padding: 14px; border: 0; border-radius: 13px; background: linear-gradient(145deg, #15161a, #101115); box-shadow: inset 0 1px rgba(255,255,255,.018); transition: background .24s, box-shadow .24s, transform .24s; }
.panel-incident-card:hover { background: linear-gradient(145deg, #191a1f, #111216); box-shadow: 0 9px 20px rgba(0,0,0,.14); transform: translateY(-1px); }
.panel-settings-enter .panel-incident-card { animation: panel-option-enter .42s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(170ms + var(--incident-index, 0) * 65ms); }
.panel-incident-card.panel-incident-enter { animation: incident-card-float-up .48s cubic-bezier(.16,1,.3,1) both; }
.panel-incident-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 13px; }
.panel-incident-card h3 { min-width: 0; margin: 0; overflow: hidden; color: #f0f0f2; font-size: 12px; font-weight: 650; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.panel-incident-form { display: grid; gap: 11px; }
.panel-settings-enter .panel-incident-form > label, .panel-settings-enter .panel-incident-actions { animation: panel-option-enter .38s cubic-bezier(.16,1,.3,1) both; }
.panel-settings-enter .panel-incident-form > label:nth-child(1) { animation-delay: calc(230ms + var(--incident-index, 0) * 65ms); }
.panel-settings-enter .panel-incident-form > label:nth-child(2) { animation-delay: calc(275ms + var(--incident-index, 0) * 65ms); }
.panel-settings-enter .panel-incident-form > .panel-incident-actions { animation-delay: calc(320ms + var(--incident-index, 0) * 65ms); }
.panel-incident-form label { display: grid; gap: 6px; color: #b8b8c2; font-size: 10px; font-weight: 500; }
.panel-incident-form label > span { color: #777984; font-size: 9px; font-weight: 400; }
.panel-incident-form input, .panel-incident-form textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 0; border-radius: 9px; outline: 0; background: rgba(8,9,12,.72); color: #eeedf2; font: inherit; font-size: 11px; line-height: 1.5; transition: background .18s; }
.panel-incident-form input::placeholder, .panel-incident-form textarea::placeholder { color: #62636d; }
.panel-incident-form input:hover, .panel-incident-form textarea:hover { background: #0b0c11; }
.panel-incident-form input:focus, .panel-incident-form textarea:focus { outline: 0; background: #0b0c11; box-shadow: none; }
.panel-incident-form [aria-invalid="true"] { box-shadow: none; }
.panel-incident-form textarea { min-height: 76px; overflow: hidden; resize: none; }
.panel-form-error { margin: 0; padding: 9px 10px; border: 0; border-radius: 9px; background: rgba(120,42,48,.11); color: #e8a2a6; font-size: 10px; line-height: 1.45; animation: panel-option-enter .24s ease-out both; transition: opacity .35s ease; }
.panel-form-error.is-fading { opacity: 0; }
.panel-form-error[hidden] { display: none; }
.panel-incident-actions { display: flex; justify-content: center; gap: 8px; padding-top: 3px; }
.panel-primary-button, .panel-danger-button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: rgba(255,255,255,.045); color: #c6c5cf; font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; transition: background .18s, color .18s, transform .18s, opacity .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease; }
.panel-primary-button { min-height: 36px; padding: 0 15px; background: linear-gradient(180deg, #303137, #222328); color: #f4f4f5; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.18); }
.panel-primary-button:hover:not(:disabled) { transform: translateY(-1px); background: linear-gradient(180deg, #3a3b42, #28292f); color: #fff; box-shadow: inset 0 1px rgba(255,255,255,.08), 0 6px 16px rgba(0,0,0,.24); }
.panel-primary-button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.panel-primary-button:disabled:not(.is-clean) { cursor: wait; opacity: .72; }
.panel-primary-button.is-clean { cursor: not-allowed; opacity: .38; }
.panel-primary-button.is-saving { cursor: wait; opacity: .72; }
.panel-danger-button { color: #d4a2a5; }
.panel-danger-button:hover { background: rgba(136,47,47,.17); color: #ffc5c5; }
.panel-settings-empty { padding: 13px 12px; border: 0; border-radius: 11px; background: rgba(8,9,12,.3); }
.panel-settings-empty strong { color: #d0d0d0; font-size: 10px; font-weight: 600; }
.panel-settings-empty p { margin: 3px 0 0; color: #858791; font-size: 9px; line-height: 1.45; }
.panel-new-incident-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; padding-bottom: 0; border-bottom: 0; }
.incidents-empty { padding: 42px 14px; color: #a7a6ad; text-align: center; }
.incidents-empty h2 { margin: 13px 0 6px; color: #e6e4e8; font-size: 14px; }
.incidents-empty p { margin: 0; font-size: 11px; }
@keyframes incidents-view-enter { from { opacity: 0; filter: blur(5px); transform: translateX(12px); } to { opacity: 1; filter: blur(0); transform: translateX(0); } }
@keyframes incident-view-leave { to { opacity: 0; filter: blur(4px); transform: translate3d(12px, 0, 0) scale(.99); } }
@keyframes incident-card-enter { from { opacity: 0; transform: translateY(11px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes incident-card-float-up { from { opacity: 0; filter: blur(7px); transform: translateY(22px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes incident-card-float-down { to { opacity: 0; filter: blur(7px); transform: translateY(22px); } }
@keyframes incident-text-fade-out { to { opacity: 0; filter: blur(6px); transform: translateY(-2px); } }
@keyframes incident-text-fade-in { from { opacity: 0; filter: blur(6px); transform: translateY(2px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes panel-incident-float-down { to { opacity: 0; filter: blur(7px); transform: translateY(22px); } }
.panel-incident-card.panel-incident-float-down { animation: panel-incident-float-down .4s cubic-bezier(.4,0,.8,.4) both; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .incidents-view, .incident-card, .incidents-empty,
  .panel-settings-enter .panel-settings-section,
  .panel-settings-enter .panel-incident-card, .panel-settings-enter .panel-incident-form > label,
  .panel-settings-enter .panel-incident-actions, .panel-incident-enter,
  .panel-setting-changed, .panel-closed-enter,
  .incident-view-exit, .incident-card-float-up, .incident-card-float-down,
  .panel-incident-float-down,
  .incident-text-fade-out, .incident-text-fade-in { animation: none; }
  .incident-badge-tooltip.first-view::before { animation: none; }
  .incident-notice, .incident-notice-arrow { transition: none; }
  .panel-settings-button, .panel-toggle, .panel-availability-section, .panel-incident-card { transition: none; }
}
.send-cta { display: flex; width: 100%; min-height: 51px; align-items: center; justify-content: space-between; padding: 0 17px; border: 0; border-radius: 28px; background: #191a20; text-align: left; cursor: pointer; transition: background .18s; }
.send-cta:hover { background: #23242c; }
.send-cta span { font-size: 14px; font-weight: 500; }
.send-cta .chevron { color: #aaaab3; font-size: 22px; font-weight: 400; }
.appeal-cta { margin-top: 16px; }
.home-section-label { margin: 21px 0 9px; color: #73747f; font-size: 12px; }
.recent-ticket { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 4px 0; border: 0; background: transparent; text-align: left; width: 100%; cursor: pointer; }
.ticket-symbol { display: grid; flex: 0 0 21px; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: #594be7; color: white; font-size: 11px; }
.recent-ticket strong { flex: 1; overflow: hidden; color: #e6e5ea; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.recent-ticket time { color: #777883; font-size: 11px; white-space: nowrap; }
.empty-recent { padding: 12px 2px; color: #777883; font-size: 12px; }
.appeal-unavailable { margin: 12px 2px 0; color: #9a9aa5; font-size: 12px; line-height: 1.5; }

.appeal-assistant { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.appeal-assistant .conversation-header { flex: 0 0 auto; }
.appeal-chat { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 10px; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.appeal-chat::-webkit-scrollbar { display: none; width: 0; height: 0; }
.appeal-message { display: flex; max-width: 86%; flex-direction: column; align-items: flex-start; gap: 4px; }
.appeal-message.user { align-self: flex-end; align-items: flex-end; }
.appeal-bubble { max-width: 100%; padding: 11px 13px; border-radius: 17px; background: #191a20; color: #eeedf1; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; animation: message-pop .26s cubic-bezier(.2,1.4,.4,1) both; }
.appeal-message.assistant .appeal-bubble { border-bottom-left-radius: 6px; }
.appeal-message.user .appeal-bubble { border-bottom-right-radius: 6px; background: #5143c9; color: #fff; }
.appeal-message-meta { padding: 0 4px; color: #858690; font-size: 10px; }
.appeal-composer { display: flex; min-width: 0; flex: 0 0 auto; align-items: flex-end; gap: 9px; margin: 7px 12px 13px; padding: 10px 10px 10px 14px; border-radius: 21px; background: #191a20; }
.appeal-composer textarea { min-width: 0; min-height: 29px; max-height: 144px; flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: #f2f1f4; font: inherit; font-size: 13px; line-height: 20px; transition: height .12s ease-out; }
.appeal-composer textarea:focus-visible { outline: 0; box-shadow: none; }
.appeal-composer textarea::placeholder { color: #81828d; }
.appeal-composer button { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 0; border-radius: 50%; background: #6250ec; color: white; cursor: pointer; font-size: 20px; }
.appeal-composer button:disabled { opacity: .5; }
.appeal-awaiting-claim { margin: 6px 13px 14px; padding: 13px 15px; border-radius: 14px; background: #191a20; color: #aaaab4; font-size: 12px; line-height: 1.5; text-align: center; }
.appeal-decision { width: 100%; max-width: 370px; justify-content: center; gap: 10px; margin: 2px auto; padding: 5px 10px; }
.appeal-decision .team-avatars { flex: 0 0 auto; }
.appeal-decision > span:last-child { min-width: 0; flex: 0 1 auto; color: #a5a5b0; font-size: 12px; line-height: 1.5; }

.messages-view { display: flex; height: 100%; min-height: 260px; flex-direction: column; padding: 18px 21px 18px; }
.view-title { margin: 1px 0 22px; text-align: center; font-size: 14px; font-weight: 700; }
.date-label { margin: 0 0 8px; color: #777883; font-size: 12px; }
.ticket-list { overflow: auto; }
.message-ticket { display: flex; width: 100%; align-items: center; gap: 11px; padding: 9px 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.message-ticket:hover strong { color: #bcb1ff; }
.message-ticket .ticket-symbol { width: 29px; height: 29px; flex-basis: 29px; font-size: 14px; }
.ticket-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.ticket-info strong { overflow: hidden; color: #f0eff4; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ticket-info small { color: #777883; font-size: 11px; }
.ticket-status { color: #858692; font-size: 11px; white-space: nowrap; }
.ticket-unread { width: 7px; height: 7px; margin: 0 1px; border-radius: 50%; background: #7356ff; }
.ask-question { align-self: center; display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding: 9px 15px; border: 0; border-radius: 22px; background: #f2f1f4; color: #121318; cursor: pointer; font-size: 13px; font-weight: 600; }
.ask-question svg { width: 14px; height: 14px; fill: currentColor; }
.messages-empty { margin: auto 0; color: #888994; font-size: 13px; text-align: center; line-height: 1.6; }

.help-view { padding: 19px 20px 24px; }
.help-view .view-title { margin-bottom: 18px; }
.help-search { width: 100%; padding: 12px 14px; border: 0; border-radius: 24px; outline: none; background: #202127; color: #f4f3f7; font-size: 13px; }
.help-search:focus { box-shadow: 0 0 0 2px #7258ff66; }
.help-search::placeholder { color: #9a9aa3; }
.help-subtitle { margin: 25px 0 10px; color: #898a95; font-size: 12px; }
.help-type { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.help-type strong { font-size: 13px; font-weight: 600; }
.help-type span { color: #8d8e99; font-size: 19px; }
.help-note { margin-top: 20px; color: #898a95; font-size: 12px; line-height: 1.65; }

.conversation { display: flex; height: 100%; min-height: 0; flex-direction: column; }
.conversation-header { display: flex; min-height: 62px; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.055); background: linear-gradient(180deg, #101116, #0b0c10); }
.conversation > .conversation-header { position: relative; justify-content: center; border-bottom: 0; }
.conversation > .conversation-header .conversation-heading { justify-content: center; text-align: center; }
.conversation > .conversation-header .back-button { position: absolute; left: 16px; }
.conversation > .conversation-header .help-header-spacer { position: absolute; right: 16px; }
.conversation-notice { position: relative; z-index: 1; flex: 0 0 auto; padding: 0 14px 3px; }
.conversation-notice .ticket-update { width: fit-content; max-width: 100%; min-height: 35px; justify-content: center; gap: 9px; margin: 0 auto; padding: 6px 12px; border: 1px solid rgba(157, 174, 199, .12); border-radius: 14px; background: rgba(15, 19, 27, .94); box-shadow: 0 9px 24px rgba(0, 0, 0, .2); backdrop-filter: blur(12px); }
.conversation-notice .ticket-update.message-enter { animation: conversation-notice-enter .58s cubic-bezier(.2,.8,.2,1) both; }
.conversation-notice .ticket-update > span:last-child { color: #c0c5cf; font-size: 11px; line-height: 1.4; }
.conversation-notice .team-avatars { flex: 0 0 auto; }
@keyframes conversation-notice-enter { from { opacity: 0; filter: blur(9px); transform: translate3d(0, 12px, 0) scale(.975); } 72% { opacity: 1; filter: blur(0); transform: translate3d(0, -1px, 0) scale(1.005); } to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } }
.back-button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #aaaab4; cursor: pointer; font-size: 20px; transition: background .18s, color .18s; }
.back-button:hover { background: #202127; color: #fff; }
.conversation-heading { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.conversation-heading .ticket-symbol { width: 23px; height: 23px; flex-basis: 23px; }
.notification-button { display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8a8b96; cursor: pointer; transition: color .18s, background .18s, transform .18s; }
.notification-button:hover { transform: translateY(-1px); background: #1b1c23; color: #e4dfff; }
.notification-button.enabled { color: #a99aff; }
.notification-button svg { width: 19px; height: 19px; overflow: visible; }
.notification-bell { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: fill .18s; }
.notification-button.enabled .notification-bell { fill: currentColor; }
.notification-clapper { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.conversation-messages { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 15px; overflow-y: auto; padding: 22px 18px; }
.chat-message-group { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; }
.chat-message-group.own { align-items: flex-end; }
.chat-message { display: flex; max-width: 87%; flex-direction: column; align-items: flex-start; gap: 4px; }
.chat-message.own { align-self: flex-end; align-items: flex-end; }
.chat-message.grouped-next { margin-bottom: 0; }
.chat-message.system { max-width: 90%; }
.chat-bubble { padding: 11px 13px; border-radius: 18px; background: #191a20; color: #eeedf1; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble strong { color: inherit; font-weight: 700; }
.chat-message.own .chat-bubble { background: #5143c9; }
.chat-message:not(.own).grouped-next .chat-bubble { border-bottom-left-radius: 7px; }
.chat-message:not(.own).grouped-previous .chat-bubble { border-top-left-radius: 7px; }
.chat-message.own.grouped-next .chat-bubble { border-bottom-right-radius: 7px; }
.chat-message.own.grouped-previous .chat-bubble { border-top-right-radius: 7px; }
.chat-meta { display: flex; align-items: center; gap: 6px; padding: 0 4px; color: #858690; font-size: 10px; }
.chat-meta-fade-out { animation: message-meta-fade-out .2s ease-out forwards; }
.chat-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.chat-image-gallery { display: flex; max-width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.chat-message.own .chat-image-gallery { justify-content: flex-end; }
.chat-image-thumb { display: block; max-width: 100%; width: fit-content; height: auto; max-height: 160px; overflow: hidden; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: zoom-in; transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1); }
.chat-image-thumb:hover { transform: scale(1.025); }
.chat-image-thumb img { display: block; max-width: min(220px, 100%); width: auto; height: auto; max-height: 160px; border-radius: inherit; object-fit: contain; }
.chat-image-thumb:focus-visible { outline: 2px solid #8999b2; outline-offset: 3px; }
.chat-video-gallery { display: flex; max-width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.chat-message.own .chat-video-gallery { justify-content: flex-end; }
.chat-video { display: block; max-width: min(360px, 100%); max-height: 260px; border-radius: 9px; background: #090a0d; }
.image-preview-dialog:not([open]) { display: none; }
.image-preview-dialog { position: fixed; inset: 0; display: grid; max-width: none; max-height: none; width: 100vw; height: 100dvh; place-items: center; overflow: hidden; padding: 32px; border: 0; background: transparent; opacity: 0; transform: scale(.985); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1); transition-behavior: allow-discrete; }
.image-preview-dialog[open] { opacity: 1; transform: scale(1); }
.image-preview-dialog[open]::backdrop { animation: image-preview-backdrop-in .2s ease both; }
.image-preview-dialog::backdrop { background: rgba(5, 7, 12, .88); backdrop-filter: blur(9px); }
.image-preview-dialog.image-preview-closing { opacity: 0; transform: scale(.985); }
.image-preview-dialog.image-preview-closing::backdrop { animation: image-preview-backdrop-out .18s ease both; }
.image-preview { display: block; max-width: min(calc(100vw - 64px), 1600px); max-height: calc(100dvh - 64px); width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 90px rgba(0, 0, 0, .5); }
.image-preview-close { position: fixed; z-index: 1; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; cursor: pointer; font-size: 29px; line-height: 1; transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1); }
.image-preview-close:hover { transform: scale(1.08); opacity: .75; }
.image-preview-close:focus-visible { outline: 2px solid #8999b2; outline-offset: 3px; }
@keyframes image-preview-backdrop-in { from { background: rgba(5, 7, 12, 0); backdrop-filter: blur(0); } to { background: rgba(5, 7, 12, .88); backdrop-filter: blur(9px); } }
@keyframes image-preview-backdrop-out { from { background: rgba(5, 7, 12, .88); backdrop-filter: blur(9px); } to { background: rgba(5, 7, 12, 0); backdrop-filter: blur(0); } }
.chat-attachments { display: flex; flex-wrap: wrap; gap: 7px; }
.chat-attachments a { padding: 7px 9px; border-radius: 8px; background: #22232a; color: #c5baff; font-size: 11px; }
.claim-event { display: flex; width: 100%; align-items: center; justify-content: center; gap: 9px; padding: 4px 8px; color: #858690; font-size: 11px; text-align: center; }
.claim-event strong { color: #c4c3cb; font-weight: 600; }
.claimed-avatar-wrap { position: relative; display: flex; flex: 0 0 18px; width: 18px; height: 18px; }
.claimed-avatar-wrap .chat-avatar { position: relative; z-index: 0; }
.claimed-decoration { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.chat-message.typing-message { max-width: max-content; align-self: flex-start; }
.typing-bubble { display: flex; min-width: 48px; min-height: 34px; align-items: center; justify-content: center; padding: 0 13px; border-radius: 18px; background: #191a20; }
.typing-dots { display: flex; align-items: center; gap: 4px; height: 14px; }
.typing-dots i { width: 4px; height: 4px; border-radius: 50%; background: #9a85ff; animation: typing-bounce .9s infinite ease-in-out; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { opacity: .4; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
.support-types { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 13px; border-top: 1px solid var(--line); }
.type-chip { padding: 9px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: #1b1c22; color: #edecf1; cursor: pointer; font-size: 11px; }
.type-chip:hover { border-color: #7258ff; }
.report-intake-chat { display: flex; flex-direction: column; gap: 12px; }
.report-intake-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 12px 3px; }
.report-intake-form label, .report-intake-form small { width: 100%; color: #92939d; font-size: 11px; }
.report-intake-form input { min-width: 0; flex: 1 1 150px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; outline: 0; background: #191a20; color: #f2f1f4; font-size: 12px; }
.report-intake-form input:focus { border-color: #7258ff; }
.report-intake-form .report-send-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: #24252d; color: #fff; cursor: pointer; transition: background .18s, transform .18s; }
.report-intake-form .report-send-icon:hover { transform: translateY(-1px); background: #30313a; }
.report-send-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.report-choice-buttons { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px; }
.report-choice-buttons button { min-height: 36px; padding: 0 14px; border: 1px solid #303136; border-radius: 999px; background: #191a1f; color: #e8e7ed; cursor: pointer; font-size: 11px; font-weight: 600; transition: background .18s, border-color .18s; }
.report-choice-buttons button:hover { border-color: #3b3c43; background: #222328; }
.report-server-picker { position: relative; width: min(100%, 340px); margin: 0 12px; }
.report-server-trigger { display: flex; width: 100%; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.055); border-radius: 12px; background: rgba(255,255,255,.035); color: #e7e6ec; text-align: left; cursor: pointer; font-size: 12px; }
.report-server-trigger:hover { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.055); }
.report-server-trigger > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-server-chevron { color: #92939d; font-size: 16px; }
.report-server-menu { position: absolute; z-index: 5; right: 0; bottom: calc(100% + 6px); left: 0; display: flex; max-height: min(260px, 35dvh); flex-direction: column; gap: 6px; overflow: hidden; padding: 7px; border: 1px solid rgba(255,255,255,.055); border-radius: 12px; background: #14151a; box-shadow: 0 14px 36px rgba(0,0,0,.42); animation: rise .2s cubic-bezier(.2,.75,.25,1); }
.report-server-menu > input { width: 100%; min-height: 37px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.045); border-radius: 8px; outline: 0; background: rgba(255,255,255,.04); color: #eeedf1; font-size: 12px; }
.report-server-menu > input:focus { border-color: rgba(255,255,255,.1); }
.report-server-options { display: flex; max-height: min(190px, 24dvh); flex-direction: column; gap: 2px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3c3d46 transparent; }
.report-server-option { width: 100%; min-height: 34px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: #dbdae1; text-align: left; cursor: pointer; font-size: 12px; }
.report-server-option:hover { background: rgba(255,255,255,.07); }
.report-server-empty { padding: 10px; color: #898a95; font-size: 11px; }
.report-server-custom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 2px 1px 9px; border-top: 1px solid rgba(255,255,255,.055); color: #92939d; font-size: 10px; }
.report-server-custom button { flex: 0 0 auto; padding: 7px 11px; border: 0; border-radius: 8px; background: rgba(255,255,255,.09); color: #f0eff3; cursor: pointer; font-size: 11px; font-weight: 600; }
.report-server-custom button:hover { background: rgba(255,255,255,.14); }
.closed-ticket-footer { width: calc(100% - 40px); flex: 0 0 auto; margin: auto 20px 16px; }
.closed-banner { margin: 0 0 10px; padding: 13px 14px; border-radius: 15px; background: #191a20; text-align: center; }
.closed-banner strong { display: block; font-size: 13px; }
.ticket-rating { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; overflow: visible; padding: 15px 15px 12px; border: 1px solid rgba(255,255,255,.06); border-radius: 18px; background: #191a20; color: #eeedf1; text-align: center; }
.ticket-rating > :not(.rating-confetti) { position: relative; z-index: 1; }
.ticket-rating > strong { color: #eeedf1; font-size: 14px; font-weight: 600; }
.rating-options { display: flex; justify-content: space-evenly; gap: 8px; padding: 2px 4px; }
.rating-option { display: grid; width: 36px; height: 36px; flex: 0 1 36px; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; filter: saturate(.65); opacity: .62; cursor: pointer; font-size: 21px; transition: filter .18s, opacity .18s, background .18s, transform .2s cubic-bezier(.2,1.5,.4,1), border-color .18s; }
.rating-option:hover { background: transparent; filter: saturate(1); opacity: 1; transform: translateY(-2px) scale(1.1); }
.rating-option.selected { border-color: transparent; background: transparent; filter: saturate(1.25); opacity: 1; transform: translateY(-2px) scale(1.2); animation: rating-face-pop .36s cubic-bezier(.2,1.6,.4,1) both; }
.rating-options.has-selection .rating-option:not(.selected) { filter: grayscale(.8) saturate(.35); opacity: .2; }
.rating-input-row { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 6px 5px 13px; border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: #121318; transition: border-color .18s, box-shadow .18s; }
.rating-input-row:focus-within { border-color: rgba(255,255,255,.09); box-shadow: none; }
.rating-input-row textarea { width: 100%; min-width: 0; max-height: 64px; flex: 1; resize: none; overflow-y: auto; padding: 6px 1px; border: 0; outline: 0; background: transparent; color: #eeedf1; font-size: 12px; line-height: 17px; text-align: left; }
.ticket-rating textarea:focus-visible, .ticket-rating .rating-option:focus-visible, .ticket-rating .rating-submit:focus-visible { outline: 0; outline-offset: 0; box-shadow: none; }
.rating-input-row textarea::placeholder { color: #898a95; }
.rating-submit { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #6250ec; color: #fff; cursor: pointer; font-size: 19px; line-height: 1; transition: transform .2s cubic-bezier(.2,1.5,.4,1), background .18s; }
.rating-submit:hover:not(:disabled) { transform: translateY(-1px) scale(1.06); background: #7868ff; }
.rating-submit:disabled { cursor: wait; opacity: .55; }
.ticket-rating small { min-height: 12px; color: #898a95; font-size: 10px; }
.rating-confetti { position: absolute; z-index: 0; width: 0; height: 0; overflow: visible; pointer-events: none; }
.rating-confetti i { position: absolute; top: 0; left: 0; width: var(--confetti-size); height: calc(var(--confetti-size) * 1.5); border-radius: 2px; background: var(--confetti-color); opacity: 0; animation: rating-confetti-burst .8s cubic-bezier(.1,.65,.3,1) var(--confetti-delay) both; }
.review-thanks-enter { animation: review-thanks-enter .42s cubic-bezier(.2,1.25,.35,1) both; }
.composer { display: flex; align-items: center; gap: 8px; margin: 6px 13px 14px; padding: 7px 8px 7px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 22px; background: #17181e; box-shadow: 0 6px 20px rgba(0,0,0,.12); transition: border-color .18s, background .18s, box-shadow .18s; }
.composer:focus-within { border-color: rgba(255,255,255,.07); background: #17181e; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.composer.has-attachments { align-items: stretch; flex-direction: column; gap: 5px; padding: 10px 9px 8px 13px; }
.composer-main { display: flex; width: 100%; min-width: 0; align-items: center; gap: 8px; }
.attachment-list { display: none; flex-wrap: wrap; gap: 6px; }
.has-attachments .attachment-list { display: flex; }
.attachment-preview { position: relative; display: block; width: 52px; height: 52px; overflow: visible; border-radius: 8px; background: #22232a; animation: message-pop .25s cubic-bezier(.2,1.4,.4,1) both; }
.attachment-preview > img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.attachment-preview .remove-attachment { position: absolute; z-index: 1; top: -6px; right: -6px; border: 2px solid #191a20; background: #090a0d; color: #f4f3f7; }
.attachment-chip { display: inline-flex; max-width: 100%; min-height: 28px; align-items: center; gap: 7px; padding: 3px 5px 3px 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: #22232a; color: #d9d8e0; font-size: 11px; }
.attachment-chip-icon { color: #b6a8ff; font-size: 13px; }
.attachment-chip-label { overflow: hidden; max-width: 245px; text-overflow: ellipsis; white-space: nowrap; }
.remove-attachment { display: grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #35363f; color: #e2e1e8; cursor: pointer; font-size: 15px; line-height: 1; }
.remove-attachment:hover { background: #5143c9; }
.composer textarea { display: block; width: 100%; min-width: 0; min-height: 31px; max-height: 120px; flex: 1 1 auto; align-self: stretch; resize: none; overflow-y: hidden; padding: 6px 0; border: 0; outline: 0; background: transparent; color: #f2f1f4; font-size: 13px; line-height: 19px; }
.composer textarea::placeholder { color: #81828d; }
.attach-button, .send-button { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #a8a8b2; cursor: pointer; font-size: 19px; }
.send-button { background: #7258ff; color: white; }
.send-button:disabled { opacity: .42; cursor: default; }
.banned-notice { padding: 13px 15px; border: 1px solid rgba(255, 110, 120, .14); border-radius: 14px; background: rgba(255, 110, 120, .07); color: #e5a4a9; font-size: 12px; line-height: 1.5; }
.conversation-banned { margin: 6px 13px 14px; text-align: center; }

.toast { position: fixed; z-index: 30; right: 20px; bottom: 20px; max-width: min(350px, calc(100vw - 40px)); padding: 12px 16px; border: 1px solid rgba(150,164,185,.15); border-radius: 14px; background: rgba(15,18,25,.94); box-shadow: 0 12px 36px rgba(0,0,0,.38); backdrop-filter: blur(14px); color: #e5e7ec; font-size: 12px; opacity: 0; filter: blur(7px); pointer-events: none; transform: translateY(12px) scale(.98); transition: opacity .38s ease, transform .42s cubic-bezier(.2,.8,.2,1), filter .38s ease; }
.toast.visible { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }

@media (max-width: 540px) {
  .topbar { height: 57px; }
  .blank-canvas { min-height: calc(100vh - 57px); }
  .launcher { right: 16px; bottom: 16px; width: 52px; height: 52px; }
  .widget { right: 8px; bottom: 78px; width: calc(100vw - 16px); height: min(720px, calc(100dvh - 94px)); min-height: 390px; border-radius: 23px; }
  .login-card { padding: 32px 25px; }
}

/* Conversation and Help Center polish */
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .2s ease, transform .24s cubic-bezier(.2,1.5,.45,1); }
button:hover { transform: translateY(-1px); }
button:active { transform: scale(.97); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: none; outline-offset: 0; }

.messages-view { padding-top: 21px; }
.ticket-list { flex: 1; }
.past-ticket-label { margin-top: 26px; }
.message-ticket { min-height: 47px; padding: 8px 0; }
.message-ticket .ticket-symbol { width: 31px; height: 31px; flex-basis: 31px; }
.message-ticket .ticket-status { margin-left: 3px; }

.help-view { padding: 18px 20px 24px; }
.help-title-row { display: flex; min-height: 22px; align-items: center; justify-content: center; position: relative; }
.help-title-row .view-title { margin: 0 0 17px; }
.help-manage-button { position: absolute; top: -7px; right: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 18px; background: #17181e; color: #cfcaff; cursor: pointer; font-size: 11px; }
.help-search { margin: 1px 0 14px; padding: 14px 18px; background: #191a20; font-size: 14px; }
.help-category-card { position: relative; display: flex; width: 100%; flex-direction: column; gap: 5px; padding: 15px 26px 15px 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.help-category-card + .help-category-card { margin-top: 8px; }
.help-category-card strong { color: #f2f1f6; font-size: 14px; font-weight: 700; }
.help-category-card span { color: #9b9ba5; font-size: 13px; line-height: 1.5; }
.help-category-card small { color: #777883; font-size: 11px; }
.help-category-card i, .help-article-link i { position: absolute; top: 50%; right: 4px; color: #858691; font-size: 22px; font-style: normal; transform: translateY(-50%); }
.help-contact { margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); }
.help-contact > p { margin: 0 0 9px; color: #9697a1; font-size: 12px; }
.help-contact-button { padding: 9px 14px; border: 0; border-radius: 20px; background: #f2f1f4; color: #131419; cursor: pointer; font-size: 12px; font-weight: 700; }
.help-detail-header { display: flex; min-height: 52px; align-items: center; justify-content: space-between; margin: -18px -20px 12px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.help-detail-header .conversation-heading { flex: 1; justify-content: center; }
.help-header-spacer { width: 32px; }
.help-category-intro { padding: 8px 0 10px; }
.help-category-intro h2 { margin: 2px 0 7px; font-size: 18px; }
.help-category-intro p, .help-article-summary { margin: 0 0 10px; color: #a0a0aa; font-size: 13px; line-height: 1.55; }
.help-category-intro small { color: #777883; font-size: 11px; }
.help-article-list { margin-top: 8px; }
.help-article-link { position: relative; display: flex; width: 100%; flex-direction: column; gap: 5px; padding: 13px 28px 13px 0; border: 0; border-top: 1px solid rgba(255,255,255,.045); background: transparent; text-align: left; cursor: pointer; }
.help-article-link strong { color: #e7e6ec; font-size: 13px; }
.help-article-link span { color: #9a9ba5; font-size: 12px; line-height: 1.45; }
.help-article-link i { right: 4px; }
.help-breadcrumb { margin: 2px 0 12px; padding: 0; border: 0; background: transparent; color: #8f7cff; cursor: pointer; font-size: 12px; }
.help-article { padding: 0 2px 26px; }
.help-article h1 { margin: 0 0 10px; font-size: 22px; letter-spacing: -.035em; line-height: 1.2; }
.help-article-summary { font-size: 14px; }
.help-article-content { margin-top: 21px; color: #d0cfd8; font-size: 14px; line-height: 1.75; }
.help-article-content p { margin: 0 0 16px; }

.help-editor { height: 100%; padding: 0; }
.help-editor-header { display: flex; min-height: 62px; align-items: center; gap: 10px; padding: 0 13px; border-bottom: 1px solid var(--line); }
.help-editor-header > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.help-editor-header strong { font-size: 13px; }
.help-editor-header small { color: #81828d; font-size: 10px; }
.help-save-button { padding: 8px 13px; border: 0; border-radius: 18px; background: #7258ff; color: white; cursor: pointer; font-size: 11px; font-weight: 700; }
.help-editor-body { overflow: auto; padding: 18px 16px 24px; }
.help-admin-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.help-admin-section-heading h2, .help-edit-form h2 { margin: 0; font-size: 15px; }
.help-admin-section-heading p { margin: 4px 0 0; color: #858691; font-size: 11px; }
.help-admin-section-heading > button, .help-admin-actions button, .help-edit-form > div > button:not(.help-save-button), .help-admin-row > button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 14px; background: #1a1b22; color: #d9d8e0; cursor: pointer; font-size: 10px; }
.help-admin-category { display: flex; width: 100%; align-items: center; justify-content: space-between; margin: 5px 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 12px; background: #111217; text-align: left; cursor: pointer; }
.help-admin-category.selected { border-color: #7258ff88; background: #201d36; }
.help-admin-category span, .help-admin-row span { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.help-admin-category strong, .help-admin-row strong { font-size: 12px; }
.help-admin-category small, .help-admin-row small { color: #858691; font-size: 10px; }
.help-admin-category i { color: #898a95; font-size: 18px; font-style: normal; }
.article-admin-heading { margin-top: 24px; }
.help-admin-row { display: flex; align-items: center; gap: 5px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.045); }
.help-admin-row > span { flex: 1; }
.help-admin-actions { display: flex; gap: 7px; margin-top: 10px; }
.help-admin-row .danger-button, .help-admin-actions .danger-button { color: #ed9caa; }
.help-edit-form { display: flex; flex-direction: column; gap: 11px; margin-top: 18px; padding: 14px; border: 1px solid rgba(114,88,255,.3); border-radius: 15px; background: #12121a; }
.help-edit-form label { display: flex; flex-direction: column; gap: 5px; color: #aaaab4; font-size: 11px; }
.help-edit-form input, .help-edit-form textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: #1b1c23; color: #f2f1f6; font-size: 12px; line-height: 1.5; resize: vertical; }
.help-edit-form > div { display: flex; gap: 7px; }

.conversation-header { min-height: 56px; }
.conversation-messages { gap: 13px; padding: 19px 16px; scrollbar-width: none; -ms-overflow-style: none; }
.conversation-messages::-webkit-scrollbar, .widget-content::-webkit-scrollbar, .ticket-list::-webkit-scrollbar, .help-editor-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.widget-content, .ticket-list, .help-editor-body { scrollbar-width: none; -ms-overflow-style: none; }
#widget-content.appeal-mode { overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.conversation-heading #conversation-type-label { display: inline-block; }
.conversation-heading #conversation-type-label.category-change { animation: category-change .55s cubic-bezier(.2,1.4,.4,1) both; }
.chat-message { max-width: 94%; }
.chat-message.message-enter { animation: message-slide-up .19s cubic-bezier(.2,.8,.2,1) both; }
.chat-message.pending-message { opacity: .78; }
.chat-message-row { display: flex; max-width: 100%; align-items: flex-start; gap: 8px; }
.chat-message.own { align-self: flex-end; }
.chat-message.own .chat-message-row { justify-content: flex-end; }
.chat-message.system { max-width: 92%; }
.chat-bubble { padding: 11px 14px; border-radius: 19px 19px 19px 7px; background: #191a20; font-size: 14px; line-height: 1.48; }
.chat-message.own .chat-bubble { border-radius: 19px 19px 7px 19px; background: #f1f0f3; color: #17181e; }
.chat-message.system .chat-bubble { background: #191a20; }
.access-request-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 2px; }
.access-request-actions button { min-height: 36px; padding: 0 14px; border: 1px solid #303136; border-radius: 999px; background: #191a1f; color: #e8e7ed; cursor: pointer; font-size: 11px; font-weight: 600; transition: background .18s, border-color .18s; }
.access-request-actions button:hover:not(:disabled) { border-color: #3b3c43; background: #222328; }
.access-request-actions button:focus-visible { outline: 2px solid rgba(166,151,255,.65); outline-offset: 2px; }
.access-request-actions button:disabled { cursor: wait; opacity: .58; }
.message-avatar-wrap { position: relative; display: block; flex: 0 0 30px; width: 30px; height: 30px; margin-top: 1px; }
.message-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.message-decoration { position: absolute; inset: -2px; width: 34px; height: 34px; object-fit: contain; pointer-events: none; }
.chat-meta { min-height: 15px; padding: 0 4px; gap: 4px; font-size: 10px; }
.chat-message.own .chat-meta { justify-content: flex-end; }
.waiting-teammate { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 2px 0 7px; color: #8f909a; font-size: 12px; }
.waiting-teammate .team-avatar-wrap, .waiting-teammate .team-more { width: 24px; height: 24px; margin-left: -8px; }
.waiting-teammate .team-avatar-wrap:first-child { margin-left: 0; }
.ticket-update { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 10px; padding: 5px 10px; color: #b6b5bf; font-size: 12px; line-height: 1.5; text-align: left; }
.ticket-update.message-enter { animation: message-slide-up .24s ease-out both; }
.ticket-update .team-avatars { flex: 0 0 auto; }
.ticket-update .team-avatar-wrap, .ticket-update .team-more { width: 23px; height: 23px; margin-left: -7px; }
.ticket-update .team-avatar-wrap:first-child { margin-left: 0; }
.transfer-update { width: 100%; max-width: 370px; justify-content: center; gap: 10px; margin: 2px auto; padding: 5px 10px; background: transparent; }
.transfer-update .team-avatars { flex: 0 0 auto; }
.transfer-update .team-avatar-wrap, .transfer-update .team-more { width: 23px; height: 23px; margin-left: -7px; }
.transfer-update .team-avatar-wrap:first-child { margin-left: 0; }
.transfer-update .claimed-avatar-wrap { flex: 0 0 23px; width: 23px; height: 23px; }
.transfer-update .claimed-avatar-wrap .chat-avatar, .transfer-update .claimed-avatar-wrap .claimed-decoration { width: 23px; height: 23px; }
.transfer-update > span:last-child { min-width: 0; flex: 0 1 auto; color: #a5a5b0; font-size: 12px; line-height: 1.5; }
.escalation-update { width: 100%; max-width: 370px; justify-content: center; gap: 10px; margin: 2px auto; padding: 5px 10px; }
.escalation-update .team-avatars { flex: 0 0 auto; }
.escalation-update .team-avatar-wrap, .escalation-update .team-more { width: 23px; height: 23px; margin-left: -7px; }
.escalation-update .team-avatar-wrap:first-child { margin-left: 0; }
.escalation-update > span:last-child { min-width: 0; flex: 0 1 auto; color: #a5a5b0; font-size: 12px; line-height: 1.5; }
.typing-message { display: flex; align-items: center; gap: 9px; color: #8f909a; font-size: 11px; }
.typing-bubble { min-width: 54px; min-height: 35px; background: #191a20; }
.typing-dots i { width: 5px; height: 5px; background: #898a95; }
.support-types { justify-content: center; }
.type-chip { padding: 9px 13px; border-radius: 22px; background: #f1f0f3; color: #17181e; font-size: 12px; }
.type-chip:hover { border-color: #a69aff; background: #dcd7ff; }

.composer { position: relative; isolation: isolate; display: flex; align-items: stretch; flex-direction: column; gap: 7px; margin: 7px 12px 13px; padding: 14px 13px 10px; border: 1px solid rgba(255,255,255,.045); border-radius: 24px; background: #0b0d12; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.composer::before { position: absolute; z-index: 0; inset: -1px; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--composer-angle), transparent 0deg 250deg, rgba(101,119,146,.08) 282deg, rgba(144,161,187,.7) 321deg, rgba(209,218,232,.9) 337deg, rgba(101,119,146,.16) 350deg, transparent 360deg); content: ""; opacity: 0; filter: blur(1.8px); pointer-events: none; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; transition: opacity .42s ease; }
.composer:focus-within { border-color: rgba(133,151,179,.2); background: #0b0d12; box-shadow: 0 8px 28px rgba(0,0,0,.24), 0 0 26px rgba(70,86,110,.08); }
.composer:focus-within::before { opacity: 1; animation: composer-edge-orbit 4.8s linear infinite, composer-edge-breathe 3s ease-in-out infinite; }
.composer > * { position: relative; z-index: 1; }
@property --composer-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes composer-edge-orbit { to { --composer-angle: 360deg; } }
@keyframes composer-edge-breathe { 0%, 100% { opacity: .58; filter: blur(2.5px); } 50% { opacity: 1; filter: blur(1px); } }
.composer.has-attachments { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
.composer-main { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.composer textarea { min-height: 27px; max-height: 120px; padding: 2px 4px; font-size: 14px; line-height: 21px; }
.composer textarea { background: transparent; }
.composer textarea:focus-visible { outline: 0; box-shadow: none; }
.composer-toolbar { display: flex; min-height: 38px; align-items: center; justify-content: space-between; }
.composer-tools { display: flex; align-items: center; gap: 8px; }
.attach-button, .emoji-button { display: grid; flex: 0 0 32px; width: 32px; height: 38px; padding: 0; place-items: center; color: #999aa5; }
.attach-button svg, .emoji-button svg { display: block; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.attach-button svg { width: 20px; height: 20px; }
.emoji-button svg path { fill: none; }
.composer .emoji-button { appearance: none; border: 0; border-radius: 6px; background: transparent; outline: 0; }
.composer .emoji-button:focus, .composer .emoji-button:focus-visible { background: transparent; outline: 0; box-shadow: none; }
.send-button { flex: 0 0 38px; width: 38px; height: 38px; background: #6250ec; transition: transform .26s cubic-bezier(.2,1.5,.45,1), background .18s, opacity .18s; }
.send-button:hover:not(:disabled) { transform: translateY(-2px) rotate(-4deg) scale(1.04); background: #7868ff; }
.send-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.send-button:disabled { opacity: 1; background: #6250ec; }
.emoji-picker { position: absolute; z-index: 4; bottom: 43px; left: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: min(300px, calc(100vw - 70px)); padding: 9px; border: 1px solid var(--line); border-radius: 14px; background: #202127; box-shadow: 0 12px 35px #0009; animation: message-pop .22s cubic-bezier(.2,1.4,.4,1) both; }
.emoji-picker[hidden] { display: none; }
.emoji-picker button { display: grid; min-width: 29px; min-height: 29px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 18px; }
.emoji-picker button:hover { background: #34343e; }
.attachment-list { gap: 6px; }
.attachment-chip { animation: message-pop .25s cubic-bezier(.2,1.4,.4,1) both; }

.help-standalone-page { display: grid; min-height: 100dvh; place-items: center; background: radial-gradient(ellipse at 20% 10%, #1b1740 0, transparent 42%), #08090c; }
.help-standalone-page .app-shell { display: grid; width: 100%; min-height: 100dvh; place-items: center; }
.widget.help-standalone { position: relative; inset: auto; width: min(460px, 100vw); height: min(900px, 100dvh); min-height: min(540px, 100dvh); border-radius: 24px; animation: help-panel-enter .48s cubic-bezier(.2,1.35,.4,1) both; }
.widget.help-standalone .widget-content { width: 100%; }
.widget.help-standalone .widget-nav { border-radius: 0 0 24px 24px; }

@keyframes message-pop { from { opacity: 0; transform: translateY(9px) scale(.94); } 65% { opacity: 1; transform: translateY(-2px) scale(1.015); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes message-slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes message-meta-fade-out { to { opacity: 0; transform: translateY(-2px); } }
@keyframes rating-face-pop { 0% { transform: translateY(0) scale(.72) rotate(-12deg); } 65% { transform: translateY(-4px) scale(1.2) rotate(5deg); } 100% { transform: translateY(-2px) scale(1.12) rotate(0); } }
@keyframes rating-confetti-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--confetti-x)), calc(-50% + var(--confetti-y))) rotate(var(--confetti-rotate)) scale(.65); } }
@keyframes review-thanks-enter { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes help-panel-enter { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes category-change { from { opacity: 0; transform: translateY(-8px) scale(.94); filter: blur(3px); } 65% { opacity: 1; transform: translateY(2px) scale(1.06); filter: blur(0); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }

@media (max-width: 540px) {
  .widget.help-standalone { width: 100vw; height: 100dvh; min-height: 0; border-radius: 0; }
  .widget.help-standalone .widget-nav { border-radius: 0; }
  .chat-message { max-width: 96%; }
  .message-avatar-wrap { flex-basis: 26px; width: 26px; height: 26px; }
  .message-avatar { width: 26px; height: 26px; }
  .message-decoration { width: 30px; height: 30px; }
}

:root { --purple: #7888a2; --accent: #8291a8; }
.login-screen { background: radial-gradient(ellipse at 20% 15%, #111a29 0, transparent 42%), #08090c; }
.login-screen:not([hidden]) .login-card { animation: login-card-arrive .56s cubic-bezier(.2,.75,.25,1) both; }
.login-card { border-color: rgba(255,255,255,.07); background: rgba(12,14,19,.96); box-shadow: 0 28px 110px rgba(0,0,0,.48); }
.login-card .eyebrow { color: #aab4c3 !important; }
.login-card h1 { max-width: 330px; font-size: clamp(29px, 6vw, 36px); }
.login-card > p:not(.eyebrow) { color: #969aa4; }
.discord-login { position: relative; min-height: 48px; gap: 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: #202938; box-shadow: 0 8px 24px rgba(0,0,0,.2); transition: background .2s, border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.discord-login:hover { border-color: rgba(255,255,255,.18); background: #2a3546; box-shadow: 0 11px 30px rgba(0,0,0,.28); }
.discord-login:focus-visible { outline: 2px solid #aab4c3; outline-offset: 3px; }
.discord-login.is-loading { pointer-events: none; background: #171c25; color: #c8cbd2; }
.discord-login-progress { display: none; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.22); border-top-color: #fff; border-radius: 50%; }
.discord-login.is-loading .discord-login-progress { display: block; animation: auth-spin .8s linear infinite; }
.login-card .login-note { margin-top: 18px; line-height: 1.65; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0 !important; color: #777d88 !important; font-size: 10px !important; }
.login-security span { color: #aab4c3; font-size: 14px; }
.login-feedback:not([hidden]) { margin: 15px 0 0; padding: 10px 12px; border: 1px solid rgba(170,180,195,.12); border-radius: 10px; background: rgba(255,255,255,.035); color: #c5c9d1; font-size: 12px; }
@keyframes login-card-arrive { from { opacity: 0; filter: blur(8px); transform: translateY(12px) scale(.985); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes auth-spin { to { transform: rotate(360deg); } }
.eyebrow { color: #aab5c7 !important; }
.launcher { background: linear-gradient(145deg, #45546b, #252f40); box-shadow: 0 8px 30px rgba(31,42,59,.45); }
.launcher:hover { box-shadow: 0 12px 34px rgba(48,63,86,.55); }
.nav-dot { background: #95a3b8; }

.login-screen { background: #08090c; }
.login-screen:not([hidden]) .login-card { animation: none; }
.login-card { width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.discord-login { display: inline-flex; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #d0d3da; font-size: 14px; font-weight: 500; transition: color .2s ease; }
.discord-login:hover { transform: none; border-color: transparent; background: transparent; box-shadow: none; color: #fff; }
.discord-login.is-loading { background: transparent; color: #9298a3; }
.discord-login:focus-visible { outline: 1px solid #aab4c3; outline-offset: 5px; }
.notification-button.enabled { color: #a5b0c1; }
.chat-message.own .chat-bubble, .appeal-message.user .appeal-bubble { background: #202938; }
.conversation .chat-message.own .chat-bubble { background: #f1f0f3; color: #17181e; }
.appeal-composer button, .rating-submit, .send-button, .report-intake-form button { background: #39485e; }
.rating-submit:hover:not(:disabled), .send-button:hover:not(:disabled), .report-intake-form button:hover { background: #52637c; }
.report-intake-form input:focus, .type-chip:hover { border-color: #7b8aa1; }
.chat-attachments a, .attachment-chip-icon { color: #b3bdce; }
.remove-attachment:hover { background: #3c4a60; }
.attachment-chip { border-color: rgba(154, 169, 193, .16); }

.login-screen:not([hidden]) { display: flex; min-height: 100svh; flex-direction: column; align-items: center; padding: 0 clamp(22px, 6vw, 80px); background: radial-gradient(ellipse at 76% 42%, rgba(34, 47, 67, .42), transparent 48%), #08090c; }
.public-nav, .public-footer { display: flex; width: min(100%, 1120px); align-items: center; justify-content: space-between; }
.public-nav { min-height: 82px; border-bottom: 1px solid rgba(255,255,255,.07); }
.public-brand { display: inline-flex; align-items: center; gap: 10px; color: #f0f2f6; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.public-brand::before { width: 9px; height: 9px; border-radius: 3px; background: #aab8cc; content: ""; transform: rotate(45deg); }
.public-brand span { color: #858d9b; font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.public-nav-link, .public-team-link { display: inline-flex; align-items: center; gap: 8px; color: #b9c1ce; font-size: 12px; transition: color .2s ease; }
.public-nav-link:hover, .public-team-link:hover { color: #fff; }
.public-nav-link span, .public-team-link span { transition: transform .2s ease; }
.public-nav-link:hover span { transform: translateX(3px); }
.public-team-link:hover span { transform: translate(2px, -2px); }
.public-landing { display: grid; width: min(100%, 960px); flex: 1; grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr); align-items: center; gap: clamp(56px, 10vw, 132px); padding: 82px 0 88px; }
.public-landing .login-card { width: auto; max-width: 460px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.login-card .eyebrow { margin: 0 0 22px; color: #aab8cc !important; font-size: 10px !important; letter-spacing: .18em; }
.public-landing .login-card h1 { max-width: 430px; margin: 0; color: #f0f2f6; font-size: clamp(38px, 5vw, 58px); letter-spacing: -.065em; line-height: 1.03; }
.public-landing .login-intro { max-width: 420px; margin: 20px 0 0; color: #a4aab5; font-size: 15px; line-height: 1.75; }
.public-landing .discord-login { display: inline-flex; width: 100%; min-height: 54px; justify-content: center; margin: 32px 0 0; padding: 0 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: #29364a; box-shadow: 0 10px 28px rgba(0,0,0,.2); color: #f5f7fa; font-size: 14px; font-weight: 650; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.public-landing .discord-login:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.24); background: #33445d; }
.discord-login-arrow { margin-left: auto; color: #c0c8d5; font-size: 17px; transition: transform .2s ease; }
.discord-login:hover .discord-login-arrow { transform: translateX(3px); }
.login-card .login-note { margin: 14px 0 0; color: #8a909b; font-size: 11px; line-height: 1.6; text-align: center; }
.login-security { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 18px 0 0 !important; color: #737b88 !important; font-size: 10px !important; }
.login-security span { color: #9eacbf; }
.login-feedback:not([hidden]) { margin: 18px 0 0; padding: 12px 14px; border: 1px solid rgba(190,199,213,.14); border-radius: 11px; background: rgba(255,255,255,.035); color: #c6ccd5; font-size: 12px; line-height: 1.55; }
.login-retry:not([hidden]) { display: block; margin: 10px auto 0; padding: 7px 10px; border: 1px solid rgba(190,199,213,.16); border-radius: 9px; background: #171b22; color: #d4d9e1; cursor: pointer; font-size: 11px; }
.login-retry:hover { background: #222a35; }
.public-overview { padding: 30px 0 30px 31px; border-left: 1px solid rgba(255,255,255,.1); }
.public-overview-label { margin: 0 0 18px; color: #91a0b5; font-size: 9px; font-weight: 700; letter-spacing: .17em; }
.public-overview h2 { max-width: 320px; margin: 0; color: #e6e9ee; font-size: clamp(23px, 3vw, 30px); letter-spacing: -.045em; line-height: 1.2; }
.public-steps { display: grid; gap: 24px; margin: 31px 0 28px; padding: 0; list-style: none; }
.public-steps li { display: grid; grid-template-columns: 27px 1fr; gap: 12px; }
.public-steps li > span { padding-top: 2px; color: #8795a8; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.public-steps strong { color: #d9dde4; font-size: 12px; font-weight: 600; }
.public-steps p { margin: 6px 0 0; color: #888f9b; font-size: 11px; line-height: 1.65; }
.public-team-link { padding-top: 17px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; }
.public-footer { min-height: 58px; border-top: 1px solid rgba(255,255,255,.06); color: #6c7480; font-size: 9px; letter-spacing: .12em; }
.public-footer a { color: #9ba4b2; font-size: 10px; letter-spacing: 0; transition: color .2s ease; }
.public-footer a:hover { color: #fff; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid #aebdd2; outline-offset: 3px; }

@media (max-width: 720px) {
  .login-screen:not([hidden]) { padding: 0 22px; }
  .public-nav { min-height: 68px; }
  .public-landing { width: min(100%, 480px); grid-template-columns: 1fr; gap: 46px; padding: 68px 0 55px; }
  .public-landing .login-card h1 { max-width: 390px; font-size: clamp(38px, 10vw, 52px); }
  .public-landing .login-intro { font-size: 14px; }
  .public-overview { padding: 0; border-left: 0; }
  .public-overview h2 { max-width: 400px; }
  .public-steps { gap: 18px; margin: 24px 0; }
  .public-footer { min-height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .public-nav-link span, .public-team-link span, .discord-login-arrow { transition: none; }
}

.login-screen:not([hidden]) { display: grid; min-height: 100svh; place-items: center; padding: 24px; background: #08090c; }
.public-login-action { display: grid; width: min(100%, 320px); justify-items: center; gap: 12px; }
.public-login-action .discord-login { display: inline-flex; min-height: 0; justify-content: center; gap: 9px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #e4e6eb; font-size: 15px; font-weight: 500; transition: color .2s ease; }
.public-login-action .discord-login:hover { transform: none; border: 0; background: transparent; box-shadow: none; color: #fff; }
.public-login-action .discord-login:focus-visible { outline: 2px solid #aebdd2; outline-offset: 7px; }
.public-login-action .discord-login.is-loading { background: transparent; color: #aab2bf; }
.public-login-action .discord-login-progress { width: 14px; height: 14px; }
.public-login-action .login-feedback:not([hidden]) { margin: 0; }
.public-login-action .login-retry:not([hidden]) { margin: 0; }
.help-save-button { background: #39485e; }
.help-admin-category.selected { border-color: rgba(132, 149, 174, .42); background: #151c27; }
.send-button:disabled { background: #333c4b; }
.typing-dots i { background: #9aa5b7; }
.type-chip:hover { border-color: #77869c; background: #202733; }
.intake-composer { margin-bottom: 14px; }
.intake-composer .composer-main { gap: 8px; }
.intake-composer #intake-message-input { min-height: 40px; max-height: 128px; }
.ticket-intake-chat { display: flex; min-height: 0; flex: 1; flex-direction: column; justify-content: flex-end; gap: 15px; }
.ticket-intake-chat .chat-message { animation: message-slide-up .22s ease-out both; }
.emoji-picker { display: flex; max-height: 290px; flex-direction: column; gap: 8px; padding: 10px; border-color: rgba(115, 177, 245, .12); background: #171b22; }
.emoji-picker > input { width: 100%; min-height: 34px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; outline: 0; background: #101318; color: #f2f1f4; font-size: 12px; }
.emoji-picker > input:focus { border-color: rgba(67, 143, 232, .55); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; overflow-y: auto; }
.emoji-grid button { min-width: 30px; min-height: 32px; }
.emoji-grid button:hover { background: #26364a; }
.intake-fallback-types { justify-content: flex-start; padding: 0 13px 13px; }
.intake-fallback-types .type-chip { border-color: rgba(115, 177, 245, .12); background: rgba(67, 143, 232, .09); color: #d8eaff; }
.intake-fallback-types .type-chip:hover { border-color: rgba(115, 177, 245, .4); background: rgba(67, 143, 232, .18); }
.support-home .intake-composer { margin: auto 0 0; padding: 12px 15px 9px; border: 1px solid rgba(255,255,255,.06); border-radius: 23px; background: #0b0d12; }
.support-home .intake-composer:focus-within { border-color: rgba(133,151,179,.2); background: #0b0d12; }
.support-home .intake-composer:focus-within::before { opacity: 1; }
.support-home .intake-composer #intake-message-input { background: transparent; }
.support-home .intake-composer .composer-main { gap: 8px; background: transparent; }
.support-home .intake-composer #intake-message-input { min-height: 30px; padding: 2px 0; }
.support-home .intake-composer .send-button:disabled { background: #25262a; color: #777980; }
.support-home .intake-composer .send-button:disabled svg { opacity: .72; }
.panel-opening .team-avatar-wrap,
.panel-opening .team-more,
.panel-opening .greeting h1,
.panel-opening .greeting p,
.panel-opening .incident-notice,
.panel-opening .closed-notice,
.panel-opening .banned-notice,
.panel-opening > .send-cta,
.panel-opening .suggested-replies > .home-section-label,
.panel-opening .suggestion-list button,
.panel-opening .intake-composer {
  animation: support-home-enter .68s cubic-bezier(.2, .85, .25, 1) both;
}
.panel-opening .team-avatar-wrap:nth-child(1) { animation-delay: 40ms; }
.panel-opening .team-avatar-wrap:nth-child(2) { animation-delay: 110ms; }
.panel-opening .team-avatar-wrap:nth-child(3) { animation-delay: 180ms; }
.panel-opening .team-avatar-wrap:nth-child(4) { animation-delay: 250ms; }
.panel-opening .team-more { animation-delay: 320ms; }
.panel-opening .greeting h1 { animation-delay: 170ms; }
.panel-opening .greeting h2 { animation: support-home-enter .68s cubic-bezier(.2, .85, .25, 1) 230ms both; }
.panel-opening .greeting p { animation-delay: 300ms; }
.panel-opening .incident-notice,
.panel-opening .closed-notice,
.panel-opening .banned-notice,
.panel-opening > .send-cta,
.panel-opening .suggested-replies > .home-section-label { animation-delay: 390ms; }
.panel-opening .suggestion-list button:nth-child(1) { animation-delay: 460ms; }
.panel-opening .suggestion-list button:nth-child(2) { animation-delay: 520ms; }
.panel-opening .suggestion-list button:nth-child(3) { animation-delay: 580ms; }
.panel-opening .suggestion-list button:nth-child(4) { animation-delay: 640ms; }
.panel-opening .closed-notice { animation-delay: 390ms; }
.panel-opening .intake-composer { animation-delay: 760ms; }
@keyframes support-home-enter {
  0% { opacity: 0; filter: blur(8px); transform: translate3d(0, 18px, 0) scale(.94); }
  62% { opacity: 1; filter: blur(1px); transform: translate3d(0, -2px, 0) scale(1.015); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes greeting-wave {
  0%, 100% { transform: rotate(0); }
  18% { transform: rotate(6deg); }
  36% { transform: rotate(-4deg); }
  54% { transform: rotate(5deg); }
  72% { transform: rotate(-3deg); }
  88% { transform: rotate(2deg); }
}
.topbar-actions { position: relative; display: flex; align-items: center; }
.account-button { padding: 5px 3px 5px 6px; border-radius: 9px; transition: color .18s, background .18s; }
.account-button:hover, .account-button[aria-expanded="true"] { background: rgba(255,255,255,.055); color: #fff; }
.account-button:focus-visible, .account-menu-item:focus-visible { outline: 2px solid rgba(164,148,255,.75); outline-offset: 3px; }
.account-chevron { width: 13px; height: 13px; fill: none; stroke: #81828d; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.account-button[aria-expanded="true"] .account-chevron { transform: rotate(180deg); }
.account-menu { position: absolute; z-index: 20; top: calc(100% + 11px); right: 0; display: grid; width: 176px; padding: 6px; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(18,19,24,.97); box-shadow: 0 18px 48px rgba(0,0,0,.48); transform-origin: top right; backdrop-filter: blur(18px); }
.account-menu:not([hidden]) { animation: account-menu-enter .18s cubic-bezier(.2,.75,.25,1) both; }
@keyframes account-menu-enter { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.account-menu-item { display: flex; width: 100%; min-height: 38px; align-items: center; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: #c7c7d0; font-size: 12px; text-align: left; text-decoration: none; cursor: pointer; transition: color .16s, background .16s; }
.account-menu-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.suggestion-list button:hover { border-color: rgba(153,166,187,.3); background: #171d26; color: #f0f2f6; }
.help-breadcrumb { color: #aeb8c7; }
.help-search:focus, .emoji-picker > input:focus { box-shadow: 0 0 0 1px rgba(142,157,180,.34); border-color: rgba(142,157,180,.34); }
.emoji-picker { border-color: rgba(147,160,181,.14); background: #11151c; }
.emoji-picker > input { background: #0b0e13; }
.emoji-grid button:hover { background: #202733; }
.intake-fallback-types .type-chip { border-color: rgba(147,160,181,.14); background: rgba(147,160,181,.07); color: #d5dae3; }
.intake-fallback-types .type-chip:hover { border-color: rgba(147,160,181,.32); background: rgba(147,160,181,.13); }
.help-edit-form { border-color: rgba(147,160,181,.2); background: #0e1117; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}