/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── LOGIN / SIGNUP FORM ── */
/* Core form styling (form-control, btn-primary, etc.) —
   the landing page overrides most of these inline, but the
   chat UI still inherits some (form-control, .btn-primary). */
.form-group {
  margin-bottom: 20px;
}

.form-control {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #555;
  background-color: #262626;
  color: #fff;
  font-size: 1rem;
}

.form-control:focus {
  background-color: #262626; /* stays dark */
  color: #fff; /* text stays white */
  border-color: #ff3399; /* subtle pink highlight on focus */
  outline: none; /* remove browser’s default outline */
  box-shadow: 0 0 5px #ff3399; /* optional soft glow */
}

/* Button Styles - Fixed to prevent blue color */
.btn-primary {
    width: 100%;
    background-color: #ff3399 !important;
    border: none !important;
    padding: 12px;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #e60073 !important;
}

/* Remove all blue states */
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #ff3399 !important;
    border-color: #ff3399 !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 51, 153, 0.25) !important;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: #cc0066 !important;
    border-color: #cc0066 !important;
}

/* to iska istemal hota hai jab login ke baad upar ke side left me hamari profile hai uske pp.png usme property dene ke lye  */
.profile-pic, .list-group-flush img, #imgChat {
  width: 40px;
  height: 40px;
}

.list-group-flush img {
  margin-left: -10px;
}

/* Pride flag icons */
.pride-flag-icon svg,
.profile-pic svg,
#imgChat svg,
#imgProfile svg {
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 51, 153, 0.35);
  display: block;
}
.pride-flag-icon {
  flex-shrink: 0;
}

/* ye hai online users list ke upar jalne wali bati live user ko pradarshit karne ke liye or us bati ko property dne ke liye */
.indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  margin-right: 5px;
  /* background-color: #28a745; */
}

/* ye hai us jalne wali bati ka color - */
 .label-success {
  background-color: #8ad919;
 }

 /* ye kisi ke sath connect hone ke baad busy hone wali bati ka color - */
 .label-danger {
  background-color: #DC143C
 }

 /* ye random partner dhundhte waqt searching status ki bati ka color - */
 .label-warning {
  background-color: #FFA500
 }

 

/* MAIN CHAT AREA, header, video container, alerts, welcome panel —
   final styling (dark theme) defined later in the file */

/* BUTTONS */
/* to ye call ke waqt cross button mtlb leave video chat room button ka background color hai  */
.btn-danger {
  background-color: #ff3366;
  border: none;
}
 

/* to ye call ke waqt cross button mtlb leave video chat room button ka hover background color hai  */
.btn-danger:hover {
  background-color: #e6005c;
}

/* RESPONSIVENESS */
@media (max-width: 768px) {
  .chatbox .row {
    flex-direction: column;
  }

  #side-1 {
    display: none !important;
  }

  #side-2 {
    width: 100%;
    padding: 0;
  }

  .profile-pic, #imgChat {
    width: 40px;
    height: 40px;
  }

  /* #messages_video {
    padding: 10px;
  } */

  .modal {
    width: 100vw;
    height: auto;
  }
}

/* NOTE: #incoming_call_Modal and #modalNotificationList are populated by
   chatapp.js with fully inline-styled markup (see create_request_room_Modal
   and Create_Popup_Notifications). The .modal-dialog/.modal-content/h5/p/img/
   button/.btn-success/.btn-danger/.spinner-border/.caller-name/.call-message/
   .button-group rules that previously targeted these modals never matched
   anything and have been removed. */

/* ye jahan online user me baki users ka naamlikha hota hai to unke niche hari bati or online ko design dene ke liye jaise font size or height jaisi chezien  */
 .under-name {
     font-size: 12px;
     line-height: 15px;
     max-height: 15px;
 }

