/* ========================================
   FONT DEFINITIONS
   ======================================== */

   @font-face {
    font-family: 'Astonpoliz';
    src: url('../fonts/Astonpoliz.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  /* ========================================
     CSS VARIABLES
     ======================================== */
  
  :root {
      --body-bg: #fff;
      --font-family: "Inter", sans-serif;
      --main: #008852;
      --main-color: #fff;
      --main-hover: #5d56c7;
      --main-hover-color: #fff;
      --tippy-bg: #ececec;
      --svg_admin: var(--main);
      --svg_creator: #00b2e8;
      --svg_mod: #c93473;
      --border-light: #e7e7e7;
      --primary-start: #5A67D8;
      --primary-end: #4FD1C5;
      --accent: #F56565;
      --background: #F7FAFC;
      --text: #2D3748;
      --muted: #A0AEC0;
      --shadow: rgba(0, 0, 0, 0.08);
      --highlight: rgba(255, 255, 255, 0.8);
      --modal-bg: #fff;
  }
  
  /* ========================================
     BASE STYLES
     ======================================== */
  
  * {
      outline: 0;
      word-break: break-word;
  }
  
  body,
  html {
      overflow-x: hidden;
  }
  
  body {
      background: var(--body-bg);
      font-family: var(--font-family);
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      min-height: 100%;
      overflow-y: scroll;
  }
  
  .black-hover:hover,
  a,
  body {
      color: #000;
  }
  [hover-tooltip]:hover::after,
  [hover-tooltip]:hover::before {
      left: 50%;
      -webkit-animation: 0.3s fade-in;
              animation: 0.3s fade-in;
      position: absolute;
      z-index: 1;
      display: block;
  }
  .tag_home_articles .thumb,
  .wallet_circle {
      aspect-ratio: 1;
  }
  .dash_comms img,
  .tag_edit_thumb img,
  .tag_home_articles .embed-responsive-item,
  .tag_home_articles .thumb,
  .tag_short_home_list a img,
  .tag_user_list .embed-responsive-item img {
      -o-object-fit: cover;
         object-fit: cover;
  }
  .play-list-cont,
  .popular_channels_list,
  .tag_video_grid.top {
      counter-reset: Serial;
  }
  .stars .star path,
  .stars[data-stars="1"] .star:first-child ~ .star path,
  .stars[data-stars="10"] .star:nth-child(10) ~ .star path,
  .stars[data-stars="2"] .star:nth-child(2) ~ .star path,
  .stars[data-stars="3"] .star:nth-child(3) ~ .star path,
  .stars[data-stars="4"] .star:nth-child(4) ~ .star path,
  .stars[data-stars="5"] .star:nth-child(5) ~ .star path,
  .stars[data-stars="6"] .star:nth-child(6) ~ .star path,
  .stars[data-stars="7"] .star:nth-child(7) ~ .star path,
  .stars[data-stars="8"] .star:nth-child(8) ~ .star path,
  .stars[data-stars="9"] .star:nth-child(9) ~ .star path {
      fill: #d7d7d7;
  }
  .play-list-cont .side-barlist-wrapper:before,
  .tag_video_grid.top .tag_video_grid_list:after {
      counter-increment: Serial;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      pointer-events: none;
  }
  body,
  html {
      overflow-x: hidden;
  }
  #emoji-suggestions,
  .suggestion-list {
      list-style: none;
      overflow-y: auto;
      z-index: 1000;
  }
  #emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 1000;
    width: 100%;
  }
  
  #emoji-picker em-emoji-picker {
    width: inherit;
  }
  
  #emoji-picker .flex-column {
    width: inherit !important;
  }
  .poll-option,
  .room-card {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
  }
  * {
      outline: 0;
      word-break: break-word;
  }
  a:hover {
      color: color-mix(in srgb, var(--main), #000 20%);
      text-decoration: none;
  }
  
  /* ========================================
     UTILITY CLASSES
     ======================================== */
  
  .black {
      color: #000;
  }
  
  .main {
      color: var(--main);
  }
  
  .bold {
      font-weight: 500;
  }
  
  .container {
      width: 100%;
      max-width: 1800px;
  }
  
  .flex-0 {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
  }
  
  .flex-1 {
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
  }
  
  .overflow-scroll {
      overflow: scroll;
  }
  
  .gap-10 {
      gap: 10px;
  }
  
  .gap-15 {
      gap: 15px;
  }
  
  .mw-0 {
      min-width: 0;
  }
  
  .r-none {
      resize: none;
  }
  
  .justify-content-space-between {
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
  }
  
  .rounded-lg {
      border-radius: 0.7rem !important;
  }
  
  .br-50 {
      border-radius: 50px;
  }
  
  .mb-20 {
      margin-bottom: 20px;
  }
  
  .mt-7 {
      margin-top: 7px;
  }
  
  .mb-6 {
      margin-bottom: 6px;
  }
  
  .fs-12 {
      font-size: 12px;
  }
  
  .pointer {
      cursor: pointer;
  }
  
  .grayscale {
      filter: grayscale(100%);
  }
  
  .pointer-events-none {
      pointer-events: none;
  }
  
  .hide_blur {
      filter: blur(0);
  }
  
  .display-4 {
      font-size: 2.5rem;
      font-weight: 300;
      line-height: 1.2;
  }
  
  /* =========================================
     Live Popover Styling (Header Avatars)
     ========================================= */
  
  .popover-live {
      background: var(--body-bg);
      border: 0;
      border-radius: 50px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05), 0 15px 40px rgba(0, 0, 0, 0.36);
  }
  .popover-live .popover-body {
      padding: 0;
      background: transparent;
  }
  .popover-live .arrow {
      display: none;
  }
  .main-menu-item-channel-live-wrapper {
      align-items: center;
      background-color: var(--border-light);
      border-radius: 25px;
      color: #333;
      display: flex;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: -3%;
      margin: 5px 8px;
      padding: 5px 8px;
  }
  .main-menu-item-channel-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ff3b30;
      margin-right: 6px;
  }
  
  /* ========================================
     CONTENT & LAYOUT
     ======================================== */
  .hover_path {
      display: none;
  }
  .content {
      background: #f9f9f9;
      -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
              box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
      border-radius: 16px;
  }
  .video-options .btn:hover {
      background: #fff;
      -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
              box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
  }
  .content.p-4 {
      padding: 2rem !important;
  }
  .black {
      color: #000;
  }
  .main {
      color: var(--main);
  }
  .bold {
      font-weight: 500;
  }
  .container {
      width: 100%;
      max-width: 1800px; /* 1500px; */
  }
  .table td,
  .table th {
      vertical-align: middle;
  }
  .rounded-lg {
      border-radius: 0.7rem !important;
  }
  .flex-0 {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
  }
  .flex-1 {
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
  }
  .overflow-scroll {
      overflow: scroll;
  }
  .gap-10 {
      gap: 10px;
  }
  .gap-15 {
      gap: 15px;
  }
  .mw-0 {
      min-width: 0;
  }
  .r-none {
      resize: none;
  }
  .grayscale-icon {
      filter: grayscale(100%);
      opacity: 0.6;
      transition: filter 0.2s ease, opacity 0.2s ease;
  }
  
  .grayscale-icon:hover {
      filter: grayscale(0%);
      opacity: 1;
  }
  .justify-content-space-between {
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
  }
  [hover-tooltip] {
      position: relative;
      cursor: default;
  }
  [hover-tooltip]:hover::before {
      content: attr(hover-tooltip);
      font-size: 14px;
      text-align: center;
      min-width: -webkit-max-content;
      min-width: -moz-max-content;
      min-width: max-content;
      bottom: calc(100% + 10px);
      -webkit-transform: translate(-50%);
          -ms-transform: translate(-50%);
              transform: translate(-50%);
      background: #272727;
      border-radius: 4px;
      padding: 10px;
      color: #fff;
  }
  [hover-tooltip]:hover::after {
      content: "";
      width: 0;
      height: 0;
      bottom: calc(100% + 6px);
      margin-left: -3px;
      border: 1px solid #000;
      border-color: #272727 transparent transparent;
      border-width: 4px 6px 0;
  }
  [hover-tooltip][tooltip-position="bottom"]:hover::before {
      bottom: auto;
      top: calc(100% + 10px);
  }
  [hover-tooltip][tooltip-position="bottom"]:hover::after {
      bottom: auto;
      top: calc(100% + 6px);
      border-color: transparent transparent #272727;
      border-width: 0 6px 4px;
  }
  @-webkit-keyframes fade-in {
      from {
          opacity: 0;
      }
      to {
          opacity: 1;
      }
  }
  @keyframes fade-in {
      from {
          opacity: 0;
      }
      to {
          opacity: 1;
      }
  }
  /* ========================================
     BUTTONS
     ======================================== */
  
  .btn {
      display: -ms-inline-flexbox;
      display: -webkit-inline-box;
      display: inline-flex;
      -ms-flex-align: center;
      -webkit-box-align: center;
              align-items: center;
      -ms-flex-pack: center;
      -webkit-box-pack: center;
              justify-content: center;
      gap: 5px;
      padding: 0 12px;
      line-height: 40px;
      border-radius: 50px;
      font-weight: 500;
  }
  .form-group .bootstrap-select > .dropdown-toggle.btn:after,
  .head_sidebar_menu a.active svg path:not(.hover_path),
  .head_sidebar_menu a:hover svg path:not(.hover_path) {
      display: none;
  }
  .btn svg {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
  }
  .btn.btn-sm {
      line-height: 26px;
      font-size: 0.75rem;
      padding: 0 16px;
  }
  .btn.btn-lg {
      line-height: 50px;
      font-size: 1.15rem;
      padding: 0 30px;
  }
  .btn:focus {
      -webkit-box-shadow: none;
              box-shadow: none;
  }
  .btn-default {
      color: #fff;
      background-color: #6c757d;
      border-color: #6c757d;
  }
  .btn-default:hover {
      color: #fff;
      background-color: #5a6268;
      border-color: #545b62;
  }
  .btn-light,
  .btn-subscribed {
      background-color: #e1e2e4;
      border-color: #eef0f2;
  }
  .btn-main-outline {
      background: 0 0;
      color: var(--main);
      border: 2px solid var(--main);
      line-height: 38px;
  }
  .btn-main,
  .btn-main-outline:hover,
  .btn-subscribe {
      background: var(--main);
      color: var(--main-color);
  }
  .btn-main:hover,
  .btn-subscribe:hover {
      background: var(--main-hover);
      color: var(--main-hover-color);
  }
  .btn-close {
      padding: 0;
      width: 40px;
      height: 40px;
      right: 0;
      top: 0;
      margin: 15px;
      background: rgb(0 0 0 / 7%);
      z-index: 1;
  }
  .btn-close:hover {
      background: rgb(0 0 0 / 10%);
  }
  /* ========================================
     FORMS
     ======================================== */
  
  .form-group {
      position: relative;
      margin-bottom: 1.5rem;
  }
  .form-group ul.tagit,
  .form-group > .form-control {
      height: calc(3.5rem + calc(1px * 2));
      line-height: 1.25;
      border-color: #dedede;
      background: rgb(0 0 0 / 1%);
      border-radius: 0.6rem;
  }
  .form-group > .form-control:focus {
      border-color: var(--main);
      -webkit-box-shadow: 0 0 0 1px var(--main);
              box-shadow: 0 0 0 1px var(--main);
  }
  .form-group ul.tagit,
  .form-group > textarea.form-control {
      height: auto;
      min-height: calc(3.5rem + calc(1px * 2));
  }
  .form-group > .form-control.border_class {
      border-color: #ef4c5d;
  }
  .form-group > .form-control.border_class:focus {
      -webkit-box-shadow: 0 0 0 1px #ef4c5d;
              box-shadow: 0 0 0 1px #ef4c5d;
  }
  .form-group > .form-control::-webkit-input-placeholder {
      opacity: 0;
  }
  .form-group > .form-control::-moz-placeholder {
      opacity: 0;
  }
  .form-group > .form-control:-ms-input-placeholder {
      opacity: 0;
  }
  .form-group > .form-control::-ms-input-placeholder {
      opacity: 0;
  }
  .form-group > .form-control::placeholder {
      opacity: 0;
  }
  .form-group > input.form-control,
  .form-group > select.form-control,
  .form-group > textarea.form-control {
      padding-top: 1.625rem;
      padding-bottom: 0.625rem;
  }
  .form-group > select.form-control {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }
  .form-group .bootstrap-select > .dropdown-toggle.btn,
  .form-group > select.form-control:not([multiple]) {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 0.75rem center;
      background-size: 16px 12px;
  }
  .form-group > label {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      height: 100%;
      padding: 1rem 0.75rem;
      overflow: hidden;
      -o-text-overflow: ellipsis;
         text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: none;
      border: 1px solid transparent;
      -webkit-transform-origin: 0 0;
          -ms-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
      transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
      -o-transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
      transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
      transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
      margin: 0;
      color: rgb(0 0 0 / 70%);
      max-width: 100%;
  }
  .form-group > .form-control:not(:-moz-placeholder-shown) ~ label {
      color: var(--main);
      transform: scale(0.83) translateY(-0.5rem) translateX(0.15rem);
      font-weight: 500;
  }
  .form-group > .form-control:not(:-ms-input-placeholder) ~ label {
      color: var(--main);
      -ms-transform: scale(0.83) translateY(-0.5rem) translateX(0.15rem);
          transform: scale(0.83) translateY(-0.5rem) translateX(0.15rem);
      font-weight: 500;
  }
  .form-group > .form-control:focus ~ label,
  .form-group > .form-control:not(:placeholder-shown) ~ label {
      color: var(--main);
      -webkit-transform: scale(0.83) translateY(-0.5rem) translateX(0.15rem);
          -ms-transform: scale(0.83) translateY(-0.5rem) translateX(0.15rem);
              transform: scale(0.83) translateY(-0.5rem) translateX(0.15rem);
      font-weight: 500;
  }
  .custom-control-label {
      cursor: pointer;
  }
  .custom-control-input:checked ~ .custom-control-label::before,
  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
      color: var(--main-color);
      background-color: var(--main);
      border-color: var(--main);
  }
  .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
      opacity: 0.3;
  }
  .custom-control-input:focus ~ .custom-control-label::before {
      -webkit-box-shadow: none;
              box-shadow: none;
  }
  .progress {
      height: 0.25rem;
  }
  .form-group ul.tagit {
      padding: 1.4rem 0.75rem 0.1rem;
      margin: 0;
  }
  .form-group ul.tagit li.tagit-choice-editable {
      padding: 0.185em 18px 0.185em 0.5em;
  }
  .form-group .bootstrap-select > .dropdown-toggle.btn {
      background-color: transparent;
      border-color: #dedede;
      border-radius: 0.6rem;
      font-weight: 400;
      line-height: 56px;
      padding: 0 0.75rem;
      -webkit-box-shadow: none !important;
              box-shadow: none !important;
      color: rgb(0 0 0 / 70%);
  }
  .form-group .bootstrap-select > .dropdown-toggle.btn:focus {
      outline: 0 !important;
  }
  /* ========================================
     MODALS
     ======================================== */
  
  .modal.show {
    transform: translateY(0);
    animation: slideUp 0.4s ease-in-out forwards;
  }
  
  .modal {
    bottom: 0;
    top: auto;
    height: auto;
    animation: slideDown 0.4s ease-in-out forwards;
  }
  .modal.fade:not(.show) {
    opacity: 1;
  }
  .modal.fade {
    transition: opacity 0.4s linear;
  }
  .modal-dialog {
    margin: 0 auto;
  }
  .modal-content {
      border: 0;
      border-radius: 12px 12px 0 0;
      -webkit-box-shadow: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px rgb(0 0 0 / 30%);
              box-shadow: 0 4px 8px 3px rgb(0 0 0 / 15%), 0 1px 3px rgb(0 0 0 / 30%);
  }
  .modal-content:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 1.8rem;
      opacity: 0.07;
  }
  .modal-content .modal-body,
  .modal-content .modal-footer,
  .modal-content .modal-header {
      position: relative;
      z-index: 1;
  }
  .modal-header {
      padding: 1.5rem 1.5rem 1rem;
      border: 0;
  }
  .modal-title {
      line-height: 1.3;
      font-size: 1.5rem;
  }
  .modal-body {
      padding: 2px 1.5rem 1.5rem;
      overflow-y: auto;
      max-height: calc(100vh - 200px);
      max-height: calc(var(--vh, 1vh) * 100 - 200px);
  }
  .modal-open .modal {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
    overflow: hidden;          /* Ensures no scrolling (Bootstrap already adds this, but reinforce if needed) */
  }
  
  .modal-open .modal::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, and Opera */
  }
  .modal-body .form-group > .form-control,
  .swal2-modal .form-group > .form-control {
      background: #fff;
  }
  .modal-footer {
      padding: 0 1.5rem 1.5rem;
      border: 0;
      gap: 6px;
  }
  .modal-footer .btn {
      margin: 0;
  }
  .modal-footer .btn.btn-link,
  .swal2-modal .swal2-buttonswrapper .btn.btn-link {
      color: var(--main);
  }
  .lang_modal .language_select a {
      position: relative;
      display: block;
      color: var(--main);
      font-weight: 500;
  }
  .et_plus {
      -webkit-backdrop-filter: blur(20px);
              backdrop-filter: blur(20px);
  }
  .page_loading_bar {
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      z-index: 5000;
      display: none;
  }
  .page_loading_bar:before {
      display: block;
      position: absolute;
      content: "";
      left: -200px;
      width: 200px;
      height: 3px;
      -webkit-animation: 1.5s linear infinite hdr_loading;
              animation: 1.5s linear infinite hdr_loading;
      background: var(--main);
  }
  @-webkit-keyframes hdr_loading {
      from {
          left: -200px;
          width: 30%;
      }
      50% {
          width: 30%;
      }
      70% {
          width: 70%;
      }
      80% {
          left: 50%;
      }
      95% {
          left: 120%;
      }
      to {
          left: 100%;
      }
  }
  @keyframes hdr_loading {
      from {
          left: -200px;
          width: 30%;
      }
      50% {
          width: 30%;
      }
      70% {
          width: 70%;
      }
      80% {
          left: 50%;
      }
      95% {
          left: 120%;
      }
      to {
          left: 100%;
      }
  }
  .empty_state_center {
      min-height: calc(100vh - 70px);
      min-height: calc(var(--vh, 1vh) * 100 - 70px);
  }
  .empty_state {
      padding: 70px 5px;
      display: block;
      width: 100%;
      text-align: center;
  }
  .empty_state > svg {
      display: block;
      width: 80px;
      height: 80px;
      margin: 0 auto 25px;
      opacity: 0.2;
  }
  .empty_state > svg.verified {
      opacity: 1;
      color: var(--main);
  }
  .empty_state p {
      font-size: 15px;
      font-weight: 500;
  }
  .empty_state .dog {
      width: 200px;
      margin: 0 auto 35px;
  }
  .empty_state .dog:before {
      content: "";
      position: absolute;
      left: -20px;
      right: -20px;
      bottom: 0;
      height: 1.5px;
      background: #000;
  }
  .empty_state .dog svg {
      width: 100%;
      height: auto;
  }
  .empty_state .dog + h2 {
      font-size: 24px;
      font-weight: 600;
  }
  .tag_header {
      z-index: 100;
      padding: 0 20px;
      height: 70px;
      top: 0;
      left: 0;
      right: 0;
      -webkit-transition: none;
      -o-transition: none;
      transition: none;
      background: var(--body-bg);
  }
  /*
  .tag_header:before {
      content: "";
      background: -webkit-gradient(
          linear,
          left top, left bottom,
          color-stop(0, var(--body-bg)),
          color-stop(50%, rgba(249, 249, 251, 0.3)),
          color-stop(65%, rgba(249, 249, 251, 0.15)),
          color-stop(75%, rgba(249, 249, 251, 0.07)),
          color-stop(82%, rgba(249, 249, 251, 0.035)),
          color-stop(88%, rgba(249, 249, 251, 0.015)),
          to(rgba(255, 255, 255, 0))
      );
      background: -o-linear-gradient(
          top,
          var(--body-bg) 0,
          rgba(249, 249, 251, 0.3) 50%,
          rgba(249, 249, 251, 0.15) 65%,
          rgba(249, 249, 251, 0.07) 75%,
          rgba(249, 249, 251, 0.035) 82%,
          rgba(249, 249, 251, 0.015) 88%,
          rgba(255, 255, 255, 0) 100%
      );
      background: linear-gradient(
          180deg,
          var(--body-bg) 0,
          rgba(249, 249, 251, 0.3) 50%,
          rgba(249, 249, 251, 0.15) 65%,
          rgba(249, 249, 251, 0.07) 75%,
          rgba(249, 249, 251, 0.035) 82%,
          rgba(249, 249, 251, 0.015) 88%,
          rgba(255, 255, 255, 0) 100%
      );
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 120px;
      z-index: -1;
      pointer-events: none;
  }
  .tag_header.hide_splash:not(.scrolled):before,
  .tag_header.scrolled:before {
      opacity: 0;
  }
  */
  .tag_header .navbar-brand img {
      max-height: 45px;
      max-width: 180px;
  /*    max-width: 150px; */
  }
  .dropdown-menu {
      border-radius: 14px;
      -webkit-box-shadow: 0 5px 10px rgb(0 0 0 / 5%), 0 15px 40px rgb(0 0 0 / 10%);
              box-shadow: 0 5px 10px rgb(0 0 0 / 5%), 0 15px 40px rgb(0 0 0 / 10%);
      padding: 8px 0;
      border: 0;
      min-width: 220px;
      z-index: 3;
  }
  .dropdown-menu .dropdown-item,
  .dropdown-menu > li {
      padding: 0 8px;
  }
  .dropdown-menu .dropdown-item > a,
  .dropdown-menu > li > a,
  .search-dropdown_ div a,
  .video_dropdown div {
      font-weight: 500;
      font-size: 15px;
      padding: 6px 12px;
      line-height: 34px;
      border-radius: 8px;
      clear: both;
      color: #222;
      margin: 1px 0;
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      -ms-flex-align: center;
      -webkit-box-align: center;
              align-items: center;
      gap: 10px;
  }
  .new_updates,
  .new_updates b {
      font-weight: 400;
  }
  .dropdown-menu .dropdown-item:active,
  .dropdown-menu .dropdown-item:focus,
  .dropdown-menu .dropdown-item:hover {
      background: 0 0;
  }
  .dropdown-menu .dropdown-item > a:focus,
  .dropdown-menu .dropdown-item > a:hover,
  .dropdown-menu > li > a:focus,
  .dropdown-menu > li > a:hover,
  .search-dropdown_ div a:hover,
  .video_dropdown div:hover {
      color: var(--main);
      background-color: #f8f9fa;
  }
  .dropdown-menu .dropdown-item > a.active,
  .dropdown-menu > li > a.active {
      color: var(--main-color);
      background-color: var(--main);
  }
  .dropdown-menu .dropdown-item > a svg,
  .dropdown-menu > li > a svg {
      width: 20px;
      height: 20px;
  }
  
  .liveStreamUsers + .dropdown-menu, .image-carousel + .dropdown-menu, .image-carousel-secondary + .dropdown-menu, .liveStreamLeaderboard + .dropdown-menu, .liveStreamLeaderboard-secondary + .dropdown-menu {
      z-index: 3;
      padding: 20px;
      transform: translate3d(-20px, 0px, 0px);
          right: 0;
      max-height: calc(80vh - var(--dropdown-top-offset, 50px));
      overflow-y: auto;
  }
  .liveStreamUsers + .dropdown-menu, .liveStreamLeaderboard + .dropdown-menu, .liveStreamLeaderboard-secondary + .dropdown-menu {
      min-width: 300px;	
  }
  
  .liveStreamUsers + .dropdown-menu .userName, .liveStreamUsers + .dropdown-menu .menuTitle {
      font-size: 12px;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      display: flex;
      align-items: center;
  }
  
  .liveStreamUsers + .dropdown-menu .onlineUserContainer .userName svg {
      height: 15px !important;
  }
  
  .liveStreamUsers + .dropdown-menu .onlineUserContainer {
      margin-bottom: 7px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
  }
  
  .liveStreamUsers + .dropdown-menu .onlineUserMenu {
      margin-bottom: 7px;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      flex-direction: column;
  }
  .comments-loading-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--body-bg);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
  }
  .streamComments .toggle-row {
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between; /* Puts the span and toggle on opposite sides */
      width: 100%;
      margin-bottom: 10px;
  }
  
  .onlineUserContainer svg.userOnlineDot {
      position: absolute;
          left: 7px;
  }
  
  .br-50 {
      border-radius: 50px;
  }
  
  .guest-info {
      font-size: 12px;
      color: currentColor;
  }
  .guestOnlineDot {
      position: absolute;
      left: 7px;
  }
  .liveStreamUsers + .dropdown-menu .user-list img {
      width: 20px;
          height: 20px;
          border-radius: 50%;
  }
  
  .liveStreamUsers + .dropdown-menu .userTime {
      font-size: 10px;
          color: currentColor;
          margin-left: auto;
          white-space: nowrap;
  }
  
  .liveStreamUsers + .dropdown-menu .d-flex  {
       gap: 8px;
  }
  
  .liveStreamUsers .user-count {
      font-size: 12px;
      line-height: 1;
  }
  
  .dropdownHeaderText {
     font-size: 15px;
  }
  
  .liveStreamUsers + .dropdown-menu .close-btn, .image-carousel + .dropdown-menu .close-btn, .close-leaderboard-btn {
    display: none;
  }
  
  .head_sidebar {
      min-width: 100px;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 99;
      background: var(--body-bg);
  }
  .head_sidebar_menu {
      top: 0;
      left: 0;
      bottom: 0;
      width: 100px;
      z-index: 1;
  }
  
  .head_sidebar_menu:hover {
      width: 250px;
  }
  
  .head_sidebar_menu a {
      color: rgb(0 0 0);
      padding: 12px 16.5px 12px 41.5px;
  }
  .head_sidebar_menu a.active,
  .head_sidebar_menu a:hover {
  /*    color: var(--main); */
  }
  .head_sidebar_menu a img,
  .head_sidebar_menu a svg {
      margin: 0 8px;
      width: 26px;
      height: 26px;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .head_sidebar_menu a.active svg path.hover_path,
  .head_sidebar_menu a:hover svg path.hover_path {
      display: block;
  }
  .head_sidebar_menu a span {
      white-space: nowrap;
      font-weight: 500;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
      -webkit-transform: translateX(-50px);
          -ms-transform: translateX(-50px);
              transform: translateX(-50px);
      opacity: 0;
      padding: 0 8px;
      visibility: hidden;
      left: 95px;
  }
  /*
  .head_sidebar_menu:hover a span {
      opacity: 1;
      -webkit-transform: translateX(0);
          -ms-transform: translateX(0);
              transform: translateX(0);
      visibility: visible;
  }
  .head_sidebar_backsplash {
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      width: 50vw;
      min-width: 400px;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      opacity: 0;
      background: -webkit-gradient(linear, left top, right top, color-stop(20%, var(--body-bg)), to(rgb(255 255 255 / 0%)));
      background: -o-linear-gradient(left, var(--body-bg) 20%, rgb(255 255 255 / 0%));
      background: linear-gradient(90deg, var(--body-bg) 20%, rgb(255 255 255 / 0%));
      visibility: hidden;
  }
  .head_sidebar_menu:hover + .head_sidebar_backsplash {
      opacity: 1;
      -webkit-transform: translateX(0);
          -ms-transform: translateX(0);
              transform: translateX(0);
      visibility: visible;
  }
  */
  .tag_header_ddown {
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      bottom: 0;
      height: 100%;
      background: var(--body-bg) !important;
      overflow-y: auto;
      left: 124px;
      z-index: 98;
      -ms-scroll-chaining: none;
          overscroll-behavior: contain;
  }
  .tag_header_ddown .btn-close {
      margin-top: 70px;
  }
  .tag_mode_toggle.mini {
      bottom: 0;
      z-index: 9;
      line-height: 1;
      left: 0;
      width: 33px;
      margin: 46px;
      height: 33px;
      box-shadow: 0 0 10px 25px var(--body-bg) !important;
      border-radius: 50px;
  }
  .tag_mode_toggle.mini .content {
      overflow: hidden;
      width: 33px;
      height: 33px;
  }
  .new_updates {
      top: 10px;
      left: 65px;
      background: var(--main);
      color: var(--main-color);
      border-radius: 2em;
      line-height: 1;
      font-size: 11px;
      padding: 3px 5px;
      min-width: 17px;
      z-index: 1;
      pointer-events: none;
  }
  .new_updates:empty {
      padding: 0;
  }
  body.noti_menu_open,
  body.search_menu_open,
  body.user_menu_open {
      overflow: hidden;
  }
  body.noti_menu_open .head_sidebar,
  body.search_menu_open .head_sidebar,
  body.user_menu_open .head_sidebar {
      background: var(--body-bg);
      border-right: 0;
      min-width: 125px;
  }
  body.noti_menu_open .head_sidebar_menu,
  body.search_menu_open .head_sidebar_menu,
  body.user_menu_open .head_sidebar_menu {
      width: 125px;
  }
  body.noti_menu_open .head_sidebar_menu a,
  body.search_menu_open .head_sidebar_menu a,
  body.user_menu_open .head_sidebar_menu a {
      padding: 12px 41.5px;
  }
  body.noti_menu_open .head_sidebar_backsplash,
  body.noti_menu_open .head_sidebar_menu a span,
  body.search_menu_open .head_sidebar_backsplash,
  body.search_menu_open .head_sidebar_menu a span,
  body.user_menu_open .head_sidebar_backsplash,
  body.user_menu_open .head_sidebar_menu a span {
      display: none !important;
  }
  .tag_noti_menu,
  .tag_search_menu {
      top: 0;
      -webkit-box-shadow: 4px 0 24px rgb(0 0 0 / 14%);
              box-shadow: 4px 0 24px rgb(0 0 0 / 14%);
      border-radius: 0 16px 16px 0;
      min-width: 400px;
      width: 30vw;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      opacity: 0;
      visibility: hidden;
  }
  body.noti_menu_open .tag_noti_menu,
  body.search_menu_open .tag_search_menu {
      opacity: 1;
      -webkit-transform: translateX(0);
          -ms-transform: translateX(0);
              transform: translateX(0);
      visibility: visible;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
      background: inherit;
  }
  .head_menu_backdrop {
      bottom: 0;
      z-index: 97;
      background: rgb(0 0 0 / 22%);
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
      opacity: 0;
      visibility: hidden;
  }
  body.noti_menu_open .head_menu_backdrop,
  body.search_menu_open .head_menu_backdrop {
      opacity: 1;
      visibility: visible;
  }
  .header_search .form-group svg {
      margin: 19px;
      pointer-events: none;
      opacity: 0.7;
  }
  .header_search .form-group input {
      line-height: 60px;
      font-size: 15px;
      padding: 0 10px 0 60px;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .header_search .form-group input:focus {
      -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.1) 0 2px 4px -2px;
              box-shadow: rgba(0, 0, 0, 0.1) 0 4px 6px -1px, rgba(0, 0, 0, 0.1) 0 2px 4px -2px;
  }
  .search-dropdown .search-result a {
      display: block;
      color: #333;
      padding: 14.5px 24px;
      -webkit-transition: 0.1s;
      -o-transition: 0.1s;
      transition: 0.1s;
      font-weight: 500;
      margin: 0;
      border-bottom: 1px solid #f3f3f3;
  }
  .play-list-cont .side-barlist-wrapper h6,
  .tag_home_articles h4,
  .tag_home_articles p,
  .tag_short_home_list a .info p,
  .tag_video_grid_list .info h4 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -o-text-overflow: ellipsis;
         text-overflow: ellipsis;
      -webkit-box-orient: vertical;
  }
  .search-dropdown .search-result a:hover {
      color: #000;
      background: rgb(0 0 0 / 4%);
  }
  .skel {
      background: rgb(0 0 0 / 6%);
  }
  .skel_2 {
      border-radius: 2em;
  }
  .skel_noti:nth-child(2) {
      opacity: 0.8;
  }
  .skel_noti:nth-child(3) {
      opacity: 0.6;
  }
  .skel_noti:nth-child(4) {
      opacity: 0.4;
  }
  .skel_noti:nth-child(5),
  .tag_home_cat_list a:hover:before {
      opacity: 0.2;
  }
  .skel_noti,
  .tag_head_notis {
      padding: 8px;
      margin: 8px 0;
      gap: 13px;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
      border-radius: 16px;
  }
  .skel_avatar,
  .tag_head_notis .avatar {
      width: 40px;
      height: 40px;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
  }
  .tag_head_notis .avatar img {
    object-fit: cover;
  }
  .skel_noti_name {
      height: 15px;
      width: 220px;
      margin-bottom: 8px;
  }
  .skel_noti_time {
      height: 10px;
      width: 90px;
  }
  .tag_head_notis:hover {
      background: rgb(0 0 0 / 4%);
  }
  .tag_user_menu_box {
      max-width: 1150px;
  }
  .tag_user_menu_links {
      gap: 60px 20px;
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
      grid-template-columns: repeat(6, 1fr);
  }
  .tag_home_cat_list.less,
  .tag_short_home {
      gap: 10px;
  }
  .tag_user_menu_box .content.user img.avatar {
      width: 80px;
      height: 80px;
      margin: -30px 0 15px;
      border: 4px solid #fff;
  }
  .tag_user_menu_links .content,
  .tag_user_menu_links > label {
      width: 100%;
  }
  .tag_user_menu_links .content > span:not(.badge) {
      margin-bottom: 13px;
      width: 70px;
      height: 70px;
      color: var(--main);
  }
  .tag_user_menu_links .content > span.main {
      color: var(--main-color);
      background: var(--main);
  }
  .tag_user_menu_links .content > span.pro {
      background: #ffa623;
      color: #fff;
  }
  .tag_user_menu .tag_user_menu_links .content > span.mid:before {
      border-radius: 50%;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .tag_user_menu .tag_user_menu_links .content:hover > span:before {
      opacity: 0.25;
  }
  .tag_user_menu_links .content > span > svg {
      width: 30px;
      height: 30px;
  }
  .tag_user_menu_links .content .text-truncate {
      max-width: 150px;
  }
  .text-truncate, .text-truncate a{
      font-weight: 600;
      color: #5b5b5b;
  }
  .tag_mode_toggle .content,
  .tag_user_menu_links .tag_mode_toggle .content > span {
      background: #0f1014;
  }
  .tag_mode_toggle .content:not(.black),
  .tag_user_menu_links .tag_mode_toggle .content > span {
      color: #fff;
  }
  .tag_mode_toggle .content .two_icons {
      width: 33px;
      height: 66px;
      gap: 14px;
      top: 0;
      -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0, 1);
      transition: -webkit-transform 0.3s cubic-bezier(0.2, 0, 0, 1);
      -o-transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
      transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
      transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), -webkit-transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  }
  .tag_mode_toggle input:checked + .content,
  .tag_user_menu_links .tag_mode_toggle input:checked + .content > span {
      background: #fff;
  }
  .tag_mode_toggle input:checked + .content:not(.black),
  .tag_user_menu_links .tag_mode_toggle input:checked + .content > span {
      color: var(--main);
  }
  .tag_mode_toggle input:checked + .content .two_icons {
      -webkit-transform: translateY(-33px);
          -ms-transform: translateY(-33px);
              transform: translateY(-33px);
  }
  footer {
      font-size: 14px;
  }
  .main-content {
      margin-left: 100px;
      margin-top: 70px;
      min-height: calc(100vh - 70px);
      min-height: calc(var(--vh, 1vh) * 100 - 70px);
  }
  .tag_home_vid_list > .title a svg {
      -webkit-transform: translateX(-10px);
          -ms-transform: translateX(-10px);
              transform: translateX(-10px);
      opacity: 0;
      -webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.2, 0, 0, 1);
      transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.2, 0, 0, 1);
      -o-transition: opacity 0.1s, transform 0.3s cubic-bezier(0.2, 0, 0, 1);
      transition: opacity 0.1s, transform 0.3s cubic-bezier(0.2, 0, 0, 1);
      transition: opacity 0.1s, transform 0.3s cubic-bezier(0.2, 0, 0, 1), -webkit-transform 0.3s cubic-bezier(0.2, 0, 0, 1);
  }
  .tag_home_vid_list:hover > .title a svg {
      -webkit-transform: translateX(5px);
          -ms-transform: translateX(5px);
              transform: translateX(5px);
      opacity: 1;
  }
  .swiperLatest {
      opacity: 0;  /* Hide initially */
      transition: opacity 0.3s ease;  /* Smooth fade-in */
  }
  .swiperLatest.swiper-initialized {
      opacity: 1;  /* Show after Swiper initializes */
  }
  
  .tag_short_home_list a:hover .info p {
      -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
              transform: translateY(0);
      opacity: 1;
  }
  .tag_short_home_list {
      width: calc(100% / 10 - 8.6px);
  }
  .tag_short_home_list a {
      background: rgb(0 0 0 / 8%);
      border-radius: 10px;
      aspect-ratio: 0.6;
  }
  .tag_short_home_list a img {
      border-radius: 10px;
  }
  .tag_short_home_list a .info {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: -webkit-gradient(linear, left bottom, left top, from(rgb(0 0 0 / 30%)), to(transparent));
      background: -o-linear-gradient(bottom, rgb(0 0 0 / 30%), transparent);
      background: linear-gradient(to top, rgb(0 0 0 / 30%), transparent);
      border-radius: 10px;
      text-shadow: 1px 1px 2px rgb(0 0 0 / 5%);
  }
  .tag_short_home_list a:hover .info {
      background: rgb(0 0 0 / 30%);
  }
  .tag_short_home_list a .info p {
      font-weight: 600;
      line-height: normal;
      max-height: 40px;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      -webkit-transform: translateY(10px);
          -ms-transform: translateY(10px);
              transform: translateY(10px);
      opacity: 0;
  }
  .tag_short_home_list a .info .views {
      font-weight: 500;
      font-size: 13px;
      gap: 5px;
  }
  .tag_home_cat_list {
      gap: 15px;
  }
  .tag_home_cat_list a {
      padding: 0 25px;
      line-height: 46px;
      -webkit-transition: 0.15s;
      -o-transition: 0.15s;
      transition: 0.15s;
      color: currentColor;
  }
  .tag_home_cat_list a.small {
      line-height: 36px;
      padding: 0 13px;
      color: currentColor;
  }
  .tag_home_cat_list a:before {
      content: "";
      border-radius: 8px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: color-mix(in srgb, var(--body-bg), #000 50%);
      opacity: 0.1;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .tag_home_cat_list a:hover {
      color: currentColor;
  }
  .tag_home_cat_list a.active:before {
      opacity: 1;
      background: #fff;
      z-index: -1;
      -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
              box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
  }
  .tag_video_grid {
      margin-right: -8px;
      margin-left: -8px;
  }
  .tag_video_grid > .col-md-3 {
      -ms-flex: 0 0 20%;
      -webkit-box-flex: 0;
              flex: 0 0 20%;
      max-width: 20%;
      padding-right: 8px;
      padding-left: 8px;
  }
  .tag_video_grid_list {
      margin-bottom: 1rem !important;
      border-radius: 12px;
  }
  .tag_home_articles:before,
  .tag_liked_grid .tag_short_home_list a:before,
  .tag_video_grid_list:before {
      content: "";
      background: #4c4c4c;
      position: absolute;
      top: -10px;
      right: -5px;
      bottom: 20px;
      left: -5px;
      z-index: -1;
      border-radius: 12px;
      opacity: 0;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
  }
  .tag_liked_grid .tag_short_home_list a:hover:before,
  .tag_video_grid_list:hover:before {
      opacity: 0.1;
      right: -10px;
      bottom: -10px;
      left: -10px;
  }
  .tag_video_grid_list > .delete {
      z-index: 1;
  }
  .tag_video_grid_list .thumb {
      padding-bottom: 56.25%;
      border-radius: 10px;
      overflow: hidden;
      background: #000;
  }
  .tag_video_grid_list .thumb img {
      border-radius: 10px;
      -o-object-fit: cover;
         object-fit: cover;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
  }
  .tag_video_grid_list .info .avatar{
    border-radius: 50%;
    position: absolute;
    top: -35px;
    left: 16px;
    overflow: hidden;
    background: var(--body-bg);
    border: 4px solid var(--body-bg);
  }
  .tag_video_grid.top .tag_video_grid_list .info .avatar {
    left: -30px;
    top: unset;
    z-index: 1;
  }
  .tag_video_grid_list .thumb img.short {
      left: 50%;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      border-radius: 0;
  }
  .tag_live_count,
  .tag_video_grid_list .thumb .live {
      z-index: 1;
      margin: 10px;
      background: red;
      border-radius: 6px;
      font-size: 0.8rem;
      font-weight: 600;
      text-transform: uppercase;
      padding: 0 7px;
      gap: 5px;
      line-height: 25px;
      -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px;
              box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px;
  }
  .tag_live_count svg,
  .tag_video_grid_list .thumb .live svg {
      -webkit-animation-duration: 0.7s;
              animation-duration: 0.7s;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-iteration-count: infinite;
              animation-iteration-count: infinite;
      -webkit-animation-name: fadeOut;
              animation-name: fadeOut;
      -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
              animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
      -webkit-animation-direction: alternate;
              animation-direction: alternate;
  }
  @-webkit-keyframes fadeOut {
      0% {
          opacity: 0.5;
      }
      100% {
          opacity: 1;
      }
  }
  @keyframes fadeOut {
      0% {
          opacity: 0.5;
      }
      100% {
          opacity: 1;
      }
  }
  .tag_video_grid_list .thumb .shorts {
      z-index: 1;
      margin: 10px;
      background: rgb(0 0 0 / 60%);
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 500;
      text-transform: uppercase;
      padding: 0 10px;
      gap: 5px;
      line-height: 25px;
      right: 0;
      bottom: 0;
      border: 1px solid;
  }
  .tag_video_grid_list .play_btn {
      background: -webkit-gradient(linear, left bottom, right top, from(rgb(0 0 0 / 70%)), color-stop(rgb(0 0 0 / 10%)), color-stop(49%, transparent));
      background: -o-linear-gradient(bottom left, rgb(0 0 0 / 70%), rgb(0 0 0 / 10%), transparent 49%);
      background: linear-gradient(to top right, rgb(0 0 0 / 70%), rgb(0 0 0 / 10%), transparent 49%);
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px 7px 25px;
      -webkit-filter: drop-shadow(2px 4px 6px rgb(0 0 0 / 50%));
              filter: drop-shadow(2px 4px 6px rgb(0 0 0 / 50%));
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
  }
  .tag_video_grid_list .play_btn > img {
      position: absolute;
      width: 100%;
      height: 100%;
  }
  .tag_video_grid_list .duration {
      right: -10px;
      bottom: -10px;
      background: #000;
      border-radius: 10px 0;
      font-weight: 500;
      font-size: 14px;
      line-height: 1;
      padding: 10px;
      -webkit-transition: 0.2s, opacity 0.1s;
      -o-transition: 0.2s, opacity 0.1s;
      transition: 0.2s, opacity 0.1s;
      opacity: 0;
  }
  .tag_video_grid_list:hover .duration {
      right: 0;
      bottom: 0;
      opacity: 1;
  }
  .tag_video_grid_list .info {
      margin-top: 8px;
      position: relative;
      padding: 16px 0 0 0;
  }
  .tag_video_grid_list .info .foot {
      font-size: 0.75rem;
      font-weight: 500;
  }
  
  .play-list-cont .side-barlist-wrapper h6,
  .tag_video_grid_list .info h4 {
      font-weight: 500;
      line-height: normal;
      max-height: 40px;
      overflow: hidden;
      font-size: 14px;
      margin: 0;
      line-height: 1.3;
  }
  .bank_info .bank_info_innr > svg,
  .tag_liked_grid .tag_short_home_list a .info .views svg {
      display: none;
  }
  .tag_liked_grid .tag_short_home_list {
      -ms-flex: 0 0 20%;
      -webkit-box-flex: 0;
              flex: 0 0 20%;
      max-width: 20%;
      padding-right: 8px;
      padding-left: 8px;
  }
  .tag_liked_grid .tag_short_home_list a {
      aspect-ratio: auto;
      border-radius: 0;
      background: 0 0;
      margin-bottom: 2rem;
  }
  .tag_liked_grid .tag_short_home_list a img {
      aspect-ratio: 16/9;
      -o-object-fit: contain;
         object-fit: contain;
      background: #000;
  }
  .tag_liked_grid .tag_short_home_list a .info {
      position: relative !important;
      background: 0 0;
      text-shadow: none;
      padding: 8px 0 0 !important;
  }
  .tag_liked_grid .tag_short_home_list a .info p {
      opacity: 1;
      color: #212529;
      font-size: 1rem;
      -webkit-transform: none;
          -ms-transform: none;
              transform: none;
  }
  .tag_liked_grid .tag_short_home_list a .info .views {
      font-size: 0.875em;
      color: #6c757d;
      font-weight: 400;
  }
  .tag_video_grid.top > .col-md-3 {
      -ms-flex: 0 0 50%;
      -webkit-box-flex: 0;
              flex: 0 0 50%;
      max-width: 50%;
  }
  .tag_video_grid.top .tag_video_grid_list {
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      -ms-flex-align: center;
      -webkit-box-align: inherit;
              align-items: inherit;
      gap: 15px;
      padding-left: 60px;
  }
  .tag_video_grid.top .tag_video_grid_list:after {
      content: counter(Serial);
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%);
      left: 0;
      color: var(--main);
      font-weight: 900;
      font-size: 110px;
      -webkit-text-stroke: 3px var(--main);
      line-height: 1;
      text-align: end;
  }
  .tag_video_grid.top .tag_video_grid_list .thumb {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      padding: 0;
      aspect-ratio: 16/9;
      z-index: 1;
  }
  .tag_video_grid_list .info .btn[data-toggle="dropdown"] {
    visibility: hidden;
    align-items: center;
    border-radius: 100px;
    height: 32px;
    justify-content: center;
    width: 32px;
  }
  
  .tag_video_grid_list .info .btn[data-toggle="dropdown"]:hover {
    background: #fff;
    -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
    box-shadow: rgba(0, 0, 0, 0.05) 0 1px 2px 0;
  }
  
  .tag_video_grid_list:hover .info .btn[data-toggle="dropdown"],
  .tag_video_grid_list .info .btn[data-toggle="dropdown"]:has(~ .dropdown-menu.show),
  .tag_video_grid_list .info .btn[data-toggle="dropdown"]:has(+ .dropdown-menu.show) {
    visibility: visible;
  }
  
  .tag_video_grid.top .tag_video_grid_list .info {
      margin-top: 0;
      padding: 5px 0 0 16px;
  }
  .articles-container .empty_state {
      width: auto;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
  }
  .tag_home_articles {
      border: 1px solid #e7e7e7;
      border-radius: 16px;
  }
  .tag_home_articles:before {
      right: 10px;
      bottom: 10px;
      left: 10px;
      top: 10px;
  }
  .tag_home_articles:hover:before {
      opacity: 0.05;
      right: 0;
      bottom: 0;
      left: 0;
      top: 0;
  }
  .tag_home_articles .embed-responsive {
      border-radius: 8px;
  }
  .tag_home_articles h4 {
      font-weight: 600;
      line-height: 1.8rem;
      max-height: 58px;
      overflow: hidden;
      font-size: 1.27rem;
      margin: 0 0 5px;
  }
  .tag_home_articles:hover h4 {
      color: var(--main);
  }
  .tag_home_articles p {
      font-size: 15px;
      overflow: hidden;
      max-height: 45px;
  }
  .tag_home_articles .main {
      padding: 3px 16px;
      font-size: 0.8rem;
      font-weight: 500;
  }
  .tag_home_articles .main:before {
      content: "";
      background: currentColor;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      border-radius: 2em;
      opacity: 0.1;
  }
  .tag_vid_page_nav {
      gap: 12px;
  }
  .tag_vid_page_sub_nav {
      gap: 12px;
      overflow-x: auto;
      white-space: nowrap;
  }
  .tag_vid_page_nav > .dropdown > .btn:not(.full) {
      padding: 8px;
  }
  .tag_vid_box_emoji,
  .tag_vid_page_nav > .dropdown > .dropdown-menu {
      min-width: 300px;
  }
  #voteDuration,
  .tag_user_list .details .info {
      min-width: 0;
  }
  .tag_vid_box_emoji,
  .tag_vid_page_nav > .dropdown > .dropdown-menu .scroll_search {
      max-height: 320px;
      overflow-y: auto;
  }
  .showing_nav {
      gap: 10px;
  }
  .showing_nav > .btn {
      width: 42px;
      height: 42px;
      color: var(--main);
      border-radius: 50%;
  }
  .pagination:before,
  .showing_nav > .btn:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: currentColor;
      border-radius: 50%;
      opacity: 0.2;
      z-index: -1;
  }
  .pagination > .active > a,
  .pagination > .active > a:focus,
  .pagination > .active > a:hover,
  .pagination > li > a:focus,
  .pagination > li > a:hover,
  .showing_nav > .btn:hover {
      background-color: var(--main);
      color: var(--main-color);
  }
  .pagination:before,
  .pagination > li > a {
      border-radius: 2em;
  }
  .showing_nav > .btn:hover:before {
      opacity: 0;
  }
  .pagination > li > a {
      padding: 0 4px;
      color: var(--main);
      min-width: 42px;
      height: 42px;
      font-weight: 500;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .tag_balance,
  .tag_point_balance,
  .tag_wallet {
      border-radius: 16px;
  }
  .bank_info:before,
  .shorts_events .icons .icon:before,
  .tag_auth_side:before,
  .tag_balance:before,
  .tag_point_balance:before,
  .tag_point_earn .icon:before,
  .tag_user_menu_links .content > span.mid:before,
  .tag_vid_upload:before,
  .tag_wallet:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: var(--dark);
      border-radius: 16px;
      opacity: 0.15;
      z-index: -1;
  }
  .wallet_circle {
      width: 280px;
      border: 7px solid var(--main);
      opacity: 0.08;
      z-index: -1;
  }
  .wallet_circle_left {
      z-index: -1;
  }
  .wallet_circle_left_center {
      right: -20px;
      top: 120px;
      width: 95%;
  }
  .wallet_circle_right {
      top: -100px;
      right: -80px;
  }
  .wallet_circle_right_bottom {
      bottom: -270px;
      right: -200px;
      width: 520px;
  }
  .tag_wallet_balance .h1 {
      font-size: 5.8rem;
      font-weight: 600;
      letter-spacing: -1px;
  }
  .tag_wallet_balance .h1 sup {
      font-size: 55%;
  }
  .bank_info {
      margin-bottom: 1.5rem;
      padding: 1.5rem;
      position: relative;
  }
  .bank_info:before {
      opacity: 0.1;
  }
  .bank_info .bank_info_innr {
      position: relative;
      color: var(--main);
      z-index: 1;
  }
  .bank_info .bank_info_innr .bank_name {
      margin: 0 0 -5px;
  }
  .bank_info .bank_info_innr .row .col {
      margin-top: 1.5rem;
  }
  .bank_info .bank_info_innr .row p {
      margin: 0;
      font-size: 18px;
  }
  .bank_info .bank_info_innr .help-block {
      display: block;
      color: #000;
  }
  .tag_point_balance > svg.circle {
      right: 0;
      top: 0;
      height: 75%;
      width: 170px;
      z-index: -1;
  }
  .tag_point_balance > svg.dots {
      left: 0;
      bottom: 0;
      z-index: -1;
  }
  .tag_point_balance:before {
      background: #fff0c5;
      opacity: 1;
  }
  .tag_point_balance .h1 {
      color: #faa500;
      font-size: 5rem;
  }
  .tag_point_earn {
      gap: 15px;
      margin-bottom: 1.8rem;
  }
  .tag_point_earn .icon {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      width: 51px;
      height: 51px;
      border-radius: 16px;
  }
  .tag_point_earn .icon:before {
      z-index: auto;
  }
  .tag_balance:before {
      background: #28a745;
  }
  .tag_balance > svg {
      z-index: -1;
  }
  .tag_balance .h1 {
      color: #28a745;
      font-size: 4.75rem;
  }
  .tag_balance .h1 sup {
      font-size: 35%;
      top: -1.35em;
  }
  .tag_sett_sidebar {
      padding-right: 30px;
  }
  .tag_sett_sidebar a {
      padding: 15px 25px;
      gap: 15px;
      font-weight: 500;
      font-size: 1.1rem;
      color: #777a7d;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .tag_sett_sidebar a:hover {
      color: #212529;
  }
  .tag_sett_sidebar a.active {
      color: var(--main);
  }
  .tag_sett_monetize:before,
  .tag_sett_sidebar a.active:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: currentColor;
      opacity: 0.1;
      border-radius: 10px;
  }
  .tag_sett_sidebar a > div {
      gap: 25px;
  }
  .tag_sett_sidebar a > div svg {
      width: 24px;
      height: 24px;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
  }
  .tag_sett_sidebar a:not(:last-child):after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      left: 74px;
      background: var(--main);
      height: 1px;
      opacity: 0.1;
  }
  .tag_sett_sidebar a.active:after {
      content: "";
      background: 0 0;
      opacity: 1;
      border: 1px solid var(--main);
      border-radius: 10px;
      height: auto;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
  .tag_sett_monetize {
      padding: 2rem;
  }
  .tag_sett_monetize:before {
      background: var(--main);
      border-radius: 12px;
  }
  .tag_sett_monetize h5.lead {
      font-size: 1.35rem;
      font-weight: 400;
      line-height: 1.4;
  }
  .tag_sett_monetize img {
      max-width: 150px;
      height: auto;
  }
  .tag_affi_links {
      border-radius: 12px;
  }
  .tag_affi_links svg {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
  }
  .tag_affi_links.user {
      background: rgb(54 152 253 / 10%);
  }
  .tag_affi_links.pro {
      background: rgb(27 195 187 / 10%);
  }
  .tag_affi_links.subs {
      background: rgb(250 165 0 / 10%);
  }
  .tag_affi_links.vid {
      background: rgb(179 127 235 / 10%);
  }
  #audioIcon:hover span,
  .tag_auth_social .btn {
      background-color: #fff;
  }
  .search_filter_dot {
      width: 16px;
      height: 16px;
      background: #4caf50;
      border: 3px solid var(--body-bg);
      top: -4px;
      right: -4px;
  }
  .tag_user_list .details {
      gap: 15px;
  }
  .tag_user_list .details .thumb {
      width: 100px;
      margin: -50px 0 0;
  }
  .tag_user_list .details .thumb img {
      border: 4px solid #fff;
  }
  .tag_user_list .details .info h6 {
      font-size: 1.1rem;
  }
  .tag_user_list .details .info p,
  .tag_video_grid.top .tag_video_grid_list .info .d-flex {
      font-size: 0.7rem;
  }
  .tag_home_articles.promo:before {
      background: #ff8a07;
  }
  .tag_home_articles.promo:hover h4 {
      color: #ff8a07;
  }
  .tag_home_articles.promo .main {
      color: #ff8a07;
      gap: 5px;
  }
  .tag_blog_action .icon.active,
  body .plyr--full-ui input[type="range"] {
      color: var(--main);
  }
  .promo_icon {
      z-index: 1;
      top: 0;
      left: 0;
      pointer-events: none;
      width: 60px;
      height: 60px;
  }
  .promo_icon:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      z-index: -1;
      border-top: 60px solid #ff8a07;
      border-right: 60px solid transparent;
  }
  .helper-text,
  .pt_upload_vdo_step svg.main,
  .tag_profile_cover .cover-container-2,
  .tag_short.swiper .mejs__controls,
  .tag_short.swiper .swiper-button-next.swiper-button-disabled,
  .tag_short.swiper .swiper-button-prev.swiper-button-disabled {
      display: none;
  }
  .promo_icon svg {
      margin: 7px;
  }
  .tag_blog_action .icon {
      width: 45px;
      height: 45px;
  }
  .tag_blog_action .icon:before {
      background: currentColor;
      opacity: 0.1;
  }
  .tag_pro_bg,
  .tag_vid_upload.hover:before {
      opacity: 0.15;
  }
  .pt-comment-replies {
      padding-left: 73px;
  }
  #trumbowyg-icons {
      overflow: hidden;
      visibility: hidden;
  }
  #trumbowyg-icons,
  #trumbowyg-icons svg {
      height: 0;
      width: 0;
  }
  .read-article-text img {
      max-width: 100%;
      height: auto;
  }
  .tag_auth {
      max-width: 850px;
  }
  .tag_auth > svg {
  /*
      bottom: -20px;
      left: -60px;
      height: auto;
      width: 90px;
      pointer-events: none;
      opacity: 0.3;
  */
    bottom: -20px;
    left: -150px;
    height: auto;
    width: 150px;
    pointer-events: none;
    opacity: 0.3;
  }
  .tag_auth_side {
      min-width: 280px;
      -webkit-box-flex: 1;
          -ms-flex: 1 1 280px;
              flex: 1 1 280px;
  }
  .tag_auth_side:before {
      z-index: auto;
      border-radius: 0;
      opacity: 0.1;
  }
  .tag_auth_side .bg_ico {
      height: calc(100% + 4px);
      right: 0;
      margin: -4px -2px;
      opacity: 0.7;
      pointer-events: none;
  }
  .tag_auth_social .btn {
      font-size: 14px;
      line-height: 38px;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      padding: 0 12px;
      letter-spacing: 0.25px;
      gap: 12px;
  }
  .tag_auth_social .btn svg {
      height: 18px;
      width: 18px;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
  }
  .tag_auth_social .btn:hover {
      border-color: #d2e3fc !important;
      background: rgb(66 133 244 / 4%);
  }
  .nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-BPrWId {
      font-family: var(--font-family) !important;
      text-align: start;
      padding: 0 4px;
  }
  #chat-drag-overlay span,
  #header_ad_:not(:empty),
  #remote-media h3,
  #voteBox,
  .admin-header,
  .close-btn-whatsnew::before,
  .pt_sec_nav_slide > div a,
  .signup-card,
  .streamListLogo,
  .tag_vid_box_emoji span,
  .top-number {
      text-align: center;
  }
  .dash_comms {
      width: 80px;
  }
  .dash_comms img {
      border-radius: 6px;
  }
  .dash_video {
      width: 10vw;
      min-width: 105px;
      max-width: 210px;
  }
  .dash_video.large {
      width: 20vw;
      min-width: 110px;
      max-width: 350px;
  }
  .tag_edit_thumb .position-absolute {
      top: 0;
      right: 0;
  }
  .ads-test,
  .tag_edit_thumb .btn,
  .watch_vid_channel_card {
      background: rgb(0 0 0 / 50%);
      border-color: rgb(255 255 255 / 70%);
      border-radius: 7px;
  }
  .ads-test:hover,
  .tag_edit_thumb .btn:hover {
      background: rgb(0 0 0 / 70%);
  }
  .search-dropdown_,
  .video_dropdown {
      max-height: 300px;
      overflow-y: auto;
  }
  .search-dropdown_ div {
      padding: 0 8px !important;
  }
  .search-dropdown_ div a,
  .video_dropdown div {
      padding: 5px 12px;
      line-height: 30px;
  }
  .tag_pro_head {
      max-width: 640px;
  }
  .tag_pro_head p {
      font-weight: 600;
      letter-spacing: 0.5px;
  }
  .tag_pro_head .badge {
      padding: 0 5px;
      line-height: 19px;
      letter-spacing: 1px;
  }
  .tag_pro_bg {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      -webkit-transition: 0.15s ease-in-out;
      -o-transition: 0.15s ease-in-out;
      transition: 0.15s ease-in-out;
  }
  .tag_pro_plan:hover .tag_pro_bg {
      top: -10px;
      right: -10px;
      bottom: -10px;
      left: -10px;
  }
  .tag_pro_btn {
      padding: 16px 32px;
      border: 2px solid #181818;
      background-color: #181818;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      letter-spacing: 2px;
      color: #fff;
      line-height: normal;
      font-weight: 600;
  }
  .tag_pro_btn:hover {
      background-color: transparent;
      color: #181818 !important;
  }
  .tag_pro_plan > svg {
      right: 0;
      bottom: 0;
      opacity: 0.05;
      -webkit-transform: scaleX(-1);
          -ms-transform: scaleX(-1);
              transform: scaleX(-1);
      height: 90%;
      width: auto;
  }
  .tag_import.import_done .tag_import_top .icons {
      opacity: 0;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      margin-top: -44px;
  }
  .tag_import.import_done .tag_import_top h3,
  .tag_import.import_done .tag_import_top p {
      -webkit-transform: scaleY(0);
          -ms-transform: scaleY(0);
              transform: scaleY(0);
      height: 0;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
  }
  .tag_import.import_done .tag_import_top .form-group {
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      margin-top: -64px;
  }
  .tag_live {
      background: #111;
      border-radius: 0.7rem 0 0;
  }
  #remote-media h3 {
      font-size: 25px;
      margin: 0;
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%);
      width: 100%;
  }
  .tag_live_count {
      top: 0;
  }
  .tag_live_comments {
      z-index: 2;
      bottom: 0;
      padding-top: 30px;
      padding-bottom: 90px;
      left: 0;
      mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(35%, #000), color-stop(100%, #000), to(transparent));
      mask-image: linear-gradient(180deg, transparent, #000 35%, #000 100%, transparent 100%);
      -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(35%, #000), color-stop(100%, #000), to(transparent));
      -webkit-mask-image: linear-gradient(180deg, transparent, #000 35%, #000 100%, transparent 100%);
      overflow-y: auto;
      max-height: 100%;
  }
  .tag_live_comments:empty {
      mask-image: none;
      -webkit-mask-image: none;
  }
  .tag_live_comments:before {
      content: "";
      position: absolute;
      top: -200px;
      right: 0;
      bottom: 0;
      left: 0;
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000));
      background: -o-linear-gradient(rgba(0, 0, 0, 0), #000);
      background: linear-gradient(rgba(0, 0, 0, 0), #000);
      z-index: -1;
  }
  .pt_live_controls {
      bottom: 0;
      left: 0;
      z-index: 3;
  }
  .play-list-cont .side-barlist-wrapper .tag_edit_thumb .position-absolute,
  .tag_emp_msg_empty_state {
      z-index: 1;
  }
  .pt_live_controls .dropdown-menu {
      min-width: 270px;
  }
  .pt_live_controls .dropdown-item {
      white-space: normal;
  }
  .snackbar-container {
      -webkit-transition: top 0.5s, right 0.5s, bottom 0.5s, left 0.5s, opacity 0.5s;
      -o-transition: top 0.5s, right 0.5s, bottom 0.5s, left 0.5s, opacity 0.5s;
      transition: top 0.5s, right 0.5s, bottom 0.5s, left 0.5s, opacity 0.5s;
      background-color: #070b0e;
      position: fixed;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      color: #fff;
      padding: 8px 10px;
      gap: 15px;
      top: 0 !important;
      opacity: 0;
      z-index: 9999;
      margin: 24px 0;
      border-radius: 50px;
      background-image: linear-gradient(255deg, var(--main), #0b1d0c) !important;
      left: 50%;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
      letter-spacing: 0.25px;
  /*    width: 90% !important; */
      width: max-content;
      padding-right: 20px;
  /*    max-width: 400px; */
      max-width: calc(100dvw - 30%);
      min-height: 48px;
  }
  
  .snackbar-prepend {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1/1;
    border-radius: 50%;
    font-size: 25px;
  /*  background: color-mix(in srgb, var(--main), #000 30%); */
    color: #fff;
    width: 32px;
    height: 32px;
  }
  
  .snackbar-container:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--main);
      border-radius: 50px;
      opacity: 0.1;
  }
  .snackbar-container .action {
      display: inline-block;
      border: none;
      font-size: 0;
      margin: 0 0 0 auto;
      padding: 0;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3e%3cpath fill='%23F5EFF7' d='M480-416.348 287.826-224.174Q275.152-211.5 256-211.5t-31.826-12.674Q211.5-236.848 211.5-256t12.674-31.826L416.348-480 224.174-672.174Q211.5-684.848 211.5-704t12.674-31.826Q236.848-748.5 256-748.5t31.826 12.674L480-543.652l192.174-192.174Q684.848-748.5 704-748.5t31.826 12.674Q748.5-723.152 748.5-704t-12.674 31.826L543.652-480l192.174 192.174Q748.5-275.152 748.5-256t-12.674 31.826Q723.152-211.5 704-211.5t-31.826-12.674L480-416.348Z'/%3e%3c/svg%3e");
      width: 24px;
      height: 24px;
      background-color: transparent;
      background-size: contain;
      position: relative;
  }
  .tag_live_title {
      background: rgb(255 255 255 / 25%);
      -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
      transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
      -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
      padding: 0.5rem 0.75rem;
      border: 1px solid;
      border-radius: 8px;
  }
  .tag_live_title::-webkit-input-placeholder {
      color: currentColor;
      opacity: 0.6;
  }
  .tag_live_title::-moz-placeholder {
      color: currentColor;
      opacity: 0.6;
  }
  .tag_live_title:-ms-input-placeholder {
      color: currentColor;
      opacity: 0.6;
  }
  .tag_live_title::-ms-input-placeholder {
      color: currentColor;
      opacity: 0.6;
  }
  .tag_live_title::placeholder {
      color: currentColor;
      opacity: 0.6;
  }
  .tag_live_title:focus {
      border-color: rgb(255 255 255 / 30%);
      -webkit-box-shadow: 0 0 0 1px rgb(255 255 255 / 30%);
              box-shadow: 0 0 0 1px rgb(255 255 255 / 30%);
  }
  .liv_vid_cont {
      max-height: calc(100vh - 70px);
      max-height: calc(var(--vh, 1vh) * 100 - 70px);
      background: #000;
  }
  .liv_vid_cont video,
  .watch_live_video video {
      -o-object-fit: contain !important;
         object-fit: contain !important;
  }
  .tag_msg_search {
      background-color: #eef0f2;
      border-color: #eef0f2;
  }
  .tag_msg_search:focus {
      border-color: var(--main);
      -webkit-box-shadow: 0 0 0 1px var(--main);
              box-shadow: 0 0 0 1px var(--main);
  }
  .messages-sidebar .user_scroll,
  .pt_msg_joint {
      height: calc(var(--vh, 1vh) * 100 - 192px);
  }
  .messages-sidebar .list-group {
      max-height: 100%;
      overflow-y: auto;
  }
  .messages-sidebar .user-list a:hover {
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
      background: rgb(0 0 0 / 2%);
  }
  .pt_msg_area {
      height: calc(100% - 82px);
      overflow-y: auto;
  }
  .pt_msg_area .user-message {
      border: 1px solid transparent;
      border-radius: 18px;
      padding: 7.6px 15px;
      font-size: 0.95rem;
  }
  .pt_movie_list .tag_video_grid_list .thumb,
  .vid_studio.movies .tag_video_grid_list .thumb {
      padding-bottom: 148%;
      border-radius: 5px;
  }
  .shorts_events,
  .shorts_events .icons .avatar,
  .tag_short.swiper .video-staand {
      border-radius: 16px;
  }
  .pt_movie_list .tag_video_grid_list .thumb img,
  .vid_studio.movies .tag_video_grid_list .thumb img {
      border-radius: 5px;
  }
  .pt_movie_list .tag_video_grid_list .info h4 {
      max-height: 44px;
      font-size: 1.15rem;
      margin: 0 0 5px;
  }
  .tag_plist_item {
      bottom: 0;
      left: 0;
      right: 0;
  }
  .tag_plist_item:before {
      content: "";
      position: absolute;
      top: -100px;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgb(0 0 0 / 90%);
      -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#000));
      -webkit-mask-image: linear-gradient(transparent, #000);
      border-radius: 0 0 8px 8px;
      pointer-events: none;
  }
  .popular_channels_list .channels_list:nth-child(-n + 3) .embed-responsive-item:before {
      content: "";
      background: rgb(0 0 0 / 50%);
      -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), to(#000));
      -webkit-mask-image: linear-gradient(90deg, transparent, #000);
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 50%;
  }
  .popular_channels_list .channels_list:nth-child(-n + 3) .embed-responsive-item:after {
      counter-increment: Serial;
      content: counter(Serial);
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%);
      right: -18px;
      color: var(--main);
      font-weight: 900;
      font-size: 100px;
      -webkit-text-fill-color: #222222;
      -webkit-text-stroke: 3px #e7e7e7;
      line-height: 1;
      pointer-events: none;
      width: 80px;
      text-align: end;
  }
  .tag_short.swiper .mejs__container,
  .tag_short.swiper .mejs__layer,
  .tag_short.swiper video {
      width: 100% !important;
      height: 100% !important;
  }
  .tag_short.swiper {
      width: calc(100% + 1.5rem);
      height: calc(100vh - 70px);
      height: calc(var(--vh, 1vh) * 100 - 70px);
      padding-bottom: 60px;
  }
  .tag_short.swiper .videocontainer {
      max-width: 500px;
  }
  .tag_short.swiper .mejs__container {
      max-height: 100%;
  }
  .shorts_events {
      bottom: 0;
      right: 0;
      left: 0;
      z-index: 1;
      pointer-events: none;
  }
  .shorts_events > .info {
      background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgb(0 0 0 / 80%)));
      background: -o-linear-gradient(transparent, rgb(0 0 0 / 80%));
      background: linear-gradient(transparent, rgb(0 0 0 / 80%));
      border-radius: 0 0 16px 16px;
      pointer-events: auto;
  }
  .shorts_events > .info.transparent {
      background: 0 0;
  }
  .shorts_events > .info p {
      max-height: 65px;
      overflow-y: auto;
      font-size: 0.9rem;
  }
  .shorts_events .icons {
      margin: 0 -80px 0 0;
      padding: 0 20px;
      pointer-events: auto;
  }
  .shorts_events .icons .icon {
      width: 40px;
      height: 40px;
  }
  .shorts_events .icons .icon:hover::before {
      opacity: 0.2;
  }
  #chat-drag-overlay.active,
  .shorts_events .icons .active .icon::before {
      opacity: 1;
  }
  .shorts_events .icons .active .icon {
      color: var(--main-color);
  }
  .shorts_events .icons .gray.icon::before {
      background-color: #000;
      opacity: 0.07;
  }
  .tag_short.swiper .swiper-button-next,
  .tag_short.swiper .swiper-button-prev {
      top: auto;
      width: 56px;
      height: 56px;
      left: auto;
      right: 16px;
      border-radius: 16px;
      -webkit-box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
              box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  .tag_short.swiper .swiper-button-prev {
      bottom: 90px;
  }
  .tag_short.swiper .swiper-button-next {
      bottom: 16px;
  }
  .tag_short.swiper .swiper-button-prev:after {
      font-size: 0;
      width: 28px;
      height: 28px;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 15C18 15 13.5811 9.00001 12 9C10.4188 8.99999 6 15 6 15' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
      background-size: 28px;
  }
  .tag_short.swiper .swiper-button-next:after {
      font-size: 0;
      width: 28px;
      height: 28px;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e ");
      background-size: 28px;
  }
  .tag_emp_msg img {
      -o-object-fit: cover;
         object-fit: cover;
  }
  #chatModalImage,
  .ad-link img {
      -o-object-fit: contain;
         object-fit: contain;
  }
  .tag_emp_msg_innr {
      bottom: 0;
      left: 0;
      right: 0;
  }
  .tag_emp_msg_details:before {
      content: "";
      position: absolute;
      margin: -160px;
      -webkit-filter: blur(100px);
              filter: blur(100px);
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
  }
  .tag_emp_msg_empty_state h6 {
      text-shadow: 1px 1px 4px rgb(0 0 0 / 15%);
  }
  .accordion .collapsed .btn-success {
      -webkit-transform: none;
          -ms-transform: none;
              transform: none;
  }
  .accordion .btn-success {
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .tag_profile_cover {
  /*    margin: -70px -1.5rem 0 0; */
  }
  .tag_profile_cover .cover-container,
  .tag_profile_cover .cover-container-2 {
      height: calc((100vw - 70px) / 5);
  }
  .pt_upload_vdo_step.step-four-active .three p,
  .pt_upload_vdo_step.step-three-active .two p,
  .pt_upload_vdo_step.step-two-active .one p {
      text-decoration: line-through;
      opacity: 0.5;
  }
  .pt_upload_vdo_step.step-four-active .three svg.main,
  .pt_upload_vdo_step.step-three-active .two svg.main,
  .pt_upload_vdo_step.step-two-active .one svg.main {
      display: block;
  }
  .tag_vid_upload {
      border: 1px dashed var(--main);
      border-radius: 16px;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .tag_vid_upload:before {
      z-index: auto;
      opacity: 0.08;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .tag_vid_upload.hover {
      border-style: solid;
  }
  .tag_vid_upload.d-none {
      display: none !important;
  }
  .pt_uv_thumbs_innr .tag_vid_upload,
  .pt_uv_thumbs_innr .thumb-image {
      width: 230px;
      aspect-ratio: 16/9;
      border-radius: 16px;
      -o-object-fit: cover;
         object-fit: cover;
  }
  .pt_uv_thumbs_innr.short_thumb .tag_vid_upload,
  .pt_uv_thumbs_innr.short_thumb .thumb-image {
      width: 140px;
      aspect-ratio: 9/16;
  }
  .pt_upvid_three .cus_cont .custom-control-label::after,
  .pt_upvid_three .cus_cont .custom-control-label::before {
      top: 1.2rem;
      left: -0.6rem;
  }
  .ffmpeg_thumbs {
      overflow-x: auto;
  }
  .ffmpeg_thumbs .thumb-image {
      cursor: pointer;
  }
  .ffmpeg_thumbs .active {
      -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--main);
              box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--main);
  }
  .pt_crop_shrt_vid .responsive {
      visibility: hidden;
      opacity: 0;
      height: 1px;
  }
  .pt_crop_shrt_vid .pt_crop_shrt_vid_place {
      background: #000;
      width: 100%;
      overflow: hidden;
      border-radius: 12px;
      aspect-ratio: 9/16;
  }
  .ad-link,
  .player-video .tag_emp_msg,
  .watch_live_video {
      aspect-ratio: 16/9;
  }
  .pt_crop_shrt_vid .pt_crop_shrt_vid_place .video-controls {
      z-index: 9;
      left: 0;
      right: 0;
      bottom: 0;
      background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgb(0 0 0 / 60%)));
      background: -o-linear-gradient(transparent, rgb(0 0 0 / 60%));
      background: linear-gradient(transparent, rgb(0 0 0 / 60%));
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
  }
  #chatImageModal,
  #emoji-picker,
  .tag_video_grid.top.related .tag_video_grid_list:after,
  .tag_watch_side_tab + hr,
  .vid_studio .tag_video_grid_list:before,
  .watch-video-description:not(.full_expand) br {
      display: none;
  }
  .pt_crop_shrt_vid .pt_crop_shrt_vid_place .video-controls button {
      width: 30px;
      height: 30px;
      border-radius: 6px;
  }
  .pt_crop_shrt_vid .pt_crop_shrt_vid_place video {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
  .pt_crop_shrt_vid .ui-slider {
      border: 0;
      background: rgb(0 0 0 / 15%);
      border-radius: 2em;
      height: 4px;
      margin: 0 8px 8px;
  }
  .pt_crop_shrt_vid .ui-slider .ui-slider-range {
      background-color: var(--main);
  }
  .pt_crop_shrt_vid .ui-slider .ui-slider-handle {
      border: 0;
      outline: 0;
      border-radius: 50%;
      cursor: pointer;
      background-color: var(--main);
      top: -6px;
  }
  .vid_studio .tag_video_grid_list .info h4 {
      margin: 0 0 6px;
      font-size: 1.2rem;
  }
  .pt_vid_card_prvw {
      --surface2: #ffffff;
      --surface3: #d2d2d2;
      --fixed-bg-gradient: var(--main);
      padding: 0 0 16px;
      border-radius: 0.6rem;
  }
  .pt_vid_card_prvw .responsive {
      background: #000;
      border-radius: 10px;
  }
  .pt_vid_card_prvw .responsive .wait {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
  .pt_vid_card_prvw input[type="range"] {
      --track-height: 3px;
      --thumb-size: 16px;
      --thumb-offset: -6.5px;
      --thumb-highlight-size: 0px;
      --thumb-highlight-color: rgb(0 0 0 / 0.1);
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }
  .pt_vid_card_prvw input[type="range"]:active,
  .pt_vid_card_prvw input[type="range"]:hover {
      --thumb-highlight-size: 5px;
  }
  .pt_vid_card_prvw input[type="range"]::-webkit-slider-runnable-track {
      -webkit-appearance: none;
      appearance: none;
      height: var(--track-height);
      border-radius: 5px;
      background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(0, var(--surface3))), var(--fixed-bg-gradient) fixed;
      background: linear-gradient(to right, transparent var(--track-fill, 0), var(--surface3) 0), var(--fixed-bg-gradient) fixed;
  }
  .pt_vid_card_prvw input[type="range"]::-moz-range-track {
      -moz-appearance: none;
      appearance: none;
      height: var(--track-height);
      border-radius: 5px;
      background: linear-gradient(to right, transparent var(--track-fill, 0), var(--surface3) 0), var(--fixed-bg-gradient) fixed;
  }
  .pt_vid_card_prvw input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
      border: 3px solid var(--surface2);
      height: var(--thumb-size);
      width: var(--thumb-size);
      margin-top: var(--thumb-offset);
      border-radius: 50%;
      background: var(--fixed-bg-gradient) fixed;
      -webkit-box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
              box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
      -webkit-transition: box-shadow 0.1s;
      -webkit-transition: -webkit-box-shadow 0.1s;
      transition: -webkit-box-shadow 0.1s;
      transition: box-shadow 0.1s;
      transition: box-shadow 0.1s, -webkit-box-shadow 0.1s;
  }
  .pt_vid_card_prvw input[type="range"]::-moz-range-thumb {
      -moz-appearance: none;
      appearance: none;
      cursor: pointer;
      border: 3px solid var(--surface2);
      height: var(--thumb-size);
      width: var(--thumb-size);
      margin-top: var(--thumb-offset);
      border-radius: 50%;
      background: var(--fixed-bg-gradient) fixed;
      box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
      -moz-transition: box-shadow 0.1s;
      transition: box-shadow 0.1s;
  }
  .video_dropdown:empty {
      padding: 0;
      -webkit-box-shadow: none;
              box-shadow: none;
  }
  .video_dropdown div {
      margin: 0 8px;
      cursor: pointer;
  }
  .tag_main_player,
  .tag_main_vid_details {
      padding-right: 30%;
  }
  .sticky-container_in-content {
      height: auto !important;
  }
  .tag_video_title a {
      color: #1f76e8;
  }
  .video-likes .like-btn {
      gap: 5px;
      font-weight: 600;
      font-size: 90%;
      padding: 6px 12px;
      border: 1px solid #e6e6e6;
      border-radius: 1rem;
  }
  .video-likes .like-btn span {
      line-height: 1;
  }
  .video-likes .likkes.active {
      color: #fff;
      background: #28a745;
      border-color: #28a745;
  }
  .video-likes .dislikkes.active {
      background: rgb(0 0 0 / 10%);
      -webkit-box-shadow: none;
              box-shadow: none;
      border-color: rgb(0 0 0 / 5%);
  }
  .video-info-element {
      max-width: 200px;
      min-width: 150px;
  }
  .video-options .btn {
      font-weight: 600;
      font-size: 90%;
      padding: 0 12px;
      line-height: 32px;
      background: rgb(0 0 0 / 5%);
  }
  .tag_video_grid.top.related .tag_video_grid_list,
  .tag_watch_movie .tag_main_player,
  .tag_watch_movie .tag_main_vid_details,
  body.theater .tag_main_player,
  body.theater .tag_main_vid_details {
      padding: 0;
  }
  .watch-video-description:not(.full_expand) {
      max-height: 100px;
  }
  .watch-video-description:not(.full_expand) a {
      color: #222;
  }
  .tag_watch_adds .tag_home_articles {
      display: -webkit-box !important;
      display: -ms-flexbox !important;
      display: flex !important;
      gap: 20px;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-bottom: 1.5rem;
  }
  .tag_watch_adds .tag_home_articles .embed-responsive {
      width: 250px;
      margin: 0 !important;
  }
  .tag_watch_side {
      top: 75px;
      right: 0;
      bottom: 0;
      width: calc(30% - 2rem);
  }
  .tag_watch_side_innr {
      overflow: hidden;
      overflow-y: auto;
      -ms-scroll-chaining: none;
          overscroll-behavior: contain;
  }
  .tag_video_grid.top.related > .col-md-3 {
      -ms-flex: 0 0 100%;
      -webkit-box-flex: 0;
              flex: 0 0 100%;
      max-width: 100%;
  }
  .tag_watch_side_tab:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: rgb(0 0 0 / 10%);
  }
  .tag_watch_side_tab .btn {
      border: 0;
      border-bottom: 2px solid transparent;
      border-radius: 0;
  }
  .tag_watch_side_tab .btn.active {
      border-color: var(--main);
  }
  .tag_vid_comment_text {
      border-color: #e7e7e7;
      background: #fff;
      resize: none;
      font-size: 90%;
  }
  .tag_vid_comment_text:focus {
      border-color: var(--main);
      -webkit-box-shadow: 0 0 0 1px var(--main);
              box-shadow: 0 0 0 1px var(--main);
  }
  .tag_vid_box_emoji span {
      font-size: 22px;
      display: inline-block;
      margin: 3.9px;
      width: 30px;
      height: 30px;
  }
  .mejs__overlay,
  .mejs__poster {
      width: 100% !important;
      height: 100% !important;
  }
  .ad-link {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 9;
      background: #000;
  }
  .ads-test {
      bottom: 15px;
      right: 15px;
  }
  body .plyr {
      height: 100%;
  }
  body .plyr__control--overlaid {
      color: var(--main-color);
      background: color-mix(in srgb, var(--main), #000 20%);
      opacity: 0.7;
  }
  body .plyr--video .plyr__control.plyr__tab-focus,
  body .plyr--video .plyr__control:hover,
  body .plyr--video .plyr__control[aria-expanded="true"] {
      background: var(--main);
      color: var(--main-hover-color);
      border-radius: 50px;
      opacity: 0.8;
  }
  .tag_watch_movie .embed-responsive,
  body.theater .embed-responsive {
      max-height: calc(85vh - 140px);
  }
  body.theater .tag_main_vid_details {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
  }
  .tag_watch_movie .tag_watch_details,
  body.theater .tag_watch_details {
      width: 70%;
      margin: auto;
  }
  .tag_watch_movie .tag_emp_msg,
  body.theater .tag_emp_msg {
      max-height: calc(100vh - 140px);
  }
  .tag_watch_movie .tag_watch_side,
  body.theater .tag_watch_side {
      position: relative !important;
      top: auto;
      bottom: auto;
      padding-top: 1.5rem;
  }
  .vid_mov_e_info li {
      display: table-row;
  }
  .vid_mov_e_info li span {
      display: table-cell;
  }
  .vid_mov_e_info li span:first-child {
      padding: 0 20px 0 0;
      white-space: nowrap;
  }
  .stars[data-stars] .star path {
      fill: #ef8f12;
  }
  .play-list-container {
      border-radius: 0 0 16px 16px;
  }
  .tag_watch_plist_bg,
  .tag_watch_plist_grad_bg {
      background: rgb(0 0 0 / 70%);
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
  }
  .tag_watch_plist_img_bg {
      opacity: 0.7;
      -webkit-filter: blur(160px);
              filter: blur(160px);
      margin: -160px;
  }
  .tag_watch_plist_img_bg img {
      -o-object-fit: cover;
         object-fit: cover;
  }
  .tag_watch_plist_grad_bg {
      background: -o-linear-gradient(45deg, rgb(0 0 0 / 30%), transparent);
      background: linear-gradient(45deg, rgb(0 0 0 / 30%), transparent);
  }
  .og-metadata {
      padding: 10px;
      border: 1px solid var(--border-light);
      border-left: 3px solid var(--main) !important;
      border-radius: 12px;
      background: #fff;
      display: flex;
      flex-direction: column;
      max-width: 300px;
  }
  .og-img-thumbnail {
      width: 100%;
      object-fit: cover;
      border-radius: 5px;
      margin-bottom: 5px;
      cursor: pointer;
      max-height: 300px;
  }
  .og-title {
      font-size: 14px;
      margin-bottom: 5px;
      overflow: hidden;
      margin: 0 0 8px;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
  }
  .og-description {
      overflow: hidden;
      margin: 0 0 8px;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      font-size: 13px;
  }
  .og-close-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      border: none;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      cursor: pointer;
      font-size: 16px;
      line-height: 20px;
      text-align: center;
      color: currentColor;
      background: transparent;
  }
  .og-link {
      text-decoration: none;
      font-size: 12px;
      overflow: hidden;
      margin: 0 0 8px;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
  }
  .og-link:hover {
      text-decoration: underline;
  }
  .og-preview {
      display: none;
      position: absolute;
      bottom: 100%;
      width: 100%;
      border: 1px solid var(--border-light);
      background: #fff;
      border-radius: 12px 12px 0 0;
      padding: 10px;
      box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
      z-index: 1;
      max-width: 300px;
      transform: translateX(-50%);
      left: 50%;
  }
  
  /* CSS: Add to your stylesheet */
  #scrollToTopBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-image: linear-gradient(190deg, var(--main), #012114);
    color: white;
    border: none;
    border-radius: 40%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 99;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
  }
  
  #scrollToTopBtn.visible {
    opacity: 1;
    visibility: visible;
  }
  
  #scrollToTopBtn:hover {
    background-color: #555;
    transform: translateY(-2px);
  }
  
  .play-list-cont {
      overflow-x: auto;
      gap: 25px;
  }
  .play-list-cont .side-barlist-wrapper {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
  }
  .play-list-cont .side-barlist-wrapper:before {
      content: counter(Serial);
      color: rgb(255 255 255 / 70%);
      font-weight: 900;
      font-size: 80px;
      -webkit-text-fill-color: rgb(0 0 0 / 15%);
      -webkit-text-stroke: 2px rgb(255 255 255 / 40%);
      line-height: 1;
      margin-right: -15px;
      margin-top: 50px;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
  }
  .play-list-cont .side-barlist-wrapper .plist_itemm {
      width: 230px;
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
  }
  .vid-number-cont {
      font-size: 0;
      left: -25px;
      top: 10px;
  }
  .vid-number-cont i {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M19.0717 19.8211C18.8817 19.8211 18.6917 19.7511 18.5417 19.6011C18.2517 19.3111 18.2517 18.8311 18.5417 18.5411C22.1517 14.9311 22.1517 9.06109 18.5417 5.46109C18.2517 5.17109 18.2517 4.69109 18.5417 4.40109C18.8317 4.11109 19.3117 4.11109 19.6017 4.40109C23.7917 8.59109 23.7917 15.4111 19.6017 19.6011C19.4517 19.7511 19.2617 19.8211 19.0717 19.8211Z' fill='%23fff'/%3e%3cpath d='M4.93031 19.8211C4.74031 19.8211 4.55031 19.7511 4.40031 19.6011C0.210312 15.4111 0.210312 8.59109 4.40031 4.40109C4.69031 4.11109 5.17031 4.11109 5.46031 4.40109C5.75031 4.69109 5.75031 5.17109 5.46031 5.46109C1.85031 9.07109 1.85031 14.9411 5.46031 18.5411C5.75031 18.8311 5.75031 19.3111 5.46031 19.6011C5.31031 19.7511 5.12031 19.8211 4.93031 19.8211Z' fill='%23fff'/%3e%3cpath d='M11.9988 22.7119C10.7488 22.7019 9.55878 22.5019 8.44878 22.1119C8.05878 21.9719 7.84878 21.5419 7.98878 21.1519C8.12878 20.7619 8.54878 20.5519 8.94878 20.6919C9.90878 21.0219 10.9288 21.2019 12.0088 21.2019C13.0788 21.2019 14.1088 21.0219 15.0588 20.6919C15.4488 20.5619 15.8788 20.7619 16.0188 21.1519C16.1588 21.5419 15.9488 21.9719 15.5588 22.1119C14.4388 22.5019 13.2488 22.7119 11.9988 22.7119Z' fill='%23fff'/%3e%3cpath d='M15.2988 3.33906C15.2188 3.33906 15.1288 3.32906 15.0488 3.29906C14.0988 2.95906 13.0688 2.78906 11.9988 2.78906C10.9288 2.78906 9.90878 2.96906 8.94878 3.29906C8.54878 3.42906 8.12878 3.22906 7.98878 2.83906C7.84878 2.44906 8.05878 2.01906 8.44878 1.87906C9.56878 1.48906 10.7588 1.28906 11.9988 1.28906C13.2388 1.28906 14.4388 1.48906 15.5488 1.87906C15.9388 2.01906 16.1488 2.44906 16.0088 2.83906C15.8988 3.14906 15.6088 3.33906 15.2988 3.33906Z' fill='%23fff'/%3e%3cpath d='M8.73828 12.0001V10.3301C8.73828 8.25014 10.2083 7.40014 12.0083 8.44014L13.4583 9.28014L14.9083 10.1201C16.7083 11.1601 16.7083 12.8601 14.9083 13.9001L13.4583 14.7401L12.0083 15.5801C10.2083 16.6201 8.73828 15.7701 8.73828 13.6901V12.0001Z' fill='%23fff'/%3e%3c/svg%3e ");
      width: 22px;
      height: 22px;
      background-position: center;
      background-size: contain;
      opacity: 0.9;
  }
  .watch_live_video .tag_live_comments {
      max-width: none;
  }
  .main-comment-data-sp {
      margin-top: 10px;
  }
  .main-comment-data-sp .user-avatar {
      width: 40px;
      height: 40px;
      margin-right: 15px;
  }
  .main-comment-data-sp .user-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
  }
  .main-comment-data-sp .user-name a {
      color: #fff;
      font-weight: 500;
  }
  .main-comment-data-sp .user-comment,
  .main-comment-data-sp .user-name {
      margin-left: 55px;
  }
  .main-comment-data-sp .comment-text {
      color: rgb(255 255 255 / 80%);
      font-size: 0.975em;
  }
  .watermark {
      z-index: 10;
      right: 20px;
      top: 20px;
  }
  .watermark img {
      max-height: 45px;
      max-width: 150px;
  }
  #header_ad_:not(:empty) + #container_content > .pb-5 > .tag_profile_cover {
      margin-top: 30px;
  }
  #header_ad_:not(:empty).watch {
      max-width: 70%;
  }
  .tag_watch_movie #header_ad_:not(:empty).watch,
  body.theater #header_ad_:not(:empty).watch {
      max-width: 100%;
  }
  .dropdown-switch-account .user-avatar.active:before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: var(--main);
      border-radius: 10px;
      opacity: 0.07;
  }
  .mejs__iframe-overlay {
      z-index: 1;
  }
  
  .room-count,
  .room-title,
  .room-views {
      line-height: 1.3;
  }
  
  /* ==========================================================================
     General Layout and Base Styles
     ========================================================================== */
  html {
      position: fixed;
      width: 100%;
      height: 100vh;
  }
  
  .pt_sec_nav_cats {
      background: var(--body-bg);
      z-index: 3;
      top: 70px;
      position: fixed;
      width: -moz-available;
      width: -webkit-fill-available;
  }
  
  .pt_sec_nav_slide_prnt {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;
      margin-bottom: 10px;
  }
  
  .pt_sec_nav_slide > div {
      margin: 4px;
      display: block;
      flex: 0 0 auto;
      width: auto;
  }
  
  .pt_sec_nav_slide > div a {
      border-radius: 8px;
      text-decoration: none;
      display: block;
      line-height: 18px;
      color: inherit;
      background: color-mix(in srgb, var(--body-bg), #00000029 40%);
      font-size: 14px;
      transition: 0.1s;
      font-weight: 500;
      padding: 5px 12px;
      min-width: 60px;
  }
  
  .pt_sec_nav_slide > div a:hover {
      background: color-mix(in srgb, var(--body-bg), #000 80%) !important;
      color: #fff !important;
  }
  
  .pt_sec_nav_slide > div a.active {
      background-color: var(--main);
      color: #fff;
  }
  
  .pt_sec_nav_slide_prnt .swiper-button-next,
  .pt_sec_nav_slide_prnt .swiper-button-prev {
      text-align: center;
      padding: 0;
      height: 28px;
      line-height: 28px;
      width: 28px;
      position: absolute;
      top: 4px;
      box-shadow: 0 0 10px 20px color-mix(in srgb, var(--body-bg), #fff 30%);
      margin: 0;
      color: currentColor;
      background: var(--border-light);
      border: 0;
      bottom: auto;
      transform: rotate(0);
  }
  
  .pt_sec_nav_slide_prnt .swiper-button-next:hover,
  .pt_sec_nav_slide_prnt .swiper-button-prev:hover {
      background: var(--gray);
      color: #fff;
  }
  
  .pt_sec_nav_slide_prnt .swiper-button-next {
      right: 0px;
      border-radius: 50px;
  }
  
  .pt_sec_nav_slide_prnt .swiper-button-prev {
      left: 0;
      border-radius: 50px;
  }
  
  .pt_sec_nav_slide_prnt .swiper-button-next.swiper-button-disabled,
  .pt_sec_nav_slide_prnt .swiper-button-prev.swiper-button-disabled {
      opacity: 0;
      visibility: hidden;
  }
  
  .pt_sec_nav_slide_prnt .swiper-button-next:after,
  .pt_sec_nav_slide_prnt .swiper-button-prev:after {
      font-size: 14px;
      font-weight: 700;
  }
  
  #main-container {
      padding-bottom: 20px !important;
  }
  
  /* ==========================================================================
     Modal and Overlay Styles
     ========================================================================== */
  
  #followModal .modal-content {
      background: linear-gradient(135deg, #06240e, #27c179);
      text-align: center;
      color: #fff;
  }
  
  @keyframes bounceIn {
      0% { transform: scale(0.7); opacity: 0; }
      60% { transform: scale(1.1); opacity: 1; }
      100% { transform: scale(1); }
  }
  
  #followModal .modal-logo {
      height: auto;
      margin: 0 auto 15px;
      display: block;
      width: 100%;
  }
  
  #followModal h2 {
      font-size: 26px;
      margin-bottom: 10px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  #followModal p {
      font-size: 16px;
      margin-bottom: 20px;
  }
  
  #followModal .social-buttons {
      display: flex;
      flex-direction: column;
      gap: 15px;
  }
  
  #followModal .x-btn {
      background: linear-gradient(45deg, #000, #333);
  }
  
  #followModal .telegram-btn {
      background: linear-gradient(45deg, #0088cc, #33b5e5);
  }
  
  #chatImageModal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      overflow: hidden;
      user-select: none;
      z-index: 100;
      justify-content: center;
      align-items: center;
  }
  
  #chatModalImage {
      max-width: 90%;
      max-height: 90vh;
      z-index: 100;
      transition: transform 0.1s ease-out;
      touch-action: none;
  }
  
  #chatImageModal .btn {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 101;
      cursor: pointer;
  }
  
  #chat-drag-overlay {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 12px;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 128, 255, 0.71);
      z-index: 101;
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
  }
  
  #chat-drag-overlay span {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 30px;
      width: 100%;
      font-weight: 700;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  }
  .overlay-description {
    font-size: 13px;
  }
  #feedbackModal .form-group .checkbox-container {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 38px; /* Matches typical input height */
  }
  #feedbackModal .form-group .checkbox-input {
      width: 18px;
      height: 18px;
      margin: 0 10px 0 0; /* Space between checkbox and label */
      cursor: pointer;
      vertical-align: middle;
  }
  #feedbackModal .form-group .checkbox-container label {
      position: absolute;
      top: 50%;
      left: 28px; /* Offset to account for checkbox width */
      transform: translateY(-50%);
      font-size: 14px;
      color: currentColor;
      transition: all 0.2s ease;
      pointer-events: none;
  }
  #feedbackModal .toggle-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .feedback-list {
      margin-top: 10px;
  }
  .feedback-list .feedback-item {
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      background: #f6f6f6;
  }
  .feedback-list .feedback-item .d-flex {
      align-items: center;
      margin-bottom: 10px;
  }
  
  .feedback-list .feedback-item span {
      font-size: 14px;
  }
  
  .feedback-list .feedback-item span strong {
      color: #78B159;
      font-weight: 600;
  }
  .feedback-list .feedback-item p {
      margin: 0 0 10px;
      font-size: 14px;
      line-height: 1.5;
  }
  .feedback-list .feedback-item small {
      font-size: 12px;
      display: block;
      text-align: left;
  }
  .feedback_placeholder {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 11;
      opacity: 0;
      transition: opacity 0.5s ease;
  }
  .feedback_placeholder.show-ended {
      display: flex;
      opacity: 1;
  }
  .feedback-content {
      text-align: center;
      padding: 20px;
  /*
      max-width: 80%;
  */
  }
  .feedback-content h3 {
      margin-bottom: 10px;
  }
  .feedback-content p {
      margin-bottom: 20px;
  }
  .feedback-content button {
      margin: 0 10px;
  }
  .text-warning {
    color: #e49400 !important;
  }
  #feedbackForm .fa-star {
    font-size: 30px;
  }
  #feedbackForm .fas.fa-star:hover {
    color: #f4c366 !important;
  }
  /* ==========================================================================
     Chat and Comment Components
     ========================================================================== */
  .hand-pointer-pinned {
      position: absolute;
      top: -40px;
      left: 50%;
      transform: translateX(-50%);
      animation: hand-bounce 5s ease-in-out forwards;
      height: 40px;
  }
  
  @keyframes hand-bounce {
      0% {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
      }
      10%, 30%, 50%, 70%, 90% {
          transform: translateX(-50%) translateY(-5px); /* Bounce up */
      }
      20%, 40%, 60%, 80% {
          transform: translateX(-50%) translateY(5px); /* Bounce down */
      }
      100% {
          opacity: 0;
          transform: translateX(-50%) translateY(0);
      }
  }
  
  .whats-this-btn {
      margin-left: 10px;
  }
  .points-per-streamer-note {
     font-size: 13px; font-style: italic; color: #555; margin-top: 15px;
  }
  .points-description {
    font-size: 15px;
  }
  .close-btn {
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
      color: #999;
  }
  
  .close-btn:hover {
      color: #333;
  }
  
  .points-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .points-list li {
      padding: 10px 0;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      justify-content: space-between;
  }
  
  .points-list li:last-child {
      border-bottom: none;
  }
  
  .points-action {
      flex: 1;
  }
  
  .points-value {
      font-weight: bold;
      color: var(--main);
  }
  .leaderboardUser {
      display: flex;
      align-items: center;
      padding: 5px 0;
      border-bottom: 1px solid var(--border-light);
      font-size: 12px;
  }
  
  .leaderboardUser:last-child {
      border-bottom: none;
  }
  
  .leaderboardContainer .rank, .leaderboardContainer .medal {
      width: 25px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      font-size: 16px;
      font-weight: bold;
      color: currentColor;
  }
  
  .leaderboardContainer .medal {
      font-size: 15px; 
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .leaderboardContainer .medal.gold {
      background: linear-gradient(to bottom, #ffd700, #f1c40f);
      color: #fff;
  }
  
  .leaderboardContainer .medal.silver {
      background: linear-gradient(to bottom, #c0c0c0, #a9a9a9);
      color: #fff;
  }
  
  .leaderboardContainer .medal.bronze {
      background: linear-gradient(to bottom, #cd7f32, #b87333);
      color: #fff;
  }
  
  .leaderboardContainer .avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
  }
  
  .leaderboardContainer .userName {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .leaderboardContainer .points {
      font-weight: bold;
      color: var(--main);
      margin-left: 10px;
  }
  
  .leaderboardContainer .more-info {
      text-align: center;
      margin-top: 10px;
      font-size: 12px;
      color: currentColor;
      cursor: pointer;
  }
  
  .more-info:hover {
      color: #007bff;
  }
  
  .leaderboardContainer:empty::before {
      content: 'No contributions yet';
      display: block;
      text-align: center;
      color: currentColor;
      font-size: 14px;
      padding: 20px 0;
  }
  .whatsNewContainer {
      background: var(--gray-dark);
      border-radius: 12px;
      padding: 10px;
      color: #fff;
  }
  
  .close-btn-whatsnew {
      position: absolute;
      top: 20px;
      right: 25px;
      width: 10px;
      height: 10px;
      cursor: pointer;
  }
  
  .close-btn-whatsnew::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      line-height: 10px;
      color: #fff;
      font-size: 30px;
  }
  
  .suggestion-list {
      border-radius: 8px;
      padding: 0;
      margin: 0;
      box-shadow: 0 0 6px rgba(145, 145, 145, 0.3), 0 1px 3px rgba(255, 255, 255, 0.05);
      max-height: 150px;
  }
  
  .suggestion-list li {
      background: var(--body-bg);
      padding: 8px 12px;
      cursor: pointer;
      font-size: 14px;
  }
  
  .suggestion-list li.selected,
  .suggestion-list li:hover {
      background: var(--border-light);
  }
  
  .reply-button {
      padding: 5px 10px;
      background-color: rgba(30, 144, 255, 0.8);
      color: #fff;
      border: none;
      border-radius: 50px;
      cursor: pointer;
  }
  
  .reply-button:hover {
      background-color: #0056b3;
  }
  
  .ai-comment {
      box-shadow: 0 0 20px rgba(30, 144, 255, 0.8);
      border-radius: 12px;
      padding: 10px;
      margin-top: 20px;
      margin-bottom: 20px;
  }
  
  #comment-textarea-stream {
      min-height: 40px;
      resize: none;
      overflow: hidden;
      box-sizing: border-box;
      vertical-align: top;
      transition: height 0.3s;
      font-size: 13px;
  }
  
  #comment-textarea-stream:focus {
      border-color: var(--main);
      height: 60px;
  }
  
  .chat-img-thumbnail {
      max-width: 80%;
      max-height: 150px;
      cursor: pointer;
      margin: 5px;
      object-fit: cover;
      border-radius: 8px;
  }
  
  .chat-img-thumbnail-comment {
      max-height: 20px;
      cursor: pointer;
      margin-left: 5px;
      object-fit: cover;
      border-radius: 5px;
  }
  
  .avatar-thumbnail-comment {
      height: 40px;
      margin-right: 5px;
      border-radius: 50px;
  }
  
  #video-user-comments-stream .main-comment-data-sp {
      font-size: 13px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 0;
  }
  
  #video-user-comments-stream .main-comment-data-sp .user-avatar {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-right: 0;
      position: relative;
  }
  
  #video-user-comments-stream .main-comment-data-sp .user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  #pinned-comment-stream .content {
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
      width: 100%;
      font-size: 14px;
  }
  
  #pinned-comment-stream .user-avatar,
  #pinned-comment-stream .user-avatar img {
      width: 25px;
      height: 25px;
  }
  
  #pinned-comment-stream .options-box {
      position: absolute;
      right: 18px;
      top: 18px;
  }
  
  #pinned-comment-stream .comment-text {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
  }
  
  .pt_video_comments {
      z-index: 1;
      position: relative;
  }
  
  .pt_video_comments-stream .comment-button:has(#video-pinned-comments-stream) {
      top: 0;
      position: sticky;
      z-index: 2;
      left: 5px;
      right: 5px;
  }
  
  .pt_blogcomm_combo_stream {
      border-top: 1px solid var(--border-light);
      background: var(--body-bg);
      position: fixed;
      bottom: 0;
      padding: 10px;
      width: 100%;
      z-index: 1;
      top: auto;
  }
  .reply-header {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      font-size: 13px;
  }
  .reply-preview, .reply-block {
      background: #dedede99;
      border-radius: 8px;
      padding: 8px;
      margin-bottom: 15px;
      font-size: 0.9em;
      position: relative;
      width: auto;
      width: -webkit-fill-available;
  }
  .reply-preview {
      border-left: 3px solid var(--main);
  }
  .reply-block::before {
    content: '';
    position: absolute;
    left: -37px;
    top: 35px;
    bottom: -10px;
    width: 30px;
    height: calc(100% - 25px);
    border-left: 2px solid var(--main);
  /*
    border-bottom-left-radius: 10px;
    border-bottom: 2px solid var(--main);
  */
    border-top: 2px solid var(--main);
    border-top-left-radius: 10px;
  }
  .reply-preview p, .reply-block p {
      margin: 0;
      color: currentColor;
      font-size: 13px;
  }
  .reply-preview p {
      margin: 10px 0 0 0;
  }
  .reply-preview button {
      position: absolute;
      top: 5px;
      right: 5px;
      background: none;
      border: none;
      color: currentColor;
      text-decoration: underline;
      cursor: pointer;
      font-size: 12px;
  }
  .reply-preview .user-avatar img, .reply-block .user-avatar img {
      width: 24px;
      height: 24px;
      border-radius: 50%;
  }
  .streamComments {
      top: 70px;
      right: 0;
      bottom: 0;
      width: calc(30% - 2rem);
      position: relative;
      transition: transform 0.2s ease-out;
      will-change: transform;
      backface-visibility: hidden;
      z-index: 11;
      transform: translateX(100%);
      background: var(--body-bg);
  }
  
  .streamComments.visible {
      transform: translateX(0);
  }
  
  .streamComments_innr {
      overflow: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      max-height: calc(100% - 185px);
      background: #f9f9f9;
  }
  
  .sign_in_to_chat {
      position: fixed;
      bottom: 25px;
      background: var(--body-bg);
      padding: 10px;
      display: flex;
      width: 100%;
      justify-content: center;
  }
  
  .stream-unread-messages, .message-unread-messages {
      position: absolute;
      border-radius: 50px;
      padding: 16px;
      color: #fff;
      width: 22px;
      height: 22px;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      top: -35px;
      right: 21px;
      border: 0;
      background: var(--main);
      opacity: 0.9;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      display: flex;
      white-space: nowrap;
  }
  
  /* ==========================================================================
     Voting and Poll Components
     ========================================================================== */
  
  /* Default button styles (no animation by default) */
  #voteToggle, #voteToggle2 {
      position: relative;
  }
  
  /* Apply heartbeat animation when the 'pulse' class is added */
  #voteToggle.pulse, #voteToggle2.pulse {
      animation: heartbeat 1.5s infinite cubic-bezier(0.66, 0, 0.34, 1);
      background: var(--main);
  }
  
  @keyframes heartbeat {
      0%, 20%, 50%, 80%, 100% {
          transform: scale(1);
      }
      40% {
          transform: scale(1.1);
      }
      70% {
          transform: scale(1.05);
      }
  }
  
  #voteControls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 30px;
  }
  
  #voteControls.hidden,
  .hidden,
  .vote-toggle.hidden {
      display: none !important;
  }
  
  #voteType {
      border: none;
      border-radius: 8px;
      color: inherit;
      font-size: 14px;
      cursor: pointer;
      background: rgba(164, 164, 164, 0.15);
  }
  
  #voteDuration,
  #voteQuestion,
  .poll-option {
      border: none;
      border-radius: 8px;
      background: rgba(164, 164, 164, 0.15);
      color: inherit;
      font-size: 14px;
      padding: 8px;
  }
  
  #voteQuestion {
      flex: 1;
      min-width: 0;
  }
  
  #pollOptions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%;
      margin-top: 5px;
  }
  
  .poll-option {
      width: calc(50% - 4px);
  }
  
  #startVote,
  #stopVote {
      padding: 8px 16px;
      border: none;
      border-radius: 8px;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
  }
  
  #startVote {
      background: linear-gradient(135deg, #4caf50, #388e3c);
  }
  
  #stopVote {
      background: linear-gradient(135deg, #ff6b6b, #d32f2f);
  }
  
  #startVote:hover,
  #stopVote:hover {
      opacity: 0.9;
  }
  
  #voteQuestionText {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 10px;
  }
  
  #voteTimer {
      display: block;
      font-size: 14px;
      margin-bottom: 15px;
  }
  
  .vote-actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
  }
  
  .thumb-group {
      display: flex;
      align-items: center;
      gap: 5px;
  }
  
  #resultsSlider,
  #voteOptions,
  .poll-result {
      display: flex;
      gap: 10px;
  }
  
  #thumbsDown,
  #thumbsUp {
      fill: #757575;
      font-size: 24px;
      background: 0 0;
      border: none;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.2s;
  }
  
  #thumbsDown:hover,
  #thumbsUp:hover {
      transform: scale(1.2);
      opacity: 0.8;
  }
  
  #thumbsDown:disabled,
  #thumbsUp:disabled {
      opacity: 0.5;
      cursor: not-allowed;
  }
  
  #thumbsDownCount,
  #thumbsUpCount {
      font-size: 14px;
  }
  
  .vote-slider {
      width: 100px;
      height: 10px;
      background: rgba(94, 94, 94, 0.2);
      position: relative;
      overflow: hidden;
      border-radius: 5px;
  }
  
  .down-slider,
  .up-slider {
      height: 100%;
      width: 0;
      transition: width 0.5s ease-in-out;
      position: absolute;
  }
  
  .up-slider {
      left: 0;
      background: #4caf50;
  }
  
  .down-slider {
      right: 0;
      background: #ff6b6b;
  }
  
  #voteOptions {
      flex-wrap: wrap;
      justify-content: center;
  }
  
  #voteOptions button {
      padding: 5px 10px;
      border: none;
      border-radius: 10px;
      color: inherit;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s, transform 0.2s;
      background: rgba(164, 164, 164, 0.15);
  }
  
  #voteOptions button:hover {
      transform: scale(1.05);
      background: rgba(255, 255, 255, 0.3);
  }
  
  #voteOptions button:disabled {
      opacity: 1;
      cursor: not-allowed;
      background: var(--main) !important;
      color: #fff;
  }
  
  #resultsSlider {
      margin-top: 5px;
      margin-bottom: 20px;
      flex-direction: column;
  }
  
  .poll-result {
      align-items: center;
      justify-content: center;
  }
  
  .poll-result span {
      font-size: 14px;
      width: 100px;
      text-align: left;
  }
  
  .poll-result-bar {
      width: 50%;
      height: 12px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50px;
      overflow: hidden;
  }
  
  .poll-result-fill {
      height: 100%;
      background: linear-gradient(90deg, #4caf50, #81c784);
      width: 0;
      transition: width 0.5s ease-in-out;
  }
  
  .more-voters {
      font-size: 14px;
  }
  
  .voter-item img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: -10px;
  }
  
  /* ==========================================================================
     Emoji and Suggestion Components
     ========================================================================== */
  #toggle-picker {
      cursor: pointer;
  }
  
  #emoji-picker {
      position: absolute;
      bottom: 100%;
      left: 0;
      z-index: 1000;
  }
  
  #emoji-picker emoji-mart {
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      border: 1px solid #ccc;
  }
  
  #emoji-suggestions {
      position: absolute;
      background: var(--body-bg);
      color: currentColor;
      border: none;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(255, 255, 255, 0.05);
      padding: 4px 0;
      max-height: 200px;
      display: none;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      transition: opacity 0.1s ease-in-out;
      opacity: 0;
      border-radius: 8px;
  }
  
  #emoji-suggestions li {
      padding: 8px 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background-color 0.2s;
      font-size: 14px;
  }
  
  #emoji-suggestions li:hover {
      background: var(--border-light);
  }
  
    /* ==========================================================================
       Giphy Integration
       ========================================================================== */
    .giphy-btn {
        background-color: transparent;
        border: none;
        cursor: pointer;
        fill: #fff;
        color: currentColor;
        margin-right: 6px;
    }
  
    .giphy-btn svg {
        height: 38px;
        width: 38px;
        cursor: pointer;
        pointer-events: none;
    }
    
    /* Shared giphy classes for both messaging and rtmp */
    .giphy-result {
        max-width: 150px;
        height: 100px;
        margin: 5px;
        cursor: pointer;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid transparent;
    }
  
    .giphy-search {
        width: 100%;
        margin-bottom: 10px;
        padding: 8px 12px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 14px;
    }
  
    .giphy-search:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
  
    .giphy-results {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
        max-height: 400px;
        overflow-y: auto;
        cursor: pointer;
        object-fit: cover;
    }
  
  /* ==========================================================================
     Microphone and Voice Indicators
     ========================================================================== */
  .hasthemic::before,
  .hasthemicuser::before {
      content: "";
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      animation: 1.5s ease-in-out infinite pulseMic;
  }
  
  .hasthemic {
      background-image: linear-gradient(to left, var(--main), var(--body-bg));
      background-repeat: repeat, no-repeat;
      background-size: auto, auto;
      border-radius: 25px;
      position: relative;
      padding: 12px 5px 12px 25px;
  }
  
  .hasthemic::before {
      position: absolute;
      left: -15px;
  }
  
  .hasthemicuser {
      position: relative;
      padding: 5px 5px 5px 25px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
  }
  
  .hasthemicuser::before {
      position: absolute;
      left: 0;
  }
  
  #hasthemic-banner {
      width: 100%;
      max-width: calc(100% - 130px);
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      font-size: 13px;
      position: absolute;
  }
  
  #hasthemic-countdown {
      font-size: 15px;
      padding: 2px 8px;
      background: var(--dark);
      border-radius: 5px;
      color: #fff;
  }
  
  @keyframes pulseMic {
      0%, 100% {
          transform: translateY(-50%) scale(1);
      }
      50% {
          transform: translateY(-50%) scale(1.2);
      }
  }
  /* ==========================================================================
     Admin Panel and Settings
     ========================================================================== */
  #adminTabs {
    border: none;
    gap: 5px;
  }
  #adminTabs .nav-link {
    color: currentColor;
    border: none;
  }
  #adminTabs .nav-link.active {
    color: currentColor;
  }
  
  .online-users-list {
      max-height: 200px;
      overflow-y: auto;
      margin-top: 10px;
      padding: 10px;
      border-radius: 8px;
  }
  .online-user {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 5px 0;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-light);
  }
  .online-user:last-child {
      border-bottom: none;
  }
  .online-user img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      object-fit: cover;
  }
  .online-user span {
      font-size: 14px;
      color: currentColor;
  }
  .online-user small {
      font-size: 12px;
      color: currentColor;
      margin-left: auto;
  }
  .online-users-list:empty::before {
      content: "No users online";
      display: block;
      text-align: center;
      color: currentColor;
      font-style: italic;
  }
  .adminButton {
      position: fixed;
      top: 50%;
      right: -25px;
      z-index: 100;
      color: currentcolor;
      opacity: 0.4;
  }
  
  .adminButton svg g {
    fill: var(--border-light);
  }
  .adminButton svg text {
    fill: currentColor;
  }
  .adminButton:hover {
      opacity: 0.6;
  }
  
  .admin-info {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      background: linear-gradient(135deg, #f5f7fa, #e4e9f0);
      box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
      overflow-y: auto;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 10000;
      transform: translateX(100%);
      width: 60%;
  }
  
  .admin-info.admin-slide {
      transform: translateX(0);
  }
  
  .admin-content {
      padding: 2rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
  }
  
  .admin-header h2 {
      font-size: 1.5rem;
      color: #333;
      margin: 0;
  }
  
  .admin-header p {
      font-size: 0.85rem;
      color: #666;
      margin: 0.25rem 0 0;
  }
  
  .admin-section {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1rem;
  }
  
  .admin-section h3 {
      font-size: 1.1rem;
      color: #333;
      margin: 0;
  }
  
  .resources-grid,
  .signups-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 0.75rem;
  }
  
  .online-card,
  .resource-card,
  .signup-card {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s;
      padding: 0.5rem;
      border-radius: 8px;
      background: #fff;
  }
  
  .online-card:hover,
  .resource-card:hover,
  .signup-card:hover {
      transform: translateY(-2px);
  }
  
  .resource-card svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
  }
  
  .resource-card span,
  .online-card span,
  .signup-card span {
      font-size: 0.85rem;
      color: #555;
  }
  
  .resource-card small,
  .signup-card small {
      font-size: 0.9rem;
      font-weight: 700;
      color: #333;
  }
  
  .online-card small {
      font-size: 1.1rem;
      font-weight: 700;
      color: #78b159;
  }
  
  .rooms-grid {
      display: grid;
      gap: 0.5rem;
      grid-template-columns: 1fr;
  }
  
  .room-card {
      background: #fff;
      border-radius: 8px;
      padding: 0.75rem;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      transition: opacity 0.2s, transform 0.2s;
      overflow: hidden;
  }
  
  .room-card:hover {
      transform: translateY(-3px);
  }
  
  .room-content {
      display: flex;
      align-items: center;
      gap: 0.75rem;
  }
  
  .room-thumbnail img {
      width: 100px;
      height: 60px;
      object-fit: cover;
      border-radius: 6px;
      flex-shrink: 0;
  }
  
  .room-details {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      overflow: hidden;
      min-width: 0;
  }
  
  .room-title {
      font-size: 1rem;
      font-weight: 600;
      text-decoration: none;
      display: block;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #333;
  }
  
  .room-title:hover {
      color: #78b159;
  }
  
  .room-stats {
      font-size: 0.85rem;
      color: #666;
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }
  
  .room-divider {
      margin: 0 0.5rem;
  }
  
  .usersOn {
      display: flex;
      align-items: center;
  }
  
  .usersOn div {
      width: fit-content;
      margin-right: -10px;
  }
  
  .room-avatar {
      width: 28px;
      height: 28px;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-left: -10px;
  }
  
  .room-avatar:first-child {
      margin-left: 0;
  }
  
  .room-avatar-more {
      font-size: 0.85rem;
      color: #666;
      font-weight: 500;
      margin-left: 0.25rem;
  }
  
  .queue-section {
      margin-top: 20px;
  }
  
  .queue-section h3 {
      font-size: 18px;
      margin-bottom: 10px;
      color: #333;
  }
  
  .queue-list {
      padding: 10px;
      border-radius: 5px;
      max-height: 200px;
      overflow-y: auto;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s;
      background: #fff;
  }
  
  .queue-item {
      display: flex;
      align-items: center;
      padding: 8px;
  }
  
  .queue-item:last-child {
      border-bottom: none;
  }
  
  .queue-item.processing {
      background-color: orange;
      border-radius: 12px;
  }
  
  .queue-thumbnail {
      width: 150px;
      object-fit: cover;
      margin-right: 10px;
      border-radius: 3px;
      aspect-ratio: 16 / 9;
  }
  
  .queue-details {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
  }
  
  .queue-details span {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    color: currentColor;
    -webkit-line-clamp: 2;
    -o-text-overflow: ellipsis;
    -webkit-box-orient: vertical;
  }
  
  .queue-details small {
      font-size: 12px;
      color: currentColor;
  }
  
  .processing .queue-details {
    color: #000;
    line-height: normal;
    overflow: hidden;
  }
  
  .maverick-controls {
      display: flex;
      flex-direction: column;
      gap: 24px;
  }
  
  .divider {
      border: 0;
      border-top: 1px solid #E9ECF0;
      margin: 0;
  }
  
  .maverick-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: currentColor;
  }
  
  .maverick-label {
      line-height: 24px;
  }
  
  .maverick-toggle {
      display: flex;
      gap: 12px;
      margin-bottom: 0;
  }
  
  .toggle-input-notification:checked + .toggle-label, .toggle-input-maverick:checked + .toggle-label, .toggle-input-chat:checked + .toggle-label {
      background: linear-gradient(45deg, #232362 0%, #00B7EB 100%);
  }
  
  .toggle-input-notification:checked + .toggle-label::after, .toggle-input-maverick:checked + .toggle-label::after, .toggle-input-chat:checked + .toggle-label::after {
      transform: translateX(22px);
  }
  
  .toggle-input, .toggle-input-notification, .toggle-input-maverick, .toggle-input-chat {
      display: none;
  }
  
  .toggle-label {
      width: 44px;
      height: 22px;
      background: #E9ECF0;
      border-radius: 11px;
      position: relative;
      cursor: pointer;
      transition: background 0.3s ease, box-shadow 0.3s ease;
      margin-bottom: 0;
  }
  
  .toggle-label:hover {
      box-shadow: 0 0 8px rgba(66, 68, 90, 0.1);
  }
  
  .toggle-label:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(0, 183, 235, 0.3);
  }
  
  .toggle-label::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 18px;
      height: 18px;
      background: #ffffff;
      border-radius: 50%;
      transition: transform 0.3s ease;
  }
  
  .toggle-input:checked + .toggle-label {
      background: linear-gradient(45deg, #232362 0%, #00B7EB 100%);
  }
  
  .toggle-input:checked + .toggle-label::after {
      transform: translateX(22px);
  }
  
  .toggle-status {
      font-size: 14px;
      color: currentColor;
      font-weight: 500;
  }
  
  .maverick-mode {
      display: flex;
      align-items: center;
      gap: 8px;
  }
  
  .toggle-button.mode-toggle {
      position: relative;	
      display: flex;
      cursor: pointer;
      height: 44px;
      width: 100%; /* Full container width */
      max-width: 400px; /* Optional: cap width */
      background: #fff;
      border: 1px solid #E9ECF0;
      border-radius: 50px;
      box-shadow: 0 4px 12px rgba(66, 68, 90, 0.06);
      transition: box-shadow 0.3s;
  }
  
  .toggle-button.mode-toggle:hover {
      box-shadow: 0 6px 16px rgba(66, 68, 90, 0.1);
  }
  
  .toggle-button.mode-toggle:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(0, 183, 235, 0.3);
  }
  
  .toggle-button.mode-toggle .slider {
      position: absolute;
      top: 4px;
      left: 3px;
      height: 80%;
      width: 23%;
      border-radius: inherit;
      background: #E7FFE0;
      border: 1px solid #b2ff9e;
      box-shadow: 0 4px 8px rgba(66, 68, 90, 0.1);
      transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .toggle-button.mode-toggle .text {
      font-size: 12px;
      line-height: 44px;
      pointer-events: none;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      width: 25%;
      text-align: center;
      transition: color 0.3s ease-out;
  }
  
  .toggle-button.mode-toggle.nice .slider {
      left: 3px;
      background: #E7FFE0;
      border-color: #b2ff9e;
  }
  
  .toggle-button.mode-toggle.sassy .slider {
      left: calc(25% - 2px);
      background: #D9F2FF;
      border-color: #b5e2fa;
  }
  
  .toggle-button.mode-toggle.unhinged .slider {
      left: calc(50% - 2px);
      background: #FFE8E8;
      border-color: #ffaaaa;
  }
  
  .toggle-button.mode-toggle.random .slider {
      left: calc(75% - 2px);
      background: #F5E8FF;
      border-color: #d8b8ff;
  }
  
  .toggle-button.mode-toggle.nice .v1,
  .toggle-button.mode-toggle.sassy .v2,
  .toggle-button.mode-toggle.unhinged .v3,
  .toggle-button.mode-toggle.random .v4 {
      color: #121428;
  }
  
  .toggle-button.chat-toggle {
      display: flex;
      cursor: pointer;
      height: 44px;
      width: 100%; /* Full container width */
      max-width: 220px; /* Optional: cap width */
      background: #fff;
      border: 1px solid #E9ECF0;
      border-radius: 50px;
      box-shadow: 0 4px 12px rgba(66, 68, 90, 0.06);
      transition: box-shadow 0.3s;
  }
  
  .toggle-button.chat-toggle:hover {
      box-shadow: 0 6px 16px rgba(66, 68, 90, 0.1);
  }
  
  .toggle-button.chat-toggle:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(0, 183, 235, 0.3);
  }
  
  .toggle-button.chat-toggle .slider {
      position: absolute;
      top: 4px;
      left: 3px;
      height: 80%;
      width: 48%;
      border-radius: inherit;
      background: #E7FFE0;
      border: 1px solid #b2ff9e;
      box-shadow: 0 4px 8px rgba(66, 68, 90, 0.1);
      transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  
  .toggle-button.chat-toggle .text {
      font-size: 14px;
      line-height: 44px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      transition: color 0.3s;
      pointer-events: none;
  }
  
  .toggle-button.chat-toggle .v1 {
      color: #121428;
  }
  
  .toggle-button.chat-toggle .v2 {
      color: #6D7485;
  }
  
  .toggle-button.chat-toggle.active .slider {
      left: calc(100% - 112px);
      background: #D9F2FF;
      border-color: #b5e2fa;
  }
  
  .toggle-button.chat-toggle.active .v1 {
      color: #6D7485;
  }
  
  .toggle-button.chat-toggle.active .v2 {
      color: #121428;
  }
  
  .hashtags {
      margin: 10px 0;
  }
  
  .hashtag-card {
      position: relative;
      margin: 4px;
      padding: 8px;
      color: currentColor !important;
  }
  .hashtag-svg {
      margin-right: 12px;
      color: currentColor;
  }
  .hashtag-svg svg {
      width: 32px;
      height: 32px;
      color: var(--main);
  }
  .hashtag-info {
      display: flex;
      flex-direction: column;
  }
  .hashtag-name {
      font-size: 1em;
      font-weight: inherit;
      color: currentColor;
  }
  .hashtag-count {
      font-size: 0.9em;
      font-weight: inherit;
      color: currentColor;
  }
  .tag_home_hashtag_list, .tag_home_chat_room_list {
      overflow-x: auto;
      white-space: nowrap;
      gap: 8px;
  }
  .hashtag-card::before {
      content: "";
      border-radius: 8px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: color-mix(in srgb, var(--body-bg), #000 50%);
      opacity: 0.1;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .chat-room-card {
      position: relative;
      margin: 4px;
      padding: 8px;
      color: currentColor !important;
      max-width: 300px;
  }
  .chat-room-card::before {
      content: "";
      border-radius: 8px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: color-mix(in srgb, var(--body-bg), #000 50%);
      opacity: 0.1;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .tag_home_hashtag_list.light a::before {
      background: color-mix(in srgb, var(--body-bg), #fff 50%);
  }
  .hashtag-card:hover::before, .chat-room-card:hover::before {
      opacity: 0.2;
  }
  
  .player-settings input[type=checkbox].switch.custom-toggle-input {
      --active: #04abf2;
      --active-inner: #fff;
      --border: #BBC1E1;
      --background: #fff;
      --disabled: #F6F8FF;
      --disabled-inner: #E1E6F9;
      appearance: none;
      width: 38px;
      height: 21px;
      border-radius: 11px;
      outline: none;
      position: relative;
      margin: 0;
      cursor: pointer;
      border: 1px solid #BBC1E1;
      transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
      vertical-align: middle;
      z-index: 0;
      opacity: 1;
  }
  
  .player-settings input[type=checkbox].switch.custom-toggle-input:after {
      content: "";
      position: absolute;
      left: 2px;
      top: 2px;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #BBC1E1;
      transform: translateX(0);
      transition: transform 0.3s ease, background 0.3s ease;
  }
  
  .player-settings input[type=checkbox].switch.custom-toggle-input:checked {
      background: #04abf2;
      border-color: #04abf2;
  }
  
  .player-settings input[type=checkbox].switch.custom-toggle-input:checked:after {
      background: #fff;
      transform: translateX(17px);
  }
  
  .player-settings input[type=checkbox].switch.custom-toggle-input:hover:not(:checked):not(:disabled) {
      border-color: #275EFE;
  }
  
  .player-settings input[type=checkbox].switch.custom-toggle-input:disabled {
      background: #F6F8FF;
      cursor: not-allowed;
      opacity: 0.9;
  }
  
  .player-settings input[type=checkbox].switch.custom-toggle-input:disabled:checked {
      background: #E1E6F9;
      border-color: #BBC1E1;
  }
  
  .player-settings input[type=checkbox].switch.custom-toggle-input:disabled:not(:checked):after {
      opacity: 0.6;
  }
  
  .player-settings input[type=checkbox].switch.custom-toggle-input:focus {
      box-shadow: 0 0 0 2px rgb(26, 92, 255 / 30%);
  }
  
  .player-settings input[type=checkbox].switch.custom-toggle-input + label {
      line-height: 21px;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      font-weight: normal;
      margin-left: 8px;
      color: currentColor;
      font-family: 'Poppins', sans-serif;
  }
  
  /* ==========================================================================
     Video Player and Stream Components
     ========================================================================== */
  .player-parent {
      position: relative;
      width: 100%;
      height: 100%;
      aspect-ratio: 16 / 9;
      max-height: 80dvh;
  }
  video, .cinematics-glow {
      max-height: 80dvh;
  }
  
  media-player::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.83);
    z-index: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
    display: none;
  }
  
  media-player {
    opacity: 0;
    transition: opacity 0.5s ease-in;
  }
  
  media-player[data-can-load] {
    opacity: 1;
    animation: fadeIn 0.5s ease-in forwards;
  }
  media-provider:has(.video-processing) .vds-poster[data-visible] {
    opacity: 0 !important;
  }
  :where(.vds-poster) {
    background-color: transparent !important;
  }
  .video-processing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    border-radius: 3px;
  }
  
  .video-processing img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 3px;
  }
  
  .centered-text-stream-owners {
    padding: 0 5px;
    z-index: 2;
    font-size: 12px;
    background: var(--border-light);
    border-radius: 5px;
  }
  
  .container-stream-owners {
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .container-stream-owners::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 1;
    background: var(--border-light);
  }
  
  .header-live-header {
      background: #e7e7e7;
      color: currentColor;
      border-radius: 12px 12px 0 0;
      height: 42px;
  }
  
  .header-live-secondary {
    background: #fff;
    border-bottom: 1px solid var(--border-light);
    height: 42px;
  }
  
  .header-live-chat {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    gap: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  .chat-connected {
      background: var(--main);
      padding: 2px 6px;
      border-radius: 5px;
      display: flex;
  }
  
  .chat-connected span {
      font-size: 9px;
      color: #fff;
  }
  
  .player-settings {
      display: grid;
      justify-items: start;
      gap: 10px;
      align-items: center;
  }
  
  .tag_main_player,
  .tag_watch_side {
      transition: 0.2s;
  }
  
  .streamListLogo {
    top: 50%;
    border-radius: 12px;
    height: 101%; /* Kept as-is */
    background-image: linear-gradient(25deg, #000, var(--main)) !important;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10%;
  }
  
  .streamListLogo .logoText {
    display: flex; /* Flex row for SVG on left, text next */
    flex-direction: row;
    align-items: center; /* Vertically center SVG and text */
    justify-content: center; /* Changed: Center contents horizontally */
    width: 100%; /* Full width to allow centering within container */
    font-family: 'Astonpoliz', sans-serif;
    color: #fff; /* Example color */
    text-align: center; /* Changed: Center text alignment */
    white-space: nowrap;
    margin: 0;
    gap: 0.2em; /* Space between SVG and text; scales with font-size */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.52);
  }
  
  .player-parent .streamListLogo .logoText {
    display: flex; /* Flex row for SVG on left, text next */
    flex-direction: row;
    align-items: center; /* Vertically center SVG and text */
    justify-content: center; /* Changed: Center contents horizontally */
    width: 100%; /* Full width to allow centering within container */
    font-family: 'Astonpoliz', sans-serif;
    font-size: 4dvw; /* Scales with viewport */
    color: #fff; /* Example color */
    text-align: center; /* Changed: Center text alignment */
    white-space: nowrap;
    margin: 0;
    gap: 0.2em; /* Space between SVG and text; scales with font-size */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.52);
  }
  
  .player-parent .streamListLogo .logoTextProcessing {
    font-size: 1.8dvw; /* Scales with viewport */
    color: #fff; /* Example color */
    text-align: center; /* Changed: Center text alignment */
    white-space: nowrap;
    margin: 0;
    gap: 0.2em; /* Space between SVG and text; scales with font-size */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.52);
  }
  
  .streamListLogo .logoText .logoSvg {
    width: 1.2em; /* Scales with font-size for responsiveness */
    height: 1.2em; /* Keeps aspect ratio */
    flex-shrink: 0; /* Prevents squishing on small screens */
    color: #fff; /* Matches text color; adjust as needed */
  }
  
  .tag_main_player .streamListLogo {
      z-index: 10 !important;
  }
  
  .streamListLogo .rounded-circle.emptyAvatar {
      box-shadow: 0 0 40px 10px #000;
  }
  
  .streamListLogo .emptyAvatar {
    position: relative;
    left: auto;
    transform: none;
    top: auto;
    height: auto;
    width: auto;
    max-height: 60%;
    max-width: 100%;
    margin-bottom: 4%;
  }
  
  .end_video_text {
    z-index: 11;
    text-align: center;
    color: #fff;
    font-size: 16px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 80%;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.56), rgba(0, 0, 0, 0.7));
    padding: 18px;
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    width: 100%;
  }
  
  .end_video_text::before {
    content: '';
    display: block;
    height: 60px;
    background: var(--avatar) no-repeat center center;
    background-size: contain;
    margin: 0 auto 15px;
    border-radius: 50px;
    width: 60px;
  }
  
  .end_video_text span {
    margin: 0 0 5px;
    font-size: 20px;
  }
  
  .end_video_text p {
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: normal;
  }
  
  .end_video_text button {
    background: linear-gradient(135deg, var(--main), var(--main-hover));
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 14px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto;
  }
  
  .private-text-rtmp-container {
      width: 100%;
      text-align: center;
  }
  
  .error-text-rtmp {
      background: #f4a136e3;
      color: #fff;
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
  }
  
  .private-text-rtmp {
      background: #3692f49c;
      color: #fff;
      position: absolute;
      z-index: 2;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
  }
  
  .error-text-rtmp svg,
  .private-text-rtmp svg {
      height: 50px;
      position: relative;
      width: 100%;
  }
  
  .wow_private {
      z-index: 0;
      position: absolute;
      right: 0;
      top: 0;
      border-radius: 0 8px;
      min-width: 60px;
      line-height: 25px;
      font-size: 13px;
      color: #fff;
      text-align: center;
      padding: 4px 10px;
      display: flex;
      width: fit-content;
      background-color: var(--main);
  }
  
  .wow_liv_counter,
  .wow_liv_counter_grey,
  .wow_liv_counter_scheduled {
      z-index: 0;
      left: 0;
      border-radius: 8px 0;
      min-width: 60px;
      line-height: 25px;
      padding: 4px 10px;
      width: fit-content;
      position: absolute;
      top: 0;
      text-align: center;
  }
  
  .wow_liv_counter {
      background-color: #f44336;
      font-size: 13px;
      color: #fff;
      display: flex;
  }
  
  .wow_liv_counter_grey {
      background-color: #0e0e0e;
      font-size: 12px;
      color: #fff;
  }
  
  .wow_liv_counter_scheduled {
      background-color: #3692f4;
      font-size: 12px;
      color: #fff;
      display: flex;
      align-items: center;
  }
  
  .wow_liv_counter_scheduled div {
      align-items: center;
      display: flex;
      gap: 5px;
  }
  
  .wow_liv_counter_mobile {
      font-size: 13px;
      color: inherit;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      flex: 0 1 auto;
  }
  
  .stream_data_text {
      font-size: 13px;
      color: inherit;
  }
  
  .wow_liv_counter_watch {
      font-size: 13px;
      color: inherit;
      width: 300px;
      justify-content: flex-end;
  }
  
  #countdown {
      z-index: 11;
      position: absolute;
      border-radius: 12px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      opacity: 0.8;
      background: #f44336;
      width: 100%;
      height: 100%;
  }
  
  #countdown span {
      opacity: 1;
      color: #fff;
      transition: 1s;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: fixed;
      width: 100%;
      text-align: center;
      font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
  
  #scheduled_text {
      font-size: 30px;
      font-weight: 600;
  }
  
  #scheduled_elapsed {
      font-size: 25px;
  }
  
  .live_border {
      border: 2px solid #f44336;
      border-radius: 14px;
  }
  
  .scheduled_border {
      border: 2px solid #3692f4;
      border-radius: 14px;
  }
  
  .private_border {
      border: 2px solid var(--main);
      border-radius: 14px;
  }
  
  #audioIcon {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 11;
      width: 100px;
      height: 100px;
      border: 4px solid #838993;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: border-color 0.3s linear;
      scale: 0.5;
      border-radius: 50%;
  }
  
  #audioIcon:hover {
      cursor: pointer;
      border-color: #fff;
  }
  
  #audioIcon span {
      display: inline-block;
      margin: 0 2px;
      width: 9px;
      height: 15px;
      border-radius: 5px;
      background-color: #838993;
      transition: height 0.5s, background-color 0.3s linear;
  }
  
  #audioIcon .volumeChanges:first-child {
      animation: 0.5s linear infinite alternate heightAdjust;
  }
  
  #audioIcon .volumeChanges:nth-child(2) {
      animation: 0.5s linear 0.25s infinite alternate heightAdjust;
  }
  
  #audioIcon .volumeChanges:nth-child(3) {
      animation: 0.5s linear 0.5s infinite alternate heightAdjust;
  }
  
  #audioIcon .volumeChanges:nth-child(4) {
      animation: 0.5s linear 0.75s infinite alternate heightAdjust;
  }
  
  @keyframes heightAdjust {
      100% {
          height: 45px;
      }
  }
  
  .tag_video_grid.top .tag_video_grid_list .thumb {
      width: 180px;
  }
  
  .tag_video_grid.top .tag_video_grid_list .info img {
      height: 33px;
      width: 33px;
  }
  
  .tag_short_home_list_popular img {
      mask-image: linear-gradient(black 50%, transparent);
      -webkit-mask-image: linear-gradient(black 50%, transparent);
  }
  
  .ended_video {
    position: absolute;
    z-index: 2;
    display: none;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
    bottom: 0;
    top:0;
    left: 0;
    right: 0;
    opacity: 0;
  }
  
  .ended_video.show-ended, .ended_video_next.show-ended {
    display: flex;
    opacity: 1;
    -webkit-animation: fade-in 0.5s ease-in-out;
    animation: fade-in 0.5s ease-in-out;
  }
  
  .ended_video .related-video-wrapper {
    flex: 1;
    max-width: 37%;
    z-index: 0;
    bottom: 20%;
  }
  
  .ended_video_text {
    position: absolute;
    z-index: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 5%;
    font-size: calc(0.5vw + 0.6rem);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    line-height: calc(0.5vw + 0.5rem);
    color: #fff !important;
    bottom: 0;
  }
  
  .ended_video .tag_video_grid_list::before {
    transition: 0.3s;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 100%);
    height: 50%;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    position: absolute;
    z-index: 1;
    border-radius: 10px;
    opacity: 1;
  }
  
  .ended_video .tag_video_grid_list:hover {
    z-index: 11;
  }
  .ended_video .tag_video_grid_list {
    border: 1px solid #383838;
    border-radius: 10px;
  }
  
  .player-parent:has(.ended_video .related-video-wrapper:hover) media-player {
    opacity: 0.5;
  }
  
  .ended_video_next {
    position: absolute;
    z-index: 11;
    display: none;
    justify-content: center;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .ended_video_next .related-video-wrapper {
    font-size: clamp(5px, 2.5vw, 12px);
    gap: 8px;
    display: grid;
  }
  
  .ended_video_next .related-video-wrapper .tag_video_grid_list{
    margin: 0 !important;
  }
  
  .ended_video_text_next {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: clip;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    line-height: calc(0.5vw + 0.6rem);
    color: #fff !important;
  }
  
  .ended_video_next .ended_video_next_buttons {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  
  .ended_video_next .ended_video_next_buttons button {
    max-width: calc(50% - 10px);
    flex: 1;
    padding: 0;
    font-size: clamp(5px, 2.5vw, 12px);
  }
  
  .ended_video_text_next_username {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.82);
  }
  
  .player-parent:has(.ended_video_next.show-ended) media-player::before {
    display: block;
  }
  
  .player-parent:has(.ended_video_next.show-ended) :where([data-view-type="video"] .vds-controls[data-visible]) {
      opacity: 0;
  }
  
  /* ==========================================================================
     Notification and Status Indicators
     ========================================================================== */
  .streamNotifications {
      display: flex;
      align-items: center;
      position: absolute;
      transition: transform 0.3s ease, opacity 0.3s ease;
      transform: translateY(20px);
      opacity: 0;
      font-size: 12px;
      width: 100%;
      max-width: calc(100% - 130px);
      background: var(--body-bg);
      z-index: 1;
  }
  .notifications-list .avatar svg {
    position: absolute;
    top: 0;
    left: 0px;
    width: 15px;
    height: 15px;
    z-index: 1;
  }
  .streamNotifications.show {
      transform: translateY(0);
      opacity: 1;
  }
  
  div:has(> .streamNotifications) {
      max-width: 100%;
      overflow: hidden;
      flex-wrap: wrap;
  }
  
  .streamNotifications span {
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
  }
  
  .streamNotifications img {
      height: 20px;
      margin-right: 5px;
      border-radius: 50px;	
  }
  .subscribe_popup {
      position: fixed;
      bottom: -300px;
      height: fit-content;
      background-image: linear-gradient(255deg, var(--main), #000);
      width: 100%;
      z-index: 100;
      display: flex;
      align-items: center;
      padding: 20px;
      border-radius: 12px 12px 0 0;
  }
  
  .subscribe_popup img {
      max-width: 140px;
  }
  
  .subscribe_popup .close {
      right: 20px;
      opacity: 1;
  }
  
  .subscribe_popup h5,
  .subscribe_popup p {
      color: #fff;
  }
  
  #myTab, .pt_sec_nav_cats {
      background: var(--body-bg);
  }
  
  .subscribe_popup p {
      font-size: 14px;
  }
  
  /* ==========================================================================
     Miscellaneous UI Elements
     ========================================================================== */
  .close-btn, .close-leaderboard-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      border-radius: 50px;
      transition: color 0.3s;
  }
  
  .tippy-box {
      background-color: var(--tippy-bg);
      color: currentColor;
      min-width: 200px !important;
      max-width: 500px !important;
      padding: 12px;
      white-space: normal;
      border-radius: 8px;
      cursor: default;
  }
  
  .header-live-header .tippy-box {
      min-width: 270px !important;
  
  }
  
  .tippy-arrow {
      color: var(--tippy-bg);
  }
  
  .tippy-content {
      display: block !important;
      writing-mode: horizontal-tb !important;
      word-break: normal !important;
  }
  
  .like-icon {
      position: absolute;
      top: -5px;
      left: -10px;
  }
  
  .like-icon text {
      font-family: "Roboto Thin", Arial, sans-serif;
      font-size: 9px;
      fill: #fff;
  }
  
  #myTab {
      position: sticky !important;
      width: 100%;
      z-index: 1;
      top: 0;
      margin-bottom: 0 !important;
  }
  
  #close {
      flex: 0 0 auto;
      display: none;
  }
  
  .toggleVideoChat {
    font-size: 13px;
    color: inherit;
    width: 300px;
    justify-content: flex-end;
    gap: 15px;
  }
  
  .btn-chat {
      display: none;
  }
  
  .chat-slide {
      position: absolute;
      right: 15px;
      top: 15px;
      z-index: 11;
  }
  
  .chat-slide .expend-player {
      width: 40px;
      height: 40px;
      opacity: 0.7;
      transition: transform 0.2s;
  }
  
  .chat-slide .expend-player:hover {
      transform: scale(1.1);
  }
  
  #waves {
      z-index: 11;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 10%;
      position: absolute;
  }
  
  #waves svg {
      border-radius: 0 0 12px 12px;
  }
  
  .blink-dot-online {
      animation: blink-online 1.5s infinite;
  }
  
  @keyframes blink-online {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
  }	
  
  .top-number {
      z-index: 1;
      top: 0;
      right: 10px;
      position: absolute;
  }
  
  .top-number span {
      font-size: 40px;
      color: #fff;
      font-weight: 700;
  }
  
  .search-result img {
      width: 100%;
      max-width: 100%;
      height: auto;
      border-radius: 4px;
      object-fit: cover;
      aspect-ratio: 16/9;
      margin-bottom: 10px;
  }
  
  .search-result .search-text {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 14px;
      line-height: 1.5;
  }
  
  #pinned-comment-stream .main-comment:hover {
      cursor: pointer;
  }
  
  .comment_link {
      color: var(--main);
  }
  
  .comment_link:hover {
      text-decoration: underline;
  }
  
  .chatArrow {
      visibility: hidden;
  }
  
  .chatArrow.show {
      visibility: visible !important;
      z-index: 1;
  }
  
  #video-user-comments-stream .main-comment-data-sp:hover .chatArrow {
      visibility: visible;
      z-index: 1;
  }
  
  .chatArrow .dropdown-menu a.pointer-events-none {
      display: block;
      align-items: center;
      max-width: 90%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-style: italic;
      font-weight: normal;
  }
  
  #server_url_video,
  #stream_key_video {
      white-space: nowrap;
      overflow: hidden;
      display: block;
      text-overflow: ellipsis;
  }
  
  .green-hdd {
      fill: #78b159;
  }
  
  .yellow-hdd {
      fill: #ffc107;
  }
  
  .red-hdd {
      fill: #dc3545;
  }
  
  .admin-info .close {
      top: 10px;
      right: 10px;
      z-index: 1;
      opacity: 1;
  }
  
  .ring_admin {
      border: 1.5px solid var(--svg_admin);
  }
  
  .ring_owner {
      border: 1.5px solid var(--svg_creator);
  }
  
  .ring_mod {
      border: 1.5px solid var(--svg_mod);
  }
  
  .a-admin,
  .a-mod,
  .a-owner {
      font-size: 11px;
      border-radius: 3px;
      padding: 1px 3px;
  }
  
  .a-admin {
      color: #fff;
      background: var(--svg_admin);
  }
  
  .a-owner {
      color: #fff;
      background: var(--svg_creator);
  }
  
  .a-mod {
      color: #fff;
      background: var(--svg_mod);
  }
  
  .svg_admin,
  .svg_mod,
  .svg_owner {
      position: relative;
      height: 13px;
      left: 14px;
      top: -30px;
  }
  
  .svg_admin > polygon:first-child {
      fill: var(--svg_admin);
  }
  
  .svg_admin > polygon:last-child {
      fill: color-mix(in srgb, var(--svg_admin), #000 30%);
  }
  
  .svg_mod path {
      fill: color-mix(in srgb, var(--svg_mod), #fff 30%);
  }
  
  .red-bg {
      background: #f44336 !important;
  }
  
  .red {
      color: #f44336;
  }
  
  .green {
      color: #78b159;
  }
  
  .middot {
      padding: 0 5px;
      font-size: 13px;
  }
  
  .watch_hashtag {
      font-size: initial;
      margin-right: 5px;
  }
  
  .watch_hashtag:hover {
      text-decoration: underline;
  }
  
  .mb-20 {
      margin-bottom: 20px;
  }
  
  .streamed_on {
      color: currentColor;
      width: max-content;
  }
  
  .pointer {
      cursor: pointer;
  }
  
  /*
  .emptyAvatar {
      display: flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1/1;
      border-radius: 50%;
      font-size: 25px;
      background: color-mix(in srgb, var(--main), #000 30%);
      color: #fff;
      width: 42px;
      height: 42px;
  }
  
  */
  
  .grayscale {
      filter: grayscale(100%);
  }
  
  .pointer-events-none {
      pointer-events: none;
  }
  
  .bi-heart-fill.active {
      fill: #d24e67;
      cursor: default;
  }
  
  .verified {
      color: var(--main);
  }
  
  .hide_blur {
      filter: blur(12px);
  }
  
  .fs-12 {
      font-size: 12px;
  }
  
  .cc-theme-edgeless.cc-window {
      border-radius: 12px;
  }
  
  .mt-7 {
      margin-top: 7rem !important;
  }
  
  .mb-6 {
      margin-bottom: 4rem !important;
  }
  
  .tag_pro_head .badge {
      background-color: unset;
      color: var(--main) !important;
  }
  
  .display-4 {
      font-size: revert;
  }
  
  .vid_studio .btn.btn-main.flex-1 {
      padding: 0;
  }
  
  .mejs__container {
      font-family: inherit !important;
  }
  
  .highlight {
      color: var(--main);
  }
  
  #ui-datepicker-div {
      box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
  }
  
  #chatbot-mode-toggle {
      z-index: 0;
  }
  
  .tag_pro_plan img {
      border-radius: 50%;
  }
  
  .title-container {
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      align-items: baseline;
  }
  
  .video-hashtag-list {
    background: #e7e7e7;
    border-radius: 4px;
    padding: 1px 5px;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 11px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.57);
  }
  
  .video-hashtag-list a {
    color: currentColor !important;
  }
  
  .side-by-side-container {
      display: flex;
      gap: 20px;
      align-items: center;
      align-items: stretch;
  }
  
  .side-by-side-container .embed-responsive,
  .side-by-side-container .tag_video_grid {
      flex: 1;
  }
  
  .side-by-side-container .embed-responsive video,
  .side-by-side-container .embed-responsive .plyr {
      max-width: 100%;
  }
  
  .side-by-side-container .tag_video_grid_list {
      margin-bottom: 0 !important;
  }
  
  .side-by-side-container .tag_video_grid_list .info {
      padding: 16px 0 0 0;
  }
  .side-by-side-container .embed-responsive {
      border-radius: 12px;
  }
  
  .side-by-side-container .tag_video_grid .col-md-4 {
      display: block;
      flex: 0 0 100%;
  }
  
  .side-by-side-container .tag_video_grid {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
  }
  
  .side-by-side-container .info:first-child {
      position: relative;
      padding: 0 16px 16px 16px;
      align-self: flex-start;
  }
  
  .side-by-side-container .info:first-child > h4 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-right: 90px;
  }
  
  .tag_video_grid.top .tag_video_grid_list::after {
      font-family: unset;
      -webkit-text-fill-color: unset;
      -webkit-text-stroke: unset;
  }
  
  .maintenance-mode {
      top: 85px;
      z-index: 999999;
      left: 50%;
      transform: translate(-50%, -50%);
      width: max-content;
  }
  
  .player-settings input[type="checkbox"] + label,
  .player-settings input[type="radio"] + label {
      line-height: 21px;
      display: inline-block;
      vertical-align: top;
      cursor: pointer;
      font-weight: revert;
      margin-bottom: 0 !important;
  }
  
  .top-video {
      overflow: hidden;
  }
  
  .pin-close {
      right: 15px;
      position: fixed;
  }
  
  #side_history .container {
      overflow: scroll;
  }
  
  .related-video-wrapper {
      z-index: 0;
  }
  
  .image-carousel-dropdown {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: none;
    overflow: hidden;
  }
  
  .image-carousel-dropdown.show {
    display: block;
  }
  
  .chat-image-carousel {
    width: 100%;
    height: 150px;
  }
  
  .swiper-slide {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  
  .swiper-slide img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .notification-toggle {
      cursor: pointer;
  }
  
  .chat-image-carousel .swiper-button-prev,
  .chat-image-carousel .swiper-button-next {
    color: currentColor;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: none;
  }
  
  .chat-image-carousel .swiper-button-prev:not(.swiper-button-disabled),
  .chat-image-carousel .swiper-button-next:not(.swiper-button-disabled) {
    display: block; /* Ensure arrows are visible when not disabled */
  }
  
  .chat-image-carousel .swiper-button-prev.swiper-button-disabled,
  .chat-image-carousel .swiper-button-next.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  
  .empty-carousel {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 14px;
  }
  
  .comment-loader {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 5px;
      margin: 5px 0;
      font-size: 14px;
      color: #555;
  }
  
  /* Optional: Add a spinning animation */
  .comment-loader::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      border: 2px solid #555;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
      to {
          transform: rotate(360deg);
      }
  }
  
  #upload-image-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
  }
  
  #upload-image-btn svg {
      width: 25px;
      height: 25px;
  }
  
  /* ==========================================================================
     Media Queries
     ========================================================================== */
  
  /* Landscape Orientation (max-width: 1200px) */
  
  /* Keyframes for slide-up and slide-down animations */
  @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
  }
  
  @keyframes slideDown {
      from { transform: translateY(0); }
      to { transform: translateY(100%); }
  }
  
  .ad-overlay {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      aspect-ratio: 16 / 9;
      z-index: 100;
  }
  
  .ad-overlay .ad-image {
      width: 100%;
      height: 100%;
      position: relative;
      aspect-ratio: 16 / 9;
      background: black;
  }
  
  .ad-overlay .ad-timer {
      position: absolute;
      bottom: 15px;
      right: 15px;
      background: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-radius: 7px;
      color: white;
      padding: 5px 10px;
      cursor: pointer;
      text-decoration: none;
  }
  
  .ad-overlay .ad-timer:hover {
      background: rgba(0, 0, 0, 0.7);
  }
  
  .ad-overlay .ad-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
  }
  
  /* ==========================================================================
      -   Ad Container
  ========================================================================== */
  
  .ad-mTcontainer {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      aspect-ratio: 16 / 9;
      z-index: 100;
  }
  
  .ad-mTcontainer video {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .ad-overlay-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      padding: 20px;
      box-sizing: border-box;
  }
  
  .ad-overlay-video h4 {
      margin: 0 0 10px;
      font-size: 1.5rem;
  }
  
  .ad-overlay-video p {
      margin: 0 0 10px;
  }
  
  .ad-overlay-video a {
      color: #4caf50;
      text-decoration: none;
      font-weight: bold;
  }
  
  .ad-overlay-video a i {
      margin-left: 5px;
  }
  
  .ad-overlay-video .advertisement {
      margin-top: 5px;
      font-size: 0.9rem;
      opacity: 0.8;
  }
  
  .ad-mTcontainer .skip-button {
      position: absolute;
      right: .75rem;
      top: 1rem;
      padding: 8px 16px;
      font-size: 16px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.7);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
  }
  
  .ad-mTcontainer .skip-button:hover {
      background-color: rgba(255, 255, 255, 0.3);
  }
  
  /* ==========================================================================
      -   Sidebar Ad
  ========================================================================== */
  .cv-sidebar-ad-container {
      width: 100%;
      margin: 0 auto;
      padding: 0 var(--sidebar-ad-padding);
      box-sizing: border-box;
  }
  
  .cv-ad-link {
      text-decoration: none !important;
      color: inherit;
      display: block;
  }
  
  .cv-ad-card {
      background: var(--content-bg);
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(var(--black-rgb) / 10%);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .cv-ad-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
  
  .cv-ad-image {
      width: 100%;
      height: auto;
      display: block;
  }
  
  .cv-ad-info {
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }
  
  .cv-ad-title {
      font-size: 1.1rem;
      margin: 0 0 10px 0;
      color: var(--gray-700);
  }
  
  .cv-ad-description {
      flex-grow: 1;
      font-size: 0.95em;
      color: var(--gray-500);
      margin-bottom: 15px;
  }
  
  .cv-ad-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .cv-ad-author {
      display: flex;
      align-items: center;
      font-size: 0.85em;
      color: #999999;
  }
  
  .cv-ad-promote-icon {
      width: 15px;
      height: 15px;
      margin-right: 5px;
  }
  
  .cv-ad-url {
      font-size: 0.85em;
      color: #007BFF;
      display: flex;
      align-items: center;
  }
  
  .cv-ad-url i {
      margin-left: 5px;
  }
  
  :where([data-view-type="video"] .vds-controls) {
    z-index: 2 !important;
  }
  
  /* ==========================================================================
     Video Chat Overlay Styles
     ========================================================================== */
  
  /* Default desktop behavior (>1200px) - slide from left */
  .video-chat-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      will-change: transform;
      backface-visibility: hidden;
      transform: translate3d(-100%, 0, 0);
      background: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.8) 40%);
      z-index: 11;
  }
  
  .video-chat-overlay.visible {
      transform: translate3d(0, 0, 0);
  }
  
  /* Close button */
  .video-chat-close-btn {
      position: absolute;
      top: 15px;
      right: 15px;
      background: #e1e2e4;
      border: none;
      border-radius: 50%;
      width: 35px;
      height: 35px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s ease;
  }
  
  .video-chat-close-btn:hover {
      background: #3a4045;
  }
  
  /* Chat overlay inner container */
  #video-chat-overlay {
      position: absolute;
      top: 35px;
      left: 20px;
      bottom: 80px;
      width: 100%;
      pointer-events: auto;
      z-index: 1;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      overscroll-behavior: contain;
  }
  
  #video-chat-overlay::-webkit-scrollbar {
      display: none;
  }
  
  /* Warning text */
  #video-chat-warning {
      position: absolute;
      top: 10px;
      left: 20px;
      font-size: 12px;
      color: rgba(255,255,255,0.7);
      text-align: center;
      font-family: Arial, sans-serif;
      pointer-events: none;
      z-index: 2;
      background: rgba(0,0,0,0.5);
      padding: 4px 8px;
      border-radius: 4px;
  }
  
  /* Chat toggle button */
  .chat-toggle-btn {
      background: rgba(0,0,0,0.7);
      border: 1px solid rgba(255,255,255,0.3);
      border-radius: 6px;
      color: white;
      padding: 8px 12px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s ease;
      backdrop-filter: blur(5px);
  }
  
  .chat-toggle-btn:hover {
      background: rgba(0,0,0,0.9);
      transform: scale(1.05);
  }
  
  .chat-toggle-btn.active {
      background: rgba(40, 167, 69, 0.8);
      border-color: rgba(40, 167, 69, 0.5);
  }
  
  /* Chat input container */
  .chat-input-container {
      position: absolute;
      bottom: 20px;
      left: 20px;
      border-radius: 25px;
      padding: 8px 8px;
      backdrop-filter: blur(5px);
      z-index: 2;
      min-width: 300px;
      border: 1px solid #dedede;
  }
  
  .chat-input-container input {
      background: transparent;
      border: none;
      outline: none;
      width: 100%;
      font-size: 14px;
      pointer-events: auto;
      z-index: 1001;
  }
  
  .chat-input-container input::placeholder {
      color: currentColor;
  }
  
  /* Message styles */
  .overlay-message {
      padding: 5px;
      word-wrap: break-word;
  }
  
  .overlay-message .message-header {
      display: flex;
      align-items: center;
      margin-bottom: 2px;
  }
  
  .overlay-message .avatar {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      margin-right: 8px;
      flex-shrink: 0;
  }
  
  .overlay-message .username {
      color: currentColor;
      font-size: 14px;
      font-weight: 600;
      margin-right: 8px;
  }
  
  .overlay-message .message-content {
      color: currentColor;
      font-size: 13px;
      margin-left: 34px;
  }
  
  .overlay-message .message-text {
      display: block;
      line-height: 1.3;
  }
  
  /* Animation classes */
  .overlay-message.fade-out {
      animation: fadeOutLeft 0.5s ease-out forwards;
  }
  
  .historical-message {
      opacity: 0.6;
      border-left: 2px solid rgba(255,255,255,0.3);
      padding-left: 8px;
  }
  
  .guest-message {
      background: linear-gradient(to left, transparent 0%, rgba(0, 0, 0, 0.4) 20%, rgba(188, 172, 41, 0.7) 100%);
      border-radius: 5px;
      margin: 1px;
  }
  
  /* Empty state */
  .chat-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;  color: white;
      justify-content: center;
      height: 100%;
      text-align: center;
      padding: 20px;
  }
  
  .chat-empty-icon {
      width: 48px;
      height: 48px;
      margin-bottom: 12px;
      opacity: 0.5;
  }
  
  .chat-empty-text {
      font-size: 14px;
      font-weight: 500;
  }
  
  .overlay-message .username-timer {
      display: flex;
      align-items: center;
      gap: 6px;
  }
  
  .overlay-message .message-countdown {
      font-size: 11px;
      white-space: nowrap;
  }  
  
  /* Animations */
  @keyframes fadeOutLeft {
      0% {
          opacity: 1;
          transform: translateX(0);
      }
      100% {
          opacity: 0;
          transform: translateX(-100%);
      }
  }
  
  /* ==========================================================================
     MESSAGING SYSTEM STYLES
     ========================================================================== */
  
  /* Main Messaging Modal Styles */
  #messagingInput {
      border-radius: 50px;
  }
  
  .message-og-preview {
      display: none;
      position: absolute;
      bottom: 54px;
      width: 100%;
      background: var(--body-bg);
      border: 1px solid var(--border-light);
      border-radius: 12px 12px 0 0;
      padding: 10px;
      box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
      z-index: 1;
      max-width: 300px;
      transform: translateX(-50%);
      left: 50%;
  }
  
  .messaging-header-actions {
      display: flex;
      gap: 0.5rem;
      align-items: center;
  }
  
  /* ==========================================================================
     SETTINGS STYLES
     ========================================================================== */
  
  /* Settings Menu */
  .messaging-settings-menu {
      min-width: 200px;
      padding: 0.5rem 0;
  }
  
  .messaging-settings-menu .dropdown-header {
      padding: 0.5rem 1rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      margin-bottom: 0.25rem;
  }
  
  .messaging-settings-menu .dropdownHeaderText {
      font-size: 0.75rem;
      font-weight: 600;
      color: currentColor;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }
  
  .messaging-settings-menu .user-list-menu {
      padding: 0.25rem 0;
  }
  
  .messaging-settings-menu .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem 1rem;
      color: currentColor;
      font-size: 0.875rem;
      transition: background-color 0.2s;
  }
  
  .messaging-settings-menu .toggle-row:hover {
      background-color: rgba(0, 0, 0, 0.05);
  }
  
  .messaging-settings-menu .toggle-row span {
      flex: 1;
  }
  
  .messaging-settings-menu .notification-toggle {
      gap: 0.5rem;
  }
  
  /* Settings Content */
  .messaging-settings-content {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
  }
  
  .messaging-settings-content .user-list-menu {
      padding: 0.25rem 0;
  }
  
  .messaging-settings-content .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem 1rem;
      color: currentColor;
      font-size: 0.875rem;
      transition: background-color 0.2s;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  
  .messaging-settings-content .toggle-row:last-child {
      border-bottom: none;
  }
  
  .messaging-settings-content .toggle-row span {
      flex: 1;
      margin-right: 1rem;
      display: flex;
      flex-direction: column;
  }
  
  .messaging-settings-content .toggle-row span .toggle-label-text {
      font-weight: 500;
      margin-bottom: 0.25rem;
  }
  
  .messaging-settings-content .toggle-row span .toggle-description {
      font-size: 0.75rem;
      color: currentColor;
      line-height: 1.3;
  }
  
  .messaging-settings-content .toggle-label[aria-checked="false"] {
      background: #9a9a9a;
  }
  
  .messaging-settings-content .notification-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }
  
  .messaging-settings-content .toggle-input-notification,
  .messaging-settings-content .toggle-input-push,
  .messaging-settings-content .toggle-input-last-online {
      display: none;
  }
  
  .messaging-settings-content .toggle-label {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      background: linear-gradient(45deg, #232362 0%, #00B7EB 100%);
      border-radius: 12px;
      cursor: pointer;
      transition: background-color 0.3s;
      flex-shrink: 0;
  }
  
  .messaging-settings-content .toggle-label::after {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #fff;
      top: 3px;
      left: 3px;
      transition: transform 0.3s;
  }
  
  .messaging-settings-content .toggle-input-notification:checked + .toggle-label,
  .messaging-settings-content .toggle-input-push:checked + .toggle-label,
  .messaging-settings-content .toggle-input-last-online:checked + .toggle-label {
      background-color: var(--main);
  }
  
  .messaging-settings-content .toggle-input-notification:checked + .toggle-label::after,
  .messaging-settings-content .toggle-input-push:checked + .toggle-label::after,
  .messaging-settings-content .toggle-input-last-online:checked + .toggle-label::after {
      transform: translateX(20px);
  }
  
  /* Settings Menu Toggle Styles */
  .messaging-settings-menu .toggle-input-notification,
  .messaging-settings-menu .toggle-input-push {
      display: none;
  }
  
  .messaging-settings-menu .toggle-label {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 12px;
      cursor: pointer;
      transition: background-color 0.3s;
  }
  
  .messaging-settings-menu .toggle-label::after {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #fff;
      top: 3px;
      left: 3px;
      transition: transform 0.3s;
  }
  
  .messaging-settings-menu .toggle-input-notification:checked + .toggle-label,
  .messaging-settings-menu .toggle-input-push:checked + .toggle-label {
      background-color: var(--main);
  }
  
  .messaging-settings-menu .toggle-input-notification:checked + .toggle-label::after,
  .messaging-settings-menu .toggle-input-push:checked + .toggle-label::after {
      transform: translateX(20px);
  }
  
  /* ==========================================================================
     PASSWORD PAGE STYLES
     ========================================================================== */
  
  .messaging-body.show-password .messaging-password-page {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
  }
  
  .messaging-password-content {
      flex: 1;
      overflow-y: auto;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 400px;
      margin: 0 auto;
  }
  
  .messaging-password-icon-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .messaging-password-text {
      font-size: 1.1rem;
      font-weight: 500;
      margin-bottom: 0.5rem;
  }
  
  .messaging-password-subtext {
      font-size: 0.875rem;
  }
  
  .messaging-password-input {
      border-radius: 8px;
      padding: 0.75rem;
      font-size: 1rem;
  }
  
  .messaging-password-info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }
  
  .messaging-password-info-icon {
      flex-shrink: 0;
  }
  
  /* ==========================================================================
     MAIN BODY LAYOUT
     ========================================================================== */
  
  .messaging-body {
      display: flex;
      height: 600px;
/*      max-height: calc(100vh - 120px); */
      max-height: 95dvh;
      overflow: hidden;
      padding: 0;
      position: relative;
  }
  
  .messaging-body::before {
      content: "";
      position: absolute;
      top: -200px;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(rgba(0, 0, 0, 0), #f5f5f5);
      z-index: -1;
      pointer-events: none;
  }
  
  /* Sidebar */
  .messaging-sidebar {
      width: 300px;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
  }
  
  .messaging-search {
      position: relative;
  }
  
  .messaging-search input {
      width: 100%;
      background-color: #f5f5f5;
      border: none;
      border-radius: 8px;
      padding: 0.5rem 2.5rem 0.5rem 1rem;
      color: currentColor;
      font-size: 0.875rem;
  }
  
  .messaging-search input:focus {
      border-color: var(--main);
      outline: none;
  }
  
  .messaging-search svg {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: currentColor;
  }
  
  .messaging-conversations {
      flex: 1;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
  }
  
  .messaging-conversation-list {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .messaging-empty {
      text-align: center;
      padding: 2rem 1rem;
      color: currentColor;
  }
  
  .messaging-empty[data-state="loading"] .spinner-border {
      margin-right: 0.5rem;
  }
  
  .messaging-conversation {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      cursor: pointer;
      transition: background-color 0.2s;
  }
  
  .messaging-conversation:hover {
      background-color: rgba(0, 0, 0, 0.05);
  }
  
  .messaging-conversation.is-active {
      background-color: rgba(255, 123, 0, 0.1);
      background-color: color-mix(in srgb, var(--main) 10%, transparent);
      border-left: 3px solid var(--main);
  }
  
  .messaging-conversation-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
  }
  
  .messaging-conversation-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .messaging-conversation-meta {
      flex: 1;
      min-width: 0;
  }
  
  .messaging-conversation-name {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.25rem;
  }
  
  .messaging-conversation-name span {
      font-weight: 500;
      color: currentColor;
      font-size: 0.875rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .messaging-conversation-name time {
      font-size: 0.75rem;
      color: currentColor;
      margin-left: 0.5rem;
      flex-shrink: 0;
  }
  
  .messaging-conversation-preview {
      margin: 0;
      font-size: 0.8125rem;
      color: currentColor;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }
  
  .messaging-conversation-preview.has-typing {
      color: var(--main);
      font-style: italic;
  }
  
  .messaging-conversation-preview-image {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      object-fit: cover;
      flex-shrink: 0;
      background-color: rgba(0, 0, 0, 0.1);
  }
  
  .messaging-conversation-new-indicator {
      position: absolute;
      left: -12px;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 6px;
      background-color: var(--main);
      border-radius: 50%;
      animation: pulse-new-message 2s infinite;
      flex-shrink: 0;
  }
  
  @keyframes pulse-new-message {
      0%, 100% {
          opacity: 1;
          transform: translateY(-50%) scale(1);
      }
      50% {
          opacity: 0.5;
          transform: translateY(-50%) scale(1.2);
      }
  }
  
  .messaging-conversation-typing-indicator {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--main);
  }
  
  .messaging-conversation-typing-indicator .typing-dots {
      display: inline-block;
      font-size: 1.2em;
  }
  
  .messaging-conversation-typing-indicator .typing-dots span {
      display: inline-block;
      animation: typing-dot-small 1.4s infinite ease-in-out;
  }
  
  .messaging-conversation-typing-indicator .typing-dots span:nth-child(1) {
      animation-delay: -0.32s;
  }
  
  .messaging-conversation-typing-indicator .typing-dots span:nth-child(2) {
      animation-delay: -0.16s;
  }
  
  @keyframes typing-dot-small {
      0%, 80%, 100% {
          opacity: 0.3;
      }
      40% {
          opacity: 1;
      }
  }
  
  .messaging-conversation-unread {
      background-color: var(--main);
      color: currentColor;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.6875rem;
      font-weight: bold;
      flex-shrink: 0;
  }
  
  .verified-badge {
      position: absolute;
      bottom: -2px;
      right: -2px;
      background-color: var(--main);
      color: currentColor;
      border-radius: 50%;
      width: 14px;
      height: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.625rem;
      font-weight: bold;
  }
  
  /* ==========================================================================
     THREAD STYLES
     ========================================================================== */
  
  .messaging-thread {
      flex: 1;
      display: flex;
      flex-direction: column;
      background-color: #fafafa;
      position: relative;
  }
  
  .messaging-drag-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 12px;
      background-color: rgba(0, 128, 255, 0.7);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      color: currentColor;
      font-weight: 600;
      font-size: 1.1rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
      z-index: 15;
      text-align: center;
      padding: 0 1.5rem;
  }
  
  .messaging-drag-overlay small {
      font-size: 0.85rem;
      font-weight: 400;
      opacity: 0.9;
  }
  
  .messaging-thread.is-drag-over .messaging-drag-overlay {
      opacity: 1;
  }
  
  .messaging-thread-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
      color: currentColor;
  }
  
  .messaging-thread-empty svg {
      opacity: 0.05;
      height: 40%;
  }
  
  .messaging-thread-empty h3 {
      margin: 0 0 0.5rem 0;
      font-size: 1.125rem;
  }
  
  .messaging-thread-empty p {
      margin: 0;
      font-size: 1.1rem;
  }
  
  .messaging-thread-header {
      padding: 1rem 1.5rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      background-color: #ffffff;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      position: relative;
  }
  
  .messaging-back-btn {
      background: none;
      border: none;
      color: currentColor;
      padding: 0.5rem;
      margin: -0.5rem;
      margin-right: 0.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50px;
      transition: background-color 0.2s, color 0.2s;
      flex-shrink: 0;
  }
  
  .messaging-back-btn:hover {
      background-color: rgba(0, 0, 0, 0.1);
      color: currentColor;
  }
  
  .messaging-back-btn svg {
      width: 24px;
      height: 24px;
  }
  
  .messaging-thread-meta {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex: 1;
      min-width: 0;
  }
  
  .messaging-thread-meta > div:not(.messaging-thread-avatar):not(.messaging-typing-indicator) {
      flex: 1;
      min-width: 0;
      overflow: hidden;
  }
  
  .messaging-thread-meta .messaging-typing-indicator {
      margin-left: auto;
      font-size: 0.75rem;
      color: currentColor;
      font-style: italic;
  }
  
  .messaging-thread-meta .messaging-typing-indicator .typing-dots {
      display: inline-block;
      font-size: 1.2em;
  }
  
  .messaging-thread-meta .messaging-typing-indicator .typing-dots span {
      display: inline-block;
      animation: typing-dot 1.4s infinite ease-in-out;
  }
  
  .messaging-thread-meta .messaging-typing-indicator .typing-dots span:nth-child(1) {
      animation-delay: -0.32s;
  }
  
  .messaging-thread-meta .messaging-typing-indicator .typing-dots span:nth-child(2) {
      animation-delay: -0.16s;
  }
  
  @keyframes typing-dot {
      0%, 80%, 100% {
          opacity: 0.3;
      }
      40% {
          opacity: 1;
      }
  }
  
  .messaging-thread-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
  }
  
  .messaging-thread-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .messaging-thread-title {
      display: flex;
      align-items: center;
      min-width: 0;
      width: 100%;
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      color: currentColor;
  }
  
  .messaging-thread-title-text {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      width: 100%;
  }
  
  .messaging-thread-title-username {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex-shrink: 1;
      min-width: 0;
  }
  
  .messaging-thread-title-badges {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      margin-left: 4px;
      gap: 8px;
  }
  
  .messaging-thread-title-badges .verified {
      margin-right: 0;
  }
  
  .messaging-thread-title-badges .messaging-e2ee-indicator {
      margin-left: 0;
  }
  
  .messaging-thread-menu.dropdown-toggle::after {
      display: none;
  }
  
  .messaging-thread-subtitle {
      margin: 0.25rem 0 0 0;
      font-size: 0.875rem;
      color: currentColor;
  }
  
  .messaging-thread-actions {
      margin-left: auto;
      display: flex;
      gap: 0.5rem;
  }
  
  .messaging-thread-body {
      flex: 1;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
      padding: 1rem 1rem 0 1rem;
      position: relative;
      display: none;
  }
  
  .messaging-thread-header:not(.d-none) ~ .messaging-thread-body {
      display: block;
  }
  
  /* ==========================================================================
     MESSAGE STYLES
     ========================================================================== */
  
  .messaging-message-list {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
  }
  
  .messaging-message {
      position: relative;
      margin-bottom: 0.5rem;
  }
  
  .messaging-message.is-deleted {
      opacity: 0.6;
      font-style: italic;
  }
  
  .messaging-comment-data {
      display: flex !important;
  }
  
  .messaging-comment-data .messaging-user-avatar {
      position: relative;
      margin-right: 8px;
      flex-shrink: 0;
  }
  
  .messaging-comment-data .messaging-user-avatar img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
  }
  
  .messaging-comment-data .messaging-avatar-thumbnail {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      display: inline-block;
      vertical-align: middle;
      margin-right: 0;
  }
  
  .messaging-comment-data .messaging-like-icon {
      position: absolute;
      top: -5px;
      left: -5px;
  }
  
  .messaging-comment-data p {
      margin: 0;
      flex: 1;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
  }
  
  .messaging-comment-data .messaging-avatar-thumbnail,
  .messaging-comment-data .messaging-username {
      white-space: nowrap;
  }
  
  .messaging-comment-data .messaging-username {
      color: currentColor;
  }
  
  .messaging-comment-data .messaging-text-hover {
      color: currentColor !important;
      font-size: 0.9rem;
      line-height: 1.3;
  }
  
  .messaging-comment-data .messaging-text-hover:hover {
      color: currentColor !important;
  }
  
  .messaging-comment-data .messaging-text-muted {
      color: currentColor;
      font-size: 0.75rem;
  }
  
  .messaging-status {
      font-size: 0.75rem;
      color: currentColor;
      margin-top: 0.25rem;
  }
  
  .messaging-attachment-size {
      font-size: 0.75rem;
      color: currentColor;
      margin: 0 5px 5px 5px;
  }
  
  .messaging-dropdown .dropdown-item svg {
      flex-shrink: 0;
  }
  
  .messaging-message-content {
      flex: 1;
  }
  
  .messaging-giphy {
      margin: 0.5rem 0;
      max-width: 300px;
  }
  
  .messaging-giphy img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      max-height: 200px;
      object-fit: contain;
  }
  
  .messaging-attachment {
      margin: 0.5rem 0;
      border-radius: 8px;
      overflow: hidden;
      max-width: 200px;
  }
  
  .messaging-attachment img {
      width: 100%;
      height: auto;
      display: block;
  }
  
  .messaging-message-content p {
      margin: 0 0 0.5rem 0;
      color: currentColor;
      font-size: 0.875rem;
      line-height: 1.4;
  }
  
  .messaging-message-content p:last-child {
      margin-bottom: 0;
  }
  
  .messaging-message-actions {
      position: absolute;
      top: 0.5rem;
      right: 0.75rem;
      display: flex;
      gap: 0.25rem;
      opacity: 0;
      transition: opacity 0.2s;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(2px);
      border-radius: 6px;
      padding: 0.25rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  .messaging-message:hover .messaging-message-actions {
      opacity: 1;
  }
  
  .message-action {
      background: none;
      border: none;
      color: currentColor;
      cursor: pointer;
      padding: 0.375rem;
      border-radius: 4px;
      font-size: 0.75rem;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .message-action:hover {
      background-color: rgba(0, 0, 0, 0.1);
      color: currentColor;
      transform: scale(1.1);
  }
  
  .message-action.like {
      display: flex;
      align-items: center;
      gap: 0.25rem;
  }
  
  .message-action.like.is-liked {
      color: currentColor;
  }
  
  .message-action.like svg {
      width: 16px;
      height: 16px;
  }
  
  .message-action.like span {
      font-size: 0.8125rem;
      font-weight: 500;
  }
  
  .message-action.delete svg {
      width: 16px;
      height: 16px;
  }
  
  .messaging-deleted {
      color: currentColor;
      font-style: italic;
  }
  
  /* ==========================================================================
     COMPOSER STYLES
     ========================================================================== */
  
  .messaging-composer {
      flex-shrink: 0;
      padding: 0.5rem 0.5rem;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      background-color: #ffffff;
      position: relative;
  }
  
  .messaging-input-area {
      padding: 0;
      background: transparent;
      border: none;
      margin: 0;
      position: relative;
  }
  
  .messaging-composer.is-drag-over .messaging-input-area {
      background-color: rgba(255, 123, 0, 0.1);
      border-color: var(--main);
  }
  
  .messaging-composer.is-drag-over .messaging-input-area textarea {
      border-color: var(--main);
  }
  
  .messaging-input-area.drag-over {
      background-color: rgba(255, 123, 0, 0.1);
      border-color: var(--main);
  }
  
  .messaging-input-area.drag-over textarea {
      border-color: var(--main);
  }
  
  .messaging-input-area textarea {
      padding: 0.5rem;
      border: none;
      color: currentColor;
      background: #f4f4f4;
  }
  
  .messaging-input-area textarea.is-editing {
      border-color: var(--main);
  }
  
  /* ==========================================================================
     TABS SYSTEM
     ========================================================================== */
  
  .messaging-tabs {
      display: flex;
      width: 100%;
      margin-bottom: 1rem;
  }
  
  .messaging-tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      color: currentColor;
      font-weight: 500;
      font-size: 0.9rem;
      padding: 0.75rem 1rem;
      border-bottom: 2px solid transparent;
      transition: all 0.15s ease;
      cursor: pointer;
  }
  
  .messaging-tab-btn.is-active {
      color: var(--main, #007bff);
      border-bottom-color: var(--main, #007bff);
  }
  
  .messaging-tab-btn:focus {
      outline: none;
      color: var(--main, #007bff);
  }
  
  .messaging-tab-content {
      display: none;
      height: 100%;
  }
  
  .messaging-tab-content.is-active {
      display: block;
  }
  
  .messaging-tab-content[data-tab-content="chat"] {
      position: relative;
      height: 100%;
  }
  
  .messaging-tab-content[data-tab-content="direct"] {
      position: relative;
      height: 100%;
  }
  
  .messaging-tab-content[data-tab-content="direct"] {
      position: relative;
      overflow: hidden;
  }
  
  .messaging-tab-content[data-tab-content="direct"] .messaging-user-picker {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      z-index: 11;
      display: flex;
      flex-direction: column;
      transform: translate3d(-100%, 0, 0);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
  }
  
  .messaging-tab-content[data-tab-content="direct"] .messaging-user-picker.is-open {
      transform: translate3d(0, 0, 0);
  }
  
  /* ==========================================================================
     USER PICKER STYLES
     ========================================================================== */
  
  .messaging-search-wrapper {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem;
  }
  
  .messaging-search {
      flex: 1;
      position: relative;
  }
  
  .messaging-new-chat-btn {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50px;
      color: currentColor;
      transition: all 0.2s;
  }
  
  .messaging-new-chat-btn:hover {
      background-color: rgba(0, 0, 0, 0.05);
      color: var(--main);
  }
  
  .messaging-user-picker {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #ffffff;
      z-index: 11;
      display: flex;
      flex-direction: column;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      transform: translate3d(-100%, 0, 0);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
  }
  
  .messaging-user-picker.is-open {
      transform: translate3d(0, 0, 0);
  }
  
  .messaging-user-picker-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .messaging-user-picker-header h6 {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      color: currentColor;
  }
  
  .messaging-user-picker-search {
      padding: 1rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      position: relative;
  }
  
  .messaging-user-picker-search input {
      width: 100%;
      background-color: #f5f5f5;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      padding: 0.5rem 2.5rem 0.5rem 1rem;
      color: currentColor;
      font-size: 0.875rem;
  }
  
  .messaging-user-picker-search input:focus {
      border-color: var(--main);
      outline: none;
  }
  
  .messaging-user-picker-search svg {
      position: absolute;
      right: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      color: currentColor;
  }
  
  .messaging-user-picker-results {
      flex: 1;
      overflow-y: auto;
      padding: 0.5rem 0;
  }
  
  .messaging-user-picker-loading {
      padding: 2rem 1rem;
      text-align: center;
      color: currentColor;
      font-size: 0.875rem;
  }
  
  .messaging-user-picker-item {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      cursor: pointer;
      transition: background-color 0.2s;
      position: relative;
      z-index: 1;
      pointer-events: auto;
  }
  
  .messaging-user-picker-item:hover {
      background-color: rgba(0, 0, 0, 0.05);
  }
  
  .messaging-user-picker-item * {
      pointer-events: none;
      user-select: none;
  }
  
  .messaging-user-picker-item-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
  }
  
  .messaging-user-picker-item-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .messaging-user-picker-item-info {
      flex: 1;
      min-width: 0;
  }
  
  .messaging-user-picker-item-name {
      font-weight: 500;
      color: currentColor;
      font-size: 0.875rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .messaging-user-picker-item-username {
      font-size: 0.75rem;
      color: currentColor;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .messaging-user-picker-section-header {
      padding: 0.5rem 1rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: currentColor;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-top: 0.5rem;
      pointer-events: none;
      user-select: none;
  }
  
  .messaging-user-picker-section-header:first-child {
      margin-top: 0;
  }
  
  /* ==========================================================================
     CHAT ROOMS STYLES
     ========================================================================== */
  
  .messaging-chat-rooms-panel {
      position: relative;
      padding: 0;
      display: flex;
      flex-direction: column;
      height: calc(100% - 0.5rem);
  }
  
  .messaging-chat-rooms-header {
      display: flex;
      justify-content: space-between;
      padding: 1rem;
      gap: 0.75rem;
      align-items: center;
  }
  
  .messaging-chat-rooms-header h6 {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      color: currentColor;
  }
  
  .messaging-chat-rooms-content {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
  }
  
  .messaging-chat-rooms-search {
      flex: 0;
      margin-bottom: 0;
      padding: 0 1rem 1rem 1rem;
      position: relative;
      display: flex;
      align-items: center;
  }
  
  .messaging-chat-rooms-search input {
      flex: 1;
      background-color: #f5f5f5;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      padding: 0.5rem 2.5rem 0.5rem 1rem;
      color: currentColor;
      font-size: 0.875rem;
  }
  
  .messaging-chat-rooms-search input:focus {
      border-color: var(--main);
      outline: none;
  }
  
  .messaging-chat-rooms-search svg {
      position: absolute;
      right: 2rem;
      color: currentColor;
      pointer-events: none;
      width: 18px;
      height: 18px;
  }
  
  .messaging-room-item {
      display: flex;
      flex-direction: column;
      padding: 1rem;
      cursor: pointer;
      transition: all 0.2s ease;
      gap: 0.5rem;
      background: #fff;
      position: relative;
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
      margin-bottom: 0.75rem;
  }
  
  .messaging-room-item:last-child {
      margin-bottom: 0;
  }
  
  .messaging-room-item:hover {
      background-color: rgba(0, 0, 0, 0.04);
  }
  
  .messaging-room-item.is-active {
      background-color: rgba(0, 123, 255, 0.08);
      border-left: 3px solid var(--main, #007bff);
  }
  
  .messaging-room-item-header {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
  }
  
  .messaging-room-item-header-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
  }
  
  .messaging-room-item-creator {
      display: flex;
      flex-direction: column;
      min-width: 0;
      flex: 1;
  }
  
  .messaging-room-item-creator-name {
      font-weight: 500;
      font-size: 0.875rem;
      line-height: 1.4;
  }
  
  .messaging-room-item-creator-name a {
      text-decoration: none;
      transition: color 0.2s ease;
  }
  
  .messaging-room-item-creator-name a:hover {
      color: var(--main, #007bff);
      text-decoration: underline;
  }
  
  .messaging-room-item-created-time {
      font-size: 0.75rem;
      color: currentColor;
  }
  
  .messaging-room-item-avatar {
      flex-shrink: 0;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.05);
      align-self: flex-start;
  }
  
  .messaging-room-item-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .messaging-room-item-content {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
  }
  
  .messaging-room-item-name {
      font-weight: 600;
      color: currentColor;
      font-size: 0.9375rem;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      word-break: break-word;
  }
  
  .messaging-room-item-description {
      font-size: 0.8125rem;
      color: currentColor;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      word-break: break-word;
  }
  
  .messaging-room-item-meta {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.75rem;
      color: currentColor;
      margin-top: 0.125rem;
      flex-wrap: wrap;
      overflow: hidden;
  }
  
  .messaging-room-item-meta-avatars {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      flex: 1;
      min-width: 0;
      overflow: hidden;
  }
  
  .messaging-room-item-meta-avatar {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1.5px solid #fff;
      object-fit: cover;
      flex-shrink: 0;
      margin-left: -4px;
  }
  
  .messaging-room-item-meta-avatar:first-child {
      margin-left: 0;
  }
  
  .messaging-room-item-meta-count {
      font-size: 0.7rem;
      color: currentColor;
      margin-left: 0.25rem;
      flex-shrink: 0;
  }
  
  .messaging-room-item-actions {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      opacity: 0;
      transition: opacity 0.2s ease;
      z-index: 1;
  }
  
  .messaging-room-item:hover .messaging-room-item-actions {
      opacity: 1;
  }
  
  .messaging-room-item-actions .btn {
      padding: 0.375rem;
      font-size: 0.875rem;
      border: none;
      background: transparent;
      color: currentColor;
      border-radius: 6px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
  }
  
  .messaging-room-item-actions .btn:hover {
      background: rgba(0, 0, 0, 0.1);
      color: currentColor;
      border-radius: 50px;
  }
  
  /* ==========================================================================
     FORM STYLES
     ========================================================================== */
  
  .messaging-room-form-panel {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #ffffff;
      z-index: 12;
      display: flex;
      flex-direction: column;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      transform: translate3d(-100%, 0, 0);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
  }
  
  .messaging-room-form-panel.is-open {
      transform: translate3d(0, 0, 0);
  }
  
  .messaging-room-form-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .messaging-room-form-header h6 {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      color: currentColor;
  }
  
  .messaging-room-form-content {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
  }
  
  .messaging-room-form-content .form-group {
      margin-bottom: 1rem;
  }
  
  .messaging-room-form-content label {
      display: block;
      margin-bottom: 0.5rem;
      font-weight: 500;
      color: currentColor;
      font-size: 0.875rem;
  }
  
  .messaging-room-form-content input,
  .messaging-room-form-content textarea {
      width: 100%;
      padding: 0.5rem;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      font-size: 0.875rem;
  }
  
  .messaging-room-form-content input:focus,
  .messaging-room-form-content textarea:focus {
      border-color: var(--main);
      outline: none;
  }
  
  .messaging-room-form-content .toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.75rem 0;
      color: currentColor;
      font-size: 0.875rem;
      transition: background-color 0.2s;
  }
  
  .messaging-room-form-content .toggle-row span {
      flex: 1;
      margin-right: 1rem;
      display: flex;
      flex-direction: column;
  }
  
  .messaging-room-form-content .toggle-row span .toggle-label-text {
      font-weight: 500;
      margin-bottom: 0.25rem;
  }
  
  .messaging-room-form-content .toggle-row span .toggle-description {
      font-size: 0.75rem;
      color: currentColor;
      line-height: 1.3;
  }
  
  .messaging-room-form-content .toggle-label[aria-checked="false"] {
      background: #9a9a9a;
  }
  
  .messaging-room-form-content .notification-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }
  
  .messaging-room-form-content .toggle-input-record-audio {
      display: none;
  }
  
  .messaging-room-form-content .toggle-label {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      background: linear-gradient(45deg, #232362 0%, #00B7EB 100%);
      border-radius: 12px;
      cursor: pointer;
      transition: background-color 0.3s;
      flex-shrink: 0;
  }
  
  .messaging-room-form-content .toggle-label::after {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: #fff;
      top: 3px;
      left: 3px;
      transition: transform 0.3s;
  }
  
  .messaging-room-form-content .toggle-input-record-audio:checked + .toggle-label {
      background-color: var(--main);
  }
  
  .messaging-room-form-content .toggle-input-record-audio:checked + .toggle-label::after {
      transform: translateX(20px);
  }
  
  /* ==========================================================================
     DETAILS PANEL STYLES
     ========================================================================== */
  
  .messaging-room-details-panel {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #ffffff;
      z-index: 13;
      display: flex;
      flex-direction: column;
      transform: translate3d(-100%, 0, 0);
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
  }
  
  .messaging-room-details-panel.is-open {
      transform: translate3d(0, 0, 0);
  }
  
  .messaging-room-details-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      background: #f8f9fa;
      gap: 1rem;
  }
  
  .messaging-room-details-header h6 {
      margin: 0;
      font-size: 1rem;
      font-weight: 600;
      color: currentColor;
      flex: 1;
      text-align: center;
  }
  
  .messaging-room-details-header .messaging-back-btn {
      flex-shrink: 0;
  }
  
  .messaging-room-details-chat-btn {
      padding: 0.5rem;
      border: none;
      background: none;
      color: currentColor;
      border-radius: 50px;
      transition: all 0.2s ease;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.875rem;
      white-space: nowrap;
      gap: 0.25rem;
      flex-shrink: 0;
  }
  
  .messaging-room-details-chat-btn:hover {
      background: rgba(0, 0, 0, 0.1);
      color: currentColor;
  }
  
  .messaging-room-details-chat-btn svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
  }
  
  .messaging-room-details-content {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
  }
  
  .messaging-room-details-info {
      position: relative;
      gap: 1.5rem;
      align-items: flex-start;
      padding: 2rem;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(74, 144, 226, 0.08) 0%, rgba(80, 200, 120, 0.08) 100%);
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  }
  
  .messaging-room-details-info::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #4a90e2 0%, #50c878 50%, #ff6b6b 100%);
      background-size: 200% 100%;
      animation: gradientRotate 4s ease infinite;
  }
  
  .messaging-room-details-avatar {
      position: relative;
      flex-shrink: 0;
      width: 88px;
      height: 88px;
      border-radius: 22px;
      overflow: visible;
      z-index: 2;
  }
  
  .messaging-room-details-avatar::before {
      content: '';
      position: absolute;
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      border-radius: 27px;
      background: linear-gradient(135deg, #4a90e2 0%, #50c878 50%, #ff6b6b 100%);
      background-size: 200% 200%;
      animation: gradientRotate 4s ease infinite;
      z-index: -1;
      opacity: 0.85;
  }
  
  .messaging-room-details-avatar::after {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border-radius: 24px;
      z-index: -1;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
  }
  
  @keyframes gradientRotate {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
  }
  
  .messaging-room-details-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 22px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
      position: relative;
      z-index: 1;
  }
  
  .messaging-room-details-info:hover .messaging-room-details-avatar img {
      transform: scale(1.08) rotate(3deg);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  }
  
  .messaging-room-details-meta {
      flex: 1;
      min-width: 0;
      position: relative;
      z-index: 1;
      padding-top: 1rem;
  }
  
  .messaging-room-details-meta h5 {
      margin: 0 0 0.625rem;
      font-size: 1.1rem;
      font-weight: 500;
      color: currentColor;
      line-height: 1.3;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      letter-spacing: -0.02em;
  }
  
  .messaging-room-details-meta p {
      margin: 0 0 1rem;
      font-size: 0.9375rem;
      line-height: 1.6;
      display: -webkit-box;
      -webkit-line-clamp: 8;
      line-clamp: 8;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      letter-spacing: -0.02em;
  }
  
  .messaging-room-details-stats {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
  }
  
  .messaging-room-details-stats-avatars {
      display: none;
      align-items: center;
      gap: 0.25rem;
      flex-wrap: wrap;
      overflow: hidden;
  }
  
  .messaging-room-details-stats-avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1.5px solid #fff;
      object-fit: cover;
      flex-shrink: 0;
      margin-left: -4px;
  }
  
  .messaging-room-details-stats-avatar:first-child {
      margin-left: 0;
  }
  
  .messaging-room-details-stats-count {
      font-size: 0.75rem;
      color: currentColor;
      margin-left: 0.25rem;
  }
  
  .messaging-room-details-members {
      flex: 1;
      min-height: 0;
  }
  
  .messaging-room-details-members h6 {
      margin: 0 0 1rem;
      font-size: 1rem;
      font-weight: 600;
      color: currentColor;
  }
  
  .messaging-room-details-members-list {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
  }
  
  .messaging-room-details-members-search {
      margin-bottom: 1rem;
  }
  
  .messaging-room-details-members-search .messaging-search {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      position: relative;
  }
  
  .messaging-room-details-members-search .messaging-search input {
      width: 100%;
      background-color: #f5f5f5;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      padding: 0.5rem 2.5rem 0.5rem 1rem;
      color: currentColor;
      font-size: 0.875rem;
  }
  
  .messaging-room-details-members-search .messaging-search input:focus {
      border-color: var(--main);
      outline: none;
  }
  
  .messaging-room-details-members-search .messaging-search svg {
      position: absolute;
      right: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
      color: currentColor;
  }
  
  .messaging-thread-meta {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
  }
  
  .messaging-thread-avatar {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      display: flex;
      align-self: flex-start;
  }
  
  .messaging-thread-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .messaging-thread-title-avatars {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      flex-shrink: 0;
  }
  
  .messaging-thread-title-avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1.5px solid transparent;
      object-fit: cover;
      flex-shrink: 0;
      margin-left: -10px;
  }
  
  .messaging-thread-title-avatar:first-child {
      margin-left: 0;
  }
  
  .messaging-thread-title-avatar-count {
      font-size: 0.75rem;
      color: currentColor;
      margin-left: 0.25rem;
      font-weight: 500;
  }
  
  .messaging-room-details-stats span {
      font-size: 0.875rem;
      color: currentColor;
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }
  
  .messaging-room-details-stats span:before {
      content: '';
      color: var(--main);
      font-weight: bold;
  }
  
  .messaging-room-details-member {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem;
      background: #f8f9fa;
      border-radius: 8px;
      text-decoration: none;
      color: inherit;
      transition: background 0.2s ease, border-color 0.2s ease;
      cursor: pointer;
  }
  
  .messaging-room-details-member:hover {
      background: #eef3ff;
      border-color: rgba(0, 0, 0, 0.08);
  }
  
  .messaging-room-details-member-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.05);
  }
  
  .messaging-room-details-member-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .messaging-room-details-member-info {
      flex: 1;
      min-width: 0;
  }
  
  .messaging-room-details-member-name {
      font-weight: 500;
      color: currentColor;
      margin: 0;
      font-size: 0.875rem;
  }
  
  .messaging-room-details-member-role {
      font-size: 0.75rem;
      color: currentColor;
      margin: 0.25rem 0 0;
  }
  
  /* ==========================================================================
     UTILITY AND MISC STYLES
     ========================================================================== */
  
  .messaging-chat-rooms-btn {
      margin-left: 0.25rem;
  }
  
  .messaging-thread-loader {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.95);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      z-index: 20;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
	  border-radius: 12px 12px 0 0;
	  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }
  
  .messaging-thread-loader .spinner-border {
      width: 2.5rem;
      height: 2.5rem;
      color: var(--main) !important;
  }
  
  .messaging-thread-loader.is-visible {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
  }
  
  .messaging-thread-loader.fade-out {
      opacity: 0;
      visibility: hidden;
  }
  
  .messaging-shell .modal-header {
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .messaging-shell.guest-mode .messaging-tab-btn[data-tab="direct"] {
      opacity: 0.5;
      pointer-events: none;
  }
  
  .messaging-composer.is-disabled {
      opacity: 0.65;
  }
  
  .messaging-composer-guest-message {
      display: none;
      width: 100%;
      text-align: center;
      font-size: 0.9rem;
      padding: 0.5rem 0;
      color: currentColor;
  }
  
  .messaging-composer.is-disabled .messaging-composer-guest-message {
      display: block;
  }
  
  .messaging-thread-empty-panel {
      display: none;
      text-align: center;
  }
  
  .messaging-thread-empty-panel.is-active {
      display: block;
  }
  
  .messaging-thread-empty-icon {
      opacity: 0.4;
      margin: 0 auto 16px;
      display: block;
  }
  
  .messaging-back-btn {
      padding: 0.5rem;
      border: none;
      background: none;
      color: currentColor;
      border-radius: 50px;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
  }
  
  .messaging-back-btn:hover {
      background: rgba(0, 0, 0, 0.1);
      color: currentColor;
  }
  
  .messaging-back-btn svg {
      width: 16px;
      height: 16px;
  }
  
  .messaging-rooms-loader {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      opacity: 1;
      transition: opacity 0.3s ease;
  }
  
  .messaging-rooms-loader.fade-out {
      opacity: 0;
  }
  
  .messaging-chat-rooms-list {
      min-height: 200px;
  }
  
  .messaging-rooms-load-more-wrapper {
      display: flex;
      justify-content: center;
      padding: 1rem 0;
      margin-top: 0.5rem;
  }
  
  .messaging-rooms-load-more-btn {
      min-width: 150px;
  }
  
  .messaging-thread-subtitle-settings {
      font-size: 0.75rem;
      color: currentColor;
      line-height: 1.3;
  }
  
  /* ==========================================================================
     REPLY AND ATTACHMENT STYLES
     ========================================================================== */
  
  .messaging-reply-preview {
      background-color: rgba(0, 0, 0, 0.03);
      border-left: 2px solid var(--main);
      border-radius: 6px;
      padding: 0.5rem 0.75rem;
      margin-bottom: 0.5rem;
      font-size: 0.8125rem;
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
      margin-left: 50px;
  }
  
  .messaging-reply-preview::before {
      content: '';
      position: absolute;
      left: -40px;
      top: 32px;
      bottom: -10px;
      width: 40px;
      height: calc(100% - 28px);
      border-left: 2px solid var(--main);
      border-top: 2px solid var(--main);
      border-top-left-radius: 10px;
  }
  
  .messaging-reply-preview:hover {
      background-color: rgba(0, 0, 0, 0.06);
      border-left-color: var(--main);
  }
  
  .messaging-reply-preview-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.375rem;
      color: currentColor;
  }
  
  .messaging-reply-preview-avatar {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
  }
  
  .messaging-reply-preview-text {
      color: currentColor;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
      line-height: 1.4;
  }
  
  .messaging-reply-preview-image {
      margin-top: 0.375rem;
      margin-bottom: 0.25rem;
      border-radius: 4px;
      overflow: hidden;
      height: 100%;
      width: 100px;
  }
  
  .messaging-reply-preview-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
  }
  
  .messaging-composer-reply-preview-content {
      flex: 1;
      min-width: 0;
  }
  
  .messaging-composer-reply-preview-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: currentColor;
  }
  
  .messaging-composer-reply-preview-text {
      color: currentColor;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  
  .messaging-attachment-content {
      padding-right: 40px;
  }
  
  .messaging-attachment-size {
      font-size: 0.75rem;
      color: currentColor;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
      padding: 0;
  }
  
  .messaging-attachment-size.d-flex.slide-down {
      max-height: 100px;
      opacity: 1;
      padding: 8px 0;
  }
  
  .messaging-attachment-size.slide-up {
      max-height: 0 !important;
      opacity: 0;
      padding: 0;
  }
  
  /* ==========================================================================
     MODAL AND ENCRYPTION STYLES
     ========================================================================== */
  
  #messagingImageModal .btn {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 101;
      cursor: pointer;
  }
  
  .messaging-image-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      z-index: 1051;
      align-items: center;
      justify-content: center;
  }
  
  .messaging-image-modal-content {
      position: relative;
      max-width: 90%;
      max-height: 90%;
  }
  
  .messaging-image-modal-content img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
  }
  
  .messaging-encryption-hero {
      padding: 40px 28px;
      border-radius: 16px;
      margin-bottom: 32px;
      position: relative;
      overflow: hidden;
  }
  
  .messaging-encryption-hero-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(128, 128, 128, 0.04) 50%, rgba(76, 175, 80, 0.06) 100%);
      border-radius: 16px;
  }
  
  .messaging-encryption-hero-content {
      position: relative;
      z-index: 1;
  }
  
  .messaging-encryption-icon-wrapper {
      width: 88px;
      height: 88px;
      margin: 0 auto 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05));
      border: 2px solid rgba(76, 175, 80, 0.3);
  }
  
  .messaging-encryption-hero-title {
      font-weight: 600;
      font-size: 28px;
      color: currentColor;
      margin-bottom: 12px;
  }
  
  .messaging-encryption-hero-text {
      font-size: 15px;
      line-height: 1.65;
      max-width: 520px;
      margin: 0 auto;
  }
  
  .messaging-encryption-section {
      margin-bottom: 32px;
  }
  
  .messaging-encryption-section-title {
      font-weight: 600;
      font-size: 17px;
      color: currentColor;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
  }
  
  .messaging-encryption-section-icon,
  .messaging-encryption-section-title-icon {
      margin-right: 10px;
      color: currentColor;
  }
  
  .messaging-encryption-section-text {
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 16px;
  }
  
  .messaging-encryption-section-list {
      margin: 0 0 0 22px;
      padding: 0;
      font-size: 14px;
      line-height: 1.85;
  }
  
  .messaging-encryption-section-list li {
      margin-bottom: 10px;
  }
  
  .messaging-encryption-highlight-box {
      padding: 20px 24px;
      border-radius: 12px;
      margin-bottom: 32px;
      border-left: 4px solid #4caf50;
      background: linear-gradient(to right, rgba(76, 175, 80, 0.06), rgba(128, 128, 128, 0.02));
  }
  
  .messaging-encryption-highlight-title {
      font-weight: 600;
      font-size: 16px;
      display: flex;
      align-items: center;
      color: currentColor;
      margin-bottom: 12px;
  }
  
  .messaging-encryption-highlight-icon {
      margin-right: 10px;
      color: currentColor;
  }
  
  .messaging-encryption-highlight-text {
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 10px;
  }
  
  .messaging-encryption-highlight-text strong {
      color: currentColor;
  }
  
  .messaging-encryption-highlight-text:last-child {
      margin-bottom: 0;
  }
  
  .messaging-encryption-how-works-box {
      border-radius: 12px;
      padding: 22px 24px;
      border-left: 4px solid #4caf50;
      background: linear-gradient(to right, rgba(76, 175, 80, 0.05), rgba(128, 128, 128, 0.02));
  }
  
  .messaging-encryption-how-works-list {
      margin: 0;
      padding-left: 22px;
      font-size: 14px;
      line-height: 1.85;
  }
  
  .messaging-encryption-how-works-list li {
      margin-bottom: 14px;
  }
  
  .messaging-encryption-feature-item {
      display: flex;
      align-items: start;
      margin-bottom: 18px;
      padding: 20px;
      border-radius: 12px;
      border-left: 4px solid #4caf50;
      background: linear-gradient(to right, rgba(76, 175, 80, 0.05), rgba(128, 128, 128, 0.02));
  }
  
  .messaging-encryption-feature-item:last-child {
      margin-bottom: 0;
  }
  
  .messaging-encryption-feature-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
      background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.05));
      border: 1px solid rgba(76, 175, 80, 0.3);
  }
  
  .messaging-encryption-feature-content {
      flex: 1;
  }
  
  .messaging-encryption-feature-title {
      font-size: 16px;
      color: currentColor;
      margin-bottom: 8px;
  }
  
  .messaging-encryption-feature-text {
      font-size: 14px;
      line-height: 1.7;
  }
  
  .messaging-encryption-benefits-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
  }
  
  .messaging-encryption-benefit-card {
      padding: 20px;
      border-radius: 12px;
      text-align: center;
      border-top: 3px solid #4caf50;
      background: linear-gradient(to bottom, rgba(76, 175, 80, 0.06), rgba(128, 128, 128, 0.02));
  }
  
  .messaging-encryption-benefit-icon {
      margin: 0 auto 12px;
  }
  
  .messaging-encryption-benefit-title {
      font-size: 14px;
      color: currentColor;
      margin-bottom: 8px;
  }
  
  .messaging-encryption-benefit-text {
      font-size: 13px;
      line-height: 1.6;
  }
  
  .messaging-encryption-security-note {
      padding: 22px 24px;
      border-radius: 12px;
      margin-bottom: 28px;
      border-left: 4px solid #4caf50;
      background: linear-gradient(to right, rgba(76, 175, 80, 0.06), rgba(128, 128, 128, 0.02));
  }
  
  .messaging-encryption-security-note-content {
      display: flex;
      align-items: start;
  }
  
  .messaging-encryption-security-note-icon {
      margin-right: 12px;
      flex-shrink: 0;
      margin-top: 2px;
  }
  
  .messaging-encryption-security-note-title {
      font-size: 15px;
      color: currentColor;
      margin-bottom: 10px;
  }
  
  .messaging-encryption-security-note-text {
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 12px;
  }
  
  .messaging-encryption-security-note-list {
      margin: 0 0 0 22px;
      padding: 0;
      font-size: 14px;
      line-height: 1.85;
  }
  
  .messaging-encryption-security-note-list li {
      margin-bottom: 10px;
  }
  
  .messaging-svg-icon {
      height: 32px;
  }
  
  .messaging-encryption-security-note-list li {
      margin-bottom: 8px;
  }
  
  .messaging-encryption-footer-note {
      padding: 20px 24px;
      border-radius: 12px;
      border-top: 3px solid #4caf50;
      background: linear-gradient(to bottom, rgba(76, 175, 80, 0.08), rgba(128, 128, 128, 0.03));
  }
  
  .messaging-encryption-footer-text {
      font-size: 14px;
      line-height: 1.7;
  }
  
  .messaging-encryption-footer-icon {
      vertical-align: middle;
      margin-right: 8px;
  }
  
  .messaging-encryption-modal-footer {
      padding: 20px 28px;
      background: linear-gradient(to top, rgba(128, 128, 128, 0.03), transparent);
  }
  
  .messaging-encryption-modal-button {
      background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%);
      border: none;
      width: 100%;
      border-radius: 10px;
      padding: 12px;
      font-weight: 500;
      color: currentColor;
      box-shadow: 0 4px 14px rgba(76, 175, 80, 0.25);
      transition: all 0.2s;
  }
  
  .messaging-password-input {
      padding: 12px 16px;
      border-radius: 8px;
  }
  
  .messaging-password-error {
      padding: 8px 12px;
      background: rgba(220, 53, 69, 0.1);
      border-radius: 6px;
      border-left: 3px solid #dc3545;
  }
  
  .messaging-password-info {
      padding: 12px;
      background: rgba(76, 175, 80, 0.05);
      border-radius: 8px;
      border-left: 3px solid #4caf50;
  }
  
  .messaging-password-info-icon {
      vertical-align: middle;
      margin-right: 6px;
  }
  
  .messaging-password-reset-btn {
      border-radius: 8px;
  }
  
  .messaging-password-reset-icon {
      vertical-align: middle;
      margin-right: 6px;
  }
  
  .messaging-question-icon {
      transition: transform 0.2s ease, filter 0.2s ease;
      filter: drop-shadow(0 0 4px rgba(76, 175, 80, 0.6));
  }
  
  .messaging-encryption-btn:hover .messaging-question-icon {
      transform: scale(1.1);
      filter: drop-shadow(0 0 8px rgba(76, 175, 80, 0.9));
  }
  
  .messaging-e2ee-indicator {
      display: inline-flex;
      align-items: center;
      color: currentColor;
  }
  
  .messaging-e2ee-indicator svg {
      animation: messagingPadlockPulse 2s ease-in-out infinite;
  }
  
  @keyframes messagingPadlockPulse {
      0%, 100% {
          opacity: 1;
          transform: scale(1);
      }
      50% {
          opacity: 0.8;
          transform: scale(1.05);
      }
  }
  
  .messaging-composer-textarea {
      padding-left: 40px;
      padding-right: 40px;
  }
  
  .messaging-composer-btn-inside {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      background: transparent;
      border: none;
  }
  
  .messaging-composer-upload-btn {
      left: 8px;
  }
  
  .messaging-composer-emoji-btn {
      right: 8px;
  }
  
  .messaging-emoji-picker-container {
      position: absolute;
      right: 0;
      bottom: 100%;
      z-index: 1050;
      display: none;
      margin-bottom: 5px;
  }
  
  .messaging-image-upload-input {
      display: none;
  }
  
  .messaging-push-toggle-row {
      display: none;
  }
  
  .messaging-who-can-message-select {
      width: auto;
      min-width: 140px;
  }
  
  /* ==========================================================================
     EMPTY STATE STYLES
     ========================================================================== */
  
  .messaging-empty-icon {
      opacity: 0.4;
      margin: 0 auto 16px;
  }
  
  .messaging-empty-title {
      font-weight: 500;
      font-size: 16px;
  }
  
  .messaging-empty-text {
      font-size: 13px;
  }
  
  .messaging-empty-large-icon {
      opacity: 0.3;
      margin: 0 auto 20px;
  }
  
  .messaging-empty-large-title {
      font-weight: 500;
      font-size: 18px;
  }
  
  .messaging-empty-large-text {
      font-size: 14px;
      line-height: 1.5;
  }
  
  .messaging-thread-actions {
      position: relative;
  }
  
  .messaging-action-icon {
      margin-right: 8px;
      vertical-align: middle;
  }
  
  /* ==========================================================================
     LIKE TOOLTIP STYLES
     ========================================================================== */
  
  .messaging-like-tooltip {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 180px;
  }
  
  .messaging-like-tooltip span.bold {
      font-size: 13px;
  }
  
  .messaging-like-tooltip-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
  }
  
  .messaging-like-tooltip-row img {
      width: 24px !important;
      height: 24px !important;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  }
  
  .messaging-like-tooltip-more {
      font-size: 12px;
      color: currentColor;
  }
  
  .messaging-like-tooltip-empty {
      font-size: 13px;
      color: currentColor;
  }
  
  .messaging-like-icon text {
      fill: #fff;
      font-size: 9px;
      font-weight: 600;
      pointer-events: none;
  }
  
  .messaging-og-preview {
      margin-top: 0.5rem;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 0.75rem;
      background: rgba(255,255,255,0.03);
      max-width: 400px;
      cursor: pointer;
  }
  
  .messaging-og-preview img {
      width: 100%;
      max-height: 200px;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 0.5rem;
  }
  
  .og-preview-title {
      font-weight: 500;
      color: currentColor;
      margin-bottom: 0.25rem;
      font-size: 0.875rem;
  }
  
  .og-preview-description {
      color: currentColor;
      font-size: 0.8125rem;
      line-height: 1.4;
  }
  
  .og-preview-url {
      color: currentColor;
      font-size: 0.75rem;
      margin-top: 0.25rem;
  }
  
  .og-preview-remove {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      background: rgba(0,0,0,0.6);
      border: none;
      color: currentColor;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .highlight-message {
      animation: highlight-pulse 2s ease-in-out;
  }
  
  @keyframes highlight-pulse {
      0%, 100% { background-color: transparent; }
      50% { background-color: color-mix(in srgb, var(--main) 10%, transparent); }
  }
  
  .messaging-search-dropdown {
      position: absolute;
      top: 100%;
      right: 0;
      background-color: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      max-height: 400px;
      overflow-y: auto;
      z-index: 1000;
      min-width: 300px;
      margin-top: 0.5rem;
      opacity: 0;
      transform: translateX(20px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
  }
  
  .messaging-search-dropdown.is-open {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
  }
  
  .messaging-search-input-wrapper {
      padding: 0.75rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      background-color: #ffffff;
      z-index: 1;
  }
  
  .messaging-search-input-wrapper input {
      width: 100%;
      background-color: #f5f5f5;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      padding: 0.5rem 0.75rem;
      color: currentColor;
      font-size: 0.875rem;
  }
  
  .messaging-search-input-wrapper input:focus {
      border-color: var(--main);
      outline: none;
  }
  
  .messaging-search-results {
      max-height: 350px;
      overflow-y: auto;
  }
  
  .messaging-search-result-item {
      padding: 0.75rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      cursor: pointer;
      transition: background-color 0.2s;
  }
  
  .messaging-search-result-item:hover {
      background-color: rgba(0, 0, 0, 0.05);
  }
  
  .messaging-search-result-item:last-child {
      border-bottom: none;
  }
  
  .messaging-search-result-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.25rem;
  }
  
  .messaging-search-result-avatar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      object-fit: cover;
  }
  
  .messaging-search-result-username {
      font-weight: 500;
      color: currentColor;
      font-size: 0.875rem;
  }
  
  .messaging-search-result-time {
      font-size: 0.75rem;
      color: currentColor;
      margin-left: auto;
  }
  
  .messaging-search-result-text {
      font-size: 0.8125rem;
      color: currentColor;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
  
  .messaging-search-empty {
      padding: 2rem 1rem;
      text-align: center;
      color: currentColor;
      font-size: 0.875rem;
  }
  
  /* ==========================================================================
     SETTINGS AND PASSWORD PAGE STYLES
     ========================================================================== */
  
  .messaging-settings-page {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: var(--modal-bg);
      display: flex;
      flex-direction: column;
      z-index: 20;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateX(100%);
      opacity: 0;
      pointer-events: none;
  }
  
  .messaging-password-page {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: var(--modal-bg);
      display: flex;
      flex-direction: column;
      z-index: 10;
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      transform: translateX(100%);
      opacity: 0;
      pointer-events: none;
  }
  
  .messaging-body.show-settings .messaging-settings-page {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
  }
  
  .messaging-settings-header,
  .messaging-password-header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 1rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      background: #fff;
  }
  
  .messaging-room-details-subheading {
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: currentColor;
      margin: 0.5rem 0 0.15rem;
      font-weight: 600;
  }
  
