/* ==========================================================================
   Syphon Chat widget, in DefiantScape's own look

   The shared core (js/syphon-chat-widget-core.js, copied unchanged from the
   Library's SyphonVault\chat\widget\) fills in the online and member counts
   and the join link, and keeps the visitor's open or closed choice. This file
   is only how it looks here. Every rule is scoped under #syphon-chat-widget,
   so nothing on the page around it can change.

   It is built from the site's own parts: the panel and its corner brackets
   (the download card), the cyan button, the live dot of the player count and,
   when closed, one of the struck-metal medallions of the Community section.

   Size: the open card is low rather than tall. On a 1280 x 720 screen the
   homepage's player, NPC and uptime figures end about 120px above the bottom
   edge, and a taller card in this corner would sit over them on arrival.
   ========================================================================== */

#syphon-chat-widget {
    /* The site's tokens, with their values as fallbacks so the card still
       reads correctly on a page where style.css did not load. */
    --scw-accent: var(--accent, #00d4ff);
    --scw-text: var(--text-primary, #e8f0ff);
    --scw-text-2: var(--text-secondary, #7a8fad);
    --scw-text-3: var(--text-muted, #56688a);
    --scw-border: var(--border-color, rgba(0, 212, 255, 0.12));
    --scw-border-strong: var(--border-strong, rgba(0, 212, 255, 0.28));
    --scw-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
    --scw-spring: var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
    --scw-live: #3ddc84;
    --scw-gap: 16px;

    position: fixed;
    left: max(var(--scw-gap), env(safe-area-inset-left));
    bottom: calc(var(--scw-gap) + env(safe-area-inset-bottom));
    /* Above the page, under the fixed navbar (1030) and its menus. */
    z-index: 1020;
    margin: 0;
    font-family: var(--font-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
    font-size: 16px;
    line-height: 1.3;
    color: var(--scw-text);
    text-align: left;

    /* Hidden until the core has applied the visitor's open or closed choice,
       so a returning visitor who closed it never sees the card flash open.
       Should the script not run at all, it shows anyway after a moment, open,
       with its join link working. */
    visibility: hidden;
    animation: scw-late 0.01s 1.2s forwards;
}

#syphon-chat-widget[data-scw-ready] {
    visibility: visible;
    animation: none;
}

@keyframes scw-late {
    to { visibility: visible; }
}

@keyframes scw-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

#syphon-chat-widget p { margin: 0; }

/* ------------------------------------------------------------- the card --- */

#syphon-chat-widget .scw-card {
    position: relative;
    /* 372px, wider only when the numbers need it, never wider than the window. */
    width: auto;
    min-width: min(372px, calc(100vw - 2 * var(--scw-gap)));
    max-width: calc(100vw - 2 * var(--scw-gap));
    padding: 10px 12px;
    border: 1px solid var(--scw-border-strong);
    border-radius: 0;
    /* A shade darker and more solid than the download panel, so the site's
       grey text keeps 4.5:1 over whatever passes behind the corner. */
    background: linear-gradient(150deg, rgba(10, 20, 42, 0.97), rgba(6, 12, 27, 0.96));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 22px 50px -12px rgba(0, 0, 0, 0.75),
        0 0 0 1px rgba(0, 212, 255, 0.05),
        0 0 34px -14px rgba(0, 212, 255, 0.45);
    animation: scw-in 0.35s var(--scw-ease) both;
}

/* The soft light above the panel, as on the download panel. */
#syphon-chat-widget .scw-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 120% at 50% -30%, rgba(0, 212, 255, 0.14), transparent 70%);
}

/* The thickened top-left and bottom-right corners every panel here has. */
#syphon-chat-widget .scw-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background:
        linear-gradient(var(--scw-accent), var(--scw-accent)) 0    0    / 18px 2px  no-repeat,
        linear-gradient(var(--scw-accent), var(--scw-accent)) 0    0    / 2px  18px no-repeat,
        linear-gradient(var(--scw-accent), var(--scw-accent)) 100% 100% / 18px 2px  no-repeat,
        linear-gradient(var(--scw-accent), var(--scw-accent)) 100% 100% / 2px  18px no-repeat;
    opacity: 0.55;
    transition: opacity 0.4s var(--scw-ease);
}

#syphon-chat-widget .scw-card:hover::after,
#syphon-chat-widget .scw-card:focus-within::after {
    opacity: 0.95;
}

