/* ============================================================
   Agent Home — scoped design system for the TaoPunk Showcase
   Details page only. Namespaced under .agent-home / .ah-*.
   Full-bleed app layout: flush full-height left sidebar (under the
   56px global header) + a workspace that fills the rest. See AGENT-HOME-DESIGN.md
   ============================================================ */

.agent-home{
  --ah-1:4px; --ah-2:8px; --ah-3:12px; --ah-4:16px; --ah-5:20px; --ah-6:24px; --ah-8:32px; --ah-12:48px;
  --ah-r-sm:8px; --ah-r:12px; --ah-r-lg:16px; --ah-pill:999px;
  --ah-e1:0 1px 3px rgba(0,0,0,.25); --ah-e2:0 8px 24px rgba(0,0,0,.30);
  --ah-glow:0 0 0 1px rgba(0,212,255,.25), 0 6px 24px rgba(0,212,255,.10);
  --ah-line:rgba(255,255,255,.08);
  --ah-head:0px; /* this page is a full takeover — no global header above it */
  --ah-fast:120ms; --ah-base:200ms; --ah-slow:320ms;
  --ah-ease:cubic-bezier(.4,0,.2,1); --ah-ease-out:cubic-bezier(.16,1,.3,1);
  color:var(--text); font-family:'Inter','Space Mono',sans-serif;
}
html[data-theme="light"] .agent-home{ --ah-line:rgba(0,0,0,.08); --ah-e1:0 1px 3px rgba(0,0,0,.08); --ah-e2:0 8px 24px rgba(0,0,0,.12); }
.ah-dense{ --ah-3:8px; --ah-4:12px; --ah-5:14px; --ah-6:16px; --ah-8:22px; }

/* ── shell: flush sidebar + filling workspace ─────────── */
.ah-shell{ display:grid; grid-template-columns:248px 1fr; align-items:start; transition:grid-template-columns var(--ah-base) var(--ah-ease); }
.ah-shell--collapsed{ grid-template-columns:0 1fr; }
.ah-nav{ position:sticky; top:var(--ah-head); height:calc(100vh - var(--ah-head)); min-width:0; overflow-x:hidden; overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--ah-5);
  border-right:1px solid var(--ah-line); background:var(--bg-card); padding:var(--ah-6) var(--ah-4);
  transition:padding var(--ah-base) var(--ah-ease); }
.ah-shell--collapsed .ah-nav{ padding-left:0; padding-right:0; border-right-color:transparent; }
.ah-nav-top{ display:flex; justify-content:flex-end; margin-bottom:-8px; }
.ah-nav-meta{ display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; }
.ah-more{ display:none; } /* desktop: hidden; mobile: the More/Less toggle in the header */
.ah-collapse, .ah-expand{ font:inherit; font-size:15px; line-height:1; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-dim); background:transparent; border:1px solid var(--ah-line); border-radius:7px;
  transition:color var(--ah-fast) var(--ah-ease), border-color var(--ah-fast) var(--ah-ease); }
.ah-collapse:hover, .ah-expand:hover{ color:var(--accent); border-color:rgba(0,212,255,.4); }
.ah-expand{ position:absolute; top:18px; left:18px; z-index:5; background:var(--bg-card); }
.ah-back-mini{ font:inherit; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.5px; color:var(--text-dim);
  background:transparent; border:none; cursor:pointer; padding:0; display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  transition:color var(--ah-fast) var(--ah-ease); }
.ah-back-mini:hover{ color:var(--accent); }
.ah-nav-id{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
  padding-bottom:var(--ah-5); border-bottom:1px solid var(--ah-line); }
.ah-nav-av{ width:72px; height:72px; border-radius:12px; image-rendering:pixelated; object-fit:cover; background:#1a1a28; }
.ah-nav-id .nm{ font-size:15px; font-weight:700; }
.ah-nav-id .st{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.5px; color:var(--success); }
.ah-nav-id .st--off{ color:var(--text-dim); }
.ah-owner-ctrls{ display:flex; flex-direction:column; gap:10px; }
.ah-nav-id .rk{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.5px; color:#c98bff; }
.ah-nav-items{ display:flex; flex-direction:column; gap:3px; }
.ah-navitem{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; cursor:pointer;
  color:var(--text-dim); font-size:13px; font-weight:600; border-left:2px solid transparent;
  transition:background var(--ah-fast) var(--ah-ease), color var(--ah-fast) var(--ah-ease); }
.ah-navitem .g{ width:16px; text-align:center; font-family:'Space Mono',monospace; opacity:.85; }
.ah-navitem:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.ah-navitem.active{ background:rgba(0,212,255,.10); color:var(--accent); border-left-color:var(--accent); }
.ah-nav-foot{ margin-top:auto; padding-top:var(--ah-5); border-top:1px solid var(--ah-line); display:flex; flex-direction:column; gap:10px; }
.ah-nav-foot .own .ah-label{ margin:0; }
.ah-nav-foot .own .v{ font-family:'Space Mono',monospace; font-size:11px; color:var(--accent); }
.ah-modepill{ font:inherit; font-family:'Space Mono',monospace; font-size:9px; color:var(--text-dim); cursor:pointer;
  background:transparent; border:1px solid var(--ah-line); border-radius:var(--ah-pill); padding:5px 9px; text-align:center;
  transition:color var(--ah-fast) var(--ah-ease), border-color var(--ah-fast) var(--ah-ease); }
.ah-modepill:hover{ color:var(--text); border-color:rgba(0,212,255,.4); }
.ah-collnav{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:2px; }
.ah-collnav .lbl{ font:inherit; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.5px; color:var(--text-dim);
  background:transparent; border:none; cursor:pointer; transition:color var(--ah-fast) var(--ah-ease); }
.ah-collnav .lbl:hover{ color:var(--accent); }
.ah-step-btn{ font:inherit; font-size:14px; line-height:1; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-dim); background:transparent; border:1px solid var(--ah-line); border-radius:7px;
  transition:color var(--ah-fast) var(--ah-ease), border-color var(--ah-fast) var(--ah-ease); }
.ah-step-btn:hover:not(:disabled){ color:var(--accent); border-color:rgba(0,212,255,.4); }
.ah-step-btn:disabled{ opacity:.35; cursor:not-allowed; }
.ah-appnav{ display:flex; flex-direction:column; gap:1px; padding-bottom:12px; border-bottom:1px solid var(--ah-line); }
.ah-appnav-label{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); padding:0 11px 6px; }
.ah-applink{ display:block; width:100%; text-align:left; padding:8px 11px; border-radius:8px; font:inherit; font-size:13px; font-weight:600;
  color:var(--text-dim); background:transparent; border:none; cursor:pointer; text-decoration:none;
  transition:background var(--ah-fast) var(--ah-ease), color var(--ah-fast) var(--ah-ease); }
.ah-applink:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.ah-wallet{ margin-top:10px; }

.ah-workspace{ position:relative; min-width:0; min-height:calc(100vh - var(--ah-head)); padding:var(--ah-6) var(--ah-8);
  display:flex; flex-direction:column; }
.ah-shell--collapsed .ah-workspace{ padding-left:64px; }
.ah-wshead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--ah-5); flex:0 0 auto; }
.ah-wstitle{ font-size:18px; font-weight:700; }
.ah-wstitle .sub{ font-family:'Space Mono',monospace; font-size:11px; color:var(--text-dim); font-weight:400; margin-left:8px; }

/* desktop: app-shell scroll — body's `overflow:hidden auto` breaks position:sticky, so instead of
   relying on a sticky rail we pin the shell to the viewport and scroll only the workspace. The rail
   then fills its column at every scroll position (no gap below it on a tall Studio page) and stays put. */
