/* TB Support Chat – Widget. Eigenständige, gekapselte Styles (Prefix .tbsc-).
   Gestaltung: großzügige Rundungen, weiche mehrlagige Schatten, sanftes Öffnen. */

.tbsc-root { position: fixed; bottom: 22px; right: 22px; z-index: 2147483000;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.tbsc-root, .tbsc-root * { box-sizing: border-box; }

/* --- Launcher --- */
.tbsc-launcher { position: relative; width: 60px; height: 60px; border: 0; cursor: pointer;
	border-radius: 50%; background: var(--tbsc-color, #1E5FCC); color: #fff;
	box-shadow: 0 10px 24px rgba(16, 42, 91, .28), 0 3px 8px rgba(16, 42, 91, .18);
	display: flex; align-items: center; justify-content: center;
	transition: transform .18s ease, box-shadow .18s ease; }
.tbsc-launcher:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(16, 42, 91, .32), 0 4px 10px rgba(16, 42, 91, .2); }
.tbsc-launcher:active { transform: translateY(-1px) scale(.97); }
.tbsc-launcher svg { width: 27px; height: 27px; }
.tbsc-badge { position: absolute; top: -2px; right: -2px; min-width: 21px; height: 21px; padding: 0 6px;
	border-radius: 11px; background: #ec4646; color: #fff; font-size: 12px; font-weight: 700;
	line-height: 21px; text-align: center; display: none; box-shadow: 0 0 0 2px #fff; }

/* --- Panel (mit sanfter Auf-/Zuklapp-Animation) --- */
.tbsc-panel { position: absolute; bottom: 78px; right: 2px; width: 372px; max-width: calc(100vw - 44px);
	height: 540px; max-height: calc(100vh - 130px); background: #fff; border-radius: 20px;
	box-shadow: 0 20px 48px rgba(16, 42, 91, .24), 0 6px 16px rgba(16, 42, 91, .12);
	display: flex; flex-direction: column; overflow: hidden;
	opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transform-origin: bottom right;
	transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1), visibility .22s; }
.tbsc-root.tbsc-open .tbsc-panel { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

/* --- Kopf --- */
.tbsc-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 18px;
	background: var(--tbsc-color, #1E5FCC); color: #fff; }
.tbsc-ava { position: relative; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
	background: rgba(255, 255, 255, .18); display: flex; align-items: center; justify-content: center; }
.tbsc-ava svg { width: 22px; height: 22px; }
.tbsc-online { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
	background: #3ddc84; box-shadow: 0 0 0 2px var(--tbsc-color, #1E5FCC); }
.tbsc-htxt { flex: 1; min-width: 0; }
.tbsc-htxt b { font-size: 16px; font-weight: 700; display: block; line-height: 1.25; }
.tbsc-htxt span { font-size: 12.5px; opacity: .85; }
.tbsc-close { margin-left: auto; background: transparent; border: 0; color: #fff; opacity: .8;
	font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 8px; transition: opacity .15s, background .15s; }
.tbsc-close:hover { opacity: 1; background: rgba(255, 255, 255, .15); }

/* --- Verlauf --- */
.tbsc-body { flex: 1; overflow-y: auto; padding: 18px 16px; background: #f6f8fb; scroll-behavior: smooth; }
.tbsc-msg { max-width: 80%; margin: 0 0 10px; padding: 10px 13px; font-size: 14px; line-height: 1.5;
	border-radius: 18px; word-wrap: break-word; animation: tbsc-in .18s ease; }
@keyframes tbsc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tbsc-msg.visitor { margin-left: auto; background: var(--tbsc-color, #1E5FCC); color: #fff;
	border-bottom-right-radius: 6px; box-shadow: 0 2px 6px rgba(16, 42, 91, .18); }
.tbsc-msg.agent, .tbsc-msg.system { background: #fff; color: #1b2430; border: 1px solid #eef1f6;
	border-bottom-left-radius: 6px; box-shadow: 0 2px 8px rgba(16, 42, 91, .06); }
.tbsc-msg.system { margin: 0 auto 10px; text-align: center; color: #6a7683; font-size: 12.5px; border-radius: 12px; }

/* --- Eingabe --- */
.tbsc-foot { display: flex; align-items: center; gap: 8px; padding: 12px; background: #fff; border-top: 1px solid #eef1f6; }
.tbsc-foot input { flex: 1; border: 1px solid #dbe3ee; border-radius: 22px; padding: 11px 16px; font-size: 14px;
	outline: none; transition: border-color .15s, box-shadow .15s; }
.tbsc-foot input:focus { border-color: var(--tbsc-color, #1E5FCC); box-shadow: 0 0 0 3px rgba(30, 95, 204, .12); }
.tbsc-foot button { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 50%; cursor: pointer;
	background: var(--tbsc-color, #1E5FCC); color: #fff; display: flex; align-items: center; justify-content: center;
	transition: transform .15s, filter .15s; }
.tbsc-foot button:hover { filter: brightness(1.06); transform: scale(1.05); }
.tbsc-foot button svg { width: 19px; height: 19px; }

@media (max-width: 480px) {
	.tbsc-panel { width: calc(100vw - 24px); height: calc(100vh - 100px); bottom: 76px; right: -10px; }
	.tbsc-root { right: 16px; bottom: 16px; }
}


/* ===================================================================== */
/* v0.2.0 — Full-Height-Drawer + Datei-/Screenshot-Uploads               */
/* ===================================================================== */

/* Panel = Drawer über die volle Seitenhöhe, überlagert Topbar & Launcher. */
.tbsc-root { z-index: 2147483646; }
.tbsc-panel { position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; height: 100dvh;
	max-height: none; width: 400px; max-width: 100vw; border-radius: 0;
	transform: translateX(24px); transform-origin: center right; }
.tbsc-root.tbsc-open .tbsc-panel { transform: translateX(0); }
.tbsc-root.tbsc-open .tbsc-launcher { visibility: hidden; }
@media (max-width: 520px) {
	.tbsc-panel { width: 100vw; right: 0; }
}

/* --- Anhang-Button (Büroklammer) --- */
.tbsc-foot .tbsc-attach { background: #f1f4f9; color: #46566b; }
.tbsc-foot .tbsc-attach:hover { background: #e7ecf5; }
.tbsc-foot .tbsc-attach svg { width: 19px; height: 19px; }

/* --- Upload-Chips mit Fortschrittsbalken --- */
.tbsc-chips { padding: 0 12px; background: #fff; }
.tbsc-chips:empty { display: none; }
.tbsc-chip { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 10px;
	background: #f4f7fb; border: 1px solid #e4eaf3; border-radius: 10px; font-size: 12.5px; color: #33415a; }
.tbsc-chip .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbsc-chip .bar { flex: 0 0 90px; height: 6px; border-radius: 3px; background: #e2e8f2; overflow: hidden; }
.tbsc-chip .bar i { display: block; height: 100%; width: 0; background: var(--tbsc-color, #1E5FCC); transition: width .12s; }
.tbsc-chip .x { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 6px; cursor: pointer;
	background: transparent; color: #a03636; display: flex; align-items: center; justify-content: center; }
.tbsc-chip .x:hover { background: #fbeaea; }
.tbsc-chip .x svg { width: 15px; height: 15px; }

/* --- Referenzen "(siehe Bild x)" im Verlauf --- */
.tbsc-msg .tbsc-fref { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.tbsc-msg.visitor .tbsc-fref { color: #fff; }
.tbsc-msg .tbsc-ftrash { border: 0; background: transparent; cursor: pointer; padding: 0 2px;
	color: #a03636; vertical-align: -3px; margin-left: 3px; }
.tbsc-msg.visitor .tbsc-ftrash { color: #ffd7d7; }
.tbsc-msg .tbsc-ftrash svg { width: 14px; height: 14px; }
.tbsc-msg .tbsc-fdel { color: inherit; opacity: .7; font-size: 12px; }

/* --- Bild-Overlay (zentriert, 75% des Canvas) --- */
.tbsc-overlay { position: fixed; inset: 0; z-index: 2147483647; background: rgba(10, 18, 32, .72);
	display: flex; align-items: center; justify-content: center; }
.tbsc-overlay[hidden] { display: none; }
.tbsc-overlay img { max-width: 75vw; max-height: 75vh; border-radius: 12px; background: #fff;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .45); }
.tbsc-ovclose { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: 0;
	border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px;
	line-height: 1; display: flex; align-items: center; justify-content: center; }
.tbsc-ovclose:hover { background: rgba(255, 255, 255, .26); }