/* ════════════════════════════════════════
   KLARTEXT CHAT — Gemeinsame Stile
   Etappe 7.1 — Grundgerüst
   ════════════════════════════════════════ */

:root{
  --chat-navy:#1B3A4B;
  --chat-acc:#6EC6A0;
  --chat-paper:#F5F0E8;
  --chat-surface:#fff;
  --chat-border:#DDD8CE;
  --chat-muted:#6A6878;
  --chat-rolle-ingra:#1B3A4B;
  --chat-rolle-tk:#C47A00;
  --chat-rolle-pool:#3B8A68;
}

*{box-sizing:border-box;}

.chat-header{
  background:var(--chat-navy);
  height:56px;
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:0 1rem;
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:3px solid var(--chat-acc);
  flex-shrink:0;
}
.chat-header-back{
  color:var(--chat-acc);
  text-decoration:none;
  font-size:1.1rem;
  flex-shrink:0;
}
.chat-header-titel{
  color:#fff;
  font-family:"Playfair Display",serif;
  font-size:1rem;
  font-weight:700;
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-header-aktion{
  color:var(--chat-acc);
  text-decoration:none;
  font-size:.78rem;
  font-weight:700;
  border:1.5px solid var(--chat-acc);
  border-radius:20px;
  padding:.3rem .7rem;
  flex-shrink:0;
  background:none;
  cursor:pointer;
  font-family:"DM Sans",sans-serif;
}

/* ── CHATLISTE ── */
.chat-liste-shell{
  max-width:560px;
  margin:0 auto;
  padding-bottom:5rem;
}
.chat-liste-leer{
  text-align:center;
  padding:3rem 1.5rem;
  color:var(--chat-muted);
  font-size:.85rem;
  line-height:1.6;
}
.chat-eintrag{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.85rem 1.1rem;
  background:var(--chat-surface);
  border-bottom:1px solid var(--chat-border);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:background .15s;
}
.chat-eintrag:hover{
  background:var(--chat-paper);
}
.chat-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:1.1rem;
  flex-shrink:0;
}
.chat-eintrag-inhalt{
  flex:1;
  min-width:0;
}
.chat-eintrag-kopf{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.5rem;
}
.chat-eintrag-name{
  font-weight:700;
  color:var(--chat-navy);
  font-size:.9rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-eintrag-zeit{
  font-size:.68rem;
  color:var(--chat-muted);
  flex-shrink:0;
}
.chat-eintrag-zeile2{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  margin-top:.15rem;
}
.chat-eintrag-vorschau{
  font-size:.8rem;
  color:var(--chat-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
}
.chat-badge{
  background:var(--chat-acc);
  color:var(--chat-navy);
  font-size:.68rem;
  font-weight:800;
  min-width:20px;
  height:20px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 .4rem;
  flex-shrink:0;
}

.chat-fab{
  position:fixed;
  bottom:1.5rem;
  right:1.5rem;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--chat-navy);
  color:#fff;
  border:2px solid var(--chat-acc);
  font-size:1.4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(27,58,75,.35);
  z-index:50;
}

/* ── CHATFENSTER ── */
.chat-view-body{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 56px);
}
.chat-verlauf{
  flex:1;
  overflow-y:auto;
  padding:1rem .85rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  background:var(--chat-paper);
}
.chat-verlauf-leer{
  text-align:center;
  color:var(--chat-muted);
  font-size:.82rem;
  padding:2rem 1rem;
}
.chat-bubble-zeile{
  display:flex;
  width:100%;
}
.chat-bubble-zeile.eigene{
  justify-content:flex-end;
}
.chat-bubble-zeile.fremde{
  justify-content:flex-start;
}
.chat-bubble{
  max-width:75%;
  padding:.55rem .8rem;
  border-radius:14px;
  font-size:.86rem;
  line-height:1.5;
  color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
}
.chat-bubble-zeile.eigene .chat-bubble{
  border-bottom-right-radius:4px;
}
.chat-bubble-zeile.fremde .chat-bubble{
  border-bottom-left-radius:4px;
}
.chat-bubble-sender{
  font-size:.68rem;
  font-weight:700;
  opacity:.85;
  margin-bottom:.15rem;
  display:block;
}
.chat-bubble-text{
  white-space:pre-wrap;
  word-break:break-word;
}
.chat-bubble-zeit{
  font-size:.62rem;
  opacity:.75;
  margin-top:.2rem;
  text-align:right;
}

.chat-eingabe-leiste{
  display:flex;
  align-items:flex-end;
  gap:.6rem;
  padding:.7rem .85rem;
  background:var(--chat-surface);
  border-top:1px solid var(--chat-border);
  flex-shrink:0;
}
.chat-eingabe-feld{
  flex:1;
  border:1.5px solid var(--chat-border);
  border-radius:20px;
  padding:.6rem 1rem;
  font-family:"DM Sans",sans-serif;
  font-size:.86rem;
  resize:none;
  max-height:120px;
  background:var(--chat-paper);
}
.chat-eingabe-feld:focus{
  outline:none;
  border-color:var(--chat-navy);
}
.chat-senden-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--chat-navy);
  color:#fff;
  border:none;
  font-size:1.1rem;
  cursor:pointer;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chat-senden-btn:disabled{
  background:var(--chat-border);
  cursor:not-allowed;
}

/* ── NEUE KONVERSATION ── */
.chat-new-shell{
  max-width:560px;
  margin:0 auto;
  padding:1.25rem 1rem 4rem;
}
.chat-new-hinweis{
  font-size:.78rem;
  color:var(--chat-muted);
  padding:0 .25rem 1rem;
}
.chat-partner-karte{
  display:flex;
  align-items:center;
  gap:.85rem;
  background:var(--chat-surface);
  border-radius:12px;
  padding:.85rem 1.1rem;
  margin-bottom:.6rem;
  cursor:pointer;
  border:1.5px solid var(--chat-border);
  transition:border-color .15s,transform .15s;
}
.chat-partner-karte:hover{
  border-color:var(--chat-navy);
  transform:translateX(3px);
}
.chat-partner-name{
  font-weight:700;
  color:var(--chat-navy);
  font-size:.88rem;
}
.chat-partner-rolle{
  font-size:.72rem;
  color:var(--chat-muted);
}