/* ═══════════════════════════════════════════════════════════════
   ATELIER-HISTORY — Past-runs sidebar inside #explorerView
   Pattern: shadcn/ui sidebar-08 + ChatGPT/Claude.ai history rail.
   maintainer 2026-05-08 (R5 chat-skin alignment).
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout: the sidebar lives INSIDE .explorer-view and uses
   absolute positioning so we don't need to refactor the existing
   flex-direction:column layout of the Atelier surface. The view
   is already position:relative (see explorer.css), so absolute
   children land relative to it. ── */
.atelier-history{
  position:absolute;
  top:0; left:0; bottom:0;
  width:240px; min-width:240px;
  background:var(--cream-2, #f4ebd7);
  /* maintainer 2026-05-10: brown-light hairline rail. Echoes the left
   * main nav's dark-brown column at lower contrast — cohesive
   * without the cream side looking heavy or slabby. */
  border-right:1px solid var(--brown-light, #6B4D40);
  display:flex; flex-direction:column;
  z-index:5;                  /* above messages but below modals */
  font-family:var(--sans, system-ui, -apple-system, sans-serif);
  transition:transform 220ms cubic-bezier(.4,0,.2,1),
             width 220ms cubic-bezier(.4,0,.2,1);
}
/* Push the rest of the Atelier content right when the sidebar is
   visible. We reach into siblings via CSS instead of nesting markup
   so the change is non-invasive. The padding-left value tracks the
   sidebar's current width: 240px when expanded, 36px when collapsed. */
.explorer-view:has(.atelier-history) .explorer-header,
.explorer-view:has(.atelier-history) .explorer-messages,
.explorer-view:has(.atelier-history) .atelier-corpus-prompts{
  padding-left:calc(var(--ex-pad-x, 32px) + 240px);
  /* maintainer 2026-05-09 (item 35): include opacity + transform so the
     corpus-prompts banner crossfades instead of snapping when the
     `is-visible` class toggles. The 220ms padding-left animation
     stays for sidebar-collapse parity; opacity/transform run at
     350ms for the fade. */
  transition:padding-left 220ms cubic-bezier(.4,0,.2,1),
             opacity .35s ease,
             transform .35s ease;
}
.explorer-view:has(.atelier-history[data-collapsed="1"]) .explorer-header,
.explorer-view:has(.atelier-history[data-collapsed="1"]) .explorer-messages,
.explorer-view:has(.atelier-history[data-collapsed="1"]) .atelier-corpus-prompts{
  padding-left:calc(var(--ex-pad-x, 32px) + 18px);
}
.explorer-view:has(.atelier-history) .explorer-input-bar{
  left:240px;
  transition:left 220ms cubic-bezier(.4,0,.2,1);
}
.explorer-view:has(.atelier-history[data-collapsed="1"]) .explorer-input-bar{
  left:18px;
}
.explorer-view:has(.atelier-history) .swarm-dashboard,
.explorer-view:has(.atelier-history) .explorer-sources,
/* maintainer 2026-05-10: same sidebar-aware margin treatment for the
 * narrator strip ("Organising research approach…", agent-pill row,
 * stage updates) and the stage-telemetry strip (Planner / Agents /
 * Synthesis elapsed). Without this, the strips' full-width
 * background + content overlap the sidebar's column. They "move
 * with" the sidebar's collapsed/expanded state via the same
 * selectors. */
.explorer-view:has(.atelier-history) #swarmNarratorStrip,
.explorer-view:has(.atelier-history) #swarmStageTelemetry,
.explorer-view:has(.atelier-history) #swarmRevealHost{
  margin-left:240px;
  transition:margin-left 220ms cubic-bezier(.4,0,.2,1);
}
.explorer-view:has(.atelier-history[data-collapsed="1"]) .swarm-dashboard,
.explorer-view:has(.atelier-history[data-collapsed="1"]) .explorer-sources,
.explorer-view:has(.atelier-history[data-collapsed="1"]) #swarmNarratorStrip,
.explorer-view:has(.atelier-history[data-collapsed="1"]) #swarmStageTelemetry,
.explorer-view:has(.atelier-history[data-collapsed="1"]) #swarmRevealHost{
  margin-left:18px;
}

