.chat-page-panel {
    position: relative;
    height: min(82vh, 980px);
    min-height: 620px;
    overflow: hidden;
    overscroll-behavior: auto;
}

.article-chat-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#chat-root {
    height: 100%;
    min-height: 0;
}

#chat-widget-root {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1050;
    display: flex;
    justify-content: flex-end;
}

.chat-page-shell,
.chat-widget-panel,
.chat-status {
    color: inherit;
}

.chat-page-shell {
    height: 100%;
}

.chat-status {
    padding: 16px;
}

.chat-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    height: 100%;
}

.chat-readonly-notice {
    padding: 14px 16px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
}

.chat-widget {
    width: min(380px, calc(100vw - 24px));
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: visible;
}

.chat-widget-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 700;
}

.chat-widget-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chat-widget-toggle-main {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.chat-widget-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chat-widget-title .glyphicon {
    top: 0;
    font-size: 14px;
}

.chat-widget.is-open .chat-widget-title .glyphicon {
    color: #023c64;
}

.chat-widget.is-open .chat-widget-title {
    color: #023c64;
}

.chat-widget-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, 0.16);
    color: #023c64;
    font-size: 13px;
    cursor: pointer;
}

.chat-widget-actions .chat-widget-action[href] {
    text-decoration: none;
}

.chat-widget-action .glyphicon {
    top: 0;
}

.chat-widget.is-open .chat-widget-action,
.chat-widget.is-open .chat-widget-action .glyphicon {
    color: #023c64;
}

:root.dark .chat-widget.is-open .chat-widget-title,
:root.dark .chat-widget.is-open .chat-widget-title .glyphicon,
:root.dark .chat-widget.is-open .chat-widget-action,
:root.dark .chat-widget.is-open .chat-widget-action .glyphicon {
    color: #fff;
}

:root.dark .chat-widget.is-collapsed .chat-widget-title,
:root.dark .chat-widget.is-collapsed .chat-widget-title .glyphicon {
    color: #fff;
}

.chat-widget-panel {
    height: min(70vh, 620px);
    background: #fff;
}

:root.dark .chat-widget-panel {
    background: #111827;
    color: #e5e7eb;
}

:root.dark .chat-status {
    color: #e5e7eb;
}

:root.dark .chat-readonly-notice {
    border-top-color: rgba(148, 163, 184, 0.18);
    background: #0f172a;
    color: #cbd5e1;
}

.chat-widget.is-collapsed .chat-widget-panel {
    display: none;
}

.chat-widget.is-collapsed {
    display: inline-block;
    width: auto;
    border-radius: 999px;
    overflow: visible;
}

