/* Theme modes layer.
   Day mode is intentionally untouched. Night mode is enabled only by
   html:is(html.app-theme-dark, html.dark) and follows a calm OpenAI-like neutral palette. */

.theme-mode-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: rgba(15, 23, 42, 0.04);
}

.theme-mode-option {
  min-width: 0;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  padding: 2px 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #4b5563;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
  white-space: nowrap;
}

.theme-mode-option svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-mode-option span {
  white-space: nowrap;
}

#sidebar .dialogs-load-more-indicator {
  --sidebar-load-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 252, 0.96) 100%);
  --sidebar-load-text: #334155;
  --sidebar-load-border: rgba(148, 163, 184, 0.28);
  --sidebar-load-track: rgba(148, 163, 184, 0.4);
  --sidebar-load-accent: #3b82f6;
}

.theme-mode-option.active {
  background: #111827 !important;
  color: #f9fafb !important;
  border-color: rgba(15, 23, 42, 0.35);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.theme-mode-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(32, 33, 35, 0.14);
}

#theme-switch-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.22);
  opacity: 0;
  transition: opacity 120ms ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#theme-switch-loader.is-visible {
  display: flex;
  pointer-events: all;
  opacity: 1;
}

#theme-switch-loader .theme-switch-loader-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

body.theme-switching {
  pointer-events: none;
  overflow: hidden;
  cursor: wait;
}

html.theme-switching,
html.theme-switching *,
body.theme-switching,
body.theme-switching * {
  pointer-events: none !important;
}

body.theme-switching #theme-switch-loader,
body.theme-switching #theme-switch-loader * ,
html.theme-switching #theme-switch-loader,
html.theme-switching #theme-switch-loader * {
  pointer-events: auto !important;
}

#theme-switch-loader .theme-switch-loader-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(17, 24, 39, 0.18);
  border-top-color: #0f172a;
  border-radius: 50%;
  animation: theme-switch-spinner 0.7s linear infinite;
}

@keyframes theme-switch-spinner {
  to { transform: rotate(360deg); }
}

.boot-loader__bar {
  background: rgba(148, 163, 184, 0.16) !important;
}

#initial-loader {
  --loader-page-bg: #f7fbff;
  --loader-page-haze:
    radial-gradient(54% 38% at 22% 20%, rgba(14, 165, 233, 0.12) 0%, transparent 72%),
    radial-gradient(46% 34% at 80% 74%, rgba(250, 204, 21, 0.10) 0%, transparent 70%);
  --loader-page-star: rgba(51, 65, 85, 0.34);
  --loader-page-star-soft: rgba(59, 130, 246, 0.18);
  --loader-page-star-opacity: 0.36;
  position: fixed;
  overflow: hidden;
  background: var(--loader-page-bg) !important;
}

#initial-loader::before,
#initial-loader::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#initial-loader::before {
  inset: -16%;
  background: var(--loader-page-haze);
  animation: bootLoaderViewportDrift 26s ease-in-out infinite;
}

#initial-loader::after {
  inset: -120%;
  background-image:
    radial-gradient(var(--loader-page-star) 0.75px, transparent 0.85px),
    radial-gradient(var(--loader-page-star-soft) 0.6px, transparent 0.75px);
  background-size: 72px 72px, 42px 42px;
  background-position: 0 0, 19px 23px;
  opacity: var(--loader-page-star-opacity);
  animation: bootLoaderViewportStars 58s linear infinite;
}

#initial-loader .boot-loader,
#initial-loader .boot-loader__sky {
  isolation: isolate;
}

#initial-loader .boot-loader {
  width: min(340px, calc(100vw - 36px));
  overflow: hidden;
  background: var(--loader-sky-bg) !important;
  border-color: var(--loader-sky-border) !important;
  box-shadow: var(--loader-sky-shadow) !important;
  animation: bootLoaderSkyPulse 11s ease-in-out infinite;
  z-index: 1;
}

#initial-loader .boot-loader::before,
#initial-loader .boot-loader::after,
#initial-loader .boot-loader__sky::before,
#initial-loader .boot-loader__sky::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

#initial-loader .boot-loader::before {
  inset: -24% -14%;
  border-radius: inherit;
  background: var(--loader-sky-aurora);
  mix-blend-mode: screen;
  animation: bootLoaderAuroraDrift 34s linear infinite;
  opacity: 0.7;
}

#initial-loader .boot-loader::after {
  inset: 16% -12% -10%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.2) 0, transparent 55%);
  filter: blur(0.2px);
  animation: bootLoaderAuroraDrift 30s linear infinite reverse;
  opacity: 0.34;
}

#initial-loader .boot-loader__sky {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

#initial-loader .boot-loader__sky::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: inherit;
  background:
    radial-gradient(38% 32% at 24% 30%, var(--loader-nebula-a) 0%, transparent 64%),
    radial-gradient(36% 30% at 76% 64%, var(--loader-nebula-b) 0%, transparent 62%),
    radial-gradient(30% 26% at 58% 80%, var(--loader-nebula-c) 0%, transparent 68%);
  opacity: 0.7;
  animation: bootLoaderNebulaDrift 58s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

#initial-loader .boot-loader__sky::after {
  content: "";
  position: absolute;
  inset: -200% -200%;
  background-image:
    radial-gradient(var(--loader-sky-grain) 0.4px, transparent 0.4px),
    radial-gradient(rgba(255, 255, 255, 0.14) 0.35px, transparent 0.35px),
    radial-gradient(rgba(255, 255, 255, 0.07) 0.3px, transparent 0.3px);
  background-size: 4px 4px, 2px 2px, 3px 3px;
  background-position: 0 0, 1px 1px, 2px 2px;
  opacity: 0.25;
  animation: bootLoaderSkyNoise 2.1s steps(2) infinite;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

#initial-loader .boot-loader__shooting-star {
  display: block !important;
}

#initial-loader .boot-loader__sky-layer {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}

#initial-loader .boot-loader__sky-layer--distant {
  opacity: 0.88;
  animation: bootLoaderDistantDrift 64s linear infinite, bootLoaderStarFlicker 6.5s ease-in-out infinite;
  background-image:
    radial-gradient(1px 1px at 12% 12%, var(--loader-star-distant) 0, transparent 58%),
    radial-gradient(1px 1px at 35% 26%, var(--loader-star-distant) 0, transparent 58%),
    radial-gradient(1px 1px at 62% 18%, var(--loader-star-distant) 0, transparent 58%),
    radial-gradient(1px 1px at 84% 11%, var(--loader-star-distant) 0, transparent 58%),
    radial-gradient(1px 1px at 20% 44%, var(--loader-star-distant) 0, transparent 58%),
    radial-gradient(1px 1px at 48% 55%, var(--loader-star-distant) 0, transparent 58%),
    radial-gradient(1px 1px at 72% 39%, var(--loader-star-distant) 0, transparent 58%),
    radial-gradient(1px 1px at 89% 47%, var(--loader-star-distant) 0, transparent 58%),
    radial-gradient(1px 1px at 32% 64%, var(--loader-star-distant) 0, transparent 58%),
    radial-gradient(1px 1px at 55% 78%, var(--loader-star-distant) 0, transparent 58%),
    radial-gradient(1px 1px at 78% 88%, var(--loader-star-distant) 0, transparent 58%),
    radial-gradient(1px 1px at 11% 82%, var(--loader-star-distant) 0, transparent 58%);
}

#initial-loader .boot-loader__sky-layer--mid {
  opacity: 0.74;
  animation: bootLoaderMidDrift 34s linear infinite, bootLoaderStarPulse 3.9s ease-in-out infinite;
  background-image:
    radial-gradient(1.45px 1.45px at 18% 32%, var(--loader-star-mid) 0, transparent 58%),
    radial-gradient(1.45px 1.45px at 45% 14%, var(--loader-star-mid) 0, transparent 58%),
    radial-gradient(1.45px 1.45px at 59% 31%, var(--loader-star-mid) 0, transparent 58%),
    radial-gradient(1.45px 1.45px at 71% 59%, var(--loader-star-mid) 0, transparent 58%),
    radial-gradient(1.45px 1.45px at 86% 72%, var(--loader-star-mid) 0, transparent 58%),
    radial-gradient(1.45px 1.45px at 8% 42%, var(--loader-star-mid) 0, transparent 58%),
    radial-gradient(1.45px 1.45px at 29% 69%, var(--loader-star-mid) 0, transparent 58%),
    radial-gradient(1.45px 1.45px at 74% 23%, var(--loader-star-mid) 0, transparent 58%),
    radial-gradient(1.45px 1.45px at 93% 36%, var(--loader-star-mid) 0, transparent 58%);
}

#initial-loader .boot-loader__sky-layer--dust {
  opacity: 0.52;
  animation: bootLoaderDustDrift 70s linear infinite, bootLoaderStarFlicker 6.8s ease-in-out infinite 0.6s;
  filter: blur(0.2px);
  background-image:
    radial-gradient(1.1px 1.1px at 10% 22%, var(--loader-star-dust) 0, transparent 56%),
    radial-gradient(1.1px 1.1px at 30% 8%, var(--loader-star-dust) 0, transparent 56%),
    radial-gradient(1.1px 1.1px at 58% 17%, var(--loader-star-dust) 0, transparent 56%),
    radial-gradient(1.05px 1.05px at 74% 34%, var(--loader-star-dust) 0, transparent 56%),
    radial-gradient(1.08px 1.08px at 16% 56%, var(--loader-star-dust) 0, transparent 56%),
    radial-gradient(1.1px 1.1px at 40% 64%, var(--loader-star-dust) 0, transparent 56%),
    radial-gradient(1.02px 1.02px at 64% 76%, var(--loader-star-dust) 0, transparent 56%),
    radial-gradient(1.06px 1.06px at 88% 88%, var(--loader-star-dust) 0, transparent 56%),
    radial-gradient(1.03px 1.03px at 24% 92%, var(--loader-star-dust) 0, transparent 56%);
}

#initial-loader .boot-loader__sky-layer--near {
  animation: bootLoaderNearDrift 24s linear infinite, bootLoaderStarPulse 2.5s ease-in-out infinite alternate;
  opacity: 0.48;
  filter: blur(0.06px);
  background-image:
    radial-gradient(2.2px 2.2px at 8% 74%, var(--loader-star-near) 0, transparent 58%),
    radial-gradient(2.2px 2.2px at 24% 19%, var(--loader-star-near) 0, transparent 58%),
    radial-gradient(2.2px 2.2px at 31% 87%, var(--loader-star-near) 0, transparent 58%),
    radial-gradient(2.2px 2.2px at 49% 28%, var(--loader-star-near) 0, transparent 58%),
    radial-gradient(2.2px 2.2px at 67% 62%, var(--loader-star-near) 0, transparent 58%),
    radial-gradient(2.2px 2.2px at 84% 14%, var(--loader-star-near) 0, transparent 58%),
    radial-gradient(2.2px 2.2px at 92% 84%, var(--loader-star-near) 0, transparent 58%),
    radial-gradient(2.2px 2.2px at 16% 52%, var(--loader-star-near) 0, transparent 58%),
    radial-gradient(2.2px 2.2px at 61% 46%, var(--loader-star-near) 0, transparent 58%);
}

#initial-loader .boot-loader__shooting-star {
  position: absolute;
  z-index: 0;
  --shooting-star-tail-length: 200px;
  --shooting-star-tail: var(--loader-meteor-main);
  --shooting-star-core: var(--loader-meteor-core);
  --shooting-star-angle: -18deg;
  --shooting-star-distance-x: 220%;
  --shooting-star-distance-y: 52%;
  --shooting-star-duration: 12s;
  --shooting-star-delay: -1.2s;
  left: -45%;
  top: 20%;
  width: var(--shooting-star-tail-length);
  height: 1.6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--shooting-star-tail) 42%, var(--shooting-star-core) 58%, transparent 100%);
  opacity: 0;
  filter: blur(0.1px);
  animation: bootLoaderShootingStar var(--shooting-star-duration) linear infinite;
  animation-delay: var(--shooting-star-delay);
  pointer-events: none;
}

#initial-loader .boot-loader__shooting-star::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 50% 50%, var(--shooting-star-core) 0%, transparent 65%);
  animation: bootLoaderMeteorGlow 2.2s ease-in-out infinite;
}

#initial-loader .boot-loader__shooting-star--one {
  --shooting-star-distance-x: 220%;
  --shooting-star-distance-y: 72%;
  --shooting-star-angle: -24deg;
  --shooting-star-duration: 13.5s;
  --shooting-star-delay: -4s;
  top: 12%;
}

#initial-loader .boot-loader__shooting-star--two {
  --shooting-star-distance-x: 236%;
  --shooting-star-distance-y: -6%;
  --shooting-star-angle: 14deg;
  --shooting-star-duration: 16.5s;
  --shooting-star-delay: -9s;
  top: 46%;
  left: -57%;
  --shooting-star-tail-length: 255px;
}

#initial-loader .boot-loader__shooting-star--three {
  --shooting-star-distance-x: 210%;
  --shooting-star-distance-y: -58%;
  --shooting-star-angle: 20deg;
  --shooting-star-duration: 17.8s;
  --shooting-star-delay: -12s;
  top: 74%;
  left: -50%;
  --shooting-star-tail-length: 190px;
}

#initial-loader .boot-loader__constellation {
  position: absolute;
  width: 96px;
  height: 54px;
  opacity: var(--loader-constellation-opacity, 0.42);
  filter: drop-shadow(0 0 8px var(--loader-constellation-glow));
  pointer-events: none;
  animation: bootLoaderConstellationFloat 12s ease-in-out infinite;
}

#initial-loader .boot-loader__constellation::before,
#initial-loader .boot-loader__constellation::after {
  content: "";
  position: absolute;
  inset: 0;
}

