/* JackCast Matrix terminal web theme */
:root {
  --accent: #39ff14 !important;
  --accent-2: #00ff88 !important;
  --accent-dim: #0f8f45 !important;
  --cyan: #44ffe8 !important;
  --amber: #d6ff6b !important;
  --bg: #000500 !important;
  --surface: rgba(0, 12, 4, .94) !important;
  --card: rgba(0, 18, 7, .9) !important;
  --panel: rgba(0, 24, 9, .84) !important;
  --border: rgba(57, 255, 20, .36) !important;
  --border-strong: rgba(57, 255, 20, .74) !important;
  --text: #d8ffe0 !important;
  --text-muted: #75aa7e !important;
  --error: #ff5f73 !important;
  --success: #39ff14 !important;
  --live: #39ff14 !important;
  --online: #39ff14 !important;
  --offline: #48604d !important;
  --terminal-font: "Cascadia Code", "Cascadia Mono", "Consolas", "SFMono-Regular", monospace !important;
  --ease-sine: cubic-bezier(.37, 0, .63, 1);
  --ease-circle: cubic-bezier(.785, .135, .15, .86);
}

html {
  background: #000 !important;
  color-scheme: dark;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;
  scroll-padding-top: 0;
}

html.matrix-files-root {
  height: 100% !important;
  overflow: hidden !important;
  scrollbar-gutter: stable;
}

body {
  background: #000 !important;
  color: var(--text) !important;
  font-family: var(--terminal-font) !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 8px rgba(57, 255, 20, .18) !important;
  min-height: 100dvh;
  overflow-x: hidden !important;
  overscroll-behavior: none;
}

body > *:not(.matrix-rain-canvas):not(.matrix-scanline-overlay) {
  position: relative;
  z-index: 2;
}

.matrix-rain-canvas {
  position: fixed;
  inset: 0;
  display: block !important;
  width: 100vw;
  height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background: #000;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .24 !important;
  background:
    repeating-linear-gradient(180deg, rgba(57, 255, 20, .06) 0 1px, transparent 1px 9px),
    linear-gradient(90deg, rgba(57, 255, 20, .08), transparent 18%, transparent 82%, rgba(57, 255, 20, .07)) !important;
  background-size: 100% 9px, 100% 100% !important;
  transform: none !important;
  animation: terminalScan 7s var(--ease-sine) infinite !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .1 !important;
  background:
    linear-gradient(rgba(255, 255, 255, .025) 50%, rgba(0, 0, 0, .12) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, .02), rgba(57, 255, 20, .03), rgba(0, 0, 255, .02)) !important;
  background-size: 100% 4px, 6px 100% !important;
  mix-blend-mode: screen;
  animation: none !important;
}

@keyframes terminalScan {
  0%, 100% { opacity: .38; }
  50% { opacity: .58; }
}

.bg-grid {
  display: none !important;
}

.aero-ripple {
  display: none !important;
}

.aero-tilt {
  transform: none !important;
  transform-style: flat !important;
}

.linux-location {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  min-height: 30px;
  padding: .34rem .65rem;
  border: 1px solid rgba(57, 255, 20, .38);
  border-radius: 4px;
  background: rgba(0, 10, 3, .78);
  color: var(--text);
  font-size: .78rem;
  line-height: 1;
  box-shadow: inset 0 0 18px rgba(57, 255, 20, .055), 0 0 18px rgba(57, 255, 20, .08);
  white-space: nowrap;
}

body > .linux-location {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
}

.topbar .linux-location {
  margin-right: .85rem;
  flex-shrink: 0;
}

.linux-location .host {
  color: var(--accent);
}

.linux-location .path {
  color: var(--cyan);
}

.linux-location .prompt {
  color: var(--amber);
}

