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

/* ==========================================================================
   Modal
========================================================================== */

.ht-modal{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:rgba(0,0,0,.45);

    z-index:9999;

    opacity:1;

    visibility:visible;

    transition:
        opacity .2s ease,
        visibility .2s ease;

}

/* 非表示 */

.ht-modal[hidden]{

    display:none !important;

}

.ht-modal.is-hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

/* ==========================================================================
   Dialog
========================================================================== */

.ht-modal-dialog,
.ht-modal-window{

    width:100%;

    max-width:560px;

    max-height:90vh;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#ffffff;

    border-radius:18px;

    box-shadow:0 12px 32px rgba(0,0,0,.22);

    animation:htModalOpen .2s ease;

}

/* ==========================================================================
   Header
========================================================================== */

.ht-modal-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:18px 22px;

    border-bottom:1px solid #e5e5e5;

    background:#ffffff;

}

.ht-modal-title{

    margin:0;

    font-size:18px;

    font-weight:700;

    color:#333333;

    line-height:1.4;

}

/* ==========================================================================
   Close Button
========================================================================== */

.ht-modal-close{

    display:flex;

    align-items:center;

    justify-content:center;

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#f0f3f8;

    color:#334155;

    font-size:22px;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        transform .15s ease;

}

.ht-modal-close:hover{

    background:#f2f2f2;

    color:#111111;

}

.ht-modal-close:active{

    transform:scale(.95);

}

.ht-modal-close:focus{

    outline:none;

}

.ht-modal-close:focus-visible{

    outline:2px solid #06c755;

    outline-offset:2px;

}

/* ==========================================================================
   Body
========================================================================== */

.ht-modal-body{

    flex:1;

    overflow-y:auto;

    padding:24px;

    color:#444444;

    font-size:14px;

    line-height:1.8;

    word-break:break-word;

}

.ht-modal-body:has(.ht-profile){

    padding:0;

}

.ht-modal-body .ht-profile{

    height:auto;
    min-height:0;
    overflow:visible;

}

.ht-modal-body .ht-profile-standing{

    padding:20px 20px 0;
    background:#f5f5f5;

}

.ht-modal-body .ht-profile-standing img{

    margin:0 auto;

}

.ht-modal-body .ht-profile-section{

    margin:16px;

}

/* ==========================================================================
   Footer
========================================================================== */

.ht-modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:18px 22px;

    border-top:1px solid #e5e5e5;

    background:#fafafa;

}

/* ==========================================================================
   Buttons
========================================================================== */

.ht-modal-button{

    min-width:100px;

    padding:10px 18px;

    border:1px solid #dddddd;

    border-radius:10px;

    background:#ffffff;

    color:#333333;

    font-size:14px;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .15s ease;

}

.ht-modal-button:hover{

    background:#06c755;

    border-color:#06c755;

    color:#ffffff;

}

.ht-modal-button:active{

    transform:scale(.97);

}

.ht-modal-button:focus{

    outline:none;

}

.ht-modal-button:focus-visible{

    outline:2px solid #06c755;

    outline-offset:2px;

}

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

.ht-modal-body::-webkit-scrollbar{

    width:6px;

}

.ht-modal-body::-webkit-scrollbar-track{

    background:transparent;

}

.ht-modal-body::-webkit-scrollbar-thumb{

    background:#cccccc;

    border-radius:999px;

}

.ht-modal-body::-webkit-scrollbar-thumb:hover{

    background:#b5b5b5;

}

/* ==========================================================================
   Animation
========================================================================== */

@keyframes htModalOpen{

    from{

        opacity:0;

        transform:translateY(12px) scale(.98);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}