.attach-button.has-file::after {
    content: attr(data-file);
    display: inline-block;
    max-width: 220px;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.message-attachment img {
    cursor: zoom-in;
}

.console-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(2, 9, 20, .9);
}

.console-lightbox img {
    max-width: 96vw;
    max-height: 92vh;
    object-fit: contain;
}

.console-lightbox button {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    color: #071528;
    background: #fff;
    cursor: pointer;
    font-size: 28px;
}

.console-copy-toast {
    position: fixed;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 10001;
    padding: 10px 15px;
    border: 1px solid rgba(138, 199, 255, .34);
    border-radius: 999px;
    color: #eff8ff;
    background: #142b42;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .32);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity .16s ease, transform .16s ease;
    font-size: 12px;
    font-weight: 750;
}

.console-copy-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.chat-alert-toggle {
    width: auto;
    min-width: 58px;
    padding: 0 8px;
    font-size: 9px;
    white-space: nowrap;
}

.chat-alert-toggle[aria-pressed="true"] {
    color: #70e5cb;
    background: rgba(43, 208, 179, .12);
}

.quoted-message {
    display: block;
    max-width: min(430px, 100%);
    margin: 0 0 5px;
    padding: 7px 9px;
    border-left: 3px solid #5ba9f6;
    border-radius: 7px;
    color: #adc2da;
    background: #111c2a;
    text-align: left;
}

.quoted-message small,
.quoted-message span { display: block; }
.quoted-message small { margin-bottom: 2px; color: #7f96b1; font-size: 8px; }
.quoted-message strong { color: #bcd9f5; }
.quoted-message span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.message-row.mine .quoted-message { margin-left: auto; border-left-color: #78c9ff; background: #162d51; }
.message-row.whisper .quoted-message { border-left-color: #d7a95e; background: #282015; }

.message-actions { display: flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity .12s ease; }
.message-row.mine .message-actions { justify-content: flex-end; }
.message-row:hover .message-actions,
.message-row:focus-within .message-actions { opacity: 1; }
.message-action {
    min-height: 24px;
    padding: 3px 7px;
    border: 1px solid #2b3b51;
    border-radius: 999px;
    color: #9eb1c7;
    background: #111b29;
    cursor: pointer;
    font-size: 9px;
    font-weight: 750;
}
.message-action:hover { border-color: #4f8fd0; color: #eef7ff; background: #17283b; }

.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.message-row.mine .message-reactions { justify-content: flex-end; }
.message-reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 2px 7px;
    border: 1px solid #2d4057;
    border-radius: 999px;
    color: #c5d4e5;
    background: #111c2a;
    cursor: pointer;
}
.message-reaction span { font-size: 14px; line-height: 1; }
.message-reaction b { font-size: 9px; }
.message-reaction.mine { border-color: #398ce5; color: #dff1ff; background: #153152; }
.message-reaction:hover { border-color: #62aef5; }

.composer-quote-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 7px;
    padding: 7px 9px;
    border-left: 3px solid #4fa8fb;
    border-radius: 7px;
    color: #b8c9dc;
    background: #121f2e;
}
.composer-quote-preview[hidden] { display: none; }
.composer-quote-preview > span { min-width: 0; flex: 1; }
.composer-quote-preview small,
.composer-quote-preview b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-quote-preview small { color: #8299b3; font-size: 8px; }
.composer-quote-preview b { margin-top: 2px; color: #dbe9f7; font-size: 9px; font-weight: 650; }
.composer-quote-preview button { border: 0; color: #a9bad0; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; }
.composer-quote-preview.whisper { border-left-color: #d8a452; background: #271f14; }

.reaction-submit { position: fixed !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.reaction-picker {
    position: fixed;
    z-index: 10020;
    width: min(290px, calc(100vw - 16px));
    padding: 9px;
    border: 1px solid #33465e;
    border-radius: 13px;
    background: #111b28;
    box-shadow: 0 18px 45px rgba(0,0,0,.45);
}
.reaction-picker-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.reaction-picker-quick button { min-width: 0; height: 37px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-size: 21px; }
.reaction-picker-quick button:hover { background: #203148; }
.reaction-picker-custom { display: flex; gap: 6px; margin-top: 7px; padding-top: 7px; border-top: 1px solid #27364a; }
.reaction-picker-custom input { min-width: 0; flex: 1; border: 1px solid #34475f; border-radius: 8px; padding: 7px 9px; color: #edf5ff; background: #0c1420; font: inherit; }
.reaction-picker-custom button { border: 0; border-radius: 8px; padding: 7px 10px; color: white; background: #267fdf; cursor: pointer; font-weight: 800; }

@media (hover: none), (pointer: coarse) {
    .message-actions { opacity: 1; }
}

@media (max-width: 1180px) {
    .chat-alert-toggle {
        display: none;
    }
}