/* Collapsed: slide off-screen to the left except for a tiny edge
   that holds the "expand" affordance.
   maintainer 2026-05-10: was 36px — halved to 18px so the collapsed
   rail is a true edge-strip, not a small column. The chevron stays
   centered via the .ah-collapse 28px hit-target overflowing slightly,
   giving the user a comfortable click without reclaiming column width. */
.atelier-history[data-collapsed="1"]{
  width:18px; min-width:18px;
}
.atelier-history[data-collapsed="1"] .atelier-history-top{
  padding:6px 0; justify-content:center;
}
.atelier-history[data-collapsed="1"] .ah-collapse{
  width:18px; height:24px;
}
.atelier-history[data-collapsed="1"] .ah-newchat,
.atelier-history[data-collapsed="1"] .ah-search-wrap,
.atelier-history[data-collapsed="1"] .ah-list{
  display:none;
}
.atelier-history[data-collapsed="1"] .ah-collapse svg{
  transform:rotate(180deg);
}

/* ── Top row: New chat + collapse toggle ─────────────
 * maintainer 2026-05-10: pinned to top of the sidebar with an opaque
 * cream background and z-index above the list. Previously list
 * items scrolling up could visually bleed through the header
 * region before being clipped by the parent's overflow — the
 * sidebar's "UI bar overlaying the expanded new chat" symptom.
 * Same treatment applied to .ah-search-wrap below. */
