:root {
  --gold-1: #ffe9a8;
  --gold-2: #ffc04d;
  --gold-3: #ff9e1b;
  --gold-deep: #b86a12;
  --bg-0: #0a0a0c;
  --text: #f3ead6;
  --muted: #9b927f;
  --side-bg: #100e14;
  --side-line: #221f2a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(120% 100% at 50% 0%, #17131c 0%, var(--bg-0) 62%);
  color: var(--text);
  overflow: hidden;
}

/* ================= Layout: Seitenleiste + Hauptbereich ================= */
#app { display: flex; height: 100vh; }

#sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--side-bg);
  border-right: 1px solid var(--side-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s ease, margin-left 0.25s ease;
}
/* Eingeklappt (grosser Bildschirm): Leiste rausschieben, Chat bekommt Platz */
#app.nav-hidden #sidebar { margin-left: -261px; }
.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--side-line);
}
#new-chat {
  width: 34px; height: 34px;
  border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
  color: #241200; font-size: 20px; font-weight: 700;
  cursor: pointer; line-height: 1;
  transition: filter 0.2s, transform 0.1s;
}
#new-chat:hover { filter: brightness(1.08); }
#new-chat:active { transform: scale(0.94); }

#chat-list { flex: 1; overflow-y: auto; padding: 8px; }
.chat-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-item:hover { background: #1a1720; }
.chat-item.active { background: rgba(255, 170, 70, 0.12); border: 1px solid rgba(255, 170, 70, 0.25); }
.chat-title {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.chat-del {
  border: none; background: none; cursor: pointer;
  font-size: 13px; opacity: 0; transition: opacity 0.15s;
  filter: grayscale(0.3);
}
.chat-item:hover .chat-del { opacity: 0.7; }
.chat-del:hover { opacity: 1; }

.side-foot { padding: 12px; border-top: 1px solid var(--side-line); }
#logout {
  width: 100%;
  padding: 9px;
  border: 1px solid var(--side-line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, color 0.15s;
}
#logout:hover { background: #1a1720; color: var(--text); }

#backdrop { display: none; }

#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 0;
}
#main > * { width: 100%; max-width: 780px; margin-left: auto; margin-right: auto; }

/* ---------- Topbar ---------- */
#topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
}
#menu-btn {
  display: block;
  border: none; background: none; color: var(--gold-2);
  font-size: 22px; cursor: pointer; line-height: 1;
}
.brand {
  font-weight: 700;
  letter-spacing: 0.5em;
  font-size: 15px;
  padding-left: 0.5em;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#current-title {
  flex: 1;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #555;
  transition: background 0.3s;
}
.status.ok::before  { background: #4ad07a; box-shadow: 0 0 8px #4ad07a; }
.status.off::before { background: #e0683c; box-shadow: 0 0 8px #e0683c; }

/* ---------- Orb ---------- */
#stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0 2px;
}
#orb-wrap { position: relative; width: 200px; height: 200px; display: grid; place-items: center; }
#orb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#orb {
  position: relative;
  width: 112px; height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
      var(--gold-1) 0%, var(--gold-2) 36%, var(--gold-3) 62%, var(--gold-deep) 100%);
  box-shadow:
    0 0 18px 4px rgba(255, 170, 60, 0.55),
    0 0 60px 12px rgba(255, 150, 40, 0.35),
    0 0 120px 30px rgba(255, 130, 20, 0.18),
    inset 0 0 26px rgba(255, 240, 200, 0.5);
  animation: breathe 5s ease-in-out infinite;
}
#orb::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      transparent 0deg, rgba(255, 255, 230, 0.35) 60deg, transparent 150deg);
  mix-blend-mode: screen;
  animation: spin 9s linear infinite;
}
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }
body.thinking #orb { animation: breathe 1.5s ease-in-out infinite; }
body.thinking #orb::after { animation-duration: 2.2s; }
body.speaking #orb { animation: breathe 2.2s ease-in-out infinite; }

