/* ============================================================
   WNCORE CHAT — chat.css v6
   Toggle hides when panel open | TV right-center | Mobile safe
   ============================================================ */

#chat-wrapper {
  --c-accent:      #ff0000;
  --c-accent-dim:  #440000;
  --c-glow:        rgba(255,0,0,0.15);
  --c-bg:          #080808;
  --c-bg-head:     #0d0000;
  --c-bg-input:    #050000;
  --c-border:      #2a0000;
  --c-text:        #ddbbbb;
  --c-text-dim:    #662222;
  --c-bubble-own:  #1a0000;
  --c-bubble-other:#0a0000;
  --c-bubble-ai:   #110000;
  --c-sender:      #cc0000;
  --c-dot:         rgba(255,0,0,0.5);
  --c-tab-active:  #ff0000;
  --c-system:      #440000;
}

/* ══ TOGGLE BUTTON — left edge, vertically centered ══ */
#chat-toggle-btn {
  position: fixed !important;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5001; /* above panel */
  cursor: pointer;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #000;
  border: 2px solid #330000;
  box-shadow: 0 0 14px rgba(255,0,0,0.3), 0 4px 18px rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.3s, transform 0.2s, opacity 0.2s;
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#chat-toggle-btn:hover {
  box-shadow: 0 0 24px rgba(255,0,0,0.6), 0 4px 18px rgba(0,0,0,0.8);
  transform: translateY(-50%) scale(1.06);
}
/* Hide the toggle button when panel is open — so it doesn't float over content */
#chat-toggle-btn.chat-open {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.8);
}
#chat-toggle-btn img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* Unread badge */
#chat-unread-badge {
  position:absolute; top:-3px; right:-3px;
  background:#ff0000; color:#fff;
  font-family:'Space Mono',monospace; font-size:0.4rem;
  width:14px; height:14px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  font-weight:bold; box-shadow:0 0 6px rgba(255,0,0,0.8);
}
#chat-unread-badge.visible { display:flex; }

/* ══ CHAT PANEL — fixed left-middle ══ */
#chat-panel {
  position: fixed !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 310px; height: 480px;
  min-width: 270px; min-height: 340px;
  display: flex; flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-top: 2px solid var(--c-accent);
  box-shadow: 0 0 40px var(--c-glow), 0 8px 32px rgba(0,0,0,0.9);
  font-family: 'Space Mono', monospace;
  border-radius: 3px;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 4999;
}
#chat-panel.chat-hidden {
  opacity: 0; pointer-events: none;
  transform: translateY(-50%) scale(0.95) !important;
  visibility: hidden;
}
#chat-panel.chat-visible {
  opacity: 1; pointer-events: all;
  transform: translateY(-50%) scale(1) !important;
  visibility: visible;
}
#chat-panel.chat-fullscreen {
  top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important;
  transform: none !important; border-radius: 0 !important;
  z-index: 7000;
}

/* Mobile */
@media (max-width: 600px) {
  #chat-toggle-btn {
    left: 14px !important; top: auto !important;
    bottom: 20px !important; transform: none !important;
    width: 44px !important; height: 44px !important;
  }
  #chat-toggle-btn.chat-open { opacity:0; pointer-events:none; }
  #chat-toggle-btn:hover { transform: scale(1.06) !important; }
  #chat-panel {
    left: 0 !important; top: auto !important; bottom: 0 !important;
    transform: none !important;
    width: 100vw !important; height: 92dvh !important;
    max-height: 92dvh; border-radius: 10px 10px 0 0 !important;
  }
  #chat-panel.chat-hidden { transform: translateY(100%) !important; opacity:1; }
  #chat-panel.chat-visible { transform: translateY(0) !important; opacity:1; }
}

/* Tablet */
@media (min-width: 601px) and (max-width: 768px) {
  #chat-toggle-btn { width:44px !important; height:44px !important; left:10px; }
  #chat-panel { width:280px; height:420px; }
}

/* Scanlines */
#chat-panel::after {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(to bottom,rgba(255,0,0,0.015) 0px,rgba(255,0,0,0.015) 1px,transparent 1px,transparent 4px);
  pointer-events:none; z-index:200;
}