@media (min-width:861px){
  .ah-shell{ height:100vh; overflow:hidden; }
  .ah-workspace{ height:100vh; min-height:0; overflow-y:auto; }
}

.ah-scrim{ display:none; } /* unused on mobile (top identity bar + bottom tab bar instead) */

/* ── mobile: slim identity bar pinned top, section nav as a fixed bottom tab bar (thumb zone);
      secondary nav (Go to / owner / wallet / stepper) drops from a top "More" toggle ── */
@media (max-width:860px){
  .agent-home{ --ah-topbar:62px; --ah-botbar:60px; }
  .ah-shell, .ah-shell--collapsed{ grid-template-columns:1fr; }
  /* the nav box itself collapses; its children are fixed to the viewport edges */
  .ah-nav{ position:static; height:auto; width:auto; display:block; padding:0; gap:0;
    border:none; box-shadow:none; background:none; transform:none; overflow:visible; }
  .ah-shell--collapsed .ah-nav{ padding:0; border-right-color:transparent; }

  /* top: compact identity bar */
  .ah-nav-id{ position:fixed; top:0; left:0; right:0; z-index:40;
    flex-direction:row; align-items:center; text-align:left; gap:11px;
    background:var(--bg-card); border-bottom:1px solid var(--ah-line);
    padding:9px 76px 9px var(--ah-4); }
  .ah-nav-av{ width:42px; height:42px; flex:0 0 42px; }
  .ah-nav-meta{ align-items:flex-start; gap:2px; min-width:0; }

  /* More toggle: pinned top-right over the identity bar */
  .ah-nav-top{ position:fixed; top:11px; right:12px; z-index:45; margin:0; }
  .ah-collapse{ display:none; }
  .ah-more{ display:inline-flex; align-items:center; font:inherit; font-family:'Space Mono',monospace; font-size:10px;
    letter-spacing:.5px; color:var(--text-dim); background:var(--bg); border:1px solid var(--ah-line);
    border-radius:var(--ah-pill); padding:5px 11px; cursor:pointer; }
  .ah-more:hover{ color:var(--accent); border-color:rgba(0,212,255,.4); }

  /* bottom: section nav as a fixed tab bar (icon over label) */
  .ah-nav-items{ position:fixed; bottom:0; left:0; right:0; z-index:40;
    flex-direction:row; justify-content:space-around; gap:2px;
    background:var(--bg-card); border-top:1px solid var(--ah-line);
    padding:7px var(--ah-2) calc(7px + env(safe-area-inset-bottom)); }
  .ah-navitem{ flex:1; flex-direction:column; align-items:center; gap:3px; justify-content:center;
    border-left:none; border-radius:9px; padding:6px 4px; font-size:10px; font-weight:600; max-width:96px;
    text-align:center; line-height:1.15; }
  .ah-navitem .g{ width:auto; font-size:15px; }
  .ah-navitem:hover{ background:transparent; }
  .ah-navitem.active{ border-left:none; background:rgba(0,212,255,.10); color:var(--accent); }

  /* "More" secondary nav: a sheet that drops from under the identity bar */
  .ah-nav-foot{ position:fixed; top:var(--ah-topbar); left:0; right:0; z-index:38; margin:0;
    background:var(--bg-card); border-bottom:1px solid var(--ah-line); box-shadow:var(--ah-e2);
    padding:var(--ah-4); max-height:calc(100vh - var(--ah-topbar) - var(--ah-botbar)); overflow-y:auto;
    animation:ah-fade-in var(--ah-fast) var(--ah-ease-out); }
  .ah-shell--collapsed .ah-nav-foot{ display:none; }
  /* Go to: horizontal row instead of a tall stack */
  .ah-appnav{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px; padding-bottom:var(--ah-3); }
  .ah-appnav-label{ width:100%; padding:0 0 4px; }
  .ah-applink{ width:auto; padding:7px 13px; border:1px solid var(--ah-line); border-radius:var(--ah-pill); }

  /* content fills the space between the two bars */
  /* full-height so the chat fills the space between the top and bottom bars */
  .ah-workspace, .ah-shell--collapsed .ah-workspace{ min-height:100dvh; box-sizing:border-box;
    padding:calc(var(--ah-topbar) + var(--ah-3)) var(--ah-4) calc(var(--ah-botbar) + var(--ah-3)); }
  .ah-expand{ display:none; }
  /* dense desktop grids → single / two column so nothing overflows ~375px */
  .ah-cfg-grid{ grid-template-columns:1fr; }
  .ah-statgrid{ grid-template-columns:1fr 1fr; }
  .wf-grid, .wf-grid--open{ grid-template-columns:1fr; }
  .wf-side, .wf-panel-wrap{ width:auto; }
  .wf-grid:not(.wf-grid--open) .wf-side{ display:none; }
  .ah-wshead{ flex-wrap:wrap; gap:var(--ah-3); }
}

