.support-launcher {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    z-index: 800;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: .9rem 1.2rem;
    background: var(--brand);
    color: var(--text-on-brand);
    box-shadow: 0 6px 24px rgba(28, 76, 200, .26);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.support-launcher:hover { background: var(--brand-dark); transform: translateY(-1px); }
.support-count { min-width: 1.25rem; padding: .1rem .3rem; border-radius: 999px; background: var(--card); color: var(--brand-dark); text-align: center; font-size: .75rem; }
.support-preview {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 4.25rem);
    z-index: 800;
    width: min(320px, calc(100vw - 2.5rem));
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    color: var(--fg);
    box-shadow: 0 8px 30px rgba(15, 25, 45, .2);
    overflow: hidden;
}
.support-preview, .support-preview * { box-sizing: border-box; }
.support-preview[hidden] { display: none !important; }
.support-preview button { font: inherit; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.support-preview-open { display: block; width: 100%; min-width: 0; padding: .9rem 3.1rem .85rem .95rem; border: 0; background: transparent; color: inherit; text-align: left; }
.support-preview-open:hover { background: var(--surface-soft); }
.support-preview-heading { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.support-preview-heading strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; font-weight: 700; }
.support-preview-count { flex: none; color: var(--muted); font-size: .68rem; }
.support-preview-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 3.1em; margin: .45rem 0 .6rem; overflow: hidden; overflow-wrap: anywhere; white-space: normal; font-size: .82rem; line-height: 1.55; }
.support-preview-action { display: inline-flex; align-items: center; gap: .4rem; color: var(--brand); font-size: .73rem; font-weight: 700; }
.support-preview-dismiss { position: absolute; top: .2rem; right: .2rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.4rem !important; line-height: 1; }
.support-preview-dismiss:hover { background: var(--surface-tile); color: var(--fg); }
.support-preview-open:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; border-radius: 13px; }
.support-preview-dismiss:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.support-panel {
    position: fixed;
    inset: auto max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) auto;
    width: min(440px, calc(100vw - 2.5rem));
    height: min(730px, calc(100dvh - 2.5rem));
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    color: var(--fg);
    box-shadow: 0 20px 75px rgba(15, 25, 45, .25);
    overflow: hidden;
    font: inherit;
}
.support-panel[open] { display: flex; flex-direction: column; }
.support-panel::backdrop { background: rgba(20, 30, 50, .2); }
.support-panel *, .support-ticket-upload * { box-sizing: border-box; }
.support-panel [hidden], .support-ticket-upload [hidden], .support-count[hidden] { display: none !important; }
.support-panel button, .support-panel textarea, .support-panel input { font: inherit; }
.support-panel button, .support-panel a { -webkit-tap-highlight-color: transparent; }
.support-panel button:focus-visible, .support-panel a:focus-visible, .support-launcher:focus-visible, .support-attach-button:focus-within, .support-ticket-dropzone:focus-within { outline: 3px solid var(--brand); outline-offset: 3px; }
.support-panel-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.2rem 1.15rem; border-bottom: 1px solid var(--border); background: var(--surface-header); }
.support-panel-brand { display: flex; align-items: center; gap: .65rem; }
.support-presence { width: .65rem; height: .65rem; flex: none; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft); }
.support-panel .support-eyebrow { margin: 0 0 .2rem; color: var(--muted); font-size: .64rem; letter-spacing: .12em; font-weight: 750; }
.support-panel h2 { margin: 0; font-size: 1.04rem; line-height: 1.3; }
.support-icon-button { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 1.5rem !important; line-height: 1; cursor: pointer; }
.support-icon-button:hover { background: var(--surface-tile); color: var(--fg); }
.support-home { flex: 1; min-height: 0; padding: 1.25rem; overflow-y: auto; overscroll-behavior: contain; }
.support-welcome h3 { margin: .1rem 0 .45rem; font-size: 1.55rem; letter-spacing: -.035em; }
.support-welcome p { margin: 0; color: var(--muted); font-size: .87rem; line-height: 1.6; }
.support-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.2rem 0 1.5rem; }
.support-quick-actions > a, .support-quick-actions > button { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .9rem .8rem; border: 1px solid var(--border); border-radius: 11px; color: var(--fg); background: var(--surface-alt); text-decoration: none; text-align: left; font-size: .84rem; font-weight: 700; cursor: pointer; }
.support-quick-actions > a:hover { border-color: var(--brand); background: var(--brand-soft); }
.support-quick-actions > .support-start-chat { grid-column: 1 / -1; padding: 1rem; color: var(--text-on-brand); border-color: var(--brand); background: var(--brand); }
.support-quick-actions > .support-start-chat:hover { background: var(--brand-dark); }
.support-quick-actions > a > span:first-child, .support-start-chat > span:first-child { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 8px; color: var(--brand); background: var(--brand-soft); font-size: 1.15rem; }
.support-start-chat > span:first-child { color: inherit; background: rgba(255, 255, 255, .16); }
.support-quick-actions small { display: block; margin-top: .25rem; color: var(--muted); font-size: .73rem; font-weight: 400; }
.support-start-chat small { color: inherit; opacity: .85; }
.support-history-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.support-history-heading h3 { margin: 0; font-size: .86rem; }
.support-text-button { border: 0; padding: .35rem 0; color: var(--brand); background: transparent; font-size: .76rem !important; cursor: pointer; }
.support-empty { color: var(--muted); font-size: .83rem; line-height: 1.6; padding: .9rem 0; }
.support-conversations { display: grid; gap: .6rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.support-conversation { display: flex; width: 100%; align-items: center; gap: .75rem; border: 1px solid var(--border); border-radius: 10px; padding: .85rem; background: var(--card); color: var(--fg); text-align: left; cursor: pointer; }
.support-conversation:hover { background: var(--surface-soft); border-color: var(--brand); }
.support-conversation-main { flex: 1; min-width: 0; }
.support-conversation strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; font-weight: 650; }
.support-conversation small { display: block; margin-top: .35rem; color: var(--muted); font-size: .72rem; }
.support-conversation .support-count { flex: none; color: var(--text-on-brand); background: var(--brand); }
.support-conversation-arrow { color: var(--muted); }
.support-thread { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.support-thread-heading { display: flex; flex: 0 0 auto; align-items: center; gap: .5rem; padding: .8rem .7rem; border-bottom: 1px solid var(--border); }
.support-thread-heading > div { min-width: 0; flex: 1; }
.support-thread-heading h3 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.support-thread-heading p { margin: .25rem 0 0; color: var(--muted); font-size: .7rem; }
.support-call-link { flex: none; margin-right: .3rem; border: 1px solid var(--border); border-radius: 7px; padding: .4rem .55rem; font-size: .72rem; font-weight: 650; color: var(--brand); text-decoration: none; }
.support-call-link:hover { background: var(--brand-soft); }
.support-messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem .85rem; background: var(--surface-soft); }
.support-message { max-width: 88%; margin: 0 0 1rem; }
.support-message-customer { margin-left: auto; }
.support-message-label { margin-bottom: .3rem; color: var(--muted); font-size: .67rem; }
.support-message-customer .support-message-label { text-align: right; }
.support-message-body { display: grid; gap: .5rem; padding: .75rem .85rem; border: 1px solid var(--border); border-radius: 11px 11px 11px 3px; background: var(--card); font-size: .84rem; line-height: 1.55; overflow-wrap: anywhere; }
.support-message-customer .support-message-body { color: var(--text-on-brand); background: var(--brand); border-color: var(--brand); border-radius: 11px 11px 3px 11px; }
.support-message-text { margin: 0; white-space: pre-wrap; }
.support-message-system { max-width: 100%; text-align: center; }
.support-message-system .support-message-body { display: block; padding: .45rem .75rem; color: var(--muted); border: 0; background: transparent; font-size: .75rem; }
.support-message-status { display: block; margin-top: .3rem; color: var(--muted); font-size: .67rem; text-align: right; }
.support-message-attachment { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 7px; color: inherit; text-decoration: none; font-size: .76rem; overflow-wrap: anywhere; }
.support-message-attachment:hover { text-decoration: underline; }
.support-message-attachment img { display: block; max-width: 100%; max-height: 200px; object-fit: contain; border-radius: 5px; }
.support-message-attachment.is-image { display: block; padding: .25rem; }
.support-message-attachment.is-image span { display: block; margin: .35rem; }
.support-typing { display: flex; flex: 0 0 auto; align-items: center; gap: .5rem; min-height: 2rem; padding: .4rem .9rem; color: var(--muted); background: var(--surface-soft); font-size: .73rem; line-height: 1.4; overflow-wrap: anywhere; }
.support-typing-dots { display: inline-flex; flex: none; align-items: center; gap: 3px; height: .8rem; }
.support-typing-dots > span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.support-composer { flex: 0 0 auto; padding: .8rem; border-top: 1px solid var(--border); background: var(--card); }
.support-composer textarea { display: block; width: 100%; min-height: 3rem; max-height: 9rem; resize: vertical; padding: .45rem .35rem; border: 0; border-radius: 7px; background: var(--card); color: var(--fg); font-size: .85rem; line-height: 1.5; }
.support-composer textarea:focus { outline: 2px solid var(--brand-soft); }
.support-composer-actions { display: flex; align-items: center; gap: .45rem; margin-top: .4rem; }
.support-composer-actions > small { flex: 1; color: var(--muted); font-size: .65rem; }
.support-attach-button { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 7px; color: var(--muted); cursor: pointer; overflow: hidden; }
.support-attach-button:hover { background: var(--brand-soft); color: var(--brand); }
.support-attach-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.support-send { display: inline-flex; align-items: center; gap: .65rem; flex: none; padding: .55rem .8rem; border: 0; border-radius: 8px; color: var(--text-on-brand); background: var(--brand); font-size: .8rem !important; font-weight: 700 !important; cursor: pointer; }
.support-send:hover { background: var(--brand-dark); }
.support-panel button:disabled { cursor: wait; opacity: .6; }
.support-panel-notice { flex: 0 0 auto; max-height: 5rem; padding: .6rem 1rem; color: var(--fg); background: var(--warning-surface); border-top: 1px solid var(--warning-border); overflow-y: auto; font-size: .75rem; line-height: 1.5; }
.support-panel-notice.is-error { color: var(--danger); }
.support-panel-footer { flex: 0 0 auto; padding: .65rem .8rem; border-top: 1px solid var(--border); color: var(--muted); text-align: center; font-size: .63rem; background: var(--card); }
.support-file-previews { display: flex; flex-wrap: wrap; gap: .45rem; max-height: 8rem; padding: 0 0 .6rem; overflow-y: auto; }
.support-file-preview { display: flex; align-items: center; gap: .45rem; max-width: 100%; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 8px; color: var(--fg); background: var(--surface-alt); }
.support-file-preview img { width: 2rem; height: 2rem; border-radius: 4px; object-fit: cover; }
.support-file-preview-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.support-file-preview button { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: transparent; font-size: 1.1rem; cursor: pointer; }
.support-file-preview button:hover { color: var(--danger); background: var(--brand-soft); }
.support-composer.is-dragover, .support-ticket-dropzone.is-dragover { outline: 2px dashed var(--brand); outline-offset: -4px; background: var(--brand-soft); }
.support-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.support-ticket-upload { grid-column: 1 / -1; display: grid; gap: .6rem; }
.support-ticket-dropzone { display: grid; gap: .55rem; padding: 1rem; border: 1px dashed var(--border); border-radius: 9px; background: var(--surface-alt); }
.servicehub-form .support-ticket-dropzone input { border: 0; padding: 0; background: transparent; }
.support-ticket-dropzone span { font-weight: 700; }
.support-ticket-upload p, .support-ticket-dropzone small { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.5; font-weight: 400; }
.support-ticket-upload .support-upload-error { color: var(--danger); }
.support-ticket-upload .support-file-previews { max-height: none; padding-bottom: 0; }
@media (max-width: 520px) {
    .support-launcher { right: max(.9rem, env(safe-area-inset-right)); bottom: max(.9rem, env(safe-area-inset-bottom)); padding: .8rem 1rem; }
    .support-preview { right: max(.9rem, env(safe-area-inset-right)); bottom: calc(max(.9rem, env(safe-area-inset-bottom)) + 4rem); width: min(320px, calc(100vw - 1.8rem)); }
    .support-panel { inset: 0; width: 100%; height: 100dvh; border: 0; border-radius: 0; padding-top: env(safe-area-inset-top); }
    .support-panel-footer { padding-bottom: max(.65rem, env(safe-area-inset-bottom)); }
    .support-home { padding: 1.1rem; }
}
@media (max-height: 640px) {
    .support-panel-header { padding-top: .75rem; padding-bottom: .75rem; }
    .support-thread-heading { padding-top: .55rem; padding-bottom: .55rem; }
    .support-panel > .browser-notifications { max-height: 7rem; margin-bottom: .35rem; overflow-y: auto; overscroll-behavior: contain; }
    .support-panel-footer { padding-top: .4rem; padding-bottom: max(.4rem, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
    .support-launcher { transition: background .15s, transform .15s; }
    .support-panel[open] { animation: support-panel-enter .17s ease-out; }
    .support-typing-dots > span { animation: support-typing-pulse 1.2s ease-in-out infinite; }
    .support-typing-dots > span:nth-child(2) { animation-delay: .15s; }
    .support-typing-dots > span:nth-child(3) { animation-delay: .3s; }
    @keyframes support-typing-pulse { 0%, 60%, 100% { opacity: .45; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
    @keyframes support-panel-enter { from { opacity: .6; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}