/* The Syphon Chat widget of syphon.tools (scw1; the agreement: Library SyphonVault\chat\WIDGET-CONTRACT.md; KIT.md, "The
   Syphon Chat widget"). A card fixed at the bottom left of every visitor's page with the Syphon community's members
   online, its members in all and one button into the chat; folded, a round button in the kit's orb look with the
   online dot. Everything here is scoped under #syphon-chat-widget (no rule reaches the page) and built from the kit's
   own parts and values (syphon-ui.css: the panel's corner marks, the orb, the pill, the main button, --a/--ar, --sy-*).
   The markup is site_layout.php's syphon_chat_widget() (vault.syphon.tools: page-tools\build_pages.py, the same markup);
   the shared core (widget-core.js, never changed here) fills in the numbers and the join link and sets the classes
   scw-collapsed, scw-has-counts and scw-someone-online. The corner is the widget's alone: the Discord button that stood
   there went on 2026-10-20 (the owner's word: no Discord on syphon.tools, only Syphon Chat). */

#syphon-chat-widget {
    --scw-left: 18px;      /* the kit's corner */
    --scw-bottom: 18px;
    --scw-w: 300px;        /* the open card */
    position: fixed; left: var(--scw-left); bottom: calc(var(--scw-bottom) + env(safe-area-inset-bottom, 0px));
    z-index: 55;           /* over the page; under the title bar (60), the phone menu (59) and the screenshot viewer */
    font-family: var(--sy-font); color: var(--sy-text);
}
/* hidden until the core has set the open or folded state (no flash of the wrong one); shown anyway after 3 s if the core
   never runs (not for people who asked for less motion); without scripts the card simply shows, its link works without
   them */
.sy-js #syphon-chat-widget:not([data-scw-ready]) { visibility: hidden; animation: scwReveal 0s linear 3s forwards; }
@keyframes scwReveal { to { visibility: visible; } }
#syphon-chat-widget[data-scw-ready] { animation: scwIn .32s var(--sy-ease) both; }
@keyframes scwIn { from { opacity: 0; transform: translateY(8px); } }
html:not(.sy-js) #syphon-chat-widget .scw-toggle { display: none; }

/* ── The card ── */
#syphon-chat-widget .scw-card {
    position: relative; width: var(--scw-w); max-width: calc(100vw - 32px); padding: 16px 16px 13px;
    background: linear-gradient(180deg, rgba(18, 18, 32, .97), rgba(12, 12, 24, .97));
    border: 1px solid rgba(var(--ar), .38);
    box-shadow: 0 22px 56px rgba(0, 0, 0, .55), 0 0 34px rgba(var(--ar), .2);
    /* no backdrop-filter: on a card this solid the blur would hardly show, and a blur under a fixed card costs every
       scroll frame on a phone (and makes the browser draw the pictures under it again) */
}
#syphon-chat-widget .scw-card::before { opacity: .8; }   /* the panel's corner marks and top line, a little brighter on a floating card */
#syphon-chat-widget .scw-head { display: flex; align-items: center; gap: 12px; padding-right: 34px; }   /* room for the fold button */
#syphon-chat-widget .scw-head .sy-orb { --d: 40px; }
#syphon-chat-widget .scw-name { min-width: 0; }
#syphon-chat-widget .scw-name b { display: block; font: 700 .84rem/1.2 var(--sy-font); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--a) 78%, #fff); }
#syphon-chat-widget .scw-name small { display: block; margin-top: 4px; font: 600 .8rem/1.35 var(--sy-font); color: var(--sy-dim); }

/* the numbers: "● 17 online" in the kit's status pill, the members beside it; "Join the community" while there are none */
#syphon-chat-widget .scw-stats { display: flex; align-items: center; min-height: 28px; margin: 14px 0 12px; font: 600 .82rem/1.3 var(--sy-font); color: var(--sy-dim); }
#syphon-chat-widget .scw-counts { display: none; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#syphon-chat-widget.scw-has-counts .scw-counts { display: flex; }
#syphon-chat-widget.scw-has-counts .scw-nocounts { display: none; }
#syphon-chat-widget:not(.scw-someone-online) .scw-online { --a: #8a93bd; --ar: 138, 147, 189; }   /* nobody online: a quiet grey pill */
#syphon-chat-widget:not(.scw-someone-online) .scw-online i { animation: none; box-shadow: none; }

