@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/ZXingBlazor/ZXingBlazor.55ptov32el.bundle.scp.css';

/* /Pages/KiAgentChat.razor.rz.scp.css */
/* KiAgentChat.razor.css - Chat-Redesign B2, siehe
   Ai/Plans/2026-07-03-kiagent-chat-ui-redesign-plan.md. Claude-Code-Anmutung: schmale
   Topic-Sidebar, ruhige Chat-Flaeche, Portal-Brandfarben (#3A8AC3 Sidebar-Blau,
   #60e6be/#ca0d59 als sparsame Akzente). Scoped CSS - kein globaler Style-Leak. */

.kiagent-root[b-a6bsfebvlr] {
 display: flex;
 height: calc(100vh - 120px);
 min-height: 480px;
 border: 1px solid #ddd;
 border-radius: 6px;
 overflow: hidden;
 background: #fff;
}

/* --- Sidebar --- (User-Vorgabe 2026-07-03: WEISS statt Blau - zwei blaue Leisten nebeneinander
   wirkten ueberladen; Akzent-/Aktivfarbe bleibt das Portal-Blau #3A8AC3). */
.kiagent-sidebar[b-a6bsfebvlr] {
 width: 220px;
 flex: 0 0 220px;
 background-color: #fff;
 color: #333;
 display: flex;
 flex-direction: column;
 border-right: 1px solid #e0e0e0;
 transition: width 0.2s ease, flex-basis 0.2s ease;
 overflow: hidden;
}

.kiagent-sidebar.collapsed[b-a6bsfebvlr] {
 width: 36px;
 flex: 0 0 36px;
}

/* B5: kompakter Fenster-Modus (eigenes Browser-Fenster ueber "In eigenem Fenster oeffnen") - kein
   volles Portal-Layout noetig, Chat soll die ganze Fensterhoehe nutzen. Sidebar bleibt einklappbar
   wie im Hauptfenster (kiagent-sidebar.collapsed greift unveraendert). */
.kiagent-root.kiagent-windowmode[b-a6bsfebvlr] {
 height: 100vh;
 border: none;
 border-radius: 0;
}

.kiagent-windowbar[b-a6bsfebvlr] {
 display: flex;
 justify-content: flex-end;
 padding: 2px 4px;
}

.kiagent-windowbtn[b-a6bsfebvlr] {
 background: none;
 border: 1px solid #ddd;
 border-radius: 4px;
 padding: 2px 8px;
 font-size: 0.95em;
 cursor: pointer;
 color: #3A8AC3;
}

.kiagent-windowbtn:hover[b-a6bsfebvlr] {
 background-color: #f0f6fb;
}

.kiagent-sidebar-toggle-row[b-a6bsfebvlr] {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 padding: 6px;
 background-color: #f5f7f9;
 border-bottom: 1px solid #e0e0e0;
}

.kiagent-sidebar-toggle-btn[b-a6bsfebvlr] {
 background: transparent;
 border: none;
 color: #3A8AC3;
 font-size: 1.1em;
 line-height: 1;
 padding: 6px;
 cursor: pointer;
 border-radius: 4px;
}
.kiagent-sidebar-toggle-btn:hover[b-a6bsfebvlr] {
 background-color: #e8f1f8;
}

.kiagent-newtopic-btn[b-a6bsfebvlr] {
 margin: 10px;
 padding: 8px 10px;
 border: 1px solid #3A8AC3;
 background: #fff;
 color: #3A8AC3;
 border-radius: 4px;
 cursor: pointer;
 font-size: 0.9em;
 white-space: nowrap;
}
.kiagent-newtopic-btn:hover[b-a6bsfebvlr] {
 background-color: #e8f1f8;
}

