/* Black Six chat final overrides. */

#chat-modal .bs-chat-sender {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 100% !important;
  width: auto !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: top !important;
}

#chat-modal .bs-chat-role-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#chat-modal .bs-chat-role-pill::before {
  content: "|" !important;
  margin-right: 6px !important;
  color: rgba(244, 212, 140, .62) !important;
  font-weight: 800 !important;
}

#chat-modal .chat-bubble.is-user .chat-bubble-meta::after,
#chat-modal .chat-bubble.is-vip .chat-bubble-meta::after {
  content: " \2713\2713" !important;
  color: #25f4df !important;
}

#chat-modal .chat-input-area #chat-submit-btn i {
  display: none !important;
}

#chat-modal .chat-input-area #chat-submit-btn::before {
  content: "\f1d8" !important;
  display: block !important;
  font-family: "Font Awesome 6 Free" !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateX(-1px) !important;
}

#chat-modal.is-voice-recording .chat-input-area {
  display: none !important;
}

#chat-modal .bs-voice-rec-bar {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

#chat-modal .bs-chat-avatar {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#chat-modal .bs-chat-message-row.is-mine .bs-chat-avatar {
  display: flex !important;
}

#chat-modal .bs-chat-avatar.has-photo,
#chat-modal .bs-chat-avatar.has-default-photo {
  position: relative !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  overflow: visible !important;
}

#chat-modal .bs-chat-avatar.is-online,
#chat-modal .bs-chat-message-row.is-online-last .bs-chat-avatar {
  border: 2px solid #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .16), 0 0 18px rgba(34, 197, 94, .28) !important;
}

#chat-modal .bs-chat-avatar.is-online::after,
#chat-modal .bs-chat-message-row.is-online-last .bs-chat-avatar::after {
  content: "" !important;
  position: absolute !important;
  right: -1px !important;
  bottom: -1px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  border: 2px solid #09090b !important;
  box-shadow: 0 0 10px rgba(34, 197, 94, .8) !important;
}

#chat-modal .chat-bubble.is-online-last-bubble {
  border-color: rgba(34, 197, 94, .56) !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, .34), 0 10px 28px rgba(34, 197, 94, .08) !important;
}

