* {
        scrollbar-width: thin;
        scrollbar-color: #94a3b8 transparent
    }

    ::-webkit-scrollbar {
        width: 6px;
        height: 6px
    }

    ::-webkit-scrollbar-track {
        background: transparent
    }

    ::-webkit-scrollbar-thumb {
        background: #94a3b8;
        border-radius: 3px
    }

    .dark ::-webkit-scrollbar-thumb {
        background: #475569
    }

    body {
        font-family: 'Inter', sans-serif
    }

    .font-jakarta {
        font-family: 'Plus Jakarta Sans', sans-serif
    }

    .sidebar-link {
        transition: all .2s ease
    }

    .sidebar-link:hover {
        background: rgba(59, 130, 246, 0.08)
    }

    .sidebar-link.active {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08));
        color: #3b82f6;
        border-right: 3px solid #3b82f6
    }

    .dark .sidebar-link:hover {
        background: rgba(59, 130, 246, 0.15)
    }

    .dark .sidebar-link.active {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.1))
    }

    .status-badge {
        font-size: .7rem;
        padding: .2rem .6rem;
        border-radius: 9999px;
        font-weight: 600;
        white-space: nowrap
    }

    .toast-enter {
        animation: toastIn .4s ease
    }

    .toast-exit {
        animation: toastOut .3s ease forwards
    }

    @keyframes toastIn {
        from {
            transform: translateX(100%);
            opacity: 0
        }

        to {
            transform: translateX(0);
            opacity: 1
        }
    }

    @keyframes toastOut {
        from {
            transform: translateX(0);
            opacity: 1
        }

        to {
            transform: translateX(100%);
            opacity: 0
        }
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(16px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .fade-in-up {
        animation: fadeInUp .5s ease forwards
    }

    @keyframes msgIn {
        from {
            opacity: 0;
            transform: translateY(8px) scale(0.95)
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1)
        }
    }

    .msg-in {
        animation: msgIn .3s ease
    }

    @keyframes typing {

        0%,
        60%,
        100% {
            opacity: .3;
            transform: translateY(0)
        }

        30% {
            opacity: 1;
            transform: translateY(-3px)
        }
    }

    .typing-dot {
        width: 6px;
        height: 6px;
        background: #94a3b8;
        border-radius: 50%;
        display: inline-block;
        animation: typing 1.4s infinite
    }

    .typing-dot:nth-child(2) {
        animation-delay: .2s
    }

    .typing-dot:nth-child(3) {
        animation-delay: .4s
    }

    .dropdown-panel {
        transform: scale(.95);
        opacity: 0;
        pointer-events: none;
        transition: all .2s ease
    }

    .dropdown-panel.open {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto
    }

    .modal-overlay {
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease
    }

    .modal-overlay.open {
        opacity: 1;
        pointer-events: auto
    }

    .modal-content {
        transform: scale(.95) translateY(10px);
        transition: transform .3s ease
    }

    .modal-overlay.open .modal-content {
        transform: scale(1) translateY(0)
    }

    @media(max-width:1023px) {
        .sidebar {
            transform: translateX(-100%);
            transition: transform .3s ease
        }

        .sidebar.open {
            transform: translateX(0)
        }
    }

    .overlay {
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease
    }

    .overlay.open {
        opacity: 1;
        pointer-events: auto
    }

    .tab-btn {
        transition: all .2s ease;
        cursor: pointer
    }

    .tab-btn.active {
        background: white;
        color: #2563eb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
    }

    .dark .tab-btn.active {
        background: #334155;
        color: #60a5fa
    }

    .action-btn {
        transition: all .15s ease;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center
    }

    .action-btn:hover {
        transform: scale(1.1)
    }

    .chat-item {
        transition: all .2s ease;
        cursor: pointer;
        position: relative
    }

    .chat-item:hover {
        background: rgba(59, 130, 246, .05)
    }

    .dark .chat-item:hover {
        background: rgba(59, 130, 246, .1)
    }

    .chat-item.active {
        background: linear-gradient(135deg, rgba(59, 130, 246, .12), rgba(59, 130, 246, .06));
        border-left: 3px solid #3b82f6
    }

    .dark .chat-item.active {
        background: linear-gradient(135deg, rgba(59, 130, 246, .2), rgba(59, 130, 246, .1))
    }

    .message-bubble {
        max-width: 75%;
        word-wrap: break-word
    }

    .bubble-me {
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
        border-radius: 18px 18px 4px 18px
    }

    .bubble-them {
        background: #f1f5f9;
        color: #0f172a;
        border-radius: 18px 18px 18px 4px
    }

    .dark .bubble-them {
        background: #334155;
        color: #f1f5f9
    }

    .online-dot {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 12px;
        height: 12px;
        border: 2px solid white;
        border-radius: 50%
    }

    .dark .online-dot {
        border-color: #1e293b
    }

    .emoji-btn {
        transition: all .15s ease;
        cursor: pointer;
        font-size: 20px;
        padding: 6px;
        border-radius: 8px
    }

    .emoji-btn:hover {
        background: rgba(59, 130, 246, .1);
        transform: scale(1.15)
    }

    .chat-view-hidden {
        display: none
    }

    @media(min-width:1024px) {
        .chat-view-hidden {
            display: flex
        }
    }

    @media(prefers-reduced-motion:reduce) {

        *,
        *::before,
        *::after {
            animation-duration: .01ms !important;
            transition-duration: .01ms !important
        }
    }