/* BlockBande Bruno – Chat-Fenster in der neuen Website-Designsprache (graphit, eckig, feine Linien, Knopf „Tastenkante“).
   Vorlage: Design-Leinwand, Zeile „Bruno-Chat – vorher und neu“. Hell/dunkel wie die Seite (body.bb-neu + data-bbk-theme),
   auf Seiten im alten Stil immer dunkel. Am PC Fenster unten rechts, auf dem Handy über die ganze Seite. */

.bbb {
	--bbb-bg: #0e0f12;
	--bbb-top: #0a0b0d;
	--bbb-card: #16181d;
	--bbb-field: #0b0c0f;
	--bbb-line: #24272f;
	--bbb-text: #c9cdd6;
	--bbb-strong: #ffffff;
	--bbb-muted: #7d8494;
	--bbb-accent: #2a9df4;
	--bbb-accent-edge: #17669f;
	--bbb-outline: #000000;
	--bbb-shadow: #000000;
	--bbb-link: #4aa8f5;
	--bbb-chip: #13263a;
	--bbb-ok: #2fd36b;
	--bbb-ok-ring: rgba(47, 211, 107, 0.25);
	--bbb-cmd: #3ee07a;
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 1000;
	font: 600 14.5px/1.5 "Nunito", system-ui, sans-serif;
	color: var(--bbb-text);
}

