.support-chat-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 58px;
    height: 58px;
    z-index: 1050;
}

.support-chat-launcher {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 10px 28px rgba(20, 85, 213, .38);
    color: #fff;
    cursor: pointer;
    outline: none;
    transition: transform .2s ease, background .2s ease;
}

.support-chat-launcher:hover {
    background: #0d3b9d;
    transform: translateY(-2px);
}

.support-chat-launcher > i { font-size: 23px; }

.support-chat-launcher-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 11px;
    background: var(--orange);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.support-chat-panel {
    position: absolute;
    right: 0;
    bottom: 74px;
    display: flex;
    width: 370px;
    height: min(560px, calc(100vh - 120px));
    overflow: hidden;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transform: translateY(15px) scale(.98);
    transform-origin: right bottom;
    border: 1px solid #e3e8ef;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(25, 45, 76, .2);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.support-chat-widget.is-open .support-chat-panel {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.support-chat-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 19px 20px;
    background: linear-gradient(135deg, var(--primary), #0d3b9d);
    color: #fff;
}

.support-chat-header strong,
.support-chat-header small { display: block; }
.support-chat-header strong { margin-top: 3px; font-size: 18px; }
.support-chat-header small { margin-top: 2px; color: rgba(255,255,255,.75); font-size: 11px; }
.support-chat-online { color: #d8ffe6; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.support-chat-online i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #53e58a; }
.support-chat-widget.is-busy .support-chat-online { color: #fff0d6; }
.support-chat-widget.is-busy .support-chat-online i { background: var(--orange); }
.support-chat-widget.is-offline .support-chat-online { color: #e1e7f2; }
.support-chat-widget.is-offline .support-chat-online i { background: #aeb9c8; }
.support-chat-header button { border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 18px; outline: none; }

.support-chat-guest-fields {
    display: flex;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid #e8edf3;
    background: #f7f9fc;
}

.support-chat-guest-fields .form-control { height: 34px; min-width: 0; font-size: 12px; }
.support-chat-messages { flex: 1; overflow-y: auto; padding: 18px; background: #fbfcfe; }
.support-chat-message { clear: both; max-width: 82%; margin-bottom: 15px; }
.support-chat-message-name { display: block; margin-bottom: 3px; color: #7c899d; font-size: 11px; font-weight: 700; }
.support-chat-message p { max-width: 100%; margin: 0 0 3px; padding: 10px 12px; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; border: 1px solid #e5eaf0; border-radius: 4px 13px 13px; background: #fff; color: #3f4c60; font-size: 13px; line-height: 1.5; }
.support-chat-message time { color: #9ca6b4; font-size: 10px; }
.support-chat-message.is-mine { float: right; text-align: right; }
.support-chat-message.is-mine p { border-color: var(--primary); border-radius: 13px 4px 13px 13px; background: var(--primary); color: #fff; text-align: left; }
.support-chat-error { color: var(--danger); font-size: 12px; }

.support-chat-composer { display: flex; gap: 9px; padding: 12px; border-top: 1px solid #e8edf3; background: #fff; }
.support-chat-composer textarea { flex: 1; min-height: 42px; max-height: 90px; padding: 10px 11px; resize: none; border: 1px solid #dfe5ed; border-radius: 8px; outline: none; font-size: 13px; }
.support-chat-composer textarea:focus { border-color: var(--primary); }
.support-chat-composer .btn { width: 44px; padding: 0; border-radius: 8px; }
.support-chat-composer .btn:disabled { opacity: .6; }

@media (max-width: 480px) {
    .support-chat-widget { right: 15px; bottom: 15px; }
    .support-chat-panel { position: fixed; right: 10px; bottom: 85px; left: 10px; width: auto; height: calc(100vh - 105px); }
}