/* ========================================
   Team Chat Module - CINNext
   ======================================== */

/* Left Panel */
.team-chat-left-panel {
  width: 35%;
  min-width: 260px;
  max-width: 500px;
  position: relative;
}

.team-chat-left-panel .card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

/* Left Panel Header */
.tc-header {
  padding: 0.75rem 1rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--cin-border);
}

.tc-header .form-control {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--cin-border);
}

.tc-header .form-control:focus {
  background-color: var(--bs-body-bg);
}

/* Conversation Sections */
.tc-section {
  flex-shrink: 0;
}

/* Notizen steht ohne Abschnitts-Ueberschrift ganz oben. Der kleine Abstand
   ersetzt den, den sonst die Ueberschrift mitbrachte. */
.tc-self-chat-standalone {
  flex-shrink: 0;
  padding-top: 0.5rem;
}

.tc-section-title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cin-text-muted);
  padding: 0.75rem 1rem 0.25rem;
  cursor: pointer;
  user-select: none;
}

.tc-section-title:hover {
  color: var(--cin-text-secondary);
}

.tc-collapse-icon {
  font-size: 0.6rem;
  transition: transform 0.15s;
}

.tc-drag-handle {
  cursor: grab;
  color: var(--cin-text-muted) !important;
  opacity: 0.4;
  font-size: 0.75rem;
  text-decoration: none !important;
  line-height: 1;
}

.tc-drag-handle:hover {
  opacity: 1;
}

.tc-section-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 1rem;
  background-color: var(--bs-primary);
  color: var(--bs-white);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1;
}

.tc-section-dragging {
  opacity: 0.4;
}

.tc-section-dragover {
  border-top: 2px solid var(--bs-primary);
}

/* Scrollable conversation list */
.tc-conversations-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Conversation Items */
.tc-conv-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
}

.tc-conv-item:hover {
  background-color: var(--cin-surface-hover);
}

.tc-conv-item.active {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  border-left-color: var(--bs-primary);
}

/* Avatar */
.tc-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  background: #16a34a;
  color: #fff;
}

.tc-avatar.tc-status-offline {
  background: #6b7280;
}

.tc-avatar.tc-status-away {
  background: #d97706;
}

.tc-avatar.tc-status-busy {
  background: #dc2626;
}

.tc-avatar.tc-avatar-group {
  border-radius: 0.5rem;
  background: var(--bs-tertiary-bg);
  color: var(--cin-text-secondary);
}

.tc-avatar.tc-avatar-self {
  border-radius: 0.5rem;
  background: var(--bs-primary);
  color: var(--bs-white);
}

/* Eintraege von Erweiterungen: gleiche Form wie „Notizen", aber in der
   Flaechenfarbe - sie sind keine Konversation und sollen sich auch nicht
   als eine ausgeben. */
.tc-avatar.tc-avatar-extension {
  border-radius: 0.5rem;
  background: var(--cin-surface-hover);
  color: var(--bs-primary);
}

/* Rumpf einer Erweiterungs-Flaeche. Die Erweiterung fuellt ihn selbst; der
   Core gibt nur Scrollverhalten und Innenabstand vor - wie bei .tc-messages. */
.tc-extension-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Status Dot */
.tc-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  border: 2px solid var(--bs-card-bg, var(--bs-body-bg));
}

.tc-status-dot.online {
  background-color: #16a34a;
}

.tc-status-dot.away {
  background-color: #d97706;
}

.tc-status-dot.busy {
  background-color: #dc2626;
}

.tc-status-dot.offline {
  background-color: #6b7280;
}

/* Conversation Item Content */
.tc-conv-info {
  flex: 1;
  min-width: 0;
}

