/* MG3 — the Smart Generate workbench (gx tokens; mobile contract: flex children width:100% + min-width:0) */
.wb-page { max-width: 880px; }
.wb-head { text-align: center; margin: 18px 0 22px; }
.wb-title { font-size: clamp(22px, 5vw, 30px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; color: var(--ink); }
.wb-sub { font-size: 14.5px; color: var(--muted); margin: 0 auto; max-width: 520px; }
.wb-state { text-align: center; padding: 56px 16px; color: var(--muted); }
.wb-state span { font-size: 40px; }
.wb-sec { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 26px 0 10px; }

.wb-genres { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wb-chip { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 650; cursor: pointer; }
.wb-chip.is-on { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

/* CH1 — capability chips + card badges (pin-derived; dim = honest mismatch, never hidden) */
.wb-caps { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.wb-caps:empty { margin: 0; }
.wb-cap { font-size: 13px; padding: 7px 13px; min-height: 40px; display: inline-flex; align-items: center; }   /* the ≥40px touch-target contract */
.wb-model.is-dim { opacity: .4; }
.wb-model-caps { font-size: 11px; font-weight: 700; color: var(--brand-600, var(--brand-500)); margin-top: 2px; }
.wb-model-match { font-size: 11px; font-weight: 750; color: var(--ink); margin-top: 2px; }   /* CH5 — measured truth */

.wb-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.wb-model { text-align: left; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.wb-model.is-on { border-color: var(--brand-500); box-shadow: 0 0 0 1px var(--brand-500) inset; }
.wb-model.is-gone { opacity: .45; cursor: not-allowed; }
.wb-model-name { font-size: 14px; font-weight: 750; color: var(--ink); }
.wb-model-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-model-meta { font-size: 12px; color: var(--muted); }
.wb-model-meta em { color: var(--brand-600, var(--brand-500)); font-style: normal; font-weight: 700; }

.wb-form { display: flex; flex-direction: column; gap: 14px; }
.wb-form > * { width: 100%; min-width: 0; }
.wb-lab { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.wb-req { color: #dc2626; }
.wb-in { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 14px; }
.wb-ta { resize: vertical; min-height: 76px; font-family: inherit; }
.wb-aspects { display: flex; gap: 8px; flex-wrap: wrap; }
.wb-asp { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 13px; font-weight: 650; cursor: pointer; }
.wb-asp.is-on { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.wb-slide { display: flex; align-items: center; gap: 12px; }
.wb-slide input { flex: 1; min-width: 0; }
.wb-slide output { font-size: 13px; font-weight: 700; color: var(--ink); min-width: 38px; text-align: right; }
.wb-tog { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 650; color: var(--ink); padding: 6px 0; }
.wb-asset { font-size: 13px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; padding: 12px; }
.wb-hint { font-size: 12.5px; color: var(--muted); margin: 0; }

.wb-generate { margin-top: 16px; width: 100%; padding: 13px 16px; border: none; border-radius: 999px; background: var(--brand-500); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; }
.wb-generate:disabled { opacity: .45; cursor: not-allowed; }
.wb-note { font-size: 13px; color: var(--muted); min-height: 18px; margin: 8px 0 0; }
.wb-note.is-bad { color: #dc2626; font-weight: 650; }

.wb-result { border: 1px solid var(--line); border-radius: 16px; background: var(--card); min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; }
.wb-result-empty, .wb-result-err, .wb-result-pending { color: var(--muted); font-size: 14px; text-align: center; }
.wb-result-err { color: #b45309; font-weight: 650; }
.wb-out { max-width: 100%; max-height: 60vh; border-radius: 12px; }
.wb-out-meta { margin-top: 10px; font-size: 13px; color: var(--muted); font-weight: 650; }
.wb-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--brand-500); border-radius: 50%; animation: wbspin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes wbspin { to { transform: rotate(360deg); } }
.wb-skel { height: 64px; border-radius: 14px; background: var(--line); opacity: .35; animation: wbpulse 1.2s ease-in-out infinite; }
@keyframes wbpulse { 50% { opacity: .18; } }
.wb-empty { color: var(--muted); font-size: 13.5px; padding: 8px 0; }

/* MG4 — the action dock (mobile contract: rows wrap; flex children min-width:0) */
.wb-dock { margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.wb-dock-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wb-dock-lab { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); min-width: 72px; }
.wb-dk { padding: 8px 13px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--bg, transparent); color: var(--ink); font-size: 13px; font-weight: 650; cursor: pointer; }   /* ≥40px — the mobile touch-target contract */
.wb-dk:disabled { opacity: .45; cursor: not-allowed; }
.wb-dk-paid { border-color: var(--brand-500); color: var(--brand-600, var(--brand-500)); }
.wb-dk-a { text-decoration: none; display: inline-block; }
.wb-dock-sub { padding-left: 80px; }
.wb-dock-form { flex-direction: column; align-items: stretch; }
.wb-dock-form .wb-dock-row { padding-left: 0; }
.wb-dock-busy { color: var(--muted); font-size: 13px; font-weight: 650; }
.wb-voice { max-width: 180px; }
.wb-out-audio { width: 100%; max-width: 460px; }
.wb-audio-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-weight: 650; width: 100%; justify-content: center; }
.wb-audio-row audio { max-width: 320px; min-width: 0; }
.wb-asset.is-filled { display: flex; align-items: center; gap: 10px; border-style: solid; border-color: var(--brand-500); color: var(--ink); }
.wb-asset-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; }

/* MG4.5 — own media in: the upload entry, the reference bar, the library picker */
.wb-upload-row { display: flex; justify-content: center; margin-top: 14px; }
.wb-upload { border-style: dashed; color: var(--muted); }
.wb-ref { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 14px; }
.wb-ref:has(.wb-asset-thumb) { border-style: solid; border-color: var(--brand-500); }
.wb-ref-lab { font-size: 13px; color: var(--muted); font-weight: 650; min-width: 0; }
.wb-ref-ok { color: var(--brand-600, var(--brand-500)); font-weight: 700; }
.wb-ref-warn { color: #b45309; font-weight: 650; }
.wb-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; max-height: 280px; overflow-y: auto; }
.wb-pick { padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; min-height: 40px; }
.wb-pick:hover, .wb-pick:focus-visible { border-color: var(--brand-500); }
.wb-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.wb-asset-clear { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 15px; cursor: pointer; padding: 10px; min-width: 40px; min-height: 40px; }   /* thumb-sized clear */

/* CH2 — the character menu + builder (mobile contract: rows wrap, inputs shrink) */
.wb-char { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; color: var(--ink); }
.wb-char span { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-char-new { justify-content: center; border-style: dashed; }
.wb-bld { margin-top: 10px; border: 1px dashed var(--brand-500); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.wb-bld-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.wb-bld-row .wb-in { flex: 1; min-width: 0; }
.wb-bld-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--muted); }
.wb-bld-consent input { margin-top: 2px; min-width: 18px; min-height: 18px; }
.wb-bld-cands { margin-top: 0; }
.wb-pick-wait { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); }
/* Review fix — the picked candidate must LOOK picked (the anchor defines the identity). */
.wb-pick.is-on { border-color: var(--brand-500); box-shadow: 0 0 0 2px var(--brand-500); position: relative; }
.wb-pick.is-on::after { content: '✓'; position: absolute; top: 2px; right: 4px; color: #fff; background: var(--brand-500); border-radius: 50%; width: 18px; height: 18px; font-size: 12px; line-height: 18px; text-align: center; }
/* MG5b — the chip (one learned next step) + the learning consent block */
.wb-suggest-row { border-top: 1px dashed var(--line); padding-top: 8px; }
.wb-dk-suggest { border-color: var(--brand-500); color: var(--brand-600, var(--brand-500)); font-weight: 750; background: color-mix(in srgb, var(--brand-500) 8%, transparent); }
.wb-suggest-why { font-size: 12px; color: var(--muted); min-width: 0; }
.wb-suggest-x { margin-left: auto; min-width: 40px; justify-content: center; color: var(--muted); border-style: dashed; }
.wb-learn { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 10px 14px; }
.wb-learn summary { font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.wb-learn-body { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.wb-learn-body .wb-tog { gap: 10px; }
.wb-learn-body .wb-tog input { min-width: 18px; min-height: 18px; }
.wb-learn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
@media (max-width: 480px) { .wb-models { grid-template-columns: 1fr 1fr; } .wb-dock-sub { padding-left: 0; } }