/* KI-Assistent im Hotel-Portal (assets/js/assistent.js). Dunkel wie das Dashboard, .hka--hell wie die Anmeldeseite.
   Unter den Dialogen des Dashboards (.modal z-index 2000), über Seitenleiste und Inhalt. */
.hka {
    --hka-bg: #1e1e1e;
    --hka-flaeche: #2a2a2a;
    --hka-text: #ffffff;
    --hka-leise: #a0a0a0;
    --hka-rand: rgba(255, 255, 255, 0.1);
    --hka-gold: #c9a84c;
    --hka-titel: #c9a84c;
    --hka-auf-gold: #141414;
    --hka-ich: rgba(201, 168, 76, 0.18);
    --hka-schatten: 0 20px 50px rgba(0, 0, 0, 0.5);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.hka--hell {
    --hka-bg: #ffffff;
    --hka-flaeche: #f4f1ea;
    --hka-text: #1a1a1a;
    --hka-leise: #6e6e73;
    --hka-rand: rgba(0, 0, 0, 0.1);
    --hka-gold: #c5a059;
    /* Gold auf Weiß ist als Schrift zu blass: dunkleres Gold wie die Links der Anmeldeseite */
    --hka-titel: #8a6a1f;
    --hka-auf-gold: #1a1a1a;
    --hka-ich: rgba(197, 160, 89, 0.22);
    --hka-schatten: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.hka-knopf {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: none;
    border-radius: 999px;
    background: var(--hka-gold);
    color: var(--hka-auf-gold);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.hka-knopf:hover { transform: translateY(-2px); }
.hka-knopf:focus-visible,
.hka-symbol:focus-visible,
.hka-chip:focus-visible,
.hka-senden:focus-visible { outline: 2px solid var(--hka-gold); outline-offset: 2px; }
.hka-knopf i { font-size: 1.05rem; }

.hka-fenster {
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 1500;
    width: 380px;
    max-height: min(600px, calc(100vh - 110px));
    display: flex;
    flex-direction: column;
    background: var(--hka-bg);
    color: var(--hka-text);
    border: 1px solid var(--hka-rand);
    border-radius: 16px;
    box-shadow: var(--hka-schatten);
    overflow: hidden;
}

.hka-fenster[hidden] { display: none; }

.hka-kopf {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 12px 10px 16px;
    border-bottom: 1px solid var(--hka-rand);
}

.hka-kopf-text { flex: 1; min-width: 0; }
.hka-kopf h2 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--hka-titel); }
.hka-kopf p { margin: 2px 0 0; font-size: 0.75rem; color: var(--hka-leise); }

.hka-symbol {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--hka-leise);
    cursor: pointer;
}

.hka-symbol:hover { background: var(--hka-flaeche); color: var(--hka-text); }

.hka-hinweis {
    margin: 0;
    padding: 8px 16px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--hka-leise);
    background: var(--hka-flaeche);
}

.hka-hinweis i { color: var(--hka-gold); margin-right: 2px; }

.hka-verlauf {
    flex: 1;
    min-height: 160px;
    overflow-y: auto;
    padding: 14px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hka-blase {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.hka-bot { align-self: flex-start; background: var(--hka-flaeche); border-bottom-left-radius: 4px; }
.hka-ich { align-self: flex-end; background: var(--hka-ich); border-bottom-right-radius: 4px; }
.hka-blase strong { font-weight: 700; }

.hka-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; }

.hka-chip {
    padding: 7px 11px;
    border: 1px solid var(--hka-gold);
    border-radius: 999px;
    background: transparent;
    color: var(--hka-text);
    font: inherit;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
}

.hka-chip:hover { background: var(--hka-ich); }

.hka-laden { display: flex; gap: 4px; padding: 13px 14px; }

.hka-laden span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hka-leise);
    animation: hka-punkt 1.2s infinite ease-in-out;
}

.hka-laden span:nth-child(2) { animation-delay: 0.15s; }
.hka-laden span:nth-child(3) { animation-delay: 0.3s; }

@keyframes hka-punkt {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-3px); }
}

.hka-eingabe {
    display: flex;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--hka-rand);
}

.hka-eingabe input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--hka-rand);
    border-radius: 10px;
    background: var(--hka-flaeche);
    color: var(--hka-text);
    font: inherit;
    font-size: 0.85rem;
}

.hka-eingabe input:focus { outline: none; border-color: var(--hka-gold); }
.hka-eingabe input::placeholder { color: var(--hka-leise); }

.hka-senden {
    flex-shrink: 0;
    width: 42px;
    border: none;
    border-radius: 10px;
    background: var(--hka-gold);
    color: var(--hka-auf-gold);
    cursor: pointer;
}

.hka-senden:disabled { opacity: 0.5; cursor: wait; }

/* Schmale Bildschirme: Fenster über die ganze Breite, Knopf nur als Symbol */
@media (max-width: 480px) {
    .hka-knopf { right: 16px; bottom: 16px; padding: 14px; }
    .hka-knopf span { display: none; }
    .hka-fenster { left: 8px; right: 8px; bottom: 76px; width: auto; max-height: calc(100vh - 92px); }
}

@media (prefers-reduced-motion: reduce) {
    .hka-knopf { transition: none; }
    .hka-laden span { animation: none; opacity: 0.6; }
}