*{
   font-family: "Poppins", sans-serif;
}
.dis_common_chat_wrap {
    height: 100%;
}
.dis_streaming_embed_popup .dis_common_chat_message {
    height: calc(100vh - 122px);
}
.dis_streaming_embed_popup .emoji_dropdown{
    bottom: 100%;
    top: auto;
}
.emoji_dropdown {
    position: absolute;
    width: 370px;
    border: 1px solid #ccc;
    background: #fff;
    top: 100%;
    z-index: 3;
    margin-bottom: 10px;
    border-radius: 10px 10px;
    box-shadow: 1px 1px 8px #c7dbe6;
    /* transform-origin: top left; */
}
.dis_common_chat_message {
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.dis_common_chat_message .message {
    margin-bottom: 15px;
    position: relative;
}
.dis_common_chat_message .outgoing {
    text-align: right;
}
.dis_common_chat_box {
    background: #f1f1f4;
    display: inline-block;
    padding: 10px 10px 5px;
    border-radius: 5px;
}
.dis_common_chat_name {
    color: #333;
    font-size: 12px;
    margin: 0 0 2px 0;
    font-weight: 700;
}
.dis_common_chat_description {
    margin: 0;
    color: #fe5421;
    border-radius: 4px;
    word-break: break-all;
    font-size: 12px;
}
.dis_common_chat_message div:last-child {
    margin-bottom: 0;
}
.dis_common_chat_footer textarea {
width: -webkit-fill-available;
    border: none;
    padding: 20px 30px 20px 40px;
    font-size: 16px;
    outline: none;
    border-top: 1px solid #d0d0d0;
    resize: none;
}
.dis_common_chat_footer {
    position: relative;
}
.dis_common_chat_footer .emoji_picker {
position: absolute;
    cursor: pointer;
    -ms-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s
ease;
    transition: all 0.3s
ease;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex
;
    justify-content: center;
    align-items: center;
    left: 10px;
}
.dis_streamchat_sendbox .emoji_dropdown {
    width: 100%;
    top: calc(100% + -305px);
}
.dis_common_chat_description img.emoji {
    width: 20px;
    height: 20px;
    margin: 0 1px;
}



/* single video */

.dis_stream_chatwrap  .dis_common_chat_message {
    height: calc(100% - 47px);
}
.dis_stream_chatwrap .dis_common_chat_footer textarea {
    padding: 15px 10px 9px 40px;
    font-size: 14px;
    background: #ffffff;
    height: inherit;
}

/* Logged out empty state.

   It stands in for the message list, so it takes the same height the list
   would have had and centres what it holds. Only applies with the modifier
   class, so the short rate limit line stays a plain bar. */

.dis_common_chat_notice.chatEmptyState {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    font-size: 13px;
    line-height: 1.5;
}
.dis_streaming_embed_popup .dis_common_chat_notice.chatEmptyState {
    height: calc(100vh - 24px);
}
.dis_stream_chatwrap .dis_common_chat_notice.chatEmptyState {
    height: calc(100% - 47px);
}
.dis_common_chat_notice .chatLoginBtn {
    /* Self contained: the embed loads this stylesheet on its own, without the
       one that defines the site buttons. */
    min-width: inherit;
    padding: 0 24px;
    height: 40px;
    line-height: 38px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #fff;
    background: var(--primary_color, #eb581f);
    border: 1px solid var(--primary_color, #eb581f);
    outline: none;
    cursor: pointer;
    transition: all 0.3s linear;
}
.dis_common_chat_notice .chatLoginBtn:hover,
.dis_common_chat_notice .chatLoginBtn:focus {
    background: transparent;
    color: var(--primary_color, #eb581f);
}


/* Send button.

   Sits at the right of the typing bar, mirroring the emoji icon on the left,
   so a message can be sent by clicking as well as by pressing Enter. */

.dis_common_chat_footer .chatSendBtn {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 34px;
    width: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.35;
    transition: opacity 0.2s linear, background 0.2s linear;
}

/* Only lit up when there is something to send. */
.dis_common_chat_footer .chatSendBtn.is_ready {
    opacity: 1;
}
.dis_common_chat_footer .chatSendBtn.is_ready:hover {
    background: rgba(235, 88, 31, 0.12);
}
.dis_common_chat_footer .chatSendBtn svg {
    width: 19px;
    height: 19px;
    display: block;
    fill: var(--primary_color, #eb581f);
}

/* Room for it, so a long message does not run underneath. */
.dis_common_chat_footer textarea,
.dis_stream_chatwrap .dis_common_chat_footer textarea {
    padding-right: 54px;
}


/* Dark mode.

   Everything above is written in the light palette with fixed colours, so the
   widget needs its own dark set. The panel behind it already turns dark
   (.theme_dark .dis_sc_head_inner, in style.css) but the bubbles and the
   typing box stayed light, which left the typed message as pale grey text on
   a white field. */

.theme_dark .dis_common_chat_box {
    background: #26262a;
}
.theme_dark .dis_common_chat_name {
    color: var(--white_color, #ffffff);
}
/* .dis_common_chat_description keeps the brand orange: it still clears 4.5:1
   against the bubble above. */

.theme_dark .dis_common_chat_footer textarea,
.theme_dark .dis_stream_chatwrap .dis_common_chat_footer textarea {
    background: var(--sec_bg_color, #161616);
    color: var(--white_color, #ffffff);
    border-top-color: var(--border_color, #333333);
}
.theme_dark .dis_common_chat_footer textarea::placeholder {
    color: var(--text_color, #8f9da5);
}