/*
 * Twitch Theme for CyTube
 * Based on Slate theme with custom Twitch-style modifications
 */

/* Import the base Slate theme first */
@import url('slate.css');

/* Userlist visibility control */
.userlist-hidden {
    display: none !important;
}

/* Twitch Theme Customizations */
.channel-emote-active {
  position: absolute;
  left: -40px;
  transition: left 0s ease-in-out;
}

/* Fix account dropdown profile picture to use cover instead of contain */
li.dropdown[style*="background"] {
  background-size: cover !important;
  background-position: center !important;
}

input.form-control[type="password"] {
  border-radius: 0.4rem;
  border-width: 2px !important;
  border-color: transparent !important;
  background: rgb(255 255 255/20%) !important;
  transition: background 100ms, border-color 100ms;
  color: #efeff1 !important;
}

input.form-control[type="password"]:focus {
  background: #000 !important;
  box-shadow: none !important;
  border-color: #a970ff !important;
}

.speech-bubble {
  background-color: white;
  border-radius: 4px;
  padding: 2px;
  color: #000;
}

.speech-bubble p {
  margin: 0;
  padding: 0;
  text-align: center;
}

.chat-msg-Lucaas_ .username,
.video-added-by-Lucaas_ strong,
.username-Lucaas_ {
  color: #33925d;
}

#userlist .userlist_afk {
  opacity: 0.4;
  filter: grayscale(50%);
}

/* Premium user rank styling */
#userlist .userlist_owner {
  color: #ff6b6b;
  font-weight: 600;
  position: relative;
}

#userlist .userlist_owner::before {
  content: "👑";
  margin-right: 6px;
  font-size: 12px;
}

#userlist .userlist_op {
  color: #00d4aa;
  font-weight: 600;
  position: relative;
}

#userlist .userlist_op::before {
  content: "⚔️";
  margin-right: 6px;
  font-size: 12px;
}

#userlist .userlist_sitemod {
  color: #9146ff;
  font-weight: 600;
  position: relative;
}

#userlist .userlist_sitemod::before {
  content: "🛡️";
  margin-right: 6px;
  font-size: 12px;
}

#userlist .userlist_guest {
  color: #adadb8;
  font-weight: 400;
}

/* User dropdown menu premium styling */
.user-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  z-index: 10000;
  margin-bottom: 4px;
  animation: dropdownFadeIn 0.2s ease;
  opacity: 1 !important;
  filter: none !important;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.user-dropdown strong {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
  display: block !important;
  text-align: center !important;
}

.user-dropdown .btn-group-vertical {
  width: 100% !important;
  gap: 4px !important;
  display: flex !important;
  flex-direction: column !important;
}

.user-dropdown .btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.user-dropdown .btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.user-dropdown .btn:active {
  background: rgba(255, 255, 255, 0.2) !important;
}

@-webkit-keyframes poll-notify {
  0% {
    background-color: #18181b
  }
  to {
    background-color: #383718
  }
}

@keyframes poll-notify {
  0% {
    background-color: #18181b
  }
  to {
    background-color: #383718
  }
}

body {
  overflow: hidden;
  font-family: Inter, Roobert, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #c8c8c8;
  background-color: #272b30;
  margin: 0;
  box-sizing: border-box
}

#mainpage {
  padding-top: 5rem
}

* {
  scrollbar-width: thin;
  scrollbar-color: #69696b #18181b
}

::-webkit-scrollbar {
  width: 12px
}

::-webkit-scrollbar-track {
  background: #18181b
}

::-webkit-scrollbar-thumb {
  background-color: #69696b;
  border-radius: 20px;
  border: 3px solid #18181b
}

#wrap {
  background: #0e0e10;
  width: calc(100vw + 24px);
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  position: fixed;
  left: 0;
  right: -24px;
  min-height: 100%;
  margin: 0 auto -60px;
  padding: 0 0 60px
}

.navbar-fixed-top {
  margin: 0;
  background: #18181b;
  background-image: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .9);
  border: 0
}

.navbar-inverse {
  background-image: linear-gradient(#18181b, #18181b 60%, #18181b) !important;
  filter: none
}

#wrap ul.nav>li:nth-of-type(2) {
  position: absolute;
  right: 1rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url(https://i.mopo.lol/badges/egg.png);
  background-size: contain;
  top: 1rem;
  font-size: 0
}

.navbar-nav>li:nth-of-type(2)>a {
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent !important;
  border: none !important;
  color: transparent !important;
  text-decoration: none !important;
}

.navbar-nav>li:nth-of-type(2)>a:hover,
.navbar-nav>li:nth-of-type(2)>a:focus,
.navbar-nav>li:nth-of-type(2)>a:active {
  background: transparent !important;
  color: transparent !important;
  text-decoration: none !important;
  outline: none !important;
}

.navbar-nav>li:nth-of-type(2)>a .caret {
  display: none;
}

#wrap ul.nav>li:nth-of-type(3) [onclick="javascript:showUserOptions()"] {
  font-size: 0;
  width: 30px;
  height: 30px;
  margin: 10px 0;
  background: none
}

#wrap ul.nav>li:nth-of-type(3) {
  order: 4
}

#wrap ul.nav {
  display: flex
}

#main #chatwrap {
  height: calc(100vh - 5rem);
  width: 340px;
  padding: 0;
  position: fixed;
  right: 0;
  flex-direction: column
}

#chatline,
#chatwrap .input-group .form-control {
  position: absolute;
  margin: 0 1rem;
  bottom: calc(2rem + 30px);
  width: 320px;
  min-height: 43px;
  border-radius: .5rem;
  border-width: 2px !important;
  border-color: transparent !important;
  background: #18181b !important;
  box-shadow: inset 0 0 0 1px rgba(222, 222, 227, 0.65) !important;
  transition: background 100ms, border-color 100ms, box-shadow 100ms;
  color: #efeff1 !Important;
  padding-right: 32px
}

#chatline:focus,
#chatwrap .input-group .form-control:focus {
  background: rgb(255 255 255/20%) !important;
  box-shadow: none !important;
  border-radius: .5rem;
}

#chatline::placeholder,
#chatwrap .input-group .form-control::placeholder {
  color: rgba(239, 239, 241, 0.4) !important;
}