@media (min-width: 1025px) {
  #chat-modal.modal-shell {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    background: #09090b !important;
    overflow: hidden !important;
  }

  #chat-modal[hidden] { display: none !important; }
  #chat-modal .modal-backdrop { display: none !important; }

  #chat-modal .bs-social-chat-card.chat-modal-card {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #09090b !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #chat-modal .bs-social-chat-head.chat-modal-head {
    flex: 0 0 64px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 10px 16px !important;
    background: rgba(16, 22, 31, .96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  }

  #chat-modal .bs-chat-back-btn,
  #chat-modal .chat-modal-dismiss {
    flex: 0 0 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .06) !important;
    color: rgba(247, 242, 232, .78) !important;
  }

  #chat-modal .bs-social-title-wrap {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  #chat-modal .bs-social-logo {
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  #chat-modal .bs-social-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #chat-modal .bs-social-chat-head h2,
  #chat-modal .bs-social-chat-head p {
    max-width: calc(100vw - 260px) !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #chat-modal .bs-chat-head-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
  }

  #chat-modal .chat-modal-dismiss {
    display: none !important;
  }

  #chat-modal .bs-chat-context-row {
    flex: 0 0 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 0 16px !important;
    background: rgba(8, 18, 22, .92) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
  }

  #chat-modal .chat-thread {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 20px clamp(22px, 4vw, 76px) 26px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #09090b !important;
    background-image: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  #chat-modal .bs-chat-message-row {
    display: flex !important;
    align-items: flex-end !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #chat-modal .bs-chat-message-row.is-mine,
  #chat-modal .bs-chat-message-row.is-vip-row.is-mine {
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
  }

  #chat-modal .bs-chat-message-row.is-admin-row,
  #chat-modal .bs-chat-message-row.is-vip-row:not(.is-mine) {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }

  #chat-modal .bs-bubble-col {
    flex: 0 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    max-width: min(68%, 760px) !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  #chat-modal .bs-bubble-col.mine,
  #chat-modal .bs-chat-message-row.is-mine .bs-bubble-col,
  #chat-modal .bs-chat-message-row.is-vip-row.is-mine .bs-bubble-col {
    align-items: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  #chat-modal .bs-bubble-col > .chat-bubble,
  #chat-modal .chat-bubble:not(.is-system):not(.bs-vip-lock-panel):not(.bs-vip-status-card) {
    position: relative !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 96px !important;
    padding: 10px 14px 24px !important;
    border-radius: 18px !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    overflow: visible !important;
  }

  #chat-modal .chat-bubble:not(.is-system) p {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #chat-modal .bs-chat-message-row.is-mine .chat-bubble,
  #chat-modal .bs-chat-message-row.is-vip-row.is-mine .chat-bubble {
    color: #fff !important;
    background: #3b82f6 !important;
    border-bottom-right-radius: 4px !important;
  }

  #chat-modal .bs-chat-message-row.is-vip-row:not(.is-mine) .chat-bubble {
    color: #e4e4e7 !important;
    background: #27272a !important;
    border-bottom-left-radius: 4px !important;
  }

  #chat-modal .bs-chat-message-row.is-admin-row .chat-bubble {
    color: #f4e4a8 !important;
    background: #1c1a10 !important;
    border: 1px solid rgba(244, 212, 140, .25) !important;
    border-bottom-left-radius: 4px !important;
  }

  #chat-modal .chat-bubble::before,
  #chat-modal .chat-bubble::after {
    display: none !important;
    content: none !important;
  }

  #chat-modal .bs-chat-avatar {
    flex: 0 0 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    align-self: flex-end !important;
  }

  #chat-modal .chat-input-area {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 66px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    background: rgba(8, 14, 22, .98) !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    border-radius: 0 !important;
  }

  #chat-modal .chat-input-area textarea {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 110px !important;
    padding: 11px 16px !important;
    border-radius: 22px !important;
    font-size: 15px !important;
  }
}
@media (max-width: 1024px), (min-width: 1025px) and (max-width: 1366px) and (pointer: coarse) and (hover: none) {
  #chat-modal .bs-chat-role-pill::before {
    content: none !important;
    display: none !important;
  }

  html.bs-mobile-chat-open,
  body.bs-mobile-chat-open {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  #chat-modal.modal-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    display: flex !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    background: #09090b !important;
    overflow: hidden !important;
  }

  #chat-modal[hidden] {
    display: none !important;
  }

  #chat-modal .modal-backdrop,
  #chat-modal .bs-chat-live-pill,
  #chat-modal .bs-chat-tabs,
  #chat-modal .chat-modal-dismiss,
  #chat-modal .bs-chat-context-row,
  #chat-modal #support-ticket-panel,
  #chat-modal #group-chat-privacy-note,
  #chat-modal #chat-feedback {
    display: none !important;
  }

  #chat-modal .bs-social-chat-card.chat-modal-card {
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #09090b !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  #chat-modal .bs-social-chat-head.chat-modal-head {
    flex: 0 0 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: max(10px, env(safe-area-inset-top)) 16px 9px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(63, 63, 70, .6) !important;
    background: rgba(24, 24, 27, .90) !important;
    backdrop-filter: blur(8px) !important;
    box-sizing: border-box !important;
  }

  #chat-modal .bs-chat-back-btn,
  #chat-modal .chat-modal-dismiss {
    flex: 0 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(39, 39, 42, .5) !important;
    color: #a1a1aa !important;
    box-shadow: none !important;
    font-size: 16px !important;
  }

  #chat-modal .bs-social-title-wrap {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  #chat-modal .bs-social-logo {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  #chat-modal .bs-social-logo img {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
  }

  #chat-modal .bs-social-chat-head h2 {
    max-width: calc(100vw - 104px) !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: .95rem !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #chat-modal .bs-social-chat-head p {
    display: block !important;
    max-width: calc(100vw - 104px) !important;
    margin: 2px 0 0 !important;
    color: #a1a1aa !important;
    font-size: .64rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #chat-modal .bs-chat-head-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }

  #chat-modal .chat-thread {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 16px 16px 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #09090b !important;
    background-image: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
  }

  #chat-modal .chat-thread::-webkit-scrollbar {
    display: none !important;
  }

  #chat-modal .bs-chat-message-row {
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #chat-modal .bs-chat-message-row.is-mine,
  #chat-modal .bs-chat-message-row.is-vip-row.is-mine {
    flex-direction: row-reverse !important;
  }

  #chat-modal .bs-chat-message-row.is-admin-row,
  #chat-modal .bs-chat-message-row.is-vip-row:not(.is-mine) {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }

  #chat-modal .bs-bubble-col {
    flex: 0 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    max-width: 80% !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }

  #chat-modal .bs-bubble-col.mine {
    align-items: flex-end !important;
    margin-right: 0 !important;
    margin-left: auto !important;
  }

  #chat-modal .bs-chat-avatar {
    flex: 0 0 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border: 1.5px solid rgba(244, 212, 140, .3) !important;
    border-radius: 50% !important;
    background: rgba(28, 26, 18, .9) !important;
    color: #f4d48c !important;
    font-size: .58rem !important;
    font-weight: 900 !important;
  }

  #chat-modal .chat-bubble:not(.is-system):not(.bs-vip-lock-panel):not(.bs-vip-status-card) {
    position: relative !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 80px !important;
    padding: 8px 12px 20px !important;
    border: 0 !important;
    border-radius: 18px !important;
    color: #e4e4e7 !important;
    background: #27272a !important;
    box-shadow: none !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #chat-modal .bs-chat-message-row.is-mine .chat-bubble,
  #chat-modal .bs-chat-message-row.is-vip-row.is-mine .chat-bubble {
    color: #fff !important;
    background: #3b82f6 !important;
    border-bottom-right-radius: 4px !important;
  }

  #chat-modal .bs-chat-message-row.is-vip-row:not(.is-mine) .chat-bubble {
    color: #e4e4e7 !important;
    background: #27272a !important;
    border-bottom-left-radius: 4px !important;
  }

  #chat-modal .bs-chat-message-row.is-admin-row .chat-bubble {
    color: #f4e4a8 !important;
    background: #1c1a10 !important;
    border: 1px solid rgba(244, 212, 140, .25) !important;
    border-bottom-left-radius: 4px !important;
  }

  #chat-modal .chat-bubble::before,
  #chat-modal .chat-bubble::after {
    display: none !important;
    content: none !important;
  }

  #chat-modal .chat-bubble p {
    margin: 0 !important;
    color: inherit !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #chat-modal .bs-chat-sender {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 0 3px !important;
    width: auto !important;
    max-width: 100% !important;
    font-size: .64rem !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    opacity: .75 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #chat-modal .bs-chat-role-pill {
    margin-left: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 34px !important;
    min-height: 15px !important;
    padding: 1px 6px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, .16) !important;
    color: inherit !important;
    font-size: .50rem !important;
    font-weight: 900 !important;
  }

  #chat-modal .chat-bubble-meta {
    position: absolute !important;
    right: 10px !important;
    bottom: 6px !important;
    color: inherit !important;
    font-size: .62rem !important;
    line-height: 1 !important;
    opacity: .65 !important;
  }

  #chat-modal .chat-bubble.is-system {
    width: auto !important;
    max-width: 90% !important;
    margin: 4px auto 12px !important;
    padding: 5px 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(39, 39, 42, .6) !important;
    color: #a1a1aa !important;
    box-shadow: none !important;
    font-size: .68rem !important;
    text-align: center !important;
  }

  #chat-modal .chat-bubble.has-media,
  #chat-modal .chat-bubble:has(.chat-img-shell) {
    max-width: 78% !important;
    padding: 4px 4px 18px !important;
  }

  #chat-modal .chat-img-shell,
  #chat-modal .chat-image-attachment {
    max-width: min(250px, 72vw) !important;
    max-height: 250px !important;
    border-radius: 14px !important;
    object-fit: cover !important;
  }

  #chat-modal .bs-voice-rec-bar {
    flex: 0 0 auto !important;
    display: none !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-top: 1px solid rgba(63, 63, 70, .4) !important;
    background: rgba(24, 24, 27, .98) !important;
    box-sizing: border-box !important;
  }

  #chat-modal .bs-voice-rec-bar.is-active {
    display: flex !important;
  }

  #chat-modal .chat-input-area {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important;
    border: 0 !important;
    border-top: 1px solid rgba(63, 63, 70, .4) !important;
    border-radius: 0 !important;
    background: rgba(24, 24, 27, .98) !important;
    box-sizing: border-box !important;
    grid-template-columns: unset !important;
  }

  #chat-modal .chat-input-area::before,
  #chat-modal .chat-input-area::after {
    display: none !important;
    content: none !important;
  }

  #chat-modal .chat-input-area .file-btn,
  #chat-modal .chat-input-area #chat-mic-btn {
    flex: 0 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #a1a1aa !important;
    font-size: 18px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  #chat-modal .chat-input-area textarea {
    order: 2 !important;
    flex: 1 1 auto !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 40px !important;
    max-height: 100px !important;
    padding: 10px 16px !important;
    border: 0 !important;
    border-radius: 22px !important;
    background: rgba(39, 39, 42, .8) !important;
    color: #fff !important;
    outline: 0 !important;
    resize: none !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
  }

  #chat-modal .chat-input-area textarea:focus {
    background: rgba(63, 63, 70, .6) !important;
  }

  #chat-modal .chat-input-area textarea::placeholder {
    color: #71717a !important;
  }

  #chat-modal .chat-input-area .file-btn {
    order: 1 !important;
  }

  #chat-modal .chat-input-area #chat-mic-btn {
    order: 3 !important;
  }

  #chat-modal .chat-input-area #chat-mic-btn.is-recording {
    color: #ef4444 !important;
  }

  #chat-modal .chat-input-area #chat-submit-btn {
    order: 4 !important;
    flex: 0 0 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #3b82f6 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, .35) !important;
    font-size: 16px !important;
  }

  #chat-modal .chat-input-area #chat-submit-btn i {
    display: none !important;
  }

  #chat-modal .chat-input-area #chat-submit-btn::before {
    content: "\f1d8" !important;
    display: block !important;
    color: currentColor !important;
    font-family: "Font Awesome 6 Free" !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transform: translateX(-1px) rotate(0deg) !important;
  }

  #chat-modal .chat-input-area #chat-submit-btn:disabled {
    background: rgba(39, 39, 42, .9) !important;
    color: #71717a !important;
    box-shadow: none !important;
  }

  #chat-modal .bs-vip-lock-panel {
    max-width: calc(100vw - 32px) !important;
    margin: 48px auto !important;
    padding: 26px 20px !important;
    border-radius: 22px !important;
  }

  .bs-emoji-picker {
    z-index: 10050 !important;
    max-width: calc(100vw - 20px) !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .bs-emoji-picker::-webkit-scrollbar {
    display: none !important;
  }

  .bs-emoji-picker button,
  .bs-msg-reaction {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
  }
}