/* ── Header ── */
#chat-header { display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:var(--c-bg-head);border-bottom:1px solid var(--c-border);flex-shrink:0;user-select:none;cursor:default; }
#chat-header-left { display:flex;align-items:center;gap:7px; }
#chat-header-logo { width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--c-accent-dim); }
#chat-room-name { font-size:0.48rem;color:var(--c-accent);letter-spacing:2px;font-weight:bold; }
#chat-status-dot { width:5px;height:5px;border-radius:50%;background:var(--c-accent);box-shadow:0 0 4px var(--c-accent);animation:dotBlink 2s ease-in-out infinite;flex-shrink:0; }
@keyframes dotBlink{0%,100%{opacity:1}50%{opacity:0.2}}
#chat-header-right { display:flex;align-items:center;gap:3px; }
.chat-hdr-btn { background:transparent;border:none;color:var(--c-text-dim);font-size:0.7rem;cursor:pointer;padding:3px 5px;border-radius:2px;transition:0.2s;font-family:'Space Mono',monospace;line-height:1; }
.chat-hdr-btn:hover { color:var(--c-accent);background:var(--c-accent-dim); }
#chat-close-btn:hover { color:#fff;background:#550000; }

/* ── Toolbar ── */
#chat-toolbar { display:flex;align-items:center;gap:3px;padding:3px 8px;background:var(--c-bg-head);border-bottom:1px solid var(--c-border);flex-shrink:0;flex-wrap:wrap; }
.theme-switch-btn { font-family:'Space Mono',monospace;font-size:0.35rem;padding:2px 5px;background:transparent;border:1px solid var(--c-border);color:var(--c-text-dim);cursor:pointer;letter-spacing:1px;transition:0.2s;border-radius:2px; }
.theme-switch-btn.active,.theme-switch-btn:hover { border-color:var(--c-accent);color:var(--c-accent); }
.toolbar-spacer { flex:1; }
#color-custom { width:13px;height:13px;border:none;padding:0;border-radius:50%;cursor:pointer;background:none;overflow:hidden;flex-shrink:0; }

/* ── Tabs ── */
#chat-tabs { display:flex;border-bottom:1px solid var(--c-border);flex-shrink:0; }
.chat-tab { flex:1;background:transparent;border:none;border-right:1px solid var(--c-border);color:var(--c-text-dim);font-family:'Space Mono',monospace;font-size:0.38rem;padding:5px 2px;cursor:pointer;letter-spacing:1px;transition:0.2s; }
.chat-tab:last-child { border-right:none; }
.chat-tab:hover { color:var(--c-accent);background:rgba(255,0,0,0.04); }
.chat-tab.active { color:var(--c-tab-active);background:var(--c-bg-head);border-bottom:2px solid var(--c-tab-active); }

/* ── Private setup ── */
#private-setup { display:none;flex-direction:column;gap:5px;padding:7px 10px;border-bottom:1px solid var(--c-border);background:var(--c-bg-head);flex-shrink:0; }
#private-setup.visible { display:flex; }
#private-room-input { background:var(--c-bg-input);border:none;border-bottom:1px solid var(--c-accent-dim);color:var(--c-text);font-family:'Space Mono',monospace;font-size:0.5rem;padding:6px 7px;outline:none;letter-spacing:1px;width:100%; }
#private-room-input:focus { border-bottom-color:var(--c-accent); }
#private-room-input::placeholder { color:var(--c-text-dim); }
#private-join-btn { background:transparent;border:1px solid var(--c-accent-dim);color:var(--c-accent);font-family:'Space Mono',monospace;font-size:0.44rem;padding:5px;cursor:pointer;letter-spacing:1px;transition:0.2s; }
#private-join-btn:hover { border-color:var(--c-accent); }
.gone-row { display:flex;align-items:center;gap:5px;color:var(--c-text-dim);font-size:0.38rem;letter-spacing:1px;cursor:pointer; }
.gone-row input { accent-color:var(--c-accent); }
.gone-note { font-size:0.35rem;color:var(--c-accent-dim); }