#chatheader i {
  position: absolute;
  right: 1rem;
  top: 9px;
  width: 31px;
  height: 32px
}

button#userlisttoggle.pointer {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 5px;
  cursor: pointer;
  color: #efeff1;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

button#userlisttoggle.pointer:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

button#userlisttoggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Floating expand chat button */
button#chatexpandtoggle.pointer {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 5px;
  cursor: pointer;
  color: #efeff1;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 62px;
  right: 1rem;
  z-index: 1000;
}

button#chatexpandtoggle.pointer:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

button#chatexpandtoggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Center controls when chat is collapsed */
.chat-collapsed #controlsrow {
  justify-content: center;
}

.chat-collapsed #leftcontrols {
  text-align: center;
}

.chat-collapsed #rightcontrols {
  text-align: center;
}

/* Fix hardcoded widths when chat is collapsed */
.chat-collapsed #controlsrow,
.chat-collapsed #playlistrow #rightpane {
  width: 100vw !important;
}

/* Add padding to video controls when chat is collapsed */
.chat-collapsed #videocontrols {
  padding-right: 58px !important;
}

/* Fix embed responsive width when chat is collapsed */
.chat-collapsed #videowrap .embed-responsive::before {
  width: 100vw !important;
}

/* Fix videowrap max-width when chat is collapsed */
.chat-collapsed #main #videowrap {
  max-width: calc(100vw - 5%) !important;
}

/* Hide queue admin buttons by default */
.queue_entry .btn-group {
  display: none;
}

/* Chat images styling */
.chat-image-wrapper {
  overflow: hidden;
  max-width: 100%;
}

.chat-image {
  transition: transform 0.3s ease;
  transform-origin: center;
}

.chat-image-wrapper:hover .chat-image {
  transform: scale(1.1);
}

/* Image modal styling */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.image-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.image-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#image-modal-img, #image-modal-video {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Mobile responsive layout */
@media (max-width: 768px) {
  /* Target the main row that contains chatwrap and videowrap */
  #main.row {
    flex-direction: column !important;
    display: flex !important;
    width: 100% !important;
    margin: 0 !important;
  }
  
  /* Video should appear first (at top) */
  #videowrap.col-lg-7.col-md-7 {
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    flex: none !important;
  }
  
  /* Chat should appear second (below video) */
  #chatwrap.col-lg-5.col-md-5 {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    flex: none !important;
  }
  
  #controlsrow {
    order: 3;
    width: 100% !important;
  }
  
  #leftcontrols, #rightcontrols {
    width: 100% !important;
    flex-basis: 100% !important;
  }
  
  #playlistrow {
    order: 4;
    width: 100% !important;
  }
  
  #leftpane, #rightpane {
    width: 100% !important;
  }
  
  /* Hide userlist toggle on mobile - not needed */
  #userlisttoggle {
    display: none !important;
  }
  
  /* Always hide userlist on mobile */
  #userlist {
    display: none !important;
  }
  
  /* Chat header adjustments */
  #chatheader {
    justify-content: center !important;
    padding: 0 1rem !important;
  }
  
  /* Full width video on mobile */
  .embed-responsive {
    width: 100% !important;
  }
  
  /* Remove fixed positioning elements on mobile */
  .chat-controls-wrapper {
    position: static !important;
  }
  
  /* Chat input adjustments for mobile */
  #chatline,
  #chatwrap .input-group .form-control {
    position: static !important;
    margin: 1rem !important;
    bottom: auto !important;
    width: calc(100% - 2rem) !important;
  }
  
  /* Message buffer full width on mobile */
  #messagebuffer {
    width: 100% !important;
    max-height: 300px !important;
    overflow-y: auto !important;
  }
  
  /* Chat collapse button - hide on mobile as layout is already stacked */
  #chatcollapsetoggle {
    display: none !important;
  }
  
  /* Ensure Bootstrap columns don't interfere on mobile */
  .col-lg-5, .col-lg-7, .col-lg-12,
  .col-md-5, .col-md-7, .col-md-12 {
    width: 100% !important;
    flex: none !important;
  }
}

#chatheader,
#main #chatwrap {
  display: flex;
  background: #18181b
}

#chatheader {
  height: 50px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-width: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .1)
}

button#chatcollapsetoggle.pointer {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  border-radius: 4px;
  padding: 5px;
  cursor: pointer;
  color: #efeff1;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

button#chatcollapsetoggle.pointer:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

button#chatcollapsetoggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

#chatheader #usercount {
  flex: 1;
  text-align: center;
  color: #efeff1;
}

#chatheader #modflair {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

#userlist {
  font-weight: 500;
  position: absolute;
  right: 0;
  top: 50px;
  width: 100%;
  height: 79% !important;
  background: linear-gradient(rgba(14, 14, 16, 0.95) 70%, rgba(14, 14, 16, 0.8) 100%);
  backdrop-filter: blur(10px);
  z-index: 2;
  text-align: center;
  border-width: 0;
  padding: 8px 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

#userlist::-webkit-scrollbar {
  width: 6px;
}

#userlist::-webkit-scrollbar-track {
  background: transparent;
}

#userlist::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

#userlist::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

#userlist>.userlist_item {
  text-align: left;
  margin: 2px 8px;
  padding: 10px 14px;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14px;
  line-height: 1.2;
}

#userlist>.userlist_item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

#chatheader .label,
#emotelist .modal-backdrop,
#emotelist .modal-footer,
#emotelist .modal-header h4,
#footer,
#logout,
#logoutform span:last-of-type,
#resizewrap,
#wrap ul.nav:not(.dropdown-menu)>li:first-of-type,
.navbar-inverse .navbar-brand,
.navbar-nav>li:nth-of-type(2) b,
.timestamp {
  display: none
}

.navbar-nav>li:nth-of-type(2)>.dropdown-menu {
  left: unset;
  right: 0;
  top: 35px;
  min-height: 38px
}

.navbar-nav>li>.dropdown-menu {
  margin-top: 0;
  border: 0;
  border-radius: .6rem;
  background: #18181b;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .4), 0 0 4px rgba(0, 0, 0, .4)
}

#messagebuffer {
  position: relative;
  height: calc(100vh - 193px) !important;
  background: 0 0;
  padding: 0;
  padding-bottom: 0 !important;
  border: 0;
  overflow-x: hidden
}

