/*    HABARI AI
    SECTION 1 OF 6
    RESET • VARIABLES • FOUNDATION   */

/* VARIABLES  */
:root{

    --habari-primary:#18b54a;
    --habari-primary-dark:#10943b;
    --habari-primary-light:#eafaf0;
    --habari-white:#ffffff;
    --habari-bg:#f5f7fa;
    --habari-card:#ffffff;
    --habari-green:#16a34a;
    --habari-green-dark:#15803d;
    --habari-green-light:#22c55e;
    --habari-success:#16a34a;
    --habari-text:#1f2937;
    --habari-text-light:#6b7280;
    --habari-border:#e5e7eb;

    --habari-shadow-sm:
        0 4px 12px rgba(0,0,0,.08);
    --habari-shadow:
        0 10px 30px rgba(0,0,0,.15);
    --habari-shadow-lg:
        0 20px 60px rgba(0,0,0,.22);

    --habari-radius-xs:8px;
    --habari-radius-sm:12px;
    --habari-radius:18px;
    --habari-radius-lg:24px;
    --habari-radius-full:999px;

    --habari-transition:
        .28s ease;
    --habari-header-height:72px;
    --habari-z-overlay:9996;
    --habari-z-window:9998;
    --habari-z-toggle:9999;

}

/*  RESET  */
#habari-ai,
#habari-ai *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

#habari-ai .bubble,
#habari-ai .message .bubble {
    position:static !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    animation:none !important;
    padding:10px 14px !important;
    width:auto !important;
    max-width:min(76%, 360px) !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    white-space:pre-wrap !important;
}


#habari-ai{
    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    color:var(--habari-text);
    font-size:15px;
    line-height:1.55;
}

/*  IMAGES  */
#habari-ai img{
    display:block;
    max-width:100%;
    object-fit:cover;
}

/*  BUTTONS  */
#habari-ai button{
    border:none;
    outline:none;
    background:none;
    cursor:pointer;
    font:inherit;
    color:inherit;
}

/*  INPUTS  */
#habari-ai input{
    border:none;
    outline:none;
    background:transparent;
    font:inherit;
    color:inherit;
    width:100%;
}

/*  LINKS  */
#habari-ai a{
    color:inherit;
    text-decoration:none;
}

/*  LISTS  */
#habari-ai ul,
#habari-ai ol{
    list-style:none;
}

/*   HIDDEN  */
#habari-ai .hidden{
    display:none !important;
}

/*  ROOT CONTAINER  */
.habari-ai{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:var(--habari-z-window);
}

/* Ensure messages scroll properly in the chat body */
.habari-body #chatMessages{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding-bottom:8px; /* keep space above footer */
}

/* High-specificity fixes to ensure chat messages are always scrollable
   and avatars remain visible despite global style collisions. */
#habari-ai .habari-body{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;
}

#habari-ai .habari-body #chatMessages{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-behavior:smooth !important;
    min-height:0 !important;
    flex:1 1 auto !important;
}

/* Prevent avatar popping caused by animations or positioning from
   other global rules (e.g., hero bubbles). */
#habari-ai #chatMessages .message .avatar{
    display:block !important;
    visibility:visible !important;
    position:relative !important;
    animation:none !important;
    transform:none !important;
}

/*   ENABLE POINTER EVENTS  */
.habari-toggle,
.habari-window,
.habari-notification{
    pointer-events:auto;
}

/*  OVERLAY  */
.habari-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    opacity:0;
    visibility:hidden;
    transition:var(--habari-transition);
    z-index:var(--habari-z-overlay);
}

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

/*  SCROLLBAR  */
#habari-ai ::-webkit-scrollbar{
    width:8px;
}

#habari-ai ::-webkit-scrollbar-track{
    background:transparent;
}

#habari-ai ::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:999px;
}

#habari-ai ::-webkit-scrollbar-thumb:hover{
    background:#94a3b8;
}

/*  SELECTION  */
#habari-ai ::selection{
    background:#c8f2d7;
    color:#065f46;
}

/*  BODY LOCK  */
body.habari-open{
    overflow:hidden;
}

