/* Live interaction panel. This replaces the previous full-screen mobile chat
   treatment with a compact comment surface that belongs to the live page. */
#chatRoom {
  background: #1a252a !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: #eaf2ed !important;
}

#chatRoom .chat-header {
  min-height: 42px;
  padding: 0 12px !important;
  background: #202e33 !important;
  border-bottom: 1px solid rgba(224, 240, 234, .1) !important;
  color: #f4f8f6 !important;
}

#chatRoom .chat-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
}

#chatRoom .chat-title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live-accent, #22c7a8);
  box-shadow: 0 0 0 3px rgba(34, 199, 168, .12);
}

#chatRoom .chat-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #9aac9f !important;
  font-size: 11px !important;
}

#chatRoom .chat-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d7a83a;
}

#chatRoom .chat-status.is-online {
  color: #80d9c6 !important;
}

#chatRoom .chat-status.is-online::before {
  background: var(--live-accent, #22c7a8);
}

#chatRoom .chat-messages {
  padding: 8px 12px !important;
  background: #1a252a !important;
  color: #dbe8e1 !important;
  scrollbar-color: rgba(143, 173, 163, .36) transparent;
}

#chatRoom .chat-messages::-webkit-scrollbar {
  width: 4px;
}

#chatRoom .chat-messages::-webkit-scrollbar-thumb {
  background: rgba(143, 173, 163, .36);
  border-radius: 4px;
}

#chatRoom .chat-empty {
  display: grid;
  min-height: 100%;
  place-items: center;
  color: #789087;
  font-size: 12px;
}

#chatRoom .chat-msg {
  margin: 3px 0 !important;
  color: #d9e5df;
  font-size: 13px;
  line-height: 1.6 !important;
}

#chatRoom .chat-nick {
  margin-right: 5px !important;
  font-weight: 700 !important;
}

#chatRoom .chat-text {
  color: #dce7e1 !important;
}

#chatRoom .chat-time {
  margin-left: 5px !important;
  color: #789087 !important;
  font-size: 10px !important;
}

#chatRoom .chat-msg.is-system .chat-text {
  color: #879b93 !important;
}

#chatRoom .chat-msg.is-self .chat-nick,
#chatRoom .chat-msg.is-self .chat-text {
  color: #ff939e !important;
}

#chatRoom .chat-color-0 .chat-nick { color: #72e7ce !important; }
#chatRoom .chat-color-1 .chat-nick { color: #ffd070 !important; }
#chatRoom .chat-color-2 .chat-nick { color: #8ed0ff !important; }
#chatRoom .chat-color-3 .chat-nick { color: #f6a2cc !important; }
#chatRoom .chat-color-4 .chat-nick { color: #c8b3ff !important; }
#chatRoom .chat-color-5 .chat-nick { color: #a6e38d !important; }
#chatRoom .chat-color-6 .chat-nick { color: #ffae78 !important; }
#chatRoom .chat-color-7 .chat-nick { color: #9ed7d0 !important; }

#chatRoom .chat-input-bar {
  gap: 8px !important;
  padding: 8px 10px !important;
  background: #202e33 !important;
  border-top: 1px solid rgba(224, 240, 234, .1) !important;
}

#chatRoom .chat-input {
  height: 36px;
  padding: 0 34px 0 10px !important;
  border: 1px solid rgba(224, 240, 234, .14) !important;
  border-radius: 6px !important;
  background: #152025 !important;
  color: #f0f7f3 !important;
  font-size: 13px !important;
}

#chatRoom .chat-input::placeholder {
  color: #71847b !important;
}

#chatRoom .chat-input:focus {
  border-color: rgba(34, 199, 168, .66) !important;
  background: #17252a !important;
  box-shadow: 0 0 0 3px rgba(34, 199, 168, .1);
}

#chatRoom .chat-send {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 6px !important;
  background: var(--live-accent, #22c7a8) !important;
  color: #092820 !important;
  box-shadow: none !important;
}

#chatRoom .chat-send:hover:not(:disabled),
#chatRoom .chat-send:focus-visible:not(:disabled) {
  background: #5cddc5 !important;
  outline: 0;
}

#chatRoom .chat-send:disabled {
  background: #314147 !important;
  color: #7a8b84 !important;
}

#chatRoom .chat-send svg {
  width: 17px;
  height: 17px;
}

#chatRoom .chat-counter {
  right: 55px !important;
  bottom: 11px !important;
  padding: 0 !important;
  background: transparent !important;
  color: #657a70 !important;
  font-size: 10px !important;
}

#chatRoom .chat-toast {
  border: 1px solid rgba(224, 240, 234, .16);
  border-radius: 6px !important;
  background: rgba(9, 16, 19, .94) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

@media (max-width: 1023px) {
  body {
    padding: 0 !important;
    overflow: auto !important;
    overscroll-behavior: auto !important;
  }

  body.chat-tab-active {
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  .chat-fixed-top {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    background: transparent !important;
  }

  .chat-tabs:not([hidden]) {
    position: fixed !important;
    top: calc(56.25vw + 48px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    border-width: 1px 0 !important;
    border-radius: 0 !important;
    z-index: 96 !important;
  }

  .chat-tabs:not([hidden]) .chat-tab {
    height: 38px !important;
    line-height: 38px !important;
  }

  #chatRoom[data-tab="chat"].is-active-tab {
    position: fixed !important;
    top: calc(56.25vw + 56px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 95 !important;
    border-radius: 0 !important;
  }

  #chatTabs:not([hidden]) ~ #chatRoom[data-tab="chat"].is-active-tab {
    top: calc(56.25vw + 94px) !important;
  }

  #chatRoom .chat-header {
    min-height: 40px;
    order: 1;
  }

  #chatRoom .chat-messages {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 7px 12px !important;
  }

  #chatRoom .chat-empty {
    display: none !important;
  }

  #chatRoom .chat-input-bar {
    order: 3;
    padding: 8px 9px !important;
    border-top: 1px solid rgba(224, 240, 234, .1) !important;
    border-bottom: 0 !important;
  }

  #chatRoom .chat-time {
    display: none;
  }
}

@media (min-width: 1024px) {
  body {
    padding-right: 334px !important;
  }

  #chatRoom[data-tab="chat"].is-active-tab {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    left: auto !important;
    width: 306px !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 99 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #chatTabs:not([hidden]) {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    width: 306px !important;
    height: 36px !important;
    margin: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    z-index: 100 !important;
  }

  #chatTabs:not([hidden]) .chat-tab {
    height: 36px !important;
    line-height: 36px !important;
  }

  #chatTabs:not([hidden]) ~ #chatRoom[data-tab="chat"].is-active-tab {
    top: 49px !important;
    border-top: 0 !important;
    border-radius: 0 !important;
  }
}