.tc-conv-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-conv-preview {
  color: var(--cin-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-conv-meta {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.tc-conv-time {
  color: var(--cin-text-muted);
}

.tc-unread-badge {
  background-color: var(--bs-primary);
  color: #fff;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  min-width: 1.25rem;
  text-align: center;
  line-height: 1.4;
}

/* Stummgeschaltet (C3): Die Zahl bleibt, das Signal geht.
   Der Nutzer soll beim Hinsehen erkennen, dass dort etwas liegt - aber die Zeile
   soll ihn nicht mehr anspringen. Farben ueber Bootstrap-/CIN-Token, damit beide
   Themes ohne eigenen [data-bs-theme]-Block stimmen. */
.tc-unread-badge-muted {
  background-color: var(--bs-tertiary-bg);
  color: var(--cin-text-muted);
}

/* Glocken-Symbol hinter dem Namen. Ohne Zeichen waere die Stummschaltung unsichtbar
   und das fehlende Badge sahe wie ein Fehler aus. */
.tc-conv-muted-icon {
  color: var(--cin-text-muted);
  font-size: 0.75rem;
  vertical-align: baseline;
}

/* Sidebar Icon Badges */
.tc-icon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background-color: var(--bs-primary);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.tc-icon-badge i {
  font-size: 0.625rem;
}

.tc-group-badge {
  font-size: 0.6875rem;
  padding: 0.0625rem 0.375rem;
  line-height: 1.4;
  color: var(--bs-white);
}

.tc-member-count {
  color: var(--cin-text-muted);
}

/* Resize Handle */
.tc-resize-handle {
  width: 8px;
  background-color: var(--cin-border);
  cursor: col-resize;
  border-radius: 9999px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.tc-resize-handle:hover {
  background-color: var(--bs-primary);
  box-shadow: 0 0 10px rgba(var(--bs-primary-rgb), 0.3);
}

/* Right Panel */
.team-chat-right-panel {
  flex: 1;
  min-width: 0;
}

.team-chat-right-panel>.card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

/* Empty State */
.tc-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: var(--cin-text-muted);
  padding: 2rem;
  overflow-y: auto;
}

.tc-empty-fallback {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Unread Overview */
.tc-unread-overview {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.tc-overview-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 1rem;
  color: var(--cin-text-secondary);
  font-size: 0.9rem;
}

.tc-overview-section {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid var(--cin-border) !important;
}

.tc-overview-section:first-child {
  padding-top: 0.5rem !important;
}

.tc-overview-section:last-child {
  border-bottom: none !important;
}

.tc-overview-section-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cin-text-muted);
  padding: 0 0.75rem 0.5rem;
}

.tc-overview-section-count {
  margin-left: auto;
  color: var(--cin-text-muted);
  font-weight: 400;
}

.tc-overview-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.tc-overview-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.tc-overview-item:hover {
  background-color: var(--bs-tertiary-bg);
}

.tc-overview-item-body {
  flex: 1;
  min-width: 0;
}

.tc-overview-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.tc-overview-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cin-text-primary, var(--bs-body-color));
  font-size: 0.85rem;
}

.tc-overview-item-time {
  color: var(--cin-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.tc-overview-item-preview {
  color: var(--cin-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.125rem;
}

.tc-empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.3;
}

/* Conversation Header */
.tc-conv-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cin-border);
  flex-shrink: 0;
}

.tc-conv-header-info {
  flex: 1;
  min-width: 0;
}

/* Kanal-Kopf: Titel und Status je EINE Zeile mit Ellipsis — für ALLE Chat-Typen gleich
   (QA-Feedback Phase D: lange Betreffs ließen den Kopf auf viele Zeilen wachsen). Der volle
   Text steht im title-Tooltip; Aktions-Links (Mail/Ticket/Aufgabe öffnen) schrumpfen nie —
   nur der Text davor (.tc-status-text) wird gekürzt. */
.tc-conv-header-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-conv-header-status {
  color: var(--cin-text-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  white-space: nowrap;
}

.tc-conv-header-status .tc-status-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.tc-conv-header-status a {
  flex-shrink: 0;
}

.tc-conv-header-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

/* Back Button (mobile) */
.tc-back-btn {
  display: none;
}

/* Message List */
.tc-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

/* Date Separator */
.tc-date-separator {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

.tc-date-separator::before,
.tc-date-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--cin-border);
}

.tc-date-label {
  color: var(--cin-text-muted);
  white-space: nowrap;
}

/* „Neue Nachrichten"-Trennlinie (WP 5): wie der Datums-Trenner, aber in Signalfarbe — bewusst
   deutlich (die zu dezente Teams-Variante ist die Anti-Referenz). Beim Öffnen eingefroren,
   verschwindet erst beim nächsten Öffnen der Konversation. */
.tc-unread-separator {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

.tc-unread-separator::before,
.tc-unread-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--cin-danger);
}

.tc-unread-label {
  color: var(--cin-danger);
  white-space: nowrap;
}

/* Sticky-Overlays im Nachrichten-Scroller (erste/letzte Kinder von .tc-messages):
   Banner oben = Sprung zum Trenner; Pill unten = „N neue" beim Hochgescrollt-Sein. */