@media (max-width: 480px) {
  #chat-modal .chat-input-area {
    gap: 4px !important;
    padding: 6px 6px max(8px, env(safe-area-inset-bottom)) !important;
  }

  #chat-modal .chat-input-area .file-btn,
  #chat-modal .chat-input-area #chat-mic-btn {
    flex-basis: 36px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    font-size: 16px !important;
  }

  #chat-modal .chat-input-area #chat-submit-btn {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }

  #chat-modal .chat-input-area textarea {
    height: 40px !important;
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
  }

  #chat-modal .chat-thread {
    padding: 12px 12px 10px !important;
  }

  #chat-modal .chat-bubble:not(.is-system):not(.bs-vip-lock-panel):not(.bs-vip-status-card),
  #chat-modal .chat-bubble p {
    font-size: 14.5px !important;
  }
}

#chat-modal.is-voice-recording .chat-input-area {
  display: none !important;
}

#chat-modal .bs-voice-rec-bar.is-active {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}
#chat-modal .bs-chat-message-row .bs-chat-avatar,
#chat-modal .bs-chat-message-row.is-mine .bs-chat-avatar {
  display: flex !important;
  flex: 0 0 auto !important;
}

#chat-modal .bs-chat-sender {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 100% !important;
}

#chat-modal .bs-chat-role-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  height: 14px !important;
  min-height: 14px !important;
  padding: 0 7px !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* Ticketing mobile: first layer full screen, chat layer above it like Community. */