#syphon-chat-widget .scw-head,
#syphon-chat-widget .scw-body {
    position: relative;
    z-index: 1;
}

/* Mark, name and tagline. Room is kept on the right for the hide button. */
#syphon-chat-widget .scw-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 34px;
}

#syphon-chat-widget .scw-mark {
    flex: none;
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.35), 0 0 14px -3px rgba(0, 212, 255, 0.6);
}

#syphon-chat-widget .scw-titles { min-width: 0; }

#syphon-chat-widget .scw-title {
    display: block;
    font-family: var(--font-display, 'Cinzel', Georgia, 'Times New Roman', serif);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.05em;
    color: var(--scw-text);
}

#syphon-chat-widget .scw-tagline {
    display: block;
    margin-top: 1px;
    font-size: 0.76rem;
    color: var(--scw-text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Counts on the left, the button on the right. */
#syphon-chat-widget .scw-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

#syphon-chat-widget .scw-info { min-width: 0; }

#syphon-chat-widget .scw-counts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* The player count's live dot: green and pulsing while someone is online,
   still and dim when nobody is. */
#syphon-chat-widget .scw-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--scw-text-3);
}

#syphon-chat-widget.scw-someone-online .scw-dot {
    background: var(--scw-live);
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7);
    animation: livePulse 2.2s ease-out infinite;
}

#syphon-chat-widget .scw-online {
    font-weight: 600;
    color: var(--scw-text);
    font-variant-numeric: tabular-nums;
}

#syphon-chat-widget .scw-sep { color: var(--scw-text-3); }

#syphon-chat-widget .scw-members {
    color: var(--scw-text-2);
    font-variant-numeric: tabular-nums;
}

/* No numbers (the chat did not answer): an invitation in their place, with
   the cyan dot of the section badges. */
#syphon-chat-widget .scw-nocounts {
    font-weight: 600;
    color: var(--scw-text);
}

#syphon-chat-widget:not(.scw-has-counts) .scw-dot { background: var(--scw-accent); }
#syphon-chat-widget:not(.scw-has-counts) .scw-online,
#syphon-chat-widget:not(.scw-has-counts) .scw-sep,
#syphon-chat-widget:not(.scw-has-counts) .scw-members,
#syphon-chat-widget.scw-has-counts .scw-nocounts {
    display: none;
}

#syphon-chat-widget .scw-where {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--scw-text-2);
    white-space: nowrap;
}

/* The site's own cyan button (btn btn-accent), sized for the card. Its colours
   are restated with the same values, so it keeps its look on a page that lost
   style.css (the 404 page at a deeper address asks for it at the wrong path). */
#syphon-chat-widget .scw-join {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 0;
    background: linear-gradient(135deg, var(--scw-accent) 0%, #0090c9 100%);
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.28);
    color: #04121c;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}

#syphon-chat-widget .scw-join:hover {
    color: #04121c;
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(0, 212, 255, 0.45);
}

/* The site's focus ring. Bootstrap's .btn:focus-visible sets outline: 0 and
   leaves a focus shadow this button has no colour for, so it is stated here. */
#syphon-chat-widget .scw-join:focus-visible,
#syphon-chat-widget .scw-toggle:focus-visible {
    outline: 2px solid var(--scw-accent);
    outline-offset: 3px;
}

/* --------------------------------------------- the one open/close button --- */
/* One button does both jobs, so the keyboard never loses its place: open, it
   is the small square in the card's corner; closed, it is the medallion. */

#syphon-chat-widget .scw-toggle {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--scw-border);
    border-radius: 0;
    background: rgba(0, 212, 255, 0.04);
    color: var(--scw-text-2);
    font: inherit;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.3s var(--scw-ease), border-color 0.3s var(--scw-ease), color 0.3s var(--scw-ease);
}

#syphon-chat-widget .scw-toggle:hover,
#syphon-chat-widget .scw-toggle:focus-visible {
    background: rgba(0, 212, 255, 0.11);
    border-color: var(--scw-border-strong);
    color: var(--scw-accent);
}

#syphon-chat-widget .scw-coin { display: none; }

/* Closed: only the medallion, in the corner. */
#syphon-chat-widget.scw-collapsed .scw-card { display: none; }

