/* =========================================================
   MASJID360 LIVE CHAT
   USER-SIDE PREMIUM UI
   Fixed layout / spacing / logo / support-hours presentation
========================================================= */

:root{
    --m360-green:#087a5c;
    --m360-green-dark:#064f3d;
    --m360-green-deep:#033d2e;
    --m360-green-soft:#eaf6f2;
    --m360-gold:#d4af37;
    --m360-text:#173c35;
    --m360-muted:#718680;
    --m360-border:#dce8e4;
    --m360-white:#fff;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    margin:0;
    padding:0;
}

body{
    font-family:Inter,Poppins,Arial,sans-serif;
    color:var(--m360-text);
    background:
        radial-gradient(circle at 8% 35%,rgba(8,122,92,.08),transparent 30%),
        radial-gradient(circle at 92% 45%,rgba(212,175,55,.07),transparent 30%),
        #f5faf8;
    overflow-x:hidden;
}

button,
input,
textarea,
select{
    font:inherit;
}

a{
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
}

/* =========================================================
   PAGE
========================================================= */

.page-shell{
    width:100%;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* =========================================================
   HEADER
========================================================= */

.topbar{
    width:100%;
    height:88px;
    min-height:88px;
    background:#fff;
    border-bottom:1px solid #e4ece8;
    box-shadow:0 3px 18px rgba(6,78,59,.035);
    position:relative;
    z-index:50;
}

.topbar-inner{
    width:min(1320px,calc(100% - 56px));
    height:88px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--m360-green-dark);
    white-space:nowrap;
}

.brand-logo{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    max-width:56px !important;
    max-height:56px !important;
    flex:0 0 56px !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    line-height:0;
}

.brand-logo img{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    max-width:56px !important;
    max-height:56px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    object-fit:contain !important;
    object-position:center !important;
}

.brand-info{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.brand-name{
    color:var(--m360-green-dark);
    font-size:21px;
    line-height:1;
    font-weight:800;
}

.brand-tagline{
    color:#7b8b86;
    font-size:9px;
    line-height:1;
    font-weight:700;
    letter-spacing:.7px;
}

.top-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:16px;
    margin-left:auto;
    white-space:nowrap;
}

.presence{
    min-height:36px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 14px;
    border-radius:30px;
    background:#f1f5f3;
    color:#73837e;
    font-size:10px;
    font-weight:800;
}

.presence i,
.status-dot{
    width:8px;
    height:8px;
    min-width:8px;
    border-radius:50%;
    display:block;
    background:#b8c2be;
}

.presence.online i,
.status-dot.online{
    background:#16a34a;
    box-shadow:0 0 0 4px rgba(22,163,74,.10);
}

.presence.offline i,
.status-dot.offline{
    background:#aeb9b5;
}

.top-divider{
    width:1px;
    height:28px;
    background:#e1e8e5;
}

.back-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--m360-green);
    font-size:11px;
    font-weight:800;
}

.back-link:hover{
    color:var(--m360-green-dark);
}

