/* ===================================================
   HEALTHSTAFF CHAT CSS
   PART 1
=================================================== */

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    font-family:"Plus Jakarta Sans",sans-serif;
    background:#edf3f8;
    color:#13283e;
}

body.chat-page{
    min-height:100vh;
}

/* ===================================================
   PRE CHAT
=================================================== */

.pre-chat-card{

    max-width:460px;
    margin:40px auto;
    background:#13283e;
    border-radius:28px;
    padding:35px 28px;
    box-shadow:0 20px 55px rgba(0,0,0,.25);

}

.welcome-icon{

    width:90px;
    height:90px;
    margin:0 auto 22px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    background:linear-gradient(135deg,#2ad9a8,#4ad5c8);

}

.pre-chat-card h1{

    color:#fff;
    text-align:center;
    font-size:30px;
    margin-bottom:12px;

}

.pre-chat-card p{

    color:#b8c8d6;
    line-height:1.8;
    text-align:center;
    margin-bottom:28px;

}

/* FORM */

.form-group{

    margin-bottom:18px;

}

.form-group label{

    display:block;
    color:#35d7ad;
    font-weight:700;
    margin-bottom:8px;

}

.form-group select{

    width:100%;
    height:58px;
    border:none;
    outline:none;
    border-radius:16px;
    padding:0 16px;
    background:#1c344e;
    color:#fff;
    font-size:15px;

}

/* BUTTON */

.continue-btn{

    width:100%;
    height:58px;
    border:none;
    border-radius:18px;
    cursor:pointer;
    margin-top:12px;

    background:linear-gradient(135deg,#2ad9a8,#43d5c7);

    color:#072131;
    font-size:18px;
    font-weight:800;

    transition:.25s;

}

.continue-btn:hover{

    transform:translateY(-2px);

}

/* ===================================================
   SELECT2
=================================================== */

.select2-container{

    width:100%!important;

}

.select2-container--default .select2-selection--single{

    height:58px!important;
    border:none!important;
    border-radius:16px!important;
    background:#1c344e!important;

}

.select2-container--default .select2-selection__rendered{

    color:#fff!important;
    line-height:58px!important;
    padding-left:16px!important;
    font-size:15px!important;

}

.select2-container--default .select2-selection__arrow{

    height:58px!important;

}

.select2-dropdown{

    border:none!important;
    border-radius:16px!important;
    overflow:hidden;
    background:#1c344e!important;

}

.select2-search--dropdown{

    padding:12px;
    background:#1c344e;

}

.select2-search__field{

    border:none!important;
    border-radius:12px!important;
    background:#102338!important;
    color:#fff!important;
    padding:10px!important;

}

.select2-results__option{

    padding:12px 16px!important;
    color:#fff!important;

}

.select2-results__option--highlighted{

    background:#2ad9a8!important;
    color:#07131d!important;

}

/* ===================================================
   CHAT CONTAINER
=================================================== */

#chatContainer{

    display:flex;
    flex-direction:column;
    height:100vh;
    background:#edf3f8;

}

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

.chat-header{

    height:84px;

    background:#13283e;

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

    padding:16px 20px;

    flex-shrink:0;

    box-shadow:0 4px 16px rgba(0,0,0,.12);

}

.back-btn{

    text-decoration:none;

    color:#fff;

    background:#1d3956;

    padding:10px 18px;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

}

.header-center{

    display:flex;
    align-items:center;
    gap:14px;

}

.company-logo{

    width:56px;
    height:56px;

    border-radius:18px;

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

    background:linear-gradient(135deg,#2ad9a8,#43d5c7);

    font-size:28px;

}

.header-info h1{

    color:#fff;
    font-size:24px;
    font-weight:800;

}

.status{

    margin-top:4px;

    display:flex;
    align-items:center;
    gap:8px;

    color:#79f3cd;
    font-size:14px;
    font-weight:600;

}

.dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#2ad9a8;

    box-shadow:0 0 10px #2ad9a8;

}

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

#messages{

    flex:1;

    overflow-y:auto;

    display:flex;
    flex-direction:column;

    gap:18px;

    padding:20px;

    padding-bottom:120px;

}