/*  FADE  */
@keyframes habariFade{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

/*  SLIDE UP  */
@keyframes habariSlideUp{
    from{
        opacity:0;
        transform:
            translateY(30px);
    }

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

/*  SCALE  */
@keyframes habariScale{
    from{
        opacity:0;
        transform:
            scale(.92);
    }

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

/*  PULSE  */
@keyframes habariPulse{
    0%{
        transform:scale(.9);
        opacity:.7;
    }

    70%{
        transform:scale(1.4);
        opacity:0;
    }

    100%{
        opacity:0;
    }
}

/*  HABARI AI
    SECTION 2 OF 6
    FLOATING BUTTON + NOTIFICATION  */

/*  FLOATING AI BUTTON  */
.habari-toggle{
    position:fixed;
    right:28px;
    bottom:28px;
    width:74px;
    height:74px;
    border-radius:50%;
    border:none;
    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    overflow:visible;
    box-shadow:
        0 12px 32px rgba(0,0,0,.22);
    transition:
        transform .28s ease,
        box-shadow .28s ease;
    z-index:var(--habari-z-toggle);
}

.habari-toggle:hover{
    transform:
        translateY(-4px)
        scale(1.04);
    box-shadow:
        0 18px 42px rgba(0,0,0,.28);
}

.habari-toggle:active{
    transform:
        scale(.95);
}

/*  PULSE RINGS  */
.pulse-ring{
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:2px solid
        rgba(34,197,94,.45);
    animation:
        habariPulse 2.2s infinite;
    pointer-events:none;
}

.pulse-delay{
    animation-delay:1.1s;
}

/*  ASSISTANT IMAGE  */
.assistant-image{
    position:relative;
    width:58px;
    height:58px;
    border-radius:50%;
    overflow:hidden;
    background:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3;
}

.assistant-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

/*   GLOW  */
.assistant-glow{
    position:absolute;
    inset:0;
    border-radius:50%;
    box-shadow:
        inset 0 0 18px rgba(255,255,255,.35),
        0 0 24px rgba(34,197,94,.25);
    pointer-events:none;
}

/*  ONLINE INDICATOR  */
.online-indicator{
    position:absolute;
    right:3px;
    bottom:3px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:5;
}

.online-indicator span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#22c55e;
}

/*  FLOATING NOTIFICATION  */
.habari-notification{
    position:fixed;
    right:28px;
    bottom:118px;
    width:300px;
    background:#ffffff;
    border-radius:18px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    box-shadow:
        0 16px 40px rgba(0,0,0,.18);
    opacity:0;
    visibility:hidden;
    transform:
        translateY(18px);
    transition:
        all .3s ease;
    z-index:
        calc(var(--habari-z-toggle) - 1);
}

.habari-notification.show{
    opacity:1;
    visibility:visible;
    transform:
        translateY(0);
}

.habari-notification.hide{
    display:none;
}

/*  NOTIFICATION ICON  */
.notification-icon{
    width:48px;
    height:48px;
    border-radius:14px;
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.notification-icon i{
    font-size:18px;
    color:#fff;
}

/*  NOTIFICATION TEXT  */
.notification-content{
    flex:1;
    min-width:0;
}

.notification-content h5{
    font-size:16px;
    font-weight:700;
    color:#111827;
    margin-bottom:4px;
}

.notification-content p{
    font-size:13px;
    color:#6b7280;
    line-height:1.45;
}

/*  CLOSE BUTTON  */
.notification-close{
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f3f4f6;
    color:#6b7280;
    transition:.25s;
    flex-shrink:0;
}

.notification-close:hover{
    background:#ef4444;
    color:#ffffff;
}

/*  MOBILE  */
@media(max-width:768px){
    .habari-toggle{
        width:66px;
        height:66px;
        right:18px;
        bottom:18px;
    }

    .assistant-image{
        width:52px;
        height:52px;
    }

    .habari-notification{
        right:14px;
        left:14px;
        bottom:98px;
        width:auto;
    }
}

/*  HABARI AI
    SECTION 3 OF 6
    CHAT WINDOW + HEADER  */

/*  CHAT WINDOW  */
.habari-window{
    position:fixed;
    right:28px;
    bottom:118px;
    width:430px;
    height:720px;
    max-height:calc(100vh - 150px);
    background:var(--habari-white);
    border-radius:10px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    box-shadow:var(--habari-shadow-lg);
    opacity:0;
    visibility:hidden;
    transform:
        translateY(30px)
        scale(.94);
    transition:
        opacity .30s ease,
        transform .30s ease,
        visibility .30s;
    z-index:var(--habari-z-window);
}

/*  ACTIVE  */
.habari-window.active{
    opacity:1;
    visibility:visible;
    transform:
        translateY(0)
        scale(1);
}

/*  HEADER  */
.habari-header{
    height:74px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );
    color:#fff;
    flex-shrink:0;
}

/*  PROFILE  */
.assistant-profile{
    display:flex;
    align-items:center;
    gap:12px;
}

/*  AVATAR  */
.assistant-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    overflow:hidden;
    background:#fff;
    flex-shrink:0;
}

.assistant-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/*  INFO  */
.assistant-information{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.assistant-information h3{
    font-size:24px;
    font-weight:700;
    line-height:1;
}

/*  STATUS  */
.assistant-status{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:600;
    opacity:.96;
}

.status-dot{
    width:9px;
    height:9px;
    border-radius:50%;
    background:#bbf7d0;
}

/*  ACTIONS  */
.assistant-actions{
    display:flex;
    align-items:center;
    gap:8px;
}

/*  HEADER BUTTONS  */
.action-btn{
    width:38px;
    height:38px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:.25s;
}

.action-btn i{
    font-size:15px;
}

.action-btn:hover{
    background:
        rgba(255,255,255,.18);
}

.close-btn:hover{
    background:#ef4444;
}

/*  BODY  */
.habari-body{
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:15px;
    background:#f8fafc;
    padding: 15px;
}

/*   DATE DIVIDER  */
.chat-date-divider{
    display:flex;
    justify-content:center;
    margin-bottom:18px;
}

.chat-date-divider span{
    background:#dcfce7;
    color:#166534;
    font-size:12px;
    font-weight:700;
    padding:
        5px
        12px;
    border-radius:999px;
}

/*  TOOLBAR  */
.conversation-toolbar{
    position:sticky;
    top:8px;
    display:flex;
    justify-content:flex-end;
    z-index:30;
    margin-bottom:16px;
}

/*  NEW CHAT BUTTON  */
.new-chat-btn{
    background:#16a34a;
    color:#fff;
    border:none;
    padding:10px 16px;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(22,163,74,.22);
    transition:.25s;
}

.new-chat-btn:hover{
    background:#15803d;
    transform:translateY(-2px);
}

#newConversation{
    background:#16a34a;
    color:white;
    border:none;
    border-radius:30px;
    padding:10px 18px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    transition:.3s;
}

#newConversation:hover{
    transform:translateY(-2px);
    background:#15803d;
    box-shadow:0 8px 18px rgba(22,163,74,.25);
}

