/* --- Mitindo ya Ikoni ya Gumzo na Dirisha la Dukuduku (Chat Modal) --- */
            .fixed-chat-icon {
                position: fixed;
                bottom: 30px;
                right: 30px;
                background-color: var(--primary-orange);
                color: var(--white);
                width: 60px;
                height: 60px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.8em;
                cursor: pointer;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
                transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
                z-index: 1001; /* Z-INDEX ILIYOONGEZWA */
            }

            .fixed-chat-icon:hover {
                background-color: #e68a00;
                transform: translateY(-3px);
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
            }

            .chat-modal-overlay {
                display: none; /* Hidden by default */
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.6); /* Darker overlay */
                z-index: 1050; /* Juu ya kila kitu, chini ya modal */
                justify-content: center;
                align-items: center;
            }

            .chat-modal-overlay.open {
                display: flex;
            }

            .chat-modal-content {
                background-color: var(--white);
                border-radius: var(--border-radius);
                box-shadow: var(--shadow);
                width: 90%;
                max-width: 400px; /* Ukubwa wa wastani wa modal ya chat */
                display: flex;
                flex-direction: column;
                height: 80vh; /* Tumia % ya viewport height */
                max-height: 600px; /* Urefu wa juu */
                overflow: hidden;
                position: relative; /* Kwa ajili ya close button */
                transform: scale(0.9);
                opacity: 0;
                transition: transform 0.3s ease-out, opacity 0.3s ease-out;
            }

            .chat-modal-overlay.open .chat-modal-content {
                transform: scale(1);
                opacity: 1;
            }

            .chat-modal-header {
                background-color: var(--primary-orange);
                color: var(--white);
                padding: 15px 20px;
                font-size: 1.1em;
                font-weight: 700;
                border-top-left-radius: var(--border-radius);
                border-top-right-radius: var(--border-radius);
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .chat-modal-header .close-btn {
                background: none;
                border: none;
                color: var(--white);
                font-size: 1.8em;
                cursor: pointer;
                line-height: 1; /* Align 'x' correctly */
                padding: 0;
                transition: transform 0.2s ease;
            }

            .chat-modal-header .close-btn:hover {
                transform: rotate(90deg);
            }

            .chat-modal-messages {
                flex-grow: 1;
                padding: 15px;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                gap: 8px;
                background-color: #f8fbfd; /* Rangi hafifu ya background kwa ujumbe */
            }

            .chat-modal-messages .message-bubble {
                max-width: 85%;
                padding: 8px 12px;
                border-radius: 12px;
                position: relative;
                word-wrap: break-word;
                font-size: 0.9em;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Shadow ndogo kwa bubble */
            }

            .chat-modal-messages .message-bubble.user {
                background-color: var(--chat-bubble-user);
                align-self: flex-end;
                margin-left: auto;
                border-bottom-right-radius: 2px;
            }

            .chat-modal-messages .message-bubble.ai {
                background-color: var(--chat-bubble-ai);
                align-self: flex-start;
                margin-right: auto;
                border-bottom-left-radius: 2px;
            }

            .chat-modal-messages .message-sender {
                font-size: 0.7em;
                font-weight: 600;
                opacity: 0.7;
                margin-bottom: 3px;
                display: block;
            }

            .chat-modal-messages .message-timestamp {
                font-size: 0.6em;
                color: var(--text-light);
                text-align: right;
                margin-top: 3px;
                display: block;
            }

            .chat-modal-input-area {
                padding: 10px 15px;
                border-top: 1px solid #e0e0e0;
                display: flex;
                align-items: center;
                gap: 8px;
                background-color: var(--white);
            }

            .chat-modal-input-area input[type="text"] {
                flex-grow: 1;
                padding: 10px 15px;
                border: 1px solid #ccc;
                border-radius: 20px;
                font-size: 0.95em;
                outline: none;
                transition: border-color 0.3s ease;
            }

            .chat-modal-input-area input[type="text"]:focus {
                border-color: var(--accent-blue);
                box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
            }

            .chat-modal-input-area button {
                background-color: var(--accent-blue);
                color: var(--white);
                border: none;
                padding: 10px 15px;
                border-radius: 20px;
                cursor: pointer;
                font-size: 1.1em;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background-color 0.3s ease, transform 0.2s ease;
            }

            .chat-modal-input-area button:hover {
                background-color: #3071db;
                transform: translateY(-1px);
            }

            @media (max-width: 768px) {
                .fixed-chat-icon {
                    bottom: 20px;
                    right: 20px;
                    width: 50px;
                    height: 50px;
                    font-size: 1.5em;
                }
                .chat-modal-content {
                    height: 90vh; /* Take more height on smaller screens */
                    max-height: none; /* Remove max-height constraint */
                    width: 95%;
                }
                .chat-modal-header {
                    font-size: 1em;
                    padding: 12px 15px;
                }
                .chat-modal-header .close-btn {
                    font-size: 1.5em;
                }
                .chat-modal-input-area {
                    flex-direction: column; /* Stack input and button vertically */
                    align-items: stretch;
                }
                .chat-modal-input-area input[type="text"],
                .chat-modal-input-area button {
                    width: 100%;
                    margin-bottom: 8px;
                }
                .recipient-select-container {
                    margin-bottom: 10px; /* More space for select */
                }
            }