/* ============================================================
   MC-Dashboard — Compliance-Assistent (Welle W5-C, Plan v1.2.0 §3.3)
   Badge + Dock rechts unten, Vorbild OSP-Assistent
   (/var/www/html/osp/index.html:309-380, .chat-fab/.chat-dock).

   Eigene Datei, eigener Klassen-Namensraum "ca-*" (compliance-assistent) —
   nichts hier haengt von style.css/akte.css/assistent.css ab, ausser den
   gemeinsamen CI-Variablen aus style.css :root (--color-*, --st-*,
   --radius, --shadow-*). Diese Datei aendert KEINE bestehende Klasse.

   Farbregel (Skill mc-oberflaeche §2, F-1..F-10): ein gesaettigtes Feld
   je Element, Rest getoent oder Text. Orange (--color-accent) ist NUR der
   "neu/ungelesen"-Punkt (F-5), nie Knopf- oder Statusfarbe. Blau
   (--color-primary) ist Interaktionsfarbe (Senden/Ausfuehren), nie Status.
   Kein zweites Dark-Palette (F-8) — nur html.dark/[data-theme="dark"]
   ueberschreibt einzelne Werte unten, die Grundregeln bleiben identisch.
   ============================================================ */

/* ── Badge (Fab) ──────────────────────────────────────────── */
.ca-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 130;
    display: inline-flex; align-items: center; gap: 9px;
    height: 48px; padding: 0 18px 0 14px; border: none; border-radius: 24px;
    background: var(--color-primary); color: #fff;
    font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 700;
    cursor: pointer; box-shadow: var(--shadow-modal);
    transition: transform .12s ease, background .12s ease;
}
.ca-fab:hover { background: var(--color-primary-dark); transform: translateY(-1px); }
.ca-fab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.ca-fab .ca-ic { width: 20px; height: 20px; flex: 0 0 auto; }
.ca-fab.ca-versteckt { display: none; }
/* F-5: der einzige Ort, an dem Orange in dieser Datei auftaucht — "neue
   Antwort, noch nicht gesehen". Kein Status, kein Knopf. */
.ca-fab .ca-punkt {
    position: absolute; top: -3px; right: -3px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--color-accent);
    border: 2px solid var(--color-bg);
}

/* ── Dock ─────────────────────────────────────────────────── */
.ca-dock {
    position: fixed; right: 20px; bottom: 20px; z-index: 131;
    width: min(420px, calc(100vw - 32px)); height: min(620px, calc(100vh - 40px));
    display: none; flex-direction: column;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-modal); overflow: hidden;
}
.ca-dock.ca-offen { display: flex; animation: caEin .14s ease; }
@keyframes caEin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ca-dock.ca-offen { animation: none; } .ca-fab { transition: none; } }