/*  RESPONSIVE  */
@media(max-width:768px){
    .habari-window{
        left:12px;
        right:12px;
        bottom:12px;
        width:auto;
        height:calc(100vh - 24px);
        max-height:none;
        border-radius:22px;
    }

    .assistant-information h3{
        font-size:21px;
    }

    .habari-header{
        padding:0 14px;
    }
}

/*  HABARI AI
    SECTION 4 OF 6
    WELCOME CARD + FEATURE CARDS  */

/*  WELCOME CARD  */
.welcome-card{
    background:#ffffff;
    border:1px solid var(--habari-border);
    border-radius:22px;
    padding:22px;
    margin-bottom:18px;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
    animation:habariSlideUp .45s ease;
}

/*  TOP AREA  */
.welcome-top{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}

/*  AVATAR  */
.welcome-avatar{
    width:70px;
    height:70px;
    border-radius:18px;
    overflow:hidden;
    flex-shrink:0;
    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 18px rgba(22,163,74,.25);
}

.welcome-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* INTRO  */
.welcome-intro{
    flex:1;
    min-width:0;
}

.welcome-intro h2{
    font-size:24px;
    font-weight:700;
    color:#111827;
    margin:8px 0 6px;
}

.welcome-intro p{
    font-size:14px;
    color:#6b7280;
}

/*  PREVIEW BADGE  */
.welcome-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#dcfce7;
    color:#15803d;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
}

.welcome-badge i{
    font-size:12px;
}