.atelier-history-top{
  display:flex; align-items:center; gap:6px;
  padding:12px 12px 8px;
  /* maintainer 2026-05-10: single-tone sidebar — no header-band tone
   * differentiation. One hairline below the search-wrap is enough
   * structure; the rail edge does the rest. */
  border-bottom:none;
  position:sticky; top:0; z-index:3;
  background:var(--cream-2, #f4ebd7);
}
.ah-newchat{
  flex:1; display:flex; align-items:center; gap:10px;
  /* maintainer 2026-05-11 — dark-academic refinement.
   * Slight gradient gives the button paper-on-paper depth without
   * any fake-3D bevel; gold-rule on the bottom edge nods to the
   * Mira logo's serif underline. Letter-spacing widens "New chat"
   * just enough to read as a chapter-opening rather than a UI
   * control. */
  background:linear-gradient(to bottom, var(--cream, #FAF6F0), var(--cream-2, #f4ebd7));
  color:var(--brown-dark, #35201A);
  border:1px solid var(--brown-light, #6B4D40);
  border-bottom-color:var(--gold-light, #c9a96e);
  border-radius:6px;
  padding:8px 12px;
  font-family:var(--sans, system-ui, sans-serif);
  font-size:.82rem; font-weight:600; line-height:1;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .15s, border-color .15s, box-shadow .15s, transform .12s;
  box-shadow:0 1px 2px rgba(40,25,15,.04);
}
.ah-newchat:hover{
  background:linear-gradient(to bottom, var(--white, #fff), var(--cream, #FAF6F0));
  border-color:var(--brown-dark, #35201A);
  border-bottom-color:var(--gold-light, #c9a96e);
  box-shadow:0 2px 6px rgba(40,25,15,.10);
}
.ah-newchat:active{ transform:translateY(1px); }
.ah-newchat-icon{ display:inline-flex; align-items:center; }
.ah-newchat-icon svg{ display:block; }
.ah-collapse{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
  color:var(--text-muted, #5a5a5a);
  border-radius:6px;
}
.ah-collapse:hover{ background:rgba(0,0,0,.06); color:var(--text, #2b2b2b); }
.ah-collapse svg{ transition:transform 200ms; }

/* maintainer 2026-05-11 v3: REVERT — collapse row removed; chevron is
 * back in the top row beside New chat. The previous "obscured by
 * SVG" symptom was a z-index problem on the parent aside, not the
 * button's location. The aside's z-index is bumped below so when
 * expanded it sits ABOVE the Atelier composer's SVG navigator
 * (the dotted line + nodes graphic at the top of the Atelier view). */
.atelier-history{
  /* Bump above the Atelier's SVG navigator graphic
   * (.explorer-svg-navigator or whatever paints the dotted-node strip
   * across the Atelier header). Original z-index 5 lost to that
   * surface; 50 wins decisively. */
  z-index:50 !important;
}
.atelier-history[data-collapsed="1"]{
  /* When collapsed, return to a low z-index so the composer SVG
   * navigator paints normally over the thin strip. */
  z-index:5 !important;
}
/* maintainer 2026-05-11: when hovering the collapse chevron, lift the
 * whole aside to z-index 99999 so the tooltip pseudo-element can
 * paint above every sibling surface — otherwise the local stacking
 * context capped the tooltip at the aside's own z-index. The lift
 * happens on hover of the ah-collapse-row (which is just the
 * chevron strip) and on hover of the ah-collapse button itself, so
 * the lift never triggers from incidental cursor motion over the
 * search field or runs list. */
.atelier-history:has(.ah-collapse:hover){
  z-index:99999 !important;
}

/* ── Search ────────────────────────────────────────── */
.ah-search-wrap{
  /* maintainer 2026-05-10: same cream tone as the rest of the sidebar.
   * Hairline at the bottom is the only visual divider between the
   * tools region (new chat + search) and the runs list. */
  position:sticky; top:50px; z-index:2;
  background:var(--cream-2, #f4ebd7);
  border-bottom:1px solid var(--brown-light, #6B4D40);
  padding:0 12px 12px;
}
.ah-search-icon{
  position:absolute; left:20px; top:50%;
  transform:translateY(-50%);
  color:var(--brown-light, #6B4D40);
  pointer-events:none;
}
.ah-search{
  width:100%;
  padding:6px 8px 6px 26px;
  font-size:.78rem;
  font-family:inherit;
  /* maintainer 2026-05-10: quiet input that lives inside the header band.
   * Cream background + 1px brown-light hairline keeps it tonal rather
   * than the white-rectangle look of the prior pass. */
  background:var(--cream, #FAF6F0);
  border:1px solid var(--brown-light, #6B4D40);
  border-radius:6px;
  color:var(--brown-dark, #35201A);
  outline:none;
  transition:border-color .12s, box-shadow .12s, background .12s;
}
.ah-search:focus{
  background:var(--white, #fff);
  border-color:var(--brown-dark, #35201A);
  box-shadow:0 0 0 2px rgba(81,55,40,.15);
}
.ah-search::-webkit-search-cancel-button{ display:none; }

/* ── List + sections ───────────────────────────────── */
.ah-list{
  flex:1 1 auto; min-height:0;
  overflow-y:auto;
  padding:4px 6px 14px;
}
.ah-list::-webkit-scrollbar{ width:6px; }
.ah-list::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.18); border-radius:3px;
}
/* maintainer 2026-05-11: dark-academic polish for the empty state.
 * Centered serif italic — feels like a placeholder in an old library
 * catalogue rather than a generic web "Nothing here yet" string.
 * The two flanking rules + center bullet ornament read as a small
 * decorative cartouche. The whole composition sits in the visual
 * dead-center of the list area when there are no rows yet. */
.ah-empty{
  padding:48px 18px 24px;
  font-family:var(--serif, Georgia, "Times New Roman", serif);
  font-size:.92rem; font-style:italic; font-weight:400;
  color:var(--brown-light, #6B4D40);
  text-align:center;
  letter-spacing:.01em;
  line-height:1.5;
  position:relative;
}
.ah-empty::before{
  content:"\2022";        /* ornamental bullet ⦁ */
  display:block;
  font-family:var(--serif, Georgia, "Times New Roman", serif);
  color:var(--gold-light, #c9a96e);
  font-size:.9rem;
  margin-bottom:14px;
  letter-spacing:1em;
  text-indent:1em;
}
.ah-empty::after{
  content:"";
  display:block;
  width:56px;
  height:1px;
  background:var(--brown-light, #6B4D40);
  opacity:.45;
  margin:14px auto 0;
}

.ah-section{ margin:10px 0 10px; }
.ah-section-label{
  padding:6px 12px 4px;
  /* Dark-academic small-caps serif rather than the previous geometric
   * uppercase. Reads as a chapter-running-head rather than a UI label,
   * sitting on its own thin gold rule. */
  font-family:var(--serif, Georgia, "Times New Roman", serif);
  font-size:.7rem; font-weight:600;
  font-variant:small-caps;
  letter-spacing:.14em;
  color:var(--brown-light, #6B4D40);
  border-bottom:1px solid rgba(107,77,64,.18);
  margin:0 4px 4px;
}

/* ── Row ───────────────────────────────────────────── */
.ah-row{
  position:relative;
  display:flex; align-items:stretch;
  margin:1px 4px;
  border-radius:6px;
  transition:background .12s;
}
.ah-row:hover{ background:rgba(0,0,0,.05); }
.ah-row.is-active{ background:rgba(184,152,104,.18); }
.ah-row.is-active:hover{ background:rgba(184,152,104,.24); }
/* Phase 3b (2026-05-29): the active run gets a gold left border (LibreChat-
 * style selection accent). A pseudo-element keeps the 6px border radius
 * intact and avoids reflowing the row's content the way a real border
 * would. */
.ah-row.is-active::before{
  content:"";
  position:absolute; left:0; top:4px; bottom:4px;
  width:3px; border-radius:3px;
  background:var(--gold, #b89868);
}

.ah-row-main{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:1px;
  padding:7px 8px 6px;
  background:transparent; border:none;
  color:inherit; cursor:pointer;
  text-align:left;
  font-family:inherit;
  border-radius:6px;
}
.ah-row-title{
  font-size:.82rem;
  line-height:1.25;
  color:var(--text, #2b2b2b);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.ah-row[data-pinned="1"] .ah-row-title{ font-weight:600; }
.ah-row-time{
  font-size:.66rem;
  color:var(--text-muted, #888);
  letter-spacing:.02em;
}

/* ── Hover / right-click action group ─────────────── */
.ah-row-actions{
  display:flex; align-items:center; gap:1px;
  padding:2px 4px;
  opacity:0;
  transform:translateX(4px);
  transition:opacity .12s, transform .12s;
  pointer-events:none;
}
.ah-row:hover .ah-row-actions,
.ah-row.is-menu-open .ah-row-actions,
.ah-row:focus-within .ah-row-actions{
  opacity:1; transform:translateX(0); pointer-events:auto;
}
.ah-row-btn{
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
  color:var(--text-muted, #777);
  border-radius:4px;
  transition:background .1s, color .1s;
}
.ah-row-btn:hover{ background:rgba(0,0,0,.08); color:var(--text, #2b2b2b); }
.ah-row[data-pinned="1"] .ah-pin{ color:var(--gold, #b89868); }
.ah-row .ah-delete:hover{ color:#b71c1c; background:rgba(183,28,28,.08); }

/* Inline rename input replaces the title text node. */
.ah-rename-input{
  flex:1; min-width:0;
  padding:4px 6px;
  font-size:.82rem;
  font-family:inherit;
  background:var(--white, #fff);
  border:1px solid var(--gold, #b89868);
  border-radius:4px;
  outline:none;
  color:var(--text, #2b2b2b);
}

/* Inline delete confirm strip overlays the row. */
.ah-row-confirm{
  position:absolute; inset:0;
  display:flex; align-items:center; gap:6px;
  padding:4px 8px;
  background:var(--cream-2, #f4ebd7);
  border-radius:6px;
  font-size:.74rem;
  z-index:1;
}
.ah-row-confirm[hidden]{ display:none; }
.ah-row-confirm span{ color:var(--text, #2b2b2b); flex:1; }
.ah-row-confirm button{
  font-size:.72rem;
  padding:3px 8px;
  border:1px solid var(--border, #d6c8a8);
  background:var(--white, #fff);
  border-radius:4px;
  cursor:pointer;
  font-family:inherit;
}
.ah-row-confirm .ah-confirm-yes{
  background:#b71c1c; color:#fff; border-color:#922020;
}
.ah-row-confirm .ah-confirm-yes:hover{ background:#922020; }
.ah-row-confirm .ah-confirm-no:hover{ background:var(--cream, #f7eed8); }

/* ═══════════════════════════════════════════════════════════════
   PHASE 3b (2026-05-29): tags / folders + sidebar restyle additions.
   Tag-filter strip under the search box, per-row tag chips, the tag
   button in the hover-action group, and the tag-picker popover. All
   built on the existing dark-academic cream/brown/gold token palette.
   --ah-tag-color is set inline per tag (falls back to --gold).
   ═══════════════════════════════════════════════════════════════ */

/* ── Tag-filter strip ─────────────────────────────── */
.ah-tag-strip{
  display:flex; flex-wrap:wrap; gap:5px;
  padding:8px 12px;
  position:sticky; top:96px; z-index:2;
  background:var(--cream-2, #f4ebd7);
  border-bottom:1px solid rgba(107,77,64,.18);
}
.ah-tag-strip[hidden]{ display:none; }
.atelier-history[data-collapsed="1"] .ah-tag-strip{ display:none; }
.ah-tagchip{
  --ah-tag-color:var(--gold, #b89868);
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  font-family:var(--sans, system-ui, sans-serif);
  font-size:.7rem; font-weight:500; line-height:1;
  letter-spacing:.02em;
  color:var(--brown-dark, #35201A);
  background:var(--cream, #FAF6F0);
  border:1px solid var(--brown-light, #6B4D40);
  border-radius:11px;
  cursor:pointer;
  transition:background .12s, border-color .12s, box-shadow .12s, color .12s;
}
.ah-tagchip:hover{
  border-color:var(--brown-dark, #35201A);
  box-shadow:0 1px 3px rgba(40,25,15,.10);
}
.ah-tagchip.is-active{
  background:var(--brown-dark, #35201A);
  border-color:var(--brown-dark, #35201A);
  color:var(--cream, #FAF6F0);
}
.ah-tagchip-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--ah-tag-color, var(--gold, #b89868));
  flex:0 0 auto;
}
.ah-tagchip-all{ font-variant:small-caps; letter-spacing:.08em; }
.ah-tagchip-all .ah-tagchip-dot{ display:none; }
.ah-tagchip-label{ display:inline-block; }

/* keep the search-wrap hairline; the strip provides its own divider */

/* ── Per-row tag chips (under the title/time subline) ── */
.ah-row-tags{
  display:flex; flex-wrap:wrap; gap:4px;
  margin-top:3px;
  max-width:100%;
}
.ah-row-tag{
  --ah-tag-color:var(--gold, #b89868);
  display:inline-flex; align-items:center;
  padding:1px 7px;
  font-size:.62rem; font-weight:500; line-height:1.4;
  letter-spacing:.02em;
  color:var(--brown-dark, #35201A);
  background:color-mix(in srgb, var(--ah-tag-color) 16%, var(--cream, #FAF6F0));
  border:1px solid color-mix(in srgb, var(--ah-tag-color) 45%, transparent);
  border-radius:9px;
  white-space:nowrap;
  max-width:100%; overflow:hidden; text-overflow:ellipsis;
}

/* ── Tag button in the hover-action group ─────────── */
.ah-row .ah-tag:hover{ color:var(--gold, #b89868); background:rgba(184,152,104,.14); }

/* ── Tag-picker popover ───────────────────────────── */
.ah-tag-picker{
  position:absolute; top:26px; right:0;
  width:200px; max-height:280px; overflow-y:auto;
  background:var(--white, #fff);
  border:1px solid var(--brown-light, #6B4D40);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(40,25,15,.22);
  z-index:100;
  padding:6px;
  font-family:var(--sans, system-ui, sans-serif);
}
.ah-tag-picker-head{
  font-family:var(--serif, Georgia, serif);
  font-size:.68rem; font-variant:small-caps; letter-spacing:.12em;
  color:var(--brown-light, #6B4D40);
  padding:2px 6px 6px;
  border-bottom:1px solid rgba(107,77,64,.18);
  margin-bottom:4px;
}
.ah-tag-picker-list{ display:flex; flex-direction:column; gap:1px; }
.ah-tag-picker-item{
  --ah-tag-color:var(--gold, #b89868);
  display:flex; align-items:center; gap:8px;
  width:100%;
  padding:6px 8px;
  background:transparent; border:none; cursor:pointer;
  border-radius:5px;
  font-size:.78rem; color:var(--text, #2b2b2b);
  text-align:left;
  font-family:inherit;
  transition:background .1s;
}
.ah-tag-picker-item:hover{ background:rgba(0,0,0,.05); }
.ah-tag-picker-item.is-on{ background:rgba(184,152,104,.16); font-weight:600; }
.ah-tag-picker-item.is-on::after{
  content:"\2713";          /* check ✓ */
  margin-left:auto;
  color:var(--gold, #b89868);
  font-weight:700;
}
.ah-tag-picker-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ah-tag-picker-new{
  display:flex; gap:4px;
  margin-top:6px; padding-top:6px;
  border-top:1px solid rgba(107,77,64,.18);
}
.ah-tag-picker-input{
  flex:1 1 auto; min-width:0;
  padding:5px 7px;
  font-size:.74rem; font-family:inherit;
  background:var(--cream, #FAF6F0);
  border:1px solid var(--brown-light, #6B4D40);
  border-radius:5px;
  color:var(--brown-dark, #35201A);
  outline:none;
}
.ah-tag-picker-input:focus{
  background:var(--white, #fff);
  border-color:var(--brown-dark, #35201A);
  box-shadow:0 0 0 2px rgba(81,55,40,.15);
}
.ah-tag-picker-add{
  flex:0 0 auto;
  padding:5px 10px;
  font-size:.72rem; font-weight:600; font-family:inherit;
  background:var(--brown-dark, #35201A);
  color:var(--cream, #FAF6F0);
  border:1px solid var(--brown-dark, #35201A);
  border-radius:5px;
  cursor:pointer;
  transition:background .12s;
}
.ah-tag-picker-add:hover{ background:var(--brown, #51372a); }

/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .atelier-history,
  .explorer-view:has(.atelier-history) .explorer-header,
  .explorer-view:has(.atelier-history) .explorer-sources,
  .explorer-view:has(.atelier-history) .swarm-dashboard,
  .explorer-view:has(.atelier-history) .explorer-messages,
  .explorer-view:has(.atelier-history) .explorer-input-bar,
  .ah-row-actions,
  .ah-collapse svg{ transition:none !important; }
}

/* ── Responsive: under 800px the sidebar auto-collapses
   to keep the conversation area readable. The user can
   still expand it via the chevron or Ctrl+B. ── */
@media (max-width: 800px){
  .atelier-history:not([data-collapsed="1"]){
    box-shadow:0 0 0 9999px rgba(0,0,0,.18);
  }
}