/*
Theme Name: RBKI Chat
Theme URI: https://rbki.de/
Author: ChatGPT
Description: Modern neon, full-width chatbot theme for RBKI.de.
Version: 1.2.3
Text Domain: rbki-chat
*/

:root{
  --bg0:#05060a;
  --bg1:#0a1022;

  --txt:#e9f2ff;
  --muted:rgba(233,242,255,.70);

  --stroke:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.06);
  --shadow:0 18px 55px rgba(0,0,0,.55);

  --cyan:#00e5ff;
  --pink:#ff2bd6;
  --green:#5bff9b;
  --violet:#8a5cff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--txt);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  /* Fallback: Nur aktiv, wenn functions.php kein Background-Image setzt */
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(0,229,255,.10), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(255,43,214,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

/* Links */
a{ color:var(--txt); }
a:hover{ opacity:.92; }

/* Layout */
.rbki-shell{
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:18px 12px 40px;
  position:relative;
  z-index:1; /* wichtig, falls dein functions.php ein body::before Overlay nutzt */
}
@media (min-width:900px){
  .rbki-shell{ padding:26px 18px 52px; }
}

.rbki-topbar{ padding:10px 2px 16px; }
.rbki-brand{ display:flex; align-items:center; gap:12px; }
.rbki-dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 2px rgba(0,229,255,.18), 0 0 22px rgba(0,229,255,.25);
}
.rbki-title{ font-weight:950; letter-spacing:.3px; font-size:24px; }
.rbki-sub{ color:var(--muted); font-weight:650; font-size:13px; margin-top:2px; }

/* Main Chat Window */
.rbki-chatcard{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--stroke);
  border-radius:22px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow:hidden;
}

/* Chat Header */
.rbki-chathead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 14px;
  background:linear-gradient(90deg, rgba(0,229,255,.18), rgba(255,43,214,.14));
  border-bottom:1px solid rgba(255,255,255,.12);
}
.rbki-chatname{ font-weight:1000; font-size:18px; letter-spacing:.2px; }
.rbki-chatdesc{ color:rgba(233,242,255,.82); font-weight:650; font-size:13px; margin-top:4px; }
.rbki-status{ color:rgba(233,242,255,.85); font-weight:750; font-size:12px; text-align:right; }

/* Toolbar */
.rbki-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:12px 12px;
  background:rgba(0,0,0,.18);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.rbki-spacer{ flex:1 1 auto; }

.rbki-btn{
  min-height:48px;
  min-width:52px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:rgba(0,0,0,.28);
  color:var(--txt);
  font-weight:950;
  cursor:pointer;
  user-select:none;
  transition: transform .08s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.rbki-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,229,255,.45);
  box-shadow: 0 0 0 1px rgba(0,229,255,.20), 0 0 26px rgba(0,229,255,.22);
}
.rbki-btn:active{ transform: translateY(0); }
.rbki-btn.is-active{
  border-color: rgba(91,255,155,.65);
  background: rgba(91,255,155,.12);
  box-shadow: 0 0 0 1px rgba(91,255,155,.24), 0 0 22px rgba(91,255,155,.18);
}

/* Hint / Attachments */
.rbki-hint{ padding:10px 16px 0; color:var(--muted); font-size:13px; }
.rbki-attachments{ padding:10px 16px 0; display:flex; flex-wrap:wrap; gap:8px; }
.rbki-attachments .rbki-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:var(--txt);
  font-size:13px;
}

/* Output */
.rbki-out{
  height: min(62vh, 620px);
  overflow:auto;
  padding:14px 16px 10px;
  background:rgba(0,0,0,.12);
}

.rbki-msg{
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:12px 12px;
  background:rgba(0,0,0,.20);
  margin:0 0 12px;
  line-height:1.45;
}
.rbki-msg.user{ background:rgba(0,229,255,.08); border-color:rgba(0,229,255,.18); }
.rbki-msg.ai{ background:rgba(255,43,214,.06); border-color:rgba(255,43,214,.16); }
.rbki-msg.err{ background:rgba(255,91,110,.10); border-color:rgba(255,91,110,.40); }