/* ── primitives ──────────────────────────────────────── */
.ah-panel{ background:var(--bg-card); border:1px solid var(--ah-line); border-radius:var(--ah-r); box-shadow:var(--ah-e1); }
.ah-label{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); }
.ah-badge{ display:inline-flex; align-items:center; gap:5px; font-family:'Space Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.5px; padding:3px 8px; border-radius:var(--ah-r-sm); }
.ah-badge--accent{ color:#0a0a0f; background:var(--accent); }
.ah-badge--active{ color:var(--success); background:rgba(0,255,136,.12); border:1px solid rgba(0,255,136,.35); }
.ah-badge--epic{ color:#c98bff; background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.4); }
.ah-badge--muted{ color:var(--text-dim); border:1px solid var(--ah-line); }
.ah-btn{ font:inherit; font-size:13px; font-weight:600; cursor:pointer; border-radius:var(--ah-r-sm); padding:9px 16px; border:1px solid transparent;
  transition:transform var(--ah-fast) var(--ah-ease), background var(--ah-fast) var(--ah-ease), border-color var(--ah-fast) var(--ah-ease), box-shadow var(--ah-fast) var(--ah-ease); }
.ah-btn:active{ transform:translateY(1px); }
.ah-btn--primary{ background:var(--accent); color:#0a0a0f; }
.ah-btn--primary:hover{ box-shadow:0 4px 16px rgba(0,212,255,.3); }
.ah-btn--outline{ background:transparent; color:var(--text); border-color:var(--ah-line); }
.ah-btn--outline:hover{ border-color:rgba(0,212,255,.5); color:var(--accent); }
.ah-btn--block{ width:100%; }
.ah-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ── interact: a chat that fills ─────────────────────── */
.ah-chatview{ flex:1; display:flex; flex-direction:column; min-height:0; }
.ah-chat{ flex:1; display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--ah-line); border-radius:var(--ah-r); background:var(--bg-card); overflow:hidden; }
.ah-chat-stream{ flex:1; overflow-y:auto; padding:var(--ah-6); display:flex; flex-direction:column; min-height:0; }
.ah-chat-empty{ margin:auto; max-width:520px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--ah-3); color:var(--text-dim); }
.ah-chat-empty .big{ font-size:16px; font-weight:600; color:var(--text); }
.ah-feechip{ font-family:'Space Mono',monospace; font-size:11px; color:var(--accent); border:1px solid rgba(0,212,255,.3); border-radius:var(--ah-pill); padding:4px 10px; }
.ah-chat-input{ flex:0 0 auto; border-top:1px solid var(--ah-line); padding:var(--ah-3) var(--ah-4); display:flex; gap:var(--ah-3); align-items:center; }
.ah-chat-input input{ flex:1; background:var(--bg); border:1px solid var(--ah-line); border-radius:var(--ah-r-sm); padding:11px 14px; color:var(--text); font:inherit; font-size:13px; }
.ah-chat-input input::placeholder{ color:var(--text-dim); }
.ah-chat-send{ background:var(--accent); color:#0a0a0f; border:none; border-radius:var(--ah-r-sm); padding:11px 18px; font:inherit; font-weight:700; cursor:pointer; }
.ah-chat-send:disabled{ opacity:.5; cursor:not-allowed; }
/* let the ported in-house chat fill the Interact workspace */
.ah-chatview .punk-chat-section{ flex:1; display:flex; flex-direction:column; min-height:0; margin:0; }
/* lift the old page's 360px cap so the message area fills the workspace instead of floating */
.ah-chatview .punk-chat-messages{ flex:1; min-height:0; max-height:none; }
.ah-chatview .punk-chat-input-row{ flex:0 0 auto; margin-top:auto; }

/* ── dense rows / stats / sections ───────────────────── */
.ah-sectiontitle{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text); margin-bottom:var(--ah-3); display:flex; align-items:center; gap:8px; }
.ah-sectiontitle::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.ah-rows{ display:flex; flex-direction:column; gap:var(--ah-3); }
.ah-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--ah-3); border:1px solid var(--ah-line); border-radius:var(--ah-r-sm); padding:var(--ah-4); background:var(--bg-card); transition:border-color var(--ah-fast) var(--ah-ease); }
.ah-row:hover{ border-color:rgba(0,212,255,.25); }
.ah-row .rk{ font-size:13px; font-weight:600; }
.ah-row .rd{ font-size:11px; color:var(--text-dim); margin-top:2px; }
.ah-statgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--ah-3); }
.ah-stat{ border:1px solid var(--ah-line); border-radius:var(--ah-r-sm); padding:var(--ah-5); background:var(--bg-card); }
.ah-stat .label{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); }
.ah-stat .num{ font-family:'Space Mono',monospace; font-size:22px; font-weight:700; color:var(--accent); margin-top:6px; }