.chat-widget.is-collapsed .chat-widget-toggle {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 999px;
    background: inherit;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.chat-widget.is-collapsed .chat-widget-toggle-main {
    width: 56px;
    height: 56px;
    justify-content: center;
}

.chat-widget.is-collapsed .chat-widget-title {
    gap: 0;
}

.chat-widget.is-collapsed .chat-widget-title span:last-child,
.chat-widget.is-collapsed .chat-widget-actions {
    display: none;
}

.chat-widget.is-collapsed .chat-widget-title .glyphicon {
    font-size: 22px;
    color: #023c64;
}

:root.light .chat-widget {
    background: rgba(214, 226, 239, 0.52);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

:root.dark .chat-widget {
    background: rgba(214, 226, 239, 0.52);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

:root.light .chat-widget-toggle {
    background: transparent;
    color: inherit;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

:root.dark .chat-widget.is-collapsed .chat-widget-toggle,
:root.light .chat-widget.is-collapsed .chat-widget-toggle {
    color: #023c64;
}

:root.dark .chat-widget-toggle {
    background: transparent;
    border-bottom-color: rgba(15, 23, 42, 0.08);
    color: inherit;
}

:root.dark .chat-widget.is-collapsed .chat-widget-toggle {
    border-color: rgba(15, 23, 42, 0.08);
}

@media (max-width: 767px) {
    #chat-widget-root {
        right: 12px;
        left: auto;
        bottom: 12px;
    }

    .chat-widget.is-open {
        width: calc(100vw - 24px);
        max-width: none;
    }

    .chat-widget.is-collapsed {
        width: auto;
    }

    .chat-widget-panel {
        height: min(68vh, 540px);
    }
}

/* =========================
   Stream Chat - Upload button polish
   ========================= */

.str-chat__message-input {
    border-radius: 12px;
    overflow: visible;
}

.str-chat__message-input .str-chat__input-flat,
.str-chat__message-input .str-chat__input-flat-wrapper {
    border-radius: 12px;
}

.str-chat__fileupload-button,
.str-chat__fileupload-button label,
.str-chat__fileupload-button button {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.str-chat__file-input-label {
    margin-bottom: 0 !important;
}

.str-chat__fileupload-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
    margin-right: 6px;
}

:root.light .str-chat__fileupload-button:hover { background: rgba(0,0,0,0.06) !important; }
:root.dark  .str-chat__fileupload-button:hover { background: rgba(255,255,255,0.08) !important; }

.str-chat__fileupload-button:active { transform: scale(0.96); }

:root.light .str-chat__fileupload-button svg,
:root.light .str-chat__fileupload-button path { fill: rgba(0,0,0,0.70) !important; }

:root.dark .str-chat__fileupload-button svg,
:root.dark .str-chat__fileupload-button path { fill: rgba(255,255,255,0.78) !important; }

/* Bootstrap sometimes forces file inputs to display:block; keep uploads hidden inside chat */
#chat-root input[type="file"],
#chat-root .str-chat input[type="file"],
#chat-root .rfu-file-upload-button input[type="file"],
#chat-root .str-chat__fileupload-button input[type="file"],
#chat-root input[type="file"].rfu-file-upload-button__input,
#chat-widget-root input[type="file"],
#chat-widget-root .str-chat input[type="file"],
#chat-widget-root .rfu-file-upload-button input[type="file"],
#chat-widget-root .str-chat__fileupload-button input[type="file"],
#chat-widget-root input[type="file"].rfu-file-upload-button__input {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important; /* beats Bootstrap's display:block */
}

/* =========================
   Stream Chat v13 (RFU) - Hide native file input text ("File chooser") + align button
   ========================= */

.rfu-file-upload-button,
.rfu-file-upload-button__upload-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide the real file input completely so no label/text can leak into layout */
.rfu-file-upload-button input[type="file"],
.str-chat__fileupload-button input[type="file"],
input[type="file"].rfu-file-upload-button__input {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Keep attach button a fixed square */
.rfu-file-upload-button__upload-button,
.str-chat__fileupload-button {
    flex: 0 0 auto !important;
}

/* Align input row items vertically */
.str-chat__message-input,
.str-chat__message-input .str-chat__input-flat {
    align-items: center !important;
}

/* Prevent any stray text nodes from showing */
.str-chat__fileupload-button,
.rfu-file-upload-button {
    font-size: 0 !important;
    line-height: 0 !important;
}
.str-chat__fileupload-button svg,
.rfu-file-upload-button svg {
    font-size: initial !important;
    line-height: initial !important;
}

/* =========================
   Stream Chat v13 (RFU) - Kill any visible filename/label text next to attach icon
   ========================= */

/* Make sure the upload control cannot show text (some browsers inject "File chosen") */
.rfu-file-upload-button,
.rfu-file-upload-button__upload-button,
.str-chat__fileupload-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Hide any text wrappers inside the upload button, keep only SVG */
.rfu-file-upload-button__upload-button span,
.rfu-file-upload-button__upload-button .rfu-file-upload-button__text,
.rfu-file-upload-button__upload-button .rfu-file-upload-button__label,
.rfu-file-upload-button__upload-button .rfu-file-upload-button__button-text,
.rfu-file-upload-button__upload-button :not(svg):not(path):not(g):not(use) {
    display: none !important;
}

/* Keep the icon visible */
.rfu-file-upload-button__upload-button svg,
.str-chat__fileupload-button svg {
    display: block !important;
    width: 18px;
    height: 18px;
}

/* Some versions place text on the wrapper itself */
.rfu-file-upload-button__upload-button::before,
.rfu-file-upload-button__upload-button::after {
    content: none !important;
}

/* =========================
   Stream Chat - Typography scale
   ========================= */

/* Base chat text */
#chat-root .str-chat {
    height: 100%;
    font-size: 15px; /* was ~14px */
}

#chat-root .str-chat__list,
#chat-root .str-chat__message-list-scroll {
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
}

#chat-root .str-chat__channel,
#chat-root .str-chat__main-panel,
#chat-root .str-chat__message-list-main-panel,
#chat-root .str-chat__main-panel-inner,
#chat-root .str-chat__thread {
    height: 100%;
}

#chat-widget-root .str-chat {
    height: 100%;
    font-size: 14px;
}

#chat-widget-root .str-chat__channel,
#chat-widget-root .str-chat__main-panel,
#chat-widget-root .str-chat__thread {
    height: 100%;
}

#chat-root .str-chat__channel,
#chat-widget-root .str-chat__channel {
    position: relative;
}

