/* Vollflächig, alle Nachrichten links */
html, body { height: 100%; margin: 0; }
.cchat-root {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: #fff;
}
.cchat-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.cchat-title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.cchat-clear {
  margin-left: auto;
  padding: 0.45rem .8rem;
  border: 1px solid #b11;
  background: #fef2f2;
  color: #b11;
  border-radius: 8px;
  cursor: pointer;
}
.cchat-clear:hover { background: #fde3e3; }

.cchat-main { overflow: hidden; }
.cchat-messages {
  height: 100%;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Standard-Bubble; per-User-Farben werden inline per style gesetzt */
.cchat-msg {
  max-width: 100%;
  width: fit-content;
  padding: .6rem .8rem;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  line-height: 1.35;
  background: #f9f9f9;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}
.cchat-msg .cchat-author { font-weight: 600; margin-right: .35rem; }
.cchat-ts { display: block; font-size: .75rem; opacity: .7; margin-top: .2rem; }

.cchat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  padding: .75rem;
  border-top: 1px solid #ddd;
}
#cchat-input {
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1rem;
}
.cchat-send {
  padding: .65rem 1rem;
  border: 1px solid #222;
  background: #111;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}
.cchat-send:disabled { opacity: .6; cursor: not-allowed; }

.cchat-footer {
  border-top: 1px dashed #e5e5e5;
  padding: .4rem 1rem .8rem;
  color: #666;
  font-size: .85rem;
}
.visually-hidden { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
