@font-face {
  font-family: 'CustomFont';
  src: url('JetBrainsMono-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'CustomFont2';
  src: url('JetBrainsMono-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'diginormal';
  src: url('DS-DIGI.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'diginormalbold';
  src: url('DS-DIGIB.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'digiitalic';
  src: url('DS-DIGII.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'digiitalicbold';
  src: url('DS-DIGIT.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'otherdigi';
  src: url('LED\ Dot-Matrix.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'notidigi';
  src: url('intodotmatrix.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'aminspecial';
  src: url('AMINSPECIALFONT.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}



.login-page body, h2, label, button, p, a {
  text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
  color: #ecececcc;
  letter-spacing: -1.5px;
}




.login-page ::placeholder {
  text-shadow: none;
}


.login-page body {
  margin: 0;
  padding: 0;
  background: #333;
  background-size: cover;
  font-family: 'CustomFont', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}


.login-page .login-container {
  position: relative;
  background-color: #191d21;
  border: 1px solid #565656;
  padding: 48px;
  border-radius: 4px;
  width: 384px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  overflow: hidden;
 
  --stripe-thickness: 1px;
  --stripe-spacing: 1px;
  z-index: 2;
}


.login-page .login-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    #181c20,
    rgba(0, 0, 0, 0.15) var(--stripe-thickness),
    transparent var(--stripe-thickness),
    transparent calc(var(--stripe-thickness) + var(--stripe-spacing))
  );
  z-index: -1;
}


.login-page .logo {
  max-width: 80%;
  height: 80px;
  display: block;
  margin: 0 auto 16px auto;
}


.login-page .login-heading {
  margin: 0 0 24px;
  font-size: 20px;
  letter-spacing: -2px;
  color: #f07068;
  min-height: 24px;
}

.login-page .login-container label {
  display: block;
  text-align: left;
  margin-bottom: 12px;
  font-size: 16.8px;
  margin-top: 18px;
  color: #9f9f9f;
  cursor: pointer;
  transition: color 0.2s ease;
  letter-spacing: -1.5px;
}


.login-page .login-container label:hover {
  color: #ffffff;
}
.login-page .login-container label:focus-within {
  color: #a7cbd7;
}

.login-page .login-container input[type="text"],
.login-page .login-container input[type="password"] {
  width: 100%;
  padding: 6px; 
  border: 1px solid #565656;
  border-radius: 3px;
  margin-top: 6px;
  box-sizing: border-box;
  font-size: 16.8px;
  background-color: #2b3546;
  color: #fff;
  transition: border-color 0.2s ease;
 
  text-shadow: none;
  font-family: 'CustomFont2', Arial, sans-serif;
  margin-bottom: -2px;
}


.login-page .login-container input[type="text"]:hover,
.login-page .login-container input[type="password"]:hover {
  border-color: #ffffff;
}
.login-page .login-container input[type="text"]:focus,
.login-page .login-container input[type="password"]:focus {
  border-color: #a7cbd7;
  outline: none;
}

.login-page .login-container button {
  width: 100%;
  padding: 10px;
  margin-top: 24px;
  font-size: 21px;
  font-family: 'CustomFont', Arial, sans-serif;
  background-color: #1b1e21;
  color: #fff;
  border: 1px solid #565656;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  letter-spacing: -2px;
}
.login-page .login-container button:hover {
  background-color: #2b2d2e;
  border-color: #ffffff;
}

.login-page .login-container button.highlight {
  border-color: #a7cbd7 !important;
  color: #a7cbd7 !important;
}


.signup-page .signup-container button {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}


.login-page .login-container button:focus,
.signup-page .signup-container button:focus {
  border-color: #a7cbd7;
  outline: none;
}

.login-page .login-container p.signup {
  margin-top: 24px;
  font-size: 16.8px;
  color: #9f9f9f;
  letter-spacing: -2px;
}


.login-page .login-container p.signup a {
  color: #a7cbd7;
  text-decoration: none;
  transition: color 0.2s ease;
}
.login-page .login-container p.signup a:hover {
  color: #ffffff;
}


.login-page .error-message {
  background-color: #441210;
  border: 1px solid #710700;
  width: 100%;
  margin-top: 22px;
  font-size: 15px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 3px;
  letter-spacing: -1.5px;
}


.login-page .footer {
  margin-top: 120px;
  text-align: center;
  color: #9f9f9f;
  font-size: 14px;
  width: 100%;
  max-width: 384px;
  letter-spacing: -1.6px;
  text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
}

.login-page .footer .icons {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 8px;
}
.login-page .footer .icons a {
  display: inline-block;
}
.login-page .footer .icons img {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: filter 0.2s ease;
 
  filter: none;
}
.login-page .footer .icons a:hover img {
 
  filter: brightness(0) invert(1);
}

.login-page .footer .policies {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 8px;
}
.login-page .footer .policies a {
  color: #a7cbd7;
  text-decoration: none;
  font-size: calc(14px + 4px);
  transition: color 0.2s ease;
}
.login-page .footer .policies a:hover {
  color: #ffffff;
}

.login-page .footer .copyright {
  margin-top: 8px;
  font-size: calc(14px + 2px);
  color: #ffffff;
}


.signup-page body,
.signup-page h2,
.signup-page label,
.signup-page button,
.signup-page p,
.signup-page a {
  text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
  letter-spacing: -1.5px;
}

.signup-page ::placeholder {
  text-shadow: none;
}


.signup-page body {
  margin: 0;
  padding: 0;
  background: #333;
  background-size: cover;
  font-family: 'CustomFont', Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}


.signup-page .signup-container {
  position: relative;
  background-color: #191d21;
  border: 1px solid #565656;
  padding: 48px;
  border-radius: 4px;
  width: 384px;
  margin: 60px auto 0; 
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  overflow: hidden;
  --stripe-thickness: 1px;
  --stripe-spacing: 1px;
  z-index: 2;
  margin-top: 0px;
  padding-bottom: 10px;
}


.signup-page .signup-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    #181c20,
    rgba(0, 0, 0, 0.15) var(--stripe-thickness),
    transparent var(--stripe-thickness),
    transparent calc(var(--stripe-thickness) + var(--stripe-spacing))
  );
  z-index: -1;
}


.signup-page .logo {
  max-width: 80%;
  height: 80px;
  display: block;
  margin: 0 auto 16px auto;
}

.signup-page .login-heading {
  margin: 0 0 24px;
  font-size: 20px;
  letter-spacing: -2px;
  color: #f07068;
  min-height: 24px;
}


.signup-page label {
  display: block;
  text-align: left;
  margin-bottom: 12px;
  font-size: 16.8px;
  margin-top: 18px;
  color: #9f9f9f;
  cursor: pointer;
  transition: color 0.2s ease;
  letter-spacing: -1.5px;
}

.signup-page label:hover {
  color: #ffffff;
}

.signup-page input[type="text"],
.signup-page input[type="password"] {
  width: 100%;
  padding: 6px;
  border: 1px solid #565656;
  border-radius: 3px;
  margin-top: 6px;
  box-sizing: border-box;
  font-size: 16.8px;
  background-color: #2b3546;
  color: #fff;
  transition: border-color 0.2s ease;
 
  text-shadow: none;
  font-family: 'CustomFont2', Arial, sans-serif;
  margin-bottom: -2px;
}


.signup-page input[type="text"]:hover,
.signup-page input[type="password"]:hover {
  border-color: #ffffff;
}
.signup-page input[type="text"]:focus,
.signup-page input[type="password"]:focus {
  border-color: #a7cbd7;
  outline: none;
}


.signup-page button {
  width: 100%;
  padding: 10px;
  margin-top: 24px;
  font-size: 21px;
  font-family: 'CustomFont', Arial, sans-serif;
  background-color: #1b1e21;
  color: #fff;
  border: 1px solid #565656;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  letter-spacing: -2px;
}
.signup-page button:hover {
  background-color: #2b2d2e;
  border-color: #ffffff;
}

.signup-page .signup-container button.highlight {
  border-color: #a7cbd7 !important;
  color: #a7cbd7 !important;
}



.highlight::placeholder {
  color: #a7cbd7;
}


.signup-page .guest-button {
  background: none;
  border: none;
  color: #a7cbd7;
  cursor: pointer;
  font: inherit;
  padding: 0;
  font-size: 19.5px;
  letter-spacing: -1.5px;
}

.signup-page .guest-button:hover {
  color: #ffffff;
}

.signup-page .guest-button:focus {
  outline: none;
  border-color: #a7cbd7;
}


.signup-page .signup-container p.guestcontinue {
  color: #a7cbd7;
}
.signup-page .already {
  color: #9f9f9f;
  text-decoration: none;
  letter-spacing: -2px;
  font-size: 16.8px;
}

.signup-page .already a {
  color: #a7cbd7;
  text-decoration: none;
  letter-spacing: -2px;
}
.signup-page .already a:hover {
  color: #ffffff;
  letter-spacing: -2px;
}


.signup-page .footer {
  margin-top: 106px;
  text-align: center;
  color: #9f9f9f;
  font-size: 14px;
  width: 100%;
  max-width: 384px;
  letter-spacing: -1.6px;
  text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
}

.signup-page .footer .icons {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 8px;
}
.signup-page .footer .icons a {
  display: inline-block;
}
.signup-page .footer .icons img {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: filter 0.2s ease;
 
  filter: none;
}
.signup-page .footer .icons a:hover img {
 
  filter: brightness(0) invert(1);
}

.signup-page .footer .policies {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 8px;
}
.signup-page .footer .policies a {
  color: #a7cbd7;
  text-decoration: none;
  font-size: calc(14px + 4px);
  transition: color 0.2s ease;
  letter-spacing: -1.6px;
}
.signup-page .footer .policies a:hover {
  color: #ffffff;
}
.signup-page .footer .copyright {
  margin-top: 8px;
  font-size: calc(14px + 2px);
  color: #ffffff;
}


.signup-page .signup-container label:focus-within {
  color: #a7cbd7;
}

.signup-page .guestcontinue .or-text {
  color: #9f9f9f;
  letter-spacing: -2px;
  font-size: 16.8px;
}

.signup-page .guestcontinue .guest-link {
  color: #a7cbd7;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -2px;
  font-size: 16.8px;
}

.signup-page .guestcontinue .guest-link:hover {
  color: #ffffff;
}
.signup-page .error-message {
  background-color: #441210;
  border: 1px solid #710700;
  width: 100%;
  margin-top: 22px;
  font-size: 15px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 3px;
  letter-spacing: -1.5px;
  display: none;
}





  
  .chat-page .logout-link {
    color: red;
    text-decoration: none;
    font-weight: bold;
  }
  
  .chat-page .main-content {
    height: 100vh;
    width: 100vw;
    display: grid;
   
    grid-template-columns: minmax(10vw, 0.6fr) auto minmax(11vw, 1fr);
    grid-template-rows: 3vw auto 50px;
    grid-template-areas:
        "top   top    top"
        "left  camera right"
        "left  btn    right";
    gap: 24px;
    padding: 24px;
    box-sizing: border-box;
    overflow: hidden;
  }

  

.left-column {
  grid-area: left;
}

.local-chat-section {
  grid-area: right;
}

.buttons-container {
  grid-area: btn;
}

  
 
  .chat-page .buddy-system input {
    width: 100%;
    padding: 6px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  .chat-page .buddy-system button {
    
    cursor: default;

  }
  


  
 
 
  .chat-page .buddy-leave {
    display: none;
    padding: 4px 8px;
    text-align: right;
  }

 
  .chat-page .buddy-system.active-buddy-group .buddy-leave {
    display: flex;
    color: #191d21;
    justify-content: center;
  }


















  
 
  .chat-page .camera-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: visible;
  }
  
  
  .video-grid {
    grid-area: camera;
    height: 100%;         
   
    aspect-ratio: 656 / 496;    
    margin: 0 auto;        
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    justify-items: stretch;
  }

  .video-wrapper {
    position: relative;
    overflow: visible;
  }
  
  .video-slot {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #333;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 1px #565656;
  }

  #video0 {
    transform: scaleX(-1);
  }
  
  #video1, #video2, #video3 {
    transform: scaleX(-1);
  }

  .video-slot.border-applied {
    box-shadow: none;

  }
  
  .chat-page .video-slot video { 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
      object-fit: cover;
    }
  
  .chat-page .overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    display: flex; 
    justify-content: center; 
    align-items: center;
    background: rgba(0,0,0,0.5); 
    color: #cccccc; 
    font-size: 16px;
    overflow: visible;
    letter-spacing: -1.5px;
    font-family: 'aminspecial';
  }
  
  .chat-page .nameLabel {
    position: absolute;
    bottom: 3px;
    left: 3px;
    background: transparent;
    color: #fff;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 4px;
    z-index: 222;
  }


  .chat-page .nameLabelPreview {
    position: absolute;
    bottom: 3px;
    left: 3px;
    background: transparent;
    color: #fff;
    padding: 10px 10px;
    font-size: 16px;
    border-radius: 4px;
    animation: glowFlash .5s infinite alternate;
    z-index: 2;
  }
  
 
  .buttons-container {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;        
    box-sizing: border-box;
  }


.search-button {
  background-color: #191d21;
  border: 1px solid #565656;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-page .search-button:hover {
  border-color: #a7cbd7;
}

input[disabled], textarea[disabled], button[disabled] {
  background-color: #e0e0e0 !important;
  color: #888 !important;
  cursor: not-allowed;
}

.disabled-input {
  background-color: #e0e0e0;
  color: #888;
}


.search-placeholder {
  color: #fff;
  font-family: "CustomFont", Arial, sans-serif;
  letter-spacing: -1.5px;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  padding: 5px;
}


.search-status {
  display: inline-flex;
  align-items: center;
  font-family: "CustomFont", Arial, sans-serif;
  letter-spacing: -1.5px;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  padding: 5px;
}


.search-status .status-bracket {
  color: #fff;
}


.search-status .status-text {
  color: #a7cbd7;
  margin: 0 2px;
}


  
 
  .chat-page .collapsible-section {
    margin-bottom: 20px;
    border: none;
    border-radius: 0;
    overflow: hidden;
  }
  
 
  .chat-page .collapsible-header {
    background-color: #f1f1f1;
    cursor: pointer;
    padding: 14px 20px;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
  }
  
 
  .chat-page .collapsible-header h3 {
    margin: 0;
    font-size: 14px;
    letter-spacing: -1.5px;
    text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
    
  }
  
 
  .chat-page .collapsible-header::after {
    content: '\25BC';
    font-size: 16px;
  }
  .chat-page .collapsible-header.active::after {
    transform: rotate(-180deg);
  }
    


 
  .chat-page .collapsible-content {
    max-height: 0; 
    overflow: hidden;               
    display: flex;
    flex-direction: column;
  }
  .chat-page .collapsible-content.active {
    max-height: 100%;
  }
  

.chat-page .local-chat-section {
  font-size: 1vw;
 
  overflow-y: auto;
  grid-column: 3;
  border-radius: 8px;
  margin: 0;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  border: 1px solid #565656;
  flex-grow: 1; 
  

}

.chat-page .local-chat-section.closed {
  height: auto;   
  border: none;   

}


.chat-page .local-chat-section.closed .collapsible-header {
  border: 1px solid #565656;
  border-radius: 8px;
}

.chat-page .local-chat-section:not(.closed) > .collapsible-section {
  height: 100%;
}


.chat-page .local-chat-section.closed > .collapsible-section {
  height: auto;
}

  .chat-page .local-chat-section > .collapsible-section {
    display: flex;
    flex-direction: column;
    height: 100%; 
  }

  .chat-page .local-chat-section .collapsible-header {
    background: #171a26;
    color: #fff;
    cursor: pointer;
    padding: 4px 9px;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
   
    border-bottom: 1px solid #565656;
  }
  .chat-page .local-chat-section .collapsible-header::after {
    content: '\25BC'; 
    font-size: 16px;
    transition: none;
    transform: scaleY(0.5) scaleX(1) translateY(2px);
    display: inline-block;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    color: #a7cbd7;
  } 

  
  .chat-page .local-chat-section .collapsible-header.active::after {
    transform: scaleY(0.5) scaleX(1) translateY(0px) rotate(-180deg);
    text-shadow: -1.414px -1.414px 0 rgba(0,0,0,0.7);
  }

  
  
 
  .chat-page .local-chat-section .collapsible-content {
    display: none;           
  }
  
  .chat-page .local-chat-section .collapsible-content.active {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
  }

 

  
 
  .chat-page .notification-badge {
    background-color: transparent;
    color: #a7cbd7;
    border: none;                 
    font-size: 12px;                
    padding: 0;                     
    margin-left: 5px;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7); 
    letter-spacing: -1.5px;        
  }
  

  .chat-page .notification-badge::before {
    content: "[ ";
  }
  
  .chat-page .notification-badge::after {
    content: " ]";
  }
  
 
  .chat-page #chatBox {
    background: #0c0e10;
    flex: 1;
    padding: 10px;
    border-bottom: 1px solid #565656;
    overflow-y: auto;
    min-height: 0;
   
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .chat-page #chatBox::-webkit-scrollbar {
    display: none;
  }
  
  .chat-page .chat-input-row {
    display: flex;
    align-items: center;
    background: #191d21;
    padding: 0;            
    margin: 0;             
    width: 100%;
    box-sizing: border-box;
    cursor: default;
  }
  .mention-wrapper {
    width: 100%;          
    position: relative;   
  }
  .mention-wrapper input {
    display: flex;
    align-items: center;
    background: #191d21;
    padding: 0;            
    margin: 0;             
    width: 100%;
    box-sizing: border-box;
}
  
  .chat-page .chat-input-row input[type="text"] {
    flex: 1;
    background: #191d21;
    border: none;
    color: #fff;
    padding: 6px;
    margin: 0;
    font-family: 'CustomFont', Arial, sans-serif;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    letter-spacing: -1.5px;
    height: 40px; 
  }

  
  .chat-page .chat-input-row input[type="text"]:focus {
    outline: none;
    border: none; 
  }

  .chat-page .chat-input-row #charCount,
  .chat-page .chat-input-row button {
    flex-shrink: 0;
    cursor: default;
  }
  

  .chat-page .chat-input-row button {
    background: transparent;
    border: none;
    padding: 15px 12px;      
    cursor: default;  
        outline: none;          
  }

  .chat-page .chat-input-row button img {
    width: 18px;            
    height: auto;           
    vertical-align: middle; 
    cursor: default;        
  }

  .chat-page .chat-input-row button:hover img {
    filter: brightness(1.5);
   
  }
  
  

  .chat-page .chat-input-row #charCount {
    margin: 0 10px 0 0;
    color: #ccc;
    font-size: 14px;
    letter-spacing: -1.5px;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  }
  






































  
  


