*{
    outline: none;
}
        :root {
            --primary-teal: #008080;
            --primary-teal-light: #00a3a3;
            --primary-teal-dark: #006666;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .bg-teal {
            background-color: var(--primary-teal);
        }
        
        .bg-teal-light {
            background-color: var(--primary-teal-light);
        }
        
        .bg-teal-dark {
            background-color: var(--primary-teal-dark);
        }
        
        .text-teal {
            color: var(--primary-teal);
        }
        
        .border-teal {
            border-color: var(--primary-teal);
        }
        
        .btn-teal {
            background-color: var(--primary-teal);
            color: white;
        }
        
        .btn-teal:hover {
            background-color: var(--primary-teal-dark);
        }
        
        .tracking-progress {
            position: relative;
        }
        
        .tracking-progress::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 4px;
            background-color: #e5e7eb;
            transform: translateY(-50%);
            z-index: 1;
        }
        
        .tracking-step {
            position: relative;
            z-index: 2;
        }
        
        .tracking-step.active .tracking-dot {
            background-color: var(--primary-teal);
            border-color: var(--primary-teal);
        }
        
        .tracking-step.completed .tracking-dot {
            background-color: var(--primary-teal);
            border-color: var(--primary-teal);
        }
        
        .tracking-step.completed::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 4px;
            background-color: var(--primary-teal);
            transform: translateY(-50%);
            z-index: 1;
        }
        
        .chat-container {
            height: 400px;
            overflow-y: auto;
        }
        
        .package-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .animate-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        ::-webkit-scrollbar-thumb {
            background: var(--primary-teal);
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-teal-dark);
        }
         .gradient-bg {
            background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-teal-dark) 50%, var(--primary-teal-light) 100%);
        }
        .card-shadow {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .input-focus:focus {
            box-shadow: 0 0 0 3px var(--primary-teal);
        }
        .toggle-form {
            transition: all 0.3s ease;
        }
        .toggle-form.active {
            transform: translateY(0);
            opacity: 1;
            z-index: 10;
        }
        .toggle-form.inactive {
            transform: translateY(-20px);
            opacity: 0;
            z-index: 1;
        }

        .sidebar {
            transition: all 0.3s;
        }
        .chat-message {
            max-width: 80%;
        }
        .customer-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        .unread-badge {
            position: absolute;
            top: -5px;
            right: -5px;
        }
        .active-chat {
            background-color: #f3f4f6;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

           .chat-container {
            height: calc(100vh - 120px);
        }
        .messages-container {
            height: calc(100% - 80px);
            scroll-behavior: smooth;
        }
        .typing-indicator:after {
            content: '.';
            animation: dots 1.5s steps(5, end) infinite;
        }
        @keyframes dots {
            0%, 20% {
                color: rgba(0,0,0,0);
                text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
            }
            40% {
                color: #4b5563;
                text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
            }
            60% {
                text-shadow: .25em 0 0 #4b5563, .5em 0 0 rgba(0,0,0,0);
            }
            80%, 100% {
                text-shadow: .25em 0 0 #4b5563, .5em 0 0 #4b5563;
            }
        }
        .message-animation {
            animation: messageAppear 0.3s ease-out;
        }
        @keyframes messageAppear {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }