:root{
  --bg:#0f1114;
  --card:#16181b;
  --muted:#cfbe22;
  --accent:#3dbf7f;
}
::-webkit-scrollbar {width: 0px !important}
 ::-webkit-scrollbar-track {background: #242526;}
 ::-webkit-scrollbar-thumb {background: #3A3B3C;}
  
*{
  box-sizing:border-box;
  font-family:Inter,Arial,Helvetica,sans-serif
}
body{
  margin:0;
  background:linear-gradient(180deg,#0b0d0f,#111214);
  color:#e6eef3;
  height:100vh;
  width: 100vw;
  overflow: hidden;
}

.page-load {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  display: none;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  z-index: 200000;
}
.page-load.active {
  display: flex
}
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
}
.loader::before,
.loader::after {    
  content:"";
  grid-area: 1/1;
  --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
  background: 
    var(--c) 50%  0, 
    var(--c) 50%  100%, 
    var(--c) 100% 50%, 
    var(--c) 0    50%;
  background-size: 12px 12px;
  animation: l12 1s infinite;
}
.loader::before {
  margin: 4px;
  filter: hue-rotate(45deg);
  background-size: 8px 8px;
  animation-timing-function: linear
}

@keyframes l12 { 
  100%{transform: rotate(.5turn)}
}

.card{
  max-width:320px;
  margin:40px auto;
  padding:20px;
  border-radius:10px;
  background:var(--card);
  box-shadow:0 6px 18px rgba(0,0,0,.6)
}
.card img {
  width: 150px;
  display: block;
  margin: auto;
}
.hidden{display:none}
input, textarea{
  width:100%;
  padding:10px;
  margin:8px 0;
  border-radius:6px;
  border:1px solid #222;
  background:#0d0f11;
  color:#fff;
  outline: none;
}
button{outline:none !important;background:var(--accent);border:none;padding:10px 14px;border-radius:8px;color:#04260f;font-weight:700;cursor:pointer}
.msg{margin-top:8px;color: #f4a261}

/* chat layout */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  background:linear-gradient(180deg,#0b0d0f,#111214);
}
.topbar > div {
  width: fit-content;
}
.body-container{
  height:calc(100vh);
  gap:12px;
  width: 100%;
  display: flex;
}
.sidebar{
  background:#0d0f11;
  border-radius:8px;
  padding:8px;
  height: 100%;
  overflow-y:auto;
  width: 33.33%;
  position: relative;

}
.main {
  width: 66.67%;
}

.convo-list{
  list-style:none;
  padding:0;
  margin:0;
  height: 100%;
  overflow-y: auto;
}
.convo-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
  border-radius:6px;
  margin-bottom:6px;
  background:#0b0d0f;
  cursor:pointer;
}
.convo-item.active, .convo-item:hover {
  background:#13221a
}
.convo-left{
  display:flex;
  gap:10px;
  align-items:center
}
.icon{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#1e1f22
}
.title{font-weight:700}
.meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end
}
.badge {
  background:#e63946;
  color:white;
  border-radius:999px;
  padding:2px 8px;
  font-size:12px
}
.timestamp{
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
}
.call-t i {
  font-size: 20px;
  transform: rotate(-45deg);
}

/* main messages */
.active-title {
  position: sticky;
  top: 0;
  background: rgba(0,0,0,1);
  padding: 20px;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.active-title > i {
  font-size: 15px;
}
.back-btn {
  display: none;
}
.main{
  flex: 1;
  display: flex;
  flex-direction: column;
  background:#0b0d0f url("/logos/chat.png") no-repeat fixed center;
  background-size: cover;
  border-radius:8px;
  padding:12px;
  position: relative;
}
.encrypt {
  font-size: 12px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  position: absolute;
  top: 75px;
  text-align: center;
}
.message-con {
  height: calc(100vh - 100px);
  overflow-y: auto;
  padding-bottom: 25px;
}
.messages{
  flex:1;
  overflow:auto;
  padding:8px;
}
.msg-row{display:flex;margin:6px 0;max-width:80%;position:relative;}
.msg-row.me{margin-left:auto;flex-direction:column;align-items:flex-end}
.bubble{
  padding:8px 12px;
  border-radius:12px;
  background:#191c1f;
  color:#fff
}
.bubble.me{background:#114d20;color:#eee}
.meta-small{font-size:10px;color:gray;margin-top:6px; text-align:right}
.file-con {
  width: 100%;
  position: relative;
  margin-bottom: 15px;
  padding: 8px;
  background: rgba(0,0,0,0.5);
  border-radius: 8px;
}

.file-con img, .file-con video, .file-con audio {
  max-width: 100%;
}
.file-con a {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 50%;
  border: 1px solid yellow;
}
.file-con .w-flex {
  width: 100%;
  gap: 8px;
}

.composer{
  display:flex;
  gap:8px;
  justify-content: space-around;
  align-items: flex-end;
  padding:5px;
  height: 80px;
}
.chat-form {
  width: calc(100% - 50px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 5px 15px;
  gap:10px;
  border-radius: 30px;
}
.chat-form i {
  color: #222;
  font-size: 20px;
}
.chat-form textarea {
  background: transparent;
  box-shadow: none;
  outline: none;
  color: #111;
  width: calc(100% - 30px);
  font-size: 15px;
  padding: 5px;
  border: none;
  resize: none;
  max-height: 100px;
  overflow-y: hidden;
}

#btn-send {
  font-size: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  outline: none;
  border:none;
}
/* Emoji */
.dd-content {
  position: absolute;
  bottom: 90px;
  left: 20px;
  z-index: 100;
  width: calc(100% - 40px);
  background: #fff;
  border-radius: 15px;
  transform: scale(0);
  transition: .3s all ease-in-out;
}
.dd-content.show {
  transform: scale(1);
  
}

.tab-content {
  height: 150px;
  overflow-y: auto;
  background: #111;
}
.dd-content span:hover {
  background: #111;
}
a.nav-link {
  padding: 5px;
  text-align: center;
  font-size: 22px;
  border: none !important;
  outline: none;
  background: #111 !important;
}
a.nav-link.active {
  border-bottom: 2px solid yellow !important;
}
.nav-item {
  background: #111;
}
.dd-emoji {
  background: #111;
}
.content-emoji {
  background: #111;
}
.emoji {
  font-size: 25px;
  cursor: pointer;
  outline: none;
  border: none;
  margin: 5px;
}

.new-c {
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  position: fixed;
  z-index: 270;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  transition: .5s all ease;
  align-items: center;
}

.new-c.active {
  display: flex;
}
.new-con{
  width: 95%;
  max-width:320px;
  max-height: 98vh;
  overflow-y: auto;
  padding:20px;
  border-radius:10px;
  background:var(--card);
  box-shadow:0 6px 18px rgba(0,0,0,.6);
}

@media screen and (max-width: 767px) {
  .back-btn {
    display: inline-block;
  }
  .sidebar, .main {
    width: 100%;
  }
  .sidebar {
    display: block !important;
  }
  .main {
    display: none !important;
  }
  .main.show {
    display: flex !important;
  }
  .sidebar.hide {
    display: none !important;
  }
}

.n_error {
  background: rgb(126, 4, 4);
  color: #fff;
}
.n_network {
  background: orangered;
  color: #fff;
}
.n_info {
  background: rgb(1, 1, 155);
  color: #fff;
}
.n_warning {
  background: rgb(143, 143, 1);
  color: #000;
}
.n_success {
  background: rgb(0, 128, 0);
  color: #fff;
}

.file-send-con {
  position: absolute;
  bottom: 90px;
  width: 90%;
  left: 5%;
  border-radius: 20px;
  height: auto;
  transform: scale(0);
  background: #000;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  transition: .3s all ease-in-out;
}
.file-send-con.active {
  transform: scale(1);
}
.file-send-con input {
  position: fixed;
  top: -10000px;
}
.file-send-con .file-send-item {
  padding: 10px;
  text-align: center !important;
}
.file-send-item i {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  font-size: 25px;
  background: #111 !important;
  border: 1px solid gray;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
}
.doc-file {color: purple}
.audio-file {color: orangered}
.video-file {color: lightgreen}
.image-file {color: lightblue}

.file-preview {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  border-radius: 20px;
  height: calc(100vh - 90px);
  transform: scale(0);
  background: rgba(0,0,0,0.8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 10px;
  flex-direction: column;
  transition: .3s all ease-in-out;
}
.pdf-viewer {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  height: 100vh;
  transform: scale(0);
  background: rgba(0,0,0,0.8);
  transition: .3s all ease-in-out;
  z-index: 1000;
}
#pdf-viewer {
  height: 100%;
}
.pdf-close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: red !important;
  font-size: 30px;
  z-index: 200;
}

.translate-con {
  position: absolute;
  bottom: 90px;
  width: 90%;
  left: 5%;
  border-radius: 20px;
  padding: 10px;
  height: auto;
  transform: scale(0);
  background: #000;
  display: flex;
  justify-content: space-around;
  gap: 5px;
  align-items: center;
  transition: .3s all ease-in-out;
}
.translate-con.active {
  transform: scale(1);
}
.translate-con select {
  padding: 10px;
  background: #111;
  color: #eee;
  outline: none;
  border: none;
}

/* The Modal (background) */
.image-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100vh; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.image-modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.image-modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close-image {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close-image:hover,
.close-image:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .image-modal-content {
    width: 100%;
  }
}
.file-preview.active, .pdf-viewer.active {
  transform: scale(1);
}
.file-preview img, .file-preview video,
.file-preview audio {
  width: 100%;
  height: auto;
  background: #fff;
}
.file-det {
  display: flex;
  margin-top: 5px;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 20px;
}
audio, video {
  max-width: 100%;
}
.file-s-close {
  color: #fff;
  font-size: 25px;
  position: absolute;
  top: 70px;
  right: 10px;
  background: #000;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}


.bottom-nav > a {
  
}
.bottom-nav > a > i {
  font-size: 18px;
}
.owl-carousel {
  position: relative;
}

.owl-carousel .item {
  height: calc(100vh - 190px) !important;
  position: relative;
  padding-bottom: 30px;
}
/* Center the dots */
.custom-dots {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #000;
  height: 80px;
  overflow: hidden;
  padding: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Style the dots */
.owl-dot {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 70px;
  height: 60px;
  position: relative;
  background: transparent;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.owl-dot i {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 8px;
  border-radius: 20px;
}

/* Active dot style */
.owl-dot.active > i,
.owl-dot:hover > i {
  background: rgba(1, 207, 1, 0.2);
  transform: scale(1.2);
}
.owl-dot.active > span,
.owl-dot:hover > span {
  font-weight: bolder;
}


/* The container <div> - needed to position the dropdown content */
.dropdown-men {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #313131;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(97, 97, 97, 0.2);
  z-index: 100;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: fff;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #000;color:#fff}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.vc-btn {
  padding: 10px 15px;
  margin: 5px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.vc-btn:disabled {
  opacity: 0.5;
}

.call-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 130;
  padding: 10px;
}

.call-modal.hidden {
  display: none;
}

.call-modal-content {
  background: #222;
  padding: 50px 20px;
  border-radius: 10px;
  width: 95%;
  height: 98%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.call-modal-content img {
  width: 150px;
  height: auto;
}


nav{
  position: fixed;
  bottom: 80px;
  right: 10px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 250;
}
nav .nav-content{
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-45deg);
  position: relative;
}
.nav-content .toggle-btn,
.nav-content span a{
  height: 60px;
  width: 60px;
  background-image: linear-gradient(top, #000000, #33323a);
  background-image: -webkit-linear-gradient(top, #000000, #33323a);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 18px 36px 0 rgba(49, 49, 49, 0.2);
}
.nav-content .toggle-btn{
  font-size: 35px;
  color: #fff;
  display: flex;
  z-index: 100;
  cursor: pointer;
  transform: rotate(-225deg);
  transition: all 0.6s ease;
}
nav.open .toggle-btn{
  transform: rotate(0deg);
}
.nav-content span{
  position: absolute;
  transition: all 0.6s ease;
  opacity: 0;
}
nav.open .nav-content span{
  transform: rotate(calc(5 * (360deg/8))) translateY(calc(var(--i) * 100px));
  opacity: 1;
}
.nav-content span a {
  text-decoration: none;
  transform: rotate(45deg);
}
.nav-content span p {
  transform: rotate(180deg);
  color: #eee;
  font-size: 12px;
  white-space: nowrap;
}
.nav-content span a i{
  font-size: 24px;
  color: #fff;
  transform: rotate(calc(5 * (360deg/ -8)));
  opacity: 0.8;
  transition: 0.2s;
}
.nav-content span a:hover i{
  opacity: 1;
}

.mem-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.mem-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
}

.friend-list, .member-list {
  list-style-type: none;
  padding: 5px;
}
.friend-list li, .member-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 5px;
  border: 1px solid rgba(255,255,255,0.2);
}

.unr {
  position: absolute;
  background:#e63946;
  color:white;
  border-radius:999px;
  padding:2px 8px;
  font-size:12px;
  top: -5px;
  left: 50px;
  display: none;
  z-index: 10;
}
.unr.active {
  display: block;
  width: fit-content;
}

.grp-det {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}
.grp-det img {
  width: 150px;
}