/* ───────────────────────────────────────────────────────────────────────────
   Synthograsizer Agent Composer styles.

   Scoping: everything below `:root` is wrapped in @scope (#composer-mount).
   That keeps these rules from leaking into the rest of the synthograsizer
   page when Composer is mounted as a third mode alongside Studio / Perform.

   - `:root` variables are intentionally global (prefix `--hw-` is unique).
   - The original mockup's `body` rule is dropped; the synthograsizer page
     owns body styling and we don't want the composer to reach that high.
   - The `*` reset and `::-webkit-scrollbar` rules sit inside @scope so they
     only affect descendants of #composer-mount.

   When the standalone agent-composer.html page loads this file, it wraps its
   own body content in <div id="composer-mount"> so the same rules apply.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  --hw-chassis:    #ede6d8;
  --hw-panel:      #e0d8ca;
  --hw-surface:    #d4ccbe;
  --hw-recessed:   #c4bcac;
  --hw-border:     2px solid #7a6e5e;
  --hw-border-soft:1px solid #b8b0a0;
  --hw-shadow:     3px 3px 0 #7a6e5e;
  --hw-shadow-sm:  2px 2px 0 #7a6e5e;
  --hw-shadow-lg:  5px 5px 0 #7a6e5e;
  --hw-inset:      inset 2px 2px 5px rgba(90,80,60,.22), inset -1px -1px 2px rgba(255,255,255,.55);
  --hw-text:       #2e2418;
  --hw-text-dim:   #8a7e6e;
  --hw-text-label: #a09080;
  --hw-lcd-bg:     #f0e8d0;
  --hw-lcd-text:   #1e180e;
  --hw-lcd-dim:    #b0a888;
  --hw-pink:       #b86880;
  --hw-purp:       #8868a8;
  --hw-grn:        #5a9870;
  --hw-blue:       #5a8ab8;
  --hw-amb:        #c07040;
  --font-display:  'VT323', monospace;
  --font-label:    'Share Tech Mono', monospace;
  --font-brand:    'Bungee', sans-serif;
  --font-ui:       'Inter', sans-serif;
}

/* Ensure the hidden attribute is never overridden by @scope's display:block rule.
   The UA stylesheet's [hidden]{display:none} has lower specificity than any author
   rule, so we pin it here with !important before the @scope block. */
#composer-mount[hidden] { display: none !important; }