#caption {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Chat ---------- */
#chat {
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 16px;
  line-height: 1.5;
  font-size: 15px;
  white-space: pre-wrap;
  word-wrap: break-word;
  animation: rise 0.25s ease;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg.user {
  align-self: flex-end;
  background: #26242b;
  border: 1px solid #34313a;
  border-bottom-right-radius: 5px;
}
.msg.lara {
  align-self: flex-start;
  background: linear-gradient(180deg, rgba(255, 180, 70, 0.12), rgba(255, 150, 40, 0.05));
  border: 1px solid rgba(255, 170, 70, 0.25);
  border-bottom-left-radius: 5px;
}
.msg.lara .who {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 4px;
}
.dots::after { content: ""; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---------- Composer ---------- */
#composer { display: flex; gap: 10px; padding: 14px 20px 22px; }
#input {
  flex: 1;
  background: #1a1920;
  border: 1px solid #2e2b34;
  border-radius: 14px;
  padding: 13px 16px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border 0.2s;
}
#input:focus { border-color: rgba(255, 170, 70, 0.5); }
#send {
  width: 50px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
  color: #241200;
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.2s;
}
#send:hover { filter: brightness(1.08); }
#send:active { transform: scale(0.94); }
#send:disabled { opacity: 0.5; cursor: default; }

#chat::-webkit-scrollbar, #chat-list::-webkit-scrollbar { width: 8px; }
#chat::-webkit-scrollbar-thumb, #chat-list::-webkit-scrollbar-thumb { background: #2c2933; border-radius: 4px; }

/* ================= Handy / schmale Bildschirme ================= */
@media (max-width: 720px) {
  #menu-btn { display: block; }
  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 30;
    transform: translateX(-100%);
  }
  #sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.6); }
  #backdrop.show {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 20;
  }
  #orb-wrap { width: 150px; height: 150px; }
  #orb { width: 88px; height: 88px; }
}

