/* ============================================================================
   V4 page "WhatsApp-Assistent" (W13, webapp-v4/seiten/12, mockup prefix wa-).
   Page additions on top of v4.css, all scoped under .bl-v4 (V4 shell only).
   ========================================================================= */

/* WhatsApp tile (brand colour, this page only) */
.bl-v4 .bl-wa-tile { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--wa); color: #fff; flex: none; }

/* Connected */
.bl-v4 .bl-wa-conn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; padding: 24px; }
.bl-v4 .bl-wa-conn-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 16px; font-weight: 700; letter-spacing: -.005em; }
.bl-v4 .bl-wa-conn-desc { margin-top: 4px; font-size: 14px; color: var(--muted); }
.bl-v4 .bl-wa-conn-num { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.bl-v4 .bl-wa-conn-num .bl-ic { color: var(--muted); }
.bl-v4 .bl-wa-conn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-v4 .bl-wa-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--good); }
.bl-v4 .bl-wa-live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* Not connected */
.bl-v4 .bl-wa-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; padding: 28px; }
.bl-v4 .bl-wa-intro-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.bl-v4 .bl-wa-intro-desc { margin-top: 6px; font-size: 14px; color: var(--ink-2); max-width: 62ch; }
.bl-v4 .bl-wa-ticks { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.bl-v4 .bl-wa-ticks li { display: flex; align-items: flex-start; gap: 10px; }
.bl-v4 .bl-wa-ticks .bl-ic { margin-top: 3px; color: var(--accent); flex: none; }
.bl-v4 .bl-wa-intro-cta { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.bl-v4 .bl-wa-intro-cta form { margin: 0; }
.bl-v4 .bl-wa-intro-cta .bl-btn { min-width: 260px; }

/* Code sent */
.bl-v4 .bl-wa-pend { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.bl-v4 .bl-wa-pend-card { padding: 28px; }
.bl-v4 .bl-wa-pend-card h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.bl-v4 .bl-wa-steps { margin-top: 12px; }
.bl-v4 .bl-wa-steps .bl-step { grid-template-columns: 32px minmax(0, 1fr); padding: 12px 0; align-items: center; }
.bl-v4 .bl-wa-steps .bl-step-title { font-weight: 500; font-size: 14px; color: var(--ink-2); }
.bl-v4 .bl-wa-code { margin-top: 20px; padding: 18px; border-radius: 14px; background: var(--surface-2); text-align: center; }
.bl-v4 .bl-wa-code-val { margin-top: 6px; font-size: 28px; font-weight: 800; letter-spacing: .22em; font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.bl-v4 .bl-wa-pend-open { width: 100%; margin-top: 20px; height: 48px; }
.bl-v4 .bl-wa-pend-nonum { margin-top: 16px; }
.bl-v4 .bl-wa-pend-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; }
.bl-v4 .bl-wa-pend-foot form { margin: 0; }
.bl-v4 .bl-wa-wait { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }

/* What the assistant can do: list left, example right */
.bl-v4 .bl-wa-fgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.bl-v4 .bl-wa-fns { overflow: hidden; }
.bl-v4 .bl-wa-group { padding: 18px 24px 8px; }
.bl-v4 .bl-wa-group + .bl-wa-fn { border-top: 0; }
.bl-v4 .bl-wa-group--rule { border-top: 1px solid var(--line); }
.bl-v4 .bl-wa-fn { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 24px; border-top: 1px solid var(--line); cursor: pointer; transition: background-color .15s ease; }
.bl-v4 .bl-wa-fn:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.bl-v4 .bl-wa-fn.bl-is-selected { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
.bl-v4 .bl-wa-fn.bl-is-selected::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.bl-v4 .bl-wa-fn-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.bl-v4 .bl-wa-fn.bl-is-selected .bl-wa-fn-ic { background: var(--surface); color: var(--accent-ink); }
.bl-v4 .bl-wa-fn-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 22px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.bl-v4 .bl-wa-fn-sub { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 64ch; }
.bl-v4 .bl-wa-fn .bl-wa-ticks { gap: 6px; margin-top: 8px; font-size: 13.5px; }
.bl-v4 .bl-wa-fn .bl-wa-ticks .bl-ic { margin-top: 2px; }
.bl-v4 .bl-wa-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bl-v4 .bl-wa-keys .bl-tag { height: 22px; padding: 0 8px; font-size: 11.5px; color: var(--accent-ink); }
.bl-v4 .bl-wa-fn-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; }
.bl-v4 .bl-wa-fn-foot .bl-textbtn { font-size: 13px; }
.bl-v4 .bl-wa-fn.bl-is-selected .bl-wa-ex-btn { color: var(--accent-ink); }
.bl-v4 .bl-wa-fn-side { display: flex; align-items: center; min-height: 28px; }
.bl-v4 .bl-wa-fn.bl-is-off .bl-wa-fn-title { color: var(--ink-2); }
.bl-v4 .bl-wa-fn.bl-is-off .bl-wa-fn-ic,
.bl-v4 .bl-wa-fn.bl-is-off .bl-wa-keys { opacity: .55; }
.bl-v4 .bl-wa-fn.bl-is-off .bl-wa-keys .bl-tag { color: var(--muted); }
.bl-v4 .bl-wa-fns-foot { display: flex; align-items: flex-start; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.bl-v4 .bl-wa-fns-foot .bl-ic { margin-top: 2px; flex: none; }

/* Phone preview */
.bl-v4 .bl-wa-preview { position: sticky; top: 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bl-v4 .bl-wa-preview-cap { max-width: 300px; font-size: 12px; line-height: 1.45; text-align: center; color: var(--muted); }
.bl-v4 .bl-wa-fgrid .bl-chat { min-height: 440px; }
.bl-v4 .bl-wa-preview .bl-bubble b { font-weight: 700; }
.bl-v4 .bl-wa-ex-label { align-self: stretch; text-align: center; }
/* WhatsApp's own surface: fixed colours allowed */
.bl-v4 .bl-wa-chat-sub { display: block; font-size: 11px; font-weight: 500; opacity: .8; }
.bl-v4 .bl-wa-day { align-self: center; padding: 3px 10px; border-radius: 8px; background: #fff; color: #54656f; font-size: 11px; font-weight: 600; box-shadow: 0 1px 1px rgba(0, 0, 0, .06); }
.dark .bl-v4 .bl-wa-day { background: #1f2c34; color: #8696a0; }
.bl-v4 .bl-wa-qr-grid { display: grid; grid-template-columns: 1fr 1fr; }
.bl-v4 .bl-wa-ex-dialog .bl-wa-preview { position: static; margin-top: 16px; }
.bl-v4 .bl-wa-ex-dialog .bl-wa-ex-label { display: none; }
.bl-v4 .bl-wa-ex-dialog .bl-chat { min-height: 0; }

@media (max-width: 1023.98px) {
  .bl-v4 .bl-wa-conn { grid-template-columns: auto minmax(0, 1fr); padding: 20px 16px; }
  .bl-v4 .bl-wa-conn-actions { grid-column: 1 / -1; }
  .bl-v4 .bl-wa-conn-actions .bl-btn { flex: 1 1 0; height: 44px; }
  .bl-v4 .bl-wa-intro { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; }
  .bl-v4 .bl-wa-intro-cta { grid-column: 1; }
  .bl-v4 .bl-wa-intro-cta form { width: 100%; }
  .bl-v4 .bl-wa-intro-cta .bl-btn { width: 100%; min-width: 0; height: 44px; }
  .bl-v4 .bl-wa-pend { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bl-v4 .bl-wa-pend-card { padding: 20px 16px; }
  .bl-v4 .bl-wa-code-val { font-size: 22px; letter-spacing: .12em; }
  .bl-v4 .bl-wa-pend-foot .bl-textbtn { min-height: 40px; }
  .bl-v4 .bl-wa-fgrid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .bl-v4 .bl-wa-group { padding: 16px 16px 6px; }
  .bl-v4 .bl-wa-fn { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 16px; }
  .bl-v4 .bl-wa-fn-ic { display: none; }
  .bl-v4 .bl-wa-fn-foot .bl-textbtn { min-height: 40px; }
  .bl-v4 .bl-wa-fns-foot { padding: 12px 16px; }
  .bl-v4 .bl-wa-preview { position: static; }
}