/* ── PHAZE H5 Chat ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

#h5chat {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  /* Classic xat: the room bg fills the whole box, panels float translucent above it.
     JS overlays the per-room bg color (cfg.roomBg); this is the PHAZE default. */
  background: radial-gradient(120% 90% at 50% -10%, #1c1340 0%, #0d0a1e 55%, #07060f 100%);
  overflow: hidden;
  position: relative;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  color: #d4d4e8;
}

/* ── Connection overlay — loading bar over the chat ───────────────────────── */
#h5-connstatus {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,6,15,.82); backdrop-filter: blur(6px);
  opacity: 1; transition: opacity .4s ease;
}
#h5-connstatus.hidden { opacity: 0; pointer-events: none; }
.cs-card { text-align: center; width: min(320px, 82%); }
.cs-logo {
  font-size: 26px; font-weight: 900; letter-spacing: .18em;
  background: linear-gradient(90deg, #a78bfa 0%, #06b6d4 40%, #a78bfa 60%, #a78bfa 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: csLogoShimmer 2.5s linear infinite;
  margin-bottom: 10px;
}
@keyframes csLogoShimmer { to { background-position: -200% center; } }
.cs-msg { font-size: 13px; font-weight: 800; color: #e2d9f3; }
.cs-barwrap {
  height: 10px; margin: 12px 0 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(124,58,237,.35); border-radius: 7px;
  overflow: hidden;
}
.cs-bar {
  height: 100%; width: 10%; border-radius: 7px;
  background: linear-gradient(90deg, #7c3aed, #06b6d4, #7c3aed);
  background-size: 200% 100%;
  animation: csBarFlow 1.4s linear infinite;
  transition: width .5s ease;
  box-shadow: 0 0 12px rgba(124,58,237,.6);
}
.cs-bar.error { background: linear-gradient(90deg, #b91c1c, #ef4444); animation: none; }
@keyframes csBarFlow { to { background-position: -200% 0; } }
.cs-sub { font-size: 10px; color: rgba(255,255,255,.45); min-height: 13px; }
.cs-tip { font-size: 10px; color: rgba(167,139,250,.7); font-style: italic; margin-top: 10px; }

/* ── Announce — a dismissible PINNED NOTICE, visually distinct from the
   scrolling purple scroller (amber pin strip, static, closeable) ─────────── */
#h5-announce {
  display: none; align-items: center; gap: 7px;
  padding: 4px 10px; font-size: 11px; line-height: 1.3;
  color: #fde68a;
  background: rgba(20,14,4,.9);
  border-bottom: 1px solid rgba(251,191,36,.3);
  border-left: 3px solid #fbbf24;
  flex-shrink: 0;
}
#h5-announce.visible { display: flex; }
#h5-announce::before { content: '📌'; font-size: 11px; flex-shrink: 0; }
#h5-announce span { flex: 1; min-width: 0; }
.ann-close { background: none; border: none; color: rgba(253,230,138,.6); cursor: pointer; font-size: 14px; margin-left: auto; flex-shrink: 0; }
.ann-close:hover { color: #fde68a; }

/* ── Scroller marquee (classic xat) — runs across the top of the message panel ── */
#h5-scroller {
  flex-shrink: 0; overflow: hidden; white-space: nowrap;
  padding: 3px 0; position: relative;
  background: linear-gradient(90deg, #4c1d95, #6d28d9 50%, #4c1d95);
  border-bottom: 1px solid rgba(167,139,250,.4);
  box-shadow: 0 1px 6px rgba(0,0,0,.4);
}
#h5-scroller.hidden { display: none; }
#h5-countdown {
  flex-shrink: 0; text-align: center; padding: 3px 8px;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #fff; letter-spacing: .05em;
  background: linear-gradient(90deg, #7c3aed, #a855f7 50%, #7c3aed);
  border-bottom: 1px solid rgba(168,85,247,.4);
}
#h5-countdown.hidden { display: none; }
#h5-scroller-track {
  display: inline-block; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  padding-left: 100%;
  animation: h5ScrollMarquee linear infinite;
}
#h5-scroller:hover #h5-scroller-track { animation-play-state: paused; }
@keyframes h5ScrollMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ── Tab bar — classic xat: tabs hang DOWN below the messages panel ───────── */
#h5-toptabs {
  display: flex; align-items: flex-start;
  padding: 0 6px 0 0;
  background: transparent;
  flex-shrink: 0; min-height: 24px;
}
#h5-pmtabs {
  display: flex; align-items: flex-start; gap: 3px;
  flex: 1; overflow-x: auto; scrollbar-width: none;
}
#h5-pmtabs::-webkit-scrollbar { display: none; }

.pmtab {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 12px 4px;
  background: rgba(255,255,255,.3);
  border: 1px solid rgba(192,192,192,.8);
  border-top: none;
  border-radius: 0 0 8px 8px;
  color: #1f2937;
  font-size: 10px; font-weight: 700;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  font-family: Tahoma, Arial, sans-serif;
  position: relative; top: -1px;
  transition: background .1s, color .1s;
}
.pmtab:hover { background: rgba(255,255,255,.5); }
.pmtab.active {
  background: rgba(255,255,255,.55);
  color: #000;
}
.pm-unread {
  background: #7c3aed; color: #fff;
  font-size: 8px; font-weight: 700;
  border-radius: 6px; padding: 0 3px; min-width: 11px; text-align: center;
}
.pm-close { opacity: 0; font-size: 12px; color: #888; margin-left: 1px; }
.pmtab:hover .pm-close { opacity: 1; }
.pm-close:hover { color: #f87171; }
/* PC tab glow (xat ColorTab green + GlowTab) — pulses until clicked */
.pm-tab-glow {
  animation: pc-glow 1s ease-in-out infinite alternate;
  border-color: rgba(0,200,80,.6);
}
@keyframes pc-glow {
  from { box-shadow: 0 0 4px rgba(0,200,80,.4); }
  to   { box-shadow: 0 0 10px rgba(0,200,80,.9), 0 0 2px rgba(0,200,80,.5); }
}

#h5-topright {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px 0; flex-shrink: 0;
}
.online-count {
  font-size: 10px; color: #fff; font-weight: 700; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.top-btn {
  background: rgba(255,255,255,.3); border: 1px solid rgba(192,192,192,.8);
  border-radius: 3px; color: #1f2937; font-size: 11px;
  cursor: pointer; padding: 1px 6px; font-family: inherit;
  transition: background .1s;
}
.top-btn:hover { background: rgba(255,255,255,.5); }
.top-btn.playing { background: rgba(52,211,153,.45); }
.radio-wrap { display: inline-flex; align-items: center; gap: 4px; }
.radio-vol {
  width: 54px; height: 4px; cursor: pointer; opacity: .75;
  accent-color: var(--room-accent, #38bdf8);
}
.radio-vol:hover { opacity: 1; }

/* ── Main body — classic xat 74/26 split, panels padded apart over room bg ── */
#h5-body {
  display: flex; flex: 1; min-height: 0;
  padding: 8px 8px 6px 10px; gap: 10px; overflow: visible;
  position: relative;
}

/* ── Message panel (left column) ──────────────────────────────────────────── */
#h5-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: transparent;
  overflow: hidden;
  position: relative;
}

/* ── Messages — classic translucent white panel, silver border,
     bottom-left corner squared where the tab row connects ─────────────────── */
#h5-messages {
  flex: 1; overflow-y: auto;
  padding: 4px 5px 4px;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(192,192,192,.8);
  border-radius: 8px 8px 8px 0;
  display: flex; flex-direction: column; gap: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.45) transparent;
}
#h5-messages::-webkit-scrollbar { width: 8px; }
#h5-messages::-webkit-scrollbar-track { background: transparent; }
#h5-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,.45); border-radius: 100px; }

/* Real xat: messages flow directly on the panel background, no per-row box —
   only a hover highlight, same convention as the member list rows. */
/* real xat: every li.message is its own translucent white pill with a gap
   above/below (li.message{margin-top:6px;margin-bottom:6px;background-color:
   hsla(0,0%,100%,.5)}) — not a flat continuous list. */
