:root{
  --efeu:#054e5f;
  --efeu-dark:#033641;
  --curry:#dec400;
  --sonne:#fff488;
  --lachs:#ff865f;
  --sand:#edeade;
  --white:#ffffff;
  --ink:#0d2b33;
  /* Layout-Angleichung ans Dashboard, Farben bleiben Agentur-CD (Efeugrün) */
  --dash-accent:var(--efeu);
  --dash-accent-dark:var(--efeu-dark);
  --dash-ink:#0d2b33;
  --dash-gray:#7a8a8d;
  --dash-input-bg:#fafaf8;
  --dash-input-border:#d7dcdb;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'DM Sans', sans-serif;
  background:var(--sand);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.gate-logo{ height:26px; width:auto; object-fit:contain; display:block; }
.gate-brand-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }

#gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.gate-card{ width:100%; max-width:400px; background:var(--white); border-radius:16px; padding:40px 36px; box-shadow:0 2px 24px rgba(0,0,0,0.07); border:0.5px solid #e0ddd6; }
.gate-top{ padding:0; }
.gate-top h1{ font-size:22px; font-weight:600; color:#2c2c2a; margin:0; letter-spacing:normal; }
.gate-top p{ margin:0 0 28px; font-size:13px; line-height:1.5; color:#888; max-width:none; }
.gate-body{ padding:0; }
.dash-label{ font-size:12px; font-weight:400; color:#888; margin-bottom:6px; display:block; }
.dash-heading{ font-size:22px; font-weight:600; color:#2c2c2a; margin:0 0 8px; }
.dash-subtext{ font-size:13px; color:#888; line-height:1.5; margin:0 0 28px; }
.dash-subtext strong{ color:#2c2c2a; }
input[type=text], input[type=email]{ width:100%; padding:11px 14px; border-radius:8px; border:0.5px solid #d0cdc6; background:#fafaf8; font-family:inherit; font-size:15px; color:#2c2c2a; outline:none; transition:border-color .15s; }
input:focus{ border-color:var(--efeu); }
.pin-row{ display:flex; gap:10px; justify-content:center; margin-bottom:6px; }
.pin-box{
  width:64px; height:72px; padding:0; text-align:center; font-weight:700; font-size:32px;
  border-radius:10px; border:1.5px solid #d0cdc6; background:#fafaf8;
  color:#2c2c2a; font-family:inherit; outline:none; transition:border-color .15s;
}
.pin-box:focus{ border-color:var(--efeu); }
/* Spinner-Pfeile von type="number" ausblenden */
.pin-box::-webkit-outer-spin-button, .pin-box::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pin-box{ -moz-appearance:textfield; appearance:textfield; }
.btn{ width:100%; margin-top:18px; padding:12px; border:none; border-radius:8px; background:var(--efeu); color:var(--white); font-family:inherit; font-weight:500; font-size:15px; cursor:pointer; transition:background .15s; }
.btn:hover{ background:var(--efeu-dark); }
.btn:active{ transform:scale(0.99); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-ghost{ background:none; border:none; appearance:none; -webkit-appearance:none; color:#888; text-decoration:none; font-weight:400; font-size:13px; padding:10px; width:auto; margin:14px auto 0; display:block; text-align:center; cursor:pointer; font-family:inherit; }
.btn-ghost:hover{ color:var(--efeu); }
.error-msg{ background:#FCEBEB; color:#A32D2D; border-radius:8px; padding:10px 14px; font-size:13px; margin-top:14px; display:none; }

#app{ display:none; flex-direction:column; height:100vh; height:100dvh; }
.layout{ display:flex; flex:1; min-height:0; }
.sidebar{ width:280px; flex-shrink:0; background:var(--efeu); color:var(--sand); padding:16px 22px 26px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.sidebar-header{ position:relative; margin-bottom:28px; }
.sidebar-logo{ height:34px; width:auto; object-fit:contain; display:block; }
.sidebar-sub{ font-size:12.5px; opacity:.75; margin-top:14px; line-height:1.5; }
.quick-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; opacity:.6; margin:8px 0 10px; }
.quick-list{ display:flex; flex-direction:column; gap:6px; position:relative; }
.quick-btn{ text-align:left; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); color:var(--sand); padding:10px 12px; border-radius:9px; font-family:inherit; font-size:13px; cursor:pointer; transition:background .15s; }
.quick-btn:hover{ background:rgba(255,255,255,0.14); }
.sidebar-footer{ margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,0.15); font-size:12px; opacity:.7; position:relative; }
.sidebar-footer .user-email{ font-weight:700; color:var(--sonne); opacity:1; word-break:break-all; }
.logout{ display:block; width:fit-content; margin:14px 0 0; background:none; border:1.5px solid var(--sand); border-radius:20px; color:var(--sand); text-decoration:none; font-weight:600; font-size:12.5px; cursor:pointer; padding:7px 20px; opacity:.85; font-family:inherit; }
.logout:hover{ opacity:1; }

.chat-col{ flex:1; min-height:0; display:flex; flex-direction:column; background:var(--white); }
.chat-header{ flex-shrink:0; padding:20px 32px; border-bottom:1px solid #ece8da; display:flex; align-items:center; gap:14px; }
.avatar-dot{ width:38px; height:38px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--sonne), var(--curry)); flex-shrink:0; }
.chat-header h2{ margin:0; font-size:16px; }
.chat-header p{ margin:2px 0 0; font-size:12.5px; color:#7a7a6e; }

.messages{ flex:1; min-height:0; overflow-y:auto; padding:28px 32px; display:flex; flex-direction:column; gap:16px; }
.msg{ max-width:640px; display:flex; gap:10px; }
.msg.user{ align-self:flex-end; flex-direction:row-reverse; }
.msg .bubble{ padding:13px 16px; border-radius:14px; font-size:14.5px; line-height:1.6; white-space:pre-wrap; }
.msg.bot .bubble{ background:var(--sand); border-top-left-radius:4px; }
.msg.user .bubble{ background:var(--efeu); color:var(--white); border-top-right-radius:4px; }
.msg .avatar{ width:30px; height:30px; border-radius:50%; flex-shrink:0; background:radial-gradient(circle at 35% 30%, var(--sonne), var(--curry)); }
.msg.user .avatar{ background:var(--lachs); }
.typing{ display:flex; gap:4px; padding:4px 0; }
.typing span{ width:6px; height:6px; border-radius:50%; background:var(--efeu); opacity:.4; animation:blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s; }
.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,80%,100%{opacity:.25;} 40%{opacity:.9;} }

.composer{ flex-shrink:0; padding:18px 32px 24px; border-top:1px solid #ece8da; display:flex; gap:10px; }
.composer input{ flex:1; padding:13px 16px; border-radius:24px; border:1.5px solid #d9d4c4; font-family:inherit; font-size:14.5px; outline:none; }
.composer input:focus{ border-color:var(--efeu); }
.send-btn{ width:46px; height:46px; border-radius:50%; background:var(--efeu); color:var(--white); border:none; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.send-btn:hover{ background:var(--efeu-dark); }
.send-btn:disabled{ opacity:.4; cursor:not-allowed; }

@media (max-width:720px){
  .sidebar{ display:none; }
  .chat-header, .composer, .messages{ padding-left:18px; padding-right:18px; }

  .mobile-topbar{
    position:relative;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
    padding:12px 16px; background:var(--efeu); color:var(--sand);
  }
  .mobile-topbar-left{ display:flex; align-items:center; gap:8px; min-width:0; }
  .mobile-brand-icon{ height:20px; width:auto; object-fit:contain; flex-shrink:0; }
  .mobile-brand{ font-weight:700; font-size:16px; letter-spacing:-0.01em; flex-shrink:0; }
  .mobile-logout-pill{
    position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
    background:transparent; border:1.5px solid var(--sand); color:var(--sand);
    padding:6px 14px; border-radius:20px; font-weight:600; font-size:12.5px;
    cursor:pointer; font-family:inherit; white-space:nowrap;
  }
  .mobile-menu-btn{ background:none; border:none; color:var(--sand); cursor:pointer; padding:4px; display:flex; align-items:center; }
  .mobile-menu{
    flex-shrink:0;
    display:none; flex-direction:column; gap:6px;
    background:var(--efeu); padding:0 18px 18px;
  }
  .mobile-menu.open{ display:flex; }
}
@media (min-width:721px){
  .mobile-topbar, .mobile-menu{ display:none; }
}