.channel-emote {
  display: inline;
  max-height: 32px;
  height: max-content;
  margin-left: 4px;
  margin-bottom: 1.5px;
  margin-top: 1.5px;
  position: relative;
  vertical-align: middle;
  max-width: 200px
}

#welcome {
  overflow: hidden;
  clip-path: polygon(66px 0, 100%0, 100% 100%, 66px 100%)
}

#logoutform {
  margin-right: 50px
}

.navbar-nav>li>a {
  border-right: 1px solid rgba(0, 0, 0, .2);
  padding-top: 15px;
  padding-bottom: 15px
}

#controlsrow>div:not(#leftcontrols) button.btn {
  background: rgb(255 255 255/15%);
  border: 0;
  height: 30px;
  width: 40px
}

#plmeta {
  border: 0;
  border-left: 2px solid #a970ff;
  margin-top: 1rem;
  padding: 6px 12px;
  height: unset;
  background: #1d1c20;
  border-radius: 4px;
  border-top-left-radius: 0;
  border-top-right-radius: 0
}

#controlsrow {
  position: relative;
  display: flex;
  flex-flow: row-reverse
}

#controlsrow,
#playlistrow #rightpane {
  width: calc(100vw - 340px)
}

.container-fluid,
.row {
  margin: 0;
  padding: 0
}

#controlsrow #rightcontrols {
  margin-left: 22px;
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: space-between
}

#leftcontrols button.btn {
  border: 0
}

#controlsrow>#leftcontrols {
  width: 220px;
  position: absolute;
  left: 0;
  z-index: 1
}

#leftcontrols #emotelistbtn {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  margin: 0;
  height: 31px;
  width: 31px;
  background-color: rgb(255, 255, 255, 0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50%25' height='50%25' version='1.1' viewBox='0 0 20 20' x='0px' y='0px' class='ScIconSVG-sc-1bgeryd-1 ifdSJl' fill='white'%3E%3Cg%3E%3Cpath d='M7 11a1 1 0 100-2 1 1 0 000 2zM14 10a1 1 0 11-2 0 1 1 0 012 0zM10 14a2 2 0 002-2H8a2 2 0 002 2z' fill='white'%3E%3C/path%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0a6 6 0 11-12 0 6 6 0 0112 0z' clip-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  text-indent: -9999px;
  padding-left: 5px;
  padding-right: 5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent
}

#plcontrol {
  margin: auto
}

#currenttitle {
  display: block;
  max-width: calc(100% - 110px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 30px
}

#videowrap .embed-responsive::before {
  content: "";
  position: absolute;
  display: block;
  width: calc(100vw - 340px);
  height: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(1px);
  background: #000;
  border-bottom: 1px solid #272728;
  z-index: -1
}

#main #videowrap {
  display: flex;
  flex-flow: column;
  position: relative;
  padding: 0;
  max-width: calc(100vw - 340px)
}

#main {
  display: flex;
  justify-content: space-around;
  width: 100vw
}

#main #videowrap,
#playlistrow #rightpane {
  margin-right: 340px
}

#main #videowrap>p {
  position: relative;
  left: 0;
  margin: 14px 1rem 20px;
  order: 2;
  border: 0;
  background: 0 0;
  padding: 0;
  text-align: left;
  font-size: 15px;
  font-weight: 600
}

#chatheader,
#videowrap-header {
  border-radius: 5px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0
}

#videowrap .pointer {
  width: 45px;
  height: 30px;
  position: absolute;
  right: 0;
  font-size: 20px;
  line-height: 28px;
  text-align: center;
  color: #fff;
  border-radius: .4rem;
  background: #9147ff
}

#resize-video-smaller {
  margin-right: 48px
}

#videowrap .embed-responsive {
  overflow: visible
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0
}

.close {
  color: #fff;
  opacity: 1
}

.poll-notify {
  color: #fcf403;
  padding-left: 10px;
  font-size: 12pt;
  text-align: center;
  -webkit-animation: poll-notify .9s linear infinite alternate both;
  animation: poll-notify .9s linear infinite alternate both
}

.poll-notify::after {
  content: url(https://cdn.betterttv.net/emote/5f898862473f4802fe4703a6/1x)
}

.poll-notify .username {
  display: none
}

#chatwrap .form-control:hover,
#emotelist .pull-left input:hover {
  border-color: rgb(255 255 255/30%) !important
}

#chatwrap .form-control:focus,
#emotelist .pull-left input:focus {
  background: #000 !important;
  box-shadow: none;
  border-color: #a970ff !important
}

.linewrap span {
  font-size: 13.5px;
  color: #efeff1
}

.videolist .queue_entry.queue_active {
  padding: 16px 10px;
  background: #18181b !important
}

.videolist .queue_entry::before {
  content: "•";
  margin-right: 6px;
  order: 1
}

.videolist .queue_entry .qe_time::before {
  content: "["
}

.videolist .queue_entry .qe_time::after {
  content: "]"
}

.videolist .queue_entry {
  background: 0 0;
  border: 0;
  margin: 6px 0;
  display: flex;
  font-size: 1.3rem
}

.videolist .queue_entry>* {
  order: 3
}

.videolist .queue_entry .qe_time {
  order: 2;
  margin-right: 4px;
  pointer-events: none
}

.queue_entry>span:first-of-type {
  color: #686868
}

.videolist .queue_entry.queue_active::before {
  content: "🢒";
  margin-left: 1rem;
  font-size: 40px;
  line-height: 16px;
  color: #9147ff
}

a {
  color: #bf94ff;
  text-decoration: none;
  box-sizing: border-box;
  display: inline;
  white-space: normal
}

a:focus {
  color: #bf94ff;
  text-decoration: none;
  box-sizing: border-box;
  display: inline;
  white-space: normal
}

a:hover {
  color: #a670f9;
  outline: 0;
  box-sizing: border-box;
  white-space: normal;
  border-radius: 4px;
  background: rgba(255, 255, 255, .2);
  text-decoration: underline
}

.linewrap [class*=chat-msg-]:hover {
  background-color: #474749 !important;
  border-radius: 4px
}

