/* Orqenza – Ergänzungen zu Pico.css. Farben laufen über Pico-Variablen, damit Hell/Dunkel automatisch klappt. */

:root:root:root {
  --pico-primary: #6a4cf5;
  --pico-primary-background: #6a4cf5;
  --pico-primary-border: #6a4cf5;
  --pico-primary-hover: #5636e8;
  --pico-primary-hover-background: #5636e8;
  --pico-primary-hover-border: #5636e8;
  --pico-primary-focus: rgba(106, 76, 245, 0.3);
  --pico-primary-underline: rgba(106, 76, 245, 0.5);
  --pico-font-size: 100%;
  --o-ok: #1f9d55;
  --o-warn: #c27c0e;
  --o-fail: #d0342c;
}

/* ---------- Marke ---------- */
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.brand, .brand:hover { color: var(--pico-primary); }
.brand-center { justify-content: center; margin-bottom: 1.5rem; font-size: 1.5rem; }

/* ---------- App-Layout ---------- */
body.app { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }
.sidebar { --o-text: var(--pico-color); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.25rem 1rem; border-right: 1px solid var(--pico-muted-border-color); background: var(--pico-card-background-color); }
.sidebar nav ul { display: flex; flex-direction: column; padding: 0; margin: 0; width: 100%; }
.sidebar nav li { padding: 0; list-style: none; width: 100%; }
.sidebar nav a, .sidebar nav .nav-soon { display: block; width: 100%; margin: 0; padding: .5rem .75rem; border-radius: var(--pico-border-radius); text-decoration: none; color: var(--o-text); }
.sidebar nav a:hover { background: var(--pico-secondary-focus); }
.sidebar nav a[aria-current="page"] { background: var(--pico-primary-focus); color: var(--pico-primary); font-weight: 600; }
.sidebar nav .nav-soon { color: var(--pico-muted-color); cursor: default; }
.sidebar nav .nav-soon small { float: right; font-size: .7rem; opacity: .8; }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; overflow-wrap: anywhere; }
.sidebar-foot form { margin: 0; }
button.small { padding: .35rem .7rem; font-size: .85rem; width: auto; margin: 0; }

.content { padding: 2rem clamp(1rem, 4vw, 3rem); max-width: 64rem; width: 100%; }
.page-head { margin-bottom: 1.5rem; }
.page-head h1 { margin-bottom: .25rem; }
.page-head p { color: var(--pico-muted-color); margin: 0; }
.muted { color: var(--pico-muted-color); }
.narrow { max-width: 26rem; }

