.luca-feed{
  height:100%;
  padding:18px 16px 24px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Header: "Start of conversation" + Datum */
.luca-feed-header{
  text-align:center;
  margin-bottom:12px;
  font-size:14px; /* 12 -> 14 (ca. +20%) */
  color:rgba(0,0,0,.55);
}

.luca-feed-header-label{
  text-transform:uppercase;
  font-size:13px; /* 11 -> 13 */
  letter-spacing:.08em;
  opacity:.75;
  margin-bottom:4px;
}

.luca-feed-header-date{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.08);
  color:rgba(0,0,0,.8);
  font-size:13px; /* 11 -> 13 */
}

/* Grundlayout der Reihen */
.luca-msg-row{
  display:flex;
  width:100%;
}

.luca-msg-row--luca{
  justify-content:flex-start;
}

.luca-msg-row--me{
  justify-content:flex-end;
}

/* Bubble-Basis */
.luca-msg-bubble{
  border-radius:18px;
  padding:8px 14px;
  font-size:17px; /* 14 -> 17 (ca. +20%) */
  line-height:1.4;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  position:relative;
  word-wrap:break-word;
}

/* Bubbles für Luca & Member */
.luca-msg-bubble--luca,
.luca-msg-bubble--me{
  max-width:470px !important; /* Desktop-Clamp */
  background:linear-gradient(135deg,#0078ff,#1b6dff);
  color:#fff;
}

/* Zeit + (optional) Datum in der Bubble */
.luca-msg-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-left:8px;
  margin-top:8px;            /* 👈 zusätzlicher Abstand zum Bild/Text oben */
  font-size:13px;            /* 11 -> 13 */
  opacity:.8;
  white-space:nowrap;
  width:calc(100% - 8px);    /* Zeit links / Datum rechts über Bubble-Breite */
}

/* Einzelne Date-Span rechts */
.luca-msg-meta-date{
  margin-left:8px;
  white-space:nowrap; /* Datum nicht umbrechen */
}

/* Choice-Buttons unter dem Chat */
.luca-feed-choices{
  margin-top:10px;
  display:flex;
  gap:8px;
}

.luca-feed-choice-btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:8px 14px;
  font-size:17px; /* 14 -> 17 */
  cursor:pointer;
  background:#fff;
  color:#333;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
  white-space:nowrap;
}

/* "Clear" Button unten rechts */
.luca-feed-clear-wrap{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
}

.luca-feed-clear{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:6px 14px;
  font-size:14px; /* 12 -> 14 */
  font-weight:500;
  cursor:pointer;
  background:rgba(0,0,0,.06);
  color:rgba(0,0,0,.7);
}

/* ===== Bubble Slide-Ins ===== */
@keyframes luca-bubble-slide-left{
  from{
    transform:translateX(-36px);
    opacity:1;
  }
  to{
    transform:translateX(0);
    opacity:1;
  }
}

@keyframes luca-bubble-slide-right{
  from{
    transform:translateX(36px);
    opacity:1;
  }
  to{
    transform:translateX(0);
    opacity:1;
  }
}

.luca-bubble-anim-left{
  animation:luca-bubble-slide-left 1s cubic-bezier(.22,.75,.25,1) both;
}

.luca-bubble-anim-right{
  animation:luca-bubble-slide-right 1s cubic-bezier(.22,.75,.25,1) both;
}

/* ===== Mobile-Finetuning ===== */
@media (max-width: 900px){
  .luca-msg-bubble{
    font-size:15px;
  }
  .luca-feed-choice-btn{
    font-size:15px;
  }
  .luca-feed-clear{
    font-size:13px;
  }
  .luca-feed-header{
    font-size:13px;
  }
  .luca-feed-header-label,
  .luca-feed-header-date{
    font-size:12px;
  }

  /* Auf sehr schmalen Screens darf die Bubble
     ruhig fast die ganze Breite nutzen */
  .luca-msg-bubble--luca,
  .luca-msg-bubble--me{
    max-width:100% !important;
  }
}