/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* ========================================
   MEDIA QUERIES
   ========================================
   • Max-width breakpoints descend desktop → mobile
   • Min-width breakpoints ascend mobile → desktop
   • Orientation / capability overrides follow last
   ======================================== */

/* ---------- Max-width breakpoints ---------- */

@media (max-width: 1467px) {
      .tag_liked_grid .tag_short_home_list,
      .tag_video_grid > .col-md-3 {
          -ms-flex: 0 0 25%;
          -webkit-box-flex: 0;
                  flex: 0 0 25%;
          max-width: 25%;
      }
      .tag_short_home_list {
          width: calc(100% / 6 - 8.4px);
      }
      .tag_video_grid.top.related .tag_video_grid_list .thumb {
          width: 42%;
      }
  }

@media (max-width: 1267px) {
      .tag_liked_grid .tag_short_home_list,
      .tag_video_grid > .col-md-3 {
          -ms-flex: 0 0 33.3333333%;
          -webkit-box-flex: 0;
                  flex: 0 0 33.3333333%;
          max-width: 33.3333333%;
      }
      .tag_short_home.scroll {
          overflow-x: auto;
      }
      .tag_short_home.scroll .tag_short_home_list {
          width: 180px;
          -webkit-box-flex: 0;
              -ms-flex: 0 0 auto;
                  flex: 0 0 auto;
      }
      .tag_video_grid.top.scroll > .col-md-3 {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 auto;
                  flex: 0 0 auto;
          max-width: 100%;
      }
      .tag_sett_sidebar {
          padding: 0 !important;
      }
      .tag_sett_sidebar a {
          padding: 15px;
      }
      .tag_profile_cover .cover-container,
      .tag_profile_cover .cover-container-2 {
          height: calc((100vw - 70px) / 4);
      }
      .tag_short_home_list {
          width: calc(100% / 5 - 8px);
      }
      .tag_user_menu_links {
          -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
          grid-template-columns: repeat(5, 1fr);
      }
  }