.ca-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
}
.ca-head-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--color-primary); color: #fff; flex: 0 0 auto;
}
.ca-head-ic svg { width: 17px; height: 17px; }
.ca-head-txt { min-width: 0; }
.ca-head-tit { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--color-text); line-height: 1.15; }
.ca-head-sub { font-size: 10.5px; color: var(--color-text-muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-head-akt { margin-left: auto; display: flex; gap: 2px; flex: 0 0 auto; }
.ca-head-akt button {
    width: 28px; height: 28px; border: none; background: transparent; color: var(--color-text-muted);
    border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ca-head-akt button svg { width: 16px; height: 16px; }
.ca-head-akt button:hover { background: var(--color-hover-row); color: var(--color-text); }
.ca-head-akt button.ca-aktiv { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }

/* Kontext-Zeile: zeigt, wo der Bediener gerade steht — schliesst genau die
   Luecke "Der Assistent wusste nicht, wo DU gerade steht" (Plan §"Was noch
   fehlt"). Rein informativ, kein Interaktionselement. */
.ca-kontext {
    flex: 0 0 auto; padding: 6px 12px; font-size: 10.5px; color: var(--color-text-muted);
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
    display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ca-kontext svg { width: 12px; height: 12px; flex: 0 0 auto; opacity: .75; }
.ca-kontext b { color: var(--color-text); font-weight: 600; }

.ca-body { flex: 1 1 auto; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ca-greet { color: var(--color-text-muted); font-size: 12.5px; line-height: 1.5; }
.ca-greet b { color: var(--color-text); }
.ca-sugg { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.ca-sugg button {
    text-align: left; padding: 8px 10px; border: 1px solid var(--color-border);
    background: var(--color-bg-light); color: var(--color-text); border-radius: 8px;
    font-size: 12px; cursor: pointer; line-height: 1.3; font-family: inherit;
}
.ca-sugg button:hover { border-color: var(--color-primary); background: var(--color-hover-row); }

/* ── Nachrichten ──────────────────────────────────────────── */
.ca-msg { display: flex; flex-direction: column; max-width: 100%; }
.ca-msg.ca-nutzer { align-items: flex-end; }
.ca-bubble {
    padding: 8px 11px; border-radius: 11px; font-size: 12.5px; line-height: 1.5;
    word-wrap: break-word; overflow-wrap: anywhere;
}
.ca-msg.ca-nutzer .ca-bubble {
    max-width: 88%; background: var(--color-primary); color: #fff;
    border-bottom-right-radius: 3px; white-space: pre-wrap;
}
.ca-msg.ca-assistent .ca-bubble {
    max-width: 100%; background: var(--color-bg-light); color: var(--color-text);
    border: 1px solid var(--color-border); border-bottom-left-radius: 3px;
}
/* Fehler-/Sperr-Antworten (status fehler|gesperrt|abgebrochen, s. JS): dezenter
   linker Farbstreifen statt Vollflaeche — F-1, nur ein gesaettigtes Element. */
.ca-msg.ca-assistent .ca-bubble.ca-ton-rot { border-left: 3px solid var(--st-rot); }
.ca-msg.ca-assistent .ca-bubble.ca-ton-gelb { border-left: 3px solid var(--st-gelb); }
.ca-msg.ca-assistent .ca-bubble.ca-ton-grau { border-left: 3px solid var(--st-grau); }

.ca-bubble > :first-child { margin-top: 0; } .ca-bubble > :last-child { margin-bottom: 0; }
.ca-bubble p { margin: .45em 0; }
.ca-bubble ul, .ca-bubble ol { margin: .35em 0; padding-left: 1.15em; }
.ca-bubble li { margin: .15em 0; }
.ca-bubble code {
    font-family: 'Fira Code', ui-monospace, monospace; font-size: 11.5px;
    background: var(--color-hover-row); padding: 1px 4px; border-radius: 4px;
}
.ca-bubble pre {
    background: var(--color-code-bg); color: var(--color-code-text);
    padding: 8px; border-radius: 8px; overflow-x: auto; font-size: 11px; margin: .4em 0;
}
.ca-bubble pre code { background: none; padding: 0; color: inherit; }
.ca-bubble table { border-collapse: collapse; width: 100%; font-size: 11.5px; margin: .4em 0; display: block; overflow-x: auto; }
.ca-bubble th, .ca-bubble td { border: 1px solid var(--color-border); padding: 3px 6px; text-align: left; }
.ca-bubble th { background: var(--color-bg); font-weight: 600; }
.ca-bubble a { color: var(--color-primary); }
.ca-bubble a:hover { text-decoration: none; }

/* Werkzeugschritte live — "Werkzeugschritte live" statt nacktem Kreisel
   (Anforderung: 5-25s Antwortzeit ohne stumme Wartezeit). */
.ca-tools { display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.ca-tool { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-text-muted); line-height: 1.3; }
.ca-tool .ca-ic { width: 12px; height: 12px; flex: 0 0 auto; color: var(--color-primary); }
.ca-tool.ca-laeuft .ca-ic { animation: caSpin 1.1s linear infinite; }
.ca-tool.ca-laeuft { color: var(--color-text); }
@keyframes caSpin { to { transform: rotate(360deg); } }

/* KI-Kennzeichnung (Art. 50 KI-VO) — Pflichtangabe, nie wegoptimieren. Als
   dauerhafte Fusszeile, nicht an eine einzelne Nachricht gebunden, damit sie
   IMMER sichtbar ist (F-10: rechtlich Relevantes bleibt sichtbar). */
.ca-foot {
    flex: 0 0 auto; padding: 6px 12px; font-size: 10px; color: var(--color-text-muted);
    text-align: center; background: var(--color-bg-light); border-top: 1px solid var(--color-border);
    line-height: 1.35;
}
.ca-foot b { color: var(--color-text); font-weight: 600; }

/* ── Handlungskarte (E-8/E-8b) ────────────────────────────── */
.ca-karte {
    border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-card);
    padding: 9px 10px; margin-top: 4px; font-size: 12px;
}
.ca-karte-titel { font-weight: 600; color: var(--color-text); margin-bottom: 3px; }
.ca-karte-text { color: var(--color-text-muted); line-height: 1.45; margin-bottom: 7px; }
.ca-karte-zeile { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ca-karte-grund { font-size: 11px; color: var(--color-text-muted); margin-bottom: 6px; font-style: italic; }
.ca-karte.ca-erledigt { opacity: .72; }
.ca-karte-status { font-size: 11px; color: var(--st-gruen); font-weight: 600; }

.ca-btn {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 7px;
    padding: 6px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer;
    font-family: inherit; border: 1px solid transparent; transition: filter .15s, background .15s;
}
.ca-btn:disabled { opacity: .55; cursor: not-allowed; }
/* F-7: EIN gefuellter Knopf je Karte — die Ausfuehren-Handlung. */
.ca-btn-primary { background: var(--color-primary); color: #fff; }
.ca-btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }
.ca-btn-ghost { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); }
.ca-btn-ghost:hover:not(:disabled) { background: var(--color-hover-row); color: var(--color-text); }

/* ── Verlauf-Ansicht (frueherer Gespraeche, GET .../verlauf) ─ */
.ca-verlauf-liste { display: flex; flex-direction: column; gap: 8px; }
.ca-verlauf-zeile {
    border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px;
    font-size: 11.5px; cursor: pointer; background: var(--color-card);
}
.ca-verlauf-zeile:hover { background: var(--color-hover-row); }
.ca-verlauf-zeit { color: var(--color-text-lighter); font-size: 10.5px; margin-bottom: 2px; }
.ca-verlauf-frage { color: var(--color-text); font-weight: 600; margin-bottom: 2px; }
.ca-verlauf-antwort { color: var(--color-text-muted); line-height: 1.4; }
.ca-verlauf-leer { text-align: center; color: var(--color-text-lighter); padding: 24px 8px; font-size: 12px; line-height: 1.5; }

/* ── Eingabe ──────────────────────────────────────────────── */
.ca-eingabe {
    flex: 0 0 auto; display: flex; align-items: flex-end; gap: 7px;
    padding: 9px; border-top: 1px solid var(--color-border); background: var(--color-bg-light);
}
.ca-eingabe textarea {
    flex: 1 1 auto; resize: none; max-height: 110px; min-height: 36px;
    padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-card); color: var(--color-text); font-family: inherit;
    font-size: 12.5px; line-height: 1.4;
}
.ca-eingabe textarea:focus { outline: none; border-color: var(--color-primary); }
.ca-eingabe textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.ca-eingabe textarea:disabled { opacity: .6; }
.ca-send, .ca-stop {
    flex: 0 0 auto; width: 36px; height: 36px; border: none; border-radius: 8px;
    color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ca-send { background: var(--color-primary); }
.ca-send:hover:not(:disabled) { background: var(--color-primary-dark); }
.ca-send:disabled { opacity: .5; cursor: not-allowed; }
.ca-stop { background: var(--color-danger); }
.ca-stop:hover { filter: brightness(.92); }
.ca-send svg, .ca-stop svg { width: 16px; height: 16px; }

.ca-versteckt { display: none !important; }
.ca-sichtbar-nur-screenreader {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}