/* ===== ITEM ===== */
.msgItem{
    display: flex;
    align-items: flex-start;
    gap: 2vh;
    margin: 0.6vh 0;
    width: 100%;
}

.msgSystem{
    width: 100%;

    display: flex;
    align-items: center; 
    justify-content: center;

    margin: 1vh 0;

    font-size: 1.4vh;
    color: rgba(255,255,255,0.6);

    pointer-events: none;
}

.msgSystem b{
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}

.msgSystem{
    position: relative;
}

.msgSystem::before,
.msgSystem::after{
    content: "";
    flex: 1;

    height: 0.1vh;
    margin: 0 1vh;

    background: linear-gradient(
        to right,
        rgba(255,255,255,0),
        rgba(255,255,255,0.2)
    );
}

.msgSystem::after{
    background: linear-gradient(
        to left,
        rgba(255,255,255,0),
        rgba(255,255,255,0.2)
    );
}

/* LINKS / RECHTS */
.msgItem.other{
    justify-content: flex-start;
}

.msgItem.own{
    justify-content: flex-end;
}

/* ===== AVATAR ===== */
.msgAvatar{
    width: 6.5vh;
    height: 6.5vh;

    aspect-ratio: 1 / 1; 

    border-radius: 50%;
    object-fit: cover;

    display: block;

    box-shadow: 0 0 1vh rgba(0,0,0,0.4);
}

/* ===== BUBBLE ===== */
.msgBubble{
    position: relative;

    padding: 1.2vh 1.6vh;
    border-radius: 1.6vh;

    display: flex;
    flex-direction: column;
    gap: 0.3vh;

    max-width: 65%;
    width: fit-content;

    font-size: 1.6vh;

    box-shadow:
        0 0.4vh 1vh rgba(0,0,0,0.25); /* 🔥 verbindet optisch */
}

/* ===== COLORS ===== */
.msgItem.other .msgBubble{
    background: #e4e6eb;
    color: black;
}

.msgItem.own .msgBubble{
    background: #d9fdd3;
    color: black;
}

/* ===== TEXT ===== */
.msgText{
    line-height: 1.4;
    word-break: break-word;
}

/* ===== TIME ===== */
.msgTime{
    font-size: 1.1vh;
    opacity: 0.6;
    align-self: flex-end;
}

/* ===================================== */
/* ===== SPEECH ARROW (CONNECTED) ===== */
/* ===================================== */

/* ---------- LEFT (OTHER) ---------- */

.msgContent{
    display: flex;
    flex-direction: column;
}

/* USERNAME */
.msgName {
    position: relative;
    white-space: nowrap;
    padding-bottom: 0.2vh;
    margin-bottom: 0.2vh;
    font-size: 1.7vh;
    font-weight: 700;
}

/* optional farbig */
.msgItem.other .msgName{
    color: rgba(255, 255, 255, 0.85);
}

/* outer (shadow/border layer) */
.msgItem.other .msgBubble::before{
    content: "";
    position: absolute;

    left: -0.9vh;
    bottom: 0.8vh;

    border-top: 0.8vh solid transparent;
    border-bottom: 0.8vh solid transparent;
    border-right: 0.8vh solid rgba(0,0,0,0.15);
}

/* inner (real bubble color) */
.msgItem.other .msgBubble::after{
    content: "";
    position: absolute;

    left: -0.7vh; 
   

    border-top: 0.4vh solid transparent;
    border-bottom: 0.9vh solid transparent;
    border-right: 0.9vh solid #e4e6eb;
}

/* ---------- RIGHT (OWN) ---------- */

/* outer */
.msgItem.own .msgBubble::before{
    content: "";
    position: absolute;

    right: -0.7vh;
    bottom: 0.4vh;

    border-top: 0.8vh solid transparent;
    border-bottom: 0.8vh solid transparent;
    border-left: 0.8vh solid rgba(0,0,0,0.15);
}

/* inner */
.msgItem.own .msgBubble::after{
    content: "";
    position: absolute;

    right: -0.7vh;
    bottom: 1.1vh;

    border-top: 0.7vh solid transparent;
    border-bottom: 0.9vh solid transparent;
    border-left: 0.9vh solid #d9fdd3;
}