/* ═══════════════════════════════════════════════════════════════
   EXPLORER — Explorer chat view, input bar, scope toggle,
   preloaded sources, messages, tool-call indicators,
   fragment cards, thinking blocks, settings
   ═══════════════════════════════════════════════════════════════ */

  /* ── Explore view ────────────────────────────────────── */
  .explorer-view{
    flex:1;display:flex;flex-direction:column;min-width:0;
    background:var(--cream);position:relative;
  }
  .explorer-header{
    flex-shrink:0;padding:16px 28px 14px;
    background:var(--white);border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:16px;
  }
  .explorer-messages{
    flex:1;overflow-y:auto;
    padding:var(--ex-pad-y, 24px) var(--ex-pad-x, 32px) 56px;
    display:flex;flex-direction:column;gap:var(--ex-gap, 16px);
  }

  /* maintainer 2026-05-11: hide the "Loaded Sources (N)" panel from the
   * Atelier visible surface. The data layer (explorerPreloadedSources)
   * stays intact — the SELECTED/FULL ARCHIVE scope chip and the
   * prompt-builder both still read it. This was a redundant secondary
   * surface for the same state already shown by the scope chip + the
   * preloaded-sources notice in the composer. Reinstate by removing
   * this `display:none` if the data layer needs its own UI again. */
  #explorerSources{display:none !important;}
  .explorer-messages::-webkit-scrollbar{width:6px}
  .explorer-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:9px}
  .explorer-messages .msg-user{max-width:70%}
  .explorer-messages .msg-llm{max-width:100%}

  /* maintainer 2026-05-11 (superseded): the .atelier-narrator-status
   * approach (status lines in main output above the user message)
   * was replaced by the dashboard-header narrator slot — see
   * `.swarm-dashboard-narrator` in css/swarm.css. This rule is
   * kept as a safety net to render any leftover status nodes
   * inertly, in case an old run left them in the DOM. */
  .atelier-narrator-status{display:none}
  .explorer-input-bar{
    /* maintainer 2026-05-11: z-index lifted from 2 → 10. The Multi-Agent
     * Architecture gear's tooltip is a `::after` pseudo on
     * #sidebarSettingsBtn inside this bar. CSS stacking contexts
     * confine pseudo-elements to their parent's context regardless of
     * the pseudo's own z-index. The atelier-history aside (z-index:5)
     * sits above this bar's z-index:2 and was painting OVER the
     * tooltip — clipping the "Mult" of "Multi-Agent Architecture".
     * Lifting the bar to 10 puts the entire composer + its tooltips
     * above the history aside. */
    position:absolute;bottom:0;left:0;right:0;z-index:10;
    padding:12px var(--ex-pad-x, 32px) 14px;
    background:linear-gradient(transparent, var(--cream) 40%);
    pointer-events:none;overflow:visible;
  }

  /* ── Atelier dynamic-prompt banner (maintainer 2026-05-08, item 14) ──
     Fades through corpus-derived research questions when the
     composer is empty + idle. Pinned just above the input bar so
     it sits visually centred in the empty Atelier canvas. The
     `is-visible` class is toggled by swarm-corpus-prompts.js. */
  .atelier-corpus-prompts{
    /* maintainer 2026-05-09: centred in the empty Atelier canvas (was
     * pinned bottom:88px above the input bar — too low).
     * maintainer 2026-05-10: moved from top:50% → top:30% so the prompt
     * sits in the upper third of the Atelier canvas. The composer
     * + sources strip below were making the geometric centre
     * deceptively low. */
    position:absolute; left:0; right:0;
    top:30%;
    z-index:1;              /* sits below the input bar's z:2 */
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;    /* never blocks clicks on messages */
    padding:0 max(8%, 32px);
    opacity:0;
    transform:translateY(calc(-50% + 6px));
    transition:opacity 800ms cubic-bezier(.4,0,.2,1),
               transform 800ms cubic-bezier(.4,0,.2,1);
  }
  .atelier-corpus-prompts.is-visible{
    opacity:1;
    transform:translateY(-50%);
  }
  .atelier-corpus-prompt-text{
    font-family:var(--serif);
    font-size:1.2rem;
    line-height:1.5;
    font-style:italic;
    color:var(--text-muted);
    text-align:center;
    max-width:680px;
    letter-spacing:.01em;
    /* Subtle gold accent on the leading character so the prompt
       reads as deliberate atelier furniture rather than a stray
       placeholder. */
    border-left:2px solid transparent;
    padding:6px 0 6px 14px;
    border-image:linear-gradient(180deg, transparent, var(--gold-light), transparent) 1;
  }
  /* Reduced-motion: snap rather than slide, but keep opacity. */
  @media (prefers-reduced-motion: reduce) {
    .atelier-corpus-prompts{
      transition:opacity 200ms linear;
      transform:none !important;
    }
  }
  /* Sources / swarm panel collision avoidance now handled via top:50%
   * centring — the messages area's height shrinks when those panels
   * open, and translateY(-50%) keeps the banner centred in whatever
   * height remains. Old `bottom:130px` rule no longer needed. */
  .explorer-input-bar *{pointer-events:auto}
  .explorer-input-row{
    display:flex;gap:10px;align-items:flex-end;
    overflow:visible;
  }
  .explorer-workbench-btn{
    width:36px;height:36px;border:1.5px solid var(--border);border-radius:8px;
    background:var(--cream);color:var(--text-muted);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s,border-color .15s;
    flex-shrink:0;margin-bottom:1px;
  }
  .explorer-workbench-btn:hover{
    border-color:var(--accent);color:var(--accent);background:var(--white);
  }
  .explorer-scope-toggle{
    display:flex;gap:0;
    background:var(--cream-dark);border-radius:8px;
    padding:3px;align-self:flex-start;
  }
  .scope-btn{
    padding:5px 14px;font-size:.72rem;font-weight:700;
    letter-spacing:.3px;text-transform:uppercase;
    font-family:var(--sans);border:none;cursor:pointer;
    border-radius:6px;background:transparent;
    color:var(--text-muted);transition:all .15s;
  }
  .scope-btn:hover{color:var(--text)}
  .scope-btn.active{
    background:var(--white);color:var(--accent);
    box-shadow:0 1px 4px var(--shadow);
  }
  .scope-btn:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:1px;
  }

  /* ── Composer-area scope chip (R7-B re-placement #4, 2026-05-08) ──
     Per-query scope selector pinned above #explorerInput. Reserves a
     fixed strip so the textarea position doesn't shift when the chip
     mounts/unmounts. Compact variant of .explorer-scope-toggle: smaller
     padding, less prominent surface, sits left-aligned to mirror Cursor's
     in-composer scope chips. */
  .explorer-scope-chip-row{
    display:flex;
    align-items:center;
    margin-bottom:6px;
    min-height:26px;        /* reserve space — no layout shift */
  }
  .explorer-scope-toggle-composer{
    padding:2px;
    background:transparent;
    border:1px solid var(--border);
    border-radius:7px;
    box-shadow:none;
  }
  .explorer-scope-toggle-composer .scope-btn{
    padding:3px 10px;
    font-size:.66rem;
    letter-spacing:.4px;
    border-radius:5px;
  }
  .explorer-scope-toggle-composer .scope-btn.active{
    background:var(--cream-dark);
    color:var(--accent);
    box-shadow:none;
  }

  /* ── Composer "Edit research context" affordance
        (R7-B re-placement #5, 2026-05-08) ──
     Per-project research context, one click from the Atelier composer.
     Mirrors Cursor's `.cursorrules` access pattern: small, low-noise
     button next to the scope chip; same border-radius/font scale as
     `.explorer-scope-toggle-composer` so the chip row reads as one
     coordinated control strip. The dot is visible when the active
     project has a non-empty context (set by JS). */
  .composer-context-btn{
    margin-left:8px;
    display:inline-flex;align-items:center;gap:6px;
    padding:3px 9px;
    background:transparent;
    border:1px solid var(--border);
    border-radius:7px;
    color:var(--text-muted);
    font-family:var(--sans);font-size:.66rem;font-weight:700;
    letter-spacing:.4px;text-transform:uppercase;
    cursor:pointer;
    transition:color .15s,border-color .15s,background .15s;
    position:relative;
  }
  .composer-context-btn:hover{
    color:var(--accent);
    border-color:var(--accent);
    background:var(--cream-dark);
  }
  .composer-context-btn:focus-visible{
    outline:2px solid var(--accent);outline-offset:1px;
  }
  .composer-context-btn-label{ line-height:1; }
  .composer-context-btn-dot{
    width:6px;height:6px;border-radius:50%;
    background:transparent;
    transition:background .15s;
  }
  .composer-context-btn[data-has-context="1"] .composer-context-btn-dot{
    background:var(--accent);
  }
  .composer-context-btn[data-has-context="1"]{
    color:var(--accent);
  }

  /* ── Developer Mode toggle (Explorer Settings modal) ── */
  .explorer-devmode-toggle{
    display:flex;align-items:center;gap:.5rem;
  }
  .devmode-status{
    font-size:.68rem;font-weight:700;color:#7a6a3a;
    letter-spacing:.5px;min-width:26px;text-align:right;
    font-family:var(--sans);user-select:none;
  }
  .devmode-switch{
    position:relative;display:inline-block;
    width:34px;height:18px;border-radius:9px;
    background:#d9cfb2;border:1px solid #b89e6e;
    cursor:pointer;transition:background .15s,border-color .15s;
    flex-shrink:0;
  }
  .devmode-switch:focus-visible{
    outline:2px solid var(--accent);outline-offset:2px;
  }
  .devmode-switch[aria-checked="true"]{
    background:var(--accent);border-color:var(--accent);
  }
  .devmode-knob{
    position:absolute;top:1px;left:1px;
    width:14px;height:14px;border-radius:50%;
    background:#f6efe0;box-shadow:0 1px 3px rgba(0,0,0,0.3);
    transition:left .15s;
  }
  .devmode-switch[aria-checked="true"] .devmode-knob{
    left:17px;
  }

  /* ── Setup wizard v2 themed scrollbars ──
     WebKit (Chrome/Edge/Safari) custom scrollbars + Firefox
     scrollbar-color. Matches the sepia palette instead of the
     default grey browser bars. Applied to the wizard body and
     to any nested scrollable panels tagged .wiz-v2-scroll. */
  .wiz-v2-body, .wiz-v2-scroll{
    scrollbar-width:thin;
    scrollbar-color:var(--accent) var(--cream);
  }
  .wiz-v2-body::-webkit-scrollbar,
  .wiz-v2-scroll::-webkit-scrollbar{
    width:10px;height:10px;
  }
  .wiz-v2-body::-webkit-scrollbar-track,
  .wiz-v2-scroll::-webkit-scrollbar-track{
    background:var(--cream);
    border-radius:5px;
  }
  .wiz-v2-body::-webkit-scrollbar-thumb,
  .wiz-v2-scroll::-webkit-scrollbar-thumb{
    background:#c9a86a;
    border-radius:5px;
    border:2px solid var(--cream);
  }
  .wiz-v2-body::-webkit-scrollbar-thumb:hover,
  .wiz-v2-scroll::-webkit-scrollbar-thumb:hover{
    background:var(--accent);
  }

  /* Animated indeterminate progress-bar stripes (step 7 per-root
     scan bars). The background-position shift creates the moving
     diagonal stripe effect. */
  @keyframes wiz-v2-stripes{
    0%{background-position:0 0}
    100%{background-position:28px 0}
  }

  /* ── Model selector (shared) ──────────────────────── */
  .model-select-inline{
    font-size:.75rem;font-weight:700;letter-spacing:.4px;
    text-transform:uppercase;color:var(--accent);
    padding:4px 10px;background:rgba(139,69,19,.08);border-radius:4px;
    border:1.5px solid transparent;cursor:pointer;
    font-family:var(--sans);outline:none;
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg width='8' height='5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%238B4513' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 6px center;
    padding-right:22px;
    transition:border-color .15s,background .15s;
  }
  .model-select-inline:hover{border-color:var(--accent)}
  .model-select-inline:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(139,69,19,.1)}
  .model-select-inline option{
    font-size:.8rem;text-transform:none;letter-spacing:0;font-weight:600;
    color:var(--text);background:var(--white);
  }

  /* ── Explorer preloaded sources banner ────────────── */
  .explorer-sources{
    flex-shrink:0;border-bottom:1px solid var(--border);
    background:var(--cream);
  }
  .explorer-sources-header{
    padding:10px 18px;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;
    font-size:.8rem;font-weight:700;color:var(--brown);
    user-select:none;
  }
  .explorer-sources-header .arrow{
    transition:transform .2s;font-size:.65rem;color:var(--text-muted);
  }
  .explorer-sources.collapsed .arrow{transform:rotate(-90deg)}
  .explorer-sources-left{display:flex;align-items:center;gap:10px}
  .explorer-sources-list{
    padding:0 14px 10px;display:flex;flex-wrap:wrap;gap:6px;
  }
  .explorer-sources.collapsed .explorer-sources-list{display:none}
  .explorer-source-tag{
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 10px;background:var(--white);border:1px solid var(--border-light);
    border-radius:5px;font-size:.75rem;font-weight:600;color:var(--brown-dark);
    transition:border-color .15s,background .15s;
  }
  .explorer-source-tag:hover{border-color:var(--border)}
  .explorer-source-tag .src-vol{
    font-size:.68rem;color:var(--text-muted);font-weight:400;
  }
  .explorer-source-tag .src-type-dot{
    width:6px;height:6px;border-radius:50%;flex-shrink:0;
  }
  .explorer-source-tag .src-remove{
    width:16px;height:16px;border:none;border-radius:50%;
    background:transparent;color:var(--text-muted);cursor:pointer;
    font-size:.8rem;font-weight:700;line-height:1;
    display:flex;align-items:center;justify-content:center;
    margin-left:2px;transition:background .15s,color .15s;flex-shrink:0;
  }
  .explorer-source-tag .src-remove:hover{
    background:rgba(183,28,28,.1);color:#B71C1C;
  }
  .explorer-sources-clear{
    font-size:.72rem;font-weight:600;color:var(--text-muted);
    background:none;border:none;cursor:pointer;font-family:var(--sans);
    transition:color .15s;
  }
  .explorer-sources-clear:hover{color:var(--accent)}

  /* ── Chat messages ───────────────────────────────────── */
  .msg{
    line-height:var(--ex-line-h, 1.6);
    font-size:var(--ex-font, .85rem);
  }
  .msg-user{
    align-self:flex-end;
    background:var(--accent);color:var(--white);
    padding:var(--ex-msg-pad, 10px 14px);border-radius:12px 12px 3px 12px;
  }
  .msg-llm{
    align-self:flex-start;
    background:transparent;color:var(--text);
    padding:var(--ex-msg-pad, 12px 14px);
  }
  .msg-llm .source-tag{
    display:inline-block;font-size:.68rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.4px;
    padding:2px 7px;border-radius:3px;margin:0 2px;
    background:rgba(139,69,19,.08);color:var(--accent);
    vertical-align:middle;
  }
  .msg-llm strong{color:var(--brown-dark)}

  /* (thesis section removed) */

  /* Evidence blocks inside LLM messages */
  .evidence-block{
    margin:10px 0;padding:10px 12px;border-radius:7px;
    border-left:3px solid transparent;font-size:.82rem;line-height:1.6;
  }
  .evidence-for{
    background:rgba(46,125,50,.06);border-left-color:#2E7D32;
  }
  .evidence-for .ev-label{
    font-size:.7rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.5px;color:#2E7D32;margin-bottom:4px;
  }
  .evidence-against{
    background:rgba(183,28,28,.05);border-left-color:#B71C1C;
  }
  .evidence-against .ev-label{
    font-size:.7rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.5px;color:#B71C1C;margin-bottom:4px;
  }
  .ev-cite{
    font-size:.72rem;color:var(--text-muted);margin-top:4px;font-style:italic;
  }

  /* ── Pull-quote blocks (Explorer) ───────────────────── */
  .eq-block{
    position:relative;
    margin:var(--ex-eq-margin, 14px 0);padding:var(--ex-eq-pad, 16px 18px 14px);border-radius:6px;
    background:#F9F0DA;
    font-family:var(--serif);font-size:var(--ex-eq-font, .84rem);line-height:var(--ex-line-h, 1.7);
    max-width:680px;align-self:center;
  }
  .eq-text{font-style:italic;color:var(--brown-dark)}
  .eq-text .eq-highlight{background:rgba(184,134,11,.15);padding:0 2px;border-radius:2px}
  .eq-actions{
    display:flex;gap:4px;justify-content:flex-end;
    margin-top:6px;
    opacity:0;transition:opacity .15s;
  }
  .eq-block:hover .eq-actions{opacity:1}
  .eq-action-btn{
    display:flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:5px;
    border:1px solid var(--border-light);background:var(--white);
    cursor:pointer;color:var(--text-muted);
    transition:background .12s,color .12s,border-color .12s;
  }
  .eq-action-btn:hover{background:rgba(158,122,60,.08);color:var(--gold);border-color:var(--gold)}
  .eq-action-btn.copied{color:var(--gold);opacity:1}
  .eq-action-btn svg{width:13px;height:13px}
  .eq-action-btn[data-tip]{position:relative}
  .eq-action-btn[data-tip]::after{
    content:attr(data-tip);
    position:absolute;bottom:calc(100% + 6px);right:0;
    background:var(--brown-dark);color:var(--cream);
    font-family:var(--sans);font-size:.68rem;font-weight:600;
    letter-spacing:.3px;padding:4px 10px;border-radius:5px;
    white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity .15s;
    box-shadow:0 3px 10px rgba(0,0,0,.18);
    z-index:70;
  }
  .eq-action-btn[data-tip]:hover::after{opacity:1}

  /* ── Dev-only sections (maintainer 2026-05-09, item 39) ──
     Modal sections marked `.dev-only-section` are hidden by default
     and only render when the body carries `dev-mode-on` (added by
     library-models.js boot when userGet('rw-atelier-devmode-active')
     === 'true', and toggled by the `mira:devmode:state` event). */
  body:not(.dev-mode-on) .dev-only-section { display: none !important; }