.startWebsocketServerButton {
    @extend %chat-button;
    background: var(--status-success-text) !important;

    &:hover {
        background: var(--status-success-text-hover) !important;
    }
}

@mixin borderRadius($top-left, $top-right, $bottom-right, $bottom-left) {
    border-top-left-radius: $top-left;
    border-top-right-radius: $top-right;
    border-bottom-right-radius: $bottom-right;
    border-bottom-left-radius: $bottom-left;
}



%chat-button {
    background: var(--accent-light);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 0px none;
    padding: 6px 10px;
    line-height: 1.2;
    font-size: 14px;
    @include borderRadius(5px, 5px, 5px, 5px);

    &:hover {
        background: var(--accent);
    }

    &:disabled {
        cursor: not-allowed;
        opacity: 0.7;
        background: var(--text-muted);

        &:hover {
            cursor: not-allowed;
        }
    }
}

@mixin infoText() {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85em;
    margin: 12px 0;
}

.zozoChatGlobalClass {
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
    position: relative;

    input,
    textarea {
        padding: 6px 10px;
        line-height: 1.2;
        font-size: 14px;
        @include borderRadius(5px, 5px, 5px, 5px);
    }

    h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    button {
        @extend %chat-button;
    }

    p {
        line-height: 1.3;
    }

    .error {
        text-align: center;
        color: var(--status-error-text);
        background-color: var(--status-error-bg);
        font-size: 0.85em;
        padding: 8px;
        border-radius: 4px;

    }
}

.info,
.infoText {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85em;
    margin: 12px 0;
}