Messenger/web/src/index.css

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --bm-font-size: 16px;
  --bm-bg-primary: #0e1621;
  --bm-bg-secondary: #111b27;
  --bm-bg-tertiary: #0f1a26;
  --bm-text-color: #e6edf5;
  --bm-panel-bg: rgba(23, 33, 43, 0.96);
  --bm-panel-border: rgba(120, 146, 171, 0.22);
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: var(--bm-font-size, 16px);
  background:
    radial-gradient(circle at 16% 12%, rgba(45, 85, 132, 0.24), transparent 28%),
    radial-gradient(circle at 88% 16%, rgba(36, 112, 122, 0.14), transparent 30%),
    linear-gradient(180deg, var(--bm-bg-primary) 0%, var(--bm-bg-secondary) 55%, var(--bm-bg-tertiary) 100%);
  color: var(--bm-text-color);
}

* {
  box-sizing: border-box;
}

.tg-panel {
  background: var(--bm-panel-bg);
  border: 1px solid var(--bm-panel-border);
  backdrop-filter: blur(8px);
}

.tg-chat-wallpaper {
  background:
    radial-gradient(circle at 14% 18%, rgba(51, 144, 236, 0.1), transparent 32%),
    radial-gradient(circle at 86% 74%, rgba(66, 124, 173, 0.09), transparent 35%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.tg-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.tg-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(113, 145, 177, 0.45);
  border-radius: 999px;
}

html[data-theme="dark"] .bg-slate-900\/95,
html[data-theme="dark"] .bg-slate-900\/90,
html[data-theme="dark"] .bg-slate-900\/80,
html[data-theme="dark"] .bg-slate-900\/70,
html[data-theme="dark"] .bg-slate-900\/65,
html[data-theme="dark"] .bg-slate-900\/60,
html[data-theme="dark"] .bg-slate-900\/50,
html[data-theme="dark"] .bg-slate-900 {
  background-color: rgba(23, 33, 43, 0.95) !important;
}

html[data-theme="dark"] .bg-slate-800\/80,
html[data-theme="dark"] .bg-slate-800\/70,
html[data-theme="dark"] .bg-slate-800\/60,
html[data-theme="dark"] .bg-slate-800\/50,
html[data-theme="dark"] .bg-slate-800 {
  background-color: rgba(28, 40, 52, 0.95) !important;
}

html[data-theme="dark"] .bg-slate-700\/80,
html[data-theme="dark"] .bg-slate-700\/70,
html[data-theme="dark"] .bg-slate-700\/60,
html[data-theme="dark"] .bg-slate-700 {
  background-color: rgba(44, 58, 73, 0.95) !important;
}

html[data-theme="dark"] .border-slate-700\/80,
html[data-theme="dark"] .border-slate-700\/70,
html[data-theme="dark"] .border-slate-700\/60,
html[data-theme="dark"] .border-slate-700\/50,
html[data-theme="dark"] .border-slate-700,
html[data-theme="dark"] .border-slate-800\/60,
html[data-theme="dark"] .border-slate-800,
html[data-theme="dark"] .border-slate-900 {
  border-color: rgba(88, 114, 138, 0.42) !important;
}

html[data-theme="dark"] .text-slate-100 {
  color: #f3f7fb !important;
}

html[data-theme="dark"] .text-slate-200 {
  color: #d9e4ef !important;
}

html[data-theme="dark"] .text-slate-300 {
  color: #b9cbdd !important;
}

html[data-theme="dark"] .text-slate-400 {
  color: #92a8bd !important;
}

html[data-theme="dark"] .hover\:bg-slate-800\/70:hover,
html[data-theme="dark"] .hover\:bg-slate-800\/65:hover,
html[data-theme="dark"] .hover\:bg-slate-800\/60:hover,
html[data-theme="dark"] .hover\:bg-slate-800:hover,
html[data-theme="dark"] .hover\:bg-slate-700\/80:hover,
html[data-theme="dark"] .hover\:bg-slate-700:hover {
  background-color: rgba(46, 62, 79, 0.96) !important;
}

html[data-theme="dark"] .bg-sky-500,
html[data-theme="dark"] .bg-sky-500\/30 {
  background-color: rgba(51, 144, 236, 0.92) !important;
}

html[data-theme="dark"] .hover\:bg-sky-400:hover {
  background-color: rgba(88, 167, 244, 0.95) !important;
}

html[data-theme="dark"] .text-slate-950 {
  color: #04101d !important;
}

html[data-theme="dark"] .from-sky-500\/95 {
  --tw-gradient-from: rgba(51, 144, 236, 0.94) var(--tw-gradient-from-position) !important;
}

html[data-theme="dark"] .to-sky-600\/90 {
  --tw-gradient-to: rgba(40, 124, 209, 0.94) var(--tw-gradient-to-position) !important;
}

html[data-theme="light"] {
  --bm-bg-primary: #dfe5ec;
  --bm-bg-secondary: #e8edf4;
  --bm-bg-tertiary: #eff3f8;
  --bm-text-color: #1b2733;
  --bm-panel-bg: rgba(255, 255, 255, 0.98);
  --bm-panel-border: rgba(82, 105, 128, 0.24);
}

html[data-theme="light"] body,
html[data-theme="light"] body.text-text {
  color: #1f3347 !important;
}

html[data-theme="light"] body.bg-bg {
  background-color: #e7edf5 !important;
}

html[data-theme="light"] .text-text {
  color: #1f3347 !important;
}

html[data-theme="light"] .bg-bg {
  background-color: #e7edf5 !important;
}

html[data-theme="light"] .bg-panel {
  background-color: #ffffff !important;
  color: #1f3347 !important;
}

html[data-theme="light"] .tg-chat-wallpaper {
  background:
    radial-gradient(circle at 14% 18%, rgba(51, 144, 236, 0.08), transparent 32%),
    radial-gradient(circle at 86% 74%, rgba(93, 129, 163, 0.07), transparent 35%),
    linear-gradient(160deg, rgba(125, 144, 164, 0.09) 0%, rgba(125, 144, 164, 0.02) 100%);
}

html[data-theme="light"] .bg-slate-900\/95,
html[data-theme="light"] .bg-slate-900\/90,
html[data-theme="light"] .bg-slate-900\/80,
html[data-theme="light"] .bg-slate-900\/70,
html[data-theme="light"] .bg-slate-900\/65,
html[data-theme="light"] .bg-slate-900\/60,
html[data-theme="light"] .bg-slate-900\/50,
html[data-theme="light"] .bg-slate-900\/40,
html[data-theme="light"] .bg-slate-900\/30,
html[data-theme="light"] .bg-slate-900\/20,
html[data-theme="light"] .bg-slate-900\/10,
html[data-theme="light"] .bg-slate-900 {
  background-color: rgba(255, 255, 255, 0.98) !important;
}

html[data-theme="light"] .bg-slate-800\/90,
html[data-theme="light"] .bg-slate-800\/85,
html[data-theme="light"] .bg-slate-800\/80,
html[data-theme="light"] .bg-slate-800\/70,
html[data-theme="light"] .bg-slate-800\/60,
html[data-theme="light"] .bg-slate-800\/50,
html[data-theme="light"] .bg-slate-800 {
  background-color: rgba(242, 246, 251, 0.97) !important;
}

html[data-theme="light"] .bg-slate-700\/90,
html[data-theme="light"] .bg-slate-700\/85,
html[data-theme="light"] .bg-slate-700\/80,
html[data-theme="light"] .bg-slate-700\/70,
html[data-theme="light"] .bg-slate-700\/60,
html[data-theme="light"] .bg-slate-700 {
  background-color: rgba(225, 233, 242, 0.97) !important;
}

html[data-theme="light"] .border-slate-700\/40,
html[data-theme="light"] .border-slate-700\/80,
html[data-theme="light"] .border-slate-700\/70,
html[data-theme="light"] .border-slate-700\/60,
html[data-theme="light"] .border-slate-700\/50,
html[data-theme="light"] .border-slate-700 {
  border-color: rgba(96, 120, 145, 0.3) !important;
}

html[data-theme="light"] .text-slate-100 {
  color: #1b2733 !important;
}

html[data-theme="light"] .text-slate-200 {
  color: #223446 !important;
}

html[data-theme="light"] .text-slate-300 {
  color: #385066 !important;
}

html[data-theme="light"] .text-slate-300\/80 {
  color: #476078 !important;
}

html[data-theme="light"] .text-slate-400 {
  color: #5e748b !important;
}

html[data-theme="light"] .text-slate-900\/85 {
  color: #21364b !important;
}

html[data-theme="light"] .text-slate-900\/75 {
  color: #2f455a !important;
}

html[data-theme="light"] .text-slate-500 {
  color: #7f95ab !important;
}

html[data-theme="light"] .hover\:bg-slate-800\/70:hover,
html[data-theme="light"] .hover\:bg-slate-800\/65:hover,
html[data-theme="light"] .hover\:bg-slate-800\/60:hover,
html[data-theme="light"] .hover\:bg-slate-800:hover {
  background-color: rgba(230, 237, 245, 0.98) !important;
}

html[data-theme="light"] .hover\:bg-slate-700\/80:hover,
html[data-theme="light"] .hover\:bg-slate-700:hover {
  background-color: rgba(214, 224, 235, 0.98) !important;
}

html[data-theme="light"] .tg-panel {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .bg-slate-950\/55,
html[data-theme="light"] .bg-slate-950\/60,
html[data-theme="light"] .bg-slate-950\/90 {
  background-color: rgba(15, 23, 42, 0.28) !important;
}

html[data-theme="light"] .bg-slate-950\/30 {
  background-color: rgba(236, 242, 248, 0.92) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  color: #0f172a;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #64748b;
}

html[data-theme="light"] .text-slate-950,
html[data-theme="light"] .text-black {
  color: #0f172a !important;
}

html[data-theme="light"] .bg-sky-500\/30 {
  background-color: rgba(51, 144, 236, 0.22) !important;
}

html[data-theme="light"] .bg-sky-500 {
  background-color: #3390ec !important;
}

html[data-theme="light"] .hover\:bg-sky-400:hover {
  background-color: #59a7f4 !important;
}

html[data-theme="light"] .text-sky-100 {
  color: #1f79d8 !important;
}

html[data-theme="light"] .text-sky-300 {
  color: #2669ad !important;
}

html[data-theme="light"] .text-red-400,
html[data-theme="light"] .text-red-300 {
  color: #b91c1c !important;
}

html[data-theme="light"] .text-amber-300 {
  color: #a16207 !important;
}

html[data-theme="light"] .text-emerald-400 {
  color: #047857 !important;
}

html[data-theme="light"] .border-slate-800\/60,
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-900 {
  border-color: rgba(96, 120, 145, 0.24) !important;
}

html[data-theme="light"] .border-slate-900\/60,
html[data-theme="light"] .border-slate-900\/30 {
  border-color: rgba(96, 120, 145, 0.26) !important;
}

html[data-theme="light"] .border-slate-600\/80,
html[data-theme="light"] .border-slate-600\/60 {
  border-color: rgba(95, 120, 146, 0.32) !important;
}

html[data-theme="light"] .bg-slate-900\/50 {
  background-color: rgba(247, 250, 253, 0.98) !important;
}

html[data-theme="light"] .bg-slate-800\/50 {
  background-color: rgba(238, 244, 250, 0.94) !important;
}

html[data-theme="light"] .text-slate-600 {
  color: #496078 !important;
}

html[data-theme="light"] .text-slate-700 {
  color: #3e5267 !important;
}

html[data-theme="light"] .text-slate-800 {
  color: #2c3e52 !important;
}

html[data-theme="light"] .text-slate-900 {
  color: #1d2f42 !important;
}

html[data-theme="light"] .bg-white {
  background-color: #ffffff !important;
}

html[data-theme="light"] .bg-slate-100 {
  background-color: #eef3f8 !important;
}

html[data-theme="light"] .bg-slate-200 {
  background-color: #dde7f1 !important;
}

html[data-theme="light"] .border-slate-600,
html[data-theme="light"] .border-slate-500 {
  border-color: rgba(100, 122, 145, 0.35) !important;
}

html[data-theme="light"] .ring-slate-700,
html[data-theme="light"] .ring-slate-600 {
  --tw-ring-color: rgba(74, 126, 184, 0.35) !important;
}

html[data-theme="light"] .from-sky-500\/95 {
  --tw-gradient-from: rgba(51, 144, 236, 0.95) var(--tw-gradient-from-position) !important;
}

html[data-theme="light"] .to-sky-600\/90 {
  --tw-gradient-to: rgba(47, 132, 221, 0.92) var(--tw-gradient-to-position) !important;
}

html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400 {
  text-shadow: none;
}