/*  DESCRIPTION  */
.welcome-description{
    margin-bottom:22px;
}

.welcome-description p{
    color:#4b5563;
    font-size:14px;
    line-height:1.75;
    margin-bottom:10px;
}

/*  VERSION  */
.assistant-version{
    display:inline-block;
    margin:4px 0 12px;
    padding:5px 12px;
    border-radius:999px;
    background:#f0fdf4;
    color:#15803d;
    font-size:12px;
    font-weight:700;
}

/*  FEATURE GRID  */
.welcome-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:22px;
}

/*  FEATURE CARD  */
.feature-card{
    background:#f8fafc;
    border:1px solid var(--habari-border);
    border-radius:16px;
    padding:14px 10px;
    text-align:center;
    transition:.28s;
    cursor:pointer;
}

.feature-card:hover{
    transform:translateY(-4px);
    border-color:#22c55e;
    box-shadow:0 12px 24px rgba(22,163,74,.12);
}

/*  ICON  */
.feature-card i{
    width:42px;
    height:42px;
    margin:auto auto 10px;
    border-radius:12px;
    background:linear-gradient(
        135deg,
        #16a34a,
        #22c55e
    );
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    font-size:18px;
}

/*  TITLE  */
.feature-card h5{
    font-size:14px;
    font-weight:700;
    color:#111827;
    margin-bottom:5px;
}

/*  DESCRIPTION  */
.feature-card small{
    display:block;
    font-size:12px;
    line-height:1.45;
    color:#6b7280;
}

/*  TIP CARD  */
.welcome-tip{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px;
    border-radius:16px;
    background:#f0fdf4;
    border-left:4px solid #22c55e;
}

.welcome-tip i{
    font-size:18px;
    color:#16a34a;
    margin-top:2px;
}

.welcome-tip span{
    font-size:13px;
    color:#166534;
    line-height:1.6;
}

