#supervisor-view-marketing-ai.active { display: block; overflow: auto; padding-bottom: 14px; }
.ai-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 4px 20px; }
.ai-heading h2 { margin:8px 0; font-size:24px; letter-spacing:-.025em; }
.ai-heading p,.ai-card p { color:var(--muted); line-height:1.6; font-size:12px; }
.ai-kicker { color:var(--muted); font-size:10px; letter-spacing:.14em; }
.ai-state { border:1px solid var(--border); border-radius:20px; padding:8px 12px; font-size:11px; white-space:nowrap; }
.ai-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:16px; margin:16px 0; align-items:start; }
.ai-card { min-width:0; padding:24px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.ai-card h3 { margin:0; font-size:16px; }
.ai-card-title { display:flex; gap:12px; align-items:flex-start; margin-bottom:22px; }
.ai-card-title p { margin:5px 0 0; }
.ai-step { display:grid; place-items:center; background:#9df0ca1a; color:var(--text); border:1px solid #9df0ca33; width:32px; height:32px; flex-shrink:0; border-radius:10px; font-size:11px; }
.ai-card fieldset { display:grid; gap:18px; padding:0; margin:0; border:0; min-width:0; }
.ai-card label { display:grid; gap:8px; font-size:12px; color:var(--text); }
.ai-card input,.ai-card textarea,.ai-card select { box-sizing:border-box; width:100%; min-width:0; padding:11px 12px; border:1px solid var(--border); border-radius:8px; background:var(--surface-2); color:var(--text); font:inherit; }
.ai-card textarea { resize:vertical; line-height:1.6; }
.ai-card input:focus-visible,.ai-card textarea:focus-visible,.ai-card select:focus-visible { outline:2px solid #67cba3; outline-offset:2px; }
.ai-card fieldset:disabled { opacity:.65; }
.ai-card small,.ai-card .ai-hint { color:var(--muted); font-size:11px; line-height:1.6; }
.ai-script { margin-top:24px; padding-top:18px; border-top:1px solid var(--border); font-size:12px; }
.ai-script summary { cursor:pointer; }
.ai-side { display:grid; gap:16px; }
.ai-balance { display:flex; align-items:baseline; gap:10px; margin-bottom:20px; }
.ai-balance strong { font-size:42px; font-weight:600; letter-spacing:-.05em; }
.ai-balance span { color:var(--muted); font-size:12px; }
.ai-meter-caption { display:flex; justify-content:space-between; font-size:11px; gap:8px; }
.ai-wallet progress { appearance:none; width:100%; height:7px; margin:10px 0 20px; border:0; border-radius:10px; background:var(--surface-2); accent-color:#75d3ab; overflow:hidden; }
.ai-wallet progress::-webkit-progress-bar { background:var(--surface-2); }
.ai-wallet progress::-webkit-progress-value { background:#75d3ab; border-radius:10px; }
.ai-wallet-details { display:grid; gap:12px; }
.ai-wallet-details span { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--muted); }
.ai-wallet-details b { color:var(--text); font-weight:500; }
.ai-notice { padding:12px 14px; border:1px solid var(--border); border-radius:9px; font-size:12px; background:var(--surface); line-height:1.5; }
.ai-notice.error { color:#f4adad; border-color:#b95a5a; }
[data-theme="light"] .ai-notice.error { color:#9b2929; }
.ai-buttons { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.ai-connection { font-size:12px; color:var(--muted); line-height:1.6; }
.ai-connection img { display:block; width:220px; max-width:100%; height:auto; background:#fff; border-radius:8px; padding:8px; }
.ai-packages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ai-packages a { display:grid; gap:10px; padding:20px; border:1px solid var(--border); border-radius:12px; text-decoration:none; color:var(--text); transition:border-color .15s; }
.ai-packages a:hover { border-color:#75d3ab; }
.ai-packages span { font-size:13px; }
.ai-packages strong { font-size:28px; font-weight:600; }
.ai-packages b { font-size:12px; margin-top:8px; }
.ai-admin-form { display:grid; gap:16px; grid-template-columns:2fr 1fr; margin:20px 0; }
.ai-admin-form label:nth-child(3) { grid-column:1/-1; }
.ai-history { max-height:300px; overflow:auto; }
.ai-history p,.ai-review { display:flex; justify-content:space-between; gap:12px; padding:10px; border-bottom:1px solid var(--border); }
.ai-review { flex-wrap:wrap; font-size:12px; }

/* Compact supervisor workspace; the Admin ledger retains its existing layout. */
#supervisor-view-marketing-ai.active { display:flex; flex-direction:column; gap:8px; padding:0; overflow:auto; }
#supervisor-view-marketing-ai > * { flex-shrink:0; }
#supervisor-view-marketing-ai .ai-heading { padding:2px 2px 4px; gap:12px; }
#supervisor-view-marketing-ai .ai-heading h2 { margin:0 0 3px; font-size:16px; letter-spacing:0; line-height:1.3; }
#supervisor-view-marketing-ai .ai-heading p { margin:0; font-size:11px; line-height:1.4; }
#supervisor-view-marketing-ai .ai-state { padding:5px 9px; font-size:10px; }
#supervisor-view-marketing-ai .ai-notice { padding:7px 10px; border-radius:6px; font-size:11px; line-height:1.35; }
#supervisor-view-marketing-ai .ai-layout { margin:0; gap:10px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; }
#supervisor-view-marketing-ai .ai-card { padding:12px; border-radius:8px; }
#supervisor-view-marketing-ai .ai-card-title { justify-content:space-between; align-items:center; gap:8px; margin:0 0 10px; min-height:24px; }
#supervisor-view-marketing-ai .ai-card h3 { font-size:13px; line-height:1.35; }
#supervisor-view-marketing-ai .ai-card-caption { color:var(--muted); font-size:10px; }
.ai-text-button { padding:4px 0; background:none; border:0; color:var(--text); font:inherit; font-size:11px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.ai-text-button:hover { color:var(--primary); }
.ai-text-button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
#supervisor-view-marketing-ai fieldset { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
.ai-field-wide { grid-column:1/-1; }
#supervisor-view-marketing-ai label { gap:5px; font-size:11px; line-height:1.35; }
#supervisor-view-marketing-ai input,#supervisor-view-marketing-ai select { height:32px; padding:6px 9px; border-radius:6px; }
#supervisor-view-marketing-ai textarea { height:88px; min-height:0; resize:none; padding:7px 9px; border-radius:6px; line-height:1.4; }
#supervisor-view-marketing-ai .ai-card small,#supervisor-view-marketing-ai .ai-hint { font-size:10px; line-height:1.4; }
#supervisor-view-marketing-ai .ai-hint { margin:8px 0 0; }
#supervisor-view-marketing-ai .ai-edit-hint { margin:5px 0 0; }
#supervisor-view-marketing-ai .btn { min-height:30px; padding:6px 10px; font-size:11px; line-height:1.2; }
#supervisor-view-marketing-ai fieldset > .btn { justify-self:start; min-width:155px; }
#supervisor-view-marketing-ai .ai-side { gap:10px; grid-template-rows:auto 1fr; }
#supervisor-view-marketing-ai .ai-balance { gap:8px; margin:0 0 9px; }
#supervisor-view-marketing-ai .ai-balance strong { font-size:27px; line-height:1.1; letter-spacing:-.02em; }
#supervisor-view-marketing-ai .ai-balance span { font-size:10px; }
#supervisor-view-marketing-ai .ai-meter-caption { font-size:10px; }
#supervisor-view-marketing-ai progress { margin:6px 0 9px; height:5px; display:block; }
#supervisor-view-marketing-ai .ai-wallet-details { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#supervisor-view-marketing-ai .ai-wallet-details span { display:grid; gap:4px; font-size:10px; }
#supervisor-view-marketing-ai .ai-wallet-details b { font-size:12px; }
#supervisor-view-marketing-ai .ai-buttons { gap:6px; margin-top:10px; }
#supervisor-view-marketing-ai .ai-connection { font-size:11px; line-height:1.4; }
.ai-mobile-tabs { display:none; }
.ai-dialog { box-sizing:border-box; width:min(600px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:18px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); box-shadow:0 18px 60px #0005; overflow:auto; }
.ai-dialog::backdrop { background:#07181199; backdrop-filter:blur(3px); }
.ai-dialog > header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ai-dialog h3 { margin:0; font-size:15px; }
.ai-dialog p { font-size:12px; line-height:1.6; color:var(--muted); }
.ai-dialog > header p { margin:5px 0 0; }
.ai-dialog .ai-packages { gap:10px; }
.ai-dialog .ai-packages a { padding:14px 12px; gap:8px; border-radius:7px; }
.ai-dialog .ai-packages span { font-size:12px; }
.ai-dialog .ai-packages strong { font-size:23px; }
.ai-dialog .ai-packages small { font-size:10px; color:var(--muted); }
.ai-qr-dialog { width:min(360px,calc(100vw - 32px)); }
.ai-qr-dialog img { width:220px; max-width:100%; margin:0 auto; box-sizing:border-box; }
.ai-qr-dialog p { text-align:center; }
@media(max-width:1100px) {
  .ai-mobile-tabs { display:flex; gap:4px; padding:3px; border:1px solid var(--border); border-radius:6px; background:var(--surface); }
  .ai-mobile-tabs button { flex:1; min-width:0; border:0; border-radius:4px; padding:6px 3px; color:var(--muted); background:transparent; font:inherit; font-size:11px; line-height:1.2; cursor:pointer; }
  .ai-mobile-tabs button[aria-selected="true"] { color:var(--text); background:var(--surface-2); box-shadow:inset 0 -2px var(--primary); }
  #supervisor-view-marketing-ai .ai-layout { display:block; }
  #supervisor-view-marketing-ai .ai-side { display:contents; }
  #supervisor-view-marketing-ai[data-panel="config"] #aiWalletCard,
  #supervisor-view-marketing-ai[data-panel="config"] #aiWhatsAppCard,
  #supervisor-view-marketing-ai[data-panel="wallet"] #aiConfigForm,
  #supervisor-view-marketing-ai[data-panel="wallet"] #aiWhatsAppCard,
  #supervisor-view-marketing-ai[data-panel="connection"] #aiConfigForm,
  #supervisor-view-marketing-ai[data-panel="connection"] #aiWalletCard { display:none; }
}
@media(max-width:600px) {
  #supervisor-view-marketing-ai .ai-heading { align-items:center; gap:6px; }
  #supervisor-view-marketing-ai .ai-heading h2 { font-size:14px; margin:0; }
  #supervisor-view-marketing-ai .ai-heading p { display:none; }
  #supervisor-view-marketing-ai .ai-card { padding:10px; }
  #supervisor-view-marketing-ai fieldset { gap:8px; }
  #supervisor-view-marketing-ai textarea { height:64px; }
  #supervisor-view-marketing-ai .ai-balance { flex-wrap:wrap; }
  #supervisor-view-marketing-ai .ai-card-title { gap:6px; }
  #supervisor-view-marketing-ai .ai-card h3 { font-size:12px; }
  .ai-text-button { font-size:10px; }
  .ai-dialog .ai-packages { grid-template-columns:1fr; gap:8px; }
  .ai-dialog .ai-packages a { grid-template-columns:1fr auto; align-items:center; padding:10px 12px; gap:5px; }
  .ai-dialog .ai-packages b { margin:0; }
  .ai-admin-form { grid-template-columns:1fr; }
}
@media(max-height:650px) {
  #supervisor-view-marketing-ai .ai-heading p { display:none; }
  #supervisor-view-marketing-ai .ai-heading h2 { margin:0; }
  #supervisor-view-marketing-ai .ai-layout { gap:8px; }
  #supervisor-view-marketing-ai .ai-card { padding:10px; }
  #supervisor-view-marketing-ai textarea { height:56px; }
  #supervisor-view-marketing-ai fieldset { gap:6px 10px; }
}

.ai-summary-field { display:grid; gap:5px; align-content:start; min-width:0; }
.ai-field-heading { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.ai-info-button { flex-shrink:0; width:18px; height:18px; padding:0; border:1px solid var(--border); border-radius:50%; background:var(--surface-2); color:var(--text); font:inherit; font-size:11px; cursor:pointer; }
.ai-info-button:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }