.chat-rich-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.room-page .message:has(.chat-rich-text pre) > .message-content { flex: 1; }
.chat-rich-text strong { font-weight: 700; color: #fff; }
.chat-rich-text em { font-style: italic; }
.chat-rich-text u { text-underline-offset: 3px; }
.chat-rich-text s { color: #b4b4b4; }
.chat-rich-text :not(pre) > code,
.chat-rich-text > code {
    padding: 2px 5px;
    border: 1px solid #343434;
    border-radius: 4px;
    background: #202020;
    color: #e0eaff;
    font: .86em/1.65 Consolas, monospace;
    unicode-bidi: isolate;
}
.chat-rich-text pre {
    max-inline-size: 100%;
    margin: 8px 0;
    padding: 12px;
    overflow: auto;
    border: 1px solid #343434;
    border-radius: 9px;
    background: #0d0d0d;
    color: #dedede;
    direction: ltr;
    text-align: left;
    white-space: pre;
    scrollbar-width: thin;
    scrollbar-color: #454545 #151515;
}
.chat-rich-text pre code { font: 13px/1.7 Consolas, monospace; }
.chat-rich-text pre:focus-visible { outline: 2px solid #88b5ff; outline-offset: 2px; }
.chat-rich-text pre::-webkit-scrollbar { height: 7px; width: 7px; }
.chat-rich-text pre::-webkit-scrollbar-thumb { background: #454545; border-radius: 8px; }
.dm-bubble .message-rich-text { margin: 0; font-size: 15px; line-height: 1.8; min-inline-size: 0; }
.workspace-app .dm-bubble:has(.message-rich-text) { min-inline-size: 0; }
.workspace-app :is(.composer, .dm-composer) > .chat-format-toggle {
    flex: 0 0 44px;
    inline-size: 44px;
    min-inline-size: 44px;
    block-size: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #c5c5c5;
    font: 700 17px/1 Arial, sans-serif;
    cursor: pointer;
}
.workspace-app :is(.composer, .dm-composer) > .chat-format-toggle:is(:hover, [aria-expanded=true]) {
    color: #88b5ff; border-color: #0060ff66; background: #0060ff1a;
}
.workspace-app .chat-format-panel {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    min-inline-size: 0;
    margin: 6px 16px;
    max-block-size: min(190px, 30dvh);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #454545 #181818;
    padding: 8px;
    border: 1px solid #303030;
    border-radius: 10px;
    background: #181818;
    direction: rtl;
}
.chat-format-panel[hidden] { display: none !important; }
.workspace-app .chat-format-panel > button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-block-size: 44px;
    min-inline-size: 44px;
    padding: 6px 10px;
    border: 1px solid #343434;
    border-radius: 7px;
    background: #222;
    color: #e5e5e5;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}
.workspace-app .chat-format-panel > button:hover { color: #fff; border-color: #0060ff; background: #0060ff; }
.workspace-app :is(.chat-format-panel > button, .chat-format-toggle):focus-visible { outline: 2px solid #88b5ff; outline-offset: 2px; }
.chat-format-panel > small { flex: 1 1 100%; color: #a6a6a6; font-size: 11px; line-height: 1.6; }
.chat-format-status { color: #ff9d9d; font-size: 12px; }
.chat-format-status:empty { display: none; }
.workspace-app :is(.chat-format-panel > button, .chat-format-toggle):disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 540px) {
    .workspace-app :is(.composer, .dm-composer):has(.chat-format-toggle) { flex-wrap: wrap; }
    .workspace-app :is(.composer, .dm-composer):has(.chat-format-toggle) > textarea {
        order: -1; flex: 1 1 100%; inline-size: 100%; width: 100%; min-block-size: 44px;
    }
    .workspace-app :is(.composer, .dm-composer):has(.chat-format-toggle) > button[type=submit] { margin-inline-start: auto; }
    .workspace-app .chat-format-panel { margin-inline: 8px; gap: 5px; }
    .workspace-app .chat-format-panel > button { flex: 1 1 calc(33.333% - 6px); padding-inline: 4px; }
}