/* 0) Variablen & Reset */
:root {
  --ucm-col-bg1:  #b8d8ba;  --ucm-col-fg1:  #193319;
  --ucm-col-bg2:  #a9d6e5;  --ucm-col-fg2:  #0a2730;
  --ucm-col-bg3:  #f2e8cf;  --ucm-col-fg3:  #3a3320;
  --ucm-col-bg4:  #e6b8b7;  --ucm-col-fg4:  #4a1a1a;
  --ucm-col-bg5:  #cdb4db;  --ucm-col-fg5:  #2a1f33;
  --ucm-col-bg6:  #faedcd;  --ucm-col-fg6:  #3f3700;
  --ucm-col-bg7:  #f9dcc4;  --ucm-col-fg7:  #422313;
  --ucm-col-bg8:  #dee2e6;  --ucm-col-fg8:  #1e2123;
  --ucm-col-bg9:  #b5ead7;  --ucm-col-fg9:  #10352a;
  --ucm-col-bg10: #b3cde0;  --ucm-col-fg10: #0e2033;

  --ucm-bubble-py: 8px;        /* vertikaler Innenabstand → „Höhe“ */
  --ucm-bubble-px: 12px;       /* horizontaler Innenabstand */
  --ucm-bubble-min: 40px;      /* Mindesthöhe pro Bubble */
  --ucm-bubble-radius: 14px;   /* Eckenrundung */
	
  /* helle, gut lesbare Paarungen */
  --ucm-col-bg1:#EAF2FF;  --ucm-col-fg1:#0B3B74;
  --ucm-col-bg2:#E7FBFF;  --ucm-col-fg2:#044E56;
  --ucm-col-bg3:#F4FCE3;  --ucm-col-fg3:#2B5310;
  --ucm-col-bg4:#FFF4E5;  --ucm-col-fg4:#7A3E00;
  --ucm-col-bg5:#FFE8EA;  --ucm-col-fg5:#7A1020;
  --ucm-col-bg6:#F3E8FF;  --ucm-col-fg6:#3F0B6C;
  --ucm-col-bg7:#E8FFF6;  --ucm-col-fg7:#0B5A3F;
  --ucm-col-bg8:#FFF0F5;  --ucm-col-fg8:#6A1B2E;
  --ucm-col-bg9:#EAF1EF;  --ucm-col-fg9:#113B33;
  --ucm-col-bg10:#F0F4FF; --ucm-col-fg10:#142A73;	
}
.ucm-container, .ucm-container * { box-sizing: border-box; }


/* 1) Grund-Layout / Container */
.ucm-container{
  display: flex;
  gap: 0px !important;
  margin: 10px auto;
  max-width: 920px;        /* Gesamtbreite anpassen, wenn nötig */
  height: 70vh;            /* Gesamthöhe – alternativ: 680px */
  align-items: stretch;    /* -> gleich hohe Spalten */
  font-family: Calibri, sans-serif;
  /*font-size: 10px;*/
}

