/* ─── BMO Chat Modul ────────────────────────────────────────────
 * Ersetzt die alte BMO-Verlauf-Karte. Lebt im mittleren 6er-Slot
 * des Dashboard-Grids, nimmt die App-eigene .glass-Flaeche als
 * Container (also NICHT die .chat.glass-Regel aus der Standalone-
 * Demo -- die App hat ihre eigene Glass-Kosmetik in dashboard.css).
 *
 * Alle Klassen sind unter .chat* / .composer* / .msg* namespaced,
 * kein Konflikt mit bestehenden Dashboard-Klassen.
 * ───────────────────────────────────────────────────────────── */

.chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  /* Fixe Hoehe -- Termine + Todos haben in der gleichen Row dieselbe
     Hoehe (siehe dashboard.css `#card-termine, #card-todos`), Cards
     fluchten oben UND unten buendig. min/max gleich gross verhindert,
     dass Grid die Row durch intrinsisch hoeheren Content aufblaest.
     chat-msgs scrollt bei Overflow. */
  height: 32vh;
  min-height: 32vh;
  max-height: 32vh;
}

/* Message-Area ───────────────────────────────────────────────── */
.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(125,211,252,0.15) transparent;
  min-height: 0;
}
.chat-msgs::-webkit-scrollbar { width: 6px; }
.chat-msgs::-webkit-scrollbar-thumb {
  background: rgba(125,211,252,0.15);
  border-radius: 3px;
}

.msg {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 82%;
  animation: chat-msg-in 0.3s ease-out both;
}
@keyframes chat-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg.me  { align-self: flex-end;   align-items: flex-end; }
.msg.bmo { align-self: flex-start; align-items: flex-start; }

.msg-body {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg.me .msg-body {
  background: linear-gradient(180deg, rgba(125,211,252,0.22), rgba(125,211,252,0.08));
  border: 1px solid rgba(125,211,252,0.3);
  color: #e6f6ff;
  border-bottom-right-radius: 4px;
}
.msg.bmo .msg-body {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  color: #e6e4df;
  border-bottom-left-radius: 4px;
}
.msg-body.dim { opacity: 0.55; font-style: italic; }

.msg-meta {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 9px;
  color: rgba(230,228,223,0.35);
  letter-spacing: 0.12em;
  padding: 0 4px;
}
.msg.bmo .msg-meta::before { content: 'BMO · '; color: rgba(125,211,252,0.6); }
.msg.me  .msg-meta::before { content: 'DU · ';  color: rgba(230,228,223,0.45); }

/* Typing-Indicator ──────────────────────────────────────────── */
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.typing__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(125,211,252,0.7);
  animation: chat-typing 1.1s ease-in-out infinite;
}
.typing__dot:nth-child(2) { animation-delay: 0.18s; }
.typing__dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes chat-typing {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* Composer ──────────────────────────────────────────────────── */
.chat-foot {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.composer {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 5px 5px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.2s, background 0.2s;
}
.composer:focus-within {
  border-color: rgba(125,211,252,0.35);
  background: linear-gradient(180deg, rgba(125,211,252,0.04), rgba(125,211,252,0.01));
}
.composer__input {
  flex: 1; min-width: 0;
  background: transparent;
  border: none; outline: none;
  color: #e6e4df;
  font: inherit;
  font-size: 13px;
  padding: 7px 0;
}
.composer__input::placeholder { color: rgba(230,228,223,0.35); }

.composer__btn {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(230,228,223,0.5);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  font: inherit;
  flex-shrink: 0;
}
.composer__btn:hover { color: #7dd3fc; background: rgba(125,211,252,0.08); }
.composer__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.composer__btn:disabled:hover { color: rgba(230,228,223,0.5); background: transparent; }

.composer__mic.recording {
  color: #fca5a5;
  background: rgba(252,165,165,0.14);
  border-color: rgba(252,165,165,0.35);
  animation: chat-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes chat-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252,165,165,0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(252,165,165,0); }
}

.composer__send {
  background: linear-gradient(180deg, rgba(125,211,252,0.35), rgba(125,211,252,0.12));
  border-color: rgba(125,211,252,0.4);
  color: #e6f6ff;
}
.composer__send:hover {
  background: linear-gradient(180deg, rgba(125,211,252,0.5), rgba(125,211,252,0.18));
  color: #faf9f5;
}
.composer__send:disabled {
  background: linear-gradient(180deg, rgba(125,211,252,0.35), rgba(125,211,252,0.12));
  color: #e6f6ff;
}

/* Reasoning-Toggle: violetter Akzent wenn aktiv, dimmt sich beim Hover. */
.composer__think.active {
  color: #c4b5fd;
  background: rgba(167,139,250,0.12);
  border-color: rgba(167,139,250,0.4);
}
.composer__think.active:hover {
  color: #ddd6fe;
  background: rgba(167,139,250,0.18);
}

/* Attach-Button: bernsteinfarbener Akzent wenn ein File ausgewaehlt ist. */
.composer__attach.active {
  color: #fbbf24;
  background: rgba(251,191,36,0.12);
  border-color: rgba(251,191,36,0.4);
}
.composer__attach.active:hover {
  color: #fcd34d;
  background: rgba(251,191,36,0.18);
}

/* Attachment-Indicator-Pille oberhalb des Composers. Erscheint nur wenn
   ein File geladen ist; "x" loescht den Anhang wieder. */
.chat-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 4px 8px 4px 10px;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 999px;
  color: #fbbf24;
  font-size: 0.85em;
  max-width: 100%;
}
.chat-attachment[hidden] { display: none; }
.chat-attachment__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.chat-attachment__size {
  color: rgba(251,191,36,0.55);
  font-size: 0.85em;
}
.chat-attachment__remove {
  background: transparent;
  border: none;
  color: rgba(251,191,36,0.6);
  cursor: pointer;
  font-size: 1.05em;
  padding: 0 4px;
  line-height: 1;
}
.chat-attachment__remove:hover { color: #fcd34d; }
.chat-attachment__remove:disabled { opacity: 0.4; cursor: not-allowed; }

/* <think>-Block in BMO-Replies als Spoiler oberhalb der Antwort. */
.msg-think {
  margin: 0 0 8px 0;
  border-left: 2px solid rgba(167,139,250,0.35);
  padding: 4px 0 4px 10px;
  font-size: 0.86em;
  color: rgba(230,228,223,0.55);
}
.msg-think__head {
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(167,139,250,0.7);
  user-select: none;
  list-style: none;
}
.msg-think__head::-webkit-details-marker { display: none; }
.msg-think__head::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s;
}
.msg-think[open] .msg-think__head::before { content: "▾ "; }
.msg-think__body {
  margin-top: 6px;
  white-space: pre-wrap;
  line-height: 1.45;
}