/* the one button: the kit's main button, a size smaller, without its moving sheen */
#syphon-chat-widget .scw-join { min-height: 46px; padding: 0 16px; gap: 10px; font-size: .86rem; }
#syphon-chat-widget .scw-join::after { content: none; }
#syphon-chat-widget .scw-join .scw-new { font-size: 1rem; line-height: 1; opacity: .85; transition: transform .25s var(--sy-ease); }
#syphon-chat-widget .scw-join:hover .scw-new { transform: translate(2px, -2px); }
#syphon-chat-widget .scw-where { margin: 9px 0 0; font: 600 .74rem/1.35 var(--sy-font); color: var(--sy-dim); text-align: center; }

/* ── The one toggle: the fold button in the card's corner while open, the round button while folded ── */
#syphon-chat-widget .scw-toggle {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: grid; place-items: center; width: 30px; height: 30px; margin: 0; padding: 0;
    font: inherit; color: var(--sy-dim); background: transparent; border: 1px solid transparent; border-radius: var(--sy-r); cursor: pointer;
    transition: color .2s, background .2s, border-color .2s;
}
#syphon-chat-widget .scw-toggle:hover { color: #fff; background: rgba(var(--ar), .12); border-color: rgba(var(--ar), .4); }
#syphon-chat-widget .scw-fold { display: block; width: 8px; height: 8px; margin-top: -4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }   /* a chevron down: fold away */
#syphon-chat-widget .scw-toggle .sy-orb { display: none; }
#syphon-chat-widget .scw-if-closed { display: none; }   /* the button's name follows its state */
#syphon-chat-widget.scw-collapsed .scw-if-open { display: none; }
#syphon-chat-widget.scw-collapsed .scw-if-closed { display: inline; }

#syphon-chat-widget.scw-collapsed .scw-toggle {
    position: relative; top: auto; right: auto; width: 54px; height: 54px; border: 0; border-radius: 50%;
    color: color-mix(in srgb, var(--a) 86%, #fff); background: rgba(12, 12, 24, .92);
    box-shadow: 0 0 26px rgba(var(--ar), .3), 0 10px 26px rgba(0, 0, 0, .4);
    transition: transform .25s var(--sy-ease), box-shadow .25s;
}
#syphon-chat-widget.scw-collapsed .scw-toggle:hover { transform: translateY(-2px); background: rgba(12, 12, 24, .92); box-shadow: 0 0 34px rgba(var(--ar), .5), 0 12px 28px rgba(0, 0, 0, .45); }
#syphon-chat-widget.scw-collapsed .scw-fold { display: none; }
/* the kit's orb (a 40 px disc and its ring of arcs at 54 px), standing still: the widget moves only the online dot */
#syphon-chat-widget.scw-collapsed .scw-toggle .sy-orb { display: grid; margin: 0; }
#syphon-chat-widget .scw-toggle .sy-orb-r1 { animation: none; opacity: .75; }
#syphon-chat-widget .scw-toggle .sy-orb-dots { display: none; }
#syphon-chat-widget .scw-toggle .sy-orb-core svg { width: 52%; height: 52%; }
#syphon-chat-widget .scw-toggle:hover .sy-orb-core { background: rgba(var(--ar), .18); border-color: rgba(var(--ar), .75); box-shadow: 0 0 26px rgba(var(--ar), .35); }
#syphon-chat-widget .scw-dot { display: none; position: absolute; top: 3px; right: 3px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #0c0c18; background: var(--sy-green); box-shadow: 0 0 8px rgba(34, 197, 94, .8); }
#syphon-chat-widget.scw-collapsed.scw-someone-online .scw-dot { display: block; animation: scwPulse 2.4s ease-in-out infinite; }
@keyframes scwPulse { 50% { box-shadow: 0 0 2px rgba(34, 197, 94, .35); opacity: .7; } }

/* folded: the card is out of sight at once; it slides and fades in only when it opens */
#syphon-chat-widget.scw-collapsed .scw-card { position: absolute; left: 0; bottom: 0; visibility: hidden; opacity: 0; transform: translateY(10px); pointer-events: none; }
#syphon-chat-widget:not(.scw-collapsed) .scw-card { transition: opacity .22s, transform .3s var(--sy-ease); }

/* phones: the kit's corner is 14 px from the edges; the open card keeps 16 px from both sides */
@media (max-width: 560px) {
    #syphon-chat-widget { --scw-left: 16px; --scw-bottom: 14px; --scw-w: 340px; }
    #syphon-chat-widget.scw-collapsed { --scw-left: 14px; }
}
/* Thai: room above and below its marks */
html:lang(th) #syphon-chat-widget :is(.scw-name b, .scw-name small, .scw-stats, .scw-where, .scw-join, .sy-pill) { line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
    #syphon-chat-widget, #syphon-chat-widget * { animation: none !important; transition: none !important; }
}
@media print { #syphon-chat-widget { display: none; } }