/* SPLXCE chat guide */
#chat { --cg-r: 22px; position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: 94px; z-index: 44; font-family: var(--ui, 'Chakra Petch', sans-serif); }
html[data-scr="boot"] #chat, html[data-scr="title"] #chat, html[data-ov="game"] #chat, html[data-ov="inquiry"] #chat, html[data-ov="viewer"] #chat, html[data-ov="reader"] #chat, html.booting #chat, .saver:not([hidden]) ~ #chat { display: none; }
.vh-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cg-launch { position: relative; display: block; width: 72px; height: 72px; padding: 4px; border: 0; border-radius: 50%; cursor: pointer; background: #0b0d0b;
  box-shadow: 0 0 0 4px var(--hi, #c8ff00), 6px 6px 0 4px var(--hi-sh, #ff2d7a), 0 12px 30px rgb(0 0 0 / .5); transition: transform .35s var(--snap, ease), box-shadow .3s; animation: cgFloat 4s ease-in-out infinite; }
.cg-launch:hover { transform: translateY(-4px) scale(1.04); }
.cg-launch:focus-visible { outline: 3px dashed var(--punk, #ff2d7a); outline-offset: 8px; }
@keyframes cgFloat { 50% { translate: 0 -5px; } }
.cg-av { display: block; width: 100%; height: 100%; }
.cg-av svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cg-halo { transform-origin: 200px 200px; animation: cgSpin 14s linear infinite; }
#chat.busy .cg-halo { animation-duration: 4s; }
@keyframes cgSpin { to { transform: rotate(360deg); } }
.cg-hi { position: absolute; right: 84px; top: 50%; translate: 0 -50%; padding: 8px 16px; border-radius: 999px 999px 6px 999px; white-space: nowrap; background: #ece6d2; color: #0b0d0b; border: 3px solid #0b0d0b;
  font-weight: 700; font-size: .85rem; letter-spacing: .04em; opacity: 0; pointer-events: none; transition: opacity .6s ease, translate .6s ease; }
#chat.hello .cg-hi { opacity: 1; translate: -6px -50%; }
#chat.open .cg-launch { transform: scale(.9); animation: none; }

.cg-panel { position: absolute; right: 0; bottom: 86px; width: min(380px, calc(100vw - 40px)); height: min(560px, calc(100vh - 210px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  overflow: hidden; border-radius: var(--cg-r); background: #0b0d0b; background-image: radial-gradient(circle, rgb(200 255 0 / .07) 1.2px, transparent 1.6px); background-size: 18px 18px;
  border: 3px solid #0b0d0b; box-shadow: 0 0 0 3px #3d434b, 9px 9px 0 3px var(--hi-sh, #ff2d7a), 0 30px 60px rgb(0 0 0 / .6);
  transform-origin: 100% 100%; animation: cgIn .45s var(--snap, ease) both; color: #ece6d2; }
.cg-panel[hidden] { display: none; }
#chat:not(.open) .cg-panel { animation: cgOut .3s ease-in both; }
@keyframes cgIn { from { opacity: 0; scale: .7; translate: 20px 30px; } }
@keyframes cgOut { to { opacity: 0; scale: .8; translate: 20px 30px; } }

.cg-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; background: linear-gradient(180deg, #2c3036, #16181b); border-bottom: 2px solid #000; }
.cg-av.sm { flex: none; width: 50px; height: 50px; padding: 2px; border-radius: 50%; background: #0b0d0b; box-shadow: 0 0 0 3px var(--hi, #c8ff00); }
.cg-id { display: grid; min-width: 0; flex: 1; }
.cg-id b { font-family: var(--display, 'Zen Dots'), sans-serif; font-style: italic; font-weight: 400; font-size: 1.05rem; color: var(--hi, #c8ff00); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-id i { font-style: normal; font-family: "VT323", monospace; font-size: 1.05rem; letter-spacing: .06em; color: #9aa59d; text-transform: uppercase; }
.cg-id i::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--hi, #c8ff00); box-shadow: 0 0 6px var(--hi, #c8ff00); vertical-align: 1px; }
.cg-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #3d434b; background: #0b0d0b; color: #ece6d2; cursor: pointer; font-size: .9rem; transition: background .2s, color .2s; }
.cg-x:hover { background: var(--hi, #c8ff00); color: #0b0d0b; }

.cg-log { overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 6px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--hi, #c8ff00) transparent; }
.cg-row { display: grid; gap: 6px; max-width: 88%; animation: cgMsg .45s var(--snap, ease) both; }
.cg-row.bot { justify-self: start; align-self: flex-start; }
.cg-row.me { align-self: flex-end; justify-items: end; }
@keyframes cgMsg { from { opacity: 0; translate: 0 10px; } }
.cg-b { margin: 0; padding: 10px 14px; font-size: .95rem; font-weight: 500; line-height: 1.42; white-space: pre-line; overflow-wrap: anywhere; }
.bot .cg-b { background: #ece6d2; color: #0b0d0b; border-radius: 18px 18px 18px 6px; }
.me .cg-b { background: var(--hi, #c8ff00); color: #0b0d0b; border-radius: 18px 18px 6px 18px; font-weight: 600; }
.cg-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-act { min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 2px solid var(--hi, #c8ff00); background: #0b0d0b; color: var(--hi, #c8ff00); cursor: pointer;
  font: 700 .74rem/1.2 var(--ui, 'Chakra Petch'), sans-serif; letter-spacing: .1em; text-transform: uppercase; text-align: left; transition: background .2s, color .2s, transform .2s; }
.cg-act:hover, .cg-act:focus-visible { background: var(--hi, #c8ff00); color: #0b0d0b; transform: translateY(-2px); outline: none; }
.typing .cg-b { display: flex; gap: 6px; padding: 14px 16px; }
.typing .cg-b i { width: 8px; height: 8px; border-radius: 50%; background: #0b0d0b; animation: cgDot 1.4s ease-in-out infinite; }
.typing .cg-b i:nth-child(2) { animation-delay: .2s; } .typing .cg-b i:nth-child(3) { animation-delay: .4s; }
@keyframes cgDot { 0%, 60%, 100% { opacity: .25; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }

.cg-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px; }
.cg-chips[hidden] { display: none; }
.cg-chip { min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 2px solid #3d434b; background: #16191a; color: #ece6d2; cursor: pointer; font: 600 .8rem/1.2 var(--ui, 'Chakra Petch'), sans-serif; transition: border-color .2s, color .2s; }
.cg-chip:hover, .cg-chip:focus-visible { border-color: var(--hi, #c8ff00); color: var(--hi, #c8ff00); outline: none; }
.cg-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 2px solid #22262b; background: #111315; }
.cg-form input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid #3d434b; background: #0b0d0b; color: #ece6d2; font: 500 16px var(--ui, 'Chakra Petch'), sans-serif; }
.cg-form input:focus { outline: none; border-color: var(--hi, #c8ff00); }
.cg-send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #0b0d0b; background: var(--hi, #c8ff00); color: #0b0d0b; cursor: pointer; box-shadow: 3px 3px 0 var(--hi-sh, #ff2d7a); transition: transform .15s; }
.cg-send:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hi-sh, #ff2d7a); }
#chat.busy .cg-send { opacity: .5; }
.cg-note { margin: 0; padding: 0 14px 10px; background: #111315; font-size: .7rem; color: #7f8a84; text-align: center; }

@media (max-width: 820px) {
  #chat { right: auto; left: 14px; bottom: 104px; }
  html:not([data-scr="boot"]):not([data-scr="title"]) .screen { padding-bottom: 84px; }
  .cg-launch { width: 62px; height: 62px; }
  .cg-hi { right: auto; left: 72px; border-radius: 999px 999px 999px 6px; }
  #chat.hello .cg-hi { translate: 6px -50%; }
  #chat.open { inset: 0; }
  #chat.open .cg-launch { display: none; }
  .cg-panel { position: fixed; inset: 10px 10px max(10px, env(safe-area-inset-bottom)); width: auto; height: auto; transform-origin: 100% 100%; }
}
@media (prefers-reduced-motion: reduce) { #chat *, .cg-launch { animation: none !important; transition: none !important; } }