/* ye jab hum kisi ko msg bhejete hain to uske sath wo msg ka background kis color me heighlight hoke send hoga or hume show hoga mtlb hamare side uske liye or us msg ka padding or radius mtlb msg ke style ke liye hai - */
 .receive {
     background-color: grey;
     border-radius: 1rem;
     padding: 10px 15px;
     display: inline-block;
 }

 /* ye jab hum kisi ko msg bhejegen or humare side to nhi par jisko wo msg jayega mtlb jisko wo msg recieve hoga uske side us msg ki styling kis tarah se dikhe uske liye mtlb background color highlight or padding or border radius jaisi chezien -*/
 .sent {
     background-color: whitesmoke;
     border-radius: 1rem;
     padding: 10px 15px;
     display: inline-block;
 }

/* jab hum outgoing call karte hai to uske andar jo text ata hai requesting with user pls wait usko show karwane ke liye or property dene ke liye  -*/
 .loading::after {
     content: attr(data-loading-text);
     animation: loading 5s infinite;
 }

/*video call start*/

 /*webrtc start here*/

 /* iska pta nhi  */
 @-webkit-keyframes loading {
     0% {
         height: 15px;
     }

     50% {
         height: 35px;
     }

     100% {
         height: 15px;
     }
 }

 /* iska pta nhi  */
 @keyframes loading {
     0% {
         height: 15px;
     }

     50% {
         height: 35px;
     }

     100% {
         height: 15px;
     }
 }

 /*video call end*/

 
/* .name {
  font-size: 14px;
  line-height: 1.1;
  margin-bottom: 2px;
}
#clientuserchatheader {
  font-size: 12px;
  line-height: 1.1;
}  */

/* Add this at the end of your style.css */
#client_frame_figure {
    position: relative;
}

/* Add this at the end */
#timeout-notification {
    animation: fadeInOut 5s ease-in-out;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(-20px); }
    10% { opacity: 1; transform: translateY(0); }
    90% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
} 

/* FULLSCREEN FIX FOR VIDEO CHAT */
.chatbox.fullscreen,
.chatbox.fullscreen .row,
.chatbox.fullscreen #side-2 {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    /* height: 100vh !important; */
    max-width: 100vw !important;
}

.chatbox.fullscreen #side-2 .card {
    border-radius: 0 !important;
}

/* Add this to style.css */
#leaveroom {
    padding: 8px 16px;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 8px;
    background-color: #ff3366;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    gap: 6px;
}

#leaveroom:hover {
    background-color: #e6005c;
}

/* Ensure the button stays at far right */
.icon {
    margin-left: auto;
    padding-right: 15px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
    #leaveroom {
        padding: 6px 12px;
        font-size: 0.9rem;
    }
    
    .icon {
        padding-right: 10px;
    }
} 

/* Add this at the end of the file */
@media (max-width: 768px) {
  /* Remove the rule that hides the sidebar on mobile */
  /* DELETE this line: #side-1 { display: none !important; } */

  /* Add these new rules instead */
  #side-1 {
    display: block !important;
    width: 100%;
  }
  
  .chatbox .row {
    flex-direction: column;
    height: auto;
  }
  
  
  
  #side-2 {
    display: none;
  }
  
  #divStart {
    display: none;
  }
}

/* Add this new rule */
#side-1.mobile-full {
  display: block !important;
  width: 100%;
} 

@media (max-width: 768px) {
  /* Add this to ensure video room takes full screen */
  body.in-call .chatbox #side-1 {
    display: none !important;
  }
  
  body.in-call .chatbox #side-2 {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  
  /* Add this new rule */
  .chatbox.fullscreen #side-2 {
    display: block !important;
  }
} 

/* Add to style.css */
/* Video container and name overlay */
#peer-name-container {
    z-index: 10; /* Ensure it's above video */
    max-width: 80%; /* Prevent overflow */
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    #peer_video_frame {
        height: 300px;
    }
}

@media (max-width: 768px) {
    #peer_video_frame {
        height: 250px;
    }
    
    #peer-name-container {
        bottom: 5px;
        left: 5px;
        padding: 3px 8px;
    }
    
    #peer-name-overlay {
        font-size: 12px !important;
    }
}