.tc-unread-banner {
  position: sticky;
  top: 0;
  z-index: 5;
  align-self: center;
  background: var(--cin-danger);
  color: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.tc-newmsg-pill {
  position: sticky;
  bottom: 0.5rem;
  z-index: 5;
  align-self: flex-end;
  background: var(--bs-primary);
  color: #fff;
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Message Bubble */
.tc-message {
  display: flex;
  gap: 0.5rem;
  max-width: 80%;
  margin-bottom: 0.125rem;
}

.tc-message.own {
  flex-direction: row-reverse;
  align-self: flex-end;
}

.tc-message.other {
  align-self: flex-start;
}

.tc-msg-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bs-primary);
  color: #fff;
  /* Oben auf Höhe von Name/Blasenoberkante (WhatsApp), nicht mehr unten hängend. */
  align-self: flex-start;
}

.tc-message.own .tc-msg-avatar {
  display: none;
}

.tc-message.hide-avatar .tc-msg-avatar {
  visibility: hidden;
}

.tc-msg-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tc-msg-sender {
  color: var(--cin-text-secondary);
  margin-bottom: 0.125rem;
  padding-left: 0.75rem;
}

.tc-message.own .tc-msg-sender {
  display: none;
}

.tc-message.hide-sender .tc-msg-sender {
  display: none;
}

.tc-msg-bubble {
  padding: 0.5rem 0.75rem;
  border-radius: 1rem;
  line-height: 1.5;
  word-break: break-word;
  position: relative;
}

.tc-message.other .tc-msg-bubble {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-bottom-left-radius: 0.25rem;
}

.tc-message.own .tc-msg-bubble {
  background-color: var(--cin-chat-sent);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}

.tc-message.hide-avatar.other .tc-msg-bubble {
  border-bottom-left-radius: 1rem;
  border-top-left-radius: 0.25rem;
}

.tc-message.hide-avatar.own .tc-msg-bubble {
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 0.25rem;
}

/* Links in Blasen erben die Textfarbe (eigene Blase = weiße Schrift auf --cin-chat-sent,
   Standard-Linkblau wäre dort unlesbar); Unterstrich kennzeichnet den Link in beiden Themes.
   Datei-Anhang-Kacheln sind ebenfalls <a> in der Blase und bleiben bewusst ohne Unterstrich. */
.tc-msg-bubble a:not(.tc-msg-attachment-file) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Zeit/Status unten rechts IN der Blase (WhatsApp-Muster): rechts-gefloatet ans Ende des
   Inhalts — passt die Meta in die letzte Textzeile, rutscht sie sonst rechtsbündig darunter. */
.tc-msg-meta {
  float: right;
  margin: 0.45em 0 -0.1em 0.6em;
  line-height: 1;
  color: var(--cin-text-muted);
  white-space: nowrap;
  user-select: none;
}

.tc-message.own .tc-msg-bubble .tc-msg-meta {
  color: rgba(255, 255, 255, 0.75);
}

/* Pin-/Editiert-Indikatoren erben in der eigenen (dunklen) Blase die Meta-Farbe —
   Markenblau bzw. Muted-Grau wären dort kontrastlos (Review-Fund). */
.tc-message.own .tc-msg-bubble .tc-msg-pinned-indicator,
.tc-message.own .tc-msg-bubble .tc-msg-edited {
  color: inherit;
}

/* Benachrichtigungs-Karten füllen die Blase mit negativen Margins bis an alle Ränder — eine
   fließende Meta-Zeile darunter würde den farbigen Seitenbalken von der Blasenunterkante
   wegdrücken (weißer Streifen, QA-Fund). Daher: Meta als Overlay unten rechts ÜBER der Karte
   (.tc-msg-bubble ist position:relative), wie die Zeit auf WhatsApp-Bildnachrichten. */
.tc-vacation-card~.tc-msg-meta,
.tc-task-card~.tc-msg-meta,
.tc-event-card~.tc-msg-meta,
.tc-event-card-removed~.tc-msg-meta {
  float: none;
  position: absolute;
  right: 0.6rem;
  bottom: 0.35rem;
  margin: 0;
}

/* Platz für das Meta-Overlay, damit Kartentext nicht mit der Zeit kollidiert (inline-Padding
   der Karten braucht !important zum Überschreiben). */
.tc-msg-bubble .tc-vacation-card>div:last-child,
.tc-msg-bubble .tc-task-card>div:last-child,
.tc-msg-bubble .tc-event-card>div:last-child,
.tc-msg-bubble .tc-event-card-removed>div:last-child {
  padding-bottom: 1.4rem !important;
}

/* Message Bubble Wrap (for react button positioning) */
.tc-msg-bubble-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.tc-message.own .tc-msg-bubble-wrap {
  flex-direction: row-reverse;
}