.msg-wrap {
  position: relative;
  margin: 6px 4px;
  background: hsla(0,0%,100%,.5);
  border-radius: 3px;
}
.msg-wrap:hover { background: hsla(0,0%,100%,.68); }
.msg-wrap.is-history { margin-top: 6px; }
.msg-wrap:hover .msg-react-btn { opacity: 1; }
.msg {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 7px; padding: 2px 6px; line-height: 1.5; min-height: 24px;
  border-radius: 3px;
}
.msg:hover { background: transparent; }

/* ── Reaction add button ── */
.msg-react-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: rgba(15,15,30,.95); border: 1px solid rgba(124,58,237,.3);
  border-radius: 6px; padding: 2px 6px; font-size: 13px; cursor: pointer;
  opacity: 0; transition: opacity .12s, background .12s; line-height: 1;
  color: rgba(255,255,255,.6); user-select: none; z-index: 10;
}
.msg-react-btn:hover { background: rgba(124,58,237,.25); color: #fff; }

/* ── Reaction picker popup ── */
.reaction-picker {
  position: fixed; z-index: 2000;
  background: rgba(12,12,24,.97); border: 1px solid rgba(124,58,237,.35);
  border-radius: 10px; padding: 6px 8px;
  display: flex; gap: 2px; flex-wrap: wrap; max-width: 220px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
  animation: fadeUp .12s ease both;
}
.reaction-picker .rp-em {
  font-size: 20px; padding: 4px 5px; border-radius: 6px; cursor: pointer;
  transition: background .1s, transform .1s; line-height: 1;
}
.reaction-picker .rp-em:hover { background: rgba(124,58,237,.25); transform: scale(1.2); }

/* ── Reaction bar ── */
.msg-reactions {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 2px 5px 4px 6px; min-height: 0;
}
.msg-reactions:empty { display: none; }
.rxn-pill {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.22);
  border-radius: 20px; padding: 1px 7px 1px 4px;
  font-size: 12px; cursor: pointer; transition: background .12s, border-color .12s;
  user-select: none; line-height: 1.4;
}
.rxn-pill:hover { background: rgba(124,58,237,.25); border-color: rgba(124,58,237,.5); }
.rxn-pill.mine { background: rgba(124,58,237,.22); border-color: rgba(124,58,237,.45); }
.rxn-pill .rxn-count { font-size: 11px; color: rgba(255,255,255,.55); font-weight: 600; }
.msg.grouped { padding-left: 6px; }
/* real xat: system/notice lines use li.section's dark strip, not the white
   message pill (li.section{background-color:rgba(0,0,0,.7);color:#fff}) */
