/*
 * ═══════════════════════════════════════════════════════════════
 *  HELL HOLE — Jitsi Meet Custom Theme Override
 *  Drop this file into your Jitsi server and reference it via
 *  custom-config.js or the web server config (see README below).
 * ═══════════════════════════════════════════════════════════════
 *
 *  INSTALLATION (self-hosted Jitsi Meet):
 *
 *  1. Copy this file to:
 *       /usr/share/jitsi-meet/css/hellhole-custom.css
 *
 *  2. Add this line to the bottom of your Jitsi HTML template,
 *     typically: /usr/share/jitsi-meet/index.html
 *       <link rel="stylesheet" href="/css/hellhole-custom.css">
 *
 *  3. (Optional) Add to /usr/share/jitsi-meet/interface_config.js:
 *       DEFAULT_BACKGROUND: '#0a0000',
 *       SHOW_JITSI_WATERMARK: false,
 *       SHOW_WATERMARK_FOR_GUESTS: false,
 *
 *  4. Reload Jitsi: systemctl restart jitsi-videobridge2 prosody jicofo
 * ═══════════════════════════════════════════════════════════════
 */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  --hh-black:      #0a0000;
  --hh-void:       #0f0000;
  --hh-deep:       #150000;
  --hh-border:     #330000;
  --hh-border-hi:  #660000;
  --hh-ember:      #880000;
  --hh-blood:      #cc0000;
  --hh-fire:       #ff2200;
  --hh-text-dim:   #440000;
  --hh-text:       #aa3300;
  --hh-text-hi:    #cc0000;
  --hh-glow:       rgba(200,0,0,0.25);
  --hh-glow-hi:    rgba(200,0,0,0.5);
  --hh-font-head:  'Cinzel', serif;
  --hh-font-body:  'Crimson Text', serif;
  --hh-radius:     2px;
}

/* ── Modern Jitsi CSS Variables (React/Lib-JitsiMeetUI) ──────── */
:root,
[data-testid] {
  --color-surface-0:   #0a0000 !important;
  --color-surface-100: #0f0000 !important;
  --color-surface-200: #150000 !important;
  --color-surface-300: #1c0000 !important;
  --color-surface-400: #230000 !important;
  --color-surface-500: #2a0000 !important;
  --color-surface-600: #330000 !important;

  --color-primary-050: rgba(204,0,0,0.05)  !important;
  --color-primary-100: rgba(204,0,0,0.1)   !important;
  --color-primary-200: #440000             !important;
  --color-primary-300: #660000             !important;
  --color-primary-400: #880000             !important;
  --color-primary-500: #aa0000             !important;
  --color-primary-600: #cc0000             !important;
  --color-primary-700: #ee1100             !important;
  --color-primary-800: #ff2200             !important;
  --color-primary-900: #ff4400             !important;

  --color-action-primary:         #cc0000  !important;
  --color-action-primary-pressed: #aa0000  !important;
  --color-action-primary-hover:   #ee1100  !important;
  --color-action-secondary:       #1c0000  !important;
  --color-action-danger:          #ff2200  !important;

  --text01:    #cc0000 !important;
  --text02:    #880000 !important;
  --text03:    #660000 !important;
  --text04:    #440000 !important;

  --icon01:    #cc0000 !important;
  --icon02:    #880000 !important;
  --icon03:    #660000 !important;

  --border:    #330000 !important;

  --color-link:         #cc0000 !important;
  --color-link-hover:   #ff2200 !important;

  /* Toolbar */
  --toolbar-background-color:            #0f0000  !important;
  --toolbar-button-icon-color:           #cc0000  !important;
  --toolbar-button-toggled-icon-color:   #ff2200  !important;
  --toolbar-button-background-color:     rgba(20,0,0,0.95) !important;
  --toolbar-button-background-color-toggled: rgba(100,0,0,0.4) !important;
}

/* ── Global Reset & Typography ────────────────────────────────── */
body,
#app,
#app > div {
  background-color: var(--hh-black) !important;
  color: var(--hh-text) !important;
  font-family: var(--hh-font-body) !important;
}

/* ── Scanline Texture Overlay ─────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(180,0,0,0.02) 2px,
    rgba(180,0,0,0.02) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Video Stage / Main View ──────────────────────────────────── */
#videospace,
.filmstrip,
.videocontainer,
.videocontainer__background,
.videocontainer__toptoolbar,
.videocontainer__toolbar,
#largeVideoContainer,
.largeVideoWrapper,
#largeVideo {
  background-color: var(--hh-black) !important;
}

#largeVideoContainer {
  background: radial-gradient(ellipse at 50% 0%, #2a0000 0%, #0a0000 60%) !important;
}

/* ── Filmstrip / Thumbnails ───────────────────────────────────── */
.filmstrip__videos,
.filmstrip .filmstrip__videos {
  background-color: #0d0000 !important;
}