.linewrap [class*=chat-msg-] {
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  padding: 0 2rem !important;
  margin: 5px 0 !important
}

.linewrap [class*=chat-msg-] .username,
button.close {
  cursor: pointer
}

.linewrap [class*=chat-msg-] .username:hover {
  text-decoration: underline
}

.nick-hover {
  background-color: #18181b
}

.nick-highlight {
  background-color: #4c2c31 !important
}

#controlsrow button.btn {
  border-radius: .4rem
}

#emotelist .modal-dialog {
  position: fixed;
  right: 1rem;
  bottom: 98px;
  width: 320px !important;
  min-width: 0 !important;
  max-height: calc(100vh - 48px);
  margin: unset
}

#emotelist .modal-content {
  box-shadow: 0 4px 8px rgba(0, 0, 0, .4), 0 0 4px rgba(0, 0, 0, .4);
  border: 0;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: #1f1f23
}

#emotelist .modal-header {
  position: absolute;
  height: 50px;
  width: 100%;
  border: 0;
  box-shadow: 0 1px 2px 0 rgb(0 0 0/50%);
  z-index: 1;
  pointer-events: none
}

.modal-header {
  padding: 15px;
  min-height: 16.43px
}

.modal-content {
  position: relative;
  outline: 0
}

#emotelist .modal-header .close {
  width: 30px;
  height: 30px;
  padding-bottom: 4px;
  color: #eee;
  opacity: 1;
  font-weight: 100;
  border-radius: .3rem;
  pointer-events: auto
}

button.close {
  padding: 0;
  background: 0 0;
  border: 0;
  -webkit-appearance: none
}

button.close:hover {
  color: #fff
}

#emotelist .modal-header .close:hover {
  background: rgba(255, 255, 255, .2)
}

#emotelist .pull-left input {
  height: 30px;
  width: 260px;
  border-radius: .4rem;
  border-width: 2px !important;
  border-color: transparent !important;
  background: rgb(255 255 255/20%) !important;
  transition: background 100ms, border-color 100ms;
  color: #efeff1 !Important
}

#emotelist .pull-right {
  position: absolute;
  top: 48px
}

.pull-right {
  float: right
}

#emotelist .pagination {
  position: absolute;
  display: flex;
  flex-flow: column;
  width: 47px;
  max-height: 360px;
  right: 0;
  top: 0;
  background: #26262c;
  margin: 0
}

.pagination {
  margin: 20px 0
}

.pagination>li {
  display: inline;
  height: 25.35px
}

.emotelist-paginator-container li.disabled a {
  background: #9147ff;
  color: #eee;
  outline: 0 !important
}

#emotelist .emote-preview-container {
  height: 38px;
  width: 38px;
  bottom: 0;
  border-radius: 2.5px;
  background: 0 0
}

#emotelist .emotelist-table {
  display: flex;
  width: 100%;
  margin-top: 70px;
  height: 290px;
  overflow-y: auto;
  background: 0 0
}

.emote-preview {
  max-width: 32px;
  max-height: 32px;
  cursor: pointer
}

.emotelist-paginator-container li a {
  width: 47px;
  height: 30px;
  padding: 6px 0;
  border: 0;
  margin: 0;
  background-image: linear-gradient(#fff, #fff) !important;
  background: 0 0 !important;
  color: #eee
}

#emotelist .modal-body {
  height: 100%;
  padding: 10px
}

.emotelist-paginator-container {
  position: absolute;
  display: flex;
  flex-flow: column;
  width: 47px;
  max-height: 360px;
  right: 0;
  top: 50px;
  background: #26262c;
  text-align: center
}

#chatbtn btn {
  display: block
}

/* Chat controls wrapper - matches chat width */
.chat-controls-wrapper {
  position: fixed;
  bottom: 0.9rem;
  right: 1rem;
  width: 320px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}


/* Chat buttons section (right side) */
.chat-buttons-section {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

/* Channel Points System */
.channel-points-section {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #fff;
}

.channel-points-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.3s ease;
  user-select: none;
}

.channel-points-display:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.channel-points-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.channel-points-amount {
  font-weight: 600;
  color: #adadb8;
}

.channel-points-reward {
  margin-left: 0.5rem;
  background: linear-gradient(135deg, #00d4aa, #00bfa5);
  color: #000;
  font-weight: bold;
  font-size: 12px;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  animation: pointsBounceIn 0.3s ease-out;
  box-shadow: 0 2px 8px rgba(0, 212, 170, 0.4);
  transition: transform 0.2s ease;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
}

.channel-points-reward:hover {
  transform: scale(1.05);
}

.channel-points-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  background: #1f1f23;
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 1002;
}

.channel-points-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f1f23;
}

.channel-points-display:hover .channel-points-tooltip {
  opacity: 1;
}

/* Gift box is now a sibling, so no hover interference */

@keyframes pointsBounceIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Gift Box System */
.channel-points-gift-box {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  background: #00db84;
  border-radius: 8px;
  display: none;
  cursor: pointer;
  z-index: 1001;
  pointer-events: auto;
}

.channel-points-gift-box:hover {
  transform: translateY(-50%);
  background: #04cc7d;
}

.channel-points-gift-box.visible {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.channel-points-gift-box svg {
  width: 24px;
  height: 24px;
  fill: #000000;
}

/* Removed giftBoxPulse animation for cleaner look */

@keyframes giftBoxAppear {
  0% {
    transform: translateY(-50%) scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: translateY(-50%) scale(1.2) rotate(-90deg);
  }
  100% {
    transform: translateY(-50%) scale(1) rotate(0deg);
    opacity: 1;
  }
}

.channel-points-gift-box.appearing {
  animation: giftBoxAppear 0.6s ease-out;
}

@keyframes giftBoxClaim {
  0% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-50%) scale(1.3);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}

.channel-points-gift-box.claiming {
  animation: giftBoxClaim 0.4s ease-in;
}

/* Points reward animation */
.gift-box-points-animation {
  position: absolute;
  color: #00d4aa;
  font-weight: 700;
  font-size: 18px;
  pointer-events: none;
  z-index: 1002;
  animation: pointsSlideUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

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

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .chat-controls-wrapper {
    position: static !important;
    width: 100% !important;
    padding: 0 1rem;
    margin-bottom: 1rem;
  }
  
  .channel-points-reward {
    margin-left: 0.5rem;
  }
}