.chat-page .buddy-system {
  border: 1px solid #565656;
  border-radius: 8px;
  background: #111;
  margin: 0;
  overflow: hidden;
}


.chat-page .buddy-system .collapsible-header {
  background: #171a26;
  color: #fff;
  cursor: pointer;
  padding: 4px 9px;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin: 0;
  border-bottom: 1px solid #565656;
}


.chat-page .buddy-system .collapsible-header::after {
  content: '\25BC'; 
  font-size: 16px;
  transition: none;
  transform: scaleY(0.5) scaleX(1) translateY(2px);
  display: inline-block;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  color: #a7cbd7;
}
.chat-page .buddy-system .collapsible-header.active::after {
  transform: scaleY(0.5) scaleX(1) translateY(0px) rotate(-180deg);
  text-shadow: -1.414px -1.414px 0 rgba(0,0,0,0.7);
}

.chat-page .buddy-system .collapsible-header:not(.active) {
  border-bottom: none;
}


.chat-page .buddy-system .collapsible-content {
  display: flex;
  flex-direction: column;
  height: auto;
}


.chat-page .buddy-system .buddy-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}


.chat-page .buddy-system .buddy-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  background: #0c0e10;
  border-bottom: 1px solid #565656;
}

.chat-page .buddy-messages::-webkit-scrollbar {
  display: none;
}
.chat-page .buddy-messages {
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.chat-page .buddy-system .buddy-leave {
  padding: 4px 8px;
  background: #191d21;
  text-align: center;
}



.chat-page .buddy-system .buddy-input-container {
  background: #191d21;
  padding: 0; 
}

.chat-page .buddy-system .buddy-input-container {
  box-sizing: border-box;
}


.chat-page .buddy-system .buddy-input-row {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.chat-page .buddy-system .buddy-input-row input[type="text"] {
  flex: 1;
  background: #191d21;
  border: none;
  color: #fff;
  padding: 6px;
  margin: 0;
  font-family: 'CustomFont', Arial, sans-serif;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  letter-spacing: -1.5px;
  height: 40px;
}
.chat-page .buddy-system .buddy-input-row input[type="text"]:focus {
  outline: none;
}
.chat-page .buddy-system .buddy-input-row button {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 8px 12px;
  cursor: default;
  outline: none;
}
.chat-page .buddy-system .buddy-input-row button img {
  width: 18px;
  height: auto;
  vertical-align: middle;
  cursor: default;
}
.chat-page .buddy-system .buddy-input-row button:hover img {
  filter: brightness(1.5);
}
































  .chat-page .chat-line {
    display: flex;
    flex-direction: column;   
    align-items: flex-start;
    margin-bottom: 8px;
  }

  .chat-page .chat-line-wrapper {
   
    width: 100%;
    white-space: normal;      
    word-break: break-word;   
    overflow-wrap: break-word;
  
   
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    font-family: 'CustomFont2', Arial, sans-serif;
    font-size: 15px;
  }


  .chat-page .chat-username {
    color: #fff;
   
    display: inline;
    letter-spacing: -1.5px;
    text-shadow: none !important;
    text-decoration: none;
  }



 
 
  .chat-page .chat-message-body {
    color: #c0c0c0;
   
    display: inline;
    letter-spacing: -1.5px;
  }

 
  .chat-page .chat-message-timestamp {
    align-self: flex-end; 
    margin-top: 6px;
    color: #888;
    font-size: 0.6em;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    white-space: nowrap;  
    letter-spacing: -1px;
  }



  html, body {
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
  }
  




  .buddy-invite-notification {
    background: transparent;
    color: #fff;
    padding: 8px 12px;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    max-width: 800px;
    display: none;
   
   
    margin: 10px auto;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  



  
  




  



  


  .chat-page .left-column::after {
    content: '';
    display: block;
  }

  .chat-page .left-column::-webkit-scrollbar {
    display: none;
  }
  .chat-page .left-column .collapsible-section {
    flex-shrink: 0;
}




   
  .chat-page .cosmetics {
    border: 1px solid #565656;
    border-radius: 8px;
    background: #0c0e10;
    margin: 15px 0; 
    overflow: hidden;
  }

 
  .chat-page .cosmetics .collapsible-header {
    background: #171a26;
    color: #fff;
    cursor: pointer;
    padding: 4px 9px;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin: 0;
    border-bottom: 1px solid #565656;
  }
  .chat-page .cosmetics .collapsible-header::after {
    content: '\25BC'; 
    font-size: 16px;
    transition: none;
    transform: scaleY(0.5) scaleX(1) translateY(2px);
    display: inline-block;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    color: #a7cbd7;
  }
  .chat-page .cosmetics .collapsible-header.active::after {
    transform: scaleY(0.5) scaleX(1) translateY(0px) rotate(-180deg);
    text-shadow: -1.414px -1.414px 0 rgba(0,0,0,0.7);
  }
 
  .chat-page .cosmetics .collapsible-header:not(.active) {
    border-bottom: none;
  }

 
 
  .chat-page .cosmetics .collapsible-content {
    height: 0px;
    overflow: hidden;
   
    padding: 0 10px;
  }

  .chat-page .cosmetics .collapsible-content.active {
    display: flex;
    flex-direction: column;
    height: auto;   
    overflow: hidden;
    margin-top: 10px;
    max-height: 1000px; 

    
  }
  
 
  .chat-page .cosmetics .cosmetics-inner {
    display: flex;
    flex-direction: column;
    gap: 10px; 
  }




 
  .chat-page .cosmeticsPanel {
    background: #fff;
    border: 1px solid #ccc; 
    padding: 10px; 
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    margin-top: 20px;
  }


   
  .chat-page .cosmetics .cosmetics-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .chat-page .cosmetics .cosmetics-section h4 {
    margin: 0;
    font-size: 16px;
    color: #838383;
    letter-spacing: -1.5px;
    text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
  }

 
  .chat-page .cosmetics .border-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .chat-page .cosmetics .border-option {
    padding: 8px;
    background: #191d21;
    border: 1px solid #565656;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  

 
  .chat-page .cosmetics .border-option img {
    display: block;
    max-width: 50px;
    max-height: 50px;
  }

  .chat-page .cosmetics .border-option:hover,
  .chat-page .cosmetics .border-option.active {
    background: #565656;
  }

 
  .chat-page .cosmetics .border-preview {
    margin-top: 8px;
  }

 
  .chat-page .cosmetics .preview-video-slot::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
    opacity: 1;
  }


 
  #saveCosmeticsBtn {
    padding: 10px 20px;
    background: #171a26;
    color: #fff;
    border: 1px solid #565656;
    border-radius: 4px;
    cursor: pointer;
    align-self: flex-start;
  }
  #saveCosmeticsBtn:hover {
    background: #1f2540;
  }


 
  .chat-page .cosmetics .cosmetics-footer {
    background: #191d21;
    border-top: 1px solid #565656;
    padding: 8px 10px; 
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -10px;
    margin-right: -10px;
    box-sizing: border-box;
    width: auto;
  }

  .chat-page .cosmetics .cosmetics-footer #saveCosmeticsBtn {
    padding: 3px 20px;             
    background: #191d21;            
    color: #bbbbbb;
    border: 1px solid #565656;      
    border-radius: 4px;
    cursor: pointer;
    display: flex;                  
    align-items: center;           
    justify-content: center;       
    font-family: "CustomFont", sans-serif;
    letter-spacing: -1.5px;
    width: 60%;                    
  }

