/* ==========================================================================
   max-chat – TryCasino „Tiefenschiefer & Erz“ (Tokens/Bausteine: max-base.css)
   Bereich: Live-Chat (#floatingChatContainer), Geldregen-Hinweis
   (#globalRainFloatingBanner), Geldregen-Dialog (#chatRainModal),
   Medien-Lightbox (#chatMediaLightboxModal).
   Amethyst = Community/Chat, Diamant = Geldregen-Moment, Smaragd = Einsammeln,
   Gold = Geld und Senden.
   Sichtbarkeit schaltet JS über [hidden] bzw. style.display – hier nie
   display:!important auf diesen Elementen (Ausnahme: Chat-Knopf im Vollbild
   auf dem Handy, den JS nicht schaltet).
   ========================================================================== */

body.tc-redesign.tc-max :is(#floatingChatContainer, #globalRainFloatingBanner, #chatRainModal, #chatMediaLightboxModal) {
  --mxc-hint: #8290ad;          /* Hinweistext: 5,3:1 auf --mx-surface (text-3 wäre 4,3:1) */
  --mxc-ame-hi: #c7a8ff;
  --mxc-ame-lo: #5a33b5;
  --mxc-ame-ink: #1b0a3f;
  --mxc-ame-soft: rgba(181, 140, 255, .14);
  --mxc-ame-line: rgba(181, 140, 255, .38);
  --mxc-dia-soft: rgba(91, 231, 240, .12);
  --mxc-dia-line: rgba(91, 231, 240, .42);
  --mxc-fab: 56px;
  --mxc-edge: 20px;
  /* Rang-Töne im Chat (nur Namen ab VIP Silber; Abzeichen sind neutrale .mx-tag) – bewusst keine Erzfarben */
  --mxc-rank-silber: #c9d3e3;
  --mxc-rank-gold: #f2d48a;
  --mxc-rank-platin: #b7c9f0;
  --mxc-rank-diamant: #8fd3ff;
  --mxc-rank-titan: #ffa066;
  --mxc-rank-champion: #cdeb8b;
  --mxc-rank-mythic: #ff8fd1;
  /* Blasen: ruhige Fläche zwischen Hintergrund und Karte */
  --mxc-bubble: #151f36;
  --mxc-bubble-line: rgba(148, 170, 220, .11);
}
/* Chat im Spiel: Breite hängt am gemessenen Spielfeld (js/redesign.js setzt --mxc-g-*) */
body.tc-redesign.tc-max.tc-game-open { --mxc-game-chat-w: min(380px, max(300px, calc(var(--mxc-g-width, 1100px) * .42))); }

/* ------------------------------------------------------------------ Dock */
/* style.css fixiert bottom/right 24px !important – bewusst überschreiben (Safe Area). */
body.tc-redesign.tc-max #floatingChatContainer {
  right: max(var(--mxc-edge), env(safe-area-inset-right)) !important;
  bottom: max(var(--mxc-edge), env(safe-area-inset-bottom)) !important;
  gap: 12px !important;
  font-family: var(--mx-font-body);
}

/* ------------------------------------------------------------------ Chat-Knopf */
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn {
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: var(--mxc-fab);
  min-width: var(--mxc-fab);
  padding: 0 !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, var(--mxc-ame-hi) 0%, #9a6ef4 100%) !important;
  color: var(--mxc-ame-ink) !important;
  font: 700 15px/1 var(--mx-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -2px 0 rgba(40, 10, 100, .18),
    0 4px 0 var(--mxc-ame-lo),
    0 20px 34px -14px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(10, 4, 30, .45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  transition: none !important;
  animation-name: none !important;
  cursor: pointer;
  user-select: none;
}
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn:hover { filter: brightness(1.06) saturate(1.05); }
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn:active {
  transform: translateY(3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 1px 0 var(--mxc-ame-lo),
    0 8px 16px -10px rgba(0, 0, 0, .8),
    0 0 0 1px rgba(10, 4, 30, .45) !important;
}
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn:focus-visible { outline-offset: 4px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-btn-pulse { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-btn-icon {
  display: grid;
  place-items: center;
  width: var(--mxc-fab);
  height: var(--mxc-fab);
  flex: none;
  font-size: 0;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-btn-icon svg { width: 25px; height: 25px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-btn-icon .mx-ico-close { display: none; }
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn[aria-expanded="true"] .mx-ico-open { display: none; }
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn[aria-expanded="true"] .mx-ico-close { display: block; }
/* Beschriftung klappt nur bei Hover/Fokus auf – der Knopf bleibt sonst klein */
body.tc-redesign.tc-max #floatingChatContainer .chat-btn-label {
  order: -1;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  white-space: nowrap;
  font: 700 15px/1 var(--mx-font-body) !important;
  color: inherit !important;
}
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn[aria-expanded="false"]:is(:hover, :focus-visible) { padding-left: 18px !important; }
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn[aria-expanded="false"]:is(:hover, :focus-visible) .chat-btn-label {
  max-width: 90px;
  opacity: 1;
  margin-right: -6px;
}
body.tc-redesign.tc-max #floatingChatContainer #chatUnreadBadge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 24px;
  height: 24px;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: var(--mx-redstone) !important;
  border: 3px solid var(--mx-bg) !important;
  color: #fff !important;
  font: 800 12px/18px var(--mx-font-body) !important;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: 0 6px 14px -4px rgba(255, 77, 94, .7) !important;
  animation-name: none !important;
}
/* Ungelesene Erwähnung (@Name): Zähler in Gold mit „@“ */
body.tc-redesign.tc-max #floatingChatContainer #chatUnreadBadge.is-mention {
  background: var(--mx-gold) !important;
  color: var(--mx-gold-ink) !important;
  box-shadow: 0 6px 14px -4px rgba(255, 201, 60, .75) !important;
}
body.tc-redesign.tc-max #floatingChatContainer #chatUnreadBadge.is-mention::before { content: "@"; margin-right: 1px; }
/* Geldregen läuft: Diamant-Schimmer, Ring und Hinweis „Geldregen“ neben dem Knopf (B4) */
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn.has-active-rain {
  background: linear-gradient(160deg, #9ff4f8 0%, #b99bff 62%, #9a6ef4 100%) !important;
  animation-name: none !important;
}
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn.has-active-rain::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 23px;
  border: 2px solid var(--mxc-dia-line);
  pointer-events: none;
}
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-rain-flag { display: none; }
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn.has-active-rain[aria-expanded="false"] .mx-chat-rain-flag {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  translate: 0 -50%;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  background: #0f2233;
  border: 1px solid var(--mxc-dia-line);
  color: var(--mx-diamond);
  font: 700 13px/1 var(--mx-font-body);
  white-space: nowrap;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .8);
}
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-rain-flag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mx-diamond);
  box-shadow: 0 0 0 3px rgba(91, 231, 240, .2);
}
/* Label-Hover und Geldregen-Hinweis nicht gleichzeitig */
body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn.has-active-rain:is(:hover, :focus-visible) .mx-chat-rain-flag { opacity: 0; }
body.tc-redesign.tc-max.tc-game-open #floatingChatContainer #floatingChatBtn { display: none !important; }
/* Liegt ein Bedienelement unter dem Knopf, taucht er ab (js/redesign.js setzt .mx-chat-tucked).
   Er bleibt in der Tab-Reihenfolge: Bekommt er per Tastatur den Fokus, ist er sofort wieder da. */
body.tc-redesign.tc-max #floatingChatContainer.mx-chat-tucked #floatingChatBtn:not(:focus-visible) {
  translate: 0 calc(100% + 30px);
  opacity: 0;
  pointer-events: none !important;
}
/* Die schmale Geldregen-Zeile neben dem Knopf blendet genauso aus, wenn sie selbst ein Bedienelement verdeckt
   (js/redesign.js setzt .mx-rain-tucked; nur Ausblenden, damit ihre Fläche messbar bleibt) */
body.tc-redesign.tc-max:not(.tc-game-open) #globalRainFloatingBanner.mx-rain-tucked:is(.mx-rain-compact, .mx-rain-done):not(:focus-within) {
  opacity: 0;
  pointer-events: none !important;
}

/* ------------------------------------------------------------------ Fenster */
body.tc-redesign.tc-max #floatingChatContainer #floatingChatWidget {
  position: relative;
  flex-direction: column;
  width: 400px !important;
  max-width: calc(100vw - 2 * var(--mxc-edge)) !important;
  /* Unterkante über dem Knopf (Rand + Knopf + 12 px), Oberkante 12 px unter der Kopfleiste
     (--mxc-top-clear misst js/redesign.js beim Öffnen und Scrollen, mindestens volle Leistenhöhe; 69 px = Kopfleiste ab Laptop) */
  height: min(640px, 80vh, calc(100dvh - var(--mxc-fab) - var(--mxc-edge) - var(--mxc-top-clear, 69px) - 24px)) !important;
  max-height: none !important;
  overflow: hidden;
  background: var(--mx-bg-2) !important;
  border: 1px solid var(--mx-line) !important;
  border-radius: var(--mx-r-xl) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 34px 70px -24px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(0, 0, 0, .35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform-origin: calc(100% - 28px) calc(100% + 40px);
  animation-name: none !important;
  color: var(--mx-text);
}

/* Kopf */
body.tc-redesign.tc-max #floatingChatContainer .floating-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  padding: 10px 10px 10px 14px !important;
  background: var(--mx-surface) !important;
  border-bottom: 1px solid var(--mx-line-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
body.tc-redesign.tc-max #floatingChatContainer .floating-chat-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-live-pulse-dot { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--mxc-ame-hi), #9a6ef4);
  color: var(--mxc-ame-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--mxc-ame-lo);
}
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-mark svg { width: 19px; height: 19px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-header-title-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-header-title-wrap strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--mx-font-display) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: .95 !important;
  letter-spacing: .01em !important;
  color: var(--mx-text) !important;
  white-space: nowrap;
}
/* Schmales Fenster (im Spiel, kleine Handys): Kopf ohne Symbol, damit Titel und Knöpfe nicht kollidieren */
body.tc-redesign.tc-max #floatingChatContainer #floatingChatWidget { container: mxchat / inline-size; }
@container mxchat (max-width: 370px) {
  body.tc-redesign.tc-max #floatingChatContainer .mx-chat-mark { display: none; }
  body.tc-redesign.tc-max #floatingChatContainer .floating-chat-header { padding-left: 14px !important; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-header-title-wrap strong { font-size: 21px !important; }
  body.tc-redesign.tc-max #floatingChatContainer .floating-chat-header-actions { gap: 4px; }
}
body.tc-redesign.tc-max #floatingChatContainer #chatOnlineBadge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0 !important;
  padding: 1px 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--mx-text-2) !important;
  font: 600 12px/1.2 var(--mx-font-body) !important;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: none !important;
}
body.tc-redesign.tc-max #floatingChatContainer #chatOnlineBadge:hover { color: var(--mx-text) !important; text-decoration: underline; text-underline-offset: 3px; }
body.tc-redesign.tc-max #floatingChatContainer #chatOnlineBadge .mx-live-dot { width: 7px; height: 7px; margin-right: 7px; }
body.tc-redesign.tc-max #floatingChatContainer .floating-chat-header-actions { display: flex; align-items: center; gap: 2px; flex: none; }
body.tc-redesign.tc-max #floatingChatContainer .floating-chat-header-actions .chat-action-btn {
  display: grid;
  place-items: center;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--mx-text-2) !important;
  box-shadow: none !important;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .floating-chat-header-actions .chat-action-btn:hover { background: var(--mx-raised) !important; color: var(--mx-text) !important; }
body.tc-redesign.tc-max #floatingChatContainer .floating-chat-header-actions .chat-action-btn svg { width: 18px; height: 18px; }
/* Größen-Knopf: Pfeile auseinander = größer, zueinander = kleiner */
body.tc-redesign.tc-max #floatingChatContainer #chatSizeBtn .mx-chat-size-shrink,
body.tc-redesign.tc-max #floatingChatContainer #chatSizeBtn[aria-pressed="true"] .mx-chat-size-grow { display: none; }
body.tc-redesign.tc-max #floatingChatContainer #chatSizeBtn[aria-pressed="true"] .mx-chat-size-shrink { display: block; }
body.tc-redesign.tc-max #floatingChatContainer #chatSizeBtn[aria-pressed="true"] { background: var(--mxc-ame-soft) !important; color: var(--mxc-ame-hi) !important; }
/* Hoher Chat (gemerkt): ganze Höhe unter der Kopfleiste und etwas breiter – mehr Gespräch auf einen Blick */
@media (min-width: 601px) and (min-height: 521px) {
  body.tc-redesign.tc-max:not(.tc-game-open) #floatingChatContainer #floatingChatWidget.is-tall {
    width: 440px !important;
    height: calc(100dvh - var(--mxc-fab) - var(--mxc-edge) - var(--mxc-top-clear, 69px) - 24px) !important;
  }
}
/* Im Spiel gibt die Bühne die Größe vor, auf dem Handy ist der Chat ohnehin ein Vollbild-Blatt */
body.tc-redesign.tc-max.tc-game-open #floatingChatContainer #chatSizeBtn { display: none !important; }
@media (max-width: 600px), (max-height: 520px) {
  body.tc-redesign.tc-max #floatingChatContainer #chatSizeBtn { display: none !important; }
}
/* Ton-Knopf: experience.js schreibt 🔔/🔕 als Text – als Linien-Symbol zeigen */
body.tc-redesign.tc-max #floatingChatContainer #chatSoundToggleBtn { font-size: 0 !important; }
body.tc-redesign.tc-max #floatingChatContainer #chatSoundToggleBtn::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.tc-redesign.tc-max #floatingChatContainer #chatSoundToggleBtn[aria-pressed="false"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8a21 21 0 0 0 .6 5'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.7 4.7 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.7 3A6 6 0 0 1 18 8a21 21 0 0 0 .6 5'/%3E%3Cpath d='M17 17H3s3-2 3-9a4.7 4.7 0 0 1 .3-1.7'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
}
/* Geldregen starten (nur Creator/Inhaber; JS schaltet style.display) – Symbol im Kopf, Name im Tooltip */
body.tc-redesign.tc-max #floatingChatContainer #chatRainHeaderBtn {
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin-right: 4px;
  padding: 0 !important;
  border-radius: 10px !important;
  background: var(--mxc-ame-soft) !important;
  border: 0 !important;
  color: var(--mx-amethyst) !important;
  box-shadow: none !important;
  font-size: 0 !important;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer #chatRainHeaderBtn:hover { background: rgba(181, 140, 255, .26) !important; color: #fff !important; }
