/* ============================================================
   NEXUS SUPPORT — custom floating widget + contact page
   Matches the "Signal Infrastructure" design system (redesign.css):
   dark panels, mint (#46F8D4) / cyan (#00A9FF) accents, Switzer + mono.
   Self-contained: relies only on the CSS vars already defined in redesign.css,
   with safe fallbacks so it also works standalone (e.g. manual pages).
   ============================================================ */

:root {
    --sw-mint: var(--mint, #46F8D4);
    --sw-cyan: var(--cyan, #00A9FF);
    --sw-panel: var(--panel-2, #0E1626);
    --sw-panel-2: var(--panel, #0B121F);
    --sw-ink: var(--ink, #05080F);
    --sw-text: var(--text, #E9EFF8);
    --sw-dim: var(--text-dim, #93A1B5);
    --sw-faint: var(--text-faint, #5C6A7E);
    --sw-line: var(--line, rgba(148,170,200,.13));
    --sw-line-2: var(--line-strong, rgba(148,170,200,.28));
    --sw-font: var(--f-body, 'Switzer', -apple-system, sans-serif);
    --sw-mono: var(--f-mono, 'JetBrains Mono', ui-monospace, monospace);
}

/* ---------- Floating launcher button ---------- */
.sw-launcher {
    position: fixed; right: 22px; bottom: 22px; z-index: 9998;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 18px 13px 15px; border-radius: 999px;
    background: linear-gradient(135deg, var(--sw-cyan), var(--sw-mint));
    color: #04121f; font-family: var(--sw-font); font-weight: 700; font-size: .9rem;
    box-shadow: 0 10px 34px rgba(0,169,255,.42), 0 2px 10px rgba(0,0,0,.35);
    cursor: pointer; border: 0;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, opacity .2s;
}
.sw-launcher:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 42px rgba(70,248,212,.5); }
.sw-launcher:active { transform: scale(.97); }
.sw-launcher svg { width: 20px; height: 20px; flex-shrink: 0; }
.sw-launcher .sw-launcher-close { display: none; }
body.sw-open .sw-launcher .sw-launcher-label,
body.sw-open .sw-launcher .sw-launcher-open { display: none; }
body.sw-open .sw-launcher .sw-launcher-close { display: inline-flex; }
@media (max-width: 520px) { .sw-launcher .sw-launcher-label { display: none; } .sw-launcher { padding: 15px; } }

/* ---------- Panel ---------- */
.sw-panel {
    position: fixed; right: 22px; bottom: 88px; z-index: 9999;
    width: 380px; max-width: calc(100vw - 32px);
    max-height: min(620px, calc(100vh - 120px));
    display: flex; flex-direction: column;
    background: var(--sw-panel); border: 1px solid var(--sw-line-2);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.2);
    font-family: var(--sw-font); color: var(--sw-text);
    opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none;
    transition: opacity .24s ease, transform .24s cubic-bezier(.34,1.3,.64,1);
}
body.sw-open .sw-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
@media (max-width: 520px) {
    .sw-panel { right: 8px; left: 8px; bottom: 84px; width: auto; max-height: calc(100vh - 104px); }
}

/* When the home's mobile sticky CTA bar is visible, lift the launcher (and its
   panel) above it so the two never overlap. :has() is supported by all current
   browsers; older ones just keep the default position. */
@media (max-width: 760px) {
    body:has(.mobile-cta.visible) .sw-launcher { bottom: calc(76px + env(safe-area-inset-bottom)); }
    body:has(.mobile-cta.visible) .sw-panel { bottom: calc(142px + env(safe-area-inset-bottom)); }
}

/* Header */
.sw-head {
    padding: 18px 20px 16px; position: relative;
    background:
        radial-gradient(120% 100% at 0% 0%, rgba(0,169,255,.16), transparent 60%),
        radial-gradient(120% 120% at 100% 0%, rgba(70,248,212,.14), transparent 60%),
        var(--sw-panel-2);
    border-bottom: 1px solid var(--sw-line);
}
.sw-head-title { display: flex; align-items: center; gap: 9px; font-family: var(--sw-font); font-weight: 700; font-size: 1.05rem; }
.sw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sw-mint); box-shadow: 0 0 10px var(--sw-mint); animation: sw-blink 1.8s infinite; }
.sw-head-sub { margin-top: 5px; font-size: .82rem; color: var(--sw-dim); line-height: 1.5; }
@keyframes sw-blink { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Body (scrolls) */
.sw-body { padding: 16px 18px 18px; overflow-y: auto; }

/* Quick channel options */
.sw-opt {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 13px 14px; margin-bottom: 10px; text-align: left;
    background: var(--sw-panel-2); border: 1px solid var(--sw-line);
    border-radius: 12px; color: var(--sw-text); cursor: pointer;
    transition: border-color .18s, transform .12s, background .18s;
}
.sw-opt:hover { border-color: var(--sw-line-2); transform: translateY(-1px); background: rgba(255,255,255,.02); }
.sw-opt-ic { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: rgba(0,169,255,.12); }
.sw-opt-ic svg { width: 20px; height: 20px; }
.sw-opt-tx b { display: block; font-size: .9rem; font-weight: 600; }
.sw-opt-tx span { display: block; font-size: .76rem; color: var(--sw-faint); margin-top: 1px; }

.sw-sep { display: flex; align-items: center; gap: 12px; margin: 14px 2px 12px; color: var(--sw-faint); font-size: .72rem; font-family: var(--sw-mono); text-transform: uppercase; letter-spacing: .08em; }
.sw-sep::before, .sw-sep::after { content: ""; height: 1px; flex: 1; background: var(--sw-line); }

/* Form */
.sw-form label { display: block; font-size: .74rem; color: var(--sw-dim); margin: 12px 0 6px; font-weight: 500; }
.sw-form input, .sw-form select, .sw-form textarea {
    width: 100%; background: var(--sw-ink); border: 1px solid var(--sw-line-2);
    border-radius: 10px; padding: 11px 13px; color: var(--sw-text);
    font-family: var(--sw-font); font-size: .9rem; transition: border-color .18s, box-shadow .18s;
}
.sw-form textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.sw-form input:focus, .sw-form select:focus, .sw-form textarea:focus {
    outline: none; border-color: var(--sw-mint); box-shadow: 0 0 0 3px rgba(70,248,212,.16);
}
.sw-form input::placeholder, .sw-form textarea::placeholder { color: var(--sw-faint); }
.sw-form select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2393A1B5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 13px center;
}
.sw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.sw-submit {
    width: 100%; margin-top: 16px; padding: 12px; border: 0; border-radius: 10px;
    background: linear-gradient(135deg, var(--sw-cyan), var(--sw-mint)); color: #04121f;
    font-family: var(--sw-font); font-weight: 700; font-size: .92rem; cursor: pointer;
    transition: box-shadow .2s, transform .12s;
}
.sw-submit:hover { box-shadow: 0 8px 28px rgba(70,248,212,.4); transform: translateY(-1px); }
.sw-submit:disabled { opacity: .6; cursor: wait; transform: none; }

.sw-msg { margin-top: 12px; font-size: .84rem; line-height: 1.5; display: none; }
.sw-msg.show { display: block; }
.sw-msg.ok { color: #7be3a0; }
.sw-msg.err { color: #ffb0b8; }

.sw-foot { padding: 12px 18px; border-top: 1px solid var(--sw-line); font-size: .72rem; color: var(--sw-faint); text-align: center; }

/* Toast (e.g. "email copied") — shared by the widget and the contact page */
.sw-toast {
    position: fixed; left: 50%; bottom: 28px; z-index: 10000;
    transform: translateX(-50%) translateY(14px);
    background: var(--sw-panel); border: 1px solid var(--sw-line-2);
    color: var(--sw-text); font-family: var(--sw-font); font-size: .88rem; font-weight: 500;
    padding: 12px 20px; border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0,0,0,.5);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.3,.64,1);
}
.sw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Back link inside the form step */
.sw-back { background: none; border: 0; color: var(--sw-dim); font-family: var(--sw-mono); font-size: .74rem; cursor: pointer; padding: 4px 0; display: inline-flex; align-items: center; gap: 6px; }
.sw-back:hover { color: var(--sw-mint); }

/* ============================================================
   NEXUS CHAT — live AI assistant view (default panel view)
   Uses the same --sw-* tokens; prefix swc- so it never collides with the
   ticket form. When chatting, the panel becomes a fixed-height flex column
   (header · scrolling thread · pinned input bar).
   ============================================================ */

/* Chat mode gives the panel a fixed height so the thread scrolls and the
   input bar stays pinned to the bottom. */
body.sw-chatting .sw-panel { height: min(620px, calc(100vh - 120px)); max-height: none; }
/* The chat view is itself a column that fills the panel below the header. */
.sw-step-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sw-chat-back { padding: 9px 16px 2px; flex-shrink: 0; }

.swc-thread { flex: 1; overflow-y: auto; padding: 12px 15px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.swc-row { display: flex; gap: 8px; align-items: flex-end; max-width: 87%; }
.swc-row.user { align-self: flex-end; flex-direction: row-reverse; }
.swc-avatar { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; font-family: var(--sw-mono); font-size: .68rem; font-weight: 700; color: #04121f; background: linear-gradient(135deg, var(--sw-cyan), var(--sw-mint)); }
.swc-bubble { padding: 10px 13px; border-radius: 14px; font-size: .88rem; line-height: 1.55; word-break: break-word; }
.swc-row.bot .swc-bubble { background: var(--sw-panel-2); border: 1px solid var(--sw-line); border-bottom-left-radius: 5px; }
.swc-row.user .swc-bubble { background: linear-gradient(135deg, rgba(0,169,255,.14), rgba(70,248,212,.10)); border: 1px solid rgba(0,169,255,.35); border-bottom-right-radius: 5px; }
.swc-bubble ol, .swc-bubble ul { margin: 6px 0 2px 18px; }
.swc-bubble ol li, .swc-bubble ul li { margin-bottom: 3px; }
.swc-bubble b { font-weight: 600; }
.swc-time { font-family: var(--sw-mono); font-size: .66rem; color: var(--sw-faint); margin: 0 36px; }
.swc-row.user + .swc-time { text-align: right; }

/* Quick chips (turn 0 + post-escalation) */
.swc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 2px 34px; }
.swc-chip { font-family: var(--sw-mono); font-size: .72rem; letter-spacing: .04em; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--sw-line-2); background: var(--sw-panel-2); color: var(--sw-dim); cursor: pointer; transition: border-color .16s, color .16s, transform .12s; }
.swc-chip:hover { border-color: var(--sw-mint); color: var(--sw-mint); transform: translateY(-1px); }

/* Typing indicator */
.swc-typing { display: inline-flex; gap: 5px; padding: 3px 2px; }
.swc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sw-mint); animation: sw-blink 1.1s infinite; }
.swc-typing i:nth-child(2) { animation-delay: .18s; }
.swc-typing i:nth-child(3) { animation-delay: .36s; }

/* Escalation card (the only use of amber in the widget) */
.swc-escal { border: 1px solid rgba(255,176,46,.45); background: rgba(255,176,46,.07); border-radius: 12px; padding: 12px 14px; font-size: .84rem; line-height: 1.55; margin: 2px 0 2px 34px; }
.swc-escal b { color: var(--amber, #FFB02E); }
.swc-escal-em { display: flex; gap: 8px; margin-top: 10px; }
.swc-escal-em input { flex: 1; background: var(--sw-ink); border: 1px solid var(--sw-line-2); border-radius: 9px; padding: 8px 11px; color: var(--sw-text); font-family: var(--sw-font); font-size: .85rem; }
.swc-escal-em input::placeholder { color: var(--sw-faint); }
.swc-escal-em input:focus { outline: none; border-color: var(--sw-mint); box-shadow: 0 0 0 3px rgba(70,248,212,.16); }
.swc-escal-em button { background: linear-gradient(135deg, var(--sw-cyan), var(--sw-mint)); color: #04121f; border: 0; border-radius: 9px; padding: 8px 14px; font-weight: 700; font-size: .82rem; font-family: var(--sw-font); cursor: pointer; }

/* Input bar (pinned) */
.swc-inputbar { display: flex; gap: 9px; padding: 11px 13px; border-top: 1px solid var(--sw-line); background: var(--sw-panel); flex-shrink: 0; }
.swc-input { flex: 1; background: var(--sw-ink); border: 1px solid var(--sw-line-2); border-radius: 12px; padding: 10px 13px; color: var(--sw-text); font-family: var(--sw-font); font-size: .9rem; resize: none; max-height: 96px; line-height: 1.45;
    /* Firefox: thin, mint-tinted scrollbar that matches the widget. */
    scrollbar-width: thin; scrollbar-color: var(--sw-mint) transparent; }
.swc-input:focus { outline: none; border-color: var(--sw-mint); box-shadow: 0 0 0 3px rgba(70,248,212,.16); }
.swc-input::placeholder { color: var(--sw-faint); }
/* WebKit/Blink: rounded, mint-tinted thumb on the textarea scrollbar. */
.swc-input::-webkit-scrollbar { width: 8px; }
.swc-input::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.swc-input::-webkit-scrollbar-thumb { background: linear-gradient(var(--sw-cyan), var(--sw-mint)); border-radius: 999px; border: 2px solid var(--sw-ink); }
.swc-input::-webkit-scrollbar-thumb:hover { background: var(--sw-mint); }
/* Also round the scrolling chat thread's scrollbar, so the whole widget matches. */
.swc-thread { scrollbar-width: thin; scrollbar-color: var(--sw-line-2) transparent; }
.swc-thread::-webkit-scrollbar { width: 8px; }
.swc-thread::-webkit-scrollbar-track { background: transparent; }
.swc-thread::-webkit-scrollbar-thumb { background: var(--sw-line-2); border-radius: 999px; border: 2px solid var(--sw-panel-2); }
.swc-thread::-webkit-scrollbar-thumb:hover { background: var(--sw-mint); }

/* Human agent (takeover) — distinct avatar + "Support team" label + system lines. */
.swc-avatar-h { background: var(--sw-panel-2); border: 1px solid var(--sw-mint); color: var(--sw-mint); }
.swc-who { font-family: var(--sw-mono); font-size: .68rem; color: var(--sw-faint); letter-spacing: .04em; margin: 6px 0 -2px 34px; }
.swc-sys { align-self: center; text-align: center; font-family: var(--sw-mono); font-size: .72rem; color: var(--sw-dim); background: rgba(70,248,212,.08); border: 1px solid rgba(70,248,212,.25); border-radius: 999px; padding: 5px 14px; margin: 6px auto; max-width: 90%; }

/* Persistent "talk to a human" link in the chat header row. */
.sw-chat-back { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.swc-human { background: none; border: 0; color: var(--sw-mint); font-family: var(--sw-mono); font-size: .72rem; cursor: pointer; padding: 4px 0; display: inline-flex; align-items: center; gap: 5px; opacity: .9; transition: opacity .15s; }
.swc-human::before { content: "👤"; font-size: .82rem; }
.swc-human:hover { opacity: 1; text-decoration: underline; text-underline-offset: 2px; }
.swc-send { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--sw-cyan), var(--sw-mint)); color: #04121f; border: 0; cursor: pointer; transition: box-shadow .18s, transform .12s; }
.swc-send svg { width: 17px; height: 17px; }
.swc-send:hover { box-shadow: 0 6px 20px rgba(70,248,212,.4); transform: translateY(-1px); }
.swc-send:disabled { opacity: .5; transform: none; box-shadow: none; cursor: default; }

/* Respect reduced-motion (turn off the pulsing dots + smooth scroll). */
@media (prefers-reduced-motion: reduce) {
    .swc-typing i { animation: none; }
    .swc-thread { scroll-behavior: auto; }
}

/* ---- Mobile: chat becomes a near-fullscreen bottom sheet ---- */
@media (max-width: 520px) {
    body.sw-open.sw-chatting .sw-panel {
        left: 0; right: 0; bottom: 0; width: auto;
        border-radius: 18px 18px 0 0;
        max-height: none; height: calc(100dvh - 56px);
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* ≥16px prevents iOS auto-zoom on focus. */
    .swc-input { font-size: 16px; }
    .swc-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
}

/* ============================================================
   CONTACT PAGE (/contact.html) — reuses the same tokens
   ============================================================ */
.sc-wrap { max-width: 960px; margin: 0 auto; padding: 120px 24px 80px; }
.sc-head { text-align: center; margin-bottom: 48px; }
.sc-head h1 { font-family: var(--f-display, var(--sw-font)); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; margin-bottom: 14px; }
.sc-head p { color: var(--sw-dim); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }
.sc-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; align-items: start; }
@media (max-width: 780px) { .sc-grid { grid-template-columns: 1fr; } }
.sc-channels { display: flex; flex-direction: column; gap: 14px; }
.sc-card {
    background: var(--sw-panel); border: 1px solid var(--sw-line); border-radius: 16px; padding: 22px 24px;
    transition: border-color .2s, transform .2s;
}
.sc-card:hover { border-color: var(--sw-line-2); transform: translateY(-2px); }
.sc-card-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(0,169,255,.12); margin-bottom: 14px; }
.sc-card-ic svg { width: 22px; height: 22px; }
.sc-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.sc-card p { color: var(--sw-dim); font-size: .9rem; line-height: 1.55; margin-bottom: 14px; }
.sc-card .sc-link { color: var(--sw-mint); font-family: var(--sw-mono); font-size: .82rem; display: inline-flex; align-items: center; gap: 7px; }
.sc-card .sc-link:hover { gap: 11px; transition: gap .18s; }
.sc-formcard {
    background: var(--sw-panel); border: 1px solid var(--sw-line-2); border-radius: 16px; padding: 26px 28px;
}
.sc-formcard h2 { font-size: 1.3rem; margin-bottom: 6px; }
.sc-formcard > p { color: var(--sw-dim); font-size: .9rem; margin-bottom: 18px; }

/* Image attachments on the support forms (widget + contact page).
   The native <input type=file> renders "Choose files / No file chosen" in the OS/browser
   language (not the page language), so we hide it and drive our own button + status label. */
.sw-attach-lbl { margin-top: 4px; }
.sw-file-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sw-file-btn {
    background: var(--sw-panel); color: var(--sw-mint); border: 1px solid var(--sw-line-2);
    border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: .85rem; font-family: inherit;
    transition: border-color .15s;
}
.sw-file-btn:hover { border-color: var(--sw-mint); }
.sw-file-name { color: var(--sw-dim); font-size: .82rem; }
.sw-attach-hint { color: var(--sw-dim); font-size: .74rem; margin: 4px 0 2px; }