.kiagent-newtopic-btn-mini[b-a6bsfebvlr] {
 margin: 4px auto;
 width: 24px;
 height: 24px;
 border: 1px solid #3A8AC3;
 background: #fff;
 color: #3A8AC3;
 border-radius: 4px;
 cursor: pointer;
 font-size: 0.95em;
 line-height: 1;
 display: flex;
 align-items: center;
 justify-content: center;
}
.kiagent-newtopic-btn-mini:hover[b-a6bsfebvlr] {
 background-color: #e8f1f8;
}

.kiagent-topic-list[b-a6bsfebvlr] {
 flex: 1 1 auto;
 overflow-y: auto;
 padding: 0 4px 8px 4px;
}

.kiagent-topic-item[b-a6bsfebvlr] {
 position: relative;
 padding: 6px 8px;
 border-radius: 4px;
 margin-bottom: 2px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 cursor: pointer;
 font-size: 0.85em;
 color: #444;
}
.kiagent-topic-item:hover[b-a6bsfebvlr] {
 background-color: #eef4f9;
 color: #222;
}
.kiagent-topic-item.active[b-a6bsfebvlr] {
 background-color: #3A8AC3;
 color: #fff;
}

.kiagent-topic-title[b-a6bsfebvlr] {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 flex: 1 1 auto;
}

.kiagent-topic-actions[b-a6bsfebvlr] {
 flex: 0 0 auto;
 opacity: 0;
 display: flex;
 gap: 4px;
 margin-left: 4px;
}
.kiagent-topic-item:hover .kiagent-topic-actions[b-a6bsfebvlr] {
 opacity: 1;
}
.kiagent-topic-actions a[b-a6bsfebvlr] {
 color: inherit;
 text-decoration: none;
}

.kiagent-topic-rename-input[b-a6bsfebvlr] {
 width: 100%;
 font-size: 0.9em;
 padding: 2px 4px;
}

.kiagent-topic-empty[b-a6bsfebvlr] {
 color: #888;
 font-size: 0.8em;
 padding: 8px;
}

