:root {
  /* General */
  --font-main: system-ui;
  --border-radius: 12px;
  --transition: 0.3s ease;
  --layer1: 100;
  --layer2: 200;
  --layer3: 300;
  --layer4: 400;
  --layer5: 500;
  --layer6: 600;
  /* Layout: Blue Theme */
  --background-img: url("./img/BgLight.png");

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #a19e9e;
  --text-muted: #00000099;
  --text-hcw: #0A0A0A;
  /* Borders & Effects */
  --border-color: #c1d0e4;
  --box-shadow: 0 2px 6px rgba(0, 0, 0, 0.664);

  /* Action Colors */
  --color-primary: #3b82f6;
  --color-lightprime: #5457f152;
  /* Blue 500 */
  --color-info: #60a5fa;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-success: #22c55e;

  /* previous style colors */
  --persistent-always-black-RGB: 10, 10, 10;
  --navbar-bg: #e6e7e9;
  --navbar-buttons: #3b4a54;
  --aliceblue: aliceblue;
  --white: white;
  --border: #e9edef;
  --placeholder: black;
  --chatheader: #f9f9f9;
  --rich-color: rgba(255, 255, 255, 0.95);
  --system-message-text: #54656f;
  --message-sent-bg: #6366f1;
  --message-sent-file-bg: #4144f0;
  --message-sent-file-bg1: #4144f044;
  --message-recieved-bg: #ffffff;
  --message-recieved-bg-deeper: #f5f6f6;
  --bubble-parth: #a19e9e;
  --logout-btn: rgb(255, 85, 0);
  --primary-strong: #111b21;
  --shadow-rgb: 11, 20, 26;
  --border-list: #e9edef;
  --chat-spacing: 15px;
  --badge-bg: #25d366;
  --shadow-rgb: 11, 20, 26;
  --text-primary-sent: #f1f5f9;
  /* font size */
  --font-sm: 1rem;
  --font-smm: 1.3rem;
  --font-m: 1.5rem;
  --font-sl: 2rem;
  color: black;
  --navbar-hover: #e3e9f0;

}

/* 🌒 Dark Theme Overrides */
body.dark-theme {
  transition: background-color 0.3s ease, color 0.3s ease;
  --background-img: url("./img/BgLight.png");
  --bg-body: #1f2a35;
  --bg-header: #263b4a;
  --bg-sidebar: #2a3c4f;
  --bg-footer: #263b4a;
  --bg-card: #314656;
  --bg-chat-incoming: #375d4b;
  --bg-chat-outgoing: #427b62;
  --navbar-hover: #252525;

  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;

  --border-color: #3f4f60;
  --box-shadow: 10px 2px 6px rgba(0, 0, 0, 0);

  --color-primary: #10b981;
  --color-info: #60a5fa;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-success: #34d399;
  --navbar-bg: #1f1f1f;
  --colorgrey: #9e9e9e;
  /* Dark background for the navbar */
  --navbar-buttons: #d1d3d8;
  /* Light color for buttons */
  --aliceblue: #121212;
  /* Dark background for the page */
  --white: #181818;
  /* Light text for dark background */
  --border: #2c2f36;
  /* Dark borders */
  --placeholder: #b0b0b0;
  /* Light gray placeholder text */
  --chatheader: #181818;
  /* Dark header background */
  --rich-color: rgba(0, 0, 0, 0.953);
  /* Slightly transparent dark background for rich content */
  --system-message-text: #b0b0b0;
  /* Light gray text for system messages */
  --message-sent-bg: #5a57f1;
  /* Darker blue for sent messages */
  --message-sent-file-bg: #4c4ef0;
  /* Darker background for sent files */
  --message-sent-file-bg1: #4c4ef044;
  /* Semi-transparent background for sent files */
  --message-recieved-bg: #2c2f36;
  /* Dark background for received messages */
  --bubble-parth: #767676;
  /* Medium gray for message bubbles */
  --logout-btn: rgb(255, 85, 0);
  /* Keep the logout button orange */
  --primary-strong: #e0e0e0;
  /* Light color for primary text */
  --shadow-rgb: 11, 20, 26;
  /* Darker shadow */
  --bg-light: #181818;
  /* Dark background for the page */
  --primary: #1877f2;
  /* Primary color stays the same */
  --secondary: #b0b3b8;
  /* Light gray for secondary text */
  --text-dark: #e0e0e0;
  /* Light color for text */
  --text-light: #d1d1d1;
  /* Light gray for secondary text */
  --badge-bg: #25d366;
  /* Keep the badge color for consistency */
  --timestamp: #6366f1;
  /* Keep the timestamp color */
  --border-color: #2c2f36;
  --font-sm: 1rem;
  --font-smm: 1.3rem;
  --font-m: 1.5rem;
  --font-sl: 2rem;
  --layer1: 100;
  --layer2: 200;
  --layer3: 300;
  --layer4: 400;
  --layer5: 500;
  color: white;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-user-select: none;

  user-select: none;

}

