/* ═══════════════════════════════════════════════════════
   Cowboy Bebop Theme — CSS overrides
   Retro-futuristic noir: deep blues, circuit teal, amber CRT glow
   Scoped under body[data-theme="bebop"]
   ═══════════════════════════════════════════════════════ */

/* ── Global font ────────────────────────────────────── */
body[data-theme="bebop"] {
  font-family: "Space Mono", "Courier New", monospace;
}

/* ── Headings use Orbitron ──────────────────────────── */
body[data-theme="bebop"] h1,
body[data-theme="bebop"] h2,
body[data-theme="bebop"] h3,
body[data-theme="bebop"] .sidebar-header h3,
body[data-theme="bebop"] .chat-welcome h3,
body[data-theme="bebop"] .auth-logo h1,
body[data-theme="bebop"] .auth-panel h2 {
  font-family: "Orbitron", "Space Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Server rail — dark hull plating ────────────────── */
body[data-theme="bebop"] .server-rail {
  background: linear-gradient(180deg, #0a0e1a 0%, #111730 50%, #0a0e1a 100%);
  border-right: 1px solid #1a3a4a;
}

body[data-theme="bebop"] .server-icon {
  border: 2px solid #1a3a4a;
  box-shadow:
    0 0 6px rgba(0, 200, 220, 0.15),
    inset 0 0 8px rgba(0, 0, 0, 0.4);
  font-family: "Orbitron", monospace;
  font-size: 0.65rem;
}

body[data-theme="bebop"] .server-icon:hover,
body[data-theme="bebop"] .server-icon.active {
  border-color: #00c8dc;
  box-shadow:
    0 0 12px rgba(0, 200, 220, 0.35),
    inset 0 0 8px rgba(0, 200, 220, 0.1);
}

body[data-theme="bebop"] .rail-divider {
  background: #1a3a4a;
}

/* ── Channel sidebar — ship console ─────────────────── */
body[data-theme="bebop"] .channel-sidebar {
  border-right: 1px solid #1a3a4a;
  background: linear-gradient(180deg, #0d1526 0%, #0a1020 100%);
}

body[data-theme="bebop"] .sidebar-header {
  box-shadow: 0 1px 0 #1a3a4a;
  border-bottom: 1px solid rgba(0, 200, 220, 0.15);
}

body[data-theme="bebop"] .sidebar-header h3 {
  text-shadow: 0 0 8px rgba(0, 200, 220, 0.4);
}

body[data-theme="bebop"] .channel-item {
  font-family: "Space Mono", monospace;
  font-size: 0.85rem;
}

body[data-theme="bebop"] .channel-item.active {
  border-left: 3px solid #e8a317;
  text-shadow: 0 0 6px rgba(232, 163, 23, 0.4);
  background: rgba(232, 163, 23, 0.08);
}

body[data-theme="bebop"] .channel-item:hover {
  text-shadow: 0 0 4px rgba(0, 200, 220, 0.3);
}

body[data-theme="bebop"] .channel-category {
  font-family: "Orbitron", monospace;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
  color: #00c8dc;
  text-shadow: 0 0 6px rgba(0, 200, 220, 0.3);
}

/* ── Main content — ISSP terminal ───────────────────── */
body[data-theme="bebop"] .main-content {
  background: #0d1526;
}

body[data-theme="bebop"] .chat-header {
  box-shadow: 0 1px 0 #1a3a4a;
  border-bottom: 1px solid rgba(0, 200, 220, 0.15);
}

body[data-theme="bebop"] .channel-hash {
  color: #e8a317;
  font-family: "Orbitron", monospace;
}

body[data-theme="bebop"] .chat-messages {
  background: rgba(10, 16, 32, 0.4);
}

body[data-theme="bebop"] .chat-msg:hover {
  background: rgba(0, 200, 220, 0.05);
}

/* ── Message avatars — holographic circle ─────────── */
body[data-theme="bebop"] .msg-avatar,
body[data-theme="bebop"] .member-avatar,
body[data-theme="bebop"] .user-avatar,
body[data-theme="bebop"] .voice-user-avatar {
  background: #111730;
  border: 2px solid #1a3a4a;
  box-shadow: 0 0 8px rgba(0, 200, 220, 0.2);
  color: #00c8dc;
  font-family: "Orbitron", monospace;
  font-size: 0.7rem;
}

body[data-theme="bebop"] .server-card-icon {
  background: #111730;
  border: 2px solid #1a3a4a;
  box-shadow: 0 0 8px rgba(0, 200, 220, 0.2);
  font-family: "Orbitron", monospace;
}

body[data-theme="bebop"] .msg-author {
  font-family: "Orbitron", monospace;
  font-size: 0.75rem;
}

body[data-theme="bebop"] .msg-author-self {
  color: #e8a317;
  text-shadow: 0 0 6px rgba(232, 163, 23, 0.3);
}

/* ── Chat input — terminal input ──────────────────── */
body[data-theme="bebop"] .chat-input-form {
  border: 1px solid #1a3a4a;
  background: #0a0e1a;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.5),
    0 0 6px rgba(0, 200, 220, 0.08);
}

body[data-theme="bebop"] .chat-input-form:focus-within {
  border-color: #00c8dc;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(0, 200, 220, 0.2);
}

body[data-theme="bebop"] #chat-input {
  font-family: "Space Mono", monospace;
}

body[data-theme="bebop"] .send-btn:hover {
  color: #e8a317;
}

/* ── Buttons — neon-edged ────────────────────────────── */
body[data-theme="bebop"] .btn-primary {
  background: linear-gradient(180deg, #e8a317 0%, #c78c10 50%, #a07008 100%);
  color: #0a0e1a;
  font-family: "Orbitron", monospace;
  font-weight: 700;
  font-size: 0.75rem;
  border: 1px solid #e8a317;
  box-shadow:
    0 0 8px rgba(232, 163, 23, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body[data-theme="bebop"] .btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #f0b832 0%, #e8a317 50%, #c78c10 100%);
  box-shadow: 0 0 14px rgba(232, 163, 23, 0.5);
}

body[data-theme="bebop"] .btn-primary:active:not(:disabled) {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

body[data-theme="bebop"] .btn-secondary {
  background: transparent;
  border: 1px solid #1a3a4a;
  color: #7ab8c4;
  font-family: "Orbitron", monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body[data-theme="bebop"] .btn-secondary:hover {
  border-color: #00c8dc;
  color: #00c8dc;
  box-shadow: 0 0 8px rgba(0, 200, 220, 0.2);
}

body[data-theme="bebop"] .btn-link.active {
  color: #e8a317;
}

/* ── Voice bar — comm system ──────────────────────── */
body[data-theme="bebop"] .voice-bar {
  border-top: 1px solid #1a3a4a;
  background: linear-gradient(180deg, #0a0e1a 0%, #070b14 100%);
  box-shadow: inset 0 1px 0 rgba(0, 200, 220, 0.1);
}

body[data-theme="bebop"] .voice-dot {
  background: #4caf50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

/* ── User panel ───────────────────────────────────── */
body[data-theme="bebop"] .user-panel {
  background: #070b14;
  border-top: 1px solid #1a3a4a;
}

body[data-theme="bebop"] .control-btn:hover {
  background: rgba(0, 200, 220, 0.12);
}

/* ── Members sidebar ──────────────────────────────── */
body[data-theme="bebop"] .members-sidebar {
  border-left: 1px solid #1a3a4a;
}

body[data-theme="bebop"] .members-header {
  box-shadow: 0 1px 0 #1a3a4a;
  font-family: "Orbitron", monospace;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
}

body[data-theme="bebop"] .member-category {
  font-family: "Orbitron", monospace;
  color: #00c8dc;
  text-shadow: 0 0 4px rgba(0, 200, 220, 0.3);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

body[data-theme="bebop"] .member-name {
  font-family: "Space Mono", monospace;
  font-size: 0.85rem;
}

/* ── Auth & server select containers ────────────── */
body[data-theme="bebop"] .auth-container,
body[data-theme="bebop"] .server-select-container {
  border: 1px solid #1a3a4a;
  box-shadow:
    0 0 20px rgba(0, 200, 220, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.6);
}

body[data-theme="bebop"] .auth-logo h1 {
  text-shadow: 0 0 12px rgba(0, 200, 220, 0.4);
}

body[data-theme="bebop"] .form-group input[type="text"] {
  border: 1px solid #1a3a4a;
  background: #0a0e1a;
  font-family: "Space Mono", monospace;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}

body[data-theme="bebop"] .form-group input[type="text"]:focus {
  border-color: #00c8dc;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.4),
    0 0 6px rgba(0, 200, 220, 0.25);
}

body[data-theme="bebop"] .form-group label {
  font-family: "Orbitron", monospace;
  color: #7ab8c4;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body[data-theme="bebop"] .file-drop {
  border-color: #1a3a4a;
}

body[data-theme="bebop"] .file-drop:hover,
body[data-theme="bebop"] .file-drop.dragover {
  border-color: #00c8dc;
  background: rgba(0, 200, 220, 0.06);
}

/* ── Scrollbar — dark teal ────────────────────────── */
body[data-theme="bebop"] ::-webkit-scrollbar-thumb {
  background: #1a3a4a;
}

body[data-theme="bebop"] ::-webkit-scrollbar-thumb:hover {
  background: #2a5a6a;
}

body[data-theme="bebop"] ::-webkit-scrollbar-track {
  background: #0a0e1a;
}

/* ── Screen share overlay ─────────────────────────── */
body[data-theme="bebop"] .screen-share-header {
  background: #070b14;
  border-bottom: 1px solid #1a3a4a;
}

/* ── Typing indicator ─────────────────────────────── */
body[data-theme="bebop"] .typing-dots span {
  background: #00c8dc;
}

/* ── Theme dropdown itself — themed ───────────────── */
body[data-theme="bebop"] .theme-dropdown {
  border: 1px solid #1a3a4a;
  box-shadow:
    0 0 12px rgba(0, 200, 220, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.5);
}

body[data-theme="bebop"] .theme-dropdown-header {
  font-family: "Orbitron", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Error messages ───────────────────────────────── */
body[data-theme="bebop"] .error-msg {
  border-color: #ff4444;
  background: rgba(255, 68, 68, 0.12);
  font-family: "Space Mono", monospace;
}

/* ── Scanline overlay — subtle CRT effect ─────────── */
body[data-theme="bebop"]::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
}

/* ── Chat welcome — bounty board feel ─────────────── */
body[data-theme="bebop"] .chat-welcome h3 {
  text-shadow: 0 0 10px rgba(232, 163, 23, 0.4);
  color: #e8a317;
}

body[data-theme="bebop"] .chat-welcome p {
  color: #5a7a84;
}

/* ── Server cards — data panel ────────────────────── */
body[data-theme="bebop"] .server-card {
  border: 1px solid #1a3a4a;
  box-shadow: 0 0 8px rgba(0, 200, 220, 0.08);
}

body[data-theme="bebop"] .server-card:hover {
  border-color: #00c8dc;
  box-shadow: 0 0 16px rgba(0, 200, 220, 0.2);
}

body[data-theme="bebop"] .server-card h3 {
  font-size: 0.8rem;
}

/* ── Voice users — comms roster ───────────────────── */
body[data-theme="bebop"] .voice-user-name {
  font-family: "Space Mono", monospace;
  font-size: 0.8rem;
}

body[data-theme="bebop"] .voice-user.speaking .voice-user-avatar {
  border-color: #4caf50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
}