/* ── WNCORE login ── */
#wncore-login { display:none;flex-direction:column;gap:5px;padding:7px 10px;border-bottom:1px solid var(--c-border);background:var(--c-bg-head);flex-shrink:0; }
#wncore-login.visible { display:flex; }
.wncore-login-title { font-size:0.4rem;color:var(--c-accent);letter-spacing:2px; }
#wncore-user-input,#wncore-pass-input { background:var(--c-bg-input);border:none;border-bottom:1px solid var(--c-accent-dim);color:var(--c-text);font-family:'Space Mono',monospace;font-size:0.5rem;padding:6px 7px;outline:none;letter-spacing:1px;width:100%; }
#wncore-user-input::placeholder,#wncore-pass-input::placeholder { color:var(--c-text-dim); }
#wncore-user-input:focus,#wncore-pass-input:focus { border-bottom-color:var(--c-accent); }
#wncore-auth-btn { background:transparent;border:1px solid var(--c-accent-dim);color:var(--c-accent);font-family:'Space Mono',monospace;font-size:0.44rem;padding:5px;cursor:pointer;letter-spacing:2px;transition:0.2s; }
#wncore-auth-btn:hover { border-color:var(--c-accent); }
#wncore-auth-error { font-size:0.36rem;color:#ff0000;min-height:10px;letter-spacing:1px; }

/* ── User bar ── */
#chat-userbar { display:flex;justify-content:space-between;align-items:center;padding:3px 10px;background:var(--c-bg-head);border-bottom:1px solid var(--c-border);flex-shrink:0; }
#chat-username { font-size:0.38rem;color:var(--c-text-dim);letter-spacing:1px; }
#chat-roomtag  { font-size:0.35rem;color:var(--c-accent-dim); }

/* ── View only ── */
#wncore-viewonly { display:none;align-items:center;justify-content:center;padding:4px 10px;background:var(--c-bg-head);border-top:1px solid var(--c-border);flex-shrink:0; }
#wncore-viewonly.visible { display:flex; }
.viewonly-text { font-size:0.36rem;color:var(--c-text-dim);letter-spacing:1px;text-align:center; }

/* ── Messages ── */
#chat-messages { flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:5px;scrollbar-width:thin;scrollbar-color:var(--c-accent-dim) transparent; }
#chat-messages::-webkit-scrollbar { width:3px; }
#chat-messages::-webkit-scrollbar-thumb { background:var(--c-accent-dim); }

