/* Custom scrollbar for better aesthetics, if needed */
        /* You can customize this further */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Specific styles for the active dashboard link to match the image */
        .sidebar-nav-item.active {
            background-color: #FCE7F3; /* Light pink background */
            color: #EC4899; /* Darker pink text color */
            font-weight: 600;
            border-radius: 8px;
        }
         /* Styling for chat messages to mimic common chat UIs */
        .message-bubble {
            max-width: 75%;
            padding: 0.75rem 1rem;
            border-radius: 1.25rem; /* More rounded corners */
            margin-bottom: 0.5rem;
            word-wrap: break-word; /* Ensure long words wrap */
        }
        .message-bubble.sent {
            background-color: #EC4899; /* Pink for sent messages */
            color: white;
            align-self: flex-end; /* Align to the right */
            border-bottom-right-radius: 0.5rem; /* Sharper corner on one side */
        }
        .message-bubble.received {
            background-color: #E5E7EB; /* Light gray for received messages */
            color: #374151; /* Darker text */
            align-self: flex-start; /* Align to the left */
            border-bottom-left-radius: 0.5rem; /* Sharper corner on one side */
        }
         /* Styling for switch toggle */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px; /* Wider for more space */
            height: 24px; /* Taller for more space */
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 24px; /* Half of height for rounded edges */
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 16px; /* Smaller than container */
            width: 16px; /* Smaller than container */
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .toggle-slider {
            background-color: #EC4899; /* Pink when checked */
        }
        input:focus + .toggle-slider {
            box-shadow: 0 0 1px #EC4899;
        }
        input:checked + .toggle-slider:before {
            -webkit-transform: translateX(20px); /* Move 20px (44 - 4 - 4 - 16 = 20) */
            -ms-transform: translateX(20px);
            transform: translateX(20px);
        }
             @media(max-width:786px){
            .header{
                margin-top: 56px;
            }
        }
        @media(max-width:430px){
            .header{
                margin-top: 56px;
            }
        }