/* CI-Variablen */
:root{
  --chat--color-primary:#967E66;
  --chat--color-primary-shade-50:#8a735d;
  --chat--color-primary-shade-100:#7c6753;
  --chat--header--background:#967E66;
  --chat--header--color:#fff;
  --chat--message--bot--background:#fff;
  --chat--message--bot--color:#222;
  --chat--message--user--background:#f5f5dc;
  --chat--message--user--color:#111;
  --chat--border-radius:14px;
  --chat--header--height:56px;
  --chat--header-height:56px;
  --chat--window--width:420px;
  --chat--window--height:640px;
}

/* Toggle (Button) */
#n8n-chat .n8n-chat__toggle {
  background:transparent !important; border-radius:50% !important;
  width:56px; height:56px; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(0,0,0,.15) !important;
}
#n8n-chat .n8n-chat__toggle svg,
#n8n-chat .n8n-chat__toggle-icon { display:none !important; }

/* Position: links unten */
#n8n-chat .chat-window-wrapper {
  left: 20px !important;
  bottom: 50px !important;
}

#n8n-chat .chat-window-toggle {
  background:transparent !important; border-radius:50% !important;
  position: fixed !important;
  right: auto !important;
  left: 20px !important;
  bottom: 20px !important;
}

/* Mobile-Anpassungen */
@media (max-width: 968px) {
  #n8n-chat .chat-window-wrapper {
    left: 20px !important;
    bottom: 50px !important;
    max-height: calc(80% - var(--chat--window--bottom, var(--chat--spacing)) * 2);
  }

  #n8n-chat .chat-window-toggle {
    left: 20px !important;
    bottom: 2px !important;
  }
}

body #n8n-chat .n8n-chat__window,
body #n8n-chat .n8n-chat__window-wrapper {
  right:auto !important; left:20px !important; bottom:90px !important;
  position:fixed !important; transform-origin: bottom left !important;
  z-index:2147483001 !important;
}

/* Header-Fix */
.n8n-chat__window main, .n8n-chat main { padding-top:0 !important; margin-top:0 !important; }
.chat-layout .chat-header h1 { margin-top:1rem; font-size:20px !important; font-weight:400 !important; line-height: 1; }

/* Bilder im Chat klein halten */
#n8n-chat .n8n-chat__messages img {
  max-width:100%; height:auto; max-height:180px; display:block;
  border-radius:12px; object-fit:contain;
}

/* Header-Button "Live-Chat" */
#n8n-chat .jl-support-btn{
  margin-left:.5rem; padding:.35rem .6rem;
  background:transparent; border:1px solid rgba(255,255,255,.7);
  color:#fff; border-radius:999px; font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  cursor:pointer;
}
#n8n-chat .jl-support-btn:hover{ background:rgba(255,255,255,.12); }

/* Produkt-Card-CTA */
#n8n-chat .jl-support-cta__box{
  margin-top:.6rem; padding:.6rem; border:1px dashed #e9e1d9; border-radius:10px;
  text-align:center; font-size:13px; color:#5a4f45;
}
#n8n-chat .jl-support-cta-btn{
  margin-left:.5rem; padding:.35rem .6rem; border-radius:999px; border:0;
  background:#967E66; color:#fff; font-weight:600; cursor:pointer;
}
#n8n-chat .jl-support-cta-btn:hover{ background:#8a735d; }

/* Wenn Zendesk offen -> Widget hart verstecken */
html[data-zendesk-open="1"] #n8n-chat .n8n-chat__window-wrapper,
html[data-zendesk-open="1"] #n8n-chat .n8n-chat__window,
html[data-zendesk-open="1"] #n8n-chat .n8n-chat__toggle,
html[data-zendesk-open="1"] #n8n-chat .chat-window-wrapper,
html[data-zendesk-open="1"] #n8n-chat .chat-window {
  display: none !important;
}

/* Buttons (Add-to-Cart) */
#n8n-chat .btn-buy{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .95rem; border-radius:999px; border:0; cursor:pointer;
  background:#967E66; color:#fff; font:700 14px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  box-shadow:0 3px 12px rgba(150,126,102,.25);
  transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
#n8n-chat .btn-buy:hover{ background:#8a735d; box-shadow:0 6px 16px rgba(150,126,102,.32); }
#n8n-chat .btn-buy:active{ background:#7c6753; transform:translateY(1px); }

/* Cards Layout */
#n8n-chat .jl-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin:.75rem 0; }
#n8n-chat .jl-card{
  background:#fff; border:1px solid #ece7e1; border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  overflow:hidden; display:flex; flex-direction:column;
}
#n8n-chat .jl-media{
  width:100%; height:180px; display:flex; align-items:center; justify-content:center; background:#fafafa;
}
#n8n-chat .jl-media img{ max-height:100%; max-width:100%; object-fit:contain; border-radius:6px; }
#n8n-chat .jl-body{ padding:12px; display:grid; gap:8px; }
#n8n-chat .jl-title{ font-weight:800; font-size:15px; color:#222; }
#n8n-chat .jl-desc{ color:#2f2f2f; line-height:1.45; font-size:14px; }
#n8n-chat .jl-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#n8n-chat .jl-price{ font-weight:800; color:#111; font-size:14px; }

/* Feedback-Komponente im Widget */
#n8n-chat .chat-window .chat-messages-list .chat-feedback{
  margin:.75rem 0; padding:.9rem 1rem;
  background:#f9f6f2; border:1px solid #ece7e1; border-radius:12px; text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