/*  RESPONSIVE  */
@media(max-width:768px){
    .welcome-card{
        padding:18px;
    }

    .welcome-top{
        flex-direction:column;
        text-align:center;
    }

    .welcome-avatar{
        width:64px;
        height:64px;
    }

    .welcome-intro h2{
        font-size:22px;
    }

    .welcome-features{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:420px){
    .welcome-features{
        grid-template-columns:1fr;
    }
}

/*  HABARI AI
    SECTION 5 OF 6
    CONVERSATION UI  */

/*  MESSAGE CONTAINER  */
.habari-messages{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-bottom:20px;
    padding:10px 0;
}

.habari-messages{
    flex:0 0 auto;
    width:100%;
}

/*  USER MESSAGE  */
.message{
    display:flex;
    align-items:flex-end;
    gap:10px;
    width:100%;
    max-width:100%;
    animation:messageIn .28s ease;
    margin-bottom:10px;
}

.message.ai{
    justify-content:flex-start;
    align-self:flex-start;
}

.message.user{
    justify-content:flex-end;
    align-self:flex-end;
    flex-direction:row-reverse;
}

.message .avatar{
    width:40px;
    height:40px;
    display:block;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    border:2px solid #ffffff;
    box-shadow:0 6px 16px rgba(15,23,42,.12);
    background:#fff;
}

.message .bubble{
    display:inline-flex;
    flex-direction:column;
    max-width:min(76%, 360px);
    width:auto;
    padding:10px 14px;
    border-radius:18px;
    overflow-wrap:anywhere;
    word-break:break-word;
    white-space:pre-wrap;
    line-height:1.5;
}

.message.ai .bubble{
    background:#f1f5f9;
    color:#111827;
    border:1px solid #d9e6de;
    border-top-left-radius:6px;
    border-top-right-radius:18px;
    border-bottom-right-radius:18px;
    border-bottom-left-radius:18px;
}

.message.user .bubble{
    background:linear-gradient(135deg, #16a34a, #22c55e);
    color:#ffffff;
    border:1px solid rgba(255,255,255,.18);
    border-top-right-radius:6px;
    border-top-left-radius:18px;
    border-bottom-left-radius:18px;
    border-bottom-right-radius:18px;
}

.bubble p{
    margin:0;
    font-size:0.92rem;
    line-height:1.55;
    white-space:pre-wrap;
    word-break:break-word;
}

/*  MESSAGE TIME  */
.message-time{
    font-size:11px;
    opacity:.7;
    align-self:flex-end;
}

/*  EMPTY STATE  */
.empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px;
    background:#ffffff;
    border-radius:18px;
    border:1px dashed var(--habari-border);
}

.empty-state img{
    width:72px;
    height:72px;
    margin-bottom:18px;
}

.empty-state h4{
    font-size:18px;
    margin-bottom:10px;
    color:#111827;
}

.empty-state p{
    max-width:280px;
    font-size:14px;
    color:#6b7280;
    line-height:1.6;
}

/*  TYPING  */
.typing-container{
    display:flex;
    align-items:flex-end;
    gap:12px;
    margin-top:6px;
}

.typing-container .avatar{
    width:42px;
    height:42px;
    border-radius:50%;
}

.typing-content{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.typing-name{
    font-size:12px;
    color:#6b7280;
    font-weight:600;
}

.typing-bubble{
    display:flex;
    align-items:center;
    gap:5px;
    background:#ffffff;
    padding:12px 16px;
    border-radius:18px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.typing-bubble span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#16a34a;
    animation:typingBounce 1.3s infinite;
}

.typing-bubble span:nth-child(2){
    animation-delay:.2s;
}

.typing-bubble span:nth-child(3){
    animation-delay:.4s;
}

@keyframes typingBounce{
    0%,80%,100%{
        transform:scale(.5);
        opacity:.4;
    }

    40%{
        transform:scale(1);
        opacity:1;
    }
}

.typing-dot{
width:8px;
height:8px;
border-radius:50%;
background:#16a34a;
animation:bounce 1s infinite;
}

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

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

@keyframes bounce{
0%,80%,100%{
transform:scale(.6);
}

40%{
transform:scale(1);
}
}

/*  SHIMMER LOADER  */
.message-loading{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin-top:8px;
}

.loading-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#e5e7eb;
}

.loading-content{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.loading-line{
    height:12px;
    border-radius:999px;
    background:#e5e7eb;
}

.loading-line.long{
    width:90%;
}

.loading-line.medium{
    width:70%;
}

.loading-line.short{
    width:45%;
}

.shimmer{
    background:linear-gradient(
        90deg,
        #f1f5f9 0%,
        #e2e8f0 50%,
        #f1f5f9 100%
    );
    background-size:400% 100%;
    animation:shimmerMove 1.4s infinite;
}

@keyframes shimmerMove{
    from{
        background-position:100% 0;
    }

    to{
        background-position:-100% 0;
    }
}

/*  SCROLL ANCHOR  */
#scrollAnchor{
    height:2px;
}

/*  MOBILE  */
@media(max-width:768px){
    .bubble{
        max-width:88%;
        padding:12px 14px;
    }

    .message .avatar{
        width:38px;
        height:38px;
    }
}

/*  HABARI AI
    SECTION 6
    CHAT MESSAGES + RESPONSIVE  */

/*  MESSAGE  */
/*  EMPTY STATE  */
.empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:40px 20px;
    text-align:center;
    color:#7a8792;
}

.empty-state img{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:50%;
    opacity:.9;
}

.empty-state h4{
    margin:0;
    color:#1f2937;
}

.empty-state p{
    max-width:320px;
    line-height:1.7;
    margin:0;
}

/*  LOADING  */
.message-loading{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:6px 0;
}

.loading-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#dbe5eb;
}

.loading-content{
    flex:1;
}

.loading-line{
    height:11px;
    border-radius:999px;
    margin-bottom:10px;
    background:#dfe7ed;
}

.loading-line.long{
    width:92%;
}

.loading-line.medium{
    width:72%;
}

.loading-line.short{
    width:48%;
}

.shimmer{
    background:linear-gradient(
        90deg,
        #edf2f6 25%,
        #f8fbfd 50%,
        #edf2f6 75%
    );
    background-size:400% 100%;
    animation:shimmer 1.3s infinite;
}

/*  TYPING  */
.typing-container{
    display:flex;
    align-items:flex-end;
    gap:12px;
    margin-top:6px;
}

.typing-container .avatar{
    width:42px;
    height:42px;
    border-radius:50%;
}

.typing-content{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.typing-name{
    font-size:.75rem;
    color:#64748b;
    font-weight:600;
}

.typing-bubble{
    display:flex;
    gap:6px;
    background:#fff;
    padding:14px 18px;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.typing-bubble span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#16a34a;
    animation:typing .9s infinite ease-in-out;
}

.typing-bubble span:nth-child(2){
    animation-delay:.15s;
}

.typing-bubble span:nth-child(3){
    animation-delay:.3s;
}

/*  TOAST  */
.habari-toast{
    position:fixed;
    bottom:105px;
    right:30px;
    background:#16a34a;
    color:#fff;
    padding:14px 22px;
    border-radius:12px;
    font-size:.88rem;
    z-index:99999;
    opacity:0;
    visibility:hidden;
    transform:translateY(18px);
    transition:.3s;
}

.habari-toast.show{
    opacity:1;
    visibility:visible;
    transform:none;
}

/*  HELPERS  */
.hidden{
    display:none !important;
}

/*  ANIMATION  */
@keyframes messageIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }

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

/*  SCROLLBAR  */
.habari-body::-webkit-scrollbar{
    width:8px;
}

.habari-body::-webkit-scrollbar-thumb{
    background:#b7c5d0;
    border-radius:20px;
}

.habari-body::-webkit-scrollbar-track{
    background:transparent;
}

.chat-input-container{
    display:flex;
    align-items:center;
    gap:10px;
    background:#f8fafc;
    border:1px solid #dbe4ec;
    border-radius:14px;
    padding:10px;
}

.message-input-wrapper{
    flex:1;
}

.message-input-wrapper input{
    width:100%;
    border:none;
    background:transparent;
    outline:none;
    font-size:15px;
}

.send-btn{
    width:46px;
    height:46px;
    border:none;
    border-radius:12px;
    background:#16a34a;
    color:#fff;
    cursor:pointer;
    transition:.25s;
}

.send-btn:hover{
    background:#15803d;
}

/*  RESPONSIVE  */
@media (max-width:768px){
    .habari-window{
        width:calc(100% - 24px);
        height:calc(100vh - 24px);
        left:12px;
        right:12px;
        bottom:12px;
        border-radius:18px;
        max-height:calc(100vh - 24px);
    }

    .habari-header{
        padding:12px 14px;
    }

    .habari-body{
        display:flex;
        flex-direction:column;
        padding:12px 12px 110px 12px;
        min-height:0;
        overflow:hidden;
    }

    #habari-ai .habari-body #chatMessages{
        flex:1 1 auto !important;
        min-height:0 !important;
        overflow-y:auto !important;
        padding-bottom:12px !important;
        scroll-padding-bottom:160px !important;
        gap:10px !important;
    }

    .bubble{
        max-width:84%;
    }

    .welcome-features{
        grid-template-columns:repeat(2,1fr);
    }

    .topic-chip{
        width:100%;
        justify-content:flex-start;
    }

    .chat-input-container{
        display:grid;
        align-items:center;
        grid-template-columns:
        auto
        auto
        1fr
        auto;
        gap:8px;
        background:#f8fafc;
        border:1px solid #dbe4ec;
        border-radius:16px;
        padding:8px 10px;
    }

    .message-input-wrapper{
        flex:1;
        width:calc(100% - 66px);
        min-width:0;
    }

    .send-btn{
        flex-shrink:0;
        width:46px;
        height:46px;
        border-radius:12px;
        margin-left:auto;
    }

    .input-btn{
        width:46px;
        height:46px;
    }

    .assistant-footer{
        padding:12px;
        font-size:13px;
        max-height:150px;
        overflow:auto;
    }

    .message .avatar{
        width:36px !important;
        height:36px !important;
    }
}

.chat-footer{
    position:relative;
    bottom:0;
    background:#ffffff;
    padding:12px;
    z-index:40;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-top:1px solid #ececec;
}

.chat-form{
    margin-bottom:14px;
}

.chat-body{
    display:flex;
    flex-direction:column;
    height:100%;
}

.chat-messages{
    flex:1;
    overflow-y:auto;
    padding:20px;
    scroll-behavior:smooth;
}