@media (max-width: 520px) {
  html:has(#bs-support-modal:not([hidden])),
  body:has(#bs-support-modal:not([hidden])) {
    width: 100vw !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  #bs-support-modal.modal-shell:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10200 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background: #050b12 !important;
    overflow: hidden !important;
  }

  #bs-support-modal.modal-shell:not([hidden]) > .modal-backdrop {
    display: none !important;
  }

  #bs-support-modal .bs-support-card {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: linear-gradient(170deg, rgba(13,20,30,.99), rgba(4,8,14,1)) !important;
  }

  #bs-support-modal .bs-support-list-view {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
  }

  #bs-support-modal .bs-support-list-head {
    padding: max(22px, env(safe-area-inset-top)) 42px 18px 22px !important;
  }

  #bs-support-modal .bs-support-close {
    top: max(18px, env(safe-area-inset-top)) !important;
    right: 18px !important;
    z-index: 5 !important;
  }

  #bs-support-modal.is-ticket-chat-open .bs-support-close {
    display: none !important;
  }

  #bs-support-chat-view:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10450 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    background: #050b12 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #bs-support-chat-view:not([hidden]) .bs-support-chat-head {
    min-height: 74px !important;
    padding: max(14px, env(safe-area-inset-top)) 14px 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    background: rgba(8,14,22,.98) !important;
    flex: 0 0 auto !important;
  }

  #bs-support-chat-view .bs-chat-back-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
  }

  #bs-support-chat-view .bs-support-chat-title {
    color: #f7f2e8 !important;
    font-size: 1.02rem !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
  }

  #bs-support-chat-view .bs-support-chat-status {
    margin-top: 4px !important;
    color: #8fa3b8 !important;
    font-size: .72rem !important;
    letter-spacing: .08em !important;
    font-weight: 900 !important;
  }

  #bs-support-chat-view:not([hidden]) .bs-support-chat-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow-y: auto !important;
    padding: 18px 10px 20px !important;
    background:
      radial-gradient(circle at 70% 8%, rgba(37,244,223,.10), transparent 28%),
      linear-gradient(180deg, #071018, #020609 70%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  #bs-support-modal .bs-support-chat-area .bs-chat-message-row {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    margin: 6px 0 22px !important;
    box-sizing: border-box !important;
  }

  #bs-support-modal .bs-support-chat-area .bs-chat-message-row.is-mine,
  #bs-support-modal .bs-support-chat-area .bs-chat-message-row.is-vip-row.is-mine {
    justify-content: flex-end !important;
    padding: 0 8px 0 42px !important;
  }

  #bs-support-modal .bs-support-chat-area .bs-chat-message-row.is-admin-row,
  #bs-support-modal .bs-support-chat-area .bs-chat-message-row.is-vip-row:not(.is-mine) {
    justify-content: flex-start !important;
    padding: 0 42px 0 8px !important;
  }

  #bs-support-modal .bs-support-chat-area .chat-bubble:not(.is-system):not(.bs-vip-lock-panel):not(.bs-vip-status-card) {
    max-width: 86% !important;
    min-width: 144px !important;
    padding: 11px 14px 25px !important;
    border-radius: 18px !important;
    font-size: .84rem !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
    position: relative !important;
  }

  #bs-support-modal .bs-support-chat-area .bs-chat-message-row.is-mine .chat-bubble,
  #bs-support-modal .bs-support-chat-area .bs-chat-message-row.is-vip-row.is-mine .chat-bubble {
    color: #f9fffb !important;
    background: linear-gradient(135deg, rgba(7,103,91,.96), rgba(8,63,72,.96)) !important;
    border: 1px solid rgba(37,244,223,.78) !important;
    box-shadow: 0 0 22px rgba(37,244,223,.25), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  #bs-support-modal .bs-support-chat-area .bs-chat-message-row.is-admin-row .chat-bubble {
    color: #f7f2e8 !important;
    background: linear-gradient(135deg, rgba(21,27,39,.98), rgba(9,14,22,.98)) !important;
    border: 1px solid rgba(244,212,140,.26) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  #bs-support-modal .bs-support-chat-area .chat-bubble p {
    margin: 8px 0 0 !important;
    font-size: .84rem !important;
    line-height: 1.38 !important;
    overflow-wrap: anywhere !important;
  }

  #bs-support-modal .bs-support-chat-area .bs-chat-sender {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    max-width: 100% !important;
    color: #f4d48c !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
  }

  #bs-support-modal .bs-support-chat-area .bs-chat-role-pill {
    min-height: 17px !important;
    padding: 2px 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ffe08a, #ff9f50) !important;
    color: #161007 !important;
    font-size: .56rem !important;
    line-height: 1 !important;
  }

  #bs-support-modal .bs-support-chat-area .chat-bubble-meta {
    position: absolute !important;
    right: 14px !important;
    bottom: 7px !important;
    color: rgba(233,237,239,.72) !important;
    font-size: .66rem !important;
  }

  #bs-support-modal .bs-support-chat-area .chat-bubble.is-user .chat-bubble-meta::after,
  #bs-support-modal .bs-support-chat-area .chat-bubble.is-vip .chat-bubble-meta::after {
    content: " \2713\2713" !important;
    color: #25f4df !important;
    font-weight: 900 !important;
  }

  #bs-support-chat-view:not([hidden]) .bs-support-chat-input {
    flex: 0 0 auto !important;
    width: 100% !important;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom)) !important;
    background: rgba(8,14,22,.98) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    box-sizing: border-box !important;
  }

  #bs-support-chat-view .bs-support-input-form {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #bs-support-chat-input {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    max-height: 96px !important;
    resize: none !important;
    border-radius: 18px !important;
    border: 1px solid rgba(244,212,140,.20) !important;
    background: rgba(255,255,255,.06) !important;
    color: #f7f2e8 !important;
    padding: 13px 16px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
    box-sizing: border-box !important;
  }

  #bs-support-file-btn,
  #bs-support-mic-btn,
  #bs-support-send-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 15px !important;
    border: 0 !important;
    background: linear-gradient(135deg, #f6c85f, #ff7f32) !important;
    color: #05070b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 22px rgba(255,143,82,.28) !important;
  }

  #bs-support-file-btn,
  #bs-support-mic-btn {
    border: 1px solid rgba(244,212,140,.20) !important;
    background: rgba(255,255,255,.07) !important;
    color: #f4d48c !important;
  }
}