.message{

    display:flex;

    align-items:flex-end;

    gap:12px;

    max-width:85%;

}

.message.user{

    margin-left:auto;

    flex-direction:row-reverse;

}

.avatar{

    width:44px;
    height:44px;

    border-radius:50%;

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

    background:#35d7ad;

    color:#fff;

    font-size:20px;

    flex-shrink:0;

}

.message.user .avatar{

    background:#2d7cff;

}

.content{

    background:#fff;

    padding:16px 18px;

    border-radius:20px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.message.user .content{

    background:linear-gradient(135deg,#2ad9a8,#43d5c7);

    color:#fff;

}

.name{

    display:flex;
    align-items:center;
    gap:8px;

    margin-bottom:8px;

    font-weight:700;

}

.time{

    font-size:12px;
    opacity:.65;

}

.text{

    line-height:1.6;
    font-size:16px;

}

/* ===================================================
   CHAT INPUT
=================================================== */

.chat-input{

    position:sticky;

    bottom:0;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 18px;

    background:#fff;

    border-top:1px solid #ddd;

}

#userMessage{

    flex:1;

    height:54px;

    border:none;

    outline:none;

    border-radius:28px;

    padding:0 20px;

    background:#edf3f8;

    font-size:16px;

}

.chat-input button{

    width:56px;
    height:56px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,#2ad9a8,#43d5c7);

    color:#fff;

    font-size:22px;

    cursor:pointer;

}
/* ===================================================
   HEALTHSTAFF CHAT CSS
   PART 2
=================================================== */

/* ===================================================
   EMAIL ACTION CARD
=================================================== */

.email-action-card{

    width:100%;
    background:linear-gradient(135deg,#1fc8c3,#17b9c4);
    border-radius:24px;
    padding:22px;
    color:#fff;
    box-shadow:0 15px 35px rgba(23,185,196,.28);
    animation:cardFade .35s ease;
    overflow:hidden;

}

.email-header{

    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-bottom:18px;

}

.email-icon{

    width:60px;
    height:60px;
    border-radius:18px;

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

    font-size:28px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(12px);

    flex-shrink:0;

}

.email-header-text{

    flex:1;

}

.email-header-text h3{

    margin:0;
    font-size:22px;
    font-weight:800;
    color:#fff;

}

.email-header-text p{

    margin-top:8px;
    line-height:1.7;
    color:rgba(255,255,255,.96);

}

.email-action{

    background:rgba(255,255,255,.18);
    padding:15px 18px;
    border-radius:14px;
    margin-bottom:20px;

    font-weight:700;
    font-size:16px;

}

.email-button{

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

    text-decoration:none;

    min-height:82px;

    border-radius:18px;

    background:#fff;

    transition:.25s;

}

.email-button strong{

    font-size:18px;
    color:#10a4a7;

}

.email-button span{

    margin-top:6px;
    color:#666;
    font-size:14px;
    font-weight:600;

}

.email-button:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.email-button:active{

    transform:scale(.98);

}

/* ===================================================
   SCROLLBAR
=================================================== */

#messages::-webkit-scrollbar{

    width:8px;

}

#messages::-webkit-scrollbar-thumb{

    background:#bdd7de;
    border-radius:20px;

}

#messages::-webkit-scrollbar-track{

    background:transparent;

}

/* ===================================================
   ANIMATIONS
=================================================== */

@keyframes cardFade{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.message{

    animation:cardFade .25s ease;

}

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

@media (max-width:768px){

.pre-chat-card{

    width:92%;
    margin:20px auto;
    padding:28px 22px;

}

.pre-chat-card h1{

    font-size:26px;

}

.chat-header{

    height:78px;
    padding:14px;

}

.company-logo{

    width:48px;
    height:48px;
    font-size:24px;

}

.header-info h1{

    font-size:20px;

}

.back-btn{

    padding:8px 14px;
    font-size:13px;

}

#messages{

    padding:16px;
    gap:16px;

    /*
      Keeps the newest message above
      the typing area when keyboard opens
    */
    padding-bottom:140px;

}

.message{

    max-width:92%;

}

.avatar{

    width:40px;
    height:40px;
    font-size:18px;

}

.content{

    padding:14px 16px;

}

.text{

    font-size:15px;

}

.chat-input{

    padding:12px 14px calc(12px + env(safe-area-inset-bottom));

}

#userMessage{

    height:50px;
    font-size:15px;

}

