:root {
    --min-height-popup: 300px;
    --title-height: 32px;
    --transition-form: opacity .5s ease;
    --bg-color: #dfdfdf;
    --text-color: #222;
    --muted-text: #555;
    --card-bg: #e8e8e8;
    --bg-container: rgb(183, 183, 183);
    --border-color: #ccc;
    --input-border-color: var(--border-color);
    --input-bg: #fff;
    --input-bg-read-only: #f4f4f4;
    --input-color-read-only: #919191;
    --button-bg: #34f695;
    --button-hover: #2cc97d;
    --button-hover-color: white;
    --menu-item-hover-bg-color: red;
    --heading-color: #111;
    --bg-titlebar: #e6e6e6;
    --color-titlebar: #3b3b3b;
    --drag-color: #636363;
    --popup-overlay-bg: rgba(255, 255, 255, 0.85);
    --button: black;
    --model-shadow-color: rgba(0, 0, 0, 0.2);
    

    /* messanger */
    --color: rgb(17, 17, 17);
    --h-color: rgb(89, 0, 255);
    --color-placeholder: rgb(150, 150, 150);
    --input-color: rgb(28, 28, 28);
    --message-title-color: rgb(80, 80, 80);
    --message-sent-color: var(--message-title-color);
    --messages-them-color: white;
    --messages-me-color: black;
    --messages-me-bg: rgb(212, 212, 212);
    --messages-them-bg: rgb(49, 161, 135);
    --messages-bg: rgb(244, 244, 244);
    --placeholder-color: rgb(90, 90, 90);
    --input-send-bg-color: rgba(0, 119, 255, 0.342);
    --input-gif-bg-color: rgba(212, 0, 255, 0.315);
    --input-image-bg-color: rgba(0, 255, 17, 0.291);
    --title-bg-color: rgb(27, 145, 118);
    --title-color: rgb(235, 235, 235);
    --messages-padding-left-right: 8px;
    --input-background-color: rgb(255, 255, 255);
    --input-border-radius: 1rem;
    --input-padding: .4rem;
    --gif-frame-bg-color: rgb(203, 203, 203);
    --gif-search-bg-color: rgb(255, 255, 255);
    --gif-search-color: var(--input-color);
    --gif-frame-height: 70vh;
    --box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    --button-radius: 24px;
    --input-radius: 24px;
    --bubble-padding: 8px;
    --input-buttons-gap: 12px;
    --transition: opacity .5s ease, visibility .5s ease;
    --scrollbar-thumb-bg: rgba(179, 179, 179, 0.3);
    --scrollbar-thumb-bg-hover: rgba(47, 47, 47, 0.5);
    --scrollbar-background: rgb(137, 137, 137);
    --scrollbar-radius: 4px;
    --scrollbar-thumb-bg: rgb(49, 161, 135);
}