.back-icon{
    font-size:17px;
    line-height:1;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.client-layout{
    width:min(1320px,calc(100% - 56px));
    margin:0 auto;
    padding:48px 0 58px;
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:58px;
    align-items:center;
    flex:1;
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.intro{
    min-width:0;
}

.eyebrow{
    display:inline-block;
    margin:0 0 20px;
    color:var(--m360-gold);
    font-size:10px;
    font-weight:800;
    letter-spacing:3px;
}

.intro h1{
    margin:0 0 24px;
    color:var(--m360-text);
    font-size:clamp(48px,5vw,70px);
    line-height:.98;
    letter-spacing:-2.8px;
    font-weight:800;
}

.intro h1 strong{
    color:var(--m360-green);
    font-weight:800;
}

.intro-text{
    max-width:590px;
    margin:0;
    color:#718680;
    font-size:15px;
    line-height:1.85;
}

.trust-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:22px;
    margin-top:27px;
}

.trust-row span{
    color:#41645c;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.trust-row i{
    color:var(--m360-green);
    font-style:normal;
    margin-right:5px;
}

/* =========================================================
   SUPPORT HOURS
========================================================= */

.support-hours-card{
    width:100%;
    max-width:550px;
    margin-top:25px;
    padding:14px 16px;
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    background:linear-gradient(135deg,#eef9f5,#fff);
    border:1px solid #d6e8e2;
    border-radius:16px;
    box-shadow:0 10px 26px rgba(8,94,70,.055);
}

.hours-icon{
    width:42px;
    height:42px;
    min-width:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:#fff;
    box-shadow:0 4px 14px rgba(6,78,59,.06);
    font-size:19px;
}

.hours-content{
    min-width:0;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:2px !important;
}

.hours-content strong{
    display:block;
    color:#173c35;
    font-size:11px;
    line-height:1.25;
    font-weight:800;
}

.hours-content span{
    display:block;
    color:#718680;
    font-size:10px;
    line-height:1.3;
}

.hours-content b{
    display:block;
    color:var(--m360-green);
    font-size:11px;
    line-height:1.3;
    font-weight:800;
}

.hours-content small{
    display:block;
    margin-top:2px;
    color:#83918d;
    font-size:8px;
    line-height:1.4;
}

/* =========================================================
   MINI CARD
========================================================= */

.mini-card{
    width:100%;
    max-width:550px;
    margin-top:14px;
    padding:17px 19px;
    display:flex;
    align-items:center;
    gap:15px;
    background:#fff;
    border:1px solid var(--m360-border);
    border-radius:17px;
    box-shadow:0 13px 32px rgba(8,94,70,.065);
}

.mini-icon{
    width:45px;
    height:45px;
    min-width:45px;
    flex:0 0 45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
    background:#e8f5f1;
    color:var(--m360-green);
    font-size:20px;
}

.mini-content{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.mini-content b{
    color:#183d35;
    font-size:12px;
    font-weight:800;
}

.mini-content small{
    color:#7c8e89;
    font-size:9px;
    line-height:1.45;
}

/* =========================================================
   CHAT CARD
========================================================= */

.chat-card{
    width:100%;
    min-width:0;
    background:#fff;
    border:1px solid var(--m360-border);
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 25px 70px rgba(6,78,59,.10);
}

/* =========================================================
   START FORM
========================================================= */

.start-form{
    padding:36px 38px 32px;
}

.form-head{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:17px;
}

.support-avatar{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    max-width:56px !important;
    max-height:56px !important;
    flex:0 0 56px !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    overflow:hidden !important;
    border-radius:15px;
    background:#fff;
    line-height:0;
}

.support-avatar img{
    width:56px !important;
    height:56px !important;
    min-width:56px !important;
    min-height:56px !important;
    max-width:56px !important;
    max-height:56px !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:contain !important;
    object-position:center !important;
}

.form-title{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.form-title h2{
    margin:0;
    color:#153b34;
    font-size:20px;
    line-height:1.1;
    font-weight:800;
}

.form-title span{
    display:flex;
    align-items:center;
    gap:6px;
}

.form-title span i{
    width:8px;
    height:8px;
    min-width:8px;
    border-radius:50%;
    background:#b8c2be;
}

.form-title span.online i{
    background:#16a34a;
    box-shadow:0 0 0 4px rgba(22,163,74,.09);
}

.form-title em{
    color:#71837e;
    font-size:10px;
    font-style:italic;
}

.form-copy{
    margin:0 0 17px;
    color:#78908a;
    font-size:11px;
    line-height:1.65;
}

/* =========================================================
   AVAILABILITY MESSAGE
   IMPORTANT: keep this as a distinct full-width block.
========================================================= */

.availability-message{
    width:100% !important;
    min-height:52px;
    margin:0 0 20px !important;
    padding:10px 12px !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;

    gap:10px !important;

    border:1px solid #dbeae5;
    border-radius:12px;

    background:#f5fbf8;
}

.availability-message.offline{
    background:#fbfaf6;
    border-color:#ece4ce;
}

.availability-icon{
    width:28px;
    height:28px;
    min-width:28px;
    flex:0 0 28px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:9px;
    background:#fff;

    font-size:13px;
}

.availability-message > div{
    min-width:0;
    flex:1;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:2px !important;
}

.availability-message strong{
    display:block !important;
    color:#1a463d;
    font-size:10px;
    line-height:1.35;
    font-weight:800;
}

.availability-message small{
    display:block !important;
    color:#788983;
    font-size:9px;
    line-height:1.4;
}

/* =========================================================
   FORM FIELDS
========================================================= */

.form-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.start-form label{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:7px;
    color:#24473f;
    font-size:10px;
    line-height:1.2;
    font-weight:800;
}

/* Required star stays beside label text */
.start-form label > span{
    display:inline !important;
    color:#c18c25;
    font-size:inherit;
    font-weight:800;
}

.start-form input,
.start-form select{
    width:100%;
    height:51px;
    min-height:51px;
    padding:0 14px;

    border:1px solid #d8e5e1;
    border-radius:12px;

    outline:none;
    background:#fff;
    color:#294b43;

    font-family:inherit;
    font-size:11px;
    font-weight:600;

    transition:border-color .2s ease,box-shadow .2s ease;
}

.start-form input::placeholder{
    color:#a3afac;
}

.start-form input:hover,
.start-form select:hover{
    border-color:#bfd5ce;
}

.start-form input:focus,
.start-form select:focus{
    border-color:var(--m360-green);
    box-shadow:0 0 0 4px rgba(8,122,92,.065);
}

.subject-label{
    margin-top:17px;
}

/* =========================================================
   START BUTTON
========================================================= */

.primary{
    width:100%;
    height:58px;
    min-height:58px;

    margin-top:21px;
    padding:0 20px;

    border:0;
    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    background:linear-gradient(135deg,#078267,#006d55);

    color:#fff;
    font-family:inherit;
    font-size:13px;
    font-weight:800;

    box-shadow:0 13px 27px rgba(0,105,82,.19);

    transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
}

.primary span,
.primary strong{
    color:#fff;
}

.primary strong{
    margin-left:auto;
    font-size:18px;
}

.primary:hover{
    transform:translateY(-2px);
    box-shadow:0 17px 32px rgba(0,105,82,.27);
}

.primary:hover strong{
    transform:translateX(4px);
}

.primary:active{
    transform:translateY(0);
}

.primary:disabled{
    opacity:.72;
    cursor:wait;
    transform:none !important;
}

.privacy{
    display:block;
    margin-top:10px;
    color:#8b9b97;
    font-size:7px;
    line-height:1.5;
    text-align:center;
}

/* =========================================================
   LIVE CHAT HEADER
========================================================= */

.chat-head{
    min-height:78px;
    padding:13px 20px;
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border-bottom:1px solid #e5ece9;
}

.chat-head .support-avatar{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    max-width:52px !important;
    max-height:52px !important;
    flex-basis:52px !important;
}

.chat-head .support-avatar img{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    max-width:52px !important;
    max-height:52px !important;
}

.chat-support-info{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.chat-head h2{
    margin:0;
    color:#173c34;
    font-size:17px;
    line-height:1.15;
    font-weight:800;
}

.chat-head span{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:4px;
}

.chat-head em{
    color:#738681;
    font-size:9px;
    font-style:normal;
}

#chatDot{
    width:8px;
    height:8px;
    min-width:8px;
    border-radius:50%;
    background:#aeb9b5;
}

#chatDot.online{
    background:#16a34a;
    box-shadow:0 0 0 4px rgba(22,163,74,.09);
}

.head-id{
    margin-left:auto;
    color:#83928e;
    font-size:8px;
}

/* =========================================================
   WELCOME
========================================================= */

.chat-welcome{
    margin:14px 18px 0;
    padding:11px 13px;
    display:flex;
    align-items:flex-start;
    gap:9px;
    border:1px solid #e1ece8;
    border-radius:13px;
    background:linear-gradient(135deg,#f3faf7,#fff);
}

.welcome-avatar{
    width:32px;
    height:32px;
    min-width:32px;
    flex:0 0 32px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:9px;
    background:#fff;
}

.welcome-avatar img{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    max-width:32px !important;
    max-height:32px !important;
    object-fit:contain !important;
}

.welcome-content strong{
    display:block;
    color:#183f37;
    font-size:10px;
    font-weight:800;
}

.welcome-content p{
    margin:3px 0 0;
    color:#617a73;
    font-size:9px;
    line-height:1.5;
}

/* =========================================================
   MESSAGES
========================================================= */

.message-area{
    height:420px;
    padding:18px 22px 22px;
    overflow-y:auto;
    background:
        radial-gradient(circle at 20% 20%,rgba(8,122,92,.025),transparent 30%),
        linear-gradient(180deg,#f8fcfa,#fff);
    scroll-behavior:smooth;
}

.day-pill{
    width:max-content;
    margin:0 auto 18px;
    padding:5px 11px;
    border-radius:20px;
    background:#eaf4f1;
    color:#70827d;
    font-size:8px;
    font-weight:700;
}

.msg{
    width:100%;
    display:flex;
    margin:12px 0;
}

.msg.client,
.msg.visitor{
    justify-content:flex-start;
}

.msg.admin{
    justify-content:flex-end;
}

.msg-content{
    max-width:76%;
    display:flex;
    flex-direction:column;
}

.msg.client .msg-content,
.msg.visitor .msg-content{
    align-items:flex-start;
}

.msg.admin .msg-content{
    align-items:flex-end;
}

.msg-sender{
    display:flex;
    align-items:center;
    gap:5px;
    margin:0 5px 4px;
    color:#55736b;
    font-size:8px;
    font-weight:800;
}

.msg.admin .msg-sender{
    color:var(--m360-green-dark);
    justify-content:flex-end;
}

.msg-sender-role{
    color:#96a39f;
    font-size:7px;
    font-weight:600;
}

.msg-avatar{
    width:23px;
    height:23px;
    min-width:23px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:50%;
    background:#dcebe8;
    color:var(--m360-green-dark);
    font-size:7px;
    font-weight:900;
}

.msg.admin .msg-avatar{
    background:#e6f4ef;
}

.msg-avatar img{
    width:23px !important;
    height:23px !important;
    min-width:23px !important;
    min-height:23px !important;
    max-width:23px !important;
    max-height:23px !important;
    object-fit:contain !important;
}

.msg .bubble{
    max-width:100%;
    padding:9px 12px;
    border-radius:14px;
    font-size:11px;
    line-height:1.5;
    word-break:break-word;
    box-shadow:0 3px 10px rgba(6,78,59,.035);
}

.msg.client .bubble,
.msg.visitor .bubble{
    background:#eef3f1;
    color:#25463f;
    border-top-left-radius:4px;
}

.msg.admin .bubble{
    background:#d5f2e8;
    color:#173f36;
    border-top-right-radius:4px;
}

.msg small{
    display:block;
    margin-top:5px;
    color:#7b8b86;
    font-size:7px;
    line-height:1;
}

/* =========================================================
   TYPING
========================================================= */

.typing{
    min-height:26px;
    padding:4px 18px;
    display:flex;
    align-items:center;
    gap:6px;
    color:#7a8b86;
    font-size:8px;
    background:#fff;
}

.typing-dots{
    display:inline-flex;
    gap:3px;
}

.typing-dots i{
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--m360-green);
    animation:typingPulse 1.2s infinite ease-in-out;
}

.typing-dots i:nth-child(2){animation-delay:.15s}
.typing-dots i:nth-child(3){animation-delay:.30s}

@keyframes typingPulse{
    0%,60%,100%{opacity:.35;transform:translateY(0)}
    30%{opacity:1;transform:translateY(-2px)}
}

/* =========================================================
   COMPOSER
========================================================= */

.composer{
    padding:14px 17px;
    border-top:1px solid #e5ece9;
    background:#fff;
}

.composer-row{
    display:flex;
    align-items:flex-end;
    gap:8px;
}

.attach{
    width:42px;
    height:42px;
    min-width:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#eef6f3;
    color:var(--m360-green);
    cursor:pointer;
}

#message{
    flex:1;
    min-width:0;
    min-height:42px;
    max-height:120px;
    resize:none;
    padding:11px 13px;
    border:1px solid #dbe7e3;
    border-radius:11px;
    outline:none;
    background:#fff;
    color:var(--m360-text);
    font-family:inherit;
    font-size:11px;
    line-height:1.4;
}

#message:focus{
    border-color:var(--m360-green);
    box-shadow:0 0 0 4px rgba(8,122,92,.06);
}

.send{
    width:43px;
    height:43px;
    min-width:43px;
    flex:0 0 43px;
    border:0;
    border-radius:11px;
    background:linear-gradient(135deg,#078267,#006d55);
    color:#fff;
    cursor:pointer;
    font-size:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 18px rgba(0,105,82,.17);
}

.send:hover{
    background:var(--m360-green-dark);
}

.composer-help{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:6px;
}

.composer-help small{
    color:#96a39f;
    font-size:7px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:1100px){

    .topbar,
    .topbar-inner{
        height:82px;
        min-height:82px;
    }

    .topbar-inner{
        width:calc(100% - 36px);
    }

    .client-layout{
        width:min(850px,calc(100% - 40px));
        grid-template-columns:1fr;
        gap:42px;
        padding:42px 0 52px;
    }

    .intro{
        text-align:center;
    }

    .intro-text{
        margin-left:auto;
        margin-right:auto;
    }

    .trust-row{
        justify-content:center;
    }

    .support-hours-card,
    .mini-card{
        margin-left:auto;
        margin-right:auto;
        text-align:left;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:700px){

    .topbar,
    .topbar-inner{
        height:70px;
        min-height:70px;
    }

    .topbar-inner{
        width:calc(100% - 20px);
        gap:8px;
    }

    .brand{
        gap:8px;
        flex:1;
    }

    .brand-logo{
        width:46px !important;
        height:46px !important;
        min-width:46px !important;
        min-height:46px !important;
        max-width:46px !important;
        max-height:46px !important;
        flex-basis:46px !important;
    }

    .brand-logo img{
        width:46px !important;
        height:46px !important;
        min-width:46px !important;
        min-height:46px !important;
        max-width:46px !important;
        max-height:46px !important;
    }

    .brand-name{
        font-size:16px;
    }

    .brand-tagline{
        display:none;
    }

    .top-actions{
        gap:6px;
    }

    .presence{
        width:33px;
        height:33px;
        min-height:33px;
        padding:0;
        justify-content:center;
    }

    .presence span{
        display:none;
    }

    .top-divider{
        display:none;
    }

    .back-link{
        width:33px;
        height:33px;
        justify-content:center;
        font-size:0;
        border-radius:9px;
        background:#f1f6f4;
    }

    .back-icon{
        font-size:18px;
    }

    .client-layout{
        width:calc(100% - 20px);
        padding:30px 0 35px;
        gap:30px;
    }

    .eyebrow{
        margin-bottom:14px;
        font-size:8px;
        letter-spacing:2.2px;
    }

    .intro h1{
        margin-bottom:18px;
        font-size:42px;
        line-height:1;
        letter-spacing:-1.7px;
    }

    .intro-text{
        font-size:13px;
        line-height:1.7;
    }

    .trust-row{
        gap:9px;
        margin-top:20px;
    }

    .trust-row span{
        font-size:8px;
    }

    .support-hours-card{
        margin-top:21px;
    }

    .hours-content small{
        display:none;
    }

    .mini-card{
        margin-top:12px;
        padding:14px;
    }

    .chat-card{
        border-radius:20px;
    }

    .start-form{
        padding:24px 18px 22px;
    }

    .support-avatar{
        width:50px !important;
        height:50px !important;
        min-width:50px !important;
        min-height:50px !important;
        max-width:50px !important;
        max-height:50px !important;
        flex-basis:50px !important;
    }

    .support-avatar img{
        width:50px !important;
        height:50px !important;
        min-width:50px !important;
        min-height:50px !important;
        max-width:50px !important;
        max-height:50px !important;
    }

    .form-title h2{
        font-size:18px;
    }

    .form-copy{
        font-size:10px;
    }

    .form-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .start-form input,
    .start-form select{
        height:49px;
        min-height:49px;
    }

    .primary{
        height:55px;
        min-height:55px;
    }

    .chat-head{
        min-height:72px;
        padding:11px 13px;
    }

    .chat-head .support-avatar{
        width:45px !important;
        height:45px !important;
        min-width:45px !important;
        min-height:45px !important;
        max-width:45px !important;
        max-height:45px !important;
        flex-basis:45px !important;
    }

    .chat-head .support-avatar img{
        width:45px !important;
        height:45px !important;
        min-width:45px !important;
        min-height:45px !important;
        max-width:45px !important;
        max-height:45px !important;
    }

    .chat-head h2{
        font-size:15px;
    }

    .message-area{
        height:380px;
        padding:14px 12px 18px;
    }

    .msg-content{
        max-width:85%;
    }

    .msg .bubble{
        font-size:10px;
    }

    .composer{
        padding:9px;
    }

    .attach{
        width:39px;
        height:39px;
        min-width:39px;
        flex-basis:39px;
    }

    #message{
        min-height:39px;
        font-size:10px;
    }

    .send{
        width:40px;
        height:40px;
        min-width:40px;
        flex-basis:40px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px){

    .topbar,
    .topbar-inner{
        height:64px;
        min-height:64px;
    }

    .brand-logo{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        min-height:40px !important;
        max-width:40px !important;
        max-height:40px !important;
        flex-basis:40px !important;
    }

    .brand-logo img{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        min-height:40px !important;
        max-width:40px !important;
        max-height:40px !important;
    }

    .brand-name{
        font-size:14px;
    }

    .intro h1{
        font-size:35px;
    }

    .start-form{
        padding:21px 15px;
    }

    .availability-message{
        padding:9px 10px !important;
    }

    .availability-message strong{
        font-size:9px;
    }

    .availability-message small{
        font-size:8px;
    }

    .message-area{
        height:345px;
    }

    footer{
        padding:15px 9px;
        font-size:8px;
    }
}

/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation:none !important;
        transition:none !important;
    }
}


/* =========================================================
   MASJID360 LIVE CHAT — FINAL STATUS + FOOTER OVERRIDES
   Add at the END of chat.css
========================================================= */

/* ---------- Header live status ---------- */

.top-actions .presence{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
}

.top-actions .presence i{
    display:block !important;
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    border-radius:50% !important;
    background:#aeb9b5 !important;
}

.top-actions .presence.online{
    background:#edf9f3 !important;
    color:#17634e !important;
}

.top-actions .presence.online i{
    background:#18a957 !important;
    box-shadow:0 0 0 4px rgba(24,169,87,.12) !important;
}

.top-actions .presence.offline{
    background:#f3f5f4 !important;
}

.top-actions .presence.offline i{
    background:#aeb9b5 !important;
}

/* ---------- Form support status ---------- */

.form-title span,
.form-head span{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
}

.form-title span i,
.form-head span i{
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    display:block !important;
    border-radius:50% !important;
    background:#aeb9b5 !important;
}

.form-title span.online i,
.form-head span.online i{
    background:#18a957 !important;
    box-shadow:0 0 0 4px rgba(24,169,87,.11) !important;
}

.form-title em,
.form-head em{
    font-style:normal !important;
    color:#71837e !important;
    font-size:10px !important;
    font-weight:600 !important;
}

.form-title span.online em,
.form-head span.online em{
    color:#14734f !important;
}

/* ---------- Availability card ---------- */

.availability-message{
    margin:18px 0 20px !important;
    width:100% !important;
    min-height:54px !important;
    padding:11px 13px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:11px !important;
    border:1px solid #d7e9e2 !important;
    border-radius:13px !important;
    background:#f2faf6 !important;
}

.availability-message.online{
    background:#f0faf5 !important;
    border-color:#cfe9dc !important;
}

.availability-message.offline{
    background:#fbfaf6 !important;
    border-color:#e9e1cc !important;
}

.availability-message .availability-icon{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    flex:0 0 30px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:9px !important;
    background:#fff !important;
}

.availability-message.online .availability-icon{
    color:#18a957 !important;
}

.availability-message > div{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:2px !important;
    flex:1 !important;
    min-width:0 !important;
}

.availability-message strong{
    display:block !important;
    margin:0 !important;
    color:#19453b !important;
    font-size:10px !important;
    line-height:1.35 !important;
    font-weight:800 !important;
}

.availability-message small{
    display:block !important;
    margin:0 !important;
    color:#71847d !important;
    font-size:9px !important;
    line-height:1.45 !important;
}

/* ---------- Chat header status ---------- */

#chatStatus{
    font-style:normal !important;
}

#chatDot{
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
    border-radius:50% !important;
    background:#aeb9b5 !important;
}

#chatDot.online{
    background:#18a957 !important;
    box-shadow:0 0 0 4px rgba(24,169,87,.11) !important;
}

/* ---------- Footer ---------- */

.page-shell{
    min-height:100vh !important;
    display:flex !important;
    flex-direction:column !important;
}

.client-layout{
    flex:1 0 auto !important;
}

footer{
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    margin:0 !important;
    padding:18px 20px !important;
    border-top:1px solid #d9e7e2 !important;
    background:#034c3a !important;
    color:rgba(255,255,255,.86) !important;
    text-align:center !important;
    font-size:10px !important;
    line-height:1.5 !important;
    letter-spacing:.05px !important;
}

footer a{
    color:#fff !important;
}

@media (max-width:700px){
    footer{
        padding:15px 12px !important;
        font-size:8px !important;
    }
}

/* ---------- Prevent footer text from being cut off ---------- */

body{
    min-height:100vh !important;
}

.client-layout{
    padding-bottom:45px !important;
}

/* ---------- Make the support card fit the current design ---------- */

.start-form .availability-message + .form-grid{
    margin-top:0 !important;
}

/* ---------- Mobile status text ---------- */

@media (max-width:480px){
    .top-actions .presence{
        width:34px !important;
        height:34px !important;
        padding:0 !important;
        justify-content:center !important;
    }

    .top-actions .presence span{
        display:none !important;
    }
}