.linux-location .cursor {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(57, 255, 20, .6);
  animation: cursorBlink 1.08s steps(1, end) infinite;
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

.linux-map {
  display: grid;
  gap: .18rem;
  padding: .55rem .7rem;
  border: 1px dashed rgba(57, 255, 20, .28);
  border-radius: 4px;
  background: rgba(0, 8, 2, .58);
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.25;
  white-space: nowrap;
}

.topbar .linux-map {
  margin: 0 auto 0 1rem;
}

.hero .linux-map,
.card .linux-map {
  margin: 0 auto 1.2rem;
  width: max-content;
  max-width: 100%;
}

.linux-map strong,
.linux-map .active {
  color: var(--accent);
  font-weight: 700;
}

.topbar {
  gap: .75rem !important;
  background: rgba(0, 8, 3, .94) !important;
  border-bottom: 1px solid rgba(57, 255, 20, .42) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .64), inset 0 -1px 0 rgba(57, 255, 20, .12) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

.logo,
.brand .logo,
.topbar .logo {
  color: #edfff0 !important;
  font-family: var(--terminal-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 14px rgba(57, 255, 20, .36) !important;
}

.topbar .logo::before,
.brand .logo::before,
.hero .logo::before {
  content: "./";
  color: var(--text-muted);
  font-weight: 400;
}

.logo span,
.brand .logo span,
.topbar .logo span,
a,
.tab.active,
.chat-user {
  color: var(--accent) !important;
  text-shadow: 0 0 12px rgba(57, 255, 20, .46) !important;
}

.hero,
.card,
.login-box,
.container,
.sidebar,
.chat-header,
.compose,
.compose-wrap,
.gif-panel,
.contact,
.stream-card,
.panel,
.account-card,
.file-card,
.video-card,
.player-shell,
.controls-card,
.msg-row.recv .msg-bubble,
main,
section {
  background:
    linear-gradient(180deg, rgba(57, 255, 20, .055), transparent 36px),
    rgba(0, 13, 4, .86) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(57, 255, 20, .055), inset 0 0 28px rgba(57, 255, 20, .045) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.hero,
.card,
.login-box,
.container,
.panel,
.player-shell,
.chat-layout {
  animation: terminalBoot .44s steps(6, end) both !important;
}

body:has(> .hero) {
  overflow-y: hidden !important;
}

@keyframes terminalBoot {
  0% { opacity: 0; filter: blur(3px) brightness(1.6); transform: translateY(8px); }
  65% { opacity: .9; filter: blur(.4px) brightness(1.15); }
  100% { opacity: 1; filter: none; transform: none; }
}

.hero {
  max-width: 760px !important;
  padding: clamp(1.4rem, 5vw, 3rem) !important;
  text-align: left !important;
}

.matrix-home {
  justify-content: center !important;
  padding: 0 !important;
}

.matrix-home .hero {
  margin: 0 !important;
  padding-top: clamp(1.2rem, 4vw, 2.4rem) !important;
}

.matrix-home .linux-location,
.matrix-home .linux-map {
  display: none !important;
}

.matrix-files {
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-top: 0 !important;
  scrollbar-gutter: stable;
}

.matrix-files .topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
  align-items: center !important;
  z-index: 120 !important;
}

.matrix-files .topbar .linux-location,
.matrix-files .topbar .linux-map {
  display: none !important;
}

.matrix-files .container {
  margin-top: 0 !important;
  padding-top: clamp(4.7rem, 7vh, 5.4rem) !important;
}

.hero::after {
  content: "/home/jackcast\A |-- files\A |-- chat\A `-- stream";
  display: block;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(57, 255, 20, .24);
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.45;
  white-space: pre;
}

.hero .logo {
  font-size: clamp(2.2rem, 8vw, 4.6rem) !important;
  font-weight: 700 !important;
  animation: none !important;
}

.tagline {
  color: var(--text-muted) !important;
  font-size: .95rem !important;
}

.tagline::before {
  content: "> ";
  color: var(--accent);
}

.topbar .nav a,
.topbar .download,
.topbar .logout,
.actions .btn {
  font-family: var(--terminal-font) !important;
}

.topbar .nav a::before,
.topbar .download::before,
.actions .btn::before {
  content: attr(data-linux-path);
  color: var(--accent) !important;
}

button,
.btn,
.download,
.logout,
input,
textarea,
select,
label,
.tab,
.contact,
.msg-bubble,
.cw-fab {
  font-family: var(--terminal-font) !important;
  border-radius: 4px !important;
  transition:
    transform .22s var(--ease-sine),
    background .22s var(--ease-sine),
    border-color .22s var(--ease-sine),
    box-shadow .22s var(--ease-sine),
    color .22s var(--ease-sine),
    opacity .22s var(--ease-sine),
    filter .22s var(--ease-sine) !important;
}

button,
.btn,
.btn-primary,
.btn-accent,
.download,
.compose button,
.paste-send {
  background: rgba(0, 22, 7, .86) !important;
  border: 1px solid rgba(57, 255, 20, .52) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 18px rgba(57, 255, 20, .06), 0 0 18px rgba(57, 255, 20, .12) !important;
  text-transform: none !important;
}

button:hover,
.btn:hover,
.download:hover,
.logout:hover,
.contact:hover,
.file-card:hover,
.stream-card:hover,
.video-card:hover,
.compose-tools button:hover,
.compose-tools label:hover {
  transform: translateY(-1px) !important;
  border-color: var(--cyan) !important;
  color: #f3fff5 !important;
  background: rgba(0, 34, 11, .94) !important;
  box-shadow: 0 0 22px rgba(57, 255, 20, .18), inset 0 0 22px rgba(57, 255, 20, .08) !important;
  filter: none !important;
}

button:active,
.btn:active {
  transform: translateY(0) scale(.985) !important;
}

.btn-danger,
button.btn-danger,
.upload-cancel,
.paste-cancel {
  background: rgba(48, 0, 8, .86) !important;
  border-color: rgba(255, 95, 115, .58) !important;
  color: var(--error) !important;
}

input,
textarea,
select,
.upload-fname,
.status-select {
  background: rgba(0, 6, 2, .88) !important;
  border: 1px solid rgba(57, 255, 20, .3) !important;
  color: var(--text) !important;
  box-shadow: inset 0 0 18px rgba(57, 255, 20, .045) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(117, 170, 126, .72) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(57, 255, 20, .14), 0 0 24px rgba(57, 255, 20, .16), inset 0 0 18px rgba(57, 255, 20, .08) !important;
}

.tab {
  color: var(--text-muted) !important;
  border-bottom-color: rgba(57, 255, 20, .16) !important;
}

.tab.active {
  border-bottom-color: var(--accent) !important;
}

.status-dot.Online,
.status-dot-tb.Online,
.status-dot.online,
.contact .dot.online,
.rec-badge.on {
  background: var(--accent) !important;
  box-shadow: 0 0 12px rgba(57, 255, 20, .72) !important;
}

.status-dot.Away,
.status-dot-tb.Away {
  background: var(--amber) !important;
}

.status-dot.Busy,
.status-dot.Offline,
.status-dot.Invisible,
.status-dot-tb.Busy,
.status-dot-tb.Offline,
.status-dot-tb.Invisible,
.contact .dot.offline {
  background: #425247 !important;
  box-shadow: none !important;
}

.msg-row.sent .msg-bubble,
.upload-fill,
.upload-bar,
.chat-upload-bar .upload-fill,
.cw-ufill {
  background: linear-gradient(90deg, #0d6f32, var(--accent), var(--cyan)) !important;
  color: #001904 !important;
  border-color: rgba(57, 255, 20, .65) !important;
  box-shadow: 0 0 20px rgba(57, 255, 20, .22) !important;
}

.msg-row.recv .msg-bubble {
  color: var(--text) !important;
}

.file-card.selected,
.contact.active,
.stream-card.live,
.tab.active {
  border-color: var(--border-strong) !important;
  box-shadow: 0 0 0 1px rgba(57, 255, 20, .5), 0 0 28px rgba(57, 255, 20, .18), inset 0 0 24px rgba(57, 255, 20, .065) !important;
}

.file-card .check {
  border-color: rgba(57, 255, 20, .42) !important;
  background: rgba(0, 0, 0, .74) !important;
  border-radius: 3px !important;
}

.file-card.selected .check {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.file-card.selected .check::after {
  color: #001904 !important;
}

.upload-zone {
  border: 1px dashed rgba(57, 255, 20, .42) !important;
  border-radius: 4px !important;
  background: rgba(0, 12, 4, .82) !important;
  box-shadow: inset 0 0 28px rgba(57, 255, 20, .045) !important;
}

.upload-zone::before {
  content: "$ scp ./payload /home/jackcast/uploads";
  display: block;
  margin-bottom: .8rem;
  color: var(--text-muted);
  font-size: .76rem;
  letter-spacing: 0;
}

.upload-zone.dragover {
  border-color: var(--accent) !important;
  background: rgba(0, 24, 8, .92) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 28px rgba(57, 255, 20, .18), inset 0 0 34px rgba(57, 255, 20, .08) !important;
}

.upload-icon {
  display: none !important;
}

.upload-throbber,
.orb-loader,
.zip-spinner,
.spinner-lg::after,
.spinner,
.spinner-sm {
  border-radius: 2px !important;
  border: 1px solid rgba(57, 255, 20, .32) !important;
  background: transparent !important;
  box-shadow: 0 0 18px rgba(57, 255, 20, .2), inset 0 0 18px rgba(57, 255, 20, .08) !important;
  animation: terminalSpinner 1.1s var(--ease-circle) infinite !important;
}

.upload-throbber {
  width: 54px !important;
  height: 54px !important;
}

.upload-throbber::before,
.orb-loader::before,
.zip-spinner::before {
  content: "01";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: .82rem;
}

.upload-throbber span,
.orb-loader::after {
  display: none !important;
}

@keyframes terminalSpinner {
  0% { transform: rotate(0deg) scale(.98); filter: brightness(.92); }
  50% { transform: rotate(180deg) scale(1.04); filter: brightness(1.28); }
  100% { transform: rotate(360deg) scale(.98); filter: brightness(.92); }
}

.page-loader {
  background: rgba(0, 0, 0, .86) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  z-index: 500 !important;
}

.zip-overlay {
  z-index: 300 !important;
}

.page-loader-card {
  border: 1px solid rgba(57, 255, 20, .38);
  border-radius: 4px;
  padding: 1.3rem 1.6rem;
  background: rgba(0, 12, 4, .92);
  box-shadow: 0 0 34px rgba(57, 255, 20, .14);
}

.page-loader-text,
.zip-text,
.upload-status,
.upload-text,
.upload-done,
.empty,
.meta,
.file-card .meta,
.chat-status,
.status-text,
.sidebar-header,
.toast {
  color: var(--text-muted) !important;
  font-family: var(--terminal-font) !important;
}

.upload-progress,
.chat-upload-bar .upload-track {
  background: rgba(0, 5, 1, .92) !important;
  border: 1px solid rgba(57, 255, 20, .28) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 18px rgba(57, 255, 20, .05) !important;
}

.upload-bar {
  border-radius: 3px !important;
  animation: terminalProgress 1.2s var(--ease-sine) infinite !important;
}

@keyframes terminalProgress {
  0%, 100% { filter: brightness(.9); }
  50% { filter: brightness(1.26); }
}

.thumb,
.video-thumb,
.preview,
video,
canvas:not(.matrix-rain-canvas),
iframe {
  background: #000 !important;
  border-color: rgba(57, 255, 20, .28) !important;
}

.toast {
  background: rgba(0, 12, 4, .94) !important;
  border-color: var(--border) !important;
  border-radius: 4px !important;
}

.toast.success {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

#selectionRect {
  border: 1px solid rgba(57, 255, 20, .9) !important;
  background: rgba(57, 255, 20, .12) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 22px rgba(57, 255, 20, .24), inset 0 0 18px rgba(57, 255, 20, .1) !important;
}

.contact-list::-webkit-scrollbar,
.messages::-webkit-scrollbar,
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.contact-list::-webkit-scrollbar-track,
.messages::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .58);
}

.contact-list::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  background: rgba(57, 255, 20, .36);
  border: 2px solid rgba(0, 0, 0, .72);
  border-radius: 2px;
}

::selection {
  background: rgba(57, 255, 20, .3);
  color: #fff;
}

@media (max-width: 760px) {
  .topbar {
    align-items: flex-start !important;
  }

  .topbar .linux-location,
  .topbar .linux-map {
    order: 10;
    width: 100%;
    margin: .35rem 0 0 !important;
  }

  body > .linux-location {
    position: relative;
    top: auto;
    left: auto;
    margin: .65rem;
  }

  .hero {
    margin: .8rem !important;
  }

  .matrix-home .hero {
    margin: 0 .8rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}