.assistant-footer{
    /* container look */
    padding:12px;
    margin-top:8px;
    background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border:1px solid rgba(14, 165, 96, 0.08);
    border-radius:10px;
    box-shadow:0 6px 18px rgba(15,23,42,0.06);
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#475569;
    font-size:13px;
    line-height:1.6;
}

.footer-status{
    display:flex;
    align-items:center;
    gap:6px;
    color:#15803d;
    font-size:.82rem;
    font-weight:700;
    margin-bottom:0;
}

.footer-status i{
    font-size:18px;
}

.assistant-footer p{
    color:#64748b;
    font-size:13px;
    line-height:1.6;
    margin:0;
}

@media (max-width:600px){
    .assistant-footer{ padding:10px; border-radius:8px; }
    .chat-footer{ padding:12px; }
    .chat-input-container{ gap:8px; }
    .chat-input-container .send-btn{ width:100%; max-width:100%; }
}

@media (max-width:480px){

    .habari-window{
        width:calc(100% - 16px) !important;
        left:8px !important;
        right:8px !important;
        bottom:8px !important;
        height:calc(100vh - 16px) !important;
        max-height:calc(100vh - 16px) !important;
        border-radius:16px !important;
    }

    .habari-header{
        padding:12px 14px !important;
    }

    .habari-body{
        padding:12px !important;
        padding-bottom:110px !important;
    }

    .assistant-footer{
        font-size:12px;
        padding:10px !important;
    }

    .welcome-features{
        grid-template-columns:1fr;
    }

    .bubble{
        max-width:92%;
        padding:14px;
    }

    .message .avatar{
        width:34px !important;
        height:34px !important;
    }

    .assistant-avatar img,
    .welcome-avatar img{
        width:52px;
        height:52px;
    }

    .habari-toggle{
        width:68px;
        height:68px;
    }
}

/*  SUGGESTED QUESTIONS  */
.suggestion-heading{
    display:flex;
    align-items:center;
    gap:12px;
    margin:22px 0 14px;
    padding-bottom:12px;
    border-bottom:1px solid #edf2f7;
    color:#1f2937;
    font-size:15px;
    font-weight:700;
}

.suggestion-heading i{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#ecfdf5;
    color:#16a34a;
    font-size:15px;
}

/*  CHIPS WRAPPER  */
.quick-topics{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:28px;
    padding-bottom:18px;
    border-bottom:1px solid #edf2f7;
}

.welcome-card,
.quick-topics{
    transition:.35s ease;
}

.welcome-card.hide,
.quick-topics.hide{
    opacity:0;
    visibility:hidden;
    height:0;
    overflow:hidden;
    margin:0;
    padding:0;
}

/*  CHIP  */
.topic-chip{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    margin-bottom:0;
    border:2px solid #d9e6dc !important;
    background:#ffffff !important;
    border-radius:12px;
    color:#374151;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    transition:
        background .25s,
        color .25s,
        border-color .25s,
        box-shadow .25s,
        transform .25s;
}

.topic-chip span{
    color:inherit;
    transition:color .25s;
}

/*  ICON  */
.topic-chip i{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:#ecfdf5;
    color:#16a34a;
    font-size:13px;
    transition:.25s;
}

/*  HOVER  */
.topic-chip:hover,
.topic-chip:focus{
    background:#16a34a !important;
    border:1px solid #16a34a !important;
    color:#ffffff !important;
    transform:translateY(-3px);
    box-shadow:0 12px 25px rgba(22,163,74,.25);
}

.topic-chip:hover span,
.topic-chip:hover small,
.topic-chip:hover strong{
    color:#ffffff !important;
}

.topic-chip:hover i{
    background:rgba(255,255,255,.18) !important;
    color:#ffffff !important;
}

/*  ACTIVE  */
.topic-chip:active{
    transform:scale(.97);
}

/*  FOCUS  */
.topic-chip:focus-visible{
    outline:3px solid rgba(22,163,74,.25);
    outline-offset:2px;
}

/*  COMING SOON  */
.topic-chip[data-coming-soon]{
    position:relative;
}

.topic-chip[data-coming-soon]::after{
    content:"Soon";
    position:absolute;
    top:-8px;
    right:-6px;
    padding:2px 7px;
    border-radius:999px;
    background:#f59e0b;
    color:#ffffff;
    font-size:10px;
    font-weight:700;
}