@media (max-width: 760px) {
  body.app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--pico-muted-border-color); gap: .75rem; }
  .sidebar nav ul { flex-direction: row; flex-wrap: wrap; gap: .25rem; }
  .sidebar nav li { width: auto; }
  .sidebar nav .nav-soon { display: none; }
  .sidebar-foot { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- Karten ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.cards .card { margin: 0; display: flex; flex-direction: column; gap: .2rem; }
.cards .card strong { font-size: 1.6rem; line-height: 1.2; }
.cards .card small { color: var(--pico-muted-color); }

.stages { margin: 1rem 0 0; padding-left: 1.5rem; }
.stages li { margin-bottom: .4rem; }
.stages li small { color: var(--pico-muted-color); margin-left: .35rem; }
.stages li.done::marker { color: var(--o-ok); }
.stages li.done strong::after { content: " ✓"; color: var(--o-ok); }

/* ---------- Einfaches Layout (Login, Installation) ---------- */
body.plain { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 3rem 1rem; }
.plain-box { width: 100%; max-width: 36rem; }

/* ---------- Meldungen ---------- */
.flash { padding: .75rem 1rem; border-radius: var(--pico-border-radius); margin-bottom: 1rem; border-left: 4px solid; background: var(--pico-card-background-color); }
.flash-success { border-color: var(--o-ok); }
.flash-error { border-color: var(--o-fail); }
.flash-info { border-color: var(--pico-primary); }

.checklist { padding-left: 0; }
.checklist li { list-style: none; padding-left: 1.6rem; position: relative; margin-bottom: .4rem; }
.checklist li::before { position: absolute; left: 0; font-weight: 700; }
.checklist li.ok::before { content: "✓"; color: var(--o-ok); }
.checklist li.warn::before { content: "!"; color: var(--o-warn); left: .3rem; }
.checklist li.fail::before { content: "✗"; color: var(--o-fail); }
.checklist li small { color: var(--pico-muted-color); }

/* ---------- Allgemein ---------- */
.row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.row-between form { margin: 0; }
.row-between form button { width: auto; margin: 0; }
.small { font-size: .85rem; }
.center { text-align: center; }
.back { display: inline-block; margin-bottom: .5rem; font-size: .9rem; text-decoration: none; }
.form-actions { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.form-actions button, .form-actions [role="button"] { width: auto; margin: 0; }
button.danger { --pico-background-color: var(--o-fail); --pico-border-color: var(--o-fail); }
.danger-link { color: var(--o-fail); }
.narrow-article { max-width: 32rem; }
.err { color: var(--o-fail); }
.empty { text-align: center; padding: 3rem 1rem; }
.label-like { margin-bottom: .5rem; }

/* ---------- Keywords ---------- */
.kw { display: inline-block; padding: .1rem .55rem; margin: 0 .25rem .25rem 0; border-radius: 999px; font-size: .8rem; background: var(--pico-primary-focus); color: var(--pico-primary); font-weight: 600; }
.kw-any { background: var(--pico-secondary-focus); color: var(--pico-secondary); }

/* ---------- Liste der Automationen ---------- */
.flow-list { display: flex; flex-direction: column; gap: .75rem; }
.flow-item { margin: 0; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.flow-item form { margin: 0; }
.flow-name { font-weight: 700; font-size: 1.05rem; text-decoration: none; }
.flow-meta { margin-top: .3rem; }
.flow-actions { display: flex; gap: 1rem; font-size: .9rem; }
.status { width: auto; margin: 0; padding: .3rem .8rem; font-size: .85rem; border-radius: 999px; }
.status-on { --pico-background-color: var(--o-ok); --pico-border-color: var(--o-ok); color: #fff; }
.status-off { --pico-background-color: transparent; --pico-border-color: var(--pico-muted-border-color); --pico-color: var(--pico-muted-color); color: var(--pico-muted-color); }
@media (max-width: 760px) {
  .flow-item { grid-template-columns: 1fr auto; }
  .flow-actions { grid-column: 1 / -1; }
}

/* ---------- Editor ---------- */
.flow-form .step header { display: flex; align-items: center; gap: .6rem; }
.step-no { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--pico-primary); color: #fff; font-size: .85rem; font-weight: 700; }
.name-row { align-items: end; grid-template-columns: 1fr auto; }
.switch-label { white-space: nowrap; margin-bottom: var(--pico-spacing); }
.button-row { grid-template-columns: 1fr 2fr; gap: .75rem; }
.button-row input { margin-bottom: .6rem; }
.counter { display: block; text-align: right; color: var(--pico-muted-color); margin-top: -.6rem; margin-bottom: .4rem; }
@media (max-width: 760px) { .button-row { grid-template-columns: 1fr; gap: 0; } .name-row { grid-template-columns: 1fr; } }

/* ---------- Simulator ---------- */
.sim-form { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin: 0; }
.sim-form label { margin: 0; }
.sim-form label input { margin-bottom: 0; }
.sim-form .grow { flex: 1 1 14rem; }
.sim-form button { width: auto; margin: 0; }
a.current { font-weight: 700; }
.sim-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .sim-panels { grid-template-columns: 1fr; } .phone { min-height: 12rem; } }
.phone { border: 1px solid var(--pico-muted-border-color); border-radius: 1.25rem; overflow: hidden; background: var(--pico-card-background-color); display: flex; flex-direction: column; min-height: 22rem; }
.phone-head { padding: .75rem 1rem; font-weight: 700; border-bottom: 1px solid var(--pico-muted-border-color); font-size: .95rem; }
.phone-body { padding: 1rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.comment { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.comment.reply { margin-left: 2.2rem; }
.avatar { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff; background: #8a8fa3; }
.avatar-me { background: linear-gradient(135deg, #7b5cff, #e2489a); }
.bubble-wrap { display: flex; flex-direction: column; max-width: 80%; gap: .2rem; }
.bubble-wrap.out { align-self: flex-start; }
.bubble-wrap.in { align-self: flex-end; align-items: flex-end; }
.bubble { padding: .6rem .85rem; border-radius: 1.1rem; background: var(--pico-secondary-background); color: var(--pico-secondary-inverse); font-size: .92rem; line-height: 1.4; }
.bubble-wrap.out .bubble { background: var(--pico-muted-border-color); color: var(--pico-color); border-bottom-left-radius: .35rem; }
.bubble-wrap.in .bubble { background: var(--pico-primary-background); color: #fff; border-bottom-right-radius: .35rem; }
.bubble-btn { display: block; margin-top: .55rem; padding: .45rem .6rem; text-align: center; border-radius: .6rem; background: var(--pico-background-color); color: var(--pico-primary); font-weight: 600; text-decoration: none; font-size: .88rem; }
.bubble-btn:first-of-type { margin-top: .7rem; }

/* ---------- Follow-Gate ---------- */
.gate:not(:has(input[name="follow_gate"]:checked)) .gate-fields { display: none; }
.gate-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 0 1rem; align-items: start; }
@media (max-width: 760px) { .gate-grid { grid-template-columns: 1fr; } }
.chat-event { align-self: center; font-size: .78rem; color: var(--pico-muted-color); background: var(--pico-secondary-focus); padding: .15rem .7rem; border-radius: 999px; }
.bubble form { margin: 0; }
.bubble button.bubble-btn { width: 100%; border: 0; cursor: pointer; }
.phone-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.phone-head form { margin: 0; }
.follow-toggle { width: auto; margin: 0; padding: .2rem .6rem; font-size: .78rem; border-radius: 999px; }
.kw-gate { background: rgba(31, 157, 85, .15); color: var(--o-ok); margin-left: .35rem; }
.bubble { --o-btn-bg: var(--pico-background-color); --o-btn-fg: var(--pico-primary); }
.bubble .bubble-btn, .bubble button.bubble-btn { background: var(--o-btn-bg); color: var(--o-btn-fg); border: 0; box-shadow: none; font-weight: 600; font-size: .88rem; padding: .45rem .6rem; border-radius: .6rem; margin-top: .55rem; }
.bubble button.bubble-btn:hover { filter: brightness(.96); }

/* ---------- Stufe 2: Editor ---------- */
.template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.template-card { margin: 0; }
.template-card button { width: 100%; height: 100%; text-align: left; display: flex; flex-direction: column; gap: .4rem; padding: 1.25rem; background: var(--pico-card-background-color); color: var(--pico-color); border: 1px solid var(--pico-muted-border-color); box-shadow: var(--pico-card-box-shadow); }
.template-card button:hover { border-color: var(--pico-primary); }
.template-card button strong { color: var(--pico-primary); font-size: 1.05rem; }
.template-card button span { color: var(--pico-muted-color); font-size: .9rem; font-weight: 400; }

.trigger-types { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.trigger-card:has(input[value="default"]:checked) .if-keywords,
.trigger-card:not(:has(input[value="comment_keyword"]:checked)) .if-comment { display: none; }
.trigger-card:not(:has(input[value="default"]:checked)) .if-default { display: none; }
.trigger-card:not(:has(input[value="comment_keyword"]:checked)) .only-comment { display: none; }
.kw-row { grid-template-columns: 2fr 1fr; }
@media (max-width: 760px) { .kw-row { grid-template-columns: 1fr; } }

.step { scroll-margin-top: 1rem; }
.step header .step-delete { margin-left: auto; width: auto; padding: .2rem .7rem; font-size: .8rem; background: transparent; border: 1px solid var(--pico-muted-border-color); color: var(--o-fail); }
.step-follow_check .step-no { background: var(--o-ok); }
.step:target { outline: 2px solid var(--pico-primary); outline-offset: 2px; }
.btn-row { display: grid; grid-template-columns: 1.2fr .9fr 2fr; gap: .5rem; }
.btn-row input, .btn-row select { margin-bottom: .5rem; }
.btn-row:has(.btn-kind option[value="url"]:checked) .btn-target,
.btn-row:has(.btn-kind option[value="step"]:checked) .btn-url { display: none; }
@media (max-width: 760px) { .btn-row { grid-template-columns: 1fr 1fr; } .btn-row .btn-url, .btn-row .btn-target { grid-column: 1 / -1; } }
.add-btn { margin: 0 0 .5rem; }
.block { display: block; margin-bottom: .75rem; }
.add-actions { margin: 0 0 1.5rem; }
.sticky-actions { position: sticky; bottom: 0; padding: .75rem 0; background: var(--pico-background-color); border-top: 1px solid var(--pico-muted-border-color); z-index: 2; }

/* Ablauf-Übersicht */
.outline ul { list-style: none; margin: 0; padding-left: 1.4rem; border-left: 2px solid var(--pico-muted-border-color); }
.outline ul.ol-root { border-left: 0; padding-left: 0; }
.outline li { list-style: none; margin: .35rem 0; }
.ol-via { display: inline-block; font-size: .78rem; color: var(--pico-muted-color); margin-right: .4rem; }
.ol-via::after { content: " →"; }
.ol-node { display: inline-block; padding: .25rem .65rem; border-radius: .6rem; background: var(--pico-primary-focus); color: var(--pico-color); text-decoration: none; font-size: .88rem; }
.ol-node strong { color: var(--pico-primary); margin-right: .3rem; }
.ol-follow_check { background: rgba(31, 157, 85, .15); }
.ol-follow_check strong { color: var(--o-ok); }
.ol-link { margin-left: .4rem; font-size: .78rem; color: var(--pico-muted-color); }
.ol-ref { font-size: .85rem; }
.ol-end { font-size: .8rem; color: var(--pico-muted-color); }

/* Simulator: Chips + Eingabe */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.chips form { margin: 0; }
.chip { width: auto; margin: 0; padding: .3rem .8rem; font-size: .85rem; border-radius: 999px; background: transparent; color: var(--pico-primary); border: 1px solid var(--pico-primary); }
.chat-input { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--pico-muted-border-color); margin: 0; }
.chat-input input { margin: 0; }
.chat-input button { width: auto; margin: 0; }
@media (max-width: 760px) {
  .btn-row { padding: .5rem .5rem 0; margin-bottom: .5rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
}

/* ---------- Stufe 3a: neue Schritte ---------- */
.step-input .step-no { background: #c27c0e; }
.step-condition .step-no { background: #2b7bd6; }
.step-tag .step-no, .step-set_field .step-no { background: #8a8fa3; }
.step-wait .step-no { background: #6b7280; }
.tag-row { grid-template-columns: 1fr 1fr 1fr; }
.wait-row { grid-template-columns: 1fr 1fr 2fr; }
.cond-row { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.cond-row:has(.cond-subject option[value="tag"]:checked) .if-field,
.cond-row:has(.cond-subject option[value="field"]:checked) .if-tag,
.cond-row:has(.cond-subject option[value="tag"]:checked) .only-field { display: none; }
.cond-row:not(:has(.cond-op option[value="equals"]:checked, .cond-op option[value="contains"]:checked)) .if-value { display: none; }
@media (max-width: 760px) { .tag-row, .wait-row { grid-template-columns: 1fr; } }
.image-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.image-row label.inline { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.image-row input[type="file"] { margin: 0; width: auto; }
.thumb { width: 5rem; height: 5rem; object-fit: cover; border-radius: .6rem; border: 1px solid var(--pico-muted-border-color); }
.add-actions .small { margin: 0; }
.ol-input { background: rgba(194, 124, 14, .15); } .ol-input strong { color: #c27c0e; }
.ol-condition { background: rgba(43, 123, 214, .13); } .ol-condition strong { color: #2b7bd6; }
.ol-tag, .ol-set_field, .ol-wait { background: var(--pico-secondary-focus); } .ol-tag strong, .ol-set_field strong, .ol-wait strong { color: var(--pico-muted-color); }

/* ---------- Kontakte ---------- */
.filter-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-row input { flex: 1 1 14rem; margin: 0; }
.filter-row select { flex: 0 1 14rem; margin: 0; }
.filter-row button { width: auto; margin: 0; }
.table-wrap { overflow-x: auto; margin: 0; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }
.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.tag-list form { margin: 0; }
.tag-chip { width: auto; margin: 0; padding: .2rem .7rem; font-size: .82rem; border-radius: 999px; background: var(--pico-primary-focus); color: var(--pico-primary); border: 0; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0; }
.inline-form input, .inline-form select { flex: 1 1 9rem; margin: 0; }
.inline-form button { width: auto; margin: 0; }
.plain-list { padding: 0; margin: 0; }
.plain-list li { list-style: none; margin-bottom: .35rem; }
.two-cols { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 900px) { .two-cols { grid-template-columns: 1fr; } }
.link-btn { width: auto; margin: 0; padding: 0; background: none; border: 0; font-size: .85rem; text-decoration: underline; }
.right { text-align: right; }
.bubble-kind { opacity: .75; }
.bubble-img { display: block; max-width: 100%; border-radius: .7rem; margin-bottom: .5rem; }
span.bubble-btn { display: block; }
.sim-wait { display: flex; gap: .5rem; align-items: center; justify-content: center; }
.sim-wait form { margin: 0; }
.sim-wait button { width: auto; margin: 0; padding: .2rem .7rem; font-size: .8rem; }

.sim-person { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--pico-muted-border-color); }
.sim-person label { margin: 0; flex: 0 1 14rem; }
.sim-person input { margin: 0; }
.sim-person button { width: auto; margin: 0; }

/* ---------- Stufe 3b/4 ---------- */
.trigger-card:has(input[value="story_mention"]:checked) .if-keywords { display: none; }
.trigger-card:not(:has(input[value="story_reply"]:checked)) .if-story-reply { display: none; }
.trigger-card:not(:has(input[value="story_mention"]:checked)) .if-story-mention { display: none; }
.step-handover .step-no { background: #d0342c; }
.ol-handover { background: rgba(208, 52, 44, .12); } .ol-handover strong { color: var(--o-fail); }
/* Inbox */
.tabs { display: flex; gap: .25rem; }
.tabs a { padding: .35rem .9rem; border-radius: 999px; text-decoration: none; color: var(--pico-muted-color); border: 1px solid var(--pico-muted-border-color); font-size: .9rem; }
.tabs a[aria-current="page"] { background: var(--pico-primary-focus); color: var(--pico-primary); border-color: transparent; font-weight: 600; }
.inbox { display: grid; grid-template-columns: 18rem 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .inbox { grid-template-columns: 1fr; } }
.inbox-list { display: flex; flex-direction: column; gap: .35rem; max-height: 75vh; overflow-y: auto; }
.inbox-item { display: grid; grid-template-columns: 1fr auto; gap: .1rem .5rem; padding: .6rem .75rem; border-radius: var(--pico-border-radius); text-decoration: none; color: var(--pico-color); border: 1px solid var(--pico-muted-border-color); background: var(--pico-card-background-color); }
.inbox-item.active { border-color: var(--pico-primary); background: var(--pico-primary-focus); }
.inbox-name { font-weight: 600; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.inbox-preview { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-time { grid-row: 1; grid-column: 2; }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--o-fail); display: inline-block; }
.kw-paused { background: rgba(208, 52, 44, .13); color: var(--o-fail); }
.inbox-chat .phone-body { max-height: 60vh; overflow-y: auto; }
.inbox-actions form { display: flex; gap: .4rem; margin: 0; flex-wrap: wrap; }
.inbox-hint { display: block; padding: 0 .75rem .75rem; }
.bubble-wrap.manual .bubble { outline: 2px solid var(--pico-primary-focus); }
.nav-count { float: right; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: var(--o-fail); color: #fff; font-size: .72rem; text-align: center; line-height: 1.3rem; }
/* Einstellungen */
.copy-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.copy-row code { flex: 1; overflow-x: auto; white-space: nowrap; padding: .45rem .6rem; }
.copy-row button { width: auto; margin: 0; }
.ig-status { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.ig-status img { width: 2.6rem; height: 2.6rem; border-radius: 50%; }
.status-pill { display: inline-block; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.pill-ok { background: rgba(31, 157, 85, .15); color: var(--o-ok); }
.pill-off { background: var(--pico-secondary-focus); color: var(--pico-muted-color); }
.action-row { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; }
.action-row button { width: auto; margin: 0; }
.privacy { max-width: 46rem; }
.spaced { margin-top: 1rem; } details summary { margin-bottom: .75rem; }
.sim-story { margin-bottom: .75rem; }