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

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

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

        ::-webkit-scrollbar-thumb {
            background: #CBD5E1;
            border-radius: 99px
        }

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

        .glass {
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px)
        }

        .glow-primary {
            box-shadow: 0 0 25px rgba(99, 102, 241, .35)
        }

        .gradient-primary {
            background: linear-gradient(135deg, #6366F1, #8B5CF6, #A78BFA)
        }

        .gradient-pink {
            background: linear-gradient(135deg, #EC4899, #F472B6)
        }

        .gradient-rose {
            background: linear-gradient(135deg, #F43F5E, #FB7185)
        }

        .gradient-success {
            background: linear-gradient(135deg, #10B981, #34D399)
        }

        .gradient-warning {
            background: linear-gradient(135deg, #F59E0B, #FBBF24)
        }

        .gradient-info {
            background: linear-gradient(135deg, #3B82F6, #60A5FA)
        }

        .gradient-cyan {
            background: linear-gradient(135deg, #06B6D4, #22D3EE)
        }

        .gradient-teal {
            background: linear-gradient(135deg, #14B8A6, #2DD4BF)
        }

        .gradient-orange {
            background: linear-gradient(135deg, #F97316, #FB923C)
        }

        .gradient-violet {
            background: linear-gradient(135deg, #7C3AED, #A78BFA)
        }

        .gradient-msg {
            background: linear-gradient(135deg, #EC4899, #8B5CF6, #6366F1)
        }

        .sidebar-link {
            transition: all .25s cubic-bezier(.4, 0, .2, 1)
        }

        .sidebar-link:hover {
            transform: translateX(6px)
        }

        .sidebar-link.active {
            background: linear-gradient(135deg, #FDF2F8, #FCE7F3)
        }

        .dark .sidebar-link.active {
            background: linear-gradient(135deg, #4A044E, #831843)
        }

        .sidebar-mobile {
            transform: translateX(-100%);
            transition: transform .4s cubic-bezier(.4, 0, .2, 1)
        }

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

        .modal-overlay {
            transition: opacity .3s ease, visibility .3s ease
        }

        .modal-content {
            transition: all .45s cubic-bezier(.4, 0, .2, 1)
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible
        }

        .modal-overlay.active .modal-content {
            transform: scale(1) translateY(0);
            opacity: 1
        }

        .skeleton {
            background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
            background-size: 200% 100%;
            animation: sk 1.5s infinite
        }

        .dark .skeleton {
            background: linear-gradient(90deg, #1E293B 25%, #334155 50%, #1E293B 75%);
            background-size: 200% 100%
        }

        @keyframes sk {
            0% {
                background-position: 200% 0
            }

            100% {
                background-position: -200% 0
            }
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-8px)
            }
        }

        .float-anim {
            animation: float 3s ease-in-out infinite
        }

        @keyframes pulse-ring {
            0% {
                transform: scale(.8);
                opacity: 1
            }

            100% {
                transform: scale(2.5);
                opacity: 0
            }
        }

        .notification-badge::after {
            content: '';
            position: absolute;
            top: -1px;
            right: -1px;
            width: 10px;
            height: 10px;
            background: #EF4444;
            border-radius: 50%;
            border: 2px solid white;
            animation: pulse-ring 2s infinite
        }

        .dark .notification-badge::after {
            border-color: #0B1120
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, .3);
            transform: scale(0);
            animation: rp .6s linear;
            pointer-events: none
        }

        @keyframes rp {
            to {
                transform: scale(4);
                opacity: 0
            }
        }

        .toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9999;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            border-radius: 16px;
            background: white;
            box-shadow: 0 20px 40px -8px rgba(0, 0, 0, .18);
            font-size: 14px;
            font-weight: 600;
            color: #1E293B;
            transform: translateY(100px);
            opacity: 0;
            transition: all .4s cubic-bezier(.4, 0, .2, 1);
            min-width: 280px
        }

        .dark .toast {
            background: #1E293B;
            color: #F1F5F9;
            box-shadow: 0 20px 40px -8px rgba(0, 0, 0, .5)
        }

        .toast.show {
            transform: translateY(0);
            opacity: 1
        }

        /* Conversation layout */
        .conv-item {
            transition: all .2s ease;
            cursor: pointer
        }

        .conv-item:hover {
            background: rgba(236, 72, 153, .04)
        }

        .dark .conv-item:hover {
            background: rgba(236, 72, 153, .08)
        }

        .conv-item.active {
            background: linear-gradient(135deg, rgba(236, 72, 153, .08), rgba(139, 92, 246, .06))
        }

        .dark .conv-item.active {
            background: linear-gradient(135deg, rgba(236, 72, 153, .12), rgba(139, 92, 246, .1))
        }

        /* Chat bubbles */
        .bubble-in {
            background: #F1F5F9;
            border-radius: 18px 18px 18px 4px
        }

        .dark .bubble-in {
            background: #1E293B
        }

        .bubble-out {
            background: linear-gradient(135deg, #EC4899, #8B5CF6);
            border-radius: 18px 18px 4px 18px;
            color: white
        }

        @keyframes bubbleIn {
            from {
                opacity: 0;
                transform: translateY(12px) scale(.95)
            }

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

        .bubble-anim {
            animation: bubbleIn .3s cubic-bezier(.4, 0, .2, 1) forwards
        }

        .typing-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #94A3B8;
            display: inline-block
        }

        @keyframes typingBounce {

            0%,
            80%,
            100% {
                transform: translateY(0)
            }

            40% {
                transform: translateY(-6px)
            }
        }

        .online-ring {
            box-shadow: 0 0 0 2px white, 0 0 0 4px #10B981
        }

        .dark .online-ring {
            box-shadow: 0 0 0 2px #0F172A, 0 0 0 4px #10B981
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(20px)
            }

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

        @keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-20px)
            }

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

        .slide-right {
            animation: slideInRight .3s ease forwards
        }

        .slide-left {
            animation: slideInLeft .3s ease forwards
        }

        .emoji-btn {
            transition: transform .2s;
            display: inline-block
        }

        .emoji-btn:hover {
            transform: scale(1.3)
        }

        .attach-preview {
            border: 2px dashed #E5E7EB;
            transition: all .2s
        }

        .dark .attach-preview {
            border-color: #334155
        }

        .attach-preview:hover {
            border-color: #EC4899;
            background: rgba(236, 72, 153, .04)
        }

        .label-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 99px;
            font-size: 10px;
            font-weight: 700
        }

        /* Compose rich input */
        #composeBox:empty:before {
            content: attr(data-placeholder);
            color: #94A3B8
        }

        #composeBox:focus {
            outline: none
        }

        .star-active {
            color: #F59E0B;
            fill: #F59E0B
        }

        .folder-item {
            transition: all .2s;
            cursor: pointer;
            border-radius: 12px;
            padding: 8px 12px
        }

        .folder-item:hover {
            background: rgba(236, 72, 153, .05)
        }

        .dark .folder-item:hover {
            background: rgba(236, 72, 153, .1)
        }

        .folder-item.active {
            background: linear-gradient(135deg, #FDF2F8, #FCE7F3)
        }

        .dark .folder-item.active {
            background: rgba(236, 72, 153, .15)
        }

        @keyframes newMsgPop {
            0% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.05)
            }

            100% {
                transform: scale(1)
            }
        }

        .new-msg-pop {
            animation: newMsgPop .4s ease
        }

        .search-highlight {
            background: rgba(236, 72, 153, .2);
            border-radius: 3px
        }