/* JPRAXC WhatsApp assistant — the menu editor's dress, inheriting the host's tokens (--brand / --wine, --accent, --line, --surface, --muted, --ink). */
.wbe{--wbe-brand:var(--brand,var(--wine,#700817));--wbe-line:var(--line,rgba(105,0,25,.14));--wbe-surface:var(--surface,#fff);--wbe-muted:var(--muted,#715b61);--wbe-ink:var(--ink,#261015);--wbe-field:var(--canvas,#f7f1f2);font-size:14px;color:var(--wbe-ink)}
.wbe{container-type:inline-size;container-name:wbe}
.wbe-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
/* The host decides how wide the pane is (the ERP's settings pane is a narrow column beside its drawer): the preview drops under the editor when the pane is narrow, and an option's row stacks when narrower still. */
@container wbe (max-width:900px){.wbe-grid{grid-template-columns:1fr}.wbe-preview{position:static}}
@container wbe (max-width:640px){.wbe-option-head{grid-template-columns:30px minmax(0,1fr)}.wbe-option-head .wbe-row-tools{grid-column:1 / -1;justify-content:flex-end}.wbe-inline{grid-template-columns:1fr}}
@media (max-width:980px){.wbe-grid{grid-template-columns:1fr}}
.wbe-switch{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--wbe-line);border-radius:12px;background:var(--wbe-surface);margin:0 0 14px;cursor:pointer}
.wbe-switch input{width:18px!important;height:18px!important;min-height:0!important;margin:2px 0 0!important;padding:0!important;accent-color:var(--wbe-brand)}
.wbe-switch strong{display:block;font-size:14px}.wbe-switch small{display:block;color:var(--wbe-muted);font-size:12.5px;line-height:1.45;margin-top:2px}
.wbe-text,.wbe-label,.wbe-kind,.wbe-action,.wbe-inline label{display:grid;gap:4px;font-size:12.5px;color:var(--wbe-muted)}
.wbe-text{margin:0 0 12px}
.wbe .wbe-text input,.wbe .wbe-text textarea,.wbe .wbe-label input,.wbe .wbe-kind select,.wbe .wbe-action select,.wbe .wbe-inline input{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--wbe-line);border-radius:9px;background:var(--wbe-surface);color:var(--wbe-ink);font:inherit;font-size:14px;line-height:1.4;min-height:0}
.wbe .wbe-text textarea{resize:vertical;min-height:64px}
.wbe-menu-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:6px 0 10px}
.wbe-menu-head strong{font-size:15px}.wbe-menu-head small{color:var(--wbe-muted);font-size:12.5px}
.wbe-options{display:grid;gap:10px}
.wbe-option{padding:12px 14px;border:1px solid var(--wbe-line);border-radius:12px;background:var(--wbe-surface)}
.wbe-option-head{display:grid;grid-template-columns:30px minmax(0,1fr) minmax(160px,220px) auto;gap:10px;align-items:end}
@media (max-width:720px){.wbe-option-head{grid-template-columns:30px minmax(0,1fr);}.wbe-option-head .wbe-row-tools{grid-column:1 / -1;justify-content:flex-end}}
.wbe-num{display:inline-grid;place-items:center;width:30px;height:38px;border-radius:9px;background:color-mix(in srgb,var(--wbe-brand) 10%,transparent);color:var(--wbe-brand);font-weight:800}
.wbe-row-tools{display:flex;gap:4px;align-self:end}
.wbe-row-tools button{width:34px;height:36px;border:1px solid var(--wbe-line);border-radius:8px;background:var(--wbe-surface);color:var(--wbe-muted);font:inherit;font-size:15px;cursor:pointer;min-height:0;padding:0}
.wbe-row-tools button:hover{color:var(--wbe-brand);border-color:var(--wbe-brand)}
.wbe-option>.wbe-text,.wbe-option>.wbe-action{margin:10px 0 0}
.wbe-note{margin:10px 0 0;color:var(--wbe-muted);font-size:12.5px;line-height:1.5}
.wbe-sub{margin:10px 0 0;padding:10px 12px;border-left:3px solid color-mix(in srgb,var(--wbe-brand) 45%,transparent);background:color-mix(in srgb,var(--wbe-brand) 4%,transparent);border-radius:0 10px 10px 0}
.wbe-items{display:grid;gap:8px;margin-top:8px}
.wbe-add,.wbe-reset{margin-top:10px;padding:9px 14px;border:1px dashed var(--wbe-brand);border-radius:9px;background:transparent;color:var(--wbe-brand);font:inherit;font-weight:700;cursor:pointer;min-height:0}
.wbe-reset{border-style:solid;border-color:var(--wbe-line);color:var(--wbe-muted);font-weight:600}
.wbe-more{margin-top:16px;padding:12px 14px;border:1px solid var(--wbe-line);border-radius:12px;background:var(--wbe-surface)}
.wbe-more summary{cursor:pointer;font-weight:700;color:var(--wbe-brand)}
.wbe-more .wbe-text:first-of-type{margin-top:12px}
.wbe-inline{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px}
@media (max-width:720px){.wbe-inline{grid-template-columns:1fr}}
/* the preview: a chat as WhatsApp draws it, in the desk's own paper */
.wbe-preview{position:sticky;top:90px}
.wbe-preview-title{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--wbe-muted)}
.wbe-phone{padding:14px 12px;border-radius:16px;background:#f4efe9;background-image:radial-gradient(rgba(112,8,23,.07) 1px,transparent 1.2px);background-size:22px 22px;border:1px solid var(--wbe-line);display:grid;gap:8px}
.wbe-bubble{max-width:88%;padding:8px 11px;border-radius:12px;font-size:13.5px;line-height:1.45;box-shadow:0 1px .5px rgba(0,0,0,.13);white-space:pre-wrap;overflow-wrap:anywhere}
.wbe-bubble.is-in{background:#fff;justify-self:start;color:#1d1116}
.wbe-bubble.is-out{background:#fff3da;justify-self:end;color:#1d1116}
.wbe-menu-lines{display:grid;gap:2px;margin-top:8px}
.wbe-menu-lines span{font-size:13px}
.wbe-buttons{display:grid;gap:4px;margin:10px -11px -8px;padding:6px 0 0;border-top:1px solid rgba(0,0,0,.08)}
.wbe-buttons b{display:block;text-align:center;padding:7px;color:#0a6fb7;font-weight:600;font-size:13px}
.wbe-preview-note{margin:8px 0 0;color:var(--wbe-muted);font-size:12px;line-height:1.5}
html[data-theme=dark] .wbe-phone{background:#14100f;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1.2px)}
html[data-theme=dark] .wbe-bubble.is-in{background:#2a2126;color:#f3e9ec}
html[data-theme=dark] .wbe-bubble.is-out{background:#3a2b17;color:#f3e9ec}
html[data-theme=dark] .wbe-buttons b{color:#7cc4ff}