/* ── traits ──────────────────────────────────────────── */
.ah-attrs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--ah-3); }
.ah-attr{ border:1px solid var(--ah-line); border-radius:var(--ah-r-sm); padding:var(--ah-4); background:var(--bg-card); }
.ah-attr .k{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--accent); }
.ah-attr .v{ font-size:13px; font-weight:600; margin-top:3px; }
.ah-attr .pct{ font-size:10px; color:var(--text-dim); margin-top:2px; }

/* ── workflow canvas + slide/pin config ──────────────── */
.wf-grid{ display:grid; grid-template-columns:1fr 0fr; gap:var(--ah-4); margin-bottom:var(--ah-4); transition:grid-template-columns var(--ah-base) var(--ah-ease); }
.wf-grid--open{ grid-template-columns:1fr 300px; }
.wf-canvas{ border:1px solid var(--ah-line); border-radius:var(--ah-r); background:var(--bg-card); padding:18px 18px 8px; min-width:0; }
.wf-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.wf-title{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--text); }
.wf-step{ border:1px solid var(--ah-line); border-radius:10px; background:#13131d; padding:12px 14px; display:flex; align-items:center; gap:12px; cursor:pointer; transition:border-color var(--ah-fast) var(--ah-ease); }
html[data-theme="light"] .wf-step{ background:#fffdf8; }
.wf-step:hover{ border-color:rgba(0,212,255,.3); }
.wf-step.selected{ border-color:var(--accent); box-shadow:var(--ah-glow); }
.wf-step .ico{ width:30px; height:30px; flex:0 0 30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:'Space Mono',monospace; font-weight:700; font-size:12px; background:rgba(0,212,255,.1); border:1px solid rgba(0,212,255,.3); color:var(--accent); }
.wf-step.trigger .ico{ background:rgba(0,255,136,.1); border-color:rgba(0,255,136,.35); color:var(--success); }
.wf-step .k{ font-size:13px; font-weight:600; }
.wf-step .d{ font-size:11px; color:var(--text-dim); margin-top:1px; }
.wf-step .type{ margin-left:auto; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.5px; text-transform:uppercase; color:var(--text-dim); border:1px solid var(--ah-line); border-radius:6px; padding:2px 7px; }
.wf-conn{ width:2px; height:16px; background:var(--ah-line); margin-left:29px; }
.wf-add{ margin-top:14px; width:100%; border:1px dashed var(--ah-line); background:transparent; color:var(--text-dim); border-radius:10px; padding:10px; font:inherit; font-size:12px; cursor:pointer; transition:border-color var(--ah-fast) var(--ah-ease), color var(--ah-fast) var(--ah-ease); }
.wf-add:hover{ border-color:rgba(0,212,255,.4); color:var(--accent); }
.wf-hint{ text-align:center; font-size:11px; color:var(--text-dim); margin:14px 0 8px; }
.wf-side{ overflow:hidden; transition:opacity var(--ah-base) var(--ah-ease); }
.wf-grid:not(.wf-grid--open) .wf-side{ opacity:0; }
.wf-panel-wrap{ border:1px solid var(--ah-line); border-radius:var(--ah-r); background:var(--bg-card); padding:14px; width:300px; }
.wf-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.wf-panel-head .h{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--accent); }
.wf-panel-tools{ display:flex; gap:6px; }
.wf-pin, .wf-close{ font:inherit; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.5px; cursor:pointer; background:transparent; border:1px solid var(--ah-line); border-radius:6px; padding:3px 7px; color:var(--text-dim); transition:color var(--ah-fast) var(--ah-ease), border-color var(--ah-fast) var(--ah-ease), background var(--ah-fast) var(--ah-ease); }
.wf-pin:hover, .wf-close:hover{ color:var(--text); border-color:rgba(0,212,255,.4); }
.wf-pin.on{ color:#0a0a0f; background:var(--accent); border-color:var(--accent); }
.wf-field{ font-size:12px; color:var(--text-dim); margin-bottom:9px; }
.wf-field b{ color:var(--text); font-weight:600; }
.wf-subhead{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1.2px; text-transform:uppercase; color:var(--text-dim); margin:14px 0 8px; }
.wf-kb{ font-size:12px; color:var(--text); display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.wf-kb::before{ content:"▤"; color:var(--accent); }
.wf-panel-empty{ font-size:12px; color:var(--text-dim); padding:8px 0; }
/* workflow editor: step controls + config fields */
.wf-step-body{ flex:1; min-width:0; }
.wf-step .type{ margin-left:0; }
.wf-step-ctrls{ display:flex; gap:4px; flex:0 0 auto; }
.wf-mini{ font:inherit; font-size:12px; line-height:1; width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text-dim); background:transparent; border:1px solid var(--ah-line); border-radius:6px;
  transition:color var(--ah-fast) var(--ah-ease), border-color var(--ah-fast) var(--ah-ease); }
.wf-mini:hover:not(:disabled){ color:var(--accent); border-color:rgba(0,212,255,.4); }
.wf-mini:disabled{ opacity:.3; cursor:not-allowed; }
.wf-mini--del:hover:not(:disabled){ color:#ff5c7a; border-color:rgba(255,92,122,.5); }
.wf-add-row{ display:flex; gap:8px; margin-top:14px; }
.wf-add-row .wf-add{ margin-top:0; width:auto; flex:1; }
.wf-cfg-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.wf-cfg-label{ font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); }
.wf-cfg-wide{ width:100%; box-sizing:border-box; }
textarea.wf-cfg-wide{ resize:vertical; font-family:inherit; line-height:1.5; }

/* ── studio config editor ──────────────────────────── */
.ah-config{ display:flex; flex-direction:column; gap:var(--ah-4); margin-top:var(--ah-4);
  border:1px solid var(--ah-line); border-radius:var(--ah-r); background:var(--bg-card); padding:var(--ah-5); }
.ah-cfg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--ah-4); }
.ah-cfg-field{ display:flex; flex-direction:column; gap:7px; }
.ah-cfg-label{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); }
.ah-cfg-inrow{ display:flex; align-items:center; gap:8px; }
.ah-cfg-input, .ah-cfg-select{ background:var(--bg); border:1px solid var(--ah-line); border-radius:var(--ah-r-sm); padding:9px 11px; color:var(--text); font:inherit; font-size:13px; }
.ah-cfg-input{ width:120px; font-family:'Space Mono',monospace; }
.ah-cfg-select{ width:100%; }
.ah-cfg-unit{ font-family:'Space Mono',monospace; font-size:11px; color:var(--text-dim); }
.ah-cfg-tools{ display:flex; flex-wrap:wrap; gap:7px; }
.ah-cfg-tool{ font:inherit; font-size:11px; cursor:pointer; padding:6px 11px; border-radius:var(--ah-pill);
  border:1px solid var(--ah-line); background:transparent; color:var(--text-dim);
  transition:color var(--ah-fast) var(--ah-ease), border-color var(--ah-fast) var(--ah-ease), background var(--ah-fast) var(--ah-ease); }