.chat-page .cosmetics .cosmetics-footer #saveCosmeticsBtn:hover {
  border-color: #a7cbd7;         
  color: #a7cbd7;                
}

input[type="color"] {
  -webkit-appearance: none; 
  -moz-appearance: none;    
  appearance: none;         
  
  border: none;
  width: 25px;              
  height: 25px;             
  cursor: pointer;
  border-radius: 4px;       
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  overflow: hidden;         
  background: none;         
  transform: translateY(5px);
}




   
    .chat-page .cosmetics {
      border: 1px solid #565656;
      border-radius: 8px;
      background: #0c0e10;
      margin: 16px 0; 
      overflow: hidden;
    }
  
   
    .chat-page .cosmetics .collapsible-header {
      background: #171a26;
      color: #fff;
      cursor: pointer;
      padding: 4px 9px;
      user-select: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      margin: 0;
      border-bottom: 1px solid #565656;
    }
    .chat-page .cosmetics .collapsible-header::after {
      content: '\25BC'; 
      font-size: 16px;
      transition: none;
      transform: scaleY(0.5) scaleX(1) translateY(2px);
      display: inline-block;
      text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
      color: #a7cbd7;
    }
    .chat-page .cosmetics .collapsible-header.active::after {
      transform: scaleY(0.5) scaleX(1) translateY(0px) rotate(-180deg);
      text-shadow: -1.414px -1.414px 0 rgba(0,0,0,0.7);
    }
   
    .chat-page .cosmetics .collapsible-header:not(.active) {
      border-bottom: none;
    }
  
   
   
    .chat-page .cosmetics .collapsible-content {
      height: 0px;
      overflow: hidden;
     
      padding: 0 10px;
    }
  
    .chat-page .cosmetics .collapsible-content.active {
      display: flex;
      flex-direction: column;
      height: auto;   
      overflow: hidden;
      margin-top: 10px;
      max-height: 1000px; 
  
      
    }
    
   
    .chat-page .cosmetics .cosmetics-inner {
      display: flex;
      flex-direction: column;
      gap: 10px; 
    }
  
  
  















   
.chat-page .settings {
  border: 1px solid #565656;
  border-radius: 8px;
  background: #0c0e10;
  overflow: hidden;
}


.chat-page .settings .collapsible-header {
  background: #171a26;
  color: #fff;
  cursor: pointer;
  padding: 4px 9px;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin: 0;
  border-bottom: none;
}


.chat-page .settings .collapsible-header::after {
  content: '\25BC';
  font-size: 16px;
  transition: none;
  transform: scaleY(0.5) scaleX(1) translateY(2px);
  display: inline-block;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  color: #a7cbd7;
}


.chat-page .settings .collapsible-header.active::after {
  transform: scaleY(0.5) scaleX(1) translateY(0px) rotate(-180deg);
  text-shadow: -1.414px -1.414px 0 rgba(0,0,0,0.7);
}


.chat-page .settings .collapsible-content {
  max-height: 0;
  overflow: hidden;
  padding: 0;      
  transition: none;
}


.chat-page .settings .collapsible-content.active {
  max-height: none;
  transition: none;
  display: flex;
  flex-direction: column;
}



.chat-page .settings .collapsible-header.active {
  border-bottom: 1px solid #565656;
}

































input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 4px;       
}


input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 4px;
}

.top-bar {
  grid-area: top;
  width: 100%;
  padding: 0.25rem 0rem; 
  font-size: 0.9rem;       
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  position: relative;
}