/* ==== Fixe Gesamthöhe Messenger-Box + sauberes Scrollen ==== */
.ucm-container { height: 70vh; max-height: 70vh; }
.ucm-sidebar, .ucm-main { height: 100%; min-height: 0; }
.ucm-messages { min-height: 0; overflow-y: auto; }
.ucm-sidebar { display: flex; flex-direction: column; }
.ucm-chatlist { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* === Polish-Pack: Card-Feeling (ohne Duplikate) === */
.ucm-container{
  max-width:920px;  
  margin:10px auto;
  gap:16px;
}
.ucm-sidebar,
.ucm-main{
  border:1px solid #dfe6ee;
  border-radius:12px;
  background:#ffffff;
  box-shadow:0 4px 14px rgba(16,24,40,0.06);
}


/* 2) Sidebar (linke Spalte) */
.ucm-sidebar{
  width: 220px;            /* feste Sidebar-Breite */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;      /* verhindert horizontalen Scroll */
  background: linear-gradient(180deg,#f7fbf9 0%,#ffffff 38%);
  border: 1px solid #e6efe9;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(16,24,40,0.06);
  padding: 12px;
}

/* Polish-Pack Details Sidebar */
.ucm-sidebar{
  width:200px;
  padding:12px;
  background:linear-gradient(180deg, #f7fbf9 0%, #ffffff 38%);
  border:1px solid #e6efe9;
}

/* Sidebar: Kopf (Select + NEW + ADD) */
.ucm-header{
  display: grid;
  grid-template-columns: 1fr auto auto; /* Select | NEW | ADD */
  column-gap: 8px;
  align-items: center;
  margin-bottom: 8px; /* leicht reduziert, Platz für Chipbar */
}
/* Polish-Pack */
.ucm-header{
  gap:6px;
  margin-bottom:12px;
}
.ucm-header { position: relative; }
.ucm-header { margin-bottom: .5rem; }

.ucm-select{
  width: 100%;
  min-width: 0;            /* wichtig gegen Überlauf */
  height: 26px;
  font-size: 10px;
  padding: 0 8px;
  border: 1px solid #cfd9d4;
  border-radius: 6px;
  background: #f6f8fa;
  color:#0a1a1a;
  cursor: pointer;
}
/* Polish-Pack */
.ucm-select{
  height:26px;
  font-size:10px;
}

.ucm-new{
  width: 54px;             /* feste Größe -> stabil */
  height: 26px;
  padding: 0;
  flex: 0 0 auto;
  background:#0b4f6c;
  color:#fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.ucm-new:hover{ background:#0d6288; }
/* Polish-Pack */
.ucm-new{
  height:26px;
  padding:0 10px;
  border-radius:6px;
}

/* Add-User Button */
#ucm-add,
.ucm-add{
  height: 26px;
  padding: 0 10px;
  border: 1px solid #cfd9d4;
  border-radius: 6px;
  background: #f6f8fa;
  color: #0a1a1a;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* Icon + Text */
}
#ucm-add:hover,
.ucm-add:hover{ background:#eaf0f5; }

/* === FIX: Platz & Sichtbarkeit für die Chip-Leiste im Sidebar-Kopf === */
.ucm-select-stack{ flex: 1 1 auto; min-width: 0; }
.ucm-select-stack{ flex:1 1 auto; min-width:0; }
.ucm-below{
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin-top: 6px; overflow: visible;
}
.ucm-below{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; overflow:visible; min-height:24px; }
#ucm-chipbar{
  display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; overflow: visible;
}
#ucm-chipbar{ display:flex; flex-wrap:wrap; gap:4px; min-height:18px; overflow:visible; }
.ucm-chipbar{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 18px;          /* damit der Bereich nicht „springt“, wenn leer */
}
.ucm-chip{
  background:#0b4f6c;
  color:#fff;
  font-size:10px;
  padding: 2px 3px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.ucm-chip{
  display: inline-flex; align-items: center; gap: 4px;
  background: #0b4f6c; color: #fff; padding: 2px 6px; border-radius: 12px; border: 0;
}
.ucm-chip .x{
  border: 0; background: transparent; color: #fff;
  font-size: 12px; line-height: 1; cursor: pointer;
}
.ucm-clear{
  font-size:10px;
  color:#0b4f6c;
  cursor:pointer;
  text-decoration: none;
}
.ucm-clear:hover{ text-decoration: underline; }
.ucm-top-hint{
  font-size:10px;
  color:#6a7;
  font-style: italic;
}
.ucm-actions-vert{ flex:0 0 auto; }
.ucm-sidebar{ overflow-x:hidden; }

/* Chatliste in der Sidebar */
.ucm-chatlist{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  border-top: 1px solid #dce6e1;
  flex: 1 1 auto;          /* füllt die Resthöhe der Sidebar */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.ucm-chatlist li{ border-bottom: 1px solid #dce6e1; }
.ucm-chatlist li a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  padding: 7px 10px;
  color: #0d3a3a;
  font-size: 10px;
}
/* Polish-Pack */
.ucm-chatlist li a{
  padding:7px 10px;
  font-size:10px;
}
.ucm-chatlist li a:hover{ background:#e3efe9; }
.ucm-chatlist li.ucm-unread > a{ font-weight:700; color:#08363a; }
.ucm-unread .ucm-badge { margin-left: 8px !important; }

/* Badge */
.ucm-badge {
  background: #eaf3ff;
  color: #004B87;
  border: 1px solid #bcd3f7;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 16px;
  min-width: 16px;
  text-align: center;
  margin-left: 8px;
  font-weight: 700;
}
#ucm-add:hover,
.ucm-add:hover{ background:#eaf0f5; }
/* eigene Ungelesene (optional minimal dunkler) */
.ucm-badge--own {
  background: #dbeaff;   /* leicht dunkler */
  border-color: #b3cef7;
}
#ucm-add:hover,
.ucm-add:hover{ background:#eaf0f5; }
/* beobachtete Ungelesene */
.ucm-badge--fol {
  background: #eef6ff;   /* sehr helles Blau */
  border-color: #c8dcfb;
}

/* Stern in der Chatliste schöner darstellen */
.ucm-chatlist .follow-star { 
  margin-left: .35rem; 
  opacity: .8; 
  font-size: 13px;
}
.ucm-chatlist .follow-star.on { 
  color: #e0b300;   /* Gold für aktiv */
  opacity: 1; 
}
.ucm-chatlist .follow-star:hover { 
  opacity: 1; 
  cursor: pointer; 
}

/* Filigranes X rechts neben dem Namen */
li[id^="ucm-item-"] { position: relative; }
/* Platz für das X schaffen */
li[id^="ucm-item-"] > a {
  display: block;
  padding-right: 22px;   /* damit der Text nicht unter das X läuft */
}
/* Das X selbst */
.ucm-del-empty{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;       /* kleiner, filigraner */
  line-height: 1;
  cursor: pointer;
  opacity: 0;            /* standardmäßig unsichtbar */
  transition: opacity .15s ease, transform .15s ease;
}
/* Bei Hover über den Listeneintrag einblenden */
li[id^="ucm-item-"]:hover .ucm-del-empty{ opacity: .6; }
/* Hover/Effekt auf dem X selbst */
.ucm-del-empty:hover{
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}
/* Tastaturfokus sichtbar machen (Barrierefreiheit) */
.ucm-del-empty:focus{
  outline: none;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(0,0,0,.08);
  border-radius: 4px;
}


/* 3) Hauptbereich (rechte Spalte) */
.ucm-main{
  flex: 1;                          /* nimmt Restbreite */
  display: flex;
  flex-direction: column;
  min-height: 0;                    /* korrektes Scrollen */
  background:#ffffff;
  border: 1px solid #dfe6ee;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(16,24,40,0.06);
  padding: 12px;
}

/* Header im Hauptbereich */
.ucm-main-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#f4f8ff;
  border-bottom: 1px solid #e6edf8;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 8px;
}
/* Polish-Pack */
.ucm-main-header{
  background:#f4f8ff;
  border-bottom:1px solid #e6edf8;
  padding:10px 14px;
}
.ucm-main-title{
  font-weight: 700;
  color:#0b4f6c;
  font-size: 13px;
}
/* Polish-Pack */
.ucm-main-title{ font-size:13px; }

/* Archiv-Button & Titel */
.ucm-header-title{
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 1.25;
  padding-right: 44px; /* Platz rechts für den Icon-Button */
}
.ucm-arch-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 14px;      /* Icon-Größe */
  padding: 6px;
  border-radius: 9999px;
  opacity: .25;         /* dezent */
  transition: opacity .15s ease, transform .15s ease;
}
.ucm-header:hover .ucm-arch-btn,
.ucm-arch-btn:hover,
.ucm-arch-btn:focus-visible{ opacity: 1; }
.ucm-arch-btn::after{
  content: attr(data-label);
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%) scale(.98);
  margin-right: 6px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  padding: 3px 8px;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.ucm-arch-btn:hover::after,
.ucm-arch-btn:focus-visible::after{
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.ucm-header-title:hover .ucm-arch-btn,
.ucm-arch-btn:hover,
.ucm-arch-btn:focus-visible{ opacity: 1; }
.ucm-arch-btn{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;      /* Icon-Größe (? / ↩) */
  padding: 6px;
  border-radius: 9999px;
  opacity: .28;         /* dezent */
  transition: opacity .15s ease, transform .12s ease;
}
.ucm-arch-btn:hover{ transform: translateY(-50%) scale(1.02); }

/* Host-Pill */
.ucm-main .ucm-host-pill{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0 10px;
  padding:8px 12px;
  background:#FFF7CC;             /* helles UCLA-Gold */
  border-left:4px solid #C99500;  /* kräftiges Gold */
  color:#3A2B00;                  /* dunkles Braun-Gold für Text */
  border-radius:10px;
  font-size:12px;
  font-weight:600;
  box-shadow:0 2px 6px rgba(201,149,0,0.25);
  transition:box-shadow .2s ease, transform .2s ease;
}
.ucm-main .ucm-host-pill:hover{
  box-shadow:0 3px 10px rgba(201,149,0,0.35);
  transform:translateY(-1px);
}
.ucm-host-pill b{font-weight:700;}
.ucm-host-eyes{line-height:1; font-size:12px;}

/* Avatare im Header */
.ucm-main-header { position: relative; }

/* 1:1 – großer Avatar rechts */
.ucm-header-avatar {
  position: absolute;          /* + relative Referenz für ::before */
  right: -6px;                 /* Abstand zum Rand */
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #cfd9d4;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  z-index: 1;
  background: var(--ava-bg, #9aa);
  color: var(--ava-fg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ucm-header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--bubble-bg, transparent);
  border-radius: 50%;
  box-sizing: border-box;
}

/* Gruppen-Avatare */
.ucm-header-avatars {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 2; /* über dem großen Kreis */
}
.ucm-header-avatars .ucm-ava {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  margin-left: -8px; /* Überlappung */
  background: var(--ava-bg, #9aa);
  color: var(--ava-fg, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ucm-header-avatars .ucm-ava:first-child { margin-left: 0; }
.ucm-header-avatars .ucm-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--bubble-bg, transparent);
  border-radius: 50%;
  box-sizing: border-box;
}
.ucm-header-avatars .ucm-ava.more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0b4f6c;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
/* Hover-Label */
.ucm-header-avatars .ucm-ava::after {
  content: attr(data-name);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(4px);
  background: #111;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.ucm-header-avatars .ucm-ava:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Wenn Gruppen-Kringel vorhanden sind, Einzel-Avatar verstecken */
.ucm-main-header .ucm-header-avatars ~ .ucm-header-avatar { display: none; }
/* Platz rechts für Avatare freihalten (Titel läuft nicht drunter) */
.ucm-main-title { padding-right: 140px; } /* bei Bedarf anpassen */

/* Initialen-Fallback */
.ucm-header-avatar:not(.hasimg)::before,
.ucm-header-avatars .ucm-ava:not(.hasimg)::before {
  content: attr(data-initials);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--ava-fg, #fff);
}
/* Falls Bild vorhanden → Initialen sicher ausblenden */
.ucm-header-avatar.hasimg::before,
.ucm-header-avatars .ucm-ava.hasimg::before { content: none !important; }
/* Sicherheitsnetz */
.ucm-header-avatar.hasimg,
.ucm-header-avatars .ucm-ava.hasimg {
  color: transparent !important;
  font-size: 0 !important;
}
/* Bild immer oben */
.ucm-header-avatar img,
.ucm-header-avatars .ucm-ava img {
  position: relative;
  z-index: 2;
}
.ucm-header-avatar img ~ ::before,
.ucm-header-avatars .ucm-ava img ~ ::before {
  content: none !important;
  display: none !important;
}
.ucm-header-avatar:has(img)::before,
.ucm-header-avatars .ucm-ava:has(img)::before {
  content: none !important;
  display: none !important;
}


/* 4) Nachrichtenbereich / Stream */
.ucm-messages{
  flex:1 1 auto;
  min-height:140px;
  overflow-y:auto;
  padding:4px 4px 4px 4px;  /*padding:14px 14px 6px 14px;*/
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* Polish-Pack */
.ucm-messages{
  padding:16px 16px 8px 16px;
  gap:10px;
}
/* engerer Gap (späterer Fix behält Priorität) */
.ucm-messages { gap: 6px; }

.ucm-empty{ color:#4a5; font-style:italic; }

.ucm-messages a { overflow-wrap:anywhere; word-break:break-word; }
.ucm-messages pre,
.ucm-messages code,
.ucm-messages .codeblock {
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
  overflow-x: auto;
}
.ucm-messages img,
.ucm-msg__img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ===== Bubbles – final (ohne HTML-Änderung) ===== */

.ucm-messages .mine,
.ucm-messages .theirs{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  position:relative;
  vertical-align:top;
  max-width:68%;
  padding:var(--ucm-bubble-py) var(--ucm-bubble-px);
  min-height:var(--ucm-bubble-min);
  border-radius:var(--ucm-bubble-radius);
  box-shadow:0 2px 6px rgba(16,24,40,0.06);
  background-clip:padding-box;

  /* Typo wie auf deinem ersten Bild */
  font-size:12px;
  line-height:1.5;
  letter-spacing:0;
}

/* Farben & Ausrichtung (explizit, kein var-Override) */
.ucm-messages .mine{
  align-self:flex-end;
  background:#0e5e7f;
  color:#fff;
  border:0;
}
.ucm-messages .theirs{
  align-self:flex-start;
  background:#d8f0df;
  color:#073b2f;
  border:1px solid #cfe6d7;
}

/* Textblock oben, Meta darunter – ohne HTML umbauen zu müssen */
.ucm-messages .ucm-msg-text,
.ucm-messages .msg-text,
.ucm-messages .text{
  display:block !important;
  width:100%;
  background:transparent;
  border:0;
  box-shadow:none;
  margin:0 0 6px 0; /* Abstand zum Meta-Bereich */
}

/* Meta IN der Bubble (falls vorhanden) kompakt */
.ucm-messages .mine small,
.ucm-messages .theirs small,
.ucm-messages .mine .ucm-meta,
.ucm-messages .theirs .ucm-meta,
.ucm-messages .mine footer,
.ucm-messages .theirs footer{
  display:block;
  margin-top:2px;
  font-size:10px;
  line-height:1.2;
  opacity:.85;
}

/* Falls Meta als GESCHWISTER direkt NACH der Bubble kommt → optisch andocken */
.ucm-messages .mine + small,
.ucm-messages .mine + .ucm-meta,
.ucm-messages .mine + footer{
  align-self:flex-end;
  max-width:68%;
  margin-top:-6px;
  padding:4px var(--ucm-bubble-px) 6px;
  background:#0e5e7f;
  color:#fff;
  border:0;
  border-radius:0 0 var(--ucm-bubble-radius) var(--ucm-bubble-radius);
  box-shadow:0 2px 6px rgba(16,24,40,0.06);
}
.ucm-messages .theirs + small,
.ucm-messages .theirs + .ucm-meta,
.ucm-messages .theirs + footer{
  align-self:flex-start;
  max-width:65%;
  margin-top:-6px;
  padding:4px var(--ucm-bubble-px) 6px;
  background:#d8f0df;
  color:#073b2f;
  border:1px solid #cfe6d7;
  border-top:0;
  border-radius:0 0 var(--ucm-bubble-radius) var(--ucm-bubble-radius);
  box-shadow:0 2px 6px rgba(16,24,40,0.06);
}








/* Kringel / Button oben rechts */
.ucm-messages .bubble-btn{
  position:absolute;
  top:6px;
  right:8px;
  transform:scale(.9);
  opacity:.85;
  transition:opacity .15s ease, transform .15s ease;
}
.ucm-messages .bubble-btn:hover{
  opacity:1;
  transform:scale(1);
}

/* Erste/letzte Kante bündig + kompakte Abstände */
.ucm-messages .ucm-message > *:first-child{ margin-top:0 !important; }
.ucm-messages .ucm-message > *:last-child { margin-bottom:0 !important; }
.ucm-messages .ucm-message p,
.ucm-messages .ucm-message h1,
.ucm-messages .ucm-message h2,
.ucm-messages .ucm-message h3{ margin:0; }
.ucm-messages .ucm-message p + p,
.ucm-messages .ucm-message ul + p,
.ucm-messages .ucm-message ol + p{ margin-top:.4em; }
.ucm-messages .ucm-message ul,
.ucm-messages .ucm-message ol{ margin:0; padding-left:1.2em; }

/* Bilder innerhalb der Bubble kompakt begrenzen */
.ucm-messages .ucm-message img,
.ucm-messages .ucm-message a > img,
.ucm-msg__img{
  display:block;
  max-width:260px;
  max-height:200px;
  width:auto;
  height:auto;
  object-fit:cover;
  border-radius:6px;
  margin:4px 0 6px;
}

/* Quote-Bubbles (Text+Bild passen sich an, bleiben innerhalb) */
.ucm-messages .ucm-quote{
  display:inline-block;
  width:auto;                 /* Breite = Inhalt + Padding */
  max-width:100%;
  box-sizing:border-box;
  overflow:visible;
  margin:4px 0 6px;
  padding:.45em .75em .55em .8em;
  border-left:4px solid #0b4f6c;
  background:#fff;
  border-radius:10px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
  font-size:12px;
  color:#193243;
  white-space:normal;
  vertical-align:top;
}
.ucm-messages .ucm-quote p{ margin:0; }
.ucm-messages .ucm-quote p + p{ margin-top:.4em; }
.ucm-messages .ucm-quote img,
.ucm-messages .ucm-quote a > img{
  display:block;
  width:100%;
  height:auto;
  max-width:260px;
  max-height:200px;
  object-fit:cover;
  border-radius:8px;
  margin:0 0 6px 0;
}

/* Sicherheit: Links/Code umbrechen */
.ucm-messages .ucm-message,
.ucm-messages .message,
.ucm-messages .ucm-quote,
.ucm-messages .ucm-msg-text,
.ucm-messages .msg-text,
.ucm-messages .text{
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:pre-wrap;
  min-width:0;
}

/* 5) Composer / Eingabebereich */
.ucm-input{
  flex:0 0 auto;
  background:#eef6fb;
  border-top:1px solid #d8e2dd;
  padding:10px 12px;

  /* Zeile bauen */
  display:flex;            /* Textarea + Buttons nebeneinander */
  flex-wrap:wrap;          /* Tray kann darunter auf volle Breite laufen */
  align-items:flex-end;    /* Buttons unten bündig */
  gap:12px;                /* etwas mehr Luft */
}

/* Textarea */
.ucm-input textarea{
  flex:1 1 auto;           /* füllt links den Platz */
  /* min-width:0;*/
  width: 750px; 
  min-height:64px;         /* komfortabler */
  max-height:140px;
  resize:vertical;

  padding:10px;
  font-size:12px;
  line-height:1.4;
  border-radius:10px;
  border:1px solid #d7e0ea;
  background:#f6f8fa;
  color:#0a1a1a;
}

/* Send-Button + Icons (Basis) */
#ucm-send-btn{
  height:40px;
  padding:0 16px;
  background:#0b4f6c;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
}
#ucm-send-btn:hover{ background:#0d6288; }

#ucm-dt-icon,
#ucm-img-btn{
  height:32px;
  width:32px;
  padding:0;
  margin:0;
  background:#f5f7fb;
  border:1px solid #cfd9d4;
  border-radius:6px;
  cursor:pointer;
}

/* Tray unter der Zeile auf volle Breite */
#ucm-tray{ width:100%; }

/* Zeitreihe/Chips (falls genutzt) */
.ucm-time-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.ucm-time-left{ display:flex; gap:10px; align-items:center; font-size:12px; }
.ucm-date,.ucm-time{ height:28px; font-size:12px; }

/* neu neu neu (ALT) – wird unten überschrieben */
.ucm-input-row{ display:flex; align-items:center; gap:20px; }
.ucm-send-side{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:25px;
}
.ucm-input-row .ucm-send-side{
  flex-direction:column; justify-content:center; align-items:center; gap:10px;
}

/* =========================
   OVERRIDES FÜR DEIN LAYOUT
   ========================= */

/* Buttons rechts als SPALTE */
.ucm-send-side{
  margin-left:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  min-width:80px;
}
#ucm-add:hover,
.ucm-add:hover{ background:#eaf0f5; }
/* Sicher: alte Centering-Regeln neutralisieren */
.ucm-input-row .ucm-send-side{
  justify-content:flex-end;
  align-items:flex-end;
  gap:8px;
}
#ucm-add:hover,
.ucm-add:hover{ background:#eaf0f5; }
/* Button-Tweaks */
#ucm-img-btn, #ucm-dt-icon{ margin:0; }

/* === Composer fix: Grid-Variante (I) === */
.ucm-input{
  display: grid !important;
  grid-template-columns: 1fr 90px;   /* links flexibel, rechts Buttons-Spalte */
  grid-template-rows: auto auto;     /* Zeile 1: Send / Zeile 2: PIC+Kalender */
  align-items: end;
  column-gap: 12px;
  row-gap: 8px;
  padding: 10px 12px;
}
/* Textarea über beide Zeilen */
.ucm-input textarea{
  grid-column: 1 / 2 !important;
  grid-row: 1 / 3 !important;
  min-width: 0;
  min-height: 64px;
  max-height: 140px;
  resize: vertical;
}
/* Send oben rechts */
#ucm-send-btn{
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  justify-self: end;
  height: 40px;
  padding: 0 16px;
  background: #0b4f6c;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
#ucm-send-btn:hover{ background:#0d6288; }
/* PIC & Kalender darunter */
#ucm-img-btn,
#ucm-dt-icon{
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
  justify-self: end;
  display: block;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0 0 6px 0;
  border: 1px solid #cfd9d4;
  border-radius: 6px;
  background: #f5f7fb;
  cursor: pointer;
}
#ucm-dt-icon{ margin-bottom: 0; }

/* Sicherheitsnetz: alte Absolute-Docking-Regeln neutralisieren */
.ucm-input{ position: static !important; }
#ucm-send-btn, #ucm-img-btn, #ucm-dt-icon{
  position: static !important; right: auto !important; bottom: auto !important;
}

/* === SKIZZE-FIX: Grid-Variante (II) (explizit) === */
/* 1) Alte Docking-/Fehl-Styles neutralisieren */
.ucm-input{ position:static !important; padding-right:0 !important; }
#ucm-send-btn, #ucm-img-btn, #ucm-dt-icon{
  position:static !important; right:auto !important; bottom:auto !important;
}
/* 2) Grid-Layout: feste Buttons-Spalte */
.ucm-input{
  display:grid !important;
  grid-template-columns: 1fr 96px;   /* <-- Breite der rechten Spalte */
  grid-template-rows: auto auto;     /* Reihe 1 = Send, Reihe 2 = Icons */
  align-items:end;
  column-gap:12px;
  row-gap:8px;
}
/* 3) Textarea über beide Reihen */
.ucm-input textarea{
  grid-column:1 / 2 !important;
  grid-row:1 / 3 !important;
  min-width:0 !important;
  width:auto !important;            /* überschreibt width:500px Fehler */
  min-height:64px;
  max-height:140px;
  resize:vertical;
}
/* 4) Send oben rechts */
#ucm-send-btn{
  grid-column:2 / 3 !important;
  grid-row:1 / 2 !important;
  justify-self:end;
  height:40px;
  padding:0 16px;
  background:#0b4f6c; color:#fff; border:none; border-radius:6px; cursor:pointer;
}
#ucm-send-btn:hover{ background:#0d6288; }
/* 5) Icons darunter */
#ucm-img-btn,
#ucm-dt-icon{
  grid-column:2 / 3 !important;
  grid-row:2 / 3 !important;
  justify-self:end;
  display:block;
  width:32px; height:32px;
  margin:0 0 6px 0;
  padding:0;
  border:1px solid #cfd9d4; border-radius:6px; background:#f5f7fb; cursor:pointer;
}
#ucm-dt-icon{ margin-bottom:0; }


/* 6) Form-Felder oben (Gruppentitel) */
#ucm-group-title,
.ucm-select-stack input[type="text"] {
  background: #eaf3ff;        /* dein helles Blau */
  border: 1px solid #bcd3f7;  /* leicht dunkler Rand */
  color: #004b87;             /* Schrift in UCLA-Blau */
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
}
#ucm-group-title::placeholder,
.ucm-select-stack input[type="text"]::placeholder {
  color: #7fa3c5;             /* dezente Placeholder-Farbe */
}


/* 7) Sonstige Kontext-/Farbkopplung */
.ucm-messages .theirs {
  background: var(--bubble-bg, #dfeee3);
  color: var(--bubble-fg, #083a2f);
  border-color: color-mix(in srgb, var(--bubble-bg, #dfeee3) 85%, #000 15%);
}
#ucm-add:hover,
.ucm-add:hover{ background:#eaf0f5; }
/* .ucm-messages .mine { ... } optional */


/* 8) Mobile Feintuning */
@media (max-width: 640px){
  .ucm-header-title{ padding-right: 36px; }
  .ucm-arch-btn{ font-size: 15px; padding: 4px; }
  .ucm-arch-btn::after{ display: none; } /* auf sehr kleinen Screens Label ausblenden */
}










/* === Meta immer an die Bubble andocken – innen ODER außen === */

/* innen: kompakt */
.ucm-messages .ucm-message .ucm-meta,
.ucm-messages .ucm-message .bubble-meta,
.ucm-messages .ucm-message small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.2;
  opacity: .85;
}

/* außen: direktes Geschwister an <article> */
.ucm-messages article.ucm-message.mine + small,
.ucm-messages article.ucm-message.mine + .ucm-meta,
.ucm-messages article.ucm-message.mine + footer {
  align-self: flex-end;
  max-width: 68%;
  margin-top: -6px;
  padding: 4px var(--ucm-bubble-px) 6px;
  background: #0e5e7f;
  color: #fff;
  border: 0;
  border-radius: 0 0 var(--ucm-bubble-radius) var(--ucm-bubble-radius);
  box-shadow: 0 2px 6px rgba(16,24,40,0.06);
}

.ucm-messages article.ucm-message.theirs + small,
.ucm-messages article.ucm-message.theirs + .ucm-meta,
.ucm-messages article.ucm-message.theirs + footer {
  align-self: flex-start;
  max-width: 68%;
  margin-top: -6px;
  padding: 4px var(--ucm-bubble-px) 6px;
  background: #d8f0df;
  color: #073b2f;
  border: 1px solid #cfe6d7;
  border-top: 0;
  border-radius: 0 0 var(--ucm-bubble-radius) var(--ucm-bubble-radius);
  box-shadow: 0 2px 6px rgba(16,24,40,0.06);
}

/* Sicherheitsnetz: keine großen Außenabstände in/um die Bubble */
.ucm-messages .ucm-message > *:first-child { margin-top: 0 !important; }
.ucm-messages .ucm-message > *:last-child  { margin-bottom: 0 !important; }



/* Nur interne Meta verwenden – externe Geschwister ausblenden */
.ucm-messages article.ucm-message + small,
.ucm-messages article.ucm-message + .ucm-meta,
.ucm-messages article.ucm-message + footer {
  display: none !important;
}


/* 1) Externe Meta (article + small/.ucm-meta/footer) komplett abschalten */
.ucm-messages article.ucm-message + small,
.ucm-messages article.ucm-message + .ucm-meta,
.ucm-messages article.ucm-message + footer {
  display: none !important;
}

/* 2) Interne Meta in der Bubble: EINHEITLICH stylen */
.ucm-messages .ucm-message .bubble-meta,
.ucm-messages .ucm-message .ucm-meta,
.ucm-messages .ucm-message small {
  display: flex;                 /* vorher: block */
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.2;
  opacity: .9;
}

/* 3) Farbe der internen Meta passend zur Bubble */
.ucm-message.mine  .bubble-meta,
.ucm-message.mine  .ucm-meta,
.ucm-message.mine  small { color: #fff; }

.ucm-message.theirs .bubble-meta,
.ucm-message.theirs .ucm-meta,
.ucm-message.theirs small { color: #073b2f; }

/* 4) Leere Body-Zeilen vermeiden (falls Nachricht nur Meta hat) */
.ucm-message .ucm-msg-text:empty { display: none; }
.ucm-message .ucm-msg-text:empty + .bubble-meta { margin-top: 0; }

/* === HARD FIX: Meta NUR INNEN anzeigen =============================== */

/* 0) Alte Andock-Regeln neutralisieren (damit es keine Mini-Bubbles baut) */
.ucm-messages .mine + small,
.ucm-messages .mine + .ucm-meta,
.ucm-messages .mine + footer,
.ucm-messages .theirs + small,
.ucm-messages .theirs + .ucm-meta,
.ucm-messages .theirs + footer {
  all: unset !important;
  display: none !important;
}

/* 1) Egal ob direkt oder mit <br> dazwischen: externe Meta-Geschwister ausblenden */
.ucm-messages article.ucm-message + :is(small, .ucm-meta, footer),
.ucm-messages article.ucm-message + br + :is(small, .ucm-meta, footer),
.ucm-messages article.ucm-message ~ :is(small.ucm-outside-meta, footer.ucm-outside-meta) {
  display: none !important;
}

/* 2) Sicherheitsnetz: jedes Meta, das direkt Kind der Messages-Liste ist, verstecken */
.ucm-messages > :is(small, .ucm-meta, footer) { display: none !important; }

/* 3) Internes Meta in der Bubble sichtbar & schön anordnen */
.ucm-messages article.ucm-message :is(.bubble-meta, .ucm-meta, small) {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.2;
  opacity: .9;
}

/* 4) Farben passend zur Bubble */
.ucm-message.mine  :is(.bubble-meta, .ucm-meta, small) { color: #fff; }
.ucm-message.theirs:is(.bubble-meta, .ucm-meta, small) { color: #073b2f; }

/* 5) Wenn Body leer ist, Meta bündig an den Rand */
.ucm-message .ucm-msg-text:empty { display: none; }
.ucm-message .ucm-msg-text:empty + :is(.bubble-meta, .ucm-meta, small) { margin-top: 0; }


/* Mine wie Theirs behandeln – aber rechts stehen lassen */
.ucm-messages .ucm-message.mine{
  align-self: flex-end; /* rechts */
  background: var(--bubble-bg, #dfeee3) !important;
  color: var(--bubble-fg, #073b2f) !important;
  border: 1px solid color-mix(in srgb, var(--bubble-bg, #dfeee3) 85%, #000 15%) !important;
}

/* Meta innen identisch darstellen */
.ucm-message.mine  :is(.bubble-meta, .ucm-meta, small),
.ucm-message.theirs:is(.bubble-meta, .ucm-meta, small){
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:8px; margin-top:4px; font-size:10px; line-height:1.2; opacity:.9;
}

/* Falls externes Meta doch noch als Geschwister auftaucht → ausblenden */
.ucm-messages article.ucm-message + :is(small, .ucm-meta, footer),
.ucm-messages article.ucm-message + br + :is(small, .ucm-meta, footer){
  display:none !important;
}

/* Leere Body-Zeilen vermeiden */
.ucm-message .ucm-msg-text:empty{ display:none; }
.ucm-message .ucm-msg-text:empty + :is(.bubble-meta, .ucm-meta, small){ margin-top:0; }
























/* ===== RESET ALT / LEGACY (ucm-message etc.) ========================= */
.ucm-messages .ucm-message,
.ucm-messages .message,
.ucm-messages .mine,
.ucm-messages .theirs {
  all: unset;
}
.ucm-messages .ucm-message,
.ucm-messages .message { display: contents; } /* Inhalt behalten, Wrapper neutral */

/* externe Meta (Geschwister nach der Bubble) komplett aus: */
.ucm-messages article.ucm-msg + :is(.meta,.ucm-meta,small,footer),
.ucm-messages > :is(.meta,.ucm-meta,small,footer) { display:none !important; }

/* ===== NEU: .ucm-msg Bubble-System ================================== */
.ucm-messages { display:flex; flex-direction:column; gap:10px; padding:16px; }

/* Farbcoupling – Variablen aus :root nutzen */
.ucm-col-1  { --bubble-bg: var(--ucm-col-bg1);  --bubble-fg: var(--ucm-col-fg1); }
.ucm-col-2  { --bubble-bg: var(--ucm-col-bg2);  --bubble-fg: var(--ucm-col-fg2); }
.ucm-col-3  { --bubble-bg: var(--ucm-col-bg3);  --bubble-fg: var(--ucm-col-fg3); }
.ucm-col-4  { --bubble-bg: var(--ucm-col-bg4);  --bubble-fg: var(--ucm-col-fg4); }
.ucm-col-5  { --bubble-bg: var(--ucm-col-bg5);  --bubble-fg: var(--ucm-col-fg5); }
.ucm-col-6  { --bubble-bg: var(--ucm-col-bg6);  --bubble-fg: var(--ucm-col-fg6); }
.ucm-col-7  { --bubble-bg: var(--ucm-col-bg7);  --bubble-fg: var(--ucm-col-fg7); }
.ucm-col-8  { --bubble-bg: var(--ucm-col-bg8);  --bubble-fg: var(--ucm-col-fg8); }
.ucm-col-9  { --bubble-bg: var(--ucm-col-bg9);  --bubble-fg: var(--ucm-col-fg9); }
.ucm-col-10 { --bubble-bg: var(--ucm-col-bg10); --bubble-fg: var(--ucm-col-fg10); }

.ucm-messages .ucm-msg{
  display:flex; max-width:72%; position:relative;
}
.ucm-messages .ucm-msg.mine{ align-self:flex-end; justify-content:flex-end; }
.ucm-messages .ucm-msg.theirs{ align-self:flex-start; justify-content:flex-start; }

/* eigentliche Bubble */
.ucm-messages .ucm-msg .bubble{
  background:#e9f2ff; color:#0f172a;                /* Default (mine) */
  border:1px solid color-mix(in srgb, #e9f2ff 85%, #000 15%);
  border-radius:16px; padding:10px 12px; box-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* Farbkoppeln für fremde Bubbles (theirs) */
.ucm-messages .ucm-msg.theirs .bubble{
  background:var(--bubble-bg, #dfeee3) !important;
  color:var(--bubble-fg, #083a2f) !important;
  border:1px solid color-mix(in srgb, var(--bubble-bg,#dfeee3) 85%, #000 15%) !important;
}

/* Mine dezent (keine dunkle Petrolfläche mehr) */
.ucm-messages .ucm-msg.mine .bubble{
  background:#e9f2ff; color:#0f172a;
  border-color: color-mix(in srgb, #e9f2ff 80%, #000 20%);
}

/* Inhalt + Meta in der Bubble */
.ucm-messages .ucm-msg .content{ white-space:pre-wrap; word-wrap:break-word; }
.ucm-messages .ucm-msg .meta{
  margin-top:6px; font-size:11px; opacity:.85; display:flex; gap:8px; flex-wrap:wrap;
}
.ucm-messages .ucm-msg.mine .meta{ justify-content:flex-end; }
.ucm-messages .ucm-msg.theirs .meta{ justify-content:flex-start; }

/* Reply-Mini rechts oben in der Bubble platzieren */
.ucm-messages .ucm-msg .btn-reply{
  position:absolute; top:6px; right:6px;
  background:#fff; border:1px solid rgba(0,0,0,.4);
  width:16px; height:16px; border-radius:999px; font:600 10px/1 Verdana,sans-serif;
  opacity:.35; cursor:pointer;
}
.ucm-messages .ucm-msg:hover .btn-reply{ opacity:.9; }

/* Medien in Bubble */
.ucm-messages .ucm-msg .content img,
.ucm-msg__img{ max-width:260px; max-height:200px; width:auto; height:auto; border-radius:6px; object-fit:cover; display:block; margin:4px 0 6px; }


.ucm-quote-head{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap; /* alles in eine Zeile */
}
.ucm-quote-head .who{ font-weight:700; }
.ucm-quote-head .when{ font-weight:600; opacity:.9; }








/* Text im Bubble höher rücken */
.ucm-messages .ucm-msg .bubble{
  padding: 6px 12px 10px !important; /* vorher 10px 12px;  ↑Top | ↓Bottom */
}

/* optional: noch etwas dichter an die Meta-Zeile */
.ucm-messages .ucm-msg .meta{
  margin-top: 4px !important; /* vorher 6px */
}

/* falls der erste Absatz selbst Abstand macht, neutralisieren */
.ucm-messages .ucm-msg .content > *:first-child{
  margin-top: 0 !important;
}


/* Kopf in MyBB-Quote einzeilig + Datum daneben */
blockquote.quote > cite{
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 700;
}
blockquote.quote > cite .when{
  font-weight: 600;
  opacity: .9;
}
.ucm-quote-head .who { margin-right: 8px; }
.ucm-quote-head .when { float: right; opacity:.85; font-weight:600; }

/* Quote in Weiß + dezente Ränder */
.ucm-quote{
  background: #fff !important;
  border: 1px solid #e5e7eb !important; /* hellgrau */
}

/* Kopfzeile des Quotes ebenfalls weiß + dünne Trennlinie */
.ucm-quote-head{
  background: #fff !important;
  color: #0b2533;              /* Textfarbe lassen/ändern nach Wunsch */
  border-radius: 6px;
  padding: 6px 8px;
  margin: 0 0 6px 0;
  border-bottom: 1px solid #e5e7eb;  /* feine Linie unter dem Kopf */
}

/* Optional: Bilder im Quote dürfen ruhig größer/kleiner sein */
.ucm-quote img{
  max-width: 180px;            /* anpassen nach Geschmack */
  max-height: 140px;
}




/* Quote-Box (beide Strukturen) */
.ucm-messages .ucm-quote,
.ucm-messages .quote,
.ucm-messages .mycode_quote,
.ucm-messages .quote > blockquote,
.ucm-messages blockquote.mycode_quote {
  background: #fff !important;          /* weiß */
  border: 1px solid #e5e7eb !important; /* zartes Grau */
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* Quote-Kopf (Titelzeile) */
.ucm-messages .ucm-quote .ucm-quote-head,
.ucm-messages .quote > cite,
.ucm-messages blockquote.mycode_quote > cite {
  background: #fff !important;
  color: #111827 !important;
  border: 0 !important;                 /* Trennlinie im Kopf entfernen */
  display: flex; gap: 8px; align-items: baseline; /* hübsch einzeilig */
  padding: 6px 8px !important;
  margin: 0 0 4px 0 !important;
}

/* Optional: dünne Trennlinie unter dem Kopf */
.ucm-messages .quote > cite::after,
.ucm-messages blockquote.mycode_quote > cite::after,
.ucm-messages .ucm-quote .ucm-quote-head::after{
  content: "";
  display: block;
  height: 0;
  border-bottom: 1px solid #e5e7eb;
  margin-top: 6px;
}

/* Quote-Body (innen) */
.ucm-messages .ucm-quote,
.ucm-messages .quote > blockquote,
.ucm-messages blockquote.mycode_quote {
  padding: 8px 10px !important;
}

/* Falls MyBB irgendwo ein grünliches Panel erzwingt */
.ucm-messages .quote, 
.ucm-messages .mycode_quote,
.ucm-messages .quote * ,
.ucm-messages .mycode_quote * {
  background-image: none !important;
}
/* ===== Edit-Mode im Bubble-Look ======================================= */
.ucm-msg.is-editing .bubble{
  background:#f0f6ff;
  border-color: color-mix(in srgb, #bcd7ff 70%, #000 30%);
}

/* Rahmen/Hinweis oben rechts */
.ucm-msg.is-editing .bubble::after{
  content:"Bearbeitungsmodus";
  position:absolute; right:10px; top:-10px;
  font-size:11px; background:#eaf2ff; color:#0b4f6c;
  border:1px solid color-mix(in srgb, #eaf2ff 80%, #000 20%);
  border-radius:999px; padding:2px 8px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}

/* Wrapper für Editor-Inhalte */
.ucm-edit { display:flex; flex-direction:column; gap:8px; }

/* Read-only Quote-Preview */
.ucm-quote-readonly{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  max-height:220px; overflow:auto;
}
.ucm-quote-readonly img{ max-width:100%; height:auto; border-radius:8px; }

/* Textarea im Messenger-Stil */
.ucm-edit-ta{
  width:100%;
  min-height:96px;
  resize:vertical;
  padding:10px 12px;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#eef2f7;
  color:#0f172a;
  font:14px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  box-sizing:border-box;
}

/* Button-Reihe */
.ucm-edit-actions{ display:flex; gap:8px; align-items:center; }

/* Buttons (an deine Send/Archiv-Buttons angelehnt) */
.ucm-btn{
  appearance:none; border:0; border-radius:10px;
  padding:8px 12px; font-weight:600; cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.ucm-btn--primary{ background:#0b4f6c; color:#fff; }
.ucm-btn--ghost  { background:#e5e7eb; color:#0f172a; }
.ucm-btn:disabled{ opacity:.6; cursor:default; }

/* Kurzer Shortcut-Hinweis */
.ucm-edit-hint{
  font-size:12px; opacity:.75; margin-left:auto;
}
@media (max-width: 720px){
  :root{ --rail-right: 12px; --rail-bottom: 18px; --rail-gap: 8px; }
  #ucm-send-btn{ height: 48px; writing-mode: horizontal-tb; width:auto; padding:0 14px; }
  #ucm-rail{ right:12px; bottom:12px; align-items:center; }
  #ucm-rail-stack{ flex-direction:row; }
  .ucm-input textarea{ min-height: 96px; }
  .ucm-extra{ right:6px; width:min(92vw,360px); bottom:56px; }
  .ucm-messages .ucm-msg{ max-width: 88%; }
}
@media (prefers-color-scheme: dark){
  .ucm-messages .ucm-msg.mine .bubble{ background:#223248; color:#e6eef9; border-color:#2c3a52; }
  .ucm-messages .ucm-msg.theirs .bubble{ border-color: color-mix(in srgb, var(--bubble-bg) 70%, #000 30%); }
  .ucm-extra{ background:#1f2937; border-color:#374151; }
  .ucm-extra-tabs{ background:#111827; border-bottom-color:#374151; }
  .ucm-gif-search{ background:#111827; border-bottom-color:#374151; }
  #ucm-gif-q{ background:#0b1220; border-color:#374151; color:#e5e7eb; }
}
.ucm-main { z-index: 1; }
#ucm-rail { z-index: 5; }
.ucm-extra, .ucm-pic-pop { z-index: 9999; }

#ucm-rail-stack > button:focus-visible,
.ucm-msg-actions button:focus-visible,
.ucm-follow-btn:focus-visible,
.ucm-reply-mini:focus-visible{
  outline: 2px solid var(--ucm-primary);
  outline-offset: 2px;
}
.ucm-quote-readonly{
  margin:0 0 8px; padding:8px; border:1px solid #e5e7eb;
  border-radius:8px; background:#fff; font-size: 13px;
}
.ucm-msg.is-saving { opacity:.7; pointer-events:none; }

.ucm-extra-pane{ scrollbar-gutter: stable; }

.ucm-msg__img{ cursor: zoom-in; }


/* Textarea im Bearbeitungsmodus sauber einpassen */
.ucm-msg.is-editing .ucm-edit-ta {
  width: 96%;                 /* etwas Rand links/rechts */
  max-width: 620px;           /* harte Obergrenze */
  min-width: 280px;           /* falls kleiner Screen */
  margin: 0 auto;             /* mittig in der Bubble */
  display: block;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: #0f172a;
  resize: vertical;
  box-sizing: border-box;
}

/* Optional: Bubble selbst leicht begrenzen */
.ucm-msg.is-editing {
  max-width: 700px;           /* begrenzt den Gesamtcontainer */
  align-self: flex-end;       /* bleibt rechts, wenn gewünscht */
}
/* === Anzeige-Bubbles: gut lesbare Textfarbe === */
.ucm-messages .ucm-msg .bubble { 
  color: #0f172a;                 /* Basis */
}

.ucm-messages .ucm-msg.mine  .bubble { 
  color: #0f172a;                 /* meine Bubble */
}

.ucm-messages .ucm-msg.theirs .bubble { 
  color: #073b2f;                 /* deren Bubble */
}

/* Meta (Zeit/Name) etwas dunkler */
.ucm-messages .ucm-msg .meta { 
  color: #334155; 
  opacity: .9;
}

/* Fallback, falls noch die alte Struktur (.mine/.theirs) greift */
.ucm-messages :is(.mine, .theirs) { 
  color: #0f172a !important;
}

/* Edit-Vorschau (Quote-Preview) sicher dunkel */
.ucm-quote-readonly { 
  color: #0f172a;
}

.ucm-msg.is-editing .bubble::after{
  top: auto;
  bottom: 8px;          /* IN der Bubble */
  right: 10px;
}

/* etwas mehr Innenabstand unten, damit Text/TA nicht kollidiert */
.ucm-msg.is-editing .bubble{
  padding-bottom: 28px; /* je nach Geschmack 24–32px */
}

/* Einheitliches „gelöscht“-Aussehen */
.ucm-deleted {
  font-style: italic;
  opacity: .9;
}

.ucm-message.is-deleted .bubble,
.ucm-msg.is-deleted .bubble {
  background: #f8fafc;              /* sehr helles Grau/Blau */
  color: #64748b;                    /* Slate */
  border: 1px dashed #cbd5e1;        /* gestrichelt = gelöscht */
}

/* Falls du die alte Mine/Theirs-Färbung nutzt: neutralisieren */
.ucm-messages .ucm-message.is-deleted,
.ucm-messages .ucm-msg.is-deleted {
  color: inherit; /* sicherstellen, dass Text gut lesbar bleibt */
}
.ucm-msg.is-deleted .bubble { opacity: .8; }
.ucm-msg.is-deleted .content em { font-style: italic; color: #6b7280; }

/* Menü-/Hover-Controls bei gelöschten Nachrichten ausblenden */
.ucm-msg.is-deleted .btn-reply,
.ucm-msg.is-deleted .ucm-ctx,
.ucm-msg.is-deleted .ucm-kebab,
.ucm-msg.is-deleted [data-ucm-menu],
.ucm-msg.is-deleted [data-menu] {
  display: none !important;
}

/* Optional: jegliche Hover-Optik bei gelöschten Einträgen neutralisieren */
.ucm-msg.is-deleted .bubble { box-shadow: none !important; }

/*neu aus global*/

/* Empfänger-Chips */
.ucm-chip {
  display: inline-flex;          /* Name + X nebeneinander */
  align-items: center;
  background: #f4f8f9;           /* dezenter Hintergrund */
  border: 1px solid #cfd9d4;     /* leichte Umrandung */
  border-radius: 16px;           /* pillenförmig */
  padding: 2px 8px;
  margin: 5px;
  font-size: 11px;
  color: #0b4f6c;
  line-height: 1.4;
}

/* Name im Chip */
.ucm-chip .lbl {
  margin-right: 6px;
}

/* X-Button im Chip */
.ucm-chip .x {
  border: none;
  background: transparent;
  color: #666;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.ucm-chip .x:hover {
  color: #c00;
}

/* dropdownmenü*/

/* ===== UCM Follow-Dropdown: global-look im Messenger ===== */
.ucm-follow-dd{
  position: fixed !important;
  top: -9999px;
  left: -9999px;                 /* JS setzt echte Position */
  z-index: 2147483647 !important;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: 60vh;
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  display: none;
  text-align: left;
  isolation: isolate;
}

.ucm-dd-caret{ display:none; }

.ucm-follow-list,
.ucm-follow-list li{ list-style:none; margin:0; padding:0; }
.ucm-follow-list > li + li{ border-top: 1px solid #eef1f4; }

.ucm-follow-item a.i{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;     /* linksbündig */
  gap:10px;
  padding: 10px 44px 10px 14px;
  border-radius: 10px;
  text-decoration:none;
  color:#233;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
  font-size:10px;
  background:#fff;
}
.ucm-follow-item a.i:hover{ background:#f5f7fa; }

.ucm-follow-item .t{
  flex:0 1 auto;
  max-width: calc(100% - 60px);
  text-align:left;               /* wichtig: links */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ucm-follow-item .b{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:20px; padding:0 8px;
  border-radius:9999px; background:#eef3f7; color:#334155; font-weight:700; font-size:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.04) inset;
}
.ucm-follow-item .b.lvl1{ background:#EAF2FF; color:#1d4ed8; }
.ucm-follow-item .b.lvl2{ background:#E7F8FF; color:#0e7490; }
.ucm-follow-item .b.lvl3{ background:#FFF5D6; color:#b45309; }
.ucm-follow-item .b.lvl4{ background:#FFE8E5; color:#b91c1c; }
.ucm-follow-item .b.lvl5{ background:#FFDADA; color:#991b1b; }

.ucm-follow-item.hasunread a.i{ background:#fff; }
.ucm-follow-item.unA a.i{ background:#FFF8EC; }
.ucm-follow-item.unB a.i{ background:#F2F8FF; }