#initial-loader .boot-loader__constellation::before {
  background-image:
    radial-gradient(2px 2px at 8% 72%, var(--loader-constellation-star) 0, transparent 65%),
    radial-gradient(2px 2px at 30% 28%, var(--loader-constellation-star) 0, transparent 65%),
    radial-gradient(2px 2px at 56% 44%, var(--loader-constellation-star) 0, transparent 65%),
    radial-gradient(2px 2px at 76% 18%, var(--loader-constellation-star) 0, transparent 65%),
    radial-gradient(2px 2px at 92% 70%, var(--loader-constellation-star) 0, transparent 65%);
  animation: bootLoaderConstellationBlink 3.8s ease-in-out infinite;
}

#initial-loader .boot-loader__constellation::after {
  background:
    linear-gradient(24deg, transparent 0 15%, var(--loader-constellation-line) 15% 16%, transparent 16% 100%),
    linear-gradient(-11deg, transparent 0 31%, var(--loader-constellation-line) 31% 32%, transparent 32% 100%),
    linear-gradient(31deg, transparent 0 54%, var(--loader-constellation-line) 54% 55%, transparent 55% 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
  opacity: 0.58;
}

#initial-loader .boot-loader__constellation--one {
  --constellation-base: rotate(-10deg);
  top: 12%;
  right: 9%;
  transform: var(--constellation-base);
}

#initial-loader .boot-loader__constellation--two {
  --constellation-base: rotate(17deg) scale(0.76);
  left: 8%;
  bottom: 14%;
  transform: var(--constellation-base);
  animation-delay: -4s;
  opacity: var(--loader-constellation-opacity-soft, 0.32);
}

#initial-loader .boot-loader__orbit {
  position: absolute;
  inset: 9px;
  border-radius: 999px;
  border: 1px solid var(--loader-orbit-line);
  box-shadow:
    0 0 18px var(--loader-orbit-glow),
    inset 0 0 20px rgba(255, 255, 255, 0.08);
  transform: rotateX(64deg) rotateZ(-22deg);
  opacity: 0.74;
  animation: bootLoaderOrbitBreathe 3.8s ease-in-out infinite;
}

#initial-loader .boot-loader__orbit::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  border-top-color: var(--loader-orbit-spark);
  filter: blur(0.2px);
  animation: bootLoaderOrbitSweep 2.8s linear infinite;
}

#initial-loader .boot-loader__orbit--inner {
  inset: 24px;
  transform: rotateX(66deg) rotateZ(23deg);
  opacity: 0.58;
  animation-delay: -1.8s;
}

#initial-loader .boot-loader__planet {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: var(--loader-planet-size, 7px);
  height: var(--loader-planet-size, 7px);
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  background: var(--loader-planet-bg);
  box-shadow: 0 0 14px var(--loader-planet-glow);
  transform-origin: center center;
  animation: bootLoaderPlanetOrbit var(--loader-planet-duration, 5.5s) linear infinite;
}

#initial-loader .boot-loader__planet--one {
  --loader-planet-bg: var(--loader-planet-a);
  --loader-planet-glow: var(--loader-planet-a-glow);
  --loader-planet-distance: 50px;
  --loader-planet-start: -24deg;
  --loader-planet-duration: 5.7s;
}

#initial-loader .boot-loader__planet--two {
  --loader-planet-size: 5px;
  --loader-planet-bg: var(--loader-planet-b);
  --loader-planet-glow: var(--loader-planet-b-glow);
  --loader-planet-distance: 36px;
  --loader-planet-start: 132deg;
  --loader-planet-duration: 4.2s;
  animation-direction: reverse;
}

#initial-loader .boot-loader__bar::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -18px;
  width: 18px;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle at 65% 50%, var(--loader-bar-spark) 0%, transparent 64%);
  filter: blur(0.2px);
  animation: bootLoaderBarSpark 1.35s ease-in-out infinite;
}

#initial-loader .boot-loader > :not(.boot-loader__sky):not(.boot-loader__shooting-star) {
  position: relative;
  z-index: 1;
}

@keyframes bootLoaderAuroraDrift {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(14px, 7px, 0); }
}

@keyframes bootLoaderDistantDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(7px, -6px, 0) scale(1.01); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes bootLoaderMidDrift {
  0% { transform: translate3d(-6px, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
  100% { transform: translate3d(-6px, 0, 0); }
}

@keyframes bootLoaderNearDrift {
  0% { transform: translate3d(6px, 2px, 0); }
  50% { transform: translate3d(-6px, -3px, 0); }
  100% { transform: translate3d(6px, 2px, 0); }
}

@keyframes bootLoaderDustDrift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-12px, 8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes bootLoaderStarPulse {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 0.55; }
}

@keyframes bootLoaderShootingStar {
  0%, 72% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--shooting-star-angle));
    filter: blur(1.2px);
  }
  74% {
    opacity: 0.35;
    filter: blur(0.6px);
  }
  76%, 86% {
    opacity: 0.9;
    filter: blur(0.18px);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--shooting-star-distance-x), var(--shooting-star-distance-y), 0) rotate(var(--shooting-star-angle));
  }
}

@keyframes bootLoaderStarFlicker {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 0.78; }
}

@keyframes bootLoaderNebulaDrift {
  0% { transform: translate3d(-5px, 5px, 0) scale(1); }
  50% { transform: translate3d(7px, -4px, 0) scale(1.04); }
  100% { transform: translate3d(-5px, 5px, 0) scale(1); }
}

@keyframes bootLoaderSkyNoise {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-0.8px, 0.8px, 0); }
  100% { transform: translate3d(1.5px, -1px, 0); }
}

@keyframes bootLoaderSkyPulse {
  0%, 100% { filter: brightness(0.96) saturate(1.05); }
  50% { filter: brightness(1.04) saturate(1.1); }
}

@keyframes bootLoaderMeteorGlow {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes bootLoaderViewportDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.86; }
  50% { transform: translate3d(2.2%, -1.8%, 0) scale(1.04); opacity: 1; }
}

@keyframes bootLoaderViewportStars {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(48px, -42px, 0) rotate(1deg); }
}

@keyframes bootLoaderConstellationFloat {
  0%, 100% { transform: var(--constellation-base, none) translate3d(0, 0, 0); }
  50% { transform: var(--constellation-base, none) translate3d(0, -6px, 0); }
}

@keyframes bootLoaderConstellationBlink {
  0%, 100% { opacity: 0.68; }
  35% { opacity: 1; }
  70% { opacity: 0.45; }
}

@keyframes bootLoaderOrbitBreathe {
  0%, 100% { opacity: 0.58; filter: brightness(0.94); }
  50% { opacity: 0.86; filter: brightness(1.12); }
}

@keyframes bootLoaderOrbitSweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bootLoaderPlanetOrbit {
  from { transform: rotate(var(--loader-planet-start, 0deg)) translateX(var(--loader-planet-distance, 48px)); }
  to { transform: rotate(calc(var(--loader-planet-start, 0deg) + 360deg)) translateX(var(--loader-planet-distance, 48px)); }
}

@keyframes bootLoaderBarSpark {
  0% { transform: translateX(0); opacity: 0; }
  25% { opacity: 0.85; }
  100% { transform: translateX(230px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #initial-loader::before,
  #initial-loader::after,
  #initial-loader .boot-loader,
  #initial-loader .boot-loader::before,
  #initial-loader .boot-loader::after,
  #initial-loader .boot-loader *,
  #initial-loader .boot-loader *::before,
  #initial-loader .boot-loader *::after {
    animation: none !important;
    transition: none !important;
  }

  #initial-loader .boot-loader__shooting-star {
    display: none !important;
  }

  #initial-loader .boot-loader__bar span {
    width: 100%;
    transform: none !important;
    opacity: 0.45;
  }
}

html:is(html.app-theme-dark, html.dark) #theme-switch-loader {
  background: rgba(0, 0, 0, 0.45);
}

html:is(html.app-theme-dark, html.dark) #theme-switch-loader .theme-switch-loader-card {
  background: rgba(38, 38, 38, 0.95);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--night-text);
}

html:is(html.app-theme-dark, html.dark) #theme-switch-loader .theme-switch-loader-spinner {
  border-color: rgba(255, 255, 255, 0.32);
  border-top-color: var(--night-text);
}

.boot-loader__bar span {
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.22) 0%,
    rgba(100, 116, 139, 0.42) 50%,
    rgba(148, 163, 184, 0.22) 100%
  ) !important;
  opacity: 0.78;
}

html:not(.app-theme-dark):not(.dark) #initial-loader,
html:not(.app-theme-dark):not(.dark) #initial-loader .boot-loader {
  --loader-page-bg:
    radial-gradient(72% 58% at 50% -12%, rgba(125, 211, 252, 0.26) 0%, transparent 68%),
    radial-gradient(52% 40% at 8% 92%, rgba(250, 204, 21, 0.12) 0%, transparent 72%),
    linear-gradient(180deg, #f8fbff 0%, #eef7ff 54%, #f7f7f8 100%);
  --loader-page-haze:
    radial-gradient(52% 42% at 18% 18%, rgba(14, 165, 233, 0.14) 0%, transparent 74%),
    radial-gradient(48% 36% at 86% 72%, rgba(245, 158, 11, 0.12) 0%, transparent 76%),
    linear-gradient(118deg, transparent 0%, rgba(59, 130, 246, 0.07) 46%, transparent 76%);
  --loader-page-star: rgba(30, 41, 59, 0.32);
  --loader-page-star-soft: rgba(14, 165, 233, 0.19);
  --loader-page-star-opacity: 0.38;
  --loader-sky-bg: linear-gradient(145deg, #f5fbff 0%, #f0f6ff 42%, #eff3ff 100%);
  --loader-sky-border: rgba(148, 163, 184, 0.28);
  --loader-sky-shadow: 0 28px 70px rgba(15, 23, 42, 0.2);
  --loader-sky-aurora:
    radial-gradient(58% 55% at 26% 52%, rgba(56, 189, 248, 0.16) 0%, rgba(56, 189, 248, 0) 75%),
    radial-gradient(52% 50% at 74% 44%, rgba(129, 140, 248, 0.12) 0%, rgba(129, 140, 248, 0) 74%),
    radial-gradient(48% 44% at 50% 75%, rgba(232, 121, 249, 0.06) 0%, rgba(232, 121, 249, 0) 82%);
  --loader-nebula-a: rgba(56, 189, 248, 0.22);
  --loader-nebula-b: rgba(129, 140, 248, 0.16);
  --loader-nebula-c: rgba(168, 85, 247, 0.09);
  --loader-star-dust: rgba(99, 102, 241, 0.24);
  --loader-sky-grain: rgba(15, 23, 42, 0.06);
  --loader-meteor-main: rgba(232, 244, 255, 0.95);
  --loader-meteor-core: rgba(255, 255, 255, 0.98);
  --loader-star-distant: rgba(148, 163, 184, 0.66);
  --loader-star-mid: rgba(59, 130, 246, 0.58);
  --loader-star-near: rgba(244, 244, 255, 0.98);
  --loader-constellation-star: rgba(14, 165, 233, 0.72);
  --loader-constellation-line: rgba(14, 165, 233, 0.23);
  --loader-constellation-glow: rgba(14, 165, 233, 0.32);
  --loader-constellation-opacity: 0.42;
  --loader-constellation-opacity-soft: 0.30;
  --loader-orbit-line: rgba(37, 99, 235, 0.24);
  --loader-orbit-glow: rgba(14, 165, 233, 0.18);
  --loader-orbit-spark: rgba(245, 158, 11, 0.78);
  --loader-planet-a: radial-gradient(circle at 32% 30%, #ffffff 0%, #38bdf8 38%, #2563eb 100%);
  --loader-planet-a-glow: rgba(14, 165, 233, 0.42);
  --loader-planet-b: radial-gradient(circle at 28% 26%, #fff7ed 0%, #f59e0b 44%, #e11d48 100%);
  --loader-planet-b-glow: rgba(245, 158, 11, 0.38);
  --loader-bar-spark: rgba(245, 158, 11, 0.9);
  background: var(--loader-sky-bg) !important;
  color: #0f172a !important;
}

html:not(.app-theme-dark):not(.dark) #initial-loader {
  background: var(--loader-page-bg) !important;
}

html:not(.app-theme-dark):not(.dark) #initial-loader .boot-loader {
  background: var(--loader-sky-bg) !important;
}

html:not(.app-theme-dark):not(.dark) .boot-loader__brand,
html:not(.app-theme-dark):not(.dark) .boot-loader__title,
html:not(.app-theme-dark):not(.dark) .boot-loader__subtitle,
html:not(.app-theme-dark):not(.dark) #initial-loader-text,
html:not(.app-theme-dark):not(.dark) #initial-loader-subtext {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html:is(html.app-theme-dark, html.dark) {
  color-scheme: dark;
  --night-bg: #212121;
  --night-bg-elevated: #262626;
  --night-surface: #2f2f2f;
  --night-user-message: linear-gradient(135deg, rgba(37, 53, 80, 0.98) 0%, rgba(31, 45, 68, 0.98) 100%);
  --night-agent-message: #2b2b2b;
  --night-agent-content: #252525;
  --night-surface-hover: #353535;
  --night-surface-strong: #3a3a3a;
  --night-sidebar: #171717;
  --night-sidebar-soft: #1f1f1f;
  --night-text: #ececec;
  --night-text-muted: #b4b4b4;
  --night-text-subtle: #8f8f8f;
  --night-border: rgba(255, 255, 255, 0.10);
  --night-border-strong: rgba(255, 255, 255, 0.16);
  --night-ring: rgba(255, 255, 255, 0.18);
  --night-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);

  --app-bg: var(--night-bg) !important;
  --app-text: var(--night-text) !important;
  --app-muted: var(--night-text-muted) !important;
  --app-border: var(--night-border) !important;
  --app-ring: var(--night-ring) !important;
  --ui-stroke: var(--night-border) !important;
  --ui-stroke-strong: var(--night-border-strong) !important;
  --ui-focus: var(--night-ring) !important;
  --tw-ring-color: var(--night-ring) !important;
  --oa-neutral-primary: #303030 !important;
  --oa-neutral-primary-hover: #3a3a3a !important;
  --oa-neutral-primary-active: #454545 !important;
  --oa-neutral-soft: rgba(255, 255, 255, 0.08) !important;
  --oa-neutral-soft-hover: rgba(255, 255, 255, 0.12) !important;
  --oa-neutral-border: var(--night-border-strong) !important;
  --oa-neutral-border-soft: var(--night-border) !important;
  --oa-neutral-ring: var(--night-ring) !important;
}