/* ================= Login-Seite ================= */
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
#login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 300px;
  max-width: 88vw;
  text-align: center;
}
.login-orb {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
      var(--gold-1) 0%, var(--gold-2) 36%, var(--gold-3) 62%, var(--gold-deep) 100%);
  box-shadow: 0 0 30px 8px rgba(255, 150, 40, 0.4), inset 0 0 20px rgba(255, 240, 200, 0.5);
  animation: breathe 5s ease-in-out infinite;
  margin-bottom: 4px;
}
.login-brand {
  font-weight: 700; letter-spacing: 0.5em; font-size: 18px; padding-left: 0.5em;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-hint { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
#login-form input {
  width: 100%;
  background: #1a1920;
  border: 1px solid #2e2b34;
  border-radius: 12px;
  padding: 13px 16px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border 0.2s;
}
#login-form input:focus { border-color: rgba(255, 170, 70, 0.5); }
#login-form button {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
  color: #241200;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
#login-form button:hover { filter: brightness(1.08); }
#login-form button:active { transform: scale(0.97); }
.login-error { color: #e0683c; font-size: 13px; min-height: 18px; }

/* ================= Zentrale-Knopf in der Seitenleiste ================= */
.side-foot { display: flex; flex-direction: column; gap: 8px; }
#admin-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 9px;
  border: 1px solid rgba(255, 170, 70, 0.3);
  border-radius: 10px;
  background: rgba(255, 170, 70, 0.08);
  color: var(--gold-2);
  font-size: 13px;
  transition: background 0.15s;
}
#admin-btn:hover { background: rgba(255, 170, 70, 0.16); }

/* ================= Admin-Seite (Laras Zentrale) ================= */
body.admin-page { overflow-y: auto; }
#admin {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 18px 60px;
}
.admin-top {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 4px 20px;
}
.admin-top .back {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s;
}
.admin-top .back:hover { color: var(--text); }
.admin-top .brand {
  font-weight: 700;
  letter-spacing: 0.35em;
  font-size: 13px;
  padding-left: 0.35em;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card {
  background: #131118;
  border: 1px solid #221f2a;
  border-radius: 16px;
  padding: 18px 18px 20px;
  margin-bottom: 18px;
}
.card h2 { font-size: 17px; margin-bottom: 6px; font-weight: 600; }
.card-hint { color: var(--muted); font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
.card label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 5px;
}
.card input,
.card textarea,
.k-item input,
.k-item textarea {
  width: 100%;
  background: #1a1920;
  border: 1px solid #2e2b34;
  border-radius: 11px;
  padding: 11px 13px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border 0.2s;
}
.card input:focus,
.card textarea:focus,
.k-item input:focus,
.k-item textarea:focus { border-color: rgba(255, 170, 70, 0.5); }
.card textarea { resize: vertical; line-height: 1.5; }

.card button {
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
  color: #241200;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  transition: filter 0.2s, transform 0.1s;
}
.card button:hover { filter: brightness(1.08); }
.card button:active { transform: scale(0.97); }
.row-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.saved { color: #4ad07a; font-size: 13px; }

/* Wissen-Einträge */
.k-item {
  border: 1px solid #2a2733;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: #16141c;
}
.k-item.off { opacity: 0.55; }
.k-item-title { margin-bottom: 8px; font-weight: 600; }
.k-item-content { margin-bottom: 10px; }
.k-item-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.k-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; margin-right: auto; }
.k-toggle input { width: auto; }
.k-save { padding: 7px 14px !important; font-size: 13px !important; }
.k-del {
  padding: 7px 14px !important;
  font-size: 13px !important;
  background: transparent !important;
  color: #e0683c !important;
  border: 1px solid rgba(224, 104, 60, 0.4) !important;
}
.k-empty { color: var(--muted); font-size: 13px; padding: 6px 0 12px; }
.k-add { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.k-add textarea { resize: vertical; }

/* Modell-Auswahl */
.model-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.model-opt {
  border: 1px solid #2a2733;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border 0.15s, background 0.15s;
}
.model-opt:hover { background: #16141c; }
.model-opt.active {
  border-color: rgba(255, 170, 70, 0.55);
  background: rgba(255, 170, 70, 0.1);
}
.model-opt .m-name { font-weight: 600; font-size: 14px; margin-bottom: 3px; }
.model-opt .m-note { color: var(--muted); font-size: 12px; }

/* Guthaben & Verbrauch */
.coins-grid { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.coin-box {
  flex: 1 1 140px;
  border: 1px solid #2a2733;
  border-radius: 14px;
  padding: 14px;
  background: #16141c;
}
.coin-label { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.coin-big {
  font-size: 24px; font-weight: 700; line-height: 1.1;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.coin-big.low { background: none; color: #e0683c; -webkit-text-fill-color: #e0683c; }
.coin-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }

.coin-bar-wrap { margin: 4px 0 14px; }
.coin-bar { height: 8px; background: #1a1920; border-radius: 6px; overflow: hidden; }
.coin-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-1), var(--gold-3));
  transition: width 0.4s ease;
}
.coin-bar-fill.low { background: #e0683c; }

.coin-models { margin-bottom: 6px; }
.coin-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid #221f2a; font-size: 13px;
}
.coin-row:last-child { border-bottom: none; }
.coin-row .cm-name { font-weight: 600; min-width: 78px; }
.coin-row .cm-meta { color: var(--muted); font-size: 12px; margin-right: auto; }
.coin-row .cm-cost { color: var(--gold-2); font-weight: 600; }
.coin-empty { color: var(--muted); font-size: 13px; padding: 6px 0 10px; }

.coin-credit-row { display: flex; gap: 10px; align-items: center; }
.coin-credit-row input { flex: 1; }
.coin-credit-row button { padding: 11px 18px !important; white-space: nowrap; }
.btn-ghost {
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid #2e2b34 !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
}