:root {
    --habbix-chat-blue: #0055a4;
    --habbix-chat-white: #ffffff;
    --habbix-chat-red: #ef4135;
    --habbix-chat-ink: #111827;
}

#toolbar-chat-input-container {
    border-radius: 13px !important;
    background: transparent !important;
}

#toolbar-chat-input-container .nitro-chat-input-container {
    width: 100% !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 10px 0 14px !important;
    border: 2px solid transparent !important;
    border-radius: 13px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(232, 239, 248, 0.98)) padding-box,
        linear-gradient(90deg,
            var(--habbix-chat-blue) 0%,
            var(--habbix-chat-blue) 33.33%,
            var(--habbix-chat-white) 33.33%,
            var(--habbix-chat-white) 66.66%,
            var(--habbix-chat-red) 66.66%,
            var(--habbix-chat-red) 100%) border-box !important;
    box-shadow:
        0 5px 0 rgba(0, 0, 0, 0.20),
        0 10px 22px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    overflow: hidden !important;
}

#toolbar-chat-input-container .nitro-chat-input-container::before {
    content: "";
    position: absolute;
    height: 4px !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(90deg,
        rgba(0, 85, 164, 0.95) 0%,
        rgba(0, 85, 164, 0.95) 33.33%,
        rgba(255, 255, 255, 0.95) 33.33%,
        rgba(255, 255, 255, 0.95) 66.66%,
        rgba(239, 65, 53, 0.95) 66.66%,
        rgba(239, 65, 53, 0.95) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

#toolbar-chat-input-container .nitro-chat-input-container .input-sizer {
    position: relative !important;
    z-index: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#toolbar-chat-input-container .nitro-chat-input-container input.chat-input {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--habbix-chat-ink) !important;
    caret-color: var(--habbix-chat-blue) !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

#toolbar-chat-input-container .nitro-chat-input-container input.chat-input::placeholder {
    color: rgba(17, 24, 39, 0.62) !important;
    opacity: 1 !important;
}

#toolbar-chat-input-container .nitro-chat-input-container .chat-style-selector,
#toolbar-chat-input-container .nitro-chat-input-container [class*="chat-style"] {
    position: relative !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
}

#toolbar-chat-input-container .nitro-chat-input-container:focus-within {
    box-shadow:
        0 0 0 2px rgba(0, 85, 164, 0.22),
        0 0 0 4px rgba(239, 65, 53, 0.15),
        0 8px 22px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

@media (max-width: 575.98px) {
    #toolbar-chat-input-container .nitro-chat-input-container {
        border-radius: 12px !important;
    }
}