/* ===========================================================
   CEO Callers - Chat Redesign
   =========================================================== */

.right-panel{

    display:flex;
    flex-direction:column;

    width:430px;

    height:700px;

    max-height:calc(100vh - 80px);

        max-height:calc(100dvh - 80px);


    border-radius:26px;

    overflow:visible;

}



.chatBox{

    display:flex;

    flex-direction:column;

    flex:1;

    min-height:0;

    overflow:hidden;

    border-radius:25px;

}



#messages{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    padding:22px;

    display:flex;

    flex-direction:column;

    gap:18px;

    position:relative;

}



/* ===========================
        AI MESSAGE
=========================== */

.aiMessage{

    display:flex;
flex-direction:column;

    align-self:flex-start;

    background:#2e4659;

    color:#fff;

    padding:16px 18px;

    border-radius:20px;

    border-top-left-radius:8px;

    width:fit-content;

    max-width:82%;

    min-width:0;

    height:auto !important;

    min-height:0 !important;

    line-height:1.7;

    font-size:18px;

    white-space:normal;

    word-break:break-word;

    overflow-wrap:break-word;
    flex-shrink: 0;

clear: both;

}



/* ===========================
      USER MESSAGE
=========================== */

.userMessage{

    align-self:flex-end;

    display:inline-block;

    background:#3a5870;

    color:#fff;

    padding:16px 18px;

    border-radius:20px;

    border-top-right-radius:8px;

    width:auto;

    max-width:82%;

    min-width:80px;

    min-height:auto;

    height:auto;

    white-space:pre-wrap;

    overflow-wrap:break-word;

    word-break:break-word;

    line-height:1.7;

    font-size:18px;

    box-sizing:border-box;

}



/* ===========================
        STREAMING
=========================== */

.aiMessage.voiceStreamingMessage{

    display:inline-block;

}



/* ===========================
      Typing Dots
=========================== */

.typingIndicator{

    display:flex;

    gap:4px;

    align-items:center;

}



.typingIndicator span{

    width:6px;

    height:6px;

    border-radius:50%;

    background:white;

    animation:typingDot .8s infinite;

}



.typingIndicator span:nth-child(2){

    animation-delay:.15s;

}



.typingIndicator span:nth-child(3){

    animation-delay:.3s;

}



@keyframes typingDot{

0%,80%,100%{

transform:scale(.6);

opacity:.4;

}

40%{

transform:scale(1);

opacity:1;

}

}



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

.chatInputArea{

    padding:18px;

}



/* ===========================
       Scrollbar
=========================== */

#messages::-webkit-scrollbar{

width:8px;

}



#messages::-webkit-scrollbar-track{

background:transparent;

}



#messages::-webkit-scrollbar-thumb{

background:#b78633;

border-radius:20px;

}
/* ===========================================================
   Mobile & Tablet - Final Consolidated Fix
   =========================================================== */

@media (max-width: 1200px){

    .david-container{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        padding:0 20px !important;
        overflow:hidden !important;
        height:100vh !important;
        height:100dvh !important;
        height:100svh !important;
    }

    html, body{
        overflow:hidden !important;
        height:100vh !important;
        height:100dvh !important;
        height:100svh !important;
    }

    .conversationTitle{
        margin-top:20px !important;
    }

    .right-panel{
        width:100% !important;
        max-width:700px !important;
        height:65dvh !important;
        max-height:65dvh !important;
        overflow:hidden !important;
    }

    .chatBox{
        overflow:hidden !important;
        padding:20px !important;
    }

    .chatHeader{
        flex-wrap:nowrap !important;
        gap:10px !important;
        padding-right:6px !important;
        box-sizing:border-box;
    }

    .chatLogo{
        width:38px !important;
        height:38px !important;
        flex-shrink:0;
    }

    .chatHeader h3{
        font-size:16px !important;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        text-align:left !important;
    }

    .chatHeader p{
        font-size:13px !important;
        text-align:left !important;
    }

    .switchVoiceBtn{
        display:flex !important;
        align-items:center;
        justify-content:center;
        width:36px !important;
        height:36px !important;
        padding:0 !important;
        border-radius:50% !important;
        font-size:0 !important;
        flex-shrink:0;
    }

    .switchVoiceBtn::before{
        content:"📞";
        font-size:16px;
    }

    .aiMessage,
    .userMessage{
        font-size:16px !important;
        padding:14px 16px !important;
        text-align:left !important;
    }

    .chatInput textarea{
        font-size:15px !important;
    }

}