.kiagent-confirm-delete[b-a6bsfebvlr] {
 position: absolute;
 right: 0;
 top: 100%;
 z-index: 5;
 background: #fff;
 color: #333;
 border: 1px solid #ca0d59;
 border-radius: 4px;
 padding: 6px 8px;
 font-size: 0.8em;
 white-space: nowrap;
 box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* --- Main chat area --- */
.kiagent-main[b-a6bsfebvlr] {
 flex: 1 1 auto;
 display: flex;
 flex-direction: column;
 min-width: 0;
 background: #f7f8fa;
}

.kiagent-templates[b-a6bsfebvlr] {
 padding: 8px;
 border-bottom: 1px solid #e2e5e8;
 background: #fff;
 display: flex;
 flex-wrap: wrap;
 gap: 4px;
 align-items: center;
}

.kiagent-template-wrap[b-a6bsfebvlr] {
 display: inline-flex;
 align-items: center;
 gap: 2px;
}

.kiagent-template-btn[b-a6bsfebvlr] {
 border: 1px solid #3A8AC3;
 background: #fff;
 color: #3A8AC3;
 border-radius: 14px;
 padding: 4px 12px;
 font-size: 0.8em;
 cursor: pointer;
}
.kiagent-template-btn:hover[b-a6bsfebvlr] {
 background: #3A8AC3;
 color: #fff;
}
.kiagent-template-add[b-a6bsfebvlr] {
 font-weight: bold;
 border-style: dashed;
}
.kiagent-template-empty[b-a6bsfebvlr] {
 font-size: 0.78em;
 color: #888;
 font-style: italic;
}
.kiagent-template-edit[b-a6bsfebvlr] {
 font-size: 0.75em;
 color: #888;
 text-decoration: none;
 cursor: pointer;
}
.kiagent-template-edit:hover[b-a6bsfebvlr] {
 color: #ca0d59;
}

.kiagent-messages[b-a6bsfebvlr] {
 flex: 1 1 auto;
 overflow-y: auto;
 overflow-x: hidden;
 padding: 12px;
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.kiagent-msg-row[b-a6bsfebvlr] {
 display: flex;
}
.kiagent-msg-row.user[b-a6bsfebvlr] {
 justify-content: flex-end;
}
.kiagent-msg-row.assistant[b-a6bsfebvlr] {
 justify-content: flex-start;
}

.kiagent-bubble[b-a6bsfebvlr] {
 max-width: 78%;
 padding: 8px 12px;
 border-radius: 10px;
 line-height: 1.4;
 font-size: 0.92em;
 word-wrap: break-word;
 /* Batch-UX: entartete lange Woerter/URLs/Tokens duerfen NIE eine horizontale Scrollleiste am
    Chat-Fenster erzeugen - overflow-wrap:anywhere bricht auch mitten im Wort, wenn noetig. Der
    Chat-Root/das Nachrichten-Fenster selbst bekommt bewusst KEIN overflow-x - nur pre/code
    (siehe unten) duerfen fuer Codebloecke eigenstaendig horizontal scrollen. */
 overflow-wrap: anywhere;
 word-break: break-word;
}
.kiagent-bubble pre[b-a6bsfebvlr] {
 max-width: 100%;
 overflow-x: auto;
 white-space: pre;
}
.kiagent-bubble pre code[b-a6bsfebvlr] {
 white-space: pre;
}
.kiagent-bubble.user[b-a6bsfebvlr] {
 background: #3A8AC3;
 color: #fff;
 border-bottom-right-radius: 2px;
}
.kiagent-bubble.assistant[b-a6bsfebvlr] {
 background: #fff;
 color: #222;
 border: 1px solid #e2e5e8;
 border-bottom-left-radius: 2px;
}
.kiagent-bubble code[b-a6bsfebvlr] {
 background: rgba(0,0,0,0.08);
 padding: 1px 4px;
 border-radius: 3px;
 font-family: Consolas, monospace;
 font-size: 0.9em;
}

.kiagent-tool-chip[b-a6bsfebvlr] {
 align-self: flex-start;
 background: #eef3f7;
 color: #3A8AC3;
 border: 1px solid #d5e3ec;
 border-radius: 12px;
 padding: 3px 10px;
 font-size: 0.75em;
 font-family: Consolas, monospace;
}

.kiagent-busy[b-a6bsfebvlr] {
 align-self: flex-start;
 color: #888;
 font-size: 0.85em;
 display: flex;
 align-items: center;
 gap: 4px;
}
.kiagent-busy-dot[b-a6bsfebvlr] {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: #60e6be;
 display: inline-block;
 animation: kiagent-blink-b-a6bsfebvlr 1s infinite ease-in-out;
}
.kiagent-busy-dot:nth-child(2)[b-a6bsfebvlr] { animation-delay: 0.15s; }
.kiagent-busy-dot:nth-child(3)[b-a6bsfebvlr] { animation-delay: 0.3s; }
@keyframes kiagent-blink-b-a6bsfebvlr {
 0%, 80%, 100% { opacity: 0.25; }
 40% { opacity: 1; }
}

.kiagent-error[b-a6bsfebvlr] {
 margin: 0 12px 8px 12px;
}

.kiagent-inputbar[b-a6bsfebvlr] {
 display: flex;
 align-items: stretch;
 gap: 6px;
 padding: 8px 12px 12px 12px;
 border-top: 1px solid #e2e5e8;
 background: #fff;
}

.kiagent-input[b-a6bsfebvlr] {
 flex: 1 1 auto;
 resize: none;
 border: 1px solid #ccd3d8;
 border-radius: 6px;
 padding: 8px 10px;
 font-family: inherit;
 font-size: 0.9em;
 line-height: 1.4;
 box-sizing: border-box;
}

.kiagent-send-btn[b-a6bsfebvlr] {
 flex: 0 0 auto;
 background: #3A8AC3;
 color: #fff;
 border: none;
 border-radius: 6px;
 padding: 0 18px;
 cursor: pointer;
}
.kiagent-send-btn:disabled[b-a6bsfebvlr] {
 background: #aac6d9;
 cursor: default;
}

/* --- Welle 1b: Chat-Upload (Ai/Plans/2026-07-04-morgen-fortschritt-kiagent.md) --- */
.kiagent-file-input-hidden[b-a6bsfebvlr] {
 display: none;
}

.kiagent-attach-btn[b-a6bsfebvlr] {
 flex: 0 0 auto;
 background: #fff;
 color: #3A8AC3;
 border: 1px solid #ccd3d8;
 border-radius: 6px;
 padding: 0 12px;
 cursor: pointer;
 font-size: 1.1em;
}
.kiagent-attach-btn:disabled[b-a6bsfebvlr] {
 color: #aac6d9;
 cursor: default;
}

.kiagent-mic-btn.kiagent-mic-active[b-a6bsfebvlr] {
 color: #ca0d59;
 border-color: #ca0d59;
 animation: kiagent-mic-pulse-b-a6bsfebvlr 1.2s ease-in-out infinite;
}

@keyframes kiagent-mic-pulse-b-a6bsfebvlr {
 0%, 100% { box-shadow: 0 0 0 0 rgba(202, 13, 89, 0.35); }
 50% { box-shadow: 0 0 0 6px rgba(202, 13, 89, 0); }
}

.kiagent-dropzone[b-a6bsfebvlr] {
 position: relative;
 transition: background-color 0.15s ease, outline-color 0.15s ease;
 outline: 2px dashed transparent;
 outline-offset: -4px;
}
.kiagent-dropzone-active[b-a6bsfebvlr] {
 background-color: rgba(58, 138, 195, 0.08);
 outline-color: #3A8AC3;
}
.kiagent-dropzone-hint[b-a6bsfebvlr] {
 display: none;
 position: sticky;
 bottom: 4px;
 text-align: center;
 color: #3A8AC3;
 font-size: 0.85em;
 pointer-events: none;
}
.kiagent-dropzone-active .kiagent-dropzone-hint[b-a6bsfebvlr] {
 display: block;
}

.kiagent-attached-files[b-a6bsfebvlr] {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 padding: 6px 12px 0 12px;
}
.kiagent-attached-chip[b-a6bsfebvlr] {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 background: #eef4f9;
 border: 1px solid #ccd3d8;
 border-radius: 12px;
 padding: 3px 10px;
 font-size: 0.82em;
 color: #333;
 max-width: 260px;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}
.kiagent-attached-remove[b-a6bsfebvlr] {
 color: #ca0d59;
 text-decoration: none;
 font-weight: bold;
 cursor: pointer;
}

/* --- Kurzbutton-Dialog (B3) --- */
.kiagent-modal-backdrop[b-a6bsfebvlr] {
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.4);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 1000;
}
.kiagent-modal[b-a6bsfebvlr] {
 background: #fff;
 border-radius: 8px;
 padding: 16px 20px;
 width: 480px;
 max-width: 92vw;
 box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.kiagent-modal-actions[b-a6bsfebvlr] {
 display: flex;
 justify-content: flex-end;
 gap: 8px;
 margin-top: 10px;
}

/* Abbrechen-Button (waehrend qBusy statt Senden) - rot als Akzent, gleiche Groesse wie Senden. */
.kiagent-cancel-btn[b-a6bsfebvlr] {
 flex: 0 0 auto;
 background: #ca0d59;
 color: #fff;
 border: none;
 border-radius: 6px;
 padding: 0 18px;
 cursor: pointer;
}
.kiagent-cancel-btn:hover[b-a6bsfebvlr] {
 background: #a80a49;
}

/* "Laedt hoch"-Platzhalter-Chip (Upload laeuft noch) - dezent gelblich abgesetzt vom fertigen Chip. */
.kiagent-uploading-chip[b-a6bsfebvlr] {
 background: #fff8e6;
 border-color: #e6cf8a;
 color: #8a6d1b;
 font-style: italic;
}

/* Inline-Bestaetigung beim Kurzbutton-Loeschen (nutzt kiagent-confirm-delete, aber ohne absolute
   Positionierung, damit es in der Button-Leiste mitfliesst). */
.kiagent-confirm-template[b-a6bsfebvlr] {
 position: static;
 display: inline-flex;
 align-items: center;
 gap: 4px;
 top: auto;
 right: auto;
}

/* A11y/Mobile (Audit 2026-07-04): bis dahin gab es keine einzige Media-Query - auf schmalen Fenstern
   (abgekoppeltes Fenster verkleinert, Tablet-Hochformat) nahm die 220px-Sidebar zu viel Platz weg und
   die Bubbles/Buttons liefen aus dem Layout. */
@media (max-width: 600px) {
 .kiagent-root[b-a6bsfebvlr] {
  height: calc(100vh - 80px);
 }
 .kiagent-sidebar[b-a6bsfebvlr] {
  width: 44px;
  flex: 0 0 44px;
 }
 .kiagent-sidebar:not(.collapsed)[b-a6bsfebvlr] {
  position: absolute;
  z-index: 20;
  width: 200px;
  flex-basis: 200px;
  height: 100%;
  box-shadow: 2px 0 8px rgba(0,0,0,0.2);
 }
 .kiagent-bubble[b-a6bsfebvlr] {
  max-width: 94%;
 }
 .kiagent-templates[b-a6bsfebvlr] {
  gap: 6px;
 }
 .kiagent-inputbar[b-a6bsfebvlr] {
  flex-wrap: wrap;
 }
 .kiagent-input[b-a6bsfebvlr] {
  flex: 1 1 100%;
  order: -1;
 }
}

/* Befund A T5 (2026-07-07): Ja/Nein-Buttons unter einer offenen Bestaetigungs-Rueckfrage */
.kiagent-confirm-actions[b-a6bsfebvlr] {
 display: flex;
 gap: 8px;
 margin: 4px 0 8px 8px;
}
.kiagent-confirm-actions .btn[b-a6bsfebvlr] {
 min-width: 64px;
}

/* Task 4 (Plan-Modus, 2026-07-23): Plan-Karte fuer eine offene ProposePlan-Bestaetigung - nummerierte
   Schrittliste + Ausfuehren (gruen)/Abbrechen (rot), Brand-Farben siehe Ai/CLAUDE.md. */
.kiagent-plan-card[b-a6bsfebvlr] {
 margin: 4px 0 8px 8px;
 padding: 10px 14px;
 border: 1px solid rgba(58, 138, 195, 0.35);
 border-radius: 8px;
 background: rgba(58, 138, 195, 0.06);
 max-width: 520px;
}
.kiagent-plan-goal[b-a6bsfebvlr] {
 font-weight: 600;
 margin-bottom: 6px;
}
.kiagent-plan-steps[b-a6bsfebvlr] {
 margin: 0 0 10px 0;
 padding-left: 20px;
}
.kiagent-plan-steps li[b-a6bsfebvlr] {
 margin-bottom: 2px;
}
.kiagent-plan-actions[b-a6bsfebvlr] {
 display: flex;
 gap: 8px;
}
.kiagent-plan-run[b-a6bsfebvlr] {
 background-color: #60e6be;
 border-color: #60e6be;
 color: #0a2e26;
 font-weight: 600;
}
.kiagent-plan-run:hover[b-a6bsfebvlr] {
 background-color: #4fd6ad;
 border-color: #4fd6ad;
}
.kiagent-plan-cancel[b-a6bsfebvlr] {
 background-color: #ca0d59;
 border-color: #ca0d59;
 color: #fff;
 font-weight: 600;
}
.kiagent-plan-cancel:hover[b-a6bsfebvlr] {
 background-color: #b30b4e;
 border-color: #b30b4e;
}