/* Chat control buttons base styling */
.chat-control-btn {
  height: 30px;
  border: 0;
  border-radius: 0.4rem;
  font-weight: 600;
  font-size: 14px;
  text-shadow: none;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

/* Chat button styling */
#chatbtn.chat-control-btn {
  background: #9147ff;
  color: white;
  width: 50px;
}

#chatbtn.chat-control-btn:hover {
  background: #772ce8;
}

#chatbtn.chat-control-btn:active {
  background: #5c16c5;
}

/* Identity/gear button styling */
#chat-identity-btn.chat-control-btn {
  background: transparent;
  color: white;
  width: auto;
  min-width: 32px;
  border: none;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chat-identity-btn.chat-control-btn svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
}

#chat-identity-btn.chat-control-btn:hover {
  background: #4b5563;
}

#chat-identity-btn.chat-control-btn:active {
  background: #374151;
}

/* Chat button text styling */
.chat-btn-text {
  padding-bottom: 1px;
}

/* Chat Identity Modal Styling */
#chat-identity-modal .modal-dialog {
  width: 500px;
}

.chat-identity-section {
  margin-bottom: 20px;
}

.chat-identity-section h5 {
  color: #9147ff;
  margin-bottom: 10px;
  font-weight: 600;
}

.badge-selection-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.badge-option {
  border: 2px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s ease;
}

.badge-option:hover {
  border-color: #9147ff;
}

.badge-option input[type="radio"]:checked + .badge-preview,
.badge-option input[type="radio"]:checked ~ .badge-preview {
  color: #9147ff;
}

.badge-option input[type="radio"]:checked {
  accent-color: #9147ff;
}

.badge-preview {
  display: flex;
  align-items: center;
  gap: 8px;
}

.badge-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.color-selection-container {
  display: flex;
  align-items: center;
  gap: 15px;
}

#name-color-picker {
  width: 50px;
  height: 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.color-presets {
  display: flex;
  gap: 8px;
}

.color-preset {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid #ddd;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.color-preset:hover {
  transform: scale(1.1);
  border-color: #9147ff;
}

/* Grant Badge Modal Styling */
#grant-badge-modal .modal-dialog {
  width: 600px;
}

.grant-badge-section {
  margin-bottom: 20px;
}

.grant-badge-section h5 {
  color: #9147ff;
  margin-bottom: 15px;
  font-weight: 600;
}

.badge-description {
  font-size: 12px;
  color: #666;
  margin: 5px 0 0 0;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #999;
}

/* Badges Management Interface Styling */
.badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.badge-management-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 300px;
}

.badge-management-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.badge-management-info {
  flex-grow: 1;
}

.badge-management-desc {
  margin: 5px 0 0 0;
  font-size: 12px;
  color: #666;
}

.badge-management-actions {
  flex-shrink: 0;
}

.channel-badges-section, .user-badges-section {
  margin-bottom: 30px;
}

.channel-badges-section h5, .user-badges-section h5 {
  color: #9147ff;
  margin-bottom: 15px;
  font-weight: 600;
}

.badge-table-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-right: 8px;
  vertical-align: middle;
}

.badge-grants-table {
  margin-top: 15px;
}

.badge-grants-search {
  margin-right: 15px;
}

#badge-filter {
  min-width: 150px;
}

/* Chat Badge Display */
.chat-user-badge {
  height: calc(1em + 2px); /* 2px bigger than username text */
  width: auto;
  object-fit: contain;
  margin-right: 6px;
  vertical-align: middle;
  display: inline-block;
}

#usercount {
  flex-grow: 0
}

.glyphicon-chevron-down {
  background: url(https://media.discordapp.net/attachments/586437683153338396/1025979933572485190/v.png)
}

.glyphicon-chevron-down:hover {
  background: none
}

.glyphicon-chevron-down::before,
.glyphicon-chevron-down:hover::before,
.glyphicon-chevron-right::before,
.glyphicon-chevron-right:hover::before {
  content: ""
}

.glyphicon-chevron-right {
  background: url(https://media.discordapp.net/attachments/586437683153338396/1025980306282520627/v3.png)
}

.glyphicon-chevron-right:hover {
  background: url(https://media.discordapp.net/attachments/586437683153338396/1025980183141941288/v2.png)
}

#guestlogin .input-group-addon,
.nav.navbar-nav .dropdown .dropdown-toggle {
  display: none
}

/* Show only the Account dropdown (2nd list item) */
.nav.navbar-nav li:nth-child(2).dropdown .dropdown-toggle {
  display: block !important;
}

/* Make login/register text links visible on all screen sizes */
.visible-md {
  display: block !important;
  visibility: visible !important;
}

.visible-md #loginform.navbar-text.pull-right {
  display: block !important;
  visibility: visible !important;
}

/* Ensure the login and register links are visible */
#loginform .navbar-link {
  display: inline !important;
  visibility: visible !important;
}

button#chatbtn.btn.btn-default.btn-block {
  visibility: hidden
}

/* Chat customizations for showing username on each message */
.linewrap [class*=chat-msg-] .username {
  display: inline !important;
  margin-right: 0.5rem !important;
  font-weight: 600 !important;
}

/* Force hide avatar backgrounds for non-logged-in users */
body:not(.user-logged-in) nav li,
body:not(.user-logged-in) .navbar li,
body:not(.user-logged-in) .navbar-nav li,
body:not(.user-logged-in) .navbar-right,
body:not(.user-logged-in) .navbar-form,
body:not(.user-logged-in) #loginform {
  background: none !important;
  background-image: none !important;
  background-size: auto !important;
}

/* Hide drinkbar by default to prevent layout gaps */
#drinkbar, #drinkbarwrap {
  display: none !important;
}

/* Password overlay styling */
#password-overlay {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#password-overlay input:focus {
  outline: none;
  border-color: #9147ff;
  box-shadow: 0 0 5px rgba(145, 71, 255, 0.3);
}

#password-overlay button:hover {
  background: #7c3aed !important;
}

