/* ===== VK Web-Assistent — Chat-UI (V237, 02.07.2026) =====================================
   Passend zum Seiten-Stil (Navy/Gold/Creme), modern, benutzerfreundlich.
   Reines Frontend: assistent-chat.js prüft den Endpunkt; offline -> ehrlicher Hinweis. */

.vkchat-wrap{ max-width:820px; margin:0 auto; }
.vkchat{ background:var(--card,#fff); border:1px solid var(--line,#e3ddcf); border-radius:18px;
  box-shadow:0 10px 34px rgba(14,42,77,.10); overflow:hidden; display:flex; flex-direction:column;
  height:min(72vh,640px); }

/* Kopfzeile */
.vkchat-head{ display:flex; align-items:center; gap:12px; padding:14px 18px;
  background:linear-gradient(135deg,var(--navy,#0e2a4d),#16406f); color:#fff; }
.vkchat-ava{ width:42px; height:42px; border-radius:12px; background:#0b1f39; border:1.5px solid var(--gold,#c9a24a);
  display:grid; place-items:center; font-family:Georgia,serif; font-weight:700; color:#e3c879; font-size:15px; flex:none; }
.vkchat-head .t{ font-weight:700; font-size:15.5px; letter-spacing:.2px; }
.vkchat-head .s{ font-size:12px; color:#c7d3e4; display:flex; align-items:center; gap:6px; margin-top:1px; }
.vkchat-dot{ width:8px; height:8px; border-radius:50%; background:#9aa7b8; flex:none; }
.vkchat-dot.on{ background:#37d67a; box-shadow:0 0 0 3px rgba(55,214,122,.22); }
.vkchat-dot.off{ background:#e8b84c; box-shadow:0 0 0 3px rgba(232,184,76,.20); }
.vkchat-langs{ margin-left:auto; font-size:11px; color:#b9c6da; text-align:right; line-height:1.4; }

/* Verlauf */
.vkchat-log{ flex:1; overflow-y:auto; padding:18px 16px 8px; background:
  linear-gradient(180deg,var(--cream,#f6f3ec) 0%,#fbfaf6 100%); scroll-behavior:smooth; }
.vkmsg{ display:flex; gap:10px; margin:0 0 14px; animation:vkmsgin .25s ease both; }
@keyframes vkmsgin{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.vkmsg .ava{ width:30px; height:30px; border-radius:9px; background:var(--navy,#0e2a4d); color:#e3c879;
  display:grid; place-items:center; font-size:11px; font-weight:700; font-family:Georgia,serif; flex:none; margin-top:2px; }
.vkmsg .bub{ max-width:78%; padding:10px 14px; border-radius:14px; font-size:14.5px; line-height:1.55;
  white-space:pre-wrap; word-wrap:break-word; }
.vkmsg.bot .bub{ background:#fff; border:1px solid var(--line,#e3ddcf); border-top-left-radius:4px; color:#1d2b45; }
.vkmsg.me{ flex-direction:row-reverse; }
.vkmsg.me .bub{ background:linear-gradient(135deg,var(--navy,#0e2a4d),#1b3d6b); color:#fff; border-top-right-radius:4px; }
.vkmsg .meta{ font-size:10.5px; color:#98a0ad; margin-top:4px; }
.vkmsg.me .meta{ text-align:right; }

/* Tipp-Indikator */
.vktyping{ display:inline-flex; gap:5px; padding:12px 16px; }
.vktyping i{ width:7px; height:7px; border-radius:50%; background:#b9c0cc; animation:vkty 1.1s infinite; }
.vktyping i:nth-child(2){ animation-delay:.15s } .vktyping i:nth-child(3){ animation-delay:.3s }
@keyframes vkty{ 0%,60%,100%{ transform:none; opacity:.5 } 30%{ transform:translateY(-5px); opacity:1 } }

/* Schnell-Antworten */
.vkchips{ display:flex; gap:8px; flex-wrap:wrap; padding:6px 16px 10px; background:#fbfaf6; }
.vkchip{ border:1px solid var(--gold,#c9a24a); color:var(--navy,#0e2a4d); background:#fff; border-radius:999px;
  padding:7px 13px; font-size:12.5px; cursor:pointer; transition:all .16s ease; font-weight:600; }
.vkchip:hover{ background:var(--gold,#c9a24a); color:#fff; transform:translateY(-1px); box-shadow:0 4px 10px rgba(201,162,74,.35); }

/* Offline-Banner */
.vkoffline{ margin:10px 16px; border:1px dashed var(--gold,#c9a24a); background:#fdf8ee; border-radius:12px;
  padding:12px 14px; font-size:13px; color:#5d5335; line-height:1.55; }
.vkoffline b{ color:var(--navy,#0e2a4d); }
.vkoffline .row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* Anhang-/Audio-Chips über dem Eingabefeld */
.vkattach-bar{ display:flex; gap:8px; flex-wrap:wrap; padding:0 16px; }
.vkattach{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line,#e3ddcf);
  border-radius:10px; padding:6px 10px; font-size:12px; color:#33415a; }
.vkattach img{ width:26px; height:26px; object-fit:cover; border-radius:6px; }
.vkattach .x{ cursor:pointer; color:#b04a4a; font-weight:700; padding:0 2px; }

/* Eingabezeile */
.vkchat-input{ display:flex; align-items:flex-end; gap:8px; padding:12px 14px; background:#fff;
  border-top:1px solid var(--line,#e3ddcf); }
.vkbtn-ic{ width:40px; height:40px; border-radius:12px; border:1px solid var(--line,#e3ddcf); background:#fbfaf6;
  display:grid; place-items:center; cursor:pointer; transition:all .15s ease; flex:none; color:#33415a; }
.vkbtn-ic:hover{ border-color:var(--gold,#c9a24a); color:var(--navy,#0e2a4d); transform:translateY(-1px); }
.vkbtn-ic svg{ width:19px; height:19px; }
.vkbtn-ic.rec{ background:#b04a4a; border-color:#b04a4a; color:#fff; animation:vkpulse 1.2s infinite; }
@keyframes vkpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(176,74,74,.4)} 50%{ box-shadow:0 0 0 8px rgba(176,74,74,0)} }
.vkchat-input textarea{ flex:1; resize:none; border:1px solid var(--line,#e3ddcf); border-radius:12px;
  padding:10px 13px; font:inherit; font-size:14.5px; line-height:1.45; max-height:120px; min-height:40px;
  outline:none; transition:border .15s ease; background:#fbfaf6; }
.vkchat-input textarea:focus{ border-color:var(--gold,#c9a24a); background:#fff; }
.vkchat-input textarea:disabled{ background:#f3f1ea; color:#9a927d; cursor:not-allowed; }
.vksend{ width:44px; height:44px; border-radius:13px; border:0; cursor:pointer; flex:none;
  background:linear-gradient(135deg,var(--gold,#c9a24a),#b8923f); color:#fff; display:grid; place-items:center;
  transition:all .15s ease; }
.vksend:hover:not(:disabled){ transform:translateY(-1px) scale(1.03); box-shadow:0 6px 14px rgba(201,162,74,.4); }
.vksend:disabled{ opacity:.45; cursor:not-allowed; }
.vksend svg{ width:20px; height:20px; }

/* Fußnote */
.vkchat-note{ text-align:center; font-size:11px; color:#98917e; padding:8px 14px 12px; background:#fff; }
.vkchat-note a{ color:var(--navy,#0e2a4d); }

@media (max-width:640px){
  .vkchat{ height:78vh; border-radius:14px; }
  .vkmsg .bub{ max-width:86%; }
  .vkchat-langs{ display:none; }
}

/* ── Dunkelmodus (19.09.2026) ─────────────────────────────────────────────
   Diese Datei hatte keine einzige Dunkelmodus-Regel und setzt feste weisse
   Flaechen. Im dunklen Modus wurde der Text hell, die Flaechen blieben weiss -
   gemessen 1,05 : 1 („weiss auf weiss“). Hier bekommen dieselben Flaechen die
   dunklen Kartentoene der Hauptseite; die Farbwelt bleibt unveraendert. */
:root[data-theme="dark"] .vkmsg.bot .bub,
:root[data-theme="dark"] .vkchip,
:root[data-theme="dark"] .vkattach,
:root[data-theme="dark"] .vkchat-input,
:root[data-theme="dark"] .vkchat-input textarea:focus,
:root[data-theme="dark"] .vkchat-note{background:var(--cream,#13233d)}
:root[data-theme="dark"] .vkmsg.bot .bub{color:var(--ink,#e8eef8);border-color:var(--line,#26374f)}
:root[data-theme="dark"] .vkchip{color:var(--ink,#e8eef8)}
:root[data-theme="dark"] .vkattach{color:var(--ink,#e8eef8);border-color:var(--line,#26374f)}
:root[data-theme="dark"] .vkchat-note{color:var(--muted,#a7b6cd)}
:root[data-theme="dark"] .vkchat-note a{color:var(--gold-300,#efd17e)}
/* Auch im Hellmodus zu schwach: #98917e auf Weiss ergab 3,14 : 1. */
.vkchat-note{color:#6f6a5b}
/* Das Flugzeug-Symbol sitzt auf Telegramm-Blau; Weiss kam auf 3,02 : 1. */
.vkchat-send .ic,.vkchip .ic,span.ic{text-shadow:0 1px 2px rgba(0,0,0,.45)}
/* Auch dieser Kasten hatte eine feste helle Flaeche (#fdf8ee): darauf stand im
   Dunkelmodus der helle Umriss-Knopf „Kontaktformular“ mit 1,05 : 1. */
:root[data-theme="dark"] .vkoffline{background:var(--navy-50,#172a44)}
:root[data-theme="dark"] .vkoffline a.btn-outline{color:var(--ink,#e8eef8);border-color:var(--line-cool,#2b3c55)}
:root[data-theme="dark"] .vkoffline span.btn-navy,
:root[data-theme="dark"] span.btn-navy{color:#fff}
/* Die Texte im Offline-Kasten haben feste helle Werte (#5d5335, --navy). */
:root[data-theme="dark"] .vkoffline{color:var(--ink,#e8eef8)}
:root[data-theme="dark"] .vkoffline b{color:#eef3fb}
/* Der Status neben dem Punkt und das „demnächst“ im Telegram-Kasten nutzen
   --gold-700, das im Dunkelmodus nicht umdefiniert wird. */
:root[data-theme="dark"] #vkc-status,
:root[data-theme="dark"] .vkchat-head .s span{color:var(--gold-300,#efd17e)}
/* Das Telegram-Symbol: Weiss auf dem Telegramm-Blau kam auf 3,02 : 1. Der Ton
   wird nur so weit abgedunkelt, dass Weiss darauf 4,6 : 1 erreicht. */
/* (Der Telegram-Ton wird direkt im Markup gesetzt.) */
.soon-note{font-size:12px;font-weight:700;color:var(--gold-700,#92701d)}
:root[data-theme="dark"] .soon-note{color:var(--gold-300,#efd17e)}