.videocontainer {
  border: 1px solid var(--hh-border) !important;
  border-radius: var(--hh-radius) !important;
  overflow: hidden !important;
}

.videocontainer.videoContainerFocused,
.videocontainer:hover {
  border-color: var(--hh-border-hi) !important;
  box-shadow: 0 0 12px var(--hh-glow) !important;
}

.displayNameContainer,
.displayName {
  font-family: var(--hh-font-head) !important;
  color: var(--hh-blood) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* ── Toolbar ──────────────────────────────────────────────────── */
.toolbox-content,
.toolbox-content-wrapper,
.toolbox-content-items,
#new-toolbox,
.new-toolbox {
  background: linear-gradient(to top, rgba(10,0,0,0.98) 0%, rgba(10,0,0,0) 100%) !important;
}

.toolbox-button,
.toolbox-icon,
.toolbox-button-wth-dialog {
  background: rgba(15,0,0,0.9) !important;
  border: 1px solid var(--hh-border) !important;
  border-radius: var(--hh-radius) !important;
  color: var(--hh-blood) !important;
  transition: all 0.2s !important;
}

.toolbox-button:hover .toolbox-icon,
.toolbox-button:hover {
  background: rgba(80,0,0,0.4) !important;
  border-color: var(--hh-border-hi) !important;
  box-shadow: 0 0 10px var(--hh-glow) !important;
}

.toolbox-button--toggled,
.toolbox-icon.toggled {
  background: rgba(204,0,0,0.2) !important;
  border-color: var(--hh-blood) !important;
}

.toolbox-button svg,
.toolbox-icon svg,
.jitsi-icon svg {
  fill: var(--hh-blood) !important;
  stroke: none !important;
}

/* Mute/Unmute active state */
.audio-preview-button.toggled svg,
.toolbox-icon.toggled svg {
  fill: var(--hh-fire) !important;
}

/* Hang up button — keep it distinct */
.toolbox-button.hangup-button {
  background: #cc0000 !important;
  border-color: #aa0000 !important;
}
.toolbox-button.hangup-button svg {
  fill: #0a0000 !important;
}
.toolbox-button.hangup-button:hover {
  background: #ee1100 !important;
  box-shadow: 0 0 18px rgba(200,0,0,0.6) !important;
}

/* ── Buttons (general) ────────────────────────────────────────── */
button,
.button,
[class*="Button"],
[class*="-button"] {
  font-family: var(--hh-font-head) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-radius: var(--hh-radius) !important;
}

button.primary,
.button--primary,
[class*="primary-button"],
[data-testid*="primary"] {
  background: var(--hh-blood) !important;
  color: var(--hh-black) !important;
  border: none !important;
  font-weight: 700 !important;
}

button.primary:hover,
.button--primary:hover {
  background: var(--hh-fire) !important;
  box-shadow: 0 0 18px var(--hh-glow-hi) !important;
}

button.secondary,
.button--secondary {
  background: transparent !important;
  color: var(--hh-border-hi) !important;
  border: 1px solid var(--hh-border) !important;
}

button.secondary:hover,
.button--secondary:hover {
  border-color: var(--hh-border-hi) !important;
  color: var(--hh-ember) !important;
}

/* ── Prejoin / Lobby Screen ───────────────────────────────────── */
.prejoin-fullscreen,
.premeeting-screen,
#lobby-screen,
.lobby-screen {
  background: radial-gradient(ellipse at 50% 0%, #3a0000 0%, #0a0000 60%) !important;
  font-family: var(--hh-font-body) !important;
}

.premeeting-screen .content,
.prejoin-input-area {
  background: rgba(15,0,0,0.92) !important;
  border: 1px solid var(--hh-border) !important;
  border-top-color: var(--hh-border-hi) !important;
  border-radius: var(--hh-radius) !important;
}

.premeeting-screen h1,
.premeeting-screen .title,
.prejoin-input-area h1 {
  font-family: var(--hh-font-head) !important;
  color: var(--hh-blood) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 30px var(--hh-glow), 0 0 60px rgba(200,0,0,0.2) !important;
}

/* ── Inputs ───────────────────────────────────────────────────── */
input,
textarea,
select,
.input-control {
  background: var(--hh-void) !important;
  border: 1px solid var(--hh-border) !important;
  border-radius: var(--hh-radius) !important;
  color: var(--hh-blood) !important;
  font-family: var(--hh-font-body) !important;
  font-size: 16px !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--hh-text-dim) !important;
}

input:focus,
textarea:focus,
.input-control:focus-within {
  border-color: var(--hh-border-hi) !important;
  box-shadow: 0 0 12px rgba(180,0,0,0.2) !important;
  outline: none !important;
}

/* ── Chat Panel ───────────────────────────────────────────────── */
#sideToolbarContainer,
.chat-panel,
.sideToolbarContainer {
  background: var(--hh-void) !important;
  border-left: 1px solid var(--hh-border) !important;
}

.chat-panel .chat-header,
.chat-panel header {
  background: var(--hh-deep) !important;
  border-bottom: 1px solid var(--hh-border) !important;
  font-family: var(--hh-font-head) !important;
  color: var(--hh-blood) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.chatmessage {
  background: rgba(20,0,0,0.6) !important;
  border: 1px solid var(--hh-border) !important;
  border-radius: var(--hh-radius) !important;
  color: var(--hh-text) !important;
}

.chatmessage.localuser {
  background: rgba(80,0,0,0.2) !important;
  border-color: var(--hh-border-hi) !important;
}

.display-name {
  color: var(--hh-blood) !important;
  font-family: var(--hh-font-head) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

/* ── Dialogs / Modals ─────────────────────────────────────────── */
.dialog,
.atlaskit-portal,
[data-testid*="dialog"],
.modal-container,
.prejoin-dialog {
  background: rgba(15,0,0,0.97) !important;
  border: 1px solid var(--hh-border) !important;
  border-top-color: var(--hh-border-hi) !important;
  border-radius: var(--hh-radius) !important;
  box-shadow: 0 0 40px rgba(200,0,0,0.15) !important;
  font-family: var(--hh-font-body) !important;
}

.dialog .header,
.modal-container header {
  background: var(--hh-deep) !important;
  border-bottom: 1px solid var(--hh-border) !important;
}

.dialog .title,
.modal-container h2 {
  font-family: var(--hh-font-head) !important;
  color: var(--hh-blood) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ── Settings Panel ───────────────────────────────────────────── */
.settings-pane,
.settings-panel,
.SettingsView {
  background: var(--hh-void) !important;
  color: var(--hh-text) !important;
}

.settings-panel .title,
.settings-pane h2 {
  font-family: var(--hh-font-head) !important;
  color: var(--hh-blood) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* ── Participants Panel ───────────────────────────────────────── */
.participants-pane,
.participants-pane-header {
  background: var(--hh-void) !important;
  border-left: 1px solid var(--hh-border) !important;
}

.participants-pane-header {
  font-family: var(--hh-font-head) !important;
  color: var(--hh-blood) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--hh-border) !important;
}

.participant-item {
  border-bottom: 1px solid var(--hh-border) !important;
  color: var(--hh-text) !important;
}

.participant-item:hover {
  background: rgba(80,0,0,0.15) !important;
}

/* ── Notifications / Toasts ───────────────────────────────────── */
.notification,
.notification-container,
[class*="notification"] {
  background: rgba(15,0,0,0.95) !important;
  border: 1px solid var(--hh-border-hi) !important;
  border-left: 3px solid var(--hh-blood) !important;
  border-radius: var(--hh-radius) !important;
  color: var(--hh-text) !important;
  font-family: var(--hh-font-body) !important;
}

/* ── Raised Hand / Reactions ──────────────────────────────────── */
.reactions-menu {
  background: var(--hh-void) !important;
  border: 1px solid var(--hh-border) !important;
  border-radius: var(--hh-radius) !important;
}

/* ── Scrollbars ───────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: var(--hh-black);
}
::-webkit-scrollbar-thumb {
  background: var(--hh-border-hi);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--hh-blood);
}

/* ── Connection Quality Indicator ────────────────────────────── */
.connection-indicator {
  color: var(--hh-ember) !important;
}
.connection-indicator.connection-indicator__excellent,
.connection-indicator.connection-indicator__good {
  color: var(--hh-border-hi) !important;
}
.connection-indicator.connection-indicator--lost,
.connection-indicator.connection-indicator--interrupted {
  color: var(--hh-fire) !important;
}

/* ── Watermark (if still showing) ────────────────────────────── */
.watermark,
.leftwatermark,
.rightwatermark {
  opacity: 0.08 !important;
  filter: sepia(1) hue-rotate(-20deg) !important;
}

/* ── App Loading Screen ───────────────────────────────────────── */
#loading-screen,
.loading-screen {
  background: #0a0000 !important;
}

.loading-screen .spinner,
.loading-screen svg {
  color: var(--hh-blood) !important;
  fill: var(--hh-blood) !important;
}

/* ── Focused / Selected States ────────────────────────────────── */
*:focus-visible {
  outline: 1px solid var(--hh-blood) !important;
  outline-offset: 2px !important;
}

/* ── Selection Highlight ──────────────────────────────────────── */
::selection {
  background: rgba(204,0,0,0.3);
  color: var(--hh-fire);
}

/* ── Audio Level Indicator ────────────────────────────────────── */
.audioindicator,
.audioindicator__bar {
  background: var(--hh-blood) !important;
}

/* ── Dominant Speaker Ring ────────────────────────────────────── */
.videocontainer.active-speaker {
  box-shadow: 0 0 0 2px var(--hh-blood), 0 0 20px var(--hh-glow) !important;
}