@media (max-width: 576px) {
    #peer_video_frame {
        height: 200px;
    }
    
    .video-container {
        width: 100% !important;
    }
    
    .videos-row {
        flex-direction: column;
    }
}

/* Hide header name during calls on mobile */
@media (max-width: 768px) {
    body.in-call #divChatName_peername {
        display: none;
    }
} 

/* Add this to your style.css */
#chatPanel .card-header {
    transition: all 0.3s ease;
}

/* Ensure video area expands to fill space when header is hidden */
#messages_video {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
} 

/* Responsive Video Layout — base .videos-row/.video-container/#peer_video_frame/
   #client_video_frame styling and their responsive breakpoints are defined later
   in the FULLSCREEN VIDEO CALL FIXES section (final winners in the cascade) */

/* Video controls positioning adjustments */
#client_frame_figure .button_calls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

/* Peer name overlay positioning */
#peer-name-container {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 50;
}

/* Fullscreen adjustments for video call */
.chatbox.fullscreen #messages_video {
    padding: 0;
    margin: 0;
    height: 100vh;
}

.chatbox.fullscreen .videos-row {
    height: 100vh;
} 

/* Agreement Checkbox Styles */
.agreement-checkbox {
    text-align: center;
    margin: 15px 0;
    padding: 10px;
    /* background: rgba(255, 255, 255, 0.1); */
    border-radius: 8px;
}

.form-check-label {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

.form-check-label a {
    color: #cc0066;
    font-weight: bold;
    /* text-decoration: underline; */
}

.form-check-label a:hover {
    color: #e60073;
    text-decoration: none;
}

.form-check-input {
    margin-right: 8px;
}

/* Disabled login button style */
.btn:disabled {
    background-color: #cccccc;
    border-color: #cccccc;
    cursor: not-allowed;
}

.btn:disabled:hover {
    background-color: #cccccc;
} 

.login-footer {
 color: #666;
} 

/* RESET RESPONSIVE AND VIDEO CHAT LAYOUT STYLES — .container-fluid.chatbox final
   styling defined later (STICKY SIDEBAR / FIX WHITE STRIPS sections) */

.name {
  font-weight: bold;
  color: #fff; /* changed from #333 to white */
} 

#clientuserchatheader, #peeruserchatheader {
  font-size: 0.9rem;
  color: #ccc; /* changed from #666 to lighter gray */
}

/* MAIN CHAT AREA */
#side-2 .card {
  border: none;
  background-color: #1a1a1a; /* changed from white */
  height: auto;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#side-2 .card-header {
  background-color: #262626; /* changed from #ffcce0 */
  border-bottom: 1px solid #333; /* changed from #ff99cc */
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#messages_video {
  flex-grow: 1;
  min-height: 0px;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #0d0d0d; /* changed from #fff0f5 */
}

#divStart h2 {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

/* CALL BUTTON STYLING */
.call-button {
  background-color: #ff3399; /* pink background */
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.call-button:hover {
  background-color: #e60073; /* darker pink on hover */
}

/* ERROR ALERT */
#success-alert {
  margin: 15px;
  padding: 12px;
  background-color: #333; /* darker background */
  border-left: 5px solid #ff3366;
  color: #fff; /* white text */
  font-size: 0.95rem;
}

/* Add to style.css - Notification Styling */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 350px;
}

