#txtcomment {
  display: none;
}

.comment-box {
  background-color: #171717c1;
  border: 1px solid #484848;
  padding: 10px;
  margin-top: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 3px #474747a5;
  transition: box-shadow 0.2s ease;
  min-width: 95%;
  position: relative;
  font-size: 14px;
  overflow: hidden;
  overflow-x: auto;
  color: #f7f7f7;
}
.reply-box {
  background-color: #ffffff28;
  border: 1px solid #e0e0e0;
  padding: 10px;
  margin-top: 15px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
  min-width: 95%;
  position: relative;
  font-size: 14px;
  overflow: hidden;
  overflow-x: auto;
}
.comment-box:hover,
.reply-box:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#togglecommcon {
  background-color: #ffffff86;
}
#notifto {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.comment-box textarea {
  width: 100%;
  height: 15vh;
  padding: 10px 10px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid #cccccc66;
  border-radius: 6px;
  resize: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background-color: #ffb83553;
  color: #efefef;
}

.login-prompt {
  text-align: center;
  width: 100%;
  border-radius: 10px;
  padding-bottom: 2px;
}
.login-prompt button {
  text-align: center;
  padding: 5px;
  width: 97%;
  font-size: 16px;
  background-color: #262626 !important;
  color: #efefef;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #969696;
}
.login-prompt button:hover {
  background-color: #a9a9a97c !important;
  box-shadow: 0 0 0 2px #989898;
  transition: all 0.3s ease;
}

.login-prompt p,
.login-prompt a {
  margin-top: 3vh;
  font-size: 12px;
  text-decoration: none;
  color: #8b8b8b;
}

.local-login-form input {
  padding: 10px 5px;
  border: 1px solid grey;
  outline: none;
  border-radius: 10px;
  margin-bottom: 10px !important;
}

.replies {
  margin-left: 20px;
  border-left: 2px solid #bebebe;
  padding-left: 15px;
  position: relative;
}

.main-actions {
  margin-top: 10px;
  gap: 10px;
  display: none;
  flex-direction: column;
  width: auto;
  right: 20px;
  bottom: 70px;
  position: fixed;
  z-index: 9999;
  transition: all 0.5s ease-in-out;
}
.main-actions.slide-right {
  right: 31.5%;
  transition: all 0.5s ease-in-out;
}
.comments-drive button {
  border: none;
  color: #2b2b2b;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  background-color: #ecececd5;
  transition: background-color 0.2s ease;
}

.comments-drive button:hover {
  background-color: #ececec46;
}

.comments-drive button.delete {
  background-color: #eeeeeebe;
  top: 5px;
  right: 5px;
  position: absolute;
}

.comments-drive button.delete:hover {
  background-color: #f97f8b;
}

.comments-drive button.edit {
  background-color: #eeeeeebe;
  color: #212529;
  top: 5px;
  right: 50px;
  position: absolute;
}

.comments-drive button.edit:hover {
  background-color: #f8c736;
}

.comments-drive button.reply {
  background-color: #b1d7ff;
}

.comments-drive button.reply:hover {
  background-color: #61a9f6;
}

.comments-drive button svg {
  padding: 0px;
  margin-top: 2px;
}

.main-actions button {
  border: none;
  color: #e7e7e7;
  padding: 10px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  background-color: #ececec4b;
  transition: background-color 0.2s ease;
}
.main-actions svg {
  color: white;
}
/* Settings Modal */

#settingsModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000d3;
  z-index: 9999;
  color: white;
  margin: 0px;
  padding: 10px;
}

.control-setbox {
  margin-top: -3vh;
  background: #1f1f1f;
  padding: 20px 30px;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  position: relative;
  max-height: 85vh;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.control-setbox input {
  width: 100% !important;
  padding: 10px;
  margin-bottom: 10px;
  margin-top: 5px;
  border-radius: 5px;
  border: 2px solid #d1d1d17c;
  background-color: #1f1f1f;
  color: #ececec;
}

.control-setbox h2 {
  margin-top: 0;
  font-size: 20px;
}

.close-modal {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: #ededed;
}

#settingsModal .button-group {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

#settingsModal button {
  flex: 1;
  border-radius: 5px;
  border: none;
}

.status {
  margin-top: 10px;
  color: red;
  font-size: 0.9em;
}

/* ------------ */

textarea:focus {
  border-color: #1f1f1f;
  box-shadow: 0 0 0 3px #1f1f1f42;
  outline: none;
}
.comment-username {
  font-weight: bold;
}

.commenthumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
}

.initials-thumb {
  color: white;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  font-family: sans-serif;
}

.comment-text {
  margin-top: 5px;
  overflow-y: auto;
  word-wrap: break-word;
}
.comment-actions {
  margin-top: 5px;
  display: flex;
  gap: 5px;
}

#comments-container {
  height: calc(72vh - 50px);
  overflow-y: auto;
  padding: 10px;
  padding-top: 0px;
  background-color: #ededed39 !important;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#comments-container.loading {
  background: linear-gradient(45deg, #191919b6, #353535b6, #464646b6);
  background-size: 600% 600%;
  animation: gradientMove 1s ease infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.comments-drive::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
}
#comments-container::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
}
#shwcmnt {
  pointer-events: auto;
}
#shricon svg {
  width: 16px;
  height: 16px;
}
#shriconGlo svg {
  width: 16px;
  height: 16px;
}
.container {
  padding: 0px;
  width: 100%;
  overflow-y: auto;
  transition: all 0.5s ease-in-out;
}
#floating-smiley-box {
  position: absolute;
  background: #fff;
  right: 20px;
  border: 1px solid #ccc;
  padding: 0px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  max-width: 90%;
  max-height: 35vh;
  overflow-y: auto;
  scrollbar-width: thin;
  border-radius: 6px;
  overflow-x: hidden;
}
#emoji-container {
  min-height: 150px;
  scrollbar-width: thin;
}

#gif-box {
  position: absolute;
  max-width: 90% !important;
  right: 20px;
  max-height: 300px;
  background: #fff;
  border: 1px solid #ccc;
  padding: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 999;
}

#gif-search {
  width: 100%;
  padding: 6px;
  margin-bottom: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
}

.gif-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow-y: auto;
  max-height: 150px;
  scrollbar-width: thin;
}

.gif-grid img {
  width: 31.5%;
  height: auto;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.2s ease;
}

.gif-grid img:hover {
  transform: scale(1.05);
}

.media-box,
.comments-drive {
  /* height: 100%; */
  transition: all 0.5s ease-in-out;
}

.media-box {
  width: 100%;
  z-index: 1;
}

.comments-drive {
  width: 0vw;
  overflow-y: auto;
  z-index: 999999;
}

.container.show-comments .media-box {
  width: 70%;
  transition: all 0.5s ease-in-out;
}

.container.show-comments .comment-section {
  width: 30%;
  transition: all 0.5s ease-in-out;
}
.comment-section {
  right: 10px;
  top: 0px;
  position: fixed;
  width: 30%;
  height: calc(100vh - 60px);
  z-index: 1;
  transition: all 0.5s ease-in-out;
  display: none;
}
.comment-section pre,
.comment-section pre {
  color: silver;
  scrollbar-width: thin;
  width: 100%;
  max-height: 25vh;
  overflow-y: auto;
  word-wrap: break-word;
  padding: 5px;
  background-color: #000000;
  border-radius: 5px;
}
/* Optional: adjust on small devices */
#preview.override-padding {
  padding-bottom: 5px !important;
}

.embed-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 1em 0;
  overflow: hidden;
  border-radius: 8px;
}

/* Responsive iframe or video inside embed */
.embed-container iframe,
.embed-container video {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

/* Optional: audio styling */
.embed-container audio {
  width: 100%;
}

/* For 16:9 aspect ratio iframe (e.g., YouTube) */
.embed-container.ratio-16-9 {
  padding-bottom: 56.25%;
  height: 0;
}

.embed-container.ratio-16-9 iframe {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

@media (max-width: 768px) {
  #preview {
    padding-bottom: 50px !important;
  }
  #preview.override-padding {
    padding-bottom: 5px !important;
  }

  .container {
    overflow-y: auto;
  }
  .comments-drive {
    top: 0px;
    left: 0px;
    position: absolute;
    height: auto;
    width: 100vw;
    max-width: 100vw;
    padding: 0px !important;
    background-color: #1f1f1f7e;
  }

  .comment-section {
    top: 0px;
    right: 0px;
    display: none;
    padding: 10px;
    padding-top: 0px;
    width: 100% !important;
  }
  #shwcmnt {
    pointer-events: auto;
  }

  .container.show-comments .media-box {
    width: 100%;
  }
  .container.show-comments .comments-drive {
    width: 100vw;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 3;
    height: 100vh;
    padding: 10px;
  }
  .comments-drive {
    padding: 0px;
  }

  #txtcomment {
    display: inline-block;
  }

  .comment-box textarea {
    height: 12vh;
  }

  .main-actions {
    height: 0;
    overflow: hidden;
    left: 0px !important;
    bottom: 53px !important;
    position: fixed !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    padding: 0px;
    background-color: #363636;
    z-index: 10000 !important;
    transition: height 0.3s ease, padding 0.3s ease;
    pointer-events: none; /* default state */
  }

  .main-actions.visible {
    height: auto;
    padding-top: 5px;
    padding-bottom: 5px;
    pointer-events: auto;
  }

  .main-actions.slide-right {
    right: 0;
    transition: all 0.5s ease-in-out;
  }
  #comments-container {
    height: 60vh;
    background: #363636cf !important;
    padding: 5px;
    padding-top: 0px;
  }
  #togglecommcon {
    display: none;
  }
}

@media (max-width: 500px) {
  .main-actions {
    height: 0;
    overflow: hidden;
    left: 0px !important;
    bottom: 52px !important;
    position: fixed !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    padding: 0px;
    background-color: #363636;
    z-index: 1000000001 !important;
    transition: height 0.3s ease, padding 0.3s ease;
    pointer-events: none; /* default state */
  }
  .main-actions.visible {
    height: auto;
    padding-top: 5px;
    padding-bottom: 7px;
    pointer-events: auto;
  }
}