html:is(html.app-theme-dark, html.dark) input,
html:is(html.app-theme-dark, html.dark) textarea,
html:is(html.app-theme-dark, html.dark) select,
html:is(html.app-theme-dark, html.dark) option {
  color-scheme: dark !important;
}

html:is(html.app-theme-dark, html.dark),
html:is(html.app-theme-dark, html.dark) body {
  background: var(--night-bg) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #initial-loader,
html:is(html.app-theme-dark, html.dark) #root,
html:is(html.app-theme-dark, html.dark) #app-container,
html:is(html.app-theme-dark, html.dark) #chat-area,
html:is(html.app-theme-dark, html.dark) .bg-app-bg,
html:is(html.app-theme-dark, html.dark) body.bg-app-bg {
  background: var(--night-bg) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .boot-loader__brand,
html:is(html.app-theme-dark, html.dark) .boot-loader__title,
html:is(html.app-theme-dark, html.dark) #title-dialog,
html:is(html.app-theme-dark, html.dark) #welcome-screen h2,
html:is(html.app-theme-dark, html.dark) .text-gray-800,
html:is(html.app-theme-dark, html.dark) .text-gray-900,
html:is(html.app-theme-dark, html.dark) .text-slate-800,
html:is(html.app-theme-dark, html.dark) .text-slate-900 {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .boot-loader__subtitle,
html:is(html.app-theme-dark, html.dark) #welcome-description,
html:is(html.app-theme-dark, html.dark) #welcome-screen p,
html:is(html.app-theme-dark, html.dark) .text-gray-400,
html:is(html.app-theme-dark, html.dark) .text-gray-500,
html:is(html.app-theme-dark, html.dark) .text-gray-600,
html:is(html.app-theme-dark, html.dark) .text-gray-700,
html:is(html.app-theme-dark, html.dark) .text-slate-500,
html:is(html.app-theme-dark, html.dark) .text-slate-600,
html:is(html.app-theme-dark, html.dark) .text-slate-700 {
  color: var(--night-text-muted) !important;
}

html:not(.app-theme-dark):not(.dark) #title-dialog {
  color: #0f172a !important;
}

html:is(html.app-theme-dark, html.dark) #title-dialog {
  color: var(--night-text) !important;
}

html:not(.app-theme-dark):not(.dark) .boot-loader__brand,
html:not(.app-theme-dark):not(.dark) #title-dialog,
html:not(.app-theme-dark):not(.dark) .boot-loader__title,
html:not(.app-theme-dark):not(.dark) .boot-loader__subtitle {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}

html:is(html.app-theme-dark, html.dark) .boot-loader__brand,
html:is(html.app-theme-dark, html.dark) #title-dialog,
html:is(html.app-theme-dark, html.dark) .boot-loader__title,
html:is(html.app-theme-dark, html.dark) .boot-loader__subtitle {
  background: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--night-text) !important;
  -webkit-text-fill-color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #initial-loader,
html:is(html.app-theme-dark, html.dark) #initial-loader .boot-loader {
  --loader-page-bg:
    radial-gradient(68% 50% at 52% -12%, rgba(56, 189, 248, 0.18) 0%, transparent 70%),
    radial-gradient(54% 44% at 8% 88%, rgba(45, 212, 191, 0.12) 0%, transparent 72%),
    radial-gradient(46% 36% at 94% 72%, rgba(245, 158, 11, 0.08) 0%, transparent 74%),
    linear-gradient(180deg, #0d111a 0%, #141720 52%, #212121 100%);
  --loader-page-haze:
    radial-gradient(50% 44% at 18% 18%, rgba(56, 189, 248, 0.14) 0%, transparent 74%),
    radial-gradient(46% 38% at 82% 76%, rgba(45, 212, 191, 0.10) 0%, transparent 76%),
    linear-gradient(118deg, transparent 0%, rgba(148, 163, 184, 0.06) 48%, transparent 78%);
  --loader-page-star: rgba(224, 242, 254, 0.38);
  --loader-page-star-soft: rgba(94, 234, 212, 0.18);
  --loader-page-star-opacity: 0.44;
  --loader-sky-bg: linear-gradient(155deg, #111827 0%, #1b2230 52%, #171717 100%);
  --loader-sky-border: rgba(255, 255, 255, 0.16);
  --loader-sky-shadow: 0 30px 72px rgba(0, 0, 0, 0.42);
  --loader-sky-aurora:
    radial-gradient(58% 55% at 24% 52%, rgba(125, 211, 252, 0.16) 0%, rgba(125, 211, 252, 0) 74%),
    radial-gradient(52% 50% at 72% 44%, rgba(192, 132, 252, 0.11) 0%, rgba(192, 132, 252, 0) 74%),
    radial-gradient(48% 44% at 50% 80%, rgba(52, 211, 153, 0.08) 0%, rgba(52, 211, 153, 0) 82%);
  --loader-nebula-a: rgba(125, 211, 252, 0.19);
  --loader-nebula-b: rgba(168, 85, 247, 0.16);
  --loader-nebula-c: rgba(52, 211, 153, 0.08);
  --loader-star-dust: rgba(147, 197, 253, 0.23);
  --loader-sky-grain: rgba(255, 255, 255, 0.08);
  --loader-meteor-main: rgba(224, 242, 254, 1);
  --loader-meteor-core: rgba(255, 255, 255, 1);
  --loader-star-distant: rgba(191, 219, 254, 0.42);
  --loader-star-mid: rgba(224, 242, 254, 0.48);
  --loader-star-near: rgba(255, 255, 255, 0.95);
  --loader-constellation-star: rgba(125, 211, 252, 0.88);
  --loader-constellation-line: rgba(125, 211, 252, 0.22);
  --loader-constellation-glow: rgba(45, 212, 191, 0.36);
  --loader-constellation-opacity: 0.50;
  --loader-constellation-opacity-soft: 0.36;
  --loader-orbit-line: rgba(125, 211, 252, 0.26);
  --loader-orbit-glow: rgba(45, 212, 191, 0.18);
  --loader-orbit-spark: rgba(251, 191, 36, 0.82);
  --loader-planet-a: radial-gradient(circle at 32% 30%, #f8fafc 0%, #38bdf8 38%, #0f766e 100%);
  --loader-planet-a-glow: rgba(45, 212, 191, 0.44);
  --loader-planet-b: radial-gradient(circle at 28% 26%, #fff7ed 0%, #fbbf24 44%, #fb7185 100%);
  --loader-planet-b-glow: rgba(251, 191, 36, 0.34);
  --loader-bar-spark: rgba(251, 191, 36, 0.92);
  background: var(--loader-sky-bg) !important;
}

html:is(html.app-theme-dark, html.dark) #initial-loader {
  background: var(--loader-page-bg) !important;
}

html:is(html.app-theme-dark, html.dark) #initial-loader .boot-loader {
  background: var(--loader-sky-bg) !important;
}

html:is(html.app-theme-dark, html.dark) .boot-loader {
  background: var(--loader-sky-bg) !important;
  border-color: var(--loader-sky-border) !important;
  box-shadow: var(--loader-sky-shadow) !important;
}

html:is(html.app-theme-dark, html.dark) .boot-loader__bar {
  background: rgba(255, 255, 255, 0.09) !important;
}

html:is(html.app-theme-dark, html.dark) .boot-loader__bar span {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0.12) 100%
  ) !important;
  opacity: 0.72;
}

html:not(.app-theme-dark):not(.dark) #initial-loader .boot-loader__brand {
  background: linear-gradient(90deg, #1d4ed8 0%, #0891b2 46%, #b45309 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

html:is(html.app-theme-dark, html.dark) #initial-loader .boot-loader__brand {
  background: linear-gradient(90deg, #e0f2fe 0%, #5eead4 48%, #fbbf24 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

html:not(.app-theme-dark):not(.dark) #initial-loader .boot-loader__ring {
  background: rgba(14, 165, 233, 0.78) !important;
  box-shadow:
    0 -44px 0 rgba(14, 165, 233, 0.48),
    16px -41px 0 rgba(245, 158, 11, 0.35),
    30px -32px 0 rgba(37, 99, 235, 0.42),
    40px -16px 0 rgba(45, 212, 191, 0.31),
    44px 0 0 rgba(14, 165, 233, 0.45),
    40px 16px 0 rgba(245, 158, 11, 0.34),
    30px 32px 0 rgba(37, 99, 235, 0.42),
    16px 41px 0 rgba(45, 212, 191, 0.31),
    0 44px 0 rgba(14, 165, 233, 0.48),
    -16px 41px 0 rgba(245, 158, 11, 0.34),
    -30px 32px 0 rgba(37, 99, 235, 0.42),
    -40px 16px 0 rgba(45, 212, 191, 0.31),
    -44px 0 0 rgba(14, 165, 233, 0.45),
    -40px -16px 0 rgba(245, 158, 11, 0.34),
    -30px -32px 0 rgba(37, 99, 235, 0.42),
    -16px -41px 0 rgba(45, 212, 191, 0.31) !important;
}

html:is(html.app-theme-dark, html.dark) #initial-loader .boot-loader__ring {
  background: rgba(125, 211, 252, 0.8) !important;
  box-shadow:
    0 -44px 0 rgba(125, 211, 252, 0.46),
    16px -41px 0 rgba(45, 212, 191, 0.36),
    30px -32px 0 rgba(251, 191, 36, 0.34),
    40px -16px 0 rgba(148, 163, 184, 0.28),
    44px 0 0 rgba(125, 211, 252, 0.42),
    40px 16px 0 rgba(45, 212, 191, 0.34),
    30px 32px 0 rgba(251, 191, 36, 0.32),
    16px 41px 0 rgba(148, 163, 184, 0.28),
    0 44px 0 rgba(125, 211, 252, 0.46),
    -16px 41px 0 rgba(45, 212, 191, 0.34),
    -30px 32px 0 rgba(251, 191, 36, 0.32),
    -40px 16px 0 rgba(148, 163, 184, 0.28),
    -44px 0 0 rgba(125, 211, 252, 0.42),
    -40px -16px 0 rgba(45, 212, 191, 0.34),
    -30px -32px 0 rgba(251, 191, 36, 0.32),
    -16px -41px 0 rgba(148, 163, 184, 0.28) !important;
}

html:not(.app-theme-dark):not(.dark) #initial-loader .boot-loader__bar span,
html:is(html.app-theme-dark, html.dark) #initial-loader .boot-loader__bar span {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(56, 189, 248, 0.84) 32%,
    rgba(245, 158, 11, 0.76) 54%,
    rgba(45, 212, 191, 0.78) 72%,
    transparent 100%
  ) !important;
  opacity: 1;
}

html:is(html.app-theme-dark, html.dark) #app-bar {
  background: rgba(33, 33, 33, 0.92) !important;
  border-bottom: 0 !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #menu-btn,