/* Action buttons container: toolbar above bubble, no layout shift */
.tc-msg-actions {
  position: absolute;
  top: 0;
  transform: translateY(-98%);
  display: none;
  align-items: center;
  gap: 0.125rem;
  z-index: 2;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--cin-border);
  border-radius: 0.75rem;
  padding: 0.125rem 0.25rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.tc-message:hover .tc-msg-actions {
  display: inline-flex;
}

.tc-message.other .tc-msg-actions {
  right: 0;
  left: auto;
}

.tc-message.own .tc-msg-actions {
  left: 0;
  right: auto;
}

.tc-react-btn {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--cin-border);
  background-color: var(--bs-body-bg);
  color: var(--cin-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
  transition: all 0.15s;
  flex-shrink: 0;
}

.tc-react-btn:hover {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  border-color: var(--bs-primary);
}

/* Emoji Picker */
.tc-emoji-picker {
  position: absolute;
  top: -2.5rem;
  display: flex;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--cin-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.tc-message.other .tc-emoji-picker {
  left: 0;
}

.tc-message.own .tc-emoji-picker {
  right: 0;
}

.tc-emoji-option {
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.1s;
}

.tc-emoji-option:hover {
  background-color: var(--cin-surface-hover);
}

/* Message Reactions */
.tc-msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding-left: 0.75rem;
}

.tc-reaction {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  background-color: var(--cin-surface-hover);
  border: 1px solid var(--cin-border);
  cursor: pointer;
  transition: all 0.15s;
}

.tc-reaction:hover {
  border-color: var(--bs-primary);
}

.tc-reaction-own {
  background-color: rgba(var(--bs-primary-rgb), 0.12);
  border-color: var(--bs-primary);
}

.tc-reaction-count {
  color: var(--cin-text-muted);
}

/* Attachment Preview (pending files before send) */
.tc-attachment-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem 1rem 0;
}

.tc-attachment-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--cin-border);
  max-width: 200px;
}

.tc-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.tc-attachment-size {
  color: var(--cin-text-muted);
  white-space: nowrap;
}