@media (max-width: 1200px) {
  
      .tag_main_player,
      .tag_main_vid_details {
          padding: 0 !important;
      }
      .tag_watch_side {
          top: auto;
          right: auto !important;
          bottom: auto;
          left: auto !important;
          width: 100%;
          position: relative !important;
      }
      .tag_watch_movie .tag_watch_details {
          width: 100%;
      }
      .tag_user_menu_links {
          -ms-grid-columns: 1fr 1fr 1fr 1fr;
          grid-template-columns: repeat(4, 1fr);
      }
      #header_ad_:not(:empty).watch {
          max-width: 100%;
      }
  }

/* Medium to Large Screens (max-width: 1200px) */
  @media (max-width: 1200px) {
      .tag_watch_rel_vids {
          display:none;	
      }
      .tag_main_player {
          position: sticky;
          top: 70px;
          z-index: 2;
      }
      .player-parent, .cinematics-glow, video {
          height: 100%;
      }
      .tag_video_grid_list .duration_hover {
          right: 0;
          bottom: 0;
          opacity: 1;
      }
  
      .title-container {
          display: block;
      }
  
      .title-container .wow_liv_counter_watch, .toggleVideoChat {
          justify-content: flex-start;
      }
  
      .notification-toggle {
          left: 15px;
      }
  
      #pinned-comment-stream .content {
          width: calc(100% - 15px);
      }
  
      .streamComments {
          position: fixed !important;
          bottom: -200%;
          right: 0;
          top: auto;
          background: var(--body-bg);
      transition: bottom 0.5s ease-in-out;
          transform: translateX(0%);
          z-index: 100;
          height: calc(100dvh - var(--video-height));
          margin: 0 !important;
          padding-top: 10px;
          width: 100%;
      }
  
      .streamComments.visible {
          display: block;
          width: calc(100% - 116px);
          height: 100dvh;
          bottom:0;
      }
  
      .header-live {
          display: none;
      }
  
      .chat-header-live {
          display: block;
      }
  
      .side-by-side-container .tag_video_grid .col-md-4 {
          max-width: 50%;
      }
  
      .side-by-side-container .tag_video_grid .col-md-4:nth-child(3) {
          display: none;
      }
  
      body.chat-open {
          overflow: hidden;
      }
  
      #close, .btn-chat {
          display: block;
      }	
      
  }

