/* ============================================================
   KI-Zwilling – Gestaltung des Chats
   Nutzt die Markenvariablen aus index.html
   ============================================================ */

.tw {
  background: var(--paper, #fff);
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* ---------- Kopf ---------- */
.tw-head {
  background: linear-gradient(120deg, var(--green-900, #00555C), var(--green-700, #3E6B70));
  color: #fff;
  padding: .9rem 1.2rem;
  display: flex; align-items: center; gap: .9rem;
}
.tw-avatar {
  position: relative; flex: 0 0 40px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.5);
  display: grid; place-items: center;
  font-weight: 900; font-size: .85rem; letter-spacing: .04em;
}
.tw-avatar i {
  position: absolute; right: -2px; bottom: -2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #3ee08a; border: 2px solid var(--green-900, #00555C);
}
.tw-who { flex: 1; min-width: 0; line-height: 1.25; }
.tw-who b { display: block; font-size: 1rem; }
.tw-who span { font-size: .76rem; opacity: .8; }
.tw-tools { display: flex; gap: .35rem; }
.tw-ib {
  width: 34px; height: 34px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.1);
  color: #fff; display: grid; place-items: center; cursor: pointer;
}
.tw-ib:hover { background: rgba(255,255,255,.22); }
.tw-ib[aria-pressed="true"] { background: #fff; color: var(--green-900, #00555C); border-color: #fff; }
.tw-ib svg { width: 16px; height: 16px; }

/* ---------- Verlauf ---------- */
.tw-body {
  background: var(--cream, #F4FAF6);
  min-height: 380px; max-height: 62vh; overflow-y: auto;
  padding: 1.3rem 1.2rem;
  overscroll-behavior: contain;
}
.tw-intro { text-align: center; padding: .6rem 0 1.2rem; }
.tw-intro .tw-hello {
  font-size: 1.02rem; color: var(--ink, #204A4F);
  max-width: 34rem; margin: 0 auto .9rem;
}
.tw-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.tw-chip {
  border: 1px solid var(--line, #DCEAE1); background: #fff;
  color: var(--muted, #3E6B70); border-radius: 999px;
  padding: .45rem .9rem; font-size: .86rem; font-weight: 600; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.tw-chip:hover { background: var(--green-100, #B4DAC3); color: var(--green-950, #003E44); border-color: var(--green-100, #B4DAC3); }

.tw-thread { display: flex; flex-direction: column; gap: 1rem; }
.tw-msg { display: flex; gap: .6rem; align-items: flex-start; }
.tw-msg.ich { flex-direction: row-reverse; }
.tw-msg .tw-av {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-size: .68rem; font-weight: 900;
  background: var(--green-900, #00555C); color: #fff; margin-top: 2px;
}
.tw-msg.ich .tw-av { background: var(--green-100, #B4DAC3); color: var(--green-900, #00555C); }
.tw-col { display: flex; flex-direction: column; gap: .35rem; max-width: min(82%, 600px); min-width: 0; }
.tw-msg.ich .tw-col { align-items: flex-end; }
.tw-bubble {
  background: #fff; border: 1px solid var(--line, #DCEAE1);
  border-radius: 14px; border-top-left-radius: 5px;
  padding: .7rem .95rem; font-size: .95rem; line-height: 1.55;
  color: var(--ink, #204A4F); overflow-wrap: anywhere;
}
.tw-msg.ich .tw-bubble {
  background: var(--green-900, #00555C); color: #fff; border-color: transparent;
  border-radius: 14px; border-top-right-radius: 5px;
}
.tw-bubble p { margin: 0 0 .6em; }
.tw-bubble p:last-child { margin-bottom: 0; }
.tw-bubble ul, .tw-bubble ol { margin: .25em 0 .6em; padding-left: 1.25em; }
.tw-bubble li { margin: .15em 0; }
.tw-bubble b, .tw-bubble strong { color: var(--green-900, #00555C); font-weight: 800; }
.tw-msg.ich .tw-bubble b { color: #FFEF80; }
.tw-bubble h4 { font-size: 1em; margin: .7em 0 .25em; color: var(--green-950, #003E44); }
.tw-bubble .tw-tab { overflow-x: auto; }
.tw-bubble table { border-collapse: collapse; font-size: .9em; margin: .3em 0 .7em; }
.tw-bubble th, .tw-bubble td { border: 1px solid var(--line, #DCEAE1); padding: .3rem .6rem; text-align: left; }
.tw-bubble th { background: var(--cream, #F4FAF6); }
.tw-bubble code { background: var(--cream, #F4FAF6); padding: 0 .3em; border-radius: 4px; font-size: .9em; }

.tw-denkt { display: inline-flex; gap: 4px; align-items: center; height: 1.4em; }
.tw-denkt i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted, #3E6B70); animation: tw-puls 1.2s infinite ease-in-out; }
.tw-denkt i:nth-child(2) { animation-delay: .15s; }
.tw-denkt i:nth-child(3) { animation-delay: .3s; }
@keyframes tw-puls { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }

.tw-fb { display: flex; gap: .2rem; padding-left: .2rem; flex-wrap: wrap; }
.tw-fb button {
  border: 0; background: transparent; color: var(--muted, #3E6B70);
  font-size: .78rem; font-weight: 600; padding: .2rem .5rem; border-radius: 6px;
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
}
.tw-fb button:hover { background: #fff; }
.tw-fb button.an { background: var(--green-100, #B4DAC3); color: var(--green-950, #003E44); }
.tw-fb svg { width: 13px; height: 13px; }

.tw-hinweis {
  align-self: center; background: #FDF0EC; color: #9B3A28; border: 1px solid #F3D4CB;
  border-radius: 10px; padding: .55rem .9rem; font-size: .86rem; max-width: 34rem; text-align: center;
}

/* ---------- Eingabe ---------- */
.tw-foot { background: #fff; border-top: 1px solid var(--line, #DCEAE1); padding: .8rem 1.1rem .9rem; }
.tw-status {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: var(--muted, #3E6B70); padding: 0 .1rem .55rem;
}
.tw-status .led { width: 8px; height: 8px; border-radius: 50%; background: var(--muted, #3E6B70); flex: none; }
.tw-status.hoert .led { background: #C25B4A; }
.tw-status.spricht .led { background: #2E9E6B; }
.tw-status button {
  margin-left: auto; border: 1px solid var(--line, #DCEAE1); background: #fff;
  border-radius: 999px; padding: .2rem .7rem; font-size: .78rem; cursor: pointer; color: var(--muted, #3E6B70);
}
.tw-form { display: flex; gap: .55rem; align-items: flex-end; }
.tw-rund {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line, #DCEAE1); background: #fff; color: var(--muted, #3E6B70);
  display: grid; place-items: center; cursor: pointer; transition: background .12s, color .12s;
}
.tw-rund:hover { background: var(--cream, #F4FAF6); }
.tw-rund:disabled { opacity: .35; cursor: default; }
.tw-rund svg { width: 18px; height: 18px; }
.tw-rund.senden { background: var(--green-900, #00555C); color: #fff; border-color: var(--green-900, #00555C); }
.tw-rund.senden:hover:not(:disabled) { background: var(--green-800, #00555C); filter: brightness(1.1); }
.tw-rund.stopp { background: var(--ink, #204A4F); color: #fff; border-color: var(--ink, #204A4F); }
.tw-rund.live { background: #C25B4A; border-color: #C25B4A; color: #fff; animation: tw-ring 1.4s infinite; }
@keyframes tw-ring { 0% { box-shadow: 0 0 0 0 rgba(194,91,74,.45); } 100% { box-shadow: 0 0 0 12px rgba(194,91,74,0); } }
.tw-feld {
  flex: 1; display: flex; align-items: flex-end;
  border: 1px solid var(--line, #DCEAE1); background: var(--cream, #F4FAF6);
  border-radius: 22px; padding: 3px 6px 3px 14px;
}
.tw-feld:focus-within { border-color: var(--green-600, #0F6B73); box-shadow: 0 0 0 3px var(--green-100, #B4DAC3); }
.tw-feld textarea {
  flex: 1; border: 0; background: transparent; resize: none; outline: none;
  font: inherit; font-size: .95rem; color: var(--ink, #204A4F); line-height: 1.45;
  padding: .5rem 0; max-height: 150px;
}
.tw-feld textarea::placeholder { color: #8FA3AA; }
.tw-note { font-size: .76rem; color: #8FA3AA; text-align: center; margin: .7rem 0 0; line-height: 1.5; }
.tw-note a { color: var(--green-800, #00555C); }

.tw-aus {
  margin: 0 0 .7rem; padding: .6rem .9rem; border-radius: 9px;
  background: #FFFBE0; color: #6E4E12; border: 1px solid #F0E3A0; font-size: .85rem;
}

@media (prefers-reduced-motion: reduce) {
  .tw-denkt i, .tw-rund.live { animation: none; }
}
@media (max-width: 600px) {
  .tw-body { padding: 1rem .8rem; max-height: 70vh; }
  .tw-col { max-width: 90%; }
  .tw-foot { padding: .7rem .8rem .8rem; }
}