/* OSANIME Global Chat Stage 3.1 — neon premium redesign.
 * Visual-only upgrade: original Stage 2 API and Stage 3 polling behavior retained.
 * All declarations are scoped to .ogc3 to avoid changing OSANIME pages.
 */
.ogc3 {
  --ogc3-pink: #ff4ea5;
  --ogc3-rose: #f36abe;
  --ogc3-violet: #ad68ff;
  --ogc3-cyan: #36e0e5;
  --ogc3-text: #eff2ff;
  --ogc3-muted: #9aaad0;
  --ogc3-anchor-bottom: 155px;
  --ogc3-anchor-right: 26px;
  font-family: inherit;
  color: var(--ogc3-text);
}
.ogc3 *, .ogc3 *::before, .ogc3 *::after {box-sizing:border-box}
.ogc3 [hidden] {display:none !important}
.ogc3 button,.ogc3 textarea {font:inherit}
.ogc3 button {cursor:pointer}
.ogc3 button:focus-visible,.ogc3 a:focus-visible,.ogc3 textarea:focus-visible {outline:2px solid #f4a3f8;outline-offset:3px}

/* Small floating button, aligned above OSANIME's existing scroll-to-top control. */
.ogc3-launcher {
  position:fixed; z-index:2147482605;
  right:var(--ogc3-anchor-right);bottom:var(--ogc3-anchor-bottom);
  width:62px;height:62px;display:grid;place-items:center;
  border:1px solid rgba(255,186,238,.86);border-radius:50%;
  color:white;font-size:25px;
  background:linear-gradient(135deg,#ff55aa 0%,#d64cd3 45%,#805cff 100%);
  box-shadow:0 0 0 5px rgba(234,70,200,.12),0 0 25px rgba(244,48,181,.46),0 11px 30px rgba(0,0,0,.55);
  transition:transform .18s,box-shadow .18s,filter .18s;
  touch-action:manipulation;
}
.ogc3-launcher:hover {transform:translateY(-3px);filter:brightness(1.07);box-shadow:0 0 0 6px rgba(234,70,200,.16),0 0 35px rgba(244,48,181,.6),0 14px 32px #0009}
.ogc3-launcher-icon {display:grid;place-items:center;line-height:1}
.ogc3-unread {position:absolute;top:-4px;right:-3px;min-width:21px;height:21px;padding:0 4px;display:grid;place-items:center;background:#ff407e;border:2px solid #0c1129;border-radius:30px;font-size:10px;font-weight:900;color:white}
.ogc3-backdrop {position:fixed;z-index:2147482606;inset:0;pointer-events:none;background:rgba(5,7,17,.08)}

/* Match neon frame from the design reference, without affecting site cards. */
.ogc3-panel {
  position:fixed; z-index:2147482607;
  bottom:18px;right:22px;
  width:min(516px,calc(100vw - 28px));
  height:min(735px,calc(100dvh - 94px));
  min-height:300px;
  display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  border:1.5px solid transparent;border-radius:23px;
  background:linear-gradient(149deg,rgba(20,22,50,.98),rgba(8,17,40,.985) 47%,rgba(13,16,42,.98)) padding-box,
             linear-gradient(135deg,#ff5eb2 1%,#9e76ff 36%,#678bff 59%,#ff49d9 100%) border-box;
  box-shadow:0 0 0 1px rgba(243,107,243,.07),0 0 29px rgba(243,62,193,.19),0 20px 68px rgba(0,0,0,.67);
  color:var(--ogc3-text);
}
.ogc3-panel::before {
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 85% 0%,rgba(191,65,202,.22),transparent 43%),
             radial-gradient(ellipse at 102% 67%,rgba(100,76,200,.17),transparent 40%),
             radial-gradient(ellipse at 0% 95%,rgba(210,46,161,.12),transparent 30%);
}
.ogc3-panel::after {
  content:"";position:absolute;z-index:-1;right:-38px;top:-65px;width:185px;height:230px;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(247,84,174,.14),transparent 64%);
}
.ogc3-head {
  flex:none;display:flex;align-items:center;gap:15px;
  min-height:111px;padding:20px 20px 18px;
  border-bottom:1px solid rgba(165,143,242,.2);
  background:linear-gradient(105deg,rgba(241,77,164,.085),transparent 50%,rgba(147,91,240,.065));
}
.ogc3-brand {
  flex:none;width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  font-size:25px;color:white;
  background:linear-gradient(135deg,#ff60b2 0%,#d94bce 44%,#915cff 100%);
  box-shadow:0 5px 24px rgba(225,76,177,.33),inset 0 1px 0 #ffffff56;
}
.ogc3-heading {flex:1;min-width:0}
.ogc3-kicker {display:block;color:#ff81d0;letter-spacing:.16em;font-size:10px;font-weight:900;margin-bottom:3px}
.ogc3-heading h2 {margin:0!important;padding:0!important;color:#fff!important;font-size:24px!important;font-weight:850!important;line-height:1.22!important;letter-spacing:-.045em!important}
.ogc3-sparkle {color:#ff77d1;text-shadow:0 0 16px #ff4fb0}
.ogc3-tagline {margin:5px 0 0;font-size:12px;color:#b9c7e5;line-height:1.38}
.ogc3-close {flex:none;align-self:flex-start;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(115,130,189,.38);background:rgba(35,45,75,.83);color:#edf0ff;font-size:15px;transition:background .16s}
.ogc3-close:hover {background:#35426b}

.ogc3-roomline {
  flex:none;display:flex;align-items:center;gap:12px;min-height:49px;
  padding:9px 18px;
  background:linear-gradient(90deg,rgba(15,32,61,.96),rgba(17,29,59,.92));
  border-bottom:1px solid rgba(91,118,193,.25);
  color:#dce5fc;font-size:11.5px;white-space:nowrap;
}
.ogc3-status {min-width:0;display:flex;align-items:center;gap:7px;color:#b9c8e3;font-size:11px}
.ogc3-dot {display:block;flex:none;width:9px;height:9px;border-radius:50%;background:#f5b86d;box-shadow:0 0 9px #f5b86d77}
.ogc3[data-connection="ok"] .ogc3-dot {background:#23dfb6;box-shadow:0 0 10px #23dfb6a8}
.ogc3[data-connection="error"] .ogc3-dot {background:#ff647a;box-shadow:0 0 10px #ff647aaa}
.ogc3-room-sep {height:17px;width:1px;background:#516287;opacity:.65;flex:none}
.ogc3-room-name {min-width:0;overflow:hidden;text-overflow:ellipsis;display:block;flex:1;font-weight:700}
.ogc3-room-name i {margin-right:6px;color:#d9dbff}
.ogc3-roomline small {font-size:10px;font-weight:700;color:#d8c6fd;background:#342759a8;border:1px solid #5c418e99;border-radius:40px;padding:5px 11px}

.ogc3-feed {
  flex:1;min-height:0;display:flex;flex-direction:column;gap:15px;
  padding:18px 17px 20px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#8563ba #0b1430;
}
.ogc3-feed::-webkit-scrollbar {width:6px}
.ogc3-feed::-webkit-scrollbar-thumb {background:#6f58a3;border-radius:10px}
.ogc3-empty {margin:auto;text-align:center;max-width:280px;color:#a9b7d6;font-size:13px;line-height:1.5;padding:14px}
.ogc3-empty strong {display:block;color:#f4f2ff;font-size:15px;margin-top:19px}
.ogc3-empty p {margin:8px 0 0}
.ogc3-empty-art {position:relative;display:flex;justify-content:center;align-items:center;min-height:92px;font-weight:900;letter-spacing:5px}
.ogc3-empty-art span {position:absolute;display:grid;place-items:center;width:102px;height:68px;border-radius:23px 23px 7px 23px;color:white;font-size:13px;background:linear-gradient(135deg,#965aff,#5c55d5);box-shadow:0 10px 25px #8051ff33;transform:translate(-20px,-9px) rotate(-8deg)}
.ogc3-empty-art span+span {width:79px;height:54px;transform:translate(39px,21px) rotate(8deg);background:linear-gradient(135deg,#ff4caa,#db4793);border-radius:20px 20px 20px 6px;letter-spacing:3px}
.ogc3-older {align-self:center;flex:none;margin:10px auto 0;padding:8px 14px;border:1px solid #795ba6;border-radius:30px;background:#282044;color:#eaddff;font-size:11px;font-weight:700}
.ogc3-older:disabled {opacity:.5;cursor:wait}

.ogc3-message {display:flex;gap:12px;align-items:flex-start;max-width:100%;padding:0;margin:0}
.ogc3-avatar {width:43px;height:43px;flex:none;border-radius:50%;object-fit:cover;background:#343458;border:2px solid rgba(230,128,223,.67);box-shadow:0 0 10px #fc71e022}
.ogc3-message:nth-child(3n) .ogc3-avatar {border-color:#6dd5ff}
.ogc3-message:nth-child(3n+1) .ogc3-avatar {border-color:#ff83ba}
.ogc3-message-main {flex:1;min-width:0;padding-top:1px}
.ogc3-msg-head {display:flex;align-items:center;gap:8px;margin:0 0 6px;min-width:0}
.ogc3-msg-head strong {min-width:0;max-width:70%;font-size:12.5px;color:#fa80d1;font-weight:850;overflow-wrap:anywhere}
.ogc3-message:nth-child(3n) .ogc3-msg-head strong {color:#5addfc}
.ogc3-message:nth-child(3n+2) .ogc3-msg-head strong {color:#ba84ff}
.ogc3-msg-head time {margin-left:auto;flex:none;color:#9dafd3;font-size:10px;font-variant-numeric:tabular-nums}
.ogc3-bubble {display:block;width:fit-content;max-width:100%;margin:0;padding:11px 13px;border-radius:5px 15px 15px 15px;border:1px solid #293b63;color:#edf1ff;background:linear-gradient(145deg,rgba(25,39,72,.98),rgba(22,35,63,.96));font-size:12.5px;line-height:1.56;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 5px 15px #060b1b35}

.ogc3-compose-area {flex:none;position:relative;padding:14px 17px 12px;border-top:1px solid rgba(130,92,204,.32);background:linear-gradient(180deg,#101734e8,#17122fef)}
.ogc3-form {display:flex;align-items:flex-end;gap:10px}
.ogc3-input-shell {position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:7px;min-height:56px;border:1px solid #7761ba;border-radius:18px;background:rgba(22,32,63,.95);box-shadow:inset 0 1px 0 #ffffff10,0 0 13px #8556bd28;padding:7px 9px}
.ogc3-input-shell:focus-within {border-color:#db84f1;box-shadow:0 0 0 2px #d279ec25,0 0 16px #bb56e53c}
.ogc3-emoji-toggle {flex:none;align-self:flex-end;width:36px;height:39px;display:grid;place-items:center;border:0;background:transparent;color:#e3e5ff;font-size:20px;border-radius:10px}
.ogc3-emoji-toggle:hover {background:#ffffff11;color:#ffb2ea}
.ogc3-form textarea {flex:1;min-width:0;width:100%;min-height:38px;max-height:112px;padding:11px 2px 9px;border:0!important;outline:0!important;box-shadow:none!important;color:#f3f2ff;background:transparent!important;resize:none;font-size:12.5px;line-height:1.42}
.ogc3-form textarea::placeholder {color:#91a2c7}
.ogc3-send {flex:none;width:56px;height:56px;border:1px solid #ea7bd8;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,#ff4fa3,#cc4de1 61%,#915cff);box-shadow:0 5px 20px #c84ddc40;color:white;font-size:20px;transition:filter .16s,transform .16s}
.ogc3-send:hover {filter:brightness(1.1);transform:translateY(-1px)}
.ogc3-send:disabled {opacity:.52;cursor:wait;transform:none}
.ogc3-emoji-menu {position:absolute;left:3px;bottom:calc(100% + 12px);z-index:5;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:224px;padding:10px;border:1px solid #965fcc;border-radius:15px;background:#17213e;box-shadow:0 12px 30px #000a}
.ogc3-emoji-menu button {border:0;border-radius:8px;background:transparent;font-size:22px;min-width:42px;min-height:38px}
.ogc3-emoji-menu button:hover {background:#51457955}
.ogc3-compose-note {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 2px 0;color:#9dadcc;font-size:10px}
.ogc3-compose-note span:last-child {font-variant-numeric:tabular-nums;white-space:nowrap}
.ogc3-guest p {margin:0 0 12px;display:flex;flex-direction:column;gap:3px}
.ogc3-guest strong {font-size:13px;color:#fff}
.ogc3-guest p span {font-size:11px;color:#b6c3df}
.ogc3-guest-actions {display:flex;gap:10px}
.ogc3-guest-actions a {min-height:42px;flex:1;display:grid;place-items:center;border-radius:12px;border:1px solid #705294;background:#2b2549;text-decoration:none;color:#f8f4ff;font-size:12px;font-weight:750}
.ogc3-guest-actions a:first-child {background:linear-gradient(135deg,#ff57a7,#9e60ea);border-color:transparent}
.ogc3-sr {position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);margin:-1px;padding:0;border:0}

@media (max-width: 600px) {
  .ogc3 {--ogc3-anchor-right:max(15px,env(safe-area-inset-right));--ogc3-anchor-bottom:calc(145px + env(safe-area-inset-bottom))}
  .ogc3-launcher {width:54px;height:54px;font-size:23px}
  .ogc3-panel {bottom:0;right:0;width:100%;height:min(88dvh,790px);max-height:calc(100dvh - 22px);min-height:300px;border-bottom:0;border-radius:23px 23px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .ogc3-head {min-height:98px;padding:16px;gap:11px}
  .ogc3-brand {width:49px;height:49px;font-size:21px;border-radius:16px}
  .ogc3-heading h2 {font-size:21px!important}
  .ogc3-kicker {font-size:9px}
  .ogc3-tagline {font-size:11px}
  .ogc3-close {width:34px;height:34px}
  .ogc3-roomline {gap:8px;padding:9px 12px;font-size:10px}
  .ogc3-roomline small {font-size:9px;padding:4px 8px}
  .ogc3-room-sep {height:15px}
  .ogc3-feed {padding:14px 12px 18px;gap:13px}
  .ogc3-avatar {width:37px;height:37px}
  .ogc3-bubble {font-size:12px;padding:10px 11px}
  .ogc3-compose-area {padding:11px 12px 13px}
  .ogc3-input-shell {min-height:49px;padding:4px 6px}
  .ogc3-send {width:48px;height:48px;border-radius:14px}
  .ogc3-backdrop {pointer-events:auto;background:rgba(1,3,12,.66);backdrop-filter:blur(4px)}
  body.ogc3-sheet-open {overflow:hidden!important}
}
@media (max-height:600px) and (min-width:601px) {
  .ogc3-panel {bottom:10px;height:calc(100dvh - 24px)}
}
@media (prefers-reduced-motion: reduce) {
  .ogc3 * {transition:none!important;animation:none!important;scroll-behavior:auto!important}
}