/* Portrait Orientation (max-width: 1200px) */
  @media (max-width: 1200px) and (orientation: portrait) {
      .main-content {
          margin-left: 100px;
      }
  }

/* Mobile/tablet behavior (<=1200px) - slide from bottom */
  @media (max-width: 1200px) {
      .video-chat-overlay {
          position: fixed;
          top: auto;
          bottom: -100%;
          right: 0;
          width: auto;
          height: calc(100dvh - var(--video-height, 50vh));
          background: var(--body-bg);
          transform: translate3d(0, 0, 0);
          transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          will-change: transform;
          z-index: 100; /* Higher than head_sidebar (z-index: 99) */
      }
  
      /* Chat input container */
      .chat-input-container { 
          right: 20px;
      }    .chat-input-container input {	  color: currentColor; 
      }
    /* Empty state */  .chat-empty-state {	  color: currentColor;  }	  
  
      .video-chat-overlay.visible {
          bottom: 0;
          width: calc(100% - 116px);
      }
  }

/* Center empty state on mobile/tablet screens */
  @media (max-width: 1200px) {
      .chat-empty-state {
          width: 100%;
          margin: 0 auto;
      }
  }

@media (max-width: 992px) {
  
    .dropdown-menu.show {
      display: block;
      -webkit-animation: slideUp 0.3s forwards;
      animation: slideUp 0.3s forwards;
      position: fixed !important;
      right: 0;
      left: 0;
      border-radius: 20px 20px 0 0;
      bottom: 0;
      z-index: 101 !important;
      top: auto !important;
      max-height: 75dvh;
      overflow: scroll;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
      margin: .5rem .5rem 0 .5rem;
    }
  
    body.no-scroll {
      overflow: hidden;
    }
  
    .dropdown-menu::before {
      content: '';
      display: block;
      width: 10vw;
      height: 5px;
      background: var(--main);
      margin: 10px 0 auto;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 50px;
    }
  
    .liveStreamUsers + .dropdown-menu .userName, .liveStreamUsers + .dropdown-menu .userTime, .liveStreamUsers + .dropdown-menu .user-list-menu span, .leaderboardContainer .userName {
      font-size: 17px;
    }
    .liveStreamUsers + .dropdown-menu .user-list img, .leaderboardContainer .avatar, .leaderboardContainer .medal {
      width: 35px !important;
      height: 35px !important;
    }
    .userOnlineDot {
      width: 12px;
      height: 12px;
    }
    .liveStreamUsers + .dropdown-menu {
      padding: 20px 30px 30px 30px;
    }
    .onlineUserContainer svg.userOnlineDot {
      left: 8px;
    }
    .dropdown.chatArrow.show {
       z-index: 99 !important;
    }
    .liveStreamUsers + .dropdown-menu .close-btn, .image-carousel + .dropdown-menu .close-btn, .close-leaderboard-btn {
      display: block;
    }
    .dropdownHeaderText, .liveStreamUsers + .dropdown-menu .onlineUserMenu {
        font-size: 20px;
    }
  }

