/*
|--------------------------------------------------------------------------
| Herzschild Talk Version5.0 Build3
| responsive.css
|--------------------------------------------------------------------------
*/

/* ==========================================================================
   Desktop
========================================================================== */

@media (min-width:1025px){

    .ht-container{

        max-width:1200px;

        margin:0 auto;

    }

    .ht-chat-log{

        padding:20px;

    }

    .ht-message-body{

        max-width:70%;

    }

    .ht-question-area{

        padding:20px;

    }

    .ht-question-list{

        gap:12px;

    }

}

/* ==========================================================================
   Tablet
========================================================================== */

@media (max-width:1024px){

    .ht-chat-log{

        padding:16px;

    }

    .ht-message-body{

        max-width:80%;

    }

    .ht-profile-header{

        padding:28px 18px 22px;

    }

    .ht-profile-icon{

        width:100px;

        height:100px;

    }

    .ht-navigation-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

/* ==========================================================================
   Smartphone
========================================================================== */

@media (max-width:768px){

    .ht-chat-log{

        padding:12px;

        gap:12px;

    }

    .ht-message{

        gap:10px;

    }

    .ht-message-icon{

        width:40px;

        height:40px;

        flex:0 0 40px;

    }

    .ht-message-icon img{

        width:40px;

        height:40px;

    }

    .ht-message-body{

        max-width:calc(100% - 52px);

    }

    .ht-message-bubble{

        padding:10px 14px;

        font-size:14px;

    }

    .ht-question-area{

        padding:12px;

    }

    .ht-question-list{

        display:grid;

        grid-template-columns:repeat(2,minmax(0,1fr));

        gap:8px;

    }

    .ht-question-button{

        width:100%;

        min-height:42px;

        padding:10px;

        font-size:13px;

    }

    .ht-profile-header{

        padding:24px 16px 20px;

    }

    .ht-profile-icon{

        width:90px;

        height:90px;

    }

    .ht-profile-name{

        font-size:22px;

    }

    .ht-profile-body{

        padding:16px;

    }

    .ht-profile-item{

        flex-direction:column;

        gap:6px;

    }

    .ht-profile-label{

        flex:none;

    }

    .ht-navigation-body{

        padding:16px;

    }

    .ht-navigation-grid{

        grid-template-columns:1fr;

    }

    .ht-modal{

        padding:16px;

    }

    .ht-modal-dialog{

        max-width:100%;

        max-height:92vh;

        border-radius:14px;

    }

    .ht-modal-header{

        padding:16px;

    }

    .ht-modal-body{

        padding:18px 16px;

    }

    .ht-modal-footer{

        padding:16px;

        flex-wrap:wrap;

    }

    .ht-modal-button{

        width:100%;

    }

}

/* ==========================================================================
   Small Smartphone
========================================================================== */

@media (max-width:480px){

    .ht-chat-log{

        padding:10px;

    }

    .ht-message{

        gap:8px;

    }

    .ht-message-icon{

        width:36px;

        height:36px;

        flex:0 0 36px;

    }

    .ht-message-icon img{

        width:36px;

        height:36px;

    }

    .ht-message-body{

        max-width:calc(100% - 44px);

    }

    .ht-message-name{

        font-size:11px;

    }

    .ht-message-bubble{

        padding:9px 12px;

        font-size:13px;

        line-height:1.6;

    }

    .ht-question-list{

        grid-template-columns:1fr;

    }

    .ht-question-button{

        min-height:40px;

        font-size:13px;

    }

    .ht-profile-icon{

        width:80px;

        height:80px;

    }

    .ht-profile-name{

        font-size:20px;

    }

    .ht-profile-title{

        font-size:15px;

    }

    .ht-profile-text{

        font-size:13px;

    }

    .ht-navigation-title{

        font-size:16px;

    }

    .ht-navigation-card{

        min-height:100px;

        padding:16px;

    }

    .ht-navigation-icon{

        width:48px;

        height:48px;

        font-size:20px;

    }

    .ht-navigation-label{

        font-size:14px;

    }

    .ht-navigation-description{

        font-size:12px;

    }

}

/* ==========================================================================
   Landscape Smartphone
========================================================================== */

@media (max-height:520px) and (orientation:landscape){

    .ht-profile-header{

        padding:16px;

    }

    .ht-profile-icon{

        width:64px;

        height:64px;

    }

    .ht-modal-dialog{

        max-height:96vh;

    }

    .ht-chat-log{

        padding:10px;

    }

}

@media (max-width:768px){

    #herzschild-talk-app{

        width:100%;
        max-width:none;
        height:100dvh;
        min-height:0;
        margin:0;
        border:0;
        border-radius:0;

    }

    .ht-layout{

        min-height:0;

    }

    .ht-question-area{

        padding:0;

    }

    .ht-question-list{

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

    }

    .ht-question-message .ht-question-button{

        width:auto;
        min-height:0;
        padding:10px 14px;
        font-size:14px;

    }

    .ht-rich-menu{

        min-height:76px;

    }

}