.msg-wrap[data-is-system="1"] {
  background: rgba(0,0,0,.7); margin: 4px 4px;
}
/* dice rolls carry their own purple pill styling — don't nest it in another pill */
.msg-wrap[data-is-dice="1"] { background: transparent; margin: 2px 4px; }
.msg.system { padding: 2px 8px; }
.msg.system .msg-text {
  font-size: 10px; color: #fff; font-style: italic;
}
/* PC/PM strips: classic tinted rows (blue = incoming, green = outgoing) */
.msg.pm-in  { background: rgba(147,197,253,.45); }
.msg.pm-out { background: rgba(134,239,172,.4); }
.msg.action { color: #5b21b6; font-style: italic; }
.action-name { font-style: normal; font-weight: 700; }
.msg.dice {
  background: rgba(124,58,237,.18); border-radius: 5px;
  margin: 2px 0; padding: 5px 8px; align-items: center; gap: 8px;
  border: 1px solid rgba(124,58,237,.3);
}
.dice-result { display: flex; align-items: center; gap: 10px; }
.dice-label { font-size: 11px; color: #4c1d95; }
.dice-label strong { color: #2e1065; }

/* ── 3D Dice cube ─────────────────────────────────────────────────────── */
.dice-scene {
  width: 32px; height: 32px;
  perspective: 120px;
  flex-shrink: 0;
}
.dice-cube {
  width: 32px; height: 32px;
  position: relative;
  transform-style: preserve-3d;
  animation: dice-roll 0.9s cubic-bezier(.25,.1,.25,1) forwards;
}
.dice-cube.non-d6 {
  animation: dice-slam 0.5s cubic-bezier(.22,1,.36,1) forwards;
}
.dice-face-el {
  position: absolute;
  width: 32px; height: 32px;
  border: 2px solid rgba(167,139,250,.7);
  border-radius: 6px;
  background: rgba(15,15,35,.95);
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden;
}
.dice-face-el .pip-grid {
  display: grid;
  width: 22px; height: 22px;
  gap: 3px;
}
.pip-grid.p1 { grid-template: repeat(3,1fr)/repeat(3,1fr); }
.pip-grid.p2 { grid-template: repeat(2,1fr)/repeat(1,1fr); }
.pip-grid.p3 { grid-template: repeat(3,1fr)/repeat(1,1fr); }
.pip-grid.p4 { grid-template: repeat(2,1fr)/repeat(2,1fr); }
.pip-grid.p5 { grid-template: repeat(3,1fr)/repeat(3,1fr); }
.pip-grid.p6 { grid-template: repeat(3,1fr)/repeat(2,1fr); }
.pip { width: 5px; height: 5px; border-radius: 50%; background: #c4b5fd; }
.pip.h { visibility: hidden; }

/* face positions */
.dice-face-el.front  { transform: translateZ(16px); }
.dice-face-el.back   { transform: rotateY(180deg) translateZ(16px); }
.dice-face-el.right  { transform: rotateY( 90deg) translateZ(16px); }
.dice-face-el.left   { transform: rotateY(-90deg) translateZ(16px); }
.dice-face-el.top    { transform: rotateX( 90deg) translateZ(16px); }
.dice-face-el.bottom { transform: rotateX(-90deg) translateZ(16px); }

/* non-d6 flat face */
.dice-face-el.flat {
  transform: translateZ(16px);
  font-size: 13px; font-weight: 700; color: #c4b5fd;
}

/* roll animation: spin 2+ full rotations then land on result */
@keyframes dice-roll {
  0%   { transform: rotateX(0deg)    rotateY(0deg)    rotateZ(0deg); }
  30%  { transform: rotateX(360deg)  rotateY(180deg)  rotateZ(90deg); }
  60%  { transform: rotateX(540deg)  rotateY(360deg)  rotateZ(45deg); }
  85%  { transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(4deg); }
  100% { transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(0deg); }
}
@keyframes dice-slam {
  0%   { transform: translateZ(16px) translateZ(-40px) scale(.4); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* xat real two-line message format (from live classic.html DOM):
   name+pawn row on top, message text row below, indented past the pawn. */
.msg.xat-msg {
  display: block;
  padding: 1px 6px;
  min-height: 20px;
}
.msg.xat-msg .messagesName {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 2px; white-space: nowrap;
}
.msg.xat-msg .messagesMessage {
  display: block;
  margin-top: -1px;
  padding-left: 20px;
  line-height: 1.3;
}
/* real xat: avatar/xavi floats left, name+text rows wrap beside it */
.msg.xat-msg.has-avatar { display: flow-root; }
.msg-av {
  float: left; width: 30px; height: 30px;
  margin: 3px 5px 2px 0; border-radius: 3px;
  object-fit: cover; cursor: pointer;
}
.msg-pawn {
  width: 16px; height: 16px; flex-shrink: 0;
  vertical-align: middle; cursor: pointer;
}
.msg-name {
  font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.msg-name:hover { text-decoration: underline; }
.msg-time { font-size: 9px; color: rgba(0,0,0,.38); white-space: nowrap; flex-shrink: 0; margin-left: auto; padding-left: 4px; }
/* classic xat: message text is dark + chunky (messagesMessage font-weight 700) */
.msg-text {
  display: inline; font-size: 12px; color: #16161d; font-weight: 600;
  word-break: break-word;
}
.msg-text a { color: #4338ca; }
.msg-text.gagged { opacity: .3; text-decoration: line-through; }
.gag-badge { font-size: 8px; background: rgba(220,38,38,.2); color: #f87171; border-radius: 2px; padding: 0 2px; }
.power-badge { width: 11px; height: 11px; image-rendering: pixelated; vertical-align: middle; }
.smiley { width: 19px; height: 19px; vertical-align: middle; }
/* animated sprite strip: bg slides one frame at a time via steps() */
.smx {
  display: inline-block; width: 19px; height: 19px;
  background-repeat: no-repeat; background-size: auto 100%;
}
@keyframes smx-play { to { background-position-x: var(--end, 0); } }

/* xat rank colors — dark, saturated variants readable on the white strips */
.rank-mainowner { color: #be185d; }
.rank-admin  { color: #b91c1c; }
.rank-owner  { color: #b45309; }
.rank-mod    { color: #047857; }
.rank-member { color: #4338ca; }
.rank-guest  { color: #1f2937; }
.rank-bot    { color: #6d28d9; }

/* ── Typing indicator — floats on the room bg between panel and tabs ──────── */
#h5-typing {
  padding: 0 8px; font-size: 9px; color: rgba(255,255,255,.8); font-style: italic;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0; background: transparent;
}
#h5-typing:empty { padding: 0; }
.typing-dots { display: inline-flex; gap: 2px; align-items: center; }
.typing-dots span {
  width: 3px; height: 3px; border-radius: 50%;
  background: #7c3aed; animation: tdot 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes tdot { 0%,80%,100%{opacity:.3;transform:scale(.8)} 40%{opacity:1;transform:scale(1)} }

/* ── Smiley strip — classic xat: smileys float directly on the room bg ────── */
#h5-smstrip {
  display: flex; align-items: center;
  padding: 3px 6px 0; gap: 2px;
  background: transparent;
  flex-shrink: 0;
  height: 38px; overflow: hidden;
}
#h5-smstrip-left {
  display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
#h5-smstrip-left::-webkit-scrollbar { display: none; }
#h5-smstrip-right {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0; padding-left: 6px;
  border-left: 1px solid rgba(255,255,255,.25); margin-left: 4px;
}
.smstrip-item {
  width: 30px; height: 30px; flex-shrink: 0;
  cursor: pointer; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .08s, background .08s;
}
.smstrip-item:hover { transform: scale(1.2); background: rgba(255,255,255,.12); }
.smstrip-item img { width: 22px; height: 22px; image-rendering: pixelated; display: block; }
.smstrip-more {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  color: rgba(255,255,255,.65);
  cursor: pointer; padding: 0 6px; flex-shrink: 0;
  background: rgba(255,255,255,.1); border: none; font-family: inherit; line-height: 1;
  height: 28px; border-radius: 5px; display: flex; align-items: center;
  transition: background .1s, color .1s;
}
.smstrip-more:hover { background: rgba(255,255,255,.25); color: #fff; }
.smstrip-right-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 5px; flex-shrink: 0;
  font-size: 14px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.15);
  border: none; font-family: inherit;
  transition: background .1s, color .1s;
}
.smstrip-right-btn:hover { background: rgba(255,255,255,.35); color: #fff; }
.smstrip-right-btn.btn-disconnected { color: #f87171; }
.smstrip-right-btn.btn-disconnected:hover { background: rgba(248,113,113,.1); color: #fca5a5; }
.smstrip-right-btn.hidden { display: none; }
#h5-app-radio.playing { background: rgba(124,58,237,.35); color: #c4b5fd; }
#h5-app-radio.playing:hover { background: rgba(124,58,237,.55); }

/* ── Input bar — classic xat text entry + silver ↵ button ─────────────────── */
#h5-inputbar {
  display: flex; align-items: stretch; gap: 8px;
  padding: 4px 4px 4px;
  background: transparent;
  flex-shrink: 0; min-height: 62px;
}
#h5-input {
  flex: 1;
  background: rgba(255,255,255,.38);
  border: 1px solid rgba(192,192,192,.85); border-radius: 8px;
  padding: 8px 12px; color: #111;
  font-size: 13px; font-weight: 600; font-family: Tahoma, Arial, sans-serif;
  outline: none; resize: none; line-height: 1.4;
  min-height: 52px; max-height: 120px; overflow-y: auto; scrollbar-width: none;
  transition: background .15s;
}
#h5-input:focus { background: rgba(255,255,255,.55); }
#h5-input:disabled { background: rgba(255,255,255,.15); color: rgba(0,0,0,.35); cursor: not-allowed; }
#h5-input::placeholder { color: rgba(0,0,0,.38); font-size: 13px; }
/* the ↵ button — xat's narrow silver send button (24px wide in Flash, full input height) */
.xat-send-btn {
  width: 30px; padding: 0;
  background-color: silver;
  background-image: linear-gradient(hsla(0,0%,100%,.35), rgba(0,0,0,.28));
  border: 1px solid rgba(160,160,160,.9); border-radius: 6px;
  color: #1f2937; font-size: 16px; font-weight: 900;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-family: Tahoma, Arial, sans-serif; white-space: nowrap;
  text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
  transition: filter .1s, transform .08s;
  align-self: stretch;
}
.xat-send-btn:hover { filter: brightness(1.12); }
.xat-send-btn:active { transform: scale(.97); }

/* ── Sidebar (right) — classic xat 26% visitors column ────────────────────── */
#h5-sidebar {
  width: 26%; min-width: 150px; max-width: 215px; flex-shrink: 0;
  display: flex; flex-direction: row;
  transition: width .2s ease;
  overflow: visible;
}
#h5-sidebar.collapsed { width: 0; min-width: 0; }

#h5-sidebar-toggle {
  position: absolute;
  right: max(min(26%, 215px), 150px); top: 50%; transform: translateY(-50%);
  width: 13px; height: 40px;
  background: rgba(255,255,255,.25);
  border: 1px solid rgba(192,192,192,.7); border-right: none;
  border-radius: 4px 0 0 4px;
  color: rgba(255,255,255,.85); font-size: 9px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 20; padding: 0;
  font-family: inherit;
  transition: background .12s, right .2s ease;
}
#h5-sidebar.collapsed #h5-sidebar-toggle { right: 0; }
#h5-sidebar-toggle:hover { background: rgba(255,255,255,.5); color: #000; }

#h5-sidebar-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: transparent;
  transition: width .2s ease, opacity .15s ease;
}
#h5-sidebar.collapsed #h5-sidebar-content { width: 0; opacity: 0; pointer-events: none; }

/* DOM order now matches visual order: userlist → utabs → cta-bot → signin-btn */

#h5-utabs {
  display: flex; gap: 3px;
  flex-shrink: 0; padding: 0 4px;
}
.utab {
  flex: 1; padding: 4px 4px 5px;
  background: rgba(255,255,255,.3);
  border: 1px solid rgba(192,192,192,.8); border-top: none;
  border-radius: 0 0 8px 8px;
  color: #1f2937; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: Tahoma, Arial, sans-serif;
  transition: background .1s; text-align: center;
  position: relative; top: -1px;
}
.utab:hover { background: rgba(255,255,255,.5); }
.utab.active { background: rgba(255,255,255,.55); color: #000; }

/* the visitors panel itself — classic translucent white box */
#h5-userlist, #h5-friendslist {
  display: flex; flex-direction: column; flex: 1; overflow: hidden;
  background: rgba(255,255,255,.28);
  border: 1px solid rgba(192,192,192,.8);
  border-radius: 8px 8px 0 0;
}
#h5-userlist.hidden, #h5-friendslist.hidden { display: none; }
#h5-userlist-inner, #h5-friendslist-inner {
  overflow-y: auto; flex: 1;
  padding: 2px 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.45) transparent;
}
#h5-userlist-inner::-webkit-scrollbar { width: 6px; }
#h5-userlist-inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,.45); border-radius: 100px; }

/* group headers — xat li.section: dark strip, white text */
.ulist-group {
  padding: 3px 8px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #fff;
  background: rgba(0,0,0,.65);
  border-radius: 5px; margin: 4px 2px 2px;
  display: flex; align-items: center; gap: 3px;
  user-select: none;
}
.ulist-gcount { color: rgba(255,255,255,.65); margin-left: 3px; }
.ulist-fold { margin-left: auto; opacity: .6; font-size: 8px; }
.ulist-section-body.hidden { display: none; }
.ulist-empty { padding: 12px 8px; text-align: center; font-size: 10px; color: rgba(0,0,0,.5); font-style: italic; }

/* visitor rows — no boxed background; the pawn shape/color alone (real xat's
   xatlib.RankColor convention) and list position carry all the meaning */
.uentry {
  display: flex; align-items: center; gap: 5px;
  margin: 0; padding: 2px 6px;
  cursor: pointer; font-size: 11px;
  background: transparent;
  border: none; border-radius: 0;
  transition: background .08s;
}
.uentry:hover { background: hsla(0,0%,100%,.15); }
.uentry.is-gagged { opacity: .4; }
.uentry.is-gagged .uname { text-decoration: line-through; }
.uentry.is-away { opacity: .65; }
.uentry.is-away .uentry-av-wrap { filter: grayscale(.5); }
.uentry.is-invisible { opacity: .45; }
.uentry.is-invisible .uentry-av-wrap { filter: blur(1px) grayscale(.7); }
@keyframes uentry-glow {
  0%   { background: hsla(120,80%,55%,.35); }
  60%  { background: hsla(120,80%,55%,.15); }
  100% { background: transparent; }
}
.uentry.glow-flash { animation: uentry-glow 1.8s ease-out forwards; }
@keyframes uentry-blast { 0%{background:hsla(0,90%,55%,.5)} 100%{background:transparent} }
.uentry.blast-flash { animation: uentry-blast 1.2s ease-out forwards; }
.uentry-av-wrap { position: relative; flex-shrink: 0; }
.uentry-av {
  width: 24px; height: 24px; border-radius: 4px;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.2);
  image-rendering: pixelated;
}
.uentry-pawn {
  width: 8px; height: 12px;
  image-rendering: pixelated; flex-shrink: 0; margin-left: 1px;
}
.uentry-pawn-icon {
  width: 14px; height: 22px;
  flex-shrink: 0; display: block; margin: 0 auto;
}
.friend-online-dot {
  position: absolute; bottom: -1px; right: -2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #16a34a; border: 1.5px solid rgba(255,255,255,.9);
}
.uentry-rank-dot {
  position: absolute; bottom: -1px; right: -2px;
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid rgba(8,8,24,.8);
}
.uentry.rank-admin  .uentry-rank-dot { background: #f87171; }
.uentry.rank-owner  .uentry-rank-dot { background: #fbbf24; }
.uentry.rank-mod    .uentry-rank-dot { background: #34d399; }
.uentry.rank-member .uentry-rank-dot { background: #818cf8; }
.uentry.rank-guest  .uentry-rank-dot { background: #4b5563; }
.uentry.rank-bot    .uentry-rank-dot { background: #c084fc; }
.uname {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 700; color: #16161d;
}
.friend-dot { color: #6d28d9; font-size: 9px; flex-shrink: 0; }

/* namewave (#390) — letters bob in a sine-wave sequence */
@keyframes namewave {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}
.name-wave { display: inline-flex; gap: 0; }
.name-wave > span { display: inline-block; animation: namewave 1s ease-in-out infinite; }
.name-wave > span:nth-child(2n)   { animation-delay: 0.1s; }
.name-wave > span:nth-child(3n)   { animation-delay: 0.2s; }
.name-wave > span:nth-child(4n)   { animation-delay: 0.3s; }
.name-wave > span:nth-child(5n)   { animation-delay: 0.4s; }

/* nameflag (#397) — small flag emoji inline after name */
.name-flag { font-size: 0.85em; margin-left: 2px; }

/* ── Sidebar buttons — xat's silver gradient .butcontainer style ──────────── */
#h5-cta-bot {
  display: flex; align-items: center; justify-content: center;
  margin: 8px 2px 0; padding: 8px 10px;
  background-color: silver;
  background-image: linear-gradient(hsla(0,0%,100%,.35), rgba(0,0,0,.28));
  border: 1px solid rgba(160,160,160,.9);
  border-radius: 6px;
  color: #1f2937; font-size: 11px; font-weight: 800;
  text-decoration: none; letter-spacing: .02em;
  text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
  flex-shrink: 0; cursor: pointer;
  transition: filter .1s, transform .08s;
}
#h5-cta-bot:hover { filter: brightness(1.12); }
#h5-cta-bot:active { transform: scale(.98); }

.h5-sidebar-btn {
  display: flex; align-items: center; justify-content: center;
  margin: 5px 2px 6px; padding: 8px 10px;
  background-color: silver;
  background-image: linear-gradient(hsla(0,0%,100%,.35), rgba(0,0,0,.28));
  border: 1px solid rgba(160,160,160,.9);
  border-radius: 6px;
  color: #1f2937; font-size: 11px; font-weight: 800;
  cursor: pointer; font-family: inherit; letter-spacing: .02em;
  text-shadow: 0 1px 0 hsla(0,0%,100%,.5);
  flex-shrink: 0; transition: filter .15s;
  width: calc(100% - 4px);
}
.h5-sidebar-btn:hover { filter: brightness(1.12); }
.h5-sidebar-btn.btn-disconnected { color: #92400e; }

/* ── Sidebar icon row — GrpIc / HelpIcon / Logo (matches smiley strip height) ── */
#h5-sidebar-icons {
  display: flex; align-items: center; justify-content: flex-end;
  height: 46px; padding: 0 10px; gap: 10px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar-icon-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 5px; flex-shrink: 0;
  font-size: 15px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.15);
  border: none; font-family: inherit; text-decoration: none;
  transition: background .1s, color .1s;
}
.sidebar-icon-btn:hover { background: rgba(255,255,255,.35); color: #fff; }
.phaze-logomark {
  font-size: 13px; font-weight: 900; letter-spacing: .04em;
  background: linear-gradient(135deg, #a78bfa, #06b6d4);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Sidebar footer ───────────────────────────────────────────────────────── */

.h5-footer-stat { font-size: 8px; color: #4b5563; white-space: nowrap; }

#h5-footer-signin.disconnected { color: #f87171; border-color: rgba(248,113,113,.3); }

/* ── Smiley picker ────────────────────────────────────────────────────────── */
#h5-smpicker {
  position: absolute; bottom: 108px; left: 10px; right: calc(max(min(26%, 215px), 150px) + 20px);
  max-height: 220px;
  background: rgba(10,10,28,.97);
  border: 1px solid rgba(124,58,237,.35); border-radius: 8px 8px 0 0;
  z-index: 300; display: none; flex-direction: column; overflow: hidden;
  box-shadow: 0 -4px 24px rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
}
#h5-smpicker.open { display: flex; }
#h5-smpicker-search { padding: 6px 6px 4px; flex-shrink: 0; }
#h5-sm-search {
  width: 100%; background: rgba(20,20,40,.9); border: 1px solid rgba(124,58,237,.3);
  border-radius: 5px; padding: 4px 10px; color: #d1d5db;
  font-size: 11px; outline: none; font-family: inherit;
}
#h5-sm-search:focus { border-color: rgba(124,58,237,.6); }
#h5-smpicker-tabs {
  display: flex; gap: 2px; padding: 3px 6px; flex-shrink: 0;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid rgba(124,58,237,.2);
}
#h5-smpicker-tabs::-webkit-scrollbar { display: none; }
.sm-tab {
  padding: 3px 8px; background: none; border: 1px solid transparent;
  border-radius: 4px; color: #6b7280; font-size: 10px; cursor: pointer;
  white-space: nowrap; font-family: inherit; font-weight: 700;
  transition: color .1s, background .1s;
}
.sm-tab:hover { background: rgba(124,58,237,.15); color: #a78bfa; }
.sm-tab.active { background: rgba(124,58,237,.25); border-color: rgba(124,58,237,.4); color: #c4b5fd; }
#h5-smpicker-grid {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 4px;
  overflow-y: auto;
}
.sm-item { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; transition: background .1s; }
.sm-item:hover { background: rgba(124,58,237,.2); }
.sm-item img { width: 20px; height: 20px; image-rendering: pixelated; }

/* ── User dialog (faithful xDialog port from DialogActions.as) ────────────── */
#h5-ctxmenu {
  position: fixed; width: 340px;
  background: rgba(12,11,30,.98); border: 1px solid rgba(124,58,237,.45);
  border-radius: 12px; box-shadow: 0 14px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(124,58,237,.12);
  z-index: 500; display: none; padding: 0 0 10px;
  font-family: Tahoma, Arial, sans-serif;
  backdrop-filter: blur(10px);
  animation: fadeUp .14s ease;
  overflow: hidden;
}
#h5-ctxmenu.open { display: block; }

/* title bar — "Name (id)" + close, like xDialog chrome */
.xdlg-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 8px 7px 12px;
  background: linear-gradient(180deg, rgba(124,58,237,.45), rgba(124,58,237,.22));
  border-bottom: 1px solid rgba(124,58,237,.35);
}
.xdlg-title-txt {
  font-size: 12px; font-weight: 700; color: #efe7ff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xdlg-id { font-weight: 400; color: rgba(255,255,255,.55); }
.xdlg-close {
  width: 20px; height: 20px; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 5px; color: #cbd5e1; font-size: 10px; line-height: 1;
  cursor: pointer; font-family: inherit;
  transition: background .1s, color .1s;
}
.xdlg-close:hover { background: rgba(239,68,68,.3); color: #fff; }

.xdlg-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; }

/* 2-column chunky button grid — disabled buttons grey out, never hide */
.xdlg-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px; padding: 4px 10px 0;
}
.xdlg-grid-self {
  grid-template-columns: 1fr 1fr;
  padding-bottom: 6px;
}
.xdlg-btn {
  padding: 9px 8px;
  background: linear-gradient(180deg, rgba(124,58,237,.30), rgba(124,58,237,.14));
  border: 1px solid rgba(124,58,237,.4);
  border-radius: 5px;
  color: #e2d9f3; font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: Tahoma, Arial, sans-serif;
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .1s, transform .06s, border-color .1s;
}
.xdlg-btn:hover { background: linear-gradient(180deg, rgba(124,58,237,.5), rgba(124,58,237,.28)); border-color: rgba(167,139,250,.6); }
.xdlg-btn:active { transform: scale(.97); }
.xdlg-btn.danger { border-color: rgba(248,113,113,.4); color: #fca5a5; background: linear-gradient(180deg, rgba(239,68,68,.22), rgba(239,68,68,.08)); }
.xdlg-btn.danger:hover { background: linear-gradient(180deg, rgba(239,68,68,.4), rgba(239,68,68,.18)); }
.xdlg-btn.disabled {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
  color: rgba(255,255,255,.22);
  cursor: default; pointer-events: none;
}

/* click-yourself editable identity form (DialogProfile.as) */
.xdlg-self-edit { padding: 2px 12px 8px; }
.xdlg-field { margin-bottom: 8px; }
.xdlg-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: rgba(226,217,243,.55); margin-bottom: 3px;
}
.xdlg-input {
  width: 100%; box-sizing: border-box; padding: 7px 9px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(124,58,237,.35);
  border-radius: 7px; color: #efe7ff; font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
  transition: border-color .1s, background .1s;
}
.xdlg-input:focus { outline: none; border-color: rgba(167,139,250,.7); background: rgba(255,255,255,.08); }
.xdlg-input:disabled { color: rgba(255,255,255,.3); cursor: not-allowed; }
.xdlg-guest-note {
  font-size: 11px; line-height: 1.4; color: rgba(226,217,243,.6);
  margin-bottom: 8px; padding: 6px 8px;
  background: rgba(255,255,255,.03); border-radius: 6px;
}

.ctx-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px 8px; border-bottom: 1px solid rgba(124,58,237,.2); }
.ctx-av {
  width: 50px; height: 50px; border-radius: 6px; image-rendering: pixelated;
  border: 2px solid rgba(124,58,237,.45); cursor: pointer; flex-shrink: 0;
  transition: border-color .12s;
}
.ctx-av:hover { border-color: #a78bfa; }
.ctx-name { font-size: 14px; font-weight: 700; color: #c4b5fd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-name em { font-size: 10px; color: #6b7280; font-style: normal; }
.ctx-status { font-size: 10px; color: #6b7280; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.ctx-homepage { font-size: 10px; color: #7dd3fc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.ctx-divider { height: 1px; background: rgba(124,58,237,.15); margin: 3px 0; }
.ctx-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px;
  background: none; border: none; color: #d1d5db; font-size: 12px;
  cursor: pointer; text-align: left; transition: background .08s, color .08s; font-family: inherit;
}
.ctx-item:hover { background: rgba(124,58,237,.15); color: #e9d5ff; }
.ctx-item.danger { color: #f87171; }
.ctx-item.danger:hover { background: rgba(248,113,113,.1); color: #fca5a5; }

/* ── Toasts ───────────────────────────────────────────────────────────────── */
#h5-toast-area {
  position: fixed; bottom: 80px; right: 10px;
  display: flex; flex-direction: column; gap: 5px;
  z-index: 600; pointer-events: none;
}
.toast {
  background: rgba(10,10,28,.97); border: 1px solid rgba(124,58,237,.35);
  border-radius: 8px; padding: 6px 12px; font-size: 11px; color: #d1d5db;
  max-width: 240px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(4px); transition: all .2s;
  font-family: Tahoma, Arial, sans-serif;
  backdrop-filter: blur(8px);
}
.toast.show { opacity: 1; transform: none; }
.toast.toast-error { border-color: rgba(248,113,113,.4); color: #fca5a5; }


/* ── Private Message (DialogActions.as im — lock icon inline, not a tab) ──── */
.msg2.pm-in, .msg2.pm-out { background: rgba(124,58,237,.08); border-radius: 6px; }
.pm-lock { font-size: 10px; flex-shrink: 0; }
.pm-to { color: #7c3aed; font-weight: 700; }
#h5-pmlock {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 11px; color: #e2d9f3;
  background: rgba(124,58,237,.25); border-top: 1px solid rgba(124,58,237,.4);
  flex-shrink: 0;
}
#h5-pmlock.hidden { display: none; }
#h5-pmlock button {
  margin-left: auto; background: none; border: none; color: rgba(255,255,255,.6);
  cursor: pointer; font-size: 12px; padding: 0 4px; font-family: inherit;
}
#h5-pmlock button:hover { color: #fff; }

/* ── Whisper(#164) indicator bar + message styling ────────────────────────── */
#h5-whisperlock {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 11px; color: #fde68a;
  background: rgba(120,53,15,.35); border-top: 1px solid rgba(180,83,9,.4);
  flex-shrink: 0;
}
#h5-whisperlock.hidden { display: none; }
#h5-whisperlock button {
  margin-left: auto; background: none; border: none; color: rgba(255,220,100,.6);
  cursor: pointer; font-size: 12px; padding: 0 4px; font-family: inherit;
}
#h5-whisperlock button:hover { color: #fde68a; }
.whisper-row { display: flex; align-items: baseline; gap: 4px; padding: 3px 8px; background: rgba(120,53,15,.18); border-radius: 4px; margin: 1px 0; font-style: italic; }
.whisper-label { font-size: 10px; color: #d97706; flex-shrink: 0; }
.whisper-name { color: #f59e0b; font-style: normal; }
.whisper-text { color: var(--text-soft, #e2e8f0); }

/* ── Visitor rows: avatar+dot | name / pawn+rank ──────────────────────────── */
.uentry-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uentry-sub {
  font-size: 9px; color: rgba(0,0,0,.45);
  display: flex; align-items: center; gap: 4px;
}

/* ── Real xat pawn (SVG, tinted via currentColor like Flash ColorTransform) ── */
.pawn-i { width: 10px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: middle; object-fit: contain; }
.uentry-pawn.pawn-i { width: 8px; height: 13px; margin-right: 1px; }
.uentry-pawn-icon.pawn-i { width: 15px; height: 22px; }
/* The bot pawn now uses /powers/bot.png (the genuine 30x30 square xat bot
   sprite) instead of the old cropped smw/botpawn.png, so a square box is the
   correct aspect here. Scoped to .pawn-bot on purpose: the real rank sprites
   below are 33x48, and a forced square would squash those out of aspect. */
img.pawn-i.pawn-bot { width: 16px; height: 16px; image-rendering: pixelated; }

/* Real extracted xat rank sprites (33x48). Kept on the same 10x16-ish box as
   the old SVG so nothing around them reflows; object-fit:contain preserves the
   sprite's own 33:48 aspect inside it. pixelated because these are small
   raster sprites — smoothing them turns the crisp Flash edges to mush. */
img.pawn-i.pawn-png {
  width: 11px; height: 16px;
  object-fit: contain;
  image-rendering: pixelated;
}
.uentry-pawn.pawn-i.pawn-png { width: 9px; height: 13px; }
.uentry-pawn-icon.pawn-i.pawn-png { width: 15px; height: 22px; }

/* Tintable pawn for dynamic colours (VIP tier / (pawn#RRGGBB) power). Masked
   from the real sprite's alpha so the silhouette matches the raster pawns
   exactly — flat fill rather than gradient, but the correct outline, which is
   what the traced SVG got wrong. */
.pawn-i.pawn-tint {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url('/assets/img/pawns/pawn_owner.png') center / contain no-repeat;
  mask: url('/assets/img/pawns/pawn_owner.png') center / contain no-repeat;
}
/* These two were sized for the old 16x18 smw/botpawn.png (a ~0.86 aspect, hence
   19x22). The bot now uses the square 30x30 /powers/bot.png, so a 19x22 box just
   letterboxes it to 19px and leaves the bot visibly shorter than the 22px rank
   pawns beside it. Square boxes here keep bot and rank pawns the same height.
   Note these sit LATER in the file than img.pawn-i.pawn-bot at identical
   specificity, so they win — which is why that rule alone didn't take effect. */
img.uentry-pawn-icon.pawn-i { width: 15px; height: 22px; }
img.uentry-pawn.pawn-i { width: 13px; height: 13px; }
/* rank sprites are 33x48, not square — keep their own aspect in these contexts */
img.uentry-pawn-icon.pawn-i.pawn-png { width: 15px; height: 22px; }
img.uentry-pawn.pawn-i.pawn-png { width: 9px; height: 13px; }

/* chatter2.as Married/BFF ring — small badge on the pawn's corner (functional
   approximation of the real frnt1/bff1 composited SWF layers, see chat.js pawnSvg) */
.pawn-deco-wrap { position: relative; display: inline-flex; flex-shrink: 0; vertical-align: middle; }
.pawn-deco-wrap > .pawn-i { position: relative; z-index: 1; }
/* xat pawn state layers (away, dunce, cards, gag, rings, badge) — real sm2 art,
   positioned in 11x16 pawn space as percentages of the pawn box */
.pawn-fx { position: absolute; z-index: 2; image-rendering: pixelated; pointer-events: none; }
.pawn-fx-behind { z-index: 0; }

/* ── Sidebar Sign Out (mockup gray button) ────────────────────────────────── */

/* ── zoom power: avatar enlarges on hover ─────────────────────────────────── */
.ph-zoomable { transition: transform .15s ease; cursor: zoom-in; }
.msg-av.ph-zoomable:hover, .uentry-av.ph-zoomable:hover {
  transform: scale(2.8); z-index: 60; position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,.7); border-radius: 6px;
}

/* ── status line (status power) ───────────────────────────────────────────── */
.uentry-status {
  font-size: 9px; color: rgba(255,255,255,.5); font-style: italic;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px;
}

/* ── PHAZE Power Badges ───────────────────────────────────────────────────── */
.phaze-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1.4;
  letter-spacing: 0.03em;
  font-family: Tahoma, Arial, sans-serif;
}
.phaze-badge-verified {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #000;
  box-shadow: 0 0 4px rgba(245,158,11,.5);
}
.phaze-badge-og {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #fff;
  box-shadow: 0 0 4px rgba(124,58,237,.5);
}
.phaze-badge-dev {
  background: linear-gradient(135deg, #10b981, #34d399);
  color: #000;
  box-shadow: 0 0 4px rgba(16,185,129,.5);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* visitor sidebar becomes a slide-in overlay (reachable via its toggle) */
  #h5-sidebar {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 40;
    width: 185px; min-width: 185px; max-width: 185px;
    transform: translateX(100%); transition: transform .22s ease;
  }
  #h5-sidebar.mobile-open { transform: translateX(0); box-shadow: -8px 0 30px rgba(0,0,0,.6); }
  #h5-sidebar.collapsed { width: 185px; } /* ignore desktop collapse on mobile */
  #h5-sidebar-toggle { right: 0 !important; left: -13px; }
  #h5-sidebar.mobile-open #h5-sidebar-toggle { left: auto; right: 185px !important; }
  #h5-sidebar-content {
    width: 185px !important; opacity: 1 !important; pointer-events: auto !important;
    /* overlay needs its own solid backdrop — the translucent panels would blend with messages */
    background: rgba(28,22,52,.96); padding: 6px;
  }
  #h5-smpicker { right: 0; left: 0; }
}

/* ── Mod modals (gameban / kick / room powers) ───────────────────────────── */
#gameban-modal, #kick-modal, #roomperms-modal, #profile-modal,
#transfer-modal, #gift-modal, #grantpowers-modal, #trade-modal, #media-modal,
#jinx-modal, #kiss-modal, #macro-modal, #macro-edit-modal, #modactions-modal, #help-modal, #userpowers-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center;
}
.kiss-picker-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  max-height: 220px; overflow-y: auto; padding: 2px 0;
}
/* DialogHelp.as overlay — FAQ/Terms/Changelog tab active state */
#help-tabs button.help-tab-active { background: #7c3aed; color: #fff; }
.kiss-pick-btn {
  padding: 7px 4px; font-size: 11px; font-weight: 600;
  background: rgba(124,58,237,.16); border: 1px solid rgba(124,58,237,.35);
  border-radius: 7px; color: #e2d9f3; cursor: pointer; font-family: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .1s, border-color .1s;
}
.kiss-pick-btn:hover { background: rgba(124,58,237,.35); border-color: rgba(167,139,250,.6); }

/* ── Kiss/hug animation overlay (Ruffle-rendered, matches xkiss.as Kiss()/KissTick()) ── */
.kiss-overlay {
  position: absolute; inset: 0; z-index: 900;
  pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 16px;
  animation: kissFadeIn .25s ease;
}
.kiss-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.kiss-banner {
  position: relative; z-index: 1;
  background: rgba(15,15,35,.88); border: 1px solid rgba(124,58,237,.55);
  border-radius: 100px; padding: 6px 18px;
  font-size: 12px; font-weight: 700; color: #efe7ff;
  white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis;
  text-align: center;
  box-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.kiss-type { color: #a78bfa; margin-right: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.kiss-arrow { color: #7c3aed; margin: 0 4px; }
.kiss-msg { color: #d1d5db; font-weight: 400; }
@keyframes kissFadeIn { from { opacity: 0; } to { opacity: 1; } }
.blast-overlay {
  position: absolute; inset: 0; z-index: 901;
  pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s ease;
}
.blast-overlay.blast-visible { opacity: 1; }
.blast-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.blast-banner {
  position: relative; z-index: 1;
  background: rgba(10,10,20,.92); border: 2px solid;
  border-radius: 12px; padding: 10px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 4px 24px rgba(0,0,0,.7);
}
.blast-label { font-size: 22px; font-weight: 900; letter-spacing: .12em; }
.blast-name { font-size: 14px; font-weight: 600; color: #e2e8f0; }
.blast-reason { font-size: 11px; color: #9ca3af; font-style: italic; }
.gbm-box {
  background: #0f0f23; border: 1px solid rgba(124,58,237,.4);
  border-radius: 10px; padding: 20px; width: 320px;
  display: flex; flex-direction: column; gap: 8px;
}
.gbm-title { font-size: 15px; font-weight: 700; color: #c4b5fd; margin-bottom: 4px; }
.gbm-label { font-size: 11px; color: #a78bfa; }
.gbm-select, .gbm-input {
  background: #08081a; border: 1px solid rgba(124,58,237,.3);
  color: #e2e8f0; border-radius: 5px; padding: 6px 8px; font-size: 13px; width: 100%;
}
.gbm-btns { display: flex; gap: 8px; margin-top: 6px; }
.gbm-cancel, .gbm-confirm {
  flex: 1; padding: 8px; border-radius: 5px; border: none; cursor: pointer; font-size: 13px;
}
.gbm-cancel { background: rgba(255,255,255,.08); color: #e2e8f0; }
.gbm-confirm { background: #7c3aed; color: #fff; font-weight: 700; }
.gbm-confirm.danger { background: #dc2626; }
.gbm-confirm:disabled { opacity: .5; cursor: not-allowed; }

/* ── Macro Manager (DialogMacros.as) ─────────────────────────────────────── */
.macro-mgr-box { width: 380px; max-height: 80vh; }
.macro-mgr-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.macro-mgr-empty { font-size: 12px; color: #8b8b9e; padding: 10px 0; text-align: center; }
.macro-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 5px; background: rgba(255,255,255,.03);
}
.macro-row-text {
  font-size: 12px; color: #e2e8f0; font-family: monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.macro-edit-btn {
  flex-shrink: 0; padding: 3px 10px; border-radius: 4px; border: none; cursor: pointer;
  font-size: 11px; background: rgba(124,58,237,.25); color: #c4b5fd;
}
.macro-edit-btn:hover { background: rgba(124,58,237,.4); }
.macro-edit-text { resize: vertical; font-family: monospace; }

/* ── Gift power picker ───────────────────────────────────────────────────── */
.gift-pick-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px; border-radius: 7px; cursor: pointer;
  border: 1px solid rgba(124,58,237,.2); background: rgba(255,255,255,.03);
  transition: background .12s, border-color .12s;
}
.gift-pick-item:hover  { background: rgba(124,58,237,.15); border-color: rgba(124,58,237,.5); }
.gift-pick-item.selected { background: rgba(124,58,237,.3); border-color: #7c3aed; }

/* ── App panel (Media + Doodle) ─────────────────────────────────────────── */
#h5-app-panel {
  background: #0a0a1a;
  border-top: 1px solid rgba(124,58,237,.3);
  display: flex; flex-direction: column; overflow: hidden;
  max-height: 380px; flex-shrink: 0;
}
#h5-app-panel.hidden { display: none; }
.app-panel-header {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-bottom: 1px solid rgba(124,58,237,.2);
  background: rgba(124,58,237,.08); flex-shrink: 0;
}
.app-panel-title { font-weight: 700; font-size: 12px; color: #c4b5fd; flex: 1; }
.app-panel-close, .app-panel-btn {
  background: transparent; border: none; color: #64748b; cursor: pointer;
  font-size: 13px; padding: 2px 5px; border-radius: 4px;
}
.app-panel-close:hover, .app-panel-btn:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.smstrip-right-btn.app-btn.active { background: rgba(124,58,237,.3); color: #c4b5fd; }

/* Media */
.apm-player-wrap {
  flex: 1; overflow: hidden; background: #000;
  display: flex; align-items: center; justify-content: center; min-height: 160px;
}
.apm-player-wrap iframe, .apm-player-wrap video {
  width: 100%; height: 200px; border: none; display: block;
}
.apm-empty { color: #334155; font-size: 13px; }
.apm-controls { padding: 8px 10px; flex-shrink: 0; border-top: 1px solid rgba(124,58,237,.15); }
.apm-locked-msg { padding: 8px 10px; font-size: 11px; color: #64748b; flex-shrink: 0; }
.apm-queue { padding: 6px 10px; border-top: 1px solid rgba(255,255,255,.05); flex-shrink: 0; }
.apm-queue-title { font-size: 10px; color: #64748b; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.apm-queue-item { font-size: 11px; color: #a78bfa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 0; }

/* Doodle */
.doodle-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 1px solid rgba(124,58,237,.15); flex-shrink: 0;
  background: rgba(10,10,26,.8);
}
.doodle-tools { display: flex; gap: 3px; }
.doodle-tool {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #e2e8f0; border-radius: 4px; padding: 3px 7px; cursor: pointer; font-size: 13px;
  transition: background .1s;
}
.doodle-tool:hover  { background: rgba(124,58,237,.2); }
.doodle-tool.active { background: rgba(124,58,237,.4); border-color: #7c3aed; }
.doodle-colors { display: flex; gap: 3px; flex-wrap: wrap; max-width: 120px; }
.doodle-color {
  width: 16px; height: 16px; border-radius: 3px; border: 2px solid transparent;
  cursor: pointer; transition: border-color .1s; flex-shrink: 0;
}
.doodle-color:hover  { border-color: rgba(255,255,255,.4); }
.doodle-color.active { border-color: #fff; }
.doodle-canvas {
  display: block; width: 100%; cursor: crosshair; flex: 1;
  background: #08081a; touch-action: none;
}

/* ── Gameban overlay (banned user UI) ───────────────────────────────────── */
#gameban-overlay {
  position: fixed; inset: 0; z-index: 9998;
  background: #08081a; display: flex; align-items: center; justify-content: center;
}
.gbo-card {
  background: #0f0f23; border: 1px solid rgba(124,58,237,.35);
  border-radius: 12px; padding: 24px; width: min(480px, 96vw);
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.gbo-title  { font-size: 20px; font-weight: 700; color: #f87171; }
.gbo-sub    { font-size: 13px; color: #a78bfa; }
.gbo-expires { font-size: 11px; color: #64748b; }
#gbo-arena  { width: 100%; margin: 8px 0; }
#gbo-status { font-size: 13px; color: #e2e8f0; min-height: 18px; }
.gbo-canvas { display: block; margin: 0 auto; border: 1px solid rgba(124,58,237,.3); border-radius: 4px; }
.gbo-race   { font-family: monospace; font-size: 13px; color: #e2e8f0; background: #08081a;
               border-radius: 6px; padding: 10px; text-align: left; width: 100%; }
.gbo-code   { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gbo-code-q { font-size: 18px; font-weight: 700; color: #c4b5fd; }
.gbo-code-inp {
  background: #08081a; border: 1px solid rgba(124,58,237,.4);
  color: #e2e8f0; border-radius: 6px; padding: 8px 12px; font-size: 14px;
  width: 220px; text-align: center;
}
.gbo-code-btn {
  background: #7c3aed; color: #fff; border: none; border-radius: 6px;
  padding: 8px 20px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.gbo-code-btn:hover { background: #6d28d9; }
.gbo-code-btn:disabled { opacity: .5; cursor: default; }
.gbo-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gbo-slot-reels { font-size: 36px; letter-spacing: 8px; min-height: 48px; }
.gbo-slot-hint  { font-size: 12px; color: #a78bfa; }

/* Scroll-to-bottom button */
.scroll-down-btn {
  position: absolute; bottom: 68px; right: 14px;
  background: rgba(124,58,237,.85); color: #fff; border: none;
  border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 700;
  cursor: pointer; backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: opacity .2s, transform .2s;
  z-index: 10;
}
.scroll-down-btn:hover { background: #7c3aed; transform: translateY(-2px); }
.scroll-down-btn.hidden { display: none; }

/* @mention highlight */
.mention { background: rgba(139,92,246,.2); color: #c4b5fd;
           border-radius: 3px; padding: 0 3px; font-weight: 600; }
.mention-me { background: rgba(234,179,8,.2); color: #fde68a; animation: mention-pulse .6s ease 2; }
@keyframes mention-pulse { 0%,100%{background:rgba(234,179,8,.2)} 50%{background:rgba(234,179,8,.45)} }
/* #hashtag */
.msg-hashtag { color: #38bdf8; font-weight: 600; cursor: pointer; }
.msg-hashtag:hover { text-decoration: underline; }

/* Character count */
.char-count { font-size: 10px; color: rgba(255,255,255,.4); align-self: flex-end; padding: 0 4px 4px; white-space: nowrap; }
.char-count.warn { color: #f87171; }
.char-count.hidden { display: none; }

/* History messages (s&1 flag — sent before you joined) */
.msg-wrap.is-history { opacity: .65; font-style: italic; }
.msg-wrap.is-history .msg-time::before { content: '↩ '; font-size: 9px; }

/* d0 avatar effects (chatter2.as effectFlags bits 16-19) */
@keyframes av-cycle { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes av-fade  { 0%,100% { opacity:1; } 50% { opacity:.25; } }

/* User list rank section headers */
.ulist-group.rank-mainowner { background: rgba(255,107,157,.35); }
.ulist-group.rank-admin     { background: rgba(248,113,113,.35); }
.ulist-group.rank-owner     { background: rgba(255,153,0,.25); }
.ulist-group.rank-mod       { background: rgba(255,255,255,.15); }
.ulist-group.rank-bot       { background: rgba(6,182,212,.15); }
.ulist-group.rank-member    { background: rgba(101,101,255,.15); }
.ulist-group.rank-guest     { background: rgba(0,192,0,.1); }

/* g106 room color theme CSS variables (applied from onGp) */
:root {
  --room-bg: transparent;
  --room-accent: #7c3aed;
  --room-link: #818cf8;
  --room-border: rgba(124,58,237,.3);
  --room-title: #0f0f23;
  --room-bg-alt: rgba(255,255,255,.04);
}

/* ── Edit Chat dialog ──────────────────────────────────────────────────────── */
#editchat-dlg {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.ec-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.7); cursor: pointer;
}
.ec-box {
  position: relative; z-index: 1;
  background: #0f0f23; border: 1px solid rgba(124,58,237,.4);
  border-radius: 12px; width: min(420px, 96vw);
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden;
}
.ec-box-wide { width: min(600px, 96vw); }
.ec-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px; border-bottom: 1px solid rgba(124,58,237,.2);
  font-size: 15px; font-weight: 700; color: #e2d9f3;
}
.ec-x {
  background: none; border: none; color: #64748b; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.ec-x:hover { color: #f87171; }
.ec-tabs {
  display: flex; border-bottom: 1px solid rgba(124,58,237,.18);
  padding: 0 8px;
}
.ec-tab {
  background: none; border: none; padding: 9px 12px;
  font-size: 12px; font-weight: 600; color: #64748b; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s;
  font-family: inherit;
}
.ec-tab:hover { color: #a78bfa; }
.ec-tab-active { color: #a78bfa; border-bottom-color: #7c3aed; }
.ec-body {
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.ec-scroll { max-height: 60vh; overflow-y: auto; }
.ec-tab-pane { display: flex; flex-direction: column; gap: 10px; }
.ec-hidden { display: none; }
.ec-pw-hint {
  font-size: 12px; color: #94a3b8; line-height: 1.4;
  background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.18);
  border-radius: 7px; padding: 8px 12px;
}
.ec-field { display: flex; flex-direction: column; gap: 4px; }
.ec-field-row { flex-direction: row; gap: 10px; }
.ec-half { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ec-label { font-size: 11px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; }
.ec-input {
  background: rgba(255,255,255,.05); border: 1px solid rgba(124,58,237,.3);
  border-radius: 7px; padding: 7px 10px; color: #e2e8f0;
  font-size: 13px; font-family: inherit; outline: none; width: 100%;
  transition: border-color .12s;
}
.ec-input:focus { border-color: rgba(167,139,250,.7); }
.ec-input:disabled { opacity: .5; cursor: default; }
.ec-color { padding: 3px 6px; height: 36px; cursor: pointer; }
.ec-toggle-list { display: flex; flex-direction: column; gap: 6px; }
.ec-toggle {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 13px; color: #cbd5e1; padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.ec-toggle input[type="checkbox"] { display: none; }
.ec-toggle-box {
  width: 36px; height: 20px; border-radius: 10px; flex-shrink: 0;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15);
  position: relative; transition: background .15s, border-color .15s;
}
.ec-toggle-box::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: left .15s;
}
.ec-toggle input:checked + .ec-toggle-box {
  background: #7c3aed; border-color: #a78bfa;
}
.ec-toggle input:checked + .ec-toggle-box::after { left: 18px; }
.ec-err {
  font-size: 12px; color: #f87171; min-height: 16px; padding: 0 16px;
}
.ec-actions {
  display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid rgba(124,58,237,.15);
}
.ec-btn-save {
  flex: 1; background: #7c3aed; border: none; border-radius: 8px;
  color: #fff; font-weight: 700; font-size: 13px; padding: 9px 0; cursor: pointer;
  font-family: inherit; transition: background .12s;
}
.ec-btn-save:hover { background: #6d28d9; }
.ec-btn-cancel {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; color: #94a3b8; font-size: 13px; padding: 9px 14px; cursor: pointer;
  font-family: inherit; transition: background .12s;
}
.ec-btn-cancel:hover { background: rgba(255,255,255,.12); color: #e2e8f0; }

/* ── Edit Chat > Powers tab ─────────────────────────────────────────────────── */
.ec-power-list {
  max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
}
.ec-power-loading, .ec-power-empty {
  font-size: 13px; color: #64748b; padding: 16px 4px; text-align: center;
}
.ec-power-group {}
.ec-power-group-title {
  font-size: 10px; font-weight: 700; color: #7c3aed; text-transform: uppercase;
  letter-spacing: .07em; padding: 0 2px 5px; border-bottom: 1px solid rgba(124,58,237,.18); margin-bottom: 5px;
}
.ec-power-grid-inner { display: flex; flex-direction: column; gap: 2px; }
.ec-power-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px;
  cursor: pointer; transition: background .1s; font-size: 13px; color: #cbd5e1;
  border: 1px solid transparent;
}
.ec-power-row:hover { background: rgba(124,58,237,.1); }
.ec-power-row.ec-power-on {
  background: rgba(124,58,237,.14); border-color: rgba(124,58,237,.3); color: #e2d9f3;
}
.ec-power-icon { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
.ec-power-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-power-badge {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 5px; border-radius: 4px; flex-shrink: 0; background: rgba(255,255,255,.08); color: #94a3b8;
}
.ec-power-badge.hat       { background: rgba(251,191,36,.15);  color: #fbbf24; }
.ec-power-badge.effect    { background: rgba(167,139,250,.18); color: #a78bfa; }
.ec-power-badge.smiley    { background: rgba(34,197,94,.15);   color: #4ade80; }
.ec-power-badge.badge     { background: rgba(96,165,250,.15);  color: #60a5fa; }
.ec-power-badge.namecolor { background: rgba(244,114,182,.15); color: #f472b6; }
.ec-power-badge.aura      { background: rgba(45,212,191,.15);  color: #2dd4bf; }
.ec-power-badge.power     { background: rgba(251,146,60,.15);  color: #fb923c; }
.ec-power-chk {
  width: 16px; height: 16px; flex-shrink: 0; accent-color: #7c3aed; cursor: pointer;
}

/* Apps panel */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
}
.apps-grid-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 10px 6px; border-radius: 10px; cursor: pointer;
  background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.15);
  transition: background .15s, border-color .15s;
}
.apps-grid-item:hover { background: rgba(124,58,237,.2); border-color: rgba(124,58,237,.4); }
.apps-grid-icon { width: 44px; height: 44px; object-fit: contain; }
.apps-grid-icon-fb { font-size: 36px; line-height: 1; }
.apps-grid-label { font-size: 11px; color: #c4b5fd; text-align: center; font-weight: 600; }
#h5-app-panel { display: flex; flex-direction: column; }
#side-app-frame { flex: 1; min-height: 0; }
.app-panel-btn {
  background: none; border: none; color: #a78bfa; cursor: pointer;
  font-size: 16px; padding: 4px 8px; border-radius: 6px;
}
.app-panel-btn:hover { background: rgba(124,58,237,.2); }