/* ═══ xChat SDK v2 — Unified Chat Component ═══ */

.xchat-wrap {
  position: fixed; bottom: 0; right: 20px; z-index: 7500;
  width: 380px; font-family: var(--font-mono, monospace); font-size: 12px;
}
@media (max-width: 480px) { .xchat-wrap { right: 0; left: 0; width: 100%; } }

/* ─── Bar ─── */
.xchat-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; cursor: pointer; user-select: none;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(135deg, rgba(25,25,50,0.98), rgba(35,30,65,0.98));
  border: 1px solid rgba(0,240,255,0.35);
  border-bottom: none;
  box-shadow: 0 -2px 20px rgba(0,240,255,0.12), 0 -1px 6px rgba(170,102,255,0.1);
  transition: all 0.2s;
}
.xchat-bar:hover { border-color: rgba(0,240,255,0.5); box-shadow: 0 -3px 24px rgba(0,240,255,0.16); }
.xchat-bar-label {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  background: linear-gradient(90deg, #00f0ff, #aa66ff, #ff3366);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: brightness(1.3); flex-shrink: 0;
}
.xchat-bar-badges { display: flex; gap: 4px; flex: 1; overflow-x: auto; align-items: center; }
.xchat-bar-badges::-webkit-scrollbar { display: none; }
.xchat-bar-arrow { font-size: 10px; color: rgba(255,255,255,0.4); transition: transform 0.3s; flex-shrink: 0; }
.xchat-bar-arrow.open { transform: rotate(180deg); }

/* ─── Bar badge tabs ─── */
.xchat-btab {
  display: flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 5px; font-size: 9px;
  background: rgba(255,255,255,0.04); cursor: pointer;
  white-space: nowrap; transition: all 0.15s;
  border: 1px solid transparent; color: rgba(255,255,255,0.6);
}
.xchat-btab:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); }
.xchat-btab.active { background: rgba(0,240,255,0.08); border-color: rgba(0,240,255,0.15); color: #00f0ff; }
.xchat-btab-lobby { font-size: 8px; }
.xchat-btab-click { display: flex; align-items: center; gap: 3px; }
.xchat-btab-x {
  font-size: 11px; opacity: 0; padding: 2px 4px; cursor: pointer;
  transition: opacity 0.15s; line-height: 1; border-radius: 3px; margin-left: 2px;
}
.xchat-btab:hover .xchat-btab-x { opacity: 0.4; }
.xchat-btab-x:hover { opacity: 1 !important; background: rgba(255,255,255,0.1); }
.xchat-mini-av {
  width: 14px; height: 14px; border-radius: 50%; font-size: 6px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.xchat-mini-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.xchat-unread {
  min-width: 14px; height: 14px; border-radius: 7px;
  background: #ff3366; color: #fff; font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; flex-shrink: 0; font-family: sans-serif !important;
  animation: xchatPulse 2s ease-in-out infinite;
}
@keyframes xchatPulse { 0%,100% { opacity:1 } 50% { opacity:0.7 } }

/* ─── Panel ─── */
.xchat-panel {
  height: 0; overflow: hidden;
  background: rgba(12,12,24,0.97);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0,240,255,0.1);
  border-bottom: none;
  transition: height 0.35s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
}
.xchat-panel.open { height: 380px; }

/* ─── Panel header + tabs ─── */
.xchat-hdr {
  padding: 6px 10px; display: flex; align-items: center; gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.04); min-height: 34px;
}
.xchat-tabs { display: flex; gap: 3px; flex: 1; }
.xchat-tab {
  padding: 4px 10px; border-radius: 5px; font-size: 10px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: inherit; opacity: 0.4;
  font-family: inherit; transition: all 0.15s;
}
.xchat-tab:hover { opacity: 0.7; }
.xchat-tab.active { opacity: 1; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.xchat-dm-back {
  display: none; align-items: center; gap: 6px; flex: 1;
}
.xchat-dm-back.show { display: flex; }
.xchat-back-btn {
  background: none; border: none; color: inherit; cursor: pointer;
  font-size: 16px; padding: 2px 6px; opacity: 0.5; transition: opacity 0.15s;
}
.xchat-back-btn:hover { opacity: 1; }
.xchat-dm-name { font-weight: 600; font-size: 11px; }

/* ─── Messages ─── */
.xchat-msgs {
  flex: 1; overflow-y: auto; padding: 8px 10px;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
  display: flex; flex-direction: column; gap: 3px;
}
.xchat-msg { font-size: 11px; line-height: 1.4; padding: 2px 0; }
.xchat-msg-name { font-weight: 700; margin-right: 6px; cursor: pointer; }
.xchat-msg-name:hover { text-decoration: underline; }
.xchat-msg-time { font-size: 9px; opacity: 0.3; margin-left: 4px; }
.xchat-msg-text { opacity: 0.85; }
.xchat-msg-me .xchat-msg-name { opacity: 0.5; }
.xchat-msg-sys { text-align: center; opacity: 0.25; font-size: 10px; padding: 8px; font-style: italic; }
.xchat-msg-event { text-align: center; opacity: 0.4; font-size: 10px; padding: 4px; color: #00f0ff; }

/* ─── Friends list ─── */
.xchat-friends { flex: 1; overflow-y: auto; padding: 6px 10px; display: none; }
.xchat-friends.show { display: block; }
.xchat-friends-title {
  font-size: 9px; opacity: 0.35; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 8px 6px; font-weight: 600;
}
.xchat-friend {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; position: relative;
  border-radius: 6px; cursor: pointer; transition: background 0.15s;
}
.xchat-friend:hover { background: rgba(255,255,255,0.04); }
.xchat-friend-av {
  width: 24px; height: 24px; border-radius: 50%; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; position: relative;
}
.xchat-friend-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.xchat-friend-name { font-size: 11px; flex: 1; }
.xchat-friend-src { font-size: 7px; color: #ff9632; font-weight: 700; margin-left: 2px; }

/* ─── Input ─── */
.xchat-input-row {
  display: flex; gap: 6px; padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.xchat-input {
  flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; padding: 6px 10px; color: inherit; font-family: inherit; font-size: 11px;
  outline: none;
}
.xchat-input:focus { border-color: rgba(0,240,255,0.25); }
.xchat-send {
  background: rgba(0,240,255,0.08); border: 1px solid rgba(0,240,255,0.15);
  color: #00f0ff; border-radius: 6px; padding: 6px 12px; cursor: pointer;
  font-size: 14px; transition: all 0.15s;
}
.xchat-send:hover { background: rgba(0,240,255,0.15); }

/* ═══ THEME: STATKI ═══ */
.xchat-statki .xchat-bar { background: rgba(245,240,232,0.97); border-color: rgba(58,108,176,0.3); box-shadow: 0 -2px 12px rgba(58,108,176,0.08); }
.xchat-statki .xchat-bar:hover { border-color: rgba(58,108,176,0.45); }
.xchat-statki .xchat-bar-label { background: none; -webkit-text-fill-color: #3a6cb0; color: #3a6cb0; font-family: 'Patrick Hand',cursive; font-size: 13px; letter-spacing: 1px; filter: none; }
.xchat-statki .xchat-bar-arrow { color: #3a6cb0; }
.xchat-statki .xchat-btab { color: #5a7a9a; }
.xchat-statki .xchat-btab.active { background: rgba(58,108,176,0.08); border-color: rgba(58,108,176,0.15); color: #3a6cb0; }
.xchat-statki .xchat-panel { background: rgba(245,240,232,0.98); border-color: rgba(58,108,176,0.15); }
.xchat-statki .xchat-tab.active { background: rgba(58,108,176,0.08); color: #3a6cb0; }
.xchat-statki .xchat-msg { color: #3a4a5a; }
.xchat-statki .xchat-msg-name { color: #3a6cb0; }
.xchat-statki .xchat-msg-me .xchat-msg-name { color: #8a6a3a; }
.xchat-statki .xchat-msg-event { color: #3a6cb0; }
.xchat-statki .xchat-friends-title { color: #3a6cb0; font-family: 'Patrick Hand',cursive; font-size: 12px; text-transform: none; }
.xchat-statki .xchat-friend-name { color: #3a4a5a; }
.xchat-statki .xchat-input { background: rgba(58,108,176,0.06); border-color: rgba(58,108,176,0.15); color: #3a4a5a; font-family: 'Patrick Hand',cursive; font-size: 13px; }
.xchat-statki .xchat-input:focus { border-color: rgba(58,108,176,0.35); }
.xchat-statki .xchat-send { background: rgba(58,108,176,0.1); border-color: rgba(58,108,176,0.2); color: #3a6cb0; }
.xchat-statki .xchat-unread { background: #e74c3c; }

/* ═══ THEME: KIK ═══ */
.xchat-kik .xchat-bar { background: rgba(18,18,30,0.98); border-color: rgba(51,170,255,0.3); box-shadow: 0 -2px 12px rgba(51,170,255,0.08); }
.xchat-kik .xchat-bar:hover { border-color: rgba(255,51,102,0.4); }
.xchat-kik .xchat-bar-label { background: linear-gradient(90deg,#33aaff,#ff3366); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'Righteous',sans-serif; font-size: 12px; letter-spacing: 1px; filter: none; }
.xchat-kik .xchat-bar-arrow { color: #33aaff; }
.xchat-kik .xchat-btab { color: #6a6a8a; font-family: 'Righteous',sans-serif; }
.xchat-kik .xchat-btab.active { background: rgba(51,170,255,0.08); border-color: rgba(51,170,255,0.15); color: #33aaff; }
.xchat-kik .xchat-panel { background: rgba(16,16,28,0.98); border-color: rgba(51,170,255,0.1); }
.xchat-kik .xchat-tab { font-family: 'Righteous',sans-serif; }
.xchat-kik .xchat-tab.active { background: rgba(51,170,255,0.08); color: #33aaff; }
.xchat-kik .xchat-msg { color: #c0c0d0; font-family: 'Righteous',sans-serif; }
.xchat-kik .xchat-msg-name { color: #33aaff; }
.xchat-kik .xchat-msg-me .xchat-msg-name { color: #ff3366; }
.xchat-kik .xchat-msg-event { color: #33aaff; }
.xchat-kik .xchat-friends-title { color: #6a6a8a; font-family: 'Righteous',sans-serif; }
.xchat-kik .xchat-friend-name { color: #c0c0d0; font-family: 'Righteous',sans-serif; }
.xchat-kik .xchat-input { background: rgba(51,170,255,0.06); border-color: rgba(51,170,255,0.15); color: #d0d0e0; font-family: 'Righteous',sans-serif; }
.xchat-kik .xchat-input:focus { border-color: rgba(51,170,255,0.35); }
.xchat-kik .xchat-send { background: rgba(51,170,255,0.1); border-color: rgba(51,170,255,0.2); color: #33aaff; }
.xchat-kik .xchat-send:hover { background: rgba(255,51,102,0.15); color: #ff3366; }

/* ═══ THEME: SNAKE ═══ */
.xchat-snake .xchat-bar { background: rgba(48,62,48,0.98); border-color: rgba(155,188,15,0.3); box-shadow: 0 -2px 10px rgba(155,188,15,0.06); }
.xchat-snake .xchat-bar:hover { border-color: rgba(155,188,15,0.5); }
.xchat-snake .xchat-bar-label { background: none; -webkit-text-fill-color: #9bbc0f; color: #9bbc0f; font-family: 'Press Start 2P',monospace; font-size: 8px; letter-spacing: 1px; filter: none; }
.xchat-snake .xchat-bar-arrow { color: #9bbc0f; }
.xchat-snake .xchat-btab { color: #9bbc0f; font-family: 'Press Start 2P',monospace; font-size: 6px; }
.xchat-snake .xchat-btab.active { background: rgba(155,188,15,0.1); border-color: rgba(155,188,15,0.2); color: #9bbc0f; }
.xchat-snake .xchat-panel { background: rgba(48,62,48,0.98); border-color: rgba(155,188,15,0.12); }
.xchat-snake .xchat-tab { font-family: 'Press Start 2P',monospace; font-size: 7px; }
.xchat-snake .xchat-tab.active { background: rgba(155,188,15,0.1); color: #9bbc0f; }
.xchat-snake .xchat-msg { color: #9bbc0f; font-family: 'Press Start 2P',monospace; font-size: 8px; line-height: 1.6; }
.xchat-snake .xchat-msg-name { color: #c8dc6f; }
.xchat-snake .xchat-msg-me .xchat-msg-name { color: #6a8a2a; }
.xchat-snake .xchat-msg-event { color: #9bbc0f; }
.xchat-snake .xchat-friends-title { color: #6a7a4a; font-family: 'Press Start 2P',monospace; font-size: 7px; }
.xchat-snake .xchat-friend-name { color: #9bbc0f; font-family: 'Press Start 2P',monospace; font-size: 8px; }
.xchat-snake .xchat-input { background: rgba(155,188,15,0.08); border-color: rgba(155,188,15,0.2); color: #9bbc0f; font-family: 'Press Start 2P',monospace; font-size: 8px; }
.xchat-snake .xchat-input:focus { border-color: rgba(155,188,15,0.5); }
.xchat-snake .xchat-send { background: rgba(155,188,15,0.1); border-color: rgba(155,188,15,0.25); color: #9bbc0f; font-family: 'Press Start 2P',monospace; font-size: 8px; }
.xchat-snake .xchat-unread { background: #9b2020; color: #9bbc0f; font-family: 'Press Start 2P',monospace !important; font-size: 6px; border-radius: 2px; }

/* ═══ Room tab on bar ═══ */
.xchat-btab-room {
  padding: 2px 8px; border-radius: 5px; font-size: 9px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; border: 1px solid transparent;
  white-space: nowrap; flex-shrink: 0;
}
.xchat-btab-room.active { background: rgba(0,240,255,0.08); border-color: rgba(0,240,255,0.15); color: #00f0ff; }

/* ═══ LOBBY VISUAL UPGRADE — "latające staniki" level ═══ */

/* Bar: animated gradient border */
.xchat-lobby .xchat-bar {
  background: linear-gradient(135deg, rgba(15,10,35,0.98), rgba(30,20,60,0.98), rgba(20,15,45,0.98));
  border: 1px solid rgba(0,240,255,0.35);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 25px rgba(0,240,255,0.15), 0 -1px 8px rgba(170,102,255,0.12), 0 0 40px rgba(255,51,102,0.06);
  animation: xchatBarGlow 4s ease-in-out infinite;
}
@keyframes xchatBarGlow {
  0%,100% { box-shadow: 0 -3px 25px rgba(0,240,255,0.15), 0 -1px 8px rgba(170,102,255,0.12); }
  33% { box-shadow: 0 -3px 25px rgba(170,102,255,0.2), 0 -1px 8px rgba(255,51,102,0.12); }
  66% { box-shadow: 0 -3px 25px rgba(255,51,102,0.15), 0 -1px 8px rgba(0,240,255,0.12); }
}

/* Label: animated gradient cycle */
.xchat-lobby .xchat-bar-label {
  font-size: 12px; font-weight: 800; letter-spacing: 4px;
  background: linear-gradient(90deg, #00f0ff, #aa66ff, #ff3366, #ffaa00, #00f0ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: xchatLabelShift 6s ease-in-out infinite;
  filter: brightness(1.4) saturate(1.2);
}
@keyframes xchatLabelShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Room tab: glowing active */
.xchat-lobby .xchat-btab-room.active {
  background: rgba(0,240,255,0.1);
  border-color: rgba(0,240,255,0.25);
  color: #00f0ff;
  text-shadow: 0 0 8px rgba(0,240,255,0.4);
}

/* Panel: subtle gradient bg */
.xchat-lobby .xchat-panel {
  background: linear-gradient(180deg, rgba(12,8,28,0.98), rgba(18,14,36,0.97));
  border-color: rgba(0,240,255,0.08);
}

/* Messages: vibrant nick colors */
.xchat-lobby .xchat-msg-name {
  background: linear-gradient(90deg, #00f0ff, #aa66ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-weight: 700; cursor: pointer;
}
.xchat-lobby .xchat-msg:nth-child(3n+1) .xchat-msg-name {
  background: linear-gradient(90deg, #00f0ff, #33ccff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.xchat-lobby .xchat-msg:nth-child(3n+2) .xchat-msg-name {
  background: linear-gradient(90deg, #aa66ff, #ff66aa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.xchat-lobby .xchat-msg:nth-child(3n) .xchat-msg-name {
  background: linear-gradient(90deg, #ff3366, #ffaa00);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.xchat-lobby .xchat-msg-me .xchat-msg-name {
  background: linear-gradient(90deg, rgba(255,255,255,0.4), rgba(255,255,255,0.25)) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
}
.xchat-lobby .xchat-msg-text { color: rgba(220,220,240,0.9); }
.xchat-lobby .xchat-msg-event { color: #aa66ff; text-shadow: 0 0 6px rgba(170,102,255,0.3); }
.xchat-lobby .xchat-msg-sys { color: rgba(0,240,255,0.3); }

/* Input: glowing focus */
.xchat-lobby .xchat-input {
  background: rgba(0,240,255,0.03);
  border-color: rgba(0,240,255,0.1);
  color: #e0e0f0;
}
.xchat-lobby .xchat-input:focus {
  border-color: rgba(0,240,255,0.35);
  box-shadow: 0 0 12px rgba(0,240,255,0.08), inset 0 0 8px rgba(0,240,255,0.03);
}
.xchat-lobby .xchat-send {
  background: linear-gradient(135deg, rgba(0,240,255,0.1), rgba(170,102,255,0.1));
  border-color: rgba(0,240,255,0.2);
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0,240,255,0.3);
}
.xchat-lobby .xchat-send:hover {
  background: linear-gradient(135deg, rgba(0,240,255,0.2), rgba(255,51,102,0.15));
  color: #ff3366;
}

/* Tabs: gradient active */
.xchat-lobby .xchat-tab.active {
  background: rgba(0,240,255,0.08);
  border-color: rgba(0,240,255,0.15);
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0,240,255,0.3);
}

/* Friends title */
.xchat-lobby .xchat-friends-title {
  background: linear-gradient(90deg, #00f0ff, #aa66ff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  opacity: 0.6;
}

/* Unread badge: vibrant pink glow */
.xchat-lobby .xchat-unread {
  background: linear-gradient(135deg, #ff3366, #ff0066);
  box-shadow: 0 0 8px rgba(255,51,102,0.4);
}

/* ═══ SNAKE: Old phone display palette ═══ */
.xchat-snake .xchat-msg:nth-child(4n+1) .xchat-msg-name { color: #9bbc0f; }
.xchat-snake .xchat-msg:nth-child(4n+2) .xchat-msg-name { color: #8bac9f; }
.xchat-snake .xchat-msg:nth-child(4n+3) .xchat-msg-name { color: #d4a74a; }
.xchat-snake .xchat-msg:nth-child(4n) .xchat-msg-name { color: #7fc8d8; }
.xchat-snake .xchat-msg-me .xchat-msg-name { color: #6a8a2a !important; opacity: 0.6; }

/* Snake room tab */
.xchat-snake .xchat-btab-room.active { background: rgba(155,188,15,0.1); border-color: rgba(155,188,15,0.2); color: #9bbc0f; }
.xchat-snake .xchat-btab-room { color: #6a7a4a; font-family: 'Press Start 2P',monospace; font-size: 6px; }

/* Statki room tab */
.xchat-statki .xchat-btab-room.active { background: rgba(58,108,176,0.08); border-color: rgba(58,108,176,0.15); color: #3a6cb0; }
.xchat-statki .xchat-btab-room { color: #5a7a9a; font-family: 'Patrick Hand',cursive; font-size: 11px; }

/* KiK room tab */
.xchat-kik .xchat-btab-room.active {
  background: rgba(51,170,255,0.08); border-color: rgba(51,170,255,0.15); color: #33aaff;
}
.xchat-kik .xchat-btab-room { color: #6a6a8a; font-family: 'Righteous',sans-serif; font-size: 9px; }

/* Snake bar: brighter friend names */
.xchat-snake .xchat-btab span { opacity: 0.85 !important; }
.xchat-snake .xchat-btab:hover span { opacity: 1 !important; }

/* Room badge (new messages in lobby/game room) */
.xchat-room-badge {
  display: none; min-width: 14px; height: 14px; border-radius: 7px;
  background: #00f0ff; color: #0a0a1a; font-size: 8px; font-weight: 700;
  align-items: center; justify-content: center;
  padding: 0 3px; margin-left: 4px; font-family: sans-serif !important;
  animation: xchatPulse 2s ease-in-out infinite;
}
.xchat-room-badge.show { display: inline-flex; }
.xchat-statki .xchat-room-badge { background: #3a6cb0; color: #fff; }
.xchat-kik .xchat-room-badge { background: #33aaff; color: #0a0a1a; }
.xchat-snake .xchat-room-badge { background: #9bbc0f; color: #306230; font-family: 'Press Start 2P',monospace !important; font-size: 6px; border-radius: 2px; }

/* ═══ PRESENCE STATUS DOTS ═══ */
.xchat-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(12,12,24,0.95);
  display: inline-block; transition: background 0.3s;
}
/* Positions: on friend avatar = bottom-right, on bar badge = before name */
.xchat-friend-av .xchat-status-dot {
  position: absolute; bottom: -1px; right: -1px;
}
.xchat-btab-click .xchat-status-dot {
  margin-right: 1px;
}

/* Status colors */
.xchat-status-available { background: #22cc66; box-shadow: 0 0 4px rgba(34,204,102,0.4); }
.xchat-status-in-game { background: #EF9F27; box-shadow: 0 0 4px rgba(239,159,39,0.4); }
.xchat-status-unavailable { background: #444441; }
.xchat-status-invisible { background: #444441; }
.xchat-status-offline { background: #2c2c2a; }

/* Theme overrides for dot border */
.xchat-statki .xchat-status-dot { border-color: rgba(245,240,232,0.95); }
.xchat-statki .xchat-friend-av .xchat-status-dot { border-color: rgba(245,240,232,0.95); }
.xchat-snake .xchat-status-dot { border-color: rgba(48,62,48,0.95); }

/* ═══ ROLE BADGES (VIP/MOD/ADM) ═══ */
/* Positioned: right edge, raised (30-40% from top), half-overlapping frame */
.xchat-role-badge {
  position: absolute; top: -2px; right: -6px;
  padding: 1px 4px; border-radius: 3px;
  font-size: 6px; font-weight: 800; letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1.5px solid rgba(12,12,24,0.95);
  line-height: 1.2; z-index: 1;
}
.xchat-friend-av .xchat-role-badge {
  top: -3px; right: -8px; font-size: 7px; padding: 1px 5px;
}

/* VIP: shimmering gold gradient */
.xchat-role-vip {
  background: linear-gradient(90deg, #ffd700, #fff8dc, #ffd700, #daa520, #ffd700);
  background-size: 400% 100%;
  color: #4a2800;
  animation: xchatVIPShimmer 2.5s linear infinite;
  box-shadow: 0 0 4px rgba(255,215,0,0.4), 0 0 1px rgba(255,215,0,0.3);
  text-shadow: 0 0 2px rgba(218,165,32,0.4);
}
@keyframes xchatVIPShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 400% 50%; }
}

/* MOD: blue */
.xchat-role-mod {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  color: #fff;
}

/* ADM: red */
.xchat-role-adm {
  background: #e24b4a;
  color: #fff;
}

/* Theme overrides for badge border */
.xchat-statki .xchat-role-badge { border-color: rgba(245,240,232,0.95); }
.xchat-snake .xchat-role-badge { border-color: rgba(48,62,48,0.95); }

/* Faza 4 — typing indicator */
.xchat-typing { display:none; padding:2px 12px; font-size:10px; color:var(--dim,#666); font-style:italic; opacity:0.7; animation:xchat-fade 1.5s ease-in-out infinite; }
@keyframes xchat-fade { 0%,100%{opacity:0.4} 50%{opacity:0.9} }
/* Faza 4 — link styles */
.xchat-link { color:#33aaff; text-decoration:underline; word-break:break-all; }
.xchat-link:hover { color:#00f0ff; }

/* Gabi AI gradient nick */
.xchat-msg-name-gabi {
  background: linear-gradient(135deg, #aa66ff, #00f0ff, #ff3366);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  animation: gabiGrad 3s ease-in-out infinite;
}
@keyframes gabiGrad {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* @Gabi autocomplete hint */
.xchat-gabi-hint {
  position: absolute; bottom: 100%; left: 0; right: 0;
  background: rgba(20,20,40,0.95); border: 1px solid rgba(170,102,255,0.3);
  border-radius: 8px 8px 0 0; padding: 6px 12px;
  font-size: 12px; cursor: pointer; z-index: 100;
  backdrop-filter: blur(8px);
  animation: gabiHintIn 0.15s ease-out;
}
.xchat-gabi-hint:hover { background: rgba(170,102,255,0.1); }
@keyframes gabiHintIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ═══ Mobile responsive ═══ */
@media (max-width: 600px) {
  .xchat-wrap { right: 0; left: 0; width: 100%; }
  .xchat-panel.open { 
    height: calc(60vh); 
    max-height: 420px;
    border-radius: 14px 14px 0 0;
  }
  .xchat-bar { padding: 10px 14px; }
  .xchat-bar-label { font-size: 11px; }
  .xchat-friends { padding: 6px 8px; }
  .xchat-friend { padding: 8px 10px; }
  .xchat-input-wrap { padding: 8px 10px; }
  .xchat-input { font-size: 16px !important; padding: 10px 12px; }
  .xchat-msg { padding: 3px 0; }
  .xchat-msg-bubble { max-width: 85%; }
  
  /* DM fullscreen on mobile */
  .xchat-dm-panel {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    border-radius: 0 !important;
    z-index: 9000 !important;
  }
}

@media (max-width: 380px) {
  .xchat-panel.open { height: calc(55vh); }
  .xchat-msg-name { font-size: 10px; }
}

/* ═══ Game mobile chat ═══ */
@media (max-width: 768px) {
  /* Always show X close on bar in game mode */
  .xchat-wrap::after {
    content: '✕';
    position: fixed; bottom: 4px; right: 8px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.3); color: #fff;
    border-radius: 50%; font-size: 12px;
    z-index: 7600; cursor: pointer; pointer-events: auto;
  }
  .xchat-panel.open ~ .xchat-wrap::after { display: none; }
}
@media (max-height: 500px) {
  /* Landscape phone — compact chat */
  .xchat-panel.open { height: 60vh !important; max-height: 280px !important; }
  .xchat-bar { padding: 6px 10px; }
  .xchat-bar-label { font-size: 10px; }
  .xchat-msg { font-size: 10px; }
  .xchat-input { font-size: 14px !important; padding: 4px 8px; }
}