@charset "utf-8";

.streamCommentUnreadDot { position: absolute; top: 4px; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--hero),1); }

.streamCommentsModal { min-width: 300px; }

.streamCommentsModal .ds-popup__content, .streamCommentsModal .ds-drawer__content { padding: 0px; }

.streamCommentsModal .ds-drawer__content { display: flex; flex-direction: column; }

.streamCommentsModal .ds-drawer--contained { min-height: 50dvh; }

.streamCommentsList { will-change: scroll-position; overflow: hidden auto; scroll-behavior: smooth; }

[class*="is-web"] .streamCommentsList { padding: 16px; }

[class*="is-mobile"] .streamCommentsList { padding: 8px 12px; }

.streamComment { display: flex; gap: 8px; }

.streamComment + .streamComment { margin-top: 5px; }

.streamCommentAvatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.streamCommentBody { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }

.streamCommentName { flex: 1 1 auto; font-size: 12px; font-weight: 600; color: rgba(var(--b-sc),.7); }

.streamCommentText { color: rgba(var(--b-sc),1); word-break: break-word; }

[class*="is-web"] .streamCommentText { font-size: 13px; }

[class*="is-mobile"] .streamCommentText { font-size: 12px; }

.streamCommentsEmpty { flex: 1 1 auto; display: flex; justify-content: center; align-items: center; padding: 12px 0px; font-size: 12px; color: rgba(var(--b-sc),.4); text-align: center; }

.streamCommentHeader { width: 100%; margin-bottom: 2px; display: flex; align-items: center; overflow: hidden; }

.streamCommenterActionsBlock { flex-shrink: 0; display: flex; align-items: center; gap: 5px; margin-inline-start: 5px; padding-inline-start: 5px; border-inline-start: 1px solid rgba(var(--b-sc),.1); }

.streamCommenterAction { padding: 2px; display: flex; align-items: center; color: rgba(var(--b-sc),.8); }

[class*="is-web"] .streamCommenterAction:hover { cursor: pointer; color: rgba(var(--b-sc),1); }

.streamCommenterAction .CMSIconSVGWrapper { width: 12px; height: 12px; }

.streamCommentInputArea.ds-textfield.ds-textfield--has-value .ds-textfield__right .ds-textfield__icon-btn { background: rgba(var(--hero),1); }

.streamCommentInputArea.ds-textfield:not(.ds-textfield--has-value) .ds-textfield__right .ds-textfield__icon-btn { background: rgba(var(--b-sc),.08); }

.streamCommentInputArea.ds-textfield .ds-textfield__right .ds-textfield__icon-btn { width: 36px; height: 24px; border-radius: var(--border-radius); }

.streamCommentInputArea.ds-textfield .ds-textfield__right .ds-textfield__icon-btn .CMSIconSVGWrapper { width: 12px; height: 12px; }

.streamCommentsChat { position: fixed; display: flex; flex-direction: column; background: rgba(var(--b),1); color: rgba(var(--b-sc),1); z-index: 9999; overflow: hidden; animation: streamerCommentsChatAnimation var(--slow-transition-duration) ease-in-out forwards; }

[class*="is-web"] .streamCommentsChat { bottom: 16px; width: 360px; height: 500px; border-radius: 32px; }

[class*="is-mobile"] .streamCommentsChat { bottom: 0px; width: 100%; height: 40vh; }

[class*="is-web"][dir="ltr"] .streamCommentsChat { right: 10vw; }

[class*="is-web"][dir="rtl"] .streamCommentsChat { left: 10vw; }

[class*="is-mobile"][dir="ltr"] .streamCommentsChat { right: 0px; }

[class*="is-mobile"][dir="rtl"] .streamCommentsChat { left: 0px; }

@keyframes streamerCommentsChatAnimation { 
  0% { transform: translateY(500px); }
  100% { transform: translateY(0px); }
}

.streamCommentsChatHeader { flex-shrink: 0; display: flex; align-items: center; gap: 8px; background: rgba(var(--b-sc),.15); }

[class*="is-web"] .streamCommentsChatHeader { padding: 16px 24px; }

[class*="is-mobile"] .streamCommentsChatHeader { padding: 4px 8px; }

.streamCommentsChatHeader button { margin-inline-start: auto; }

.streamerControlsBarChatDragHandler { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: rgba(var(--b-sc),.8); transition: color var(--default-transition-duration); }

[class*="is-web"] .streamerControlsBarChatDragHandler:hover { cursor: grab; color: rgba(var(--b-sc),1); }

[class*="is-web"] .streamerControlsBarChatDragHandler:active { cursor: grabbing; }

.streamerInfo { width: 100%; flex: 1 1 auto; display: flex; align-items: center; gap: 8px; overflow: hidden; }

.streamerInfoName { font-size: 12px; letter-spacing: 0.5px; color: rgba(var(--b-sc),1); }

.streamerAvatarWrapper, .streamCommenterAvatarWrapper { flex-shrink: 0; padding: 1px; display: flex; justify-content: center; align-items: center; border: 1px solid rgba(var(--b-sc),.25); border-radius: 50%; overflow: hidden; }

[class*="is-web"] .streamerAvatarWrapper, [class*="is-web"] .streamCommenterAvatarWrapper { width: 32px; height: 32px; }

[class*="is-mobile"] .streamerAvatarWrapper, [class*="is-mobile"] .streamCommenterAvatarWrapper { width: 24px; height: 24px; }

.streamerAvatar, .streamCommenterAvatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.streamCommentsChatBody { flex: 1 1 auto; display: flex; flex-direction: column; overflow: hidden; position: relative; }

[class*="is-web"] .streamCommentsChatBody { background: rgba(var(--b-sc),.08); }

.streamCommentsChatBody .streamCommentsEmpty { height: 100%; }

.streamCommentsChatBody .streamCommentsList { flex: 1 1 auto; }

.streamCommentsNewBadge { position: absolute; bottom: 10px; left: 50%; transform: translate(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--border-radius-big); background: rgba(var(--hero),1); color: rgba(var(--hero-sc),1); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; z-index: 1; }

.streamCommentsNewBadge .CMSIconSVGWrapper { width: 12px; height: 12px; }

.streamCommentsChatFooter { flex-shrink: 0; }

[class*="is-web"] .streamCommentsChatFooter { padding: 16px; }

[class*="is-mobile"] .streamCommentsChatFooter { padding: 8px; }