/* Mobile responsiveness */
@media (max-width:768px) {
  #controlsrow,
  #playlistrow #rightpane {
    width: 100% !important;
    background: #000 !important;
    padding: 12px !important;
    display: none !important
  }

  #playlistrow #rightpane {
    display: block !important
  }

  #controlsrow>#leftcontrols,
  #controlsrow>#rightcontrols {
    width: 100% !important;
    position: relative !important;
    left: unset !important;
    z-index: 99999 !important;
    display: block !important;
    flex-flow: unset !important;
    clear: both
  }

  div#rightcontrols>div {
    width: 100% !important;
    display: inline-block !important;
    margin-bottom: 0 !important;
    margin-top: 25px !important
  }

  #main #videowrap {
    display: flex !important;
    flex-flow: column !important;
    position: relative;
    padding: 0;
    max-width: unset !important
  }

  #main #videowrap,
  #playlistrow #rightpane {
    margin-right: unset !important
  }

  #main {
    display: block !important;
    justify-content: space-around;
    width: 90% !important;
    margin: 0 auto !important
  }

  #main #videowrap>p {
    margin: 5px !important;
    background: #000 !important;
    padding: 10px !important
  }

  #main #chatwrap {
    position: relative !important;
    height: calc(100vh - 39rem) !important
  }

  #wrap {
    right: unset !important;
    width: 100% !important;
    margin: unset !important;
    padding: unset !important
  }

  #videowrap .pointer {
    margin-top: 10px
  }

  #messagebuffer {
    height: calc(100vh - 550px) !important
  }

  div#controlsrow {
    position: absolute !important;
    right: 0 !important;
    top: 353px !important
  }

  .settingss {
    position: absolute;
    font-size: 17px;
    z-index: 9999999 !important;
    top: 317px !important;
    left: 38px !important;
    padding: 4px 10px;
    background: #000;
    border-radius: 10px
  }

  #controlsrow.toogleclass {
    display: block !important
  }

  #wrap ul.nav>li:nth-of-type(2) {
    right: 4rem !important;
    top: 6rem !important
  }
}

#guestlogin {
  margin-top: 56px
}

#guestlogin .input-group-addon {
  margin: 7px 0 0 1rem;
  border: 0;
  font-size: 0;
  display: flex;
  flex-flow: row wrap;
  transform: translateY(-7px);
  border-left: 2px solid #a970ff;
  padding: 4px 12px;
  background: #1d1c20;
  width: 200px
}

#guestlogin .input-group-addon::before {
  content: "Guest Login";
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 3px
}

#guestlogin .input-group-addon::after {
  content: "Enter a nickname to chat!";
  font-size: 12px
}

/* Additional hover effects */
#controlsrow>div:not(#leftcontrols) button.btn:hover {
  background-color: #3f3f40
}

#videowrap .pointer:hover {
  background-color: #772ce8
}

.navbar-nav>li>a:hover {
  background-image: linear-gradient(#3f3f40, #3f3f40)
}

#leftcontrols #emotelistbtn:hover {
  background-color: #6c6c6e
}

#leftcontrols button.btn:hover,
li:hover {
  background: #3f3f40
}

.pagination>li.active>a,
.pagination>li.active>span,
.pagination>li>a:hover,
.pagination>li>span:hover {
  background-image: -webkit-linear-gradient(#4c4c4f, #4c4c4f);
  background-image: -o-linear-gradient(#4c4c4f, #4c4c4f);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#4c4c4f), to(#4c4c4f));
  background-image: linear-gradient(#4c4c4f, #4c4c4f)
}

.pagination>li.disabled {
  background-color: #363640;
  height: 25.35px;
  text-align: center
}

.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
  color: #fff;
  cursor: pointer
}

.pagination>li.disabled:hover {
  background-color: #383843
}

#emotelist .emote-preview-container:hover {
  background-color: #4c4c4f
}

.btn-default {
  background-image: linear-gradient(#26262c, #26262c);
  border-radius: 3px
}

.btn-default:hover {
  background-image: linear-gradient(#4c4c4f, #4c4c4f)
}

.btn-default:focus {
  outline: 0 !important
}

input.form-control[type=text] {
  border-radius: .4rem;
  border-width: 2px !important;
  border-color: transparent !important;
  background: rgb(255 255 255/20%) !important;
  transition: background 100ms, border-color 100ms;
  color: #efeff1 !important
}

input.form-control[type=text]:focus {
  background: #000 !important;
  box-shadow: none !important;
  border-color: #a970ff !important
}

input.form-control[type=text]:hover {
  border-color: rgb(255 255 255/30%)
}

.h3,
h3 {
  font-weight: 600 !important;
  text-align: center;
  font-size: 16px;
  margin-top: 0
}

.option .btn-default:focus {
  border-color: #9147ff !important;
  outline: 0 !important;
  color: #9147ff;
  font-weight: 800 !important
}

.well:not(.motd-container) {
  position: fixed;
  right: 10px;
  top: 100px;
  border-color: #9147ff;
  border-width: 1px;
  border-radius: 10px;
  max-width: 100px;
  min-width: 320px
}

.motd-container {
  display: none !important;
}

/* Hide background MOTD completely */
#motdcollapse {
  display: none !important;
}

#motdcollapse.in, 
#motdcollapse.show {
  display: none !important;
}

/* Hide the old MOTD wrap element - keep only floating modal */
#motdwrap {
  display: none !important;
}

.motd-content {
  color: #dcddde;
  line-height: 1.5;
  word-wrap: break-word;
}

.motd-content h1, .motd-content h2, .motd-content h3 {
  color: #9147ff;
  margin-top: 0;
}

.motd-content p {
  margin-bottom: 10px;
}

.motd-content ul, .motd-content ol {
  margin-left: 20px;
  margin-bottom: 10px;
}

.motd-content a {
  color: #9147ff;
  text-decoration: none;
}

.motd-content a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.motd-content code {
  background: #36393f;
  color: #f47fff;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}

.motd-content pre {
  background: #36393f;
  color: #dcddde;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
  margin: 10px 0;
}

.motd-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
}

.motd-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: transparent !important;
}

.motd-btn svg path,
.motd-btn svg circle {
  fill: white !important;
  stroke: white !important;
}

/* Button grouping styles */
.chat-button-group {
  display: flex;
  gap: 2px;  /* Small gap between MOTD and Identity buttons */
}