#chat-root .str-chat__thread-container,
#chat-widget-root .str-chat__thread-container {
    position: absolute;
    inset: 0;
    z-index: 20;
    width: 100%;
    max-width: none;
    height: 100% !important;
    border-left: 0 !important;
    background: #fff;
    display: flex;
    flex-direction: column;
}

:root.dark #chat-root .str-chat__thread-container,
:root.dark #chat-widget-root .str-chat__thread-container {
    background: #111827;
}

#chat-root .str-chat__thread-header,
#chat-widget-root .str-chat__thread-header {
    display: none;
}

#chat-root .chat-thread-header,
#chat-widget-root .chat-thread-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
}

:root.dark #chat-root .chat-thread-header,
:root.dark #chat-widget-root .chat-thread-header {
    background: #111827;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

#chat-root .chat-thread-back-button,
#chat-widget-root .chat-thread-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

#chat-root .chat-thread-back-button .glyphicon,
#chat-widget-root .chat-thread-back-button .glyphicon {
    top: 0;
    font-size: 12px;
}

#chat-root .chat-thread-header-title,
#chat-widget-root .chat-thread-header-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

#chat-root .str-chat__thread .stream-chat__thread-head,
#chat-widget-root .str-chat__thread .stream-chat__thread-head {
    margin-top: 0;
}

#chat-widget-root .str-chat__message-list-scroll,
#chat-widget-root .str-chat__list {
    background: transparent;
}

#chat-widget-root .str-chat__channel {
    background: transparent;
}

:root.dark #chat-root .str-chat__main-panel,
:root.dark #chat-root .str-chat__channel,
:root.dark #chat-root .str-chat__channel-header,
:root.dark #chat-root .str-chat__message-list-scroll,
:root.dark #chat-root .str-chat__list,
:root.dark #chat-widget-root .str-chat__main-panel,
:root.dark #chat-widget-root .str-chat__channel,
:root.dark #chat-widget-root .str-chat__channel-header,
:root.dark #chat-widget-root .str-chat__message-list-scroll,
:root.dark #chat-widget-root .str-chat__list {
    background: #111827;
}

:root.dark #chat-root .str-chat,
:root.dark #chat-widget-root .str-chat {
    --str-chat__message-bubble-background-color: rgba(55, 65, 81, 0.92);
    --str-chat__message-bubble-color: #f9fafb;
    --str-chat__own-message-bubble-background-color: rgba(30, 41, 59, 0.92);
    --str-chat__own-message-bubble-color: #f9fafb;
    --str-chat__message-list-background-color: #111827;
    --str-chat__message-list-color: #e5e7eb;
    --str-chat__message-input-background-color: rgba(17, 24, 39, 0.98);
    --str-chat__message-input-color: #f3f4f6;
    --str-chat__message-textarea-background-color: #1f2937;
    --str-chat__message-textarea-color: #f3f4f6;
    --str-chat__message-reaction-background-color: rgba(55, 65, 81, 0.92);
    --str-chat__message-reaction-color: #f9fafb;
    --str-chat__own-message-reaction-background-color: rgba(30, 41, 59, 0.92);
    --str-chat__own-message-reaction-color: #f9fafb;
    --str-chat__message-replies-count-color: #60a5fa;
    --str-chat__message-status-color: #cbd5e1;
    --str-chat__message-secondary-color: #cbd5e1;
}

#chat-widget-root .str-chat__message-input {
    border-radius: 0;
}

#chat-root .str-chat__message-simple__content,
#chat-root .str-chat__message-simple__main,
#chat-widget-root .str-chat__message-simple__content,
#chat-widget-root .str-chat__message-simple__main {
    align-items: center;
}

#chat-root .str-chat__message-text,
#chat-root .str-chat__message-text-inner,
#chat-widget-root .str-chat__message-text,
#chat-widget-root .str-chat__message-text-inner {
    font-size: 15px;
    line-height: 1.35;
}

#chat-root .str-chat__message-text-inner,
#chat-widget-root .str-chat__message-text-inner {
    padding-top: 4px;
    padding-bottom: 4px;
}

#chat-root .str-chat__date-separator,
#chat-widget-root .str-chat__date-separator {
    padding-top: 4px;
    padding-bottom: 4px;
}

#chat-root .str-chat__message,
#chat-widget-root .str-chat__message {
    margin-bottom: 4px;
}

#chat-root .str-chat__message-simple-name,
#chat-root .str-chat__message-simple-timestamp,
#chat-root .str-chat__message-metadata,
#chat-root .str-chat__message-status,
#chat-widget-root .str-chat__message-simple-name,
#chat-widget-root .str-chat__message-simple-timestamp,
#chat-widget-root .str-chat__message-metadata,
#chat-widget-root .str-chat__message-status {
    font-size: 10px;
    line-height: 1.2;
}