@scope (#composer-mount) {

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  /* The mount itself acts as the composer's body — picks up the chassis tint
     and tracking-paper texture from the original `body` rule. */
  :scope {
    font-family: var(--font-label);
    background: var(--hw-chassis);
    background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(100,80,40,.02) 3px, rgba(100,80,40,.02) 4px);
    color: var(--hw-text);
    min-height: 100vh;
    padding: 18px 18px 80px;
    display: block;
  }

  .shell { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }

  /* ── Header ── */
  .app-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; border-bottom: var(--hw-border); gap: 12px; flex-wrap: wrap;
  }
  .app-title { font-family: var(--font-brand); font-size: 20px; letter-spacing: 3px; text-transform: uppercase; }
  .app-title small { font-family: var(--font-label); font-size: 10px; letter-spacing:.18em; color: var(--hw-text-dim); margin-left: 8px; }
  .room-pill { display:flex; border: var(--hw-border); border-radius: 3px; overflow: hidden; box-shadow: var(--hw-shadow-sm); }
  .room-pill button {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
    padding: 6px 14px; border: none; border-right: var(--hw-border-soft);
    background: var(--hw-surface); color: var(--hw-text-dim); cursor: pointer;
  }
  .room-pill button:last-child { border-right: none; }
  .room-pill button.active { background: var(--hw-text); color: var(--hw-chassis); }

  /* ── Cards ── */
  .hw-card {
    background: var(--hw-panel); border: var(--hw-border); border-radius: 3px;
    box-shadow: var(--hw-shadow);
  }
  .card-label { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--hw-text-label); padding: 7px 12px 0; display: block; }
  .card-label .step { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:var(--hw-text); color:var(--hw-chassis); font-family:var(--font-label); font-size:8px; margin-right:6px; }

  /* ── Buttons ── */
  .hw-btn {
    font-family: var(--font-label); font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
    padding: 5px 10px; border: var(--hw-border); background: var(--hw-surface);
    border-radius: 2px; box-shadow: var(--hw-shadow-sm); cursor: pointer; color: var(--hw-text);
    display: inline-flex; align-items: center; gap: 4px; transition: transform .08s, box-shadow .08s;
    white-space: nowrap;
  }
  .hw-btn:hover { background: var(--hw-recessed); }
  .hw-btn:active, .hw-btn.active { transform: translate(2px,2px); box-shadow: none; }
  .hw-btn.primary { background: var(--hw-text); color: var(--hw-chassis); }
  .hw-btn.primary:hover { background: #1e150b; }
  .hw-btn.tiny { font-size: 9px; padding: 3px 7px; box-shadow: var(--hw-shadow-sm); border-width: 1px; }
  .hw-btn.ghost { background: transparent; border: var(--hw-border-soft); box-shadow: none; }

  /* ── Flow pill — compact 34px step indicator ── */
  .flow-pill {
    display: flex; height: 34px; align-items: stretch;
    border: var(--hw-border); border-radius: 99px;
    box-shadow: var(--hw-shadow-sm); overflow: hidden;
    background: var(--hw-surface);
  }
  .flow-seg {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 14px; background: transparent; border: none; border-right: var(--hw-border-soft);
    font-family: var(--font-label); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--hw-text-dim); cursor: pointer; white-space: nowrap;
    transition: background .1s;
  }
  .flow-seg:last-child { border-right: none; }
  .flow-seg:hover:not(.active) { background: var(--hw-panel); color: var(--hw-text); }
  .flow-seg.active { background: var(--hw-text); color: var(--hw-chassis); }
  .flow-seg.done   { color: var(--hw-grn); }
  .flow-seg-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; font-size: 9px; font-weight: 700;
    background: var(--hw-recessed); border: var(--hw-border-soft); flex-shrink: 0;
  }
  .flow-seg.active .flow-seg-num { background: var(--hw-chassis); color: var(--hw-text); border-color: var(--hw-chassis); }
  .flow-seg.done   .flow-seg-num { background: var(--hw-grn); color: var(--hw-chassis); border-color: var(--hw-grn); }
  .flow-seg-lbl { font-size: 9.5px; }

  /* ──────────────────────────────────────────────────────── */
  /* ROOM 1 — LIBRARY (Rolodex)                               */
  /* ──────────────────────────────────────────────────────── */
  .lib-grid { display: grid; grid-template-columns: 240px 1fr; gap: 14px; }
  .lib-side { display: flex; flex-direction: column; gap: 14px; }

  .lib-search-card { padding: 8px 10px 10px; }
  .lib-search {
    width: 100%; font-family: var(--font-label); font-size: 11px;
    padding: 6px 8px; border: var(--hw-border); border-radius: 2px;
    background: var(--hw-lcd-bg); color: var(--hw-lcd-text);
    box-shadow: var(--hw-inset);
  }
  .lib-search:focus { outline: none; border-color: var(--hw-text); }

  .lib-side-list { padding: 4px; display: flex; flex-direction: column; gap: 1px; }
  .lib-side-item {
    font-family: var(--font-label); font-size: 10px; letter-spacing:.06em; text-transform: uppercase;
    padding: 6px 10px; cursor: pointer; border-radius: 2px;
    display: flex; align-items: center; gap: 8px; color: var(--hw-text-dim);
    border: 1px solid transparent;
  }
  .lib-side-item:hover { background: var(--hw-surface); color: var(--hw-text); }
  .lib-side-item.active { background: var(--hw-lcd-bg); border: var(--hw-border-soft); color: var(--hw-text); box-shadow: var(--hw-shadow-sm); }
  .lib-side-item .count { margin-left:auto; font-size: 9px; color: var(--hw-text-label); }
  .lib-side-divider { height: 1px; background: var(--hw-border-soft); margin: 6px 4px; opacity:.5; }
  .lib-side-head { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--hw-text-label); padding: 8px 10px 4px; }

  .lib-main { display: flex; flex-direction: column; gap: 14px; }
  .lib-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 12px; border: var(--hw-border); background: var(--hw-panel);
    box-shadow: var(--hw-shadow-sm); border-radius: 3px;
  }
  .lib-toolbar .spacer { flex:1; }
  .lib-sort-pill { display:flex; border: var(--hw-border-soft); border-radius: 2px; overflow: hidden; }
  .lib-sort-pill button { font-family: var(--font-label); font-size: 9px; padding: 3px 8px; border: none; border-right: var(--hw-border-soft); background: var(--hw-surface); cursor: pointer; color: var(--hw-text-dim); text-transform: uppercase; }
  .lib-sort-pill button:last-child { border-right: none; }
  .lib-sort-pill button.active { background: var(--hw-text); color: var(--hw-chassis); }

  /* Profile card — looks like a cassette / patch card */
  .lib-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 12px; }
  .profile-card {
    position: relative;
    background: var(--hw-panel); border: var(--hw-border); border-radius: 3px;
    box-shadow: var(--hw-shadow); overflow: hidden;
    cursor: pointer; transition: transform .08s, box-shadow .08s;
    display: flex; flex-direction: column;
  }
  .profile-card:hover { transform: translate(-1px,-1px); box-shadow: var(--hw-shadow-lg); }
  .profile-card.selected { border-color: var(--hw-amb); }
  .profile-card .pc-strip {
    background: var(--hw-recessed); border-bottom: var(--hw-border);
    padding: 4px 10px; display: flex; align-items: center; gap: 6px;
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--hw-text-dim);
  }
  .pc-strip .pc-strip-id { margin-left: auto; font-family: var(--font-label); }
  .pc-head { padding: 10px 12px 6px; display: flex; align-items: center; gap: 10px; }
  .pc-avatar {
    width: 38px; height: 38px; border-radius: 3px;
    background: var(--hw-lcd-bg); border: var(--hw-border); box-shadow: var(--hw-shadow-sm);
    display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0;
  }
  .pc-name { font-family: var(--font-display); font-size: 22px; line-height: 1.05; color: var(--hw-text); }
  .pc-cat { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-text-dim); margin-top: 1px; }
  .pc-bio {
    padding: 4px 12px 10px; font-size: 11px; line-height: 1.4; color: var(--hw-text-dim);
    font-family: var(--font-ui); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .pc-bio em { background: var(--hw-lcd-bg); color: var(--hw-text); font-style: normal; padding: 0 3px; border-radius: 2px; border: 1px dashed var(--hw-text-label); font-family: var(--font-display); font-size: 13px; }
  .pc-meta { padding: 6px 12px; border-top: var(--hw-border-soft); display: flex; align-items: center; gap: 8px; background: var(--hw-surface); }
  .pc-meta .pc-vars { display: flex; align-items: center; gap: 4px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--hw-text-dim); }
  .pc-meta .knob-mini {
    width: 12px; height: 12px; border-radius: 50%; background: var(--hw-recessed);
    border: 1px solid var(--hw-text-dim); position: relative; flex-shrink: 0;
  }
  .pc-meta .knob-mini::after { content:''; position:absolute; top: 2px; left: 50%; width: 1px; height: 4px; background: var(--hw-text); transform-origin: top center; }
  .pc-tags { display: inline-flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
  .pc-tag {
    font-size: 8px; letter-spacing: .08em; padding: 2px 6px; border-radius: 2px;
    text-transform: uppercase; border: 1px solid var(--hw-text-label); color: var(--hw-text-dim); background: var(--hw-panel);
  }
  .pc-tag.creator { color: var(--hw-grn); border-color: var(--hw-grn); }
  .pc-tag.remix { color: var(--hw-purp); border-color: var(--hw-purp); }
  .pc-tag.builtin { color: var(--hw-blue); border-color: var(--hw-blue); }
  .pc-tag.style { color: var(--hw-pink); border-color: var(--hw-pink); }
  .pc-tag.role { color: var(--hw-amb); border-color: var(--hw-amb); }
  .pc-tag.source { color: var(--hw-text-label); border-color: var(--hw-text-label); font-style: italic; }
  .pc-actions { padding: 6px 8px; border-top: var(--hw-border-soft); display: flex; gap: 4px; }

  /* ── Thin color rail replaces old pc-strip ── */
  .pc-rail {
    height: 3px; flex-shrink: 0;
  }
  /* ── Monogram avatar ── */
  .pc-avatar.pc-monogram {
    font-size: 14px; font-weight: 700; font-family: var(--font-label);
    color: #fff; letter-spacing: .04em;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
  }
  /* ── ⋯ overflow menu ── */
  .pc-menu {
    position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 20;
    min-width: 140px; background: var(--hw-panel); border: var(--hw-border);
    border-radius: 3px; box-shadow: var(--hw-shadow); overflow: hidden;
  }
  .pc-menu-item {
    padding: 7px 12px; font-family: var(--font-label); font-size: 10px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--hw-text);
    cursor: pointer; border-bottom: var(--hw-border-soft);
  }
  .pc-menu-item:last-child { border-bottom: none; }
  .pc-menu-item:hover { background: var(--hw-surface); }
  .pc-menu-danger { color: var(--hw-pink); }
  .pc-menu-danger:hover { background: #f1d0d8; }

  .profile-card.create-card {
    border-style: dashed; box-shadow: none; background: var(--hw-surface);
    display: flex; align-items: center; justify-content: center; min-height: 200px;
    flex-direction: column; gap: 8px; color: var(--hw-text-dim);
  }
  .profile-card.create-card:hover { background: var(--hw-lcd-bg); color: var(--hw-text); border-color: var(--hw-amb); }
  .profile-card.create-card .plus { font-size: 32px; font-family: var(--font-display); color: var(--hw-amb); }
  .profile-card.create-card .lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }

  /* ──────────────────────────────────────────────────────── */
  /* ROOM 2 — EDITOR                                          */
  /* ──────────────────────────────────────────────────────── */
  .ed-grid { display: grid; grid-template-columns: 1fr 360px; gap: 14px; }
  .ed-left { display: flex; flex-direction: column; gap: 14px; }
  .ed-right { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 18px; align-self: start; }

  .ed-meta-row { display: grid; grid-template-columns: 60px 1fr 180px 120px; gap: 10px; padding: 10px 12px; }
  .ed-input-grp { display: flex; flex-direction: column; gap: 4px; }
  .ed-input-grp .lbl { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--hw-text-label); }
  .ed-input {
    font-family: var(--font-label); font-size: 12px; padding: 6px 8px;
    border: var(--hw-border-soft); border-radius: 2px; background: var(--hw-lcd-bg); color: var(--hw-lcd-text);
    box-shadow: var(--hw-inset);
  }
  .ed-input:focus { outline: none; border-color: var(--hw-text); }
  .ed-input.big { font-family: var(--font-display); font-size: 22px; line-height: 1.1; padding: 4px 8px; }
  .ed-emoji {
    width: 60px; height: 56px; align-self: end;
    background: var(--hw-lcd-bg); border: var(--hw-border); border-radius: 3px; box-shadow: var(--hw-inset);
    font-size: 32px; text-align: center; cursor: pointer;
  }

  .ed-bio-card .ed-bio-area {
    width: 100%; min-height: 130px;
    font-family: var(--font-display); font-size: 18px; line-height: 1.5;
    padding: 12px 14px; border: var(--hw-border); border-radius: 2px;
    background: var(--hw-lcd-bg); color: var(--hw-lcd-text);
    box-shadow: var(--hw-inset); resize: vertical;
  }
  .ed-bio-area:focus { outline: none; }
  .ed-bio-foot { display:flex; padding: 7px 12px 10px; gap: 8px; align-items: center; flex-wrap: wrap; }
  .ed-bio-foot .hint { font-size: 9px; color: var(--hw-text-label); letter-spacing: .06em; }
  .ed-bio-tokens { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
  .token-chip {
    font-family: var(--font-display); font-size: 14px; padding: 1px 8px;
    border: 1px dashed var(--hw-text-dim); border-radius: 2px; background: var(--hw-panel);
    color: var(--hw-text); cursor: pointer;
  }
  .token-chip.var { border-color: var(--hw-amb); color: var(--hw-amb); }
  .token-chip.anchor { border-color: var(--hw-blue); color: var(--hw-blue); }
  .token-chip:hover { background: var(--hw-lcd-bg); }
  .token-chip.add { border-style: solid; color: var(--hw-grn); border-color: var(--hw-grn); }

  /* Variables manager */
  .var-mgr { padding: 6px 10px 12px; }
  .var-mgr-head { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
  .var-mgr-head .ed-input-grp { flex:1; }
  .var-bank { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .var-row {
    display: grid; grid-template-columns: 24px 130px 1fr auto; gap: 10px; align-items: stretch;
    padding: 8px; background: var(--hw-surface); border: var(--hw-border-soft); border-radius: 3px;
  }
  .var-row.active { background: var(--hw-lcd-bg); border: var(--hw-border); box-shadow: var(--hw-shadow-sm); }
  .var-row .drag { font-size: 14px; color: var(--hw-text-label); cursor: grab; align-self: center; text-align: center; }
  .var-name-col { display: flex; flex-direction: column; gap: 4px; }
  .var-name-col .nm-input { font-family: var(--font-label); font-size: 11px; padding: 4px 6px; border: var(--hw-border-soft); background: var(--hw-panel); border-radius: 2px; }
  .var-name-col .feat-input { font-family: var(--font-display); font-size: 14px; padding: 2px 6px; border: var(--hw-border-soft); background: var(--hw-panel); border-radius: 2px; color: var(--hw-text); }
  .var-vals-col { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; }
  .val-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--hw-panel); border: var(--hw-border-soft); border-radius: 2px;
    padding: 3px 4px 3px 8px; font-size: 11px; font-family: var(--font-display);
    color: var(--hw-text);
  }
  .val-pill .wt {
    font-family: var(--font-label); font-size: 9px;
    background: var(--hw-recessed); padding: 1px 4px; border-radius: 2px; color: var(--hw-text-dim);
  }
  .val-pill .wt.hi { background: var(--hw-amb); color: var(--hw-chassis); }
  .val-pill .x { background: none; border: none; color: var(--hw-text-label); cursor: pointer; font-size: 12px; padding: 0 2px; }
  .val-pill .x:hover { color: var(--hw-pink); }
  .val-pill.add { background: transparent; border: 1px dashed var(--hw-text-dim); color: var(--hw-text-dim); cursor: pointer; }
  .val-pill.add:hover { border-color: var(--hw-text); color: var(--hw-text); background: var(--hw-panel); }
  .var-row-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
  .knob-thumb {
    width: 36px; height: 36px; border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, var(--hw-panel), var(--hw-recessed) 70%);
    border: var(--hw-border); box-shadow: var(--hw-shadow-sm); position: relative;
  }
  .knob-thumb::after { content:''; position:absolute; left: 50%; top: 4px; width: 2px; height: 8px; background: var(--hw-text); transform: translateX(-50%) rotate(var(--rot, 0deg)); transform-origin: 50% 14px; }

  /* Anchors */
  .anchor-tbl { padding: 6px 10px 12px; display: flex; flex-direction: column; gap: 4px; }
  .anchor-row {
    display: grid; grid-template-columns: 140px 1fr auto; gap: 8px; align-items: center;
    padding: 6px 8px; background: var(--hw-surface); border-radius: 2px;
    border-left: 3px solid var(--hw-blue);
  }
  .anchor-row .akey { font-family: var(--font-label); font-size: 11px; padding: 4px 6px; border: var(--hw-border-soft); background: var(--hw-panel); border-radius: 2px; }
  .anchor-row .aval { font-family: var(--font-display); font-size: 16px; padding: 2px 6px; border: var(--hw-border-soft); background: var(--hw-panel); border-radius: 2px; color: var(--hw-text); }
  .anchor-row .x { background: none; border: none; cursor: pointer; color: var(--hw-text-label); font-size: 14px; }
  .anchor-row .x:hover { color: var(--hw-pink); }

  /* Right column — Preview & Test Run */
  .preview-card .pv-stack { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
  .pv-lcd {
    background: var(--hw-lcd-bg); border: var(--hw-border); border-radius: 2px;
    box-shadow: var(--hw-inset); padding: 10px 12px;
    font-family: var(--font-display); font-size: 16px; line-height: 1.45; color: var(--hw-lcd-text);
    min-height: 120px; word-break: break-word; position: relative;
  }
  .pv-lcd::after { content:''; position:absolute; inset:0; pointer-events:none; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.03) 3px, rgba(0,0,0,.03) 4px); }
  .pv-lcd .anchor-fill { background: rgba(90,138,184,.18); border-bottom: 1px dotted var(--hw-blue); }
  .pv-lcd .var-fill { background: rgba(192,112,64,.18); border-bottom: 1px dotted var(--hw-amb); }
  .pv-lcd .pending { color: var(--hw-text-dim); border-bottom: 1px dashed var(--hw-text-dim); }

  .pv-knobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 10px 12px; background: var(--hw-surface); border-top: var(--hw-border-soft); border-bottom: var(--hw-border-soft); }
  .knob-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; }
  .knob-cell .knob-svg { width: 52px; height: 52px; }
  .knob-cell .knob-name { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-text-dim); text-align: center; }
  .knob-cell .knob-val { font-family: var(--font-display); font-size: 14px; color: var(--hw-text); text-align: center; }

  .pv-actions { display: flex; gap: 6px; padding: 0 10px 10px; flex-wrap: wrap; }

  /* Test Run mini-chat */
  .test-card { padding: 6px 12px 10px; }
  .test-bubble {
    background: var(--hw-lcd-bg); border: var(--hw-border-soft); border-radius: 3px;
    padding: 8px 10px; font-family: var(--font-display); font-size: 14px; line-height: 1.4;
    color: var(--hw-lcd-text); margin: 6px 0; box-shadow: var(--hw-inset);
  }
  .test-bubble.user { background: var(--hw-panel); }
  .test-bubble .who { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-text-dim); margin-bottom: 4px; font-family: var(--font-label); }
  .test-bar { display: flex; gap: 6px; margin-top: 6px; }
  .test-bar input { flex:1; font-family: var(--font-label); font-size: 11px; padding: 6px 8px; border: var(--hw-border-soft); background: var(--hw-panel); border-radius: 2px; }

  /* AI generate-from-description bar (in editor header) */
  .ai-bar {
    display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
    padding: 10px 12px; background: var(--hw-recessed); border-bottom: var(--hw-border-soft);
    align-items: end;
  }
  .ai-bar input {
    font-family: var(--font-label); font-size: 11px; padding: 6px 10px;
    border: var(--hw-border); background: var(--hw-lcd-bg); border-radius: 2px;
    box-shadow: var(--hw-inset); color: var(--hw-lcd-text);
  }
  .ai-bar .lbl-mini { display: flex; align-items: center; gap: 8px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-text-dim); margin-bottom: 4px; }
  .ai-bar .lbl-mini::before { content: '✦'; color: var(--hw-amb); font-size: 12px; }

  /* ──────────────────────────────────────────────────────── */
  /* ROOM 3 — SESSION / ENSEMBLE BUILDER                      */
  /* ──────────────────────────────────────────────────────── */
  .session-grid { display: grid; grid-template-columns: 260px 1fr 280px; gap: 14px; }
  .sess-head { padding: 10px 12px; }
  .sess-head input { font-family: var(--font-display); font-size: 22px; width: 100%; border:none; background:transparent; color:var(--hw-text); }
  .sess-head input:focus { outline: none; }
  .sess-head .meta { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-text-dim); }

  /* Mixing-board channel strip */
  .channel-rack { padding: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); grid-auto-rows: 240px; gap: 10px; background: var(--hw-recessed); border-radius: 3px; }
  .channel {
    background: var(--hw-panel); border: var(--hw-border); border-radius: 3px;
    box-shadow: var(--hw-shadow-sm); display: flex; flex-direction: column; overflow: hidden;
  }
  .channel-head { padding: 6px 8px; border-bottom: var(--hw-border-soft); display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  .channel-head .led { width: 7px; height: 7px; border-radius: 50%; background: var(--hw-grn); box-shadow: 0 0 4px var(--hw-grn); }
  .channel-head .nm { font-family: var(--font-display); font-size: 16px; flex:1; line-height: 1; }
  .channel-head .x { font-size: 12px; color: var(--hw-text-label); cursor: pointer; }
  .channel-num { font-family: var(--font-label); font-size: 9px; color: var(--hw-text-dim); padding: 4px 8px 0; letter-spacing: .12em; text-transform: uppercase; flex-shrink: 0; }
  .channel-knobs { padding: 6px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px; flex:1; min-height: 0; }
  .channel-knob {
    display: flex; flex-direction: column; align-items: center; padding: 4px;
    background: var(--hw-surface); border: var(--hw-border-soft); border-radius: 2px;
    cursor: pointer;
  }
  .channel-knob .lbl { font-size: 7px; letter-spacing: .1em; text-transform: uppercase; color: var(--hw-text-dim); margin-bottom: 2px; }
  .channel-knob .val { font-family: var(--font-display); font-size: 10px; color: var(--hw-text); text-align: center; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .channel-knob.locked { background: var(--hw-lcd-bg); border-color: var(--hw-amb); }
  .channel-knob.locked .lbl::after { content: ' 🔒'; }
  .channel-foot { padding: 5px 7px; border-top: var(--hw-border-soft); display: flex; gap: 4px; align-items:center; background: var(--hw-surface); flex-shrink: 0; }
  .channel.empty {
    background: transparent; border-style: dashed; box-shadow: none;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--hw-text-dim);
  }
  .channel.empty:hover { background: var(--hw-surface); color: var(--hw-text); }
  .channel.empty .add-cross { font-family: var(--font-display); font-size: 32px; color: var(--hw-amb); }
  .channel.empty .add-lbl { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }

  /* Roster (drag pool) */
  .roster-card { padding: 6px 8px; max-height: 600px; overflow-y: auto; }
  .roster-item {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    border: 1px solid transparent; border-radius: 2px; cursor: grab;
    margin-bottom: 2px;
  }
  .roster-item:hover { background: var(--hw-surface); border-color: var(--hw-border-soft); }
  .roster-item .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .roster-item .nm { font-family: var(--font-display); font-size: 14px; flex:1; line-height: 1; min-width:0; }
  .roster-item .cat { font-size: 8px; letter-spacing: .1em; color: var(--hw-text-label); }

  /* Anchors panel (right) */
  .anchor-side .anch-row {
    display: grid; grid-template-columns: 1fr; gap: 4px; padding: 6px 10px;
    border-bottom: var(--hw-border-soft);
  }
  .anchor-side .anch-row:last-child { border-bottom: none; }
  .anchor-side .anch-row .akey { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--hw-text-label); }
  .anchor-side .anch-row .aval { font-family: var(--font-display); font-size: 14px; color: var(--hw-lcd-text); background: var(--hw-lcd-bg); padding: 5px 7px; border: var(--hw-border-soft); box-shadow: var(--hw-inset); border-radius: 2px; }

  /* Goal & Launch */
  .goal-card { padding: 8px 12px; }
  .goal-card textarea {
    width: 100%; min-height: 60px;
    font-family: var(--font-display); font-size: 16px; line-height: 1.3;
    padding: 8px 10px; border: var(--hw-border-soft); border-radius: 2px;
    background: var(--hw-lcd-bg); color: var(--hw-lcd-text); box-shadow: var(--hw-inset); resize: vertical;
  }
  .goal-suggestions { display:flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .goal-sugg { font-size: 9px; padding: 3px 7px; border: var(--hw-border-soft); border-radius: 2px; background: var(--hw-surface); color: var(--hw-text-dim); cursor: pointer; }
  .goal-sugg:hover { background: var(--hw-lcd-bg); color: var(--hw-text); }

  .launch-card { padding: 10px 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .launch-stat { display: flex; align-items: center; gap: 5px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--hw-text-dim); padding: 4px 8px; border: var(--hw-border-soft); border-radius: 2px; background: var(--hw-surface); }
  .launch-stat .num { font-family: var(--font-display); font-size: 18px; color: var(--hw-text); margin-right: 3px; }
  .launch-card .grow { flex:1; }
  .launch-btn {
    font-family: var(--font-label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    padding: 10px 18px; border: var(--hw-border); background: var(--hw-text); color: var(--hw-chassis);
    border-radius: 2px; box-shadow: var(--hw-shadow); cursor: pointer;
  }
  .launch-btn:hover { background: var(--hw-amb); }
  .launch-btn:active { transform: translate(2px,2px); box-shadow: none; }

  /* Resolution-mode toggle */
  .res-toggle { display: inline-flex; border: var(--hw-border-soft); border-radius: 2px; overflow: hidden; }
  .res-toggle button { font-family: var(--font-label); font-size: 9px; padding: 4px 10px; border: none; border-right: var(--hw-border-soft); background: var(--hw-panel); color: var(--hw-text-dim); cursor: pointer; text-transform: uppercase; }
  .res-toggle button:last-child { border-right: none; }
  .res-toggle button.active { background: var(--hw-text); color: var(--hw-chassis); }

  /* ── Notes overlay ── */
  .note-pin {
    position: absolute; right: 12px; top: 12px;
    font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--hw-amb); font-family: var(--font-label);
    border: 1px dashed var(--hw-amb); padding: 2px 6px; border-radius: 2px;
    background: var(--hw-chassis);
  }

  /* Compose box on bottom for room transitions */
  .room { display: none; }
  .room.active { display: block; }

  /* tooltip */
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
    background: var(--hw-text); color: var(--hw-chassis); font-family: var(--font-label); font-size: 9px;
    padding: 3px 6px; border-radius: 2px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s;
    z-index: 99;
  }
  [data-tip]:hover::after { opacity: 1; }

  /* Scrollbars inside the composer only — don't restyle host page scrollbars */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-thumb { background: var(--hw-recessed); border-radius: 2px; }
  ::-webkit-scrollbar-track { background: transparent; }

  /* Status footer */
  .app-footer {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 8px 18px; background: var(--hw-chassis);
    border-top: var(--hw-border); display: flex; align-items: center; gap: 12px;
    font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-text-dim);
  }
  .app-footer .grow { flex:1; }
  .app-footer .stat-pill { display: flex; align-items: center; gap: 5px; padding: 3px 8px; border: var(--hw-border-soft); border-radius: 2px; background: var(--hw-panel); }
  .app-footer .led { width: 6px; height: 6px; border-radius: 50%; background: var(--hw-grn); box-shadow: 0 0 3px var(--hw-grn); }
  .app-footer .led.warn { background: var(--hw-amb); box-shadow: 0 0 3px var(--hw-amb); }
  .app-footer .led.off { background: var(--hw-recessed); box-shadow: none; }
  .app-footer .stat-pill-cta {
    font-family: var(--font-label); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
    cursor: pointer; border: var(--hw-border-soft); border-radius: 2px; background: var(--hw-panel);
    color: var(--hw-amb); font-weight: 700;
  }
  .app-footer .stat-pill-cta:hover { background: var(--hw-amb); color: var(--hw-chassis); }
  .app-footer .stat-pill-cta .led.warn { flex-shrink: 0; }

  /* ── A11y: visible focus ring on the DraggableKnob slider ─────────────── */
  div[role="slider"]:focus-visible {
    outline: 2px solid var(--hw-amb);
    outline-offset: 3px;
    border-radius: 50%;
  }

  /* Token chips get a faint ring on keyboard focus too */
  .token-chip:focus-visible,
  .val-pill:focus-visible,
  .lib-side-item:focus-visible {
    outline: 2px solid var(--hw-amb);
    outline-offset: 1px;
  }

  /* ── Session Template Quick-Start picker ────────────────────────────── */
  .qs-card { overflow: hidden; transition: max-height .3s ease; }
  .qs-card.collapsed .qs-body { display: none; }
  .qs-header {
    display: flex; align-items: center; gap: 8px; padding: 7px 12px;
    cursor: pointer; user-select: none;
  }
  .qs-header .qs-chevron {
    font-size: 10px; transition: transform .2s; color: var(--hw-text-dim);
    display: inline-block; width: 12px; text-align: center;
  }
  .qs-card.collapsed .qs-chevron { transform: rotate(-90deg); }
  .qs-header .qs-loaded-badge {
    margin-left: auto; font-size: 8px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--hw-grn);
  }
  .qs-cats {
    display: flex; flex-wrap: wrap; gap: 3px; padding: 0 12px 6px;
  }
  .qs-cat-pill {
    font-family: var(--font-label); font-size: 8px; letter-spacing: .06em;
    text-transform: uppercase; padding: 2px 7px; border-radius: 2px;
    border: 1px solid var(--hw-border-soft); background: var(--hw-surface);
    color: var(--hw-text-dim); cursor: pointer; white-space: nowrap;
  }
  .qs-cat-pill:hover { background: var(--hw-panel); color: var(--hw-text); }
  .qs-cat-pill.active { background: var(--hw-text); color: var(--hw-chassis); border-color: var(--hw-text); }
  .qs-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    padding: 0 10px 10px; max-height: 320px; overflow-y: auto;
  }
  .qs-tpl {
    padding: 7px 9px; background: var(--hw-surface); border: var(--hw-border-soft);
    border-radius: 3px; cursor: pointer; transition: background .1s, border-color .1s;
    display: flex; flex-direction: column; gap: 3px;
  }
  .qs-tpl:hover { background: var(--hw-lcd-bg); border-color: var(--hw-text-dim); }
  .qs-tpl.active { border-color: var(--hw-amb); background: var(--hw-lcd-bg); }
  .qs-tpl-name {
    font-family: var(--font-display); font-size: 13px; line-height: 1.1;
    color: var(--hw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .qs-tpl-meta {
    font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--hw-text-dim); display: flex; gap: 6px; align-items: center;
  }
  .qs-tpl-meta .qs-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  }

  /* ── Conflict dialog overlay ─────────────────────────────────────────── */
  .conflict-overlay {
    position: fixed; inset: 0; z-index: 95;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
  }
  .conflict-panel {
    width: min(400px, 90vw); background: var(--hw-panel);
    border: var(--hw-border); border-radius: 3px; box-shadow: var(--hw-shadow-lg);
    overflow: hidden;
  }
  .conflict-panel .conf-head {
    padding: 12px 14px 8px; font-family: var(--font-brand);
    font-size: 14px; letter-spacing: 1px;
  }
  .conflict-panel .conf-body {
    padding: 0 14px 12px; font-size: 11px; line-height: 1.5;
    color: var(--hw-text-dim); font-family: var(--font-ui);
  }
  .conflict-panel .conf-actions {
    display: flex; gap: 8px; padding: 10px 14px;
    border-top: var(--hw-border-soft); background: var(--hw-surface);
  }
  .conflict-panel .conf-actions .grow { flex: 1; }

  /* ── Mobile gate ───────────────────────────────────────────────────────
     The Composer is laid out as a 3-column desktop tool. Below 1024px the
     channel rack and editor split would crush; show a friendly notice
     instead and hide the chrome. The notice itself stays visible. */
  .composer-mobile-notice { display: none; }
}

