/* DIGITALDEPARTMENT theme for the isolated Galene 1.1 frontend.
   This stylesheet is deliberately unscoped: it is served only from
   conference.digitaldepartment.ru and must override upstream Galene UI. */
:root {
  color-scheme: dark !important;
  --dd-bg: #06080a;
  --dd-surface: #0b0f13;
  --dd-surface-2: #0c1015;
  --dd-text: #f4f7fa;
  --dd-muted: rgba(244,247,250,.58);
  --dd-faint: rgba(244,247,250,.48);
  --dd-border: rgba(255,255,255,.12);
  --dd-border-strong: rgba(255,255,255,.28);
  --dd-signal: #ff453a;
  --dd-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;

  --contextualMenuBg: #0b0f13;
  --contextualMenuShadow: 0 12px 36px rgba(0,0,0,.32);
  --contextualMenuRadius: 4px;
  --contextualMenuText: #f4f7fa;
  --contextualSubMenuBg: #0b0f13;
  --contextualHover: #11161c;
  --contextualOverflowIcon: rgba(244,247,250,.5);
  --contextualSeperator: rgba(244,247,250,.14);
}

html,
body {
  margin: 0 !important;
  background: var(--dd-bg) !important;
  color: var(--dd-text) !important;
  font-family: var(--dd-mono) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

body {
  font-size: 11px !important;
  background-image: radial-gradient(circle at 54% 40%, #11161c 0, #090c10 42%, #06080a 78%) !important;
}

* { box-sizing: border-box; }

button,
input,
textarea,
select,
label,
legend,
.header-title,
.galene-header,
.profile-info,
.users-header,
.message,
.message-content,
.message-header,
.message-footer,
.sidenav,
.login-box {
  font-family: var(--dd-mono) !important;
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0, "calt" 0 !important;
}

button,
input,
select { font-size: 10px !important; }

textarea,
.form-reply,
#input,
.message,
.message-sender,
.message-private,
.message-system {
  font-size: 11px !important;
  line-height: 1.55 !important;
}

.nav-link,
.nav-link label,
header .collapse,
.users-header,
#users .user-p,
#users > div,
.sidenav-header h2,
legend { font-size: 10px !important; }

small,
.message-header,
.message-footer { font-size: 9px !important; }

::selection {
  background: rgba(244,247,250,.88);
  color: var(--dd-bg);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--dd-bg); }
::-webkit-scrollbar-thumb { background: rgba(244,247,250,.18); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(244,247,250,.28); }

/* Main shell */
.app,
#main,
#mainrow,
.container,
.coln-left,
.coln-right,
#right {
  background: transparent !important;
  color: var(--dd-text) !important;
  box-shadow: none !important;
}

.navbar,
.navbar .container,
.navbar .container-fluid,
.navbar .container-lg,
.navbar .container-md,
.navbar .container-sm,
.navbar .container-xl,
.topnav,
.users-header {
  background: var(--dd-bg) !important;
  color: var(--dd-text) !important;
  border-color: var(--dd-border) !important;
  box-shadow: none !important;
}

.topnav,
.users-header {
  border-bottom: 1px solid var(--dd-border) !important;
}

#left-sidebar {
  background: var(--dd-surface) !important;
  border-right: 1px solid var(--dd-border) !important;
  box-shadow: none !important;
}

.users-header {
  padding: 10px 12px !important;
}

.galene-header {
  font-size: 0 !important;
  font-weight: 500 !important;
  line-height: 34px !important;
  color: var(--dd-muted) !important;
  letter-spacing: .12em !important;
}

.galene-header::after {
  content: "GALENE / WEBRTC";
  font-size: 9px;
}

.header-sep {
  height: 12px !important;
  background: var(--dd-surface) !important;
}

.header-title,
#title,
header .collapse,
.nav-link,
.nav-link label {
  color: var(--dd-muted) !important;
  text-shadow: none !important;
}

.header-title,
#title {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
}

header .collapse:hover,
.nav-link:hover,
.nav-link label:hover,
.sidenav a:hover {
  color: var(--dd-text) !important;
}

.nav-button { font-size: 21px !important; }
.nav-link label { font-size: 8px !important; letter-spacing: .04em !important; }

