/* Hilfe mit Lilli (27.09.2026, static/js/help.js). Nur Theme-Variablen. */

/* ---------- Lilli-Knopf unten rechts ---------- */
.help-lilli{
  position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  z-index:45; display:flex; align-items:center; gap:.6rem;
  padding:.3rem .3rem .3rem 1rem; border-radius:99px;
  background:var(--surface); color:var(--ink); border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,0,0,.16); font:inherit; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.help-lilli:hover{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.2);}
.help-lilli:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}
.help-lilli-label{font-weight:700; font-size:.95rem; white-space:nowrap;}
.help-lilli-img{
  width:56px; height:56px; border-radius:50%; object-fit:cover; display:block;
  border:3px solid var(--accent-soft); background:#fff;
}
/* waehrend Onboarding, offenem Dialog und offenem Hilfe-Fenster ausblenden (in der Tour bleibt Lilli: letzte Station) */
body.onboarding-open .help-lilli, body.help-open .help-lilli,
body:has(.modal-scrim.open) .help-lilli{display:none;}

/* ---------- Hilfe-Fenster ---------- */
.help-panel{
  position:fixed; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  z-index:46; width:min(24rem, calc(100vw - 32px)); max-height:min(40rem, calc(100vh - 32px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); color:var(--ink); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.help-panel[hidden]{display:none;}
.help-head{
  display:flex; align-items:center; gap:.7rem; padding:.8rem .8rem .8rem 1rem;
  background:var(--accent-soft); border-bottom:1px solid var(--border);
}
.help-head-img{width:46px; height:46px; border-radius:50%; object-fit:cover; background:#fff; border:2px solid var(--surface); flex:none;}
.help-head-text{flex:1; min-width:0;}
.help-head h2{margin:0; font-size:1.05rem;}
.help-head p{margin:.1rem 0 0; font-size:.85rem; color:var(--ink-muted);}
.help-icon-btn{
  flex:none; width:2.2rem; height:2.2rem; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color:var(--ink); font-size:1.4rem; line-height:1;
}
.help-icon-btn:hover{background:color-mix(in srgb, var(--ink) 10%, transparent);}
.help-icon-btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.help-body{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:1rem; display:flex; flex-direction:column; gap:.6rem;}
.help-foot{display:flex; justify-content:space-between; gap:.6rem; padding:.7rem 1rem; border-top:1px solid var(--border);}
.help-foot .btn{min-height:2.6rem;}

.help-search input{
  width:100%; box-sizing:border-box; min-height:2.75rem; padding:.55rem .8rem; font:inherit;
  color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:12px;
}
.help-search input:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.help-sub{margin:.4rem 0 .1rem; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-muted);}
.help-muted{margin:0; color:var(--ink-muted); font-size:.9rem;}
.help-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem;}
.help-list-item{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  min-height:2.6rem; padding:.45rem .6rem; border:0; border-radius:10px; cursor:pointer;
  background:transparent; color:var(--ink); font:inherit; text-align:left;
}
.help-list-item:hover{background:var(--surface-hover);}
.help-list-item:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.help-list-item span:last-child{color:var(--accent); font-size:1.2rem;}
.help-all summary{cursor:pointer; padding:.4rem 0; font-weight:600; color:var(--accent);}

.help-article h3{margin:0 0 .2rem; font-size:1.1rem; outline:none;}
.help-article p{margin:0; line-height:1.55;}
.help-feedback{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; padding-top:.7rem; border-top:1px dashed var(--border); color:var(--ink-muted); font-size:.9rem;}
.help-thumb{width:2.4rem; height:2.4rem; border-radius:50%; border:1px solid var(--border); background:var(--bg); cursor:pointer; font-size:1.1rem;}
.help-thumb:hover{background:var(--surface-hover);}

.help-ask{display:flex; flex-direction:column; gap:.4rem; font-weight:600;}
.help-ask textarea{
  width:100%; box-sizing:border-box; padding:.6rem .75rem; font:inherit; font-weight:400; resize:vertical;
  color:var(--ink); background:var(--bg); border:1px solid var(--border); border-radius:12px;
}
.help-ask textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.help-error{margin:0; padding:.5rem .7rem; border-radius:10px; background:var(--danger-soft); color:var(--danger); font-size:.9rem;}
.help-sent{align-items:center; text-align:center;}
.help-sent p{margin:0;}
.help-sent-img{width:96px; height:96px; border-radius:50%; object-fit:cover; background:#fff; border:3px solid var(--accent-soft);}

@media (max-width: 600px){
  .help-lilli{padding:.25rem; right:12px; bottom:max(12px, env(safe-area-inset-bottom));}
  .help-lilli-label{display:none;}
  .help-lilli-img{width:52px; height:52px;}
  .help-panel{left:0; right:0; bottom:0; width:100%; max-height:85vh; max-height:85dvh; border-radius:18px 18px 0 0; border-bottom:0;}
}
/* Einfache Ansicht: Lilli immer gross und beschriftet */
:root[data-ui-level="simple"] .help-lilli-label{display:inline;}
:root[data-ui-level="simple"] .help-lilli{padding-left:1rem;}
:root[data-ui-level="simple"] .help-lilli-img{width:64px; height:64px;}
@media (prefers-reduced-motion: reduce){ .help-lilli{transition:none;} .help-lilli:hover{transform:none;} }

/* ---------- Backend: Hilfe-Fragen ---------- */
.help-admin{display:flex; flex-direction:column; gap:1rem; max-width:52rem;}
.help-admin-head{display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap;}
.help-admin-head h2{margin:0 0 .3rem;}
.help-admin-head .settings-hint{margin:0;}
.help-topic{padding:1rem 1.1rem; border-radius:14px; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; gap:.5rem;}
.help-topic.is-hot{border-color:var(--warn); box-shadow:inset 3px 0 0 var(--warn);}
.help-topic-head{display:flex; justify-content:space-between; gap:1rem; align-items:baseline; flex-wrap:wrap;}
.help-topic-head h3{margin:0; font-size:1rem;}
.help-topic-count{font-size:.8rem; font-weight:700; color:var(--ink-muted); white-space:nowrap;}
.help-topic-hint{margin:0; font-size:.85rem; color:var(--warn); font-weight:600;}
.help-topic-pages{margin:0; font-size:.8rem; color:var(--ink-muted);}
.help-q-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem;}
.help-q{padding:.6rem .7rem; border-radius:10px; background:var(--bg);}
.help-q.status-closed{opacity:.6;}
.help-q-meta{font-size:.8rem; color:var(--ink-muted);}
.help-q-text{margin:.25rem 0 .4rem; white-space:pre-wrap; overflow-wrap:anywhere;}
.help-q-answer textarea{width:100%; box-sizing:border-box; padding:.5rem .6rem; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border); border-radius:8px; resize:vertical;}
.help-q-actions{display:flex; justify-content:flex-end; gap:.5rem; margin-top:.4rem;}