.notification {
    background: linear-gradient(135deg, #1a1a1a 0%, #262626 100%);
    border-left: 4px solid;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    color: #fff;
    animation: slideInRight 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.notification.rejected {
    border-left-color: #ff3366;
}

.notification.rejected .notification-icon {
    color: #ff3366;
}

.notification.timeout {
    border-left-color: #ff9900;
}

.notification.timeout .notification-icon {
    color: #ff9900;
}

.notification-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.notification-icon {
    font-size: 20px;
    margin-right: 10px;
}

.notification-title {
    font-weight: bold;
    font-size: 14px;
    color: #ff66b2;
}

.notification-message {
    font-size: 13px;
    line-height: 1.4;
    color: #ccc;
}

.notification-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 18px;
    transition: color 0.3s;
}

.notification-close:hover {
    color: #ff66b2;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.notification.hiding {
    animation: slideOutRight 0.3s ease-in forwards;
}

/* Auto-hide after 5 seconds */
.notification.auto-hide {
    animation: slideInRight 0.3s ease-out, slideOutRight 0.3s ease-in 4.7s forwards;
}

/* Add to style.css - Mobile responsiveness for notifications */
@media (max-width: 768px) {
    .notification-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    
    .notification {
        padding: 12px 15px;
    }
    
    .notification-title {
        font-size: 13px;
    }
    
    .notification-message {
        font-size: 12px;
    }
} 

/* Identity dropdown styling */
#identity {
    background-color: #262626;
    color: #fff;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    font-size: 16px;
    height: auto;
}

#identity option {
    background-color: #1a1a1a;
    color: #fff;
}

/* Identity text in user list */
.user-identity {
    font-size: 11px;
    color: #ff99cc;
    margin-left: 5px;
    font-style: italic;
}

/* Identity in header */
.identity-badge {
    font-size: 11px;
    background-color: #ff3399;
    color: white;
    border-radius: 12px;
    padding: 2px 8px;
    display: inline-block;
    margin-left: 8px;
} 

/* ========== ENHANCED GLASS BACKGROUND FOR CHAT UI ========== */
/* .container-fluid.chatbox final styling defined later (STICKY SIDEBAR /
   FIX WHITE STRIPS sections); this block's properties were all overridden or
   no-ops (backdrop-filter: blur(0px)) */

/* SIDEBAR AND MAIN PANEL TRANSPARENCY (now applies to #side-2 .card only —
   #side-1 .card final styling is in the STICKY SIDEBAR section) */
#side-2 .card {
  background: rgba(8, 6, 16, 0.75) !important;
  backdrop-filter: blur(8px);
  /* border: 1px solid rgba(255, 51, 153, 0.25); */
  border-radius: 24px;
  overflow: hidden;
  margin: 12px;
  box-shadow: 0 8px 20px rgba(8, 6, 16, 0.75);
}

/* HEADER BARS WITH GLASS */
#side-1 .card-header,
#side-2 .card-header {
  background: rgba(8, 6, 16, 0.75) !important;
  /* border-bottom: 1px solid rgba(255, 51, 153, 0.3); */
  color: #f0eef7;
}

/* DEFAULT WELCOME BOX (RIGHT PANEL) */
#divStart {
  background: rgba(8, 6, 16, 0.75);
  backdrop-filter: blur(8px);
  border-radius: 28px;
  /* border: 1px solid rgba(255, 51, 153, 0.3); */
  margin: 20px;
  padding: 40px 20px;
  color: #f0eef7;
}
#divStart h2 {
  color: #ff80b5;
  font-weight: 600;
}

/* VIDEO CALL CONTAINER BACKGROUND (during call, keep dark for clarity) */
#messages_video {
  background: #0a0812;
}

/* RESPONSIVE: ensure transparency on mobile too */
@media (max-width: 768px) {
  #side-1 .card,
  #side-2 .card {
    margin: 8px;
    backdrop-filter: blur(12px);
  }
  #divStart {
    margin: 12px;
    padding: 24px 12px;
  }
} 

/* ========== FULLSCREEN VIDEO CALL FIXES ========== */
.chatbox.fullscreen,
.chatbox.fullscreen .row,
.chatbox.fullscreen #side-2,
.chatbox.fullscreen #side-2 .card,
.chatbox.fullscreen #messages_video {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
}

/* Make the video row fill the entire space */
.videos-row {
    width: 100%;
    height: 100%;
    display: flex;
    margin: 0;
    padding: 0;
}