body.tc-redesign.tc-max #floatingChatContainer #chatRainHeaderBtn b { display: none !important; }
body.tc-redesign.tc-max #floatingChatContainer #chatRainHeaderBtn .rain-cloud-icon { display: grid; font-size: 0; }
body.tc-redesign.tc-max #floatingChatContainer #chatRainHeaderBtn svg { width: 19px; height: 19px; }
/* Doppelte Geldregen-Taste in der Eingabezeile: der Kopf-Knopf reicht. JS schaltet style.display –
   deshalb ohne display ausblenden (nicht sichtbar, nicht fokussierbar, ohne Platz). */
body.tc-redesign.tc-max #floatingChatContainer #chatRainQuickBtn {
  position: absolute !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  overflow: hidden;
  visibility: hidden;
}

/* ------------------------------------------------------------------ Geldregen im Chat */
body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner {
  flex: none;
  flex-direction: column;
  align-items: stretch !important;
  gap: 12px;
  margin: 12px 12px 0 !important;
  padding: 12px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(181, 140, 255, .22), rgba(91, 231, 240, .09) 70%), var(--mx-surface) !important;
  border: 1px solid var(--mxc-ame-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 24px -16px rgba(0, 0, 0, .8) !important;
  animation-name: none !important;
}
body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner .chat-rain-info { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner .rain-drop-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--mxc-dia-soft);
  border: 1px solid var(--mxc-dia-line);
  color: var(--mx-diamond);
  font-size: 0 !important;
  animation-name: none !important;
  filter: none !important;
}
body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner .rain-drop-icon svg { width: 22px; height: 22px; }
body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner .rain-details { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer #chatRainSender {
  color: var(--mx-text) !important;
  font: 700 15px/1.25 var(--mx-font-body) !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.tc-redesign.tc-max #floatingChatContainer #chatRainAmount {
  color: var(--mx-text-2) !important;
  font: 500 13px/1.45 var(--mx-font-body) !important;
  overflow-wrap: anywhere;
}
/* Betrag, Plätze und Nachricht je als eigene Zeile */
body.tc-redesign.tc-max #floatingChatContainer #chatRainAmount .mx-rain-share { display: block; color: var(--mx-gold); font-weight: 700; }
body.tc-redesign.tc-max #floatingChatContainer #chatRainAmount .mx-rain-slots { display: block; white-space: nowrap; }
body.tc-redesign.tc-max #floatingChatContainer #chatRainAmount .mx-rain-note {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mx-text);
  font-style: italic;
}
body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner .rain-progress-bar-wrap {
  height: 6px !important;
  margin-top: 7px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  overflow: hidden;
  border: 0 !important;
}
body.tc-redesign.tc-max #floatingChatContainer #chatRainProgressBar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mx-amethyst), var(--mx-diamond)) !important;
  box-shadow: none !important;
}
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-rain-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }

/* Einsammeln = .mx-btn .mx-btn--emerald .mx-btn--sm (Klassen in index.html und showChatRainBanner in app.js).
   Nach dem Einsammeln/voll ersetzt JS className durch „btn quiet xs“ und sperrt den Knopf – dafür der Zustand unten.
   Hier nur Maße, die beide Zustände teilen; opacity/boxShadow setzt JS inline. */
