/**
 * QS ImmoPro – Chat-Assistent (Frontend-Widget).
 * Eigenständige Klassen (qsc-*), damit es unabhängig vom restlichen Layout ist.
 * Farben im Markenlook; Optik kann später feinjustiert werden.
 */
.qsc {
	--qsc-g800: #004020;
	--qsc-g600: #0a6b39;
	--qsc-g100: #e7f2ec;
	--qsc-ink: #12211a;
	--qsc-ink60: #5b6b63;
	--qsc-line: #e4eae7;
	--qsc-wa: #25d366;
	--qsc-font: var( --qs-body, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif );
}

/* Launcher */
.qsc-launch {
	position: fixed; right: 22px; bottom: 22px; z-index: 9998;
	display: flex; align-items: center; gap: 10px;
	background: var( --qsc-g800 ); color: #fff; border: none; cursor: pointer;
	padding: 13px 18px 13px 15px; border-radius: 100px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, .28 );
	font-family: var( --qsc-font ); font-size: .95rem; font-weight: 600;
	transition: transform .15s, box-shadow .15s;
}
.qsc-launch:hover { transform: translateY( -2px ); box-shadow: 0 14px 36px rgba( 0, 0, 0, .38 ); }
.qsc-launch svg { width: 22px; height: 22px; flex: none; }
.qsc-launch .qsc-dot { width: 8px; height: 8px; border-radius: 50%; background: #5eff9f; box-shadow: 0 0 0 3px rgba( 94, 255, 159, .25 ); }
.qsc-launch.is-open { display: none; }

/* Panel */
.qsc-panel {
	position: fixed; right: 22px; bottom: 22px; z-index: 9999;
	width: 380px; max-width: calc( 100vw - 32px );
	height: 600px; max-height: calc( 100vh - 44px );
	background: #fff; border-radius: 20px; overflow: hidden;
	display: none; flex-direction: column;
	box-shadow: 0 24px 70px rgba( 0, 0, 0, .38 );
	font-family: var( --qsc-font );
	animation: qscIn .18s ease-out;
}
.qsc-panel.is-open { display: flex; }
@keyframes qscIn { from { opacity: 0; transform: translateY( 14px ); } to { opacity: 1; transform: none; } }

.qsc-head { background: linear-gradient( 150deg, var( --qsc-g800 ), var( --qsc-g600 ) ); color: #fff; padding: 18px 18px 16px; position: relative; }
.qsc-head h2 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.qsc-head p { margin: 4px 0 0; font-size: .82rem; color: #cdeeda; display: flex; align-items: center; gap: 7px; }
.qsc-head p::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5eff9f; }
.qsc-close { position: absolute; top: 14px; right: 12px; background: rgba( 255, 255, 255, .15 ); border: none; color: #fff; width: 32px; height: 32px; min-width: 0; padding: 0; border-radius: 50%; cursor: pointer; line-height: 1; display: grid; place-items: center; transition: background .15s; }
.qsc-close svg { width: 16px; height: 16px; }
.qsc-close:hover { background: rgba( 255, 255, 255, .28 ); }

.qsc-body { flex: 1; overflow-y: auto; padding: 16px; background: #f6f9f7; display: flex; flex-direction: column; gap: 12px; }
.qsc-row { display: flex; gap: 8px; max-width: 88%; }
.qsc-row.bot { align-self: flex-start; }
.qsc-row.user { align-self: flex-end; justify-content: flex-end; }
.qsc-ava { width: 30px; height: 30px; border-radius: 50%; background: var( --qsc-g800 ); color: #fff; flex: none; display: grid; place-items: center; font-weight: 700; font-size: .72rem; }
.qsc-bubble { padding: 10px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.5; }
.qsc-row.bot .qsc-bubble { background: #fff; border: 1px solid var( --qsc-line ); border-top-left-radius: 4px; color: var( --qsc-ink ); }
.qsc-row.user .qsc-bubble { background: var( --qsc-g800 ); color: #fff; border-top-right-radius: 4px; }
.qsc-bubble strong { font-weight: 700; }

.qsc-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.qsc-act { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border: 1px solid var( --qsc-line ); background: #fff; color: var( --qsc-g800 ); padding: 7px 11px; border-radius: 100px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.qsc-act:hover { background: var( --qsc-g100 ); }
.qsc-act svg { width: 14px; height: 14px; }
.qsc-act.wa { background: var( --qsc-wa ); border-color: var( --qsc-wa ); color: #fff; }
.qsc-act.call { background: var( --qsc-g800 ); border-color: var( --qsc-g800 ); color: #fff; }

.qsc-quick { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; background: #f6f9f7; }
.qsc-chip { border: 1px solid var( --qsc-g600 ); background: #fff; color: var( --qsc-g800 ); padding: 8px 13px; border-radius: 100px; font-size: .82rem; font-weight: 600; cursor: pointer; font-family: var( --qsc-font ); }
.qsc-chip:hover { background: var( --qsc-g100 ); }

.qsc-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var( --qsc-line ); background: #fff; }
.qsc-input input { flex: 1; border: 1px solid var( --qsc-line ); border-radius: 100px; padding: 11px 15px; font-size: .9rem; font-family: var( --qsc-font ); outline: none; color: var( --qsc-ink ); }
.qsc-input input:focus { border-color: var( --qsc-g600 ); }
.qsc-send { background: var( --qsc-g800 ); border: none; color: #fff; width: 44px; height: 44px; min-width: 0; padding: 0; border-radius: 50%; cursor: pointer; flex: none; display: grid; place-items: center; }
.qsc-send:hover { background: var( --qsc-g600 ); }
.qsc-send svg { width: 20px; height: 20px; }
.qsc-foot { text-align: center; font-size: .68rem; color: var( --qsc-ink60 ); padding: 0 12px 10px; background: #fff; }

/* ---- Mobile-Optimierung (Smartphones) ---- */
@media ( max-width: 480px ) {
	/* Launcher: kompakter runder Button – überdeckt so keine Seiteninhalte (z. B. Hero-Kacheln). */
	.qsc-launch {
		right: 16px; bottom: calc( 16px + env( safe-area-inset-bottom, 0px ) );
		width: 56px; height: 56px; padding: 0; gap: 0;
		border-radius: 50%; justify-content: center;
		font-size: 0; /* Einladungstext auf dem Handy ausblenden, nur Icon zeigen. */
	}
	.qsc-launch svg { width: 26px; height: 26px; }
	.qsc-launch .qsc-dot { position: absolute; top: 13px; right: 13px; }

	/* Panel: kleines Fenster unten RECHTS (wie auf dem Desktop) – NICHT über die ganze
	   Breite/Höhe. Lässt die Seite oben und links sichtbar; dvh statt vh für die Höhe. */
	.qsc-panel {
		right: 12px; left: auto;
		bottom: calc( 12px + env( safe-area-inset-bottom, 0px ) );
		width: min( 360px, calc( 100vw - 24px ) ); max-width: none;
		height: 66vh; height: min( 66dvh, 500px ); max-height: none;
		border-radius: 18px;
	}

	/* Inhalt oben ausrichten, damit die Begrüßung vollständig ab der ersten Zeile lesbar ist. */
	.qsc-body { overscroll-behavior: contain; }
}