/* ---------- "Zeig es mir": Lilli als Figur (static/js/help_showme.js) ---------- */
.lilli-sprite{
  position:fixed; left:0; top:0; z-index:215; pointer-events:none; will-change:transform;
}
.lilli-sprite img{display:block; height:96px; width:auto; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25)); transform-origin:center;}
@media (max-width: 600px){ .lilli-sprite img{height:74px;} }
.showme-missing{margin:0; font-size:.85rem; color:var(--ink-muted); font-style:italic;}
.help-showme-btn{display:inline-flex; align-items:center; gap:.4rem;}
.help-showme-btn img{height:1.6rem; width:auto; margin:-.3rem 0;}
/* In der Tour sitzt Lilli als Figur an der Sprechblase - das kleine Kopfbild entfaellt dann. */
body.lilli-sprite-on .tour-lilli img, body.lilli-sprite-on .tour-end-lilli{display:none;}
/* Ebene wie #tourRoot (tour.css) - sonst liegen Elemente mit eigenem z-index (z. B. Kachel-Icons) ueber der Abdunklung */
#showmeRoot{position:fixed; inset:0; z-index:210;}
/* Suchfeld mit Lupe, "Zeig es mir" als eigener Knopf im Artikel (Nachbesserung 27.09.2026) */
.help-search{position:relative; display:block;}
.help-search-icon{position:absolute; left:.75rem; top:50%; transform:translateY(-50%); font-size:.95rem; opacity:.65; pointer-events:none;}
.help-search input{padding-left:2.3rem;}
.help-article .help-showme-btn{
  align-self:flex-start; margin-top:.3rem; min-height:2.6rem; padding:.4rem 1rem .4rem .6rem;
  background:var(--accent-soft); color:var(--ink); border:1px solid var(--accent); border-radius:99px; font-weight:700;
}
.help-article .help-showme-btn:hover{background:var(--surface-hover);}
.help-article .help-showme-btn img{height:2rem; margin:-.4rem 0;}