@media (max-width: 600px){

    

    body:has(.david-container:not(.text-mode)){
        overflow:auto !important;
    }

    .david-container:not(.text-mode){
        height:auto !important;
        min-height:100dvh !important;
        overflow:visible !important;
        padding-top:90px !important;
    }

    .david-container:not(.text-mode) .left-panel,
    .david-container:not(.text-mode) .center-panel{
        display:contents !important;
    }

    .david-container:not(.text-mode) .companyLogo{
        order:1 !important;
    }

    .david-container:not(.text-mode) h1{
        order:2 !important;
        width:100% !important;
        font-size:34px !important;
    }

    .david-container:not(.text-mode) .subtitle{
        order:3 !important;
        width:100% !important;
        font-size:18px !important;
        margin-top:-15px !important;
    }

    .david-container:not(.text-mode) .description{
        order:4 !important;
        width:100% !important;
        font-size:12px !important;
        margin-top:-15px !important;
    }

    .david-container:not(.text-mode) .voice-circle{
        order:5 !important;
    }

    .david-container:not(.text-mode) #status{
        order:6 !important;
        width:100% !important;
    }

    .david-container:not(.text-mode) .buttons{
        order:7 !important;
    }

    .david-container:not(.text-mode) .right-panel{
        order:8 !important;
    }

    .david-container{
        padding:0 10px !important;
    }

    .right-panel{
        height:72svh !important;
        max-height:78svh !important;
    }

    .chatBox{
        padding:15px !important;
    }

    .aiMessage,
    .userMessage{
        font-size:13px !important;
        padding:10px 12px !important;
        line-height:1.5 !important;
    }

    .chatInput textarea{
        font-size:13px !important;
        min-height:44px !important;
        overflow-y:hidden !important;
    }

    .chatInput textarea::-webkit-scrollbar{
        width:0 !important;
        display:none !important;
    }

}
/* ===========================================================
   Tablet Only - Show Full Voice Call Button
   =========================================================== */

@media (min-width: 601px) and (max-width: 1200px){

    html, body{
        overflow:auto !important;
    }
    .david-container{
        overflow:visible !important;
        height:auto !important;
        min-height:100dvh !important;
        padding-top:90px !important;
                text-align:center !important;

    }
    .david-container:not(.text-mode) .left-panel,
    .david-container:not(.text-mode) .center-panel{
        display:contents !important;
    }

    .david-container:not(.text-mode) .companyLogo{
        order:1 !important;
    }

    .david-container:not(.text-mode) h1{
        order:2 !important;
        width:100% !important;
        font-size:44px !important;
    }

    .david-container:not(.text-mode) .subtitle{
        order:3 !important;
        width:100% !important;
                font-size:21px !important;
                margin-top:-15px !important;

    }

    .david-container:not(.text-mode) .description{
        order:4 !important;
        width:100% !important;
                font-size:17px !important;
                margin-top:-15px !important;

    }

    .david-container:not(.text-mode) .voice-circle{
        order:5 !important;
    }

    .david-container:not(.text-mode) #status{
        order:6 !important;
        width:100% !important;
    }

    .david-container:not(.text-mode) .buttons{
        order:7 !important;
    }

    .david-container:not(.text-mode) .right-panel{
        order:8 !important;
    }

    .switchVoiceBtn{
        width:auto !important;
        height:auto !important;
        padding:10px 18px !important;
        border-radius:999px !important;
        font-size:0 !important;
    }

    .switchVoiceBtn::before{
        content:"📞 Switch to Voice Call";
        font-size:14px;
    }

}