/* Medium Screens (max-width: 992px) */
  @media (max-width: 992px) {
      .side-by-side-container {
          display: block;
      }
      .side-by-side-container .tag_video_grid .feat-vids {
          display: none !important;
      }
  
      .side-by-side-container .info:first-child {
          margin-top: 16px;
      }
  
      .side-by-side-container .embed-responsive {
          width: 100%;
      }
  
      .wow_liv_counter_watch, .toggleVideoChat {
          margin-bottom: 5px;
          justify-content: flex-start;
      }
  
      .chatArrow .dropdown-item:has(.pointer-events-none) {
          display: block !important;
      }
  
      .chatArrow .dropdown-menu .close-btn {
          display: block !important;
      }
  }

@media (max-width: 991px) {
      /* Lock body when dropdown is open on mobile */
      body:has(div.dropdown-menu.show) {
          overflow: hidden;
      }
  
  }

@media (max-width: 991px) {
      .tag_sett_sidebar a > svg {
          display: none;
      }
      .tag_sett_sidebar.scroll {
          white-space: nowrap;
          display: -ms-flexbox;
          display: -webkit-box;
          display: flex;
          overflow-x: auto;
      }
      .tag_sett_sidebar.scroll a > div {
          gap: 10px;
      }
      .tag_sett_sidebar a.active:before {
          border-radius: 0;
      }
      .tag_sett_sidebar a:not(:last-child):after {
          opacity: 0;
      }
      .tag_sett_sidebar a.active:after {
          top: auto;
          opacity: 1;
      }
      .tag_video_grid_list .info .btn[data-toggle="dropdown"] {
        visibility: visible;
      }
  }

