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

/* ==========================================================================
   Profile View
========================================================================== */

.ht-profile{

    display:flex;

    flex-direction:column;

    width:100%;

    height:100%;

    overflow:hidden;

    background:#f5f5f5;

}

/* ==========================================================================
   LINE-style Profile Cards
========================================================================== */

.ht-modal-body .ht-profile{

    padding:16px;

    background:linear-gradient(180deg,#eef8ff 0%,#f8fbff 38%,#ffffff 100%);

}

.ht-modal-body .ht-profile-header{

    flex-direction:row;

    align-items:center;

    justify-content:flex-start;

    gap:14px;

    padding:18px;

    border:0;

    border-radius:22px;

    background:#ffffff;

    box-shadow:0 6px 20px rgba(58,102,156,.12);

}

.ht-profile-header-text{

    min-width:0;

}

.ht-profile-catchphrase{

    margin-top:4px;

    color:#687387;

    font-size:13px;

    line-height:1.5;

}

.ht-modal-body .ht-profile-icon{

    width:76px;

    height:76px;

    flex:0 0 76px;

    border:3px solid #ffffff;

    box-shadow:0 4px 12px rgba(28,68,111,.18);

}

.ht-modal-body .ht-profile-name,
.ht-modal-body .ht-profile-status{

    text-align:left;

}

.ht-modal-body .ht-profile-name{

    font-size:22px;

}

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

    display:flex;

    align-items:flex-end;

    justify-content:center;

    min-height:260px;

    margin-top:16px;

    padding:16px 16px 0;

    overflow:hidden;

    border-radius:22px;

    background:linear-gradient(135deg,#dff2ff,#fef8fa);

}

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

    width:auto;

    max-width:100%;

    max-height:360px;

    object-fit:contain;

}

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

    margin:16px 0 0;

    padding:18px;

    border:0;

    border-radius:20px;

    background:#ffffff;

    box-shadow:0 5px 16px rgba(58,102,156,.09);

}

.ht-profile-section-title{

    display:inline-flex;

    align-items:center;

    min-height:30px;

    margin-bottom:12px;

    padding:4px 11px;

    border-radius:999px;

    background:#eaf1ff;

    color:#526df6;

    font-size:14px;

    font-weight:700;

}

.ht-profile-text p{

    padding:8px 0;

    border-bottom:1px solid #edf0f5;

}

.ht-profile-text p:last-child{

    border-bottom:0;

}

.ht-profile-category-list{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    list-style:none;

}

.ht-profile-category-item{

    padding:8px 11px;

    border-radius:12px;

    background:#f1f5ff;

    color:#4059b9;

    font-size:13px;

    font-weight:700;

}

.ht-profile-link-list{

    display:grid;

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

    gap:8px;

    list-style:none;

}

.ht-profile-link-item a{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:42px;

    padding:8px;

    border-radius:12px;

    background:#526df6;

    color:#ffffff !important;

    font-size:13px;

    font-weight:700;

}

.ht-profile-link-item a:hover{

    background:#4059da;

}

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

.ht-profile-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:32px 20px 24px;

    background:#ffffff;

    border-bottom:1px solid #e5e5e5;

}

/* ==========================================================================
   Icon
========================================================================== */

.ht-profile-icon{

    width:120px;

    height:120px;

    border-radius:50%;

    overflow:hidden;

    background:#ffffff;

    border:2px solid #dddddd;

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

}

.ht-profile-icon img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}

/* ==========================================================================
   Name
========================================================================== */

.ht-profile-name{

    margin:0;

    font-size:24px;

    font-weight:700;

    color:#333333;

    text-align:center;

    line-height:1.4;

    word-break:break-word;

}

/* ==========================================================================
   Status
========================================================================== */

.ht-profile-status{

    font-size:14px;

    color:#777777;

    text-align:center;

    line-height:1.6;

}

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

.ht-profile-body{

    flex:1;

    overflow-y:auto;

    padding:20px;

}

/* ==========================================================================
   Section
========================================================================== */

.ht-profile-section{

    margin-bottom:20px;

    padding:18px;

    background:#ffffff;

    border-radius:12px;

    border:1px solid #e5e5e5;

}

.ht-profile-section:last-child{

    margin-bottom:0;

}

/* ==========================================================================
   Title
========================================================================== */

.ht-profile-title{

    margin:0 0 12px;

    font-size:16px;

    font-weight:700;

    color:#333333;

    line-height:1.5;

}

/* ==========================================================================
   Text
========================================================================== */

.ht-profile-text{

    margin:0;

    color:#555555;

    font-size:14px;

    line-height:1.8;

    white-space:pre-wrap;

    word-break:break-word;

}

/* ==========================================================================
   Information List
========================================================================== */

.ht-profile-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.ht-profile-item{

    display:flex;

    align-items:flex-start;

    gap:12px;

    padding-bottom:12px;

    border-bottom:1px solid #eeeeee;

}

.ht-profile-item:last-child{

    padding-bottom:0;

    border-bottom:none;

}

/* ==========================================================================
   Label
========================================================================== */

.ht-profile-label{

    flex:0 0 110px;

    font-size:14px;

    font-weight:600;

    color:#666666;

}

/* ==========================================================================
   Value
========================================================================== */

.ht-profile-value{

    flex:1;

    min-width:0;

    font-size:14px;

    color:#333333;

    line-height:1.7;

    word-break:break-word;

}

/* ==========================================================================
   Link
========================================================================== */

.ht-profile-link{

    color:#06c755;

    text-decoration:none;

    transition:color .2s ease;

}

.ht-profile-link:hover{

    color:#04a947;

    text-decoration:underline;

}

/* ==========================================================================
   Empty
========================================================================== */

.ht-profile-empty{

    padding:40px 20px;

    text-align:center;

    color:#999999;

    font-size:14px;

}

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

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

    width:6px;

}

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

    background:transparent;

}

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

    background:#cccccc;

    border-radius:999px;

}

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

    background:#b5b5b5;

}

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

.ht-profile{

    animation:htProfileFade .2s ease;

}

@keyframes htProfileFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}