.page-grid {
  display: grid;
  grid-template-rows: auto 1fr; 
  grid-template-columns: 1fr;   
  min-height: 100vh;            
  width: 100%;                  
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.top-left,
.top-right {
  display: flex;
  align-items: center;
}

.top-right {
  gap: 10px;
  
  margin-left: auto;
}
  

.profile-picture-container {
 

 
  display: flex;
  align-items: center;
  justify-content: center;
 
  height: 100%;
}

  .top-bar .user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    font-size: 1.2em;     
    color: #f1f1f1;
    letter-spacing: -1.5px;
  }

  .profile-picture-container img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
   
    
    border: 1px solid #565656;
  }
  

.notification-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 600px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 1000;
}





  #reportSubmitBtn {

    border-radius: 6px;

  }

  #reportReasonInput {
    background: rgb(240, 240, 240);
    border: none;                  
    outline: none;                 
    padding: 8px;
    font-family: "CustomFont2", sans-serif;
    letter-spacing: -1.5px;
  }
  
 
  #reportReasonInput::placeholder {
    font-family: "CustomFont2", sans-serif;
    letter-spacing: -1.5px;
  }
  



  .chat-page {
   
    display: flex;
    flex-direction: column;
    height: 100vh; 
   
  }

  



  #onlineUsersInfo {
    color: #4c555e;
    letter-spacing: -1.5px;
    font-size: 15px;
  }


  .scrolling-box {
    width: 100%;            
    overflow: hidden;       
    white-space: nowrap;    
    border: 1px solid #565656; 
    background: #0a0a0a;       
    color: #0f0;            
    font-family: 'YourLCDFont', monospace;
    padding: 6px;          
    box-sizing: border-box; 
    border-radius: 4px;
  }
  
  .scrolling-text {
    display: inline-block;
   
    transform: translateX(100%);
    animation: scroll-left 8s linear infinite;
    font-family: "digiitalic";
    color: #00BFFF;
    text-shadow: 0 0 5px rgb(120, 203, 224);
    font-size: 20px;
  }
  
  @keyframes scroll-left {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  
  .scrolling-box-currentbuddy {
    width: 100%;            
    overflow: hidden;       
    white-space: nowrap;    
    border: 1px solid #565656; 
    background: #0a0a0a;           
    box-sizing: border-box; 
    border-radius: 4px;
    margin-top: 10px;
  }

  p.buddyNeek {
    color: #00BFFF;
    font-size: 22px;
    font-family: "diginormalbold";
    align-items: center;
    display: flex;
    flex-direction: column;
    text-shadow: 0 0 4px rgb(120, 203, 224);
    letter-spacing: .2px;
    margin-top: 5px;
    margin-bottom: 5px;
    }

    span.buddyRequestNotiText {
      color: #00BFFF;
      font-size: 22px;
      font-family: "diginormalbold";
      align-items: center;
      display: flex;
      flex-direction: column;
      text-shadow: 0 0 4px rgb(120, 203, 224);
      letter-spacing: .2px;
      margin-top: 5px;
      margin-bottom: 5px;
      }


    .scrolling-box-buddymembers {
      width: 100%;            
      overflow: hidden;       
      white-space: nowrap;    
      border: 1px solid #565656; 
      background: #0a0a0a;           
      box-sizing: border-box; 
      border-radius: 2px;
      margin-top: 10px;
    }

    span.buddymembers {
      color: #00BFFF;
      font-size: 18px;
      font-family: "otherdigi";
      align-items: center;
      display: flex;
      flex-direction: column;
      text-shadow: 0 0 4px rgb(120, 203, 224);
      letter-spacing: .2px;
      margin-top: 5px;
      margin-bottom: 5px;
      padding: 0 12px;
      }

      span.buddy-request-text {
        color: #00BFFF;
        font-size: 18px;
        font-family: "otherdigi";
        align-items: center;
        display: flex;
        flex-direction: column;
        text-shadow: 0 0 4px rgb(120, 203, 224);
        letter-spacing: .2px;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 0 12px;
        }

      .buddy-invite-item {
        width: 100%;            
        overflow: hidden;       
        white-space: nowrap;    
        border: 1px solid #565656; 
        background: #0a0a0a;           
        box-sizing: border-box; 
        border-radius: 2px;
        margin-top: 10px;
      }

     
      .chat-page .buddyItem {
        color: #00BFFF;
        font-size: 18px;
        font-family: "otherdigi";
        display: flex;
        flex-direction: row;          
        align-items: center;          
        justify-content: space-between;
        text-shadow: 0 0 4px rgb(120, 203, 224);
        letter-spacing: .2px;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 100%;                
        padding: 0 10px; 
      }
        

    .chat-page .buddyItem span {
      flex-grow: 1;
    }

    .chat-page .buddyItem button {
      margin-left: 4px;
      margin-left: 2px;
      background-color: transparent;
      border: none;                     
      color: #00BFFF;                      
      padding: 2px 4px;                 
      border-radius: 0;                 
      cursor: pointer;
      font-size: 12px;                  
      font-family: "otherdigi";           
      text-shadow: 0 0 4px rgb(120, 203, 224);
      margin-top: 1px;
    }
    
    .chat-page .buddyItem button:hover {
      color: #84e0ff; 
    }





  .chat-page .buddy-system .buddy-leave button {
    padding: 3px 20px;             
    background: #191d21;            
    color: #fff;
    border: 1px solid #565656;      
    border-radius: 4px;
    cursor: pointer;
    display: flex;                  
    align-items: center;           
    justify-content: center;       
    font-family: "CustomFont", sans-serif;
    letter-spacing: -1.5px;
    width: 60%;                    
    margin-top: 5px;
  }
  
  .chat-page .buddy-system .buddy-leave button:hover {
  border-color: #a7cbd7;         
  color: #a7cbd7;                
  }

 



@keyframes glowFlash {
  0% {
    text-shadow: 0 0px 20px var(--myColor);
    text-shadow: 0 0px 20px var(--myColor);
  }
  80% {
    text-shadow: 0 0px 20px var(--myColor);
    text-shadow: 0 0px 20px var(--myColor);
  }
  100% {
    text-shadow: none;
  }
}


.sliderContainer {
  display: flex;
  flex-direction: column;
  gap: 10px; 
  margin-top: 8px;
  margin-bottom: 18px;
}


.sliderContainer input[type="range"] {
  width: 100%;
}


.scrolling-boxnameglow {
  width: 100%;            
  overflow: hidden;       
  white-space: nowrap;    
  border: 1px solid #565656; 
  background: #0a0a0a;       
  color: #0f0;            
  font-family: 'YourLCDFont', monospace;
  box-sizing: border-box; 
  border-radius: 4px;
}

p.glowPreviewText {


  color: #00BFFF;
  font-size: 1vw;
  font-family: "otherdigi";
  align-items: center;
  display: flex;
  flex-direction: column;
  letter-spacing: .2px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 0 12px;
  text-shadow: rgb(120, 203, 224) 0px 0px 4px;


}




input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;   
  appearance: none;        
  width: 100%;
  background: transparent; 
  margin: 8px 0;
  
  text-shadow: 0 0 4px rgb(120, 203, 224);
}


input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  cursor: pointer;
  border-radius: 4px;
  background: transparent;
}


input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 0; 
  width: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  margin-top: 0;
}


input[type=range]::-moz-range-track {
  height: 8px;
  cursor: pointer;
  border-radius: 4px;
  background: transparent;
}


input[type=range]::-moz-range-thumb {
  height: 0;
  width: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  border: none;
}


input[type=range]:focus {
  outline: none;
  
}


input[type=range]::-webkit-slider-thumb:hover,
input[type=range]::-moz-range-thumb:hover {
  background: #111;
}


input[type=range]::-webkit-slider-thumb:active,
input[type=range]::-moz-range-thumb:active {
  background: #222;
}



label.inbox{

  font-family: "diginormal";
  letter-spacing: 1px;
  font-size: 20px;
  color: #00BFFF;
  margin: 0;
  padding: 5px;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 0 4px rgb(120, 203, 224);

}




.select-border-container {
  background: #050607;
  border-radius: 6px;
  padding: 7.5px;
  text-align: center;
  transform-origin: center;    
  border: 1px solid #565656;
}

.select-border-container > label {
  display: block;
  font-size: 16px;
  color: #fff;
  margin-bottom: 12px;
}


.border-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;                            
  justify-items: center;                
  margin-bottom: 20px;                  
}



.border-box {
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background: radial-gradient( #0c0f11, #000000);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
  position: relative;
  border: 1px solid #14191d;
}

.border-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


.border-box.selected {
  outline: 2px solid #a7cbd7;
  outline-offset: -2px;
}


.border-preview {
  margin: 0 auto; 
}


.border-preview > label {
  display: block;
  font-size: 14px;
  color: #ccc;
  margin-bottom: 6px;
}


.preview-video-slot {
  position: relative;
  aspect-ratio: 4 / 3;  
 
 
  border: 1px solid #565656;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}




.preview-video-slot video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}


* {
  caret-color: transparent;
}


input,
textarea,
[contenteditable] {
  caret-color: auto;
}



.user-placeholder {
  width: 220px;  
  opacity: 1;
  z-index: 1;
  transform: translateY(20px);
}


.video-border-overlay {
  display: none;
  position: absolute;
  top: -140px; left: -140px; right: -140px; bottom: -140px;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 999;
  transform: scale(.76) translate(-6px, -2px);

}

#preview.video-border-overlay {
  position: absolute;
  top: -140px; left: -140px; right: -140px; bottom: -140px;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 999;
  transform: scale(.6) translate(-5px, -2px);


}


.border-label {
  display: block;
  font-size: 16px;
  color: #fff;
  margin-top: 10px;    
  margin-bottom: 6px;  
  text-align: center;
}

.border-box-row {
  display: flex;
  justify-content: center;
  gap: 7.5px;              
}

.preview-label {
  display: block;
  font-size: 14px;
  color: #ccc;
  margin-bottom: 6px;
  text-align: center;
}