/* Stays OUTSIDE @scope so it can hide the entire #composer-mount cleanly */
@media (max-width: 1023px) {
  /* Hide every direct child of #composer-mount … */
  #composer-mount > * { display: none !important; }
  /* … then unhide just the mobile notice */
  #composer-mount > .composer-mobile-notice { display: block !important; }
}
.composer-mobile-notice {
  display: none;
  max-width: 480px;
  margin: 40px auto;
  padding: 24px;
  background: #ede6d8;
  border: 2px solid #7a6e5e;
  box-shadow: 3px 3px 0 #7a6e5e;
  border-radius: 3px;
  font-family: 'Share Tech Mono', monospace;
  color: #2e2418;
  text-align: center;
}
.composer-mobile-notice h3 {
  font-family: 'Bungee', sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  margin: 0 0 12px;
}
.composer-mobile-notice p {
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 14px;
  color: #5a4e3e;
}
.composer-mobile-notice .composer-mobile-actions {
  display: flex; gap: 8px; justify-content: center;
}
.composer-mobile-notice button {
  font-family: inherit; font-size: 11px;
  padding: 8px 16px;
  background: #2e2418; color: #ede6d8;
  border: 2px solid #7a6e5e;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.composer-mobile-notice button:hover { background: #c07040; }

/* ── Toolbar popover (Issue 06) ── */
.lib-popover {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  min-width: 200px; background: var(--hw-panel); border: var(--hw-border);
  border-radius: 3px; box-shadow: var(--hw-shadow); overflow: hidden;
}
.lib-pop-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; font-family: var(--font-label); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--hw-text);
  cursor: pointer; border-bottom: var(--hw-border-soft);
}
.lib-pop-item:last-child { border-bottom: none; }
.lib-pop-item:hover { background: var(--hw-surface); }
.lib-pop-hint { color: var(--hw-text-label); font-size: 9px; letter-spacing: .04em; }