#chat-root .str-chat__message-input,
#chat-widget-root .str-chat__message-input {
    padding: 7px 12px 8px;
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

:root.dark #chat-root .str-chat__message-input,
:root.dark #chat-widget-root .str-chat__message-input {
    background: rgba(17, 24, 39, 0.98);
    border-top-color: rgba(255, 255, 255, 0.08);
}

#chat-root .str-chat__message-input .str-chat__input-flat,
#chat-root .str-chat__message-input .str-chat__input-flat-wrapper,
#chat-widget-root .str-chat__message-input .str-chat__input-flat,
#chat-widget-root .str-chat__message-input .str-chat__input-flat-wrapper {
    min-height: 40px;
    border-radius: 24px;
    background: #fff;
}

:root.dark #chat-root .str-chat__message-input .str-chat__input-flat,
:root.dark #chat-root .str-chat__message-input .str-chat__input-flat-wrapper,
:root.dark #chat-widget-root .str-chat__message-input .str-chat__input-flat,
:root.dark #chat-widget-root .str-chat__message-input .str-chat__input-flat-wrapper {
    background: #1f2937;
}

#chat-root .str-chat__textarea textarea,
#chat-widget-root .str-chat__textarea textarea {
    min-height: 28px;
    padding-right: 40px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 15px;
}

#chat-root .str-chat__textarea textarea {
    line-height: 1.35;
    overflow-y: hidden;
}

#chat-widget-root .str-chat__textarea textarea {
    line-height: 1.35;
    overflow-y: hidden;
}

:root.dark #chat-root .str-chat__textarea textarea,
:root.dark #chat-widget-root .str-chat__textarea textarea {
    color: #f3f4f6;
    caret-color: #f3f4f6;
}

:root.dark #chat-root .str-chat__textarea textarea::placeholder,
:root.dark #chat-widget-root .str-chat__textarea textarea::placeholder {
    color: rgba(243, 244, 246, 0.58);
}

#chat-root .str-chat__send-button,
#chat-root .str-chat__fileupload-button,
#chat-root .rfu-file-upload-button__upload-button,
#chat-widget-root .str-chat__send-button,
#chat-widget-root .str-chat__fileupload-button,
#chat-widget-root .rfu-file-upload-button__upload-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 999px !important;
}

#chat-root .str-chat__message-input .str-chat__send-button,
#chat-widget-root .str-chat__message-input .str-chat__send-button {
    margin-right: 2px;
}

#chat-root .str-chat__message-input .str-chat__input-flat,
#chat-widget-root .str-chat__message-input .str-chat__input-flat {
    padding-left: 6px;
    padding-right: 6px;
}

#chat-root .str-chat__message-textarea-with-emoji-picker,
#chat-widget-root .str-chat__message-textarea-with-emoji-picker {
    position: relative;
    display: block;
    overflow: visible;
}

#chat-root .str-chat__message-textarea-with-emoji-picker .str-chat__textarea,
#chat-widget-root .str-chat__message-textarea-with-emoji-picker .str-chat__textarea {
    width: 100%;
}

#chat-root .str-chat__message-textarea-emoji-picker,
#chat-widget-root .str-chat__message-textarea-emoji-picker {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

#chat-root .str-chat__emoji-picker-button,
#chat-widget-root .str-chat__emoji-picker-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(15, 23, 42, 0.72);
    cursor: pointer;
}

:root.dark #chat-root .str-chat__emoji-picker-button,
:root.dark #chat-widget-root .str-chat__emoji-picker-button {
    color: rgba(243, 244, 246, 0.72);
}

#chat-root .str-chat__emoji-picker-button:hover,
#chat-widget-root .str-chat__emoji-picker-button:hover {
    background: rgba(15, 23, 42, 0.06);
}

:root.dark #chat-root .str-chat__emoji-picker-button:hover,
:root.dark #chat-widget-root .str-chat__emoji-picker-button:hover {
    background: rgba(255, 255, 255, 0.08);
}

#chat-root .str-chat__emoji-picker-button svg,
#chat-widget-root .str-chat__emoji-picker-button svg {
    width: 20px;
    height: 20px;
}

#chat-root .str-chat__emoji-picker-button span,
#chat-widget-root .str-chat__emoji-picker-button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    transform: translateY(0);
}

#chat-root .str-chat__message-textarea-emoji-picker-container,
#chat-widget-root .str-chat__message-textarea-emoji-picker-container {
    z-index: 10000;
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: 312px;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 10px;
}