/* Each video container takes equal space */
.video-container {
    flex: 1;
    min-height: 0;   /* important for flex children */
    position: relative;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Video elements fill their container */
#peer_video_frame,
#client_video_frame {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Responsive: stack videos vertically on mobile (portrait) */
@media (max-width: 768px), (orientation: portrait) {
    .videos-row {
        flex-direction: column;
    }
    .video-container {
        height: 50%;  /* each takes half of the screen */
        width: 100%;
    }
}

/* Landscape mode on mobile – side by side */
@media (min-width: 769px) and (orientation: landscape) {
    .videos-row {
        flex-direction: row;
    }
    .video-container {
        width: 50%;
        height: 100%;
    }
}

/* ========== STYLING THE CONTROL BUTTONS ========== */
.button_calls {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    padding: 12px 24px;
    border-radius: 60px;
    z-index: 100;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 51, 153, 0.3);
}

.control-btn {
    background: #1a1a2e;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.control-btn i {
    font-size: 24px;
}

.control-btn:hover {
    transform: scale(1.05);
    background: #ff3399;
}

.control-btn#leaveroom {
    background: #dc3545;
}

.control-btn#leaveroom:hover {
    background: #b02a37;
}

/* Make the buttons touch‑friendly on mobile */
@media (max-width: 768px) {
    .button_calls {
        gap: 15px;
        padding: 8px 16px;
        bottom: 20px;
    }
    .control-btn {
        width: 44px;
        height: 44px;
    }
    .control-btn i {
        font-size: 20px;
    }
} 

/* style.css - Add styles for new buttons and anonymous mode indicators */

/* ===== FLOATING CONNECT RANDOMLY BUTTON ===== */
#anonymousConnectBtn {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;                         /* below modals (1050+) but above normal content */
    background: linear-gradient(95deg, #FF3399, #FF66B2);
    color: white;
    border: none;
    border-radius: 40px;
    padding: 10px 24px;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(255, 51, 153, 0.45);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    pointer-events: auto;
}

#anonymousConnectBtn:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: 0 8px 24px rgba(255, 51, 153, 0.55);
}

/* Hide on mobile when sidebar is collapsed (button only relevant when user list is visible) */
@media (max-width: 767px) {
    #anonymousConnectBtn {
        bottom: 20px;
        padding: 9px 20px;
        font-size: 0.82rem;
    }
}

/* Next button styling */
.next-btn {
    background-color: #ff9900 !important;
    color: white !important;
    border: none !important;
}

.next-btn:hover {
    background-color: #e68900 !important;
    transform: translateY(-2px);
}

/* Toast notification for anonymous matching */
.anon-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    z-index: 1100;
    backdrop-filter: blur(8px);
    pointer-events: none;
    animation: anonToastFade 2s ease;
}

@keyframes anonToastFade {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    15% { opacity: 1; transform: translateX(-50%) translateY(0); }
    85% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

.control-btn.next-btn {
    background: #ff9900;
}

.control-btn.next-btn:hover {
    background: #e68900;
}

/* Fullscreen video row fix for anonymous calls */
.chatbox.fullscreen .videos-row {
    height: 100vh !important;
} 
/* ========== IDENTITY SEARCH / FILTER BAR ========== */

#onlineUsersCount {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #cc0066;
    white-space: nowrap;      /* count text stays on one line */
    font-size: 0.85rem;
    flex: 0 0 auto;           /* never grow or shrink — always exact size */
    min-width: 0;
}

/* The wrapper that holds the input row + dropdown */
.identity-search-wrap {
    position: relative;
    flex: 1 1 0;              /* grow to fill remaining space */
    min-width: 0;             /* allow shrinking below content size */
    /* NO overflow:hidden here — dropdown must escape this box */
}

/* Row: icon + input + clear button */
.identity-search-input-row {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 51, 153, 0.35);
    border-radius: 20px;
    padding: 4px 8px;
    gap: 4px;
    width: 100%;              /* fill the wrap */
    box-sizing: border-box;
    transition: border-color 0.2s;
    overflow: hidden;         /* clip inner content, never overflow */
}

.identity-search-input-row:focus-within {
    border-color: #FF3399;
    background: rgba(255, 51, 153, 0.08);
    box-shadow: 0 0 0 2px rgba(255, 51, 153, 0.18);
}