.scrolling-boxselectborder {
  width: 100%;            
  overflow: hidden;       
  white-space: nowrap;    
  border: 1px solid #565656; 
  background: #0a0a0a;       
  color: #0f0;            
  font-family: 'YourLCDFont', monospace;
  padding: 6px;          
  box-sizing: border-box; 
  border-radius: 2px;
}

.guest-message {

  margin: 0;
  font-size: 14px;
  letter-spacing: -1.5px;
  text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
  background: #171a26;
  color: #fff;
  cursor: pointer;
  padding: 4px 9px;
  user-select: none;
  display: flex;
  justify-content: flex-start;
  align-items: left;
  margin: 0;

}


p.buddyRequestNotiText{

  font-size: 20px;
  font-family: "notidigi";
  color: #00BFFF;
  text-shadow: rgb(120, 203, 224) 0px 0px 4px;
  margin-top: 3px;
  margin-left: 8px;

}

 
  .buddy-invite-notification button.acceptBtn {
    font-size: 20px;
    font-family: "notidigi";
    color: #28a745; 
    cursor: default;
    text-shadow: #28a745 0px 0px 4px;
    margin-top: 3px;
  }
  
  .buddy-invite-notification button.acceptBtn:hover {
    color: #5cd65c; 
    cursor: default;
    text-shadow: #28a745 0px 0px 22px;
  }
  
 
  .buddy-invite-notification button.declineBtn {
    font-size: 20px;
    font-family: "notidigi";
    color: #dc3545; 
    cursor: default;
    text-shadow: #dc3545 0px 0px 4px;
    margin-top: 3px;
  }
  
  .buddy-invite-notification button.declineBtn:hover {
    color: #ff6666; 
    cursor: default;
    text-shadow: #dc3545 0px 0px 22px;
  }


  p.buddyAccepted {


    font-size: 20px;
    font-family: "notidigi";
    color: #00BFFF;
    text-shadow: rgb(120, 203, 224) 0px 0px 4px;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -2px;
    margin-right: -1px;

  }



  .buddy-invite-notification button {
    background: transparent;
    border: none;
    color: #ffce00;
    cursor: pointer;
    margin: 0 5px;
    font-size: 13px;
    font-family: "customfont";
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }


  .notification {
    pointer-events: auto;
    background: rgba(0,0,0,1);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 18px;
    color: #00BFFF;
    font-family: "notidigi";
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: -1.5px;
    text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);
    border: 1px solid #565656;
    visibility: hidden;
    opacity: 0
  }

  body.fonts-loaded .notification {
    visibility: visible;
    opacity: 1;
  }


  button#closeNotificationBtn {
    background: transparent;     
    border: none;                
    outline: none;               
    -webkit-appearance: none;    
    -moz-appearance: none;       
    appearance: none;            
    
    font-size: 16px;
    font-family: "notidigi";
    color: #00bfff;
    text-shadow: rgb(120, 203, 224) 0px 0px 4px;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -2px;
    margin-right: -1px;
    transform: translateX(4px);
  }
  

  button#closeNotificationBtn:hover {
    color: rgb(143, 211, 238);;
    text-shadow: rgb(153, 224, 241) 0px 0px 10px;
  }

  button.closeNotificationBtn2 {
    background: transparent;     
    border: none;                
    outline: none;               
    -webkit-appearance: none;    
    -moz-appearance: none;       
    appearance: none;            
    color: #00bfff;
    font-size: 16px;
    text-shadow: rgb(120, 203, 224) 0px 0px 4px;
    font-family: "notidigi";
    margin-left: 20px;
  }

  button.closeNotificationBtn2:hover {
    color: rgb(143, 211, 238);;
    font-size: 16px;
    text-shadow: rgb(153, 224, 241) 0px 0px 10px;
    font-family: "notidigi";
    cursor:default;
  }


  p.buddyDeclined {


    font-size: 20px;
    font-family: "notidigi";
    color: #00BFFF;
    text-shadow: rgb(120, 203, 224) 0px 0px 4px;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -2px;
    margin-right: 10px;
    transform: translateX(8px);

  }



  h1.bannedmessage{

    letter-spacing: -3px;
    color: #e4e4e4;
    text-shadow: 1.414px 1.414px 0 rgba(0, 0, 0, 0.7);

  }


  a.logout-link {

    color: #a82424;
    cursor:default

  }

  a.logout-link:hover {

    color: #fa4f4f;
    cursor:default

  }


.chat-page .left-column {
  display: flex;         
  flex-direction: column;
  height: 100%;          

 
  overflow-y: auto;

 
  position: relative;

 
  scrollbar-width: none;
  -ms-overflow-style: none;
  
}








.left-column .footer.footeropen {

  padding: 0;
}

.chat-page .left-column .footer {
  display: flex;
  gap: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  width: 100%;
  font-size: clamp(12px, 1.5vw, 14px);
  grid-area: left;
  container-type: inline-size;
}

.left-column .footer .icons {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 3vw, 80px);
  overflow: hidden;
  width: 100%;
}
.left-column .footer .icons a {
  flex-shrink: 1;
}
.left-column .footer .icons img {
  width:  clamp(14px, 4vw, 22px);
  height: clamp(14px, 4vw, 22px);
  cursor: pointer;
  transition: filter 0.2s ease;
  filter: none;
}
.left-column .footer .icons a:hover img {
  filter: brightness(0) invert(1);
}
.left-column .footer .policies {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: clamp(8px, 1.2vw, 16px);
  width: 100%;
 
  font-size: 18px; 
}
.left-column .footer .policies a {
  flex: none;
  color: #a7cbd7;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  font-size: inherit;
  font-size: clamp(8px, .9vw, 16px);
}
.left-column .footer .policies a:hover {
  color: #ffffff;
}




.logo-container {
  display: flex;
  align-items: center;   
 
}

#clickableLogo {
  content: url("margprehover.png");
  max-width: 250px;      
  width: 100%;           
  height: auto;          
  cursor: pointer;
 
}


#clickableLogo:hover {
  content: url("margposthover.png");
}

.tos-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 10px;
  margin-top: 30px;
}

.tos-container input[type="checkbox"] {
  margin-right: 18px;
  transform: scale(1.2);
}

.tos-container label {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  color: #d6d6d6;
}

.tos-container a {
  text-decoration: underline;
  color: #a7cbd7;
}























.jump-to-bottom-btn {
  border: none;
  padding: 12px 8px;
  font-size: 12px;
  cursor: pointer;
  font-family: "CustomFont", sans-serif;
  background: #191d21;
}

.buddy-plus-btn {
  margin-left: 6px;
  background: transparent;
  color: #eee;
  border: none;
  font-weight: bold;
  cursor: pointer;
}
.buddy-plus-btn:hover {
  color: #fff;
}





.auth-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  display: flex; 
  justify-content: center; 
  align-items: center;
}

#overlayContainer {
  position: fixed;
  inset: 0;              
  display: flex;
  justify-content: center; 
  align-items: center;     
  background: rgba(0,0,0,0.6);
  z-index: 9999;
}

.overlay-heading {
  margin-top: 0;
}

.overlay-link {
  color: #f0c040;
  cursor: pointer;
  text-decoration: underline;
}


.signup-page {
  display: none;
}


.mention-dropdown {
 
  position: absolute;
  bottom: 100%;  
  left: 0;       
  width: 100%;   
  max-height: 200px;
  overflow-y: auto;
  z-index: 2000;
  background: #191d21;
  border-top: 1px solid #565656;
  border-bottom: 1px solid #565656;
  border-right: 1px solid #565656;
  border-top-right-radius: 8px;
  transform: translateY(-4px);
  
}


.mention-dropdown .highlight {
  background: rgba(161, 161, 161, 0.2);
}
.mention-dropdown div {
  padding: 8px 8px;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}
.mention-dropdown div:hover {
  background: #191d21;
}


.mention-other {
  color: white;
  cursor: pointer;
}
.chat-line.self-mention {
  background-color: #171a26;
  transition: background-color 0.5s ease;
  padding: 6px;
  border-radius: 4px;
  border: 2px dotted #e2e2e2;
}



#profilePictureSection img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}
#profilePictureSection input,
#profilePictureSection button {
  margin: 0.25rem;
}
#profilePictureSection #profilePictureControls {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}


.field-group {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.field-group label {
  margin-bottom: 0.25rem;
  font-weight: bold;
}
.field-group textarea {
  resize: vertical;
  padding: 0.5rem;
}


.social-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.social-field {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 300px;
  background: #191d21;
  padding: 0.5rem;
  border-radius: 4px;
}
.social-field .social-icon {
  width: 20px;
  height: 20px;
  margin-right: 0.5rem;
  flex-shrink: 0;
}
.social-field input {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  outline: none;
  font-family: inherit;
}


.live-settings {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  width: 100%;
  max-width: 600px;
}
.live-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.live-field select {
  margin-top: 0.25rem;
  padding: 0.4rem;
}


.live-field label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}



.settings-grid {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto;
  column-gap: 2rem;
  row-gap:    1rem;
 
  margin: 0 auto;  
}

.setting-label label {
  font-family:   CustomFont;
  font-size:     14px;
  color:         #ddd;
  text-align:    left;
}

.setting-input {
  display: flex;
  justify-content: flex-end;
}


.setting-input select {
  background:    #191d21;
  border:        1px solid #565656;
  border-radius: 4px;
  padding:       0.5rem 0.75rem;

 
  font-size:     12px;
  letter-spacing:-1px;
  max-width: 150px; 
  font-family:   CustomFont2;
  color:         #ddd;
  outline:       none;
  cursor:        pointer;
}
.setting-input select option:hover,
.setting-input select option:focus {
  background-color: #2a2f33; 
  color: #fff;               
}

.setting-input select {
  -webkit-appearance: none;
  appearance: none;
}


.setting-input input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #586f77;
  cursor: pointer;
}


.settings-inner {
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


.settings-inner.center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 1rem;
}


.mobile-tabbar,
#mobilePanel {
  display: none;
}