@media (max-width: 640px) {
  #bs-support-chat-view .bs-support-voice-rec-bar {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 8px 6px !important;
    padding: 7px 8px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(244,212,140,.16) !important;
    background: rgba(8,14,22,.96) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    gap: 7px !important;
    align-items: center !important;
  }

  #bs-support-chat-view .bs-support-voice-rec-bar.is-active {
    display: grid !important;
    grid-template-columns: 10px minmax(0, 1fr) auto 38px 38px !important;
  }

  #bs-support-chat-view .bs-support-voice-rec-bar .bs-voice-dot {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
  }

  #bs-support-chat-view .bs-support-voice-rec-bar .bs-voice-waves {
    width: 100% !important;
    max-width: 148px !important;
    height: 22px !important;
    overflow: hidden !important;
  }

  #bs-support-chat-view .bs-support-voice-rec-bar .bs-voice-timer {
    min-width: 36px !important;
    font-size: .84rem !important;
    text-align: right !important;
  }

  #bs-support-chat-view .bs-support-voice-rec-bar button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 13px !important;
  }

  #bs-support-chat-view:not([hidden]) .bs-support-chat-input {
    padding: 6px 8px max(7px, env(safe-area-inset-bottom)) !important;
  }

  #bs-support-chat-view .bs-support-input-form {
    grid-template-columns: 40px minmax(0, 1fr) 40px 44px !important;
    gap: 6px !important;
  }

  #bs-support-chat-input {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 84px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    font-size: 15px !important;
  }

  #bs-support-file-btn,
  #bs-support-mic-btn,
  #bs-support-send-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 14px !important;
  }

  #bs-support-send-btn {
    width: 44px !important;
    min-width: 44px !important;
  }

  #bs-support-chat-view:not([hidden]) .bs-support-chat-area {
    padding: 14px 8px 12px !important;
  }
}