.ysc-launch, #ysc-panel { position:fixed; right:16px; z-index:99990; font:15px/1.45 system-ui,sans-serif; }
.ysc-launch { bottom:92px; background:var(--ysc-accent,#2854dc); color:white !important; border:0; border-radius:30px; padding:12px 18px; cursor:pointer; text-decoration:none; }
#ysc-panel { bottom:148px; width:min(360px,calc(100vw - 32px)); max-height:calc(100dvh - 164px); overflow:auto; padding:14px; background:#141a2a; color:#f1f5ff; border:1px solid #39445e; border-radius:16px; box-shadow:0 8px 28px #0007; box-sizing:border-box; }
#ysc-panel [hidden], #ysc-panel[hidden] { display:none !important; }
#ysc-messages { height:min(260px,33dvh); overflow:auto; }
#ysc-messages p { white-space:pre-wrap; overflow-wrap:anywhere; padding:8px 12px; border-radius:10px; background:#283146; margin:6px 12% 6px 0; }
#ysc-messages .ysc-own { background:var(--ysc-accent,#244391); margin:6px 0 6px 12%; }
#ysc-messages strong, #ysc-panel label { display:block; }
#ysc-panel textarea { display:block; width:100%; min-height:60px; box-sizing:border-box; margin:4px 0 8px; }
#ysc-panel button { background:var(--ysc-accent,#2854dc); color:white; border:0; border-radius:8px; padding:7px 12px; cursor:pointer; }
.ysc-toolbar {display:flex;align-items:center;gap:6px;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap}
.ysc-toolbar strong {margin-right:auto}
#ysc-panel .ysc-toolbar button {font-size:12px;padding:6px 8px}
#ysc-history h3 {font-size:16px;margin:8px 0}
.ysc-archive-row {display:flex;align-items:center;gap:6px;padding:9px 0;border-bottom:1px solid #39445e}
.ysc-archive-row span {flex:1;overflow-wrap:anywhere;font-size:12px}
.ysc-archive-row button {flex-shrink:0}
#ysc-back {margin-top:12px}

.ysc-color-settings {padding:10px 0 14px;border-bottom:1px solid #39445e}
.ysc-colors {display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
#ysc-panel .ysc-swatch {background:var(--swatch);width:27px;height:27px;padding:0;border-radius:50%;border:2px solid #fff8}
#ysc-color {width:36px;height:32px;border:0;background:transparent;cursor:pointer}
/* Floating confirmation anchored above the chat, outside its scroll container. */
#ysc-confirm {position:fixed;z-index:100000;box-sizing:border-box;width:min(360px,calc(100vw - 24px));padding:0;background:transparent;color:#f1f5ff;font:14px/1.45 system-ui,sans-serif;filter:drop-shadow(0 12px 22px #0009)}
#ysc-confirm[hidden] {display:none!important}
.ysc-confirm-box {position:relative;box-sizing:border-box;width:100%;background:#202a40;border:1px solid #55617e;border-radius:14px;padding:17px;box-shadow:0 10px 30px #0007}
.ysc-confirm-box::after {content:"";position:absolute;bottom:-8px;right:30px;width:14px;height:14px;transform:rotate(45deg);background:#202a40;border-right:1px solid #55617e;border-bottom:1px solid #55617e}
.ysc-confirm-box strong {font-size:15px}
.ysc-confirm-box p {font-size:13px;line-height:1.5;margin:12px 0}
.ysc-confirm-actions {display:flex;gap:9px;justify-content:flex-end;margin-top:16px}
#ysc-confirm .ysc-confirm-actions button {min-width:95px;height:38px;padding:8px 14px;box-sizing:border-box;border-radius:9px;font-size:13px;font-weight:600;background:var(--ysc-accent,#2854dc);color:#fff;border:1px solid transparent;cursor:pointer}
#ysc-confirm .ysc-confirm-actions .ysc-danger {background:#bd3545}
#ysc-confirm .ysc-confirm-actions button:focus-visible {outline:2px solid #fff;outline-offset:2px}
@media(max-height:450px){.ysc-confirm-box{padding:12px}.ysc-confirm-box p{margin:7px 0}.ysc-confirm-actions{margin-top:9px}}

/* Consistent interactive feedback for all chat controls. */
#ysc-panel button, #ysc-toggle, #ysc-confirm button {
  transition:background-color .18s ease,filter .18s ease,transform .18s ease,box-shadow .18s ease;
  cursor:pointer;
}
#ysc-panel button:not(:disabled):hover, #ysc-toggle:hover, #ysc-confirm button:not(:disabled):hover {
  filter:brightness(1.22);transform:translateY(-2px);box-shadow:0 4px 12px #0005;
}
#ysc-panel button:not(:disabled):active, #ysc-toggle:active, #ysc-confirm button:not(:disabled):active {transform:translateY(0) scale(.97);filter:brightness(.95)}
#ysc-panel button:focus-visible, #ysc-toggle:focus-visible {outline:2px solid #fff;outline-offset:2px}
#ysc-panel button:disabled {opacity:.55;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){#ysc-panel button,#ysc-toggle,#ysc-confirm button{transition:none!important;transform:none!important}}

#ysc-typing { padding: 5px 14px; font-size: 12px; color: var(--ysc-accent, #2854dc); }
.ysc-typing-dots { display:inline-flex; gap:3px; margin-left:5px; vertical-align:middle; }
.ysc-typing-dots i { width:5px; height:5px; border-radius:50%; background:currentColor; animation:yscTypingBounce 1s infinite alternate; }
.ysc-typing-dots i:nth-child(2) { animation-delay:.2s; }
.ysc-typing-dots i:nth-child(3) { animation-delay:.4s; }
@keyframes yscTypingBounce { from { opacity:.3; transform:translateY(1px); } to { opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce) { .ysc-typing-dots i { animation:none; } }

/* Keep chat launcher above the theme Back to Top control. */
@media (max-width: 600px) { .ysc-launch { bottom: 88px; } #ysc-panel { bottom: 144px; max-height: calc(100dvh - 160px); } }

/* Website-only unread badge, independent of the user's chat accent color. */
#ysc-toggle { position:fixed; }
#ysc-unread-badge.ysc-unread-badge:not([hidden]) {
  position:absolute; display:flex; align-items:center; justify-content:center;
  top:-9px; right:-9px; min-width:25px; height:25px; box-sizing:border-box;
  padding:0 5px; border-radius:30px; background:#fff; color:#d12432;
  border:1px solid #e4e4e7; box-shadow:0 2px 8px rgba(0,0,0,.18);
  font:bold 12px/1 system-ui,sans-serif; pointer-events:none;
}

/* Stable initial dimensions: prevent the launcher growing/shrinking on refresh. */
#ysc-toggle { width:50px !important; height:50px !important; min-width:0 !important; box-sizing:border-box !important; padding:0 !important; }

/* Stable horizontal alignment from first paint through refresh. */
#ysc-toggle {right:25px !important;left:auto !important;}
#ysc-panel {right:16px !important;left:auto !important;}

/* Logged-out visitors use the same bubble geometry as members. */
a.ysc-launch {display:flex!important;align-items:center!important;justify-content:center!important;width:50px!important;height:50px!important;min-width:0!important;padding:0!important;box-sizing:border-box!important;right:25px!important;left:auto!important;border-radius:50%!important;font-size:18px;line-height:1!important;}

#ysc-panel .ysc-compose-actions{display:flex;align-items:center;gap:10px} #ysc-panel .ysc-compose-actions button{flex:1} #ysc-panel .ysc-file-button{display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:23px;min-width:40px;min-height:40px;border-radius:8px;background:rgba(128,128,128,.13)}