/* Heller Modus nur auf Seiten im neuen Design (gleiche Regeln wie Kopf/Fuß des Themes). */
/* Dunkel ist Standard (Florian 22.10.2026): hell nur nach manuellem Umschalten. */
:root[data-bbk-theme="light"] body.bb-neu .bbb { --bbb-bg: #eef0f3; --bbb-top: #ffffff; --bbb-card: #ffffff; --bbb-field: #ffffff; --bbb-line: #d8dbe2; --bbb-text: #2a2f3a; --bbb-strong: #12141a; --bbb-muted: #6b7280; --bbb-accent: #1d8ae6; --bbb-accent-edge: #0f5c9e; --bbb-outline: #12141a; --bbb-shadow: rgba(18, 20, 26, 0.14); --bbb-link: #1570c2; --bbb-chip: #e3eefb; --bbb-ok: #22c35e; --bbb-ok-ring: rgba(34, 195, 94, 0.25); --bbb-cmd: #11823f; }

.bbb *, .bbb *::before, .bbb *::after { box-sizing: border-box; }
.bbb button { font-family: inherit; }
.bbb .bbb-ln { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.bbb.is-pause .bbb-launcher__dot { background: #f5b301; }
.bbb.is-pause .bbb-head__text i { background: #f5b301; box-shadow: 0 0 0 3px rgba(245, 179, 1, 0.25); }

/* Startknopf – immer dunkel wie ein Spiel-HUD */
.bbb-launcher { position: relative; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px 0 6px; border: 0; background: #12141a; color: #fff; cursor: pointer; text-align: left; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 0 #000, 6px 8px 18px rgba(0, 0, 0, 0.35); transition: transform 0.05s, box-shadow 0.05s; }
.bbb-launcher:hover { filter: brightness(1.15); }
.bbb-launcher:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 0 #000, 4px 4px 10px rgba(0, 0, 0, 0.3); }
.bbb-launcher:focus-visible { outline: 2px solid var(--bbb-accent); outline-offset: 3px; }
.bbb-launcher img { width: 44px; height: 44px; border: 1px solid #2c3039; background: #1b2a4a; object-fit: cover; }
.bbb-launcher__dot { position: absolute; left: 40px; top: 6px; width: 10px; height: 10px; background: var(--bbb-ok); border: 2px solid #12141a; }
.bbb-launcher__label { font: 400 18px/1.05 "Lilita One", "Nunito", sans-serif; letter-spacing: 0.01em; }
.bbb-launcher__label small { display: block; font: 800 11px/1.3 "Nunito", sans-serif; color: #9aa1b0; letter-spacing: 0.02em; }
.bbb.is-open .bbb-launcher { display: none; }

/* Begrüßung einmal nach 20 s */
.bbb-teaser { position: absolute; right: 0; bottom: 70px; width: 270px; padding: 12px 34px 12px 14px; background: var(--bbb-card); border: 1px solid var(--bbb-line); box-shadow: 4px 4px 0 var(--bbb-shadow); color: var(--bbb-text); font-size: 14px; line-height: 1.45; cursor: pointer; animation: bbb-pop 0.25s ease-out; }
.bbb-teaser b { color: var(--bbb-strong); font-weight: 900; }
.bbb-teaser__close { position: absolute; top: 2px; right: 2px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid transparent; background: none; color: var(--bbb-muted); cursor: pointer; padding: 0; }
.bbb-teaser__close:hover { border-color: var(--bbb-line); color: var(--bbb-strong); }
.bbb-teaser__close .bbb-ln { width: 14px; height: 14px; }
.bbb-teaser[hidden] { display: none; }
@keyframes bbb-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Fenster */
.bbb-panel { display: flex; flex-direction: column; width: 384px; height: min(600px, calc(100vh - 56px)); overflow: hidden; background: var(--bbb-card); border: 1px solid var(--bbb-line); box-shadow: 6px 6px 0 var(--bbb-shadow); animation: bbb-pop 0.2s ease-out; }
.bbb-panel[hidden] { display: none; }
.bbb-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; background: var(--bbb-top); border-bottom: 1px solid var(--bbb-line); }
.bbb-head__ava { width: 38px; height: 38px; flex: none; border: 1px solid var(--bbb-line); background: #1b2a4a; object-fit: cover; }
.bbb-head__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bbb-head__text strong { font: 400 19px/1.05 "Lilita One", "Nunito", sans-serif; color: var(--bbb-strong); }
.bbb-head__text span { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; color: var(--bbb-muted); }
.bbb-head__text i { width: 8px; height: 8px; background: var(--bbb-ok); box-shadow: 0 0 0 3px var(--bbb-ok-ring); }
.bbb-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; padding: 0; border: 1px solid transparent; background: none; color: var(--bbb-strong); cursor: pointer; }
.bbb-icon:hover { border-color: var(--bbb-line); }
.bbb-icon:focus-visible { outline: 2px solid var(--bbb-accent); outline-offset: 1px; }

.bbb-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; background: var(--bbb-bg); overscroll-behavior: contain; scrollbar-width: thin; }
.bbb-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.bbb-ava { flex: none; width: 28px; height: 28px; border: 1px solid var(--bbb-line); background: #1b2a4a; object-fit: cover; }
.bbb-bubble { min-width: 0; padding: 9px 12px; background: var(--bbb-card); border: 1px solid var(--bbb-line); color: var(--bbb-text); overflow-wrap: anywhere; }
.bbb-bubble strong { color: var(--bbb-strong); font-weight: 900; }
.bbb-bubble a { color: var(--bbb-link); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.bbb-me { align-self: flex-end; max-width: 82%; padding: 9px 12px; background: var(--bbb-accent); color: #fff; font-weight: 700; box-shadow: 0 2px 0 var(--bbb-accent-edge); overflow-wrap: anywhere; }
.bbb-cmd { position: relative; padding: 1px 6px; border: 1px solid var(--bbb-line); background: var(--bbb-field); color: var(--bbb-cmd); font: 700 13px ui-monospace, "SF Mono", Menlo, monospace; white-space: nowrap; cursor: copy; }
.bbb-cmd.is-copied::after { content: "Kopiert ✓"; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 2px 6px; background: var(--bbb-strong); color: var(--bbb-bg); font: 900 11px "Nunito", system-ui, sans-serif; white-space: nowrap; }
.bbb-ticket { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 9px; border: 1px solid var(--bbb-line); background: var(--bbb-bg); color: var(--bbb-link) !important; font-size: 13px; font-weight: 800; text-decoration: none !important; }
.bbb-ticket::after { content: "›"; margin-left: auto; }
.bbb-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-left: 36px; }
.bbb-chip { min-height: 34px; padding: 6px 12px; border: 1px solid var(--bbb-accent); background: var(--bbb-chip); color: var(--bbb-strong); font: 800 13.5px "Nunito", system-ui, sans-serif; text-align: left; cursor: pointer; }
.bbb-chip:hover { background: var(--bbb-accent); color: #fff; }
.bbb-dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.bbb-dots i { width: 7px; height: 7px; background: var(--bbb-muted); animation: bbb-dot 1s infinite ease-in-out; }
.bbb-dots i:nth-child(2) { animation-delay: 0.15s; }
.bbb-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bbb-dot { 0%, 60%, 100% { opacity: 0.5; transform: none; } 30% { opacity: 1; transform: translateY(-4px); } }

/* Pause (Tagesbudget aufgebraucht) */
.bbb-pause { margin: auto 0; padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: var(--bbb-card); border: 1px solid var(--bbb-line); }
.bbb-pause img { width: 72px; height: 72px; border: 1px solid var(--bbb-line); background: #1b2a4a; }
.bbb-pause strong { font: 400 22px/1.1 "Lilita One", "Nunito", sans-serif; color: var(--bbb-strong); }
.bbb-pause p { margin: 0; font-size: 14px; line-height: 1.5; }
.bbb-btn { --c: var(--bbb-accent); --d: var(--bbb-accent-edge); display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 40px; margin-top: 4px; padding: 0 14px; background: var(--c); color: #fff !important; font: 900 11.5px "Nunito", sans-serif; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 0 var(--d), 0 3px 0 1px var(--bbb-outline); }
.bbb-btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px var(--bbb-outline); }
.bbb-btn--discord { --c: #5865f2; --d: #3a43b8; }

/* Eingabe */
.bbb-foot { flex: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 10px 12px; border-top: 1px solid var(--bbb-line); background: var(--bbb-card); }
.bbb-input { display: flex; align-items: flex-end; gap: 8px; }
.bbb-input textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 11px 12px; border: 1px solid var(--bbb-line); border-radius: 0; outline: none; resize: none; background: var(--bbb-field); color: var(--bbb-strong); font: 600 14.5px/1.35 "Nunito", system-ui, sans-serif; }
.bbb-input textarea::placeholder { color: var(--bbb-muted); }
.bbb-input textarea:focus { border-color: var(--bbb-accent); box-shadow: 0 0 0 3px var(--bbb-chip); }
.bbb-input textarea:disabled { opacity: 0.55; }
.bbb-send { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: var(--bbb-accent); color: #fff; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 3px 0 var(--bbb-accent-edge), 0 3px 0 1px var(--bbb-outline); }
.bbb-send:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px var(--bbb-outline); }
.bbb-send:disabled { background: var(--bbb-line); box-shadow: none; cursor: default; transform: none; }
.bbb-fine { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--bbb-muted); font-weight: 600; }
.bbb-fine a { color: var(--bbb-link); font-weight: 800; text-decoration: none; }
.bbb-ts:empty { display: none; }

/* Handy: Fenster über die ganze Seite */
@media (max-width: 600px) {
	.bbb { right: 16px; bottom: 16px; }
	.bbb-teaser { width: min(270px, calc(100vw - 32px)); }
	.bbb.is-open { inset: 0; }
	.bbb-panel { width: 100%; height: 100%; border: 0; box-shadow: none; }
	.bbb-head { padding-top: max(10px, env(safe-area-inset-top)); }
	.bbb-foot { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
	.bbb-input textarea { font-size: 16px; }
	html.bbb-open, html.bbb-open body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
	.bbb-teaser, .bbb-panel { animation: none; }
	.bbb-dots i { animation: none; opacity: 0.8; }
}