body {
  width: 100%;
  height: 100%;
  font-family: var(--font-main);
  background: var(--background-img);
  background-repeat: no-repeat;
  position: fixed;
  left: 0;
  top: 0;
  background-size: cover;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body .pc {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.119);
  backdrop-filter: blur(70px);
  display: flex;
  align-items: center;
  justify-content: center;
}

html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body {
  font-family: sans-serif;
}

.modal-backdrop.fade.show {
  display: none;
}

#app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100%;
  height: 100%;
  background-color: var(--bg-card);
  backdrop-filter: blur(45px);
  border-radius: 6px;
  box-shadow: var(--box-shadow);
  position: relative;
}

.formation {
  animation: formation 0.5s ease-in-out;
}

button {
  cursor: pointer;
}

.fromlowWidth {
  animation: fromlowWidth 0.4s ease-in;
}

.fromhighWidth {
  animation: fromhighWidth 0.4s ease-in;
}

@keyframes fromlowWidth {
  0% {
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@keyframes fromhighWidth {
  0% {
    width: 100%;
    height: 100%;
  }

  100% {
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

}

.to-left {
  animation: leftswipe 0.6s ease-in-out;
}

.to-right {
  animation: rightswipe 0.6s ease-in-out;
}

@keyframes leftswipe {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes rightswipe {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(100%);
  }
}

.fullscreen-overlay img {
  width: auto;
  object-fit: cover;
}

.loadermymain {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 12000000000000000000000000000000000000000000000000000000000000000;
  background-color: var(--navbar-bg);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;

}

.loadermymain .invert1 {
  width: 100px;
  height: 100px;
  display: flex;
}

.loadermain {
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loade0000r {
  width: 3em;
  transform-origin: center;
  animation: rotate4 2s linear infinite;
  height: 3rem;
}

circle {
  fill: none;
  stroke: hsl(214, 100%, 32%);
  stroke-width: 4;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: dash4 1.5s ease-in-out infinite;
}

@keyframes rotate4 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash4 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dashoffset: -125px;
  }
}

.loadermymain .from {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--primary-strong);
  display: flex;
  flex-direction: column;
}

.loadermymain .from .Blues {
  color: var(--primary);
  text-align: center;
  margin-left: 0.2rem;
}

.officeTeams {
  display: flex;
  flex-direction: row;
}

.officeTeams img {
  display: flex;
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
  border-radius: 20px;
}

#messageLoader1 {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  padding-inline: 1rem;
}

#messageLoader1 .messagesent {
  width: auto;
  max-width: 90%;
  min-width: 150px;
  display: flex;
  flex-direction: column;
}

#messageLoader1 .messagesent strong,
#messageLoader1 .messagesent .deletemessage {
  display: none;
}

#messageLoader1 .floatright {
  margin-inline-end: 0.5rem;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-content {
  background: #fff;
  padding: 30px;
  max-width: 400px;
  width: 90%;
  border-radius: 15px;
  text-align: center;
  font-family: sans-serif;
  box-shadow: 0 0 15px #00000050;
  animation: fadeIn 0.3s ease;
}

.popup-content h2 {
  margin: 0;
  color: #0078d4;
}

.popup-content button {
  margin-top: 20px;
  padding: 10px 20px;
  background: #0078d4;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.hidden {
  display: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.popup-content ul {
  padding-left: 20px;
}

.popup-content li {
  margin-bottom: 6px;
}

/* useselect prevention */
img {
  -webkit-user-drag: none;
  /* Safari */
  user-select: none;
  -webkit-user-select: none;
}