/* CSS 原封不动保留，仅在底部增加发送状态样式 */
    .chat.svelte-od2gvr {
        max-width: 720px;
        margin: 0 auto;
        height: 580px;
        display: flex;
        flex-direction: column;
        padding: 12px;
        box-sizing: border-box;
        gap: 12px;
    }

    .header.svelte-od2gvr {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
    }

    .status.svelte-od2gvr {
        padding: 4px 8px;
        border-radius: 4px;
        font-weight: 500;
    }

    .status.connecting.svelte-od2gvr {
        background: #fff8e1;
        color: #ffb300;
    }

    .status.connected.svelte-od2gvr {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .status.disconnected.svelte-od2gvr {
        background: #ffebee;
        color: #d32f2f;
    }

    .messages.svelte-od2gvr {
        flex: 1;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 12px;
        overflow-y: auto;
        margin-bottom: 8px;
        background: #fafafa;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .msg.svelte-od2gvr {
        font-size: 14px;
        padding: 6px 10px;
        border-radius: 4px;
        max-width: 70%;
        word-wrap: break-word;
    }

    .msg.self.svelte-od2gvr {
        color: #1976d2;
        background: #e3f2fd;
        align-self: flex-end;
    }

    .msg.svelte-od2gvr:not(.self) {
        background: #ffffff;
        align-self: flex-start;
    }

    .msg.gift.svelte-od2gvr {
        color: #d84315;
        background: #fff3e0;
        border: 1px solid #ffccbc;
        animation: svelte-od2gvr-giftBounce 0.5s ease-in-out;
    }

    @keyframes svelte-od2gvr-giftBounce {
        0% {
            transform: scale(0.9);
            opacity: 0;
        }
        50% {
            transform: scale(1.05);
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .input-area.svelte-od2gvr {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .chat-input.svelte-od2gvr {
        display: flex;
        gap: 8px;
    }

    input.svelte-od2gvr {
        flex: 1;
        padding: 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        outline: none;
        transition: border-color 0.2s;
    }

    input.svelte-od2gvr:focus {
        border-color: #1976d2;
    }

    button.svelte-od2gvr {
        padding: 10px 16px;
        cursor: pointer;
        border: none;
        border-radius: 4px;
        background: #1976d2;
        color: white;
        font-size: 14px;
        transition: background-color 0.2s;
    }

    button.svelte-od2gvr:hover {
        background: #1565c0;
    }

    .gift-panel.svelte-od2gvr {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px;
        border: 1px solid #eee;
        border-radius: 4px;
        background: #fafafa;
    }

    .gift-select.svelte-od2gvr {
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #ccc;
        outline: none;
        cursor: pointer;
    }

    .gift-send-btn.svelte-od2gvr {
        background: #d84315;
    }

    .gift-send-btn.svelte-od2gvr:hover {
        background: #bf360c;
    }

    /* --- 新增状态样式 --- */
    .msg-wrapper.svelte-od2gvr {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .msg-wrapper.self.svelte-od2gvr {
        flex-direction: row-reverse;
        /*align-self: flex-end;*/
    }

    .fail-icon.svelte-od2gvr {
        color: #d32f2f;
        font-weight: bold;
        cursor: help;
    }

    .sending-icon.svelte-od2gvr {
        font-size: 12px;
        color: #999;
    }

    .room.svelte-1307awg {
        margin-top: 55px;
    }

    .at_line.svelte-1307awg {
        color: #4ef1c6;
    }
    /* (empty) .led_display {

    }*/

    .led_display.svelte-1307awg .channels:where(.svelte-1307awg) {
        display: flex;
    }

    .display.svelte-1307awg {
        position: relative;
        max-height: 720px;
        background: #000000;
        text-align: center;
    }

    .led_display.svelte-1307awg video:where(.svelte-1307awg) {
        margin: 0 auto;
        max-width: 1280px;
        max-height: 720px;
    }