.rbki-msg img{
  max-width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
}

/* Citations */
.rbki-cites{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
  color:var(--muted);
}
.rbki-cites ul{ margin:8px 0 0 18px; padding:0; }
.rbki-cites a{ opacity:.92; }

/* Input Row */
.rbki-inputwrap{
  display:flex;
  gap:12px;
  align-items:stretch;
  padding:12px 12px 14px;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.16);
}

.rbki-input{
  flex:1;
  min-height:72px;
  max-height:220px;
  resize:vertical;
  border-radius:18px;
  border:1px solid rgba(255,43,214,.35);
  /* bewusst hell, damit man gut tippen kann */
  background:rgba(255,255,255,.92);
  color:#0e1524;
  padding:14px 14px;
  font-size:16px;
  outline:none;
}
.rbki-input:focus{
  border-color: rgba(0,229,255,.55);
  box-shadow: 0 0 0 3px rgba(0,229,255,.18);
}

.rbki-send{
  min-width:120px;
  border-radius:18px;
  border:1px solid rgba(0,229,255,.40);
  background:linear-gradient(90deg, rgba(0,229,255,.92), rgba(255,43,214,.85));
  color:#061018;
  font-weight:1000;
  cursor:pointer;
  box-shadow: 0 0 0 1px rgba(0,229,255,.16), 0 12px 26px rgba(0,0,0,.42);
}
.rbki-send:disabled{ opacity:.60; cursor:not-allowed; }

/* Upload progress */
.rbki-uploadmeta{ padding:10px 16px 0; color:var(--muted); font-size:12.5px; }
.rbki-progress{ padding:10px 16px 16px; height:10px; }
.rbki-progressbar{
  height:10px;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(91,255,155,.95), rgba(0,229,255,.95), rgba(255,43,214,.85));
  box-shadow: 0 0 18px rgba(0,229,255,.22);
}

.rbki-file{ display:none; }

/* Footer legal */
.rbki-legal{
  margin-top:18px;
  padding:16px 14px 18px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(0,0,0,.18);
}
.rbki-legal h2{ margin:0 0 10px; font-size:18px; color:var(--txt); }

.rbki-footerbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
}
.rbki-footerbrand{ font-weight:900; color:rgba(233,242,255,.85); }
.rbki-footerlinks{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.rbki-footlink{
  border-radius: 14px;
  padding: 10px 12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:var(--txt);
  font-weight:900;
  cursor:pointer;
  transition: box-shadow .18s ease, border-color .18s ease, transform .08s ease, background .18s ease;
}
.rbki-footlink:hover{
  transform:translateY(-1px);
  border-color:rgba(0,229,255,.45);
  box-shadow:0 0 0 1px rgba(0,229,255,.18), 0 0 18px rgba(0,229,255,.16);
}
.rbki-footnote-text, .rbki-footcontact{
  margin-top: 10px;
  padding: 0 4px;
  color: rgba(233,242,255,.72);
  font-size: 13.5px;
}
.rbki-footcontact a{ color: rgba(0,229,255,.92); text-decoration:none; }
.rbki-footcontact a:hover{ text-decoration:underline; }

/* Responsive */
@media (max-width:680px){
  .rbki-title{ font-size:22px; }
  .rbki-inputwrap{ flex-direction:column; }
  .rbki-send{ width:100%; min-width:auto; min-height:52px; }
  .rbki-btn{ min-width:52px; }
  .rbki-out{ height:min(58vh, 560px); }

  .rbki-footerbar{ flex-direction:column; align-items:stretch; }
  .rbki-footerlinks{ justify-content:center; }
  .rbki-footlink{ width:100%; }
}