@media (max-width: 967px) {
      .tag_liked_grid .tag_short_home_list,
      .tag_video_grid > .col-md-3 {
          -ms-flex: 0 0 50%;
          -webkit-box-flex: 0;
                  flex: 0 0 50%;
          max-width: 50%;
      }
      .shorts_events {
          background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgb(0 0 0 / 80%)));
          background: -o-linear-gradient(transparent, rgb(0 0 0 / 80%));
          background: linear-gradient(transparent, rgb(0 0 0 / 80%));
      }
      .shorts_events > .info {
          background: 0 0;
          border-radius: 0;
      }
      .shorts_events .icons {
          margin: 0 !important;
          padding: 20px;
          color: #fff;
      }
      .shorts_events .icons .icon {
          width: 30px;
          height: 30px;
          color: #fff;
          margin: auto;
      }
      .shorts_events .icons .icon:before {
          background: #fff;
          opacity: 0.2;
      }
      .shorts_events .icons .icon svg {
          width: 20px;
          height: 20px;
      }
      .tag_profile_cover .cover-container,
      .tag_profile_cover .cover-container-2 {
          height: calc((100vw - 70px) / 3);
      }
      .tag_short_home_list {
          width: calc(100% / 4 - 7.5px);
      }
      .tag_user_menu_links {
          -ms-grid-columns: 1fr 1fr 1fr;
          grid-template-columns: repeat(3, 1fr);
      }
  }