.chat-emoji-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.chat-emoji-option:hover {
    background: rgba(15, 23, 42, 0.06);
}

#chat-root .str-chat__send-to-channel-checkbox__container,
#chat-widget-root .str-chat__send-to-channel-checkbox__container {
    display: flex;
    align-items: center;
}

#chat-root .str-chat__send-to-channel-checkbox__field,
#chat-widget-root .str-chat__send-to-channel-checkbox__field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#chat-root .str-chat__send-to-channel-checkbox__field input,
#chat-widget-root .str-chat__send-to-channel-checkbox__field input {
    margin: 0;
}

#chat-root .str-chat__send-to-channel-checkbox__field label,
#chat-widget-root .str-chat__send-to-channel-checkbox__field label {
    margin: 0;
    line-height: 1.2;
}

:root.dark #chat-root .str-chat__send-to-channel-checkbox__field label,
:root.dark #chat-widget-root .str-chat__send-to-channel-checkbox__field label,
:root.dark #chat-root .chat-thread-header-title,
:root.dark #chat-widget-root .chat-thread-header-title {
    color: #f3f4f6;
}

:root.dark #chat-root .str-chat__message-textarea-emoji-picker-container,
:root.dark #chat-widget-root .str-chat__message-textarea-emoji-picker-container {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

:root.dark .chat-emoji-option:hover {
    background: rgba(255, 255, 255, 0.08);
}

:root.dark #chat-root .str-chat__message-text,
:root.dark #chat-root .str-chat__message-text-inner,
:root.dark #chat-widget-root .str-chat__message-text,
:root.dark #chat-widget-root .str-chat__message-text-inner,
:root.dark #chat-root .str-chat__message-simple-name,
:root.dark #chat-root .str-chat__message-simple-timestamp,
:root.dark #chat-root .str-chat__message-metadata,
:root.dark #chat-root .str-chat__message-status,
:root.dark #chat-widget-root .str-chat__message-simple-name,
:root.dark #chat-widget-root .str-chat__message-simple-timestamp,
:root.dark #chat-widget-root .str-chat__message-metadata,
:root.dark #chat-widget-root .str-chat__message-status,
:root.dark #chat-root .str-chat__system-message,
:root.dark #chat-root .str-chat__empty-channel,
:root.dark #chat-widget-root .str-chat__system-message,
:root.dark #chat-widget-root .str-chat__empty-channel {
    color: #e5e7eb;
}

:root.dark #chat-root .str-chat__date-separator,
:root.dark #chat-widget-root .str-chat__date-separator,
:root.dark #chat-root .str-chat__channel-header,
:root.dark #chat-widget-root .str-chat__channel-header {
    color: #e5e7eb;
}

:root.dark #chat-root .str-chat__message-bubble,
:root.dark #chat-root .str-chat__message-text-inner,
:root.dark #chat-widget-root .str-chat__message-bubble,
:root.dark #chat-widget-root .str-chat__message-text-inner {
    color: #f9fafb;
}

:root.dark #chat-root .str-chat__message--received .str-chat__message-text-inner,
:root.dark #chat-widget-root .str-chat__message--received .str-chat__message-text-inner,
:root.dark #chat-root .str-chat__message--me .str-chat__message-text-inner,
:root.dark #chat-widget-root .str-chat__message--me .str-chat__message-text-inner {
    color: #f9fafb;
}

:root.dark #chat-root .str-chat__player-wrapper,
:root.dark #chat-widget-root .str-chat__player-wrapper {
    background: rgba(55, 65, 81, 0.92);
}

:root.dark #chat-root .str-chat__message-bubble,
:root.dark #chat-widget-root .str-chat__message-bubble {
    background: rgba(55, 65, 81, 0.92);
}

:root.dark #chat-root .str-chat__message--me .str-chat__message-bubble,
:root.dark #chat-widget-root .str-chat__message--me .str-chat__message-bubble {
    background: rgba(30, 41, 59, 0.92);
}

/* Message text */
#chat-root .str-chat__message-text,
#chat-root .str-chat__message-text-inner {
    font-size: 15px;
    line-height: 1.45;
}

/* Message author / meta */
#chat-root .str-chat__message-simple__author,
#chat-root .str-chat__message-simple__timestamp,
#chat-root .str-chat__message-simple__status {
    font-size: 13px;
}

/* Input textarea */
#chat-root .str-chat__textarea textarea {
    font-size: 15px;
    line-height: 1.4;
}

/* System / empty state text */
#chat-root .str-chat__system-message,
#chat-root .str-chat__empty-channel {
    font-size: 14px;
}