.luca-feed{
  height:100%;
  padding:18px 16px 24px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:2px; /* Reduziert, da wir Margin in den Rows nutzen */
  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:24px;
  font-size:14px; 
  color:rgba(0,0,0,.55);
}

.luca-feed-header-label{
  text-transform:uppercase;
  font-size:13px;
  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;
}

/* Grundlayout der Reihen */
.luca-msg-row{
  display:flex;
  width:100%;
  margin-bottom: 19px !important; /* WICHTIG: Platz für die Zeit unter der Bubble */
}

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

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

/* 
   NEU: Wrapper Support für JS Bridge 
   Falls JS einen Wrapper nutzt, soll er sich verhalten wie die Row-Logik 
*/
.luca-msg-bubble-wrap {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}
.luca-msg-row--me .luca-msg-bubble-wrap {
    align-items: flex-end;
}
.luca-msg-row--luca .luca-msg-bubble-wrap {
    align-items: flex-start;
}

/* Bubble-Basis */
.luca-msg-bubble{
  border-radius:18px;
  padding:8px 14px;
  font-size:17px; 
  line-height:1.4;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
  position:relative;
  word-wrap:break-word;
  
  /* WICHTIG FÜR TIME-OUTSIDE */
  overflow: visible !important; 
  display: flex;
  flex-direction: column;
}

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

/* 
   -------------------------------------------------------
   ZEIT-ANZEIGE (Time Outside Bubble)
   -------------------------------------------------------
   Hier passiert die Magie. Wir positionieren die Meta-Info
   absolut unter der Bubble.
*/
.luca-msg-meta{
  position: absolute !important;
  bottom: -19px !important; /* Schiebt es unter die Bubble */
  
  display:flex;
  align-items:center;
  
  /* Reset alter Styles */
  margin: 0 !important;
  width: auto !important;
  
  /* Design */
  font-size: 11px !important;
  color: #8f8e8d !important; /* Dein gewünschtes Grau */
  opacity: 1 !important;
  line-height: 1 !important;
  white-space:nowrap;
  pointer-events: none; /* Klicks gehen durch */
}

/* 
   Ausrichtung LUCA: Links bündig mit Bubble-Start
*/
.luca-msg-bubble--luca .luca-msg-meta {
    left: 2px !important; 
    justify-content: flex-start;
}

/* 
   Ausrichtung ME: Rechts bündig mit Bubble-Ende
*/
.luca-msg-bubble--me .luca-msg-meta {
    right: 2px !important;
    justify-content: flex-end;
}

/* Support für JS-generierte "Outside"-Klasse */
.luca-msg-meta-outside {
    font-size: 11px !important;
    color: #8f8e8d !important;
    margin-top: 4px;
    line-height: 1;
    padding: 0 2px;
}

/* Einzelne Date-Span (falls vorhanden) */
.luca-msg-meta-date{
  margin-left:8px;
  white-space:nowrap; 
  display: none; /* Optional: Datum ausblenden, wenn nur Zeit gewünscht */
}

/* Choice-Buttons unter dem Chat */
.luca-feed-choices{
  margin-top:10px;
  display:flex;
  gap:8px;
  /* Stellen sicher, dass Buttons nicht von der Zeit überlappt werden */
  position: relative; 
  z-index: 2;
}

.luca-feed-choice-btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:8px 14px;
  font-size:17px; 
  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; 
  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;
  }
}