* {font-family: 'Noto Sans', sans-serif;}

.material-symbols-rounded {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  font-family: 'Material Symbols Rounded', sans-serif !important;
}

button#mic-btn, #mic-btn, button[id="mic-btn"] {
  font-family: 'Material Symbols Rounded', sans-serif !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px !important;
  line-height: 1 !important;
  height: 45px !important; /* Match height with other buttons */
  width: 45px !important; /* Make it square like other buttons */
  min-height: 45px !important;
  min-width: 45px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px !important;
  margin: 0 1px 0 5px !important; /* Reduced right margin to bring the button closer to the next icon */
  box-sizing: border-box !important;
}
html, body {
  scroll-behavior: smooth;
}
body {
  background: rgb(36, 37, 37);
  color: rgba(229, 224, 216, 0.85);
}
.wrapper {
    margin-left: auto;
    margin-right: auto;
    max-width: 910px;
}

/* side bar */
.menu-list-wrap:hover .menu-list-btn-wrap {
  display: block;
}

.hide-sidbar-btn {
  transform: rotate(180deg);
}

.sidebar-wrapper {
  scrollbar-width: none;
  transition-duration: 0.4s;
  z-index: 9999;
}

.sidebar-wrapper::-webkit-scrollbar {
  display: none;
}

.sidebar-wrapper-position {
  margin-left: -256px;
}

.display-btn-sidbar {
  display: none;
}

.index-bg {
  z-index: 9999;
}

.chatarea {
  margin-top: 40px;
  overflow-y: auto;
  height: 272px;
}

.chattop {
background: rgb(36, 37, 37);
}

.chatarea * {color: #E5E0D8;}

.font-15 {font-size: 15px;}
.btnNone {display: none !important;}

/* scroll bar */
.chatarea::-webkit-scrollbar {
  width: 12px;
  background: #2b2d2d;
}

.chatarea::-webkit-scrollbar-thumb {
  background: #4e5151;
  border-radius: 0px;
}

.chatarea::-webkit-scrollbar-thumb:hover {
  background: #616161;
}

.chatarea::-webkit-scrollbar-corner {
  background-color: transparent;
}

#textmessage {
  height: 40px;
  min-height: 40px;
}
#textmessage::placeholder {font-size: 15px; color: #CFC9BF;}
.chattextarea * {color: #CFC9BF;}

/* chatting dots */
.typing-animation {
  display: inline-flex;
}
.typing-animation .typing-dot {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  margin: 0 3px;
  opacity: 0.7;
  background: #FFF;
  animation: animateDots 1.5s var(--delay) ease-in-out infinite;
}
.typing-animation .typing-dot:first-child {
  margin-left: 0;
}
@keyframes animateDots {
  0%,44% {
    transform: translateY(0px);
  }
  28% {
    opacity: 0.4;
    transform: translateY(-6px);
  }
  44% {
    opacity: 0.2;
  }
}

/* @media screen and (max-width: 890px) {
.wrapper {max-width: 100%; padding-left: 10px; padding-right: 10px;}
.mobile-m {
  margin-left: 55px;
}
} */

@media screen and (max-width: 890px) {
  .wrapper {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .mobile-m {
    margin-left: 55px;
  }

  .chatarea .wrapper {
    padding: 0;
  }
}

@media screen and (max-width: 776px) {
  .sidbar-responsive {
    margin-left: -256px;
  }

  .display-btn-sidbar {
    display: block;
  }
}

input[type="file"]{
  display: none;
}

label{
  cursor:pointer;
}

.CodeMirror {
  font-size: 15px;
  margin-bottom: 1em;
}

#imageName{
  color:green;
}

@media only screen and (max-width: 768px) {
  body {
    max-height: 100dvh;
    overflow: hidden;
  }

  body .whole-thing {
    min-height: 100dvh !important;
  }

  .sidebar-gorazd {
    max-height: 90dvh;
  }
}

@media only screen and (max-width: 580px) {
  .whole-thing {
    width: 100%;
    overflow: hidden;
  }

  .whole-thing .chatarea {
    width: 100%;
    overflow-x: hidden;
    padding-right: 0;
    padding-left: 0;
    margin-right: 0;
    padding-bottom: 1rem !important;
  }

  #chat-area {
    width: 100%;
  }

  #chat-area>* {
    width: 100%;
  }

  #chat-area>*>* {
    width: 92%;
    min-width: 92%;
  }
}

@media only screen and (max-width: 580px) {
  .the-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }

  .the-header>*:nth-child(1) {
    margin-left: 25px;
  }

  .the-header>*:nth-child(2) {
    width: 100%;
    justify-content: flex-end;
  }

  #textmessage {
    font-size: 16px;
  }

  #textmessage::placeholder {
    font-size: 16px;
  }

  #submit-message {
    padding-left: 2px;
    padding-right: 2px;
    margin-right: 0;
  }

  #customFileButton {
    padding-left: 2px;
    padding-right: 2px;
    margin-right: 0;
  }

  button#mic-btn, #mic-btn, button[id="mic-btn"] {
    padding: 6px !important;
    margin: 0 -3px 0 0px !important; /* Negative right margin to bring the button even closer to the next icon */
    font-size: 18px !important;
    font-family: 'Material Symbols Rounded', sans-serif !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    height: 40px !important; /* Slightly smaller for mobile but still substantial */
    width: 40px !important;
    min-height: 40px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  #clear-chat {
    padding-left: 2px;
    padding-right: 2px;
    margin-right: 0;
  }

  #submit-message>svg {
    height: 15px;
  }

  #customFileButton>svg {
    height: 15px;
  }

  #clear-chat>svg {
    height: 15px;
  }

  center>span.text-sm.p-2 {
    font-size: 12px;
  }

  center>span.text-sm.p-2>* {
    font-size: 12px;
  }
}