#mobilePanel {
  position: fixed;
  top: 3rem;   
  bottom: 3rem;
  left: 0;
  right: 0;
  display: flex;           
  justify-content: center;
  align-items: center;
  z-index: 1003;
}


#mobilePanel.hidden {
  display: none;
}
#mobilePanel .panel-content {
  flex: none;                  
  width: 90%;                  
  max-width: 400px;            
  max-height: 100%;            
  overflow-y: auto;            
  background: #191d21;
  border: 1px solid #565656;
  border-radius: 6px;
  box-sizing: border-box;
}

  .mobile-control-bar {
    display: none !important;
  }


  .app-profileOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

button:disabled,
input[type="button"]:disabled {
  opacity: 1 !important;            
  background-color: inherit !important; 
  color: inherit !important;           
  cursor: not-allowed !important;      
  background: inherit !important;
}

#fade-overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      opacity: 1;
      transition: opacity 0.2s ease;
      z-index: 9999;
    }

   
    #view-container {
      visibility: hidden;
    }
   
    html, body {
      margin: 0;
      padding: 0;
      background: #070707;
      background-size: cover;
      font-family: 'CustomFont', Arial, sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      justify-content: center;
      align-items: center;
    }






/* Tweak the Report button */
.report-btn {
  position: absolute;
  /* move it 8px from the top-right corner of .peer-tile */
  top: 8px;
  right: 8px;

  /* force the button itself to exactly 24×24px */
  width: 24px;
  height: 24px;

  /* no extra padding or margin */
  padding: 0;
  margin: 0;

  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1100;
}

/* SVG should fill the button exactly */
.report-btn svg {
  display: block;    /* remove inline-svg whitespace */
  width: 100%;
  height: 100%;
}

/* icon colors */
.report-btn svg path {
  fill: #888888;
}
.report-btn:hover svg path {
  fill: #FEFEFE;
}

:root {

	--top-bar-h: 3rem;
	--control-bar-h: 3rem;
	--tabbar-h: 3rem;
	--bottom-bars-total: calc(var(--control-bar-h) + var(--tabbar-h));

}

@media (max-width: 899px) {
 

  .notification {
    font-size: 12px !important;        
    padding:    4px 8px !important;    
    max-width:  90% !important;        
   
  }

    p.glowPreviewText{

    font-size: 18px;

    }

    #mobilePanel .buddy-leave {
    display: none;
    padding: 4px 8px;
    text-align: center;
  }
 
  .buddy-system.active-buddy-group + #mobilePanel .buddy-leave {
    display: flex;
    justify-content: center;
  }

 
  #mobilePanel .buddy-leave button {
    padding: 3px 20px;             
    background: #191d21;
    color: #fff;
    border: 1px solid #565656;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;           
    justify-content: center;       
    font-family: "CustomFont", sans-serif;
    letter-spacing: -1.5px;
    width: 60%;                    
    margin: 0 auto;
    margin-top: 5px;
  }
  #mobilePanel .buddy-leave button:hover {
    border-color: #a7cbd7;
    color:       #a7cbd7;
  }



  .mobile-control-bar {
    display: flex !important;
  }
.mobile-badge {
  position: absolute;
  top: 0.4rem;     
  right: 0.5rem;    
  display: none;    
  background-color: transparent;
  color: #a7cbd7;
  border: none;
  font-size: 10px;  
  line-height: 1;
  text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
  letter-spacing: -1.5px;
}
.mobile-badge::before { content: "[ "; }
.mobile-badge::after  { content: " ]"; }


.mobile-badge[data-count]:not([data-count="0"]) {
  display: inline;
}

  .chat-page #chatBox {
    min-height: 55vh !important;
    max-height: 55vh !important;

  }
  
.chat-page .chat-wrapper #chatBox {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}


.chat-page .chat-wrapper #jumpToBottomBtn {
  position: absolute;
  right: 1rem;            
  bottom: 1rem;
  z-index: 10;
 
}

 #mobilePanel .panel-content .buddy-input-container {
    background: #191d21;
    padding: 0;
    box-sizing: border-box;
  }

  #mobilePanel .buddy-leave {
    display: none;
  }

  #mobilePanel .panel-content .buddy-input-row {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }

  #mobilePanel .panel-content .buddy-input-row input[type="text"] {
    flex: 1;
    background: #191d21;
    border: none;
    color: #fff;
    padding-top: 1rem;
    margin: 0;
    font-family: 'CustomFont', Arial, sans-serif;
    text-shadow: 1.414px 1.414px 0 rgba(0,0,0,0.7);
    letter-spacing: -1.5px;
    height: 40px;
    -webkit-tap-highlight-color: transparent;
  }

    #mobilePanel .panel-content .buddy-input-row input[type="text"]:focus {
    outline: none;
    box-shadow: none;
  }

  #mobilePanel .panel-content .buddy-input-row button {
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: default;
    outline: none;
  }

  #mobilePanel .panel-content .buddy-input-row button img {
    width: 18px;
    height: auto;
    vertical-align: middle;
    cursor: default;
  }

  #mobilePanel .panel-content .buddy-input-row button:hover img {
    filter: brightness(1.5);
  }


  #mobilePanel .panel-content .cosmetics-footer {
    background: #191d21;
    padding-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;   
    margin-right: 0;
    box-sizing: border-box;
    width: 100%;
    margin-top: auto;
  }

    #mobilePanel .panel-content .cosmetics .select-border-container {
    display: none;
  }

  #mobilePanel .panel-content
    .cosmetics-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
  }

    #mobilePanel .panel-content .cosmetics-footer #saveCosmeticsBtn {
    padding: 3px 20px;
    background: #191d21;
    color: #bbbbbb;
    border: 1px solid #565656;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "CustomFont", sans-serif;
    letter-spacing: -1.5px;
    width: 60%;
    margin: 0 auto;          
  }
  #mobilePanel .panel-content
    .cosmetics-footer
    #saveCosmeticsBtn:hover {
    border-color: #a7cbd7;
    color:       #a7cbd7;
  }

 
  #mobilePanel .panel-content
    .cosmetics-inner
    .cosmetics-section.name-glow
    + .scrolling-boxnameglow {
    display: none;
  }
  #mobilePanel .panel-content
    .cosmetics-inner
    .select-border-container {
    display: none;
  }



  .chat-page .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3rem;              
    padding: 0 1.5vw;
    box-sizing: border-box;
    background: #191d21;
    display: flex;
    align-items: center;
    z-index: 1002;
    border-bottom: 1px #565656;
    margin-top: -1px;
  }
 
 
  .top-bar .top-left { flex: 1; }
  .top-bar .logo-container { display: flex; }
  .top-bar .top-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

    .top-bar .logo-container img,
  .top-bar .top-right {
    max-width: 25vw;   
  }

    .top-bar .top-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-width: 25vw;          
    gap: 1vw;              
    overflow: hidden;         
  }

 
  .top-bar .top-right .user-info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 2.4vw;        
  }

 
  .top-bar .top-right .profile-picture-container img {
    width: 6vw;               
    height: auto;
    border-radius: 4px;
    object-fit: cover;
  }

    .top-bar .logo-container img {
    width: 25vw;
    height: auto;
    object-fit: contain;
  }

  

  .top-bar .logo-container img#clickableLogo {
 
  max-width: 30vw;
  height: auto;
  object-fit: contain;
}

  .notification-container {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    top: 50%; transform: translate(-50%, -50%);
    z-index: 1003;
  }
 
  #clickableLogo, .top-bar .top-right { display: flex !important; }

 
  .left-column,
  .buttons-container,
  .collapsible-section.local-chat-section,
  .left-column .footer {
    display: none !important;
  }

    .mobile-tabbar button {
    font-family: CustomFont, sans-serif; 
    text-transform: uppercase;
    position: relative;
  }


  .mobile-tabbar button:not(:last-child) {
  border-right: 1px solid #565656;
}

 
  .chat-page .video-grid {
    position: fixed;
    top: var(--top-bar-h);
    height: calc(
      100dvh
      - var(--top-bar-h)
      - var(--bottom-bars-total)
    );
    left: 0;
    right: 0;
    bottom: var(--bottom-bars-total);

    display: grid;
    grid-template-columns: 50vw 50vw;
    grid-template-rows: 1fr 1fr;
    gap: 0;
  }



  .chat-page .video-wrapper,
  .chat-page .video-slot {
    width: 100%;
    height: 100%;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    
  outline: 1px solid #565656 !important;
  }

  .chat-page .video-slot video{

    border:1px #565656;

  }

.chat-page .video-grid .video-slot {
 
  box-sizing: border-box;
}



 
  .mobile-control-bar {
    position: fixed;
    bottom: 3rem;
    left: 0;
    width: 100%;
    height: 3rem;
    display: flex;
    background: #191d21;
    border-bottom: 1px solid #565656;
    border-top: 1px solid #565656;
    z-index: 1002;
  }
  .mobile-control-bar button {
    flex: 1;
    background: none;
    border: none;
    color: #ccc;
    font-size: 0.9rem;              
    font-family: CustomFont, sans-serif;
    text-transform: uppercase;
    letter-spacing: -1.5px;
    cursor: pointer;
  }
  .mobile-control-bar button:first-child {
    border-right: 1px solid #565656;
    margin-right: 1px;
  }
  .mobile-control-bar button.active {
    color: #a7cbd7;
    background: rgba(167,203,215,0.1);
  }

  .chat-page .video-border-overlay { display: none !important; }

 
  .mobile-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3rem;              
    display: grid;
    grid-template-columns: repeat(4,1fr);
    background: #191d21;
    border-top: 1px solid #565656;
    z-index: 1002;
  }

  .chat-page .video-slot {
   
    aspect-ratio: auto !important;
    width: 100%;
    height: 100%;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }
  .mobile-tabbar button {
    padding: 0.75rem 0;
    background: none;
    border: none;
    color: #ccc;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .mobile-tabbar button.active {
    color: #a7cbd7;
    border-top: 2px solid #a7cbd7;
  }

 
  .mobile-panel {
    position: fixed;
    top: 3rem; left: 0;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 1003;
  }
  .mobile-panel.hidden { display: none; }
  .mobile-panel .panel-content {
    background: #191d21;
    border: 1px solid #565656;
    border-radius: 4px;
    width: 90%;
    overflow: auto;
    padding: 1rem;
    box-sizing: border-box;
    height: auto;
max-height: calc(100vh - 6rem);

  }
}