.ah-cfg-tool.on{ color:var(--accent); border-color:rgba(0,212,255,.4); background:rgba(0,212,255,.08); }
.ah-cfg-save{ display:flex; align-items:center; gap:12px; }
.ah-cfg-status{ font-family:'Space Mono',monospace; font-size:11px; color:var(--text-dim); }
.ah-cfg-note{ font-size:11px; color:var(--text-dim); border-top:1px solid var(--ah-line); padding-top:var(--ah-3); }

/* ── studio persona & knowledge (wraps the ERC-7857 PrivateDataPanel) ── */
.ah-persona{ display:flex; flex-direction:column; gap:var(--ah-3); margin-top:var(--ah-4);
  border:1px solid var(--ah-line); border-radius:var(--ah-r); background:var(--bg-card); padding:var(--ah-5); }
.ah-persona-head{ display:flex; flex-direction:column; gap:4px; }
.ah-persona-sub{ font-size:11px; color:var(--text-dim); }
/* the embedded panel brings its own internals; just frame it to the AH theme */
.ah-persona .private-data-panel{ border:1px solid var(--ah-line); border-radius:var(--ah-r-sm); background:var(--bg); overflow:hidden; }
.ah-persona .private-data-header{ padding:11px 13px; }

.ah-fade{ animation:ah-fade-in var(--ah-base) var(--ah-ease-out); }
@keyframes ah-fade-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.ah-wip{ font-family:'Space Mono',monospace; font-size:10px; letter-spacing:1px; color:var(--text-dim); border:1px dashed var(--ah-line); border-radius:var(--ah-r-sm); padding:6px 10px; display:inline-block; margin-top:10px; }

/* ── list-for-sale modal (sits above the floating AI chat widget, z 9999) ── */
.ah-modal-overlay{ position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:ah-fade-in var(--ah-fast) var(--ah-ease-out); }
.ah-modal{ background:var(--bg-card); border:1px solid var(--ah-line); border-radius:var(--ah-r-lg);
  width:min(460px,100%); max-height:90vh; overflow-y:auto; box-shadow:var(--ah-e2); }
.ah-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--ah-4) var(--ah-5);
  border-bottom:1px solid var(--ah-line); font-weight:700; font-size:15px; }
.ah-modal-close{ font:inherit; font-size:16px; line-height:1; cursor:pointer; color:var(--text-dim); background:transparent; border:none; padding:4px; }
.ah-modal-close:hover{ color:var(--accent); }
.ah-modal .list-for-sale{ padding:var(--ah-5); }
@media (prefers-reduced-motion:reduce){ .ah-fade{ animation:none; } .wf-grid,.wf-side{ transition:none; } }