.identity-search-icon {
    font-size: 12px;
    flex-shrink: 0;
    opacity: 0.7;
}

.identity-search-input {
    background: transparent;
    border: none;
    outline: none;
    color: #f0eef7;
    font-size: 0.75rem;
    width: 100%;
    min-width: 0;
    padding: 0;
}

.identity-search-input::placeholder {
    color: rgba(240, 238, 247, 0.4);
}

.identity-search-clear {
    background: none;
    border: none;
    color: rgba(240, 238, 247, 0.5);
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.15s;
}

.identity-search-clear:hover {
    color: #FF3399;
}

/* Dropdown list */
.identity-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: rgba(18, 14, 30, 0.98);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 51, 153, 0.4);
    border-radius: 12px;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    z-index: 600;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

.identity-dropdown-item {
    padding: 7px 12px;
    font-size: 0.8rem;
    color: #e0ddf7;
    cursor: pointer;
    transition: background 0.15s;
}

.identity-dropdown-item:hover,
.identity-dropdown-item.active {
    background: rgba(255, 51, 153, 0.2);
    color: #fff;
}

.identity-dropdown-item mark {
    background: transparent;
    color: #FF66B2;
    font-weight: 700;
}

/* Dividers between matched / other users */
.identity-filter-divider {
    list-style: none;
    padding: 4px 12px 2px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    pointer-events: none;
    border-bottom: 1px solid rgba(255, 51, 153, 0.15);
    /* margin-bottom: 2px; */
}

.identity-filter-divider.matched-label {
    color: #FF66B2;
    background: #0d0d0f;
}

.identity-filter-divider.others-label {
    color: #888;
    background: transparent;
    margin-top: 4px;
}

/* ========== CUSTOM SCROLLBARS ========== */

/* --- Identity Dropdown (chat sidebar filter) ---
   Box bg: rgba(18, 14, 30) → thumb is a slightly lighter shade of the same dark */
.identity-dropdown::-webkit-scrollbar {
    width: 5px;
}
.identity-dropdown::-webkit-scrollbar-track {
    background: rgba(18, 14, 30, 0.98);
    border-radius: 3px;
}
.identity-dropdown::-webkit-scrollbar-thumb {
    background: rgba(55, 44, 80, 0.9);
    border-radius: 3px;
}
.identity-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(75, 60, 105, 1);
}
/* Firefox */
.identity-dropdown {
    scrollbar-width: thin;
    scrollbar-color: rgba(55, 44, 80, 0.9) rgba(18, 14, 30, 0.98);
}

/* --- Terms of Service & Privacy Policy Modal Body ---
   Box bg: #181626 → thumb is a lighter tone of that same dark purple */
.modal-body::-webkit-scrollbar {
    width: 6px;
}
.modal-body::-webkit-scrollbar-track {
    background: #181626;
    border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb {
    background: #2e2845;
    border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
    background: #3d3660;
}
.modal-body::-webkit-scrollbar-corner {
    background: #181626;
}
/* Firefox */
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: #2e2845 #181626;
}

/* Always keep count + search on one row, even on tiny screens */
@media (max-width: 400px) {
    #onlineusers { gap: 5px; padding: 6px 8px; }
    .identity-search-input { font-size: 0.7rem; }
}

/* ── Allow identity dropdown to escape the card container ── */
#onlineusers-header {
    overflow: visible !important;
}
.identity-dropdown {
    z-index: 9999 !important;
} 

/* ========== STICKY SIDEBAR WITH SOLID BACKGROUND ========== */

.container-fluid.chatbox {
    min-height: 100vh;
    overflow-y: visible;
}

.chatbox .row {
    display: flex;
    align-items: flex-start;
    margin: 0 !important;
    width: 100%;
}

#side-1 {
    padding: 0 !important;
    margin: 0 !important;
}

/* Solid background for the entire left card – fills viewport, scrolls internally */
#side-1 .card {
    background: #0d0d0f !important;
    backdrop-filter: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Custom scrollbar on the card (webkit) ── */