.tc-attachment-remove {
  border: none;
  background: none;
  color: var(--cin-text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.tc-attachment-remove:hover {
  color: var(--bs-danger);
}

/* Conversation Search */
.tc-conv-search-wrapper {
  flex: 1;
  max-width: 400px;
  margin: 0 0.75rem;
}

.tc-conv-search-input {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--cin-border);
  border-radius: 1.25rem;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
}

.tc-conv-search-input:focus-within {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

.tc-conv-search-input>i:first-child {
  color: var(--cin-text-muted);
  flex-shrink: 0;
}

.tc-conv-search-input .form-control {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0.125rem 0;
  min-width: 0;
}

.tc-conv-search-count {
  color: var(--cin-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.tc-conv-search-nav {
  border: none;
  background: none;
  color: var(--cin-text-muted);
  cursor: pointer;
  padding: 0.125rem;
  line-height: 1;
  flex-shrink: 0;
}

.tc-conv-search-nav:hover {
  color: var(--bs-primary);
}

.tc-conv-search-close {
  border: none;
  background: none;
  color: var(--cin-text-muted);
  cursor: pointer;
  padding: 0.125rem;
  line-height: 1;
  flex-shrink: 0;
}

.tc-conv-search-close:hover {
  color: var(--bs-danger);
}

/* Search Highlights */
.tc-msg-bubble.tc-search-highlight {
  outline: 2px solid rgba(var(--bs-warning-rgb), 0.5);
  outline-offset: 1px;
}

.tc-message.tc-search-active .tc-msg-bubble {
  outline: 2px solid var(--bs-warning);
  outline-offset: 1px;
  background-color: rgba(var(--bs-warning-rgb), 0.1);
}

/* Reply Preview (above input) */
.tc-reply-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--cin-border);
  background-color: var(--bs-tertiary-bg);
}

.tc-reply-preview-content {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  overflow: hidden;
}

.tc-reply-preview-content>span:last-child {
  color: var(--cin-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-reply-preview-content>i {
  color: var(--bs-primary);
  flex-shrink: 0;
}

.tc-reply-preview-close {
  border: none;
  background: none;
  color: var(--cin-text-muted);
  cursor: pointer;
  padding: 0.125rem;
  flex-shrink: 0;
}

.tc-reply-preview-close:hover {
  color: var(--bs-danger);
}

/* Reply Quote (in message bubble) */
.tc-reply-quote {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.25rem;
  border-left: 2px solid var(--bs-primary);
  border-radius: 0 0.25rem 0.25rem 0;
  background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.tc-message.own .tc-reply-quote {
  border-left-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.12);
}

.tc-reply-quote-sender {
  color: var(--bs-primary);
}

.tc-message.own .tc-reply-quote-sender {
  color: rgba(255, 255, 255, 0.85);
}

.tc-reply-quote-text {
  color: var(--cin-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-message.own .tc-reply-quote-text {
  color: rgba(255, 255, 255, 0.7);
}

/* Reply Button */
.tc-reply-btn {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--cin-border);
  background-color: var(--bs-body-bg);
  color: var(--cin-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
  transition: all 0.15s;
  flex-shrink: 0;
}

.tc-reply-btn:hover {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  border-color: var(--bs-primary);
}

/* Edit Button */
.tc-edit-btn {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--cin-border);
  background-color: var(--bs-body-bg);
  color: var(--cin-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
  transition: all 0.15s;
  flex-shrink: 0;
}

.tc-edit-btn:hover {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  border-color: var(--bs-primary);
}

/* Pin Button */
.tc-pin-btn {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--cin-border);
  background-color: var(--bs-body-bg);
  color: var(--cin-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
  transition: all 0.15s;
  flex-shrink: 0;
}

.tc-pin-btn:hover {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  border-color: var(--bs-primary);
}

/* Pinned Message Indicator */
.tc-msg-pinned-indicator {
  color: var(--bs-primary);
  font-size: 0.7rem;
}

/* Pinned Messages Area */
.tc-pinned-area {
  flex-shrink: 0;
  max-height: 40%;
  overflow-y: auto;
}

/* Pinned Cards */
.tc-pinned-card {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--cin-border);
  background-color: rgba(var(--bs-primary-rgb), 0.03);
}

.tc-pinned-card-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}

.tc-pinned-card-icon {
  color: var(--bs-primary);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.tc-pinned-card-sender {
  color: var(--bs-primary);
}

.tc-pinned-card-time {
  color: var(--cin-text-muted);
  margin-left: auto;
}

.tc-pinned-card-unpin {
  border: none;
  background: none;
  color: var(--cin-text-muted);
  cursor: pointer;
  padding: 0.125rem;
  line-height: 1;
  font-size: 0.7rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.tc-pinned-card-unpin:hover {
  color: var(--bs-danger);
  background-color: rgba(var(--bs-danger-rgb), 0.1);
}

.tc-pinned-card-body {
  line-height: 1.5;
}

.tc-pinned-card-body img {
  max-width: 200px;
  max-height: 150px;
  border-radius: 0.375rem;
}

/* Poll Widget */
.tc-poll {
  min-width: 250px;
  max-width: 400px;
}

.tc-poll-question {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.tc-poll-options {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.tc-poll-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--cin-border);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s;
  background-color: var(--bs-body-bg);
}

.tc-poll-option:hover:not(.disabled) {
  border-color: var(--bs-primary);
}

.tc-poll-option.selected {
  border-color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.tc-poll-option.disabled {
  cursor: default;
  opacity: 0.85;
}

.tc-poll-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgba(var(--bs-primary-rgb), 0.12);
  transition: width 0.3s ease;
  border-radius: 0.375rem 0 0 0.375rem;
}

.tc-poll-option.selected .tc-poll-bar {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
}

.tc-poll-option-text {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-poll-option-count {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  margin-left: 0.5rem;
  color: var(--cin-text-muted);
}

.tc-poll-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--cin-text-muted);
  flex-wrap: wrap;
}

.tc-poll-closed-badge {
  color: var(--bs-danger);
}

.tc-poll-close-btn {
  padding: 0.125rem 0.5rem;
}

/* Own message poll overrides */
.tc-message.own .tc-poll-option {
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
}

.tc-message.own .tc-poll-bar {
  background-color: rgba(255, 255, 255, 0.15);
}

.tc-message.own .tc-poll-option.selected .tc-poll-bar {
  background-color: rgba(255, 255, 255, 0.25);
}

.tc-message.own .tc-poll-option-count {
  color: rgba(255, 255, 255, 0.7);
}

.tc-message.own .tc-poll-footer {
  color: rgba(255, 255, 255, 0.7);
}

.tc-message.own .tc-poll-closed-badge {
  color: rgba(255, 200, 200, 0.9);
}

/* Edit Mode */
.tc-edit-input {
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  resize: none;
  outline: none;
  font: inherit;
  min-height: 2em;
  max-height: 120px;
}

.tc-edit-actions {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

/* Edited Indicator */
.tc-msg-edited {
  color: var(--cin-text-muted);
  font-style: italic;
}

/* Input Emoji Picker */
.tc-emoji-input-picker {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: flex;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: 0.5rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--cin-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
  margin-bottom: 0.25rem;
}

/* Attach Button */
.tc-attach-btn {
  border: none;
  background: none;
  color: var(--cin-text-muted);
  cursor: pointer;
  padding: 0.25rem;
  font-size: 1.125rem;
  transition: color 0.15s;
  flex-shrink: 0;
}

.tc-attach-btn:hover {
  color: var(--bs-primary);
}

/* Message Attachments */
.tc-msg-attachments {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.tc-msg-attachment-img {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  max-width: 300px;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: zoom-in;
}

.tc-msg-attachment-img img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: cover;
  border-radius: 0.5rem;
}

.tc-msg-attachment-img:focus-visible {
  outline: 3px solid rgba(var(--bs-primary-rgb), 0.5);
  outline-offset: 2px;
}

.tc-image-preview-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 1rem;
  overflow: auto;
  background-color: var(--bs-dark);
}

.tc-image-preview-modal img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.window-modal.modal-fullscreen .modal-body:has(.tc-image-preview-modal) {
  padding: 0;
  overflow: hidden;
}

.tc-msg-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  border: 1px solid var(--cin-border);
  text-decoration: none;
  color: var(--bs-body-color);
  transition: background-color 0.15s;
  max-width: 280px;
}

.tc-msg-attachment-file:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.tc-msg-attachment-file>i:first-child {
  font-size: 1.25rem;
  color: var(--bs-primary);
  flex-shrink: 0;
}

.tc-msg-attachment-file>i:last-child {
  color: var(--cin-text-muted);
  flex-shrink: 0;
}

.tc-msg-attachment-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tc-msg-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tc-msg-attachment-size {
  color: var(--cin-text-muted);
}

/* Own message attachment colors */
.tc-message.own .tc-msg-attachment-file {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--bs-white);
}

.tc-message.own .tc-msg-attachment-file:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.tc-message.own .tc-msg-attachment-file>i {
  color: var(--bs-white);
}

/* Text Formatting Context Menu */
.tc-format-menu {
  position: fixed;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--cin-border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0.25rem;
  min-width: 180px;
}

.tc-format-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background: none;
  color: var(--bs-body-color);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 0.8125rem;
  text-align: left;
  white-space: nowrap;
}

.tc-format-option:hover {
  background-color: var(--cin-surface-hover);
}

.tc-format-option b,
.tc-format-option i,
.tc-format-option del,
.tc-format-option code {
  min-width: 1.25rem;
  text-align: center;
  color: var(--bs-primary);
}

/* Drag-over state */
.tc-drag-over {
  outline: 2px dashed var(--bs-primary);
  outline-offset: -4px;
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Postfach Link in Internal Thread Header */
.tc-postfach-link {
  color: var(--bs-primary);
  text-decoration: none;
}

.tc-postfach-link:hover {
  text-decoration: underline;
}

/* Reason Badges (Bridge) */
.tc-reason-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
  line-height: 1.4;
  white-space: nowrap;
}

.tc-reason-watched {
  color: var(--cin-info);
  border: 1px solid var(--cin-info);
}

.tc-reason-assigned {
  color: var(--cin-success);
  border: 1px solid var(--cin-success);
}

.tc-reason-team {
  color: var(--cin-warning);
  border: 1px solid var(--cin-warning);
}

/* Typing Indicator */
.tc-typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 1rem;
  color: var(--cin-text-muted);
  flex-shrink: 0;
}

.tc-typing-dots {
  display: inline-flex;
  gap: 0.1875rem;
}

.tc-typing-dots span {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background-color: var(--cin-text-muted);
  animation: tc-typing-bounce 1.4s infinite ease-in-out both;
}

.tc-typing-dots span:nth-child(1) {
  animation-delay: 0s;
}

.tc-typing-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.tc-typing-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes tc-typing-bounce {

  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Message Input Area */
.tc-input-area {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--cin-border);
  flex-shrink: 0;
  /* Bezugsrahmen fuer die Erwaehnungs-Vorschlagsliste, die per bottom: 100%
     nach oben aufklappt. Ohne diese Zeile suchte sie sich den naechsten
     positionierten Vorfahren und landete irgendwo im Layout. */
  position: relative;
}

.tc-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--cin-border);
  border-radius: 1.25rem;
  padding: 0.375rem 0.5rem 0.375rem 1rem;
  transition: border-color 0.15s;
  position: relative;
}