/* Small Screens (max-width: 967px) */
  @media (max-width: 967px) {
      .subscribe_popup > div:first-child {
          display: revert !important;
      }
  
      .subscribe_popup .buttons {
          margin-left: 0 !important;
      }
  
      .subscribe_popup .close {
          right: 20px;
          top: 20px;
      }
  
      .subscribe_popup p {
          margin-bottom: 1rem !important;
      }
  }

/* Extra Small Screens (max-width: 768px) */
  @media (max-width: 768px) {
      .pt_blogcomm_combo_stream {
          width: 100%;
      }
  }

/* Responsive adjustments */
  @media (max-width: 768px) {
      .chat-input-container {
          min-width: 250px;
      }
  }

/* Mobile Styles */
  @media (max-width: 768px) {
      .messaging-body {
          height: calc(100vh - 200px);
          max-height: calc(100vh - 200px);
          position: relative;
          overflow: hidden;
      }
  
      .messaging-sidebar {
          width: 100%;
          height: 100%;
          border-right: none;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          transform: translateX(0);
      }
  
      .messaging-body.show-thread .messaging-sidebar {
          transform: translateX(-100%);
      }
  
      .messaging-thread {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          transform: translateX(100%);
      }
  
      .messaging-body.show-thread .messaging-thread {
          transform: translateX(0);
      }
  
      .messaging-settings-page {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 3;
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          transform: translateX(100%);
          display: flex;
          flex-direction: column;
          opacity: 0;
          pointer-events: none;
      }
  
      .messaging-body.show-settings .messaging-settings-page {
          transform: translateX(0);
          opacity: 1;
          pointer-events: auto;
      }
  
      .messaging-body.show-settings .messaging-sidebar {
          transform: translateX(-100%);
      }
  
      .messaging-body.show-settings .messaging-thread {
          transform: translateX(-100%);
      }
  
      .messaging-password-page {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 4;
          transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          transform: translateX(100%);
          background: var(--modal-bg);
          display: flex;
          flex-direction: column;
          opacity: 0;
          pointer-events: none;
      }
  
      .messaging-body.show-password .messaging-password-page {
          transform: translateX(0);
          opacity: 1;
          pointer-events: auto;
      }
  
      .messaging-body.show-password .messaging-sidebar {
          transform: translateX(-100%);
      }
  
      .messaging-body.show-password .messaging-thread {
          transform: translateX(-100%);
      }
  
      .messaging-body.show-password .messaging-settings-page {
          transform: translateX(-100%);
      }
  
      .messaging-back-btn {
          display: flex !important;
      }
  
      .messaging-settings-content .user-list-menu {
          padding: 0.25rem 0;
      }
  
      .messaging-settings-content .toggle-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.75rem 1rem;
          color: currentColor;
          font-size: 0.875rem;
          transition: background-color 0.2s;
      }
  
      .messaging-settings-content .toggle-row:hover {
          background-color: rgba(255, 255, 255, 0.05);
      }
  
      .messaging-settings-content .toggle-row span {
          flex: 1;
      }
  
      .messaging-settings-content .notification-toggle {
          gap: 0.5rem;
      }
  
      .messaging-settings-content .toggle-input-notification,
      .messaging-settings-content .toggle-input-push,
      .messaging-settings-content .toggle-input-last-online {
          display: none;
      }
  
      .messaging-settings-content .toggle-label {
          position: relative;
          display: inline-block;
          width: 44px;
          height: 24px;
          background-color: rgba(255, 255, 255, 0.2);
          border-radius: 12px;
          cursor: pointer;
          transition: background-color 0.3s;
      }
  
      .messaging-settings-content .toggle-label::after {
          content: '';
          position: absolute;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background-color: #fff;
          top: 3px;
          left: 3px;
          transition: transform 0.3s;
      }
  
      .messaging-settings-content .toggle-input-notification:checked + .toggle-label,
      .messaging-settings-content .toggle-input-push:checked + .toggle-label,
      .messaging-settings-content .toggle-input-last-online:checked + .toggle-label {
          background-color: var(--main);
      }
  
      .messaging-settings-content .toggle-input-notification:checked + .toggle-label::after,
      .messaging-settings-content .toggle-input-push:checked + .toggle-label::after,
      .messaging-settings-content .toggle-input-last-online:checked + .toggle-label::after {
          transform: translateX(20px);
      }
  
      .messaging-conversations {
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
          min-height: 0;
      }
  
      .messaging-thread-body {
          height: 100%;
          overflow-y: auto;
          overflow-x: hidden;
          min-height: 0;
      }
  
      .messaging-composer {
          padding: 0;
      }
  
      .messaging-input-area {
          padding: 0.5rem 1rem;
      }
  
      .messaging-message-actions {
          top: 0.25rem;
          right: 0.5rem;
          padding: 0.125rem;
          gap: 0.125rem;
      }
  
      .message-action {
          padding: 0.25rem;
      }
  
      .message-action.like svg {
          width: 14px;
          height: 14px;
      }
  
      .message-action.like span {
          font-size: 0.75rem;
      }
  
      .message-action.delete svg {
          width: 14px;
          height: 14px;
      }
  
      .messaging-room-details-chat-btn {
          display: flex;
      }
  
      .messaging-room-details-stats-avatars {
          display: flex;
      }
  }