/*  RESPONSIVE  */
@media (max-width:768px){
    .quick-topics{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .topic-chip{
        width:100%;
        justify-content:flex-start;
    }
}

@media (max-width:480px){
    .quick-topics{
        grid-template-columns:1fr;
    }

    .topic-chip{
        padding:12px 14px;
        font-size:14px;
    }

    .topic-chip i{
        width:32px;
        height:32px;
        font-size:14px;
    }
}

/*   MESSAGE VISIBILITY  */
.habari-messages .message,
.habari-messages .message.show,
.message,
.message.show,
.message .bubble,
.message .bubble p{
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
}

#habari-ai .message .bubble {
    position:static !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    animation:none !important;
    box-shadow:none !important;
    min-width:0 !important;
    width:auto !important;
    padding:10px 14px !important;
    border-radius:18px !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    white-space:pre-wrap !important;
}

#habari-ai #chatMessages .message{
    justify-content:flex-start !important;
}

#habari-ai #chatMessages .message.user{
    justify-content:flex-end !important;
}

#habari-ai #chatMessages .message.ai{
    justify-content:flex-start !important;
}

#habari-ai #chatMessages .bubble{
    display:inline-flex !important;
    flex-direction:column !important;
    width:auto !important;
    max-width:min(76%, 360px) !important;
    padding:10px 14px !important;
}

/* Force avatar visibility and placement */
.message .avatar{
    display:block !important;
    width:40px !important;
    height:40px !important;
    flex-shrink:0 !important;
    order:0 !important;
    margin:0 !important;
    visibility:visible !important;
}

.message.ai .avatar{
    order:1 !important;
    margin-right:8px !important;
}

.message.user .avatar{
    order:2 !important;
    margin-left:8px !important;
}

/* ensure user bubble and avatar align to right */
.message.user{
    justify-content:flex-end !important;
    flex-direction:row-reverse !important;
}

/* ensure ai bubble and avatar align to left */
.message.ai{
    justify-content:flex-start !important;
    flex-direction:row !important;
}

/* Ensure user bubble background and text are visible even when global rules unset backgrounds */
#habari-ai #chatMessages .message.user .bubble{
    background-image: linear-gradient(135deg, #16a34a, #22c55e) !important;
    background-color: #16a34a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
}

/* Mobile responsiveness for the Habari chat window */
@media (max-width: 600px){
    #habari-ai .habari-window{
        right:8px !important;
        left:8px !important;
        top:80px !important;
        bottom:8px !important;
        /*
        width:calc(100% - 24px) !important;
        height:60vh !important;
        max-height:calc(100vh - 80px) !important;
        border-radius:12px !important;
        */
        width:auto !important;
        height:auto !important;
        max-height:calc(100dvh - 88px) !important;
        border-radius:18px !important;
        display:flex;
        flex-direction:column;
    }

    #habari-ai .habari-header{ padding:12px !important; }
    #habari-ai .habari-body{ padding:12px !important; padding-bottom:96px !important; }
    #habari-ai .habari-body #chatMessages{ gap:10px !important; }
    .message .avatar{ width:36px !important; height:36px !important; }
}

#habari-ai #chatMessages{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding-bottom:15px;
}

.empty-state{
    position:absolute;
    inset:100px 20px auto 20px;
}

.emoji-picker{
    position:absolute;
    bottom:70px;
    left:15px;
    background:white;
    border-radius:15px;
    display:none;
    gap:10px;
    padding:10px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.emoji-picker.show{
    display:flex;
}

.emoji-picker span{
    cursor:pointer;
    font-size:24px;
    transition:.2s;
}

.emoji-picker span:hover{
    transform:scale(1.25);
}

.habari-ai.chat-open .habari-toggle{
    display:none;
}

/* TEMPORARILY DISABLE HABARI AI FLOATING BUTTON AND AI NOTIFICATIONS
   The AI assistant remains in the project but the floating
   button is hidden until Habari AI is fully ready.
 */

#habari-ai .habari-toggle {
    display: none !important;
}

/* Temporarily disable Habari AI notification */
#habari-ai .habari-notification {
    display: none !important;
}