.tc-input-wrapper:focus-within {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.15);
}

.tc-input-wrapper textarea {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  line-height: 1.5;
  max-height: 120px;
  min-height: 1.5em;
  padding: 0.25rem 0;
  color: var(--bs-body-color);
  outline: none;
}

.tc-input-wrapper textarea::placeholder {
  color: var(--cin-text-muted);
}

.tc-send-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background-color: var(--bs-primary);
  color: #fff;
  transition: all 0.15s;
  padding: 0;
}

.tc-send-btn:hover {
  opacity: 0.85;
  transform: scale(1.05);
}

.tc-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Group Modals */
.tc-member-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.tc-member-item .form-check-input {
  flex-shrink: 0;
}

.tc-member-item-info {
  flex: 1;
  min-width: 0;
}

.tc-member-item-email {
  color: var(--cin-text-muted);
}

/* ========================================
   Mobile Responsive
   ======================================== */

@media (max-width: 768px) {
  .team-chat-main {
    flex-direction: column;
  }

  .team-chat-left-panel {
    width: 100% !important;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
    min-height: 0;
  }

  .team-chat-right-panel {
    display: none !important;
    width: 100% !important;
  }

  .tc-resize-handle {
    display: none !important;
  }

  .team-chat-main.conversation-active .team-chat-left-panel {
    display: none !important;
  }

  .team-chat-main.conversation-active .team-chat-right-panel {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 0;
  }

  .team-chat-main.conversation-active .tc-back-btn {
    display: inline-flex;
  }

  /* Kanal-Kopf mobil: EINE kompakte Zeile (QA-Feedback Phase D) — engere Abstände,
     kleinerer Titel; die Ellipsis-Regeln oben halten Titel und Status einzeilig. */
  .tc-conv-header {
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
  }

  .tc-conv-header-name {
    font-size: 1rem !important;
  }
}