/* Make MOTD button match identity button exactly */
.motd-btn {
  width: 30px !important;
  height: 30px !important;
  padding: 4px !important;
  font-size: 14px !important;
  font-weight: normal !important;  /* Less bold */
}

/* Ensure identity button stays the same */
.identity-btn {
  width: 30px !important;
  height: 30px !important;
  padding: 4px !important;
}

/* Floating MOTD Modal Styles */
.motd-floating-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.motd-floating-content {
  background: #2f3136;
  border: 2px solid #4a4a4a;
  border-radius: 12px;
  max-width: 600px;
  max-height: 80vh;
  width: 90%;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.motd-floating-header {
  background: #36393f;
  padding: 15px 20px;
  border-bottom: 1px solid #4a4a4a;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.motd-title {
  color: #dcddde;
  font-weight: bold;
  font-size: 16px;
}

.motd-close-btn {
  background: none;
  border: none;
  color: #dcddde;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.motd-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.motd-floating-body {
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.motd-floating-body .motd-content {
  color: #dcddde;
  line-height: 1.6;
  font-size: 14px;
}

.motd-floating-body .motd-content h1,
.motd-floating-body .motd-content h2,
.motd-floating-body .motd-content h3 {
  color: #ffffff;
  margin: 16px 0 12px 0;
}

.motd-floating-body .motd-content h1 {
  font-size: 20px;
  border-bottom: 2px solid #4a4a4a;
  padding-bottom: 8px;
}

.motd-floating-body .motd-content h2 {
  font-size: 18px;
}

.motd-floating-body .motd-content h3 {
  font-size: 16px;
}

.motd-floating-body .motd-content p {
  margin-bottom: 12px;
}

.motd-floating-body .motd-content ul,
.motd-floating-body .motd-content ol {
  margin: 12px 0 12px 20px;
}

.motd-floating-body .motd-content li {
  margin-bottom: 6px;
}

.motd-floating-body .motd-content a {
  color: #9147ff;
  text-decoration: none;
}

.motd-floating-body .motd-content a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.motd-floating-body .motd-content code {
  background: #36393f;
  color: #f47fff;
  padding: 3px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
}

.motd-floating-body .motd-content pre {
  background: #36393f;
  color: #dcddde;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 12px 0;
  border-left: 4px solid #4a4a4a;
}

.motd-floating-body .motd-content blockquote {
  border-left: 4px solid #4a4a4a;
  background: #36393f;
  padding: 12px 16px;
  margin: 12px 0;
  font-style: italic;
}

/* Additional heading styles */
.motd-floating-body .motd-content h4,
.motd-floating-body .motd-content h5,
.motd-floating-body .motd-content h6 {
  color: #ffffff;
  margin: 14px 0 10px 0;
}

.motd-floating-body .motd-content h4 {
  font-size: 15px;
}

.motd-floating-body .motd-content h5 {
  font-size: 14px;
}

.motd-floating-body .motd-content h6 {
  font-size: 13px;
  color: #b9bbbe;
}

/* Horizontal rules */
.motd-floating-body .motd-content hr {
  border: none;
  border-top: 2px solid #4a4a4a;
  margin: 24px 0;
}

/* Text styling */
.motd-floating-body .motd-content del {
  color: #72767d;
  text-decoration: line-through;
}

.motd-floating-body .motd-content sub,
.motd-floating-body .motd-content sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
}

.motd-floating-body .motd-content sub {
  bottom: -0.25em;
}

.motd-floating-body .motd-content sup {
  top: -0.5em;
}

.motd-floating-body .motd-content ins {
  text-decoration: underline;
  background: rgba(255, 255, 255, 0.1);
  color: inherit;
}

/* Color code visualization */
.motd-floating-body .motd-content code.color-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.motd-floating-body .motd-content .color-preview {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #4a4a4a;
}

/* Task lists */
.motd-floating-body .motd-content ul.task-list {
  list-style: none;
  margin-left: 0;
}

.motd-floating-body .motd-content .task-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}

.motd-floating-body .motd-content .task-list-item input[type="checkbox"] {
  margin-top: 4px;
  pointer-events: none;
}

/* Alerts */
.motd-floating-body .motd-content .alert {
  padding: 12px 16px;
  margin: 16px 0;
  border-radius: 6px;
  border-left: 4px solid;
}

.motd-floating-body .motd-content .alert-title {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 14px;
}

.motd-floating-body .motd-content .alert-note {
  background: rgba(9, 105, 218, 0.1);
  border-left-color: #0969da;
  color: #dcddde;
}

.motd-floating-body .motd-content .alert-tip {
  background: rgba(26, 127, 55, 0.1);
  border-left-color: #1a7f37;
  color: #dcddde;
}

.motd-floating-body .motd-content .alert-important {
  background: rgba(130, 80, 223, 0.1);
  border-left-color: #8250df;
  color: #dcddde;
}

.motd-floating-body .motd-content .alert-warning {
  background: rgba(157, 106, 3, 0.1);
  border-left-color: #9d6a03;
  color: #dcddde;
}

.motd-floating-body .motd-content .alert-caution {
  background: rgba(218, 54, 51, 0.1);
  border-left-color: #da3633;
  color: #dcddde;
}

/* Footnotes */
.motd-floating-body .motd-content .footnote-ref a {
  color: #9147ff;
  text-decoration: none;
  font-weight: bold;
}

.motd-floating-body .motd-content .footnote-ref a:hover {
  text-decoration: underline;
}

.motd-floating-body .motd-content .footnote {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid #4a4a4a;
  font-size: 13px;
  color: #b9bbbe;
}

.motd-floating-body .motd-content .footnote sup {
  font-weight: bold;
  margin-right: 6px;
}

