@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --slate: #ffffff; --slate-mid: #f4f9f4; --slate-lt: #d6ead6;
  --cream: #1a2e1a; --cream-dim: #4a6e4a;
  --tomato: #2e7d32; --tomato-lt: #43a047; --herb: #1b5e20;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background: var(--slate); color: var(--cream); height: 100dvh; overflow: hidden; }

.app { display: flex; flex-direction: column; height: 100%; }

/* Header & UI */
header { background: var(--slate-mid); border-bottom: 1px solid var(--slate-lt); padding: 0 16px; display: flex; align-items: center; height: 60px; }
.logo-text { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; margin-left: 10px; }
.logo-text span { color: var(--tomato); }
.header-right { margin-left: auto; display: flex; gap: 8px; }

/* Chat-Bereich */
#messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 10px; }
.msg.user { flex-direction: row-reverse; }
.bubble { padding: 13px 15px; border-radius: 16px; max-width: 80%; }
.bot .bubble { background: var(--slate-mid); border: 1px solid var(--slate-lt); }
.user .bubble { background: var(--tomato); color: white; }

/* Formular-Elemente (aus deinen Screenshots) */
.form-group { margin-bottom: 15px; }
.form-label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 14px; }
input, select, textarea { width: 100%; padding: 12px; border: 1px solid var(--slate-lt); border-radius: 12px; font-family: 'Inter'; }

/* Buttons */
.btn-save { width: 100%; background: var(--tomato); color: white; padding: 15px; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; }
.icon-btn { background: var(--slate-lt); border: none; padding: 10px; border-radius: 10px; cursor: pointer; }