@media (max-width: 899px) {
  .login-page .login-container,
  .signup-page .signup-container {
    width: 90%;
    max-width: 384px;
    padding: 32px;
    margin: 40px auto;
  }
}
@media (max-width: 480px) {
  .login-page .login-container,
  .signup-page .signup-container {
    width: 95%; padding: 24px; margin: 24px auto; border-radius: 2px;
  }
  .login-page .login-container label,
  .signup-page .signup-container label { font-size: 14px; }
  .login-page .login-container input,
  .signup-page .signup-container input { font-size: 14px; padding:4px; }
  .login-page .login-container button,
  .signup-page .signup-container button { font-size:18px; padding:8px; }
  .login-page .login-heading,
  .signup-page .login-heading { font-size:18px; }
}
@media (max-height: 750px) {
  .login-page .login-container,
  .signup-page .signup-container { transform: scale(0.9); margin-top:12px; }
}
@media (max-height: 650px) {
  .login-page .login-container,
  .signup-page .signup-container { transform: scale(0.8); }
}
@media (max-height: 550px) {
  .login-page .login-container,
  .signup-page .signup-container { transform: scale(0.6); }
}



/* ==========================================================================
   RESPONSIVE SHELL  (>= 900px)
   ==========================================================================
   Replaces the fixed-proportion desktop grid.

   What was wrong:
     - grid-template-columns used `auto` for the camera column, sized by a
       .video-grid locked to aspect-ratio 656/496 at height:100%. The grid's
       width was therefore derived from the row height, and once side columns,
       gaps and padding were added the total could exceed the viewport. That is
       why the chat panel was sliced off at 1024px wide.
     - Grid children default to min-width:auto, so they refuse to shrink below
       their content. Without minmax(0, 1fr) the row simply overflows.
     - Row heights used 3vw, so the top bar scaled with width rather than with
       its own content.

   Now: side columns are clamped, the camera column takes whatever is left, and
   every track can actually shrink. One rule set, no measurement in JavaScript.
   ========================================================================== */

@media (min-width: 900px) {

  .chat-page .main-content {
    height: 100dvh;
    width: 100%;
    display: grid;
    grid-template-columns:
      clamp(150px, 14vw, 230px)    /* left panels  */
      minmax(0, 1fr)               /* camera: takes the remainder */
      clamp(190px, 17vw, 320px);   /* chat        */
    grid-template-rows:
      auto                         /* top bar sizes to its content */
      minmax(0, 1fr)               /* camera row absorbs the rest  */
      auto;                        /* buttons                      */
    grid-template-areas:
      "top   top     top"
      "left  camera  right"
      "left  btn     right";
    gap: clamp(10px, 1.2vw, 24px);
    padding: clamp(10px, 1.2vw, 24px);
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Every grid child must be allowed to shrink, or it forces the row wider
     than the viewport. This single omission caused most of the clipping. */
  .chat-page .main-content > * { min-width: 0; min-height: 0; }

  .chat-page .video-grid {
    grid-area: camera;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;            /* was 656/496, which fixed the width */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1vw, 20px);
    justify-items: stretch;
    align-items: stretch;
    min-width: 0;
    min-height: 0;
  }

  /* The markup nests wrapper > wrapper > slot, so the height chain has to be
     unbroken or the slots collapse. */
  .chat-page .video-grid > .video-wrapper,
  .chat-page .video-grid > .video-wrapper > .video-wrapper {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }

  .chat-page .video-slot {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;            /* fill the cell instead of forcing 4/3 */
    min-width: 0;
    min-height: 0;
  }

  .chat-page .left-column {
    grid-area: left;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* The footer was being pushed out of the column and clipped mid-word. */
  .chat-page .left-column > .footer {
    margin-top: auto;
    flex-shrink: 0;
    overflow: hidden;
  }
  .chat-page .left-column .footer .policies {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 10px;
  }
  .chat-page .left-column .footer .policies a {
    font-size: clamp(9px, 0.72vw, 12px);
    white-space: nowrap;
  }

  .chat-page .local-chat-section {
    grid-area: right;
    min-width: 0;
    min-height: 0;
    font-size: clamp(11px, 0.85vw, 14px);   /* was 1vw, unreadable when narrow */
  }

  .chat-page .buttons-container {
    grid-area: btn;
    min-width: 0;
  }
}

/* ==========================================================================
   VIDEO FITTING
   ==========================================================================
   Never stretch. Fill the tile by cropping, and bias the crop towards the top
   so that when a portrait phone stream lands in a landscape tile it keeps the
   face rather than centring on a torso.
   ========================================================================== */

.chat-page .video-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop to fill; never distorts */
  object-position: center 35%;
  background: #1a1a1a;
}

/* ==========================================================================
   PAGE BOX  -- the fix that unblocked everything above
   ==========================================================================
   html and body are declared as centred flex columns
   (display:flex; align-items:center) to centre the login box. But align-items
   on a column flex container is the *cross* axis, i.e. horizontal, so body was
   shrink-to-fit rather than filling the viewport: 727px inside a 1280px window.
   Every descendant inherited that, which is why the layout sat in the middle
   with dead space either side and the tiles came out tall and narrow.

   The previous code masked it with `width: 100vw` on .main-content, forcing the
   content wider than its own parent -- which is precisely what produced the
   horizontal overflow and the clipped chat panel.

   The auth overlay is position:fixed and centres itself, so it does not need
   this and is unaffected.
   ========================================================================== */

html, body {
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

body > #view-container,
#view-container > .chat-page {
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* ==========================================================================
   TILE OVERLAY
   ==========================================================================
   The name and its buttons share one bar along the bottom of the tile, so the
   buttons read as belonging to that person rather than floating in a corner.
   Volume sits opposite; on a tile too narrow to hold both it moves to the top.

   Everything is driven by CSS state (:hover on pointer devices,
   .tile-touch-open on touch) and lives inside #tileControls{n}, which
   removePeer empties -- so nothing survives onto an empty "searching..." tile.
   ========================================================================== */

.video-slot { position: relative; container-type: inline-size; }

.tile-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  z-index: 1500;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  pointer-events: none;          /* the bar is a layout box, not a hit target */
}
.tile-bar > * { pointer-events: auto; }

.tile-bar .nameLabel {
  position: static;              /* was absolutely positioned on its own */
  flex: 1 1 auto;                /* take the room the buttons do not need */
  min-width: 4ch;                /* never collapse to a bare ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}

.tile-controls {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

/* Peer buttons appear on hover, or on tap. Your own mic stays put: muting is
   not something you should have to hunt for. */
#tileControls1, #tileControls2, #tileControls3 {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}
.video-slot:hover #tileControls1,
.video-slot:hover #tileControls2,
.video-slot:hover #tileControls3,
.tile-touch-open #tileControls1,
.tile-touch-open #tileControls2,
.tile-touch-open #tileControls3 { opacity: 1; visibility: visible; }

.tileBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  padding: 0 6px;
  background: rgba(12, 12, 12, 0.72);
  border: 1px solid #4a4a4a;
  border-radius: 3px;
  color: #cfcfcf;
  font-family: notidigi, monospace, sans-serif;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -1px;
  cursor: pointer;
  white-space: nowrap;
}
.tileBtn:hover { border-color: #8a8a8a; color: #fff; }
.tileBtn img   { height: 13px; width: auto; display: block; }

/* On a tile too narrow for the name, its buttons and the slider on one line,
   the slider moves to the top so nothing has to overlap. */

.mutedBadge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1400;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(12, 12, 12, 0.72);
  border: 1px solid #f33c3c;
  color: #f33c3c;
  font-family: notidigi, monospace, sans-serif;
  font-size: 11px;
  letter-spacing: -1px;
  pointer-events: none;
}

@media (hover: none) {
  .tileBtn { height: 26px; min-width: 26px; font-size: 13px; }
}

/* ==========================================================================
   LEFT COLUMN
   ==========================================================================
   Two problems: the column could not scroll, so expanding the panels pushed
   content out of view with no way to reach it; and the footer was clipped.

   margin-top:auto puts the footer at the bottom while the panels are collapsed
   and there is spare room. Once they are expanded and the column overflows,
   auto collapses to zero and the padding-top takes over -- so the gap above the
   footer is the same either way, and the column scrolls to reach it.
   ========================================================================== */

@media (min-width: 900px) {
  .chat-page .left-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #3a3a3a transparent;
    padding-right: 4px;
  }
  .chat-page .left-column::-webkit-scrollbar { width: 6px; }
  .chat-page .left-column::-webkit-scrollbar-track { background: transparent; }
  .chat-page .left-column::-webkit-scrollbar-thumb {
    background: #3a3a3a; border-radius: 3px;
  }

  .chat-page .left-column > .collapsible-section { flex: 0 0 auto; }

  .chat-page .left-column > .footer {
    margin-top: auto;      /* bottom of the column when there is room */
    padding-top: 22px;     /* the same gap once the column scrolls */
    flex: 0 0 auto;
  }
}

/* ==========================================================================
   SETTINGS PANEL
   ==========================================================================
   The grid was `minmax(100px,1fr) auto`, and the auto column sized itself to
   the select's content -- device names like "OBS Virtual Camera" are long, so
   the control pushed straight out of the panel.

   Stacked instead: label above its control, control constrained to the panel
   width, long device names truncated rather than overflowing.
   ========================================================================== */

.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.settings-grid .setting-label {
  width: 100%;
  text-align: center;
}
.settings-grid .setting-label label {
  display: block;
  margin-bottom: 5px;
}