/* Chat and participant list */
#users,
#chat,
#chatbox,
#box,
.reply {
  background: var(--dd-surface) !important;
  color: var(--dd-text) !important;
  border-color: var(--dd-border) !important;
  box-shadow: none !important;
}

#users {
  border: 0 !important;
}

#users .user-p {
  border-bottom: 1px solid var(--dd-border) !important;
  color: var(--dd-muted) !important;
}

#users > div:hover {
  background: rgba(255,255,255,.045) !important;
  color: var(--dd-text) !important;
}

#users > div::before {
  color: var(--dd-text) !important;
}

#users > div::after {
  color: var(--dd-faint) !important;
}

#chat {
  border: 0 !important;
  border-right: 1px solid var(--dd-border) !important;
}

#box {
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    var(--dd-surface) !important;
  background-size: 32px 32px !important;
}

.reply {
  border-top: 1px solid var(--dd-border) !important;
}

.close-chat {
  color: var(--dd-faint) !important;
}

.close-chat:hover,
.close-chat:active {
  color: var(--dd-text) !important;
  border-color: var(--dd-border-strong) !important;
  background: transparent !important;
}

/* Inputs and controls */
.form-control,
.form-reply,
.select,
button,
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
textarea,
select {
  border: 1px solid var(--dd-border) !important;
  border-radius: 4px !important;
  background: rgba(6,8,10,.88) !important;
  color: var(--dd-text) !important;
  box-shadow: none !important;
  outline: none !important;
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--dd-text) !important;
}

input::placeholder,
textarea::placeholder { color: var(--dd-faint) !important; }

button:hover,
button:focus-visible,
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-reply:focus,
.select:focus {
  border-color: var(--dd-border-strong) !important;
  outline: 1px solid rgba(255,255,255,.60) !important;
  outline-offset: 1px !important;
}

.btn,
.btn-default,
.btn-blue,
.btn-success {
  background: transparent !important;
  color: var(--dd-text) !important;
  border: 1px solid var(--dd-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease !important;
}

.btn:hover,
.btn-default:hover,
.btn-blue:hover,
.btn-success:hover {
  color: var(--dd-text) !important;
  background: rgba(255,255,255,.045) !important;
  border-color: var(--dd-border-strong) !important;
}

.btn-cancel,
.nav-cancel,
.muted,
.nav-cancel label,
.muted label,
.video-controls .video-stop {
  color: var(--dd-signal) !important;
  background: transparent !important;
  border-color: rgba(255,69,58,.48) !important;
}

.btn-cancel:hover,
.nav-cancel:hover,
.muted:hover,
.nav-cancel label:hover,
.muted label:hover {
  color: var(--dd-signal) !important;
  background: rgba(255,69,58,.055) !important;
  border-color: rgba(255,69,58,.72) !important;
}

.btn-warn,
.btn-warn:hover {
  color: var(--dd-text) !important;
  background: transparent !important;
  border-color: var(--dd-border) !important;
}

.connected { color: var(--dd-text) !important; }
.disconnected { color: var(--dd-signal) !important; }

/* Login / start-media panel */
.login-container {
  background:
    linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, #11161c 0, #090c10 42%, #06080a 82%) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
  color: var(--dd-text) !important;
}

.login-box {
  width: min(320px, calc(100% - 40px)) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: max(54px, 8vh) auto !important;
  padding: 28px 26px 24px !important;
  border: 1px solid var(--dd-border) !important;
  border-radius: 6px !important;
  background: rgba(6,8,10,.78) !important;
  color: var(--dd-text) !important;
  box-shadow: 0 24px 90px rgba(0,0,0,.34) !important;
}

.login-box::before {
  content: "MEDIA / START";
  display: block;
  margin-bottom: 18px;
  color: var(--dd-faint);
  font: 9px/1.2 var(--dd-mono);
  letter-spacing: .18em;
}

.login-box label {
  color: var(--dd-muted) !important;
  font-size: 10px !important;
}

.present-switch {
  margin-top: 10px !important;
}

.present-switch .switch-radio {
  margin: 9px 0 !important;
  color: var(--dd-muted) !important;
}

.present-switch .switch-radio label {
  color: var(--dd-muted) !important;
}

#connectbutton {
  margin-top: 16px !important;
  padding: 8px 14px !important;
}