/* Die Glocke meint "du musst etwas tun" und nicht "jemand hat dir geschrieben".
   Bei vier Symbolen nebeneinander reicht ein anderes Icon dafuer nicht aus -
   deshalb Bernstein statt Blau. Dunkle Schrift, weil Weiss auf Bernstein zu
   wenig Kontrast hat. Die uebrigen drei Badges bleiben unveraendert. */
#tc-badge-reminder {
  background-color: var(--cin-warning);
  color: var(--bs-black);
}

/* ── Beteiligten-Avatare der Chat-Bruecke (WP 9) ─────────────────────────────
   Spiegel des .task-avatar-Musters (crm.css): ueberlappende Initialen-Kreise
   mit Surface-Ring. Genutzt im Teamchat-Bridge-Header (#tc-conv-participants)
   und im Postfach-Intern-Tab (#internal-notes-participants) — eine Bausteinquelle
   (CommunicationUtils.renderParticipantsStack). Farben nur ueber --cin-*-Variablen,
   beide Themes erben automatisch. */
.tc-avatar-chip {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  background-color: var(--cin-surface-raised, var(--cin-surface-subtle));
  color: var(--cin-text-secondary);
  box-shadow: 0 0 0 2px var(--cin-surface);
  flex-shrink: 0;
}

.tc-avatar-chip+.tc-avatar-chip {
  margin-left: -6px;
}

.tc-avatar-chip-more {
  background-color: var(--cin-surface-subtle);
  color: var(--cin-text-muted);
}

/* Hinweiszeile im Offiziell-Segment des Notizen-Self-Chats (WP 8): der Composer
   ist dort ausgeblendet, die Zeile erklaert warum. */
.tc-official-hint {
  padding: 0.5rem 0.25rem;
}


/* ── Zeichenfläche für private Notizen ───────────────────────────────────────
   Werkzeugleiste + Canvas im Modal. Die Zeichenfläche selbst ist bewusst WEISS
   (Hardcoded, beide Themes): sie ist Bild-Inhalt — das exportierte PNG bekommt
   denselben weißen Grund und muss theme-unabhängig lesbar sein. Die Werkzeug-
   Chrome nutzt --cin-*/
--bs-*-Variablen. touch-action:none ist Pflicht,
sonst scrollt/zoomt die Seite beim Zeichnen mit Finger/Stift. */ .tc-sketch {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tc-sketch-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.tc-sketch-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.tc-sketch-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--cin-border);
  padding: 0;
  cursor: pointer;
}

.tc-sketch-color.active {
  box-shadow: 0 0 0 2px var(--bs-primary);
}