@media (max-width: 767px) {
      .table-responsive,
      .video-options {
          white-space: nowrap;
      }
      #scrollToTopBtn {
        width: 44px;
        height: 44px;
        bottom: 80px;
      }
      .head_sidebar.menu-hidden ~ #scrollToTopBtn {
        bottom: 20px;
      }
      .tag_header {
          padding: 0 15px;
          height: 60px;
          background: var(--body-bg);
      }
      .tag_header .navbar-brand img {
          max-height: 35px;
      }
      .head_sidebar {
          left: 0;
          right: 0;
          top: auto;
          bottom: 0;
          height: 60px !important;
          min-width: 100%;
          border-top: 1px solid var(--border-light);
      transform: translateY(0);
          transition: transform 0.3s ease-in-out;
      }
      .head_sidebar.menu-hidden {
          transform: translateY(100%);
      }
  
      body.noti_menu_open .head_sidebar,
      body.search_menu_open .head_sidebar,
      body.user_menu_open .head_sidebar {
          border-right: 0 !important;
          border-left: 0 !important;
          min-width: 100%;
          border-top-color: var(--border-light);
      }
      .head_sidebar_menu,
      .head_sidebar_menu:hover,
      .head_sidebar_menu > nav,
      body.noti_menu_open .head_sidebar_menu,
      body.search_menu_open .head_sidebar_menu,
      body.user_menu_open .head_sidebar_menu {
          width: 100%;
      }
      .head_sidebar_menu > nav > div {
          -webkit-box-flex: 1;
              -ms-flex: 1 1 auto;
                  flex: 1 1 auto;
          text-align: center;
      }
      .head_sidebar_menu a {
          padding: 17px 0 !important;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
      }
      .tag_header_ddown {
          top: 0;
          bottom: 0px;
          height: auto;
          left: 0 !important;
          right: 0 !important;
          z-index: 102;
          -webkit-box-shadow: none;
                  box-shadow: none;
          border-radius: 0;
      }
      .tag_noti_menu, .tag_search_menu {
          width: 100%;
          min-width: 100%;
          transform: translateY(100%);
          visibility: hidden;
          opacity: 0;
          transition: transform 0.3s ease, visibility 0.3s, opacity 0.3s;
      }
      
      body.noti_menu_open .tag_noti_menu,
      body.search_menu_open .tag_search_menu,
      body.user_menu_open .tag_user_menu {
          transform: translateY(0);
          visibility: visible;
          opacity: 1;
          -webkit-animation: 0.3s forwards slideUp;
          animation: 0.3s forwards slideUp;
      }
      body:not(.noti_menu_open) .tag_noti_menu, body:not(.search_menu_open) .tag_search_menu, body:not(.user_menu_open) .tag_user_menu {
          -webkit-animation: 0.3s forwards slideDown;
          -moz-animation: 0.3s forwards slideDown;
          animation: 0.3s forwards slideDown;
      }
      body.noti_menu_open .tag_noti_menu,
      body.search_menu_open .tag_search_menu {
          -webkit-transition: none;
          -o-transition: none;
          transition: none;
      }
      .tag_header_ddown .btn-close {
          margin-top: 15px;
      }
      .main-content {
          margin: 60px 0 !important;
      }
      .empty_state_center,
      .main-content {
          min-height: calc(100vh - 120px);
          min-height: calc(var(--vh, 1vh) * 100 - 120px);
      }
      .display-4 {
          font-size: 2.8rem;
      }
      .content.p-4 {
          padding: 1.5rem !important;
      }
      .user-comments img.rounded-circle {
          width: 40px;
          height: 40px;
      }
      .h1,
      h1 {
          font-size: 2rem;
      }
      .h2,
      h2 {
          font-size: 1.8rem;
      }
      .h3,
      h3 {
          font-size: 1.5rem;
      }
      .h4,
      h4 {
          font-size: 1.3rem;
      }
      .blockquote {
          font-size: 1.15rem;
      }
      .new_updates {
          top: 15px;
          left: 50%;
      }
      .tag_pro_plan:hover .tag_pro_bg {
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
      }
      .tag_video_grid_list:hover:before {
          display: none;
      }
      .profile_nav_scroll,
      .tag_home_cat_list.scroll,
      .tag_short_home.scroll,
      .tag_video_grid.top.scroll,
      .video-options {
          margin: 0 -15px;
          padding: 0 15px;
      }
      .tag_sett_sidebar.scroll {
          margin: 0 -15px;
          padding: 0 15px !important;
      }
      .tag_video_grid.scroll {
          margin: 0 -15px;
          padding: 0 7px;
      }
      .tag_home_vid_list > .title a svg {
          -webkit-transform: translateX(10px) !important;
              -ms-transform: translateX(10px) !important;
                  transform: translateX(10px) !important;
          opacity: 1;
      }
      .tag_home_cat_list.scroll,
      .tag_video_grid.scroll {
          overflow-x: auto;
          -ms-flex-wrap: nowrap !important;
              flex-wrap: nowrap !important;
      }
      .tag_home_cat_list a {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 auto;
                  flex: 0 0 auto;
      }
      .tag_video_grid.scroll > .col-md-3 {
      padding: 12px;
          -ms-flex: 0 0 92%;
          -webkit-box-flex: 0;
                  flex: 0 0 92%;
          max-width: 92%;
      }
      .tag_video_grid.top.scroll > .col-md-3 {
          width: 300px;
      }
      .tag_video_grid.top.scroll .tag_video_grid_list {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
      }
      .tag_video_grid.top.scroll .tag_video_grid_list:after {
          top: 10px;
          -webkit-transform: none;
              -ms-transform: none;
                  transform: none;
      }
      .tag_video_grid.scroll .tag_video_grid_list.mb-4 {
          margin-bottom: 0 !important;
      }
      .tag_home_cat_list.scroll::-webkit-scrollbar,
      .tag_short_home.scroll::-webkit-scrollbar,
      .tag_video_grid.scroll::-webkit-scrollbar,
      .video-options::-webkit-scrollbar {
          opacity: 0;
      }
      .msg_row {
          height: auto !important;
      }
      .mobileleftpane,
      .mobilerightpane,
      .tag_short.swiper {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 60px;
          left: 0;
          padding: 0;
          z-index: 100;
      }
      .mobileleftpane {
          bottom: 0;
          z-index: 101;
      }
      .messages-sidebar .user_scroll {
          height: calc(var(--vh, 1vh) * 100 - 150px);
      }
      .pt_msg_joint {
          height: calc(var(--vh, 1vh) * 100 - 90px);
      }
      .tag_short.swiper {
          width: 100%;
          padding-bottom: 0;
          height: auto;
          background: #000;
      }
      .tag_short.swiper .videocontainer {
          max-width: 100%;
      }
      .tag_short.swiper .video-staand {
          border-radius: 0;
      }
      .tag_profile_cover {
          margin: 0 0 3rem !important;
      }
      .tag_profile_cover .cover-container,
      .tag_profile_cover .cover-container-2 {
          height: calc((100vw - 60px) / 2);
      }
      .tag_profile_cover .avatar-container img {
          width: 80px;
          height: 80px;
          border: 3px solid #fff;
      }
      .tag_profile_cover .info-container {
          text-align: center;
      }
      .tag_profile_cover .info-container > .gap-10 {
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
      }
      .tag_short_home_list {
          width: calc(100% / 3 - 6.7px);
      }
      .pt_uv_thumbs_innr {
          overflow-x: auto;
      }
      .ffmpeg_thumbs {
          overflow: visible;
      }
      .tag_wallet_balance .h1 {
          font-size: 2.5rem;
      }
      .tag_main_vid_details {
          padding: 0 15px !important;
      }
      .video-options {
          overflow-x: auto;
          max-width: calc(100% + 30px);
      }
      .video-options .dropdown {
          position: static;
      }
      .snackbar-container {
          top: 37px !important;
          min-width: 100% !important;
          left: 0;
          right: 0;
          transform: none;
          border-radius: 0
      }
      .snackbar-container::before {
          border-radius: 0;
      }
      .tag_live {
          margin-top: -60px;
          z-index: 100;
          position: relative;
      }
      .liv_vid_cont {
          max-height: calc(100vh - 60px);
          max-height: calc(var(--vh, 1vh) * 100 - 60px);
      }
      .btn {
          line-height: 38px;
          font-size: 95%;
      }
      .btn-main-outline {
          line-height: 36px;
      }
      .vid_mov_e_info li span {
          display: block;
      }
      .vid_mov_e_info li span:first-child {
          padding: 0 !important;
      }
      .tag_home_hashtag_list.scroll, .tag_home_chat_room_list.scroll {
          margin: 0 -15px;
          padding: 0 15px;
      }
      .tag_home_hashtag_list.scroll::-webkit-scrollbar, .tag_home_chat_room_list.scroll::-webkit-scrollbar {
          opacity: 0;
      }
      .tag_home_hashtag_list.scroll, .tag_home_chat_room_list.scroll {
      overflow-x: auto;
      -ms-flex-wrap: nowrap !important;
      flex-wrap: nowrap !important;
      }
  }

/* Small Screens (max-width: 767px) */
  @media (max-width: 767px) {
      [data-media-player][data-layout="video"]:not([data-fullscreen]) {
          border-radius: var(--video-border-radius, 0px) !important;
      }
      .tag_main_player {
          top: 60px;
      }
      .admin-info {
          width: 100%;
          left: 0;
          right: auto;
      }
      .streamListLogo, #waves, #waves svg {
          border-radius: 0;
      }
  
      .streamComments {
          width: 100% !important;
          padding-top: 0;
          right: 0 !important;
      }
  
      .admin-content {
          padding: 1.5rem 0.75rem 5rem;
      }
  
      .admin-header h2 {
          font-size: 1.25rem;
      }
  
      .admin-section h3 {
          font-size: 1rem;
      }
  
      .resources-grid,
      .signups-grid {
          grid-template-columns: 1fr;
      }
  
      .room-thumbnail img {
          width: 80px;
          height: 50px;
      }
  
      .room-title {
          font-size: 0.9rem;
      }
  
      .room-stats,
      .room-avatar-more {
          font-size: 0.8rem;
      }
  
      .room-avatar {
          width: 24px;
          height: 24px;
          margin-left: -8px;
      }
  
      .room-avatar:first-child {
          margin-left: 0;
      }
  
      #video-user-comments-stream .main-comment-data-sp {
          font-size: 13px;
      }
  
      .pt_sec_nav_cats {
          top: 60px;
          width: 100%;
          transform: translateY(0);
          transition: transform 0.3s ease-in-out;
      }
      .pt_sec_nav_slide_prnt .swiper-button-next {
        right: 25px;
      }
      .pt_sec_nav_cats.top-hidden {
          transform: translateY(-100%);
      }
  }

@media (orientation: landscape) and (max-width: 767px) {
    .tag_main_player {
      position: unset;
    }
  
    .streamComments.visible {
      height: 100dvh !important;
    }
  }

/* Ensure video chat sits in front of head_sidebar up to 767px */
  @media (max-width: 767px) {
      .video-chat-overlay {
          z-index: 100 !important;
          width: 100% !important;
      }
  }

/* Extra Small Screens (max-width: 600px) */
  @media (max-width: 600px) {
  
      #followModal h2 {
          font-size: 22px;
      }
  
      #followModal p {
          font-size: 14px;
      }
  }

@media (max-width: 575px) {
    .modal-dialog {
      margin: auto .5rem;
    }
  }

@media (max-width: 567px) {
      .tag_user_menu_links {
          gap: 40px 10px;
      }
      .tag_user_menu_links .content > span {
          width: 60px;
          height: 60px;
      }
      .tag_liked_grid .tag_short_home_list,
      .tag_video_grid > .col-md-3 {
          -ms-flex: 0 0 100%;
          -webkit-box-flex: 0;
                  flex: 0 0 100%;
          max-width: 100%;
      }
      .tag_short_home.scroll .tag_short_home_list {
          width: 130px;
      }
      .tag_sett_monetize h5.lead {
          font-size: 1.25rem;
      }
      .tag_profile_cover .cover-container,
      .tag_profile_cover .cover-container-2 {
          height: calc((100vw - 60px) / 1.8);
      }
      .ended_video .related-video-wrapper {
        max-width: 45% !important;
      }
  }

/* Extra Small Screens (max-width: 400px) */
  @media (max-width: 400px) {
  
      .toggle-button.chat-toggle {
          width: 100%;
          max-width: 200px;
      }
  
      .toggle-button.mode-toggle {
          width: 100%;
          max-width: 260px;
      }
  
      .toggle-button.mode-toggle .text {
          font-size: 13px;
      }
  }

@media (max-width: 400px) {
      .cv-sidebar-ad-container {
          padding: 10px;
      }
  }

/* ---------- Min-width breakpoints ---------- */
@media (min-width: 576px) {
    .modal-dialog {
      max-width: 560px;
    }
  }

@media (min-width: 768px) {
      .featured_list_side {
        display: flex !important;
        padding-bottom: 180px;
        flex-direction: column;
        margin-bottom: 150px;
      }
      .admin-info {
        border-radius: 20px 0 0 20px;
      }
      .head_sidebar .flex-md-column {
        height: 100%;
      }
      .featured_list_side_header {
        display: block !important;
        font-size: 10px;
        padding: 2px 8.5px 2px 41.5px;
      }
      .head_sidebar .flex-md-column hr {
        display: block !important;
        width: 80%;
        margin-left: 20px;
      }
      .featured_list_side .rounded-circle:hover {
        background: var(--border-light);
      }
      .featured_list_side .rounded-circle {
        width: 32px;
        height: 32px;
      }
      .head_sidebar_menu {
        top: 70px;
        overflow: scroll; /* Standard; works everywhere */
       -ms-overflow-style: none; /* For legacy IE/Edge */
        scrollbar-width: none; /* For Firefox */
      }
      .watch-content {
        margin-left: 0.5rem;
      }
}

/* ---------- Orientation & capability overrides ---------- */
@media (orientation: landscape) and (min-width: 768px) and (max-width: 1200px) {
    .streamComments.visible {
      height: 100dvh !important;
      width: 45dvw !important;
      margin-left: auto !important;
      border-radius: 0;
      left: 0 !important;
    }
  
    body:has(.streamComments.visible) .watch-content {
      width: 40dvw;
    }
  
    body:has(.streamComments.visible) .video-options {
      margin: 0 -15px;
      padding: 0 15px;
      overflow-x: auto;
      max-width: calc(100% + 30px);
      white-space: nowrap;
    }
  
    body:has(.streamComments.visible) .player-parent .streamListLogo .logoText {
      font-size: 3dvw;
    }
  
    .tag_main_player {
       position: inherit !important;
    }
  
    video {
       max-height: 100dvh;
    }
  }

/* Landscape tablet behavior (768px-1200px) - full height overlay like .streamComments */
  @media (orientation: landscape) and (min-width: 768px) and (max-width: 1200px) {
      .video-chat-overlay.visible {
          position: fixed !important;
          top: 0 !important;
          left: auto !important;
          right: 0 !important;
          bottom: 0 !important;
          width: 45dvw !important;
          height: 100dvh !important;
          margin-left: auto !important;
      }
      body:has(.video-chat-overlay.visible) .video-options {
          margin: 0 -15px;
          padding: 0 15px;
          overflow-x: auto;
          max-width: calc(100% + 30px);
          white-space: nowrap;
      }
  
      body:has(.video-chat-overlay.visible) .watch-content {
          width: 40dvw;
      }
  }

/* Desktop Styles */
  @media (min-width: 769px) {
      #messaging-modal .modal-dialog {
          max-width: 80%;
          width: 80%;
      }
  
      .messaging-settings-page {
          right: 0;
          left: auto;
          z-index: 10;
      }
  
      .messaging-settings-page .messaging-back-btn {
          display: flex !important;
      }
  
      .messaging-body.show-settings .messaging-sidebar,
      .messaging-body.show-settings .messaging-thread {
          transform: none;
      }
  
      .messaging-password-page {
          right: 0;
          left: auto;
          z-index: 11;
      }
  
      .messaging-password-page .messaging-back-btn {
          display: flex !important;
      }
  
      .messaging-body.show-password .messaging-sidebar,
      .messaging-body.show-password .messaging-thread,
      .messaging-body.show-password .messaging-settings-page {
          transform: none;
      }
  }

@media (min-width: 992px) {
      .liv_vid_cont {
          margin-left: 450px;
          width: calc(100% - 450px) !important;
      }
      .pt_live_controls,
      .tag_live_comments {
          max-width: 450px;
      }
      .tag_header .navbar-header {
          padding: 0 20px;
      }
      .chatArrow .dropdown-menu hr {
          display: none;
      }
  }

@media (min-width: 1024px) {
      .tag_short.swiper .videocontainer {
          max-width: none;
          width: calc(calc(calc(max(100vh, 615px) - 131px) / 1.77778) + 1px) !important;
          height: calc(calc(max(100vh, 615px) - 131px) + 1px) !important;
      }
      ::-webkit-scrollbar {
          width: 12px;
          height: 12px;
      }
      ::-webkit-scrollbar-thumb {
          background-color: #9b9b9b;
          border-radius: 12px;
          border: 4px solid var(--body-bg);
      }
      .play-list-cont_scroll::-webkit-scrollbar {
          width: 8px;
          height: 8px;
      }
      .play-list-cont_scroll::-webkit-scrollbar-thumb {
          background-color: rgb(255 255 255 / 50%);
          border-radius: 12px;
      }
      .play-list-cont_scroll::-webkit-scrollbar-button {
          display: block;
      }
  }

/* Large Screens (min-width: 1200px) */
  @media (min-width: 1200px) {
      .admin-content {
          padding: 1.5rem;
      }
  
      .rooms-grid {
          grid-template-columns: repeat(2, 1fr);
      }
  
      .chat-header-live {
          display: none;
      }
  
      #myTabContent .tag_home_cat_list {
          display: none !important;
      }
  
      media-player {
          height: 100%;
          max-height: 80vh;
      }
  }

@media (min-width: 1200px) {
      /* Chat input container */
      .chat-input-container {
          border: 1px solid #373738;
      }  .video-chat-close-btn {	  background: #2d3338;	  color: #fff;  }  .overlay-message .username, .overlay-message .message-text, .overlay-message .message-countdown, #video-chat-send-button svg {	  color: #fff;  }
  }

@media (min-width: 1201px) {
      .tag_watch_side_tab + hr {
          display: block;
      }
      .tag_vid_comment {
          position: sticky;
          top: 0;
          background: var(--body-bg);
      }
      body:not(.theater).play_stick .tag_watch_side .tag_video_grid.top.related {
          aspect-ratio: 2.1;
      }
      body:not(.theater) .sticky-container_sticky .sticky-container__video {
          width: calc(30% - 3rem);
          right: 0;
          top: 75px;
          position: fixed !important;
          z-index: 9;
          aspect-ratio: 16/9;
      }
  }

@media (hover: none) {
      .pt_sec_nav_slide > div a {
          pointer-events: none;
      }
  }