/* Messages */
.message,
.message-sender,
.message-private,
.message-system {
  background: rgba(255,255,255,.04) !important;
  color: var(--dd-muted) !important;
  border: 1px solid rgba(255,255,255,.065) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.message-content,
.message-header,
.message-footer,
.message-time,
.message-me-content,
.message-me-user,
.message-me-asterisk {
  color: inherit !important;
  text-shadow: none !important;
}

/* Video area */
.video-container,
#peers {
  background:
    linear-gradient(rgba(255,255,255,.010) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.010) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, #11161c 0, #090c10 42%, #06080a 82%) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
}

.peer {
  background: rgba(255,255,255,.025) !important;
  border-color: transparent !important;
}

.peer-active {
  border-color: rgba(244,247,250,.72) !important;
}

video {
  background: #020304 !important;
  border-radius: 3px !important;
}

.chat-btn .icon-chat,
.video-controls,
.top-video-controls,
.video-controls span,
.top-video-controls span {
  color: var(--dd-muted) !important;
  text-shadow: none !important;
}

.show-video {
  color: var(--dd-text) !important;
  background: rgba(6,8,10,.94) !important;
  border: 1px solid var(--dd-border-strong) !important;
  box-shadow: none !important;
}

@keyframes blink {
  0%, 100% { box-shadow: 0 0 0 3px rgba(244,247,250,.055); }
  50% { box-shadow: none; }
}

@-webkit-keyframes blink {
  0%, 100% { box-shadow: 0 0 0 3px rgba(244,247,250,.055); }
  50% { box-shadow: none; }
}

#resizer {
  background: var(--dd-border) !important;
}

#resizer:hover {
  background: var(--dd-border-strong) !important;
}

/* Settings drawer */
.sidenav,
.sidenav-header {
  background: var(--dd-bg) !important;
  color: var(--dd-text) !important;
  border-color: var(--dd-border) !important;
  box-shadow: -18px 0 48px rgba(0,0,0,.28) !important;
}

.sidenav-header {
  border-bottom: 1px solid var(--dd-border) !important;
}

.sidenav-header h2 {
  color: var(--dd-muted) !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
}

.sidenav-content {
  background: var(--dd-surface) !important;
  color: var(--dd-muted) !important;
}

.sidenav a { color: var(--dd-muted) !important; }

.profile-logo {
  background: transparent !important;
  color: var(--dd-text) !important;
  border: 1px solid var(--dd-border) !important;
}

.profile-info,
#permspan { color: var(--dd-muted) !important; }

#chpwspan a,
.sidenav .user-logout a {
  color: var(--dd-signal) !important;
}

fieldset {
  border: 1px solid var(--dd-border) !important;
  border-radius: 4px !important;
}

legend { color: var(--dd-muted) !important; }

/* Dialogs and contextual menus */
#invite-dialog,
[class*="modal"],
[class*="dialog"],
[class*="popup"] {
  background: rgba(12,16,21,.98) !important;
  color: var(--dd-text) !important;
  border-color: var(--dd-border-strong) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.32) !important;
}

#invite-dialog button,
#invite-dialog input {
  background: var(--dd-bg) !important;
  color: var(--dd-text) !important;
  border-color: var(--dd-border) !important;
}

#captions {
  background: rgba(6,8,10,.86) !important;
  color: var(--dd-text) !important;
  border: 1px solid var(--dd-border) !important;
}

/* Toasts: no green/yellow application chrome. */
.toastify.error {
  background: var(--dd-surface-2) !important;
  color: var(--dd-signal) !important;
  border: 1px solid rgba(255,69,58,.42) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.36) !important;
}

.toastify.warning,
.toastify.info {
  background: var(--dd-surface-2) !important;
  color: var(--dd-text) !important;
  border: 1px solid var(--dd-border-strong) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.36) !important;
}

.toastify.error .toast-close,
.toastify.warning .toast-close,
.toastify.info .toast-close { color: inherit !important; }

/* Links */
a {
  color: var(--dd-text) !important;
  text-decoration-color: rgba(244,247,250,.35) !important;
}

@media (max-width: 768px) {
  body { font-size: 10px !important; }
  .login-box {
    width: min(300px, calc(100% - 28px)) !important;
    margin-top: 34px !important;
    padding: 22px 20px !important;
  }
  .header-title,
  #title { font-size: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
}