html:is(html.app-theme-dark, html.dark) #exit-btn {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #menu-btn:hover,
html:is(html.app-theme-dark, html.dark) #exit-btn:hover {
  background: var(--night-surface) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar {
  --sidebar-apple-bg: var(--night-sidebar);
  --sidebar-apple-card: rgba(47, 47, 47, 0.78);
  --sidebar-apple-card-solid: var(--night-bg-elevated);
  --sidebar-apple-fill: rgba(255, 255, 255, 0.07);
  --sidebar-apple-fill-hover: rgba(255, 255, 255, 0.10);
  --sidebar-apple-fill-active: rgba(255, 255, 255, 0.13);
  --sidebar-apple-blue: #ececec;
  --sidebar-apple-blue-hover: #f4f4f4;
  --sidebar-apple-blue-active: #ffffff;
  --sidebar-apple-blue-pressed: #ffffff;
  --sidebar-apple-blue-soft: rgba(255, 255, 255, 0.10);
  --sidebar-apple-blue-border: rgba(255, 255, 255, 0.16);
  --sidebar-apple-text: var(--night-text);
  --sidebar-apple-muted: var(--night-text-muted);
  --sidebar-apple-border: var(--night-border-strong);
  --sidebar-apple-border-soft: var(--night-border);
  --sidebar-apple-ring: var(--night-ring);
  background: var(--night-sidebar) !important;
  border-right: 1px solid var(--night-border) !important;
  box-shadow: 18px 0 44px rgba(0, 0, 0, 0.38) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar .dialogs-load-more-indicator {
  --sidebar-load-bg: linear-gradient(180deg, rgba(23, 23, 23, 0.96) 0%, rgba(15, 23, 42, 0.96) 100%);
  --sidebar-load-text: var(--night-text-muted);
  --sidebar-load-border: rgba(255, 255, 255, 0.12);
  --sidebar-load-track: rgba(148, 163, 184, 0.32);
  --sidebar-load-accent: var(--night-text);
}

html:is(html.app-theme-dark, html.dark) #sidebar > div:first-child,
html:is(html.app-theme-dark, html.dark) #sidebar .sidebar-content {
  background: var(--night-sidebar) !important;
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar .sidebar-sections {
  background: rgba(23, 23, 23, 0.84) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section,
html:is(html.app-theme-dark, html.dark) #sidebar .sidebar-section-content {
  background: var(--night-sidebar) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar h2,
html:is(html.app-theme-dark, html.dark) #sidebar .sidebar-title,
html:is(html.app-theme-dark, html.dark) #sidebar .examples-title,
html:is(html.app-theme-dark, html.dark) #sidebar .dialog-title,
html:is(html.app-theme-dark, html.dark) #sidebar .settings-title,
html:is(html.app-theme-dark, html.dark) #sidebar .setting-label,
html:is(html.app-theme-dark, html.dark) #sidebar .text-gray-800,
html:is(html.app-theme-dark, html.dark) #sidebar .text-gray-900,
html:is(html.app-theme-dark, html.dark) #sidebar .text-xl,
html:is(html.app-theme-dark, html.dark) #sidebar .font-bold,
html:is(html.app-theme-dark, html.dark) #sidebar > .p-4.border-b.pt-8 h2 {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar .dialog-subtitle,
html:is(html.app-theme-dark, html.dark) #sidebar .setting-description,
html:is(html.app-theme-dark, html.dark) #sidebar #user-balance,
html:is(html.app-theme-dark, html.dark) #sidebar .text-gray-600 {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar #account-selector,
html:is(html.app-theme-dark, html.dark) #sidebar .language-select,
html:is(html.app-theme-dark, html.dark) #sidebar select,
html:is(html.app-theme-dark, html.dark) #sidebar input {
  background: var(--night-surface) !important;
  color: var(--night-text) !important;
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar #topup-button,
html:is(html.app-theme-dark, html.dark) #sidebar #save-ai-settings {
  background: var(--night-surface) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar #topup-button:hover,
html:is(html.app-theme-dark, html.dark) #sidebar #save-ai-settings:hover {
  background: var(--night-surface-hover) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar .sidebar-section-btn:hover,
html:is(html.app-theme-dark, html.dark) #sidebar .dialog-item:hover:not(.active),
html:is(html.app-theme-dark, html.dark) #sidebar .life-sphere-card:hover,
html:is(html.app-theme-dark, html.dark) #sidebar .prompt-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar .sidebar-section-btn.active,
html:is(html.app-theme-dark, html.dark) #sidebar .dialog-item.active,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-list .dialog-item.active {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar .sidebar-section-icon,
html:is(html.app-theme-dark, html.dark) #sidebar .sidebar-section-btn.active .sidebar-section-icon {
  background: rgba(255, 255, 255, 0.08) !important;
  color: inherit !important;
  border-color: transparent !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar .settings-group,
html:is(html.app-theme-dark, html.dark) #sidebar .life-sphere-card,
html:is(html.app-theme-dark, html.dark) #sidebar .prompt-item,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-list .dialog-item,
html:is(html.app-theme-dark, html.dark) #sidebar .dialog-item {
  background: transparent !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar .settings-group {
  background: rgba(255, 255, 255, 0.035) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-list .dialog-item.dialog-item--favorite:not(.active),
html:is(html.app-theme-dark, html.dark) #sidebar .dialog-item.dialog-item--favorite:not(.active) {
  background: rgba(250, 204, 21, 0.10) !important;
  border-color: rgba(250, 204, 21, 0.28) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-list .dialog-item.dialog-item--favorite:not(.active):hover,
html:is(html.app-theme-dark, html.dark) #sidebar .dialog-item.dialog-item--favorite:not(.active):hover {
  background: rgba(250, 204, 21, 0.14) !important;
}

html:is(html.app-theme-dark, html.dark) .settings-legal-link,
html:is(html.app-theme-dark, html.dark) #sidebar .settings-legal-link,
html:is(html.app-theme-dark, html.dark) #sidebar #logout-btn,
html:is(html.app-theme-dark, html.dark) #sidebar #ref-copy-tg,
html:is(html.app-theme-dark, html.dark) #sidebar #ref-copy-web {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #referral-settings [style*="background:#f7f7f8"],
html:is(html.app-theme-dark, html.dark) #referral-settings [style*="background: #f7f7f8"],
html:is(html.app-theme-dark, html.dark) #referral-settings [style*="background:#fff"],
html:is(html.app-theme-dark, html.dark) #referral-settings [style*="background: #fff"] {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) #referral-settings [style*="color:#202123"],
html:is(html.app-theme-dark, html.dark) #referral-settings [style*="color: #202123"],
html:is(html.app-theme-dark, html.dark) #referral-settings [style*="color:#374151"],
html:is(html.app-theme-dark, html.dark) #referral-settings [style*="color: #374151"] {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #referral-settings [style*="color:#6b7280"],
html:is(html.app-theme-dark, html.dark) #referral-settings [style*="color: #6b7280"],
html:is(html.app-theme-dark, html.dark) #referral-settings [style*="color:#9ca3af"],
html:is(html.app-theme-dark, html.dark) #referral-settings [style*="color: #9ca3af"] {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background:#fff"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background: #fff"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background: rgba(32,33,35"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background:rgba(32,33,35"] {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #dialogs-list .dialog-menu,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-list .dialog-menu,
html:is(html.app-theme-dark, html.dark) .mode-menu,
html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__dropdown {
  background: rgba(38, 38, 38, 0.96) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text) !important;
  box-shadow: var(--night-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

html:is(html.app-theme-dark, html.dark) #dialogs-list .dialog-menu-action,
html:is(html.app-theme-dark, html.dark) .mode-menu-item,
html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__option {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #dialogs-list .dialog-menu-action:hover,
html:is(html.app-theme-dark, html.dark) .mode-menu-item:hover,
html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__option:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__dropdown,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal,
html:is(html.app-theme-dark, html.dark) .model-select-pro.is-open .model-select-pro__backdrop,
html:is(html.app-theme-dark, html.dark) .model-select-pro__backdrop.model-select-pro__backdrop--portal,
html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__backdrop,
html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__backdrop.model-select-pro__backdrop--portal {
  background: rgba(38, 38, 38, 0.96) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text) !important;
  box-shadow: var(--night-shadow) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__trigger,
html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro.is-open .model-select-pro__trigger,
html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__trigger:focus-visible {
  background: var(--night-surface) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__trigger:hover {
  border-color: var(--night-border-strong) !important;
  box-shadow: 0 0 0 3px var(--night-ring) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__dropdown,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal,
html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__options {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__modal-title,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__modal-title {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__close-btn,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__close-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__close-btn:hover,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__close-btn:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__group-title,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__group-title,
html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__option-title,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__option-title {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__availability,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__availability {
  background: rgba(14, 165, 233, 0.14) !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
  color: #7dd3fc !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__group-items,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__group-items,
html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__option,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__option {
  background: var(--night-surface) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__option:hover,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__option:hover {
  background: rgba(255, 255, 255, 0.09) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__option.is-selected,
html:is(html.app-theme-dark, html.dark) .model-select-pro__dropdown.model-select-pro__dropdown--portal .model-select-pro__option.is-selected {
  border-color: rgba(59, 130, 246, 0.42) !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__count-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--night-text-muted) !important;
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__chevron {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #model-selector-container .model-select-pro__dot {
  background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 100%) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14) !important;
}

html:is(html.app-theme-dark, html.dark) #chat-modes-bar {
  background: var(--night-bg) !important;
}

html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-switcher,
html:is(html.app-theme-dark, html.dark) .mode-switcher {
  background: var(--night-surface) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .mode-main,
html:is(html.app-theme-dark, html.dark) .mode-caret {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-main-icon svg {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-main-icon svg [fill]:not([fill="none"]),
html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-menu-item svg [fill]:not([fill="none"]) {
  fill: currentColor !important;
}

html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-main-icon svg [stroke]:not([stroke="none"]),
html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-menu-item svg [stroke]:not([stroke="none"]) {
  stroke: currentColor !important;
}

html:is(html.app-theme-dark, html.dark) .mode-menu,
html:is(html.app-theme-dark, html.dark) #mode-menu,
html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-menu {
  background: rgba(38, 38, 38, 0.96) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text) !important;
  box-shadow: var(--night-shadow) !important;
}

html:is(html.app-theme-dark, html.dark) .mode-menu-item,
html:is(html.app-theme-dark, html.dark) .mode-main,
html:is(html.app-theme-dark, html.dark) .mode-caret {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .mode-menu-item,
html:is(html.app-theme-dark, html.dark) .mode-menu-item:is(:hover, :focus-visible) {
  background: transparent !important;
}

html:is(html.app-theme-dark, html.dark) .mode-main:hover,
html:is(html.app-theme-dark, html.dark) .mode-caret:hover,
html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

html:is(html.app-theme-dark, html.dark) #welcome-screen {
  background: rgba(38, 38, 38, 0.86) !important;
  border-color: var(--night-border) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26) !important;
}

html:is(html.app-theme-dark, html.dark) #chat-messages {
  background: var(--night-bg) !important;
  scrollbar-color: #4a4a4a transparent;
}

html:is(html.app-theme-dark, html.dark) .message,
html:is(html.app-theme-dark, html.dark) .message-text,
html:is(html.app-theme-dark, html.dark) .formatted-content {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .user-message {
  background: var(--night-user-message) !important;
  border-color: rgba(96, 165, 250, 0.22) !important;
  color: var(--night-text) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18) !important;
}

html:is(html.app-theme-dark, html.dark) #chat-messages .user-message.user-message--has-media,
html:is(html.app-theme-dark, html.dark) #chat-messages .user-message.user-message--has-media .user-content-container,
html:is(html.app-theme-dark, html.dark) #chat-messages .user-message .user-media-block,
html:is(html.app-theme-dark, html.dark) #chat-messages .user-message .user-image-frame {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #chat-messages .user-message .user-text-bubble {
  background: var(--night-user-message) !important;
  border: 1px solid rgba(96, 165, 250, 0.22) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .agent-message,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message {
  background: var(--night-agent-message) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .formatted-content,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message .formatted-content,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message > div {
  background: var(--night-agent-content) !important;
  border-color: var(--night-border) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message.agent-message--has-image,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message.agent-message--has-video,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message.agent-message--has-audio,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message .agent-media-block,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message .audio-content-container,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message .video-content-container,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message .agent-image-frame,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message .video-content-container > .relative {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message .agent-generated-image,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message .video-content-container video {
  background: transparent !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message .agent-text-bubble {
  background: var(--night-agent-content) !important;
  border: 1px solid var(--night-border) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .agent-processing-indicator,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-processing-indicator,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-processing-indicator > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--night-muted) !important;
}

html:is(html.app-theme-dark, html.dark) .agent-message.agent-message--text,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message.agent-message--text,
html:is(html.app-theme-dark, html.dark) #chat-messages .agent-message.agent-message--text > .formatted-content {
  background: var(--night-agent-content) !important;
  border: 1px solid var(--night-border) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .formatted-content blockquote,
html:is(html.app-theme-dark, html.dark) .formatted-content table,
html:is(html.app-theme-dark, html.dark) .formatted-content th,
html:is(html.app-theme-dark, html.dark) .formatted-content td {
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) .formatted-content th {
  background: var(--night-surface) !important;
}

html:is(html.app-theme-dark, html.dark) .formatted-content code,
html:is(html.app-theme-dark, html.dark) .formatted-content pre {
  background: #171717 !important;
  color: #f4f4f4 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .formatted-content pre code {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
}

html:is(html.app-theme-dark, html.dark) .formatted-content h1,
html:is(html.app-theme-dark, html.dark) .formatted-content h2,
html:is(html.app-theme-dark, html.dark) .formatted-content h3,
html:is(html.app-theme-dark, html.dark) .formatted-content h4,
html:is(html.app-theme-dark, html.dark) .formatted-content h5,
html:is(html.app-theme-dark, html.dark) .formatted-content h6 {
  color: #f9fafb !important;
}

html:is(html.app-theme-dark, html.dark) .formatted-content h1,
html:is(html.app-theme-dark, html.dark) .formatted-content h2 {
  border-bottom-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) .formatted-content a {
  color: #c8c8c8 !important;
}

html:is(html.app-theme-dark, html.dark) .input-area-container {
  background: var(--night-bg) !important;
  border-top-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:is(html.app-theme-dark, html.dark) .input-area-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:is(html.app-theme-dark, html.dark) .input-area-wrapper:focus-within {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #message-input,
html:is(html.app-theme-dark, html.dark) #message-input.input-textarea,
html:is(html.app-theme-dark, html.dark) #model-selector,
html:is(html.app-theme-dark, html.dark) #model-selector.model-selector,
html:is(html.app-theme-dark, html.dark) .model-selector,
html:is(html.app-theme-dark, html.dark) .language-select,
html:is(html.app-theme-dark, html.dark) select,
html:is(html.app-theme-dark, html.dark) textarea,
html:is(html.app-theme-dark, html.dark) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  background: var(--night-surface) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #message-input::placeholder,
html:is(html.app-theme-dark, html.dark) textarea::placeholder,
html:is(html.app-theme-dark, html.dark) input::placeholder {
  color: var(--night-text-subtle) !important;
}

html:is(html.app-theme-dark, html.dark) #message-input:focus,
html:is(html.app-theme-dark, html.dark) #message-input:focus-visible,
html:is(html.app-theme-dark, html.dark) #model-selector:focus,
html:is(html.app-theme-dark, html.dark) #model-selector:focus-visible,
html:is(html.app-theme-dark, html.dark) select:focus,
html:is(html.app-theme-dark, html.dark) textarea:focus,
html:is(html.app-theme-dark, html.dark) input:focus {
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 0 0 4px var(--night-ring) !important;
}

html:is(html.app-theme-dark, html.dark) input,
html:is(html.app-theme-dark, html.dark) textarea,
html:is(html.app-theme-dark, html.dark) select,
html:is(html.app-theme-dark, html.dark) option,
html:is(html.app-theme-dark, html.dark) #message-input::placeholder,
html:is(html.app-theme-dark, html.dark) textarea::placeholder,
html:is(html.app-theme-dark, html.dark) input::placeholder {
  -webkit-text-fill-color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .input-area-container .select-pill,
html:is(html.app-theme-dark, html.dark) .input-area-container .setting-pill,
html:is(html.app-theme-dark, html.dark) .input-area-container .select-pill select,
html:is(html.app-theme-dark, html.dark) .input-area-container .setting-pill select,
html:is(html.app-theme-dark, html.dark) .input-area-container .language-select,
html:is(html.app-theme-dark, html.dark) .input-area-container .model-selector,
html:is(html.app-theme-dark, html.dark) .input-area-container .select-pill select option,
html:is(html.app-theme-dark, html.dark) .input-area-container .setting-pill select option,
html:is(html.app-theme-dark, html.dark) .input-area-container .language-select option {
  background: var(--night-surface) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .input-area-container .select-pill:hover,
html:is(html.app-theme-dark, html.dark) .input-area-container .setting-pill:hover {
  border-color: var(--night-border-strong) !important;
}

html:is(html.app-theme-dark, html.dark) .input-area-container .select-pill:focus-within,
html:is(html.app-theme-dark, html.dark) .input-area-container .setting-pill:focus-within,
html:is(html.app-theme-dark, html.dark) .input-area-container .select-pill:focus,
html:is(html.app-theme-dark, html.dark) .input-area-container .setting-pill:focus,
html:is(html.app-theme-dark, html.dark) .input-area-container .select-pill span,
html:is(html.app-theme-dark, html.dark) .input-area-container .setting-pill span {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) option {
  background: var(--night-surface) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #image-settings-panel .select-pill,
html:is(html.app-theme-dark, html.dark) #video-settings-panel .select-pill,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .select-pill,
html:is(html.app-theme-dark, html.dark) .setting-pill,
html:is(html.app-theme-dark, html.dark) .settings-panel-wrapper,
html:is(html.app-theme-dark, html.dark) .settings-group-container {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #image-settings-panel .select-pill span,
html:is(html.app-theme-dark, html.dark) #video-settings-panel .select-pill span,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .select-pill span,
html:is(html.app-theme-dark, html.dark) .setting-pill span {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #scroll-to-bottom-btn {
  background: rgba(47, 47, 47, 0.92) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text-muted) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

html:is(html.app-theme-dark, html.dark) #scroll-to-bottom-btn:hover {
  background: var(--night-surface-hover) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container {
  --docs-stroke: rgba(255, 255, 255, 0.18);
  --docs-stroke-hover: rgba(255, 255, 255, 0.28);
  --docs-bg: #181818;
  --docs-card-bg: rgba(47, 47, 47, 0.92);
  --docs-toolbar-bg: rgba(38, 38, 38, 0.92);
  --docs-blue: #93c5fd;
  --docs-blue-light: rgba(59, 130, 246, 0.18);
  --docs-blue-border: rgba(59, 130, 246, 0.45);
  background: var(--docs-bg) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-toolbar,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-toolbar-actions,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-breadcrumbs,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-file-list,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-file-list::-webkit-scrollbar-track,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-loading-state,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-preview-overlay,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-preview-header,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-preview-body,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ai-panel,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ai-status,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-upload-flow,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-upload-flow__card,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-folder-modal,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-folder-modal__card,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-actions-modal__backdrop,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-actions-modal__dialog,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-actions-tools,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-output-settings,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-workflow-builder,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-workflow-panel,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-slider,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-tab,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-slider__actions,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-slider__head,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-status,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-card,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-actions-group,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-presentation-settings,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-docx-edit-settings,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-result-bubble,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-item,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-item:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-item.docs-selected,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-item.docs-active-file,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ctx-btn,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-more-menu,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-more-menu-item,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-empty-icon,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-empty-state {
  background: #2f2f2f !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container [class*="docs-"] {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-item-meta,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-selected-meta,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-workflow-action-card__desc,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-action-card__desc,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-actions-modal__subtitle,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-status__detail,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-empty-desc,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-output-settings__hint,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-workflow-checkbox,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-card__meta,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-presentation-hint,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-upload-flow__item.is-success .docs-upload-flow__dot,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-upload-flow__item.is-error .docs-upload-flow__state,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-status__item.passed,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-status__item.warning,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-status__item.failed,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-upload-flow__dot {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-back-btn,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-action-btn,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-action-btn--primary,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ctx-btn,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ai-send-btn,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ai-library-btn,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-media-transcribe-btn,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-action-footer-btn,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-action-footer-btn--ghost,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-quick-btn,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-manage-btn,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-workflow-action-card,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-action-card,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-result-copy,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-upload-flow__cancel,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-folder-modal__close,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-upload-flow__item,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-more-menu-item,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-output-settings select,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-workflow-select select,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-workflow-prompt textarea,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ai-textarea {
  background: #2c2c2c !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-back-btn:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-action-btn:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-action-btn--primary:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ctx-btn:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ai-send-btn:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ai-library-btn:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-media-transcribe-btn:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-action-footer-btn:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-quick-btn:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-manage-btn:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-workflow-action-card:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-action-card:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-item:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-more-menu-item:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-action-card.is-selected,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-workflow-action-card.is-selected,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-status.is-success,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-status.is-error,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-upload-flow__item.is-uploading,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-result-bubble,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ai-status--processing,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ai-status--done,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ai-status--error {
  background: rgba(255, 255, 255, 0.08) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-selected-file {
  background: var(--night-surface) !important;
  border-color: var(--night-border-strong) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-actions-modal__head {
  background:
    radial-gradient(90% 120% at 10% -50%, rgba(147, 197, 253, 0.12), transparent 60%),
    radial-gradient(80% 110% at 100% -40%, rgba(125, 211, 252, 0.08), transparent 62%),
    var(--night-bg-elevated) !important;
  border-bottom-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-actions-modal__footer {
  background: var(--night-bg-elevated) !important;
  border-top-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-actions-modal__close {
  background: var(--night-surface) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-actions-modal__close:hover {
  background: var(--night-surface-hover) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-toolbar .docs-action-btn:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-tab.is-active,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-template-manage-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-workflow-select select:focus,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-output-settings select:focus,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-presentation-field select:focus,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-presentation-field textarea:focus,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-workflow-prompt textarea:focus,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-ai-textarea:focus {
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-provider-tabs {
  background: var(--night-bg-elevated) !important;
  border-color: var(--night-border-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-provider-tab {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-provider-tab:hover {
  background: var(--night-surface-hover) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-provider-tab.is-active {
  background: var(--night-surface-strong) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-panel {
  background: var(--night-bg-elevated) !important;
  border-color: var(--night-border-strong) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-icon {
  background: rgba(59, 130, 246, 0.16) !important;
  border-color: rgba(147, 197, 253, 0.22) !important;
  color: #bfdbfe !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-title,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-field span,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-status strong {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-subtitle,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-field small,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-status span {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-copy-row input {
  background: var(--night-surface) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-field--secret .docs-mcp-copy-row input {
  background: rgba(120, 53, 15, 0.22) !important;
  border-color: rgba(251, 146, 60, 0.34) !important;
  color: #fed7aa !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-copy-btn {
  background: rgba(59, 130, 246, 0.16) !important;
  border-color: rgba(147, 197, 253, 0.28) !important;
  color: #bfdbfe !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-copy-btn:hover {
  background: rgba(59, 130, 246, 0.24) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-status {
  background: var(--night-surface) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-status.is-active {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.28) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-actions .docs-connect-btn {
  background: rgba(37, 99, 235, 0.86) !important;
  border: 1px solid rgba(147, 197, 253, 0.3) !important;
  color: #f8fafc !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-actions .docs-connect-btn:hover {
  background: rgba(29, 78, 216, 0.94) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-actions .docs-connect-btn--secondary {
  background: var(--night-surface) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-danger {
  color: #fca5a5 !important;
  border-color: rgba(248, 113, 113, 0.3) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-chat-panel,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-side-card {
  background: var(--night-bg-elevated) !important;
  border-color: var(--night-border-strong) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-view-tabs {
  background: var(--night-bg-elevated) !important;
  border-color: var(--night-border-strong) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-view-tabs button {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-view-tabs button:hover {
  background: var(--night-surface-hover) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-view-tabs button.is-active {
  background: var(--night-surface-strong) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-shell--ide {
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container.docs-provider-mcp,
html:is(html.app-theme-dark, html.dark) #documents-container.docs-provider-mcp .docs-file-list,
html:is(html.app-theme-dark, html.dark) #documents-container.docs-provider-mcp .docs-mcp-shell--ide,
html:is(html.app-theme-dark, html.dark) #documents-container.docs-provider-mcp .docs-mcp-explorer,
html:is(html.app-theme-dark, html.dark) #documents-container.docs-provider-mcp .docs-mcp-explorer__head,
html:is(html.app-theme-dark, html.dark) #documents-container.docs-provider-mcp .docs-mcp-explorer__path,
html:is(html.app-theme-dark, html.dark) #documents-container.docs-provider-mcp .docs-mcp-chat-panel--codex,
html:is(html.app-theme-dark, html.dark) #documents-container.docs-provider-mcp .docs-mcp-chat-panel--codex .docs-mcp-messages,
html:is(html.app-theme-dark, html.dark) #documents-container.docs-provider-mcp .docs-mcp-chat-toolbar,
html:is(html.app-theme-dark, html.dark) #documents-container.docs-provider-mcp .docs-mcp-editor,
html:is(html.app-theme-dark, html.dark) #documents-container.docs-provider-mcp .docs-mcp-editor__tabbar {
  background: var(--night-bg) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer {
  background: var(--night-bg-elevated) !important;
  border-color: var(--night-border-strong) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__head,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__path,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__selection {
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__head strong,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__path,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__selection {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__head button,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__path button,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__selection button {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__head button:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__path button:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-explorer__selection button:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-file-list--explorer .docs-mcp-file:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-file-list--explorer .docs-mcp-file.is-selected {
  background: var(--night-surface-hover) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-chat-panel--codex,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-chat-panel--codex .docs-mcp-composer {
  background: var(--night-bg) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-chat-panel--codex .docs-mcp-composer,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-composer {
  background: var(--night-bg) !important;
  border-color: var(--night-border-strong) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-chat-toolbar {
  background: var(--night-bg) !important;
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-dialog-select,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-select,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-chat-toolbar button {
  background: var(--night-card) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-chat-toolbar button:hover {
  background: #1e293b !important;
  border-color: rgba(129, 140, 248, 0.52) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-toggle {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-chat-head {
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-kicker,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-message__role,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-context span {
  color: #bfdbfe !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-chat-head h3,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-context strong,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-message__text,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-side-head strong,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-file__name,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-tools > span {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-chat-head p,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-side-head span,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-file__meta,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-side-empty {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-context,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-message,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-file,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-side-empty {
  background: var(--night-surface) !important;
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-message--user,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-file:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-file.is-selected {
  background: rgba(59, 130, 246, 0.16) !important;
  border-color: rgba(147, 197, 253, 0.24) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-message--system {
  background: rgba(148, 163, 184, 0.10) !important;
  border-color: rgba(148, 163, 184, 0.24) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-message--system .docs-mcp-message__role {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-mini-btn,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-side-actions button,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-quick-actions button,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-copy-config,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-composer textarea,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-composer-settings select {
  background: var(--night-surface) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-mini-btn:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-side-actions button:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-quick-actions button:hover,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-copy-config:hover {
  background: var(--night-surface-hover) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-file__icon,
html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-tools code {
  background: var(--night-surface-strong) !important;
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-file.is-folder .docs-mcp-file__icon {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #fcd34d !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .docs-mcp-config {
  background: #111827 !important;
  border-color: var(--night-border-strong) !important;
  color: #d1d5db !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay {
  --acc-bg: #1f1f1f;
  --acc-card: rgba(47, 47, 47, 0.94);
  --acc-card-solid: #262626;
  --acc-border: rgba(255, 255, 255, 0.16);
  --acc-border-strong: rgba(255, 255, 255, 0.24);
  --acc-text: var(--night-text);
  --acc-muted: #d4d4d4;
  --acc-primary: #cbd5e1;
  --acc-primary-700: #e5e7eb;
  --acc-success: #94a3b8;
  --acc-danger: #fca5a5;
  --acc-danger-700: #f87171;
  --acc-primary-soft: rgba(255, 255, 255, 0.1);
  --acc-primary-soft-2: rgba(255, 255, 255, 0.14);
  --acc-success-soft: rgba(52, 211, 153, 0.12);
  --acc-danger-soft: rgba(248, 113, 113, 0.1);
  --acc-warn-soft: rgba(251, 191, 36, 0.12);
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-shell,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-header,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-body,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-card,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-panel,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-tabs,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-tab,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-panels,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-panel-actions,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-list,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-list-item,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-list-actions,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-modal-card,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-modal-card--wide,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-drawer-card,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-input,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-copy-btn,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-action-btn,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-btn,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-btn--secondary,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-btn--primary,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-btn--success,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-btn--danger,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-btn--ghost,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-text,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-strong,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-label,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-field-label,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-help,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-muted,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-result,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-result-badge,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-danger-zone,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-danger-text,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-warn,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-warning,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-confirm,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-confirm-card,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-confirm-text,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-messages,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-modal {
  background: var(--acc-card) !important;
  border-color: var(--acc-border) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-tab {
  color: var(--acc-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-tab.is-active {
  color: var(--acc-text) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: var(--acc-border-strong) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-list-item:hover,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-btn:hover,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-btn--secondary:hover,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-btn--primary:hover,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-btn--success:hover,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-btn--danger:hover,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-copy-btn:hover,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-action-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-list,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-list-item {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-list-sub,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-muted,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-help,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-warn,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-result,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-result * {
  color: var(--acc-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay [class*="acc-"] {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) .acc-modal,
html:is(html.app-theme-dark, html.dark) .acc-drawer,
html:is(html.app-theme-dark, html.dark) .acc-confirm {
  z-index: 12000 !important;
}

html:is(html.app-theme-dark, html.dark) .theme-mode-toggle {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--night-border);
}

html:is(html.app-theme-dark, html.dark) .theme-mode-option {
  color: var(--night-text-muted);
}

html:is(html.app-theme-dark, html.dark) .theme-mode-option.active {
  background: var(--night-surface) !important;
  border-color: var(--night-border-strong) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .modal-overlay,
html:is(html.app-theme-dark, html.dark) .balance-modal,
html:is(html.app-theme-dark, html.dark) .guest-auth-modal__backdrop,
html:is(html.app-theme-dark, html.dark) .docs-actions-modal__backdrop {
  background: rgba(0, 0, 0, 0.56) !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-modal__backdrop {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 42%),
    rgba(0, 0, 0, 0.66) !important;
  backdrop-filter: blur(28px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.25) !important;
}

html:is(html.app-theme-dark, html.dark) .modal-content,
html:is(html.app-theme-dark, html.dark) .balance-modal-content,
html:is(html.app-theme-dark, html.dark) .guest-auth-modal,
html:is(html.app-theme-dark, html.dark) .docs-actions-modal__dialog,
html:is(html.app-theme-dark, html.dark) .docs-folder-modal__dialog,
html:is(html.app-theme-dark, html.dark) #account-overlay,
html:is(html.app-theme-dark, html.dark) .acc-panel,
html:is(html.app-theme-dark, html.dark) .acc-card {
  background: var(--night-bg-elevated) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
  box-shadow: var(--night-shadow) !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-modal__card {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(44, 44, 46, 0.98) 0%, rgba(28, 28, 30, 0.96) 100%) !important;
  color: #f5f5f7 !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.44),
    0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-modal__card::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, rgba(10, 132, 255, 0.14), rgba(255, 255, 255, 0) 40%) !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-modal__mark {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)) !important;
  color: #f5f5f7 !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-modal__close {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #aeaeb2 !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-modal__close:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f7 !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-modal__body h2 {
  color: #f5f5f7 !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-modal__body p,
html:is(html.app-theme-dark, html.dark) .guest-auth-modal__label {
  color: #aeaeb2 !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-provider {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f7 !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-provider:hover {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-provider__icon {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: #ffffff !important;
  color: #1d1d1f !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .balance-card,
html:is(html.app-theme-dark, html.dark) .balance-modal-content,
html:is(html.app-theme-dark, html.dark) .balance-card {
  background: var(--night-bg-elevated) !important;
  border: 1px solid var(--night-border) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .modal-header,
html:is(html.app-theme-dark, html.dark) .balance-modal .header-text,
html:is(html.app-theme-dark, html.dark) .balance-modal .header-text h3,
html:is(html.app-theme-dark, html.dark) .balance-modal .header-text p,
html:is(html.app-theme-dark, html.dark) .balance-modal .stats-title,
html:is(html.app-theme-dark, html.dark) .balance-modal .input-label,
html:is(html.app-theme-dark, html.dark) .balance-modal .stat-label,
html:is(html.app-theme-dark, html.dark) .balance-modal .stat-value {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .header-text p,
html:is(html.app-theme-dark, html.dark) .balance-modal .stats-title,
html:is(html.app-theme-dark, html.dark) .balance-modal .input-label {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .current-bal,
html:is(html.app-theme-dark, html.dark) .balance-modal .amount-input,
html:is(html.app-theme-dark, html.dark) .balance-modal .currency-symbol {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .header-icon {
  background: rgba(255, 255, 255, 0.10) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .input-wrapper {
  background: var(--night-surface) !important;
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .input-wrapper:focus-within {
  background: var(--night-surface-hover) !important;
  border-color: var(--night-border-strong) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .stats-grid {
  background: var(--night-surface) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .stat-item {
  background: var(--night-bg-elevated) !important;
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .action-button {
  background: linear-gradient(135deg, #4b5cd8 0%, #5f3f94 100%) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .tg-recharge-btn {
  background: var(--night-surface) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .tg-btn-title {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .tg-btn-subtitle {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .close-btn {
  background: var(--night-surface) !important;
  border: 1px solid var(--night-border) !important;
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) .balance-modal .close-btn:hover {
  background: var(--night-surface-hover) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .bg-white,
html:is(html.app-theme-dark, html.dark) .bg-gray-50,
html:is(html.app-theme-dark, html.dark) .bg-gray-100,
html:is(html.app-theme-dark, html.dark) .bg-slate-50,
html:is(html.app-theme-dark, html.dark) .bg-slate-100 {
  background-color: var(--night-bg-elevated) !important;
}

html:is(html.app-theme-dark, html.dark) .border,
html:is(html.app-theme-dark, html.dark) .border-gray-100,
html:is(html.app-theme-dark, html.dark) .border-gray-200,
html:is(html.app-theme-dark, html.dark) .border-gray-300,
html:is(html.app-theme-dark, html.dark) .border-slate-100,
html:is(html.app-theme-dark, html.dark) .border-slate-200,
html:is(html.app-theme-dark, html.dark) .border-slate-300 {
  border-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) .btn-primary,
html:is(html.app-theme-dark, html.dark) .bg-btn-primary,
html:is(html.app-theme-dark, html.dark) .send-circle-btn,
html:is(html.app-theme-dark, html.dark) #send-button:not(:disabled),
html:is(html.app-theme-dark, html.dark) #prompt-send-new-btn,
html:is(html.app-theme-dark, html.dark) #docs-preview-ai,
html:is(html.app-theme-dark, html.dark) #docs-action-apply,
html:is(html.app-theme-dark, html.dark) .docs-action-btn--primary,
html:is(html.app-theme-dark, html.dark) .acc-btn--primary {
  background: #ececec !important;
  border-color: #ececec !important;
  color: #111111 !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .btn-primary:hover,
html:is(html.app-theme-dark, html.dark) .bg-btn-primary:hover,
html:is(html.app-theme-dark, html.dark) .send-circle-btn:hover:not(:disabled),
html:is(html.app-theme-dark, html.dark) #send-button:hover:not(:disabled),
html:is(html.app-theme-dark, html.dark) #prompt-send-new-btn:hover,
html:is(html.app-theme-dark, html.dark) .docs-action-btn--primary:hover,
html:is(html.app-theme-dark, html.dark) .acc-btn--primary:hover {
  background: #f4f4f4 !important;
  border-color: #f4f4f4 !important;
  color: #111111 !important;
}

html:is(html.app-theme-dark, html.dark) #send-button:disabled {
  background: var(--night-surface-strong) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text-subtle) !important;
  opacity: 0.72 !important;
}

html:is(html.app-theme-dark, html.dark) #send-button:not(:disabled),
html:is(html.app-theme-dark, html.dark) #send-button.send-btn-enabled {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0 transparent !important;
}

html:is(html.app-theme-dark, html.dark) #send-button:hover:not(:disabled),
html:is(html.app-theme-dark, html.dark) #send-button.send-btn-enabled:hover,
html:is(html.app-theme-dark, html.dark) #send-button:focus-visible:not(:disabled) {
  background: #111827 !important;
  border-color: #111827 !important;
  color: #ffffff !important;
}

html:is(html.app-theme-dark, html.dark) #send-button:disabled,
html:is(html.app-theme-dark, html.dark) #send-button.send-btn-disabled {
  background: var(--night-surface-strong) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text-subtle) !important;
  opacity: 0.72 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

html:is(html.app-theme-dark, html.dark) #send-button:not(:disabled) svg,
html:is(html.app-theme-dark, html.dark) #send-button.send-btn-enabled svg {
  stroke: #ffffff !important;
}

html:is(html.app-theme-dark, html.dark) #send-button:disabled svg,
html:is(html.app-theme-dark, html.dark) #send-button.send-btn-disabled svg {
  stroke: var(--night-text-subtle) !important;
}

html:is(html.app-theme-dark, html.dark) .voice-record-button {
  background: var(--night-surface-strong) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .voice-record-button:hover {
  background: #2f333a !important;
}

html:is(html.app-theme-dark, html.dark) .voice-record-button.is-recording {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: rgba(16, 185, 129, 0.38) !important;
  color: #a7f3d0 !important;
}

html:is(html.app-theme-dark, html.dark) body.voice-recording-active #message-input.input-textarea {
  background: linear-gradient(90deg, var(--night-surface) 0%, rgba(16, 185, 129, 0.14) 45%, var(--night-surface) 100%) !important;
  background-size: 220% 100% !important;
  border-color: rgba(16, 185, 129, 0.38) !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.10) !important;
}

html:is(html.app-theme-dark, html.dark) #send-button.is-record-cancel {
  background: var(--night-surface-strong) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

html:is(html.app-theme-dark, html.dark) #send-button.is-record-cancel:hover {
  background: #2f333a !important;
}

html:is(html.app-theme-dark, html.dark) #send-button.is-record-cancel svg {
  stroke: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) .user-voice-message__transcript {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) button:not(:disabled),
html:is(html.app-theme-dark, html.dark) a,
html:is(html.app-theme-dark, html.dark) [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

html:is(html.app-theme-dark, html.dark) button:focus-visible,
html:is(html.app-theme-dark, html.dark) a:focus-visible,
html:is(html.app-theme-dark, html.dark) select:focus-visible,
html:is(html.app-theme-dark, html.dark) textarea:focus-visible,
html:is(html.app-theme-dark, html.dark) input:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px var(--night-ring) !important;
}

html:is(html.app-theme-dark, html.dark) ::selection {
  background: rgba(255, 255, 255, 0.20);
  color: #ffffff;
}

html:is(html.app-theme-dark, html.dark) ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html:is(html.app-theme-dark, html.dark) ::-webkit-scrollbar-track {
  background: transparent;
}

html:is(html.app-theme-dark, html.dark) ::-webkit-scrollbar-thumb {
  background: #4a4a4a;
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

html:is(html.app-theme-dark, html.dark) ::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a;
  border: 2px solid transparent;
  background-clip: content-box;
}

@media (max-width: 420px) {
  .theme-mode-option {
    min-height: 20px;
    font-size: 9px;
    gap: 2px;
  }
}

html:not(.app-theme-dark):not(.dark) .setting-item--theme {
  align-items: stretch !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-toggle {
  gap: 2px !important;
  padding: 2px !important;
  border-radius: 10px !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  background: rgba(15, 23, 42, 0.04) !important;
}

html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option {
  min-height: 22px !important;
  padding: 2px 5px !important;
  gap: 2px !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  border-radius: 8px !important;
}

html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option svg {
  width: 12px !important;
  height: 12px !important;
}

html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option span {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option.active {
  background: #111827 !important;
  border-color: rgba(15, 23, 42, 0.35) !important;
  color: #f9fafb !important;
}

html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-toggle {
  border-color: rgba(15, 23, 42, 0.18) !important;
  background: rgba(15, 23, 42, 0.045) !important;
}

html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option {
  color: #374151 !important;
}

html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option.active {
  background: #111827 !important;
  border-color: rgba(15, 23, 42, 0.35) !important;
  color: #f9fafb !important;
}

@media (max-width: 420px) {
  html:not(.app-theme-dark):not(.dark) .theme-mode-option {
    min-height: 20px !important;
    font-size: 8px !important;
    padding: 2px 4px !important;
    gap: 2px !important;
  }

  html:not(.app-theme-dark):not(.dark) .theme-mode-option svg {
    width: 11px !important;
    height: 11px !important;
  }
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-toggle,
html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-toggle {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2px !important;
  padding: 2px !important;
  border-radius: 10px !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  background: rgba(15, 23, 42, 0.04) !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option,
html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option {
  min-height: 22px !important;
  padding: 2px 5px !important;
  gap: 2px !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  border-radius: 8px !important;
  background: transparent !important;
  border-color: transparent !important;
  color: #4b5563 !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option span,
html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option span {
  font-size: 9px !important;
  line-height: 1.05 !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option.active,
html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option.active {
  background: #111827 !important;
  border-color: rgba(15, 23, 42, 0.35) !important;
  color: #f9fafb !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option svg,
html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option svg {
  width: 12px !important;
  height: 12px !important;
}

@media (max-width: 420px) {
  html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option,
  html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option {
    min-height: 20px !important;
    font-size: 8px !important;
    padding: 2px 4px !important;
    gap: 2px !important;
  }

  html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option svg,
  html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option svg {
    width: 11px !important;
    height: 11px !important;
  }
}

html:is(html.app-theme-dark, html.dark) .text-black,
html:is(html.app-theme-dark, html.dark) [class*="text-black-"] {
  color: var(--night-text) !important;
}

/* Night-mode hardening for Telegram sections with custom/inline styles.
   These selectors are intentionally explicit and use !important for reliability. */
html:is(html.app-theme-dark, html.dark) .setting-item--theme {
  align-items: stretch !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-toggle {
  gap: 2px !important;
  padding: 2px !important;
  border-radius: 10px !important;
  border-color: var(--night-border) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option {
  min-height: 26px !important;
  padding: 3px 5px !important;
  gap: 2px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
  border-radius: 8px !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option svg {
  width: 12px !important;
  height: 12px !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option span {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

@media (max-width: 420px) {
  html:is(html.app-theme-dark, html.dark) .theme-mode-option {
    min-height: 22px !important;
    font-size: 8px !important;
    padding: 2px 4px !important;
    gap: 2px !important;
  }

  html:is(html.app-theme-dark, html.dark) .theme-mode-option svg {
    width: 11px !important;
    height: 11px !important;
  }
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-toggle,
html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-toggle {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2px !important;
  padding: 2px !important;
  border-radius: 10px !important;
  border-color: rgba(15, 23, 42, 0.16) !important;
  background: rgba(15, 23, 42, 0.04) !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option,
html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option {
  min-height: 22px !important;
  padding: 2px 5px !important;
  gap: 2px !important;
  font-size: 9px !important;
  line-height: 1.05 !important;
  border-radius: 8px !important;
  background: transparent !important;
  border-color: transparent !important;
  color: #4b5563 !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option span,
html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option span {
  font-size: 9px !important;
  line-height: 1.05 !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option.active,
html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option.active {
  background: #111827 !important;
  border-color: rgba(15, 23, 42, 0.35) !important;
  color: #f9fafb !important;
}

html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option svg,
html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option svg {
  width: 12px !important;
  height: 12px !important;
}

@media (max-width: 420px) {
  html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option,
  html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option {
    min-height: 20px !important;
    font-size: 8px !important;
    padding: 2px 4px !important;
    gap: 2px !important;
  }

  html:is(html.app-theme-dark, html.dark) .setting-item--theme .theme-mode-option svg,
  html:not(.app-theme-dark):not(.dark) .setting-item--theme .theme-mode-option svg {
    width: 11px !important;
    height: 11px !important;
  }
}

html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section {
  background: var(--night-sidebar) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section .text-xl,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section .font-bold,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section .text-gray-800,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section .text-gray-900,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section [style*="color:#202123"],
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section [style*="color: #202123"],
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section [style*="color:#374151"],
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section [style*="color: #374151"],
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section [style*="color:#6b7280"],
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section [style*="color: #6b7280"] {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section h2,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section h3,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section h4,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section h5,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section .setting-label-text,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section .text-xs,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section .setting-item {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section *:is(h2, h3, h4, .setting-label-text) {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section .bg-white,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section .bg-gray-50,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section .bg-gray-100,
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section [style*="background:#fff"],
html:is(html.app-theme-dark, html.dark) #sidebar #dialogs-section [style*="background: #fff"] {
  background: var(--night-sidebar) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container {
  background: var(--night-bg) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .bg-white,
html:is(html.app-theme-dark, html.dark) #documents-container .bg-gray-50,
html:is(html.app-theme-dark, html.dark) #documents-container .bg-gray-100,
html:is(html.app-theme-dark, html.dark) #documents-container .bg-slate-50,
html:is(html.app-theme-dark, html.dark) #documents-container .bg-slate-100,
html:is(html.app-theme-dark, html.dark) #documents-container [style*="background:#fff"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="background: #fff"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="background:#f7f7f8"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="background: #f7f7f8"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="background-color:#fff"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="background-color: #fff"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="background-color:#f7f7f8"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="background-color: #f7f7f8"],
html:is(html.app-theme-dark, html.dark) #documents-container [class*="bg-blue-"] {
  background: var(--night-bg-elevated) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .text-gray-800,
html:is(html.app-theme-dark, html.dark) #documents-container .text-gray-900,
html:is(html.app-theme-dark, html.dark) #documents-container .text-gray-700,
html:is(html.app-theme-dark, html.dark) #documents-container .text-gray-600,
html:is(html.app-theme-dark, html.dark) #documents-container .text-slate-800,
html:is(html.app-theme-dark, html.dark) #documents-container .text-slate-700,
html:is(html.app-theme-dark, html.dark) #documents-container [class*="text-blue-"] {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container [class*="text-red-"],
html:is(html.app-theme-dark, html.dark) #documents-container [class*="text-green-"],
html:is(html.app-theme-dark, html.dark) #documents-container [class*="text-amber-"],
html:is(html.app-theme-dark, html.dark) #documents-container [class*="text-yellow-"] {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .setting-label-text,
html:is(html.app-theme-dark, html.dark) #documents-container .setting-input-base,
html:is(html.app-theme-dark, html.dark) #documents-container .custom-range,
html:is(html.app-theme-dark, html.dark) #documents-container .select-pill {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .setting-input-base {
  background: var(--night-surface) !important;
  border-color: var(--night-border) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container select.setting-input-base,
html:is(html.app-theme-dark, html.dark) #documents-container #audio-mode-select,
html:is(html.app-theme-dark, html.dark) #documents-container #music-vocal-select,
html:is(html.app-theme-dark, html.dark) #documents-container #text-web-search-mode,
html:is(html.app-theme-dark, html.dark) #documents-container #image-web-search-mode,
html:is(html.app-theme-dark, html.dark) #documents-container #kling-version {
  appearance: none !important;
  background: var(--night-surface) !important;
  border-color: var(--night-border) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container #audio-temp-value,
html:is(html.app-theme-dark, html.dark) #documents-container #kling-steps-value {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .select-pill,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .select-pill {
  background: var(--night-surface) !important;
  border-color: var(--night-border) !important;
  box-shadow: 0 0 0 0 transparent !important;
}

html:is(html.app-theme-dark, html.dark) #search-settings-panel .select-pill,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .select-pill span,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .select-pill select,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .setting-pill,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .setting-pill span,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .setting-pill .setting-input-base,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .setting-label-text,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .setting-input-base,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .custom-range,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .custom-range,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel [class*="text-gray-"],
html:is(html.app-theme-dark, html.dark) #search-settings-panel [class*="text-gray-"],
html:is(html.app-theme-dark, html.dark) #audio-settings-panel [class*="text-blue-"],
html:is(html.app-theme-dark, html.dark) #search-settings-panel [class*="text-blue-"] {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #image-settings-panel,
html:is(html.app-theme-dark, html.dark) #video-settings-panel,
html:is(html.app-theme-dark, html.dark) #search-settings-panel,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel,
html:is(html.app-theme-dark, html.dark) #image-settings-panel *,
html:is(html.app-theme-dark, html.dark) #video-settings-panel *,
html:is(html.app-theme-dark, html.dark) #search-settings-panel *,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel * {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #image-settings-panel .select-pill span,
html:is(html.app-theme-dark, html.dark) #video-settings-panel .select-pill span,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .select-pill span,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .setting-pill span,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .setting-label-text,
html:is(html.app-theme-dark, html.dark) #image-settings-panel .text-xs,
html:is(html.app-theme-dark, html.dark) #video-settings-panel .text-xs,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .text-xs,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .text-xs,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .font-semibold,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .font-semibold,
html:is(html.app-theme-dark, html.dark) #video-settings-panel .font-semibold,
html:is(html.app-theme-dark, html.dark) #image-settings-panel .font-semibold {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #image-settings-panel .text-blue-500,
html:is(html.app-theme-dark, html.dark) #video-settings-panel .text-blue-500,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .text-blue-500,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .text-blue-500,
html:is(html.app-theme-dark, html.dark) #image-settings-panel [class*="text-blue-"],
html:is(html.app-theme-dark, html.dark) #video-settings-panel [class*="text-blue-"],
html:is(html.app-theme-dark, html.dark) #search-settings-panel [class*="text-blue-"],
html:is(html.app-theme-dark, html.dark) #audio-settings-panel [class*="text-blue-"] {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #image-settings-panel select,
html:is(html.app-theme-dark, html.dark) #video-settings-panel select,
html:is(html.app-theme-dark, html.dark) #search-settings-panel select,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel select,
html:is(html.app-theme-dark, html.dark) #image-settings-panel option,
html:is(html.app-theme-dark, html.dark) #video-settings-panel option,
html:is(html.app-theme-dark, html.dark) #search-settings-panel option,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel option {
  background: var(--night-surface) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container .select-pill:hover,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .select-pill:hover {
  background: var(--night-surface-hover) !important;
}

html:is(html.app-theme-dark, html.dark) #audio-settings-panel .setting-pill,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .select-pill {
  border-color: var(--night-border) !important;
  background: var(--night-surface) !important;
}

html:is(html.app-theme-dark, html.dark) #audio-settings-panel .setting-input-base {
  background: transparent !important;
  border-color: transparent !important;
}

html:is(html.app-theme-dark, html.dark) #audio-settings-panel .setting-input-base,
html:is(html.app-theme-dark, html.dark) #search-settings-panel .custom-range {
  accent-color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #audio-settings-panel input[type="range"],
html:is(html.app-theme-dark, html.dark) #search-settings-panel input[type="range"] {
  height: 4px;
  appearance: none;
  background: var(--night-surface-strong);
  border-radius: 999px;
  outline: none;
}

html:is(html.app-theme-dark, html.dark) #audio-settings-panel input[type="range"]::-webkit-slider-thumb,
html:is(html.app-theme-dark, html.dark) #search-settings-panel input[type="range"]::-webkit-slider-thumb,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel input[type="range"]::-moz-range-thumb,
html:is(html.app-theme-dark, html.dark) #search-settings-panel input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--night-text) !important;
  border: 2px solid var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark) audio {
  color-scheme: dark;
  background: var(--night-surface) !important;
  border-radius: 12px;
}

html:is(html.app-theme-dark, html.dark) audio::-webkit-media-controls-enclosure,
html:is(html.app-theme-dark, html.dark) audio::-webkit-media-controls-panel {
  background-color: var(--night-surface) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) audio::-webkit-media-controls-current-time-display,
html:is(html.app-theme-dark, html.dark) audio::-webkit-media-controls-time-remaining-display {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #audio-temp-value,
html:is(html.app-theme-dark, html.dark) #kling-steps-value {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container input[type="range"]::-webkit-slider-runnable-track,
html:is(html.app-theme-dark, html.dark) #documents-container input[type="range"]::-moz-range-track {
  background: var(--night-surface-strong) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container input[type="range"]::-webkit-slider-thumb,
html:is(html.app-theme-dark, html.dark) #documents-container input[type="range"]::-moz-range-thumb {
  background: var(--night-text-muted) !important;
  border-color: var(--night-border-strong) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container input[type="range"] {
  accent-color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container [style*="background:#fff"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="background: #fff"] {
  background: var(--night-surface) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container [style*="color:#202123"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="color: #202123"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="color:#374151"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="color: #374151"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="color:#6b7280"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="color: #6b7280"] {
  color: var(--night-text-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #documents-container [style*="color: rgba(15, 23, 42"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="color:rgba(15,23,42"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="color: rgba(32, 33, 35"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="color:rgb(31, 41, 55"],
html:is(html.app-theme-dark, html.dark) #documents-container [style*="color: rgb(31, 41, 55"] {
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-shell,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-card,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-panel,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-modal-card,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-drawer-card {
  background: var(--acc-card-solid) !important;
  color: var(--acc-text) !important;
  border-color: var(--acc-border) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-strong,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-label,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-field-label,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-text,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-panel-title,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-tab,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-quiet,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-panel-subtitle,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-muted,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-help,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-result,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-warning {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-warn,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-danger-text,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-result-badge,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-alert--warn {
  color: var(--acc-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-muted,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-label,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-field-label,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-help,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-result,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-warning {
  color: var(--acc-muted) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-strong,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-text,
html:is(html.app-theme-dark, html.dark) #account-overlay #acc-active-balance,
html:is(html.app-theme-dark, html.dark) #account-overlay #acc-corp-balance-label,
html:is(html.app-theme-dark, html.dark) #account-overlay #acc-active-name,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-panel-title,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-tab,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-result {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay b,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-card b {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay [class*="acc-"] .acc-copy-btn,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-copy-btn {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-input {
  background: var(--night-surface) !important;
  border-color: var(--acc-border) !important;
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background:#fff"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background: #fff"] {
  background: var(--acc-card-solid) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color:#202123"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: #202123"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color:#374151"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: #374151"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color:#6b7280"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: #6b7280"] {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: rgba(32, 33, 35"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: rgba(32, 33, 35"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: rgba(15,23,42"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color:rgba(15,23,42"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: rgba(15, 23, 42"] {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background: rgba(32,33,35"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background:rgba(32,33,35"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background: rgba(15,23,42"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background:rgba(15,23,42"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background: rgba(15, 23, 42"] {
  background: rgba(47, 47, 47, 0.94) !important;
  border-color: var(--acc-border) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background: rgba(15,23,42,.02"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background: rgba(15,23,42,0.02"] {
  background: var(--acc-card) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background: rgba(32,33,35,.045"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="background: rgba(32,33,35,.04"] {
  background: var(--acc-card) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: rgba(32,33,35,.92"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: rgba(32,33,35, .92"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: rgba(32,33,35,.78"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: rgba(32,33,35, .78"] {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: rgba(32,33,35,.92"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="color: rgba(32,33,35, .92"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="font-size:22px; font-weight:900"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="font-size:20px; font-weight:900"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="font-size:22px;font-weight:900"],
html:is(html.app-theme-dark, html.dark) #account-overlay [style*="font-size:20px;font-weight:900"] {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-card .acc-muted,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-card [class*="acc-muted"] {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-card {
  color: var(--acc-text) !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-card .acc-muted,
html:is(html.app-theme-dark, html.dark) #account-overlay .acc-muted {
  color: #d4d4d4 !important;
}

html:is(html.app-theme-dark, html.dark) #account-overlay .acc-stat-value {
  color: var(--acc-text) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* Guest web dark mode: keep the sidebar aligned with the dark shell. */
html:is(html.app-theme-dark, html.dark).guest-mode #sidebar {
  background: var(--night-sidebar) !important;
  border-right-color: var(--night-border) !important;
}

html:is(html.app-theme-dark, html.dark).guest-mode #guest-sidebar-auth {
  background:
    linear-gradient(180deg, rgba(23, 23, 23, 0.98), rgba(31, 31, 31, 0.96)) !important;
  color: var(--night-text) !important;
}

html:is(html.app-theme-dark, html.dark).guest-mode #guest-sidebar-login-btn {
  border-color: var(--night-border-strong) !important;
  background:
    linear-gradient(135deg, rgba(48, 48, 48, 0.98), rgba(38, 38, 38, 0.96)) !important;
  color: var(--night-text) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.34),
    0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
}

html:is(html.app-theme-dark, html.dark).guest-mode #guest-sidebar-login-btn:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background:
    linear-gradient(135deg, rgba(58, 58, 58, 0.98), rgba(47, 47, 47, 0.96)) !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.1) inset !important;
}

html:is(html.app-theme-dark, html.dark).guest-mode #guest-sidebar-login-btn svg {
  background: rgba(255, 255, 255, 0.1) !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-modal__card::before,
html:is(html.app-theme-dark, html.dark) .guest-auth-modal__body::before {
  content: none !important;
  display: none !important;
}

html:is(html.app-theme-dark, html.dark) .guest-auth-modal__body {
  padding: 6px 24px 34px !important;
}

@media (max-width: 520px) {
  html:is(html.app-theme-dark, html.dark) .guest-auth-modal__body {
    padding: 4px 18px max(30px, calc(env(safe-area-inset-bottom) + 22px)) !important;
  }
}

/* Welcome screen: text-only state without card backing. */
#welcome-screen,
html:is(html.app-theme-dark, html.dark) #welcome-screen {
  width: min(var(--input-max-width, 720px), calc(100vw - 20px)) !important;
  max-width: var(--input-max-width, 720px) !important;
  background: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  outline: 0 !important;
  overflow: visible !important;
}

#welcome-screen::before,
#welcome-screen::after,
html:is(html.app-theme-dark, html.dark) #welcome-screen::before,
html:is(html.app-theme-dark, html.dark) #welcome-screen::after {
  content: none !important;
  display: none !important;
}

#welcome-description,
#welcome-screen p[data-i18n^="welcome.description"],
html:is(html.app-theme-dark, html.dark) #welcome-description,
html:is(html.app-theme-dark, html.dark) #welcome-screen p[data-i18n^="welcome.description"] {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: pretty;
}

@media not all {
/* Disabled: dark theme glass controls experiment. */
/* Dark theme iOS-style glass controls. */
html:is(html.app-theme-dark, html.dark) {
  --night-glass-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.055)),
    radial-gradient(110% 160% at 20% 0%, rgba(255, 255, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.075);
  --night-glass-bg-hover:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08)),
    radial-gradient(110% 160% at 20% 0%, rgba(255, 255, 255, 0.24), transparent 46%),
    rgba(255, 255, 255, 0.105);
  --night-glass-primary-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.10)),
    radial-gradient(120% 170% at 18% 0%, rgba(147, 197, 253, 0.34), transparent 48%),
    rgba(255, 255, 255, 0.14);
  --night-glass-border: rgba(255, 255, 255, 0.24);
  --night-glass-border-hover: rgba(255, 255, 255, 0.36);
  --night-glass-shadow:
    0 12px 30px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  --night-glass-shadow-hover:
    0 16px 38px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}

html:is(html.app-theme-dark, html.dark) :is(
  #send-button:not(:disabled),
  .send-circle-btn:not(:disabled),
  .voice-record-button:not(:disabled),
  #scroll-to-bottom-btn,
  #chat-modes-bar .mode-btn,
  #chat-modes-bar .mode-main,
  #chat-modes-bar .mode-caret,
  .theme-mode-option,
  .btn,
  .back-button,
  #sidebar button,
  #documents-container .docs-back-btn,
  #documents-container .docs-action-btn,
  #documents-container .docs-ctx-btn,
  #documents-container .docs-ai-send-btn,
  #documents-container .docs-mcp-chat-toolbar button,
  #documents-container .docs-mcp-view-tabs button,
  #documents-container .docs-mcp-side-actions button,
  #documents-container .docs-mcp-quick-actions button,
  #documents-container .docs-cloud-actions button,
  #documents-container .docs-cloud-server-row button,
  #documents-container .docs-mcp-composer button,
  #account-overlay .acc-btn,
  #account-overlay .acc-action-btn,
  #account-overlay .acc-copy-btn
):not(:disabled):not(.send-btn-disabled):not(.is-danger):not(.docs-action-btn--danger):not(.acc-btn--danger) {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background: var(--night-glass-bg) !important;
  border-color: var(--night-glass-border) !important;
  color: var(--night-text) !important;
  box-shadow: var(--night-glass-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 160ms ease,
    color 180ms ease !important;
}

html:is(html.app-theme-dark, html.dark) :is(
  #send-button:not(:disabled),
  .send-circle-btn:not(:disabled),
  .btn-primary,
  .bg-btn-primary,
  #topup-button,
  #prompt-send-new-btn,
  #docs-preview-ai,
  #docs-action-apply,
  #documents-container .docs-action-btn--primary,
  #documents-container .docs-mcp-send-btn,
  #documents-container .docs-ai-send-btn,
  #account-overlay .acc-btn--primary
):not(:disabled):not(.send-btn-disabled) {
  background: var(--night-glass-primary-bg) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
}

html:is(html.app-theme-dark, html.dark) :is(
  #chat-modes-bar .mode-btn.active,
  #chat-modes-bar .mode-btn.mode-active,
  .theme-mode-option.active,
  #documents-container .docs-mcp-view-tabs button.is-active,
  #documents-container .docs-cloud-subtabs button.is-active,
  #account-overlay .acc-tab.is-active
) {
  background: var(--night-glass-primary-bg) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
  color: #ffffff !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10) !important;
}

html:is(html.app-theme-dark, html.dark) :is(
  #send-button:not(:disabled),
  .send-circle-btn:not(:disabled),
  .voice-record-button:not(:disabled),
  #scroll-to-bottom-btn,
  #chat-modes-bar .mode-btn,
  #chat-modes-bar .mode-main,
  #chat-modes-bar .mode-caret,
  .theme-mode-option,
  .btn,
  .back-button,
  #sidebar button,
  #documents-container .docs-back-btn,
  #documents-container .docs-action-btn,
  #documents-container .docs-ctx-btn,
  #documents-container .docs-ai-send-btn,
  #documents-container .docs-mcp-chat-toolbar button,
  #documents-container .docs-mcp-view-tabs button,
  #documents-container .docs-mcp-side-actions button,
  #documents-container .docs-mcp-quick-actions button,
  #documents-container .docs-cloud-actions button,
  #documents-container .docs-cloud-server-row button,
  #documents-container .docs-mcp-composer button,
  #account-overlay .acc-btn,
  #account-overlay .acc-action-btn,
  #account-overlay .acc-copy-btn
):not(:disabled):not(.send-btn-disabled):not(.is-danger):not(.docs-action-btn--danger):not(.acc-btn--danger):hover {
  background: var(--night-glass-bg-hover) !important;
  border-color: var(--night-glass-border-hover) !important;
  box-shadow: var(--night-glass-shadow-hover) !important;
  transform: translateY(-1px);
}

html:is(html.app-theme-dark, html.dark) :is(
  #send-button:not(:disabled),
  .send-circle-btn:not(:disabled),
  .voice-record-button:not(:disabled),
  #scroll-to-bottom-btn,
  #chat-modes-bar .mode-btn,
  #chat-modes-bar .mode-main,
  #chat-modes-bar .mode-caret,
  .theme-mode-option,
  .btn,
  .back-button,
  #sidebar button,
  #documents-container .docs-back-btn,
  #documents-container .docs-action-btn,
  #documents-container .docs-ctx-btn,
  #documents-container .docs-ai-send-btn,
  #documents-container .docs-mcp-chat-toolbar button,
  #documents-container .docs-mcp-view-tabs button,
  #documents-container .docs-mcp-side-actions button,
  #documents-container .docs-mcp-quick-actions button,
  #documents-container .docs-cloud-actions button,
  #documents-container .docs-cloud-server-row button,
  #documents-container .docs-mcp-composer button,
  #account-overlay .acc-btn,
  #account-overlay .acc-action-btn,
  #account-overlay .acc-copy-btn
):not(:disabled):not(.send-btn-disabled):not(.is-danger):not(.docs-action-btn--danger):not(.acc-btn--danger)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.38) 44%, rgba(255, 255, 255, 0.14) 52%, transparent 66%),
    radial-gradient(100% 70% at 18% 0%, rgba(255, 255, 255, 0.24), transparent 54%);
  opacity: 0.52;
  transform: translateX(-120%) skewX(-16deg);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
  mix-blend-mode: screen;
}

html:is(html.app-theme-dark, html.dark) :is(
  #send-button:not(:disabled),
  .send-circle-btn:not(:disabled),
  .voice-record-button:not(:disabled),
  #scroll-to-bottom-btn,
  #chat-modes-bar .mode-btn,
  #chat-modes-bar .mode-main,
  #chat-modes-bar .mode-caret,
  .theme-mode-option,
  .btn,
  .back-button,
  #sidebar button,
  #documents-container .docs-back-btn,
  #documents-container .docs-action-btn,
  #documents-container .docs-ctx-btn,
  #documents-container .docs-ai-send-btn,
  #documents-container .docs-mcp-chat-toolbar button,
  #documents-container .docs-mcp-view-tabs button,
  #documents-container .docs-mcp-side-actions button,
  #documents-container .docs-mcp-quick-actions button,
  #documents-container .docs-cloud-actions button,
  #documents-container .docs-cloud-server-row button,
  #documents-container .docs-mcp-composer button,
  #account-overlay .acc-btn,
  #account-overlay .acc-action-btn,
  #account-overlay .acc-copy-btn
):not(:disabled):not(.send-btn-disabled):not(.is-danger):not(.docs-action-btn--danger):not(.acc-btn--danger):hover::after,
html:is(html.app-theme-dark, html.dark) :is(
  #send-button:not(:disabled),
  .send-circle-btn:not(:disabled),
  .voice-record-button:not(:disabled),
  #scroll-to-bottom-btn,
  #chat-modes-bar .mode-btn,
  #chat-modes-bar .mode-main,
  #chat-modes-bar .mode-caret,
  .theme-mode-option,
  .btn,
  .back-button,
  #sidebar button,
  #documents-container .docs-back-btn,
  #documents-container .docs-action-btn,
  #documents-container .docs-ctx-btn,
  #documents-container .docs-ai-send-btn,
  #documents-container .docs-mcp-chat-toolbar button,
  #documents-container .docs-mcp-view-tabs button,
  #documents-container .docs-mcp-side-actions button,
  #documents-container .docs-mcp-quick-actions button,
  #documents-container .docs-cloud-actions button,
  #documents-container .docs-cloud-server-row button,
  #documents-container .docs-mcp-composer button,
  #account-overlay .acc-btn,
  #account-overlay .acc-action-btn,
  #account-overlay .acc-copy-btn
):not(:disabled):not(.send-btn-disabled):not(.is-danger):not(.docs-action-btn--danger):not(.acc-btn--danger):focus-visible::after {
  opacity: 0.72;
  transform: translateX(120%) skewX(-16deg);
}

html:is(html.app-theme-dark, html.dark) :is(
  #send-button:not(:disabled),
  .send-circle-btn:not(:disabled),
  .voice-record-button:not(:disabled),
  #scroll-to-bottom-btn,
  #chat-modes-bar .mode-btn,
  #chat-modes-bar .mode-main,
  #chat-modes-bar .mode-caret,
  .theme-mode-option,
  .btn,
  .back-button,
  #sidebar button,
  #documents-container .docs-back-btn,
  #documents-container .docs-action-btn,
  #documents-container .docs-ctx-btn,
  #documents-container .docs-ai-send-btn,
  #documents-container .docs-mcp-chat-toolbar button,
  #documents-container .docs-mcp-view-tabs button,
  #documents-container .docs-mcp-side-actions button,
  #documents-container .docs-mcp-quick-actions button,
  #documents-container .docs-cloud-actions button,
  #documents-container .docs-cloud-server-row button,
  #documents-container .docs-mcp-composer button,
  #account-overlay .acc-btn,
  #account-overlay .acc-action-btn,
  #account-overlay .acc-copy-btn
):not(:disabled):not(.send-btn-disabled):not(.is-danger):not(.docs-action-btn--danger):not(.acc-btn--danger):active {
  transform: translateY(0);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

@media (prefers-reduced-motion: reduce) {
  html:is(html.app-theme-dark, html.dark) :is(
    #send-button,
    .send-circle-btn,
    .voice-record-button,
    #scroll-to-bottom-btn,
    #chat-modes-bar .mode-btn,
    #chat-modes-bar .mode-main,
    #chat-modes-bar .mode-caret,
    .theme-mode-option,
    .btn,
    .back-button,
    #sidebar button,
    #documents-container button,
    #account-overlay .acc-btn,
    #account-overlay .acc-action-btn,
    #account-overlay .acc-copy-btn
  )::after {
    transition: none !important;
    transform: none !important;
    opacity: 0.2 !important;
  }
}

/* Dark theme glass refinement: one-piece mode switcher and lighter settings panels. */
html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-switcher,
html:is(html.app-theme-dark, html.dark) .mode-switcher {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.055)),
    radial-gradient(120% 170% at 18% 0%, rgba(147, 197, 253, 0.22), transparent 48%),
    rgba(255, 255, 255, 0.075) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
}

html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-switcher::after,
html:is(html.app-theme-dark, html.dark) .mode-switcher::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0%, transparent 32%, rgba(255, 255, 255, 0.32) 46%, rgba(255, 255, 255, 0.12) 54%, transparent 68%),
    radial-gradient(90% 70% at 18% 0%, rgba(255, 255, 255, 0.22), transparent 58%);
  opacity: 0.5;
  mix-blend-mode: screen;
}

html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-main,
html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-caret,
html:is(html.app-theme-dark, html.dark) .mode-switcher .mode-main,
html:is(html.app-theme-dark, html.dark) .mode-switcher .mode-caret {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-main::after,
html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-caret::after,
html:is(html.app-theme-dark, html.dark) .mode-switcher .mode-main::after,
html:is(html.app-theme-dark, html.dark) .mode-switcher .mode-caret::after {
  content: none !important;
  display: none !important;
}

html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-main:hover,
html:is(html.app-theme-dark, html.dark) #chat-modes-bar .mode-caret:hover,
html:is(html.app-theme-dark, html.dark) .mode-switcher .mode-main:hover,
html:is(html.app-theme-dark, html.dark) .mode-switcher .mode-caret:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) #audio-settings-panel,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .settings-panel-wrapper,
html:is(html.app-theme-dark, html.dark) #audio-settings-panel .settings-group-container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html:is(html.app-theme-dark, html.dark) :is(
  #image-settings-panel .select-pill,
  #video-settings-panel .select-pill,
  #search-settings-panel .select-pill,
  #audio-settings-panel .setting-pill,
  .input-area-container .select-pill,
  .input-area-container .setting-pill
) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.055)),
    radial-gradient(100% 140% at 12% 0%, rgba(255, 255, 255, 0.16), transparent 54%),
    rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: var(--night-text) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(1.28) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.28) !important;
}

html:is(html.app-theme-dark, html.dark) :is(
  #image-settings-panel .select-pill:hover,
  #video-settings-panel .select-pill:hover,
  #search-settings-panel .select-pill:hover,
  #audio-settings-panel .setting-pill:hover,
  .input-area-container .select-pill:hover,
  .input-area-container .setting-pill:hover
) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.08)),
    radial-gradient(100% 140% at 12% 0%, rgba(255, 255, 255, 0.22), transparent 56%),
    rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.34) !important;
}

html:is(html.app-theme-dark, html.dark) :is(
  #image-settings-panel select,
  #video-settings-panel select,
  #search-settings-panel select,
  #audio-settings-panel select,
  #audio-settings-panel .setting-input-base
) {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--night-text) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html:is(html.app-theme-dark, html.dark) :is(
  #image-settings-panel,
  #video-settings-panel,
  #search-settings-panel
) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
}