.msg-wrap { display:flex;flex-direction:column;max-width:85%; }
.msg-own   { align-self:flex-end;  align-items:flex-end;   }
.msg-other { align-self:flex-start;align-items:flex-start; }
.msg-bubble { padding:6px 9px;border-radius:3px;max-width:100%; }
.msg-bubble.own   { background:var(--c-bubble-own);  border:1px solid var(--c-accent-dim);border-bottom-right-radius:0; }
.msg-bubble.other { background:var(--c-bubble-other);border:1px solid var(--c-border);    border-bottom-left-radius:0; }
.msg-bubble.ai    { background:var(--c-bubble-ai);   border:1px solid var(--c-accent-dim);border-bottom-left-radius:0; }
.msg-sender { font-size:0.37rem;color:var(--c-sender);letter-spacing:1px;margin-bottom:2px; }
.msg-own .msg-sender { color:var(--c-text-dim); }
.msg-text { font-size:0.56rem;color:var(--c-text);line-height:1.5;word-break:break-word;white-space:pre-wrap; }
.msg-time { font-size:0.33rem;color:var(--c-accent-dim);margin-top:2px;text-align:right; }
.system-msg { text-align:center;font-size:0.38rem;color:var(--c-system);letter-spacing:1px;padding:3px 8px;border-top:1px dashed var(--c-border);border-bottom:1px dashed var(--c-border);align-self:center;width:100%; }
.system-broadcast-msg { background:rgba(200,0,0,0.06);border:1px solid #2a0000;border-left:3px solid #880000;padding:7px 10px;font-size:0.46rem;color:#770000;letter-spacing:0.3px;line-height:1.65;align-self:stretch;border-radius:2px; }

/* ── Typing ── */
#chat-typing { display:none;align-items:center;gap:4px;padding:3px 10px;flex-shrink:0; }
#chat-typing.visible { display:flex; }
#chat-typing-name { font-size:0.38rem;color:var(--c-accent);letter-spacing:1px; }
.typing-dots { display:flex;gap:2px; }
.typing-dots span { display:inline-block;color:var(--c-accent);font-size:0.85rem;line-height:0.5;animation:tdot 1.2s ease-in-out infinite; }
.typing-dots span:nth-child(2){animation-delay:0.2s}
.typing-dots span:nth-child(3){animation-delay:0.4s}
@keyframes tdot{0%,100%{transform:translateY(0);opacity:0.3}50%{transform:translateY(-3px);opacity:1}}

/* ── Input ── */
#chat-input-area { display:flex;border-top:1px solid var(--c-border);flex-shrink:0; }
#chat-input { flex:1;background:var(--c-bg-input);border:none;color:var(--c-text);font-family:'Space Mono',monospace;font-size:0.54rem;padding:9px 10px;outline:none;letter-spacing:1px;resize:none;height:38px;line-height:1.4; }
#chat-input::placeholder { color:var(--c-text-dim); }
#chat-send-btn { background:var(--c-bg-head);border:none;border-left:1px solid var(--c-border);color:var(--c-accent);padding:0 12px;cursor:pointer;font-size:0.8rem;transition:0.2s;flex-shrink:0; }
#chat-send-btn:hover { background:var(--c-accent-dim); }

/* Fullscreen scale */
#chat-panel.chat-fullscreen .msg-text   { font-size:0.88rem; }
#chat-panel.chat-fullscreen .msg-sender { font-size:0.55rem; }
#chat-panel.chat-fullscreen .chat-tab   { font-size:0.52rem;padding:9px; }

/* ══ RETRO TV — fixed RIGHT, vertically centered ══ */
#retro-tv {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3000;
  cursor: pointer;
  transition: transform 0.3s, filter 0.3s;
}
#retro-tv:hover { filter:brightness(1.15); transform:translateY(-50%) scale(1.03); }
.tv-body { width:100px;background:linear-gradient(135deg,#1a0000,#0d0000,#1a0505);border:3px solid #330000;border-radius:8px 8px 12px 12px;padding:6px;box-shadow:inset 0 0 8px rgba(255,0,0,.1),0 4px 18px rgba(0,0,0,.9);transform:perspective(200px) rotateY(10deg);position:relative; }
.tv-screen-wrap { background:#000;border:2px solid #220000;border-radius:3px;overflow:hidden;position:relative;aspect-ratio:4/3; }
#tv-canvas { width:100%;height:100%;display:block; }
.tv-screen-glare { position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 50%);pointer-events:none; }
.tv-label { text-align:center;font-family:'Space Mono',monospace;font-size:.28rem;color:#440000;letter-spacing:2px;margin-top:3px; }
.tv-knobs { display:flex;justify-content:flex-end;gap:4px;margin-top:3px; }
.tv-knob  { width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#330000,#0d0000);border:1px solid #440000; }
#tv-fullscreen { position:fixed;inset:0;background:#000;z-index:9000;display:none;flex-direction:column;align-items:center;justify-content:center; }
#tv-fullscreen.visible { display:flex; }
#tv-fullscreen-canvas { width:80vw;max-width:800px;height:60vh;max-height:600px;display:block;border:2px solid #330000; }
#tv-close-btn { position:absolute;top:20px;right:30px;background:transparent;border:1px solid #660000;color:#cc0000;font-family:'Space Mono',monospace;font-size:.65rem;padding:6px 14px;cursor:pointer;letter-spacing:2px; }
#tv-close-btn:hover { background:#330000; }

/* Tablet TV */
@media (min-width:601px) and (max-width:768px) {
  #retro-tv .tv-body { width:72px; }
  #retro-tv { right:10px; }
}
/* Mobile: hide TV */
@media (max-width:600px) { #retro-tv { display:none; } }

/* ── Online counter ── */
#online-counter {
  position:fixed; top:calc(var(--header-h,76px)+6px); left:14px;
  background:#050000; border:1px solid #220000; color:#440000;
  font-family:'Space Mono',monospace; font-size:.36rem;
  padding:3px 7px; z-index:996; letter-spacing:1px; border-radius:2px;
}