#syphon-chat-widget.scw-collapsed .scw-toggle {
    position: relative;
    top: auto;
    right: auto;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: transparent;
}

#syphon-chat-widget.scw-collapsed .scw-hide-icon { display: none; }

/* The medallion: the Community section's struck-metal token, in cyan. */
#syphon-chat-widget.scw-collapsed .scw-coin {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.20), transparent 52%),
        radial-gradient(circle at 68% 82%, rgba(0, 0, 0, 0.45), transparent 60%),
        linear-gradient(160deg, #16273f 0%, #0c1626 55%, #070e1a 100%);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.22),
        inset 0 -4px 7px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        0 12px 24px rgba(0, 0, 0, 0.55),
        0 0 0 1px var(--scw-border-strong),
        0 0 26px -6px rgba(0, 212, 255, 0.55);
    animation: scw-in 0.35s var(--scw-ease) both;
    transition: transform 0.35s var(--scw-spring), box-shadow 0.35s var(--scw-ease);
}

/* The light on the medallion's rim, held still. */
#syphon-chat-widget .scw-coin::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 210deg,
        transparent 0%, #7ce8ff 12%, transparent 32%,
        transparent 62%, #7ce8ff 78%, transparent 100%);
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 63%);
    mask: radial-gradient(circle, transparent 60%, #000 63%);
    opacity: 0.5;
    transition: opacity 0.35s var(--scw-ease);
}

#syphon-chat-widget .scw-coin i {
    font-size: 1.3rem;
    color: #7ce8ff;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 10px rgba(0, 212, 255, 0.6));
}

#syphon-chat-widget.scw-collapsed .scw-toggle:hover .scw-coin,
#syphon-chat-widget.scw-collapsed .scw-toggle:focus-visible .scw-coin {
    transform: translateY(-3px);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.26),
        inset 0 -4px 7px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 16px 30px rgba(0, 0, 0, 0.6),
        0 0 0 1px var(--scw-accent),
        0 0 38px -4px rgba(0, 212, 255, 0.7);
}

#syphon-chat-widget.scw-collapsed .scw-toggle:hover .scw-coin::after,
#syphon-chat-widget.scw-collapsed .scw-toggle:focus-visible .scw-coin::after {
    opacity: 1;
}

/* The online dot on the medallion, while someone is there. */
#syphon-chat-widget .scw-coin-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1;
    display: none;
    width: 13px;
    height: 13px;
    border: 2px solid #050a18;
    border-radius: 50%;
    background: var(--scw-live);
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7);
    animation: livePulse 2.2s ease-out infinite;
}

#syphon-chat-widget.scw-someone-online .scw-coin-dot { display: block; }

/* The button's name follows its job: "Open Syphon Chat" or "Hide Syphon Chat". */
#syphon-chat-widget .scw-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#syphon-chat-widget .scw-when-closed,
#syphon-chat-widget.scw-collapsed .scw-when-open {
    display: none;
}

#syphon-chat-widget.scw-collapsed .scw-when-closed { display: inline; }

/* ------------------------------------------------------- phone, finger ---- */

@media (max-width: 640px) {
    /* The button goes under the counts, the full width of the card. */
    #syphon-chat-widget .scw-body {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #syphon-chat-widget .scw-join {
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
    }
}

/* A fingertip needs a bigger hide button. */
@media (pointer: coarse), (max-width: 640px) {
    #syphon-chat-widget .scw-head { padding-right: 46px; }
    #syphon-chat-widget .scw-toggle {
        top: 4px;
        right: 4px;
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}

/* -------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion: reduce) {
    #syphon-chat-widget .scw-card,
    #syphon-chat-widget .scw-coin,
    #syphon-chat-widget .scw-dot,
    #syphon-chat-widget .scw-coin-dot {
        animation: none !important;
    }
    #syphon-chat-widget .scw-card::after,
    #syphon-chat-widget .scw-toggle,
    #syphon-chat-widget .scw-coin,
    #syphon-chat-widget .scw-join {
        transition: none !important;
    }
    #syphon-chat-widget .scw-join:hover,
    #syphon-chat-widget.scw-collapsed .scw-toggle:hover .scw-coin,
    #syphon-chat-widget.scw-collapsed .scw-toggle:focus-visible .scw-coin {
        transform: none;
    }
}

@media print {
    #syphon-chat-widget { display: none; }
}