.tc-sketch-width {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cin-border);
  border-radius: 0.375rem;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.tc-sketch-width span {
  display: block;
  border-radius: 50%;
  background: var(--cin-text-secondary);
}

.tc-sketch-width.active {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 1px var(--bs-primary);
}

.tc-sketch-canvas-wrap {
  height: min(60vh, 640px);
  border: 1px solid var(--cin-border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #ffffff;
}

.tc-sketch-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

@media (max-width: 768px) {
  .tc-sketch-canvas-wrap {
    height: min(55vh, 640px);
  }
}

/* ── Übersetzung in der Nachrichtenblase ────────────────────────────────────
   Sitzt IN der Blase, direkt über der Meta-Zeile, abgesetzt durch eine dünne
   Trennlinie. Bewusst keine eigenen Farbwerte: die Blase bringt Hintergrund und
   Textfarbe je Theme mit, der Block erbt sie und funktioniert dadurch in Light
   und Dark gleichermassen. currentColor mit Alpha statt einer festen Linienfarbe,
   damit die Trennlinie auf der eigenen (blauen) und der fremden (grauen) Blase
   jeweils passt.                                                             */
.tc-msg-translation {
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.tc-msg-translation-head {
  opacity: 0.7;
  margin-bottom: 0.125rem;
  display: flex;
  align-items: center;
}

.tc-msg-translation-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.tc-msg-translation-error .tc-msg-translation-head {
  color: var(--bs-danger);
  opacity: 1;
}

/* Der Knopf folgt exakt den übrigen Aktionsknöpfen der Blase; eigene Regeln
   gäbe es nur, wenn er sich anders verhalten sollte, und das soll er nicht. */
.tc-translate-btn {
  border: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  line-height: 1;
}

.tc-translate-btn:hover {
  color: var(--bs-primary);
  background-color: var(--bs-tertiary-bg);
}

/* ── Aktionsleiste auf Touch-Geraeten ───────────────────────────────────────
   Die Leiste haengt an :hover. Auf Touch gibt es kein Hover: Ein Tipp erzeugt
   hoechstens ein kurzes Aufblitzen, das beim naechsten Fingerkontakt sofort
   wieder verschwindet - die Knoepfe sind damit praktisch unerreichbar. Das
   betraf schon Reagieren, Antworten, Bearbeiten und Anpinnen; beim Uebersetzen
   ist die Erreichbarkeit aber die Funktion selbst.

   Loesung: Auf Geraeten ohne echtes Hover oeffnet ein Tipp auf die Blase die
   Leiste der angetippten Nachricht und schliesst alle anderen. Auf Maus-
   Geraeten aendert sich nichts.                                              */
@media (hover: none) {
  .tc-message:hover .tc-msg-actions {
    display: none;
  }

  .tc-message.tc-actions-open .tc-msg-actions {
    display: inline-flex;
  }
}

/* ── Erwaehnungen (@Name) ───────────────────────────────────────────────────
   Marke im Nachrichtentext und Vorschlagsliste im Composer.                  */
.tc-mention {
  font-weight: 600;
  color: var(--bs-primary);
  background-color: color-mix(in srgb, var(--bs-primary) 12%, transparent);
  border-radius: 0.25rem;
  padding: 0 0.15rem;
}

/* Die eigene Erwaehnung faellt staerker auf - das ist der Zweck der Funktion:
   im Vorbeiscrollen sehen, dass man gemeint ist. */
.tc-mention-self {
  color: var(--bs-warning-text-emphasis);
  background-color: color-mix(in srgb, var(--bs-warning) 30%, transparent);
}

/* In der eigenen (blauen) Blase traegt der Text bereits die Primaerfarbe;
   dort wuerde eine blaue Marke verschwinden. currentColor haelt sie sichtbar. */
.tc-message.own .tc-mention {
  color: currentColor;
  background-color: color-mix(in srgb, currentColor 22%, transparent);
}

.tc-mention-popup {
  position: absolute;
  bottom: 100%;
  left: 0.75rem;
  right: 0.75rem;
  margin-bottom: 0.25rem;
  max-height: 14rem;
  overflow-y: auto;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--cin-border);
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  z-index: 5;
  padding: 0.25rem;
}

.tc-mention-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--bs-body-color);
  text-align: left;
  padding: 0.375rem 0.5rem;
  border-radius: 0.5rem;
}

.tc-mention-option:hover,
.tc-mention-option.active {
  background-color: var(--bs-tertiary-bg);
}

.tc-mention-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--bs-primary);
  color: var(--bs-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}