#n8n-chat .chat-window .chat-messages-list .chat-feedback p{ margin:0 0 .6rem; font-size:14px; color:#444; }
#n8n-chat .chat-window .chat-messages-list .chat-feedback .stars{ display:flex; justify-content:center; gap:.4rem; }
#n8n-chat .chat-window .chat-messages-list .chat-feedback .star-btn{
  font-size:22px; line-height:1; border:none; background:none; cursor:pointer; color:#ccc; transition:color .2s;
}
#n8n-chat .chat-window .chat-messages-list .chat-feedback .star-btn:hover,
#n8n-chat .chat-window .chat-messages-list .chat-feedback .star-btn:focus{ color:#967E66; }
#n8n-chat .chat-window-toggle svg,
#n8n-chat .n8n-chat__toggle svg {
  width: 26px;
  height: 26px;
  color: #967E66;
  transition: transform .25s ease;
}

#n8n-chat .chat-window-toggle:hover svg,
#n8n-chat .n8n-chat__toggle:hover svg {
  transform: scale(1.2);
}
/* ===== Header Layout: links (Titel + Datenschutz), rechts (Live-Chat) ===== */
#n8n-chat .chat-header .chat-heading{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
}

/* Linker Block: Titel + Datenschutz untereinander */
#n8n-chat .chat-header .chat-heading .jl-header-left{
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-width: 0 !important;
}

/* Titel (egal ob h1/h2/.chat-title/.n8n-chat__title) */
#n8n-chat .chat-header .chat-heading .jl-header-left h1,
#n8n-chat .chat-header .chat-heading .jl-header-left h2,
#n8n-chat .chat-header .chat-heading .jl-header-left .chat-title,
#n8n-chat .chat-header .chat-heading .jl-header-left .n8n-chat__title{
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  color: var(--chat--header--color, #fff) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 260px; /* falls es eng wird */
}

/* Datenschutz-Link direkt unter Titel */
#n8n-chat .chat-header .chat-heading .jl-privacy-link{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  color: rgba(255,255,255,.85) !important;
  padding: 0 !important;
  margin: 0 !important;
}

#n8n-chat .chat-header .chat-heading .jl-privacy-link:hover{
  color: #fff !important;
  text-decoration: underline !important;
}

/* Rechter Block: Live-Chat Button sauber rechts */
#n8n-chat .chat-header .chat-heading .jl-header-right{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
}

/* Dein Live-Chat Button bleibt wie gehabt, nur "sicher" */
#n8n-chat .chat-header .chat-heading .jl-support-btn{
  white-space: nowrap !important;
  margin-left: 0 !important;
}

/* Mobile: etwas kompakter, Titel darf kürzer werden */
@media (max-width: 420px){
  #n8n-chat .chat-header .chat-heading .jl-header-left h1,
  #n8n-chat .chat-header .chat-heading .jl-header-left h2,
  #n8n-chat .chat-header .chat-heading .jl-header-left .chat-title,
  #n8n-chat .chat-header .chat-heading .jl-header-left .n8n-chat__title{
    max-width: 180px;
    font-size: 15px !important;
  }
  #n8n-chat .chat-header .chat-heading .jl-privacy-link{
    font-size: 11px !important;
  }
}
#n8n-chat .chat-feedback{
  margin-top:.75rem;
  padding:.75rem;
  border-radius:14px;
  background: rgba(150,126,102,.10);
}

#n8n-chat .chat-feedback .fb-title{
  margin:0 0 .35rem;
  font:600 13px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

#n8n-chat .chat-feedback .fb-scale{
  display:flex;
  justify-content:space-between;
  font:500 11px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  opacity:.75;
  margin:.15rem 0 .35rem;
}

#n8n-chat .chat-feedback .fb-track{
  position:relative;
  padding:10px 4px 6px;
  border-radius:12px;
  outline:none;
}

#n8n-chat .chat-feedback .fb-line{
  position:absolute;
  left:6px; right:6px;
  top:18px;
  height:4px;
  border-radius:999px;
  background: rgba(0,0,0,.12);
}

#n8n-chat .chat-feedback .fb-dots{
  position:absolute;
  left:6px; right:6px;
  top:14px;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}

#n8n-chat .chat-feedback .fb-dot{
  width:10px; height:10px;
  border-radius:999px;
  background: rgba(0,0,0,.22);
}

#n8n-chat .chat-feedback .fb-marker{
  position:absolute;
  top:9px;
  width:18px; height:18px;
  border-radius:999px;
  background:#967E66;
  transform: translateX(-50%);
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  transition: left .12s ease, opacity .12s ease;
}

#n8n-chat .chat-feedback .fb-buttons{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:0;
}

#n8n-chat .chat-feedback .fb-step{
  width:24px; height:24px;
  border:0;
  background:transparent;
  cursor:pointer;
  border-radius:999px;
}

#n8n-chat .chat-feedback .fb-step:focus{
  outline:2px solid rgba(150,126,102,.45);
  outline-offset:2px;
}

#n8n-chat .chat-feedback .fb-step:disabled{
  cursor:default;
  opacity:.6;
}

#n8n-chat .chat-feedback .fb-stars{
  margin-top:.35rem;
  display:flex;
  justify-content:space-between;
  padding:0 6px;
  font-size:18px;
  line-height:1;
  opacity:.6;
}

#n8n-chat .chat-feedback .fb-star{
  opacity:.35;
  transition: opacity .12s ease;
}
#n8n-chat .chat-feedback .fb-star.is-on{
  opacity:1;
}

#n8n-chat .chat-feedback .fb-hint{
  margin-top:.25rem;
  font:500 11px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  opacity:.8;
}