/* ── Library empty state (Issue 09) ── */
.lib-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 20px; gap: 12px;
  color: var(--hw-text-dim);
}
.lib-empty-icon { font-size: 32px; opacity: .5; }
.lib-empty-msg  { font-family: var(--font-display); font-size: 14px; text-align: center; line-height: 1.4; }
.lib-empty-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ── Chip caret & context menu (Issue 05) ── */
.chip-caret {
  padding: 0 3px; margin-left: 2px; border-radius: 1px;
  cursor: pointer; opacity: .55; font-size: 9px;
  line-height: inherit;
}
.chip-caret:hover { opacity: 1; background: var(--hw-recessed); }
.chip-popover {
  min-width: 180px;
  background: var(--hw-panel);
  border: var(--hw-border);
  border-radius: 3px;
  box-shadow: var(--hw-shadow);
  font-family: var(--font-label);
  font-size: 11px;
  overflow: hidden;
}
.chip-pop-item {
  padding: 8px 12px; cursor: pointer;
  color: var(--hw-text);
  border-bottom: 1px solid var(--hw-border-soft);
}
.chip-pop-item:last-child { border-bottom: none; }
.chip-pop-item:hover { background: var(--hw-surface); }

/* ── Bio preview overlay (Issue 10) ── */
.bio-preview-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
}
.bio-preview-panel {
  width: min(680px, 92vw); max-height: 80vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.bio-preview-list {
  flex: 1; overflow-y: auto;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.bio-preview-agent { display: flex; flex-direction: column; gap: 6px; }
.bio-preview-agent-head {
  display: flex; align-items: center; gap: 8px;
}
.bio-preview-bio {
  font-size: 11px; line-height: 1.55;
  color: var(--hw-text);
  background: var(--hw-recessed);
  border: var(--hw-border-soft);
  border-radius: 2px;
  padding: 8px 10px;
  white-space: pre-wrap;
}

/* ── Generation context indicators ── */
.gen-context-hint {
  font-size: 9px;
  letter-spacing: .1em;
  opacity: .55;
}
.gen-context-active {
  border-left: 2px solid var(--hw-amb) !important;
  transition: border-left-color .2s;
}

/* ── Generation Instructions panel ── */
.gen-instr-toggle {
  font-size: 9px;
  letter-spacing: .12em;
  padding: 2px 7px;
  opacity: .75;
}
.gen-instr-toggle:hover { opacity: 1; }
.gen-instr-panel {
  margin: 0 12px 10px;
  padding: 8px 10px;
  background: var(--hw-recessed);
  border: var(--hw-border-soft);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.gen-instr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gen-instr-note {
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--hw-text-label);
  line-height: 1.4;
  border-left: 2px solid var(--hw-amb);
  padding-left: 6px;
  opacity: .8;
}
.gen-instr-area {
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  background: var(--hw-lcd-bg);
  color: var(--hw-text);
  border: var(--hw-border-soft);
  border-radius: 2px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: 10px;
  line-height: 1.5;
  resize: vertical;
}
.gen-instr-area:focus {
  outline: none;
  border-color: var(--hw-amb);
}