﻿/* KI-Assistent – Template-Platzhalter #$KI_ASSISTENT#
   Farbe kommt aus der FHKI-Konfiguration des Marktes (--kia-c, gesetzt per JS); Fallback dunkelblau. */
.kiaPlaceholder, .kia_float { --kia-c: #2a5d84; --kia-ink: #1d1d1f; --kia-line: #e3e5ea; --kia-soft: #f5f6f8; --kia-radius: 16px; font-size: 15px; line-height: 1.45; color: var(--kia-ink); }

/* Fenster (gemeinsam für inline und floating) */
.kia_panel { background: #fff; border-radius: var(--kia-radius); display: none; flex-direction: column; overflow: hidden; box-sizing: border-box; }
.kia_panel.open { display: flex; }
.kia_head { background: var(--kia-c); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.kia_head b { flex: 1; font-size: 16px; font-weight: 600; margin: 0; }
.kia_head button { background: transparent; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px; opacity: .9; margin: 0; width: auto; min-width: 0; }
.kia_msgs { flex: 1; overflow-y: auto; padding: 14px; background: var(--kia-soft); display: flex; flex-direction: column; gap: 10px; }
.kia_m { max-width: 88%; padding: 10px 13px; border-radius: 14px; word-wrap: break-word; }
.kia_m p { margin: 0 0 6px; } .kia_m p:last-child { margin: 0; }
.kia_m ul { margin: 4px 0 6px 18px; padding: 0; list-style: disc; } .kia_m li { margin: 0; }
.kia_m a { color: var(--kia-c); text-decoration: underline; }
.kia_m.user { align-self: flex-end; background: var(--kia-c); color: #fff; border-bottom-right-radius: 4px; }
.kia_m.user a { color: #fff; }
.kia_m.bot { align-self: flex-start; background: #fff; border: 1px solid var(--kia-line); border-bottom-left-radius: 4px; }
.kia_m.err { align-self: flex-start; background: #fdecec; color: #8a1f1f; border: 1px solid #f3c2c2; }
.kia_typing span { display: inline-block; width: 7px; height: 7px; margin: 0 2px; background: #9aa0a6; border-radius: 50%; animation: kia-bounce 1.2s infinite; }
.kia_typing span:nth-child(2) { animation-delay: .2s; } .kia_typing span:nth-child(3) { animation-delay: .4s; }
@keyframes kia-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
.kia_sugg { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; background: var(--kia-soft); }
.kia_sugg:empty { display: none; }
.kia_sugg button { background: #fff; border: 1px solid var(--kia-c); color: var(--kia-c); border-radius: 999px; padding: 6px 11px; font-size: 13px; cursor: pointer; margin: 0; width: auto; min-width: 0; line-height: 1.3; }
.kia_sugg button:hover { background: var(--kia-c); color: #fff; }
/* Terminvereinbarung: Auswahl-Chips, Datumsfeld und Zusammenfassung in Bot-Blasen */
.kia_opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kia_opts button { background: #fff; border: 1px solid var(--kia-c); color: var(--kia-c); border-radius: 999px; padding: 6px 11px; font-size: 13px; cursor: pointer; margin: 0; width: auto; min-width: 0; line-height: 1.3; }
.kia_opts button:hover, .kia_opts button.sel { background: var(--kia-c); color: #fff; }
.kia_opts button.kia_sec { border-color: #c5c9d0; color: #4b5563; } .kia_opts button.kia_sec:hover { background: #e5e7eb; color: #1d1d1f; }
.kia_opts button.kia_primary { background: var(--kia-c); color: #fff; font-weight: 600; }
.kia_opts button:disabled { opacity: .5; cursor: default; }
.kia_m input[type="date"] { font: inherit; font-size: 14px; border: 1px solid #cfd3da; border-radius: 8px; padding: 6px 9px; margin-top: 8px; width: auto; min-width: 0; height: auto; box-sizing: border-box; }
.kia_sum { margin: 6px 0 0; padding: 0; } .kia_sum div { display: flex; gap: 8px; padding: 2px 0; border-bottom: 1px dashed var(--kia-line); font-size: 14px; }
.kia_sum div:last-child { border-bottom: 0; } .kia_sum span:first-child { color: #6b7280; min-width: 92px; flex-shrink: 0; }
.kia_m small { display: block; color: #6b7280; font-size: 12px; margin-top: 6px; }
.kia_form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--kia-line); background: #fff; margin: 0; }
.kia_form textarea { flex: 1; resize: none; border: 1px solid #cfd3da; border-radius: 10px; padding: 9px 11px; font: inherit; max-height: 120px; outline: none; margin: 0; width: auto; min-height: 0; box-sizing: border-box; }
.kia_form textarea:focus { border-color: var(--kia-c); box-shadow: none; }
.kia_form button { background: var(--kia-c); color: #fff; border: 0; border-radius: 10px; padding: 0 16px; font: inherit; font-weight: 600; cursor: pointer; margin: 0; width: auto; min-width: 0; }
.kia_form button:disabled { opacity: .5; cursor: default; }
.kia_foot { font-size: 11px; color: #6b7280; padding: 6px 12px 9px; background: #fff; text-align: center; }
.kia_foot a { color: #6b7280; text-decoration: underline; }

/* Inline: Block im Seiteninhalt */
.kia-inline .kia_panel { height: 560px; max-height: 80vh; border: 1px solid var(--kia-line); box-shadow: 0 4px 18px rgba(0, 0, 0, .08); margin: 0 0 24px; }
.kia-inline .kia_head .kia_close { display: none; }

/* Unsichtbar, bis KiAssistent.ashx?p=health den KI-Server als erreichbar meldet (ki-assistent.js) */
.kia_hidden { display: none !important; }

/* Floating: Button unten rechts (oder links), Fenster darüber */
.kia_float { position: fixed; bottom: var(--kia-bottom, 20px); z-index: 99000; font-family: inherit; } /* unter dem Cookie-Panel (.cookieAcceptanceOverlay, z-index 99996), über dem Seiteninhalt */ /* --kia-bottom setzt ki-assistent.js, wenn in der Ecke ein Siegel liegt (Trusted Shops, Ekomi) */
.kia_float.kia_pos_right { right: 20px; } .kia_float.kia_pos_left { left: 20px; }
.kia_float .kia_btn { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--kia-c); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s; margin: 0; padding: 0; min-width: 0; }
.kia_float .kia_btn:hover { transform: scale(1.06); }
.kia_float .kia_btn svg { width: 28px; height: 28px; fill: #fff; }
.kia_float .kia_panel { position: absolute; bottom: 72px; width: 380px; max-width: calc(100vw - 40px); height: 560px; max-height: calc(100vh - 92px - var(--kia-bottom, 20px)); box-shadow: 0 12px 40px rgba(0, 0, 0, .28); }
.kia_float.kia_pos_right .kia_panel { right: 0; } .kia_float.kia_pos_left .kia_panel { left: 0; }
@media (max-width: 480px) {
	.kia_float .kia_panel { position: fixed; bottom: 0; left: 0; right: 0; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
	.kia_float .kia_panel.open ~ .kia_btn { display: none; }
	.kia-inline .kia_panel { height: 70vh; }
}
