/* ===== Club-Chat (kompletter Block) ===== */

:root{
  /* Farben an dein edles Theme anpassen */
  --chat-bg: #f3f4f6;;
  --chat-border: #E6E8EB;
  --chat-muted: #6B7280;
  --chat-ink: #111317;
  --chat-accent: #8B5CF6;   /* zarter Violett-Akzent */
  --chat-accent-weak: #EFE8FF;
  --chat-danger: #C2410C;   /* warmes Rot für "Löschen" */
  --chat-shadow: 0 6px 18px rgba(17,19,23,0.08);
}

/* Sektion */
#chatSection{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* Formular */
#chatForm{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

/* Textfeld – bleibt innerhalb der Card */
#chatInput{
  width:100%;
  max-width:100%;
  min-height:96px;
  box-sizing:border-box;
  resize:vertical;                /* Höhe verstellbar, nicht Breite */
  padding:.75rem .9rem;
  border-radius:.6rem;
  border:1px solid var(--chat-border);
  background:var(--chat-bg);
  color:var(--chat-ink);
  font:inherit;
  line-height:1.4;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#chatInput:focus{
  border-color:var(--chat-accent);
  box-shadow:0 0 0 3px var(--chat-accent-weak);
}

/* Counter + Button-Reihe unter dem Textfeld */
.chat-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
#chatCount{
  color:var(--chat-muted);
  font-size:.9rem;
}

/* Liste */
.chat-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

/* Einzel-Nachricht */
.chat-msg{
  background:var(--chat-bg);
  border:1px solid var(--chat-border);
  border-radius:.75rem;
  padding:.75rem .9rem;
  box-shadow: var(--chat-shadow);
}

/* Kopfzeile: Name links, Datum rechts */
.chat-meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.75rem;
  margin-bottom:.35rem;
}
.chat-name{
  font-weight:600;
  color:var(--chat-ink);
}
.chat-date{
  color:var(--chat-muted);
  font-size:.9rem;
}

/* Text */
.chat-text{
  color:var(--chat-ink);
  line-height:1.5;
  white-space:pre-wrap;
  margin-bottom:.5rem;
}

/* Reaktionsreihe (👍 👎 + Löschen) */
.chat-actions-row{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

/* Reaktionsbuttons */
.react-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .6rem;
  border:1px solid var(--chat-border);
  border-radius:999px;
  background:#F7F7FA;
  color:var(--chat-ink);
  font-size:.95rem;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
}
.react-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(17,19,23,.06);
}
.react-btn.active{
  background:var(--chat-accent-weak);
  border-color:var(--chat-accent);
}

/* Lösch-Button (Admin) */
.chat-delete{
  border-color:#F3D9D1;
  background:#FFF5F2;
  color:var(--chat-danger);
}
.chat-delete:hover{
  box-shadow:0 4px 10px rgba(194,65,12,.08);
}

/* „Posten“-Button im Formular an dein Button-Design angleichen */
#chatForm .chat-actions button[type="submit"]{
  padding:.5rem .9rem;
  border-radius:.6rem;
  border:1px solid var(--chat-border);
  background: linear-gradient(180deg,#1F2937,#111827);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:transform .06s ease, box-shadow .12s ease, opacity .15s ease;
}
#chatForm .chat-actions button[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(17,24,39,.18);
}

/* Platzhalter-Text */
.muted{
  color:var(--chat-muted);
}

/* Responsive Tweaks */
@media (max-width: 640px){
  .chat-meta{
    flex-direction:column;
    align-items:flex-start;
    gap:.2rem;
  }
  #chatInput{
    min-height:84px;
  }
}