.chat-input button{

    width:50px;
    height:50px;
    border-radius:16px;
    font-size:20px;

}

.email-action-card{

    padding:18px;

}

.email-icon{

    width:52px;
    height:52px;
    font-size:24px;

}

.email-header-text h3{

    font-size:18px;

}

.email-header-text p{

    font-size:14px;

}

.email-button{

    min-height:72px;

}

.email-button strong{

    font-size:16px;

}

.email-button span{

    font-size:13px;

}

}

/* ===================================================
   SMALL PHONES
=================================================== */

@media (max-width:420px){

.header-center{

    gap:10px;

}

.company-logo{

    width:44px;
    height:44px;

}

.header-info h1{

    font-size:18px;

}

.status{

    font-size:12px;

}

}
/* Fix input without changing message layout */

.chat-input{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:999;
    background:#fff;
    border-top:1px solid #ddd;
}

#messages{
    padding-bottom:120px !important;
}

@media (max-width:768px){

.chat-input{
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
}

}
#messages{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;

    display:flex;
    flex-direction:column;
    gap:18px;

    padding:20px;

    /* Leave space for the input bar */
    padding-bottom:110px;

    scroll-behavior:smooth;
}
.chat-input{
    position:fixed;
    left:0;
    right:0;
    bottom:0;

    display:flex;
    align-items:center;
    gap:14px;

    padding:14px 18px;

    background:#fff;
    border-top:1px solid #e8e8e8;

    z-index:999;
}
/* =====================================
   ADMIN SEND EMAIL CARD BUTTON
===================================== */

