/* Chat Avatar + Names - CSS. Grundlayout der Zeile */
.luca-feed .luca-msg-row{
  align-items:flex-start;      /* Avatar & Body oben bündig */
  gap:8px;
}

/* Avatar-Wrapper */
.luca-msg-avatar-wrap{
  flex:0 0 auto;
  width:34px;
  height:34px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.luca-msg-avatar-wrap--luca{
  margin-right:2px;
}

.luca-msg-avatar-wrap--me{
  margin-left:2px;
}

/* Avatar selbst */
.luca-msg-avatar{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* Body + Name layout */
.luca-msg-body{
  display:flex;
  flex-direction:column;
  max-width:calc(100% - 50px); /* Avatar + Gap */
}

.luca-msg-body--luca{
  align-items:flex-start;
}

.luca-msg-body--me{
  align-items:flex-end;
}

/* Name über der Bubble */
.luca-msg-name{
  font-size:15px;        /* ~35% größer */
  line-height:1.2;
  margin-bottom:4px;
  font-weight:500;
  opacity:.9;
}

/* Beide Namen in dunklem Grau (#6F6F6F) */
.luca-msg-name--luca,
.luca-msg-name--me{
  color:#6F6F6F;
}

.luca-msg-name--me{
  text-align:right;
}

/* Bubble-Breite clampen (Desktop) */
.luca-msg-body .luca-msg-bubble{
  max-width:570px; /* hier kannst du fein-tunen: 460/480 etc. */
}

/* Zeit etwas kleiner, weil jetzt der Name größer ist */
.luca-msg-bubble .luca-msg-meta{
  font-size:12px;
}

/* Mobile Fine-Tuning */
@media (max-width: 600px){
  .luca-msg-avatar-wrap{
    width:30px;
    height:30px;
  }

  .luca-msg-body{
    max-width:calc(100% - 46px);
  }

  .luca-msg-name{
    font-size:13px;
  }

  /* Auf sehr schmalen Screens darf die Bubble wieder voll breit sein */
  .luca-msg-body .luca-msg-bubble{
    max-width:100%;
  }
}