:root.dark-mode {
    --button: white;
    --h-color: rgb(200, 170, 255);
    --menu-item-hover-bg-color: red;
  /* === Base Colors === */
    --drag-color: #e6e6e6;
  --bg-color: #0f0f0f;
--bg-container: #252525;
  --text-color: #e9e9e9;
  --muted-text: #b3b3b3;
  --card-bg: #1a1a1a;
  --border-color: #333;
  --input-border-color: var(--border-color);
  --input-bg: #1e1e1e;
  --input-bg-read-only: #181818;
  --input-color-read-only: #777;
  --button-bg: #2980ff;
  --button-hover: #4795ff;
  --heading-color: #fff;
  --input-color: #fff;
  --bg-titlebar: #161616;
  --color-titlebar: #f1f1f1;
  --popup-overlay-bg: rgba(0, 0, 0, 0.75);

  /* === Messenger === */
  --color: rgb(230, 230, 230);
  --color-placeholder: rgb(150, 150, 150);
  --input-color: rgb(240, 240, 240);
  --message-title-color: rgb(200, 200, 200);
  --message-sent-color: var(--message-title-color);
  --messages-me-color: rgb(255, 255, 255);
  --messages-them-color: rgb(0, 0, 0);
  --messages-them-bg: rgb(185, 185, 185);
  --messages-me-bg: rgb(49, 161, 135);
  --messages-bg: rgb(14, 14, 14);
  --placeholder-color: rgb(160, 160, 160);
  --input-send-bg-color: rgba(0, 119, 255, 0.25);
  --input-gif-bg-color: rgba(212, 0, 255, 0.25);
  --input-image-bg-color: rgba(0, 255, 17, 0.25);
  --title-bg-color: rgb(27, 145, 118);
    --title-color: rgb(235, 235, 235);
  --messages-padding-left-right: 8px;
  --input-background-color: rgb(32, 32, 32);
  --input-border-radius: 1rem;
  --input-padding: .4rem;
  --gif-frame-bg-color: rgb(40, 40, 40);
  --gif-search-bg-color: rgb(25, 25, 25);
  --gif-search-color: var(--input-color);
  --gif-frame-height: 70vh;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  --button-radius: 24px;
  --input-radius: 24px;
  --bubble-padding: 10px;
  --input-buttons-gap: 12px;
  --transition: opacity .5s ease, visibility .5s ease;
  --scrollbar-thumb-bg: rgba(255, 255, 255, 0.3);
  --scrollbar-background: rgb(137, 137, 137);
  --scrollbar-thumb-bg-hover: rgba(255, 255, 255, 0.6);
  --scrollbar-radius: 4px;
}
:root.green {
  
  --bg-color: #f4ffec;
  --text-color: #222;
  --muted-text: #555;
  --card-bg: #ddffcb;
  --border-color: #b4ffb3;
  --input-bg: #f1ffee;
  --input-bg-read-only: #ccffb8;
  --input-text: #000;
  --input-color-read-only: #8eff80;
  --button-bg: #15ff00;
  --button-hover: #2cc936;
  --heading-color: #111;
  --input-color: white;
  --bg-titlebar: #c7ffc1;
  --color-titlebar: #414141;
}
:root.dark-green {
  
  --bg-color: #101a12;              
  --text-color: #e8f5e9;            
  --muted-text: #a5bfa6;            
  --card-bg: #18261a;               
  --border-color: #2e4a30;          
  --input-bg: #1a2e1b;              
  --input-bg-read-only: #223a24;    
  --input-text: #e8f5e9;            
  --input-color-read-only: #80e27e; 
  --button-bg: #27c24c;             
  --button-hover: #1ea73f;          
  --heading-color: #c8ffc8;         
  --input-color: white;             
  --bg-titlebar: #162b19;           
  --color-titlebar: #b8ffb8;        
}

/* ===== WEBKIT CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 2.7px;
}
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
}

/* Transparent track (background area behind thumb) */
::-webkit-scrollbar-track {
  background: transparent;
  background: var(--scrollbar-background);
}


*:focus {
  outline: none;
  border-color: var(--border-color);
  box-shadow: none;
}

* {
    box-sizing: border-box;
}

html {
    overflow: hidden;
}

@font-face {
  font-family: 'pri';
  src: url("../fnt/sfpro/SF-Pro-Text-Regular.otf") format('truetype');
  /* size-adjust: 96%; */
}
@font-face {
  font-family: 'sec';
  src: url("../fnt/sfpro/SF-Pro-Text-Heavy.otf") format('truetype');
  /* size-adjust: 96%; */
}
body, input, textarea {
    font-family: 'pri', serif;
    font-size: 12px;
    font-weight: 550; 
    letter-spacing: .015em;
}

body.mobile, input.mobile, textarea.mobile {
    font-size: 20px;
}
body {
    background: var(--bg-color);
    color: var(--color);
    margin: 0;
    padding: 0;
    height: auto;
}

button {
    cursor: pointer;
}

h2 {
    font-family: 'sec', serif;
    font-size: 15px;
    height: 100%;
    width: 100%;
    margin: auto;
}

#usersList {
    font-family: 'sec', serif;
}

#userLevelDiv {
    font-family: 'sec';
    font-size: 12px;
}