.send-email-card-btn{

    min-width:140px;
    height:64px;

    padding:0 22px;

    border:none;
    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    background:linear-gradient(135deg,#22d3c5,#18b8c4);
    color:#fff;

    font-size:18px;
    font-weight:700;

    cursor:pointer;

    box-shadow:0 10px 24px rgba(24,184,196,.30);

    transition:.25s;

    white-space:nowrap;

}

.send-email-card-btn:hover{

    transform:translateY(-2px);

}

.send-email-card-btn:active{

    transform:scale(.97);

}

.send-email-card-btn i,
.send-email-card-btn span{

    display:inline-block;

}
/* ==========================================
   APPLICATION RECEIVED CARD
========================================== */

.application-card{

    width:100%;
    max-width:520px;
    margin:12px 0 12px 56px;

    background:#ffffff;
    border-radius:24px;
    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    animation:cardFade .35s ease;

}

/* Top Banner */

.application-header{

    background:linear-gradient(135deg,#FFE9A8,#FFD66B);

    color:#5A4300;

    text-align:center;

    padding:18px;

    font-size:22px;

    font-weight:800;

}

/* Body */

.application-body{

    padding:24px;

}

.application-title{

    font-size:24px;
    font-weight:800;
    color:#13283e;
    margin-bottom:12px;

}

.application-text{

    color:#657789;
    line-height:1.7;
    margin-bottom:24px;
    font-size:16px;

}

/* Information */

.application-info{

    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:26px;

}

.application-row{

    display:flex;
    align-items:center;
    gap:14px;

}

.application-icon{

    width:42px;
    height:42px;

    border-radius:12px;

    background:#FFF6D6;

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

    font-size:20px;

    flex-shrink:0;

}

.application-value{

    color:#13283e;
    font-size:17px;
    font-weight:700;

}

/* Footer */

.application-footer{

    background:#FFFBEF;

    border-top:1px solid #F6E6A6;

    padding:18px 24px;

    display:flex;
    align-items:center;
    gap:12px;

}

.application-footer-icon{

    width:40px;
    height:40px;

    border-radius:50%;

    background:#FFD66B;

    color:#5A4300;

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

    font-size:18px;

    flex-shrink:0;

}

.application-footer-text{

    color:#4d6273;
    line-height:1.6;

}

.application-footer-text strong{

    color:#13283e;

}

/* Mobile */

@media(max-width:768px){

.application-card{

    width:calc(100% - 56px);
    margin-left:56px;

}

.application-header{

    font-size:20px;
    padding:16px;

}

.application-body{

    padding:20px;

}

}
/* Chat Header */
.chat-header{
    position:sticky;
    top:0;
    z-index:1000;
    display:flex;
    justify-content:center;
    align-items:center;
    height:70px;
    padding:10px 16px;
    background:#12263b;
    border-bottom:1px solid rgba(255,255,255,.08);
}

/* HealthStaff Logo */
.chat-logo{
    width:180px;
    max-width:70%;
    height:auto;
    display:block;
    object-fit:contain;
}
.home-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 20px;
    background:#24d3a5;
    color:#0d2236;
    text-decoration:none;
    font-weight:700;
    font-size:1rem;
    border-radius:999px;
    transition:.3s;
}

.home-pill:hover{
    background:#1bc798;
    transform:translateY(-2px);
}
/* ==========================================
   CENTER APPLICATION RECEIVED CARD
   (Override)
========================================== */

.application-card{
    width:92% !important;
    max-width:520px !important;

    margin:20px auto !important;

    align-self:center !important;

    position:relative !important;
    left:auto !important;
    right:auto !important;
    float:none !important;
}

@media (max-width:768px){

    .application-card{
        width:92% !important;
        margin:20px auto !important;
        align-self:center !important;
        left:auto !important;
        right:auto !important;
    }

}
/* ===========================
   CHAT LAYOUT OVERRIDE
   =========================== */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.chat-page {
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Fixed Header */

.chat-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    height: 82px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 12px 18px !important;

    background: #16263d !important;

    z-index: 9999 !important;

    box-sizing: border-box !important;
}

/* Scrollable Messages */

#messages {
    position: fixed !important;

    top: 82px !important;
    bottom: 92px !important;

    left: 0 !important;
    right: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 20px !important;

    box-sizing: border-box !important;

    scroll-behavior: smooth !important;
}

/* Fixed Input */

.chat-input {
    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 92px !important;

    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    padding: 16px !important;

    background: #ffffff !important;

    z-index: 9999 !important;

    box-sizing: border-box !important;
}

/* Prevent page scrolling */

#chatContainer {
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
}
.system-message{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:18px 0;
}

.system-message span{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;
    border-radius:999px;

    background:rgba(25,200,255,.08);
    border:1px solid rgba(25,200,255,.28);

    color:#19C8FF;
    font-weight:700;
    font-size:14px;
}

.system-message span::before{
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:#19C8FF;
    box-shadow:0 0 10px #19C8FF;
}
.email-button{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-decoration:none;

    min-height:90px;
    padding:14px;

    border-radius:18px;
    background:#fff;
    transition:.25s;
}
.email-address{
    width:100%;
    text-align:center;
    color:#10a4a7;
    font-size:15px;
    font-weight:700;
    line-height:1.4;

    overflow-wrap:anywhere;
    word-break:break-word;
    white-space:normal;
}
/* ===== EMAIL CARD OVERRIDE ===== */

.email-button{
    width:100% !important;
    max-width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    padding:16px !important;
}

.email-button strong,
.email-button b,
.email-button div{
    display:block !important;
    width:100% !important;
    max-width:100% !important;

    font-size:16px !important;
    font-weight:700 !important;
    text-align:center !important;

    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
}

.email-button span{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    margin-top:8px !important;
}
.email-caption{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    margin-top:10px;

    font-size:14px;
    font-weight:500;
    line-height:1.5;

    color:#6b7280;

    text-align:center;
    letter-spacing:.3px;
}