/* Herzschild Talk Version5.0 Build3: message rows and bubbles */

#herzschild-talk-app .ht-message {
    display:flex;
    align-items:flex-start;
    gap:10px;
    width:100%;
    min-width:0;
    margin:0;
    animation:ht-message-fade .2s ease-out;
}

#herzschild-talk-app .ht-message-character {
    justify-content:flex-start;
}

#herzschild-talk-app .ht-message-user {
    justify-content:flex-end;
}

#herzschild-talk-app .ht-message-icon {
    flex:0 0 44px;
    width:44px;
    height:44px;
    overflow:visible;
}

#herzschild-talk-app .ht-message-icon img {
    display:block;
    width:44px;
    height:44px;
    max-width:none;
    border:1px solid rgba(255, 255, 255, .8);
    border-radius:50%;
    background:#fff;
    object-fit:cover;
}

#herzschild-talk-app .ht-message-body {
    display:flex;
    flex:0 1 auto;
    flex-direction:column;
    align-items:flex-start;
    width:fit-content;
    max-width:min(76%, calc(100% - 54px));
    min-width:0;
}

#herzschild-talk-app .ht-message-character:not(:has(.ht-message-icon)) .ht-message-body {
    max-width:76%;
}

#herzschild-talk-app .ht-message-name {
    min-width:0;
    margin:0 0 4px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    line-height:1.35;
    overflow-wrap:anywhere;
    text-shadow:0 1px 2px rgba(0, 0, 0, .48);
}

#herzschild-talk-app .ht-message-bubble {
    position:relative;
    display:block;
    width:fit-content;
    max-width:100%;
    min-width:0;
    padding:11px 15px;
    border-radius:20px;
    font-size:16px;
    font-weight:400;
    line-height:1.55;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:normal;
    box-shadow:0 1px 3px rgba(0, 0, 0, .12);
}

#herzschild-talk-app .ht-message-character .ht-message-bubble {
    background:#fff;
    color:#252525;
}

#herzschild-talk-app .ht-message-character .ht-message-bubble::before {
    position:absolute;
    top:14px;
    left:-7px;
    width:0;
    height:0;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-right:8px solid #fff;
    content:"";
}

#herzschild-talk-app .ht-message-user .ht-message-body {
    align-items:flex-end;
    max-width:76%;
}

#herzschild-talk-app .ht-message-user .ht-message-bubble {
    background:#526df6;
    color:#fff;
}

#herzschild-talk-app .ht-message-user .ht-message-bubble::after {
    position:absolute;
    top:14px;
    right:-7px;
    width:0;
    height:0;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:8px solid #526df6;
    content:"";
}

#herzschild-talk-app .ht-message-system {
    justify-content:center;
}

#herzschild-talk-app .ht-message-system .ht-message-body {
    align-items:center;
    max-width:100%;
}

#herzschild-talk-app .ht-message-system .ht-message-bubble {
    background:rgba(245, 245, 245, .94);
    color:#555;
    border-radius:999px;
    font-size:13px;
    text-align:center;
}

#herzschild-talk-app .ht-message-system .ht-message-bubble::before,
#herzschild-talk-app .ht-message-system .ht-message-bubble::after,
#herzschild-talk-app .ht-message-rich .ht-message-bubble::before,
#herzschild-talk-app .ht-message-rich .ht-message-bubble::after {
    content:none;
}

#herzschild-talk-app .ht-message-rich {
    justify-content:flex-start;
}

#herzschild-talk-app .ht-message-rich .ht-message-body {
    max-width:100%;
}

#herzschild-talk-app .ht-message-rich .ht-message-bubble {
    width:100%;
    padding:14px;
    border-radius:18px;
    background:rgba(255, 255, 255, .98);
}

#herzschild-talk-app .ht-rich-message-title {
    margin-bottom:10px;
    color:#333;
    font-size:14px;
    font-weight:700;
}

#herzschild-talk-app .ht-rich-message-link {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    margin-top:8px;
    padding:8px 12px;
    border-radius:12px;
    background:#526df6;
    color:#fff !important;
    font-size:14px;
    font-weight:700;
    line-height:1.4;
    text-align:center;
    overflow-wrap:anywhere;
}

@keyframes ht-message-fade {
    from { opacity:0; transform:translateY(6px); }
    to { opacity:1; transform:translateY(0); }
}