body.tc-redesign.tc-max :is(#chatRainClaimBtn, #globalRainClaimBtn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  -webkit-text-fill-color: currentColor !important;
  font: 700 13.5px/1 var(--mx-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  opacity: 1 !important;
  animation-name: none !important;
}
body.tc-redesign.tc-max :is(#chatRainClaimBtn, #globalRainClaimBtn):disabled {
  background: rgba(46, 229, 157, .08) !important;
  color: #8ff0c6 !important;
  box-shadow: inset 0 0 0 1px rgba(46, 229, 157, .3) !important;
  transform: none !important;
  cursor: default;
  filter: none;
}
/* Stoppen (JS schaltet style.display) */
body.tc-redesign.tc-max :is(#chatRainCancelBtn, #globalRainCancelBtn) {
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px !important;
  border-radius: 11px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 77, 94, .45) !important;
  color: #ff8d98 !important;
  -webkit-text-fill-color: currentColor !important;
  font: 700 13.5px/1 var(--mx-font-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
body.tc-redesign.tc-max :is(#chatRainCancelBtn, #globalRainCancelBtn):hover { background: rgba(255, 77, 94, .12) !important; color: #ffb1b8 !important; }

/* ------------------------------------------------------------------ Angepinnte Nachricht (unter dem Kopf) */
body.tc-redesign.tc-max #floatingChatContainer #chatPinnedBar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: none;
  padding: 9px 8px 9px 14px;
  background: linear-gradient(90deg, rgba(255, 201, 60, .1), rgba(255, 201, 60, .02) 70%), var(--mx-surface);
  border-bottom: 1px solid var(--mx-line-soft);
  box-shadow: inset 3px 0 0 var(--mx-gold);
}
body.tc-redesign.tc-max #floatingChatContainer #chatPinnedBar[hidden] { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-pinned-icon { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--mx-gold); }
body.tc-redesign.tc-max #floatingChatContainer .chat-pinned-icon svg { width: 17px; height: 17px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-pinned-body { flex: 1 1 auto; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-pinned-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--mx-text);
  font: 500 13.5px/1.45 var(--mx-font-body);
  overflow-wrap: anywhere;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-pinned-meta { display: block; margin-top: 2px; color: var(--mxc-hint); font: 600 11.5px/1.3 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer #chatPinnedBar.is-collapsed { align-items: center; padding-top: 7px; padding-bottom: 7px; }
body.tc-redesign.tc-max #floatingChatContainer #chatPinnedBar.is-collapsed .chat-pinned-text { -webkit-line-clamp: 1; color: var(--mx-text-2); }
body.tc-redesign.tc-max #floatingChatContainer #chatPinnedBar.is-collapsed .chat-pinned-meta { display: none; }
body.tc-redesign.tc-max #floatingChatContainer #chatPinnedBar.is-collapsed .chat-pinned-toggle svg { rotate: 180deg; }
body.tc-redesign.tc-max #floatingChatContainer .chat-pinned-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--mx-text-2);
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-pinned-btn[hidden] { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-pinned-btn:hover { background: var(--mx-raised); color: var(--mx-text); }
body.tc-redesign.tc-max #floatingChatContainer .chat-pinned-btn svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------------ Nachrichten */
body.tc-redesign.tc-max #floatingChatContainer #liveChatMessages {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: auto !important;
  padding: 8px 12px 14px !important;
  background: var(--mx-bg-2) !important;
  scrollbar-width: thin;
  scrollbar-color: #2b3a5f transparent;
  /* Oberkante weich ausblenden: Blasen laufen nicht hart unter Kopf oder Geldregen-Karte */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px);
}
body.tc-redesign.tc-max #floatingChatContainer #liveChatMessages:focus { outline: none; }
body.tc-redesign.tc-max #floatingChatContainer #liveChatMessages:focus-visible { box-shadow: inset 0 0 0 2px var(--mxc-ame-line) !important; }
body.tc-redesign.tc-max #floatingChatContainer #liveChatMessages::-webkit-scrollbar { width: 8px; }
body.tc-redesign.tc-max #floatingChatContainer #liveChatMessages::-webkit-scrollbar-thumb { background: #2b3a5f; border-radius: 8px; border: 2px solid var(--mx-bg-2); }
body.tc-redesign.tc-max #floatingChatContainer #liveChatMessages::-webkit-scrollbar-track { background: transparent; }

/* Tagestrenner (Heute/Gestern/Datum) und „Neu“-Trenner beim Öffnen */
body.tc-redesign.tc-max #floatingChatContainer .chat-day-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin: 14px 0 8px;
  color: var(--mxc-hint);
  font: 700 11px/1 var(--mx-font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-day-sep:first-child { margin-top: 4px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-day-sep::before,
body.tc-redesign.tc-max #floatingChatContainer .chat-day-sep::after { content: ""; flex: 1; height: 1px; background: var(--mx-line-soft); }
body.tc-redesign.tc-max #floatingChatContainer .chat-day-sep span {
  white-space: nowrap;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-new-sep {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 14px 0 10px;
  color: var(--mxc-ame-hi);
  font: 800 11px/1 var(--mx-font-body);
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-new-sep::before { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(181, 140, 255, 0), var(--mx-amethyst)); }
body.tc-redesign.tc-max #floatingChatContainer .chat-new-sep span { padding: 4px 8px; border-radius: 6px; background: var(--mx-amethyst); color: var(--mxc-ame-ink); }

/* Zeile. Die Aktionsleiste (.chat-msg-tools, app.js) wandert zur Zeile unter Maus/Fokus/Finger. */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row {
  position: relative;
  flex: none;
  align-items: flex-start;
  gap: 9px !important;
  margin: 0 -6px !important;
  padding: 2px 6px !important;
  background: none !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation-name: none !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row:hover { border: 0 !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row + .chat-msg-row { margin-top: 10px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-grouped { margin-top: 2px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.has-tools:not(.is-system) { background: rgba(148, 170, 220, .045) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row:focus { outline: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row:focus-visible { box-shadow: inset 0 0 0 1.5px var(--mxc-ame-line) !important; }
/* Sprung zur Originalnachricht: kurzes Aufleuchten (eigene Ebene, weil die Zeile Hintergrund/Schatten sperrt;
   ohne Bewegung bleibt es beim ruhigen Rahmen, bis app.js die Klasse entfernt) */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row { isolation: isolate; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-flash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 201, 60, .13);
  box-shadow: inset 0 0 0 1.5px rgba(255, 201, 60, .5);
  pointer-events: none;
}

body.tc-redesign.tc-max #floatingChatContainer .chat-msg-avatar {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px;
  margin: 1px 0 0 !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: var(--mx-raised) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .35) !important;
  image-rendering: pixelated;
  object-fit: cover;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-grouped .chat-msg-avatar { visibility: hidden; height: 0 !important; margin: 0 !important; }

body.tc-redesign.tc-max #floatingChatContainer .chat-msg-content { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 6px !important;
  min-height: 16px;
  margin: 0 0 3px !important;
  padding: 0;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-grouped:not(.is-me) .chat-msg-meta { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name {
  order: 1;
  color: var(--mx-text) !important;
  font: 700 13px/1.2 var(--mx-font-body) !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Namensfarbe: Gold, Amethyst und Diamant gehören allein Inhaber, Creator und Team (plus fettere Schrift).
   Ränge ab VIP Silber (Level-Vorteil „Chat-Farben“) haben eigene, ruhigere Töne – keiner davon ist ein
   Erz mit Bedeutung (Smaragd = Gewinn, Redstone = Verlust). */
/* Klick auf einen fremden Namen erwähnt ihn in der Eingabe (app.js) */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row:not(.is-me) .chat-author-name { cursor: pointer; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row:not(.is-me) .chat-author-name:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name:is(.tone-owner, .tone-creator, .tone-mod) { font-weight: 800 !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name.tone-owner { color: var(--mx-gold) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name.tone-creator { color: var(--mx-amethyst) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name.tone-mod { color: var(--mx-diamond) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name.tone-silber { color: var(--mxc-rank-silber) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name.tone-gold { color: var(--mxc-rank-gold) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name.tone-platin { color: var(--mxc-rank-platin) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name.tone-diamant { color: var(--mxc-rank-diamant) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name.tone-titan { color: var(--mxc-rank-titan) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name.tone-champion { color: var(--mxc-rank-champion) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-author-name.tone-mythic { color: var(--mxc-rank-mythic) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-time {
  order: 3;
  margin: 0 !important;
  color: var(--mxc-hint) !important;
  font: 500 10.5px/1 var(--mx-font-body) !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
}

/* Abzeichen = .mx-tag (Pille) wie im Online-Dialog, Hub und Profil. Rollen in Tokenfarben
   (Inhaber Gold, Creator und eigene Rollen Amethyst, Team Diamant – Server-Farben eigener Rollen gelten hier nicht).
   Ränge neutral: ihr Ton steckt im Namen (VIP-Vorteil ab Silber) und im Rang-Symbol. */
body.tc-redesign.tc-max #floatingChatContainer :is(.chat-role-badge, .chat-rank-badge) {
  --tag: var(--mx-text-2);
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: auto;
  margin: 0 !important;
  padding: 2px 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--tag) 13%, transparent) !important;
  color: var(--tag) !important;
  font: 700 10.5px/1.15 var(--mx-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  white-space: nowrap;
  box-shadow: none !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-role-inhaber { --tag: var(--mx-gold); }
body.tc-redesign.tc-max #floatingChatContainer :is(.chat-role-creator, .chat-role-custom) { --tag: var(--mx-amethyst); }
body.tc-redesign.tc-max #floatingChatContainer .chat-role-mod { --tag: var(--mx-diamond); }

/* Blase: weiche Fläche ohne Rahmen, Ecke zur Person hin schmal */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-bubble {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 !important;
  padding: 6px 11px 7px !important;
  background: rgba(148, 170, 220, .1) !important;
  border: 0 !important;
  border-radius: 4px 14px 14px 14px !important;
  box-shadow: none !important;
  color: var(--mx-text) !important;
  line-height: 1.45;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-grouped .chat-msg-bubble { border-radius: 4px 14px 14px 4px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-text {
  color: var(--mx-text) !important;
  font: 400 14px/1.45 var(--mx-font-body) !important;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: pre-wrap;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-text strong { font-weight: 800; color: #fff; }
body.tc-redesign.tc-max #floatingChatContainer .chat-mention {
  padding: 0 4px;
  border-radius: 5px;
  background: rgba(91, 231, 240, .12);
  color: var(--mx-diamond);
  font-weight: 700;
  white-space: nowrap;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-mention.is-self { background: rgba(255, 201, 60, .16); color: var(--mx-gold); }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-mention .chat-msg-bubble {
  background: linear-gradient(90deg, rgba(255, 201, 60, .2), rgba(255, 201, 60, .08)) !important;
  box-shadow: inset 3px 0 0 var(--mx-gold) !important;
}
/* Links (keine Medien): Diamant, gekürzt, mit Pfeil nach außen */
body.tc-redesign.tc-max #floatingChatContainer .chat-link {
  color: var(--mx-diamond);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(91, 231, 240, .4);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-link::after { content: " ↗"; font-size: .85em; opacity: .75; }
body.tc-redesign.tc-max #floatingChatContainer .chat-link:hover { text-decoration-color: currentColor; }

/* Zitat einer Antwort: Klick springt zur Originalzeile */
body.tc-redesign.tc-max #floatingChatContainer .chat-reply-quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
  margin: 0 0 6px;
  padding: 5px 10px 6px;
  border: 0;
  border-radius: 5px 9px 9px 5px;
  background: rgba(181, 140, 255, .09);
  box-shadow: inset 3px 0 0 var(--mx-amethyst);
  color: var(--mx-text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-reply-quote:hover { background: rgba(181, 140, 255, .16); }
body.tc-redesign.tc-max #floatingChatContainer .chat-reply-name { color: var(--mxc-ame-hi); font: 700 12px/1.25 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer .chat-reply-snippet {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--mx-text-2);
  font: 500 12.5px/1.35 var(--mx-font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Reaktionen unter der Blase – eigene hervorgehoben */
body.tc-redesign.tc-max #floatingChatContainer .chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-react-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 25px;
  padding: 0 8px 0 6px;
  border-radius: 999px;
  background: var(--mx-surface);
  border: 1px solid var(--mx-line-soft);
  color: var(--mx-text-2);
  font: 700 12px/1 var(--mx-font-body);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-react-chip:hover { border-color: var(--mx-line); color: var(--mx-text); }
body.tc-redesign.tc-max #floatingChatContainer .chat-react-chip.is-mine { background: var(--mxc-ame-soft); border-color: var(--mxc-ame-line); color: var(--mxc-ame-hi); }
body.tc-redesign.tc-max #floatingChatContainer .chat-react-emoji { font-size: 14px; line-height: 1; }

/* Aktionsleiste (Reaktionen · Antworten · Sammeln · Anpinnen · Löschen): schwebt ganz über der Zeile, damit Name,
   Abzeichen und Text der Nachricht frei bleiben (der Name ist anklickbar). Ganz oben in der Liste setzt app.js
   (chatAttachTools) sie per style.top an die sichtbare Oberkante – sonst schnitte die Liste sie ab. */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-tools {
  position: absolute;
  z-index: 5;
  top: -38px;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--mx-raised);
  border: 1px solid var(--mx-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 24px -12px rgba(0, 0, 0, .9);
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-msg-tools { right: auto; left: 6px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-system .chat-msg-tools { right: 50%; translate: 50% 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-tools-react { display: flex; gap: 1px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-tools-react:not([hidden]) ~ .chat-tool:not([hidden]) { margin-left: 3px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-tools-react:not([hidden]) + .chat-tool:not([hidden])::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--mx-line-soft);
}
body.tc-redesign.tc-max #floatingChatContainer :is(.chat-tools-react, .chat-tool)[hidden] { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 30px;
  height: 30px;
  padding: 0 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--mx-text-2);
  font: 600 12.5px/1 var(--mx-font-body);
  white-space: nowrap;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-tool:is(:hover, :focus-visible) { background: var(--mx-surface); color: var(--mx-text); }
body.tc-redesign.tc-max #floatingChatContainer .chat-tool svg { width: 16px; height: 16px; flex: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-tool-emoji { width: 30px; padding: 0; font-size: 17px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-tool-delete:hover { background: rgba(255, 77, 94, .12); color: #ff8d98; }
body.tc-redesign.tc-max #floatingChatContainer .chat-tool-pin:hover { color: var(--mx-gold); }
/* „Antworten“ als Wort nur mit Platz; schmal (im Spiel, Handy) reicht das Symbol */
body.tc-redesign.tc-max #floatingChatContainer .chat-tool-label { display: none; }
@container mxchat (min-width: 391px) {
  body.tc-redesign.tc-max #floatingChatContainer .chat-tool-label { display: inline; }
}
/* Leitung: mit Sammeln/Anpinnen/Löschen wird die Leiste breit – dann reicht auch dort das Symbol */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-tools:has(.chat-tool-delete:not([hidden])) .chat-tool-label { display: none; }

/* Eigene Nachrichten: rechts, Amethyst, ohne Avatar und Namen. Die Zeit steht klein links neben der Blase
   (in einer Gruppe nur an der letzten Nachricht), Reaktionen darunter rechtsbündig. */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me { flex-direction: row-reverse; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-msg-avatar { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-msg-content {
  display: grid;
  grid-template-columns: auto minmax(0, auto);
  justify-content: end;
  align-items: end;
  column-gap: 8px;
  padding-left: 36px;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-msg-meta {
  grid-column: 1;
  grid-row: 1;
  flex-wrap: nowrap;
  gap: 4px !important;
  min-height: 0;
  margin: 0 0 4px !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-msg-bubble { grid-column: 2; grid-row: 1; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-reactions { grid-column: 1 / -1; justify-content: flex-end; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-msg-meta > :is(.chat-author-name, .chat-role-badge, .chat-rank-badge) { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me:has(+ .chat-msg-row.is-me.is-grouped) .chat-msg-time { visibility: hidden; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-msg-bubble {
  min-width: 0;
  background: linear-gradient(180deg, #8d69ee, #7651dc) !important;
  border-radius: 14px 14px 4px 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-msg-text { color: #fff !important; }
/* Unten rechts immer die Ecke zur Zeit hin; oben rechts schmal, wenn die Blase an die vorige anschließt */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me.is-grouped .chat-msg-bubble { border-radius: 14px 4px 4px 14px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-mention { background: rgba(10, 16, 32, .3); color: #fff; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-link { color: #fff; text-decoration-color: rgba(255, 255, 255, .55); }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-reply-quote { background: rgba(10, 16, 32, .28); box-shadow: inset 3px 0 0 rgba(255, 255, 255, .7); }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-reply-quote :is(.chat-reply-name, .chat-reply-snippet) { color: #f1eaff; }

/* Medien: bewusst klein (ein GIF soll das Gespräch nicht verdrängen) – groß per Klick. Rahmen/Schatten aus style.css sind aus. */
body.tc-redesign.tc-max #floatingChatContainer .chat-inline-media-wrap {
  display: block;
  width: 204px;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px;
  background: none !important;
  box-shadow: none !important;
  overflow: hidden;
}
body.tc-redesign.tc-max #floatingChatContainer :is(.chat-msg-text, .chat-reply-quote) + .chat-inline-media-wrap { margin-top: 8px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-inline-media-wrap a {
  display: block;
  border-radius: 12px;
  cursor: zoom-in;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
body.tc-redesign.tc-max #floatingChatContainer .chat-inline-media {
  display: block;
  width: 100% !important;
  height: auto !important;
  min-height: 60px;
  max-height: 170px !important;
  object-fit: cover;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--mx-raised);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .8) !important;
}
/* Bild lädt nicht (fremder Host weg, CSP): ruhiger Platzhalter statt Fremd-Proxy */
body.tc-redesign.tc-max #floatingChatContainer .chat-inline-media-wrap.is-broken {
  display: grid;
  place-items: center;
  width: 200px;
  min-height: 64px;
  background: var(--mx-surface);
  border: 1px dashed var(--mx-line);
}
body.tc-redesign.tc-max #floatingChatContainer .chat-inline-media-wrap.is-broken a { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-media-broken { color: var(--mxc-hint); font: 600 12.5px/1.3 var(--mx-font-body); }
/* Nur ein Bild: keine Blase drumherum */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-bubble:not(:has(.chat-msg-text, .chat-reply-quote)):has(.chat-inline-media-wrap) {
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Hinweise vom Server: schmale Zeilen statt Kästen – das Gespräch bleibt die Hauptsache. Info leise und mittig,
   Geldregen Amethyst, Abschluss Smaragd, Stopp Redstone; die Uhrzeit steht im Tooltip. */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-system { justify-content: center; margin-top: 8px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-system + .chat-msg-row { margin-top: 10px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-system + .chat-msg-row.is-system { margin-top: 4px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-system .chat-msg-content { flex-direction: column-reverse; align-items: stretch; gap: 4px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-system .chat-msg-meta { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-system .chat-msg-meta > :not(.chat-msg-time) { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-system .chat-reactions { justify-content: center; order: -1; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-system .chat-msg-bubble {
  --notice: var(--mx-text-2);
  width: 100%;
  padding: 7px 11px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--notice) 11%, transparent) !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--notice) 75%, transparent) !important;
  text-align: left;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-system .chat-msg-text { font-size: 13px !important; line-height: 1.45 !important; color: var(--mx-text) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="info"] .chat-msg-bubble {
  width: auto;
  max-width: 92%;
  align-self: center;
  padding: 2px 8px !important;
  background: none !important;
  box-shadow: none !important;
  text-align: center;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="info"] .chat-msg-text { color: var(--mxc-hint) !important; font-size: 12.5px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="rain"] .chat-msg-bubble { --notice: var(--mx-amethyst); }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="done"] .chat-msg-bubble { --notice: var(--mx-emerald); }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="stop"] .chat-msg-bubble { --notice: var(--mx-redstone); }
/* Gewinnansage: eine schmale goldene Zeile (app.js: chatBuildWinCard) – Kopf · Name · Betrag … Spiel · Faktor.
   Viele Gewinne hintereinander bleiben so ein ruhiger Stapel statt einer Wand aus Kästen. Ohne lesbare Daten bleibt
   es beim Text in derselben Zeile. */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="win"] .chat-msg-bubble {
  --notice: var(--mx-gold);
  padding: 5px 9px 5px 6px !important;
  background: linear-gradient(90deg, rgba(255, 201, 60, .14), rgba(255, 201, 60, .04)) !important;
  box-shadow: none !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="win"]:not(.has-card) .chat-msg-bubble { padding-left: 10px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="win"] .chat-msg-text { color: #ffe7a6 !important; font-weight: 600 !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.has-card.is-big .chat-msg-bubble { background: linear-gradient(90deg, rgba(255, 201, 60, .3), rgba(255, 201, 60, .1)) !important; box-shadow: inset 0 0 0 1px rgba(255, 201, 60, .45) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-win-card { display: flex; align-items: center; gap: 7px; min-width: 0; color: #c9bb93; font: 600 12px/1.2 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer .chat-win-head {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--mx-raised);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  image-rendering: pixelated;
  object-fit: cover;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-win-name { flex: 0 1 auto; min-width: 34px; overflow: hidden; color: var(--mx-text); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
body.tc-redesign.tc-max #floatingChatContainer .chat-win-sum {
  flex: none;
  color: var(--mx-gold);
  font: 800 16px/1 var(--mx-font-display);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-win-sub { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 1 1 0; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-win-game { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Spielname als Knopf: Klick öffnet das Spiel */
body.tc-redesign.tc-max #floatingChatContainer button.chat-win-play { padding: 0; border: 0; background: none; color: #e6d7ab; font: inherit; text-decoration: underline; text-decoration-color: rgba(230, 215, 171, .4); text-underline-offset: 3px; cursor: pointer; }
body.tc-redesign.tc-max #floatingChatContainer button.chat-win-play:hover { color: var(--mx-gold); text-decoration-color: currentColor; }
body.tc-redesign.tc-max #floatingChatContainer button.chat-win-play:focus-visible { outline: 2px solid var(--mx-gold); outline-offset: 2px; border-radius: 4px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-win-mult {
  flex: none;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(255, 201, 60, .16);
  color: var(--mx-gold);
  font: 800 12px/1.1 var(--mx-font-display);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
/* Lostopf-Ziehung (kind "lotto"): Karte mit Titel und einer Zeile je Platz */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="lotto"] .chat-msg-bubble {
  --notice: var(--mx-emerald);
  padding: 9px 12px 10px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(46, 229, 157, .14), rgba(255, 201, 60, .06)) !important;
  box-shadow: inset 0 0 0 1px rgba(46, 229, 157, .28) !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="lotto"] .chat-msg-text { font-size: 13px !important; line-height: 1.55 !important; font-variant-numeric: tabular-nums; }
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="lotto"] .chat-msg-text strong { color: #c9ffe7; font-size: 13.5px; }
/* Ziehung als Karte (app.js: chatBuildLottoCard): Kopfzeile, eine Zeile je Platz, Knopf zum Lostopf */
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-ico { font-size: 16px; line-height: 1; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-title { color: #c9ffe7; font: 700 11px/1.2 var(--mx-font-body); letter-spacing: .08em; text-transform: uppercase; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-sub { margin-left: auto; color: var(--mxc-hint); font-size: 12px; font-variant-numeric: tabular-nums; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-list { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-row { display: flex; align-items: center; gap: 7px; min-width: 0; min-height: 30px; padding: 3px 8px 3px 5px; border-radius: 8px; background: rgba(8, 14, 28, .42); }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-row[data-place="1"] { min-height: 36px; background: linear-gradient(90deg, rgba(255, 201, 60, .26), rgba(255, 201, 60, .07)); box-shadow: inset 0 0 0 1px rgba(255, 201, 60, .4); }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-row.is-me { box-shadow: inset 0 0 0 1.5px var(--mx-emerald); }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-place { flex: none; width: 22px; text-align: center; color: var(--mxc-hint); font: 700 12.5px/1 var(--mx-font-body); font-variant-numeric: tabular-nums; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-row[data-place="1"] .chat-lotto-place,
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-row[data-place="2"] .chat-lotto-place,
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-row[data-place="3"] .chat-lotto-place { font-size: 15px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mx-text); font-size: 13.5px; font-weight: 700; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-sum { flex: none; color: #8ff5c9; font: 800 13.5px/1.1 var(--mx-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-row[data-place="1"] .chat-lotto-sum { color: var(--mx-gold-hi); font-size: 14.5px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-jackpot { color: var(--mx-gold-hi); font-size: 13px; line-height: 1.4; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-jackpot strong { color: #fff; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-none { color: var(--mx-text); font-size: 13px; line-height: 1.4; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(46, 229, 157, .2);
  box-shadow: inset 0 0 0 1px rgba(46, 229, 157, .45);
  color: #eafff6;
  font: 700 13px/1.2 var(--mx-font-body);
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-go::after { content: "›"; font-size: 15px; line-height: 1; opacity: .8; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-go:hover { background: rgba(46, 229, 157, .32); color: #fff; }
body.tc-redesign.tc-max #floatingChatContainer .chat-lotto-go:focus-visible { outline: 2px solid var(--mx-emerald); outline-offset: 2px; }

/* Wieder geöffnet (kind "open", app.js: chatBuildOpenCard): grüne Karte mit Lampe, jeder Name ist ein Knopf zum Spiel */
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="open"] .chat-msg-bubble {
  --notice: var(--mx-emerald);
  padding: 9px 12px 10px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(46, 229, 157, .18), rgba(46, 229, 157, .05)) !important;
  box-shadow: inset 0 0 0 1px rgba(46, 229, 157, .32) !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row[data-notice="open"] .chat-msg-text strong { color: #c9ffe7; }
body.tc-redesign.tc-max #floatingChatContainer .chat-open-card { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-open-lamp {
  position: relative;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--mx-emerald);
  box-shadow: 0 0 8px rgba(46, 229, 157, .8);
}
body.tc-redesign.tc-max #floatingChatContainer .chat-open-lamp::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 2px solid var(--mx-emerald);
  opacity: 0;
  animation: mxcOpenRing 2.4s ease-out 3;
}
@keyframes mxcOpenRing {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(2.8); opacity: 0; }
}
body.tc-redesign.tc-max #floatingChatContainer .chat-open-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
body.tc-redesign.tc-max #floatingChatContainer .chat-open-title { color: #c9ffe7; font: 700 11px/1.2 var(--mx-font-body); letter-spacing: .08em; text-transform: uppercase; }
body.tc-redesign.tc-max #floatingChatContainer .chat-open-line { color: var(--mx-text); font-size: 13px; line-height: 1.4; }
body.tc-redesign.tc-max #floatingChatContainer .chat-open-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-open-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 30px;
  padding: 4px 11px;
  border: 0;
  border-radius: 999px;
  background: rgba(46, 229, 157, .2);
  box-shadow: inset 0 0 0 1px rgba(46, 229, 157, .45);
  color: #eafff6;
  font: 700 13.5px/1.2 var(--mx-font-body);
  overflow-wrap: anywhere;
}
body.tc-redesign.tc-max #floatingChatContainer button.chat-open-go { cursor: pointer; }
body.tc-redesign.tc-max #floatingChatContainer button.chat-open-go::after { content: "›"; font-size: 15px; line-height: 1; opacity: .8; }
body.tc-redesign.tc-max #floatingChatContainer button.chat-open-go:hover { background: rgba(46, 229, 157, .32); color: #fff; }
body.tc-redesign.tc-max #floatingChatContainer button.chat-open-go:focus-visible { outline: 2px solid var(--mx-emerald); outline-offset: 2px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-open-more { color: var(--mxc-hint); font-size: 12.5px; }

/* Leer-, Lade- und Fehlerzustand */
body.tc-redesign.tc-max #floatingChatContainer #liveChatMessages .chat-empty-state {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 18px !important;
  text-align: center;
  color: var(--mx-text-2) !important;
  font-size: 14px;
  line-height: 1.5;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-empty-state .tc-chat-empty-art {
  position: static;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 0 6px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(181, 140, 255, .26), rgba(181, 140, 255, .1));
  border: 1px solid var(--mxc-ame-line);
  color: var(--mx-amethyst);
  font-size: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 4px 0 rgba(0, 0, 0, .35);
}
body.tc-redesign.tc-max #floatingChatContainer .chat-empty-state .tc-chat-empty-art svg { width: 38px; height: 38px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-empty-state strong {
  font-family: var(--mx-font-display) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .005em !important;
  color: var(--mx-text) !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-empty-state p {
  max-width: 30ch;
  margin: 0 !important;
  color: var(--mx-text-2) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-empty-state small { color: var(--mxc-hint) !important; font-size: 13px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-empty-state .mx-chip {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--mxc-ame-soft);
  border: 1px solid var(--mxc-ame-line);
  color: var(--mx-text);
  font: 600 13.5px/1 var(--mx-font-body);
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-empty-state .mx-chip:hover { background: rgba(181, 140, 255, .24); border-color: rgba(181, 140, 255, .6); }
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-empty-state.is-cleared strong { font-size: 24px !important; }
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-loader { display: inline-flex; gap: 6px; }
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-loader i { width: 8px; height: 8px; border-radius: 2px; background: var(--mx-amethyst); opacity: .55; }

/* „↓ 3 neue Nachrichten“ schwebt über dem Listenende (im Fluss, ohne Layoutsprung); mit neuen Nachrichten Amethyst */
body.tc-redesign.tc-max #floatingChatContainer #tcChatLatest {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 4;
  align-self: center;
  flex: none;
  height: 34px;
  margin: -34px 0 0 !important;
  translate: 0 -12px;
  transform: none !important;
  padding: 0 14px 0 12px !important;
  border-radius: 999px !important;
  background: var(--mx-raised) !important;
  border: 1px solid var(--mx-line) !important;
  color: var(--mx-text) !important;
  font: 600 13px/1 var(--mx-font-body) !important;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .85) !important;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer #tcChatLatest::before { content: "↓"; margin-right: 7px; color: var(--mx-amethyst); font-weight: 800; }
body.tc-redesign.tc-max #floatingChatContainer #tcChatLatest:hover { border-color: var(--mxc-ame-line) !important; }
body.tc-redesign.tc-max #floatingChatContainer #tcChatLatest.has-new {
  background: linear-gradient(180deg, var(--mxc-ame-hi), #9a6ef4) !important;
  border-color: transparent !important;
  color: var(--mxc-ame-ink) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--mxc-ame-lo), 0 14px 26px -10px rgba(0, 0, 0, .85) !important;
}
body.tc-redesign.tc-max #floatingChatContainer #tcChatLatest.has-new::before { color: inherit; }
/* Bei offener Emoji-/GIF-Auswahl läge der Knopf über der Auswahl */
body.tc-redesign.tc-max #floatingChatContainer:has(.chat-popover-box:not([hidden])) #tcChatLatest { visibility: hidden; }

/* ------------------------------------------------------------------ Emoji- & GIF-Auswahl */
/* Die Auswahl darf schrumpfen (Kopf und Eingabe bleiben immer ganz sichtbar); solange sie offen ist, ruht die Pin-Leiste */
body.tc-redesign.tc-max #floatingChatContainer:has(.chat-popover-box:not([hidden])) #chatPinnedBar { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-popover-box {
  flex: 0 .02 auto;
  min-height: 140px;
  max-height: 64%;
  overflow-y: auto;
  margin: 0 !important;
  padding: 12px 12px 14px !important;
  background: var(--mx-surface) !important;
  border: 0 !important;
  border-top: 1px solid var(--mx-line-soft) !important;
  border-radius: 0 !important;
  box-shadow: 0 -18px 30px -18px rgba(0, 0, 0, .7) !important;
  scrollbar-width: thin;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-popover-header {
  /* bleibt beim Scrollen der Auswahl oben stehen (Schließen immer erreichbar) */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--mx-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -12px 0 10px !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  color: var(--mx-text-2) !important;
  font: 600 13px/1 var(--mx-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-popover-header .close-btn {
  display: grid;
  place-items: center;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid var(--mx-line-soft) !important;
  color: var(--mx-text-2) !important;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-popover-header .close-btn:hover { background: var(--mx-raised) !important; color: var(--mx-text) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-popover-header .close-btn svg { width: 16px; height: 16px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-emoji-groups { display: flex; flex-direction: column; gap: 10px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-emoji-group[hidden] { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-emoji-title {
  margin: 0 0 4px 2px;
  color: var(--mxc-hint);
  font: 700 11px/1 var(--mx-font-body);
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-emoji-grid { display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px !important; }
body.tc-redesign.tc-max #floatingChatContainer :is(.chat-emoji-tip, .chat-gif-hint) { margin: 10px 2px 0 !important; color: var(--mxc-hint); font: 500 12px/1.45 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer .chat-emoji-tip kbd {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--mx-raised);
  border: 1px solid var(--mx-line-soft);
  color: var(--mx-text-2);
  font: 600 11.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}
body.tc-redesign.tc-max #floatingChatContainer .emoji-chip {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: auto !important;
  height: auto !important;
  min-height: 36px;
  padding: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 21px !important;
  line-height: 1 !important;
  transform: none !important;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .emoji-chip:is(:hover, :focus-visible) { background: var(--mx-raised) !important; }
body.tc-redesign.tc-max #floatingChatContainer .gif-url-input-row { display: flex !important; gap: 8px !important; margin: 12px 0 0 !important; }
/* ---- Bibliothek: Favoriten / GIFs / Sticker / Animiert (js/chat-media.js) ---- */
/* Die Bibliothek nimmt fast das ganze Fenster – eine Zeile Chat bleibt als Anker sichtbar */
body.tc-redesign.tc-max #floatingChatContainer .chat-popover-box.cm-lib {
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 188px);
  padding: 10px 12px 12px !important;
  overflow: hidden;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-popover-box.cm-lib[hidden] { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .cm-lib > * { flex: none; }
/* nur die Treffer rollen – Suche, Reiter und Kategorien bleiben stehen */
body.tc-redesign.tc-max #floatingChatContainer .cm-lib > .cm-pane {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 -6px -6px;
  padding: 2px 6px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
body.tc-redesign.tc-max #floatingChatContainer .cm-top { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-search {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 11px;
  background: var(--mx-raised);
  box-shadow: inset 0 0 0 1px var(--mx-line-soft);
  color: var(--mxc-hint);
}
body.tc-redesign.tc-max #floatingChatContainer .cm-search:focus-within { box-shadow: inset 0 0 0 2px var(--mxc-ame-line); color: var(--mx-text); }
body.tc-redesign.tc-max #floatingChatContainer .cm-search svg { flex: none; width: 17px; height: 17px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--mx-text) !important;
  font: 500 14.5px/1 var(--mx-font-body) !important;
}
body.tc-redesign.tc-max #floatingChatContainer .cm-search input::placeholder { color: var(--mxc-hint); opacity: 1; }
body.tc-redesign.tc-max #floatingChatContainer .cm-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
body.tc-redesign.tc-max #floatingChatContainer .cm-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: var(--mx-raised);
  box-shadow: inset 0 0 0 1px var(--mx-line-soft);
  color: var(--mx-text-2);
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .cm-close:hover { color: var(--mx-text); box-shadow: inset 0 0 0 1px var(--mx-line); }
body.tc-redesign.tc-max #floatingChatContainer .cm-close:focus-visible { outline: 2px solid var(--mxc-ame-line); outline-offset: 1px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-close svg { width: 17px; height: 17px; }
/* beim Suchen gehört der Platz den Treffern (Suche leeren = zurück zu den Reitern) */
body.tc-redesign.tc-max #floatingChatContainer .cm-lib.is-searching .cm-tabs { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .cm-tabs {
  display: grid;
  grid-template-columns: 44px repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 8px;
  padding: 4px;
  border-radius: 12px;
  background: var(--mx-raised);
  box-shadow: inset 0 0 0 1px var(--mx-line-soft);
}
body.tc-redesign.tc-max #floatingChatContainer .cm-tab {
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--mxc-hint);
  font: 700 13px/1 var(--mx-font-body);
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .cm-tab svg { width: 17px; height: 17px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-tab:hover { color: var(--mx-text); }
body.tc-redesign.tc-max #floatingChatContainer .cm-tab.is-active { background: var(--mx-surface); color: var(--mx-text); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 6px 14px -10px rgba(0, 0, 0, .9); }
body.tc-redesign.tc-max #floatingChatContainer .cm-tab--fav.is-active { color: var(--mx-gold); }
body.tc-redesign.tc-max #floatingChatContainer .cm-tab:focus-visible { outline: 2px solid var(--mxc-ame-line); outline-offset: 1px; }
/* GIF-Kategorien: eine Reihe zum Wischen (Rand bis an die Fensterkante) */
body.tc-redesign.tc-max #floatingChatContainer .cm-cats {
  display: flex;
  gap: 6px;
  margin: 0 -12px 8px;
  padding: 0 12px 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.tc-redesign.tc-max #floatingChatContainer .cm-cats[hidden] { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .cm-cats::-webkit-scrollbar { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .cm-cat {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--mx-raised);
  box-shadow: inset 0 0 0 1px var(--mx-line-soft);
  color: var(--mx-text-2);
  font: 600 13px/1 var(--mx-font-body);
  white-space: nowrap;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .cm-cat-ico { font-size: 14px; line-height: 1; }
body.tc-redesign.tc-max #floatingChatContainer .cm-cat:hover { color: var(--mx-text); box-shadow: inset 0 0 0 1px var(--mx-line); }
body.tc-redesign.tc-max #floatingChatContainer .cm-cat.is-active { background: var(--mxc-ame-soft); box-shadow: inset 0 0 0 1.5px var(--mxc-ame-line); color: var(--mx-text); }
body.tc-redesign.tc-max #floatingChatContainer .cm-cat:focus-visible { outline: 2px solid var(--mxc-ame-line); outline-offset: 1px; }
/* GIF-Kacheln: drei Spalten im Mauerwerk, Stern (und für die Leitung „+“) liegen über dem Bild */
body.tc-redesign.tc-max #floatingChatContainer .cm-gifs { column-count: 3; column-gap: 6px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-tile { position: relative; margin: 0 0 6px; break-inside: avoid; }
body.tc-redesign.tc-max #floatingChatContainer .cm-gif {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 9px;
  background: var(--mx-raised);
  box-shadow: inset 0 0 0 1px var(--mx-line-soft);
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body.tc-redesign.tc-max #floatingChatContainer .cm-gif img { display: block; width: 100%; height: auto; pointer-events: none; }
body.tc-redesign.tc-max #floatingChatContainer .cm-gif:hover { box-shadow: 0 0 0 2px var(--mxc-ame-line); }
body.tc-redesign.tc-max #floatingChatContainer .cm-gif:focus-visible { outline: 2px solid var(--mxc-ame-line); outline-offset: 1px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-lib.is-waiting :is(.cm-gif, .cm-sticker) { opacity: .38; cursor: not-allowed; transform: none; }
body.tc-redesign.tc-max #floatingChatContainer :is(.cm-star, .cm-add) {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(8, 13, 26, .78);
  color: #fff;
  opacity: 0;
  cursor: pointer;
  transition: opacity .12s ease;
}
body.tc-redesign.tc-max #floatingChatContainer .cm-add { right: auto; left: 4px; }
body.tc-redesign.tc-max #floatingChatContainer :is(.cm-star, .cm-add) svg { width: 15px; height: 15px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-star svg { fill: none; }
body.tc-redesign.tc-max #floatingChatContainer .cm-star.is-on { color: var(--mx-gold); opacity: 1; }
body.tc-redesign.tc-max #floatingChatContainer .cm-star.is-on svg { fill: currentColor; }
body.tc-redesign.tc-max #floatingChatContainer :is(.cm-star, .cm-add):focus-visible { opacity: 1; outline: 2px solid var(--mxc-ame-line); outline-offset: 1px; }
@media (hover: hover) {
  body.tc-redesign.tc-max #floatingChatContainer :is(.cm-tile, .cm-cell):hover :is(.cm-star, .cm-add) { opacity: 1; }
  body.tc-redesign.tc-max #floatingChatContainer :is(.cm-star, .cm-add):hover { background: rgba(8, 13, 26, .95); color: var(--mx-gold); }
}
/* Handy: der „+“-Knopf der Leitung ist immer da, der Stern kommt per langem Druck */
@media (hover: none) {
  body.tc-redesign.tc-max #floatingChatContainer .cm-add { opacity: 1; }
}
body.tc-redesign.tc-max #floatingChatContainer .cm-credit { float: right; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .8; }
body.tc-redesign.tc-max #floatingChatContainer .cm-note { margin: 10px 2px; color: var(--mxc-hint); font: 500 13px/1.45 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer .cm-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 26px 12px 18px;
  color: var(--mxc-hint);
  font: 500 13px/1.45 var(--mx-font-body);
  text-align: center;
}
body.tc-redesign.tc-max #floatingChatContainer .cm-empty svg { width: 34px; height: 34px; color: var(--mx-gold); opacity: .8; }
body.tc-redesign.tc-max #floatingChatContainer .cm-empty strong { color: var(--mx-text); font: 700 15px/1.2 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer .cm-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--mx-raised);
  color: var(--mx-text);
  font: 600 12.5px/1.2 var(--mx-font-body);
}
body.tc-redesign.tc-max #floatingChatContainer .cm-wait[hidden] { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .cm-wait-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
body.tc-redesign.tc-max #floatingChatContainer .cm-wait-bar i { display: block; width: 100%; height: 100%; border-radius: 3px; background: var(--mx-gold, #f7c948); transform-origin: left center; transition: transform .25s linear; }
body.tc-redesign.tc-max #floatingChatContainer .cm-wait-text { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
body.tc-redesign.tc-max #floatingChatContainer .cm-pane[hidden] { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .cm-group + .cm-group { margin-top: 12px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-group-title { margin: 0 2px 6px; color: var(--mxc-hint); font: 700 11.5px/1 var(--mx-font-body); letter-spacing: .04em; text-transform: uppercase; }
body.tc-redesign.tc-max #floatingChatContainer .cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-cell { position: relative; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .cm-cell .cm-star { top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 7px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-cell .cm-star svg { width: 13px; height: 13px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-sticker {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  padding: 5px;
  border: 0;
  border-radius: 11px;
  background: var(--mx-raised);
  box-shadow: inset 0 0 0 1px var(--mx-line-soft);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
body.tc-redesign.tc-max #floatingChatContainer .cm-sticker img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
body.tc-redesign.tc-max #floatingChatContainer .cm-sticker:hover { transform: translateY(-2px) scale(1.06); box-shadow: inset 0 0 0 2px var(--mxc-ame-line); }
body.tc-redesign.tc-max #floatingChatContainer .cm-sticker:focus-visible { outline: 2px solid var(--mxc-ame-line); outline-offset: 1px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-lib.is-waiting .cm-sticker:hover { box-shadow: inset 0 0 0 1px var(--mx-line-soft); }
/* Leitung: „In die Sammlung legen“ – Blatt am unteren Rand des Chat-Fensters */
body.tc-redesign.tc-max #floatingChatContainer .cm-collect {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  max-height: 72%;
  border: 1px solid var(--mx-line);
  border-radius: 16px;
  background: var(--mx-surface);
  box-shadow: 0 -22px 50px -12px rgba(0, 0, 0, .85), 0 0 0 100vmax rgba(5, 9, 18, .55);
}
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-head { display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 12px; border-bottom: 1px solid var(--mx-line-soft); }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-head img { flex: none; width: 54px; height: 54px; border-radius: 9px; object-fit: cover; background: var(--mx-raised); }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-copy { display: grid; flex: 1 1 auto; gap: 3px; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-copy strong { color: var(--mx-text); font: 700 15px/1.2 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-copy span { color: var(--mxc-hint); font: 500 12.5px/1.4 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-close { display: grid; flex: none; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--mx-text-2); cursor: pointer; }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-close:hover { background: var(--mx-raised); color: var(--mx-text); }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-close svg { width: 17px; height: 17px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px; overflow-y: auto; overscroll-behavior: contain; }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-list .cm-note { grid-column: 1 / -1; margin: 6px 2px; }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background: var(--mx-raised);
  box-shadow: inset 0 0 0 1px var(--mx-line-soft);
  color: var(--mx-text);
  font: 600 13.5px/1.2 var(--mx-font-body);
  text-align: left;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-cat > span:not(.cm-cat-ico) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-cat small { flex: none; color: var(--mxc-hint); font: 600 12px/1 var(--mx-font-body); font-variant-numeric: tabular-nums; }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-cat:hover { box-shadow: inset 0 0 0 1.5px var(--mxc-ame-line); }
body.tc-redesign.tc-max #floatingChatContainer .cm-collect-cat:disabled { opacity: .5; cursor: default; }
body.tc-redesign.tc-max #floatingChatContainer :is(.cm-collect-cat, .cm-collect-close):focus-visible { outline: 2px solid var(--mxc-ame-line); outline-offset: 1px; }
/* Sticker in einer Nachricht: ohne Rahmen, feste Größe, keine Großansicht */
body.tc-redesign.tc-max #floatingChatContainer .chat-inline-media-wrap.is-sticker { width: 88px; border-radius: 0; overflow: visible; }
body.tc-redesign.tc-max #floatingChatContainer .chat-sticker { display: block; width: 88px; height: 88px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-gif-btn svg { width: 21px; height: 21px; }

body.tc-redesign.tc-max #floatingChatContainer #chatCustomMediaUrl {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px !important;
  border-radius: 10px !important;
  background: var(--mx-bg) !important;
  border: 1.5px solid var(--mx-line) !important;
  color: var(--mx-text) !important;
  font: 500 14px/1 var(--mx-font-body) !important;
  box-shadow: none !important;
}
body.tc-redesign.tc-max #floatingChatContainer #chatCustomMediaUrl::placeholder { color: var(--mxc-hint); opacity: 1; }
body.tc-redesign.tc-max #floatingChatContainer #chatCustomMediaUrl:focus { border-color: rgba(255, 201, 60, .7) !important; outline: none; }
body.tc-redesign.tc-max #floatingChatContainer .gif-url-input-row .btn {
  min-height: 40px;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, var(--mx-gold-hi), #f6b21f) !important;
  color: var(--mx-gold-ink) !important;
  font: 700 13.5px/1 var(--mx-font-body) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 var(--mx-gold-lo) !important;
  transform: none !important;
}

/* ------------------------------------------------------------------ Eingabe */
body.tc-redesign.tc-max #floatingChatContainer .floating-chat-footer {
  position: relative;
  flex: none;
  padding: 10px !important;
  background: var(--mx-surface) !important;
  border-top: 1px solid var(--mx-line-soft) !important;
  box-shadow: none !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-input-capsule {
  display: flex;
  align-items: center;
  gap: 2px !important;
  min-height: 46px;
  padding: 4px 5px 4px 4px !important;
  background: var(--mx-bg) !important;
  border: 1px solid var(--mx-line) !important;
  border-radius: 13px !important;
  box-shadow: none !important;
  cursor: text;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-input-capsule:focus-within {
  border-color: rgba(181, 140, 255, .75) !important;
  box-shadow: 0 0 0 3px rgba(181, 140, 255, .16) !important;
}
body.tc-redesign.tc-max #floatingChatContainer #liveChatInput {
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  margin: 0 !important;
  padding: 0 6px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--mx-text) !important;
  font: 500 15px/1.2 var(--mx-font-body) !important;
  cursor: text !important;
}
body.tc-redesign.tc-max #floatingChatContainer #liveChatInput::placeholder { color: var(--mxc-hint); opacity: 1; }
body.tc-redesign.tc-max #floatingChatContainer #liveChatInput:focus,
body.tc-redesign.tc-max #floatingChatContainer #liveChatInput:focus-visible { outline: none !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-input-addon-btn {
  align-items: center;
  justify-content: center;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  flex: none;
  padding: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--mx-text-2) !important;
  font-size: 0 !important;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-input-addon-btn:not(#chatRainQuickBtn) { display: inline-flex; }
body.tc-redesign.tc-max #floatingChatContainer .chat-input-addon-btn:hover { background: var(--mx-raised) !important; color: var(--mx-text) !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-input-addon-btn svg { width: 21px; height: 21px; }
/* Sticker & GIFs: Symbol und „GIF“ als Amethyst-Pille, damit die Bibliothek auffällt */
body.tc-redesign.tc-max #floatingChatContainer .chat-input-addon-btn.mx-chat-gif-btn:not(#chatRainQuickBtn) {
  gap: 5px;
  width: auto !important;
  padding: 0 9px 0 7px !important;
  background: var(--mxc-ame-soft) !important;
  color: var(--mxc-ame-hi) !important;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-input-addon-btn.mx-chat-gif-btn:hover { background: rgba(181, 140, 255, .26) !important; color: #fff !important; }
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-gif-btn svg { flex: none; }
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-gif-btn span { font: 800 11.5px/1 var(--mx-font-body); letter-spacing: .04em; }
@container mxchat (max-width: 370px) {
  body.tc-redesign.tc-max #floatingChatContainer .chat-input-addon-btn.mx-chat-gif-btn:not(#chatRainQuickBtn) { padding: 0 !important; }
  body.tc-redesign.tc-max #floatingChatContainer .mx-chat-gif-btn span { display: none; }
}
/* Geöffnete Auswahl markiert ihren Knopf */
body.tc-redesign.tc-max #floatingChatContainer:has(#chatEmojiPopover:not([hidden])) .chat-input-addon-btn[aria-controls="chatEmojiPopover"],
body.tc-redesign.tc-max #floatingChatContainer:has(#chatGifPopover:not([hidden])) .chat-input-addon-btn[aria-controls="chatGifPopover"] {
  background: var(--mxc-ame-soft) !important;
  color: var(--mx-amethyst) !important;
}
body.tc-redesign.tc-max #floatingChatContainer #chatRainQuickBtn { color: var(--mx-amethyst) !important; }
body.tc-redesign.tc-max #floatingChatContainer #liveChatSendBtn {
  display: grid;
  place-items: center;
  width: 38px !important;
  min-width: 38px !important;
  height: 34px !important;
  flex: none;
  margin: 0 0 2px 2px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, var(--mx-gold-hi), #f6b21f) !important;
  color: var(--mx-gold-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 var(--mx-gold-lo) !important;
  font-size: 16px !important;
  transform: none !important;
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer #liveChatSendBtn:hover { filter: brightness(1.05); }
body.tc-redesign.tc-max #floatingChatContainer #liveChatSendBtn:active { transform: translateY(2px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 0 var(--mx-gold-lo) !important; }
/* Leeres Feld: Senden als ruhiger Stein-Block, erst mit Text der Gold-Block */
body.tc-redesign.tc-max #floatingChatContainer .chat-input-capsule:has(#liveChatInput:placeholder-shown) #liveChatSendBtn:not(.is-locked) {
  background: var(--mx-raised) !important;
  color: var(--mx-text-3) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 #0b1222 !important;
  filter: none;
}
body.tc-redesign.tc-max #floatingChatContainer .tc-chat-helper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px 0 !important;
  color: var(--mxc-hint) !important;
  font: 500 12px/1.3 var(--mx-font-body) !important;
}
/* Aufgeräumt: Die Zeile unter der Eingabe erscheint erst, wenn die Nachricht fast voll ist (Zähler rechts) */
body.tc-redesign.tc-max #floatingChatContainer .tc-chat-helper[data-mode="user"] { justify-content: flex-end; }
body.tc-redesign.tc-max #floatingChatContainer .tc-chat-helper[data-mode="user"] .mx-chat-rules { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .tc-chat-helper[data-mode="user"]:not(:has(#tcChatCount:is(.is-near, .is-max))) { display: none; }
body.tc-redesign.tc-max #floatingChatContainer #tcChatCount { font-variant-numeric: tabular-nums; color: var(--mxc-hint); }
/* „Enter zum Senden“ nur mit Tastatur/Maus; auf Touch bleibt „Bleib fair“ */
@media (hover: none) {
  body.tc-redesign.tc-max #floatingChatContainer .mx-chat-key-hint { display: none; }
}
body.tc-redesign.tc-max #floatingChatContainer #tcChatCount.is-near { color: var(--mx-gold); }
body.tc-redesign.tc-max #floatingChatContainer #tcChatCount.is-max { color: #ff8d98; font-weight: 700; }

/* Vorschläge über der Eingabe: @Spieler (online + zuletzt aktiv) und :Kürzel */
body.tc-redesign.tc-max #floatingChatContainer .chat-suggest {
  position: absolute;
  z-index: 6;
  left: 12px;
  right: 12px;
  bottom: calc(100% - 4px);
  max-height: 264px;
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: var(--mx-raised);
  border: 1px solid var(--mx-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 -14px 32px -14px rgba(0, 0, 0, .9);
}
body.tc-redesign.tc-max #floatingChatContainer .chat-suggest[hidden] { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-suggest-head { padding: 5px 8px 7px; color: var(--mxc-hint); font: 700 11px/1 var(--mx-font-body); letter-spacing: .05em; text-transform: uppercase; }
body.tc-redesign.tc-max #floatingChatContainer .chat-suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  color: var(--mx-text);
  font: 600 14px/1 var(--mx-font-body);
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-suggest-item:hover { background: var(--mx-surface); }
body.tc-redesign.tc-max #floatingChatContainer .chat-suggest-item.is-active { background: var(--mxc-ame-soft); box-shadow: inset 0 0 0 1px var(--mxc-ame-line); color: #fff; }
body.tc-redesign.tc-max #floatingChatContainer .chat-suggest-avatar { width: 24px; height: 24px; flex: none; border-radius: 6px; background: var(--mx-surface); image-rendering: pixelated; }
body.tc-redesign.tc-max #floatingChatContainer .chat-suggest-emoji { width: 24px; flex: none; font-size: 20px; text-align: center; }
/* Antwortleiste über der Eingabe (× oder Esc bricht ab) */
body.tc-redesign.tc-max #floatingChatContainer .chat-replybar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 6px 5px 6px 12px;
  border-radius: 12px;
  background: rgba(181, 140, 255, .08);
  border: 1px solid var(--mxc-ame-line);
  box-shadow: inset 3px 0 0 var(--mx-amethyst);
}
body.tc-redesign.tc-max #floatingChatContainer .chat-replybar[hidden] { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-replybar-icon { display: grid; flex: none; color: var(--mx-amethyst); }
body.tc-redesign.tc-max #floatingChatContainer .chat-replybar-icon svg { width: 17px; height: 17px; }
body.tc-redesign.tc-max #floatingChatContainer .chat-replybar-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
body.tc-redesign.tc-max #floatingChatContainer .chat-replybar-label { color: var(--mx-text-2); font: 600 12px/1.25 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer .chat-replybar-name { color: var(--mxc-ame-hi); font-weight: 800; }
body.tc-redesign.tc-max #floatingChatContainer .chat-replybar-snippet { overflow: hidden; color: var(--mx-text); font: 500 13px/1.3 var(--mx-font-body); text-overflow: ellipsis; white-space: nowrap; }
body.tc-redesign.tc-max #floatingChatContainer .chat-replybar-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--mx-text-2);
  cursor: pointer;
}
body.tc-redesign.tc-max #floatingChatContainer .chat-replybar-close:hover { background: var(--mx-raised); color: var(--mx-text); }
body.tc-redesign.tc-max #floatingChatContainer .chat-replybar-close svg { width: 16px; height: 16px; }
/* Stummgeschaltet: Hinweis mit Restzeit, Senden ruht (Text darf vorbereitet werden) */
body.tc-redesign.tc-max #floatingChatContainer .chat-mute-note {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 77, 94, .08);
  border: 1px solid rgba(255, 77, 94, .35);
  color: #ffb1b8;
  font: 600 13px/1.35 var(--mx-font-body);
}
body.tc-redesign.tc-max #floatingChatContainer .chat-mute-note[hidden] { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-mute-note svg { width: 17px; height: 17px; flex: none; }
body.tc-redesign.tc-max #floatingChatContainer .chat-input-capsule.is-muted #liveChatSendBtn { opacity: .45; filter: grayscale(.7); cursor: not-allowed; }
/* Senden läuft: Knopf gesperrt, kleiner Kreis statt Pfeil */
body.tc-redesign.tc-max #floatingChatContainer #liveChatSendBtn { position: relative; }
body.tc-redesign.tc-max #floatingChatContainer #liveChatSendBtn.is-sending { cursor: progress; }
body.tc-redesign.tc-max #floatingChatContainer #liveChatSendBtn.is-sending svg { opacity: .2; }
body.tc-redesign.tc-max #floatingChatContainer #liveChatSendBtn.is-sending::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
}

/* Gast: Eingabe weg – eine Zeile mit Einladung und Knopf */
body.tc-redesign.tc-max #floatingChatContainer .floating-chat-footer:has(.chat-input-locked) { padding: 10px 12px !important; }
body.tc-redesign.tc-max #floatingChatContainer .chat-input-capsule.chat-input-locked { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .floating-chat-footer:has(.chat-input-locked) :is(.chat-replybar, .chat-mute-note, .chat-suggest) { display: none; }
body.tc-redesign.tc-max #floatingChatContainer .tc-chat-helper:has(.mx-chat-guest) { align-items: center; gap: 10px; padding: 0 !important; }
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-guest { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; text-align: left; }
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-guest-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: rgba(255, 201, 60, .12);
  color: var(--mx-gold);
}
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-guest-icon svg { width: 17px; height: 17px; }
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-guest strong { display: block; color: var(--mx-text); font: 700 13.5px/1.25 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer .mx-chat-guest small { display: block; margin-top: 1px; color: var(--mx-text-2); font: 500 12px/1.3 var(--mx-font-body); }
body.tc-redesign.tc-max #floatingChatContainer .tc-chat-helper:has(.mx-chat-guest) > .mx-btn { flex: none; width: auto; min-height: 38px; padding: 0 16px; font-size: 14px; }

/* ------------------------------------------------------------------ Handy: Vollbild-Blatt (auch quer) */
@media (max-width: 600px), (max-height: 520px) {
  body.tc-redesign.tc-max :is(#floatingChatContainer, #globalRainFloatingBanner) { --mxc-fab: 52px; --mxc-edge: 14px; }
  body.tc-redesign.tc-max #floatingChatContainer {
    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn { border-radius: 16px !important; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-btn-icon svg { width: 23px; height: 23px; }
  body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn:is(:hover, :focus-visible) { padding-left: 0 !important; }
  body.tc-redesign.tc-max #floatingChatContainer #floatingChatBtn .chat-btn-label { display: none; }
  body.tc-redesign.tc-max #floatingChatContainer:has(#floatingChatWidget:not([hidden])) #floatingChatBtn { display: none !important; }
  body.tc-redesign.tc-max #floatingChatContainer #floatingChatWidget {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform-origin: 50% 100%;
  }
  body.tc-redesign.tc-max #floatingChatContainer .floating-chat-header { padding: calc(10px + env(safe-area-inset-top)) 12px 10px 14px !important; }
  body.tc-redesign.tc-max #floatingChatContainer .floating-chat-header-actions .chat-action-btn { width: 44px !important; height: 44px !important; border-radius: 12px !important; }
  body.tc-redesign.tc-max #floatingChatContainer #chatRainHeaderBtn { width: 44px; height: 44px; min-width: 44px; border-radius: 12px !important; }
  body.tc-redesign.tc-max #floatingChatContainer .floating-chat-footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
  body.tc-redesign.tc-max #floatingChatContainer .floating-chat-footer:has(.chat-input-locked) { padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
  /* 16 px verhindert das Zoomen von iOS beim Fokus */
  body.tc-redesign.tc-max #floatingChatContainer #liveChatInput,
  body.tc-redesign.tc-max #floatingChatContainer #chatCustomMediaUrl { font-size: 16px !important; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-emoji-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-auto-rows: 44px; }
  body.tc-redesign.tc-max #floatingChatContainer .emoji-chip { aspect-ratio: auto; min-height: 44px; }
  /* Touch-Ziele ≥ 44 px (Spezifikation) */
  body.tc-redesign.tc-max #floatingChatContainer .chat-input-capsule { min-height: 58px; padding: 6px 6px 6px 4px !important; gap: 0 !important; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-input-addon-btn:not(#chatRainQuickBtn) { width: 44px !important; min-width: 44px !important; height: 44px !important; }
  body.tc-redesign.tc-max #floatingChatContainer #liveChatSendBtn { width: 48px !important; min-width: 48px !important; height: 44px !important; margin: 0 0 2px 4px !important; }
  body.tc-redesign.tc-max #floatingChatContainer #liveChatInput { height: 44px; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-pinned-text { -webkit-line-clamp: 2; }
  /* Aktionen nach Antippen: größere Ziele, Leiste über der Zeile */
  body.tc-redesign.tc-max #floatingChatContainer .chat-msg-tools { top: -22px; padding: 3px; border-radius: 14px; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-tool { min-width: 38px; height: 38px; border-radius: 10px; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-tool-emoji { width: 36px; font-size: 19px; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-picked .chat-msg-bubble { box-shadow: 0 0 0 1.5px rgba(148, 170, 220, .35) !important; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-react-chip { height: 30px; padding: 0 10px 0 8px; }
  body.tc-redesign.tc-max #floatingChatContainer :is(.chat-replybar-close, .chat-pinned-btn) { width: 40px; height: 40px; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-suggest-item { min-height: 44px; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-msg-row.is-me .chat-msg-content { padding-left: 28px; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-popover-header .close-btn { width: 44px !important; height: 44px !important; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-popover-header { margin-bottom: 6px !important; }
  body.tc-redesign.tc-max #floatingChatContainer .chat-header-title-wrap { gap: 0; }
  body.tc-redesign.tc-max #floatingChatContainer #chatOnlineBadge { position: relative; min-height: 28px; padding: 0 2px !important; }
  /* unsichtbare Trefferfläche: 28 + 2 × 8 = 44 px hoch */
  body.tc-redesign.tc-max #floatingChatContainer #chatOnlineBadge::before { content: ""; position: absolute; inset: -8px -12px; }
  body.tc-redesign.tc-max #floatingChatContainer #tcChatLatest { height: 40px; margin-top: -40px !important; }
  body.tc-redesign.tc-max #floatingChatContainer .gif-url-input-row .btn,
  body.tc-redesign.tc-max #floatingChatContainer #chatCustomMediaUrl { min-height: 44px; height: 44px; }
}

/* Wenig Höhe (Handy quer): Geldregen-Karte als eine Zeile, damit Nachrichten Platz behalten */
@media (max-height: 520px) {
  body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner { flex-direction: row; align-items: center !important; gap: 10px; margin: 8px 10px 0 !important; padding: 8px 8px 8px 10px !important; }
  body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner .chat-rain-info { align-items: center; }
  body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner .rain-drop-icon { width: 34px; height: 34px; }
  body.tc-redesign.tc-max #floatingChatContainer #chatRainBanner :is(.rain-progress-bar-wrap, .mx-rain-note) { display: none; }
  body.tc-redesign.tc-max #floatingChatContainer #chatRainSender { font-size: 14px !important; }
  body.tc-redesign.tc-max #floatingChatContainer .floating-chat-header { padding-top: calc(8px + env(safe-area-inset-top)) !important; padding-bottom: 8px !important; }
}

/* ------------------------------------------------------------------ Chat im Spiel
   Ab Tablet dockt der Chat in der Bühne links neben dem Einsatz-Panel an (Lage aus js/redesign.js:
   --mxc-g-* = gemessenes #gameBoard). Das Spielfeld rückt nach links und skaliert sich ein –
   Einsatz, Chips und Start bleiben frei. Auf dem Handy bleibt es das Vollbild-Blatt. */
@media (min-width: 601px) and (min-height: 521px) {
  body.tc-redesign.tc-max.tc-game-open #floatingChatContainer {
    top: calc(var(--mxc-g-top, 80px) + 12px) !important;
    right: calc(var(--mxc-g-right, 320px) + 12px) !important;
    bottom: calc(var(--mxc-g-bottom, 66px) + 12px) !important;
  }
  body.tc-redesign.tc-max.tc-game-open #floatingChatContainer #floatingChatWidget {
    width: var(--mxc-game-chat-w, 360px) !important;
    max-width: none !important;
    height: 100% !important;
    border-radius: 18px !important;
    transform-origin: 100% 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .06),
      0 24px 50px -20px rgba(0, 0, 0, .85),
      0 0 0 1px rgba(0, 0, 0, .35) !important;
  }
  body.tc-redesign.tc-max.tc-game-open:has(#floatingChatWidget:not([hidden])) #gameOverlay #gameBoard {
    padding-right: calc(var(--mxc-game-chat-w, 360px) + 40px) !important;
  }
}
/* Chat-Knopf im Spielkopf: ungelesene Nachrichten als Redstone-Zähler, laufender Geldregen als Diamant-Punkt */
body.tc-redesign.tc-max #gameOverlay #tcGameChat { position: relative; overflow: visible !important; }
body.tc-redesign.tc-max #gameOverlay #tcGameChat[data-unread]::after,
body.tc-redesign.tc-max #gameOverlay #tcGameChat[data-rain]::after {
  position: absolute;
  top: -6px;
  right: -6px;
  box-sizing: border-box;
  pointer-events: none;
  border: 2px solid var(--mx-bg-2);
  border-radius: 999px;
}
body.tc-redesign.tc-max #gameOverlay #tcGameChat[data-unread]::after {
  content: attr(data-unread);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--mx-redstone);
  color: #fff;
  font: 800 11px/16px var(--mx-font-body);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
body.tc-redesign.tc-max #gameOverlay #tcGameChat[data-unread][data-mention]::after { background: var(--mx-gold); color: var(--mx-gold-ink); }
body.tc-redesign.tc-max #gameOverlay #tcGameChat[data-rain]:not([data-unread])::after {
  content: "";
  top: -4px;
  right: -4px;
  width: 13px;
  height: 13px;
  background: var(--mx-diamond);
}

/* Toasts (z. B. „Bitte anmelden“) bleiben über dem offenen Chat und über dem Geldregen-Hinweis (z-index 999999) sichtbar */
/* Sichtbarkeit der Geldregen-Karte nur über die Klasse .mx-rain-shown (app.js setRainCardShown) – nie [style] in :has():
   sonst prüft der Browser bei JEDER Inline-Stiländerung auf der Seite (Rad, Laufband, Rakete) große Teile neu → Lag. */
body.tc-redesign.tc-max:is(:has(#floatingChatWidget:not([hidden])), :has(#globalRainFloatingBanner.mx-rain-shown)) #toast { z-index: 2147483646 !important; }
/* Außerhalb des Spiels rückt die Meldung über die schmale Geldregen-Zeile (Rand 20 + Knopf 56 + 14 px),
   damit beide lesbar bleiben. Auf dem Handy liegt sie ohnehin darüber (max-overlays.css: 88 px). */
@media (min-width: 601px) and (min-height: 521px) {
  body.tc-redesign.tc-max:not(.tc-game-open):has(#globalRainFloatingBanner.mx-rain-shown:is(.mx-rain-compact, .mx-rain-done):not(.mx-rain-tucked)) #toast {
    bottom: calc(max(20px, env(safe-area-inset-bottom)) + 70px) !important;
  }
}

/* ==================================================================
   Geldregen-Hinweis (global)
   1. Ankündigung: Karte über dem Chat-Knopf (6 s oder bis zum ersten Scrollen).
   2. Danach schmale Zeile links neben dem Knopf (.mx-rain-compact, js/redesign.js) –
      „Einsammeln“ bleibt drin, Tippen auf die Zeile (.mx-rain-more) zeigt alle Details.
   3. Eingesammelt oder voll (.mx-rain-done, app.js): ebenfalls schmal.
   Die schmale Zeile taucht mit dem Knopf ab, wenn darunter ein Bedienelement liegt.
   JS schaltet style.display (flex/none), schreibt Texte und ersetzt className der Knöpfe.
   ================================================================== */
body.tc-redesign.tc-max #globalRainFloatingBanner {
  position: fixed;
  top: auto !important;
  left: auto !important;
  right: max(var(--mxc-edge), env(safe-area-inset-right)) !important;
  bottom: calc(max(var(--mxc-edge), env(safe-area-inset-bottom)) + var(--mxc-fab) + 14px) !important;
  width: min(400px, calc(100vw - 2 * var(--mxc-edge))) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transform-origin: calc(100% - 28px) calc(100% + 30px);
  z-index: 999999;
  background: linear-gradient(150deg, rgba(181, 140, 255, .22), rgba(91, 231, 240, .07) 65%), #121a30 !important;
  border: 1px solid var(--mxc-ame-line) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -2px 0 rgba(0, 0, 0, .3),
    0 28px 56px -20px rgba(0, 0, 0, .9),
    0 0 0 1px rgba(0, 0, 0, .45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation-name: none !important;
  color: var(--mx-text);
  font-family: var(--mx-font-body);
}
/* Dialoge (Tickets, Profil, Rangliste …) nicht überdecken – im Spiel bleibt er sichtbar */
body.tc-redesign.tc-max:has(.overlay:not(#gameOverlay):not([hidden])) #globalRainFloatingBanner { visibility: hidden; }
/* Solange die Karte sichtbar ist, braucht der Chat-Knopf keinen eigenen Hinweis */
body.tc-redesign.tc-max:has(#globalRainFloatingBanner.mx-rain-shown) #floatingChatContainer .mx-chat-rain-flag { visibility: hidden; }

body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px !important;
}
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(91, 231, 240, .2), rgba(181, 140, 255, .16)) !important;
  border: 1px solid var(--mxc-dia-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 rgba(0, 0, 0, .35) !important;
  color: var(--mx-diamond);
  filter: none !important;
}
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-icon { display: grid; font-size: 0; background: none !important; box-shadow: none !important; filter: none !important; }
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-icon svg { width: 24px; height: 24px; }
/* Ring: pulsiert beim Start dreimal (Bewegungsblock unten), steht danach ruhig */
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-ping {
  display: block !important;
  position: absolute;
  inset: -5px;
  border-radius: 17px;
  border: 2px solid var(--mxc-dia-line);
  opacity: .55;
  animation-name: none !important;
}
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 26px;
}
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
body.tc-redesign.tc-max #globalRainFloatingBanner #globalRainSender {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--mx-text) !important;
  font: 700 15.5px/1.25 var(--mx-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
}
body.tc-redesign.tc-max #globalRainFloatingBanner #globalRainTimer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  padding: 4px 8px 4px 6px !important;
  border-radius: 7px !important;
  background: var(--mxc-dia-soft) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--mx-diamond) !important;
  font: 700 12.5px/1 var(--mx-font-body) !important;
  font-variant-numeric: tabular-nums;
}
body.tc-redesign.tc-max #globalRainFloatingBanner #globalRainTimer::before {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-sub-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  color: var(--mx-text-2) !important;
  font: 500 13px/1.4 var(--mx-font-body) !important;
}
body.tc-redesign.tc-max #globalRainFloatingBanner #globalRainAmountText { color: var(--mx-gold) !important; font-weight: 700 !important; text-shadow: none !important; }
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-sep { display: none; }
body.tc-redesign.tc-max #globalRainFloatingBanner #globalRainSlotsText { white-space: nowrap; }
body.tc-redesign.tc-max #globalRainFloatingBanner #globalRainMessageRow {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  color: var(--mx-text) !important;
  font-style: italic;
  font-weight: 500 !important;
}
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-progress {
  width: 100%;
  max-width: none !important;
  height: 6px !important;
  margin-top: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .08) !important;
  overflow: hidden;
}
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mx-amethyst), var(--mx-diamond)) !important;
  box-shadow: none !important;
}
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-actions { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; }
/* Knöpfe liegen über dem Details-Knopf der schmalen Zeile */
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-actions > :not(.global-rain-close-btn) { position: relative; z-index: 1; }
body.tc-redesign.tc-max #globalRainFloatingBanner #globalRainClaimBtn { order: 1; flex: 1 1 auto; min-height: 44px; font-size: 15px !important; }
body.tc-redesign.tc-max #globalRainFloatingBanner .mx-rain-chat-btn { order: 2; }
body.tc-redesign.tc-max #globalRainFloatingBanner #globalRainCancelBtn { order: 3; min-height: 44px; }
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-close-btn { order: 4; }
body.tc-redesign.tc-max #globalRainFloatingBanner :is(.mx-rain-chat-btn, .global-rain-close-btn) {
  display: grid;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--mx-line) !important;
  color: var(--mx-text-2) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: pointer;
}
body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-close-btn {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 8px;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border-color: transparent !important;
}
body.tc-redesign.tc-max #globalRainFloatingBanner :is(.mx-rain-chat-btn, .global-rain-close-btn):hover { background: var(--mx-raised) !important; color: var(--mx-text) !important; border-color: var(--mx-line) !important; }
body.tc-redesign.tc-max #globalRainFloatingBanner :is(.mx-rain-chat-btn, .global-rain-close-btn) svg { width: 18px; height: 18px; }
/* Details-Knopf: nur in der schmalen Zeile, liegt unter den Aktionen über Symbol und Text */
body.tc-redesign.tc-max #globalRainFloatingBanner .mx-rain-more {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
}
body.tc-redesign.tc-max #globalRainFloatingBanner .mx-rain-more:hover { background: rgba(255, 255, 255, .03); }
body.tc-redesign.tc-max #globalRainFloatingBanner .mx-rain-more:focus-visible { outline-offset: -3px !important; }

/* ---------- Schmale Zeile (.mx-rain-compact / .mx-rain-done): in der Reihe des Chat-Knopfs */
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) {
  bottom: max(var(--mxc-edge), env(safe-area-inset-bottom)) !important;
  right: calc(max(var(--mxc-edge), env(safe-area-inset-right)) + var(--mxc-fab) + 12px) !important;
  width: auto !important;
  max-width: min(440px, calc(100vw - 2 * var(--mxc-edge) - var(--mxc-fab) - 12px)) !important;
  min-height: var(--mxc-fab);
  border-radius: 16px !important;
  transform-origin: 100% 50%;
}
body.tc-redesign.tc-max #globalRainFloatingBanner.mx-rain-compact:not(.mx-rain-done) .mx-rain-more { display: block; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-inner {
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  min-height: calc(var(--mxc-fab) - 2px);
  padding: 6px 6px 6px 8px !important;
}
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) :is(.global-rain-icon-wrap, .global-rain-content) { pointer-events: none; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-icon-wrap { width: 38px; height: 38px; border-radius: 11px; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-ping { inset: -4px; border-radius: 14px; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-icon svg { width: 21px; height: 21px; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-content { gap: 2px; padding-right: 0; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-title-row { flex-wrap: nowrap; gap: 6px; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) #globalRainSender { min-width: 0; font-size: 14px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) #globalRainTimer { padding: 3px 6px 3px 5px !important; font-size: 12px !important; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-sub-row { font-size: 12.5px !important; line-height: 1.3 !important; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) #globalRainAmountText { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) :is(#globalRainSlotsText, #globalRainMessageRow, .global-rain-progress) { display: none !important; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-actions { flex: none; gap: 4px; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) #globalRainClaimBtn { flex: none; min-height: 42px; padding: 0 14px !important; font-size: 14px !important; }
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-close-btn { position: relative; top: auto; right: auto; z-index: 1; width: 40px !important; height: 42px !important; }
/* Chat-Knopf und Stoppen sind in der Zeile nicht nötig (Stoppen bleibt in der Chat-Karte). JS schaltet
   Stoppen per style.display – deshalb ohne display ausblenden. */
body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) :is(.mx-rain-chat-btn, #globalRainCancelBtn) {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  visibility: hidden;
}
/* Eingesammelt/voll: Status statt Betrag */
body.tc-redesign.tc-max #globalRainFloatingBanner.mx-rain-done :is(#globalRainTimer, .global-rain-sub-row) { display: none; }
body.tc-redesign.tc-max #globalRainFloatingBanner.mx-rain-done #globalRainClaimBtn { min-height: 34px; padding: 0 12px !important; font-size: 13px !important; }

/* ---------- Im Spiel: kein Chat-Knopf. Ab Tablet unten rechts in der Bühne (neben dem Einsatz-Panel) */
@media (min-width: 821px) {
  body.tc-redesign.tc-max.tc-game-open #globalRainFloatingBanner,
  body.tc-redesign.tc-max.tc-game-open #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) {
    right: calc(var(--mxc-g-right, 320px) + 14px) !important;
    bottom: calc(var(--mxc-g-bottom, 66px) + 14px) !important;
    max-width: min(440px, calc(var(--mxc-g-width, 1000px) - 28px)) !important;
  }
}
@media (min-width: 821px) {
  /* Läge die Zeile unten auf einem Bedienelement (z. B. „Spiel bewerten“), setzt js/redesign.js sie nach oben */
  body.tc-redesign.tc-max.tc-game-open #globalRainFloatingBanner.mx-rain-top:is(.mx-rain-compact, .mx-rain-done) {
    top: calc(var(--mxc-g-top, 80px) + 14px) !important;
    bottom: auto !important;
  }
}
/* Ausweichplatz: auf der Statuszeile unter dem Spielfeld, direkt über dem Einsatz-Panel – so breit wie das
   Spielfeld, damit kein angeschnittener Statustext daneben stehen bleibt (js/redesign.js misst --mxc-g-status =
   Abstand der Statuszeilen-Mitte zur Unterkante und --mxc-g-left; Zeile ≈ 56 px hoch) */
body.tc-redesign.tc-max.tc-game-open #globalRainFloatingBanner.mx-rain-low:is(.mx-rain-compact, .mx-rain-done) {
  top: auto !important;
  bottom: calc(var(--mxc-g-status, 40px) - 28px) !important;
  left: calc(var(--mxc-g-left, 0px) + 10px) !important;
  right: calc(var(--mxc-g-right, 0px) + 10px) !important;
  width: auto !important;
  max-width: none !important;
}
/* Nirgends frei (.mx-rain-away): ausblenden – der Diamant-Punkt am Chat-Knopf im Spielkopf zeigt den Regen weiter an.
   Gewinn-Tafel darunter (.mx-rain-yield): kurz ausblenden, bis die Tafel wieder weg ist. */
body.tc-redesign.tc-max.tc-game-open #globalRainFloatingBanner:is(.mx-rain-away, .mx-rain-yield):is(.mx-rain-compact, .mx-rain-done):not(:focus-within) {
  opacity: 0;
  pointer-events: none !important;
}
/* Handy und Tablet hochkant: unten im Spielfeld über der Statuszeile – oben liegen die Anzeigen des Spiels
   und die Meldungen, unten Einsatz und Start */
@media (max-width: 820px) {
  body.tc-redesign.tc-max.tc-game-open #globalRainFloatingBanner,
  body.tc-redesign.tc-max.tc-game-open #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) {
    top: auto !important;
    bottom: calc(var(--mxc-g-bottom, 240px) + 8px) !important;
    right: 10px !important;
  }
  body.tc-redesign.tc-max.tc-game-open #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) { left: auto !important; max-width: calc(100vw - 20px) !important; min-height: 0; }
  body.tc-redesign.tc-max.tc-game-open #globalRainFloatingBanner.mx-rain-top:is(.mx-rain-compact, .mx-rain-done) {
    top: calc(var(--mxc-g-top, 56px) + 10px) !important;
    bottom: auto !important;
  }
}

@media (max-width: 600px) {
  body.tc-redesign.tc-max #globalRainFloatingBanner {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    bottom: calc(var(--mxc-edge) + var(--mxc-fab) + 12px + env(safe-area-inset-bottom)) !important;
    border-radius: 16px !important;
  }
  body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-inner { padding: 12px !important; gap: 10px 12px; }
  body.tc-redesign.tc-max #globalRainFloatingBanner .global-rain-icon-wrap { width: 40px; height: 40px; border-radius: 12px; }
  /* Schmal: links bis an den Chat-Knopf; ohne Symbol, damit Name und Betrag Platz haben */
  body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) {
    left: 12px !important;
    right: calc(var(--mxc-edge) + var(--mxc-fab) + 10px) !important;
    bottom: calc(var(--mxc-edge) + env(safe-area-inset-bottom)) !important;
    max-width: none !important;
  }
  body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-inner { padding: 5px 5px 5px 12px !important; gap: 6px; }
  body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-icon-wrap { display: none; }
  body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) #globalRainTimer { display: none; }
  body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) :is(.mx-rain-per, .mx-claim-more) { display: none; }
  body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) #globalRainClaimBtn { padding: 0 12px !important; }
  body.tc-redesign.tc-max #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) .global-rain-close-btn { width: 36px !important; }
  body.tc-redesign.tc-max.tc-game-open #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) { left: 10px !important; right: 10px !important; }
}

/* ==================================================================
   Geldregen starten (#chatRainModal)
   ================================================================== */
body.tc-redesign.tc-max #chatRainModal {
  background: rgba(4, 7, 15, .86) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 16px;
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-sheet {
  width: min(560px, calc(100vw - 32px)) !important;
  max-width: 560px !important;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 24px 24px 22px !important;
  background: linear-gradient(180deg, rgba(181, 140, 255, .09), transparent 180px), var(--mx-surface) !important;
  border: 1px solid var(--mx-line) !important;
  border-radius: var(--mx-r-xl) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--mx-shadow-lift), 0 0 0 1px rgba(0, 0, 0, .4) !important;
  color: var(--mx-text);
  font-family: var(--mx-font-body);
  text-align: left;
  scrollbar-width: thin;
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-heading { display: flex; align-items: center; gap: 14px; }
body.tc-redesign.tc-max #chatRainModal #chatRainModalIcon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--mxc-ame-hi), #9a6ef4) !important;
  border: 0 !important;
  color: var(--mxc-ame-ink);
  font-size: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--mxc-ame-lo);
}
body.tc-redesign.tc-max #chatRainModal #chatRainModalIcon svg { width: 28px; height: 28px; }
body.tc-redesign.tc-max #chatRainModal #chatRainModalTitle {
  margin: 0 !important;
  font-family: var(--mx-font-display) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: .95 !important;
  letter-spacing: 0 !important;
  color: var(--mx-text) !important;
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-heading .close {
  display: grid;
  place-items: center;
  width: 40px !important;
  height: 40px !important;
  margin-left: auto;
  padding: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: 1px solid var(--mx-line) !important;
  color: var(--mx-text-2) !important;
  box-shadow: none !important;
  cursor: pointer;
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-heading .close:hover { background: var(--mx-raised) !important; color: var(--mx-text) !important; }
body.tc-redesign.tc-max #chatRainModal .tc-rain-intro { margin: 12px 0 2px !important; color: var(--mx-text-2) !important; font-size: 15px !important; line-height: 1.55 !important; max-width: 52ch; }
body.tc-redesign.tc-max #chatRainModal .tc-rain-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px !important;
  color: var(--mx-text) !important;
  font: 600 13.5px/1.2 var(--mx-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-label span { margin-left: 2px; color: var(--mxc-hint) !important; font-weight: 500 !important; }
body.tc-redesign.tc-max #chatRainModal .tc-rain-options .tc-rain-label { margin-top: 14px !important; }
body.tc-redesign.tc-max #chatRainModal #chatRainSourceGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.tc-redesign.tc-max #chatRainModal #chatRainSourceGrid label {
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px !important;
  border-radius: 14px !important;
  background: var(--mx-bg-2) !important;
  border: 1.5px solid var(--mx-line) !important;
  cursor: pointer;
}
body.tc-redesign.tc-max #chatRainModal #chatRainSourceGrid label:has(input:checked) {
  background: linear-gradient(180deg, rgba(181, 140, 255, .14), rgba(181, 140, 255, .06)), var(--mx-bg-2) !important;
  border-color: var(--mx-amethyst) !important;
  box-shadow: 0 0 0 3px rgba(181, 140, 255, .14);
}
body.tc-redesign.tc-max #chatRainModal #chatRainSourceGrid input { accent-color: var(--mx-amethyst); width: 16px; height: 16px; flex: none; }
body.tc-redesign.tc-max #chatRainModal #chatRainSourceGrid b { display: block; margin-bottom: 3px; color: var(--mx-text) !important; font-size: 14.5px !important; font-weight: 700 !important; }
body.tc-redesign.tc-max #chatRainModal #chatRainSourceGrid small { display: block; color: var(--mx-text-2) !important; font-size: 12.5px !important; line-height: 1.35; overflow-wrap: anywhere; }
body.tc-redesign.tc-max #chatRainModal #chatRainSourceGrid i { margin-left: auto; font-style: normal; font-size: 20px; }
body.tc-redesign.tc-max #chatRainModal #rainCreatorOnlyNotice {
  margin: 10px 0 0 !important;
  padding: 11px 13px !important;
  border-radius: 12px !important;
  background: var(--mxc-ame-soft) !important;
  border: 1px solid var(--mxc-ame-line) !important;
  color: var(--mx-text-2) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-presets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
body.tc-redesign.tc-max #chatRainModal .tc-rain-presets .btn {
  min-width: 0;
  min-height: 38px;
  padding: 0 4px !important;
  border-radius: 10px !important;
  background: var(--mx-raised) !important;
  border: 1px solid var(--mx-line-soft) !important;
  color: var(--mx-text) !important;
  font: 700 13.5px/1 var(--mx-font-body) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
  box-shadow: 0 2px 0 #0b1222 !important;
  transform: none !important;
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-presets .btn:hover { border-color: var(--mx-text-3) !important; }
body.tc-redesign.tc-max #chatRainModal :is(input[type="text"], select) {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px !important;
  border-radius: 12px !important;
  background-color: var(--mx-bg) !important;
  border: 1.5px solid var(--mx-line) !important;
  color: var(--mx-text) !important;
  font: 500 15px/1.2 var(--mx-font-body) !important;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .25) !important;
}
body.tc-redesign.tc-max #chatRainModal select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b5ce' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  cursor: pointer;
}
body.tc-redesign.tc-max #chatRainModal :is(input[type="text"], select):focus { border-color: rgba(255, 201, 60, .75) !important; outline: none; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .25), 0 0 0 3px rgba(255, 201, 60, .14) !important; }
body.tc-redesign.tc-max #chatRainModal input::placeholder { color: var(--mxc-hint); opacity: 1; }
body.tc-redesign.tc-max #chatRainModal #chatRainAmountInput {
  height: 58px !important;
  padding-right: 52px !important;
  font-family: var(--mx-font-display) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em !important;
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-amount > span { right: 16px; font-size: 20px; }
body.tc-redesign.tc-max #chatRainModal .tc-rain-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.tc-redesign.tc-max #chatRainModal #chatRainPreviewBox {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 18px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 14px !important;
  background: rgba(255, 201, 60, .06) !important;
  border: 1px solid rgba(255, 201, 60, .26) !important;
}
body.tc-redesign.tc-max #chatRainModal #chatRainPreviewBox > span { color: var(--mx-text-2) !important; font-size: 13px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600; }
body.tc-redesign.tc-max #chatRainModal #chatRainSharePreview {
  color: var(--mx-gold) !important;
  font-family: var(--mx-font-display) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-funding { margin: 0 !important; color: var(--mx-text-2) !important; font-size: 13px !important; line-height: 1.45 !important; }
body.tc-redesign.tc-max #chatRainModal .tc-rain-funding.tc-rain-error { color: #ff9aa4 !important; }
/* Aktionen bleiben beim Scrollen im Blatt sichtbar: feste Fußleiste mit Trennlinie statt Verlauf */
body.tc-redesign.tc-max #chatRainModal .tc-rain-sheet { scroll-padding-bottom: 96px; }
body.tc-redesign.tc-max #chatRainModal .tc-rain-footer {
  position: sticky;
  bottom: -22px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 18px -24px -22px;
  padding: 16px 24px 22px;
  background: var(--mx-surface);
  border-top: 1px solid var(--mx-line-soft);
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-footer .btn {
  min-height: 48px;
  padding: 0 20px !important;
  border-radius: 12px !important;
  font: 700 15px/1 var(--mx-font-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transform: none !important;
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-footer .btn.quiet {
  background: transparent !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1.5px var(--mx-line) !important;
  color: var(--mx-text) !important;
}
body.tc-redesign.tc-max #chatRainModal .tc-rain-footer .btn.quiet:hover { box-shadow: inset 0 0 0 1.5px var(--mx-text-3) !important; }
body.tc-redesign.tc-max #chatRainModal #chatRainSubmitBtn {
  border: 0 !important;
  background: linear-gradient(180deg, #ffd766, #f6b21f) !important;
  color: var(--mx-gold-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--mx-gold-lo), 0 14px 22px -12px rgba(0, 0, 0, .7) !important;
}
body.tc-redesign.tc-max #chatRainModal #chatRainSubmitBtn:active:not(:disabled) { transform: translateY(3px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 var(--mx-gold-lo) !important; }
body.tc-redesign.tc-max #chatRainModal #chatRainSubmitBtn:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }
@media (max-width: 600px) {
  body.tc-redesign.tc-max #chatRainModal { padding: 10px; }
  body.tc-redesign.tc-max #chatRainModal .tc-rain-sheet { width: calc(100vw - 20px) !important; max-height: calc(100dvh - 20px); padding: 18px 16px !important; border-radius: 18px !important; }
  body.tc-redesign.tc-max #chatRainModal #chatRainModalTitle { font-size: 28px !important; }
  body.tc-redesign.tc-max #chatRainModal #chatRainSourceGrid { grid-template-columns: 1fr; }
  body.tc-redesign.tc-max #chatRainModal .tc-rain-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.tc-redesign.tc-max #chatRainModal .tc-rain-footer { bottom: -18px; margin: 16px -16px -18px; padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); }
  body.tc-redesign.tc-max #chatRainModal .tc-rain-footer .btn { flex: 1; padding: 0 12px !important; }
}

/* ==================================================================
   Medien-Lightbox
   ================================================================== */
body.tc-redesign.tc-max #chatMediaLightboxModal {
  background: rgba(4, 7, 15, .9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 20px;
}
body.tc-redesign.tc-max #chatMediaLightboxModal .chat-lightbox-box {
  max-width: min(92vw, 1000px) !important;
  max-height: 90vh !important;
  padding: 12px !important;
  background: var(--mx-surface) !important;
  border: 1px solid var(--mx-line) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--mx-shadow-lift) !important;
  animation-name: none !important;
}
body.tc-redesign.tc-max #chatMediaLightboxModal .chat-lightbox-media-wrap { border-radius: 12px !important; background: var(--mx-bg); }
body.tc-redesign.tc-max #chatMediaLightboxModal .chat-lightbox-media-wrap img { display: block; max-height: calc(90vh - 96px) !important; border-radius: 12px !important; }
body.tc-redesign.tc-max #chatMediaLightboxModal .chat-lightbox-close {
  top: 20px !important;
  right: 20px !important;
  width: 40px !important;
  height: 40px !important;
  display: grid;
  place-items: center;
  border-radius: 12px !important;
  background: rgba(10, 16, 32, .86) !important;
  border: 1px solid var(--mx-line) !important;
  color: var(--mx-text) !important;
  box-shadow: none !important;
}
body.tc-redesign.tc-max #chatMediaLightboxModal .chat-lightbox-close:hover { background: var(--mx-raised) !important; }
body.tc-redesign.tc-max #chatMediaLightboxModal .chat-lightbox-close svg { width: 18px; height: 18px; }
body.tc-redesign.tc-max #chatMediaLightboxModal .chat-lightbox-footer { margin-top: 12px !important; justify-content: flex-end !important; }
body.tc-redesign.tc-max #chatMediaLightboxModal #chatLightboxDirectLink {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px !important;
  border-radius: 11px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1.5px var(--mx-line) !important;
  color: var(--mx-text) !important;
  font: 600 14px/1 var(--mx-font-body) !important;
  text-decoration: none !important;
  transform: none !important;
}
body.tc-redesign.tc-max #chatMediaLightboxModal #chatLightboxDirectLink:hover { box-shadow: inset 0 0 0 1.5px var(--mx-text-3) !important; }

/* ==================================================================
   Bewegung – nur mit prefers-reduced-motion: no-preference,
   Longhands (die Pause bei .tc-page-idle bleibt wirksam)
   ================================================================== */
@keyframes mxChatOpen {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes mxChatSheet {
  from { opacity: .4; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
@keyframes mxChatMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes mxChatBadgePop {
  0% { transform: scale(.3); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes mxChatRainRing {
  0% { transform: scale(1); opacity: .95; }
  100% { transform: scale(1.32); opacity: 0; }
}
/* translate statt transform: die Karte trägt transform:none !important gegen Altschichten */
@keyframes mxChatRainIn {
  from { opacity: 0; translate: 0 26px; }
  to { opacity: 1; translate: none; }
}
@keyframes mxChatRainSettle {
  from { opacity: 0; translate: 14px 0; }
  to { opacity: 1; translate: none; }
}
@keyframes mxChatFlash {
  0%, 45% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes mxChatToolsIn {
  from { opacity: 0; translate: 0 4px; }
  to { opacity: 1; translate: none; }
}
@keyframes mxChatSpin {
  to { rotate: 360deg; }
}
@keyframes mxChatDot {
  0%, 80%, 100% { transform: translateY(0); opacity: .45; }
  40% { transform: translateY(-5px); opacity: 1; }
}

@media all {
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer #floatingChatBtn {
    transition: transform var(--mx-fast) var(--mx-ease), translate var(--mx-mid) var(--mx-ease), opacity var(--mx-mid) var(--mx-ease), box-shadow var(--mx-fast) var(--mx-ease), filter var(--mx-fast) var(--mx-ease), padding var(--mx-mid) var(--mx-ease) !important;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer .chat-btn-label {
    transition: max-width var(--mx-mid) var(--mx-ease), opacity var(--mx-fast) var(--mx-ease), margin var(--mx-mid) var(--mx-ease);
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer #floatingChatWidget:not([hidden]) {
    animation-name: mxChatOpen !important;
    animation-duration: 280ms !important;
    animation-timing-function: var(--mx-ease-spring) !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: both !important;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer .chat-msg-row.tc-chat-enter {
    animation-name: mxChatMsgIn !important;
    animation-duration: 240ms !important;
    animation-timing-function: var(--mx-ease) !important;
    animation-iteration-count: 1 !important;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer #chatUnreadBadge:not([hidden]) {
    animation-name: mxChatBadgePop !important;
    animation-duration: 320ms !important;
    animation-timing-function: var(--mx-ease-spring) !important;
    animation-iteration-count: 1 !important;
  }
  /* Start eines Geldregens: der Ring pulsiert dreimal, danach steht er ruhig (kein Dauer-Blinken) */
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer #floatingChatBtn.has-active-rain::after,
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #globalRainFloatingBanner .global-rain-ping {
    animation-name: mxChatRainRing !important;
    animation-duration: 1.8s !important;
    animation-timing-function: var(--mx-ease) !important;
    animation-iteration-count: 3 !important;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #globalRainFloatingBanner {
    animation-name: mxChatRainIn !important;
    animation-duration: 420ms !important;
    animation-timing-function: var(--mx-ease-spring) !important;
    animation-iteration-count: 1 !important;
    transition: opacity var(--mx-mid) var(--mx-ease) !important;
  }
  /* Wechsel zur schmalen Zeile: kurz aus Richtung Chat-Knopf einblenden */
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #globalRainFloatingBanner:is(.mx-rain-compact, .mx-rain-done) {
    animation-name: mxChatRainSettle !important;
    animation-duration: 260ms !important;
    animation-timing-function: var(--mx-ease) !important;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer .mx-chat-loader i {
    animation-name: mxChatDot !important;
    animation-duration: 1.1s !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: ease-in-out !important;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer .mx-chat-loader i:nth-child(2) { animation-delay: .15s !important; }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer .mx-chat-loader i:nth-child(3) { animation-delay: .3s !important; }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer .chat-msg-row.is-flash::before {
    animation: mxChatFlash 1.6s var(--mx-ease) both;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer .chat-msg-tools {
    animation: mxChatToolsIn 140ms var(--mx-ease) both;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer #liveChatSendBtn.is-sending::after {
    animation: mxChatSpin .7s linear infinite;
  }
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer .chat-tool-emoji:hover { transform: scale(1.14); }
}
@media (max-width: 600px) {
  body.tc-redesign.tc-max:not(.tc-reduced-motion) #floatingChatContainer #floatingChatWidget:not([hidden]) {
    animation-name: mxChatSheet !important;
    animation-duration: 300ms !important;
    animation-timing-function: var(--mx-ease) !important;
  }
}