/* Override global li:hover styles for MOTD content */
.motd-floating-body .motd-content li:hover,
.motd-floating-body .motd-content .task-list-item:hover {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

div.well.muted {
  border-color: #3a3f44 !important
}

span.label.label-default.pull-right {
  display: none
}

.btn-danger {
  background-image: linear-gradient(#9147ff, #9147ff);
  border-width: 0;
  outline: 0 !important
}

#chatwrap #chatbtn:hover,
.btn-danger:hover {
  background-image: linear-gradient(#772ce8, #772ce8)
}

#pmbar {
  /* Container for PM panels - positioned at bottom right with chat width offset */
  position: fixed;
  bottom: 0;
  right: 360px; /* 340px chat width + 20px buffer */
  z-index: 1000;
  width: auto;
  height: auto;
}

.pm-panel,
.pm-panel-placeholder {
  float: right;
  margin-left: 5px; /* Space between panels */
  background-color: #1f1f23;
  clear: none;
  border: 1px solid #36363a;
  border-radius: 8px 8px 0 0; /* Rounded top corners only */
}

.pm-buffer {
  padding: 0 !important;
}

.pm-buffer .pm-msg {
  padding: 0 !important;
  margin: 2px 0;
}

/* More specific PM message padding overrides */
.pm-panel .panel-body {
  padding: 5px !important;
}

.pm-panel .pm-buffer * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* PM panel header styling */
.pm-panel .panel-heading {
  border-radius: 7px 7px 0 0; /* Rounded top corners, slightly smaller radius to fit inside border */
  border-bottom: 1px solid #36363a;
  background-color: #2a2a2e !important;
}

/* PM panel body styling */
.pm-panel .panel-body {
  border-radius: 0 0 0 0; /* Square bottom corners */
  border-top: none; /* Remove duplicate border */
}

/* PM panel purple highlight for new messages */
.pm-panel.panel-primary {
  border-color: #772ce8 !important;
}

.pm-panel.panel-primary .panel-heading {
  background-color: #772ce8 !important;
  border-bottom-color: #772ce8 !important;
}

/* Ensure user colors take priority in userlist */
.userlist_item span[style*="color"] {
  color: inherit !important;
}

/* Ensure user colors work in PM messages */
.pm-buffer span[style*="color"] {
  color: inherit !important;
}

.panel-default>.panel-heading {
  background-color: #1f1f23;
  border-color: #36363a;
  border-width: 3px
}

.panel-primary>.panel-heading {
  color: #fff;
  background-color: #9147ff;
  border-color: rgba(0, 0, 0, .6)
}

div.pm-buffer.linewrap {
  margin-left: 10px;
  margin-right: 0
}

.server-server {
  background-color: #1e90ff;
}

/* Profile Card Styles - SevenTV Twitch Style */
.profile-card {
    position: fixed;
    background: #1e1e20;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    min-width: 350px;
    max-width: 450px;
    width: auto;
    min-height: auto;
    color: #efeff1;
    font-family: inherit;
    user-select: none;
    display: grid;
    grid-template-areas: "header" "content";
    grid-template-rows: auto auto;
}

.profile-card-header {
    grid-area: header;
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-areas: "identity" "states";
    position: relative;
}

.profile-card-identity {
    cursor: move;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto auto 1fr;
    grid-auto-flow: row;
    row-gap: 0.25rem;
    grid-template-areas:
        "avatar usertag"
        "avatar paint"
        "avatar badges";
    grid-area: identity;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    padding: 1rem;
    position: relative;
}

.profile-card-identity::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8rem;
    opacity: 0.68;
    background-color: rgba(30, 30, 32, 0.8);
    border-radius: 8px 8px 0 0;
}

.profile-card-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: #efeff1;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 16px;
    z-index: 10;
}

.profile-card-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.profile-card-avatar {
    display: grid;
    align-content: center;
    justify-content: center;
    padding: 1rem;
    grid-area: avatar;
    height: 8rem;
    width: 8rem;
    z-index: 2;
}

.profile-card-avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}

.profile-card-usertag-container {
    grid-area: usertag;
    z-index: 2;
    display: block;
    padding-top: 1rem;
    width: fit-content;
    max-width: 21rem;
    margin-bottom: -0.25rem;
}

.profile-card-rank {
    font-size: 8px;
    font-weight: 600;
    padding: 1px 3px;
    border-radius: 2px;
    border: 1px solid;
    margin-bottom: 2px;
    display: inline-block;
}

.profile-card-rank.rank-founder {
    background-color: rgba(255, 215, 0, 0.2);
    color: #ffd700;
    border-color: #ffd700;
}

.profile-card-rank.rank-owner {
    background-color: rgba(0, 123, 255, 0.2);
    color: #007bff;
    border-color: #007bff;
}

.profile-card-rank.rank-admin {
    background-color: rgba(138, 43, 226, 0.2);
    color: #8a2be2;
    border-color: #8a2be2;
}

.profile-card-rank.rank-moderator {
    background-color: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border-color: #28a745;
}

.profile-card-username {
    font-size: 18px;
    font-weight: bold;
    color: #efeff1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: -0.25rem;
}

.profile-card-muted {
    font-size: 12px;
    background-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid #dc3545;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.profile-card-badges {
    grid-area: badges;
    display: flex;
    flex-wrap: wrap;
    max-width: 22rem;
    gap: 0.5rem;
    align-self: start;
    z-index: 2;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.profile-card-badge {
    cursor: default;
}

/* Profile card channel points - inline style */
.profile-card-points {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.profile-card-points::before {
    content: '•';
    color: #adadb8;
    margin-right: 4px;
}

.profile-card-points-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.profile-card-points-amount {
    color: #00d4aa;
    font-weight: 600;
}

.profile-card-badge img {
    width: 18px;
    height: 18px;
    border-radius: 2px;
}

.profile-card-info {
    grid-area: content;
    padding: 0px 12px 0px 12px;
    cursor: default;
    position: relative;
}

/* Removed dividing line for cleaner look */

.profile-card-bio {
    margin-top: 7px;
    margin-bottom: 12px;
    color: #adadb8;
    line-height: 1.4;
}

.profile-card-metrics {
    font-size: 13px;
    color: #adadb8;
}


.profile-card-metrics p {
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-card-metrics svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.profile-card.dragging {
    cursor: grabbing;
}

.profile-card.dragging .profile-card-identity {
    cursor: grabbing;
}

/* Make usernames in chat clickable */
.linewrap [class*=chat-msg-] .username.chat-msg-username {
    cursor: pointer;
    text-decoration: none !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.linewrap [class*=chat-msg-] .username.chat-msg-username:hover {
    opacity: 0.8;
    text-decoration: none !important;
}
/* Simple Responsive Fix */
@import url("../simple-responsive.css");