.settings-grid .setting-input {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}

.settings-grid .setting-input select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: 12px;
  text-overflow: ellipsis;   /* "OBS Virtual Camera" no longer escapes the box */
}

/* Checkbox rows read better as label-and-control on one centred line. */
.settings-grid .setting-input input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.settings-inner, .cosmetics-inner, .buddy-inner {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: hidden;
}

/* ==========================================================================
   MICROPHONE INDICATOR
   ==========================================================================
   Just the glyph -- no box, no border. Grey when live, red with a slash when
   muted. Your own button appears on hover, except while muted: a muted mic has
   to stay visible or you forget it is on. A peer's muted mic is always shown,
   since whether they can hear you does not depend on where your pointer is.
   ========================================================================== */

.tileBtn.micBtn {
  height: auto; min-width: 0; padding: 0;
  background: none; border: none; border-radius: 0;
}
.tileBtn.micBtn:hover { border: none; background: none; }

.micBtn svg, .peerMutedIcon svg { width: 16px; height: 16px; display: block; }

.micBtn .mic-body,  .peerMutedIcon .mic-body  { fill: #d0d0d0; }
.micBtn .mic-stand, .peerMutedIcon .mic-stand { fill: none; stroke: #d0d0d0;
                                                stroke-width: 1.8; stroke-linecap: round; }
.micBtn .mic-slash, .peerMutedIcon .mic-slash { stroke: transparent; stroke-width: 2.1;
                                                stroke-linecap: round; }

.micBtn.muted .mic-body  { fill: #f33c3c; }
.micBtn.muted .mic-stand { stroke: #f33c3c; }
.micBtn.muted .mic-slash { stroke: #f33c3c; }

/* Your own mic: hidden until hover, unless it is muted. */
#tileControls0 .micBtn { opacity: 0; transition: opacity 0.12s ease; }
#slot0:hover #tileControls0 .micBtn,
#tileControls0 .micBtn.muted { opacity: 1; }

/* A peer's muted mic: always visible, never a text badge. */
.peerMutedIcon { display: inline-flex; flex: 0 0 auto; pointer-events: none; }
.peerMutedIcon .mic-body  { fill: #f33c3c; }
.peerMutedIcon .mic-stand { stroke: #f33c3c; }
.peerMutedIcon .mic-slash { stroke: #f33c3c; }

/* ==========================================================================
   VOLUME METER
   ==========================================================================
   Ten bars widening as they rise, filled from the bottom to show the level,
   with a speaker whose waves follow it. Appears on hover; stays visible when
   silenced so a muted peer is never a mystery.
   ========================================================================== */

.volumeControl {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0;
  background: none;
  border: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}
.video-slot:hover .volumeControl,
.tile-touch-open .volumeControl,
.volumeControl.silenced { opacity: 1; visibility: visible; }

.volumeIcon { cursor: pointer; display: block; }
.volumeIcon svg { width: 16px; height: 16px; display: block; }
.volumeIcon .speaker-body { fill: #d0d0d0; }
.volumeIcon .wave     { fill: none; stroke: #d0d0d0; stroke-width: 1.7; stroke-linecap: round; }
.volumeIcon .mute-x   { stroke: #f33c3c; stroke-width: 2; stroke-linecap: round; }
.volumeControl.silenced .volumeIcon .speaker-body { fill: #f33c3c; }

/* column-reverse so the first bar is the bottom one: level fills upward. */
.volumeBars {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.vbar {
  height: 3px;
  border-radius: 1px;
  background: #4a4a4a;
  transition: background 0.08s ease;
}
.vbar.on { background: #e4e4e4; }
.volumeControl.silenced .vbar.on { background: #f33c3c; }

/* On a narrow tile the meter moves up out of the name bar's way. */
@container (max-width: 340px) {
  .volumeControl { bottom: auto; top: 10px; }
}

/* ==========================================================================
   COLLAPSIBLE PANELS  -- one standard shape for all of them
   ==========================================================================
   Panels were styled ad hoc, so backgrounds squared off against the rounded
   border (visible behind the cosmetics save button) and inner content sat
   inconsistently. One border, one radius, content clipped to it.
   ========================================================================== */

@media (min-width: 900px) {
  .chat-page .left-column .collapsible-section {
    border: 1px solid #565656;
    border-radius: 8px;
    overflow: hidden;          /* children can no longer paint over the corners */
    background: #12161a;
    margin-bottom: 12px;
    box-sizing: border-box;
    width: 100%;
  }
  .chat-page .left-column .collapsible-header {
    border: none;
    border-radius: 0;
    background: #191d21;
    margin: 0;
    padding: 8px 12px;
    box-sizing: border-box;
  }
  .chat-page .left-column .collapsible-content {
    border: none;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
  }
  .chat-page .left-column .collapsible-content > * {
    box-sizing: border-box;
    max-width: 100%;
  }
  /* Footers inside a panel must not paint over the rounded bottom corners. */
  .chat-page .left-column .cosmetics-footer,
  .chat-page .left-column .buddy-leave,
  .chat-page .left-column .buddy-input-container {
    background: transparent;
    padding: 10px 12px;
    margin: 0;
  }
  .chat-page .left-column .cosmetics-footer button,
  .chat-page .left-column .buddy-leave button {
    width: 100%;
    box-sizing: border-box;
  }

  /* The column scrolls, but without a visible bar: it appearing and
     disappearing was shifting the whole layout sideways. */
  .chat-page .left-column { scrollbar-width: none; }
  .chat-page .left-column::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

/* ==========================================================================
   SETTINGS ROWS
   ==========================================================================
   Dropdowns need the full width, so their label sits above them. Checkboxes do
   not, so they sit inline with their label instead of stacked and centred.
   ========================================================================== */

.settings-grid .setting-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.settings-grid .setting-row.inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.settings-grid .setting-row.inline .setting-label { text-align: left; }
.settings-grid .setting-row.inline .setting-input { width: auto; }

.settings-grid .setting-label,
.settings-grid .setting-label label { text-align: left; }

/* Compact the peer buttons so a username keeps room beside them on a
   narrow tile. */
.tile-controls .tileBtn { padding: 0 5px; font-size: 11px; height: 20px; }
.tile-controls .tileBtn img { height: 12px; }

/* The meter occupies the bottom-right of a peer tile, so the name bar has to
   stop short of it. Your own tile has no meter and can use the full width.
   When the tile is narrow the meter moves to the top and the bar reclaims it. */
.video-slot:not(#slot0) .tile-bar { right: 46px; }
@container (max-width: 340px) {
  .tile-bar { right: 10px; }
}

/* ==========================================================================
   COLLAPSIBLE PANELS -- one shape, applied to all of them
   ==========================================================================
   Previously each panel was styled separately, which produced: unequal gaps
   between them; a header rule under `settings` but not under the others;
   an input with a background box around only its text rather than filling the
   footer; a save button whose background squared off against the rounded
   corner; and a separator that stopped short of the panel edges.

   Defined once here so a new panel inherits the same shape.
   ========================================================================== */

@media (min-width: 900px) {

  .chat-page .left-column .collapsible-section {
    border: 1px solid #565656;
    border-radius: 8px;
    overflow: hidden;
    background: #12161a;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 12px 0;        /* one gap, the same between every panel */
  }
  .chat-page .left-column .collapsible-section:last-of-type { margin-bottom: 0; }

  /* Header: the rule underneath appears only while the panel is open, on all
     of them rather than just settings. */
  .chat-page .left-column .collapsible-header {
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    background: #191d21;
    margin: 0;
    padding: 9px 12px;
    box-sizing: border-box;
  }
  .chat-page .left-column .collapsible-header.active {
    border-bottom-color: #565656;
  }

  .chat-page .left-column .collapsible-content {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;          /* nothing may force the column wider */
  }
  .chat-page .left-column .collapsible-content > * {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Panel body gets the padding, so panels agree on their inner margin. */
  .chat-page .left-column .buddy-inner,
  .chat-page .left-column .cosmetics-inner,
  .chat-page .left-column .settings-inner {
    padding: 12px;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* ---- footer strip, shared shape ------------------------------------
     A full-width band across the bottom of the panel, like the chat input,
     rather than a box hugging its own contents. */
  .chat-page .left-column .buddy-input-container,
  .chat-page .left-column .cosmetics-footer,
  .chat-page .left-column .buddy-leave {
    margin: 0;
    padding: 9px 12px;
    background: #191d21;
    border: none;
    border-top: 1px solid #565656;   /* runs the full width of the panel */
    box-sizing: border-box;
    width: 100%;
  }

  .chat-page .left-column .buddy-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .chat-page .left-column .buddy-input-row input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    background: #0e1114;
    border: 1px solid #3a3f44;
    border-radius: 4px;
    padding: 6px 8px;
    box-sizing: border-box;
  }
  .chat-page .left-column .buddy-input-row button {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .chat-page .left-column .cosmetics-footer button,
  .chat-page .left-column .buddy-leave button {
    width: 100%;
    box-sizing: border-box;
    background: #12161a;
    border: 1px solid #565656;
    border-radius: 4px;
    padding: 6px 10px;
    color: #ddd;
    cursor: pointer;
  }
  .chat-page .left-column .cosmetics-footer button:hover,
  .chat-page .left-column .buddy-leave button:hover { border-color: #a7cbd7; }

  /* ---- cosmetics: stop the heading forcing the column wider ------------ */
  .chat-page .left-column .scrolling-boxnameglow,
  .chat-page .left-column .scrolling-box,
  .chat-page .left-column .scrolling-box-currentbuddy {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  .chat-page .left-column .glowPreviewText,
  .chat-page .left-column .buddyNeek {
    font-size: clamp(10px, 0.78vw, 13px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
  }
  .chat-page .left-column .sliderContainer { max-width: 100%; }
  .chat-page .left-column .sliderContainer input[type=range] { width: 100%; }
  .chat-page .left-column .preview-video-slot { max-width: 100%; }
}