#side-1 .card::-webkit-scrollbar {
    width: 4px;
}
#side-1 .card::-webkit-scrollbar-track {
    background: transparent;
}
#side-1 .card::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}
#side-1 .card::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}
/* Firefox */
#side-1 .card {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

/* Profile header – solid background, sticky */
#side-1 .card-header:first-child {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #0d0d0f !important;
    border-bottom: 1px solid rgba(255, 51, 153, 0.3);
    padding: 10px 12px !important;
    margin: 0 !important;
}

/* Online users header – solid background, sticky below profile */
#onlineusers-header {
    position: sticky;
    top: 56px;                      /* adjust to match profile header height */
    z-index: 9;
    background: #0d0d0f !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 51, 153, 0.2);
    padding: 0 !important;
    margin: 0 !important;
}

#onlineusers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 6px 12px !important;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    background: #0d0d0f !important;
}

/* User list – custom scrollable container, no fixed height */
#lstChat {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── Custom scrollbar for #lstChat (webkit) ── */
#lstChat::-webkit-scrollbar {
    width: 4px;
}
#lstChat::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}
#lstChat::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
    transition: background 0.2s;
}
#lstChat::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}
/* Firefox */
#lstChat {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

#side-1 .list-group-item {
    padding: 10px 12px;
    margin: 0;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(255, 51, 153, 0.1);
    border-radius: 0 !important;
    background: #0d0d0f;
    color: #fff;
    transition: all 0.2s;
}

#onlineUsersCount {
    margin: 0;
    white-space: nowrap;
    color: #ff66b2;
}

/* When chatbox is active: lock body scroll so only #lstChat scrolls the user list */
body.chatbox-active {
    overflow: hidden !important;
}

@media (max-width: 768px) {
    #onlineusers-header {
        top: 54px;
    }
    #side-1 .card-header:first-child {
        padding: 8px 10px !important;
    }
    #onlineusers {
        padding: 4px 10px !important;
    }
}

body.in-call #side-1 {
    display: none !important;
} 

/* ========== FIX WHITE STRIPS ON MOBILE/TABLET ========== */
/* Reset html/body to avoid background bleed */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
    min-height: 100vh !important;
    background: #0d0d0f !important; /* match dark theme */
}

/* Ensure chatbox covers entire viewport without gaps */
.container-fluid.chatbox {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    background: #0d0d0f !important;
}

/* Remove Bootstrap row negative margins and padding */
.chatbox .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Remove column padding in chat interface */
#side-1, #side-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Fullscreen video call mode - no gaps anywhere */
.chatbox.fullscreen,
.chatbox.fullscreen .row,
.chatbox.fullscreen #side-2,
.chatbox.fullscreen #side-2 .card,
.chatbox.fullscreen #messages_video,
.chatbox.fullscreen .videos-row,
.chatbox.fullscreen .video-container,
.chatbox.fullscreen figure {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.chatbox.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
}

/* Remove any default figure margins */
figure {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #000;
}

/* Hide scrollbars that may cause white strips on mobile */
body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Fix for Bootstrap card inner spacing */
.card {
    border: none !important;
    margin: 0 !important;
}

/* Ensure left panel (user list) has no outer gaps on mobile */
@media (max-width: 768px) {
    #side-1.mobile-full,
    #side-1 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #side-1 .card {
        border-radius: 0 !important;
        margin: 0 !important;
    }
} 
/* ── Peer media state icons (camera-off / mic-off) ── */
#peer-video-off-icon,
#peer-mic-off-icon {
    position: absolute;
    top: 10px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    pointer-events: none;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 68, 68, 0.4);
    animation: peerIconFadeIn 0.2s ease;
}

#peer-video-off-icon {
    right: 10px;
}

#peer-mic-off-icon {
    right: 54px;
}

#peer-video-off-icon .material-icons,
#peer-mic-off-icon .material-icons {
    color: #ff4444;
    font-size: 20px;
}

@keyframes peerIconFadeIn {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}