/* ---------- Etappe 4: Sofortantwort im Hilfe-Fenster ---------- */
.help-ai{display:flex; flex-direction:column; gap:.35rem; padding-top:.4rem; border-top:1px dashed var(--border);}
.help-ai-btn{align-self:flex-start; display:inline-flex; align-items:center; gap:.4rem; min-height:2.5rem; padding:.35rem .9rem .35rem .5rem;
  background:var(--accent-soft); color:var(--ink); border:1px solid var(--accent); border-radius:99px; font-weight:700;}
.help-ai-btn img{height:1.8rem; margin:-.35rem 0;}
.help-ai-btn:disabled{opacity:.6;}
.help-ai-note{margin:0; font-size:.8rem; color:var(--ink-muted);}
.help-ai-wait{font-style:italic;}
.help-ai-answer{display:flex; gap:.6rem; align-items:flex-start; padding:.7rem; border-radius:12px; background:var(--surface-hover);}
.help-ai-answer > img{width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; background:#fff;}
.help-ai-answer p{margin:0 0 .4rem; line-height:1.5;}
.help-ai-follow{font-size:.85rem; color:var(--ink-muted);}

/* ---------- Seite "Deine Antworten" (/#/hilfe) ---------- */
.help-answers{display:flex; flex-direction:column; gap:1rem; max-width:44rem;}
.help-answers-head{display:flex; gap:.9rem; align-items:center;}
.help-answers-head img{width:64px; height:64px; border-radius:50%; object-fit:cover; background:#fff; border:3px solid var(--accent-soft);}
.help-answers-head h2{margin:0 0 .2rem;}
.help-answers-head .settings-hint{margin:0;}
.help-answer-card{padding:1rem 1.2rem; border-radius:14px; background:var(--surface); border:1px solid var(--border); display:flex; flex-direction:column; gap:.5rem;}
.help-answer-card h3{margin:0; font-size:1.05rem;}
.help-answer-card p{margin:0; line-height:1.55;}
.help-answer-q{font-size:.85rem; color:var(--ink-muted); font-style:italic;}
.help-answer-card .help-showme-btn{align-self:flex-start; display:inline-flex; align-items:center; gap:.4rem; min-height:2.5rem; padding:.35rem .9rem .35rem .5rem;
  background:var(--accent-soft); color:var(--ink); border:1px solid var(--accent); border-radius:99px; font-weight:700;}
.help-answer-card .help-showme-btn img{height:1.8rem; margin:-.35rem 0;}

/* ---------- Etappe 3: Backend (Reiter, Entwuerfe, Artikel-Editor) ---------- */
.help-admin-tabs{display:flex; gap:.4rem; border-bottom:1px solid var(--border); padding-bottom:.5rem;}
.help-admin-tab{border:1px solid var(--border); background:var(--surface); color:var(--ink); font:inherit; font-size:.9rem;
  padding:.4rem .9rem; border-radius:99px; cursor:pointer;}
.help-admin-tab.active{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
.help-draft{margin-top:.3rem; padding:.8rem .9rem; border-radius:12px; background:var(--accent-soft); border:1px solid var(--accent);}
.help-draft h4{margin:0 0 .5rem; font-size:.95rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:baseline;}
.help-draft-tag{font-size:.75rem; font-weight:400; color:var(--ink-muted);}
.help-draft-wait{display:flex; align-items:center; gap:.5rem; margin:.3rem 0 0; font-style:italic; color:var(--ink-muted);}
.help-draft-wait img{height:2.2rem;}
.help-topic-tools{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.2rem;}
.help-topic-or{font-size:.85rem; color:var(--ink-muted);}
.help-topic-tools select{font:inherit; font-size:.85rem; padding:.3rem .5rem; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink); max-width:18rem;}
.help-article-form{display:flex; flex-direction:column; gap:.55rem;}
.help-article-form label{display:flex; flex-direction:column; gap:.25rem; font-size:.82rem; color:var(--ink-muted);}
.help-article-form input, .help-article-form textarea{font:inherit; font-size:.92rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:.45rem .6rem; resize:vertical;}
.help-article-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem;}