/* shared/explorer-modes.css — Unified Explorer mode design system.
   Mode switcher, form primitives, mode panels, status/empty states, chips,
   and the Research Library drawer primitives consumed by
   shared/chat-history-ui.js. Depends on shared/tokens.css. No layout CSS is
   injected from JS; every visual belongs here.

   Sections
     1. Mode switcher
     2. Buttons
     3. Fields
     4. Mode panel / head / options
     5. Status / inline error / empty
     6. Chips
     7. Research Library drawer (.exp-lib-*)
     8. Recall + library hit highlight
     9. Responsive (1023 / 767 / 480 / 380)
    10. Focus-visible + reduced motion                                              */

/* ==========================================================================
   1. Mode switcher
   ========================================================================== */

.exp-mode-switch{
  display:flex;
  align-items:center;
  gap:var(--s-1);
  padding:3px;
  margin:0 0 var(--s-3);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface-2);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.exp-mode-switch::-webkit-scrollbar{display:none}

.exp-mode-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  min-height:34px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:var(--t-sm);
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}
.exp-mode-btn:hover{color:var(--ink);background:var(--surface-3)}
.exp-mode-btn:active{transform:scale(.98)}
.exp-mode-btn.active,
.exp-mode-btn[aria-selected="true"]{
  background:var(--surface);
  color:var(--accent);
  border-color:var(--border);
  box-shadow:var(--shadow-1);
}
.exp-mode-btn.active:hover,
.exp-mode-btn[aria-selected="true"]:hover{
  color:var(--accent-hover);
  background:var(--surface);
}

.exp-mode-icon{
  font-size:1em;
  line-height:1;
  opacity:.9;
}

.exp-mode-btn.tier-scholar-gate.is-locked,
.exp-mode-btn[aria-disabled="true"]{
  opacity:.55;
  cursor:not-allowed;
}
.exp-mode-btn.tier-scholar-gate.is-locked:hover,
.exp-mode-btn[aria-disabled="true"]:hover{
  color:var(--ink-2);
  background:transparent;
}

.exp-mode-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:var(--r-pill);
  background:var(--accent-tint);
  color:var(--accent);
  font-size:.62rem;
  font-weight:700;
  line-height:1;
}
.exp-mode-lock-badge{
  background:var(--warn-soft);
  color:var(--warn-ink);
}

/* ==========================================================================
   2. Buttons
   ========================================================================== */

.exp-primary-btn,
.exp-secondary-btn,
.exp-ghost-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:36px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  font-family:var(--font-sans);
  font-size:var(--t-sm);
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}
.exp-primary-btn:active,
.exp-secondary-btn:active,
.exp-ghost-btn:active,
.exp-icon-btn:active{transform:scale(.98)}

.exp-primary-btn{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--n0);
}
.exp-primary-btn:hover{
  background:var(--accent-hover);
  border-color:var(--accent-hover);
  color:var(--n0);
}

.exp-secondary-btn{
  background:var(--surface);
  border-color:var(--border);
  color:var(--ink-2);
}
.exp-secondary-btn:hover{
  border-color:var(--border-strong);
  background:var(--surface-2);
  color:var(--ink);
}
.exp-secondary-btn[aria-pressed="true"]{
  border-color:var(--accent);
  background:var(--accent-tint);
  color:var(--accent);
}

.exp-ghost-btn{
  background:transparent;
  border-color:transparent;
  color:var(--ink-2);
}
.exp-ghost-btn:hover{
  background:var(--surface-2);
  color:var(--ink);
}

.exp-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink-2);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease);
}
.exp-icon-btn:hover{
  border-color:var(--border-strong);
  background:var(--surface-2);
  color:var(--ink);
}
.exp-icon-btn[aria-pressed="true"]{
  border-color:var(--accent);
  background:var(--accent-tint);
  color:var(--accent);
}

.exp-primary-btn[data-danger="true"],
.exp-secondary-btn[data-danger="true"],
.exp-ghost-btn[data-danger="true"]{
  color:var(--danger-ink);
}
.exp-secondary-btn[data-danger="true"]{border-color:var(--danger)}
.exp-primary-btn[data-danger="true"],
.exp-secondary-btn[data-danger="true"]:hover{background:var(--danger-soft)}
.exp-ghost-btn[data-danger="true"]:hover{background:var(--danger-soft)}

.exp-primary-btn[disabled],
.exp-secondary-btn[disabled],
.exp-ghost-btn[disabled],
.exp-icon-btn[disabled],
.exp-primary-btn[aria-disabled="true"],
.exp-secondary-btn[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* ==========================================================================
   3. Fields
   ========================================================================== */

.exp-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.exp-input,
.exp-select{
  min-height:36px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--t-sm);
  line-height:1.4;
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    background var(--dur-2) var(--ease);
}
.exp-input::placeholder{color:var(--ink-3)}
.exp-input:hover,
.exp-select:hover{border-color:var(--border-strong)}
.exp-input:focus,
.exp-select:focus{
  border-color:var(--accent);
  box-shadow:var(--focus);
  outline:none;
}
.exp-input:disabled,
.exp-select:disabled{
  opacity:.55;
  cursor:not-allowed;
  background:var(--surface-2);
}
.exp-input[aria-invalid="true"],
.exp-input.is-invalid{
  border-color:var(--danger);
  background:var(--danger-soft);
}
.exp-select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

.exp-input-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s-2);
}
.exp-input-row > .exp-input,
.exp-input-row > .exp-select{flex:1 1 160px;min-width:0}
.exp-input-row > .exp-primary-btn,
.exp-input-row > .exp-secondary-btn,
.exp-input-row > .exp-icon-btn{flex:0 0 auto}

/* Filter row / groups — shared by the Library filter panel and the
   Explorer category controls. Label sits above its control. */

.exp-filter-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-3);
  padding:var(--s-3) 0;
}
/* display:flex above overrides the [hidden] attribute, leaving the panel
   permanently open. Restore the hidden behaviour. */
.exp-filter-row[hidden]{display:none}

.exp-filter-group{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.exp-filter-group > .exp-select,
.exp-filter-group > .exp-input{
  width:100%;
  min-width:0;
}

.exp-filter-label{
  color:var(--ink-3);
  font-family:var(--font-sans);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.2;
  text-transform:uppercase;
  white-space:nowrap;
}

.exp-filter-gap{
  flex:1 1 auto;
  min-width:var(--s-2);
}

@media (max-width:767px){
  .exp-filter-row{
    align-items:stretch;
    gap:var(--s-2);
  }
  .exp-filter-group{flex:1 1 140px}
  .exp-filter-gap{display:none}
}

/* ==========================================================================
   4. Mode panel / head / options
   ========================================================================== */

.exp-mode-panel{
  margin:0 0 var(--s-4);
  padding:var(--s-4);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--shadow-1);
}

.exp-mode-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--s-3);
  margin:0 0 var(--s-3);
}

.exp-mode-head-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.exp-mode-head-text h2,
.exp-mode-head-text h3{
  margin:0;
  font-family:var(--font-serif);
  font-size:var(--t-lg);
  font-weight:600;
  color:var(--ink);
}
.exp-mode-head-text p,
.exp-mode-head-text .hint{
  margin:0;
  color:var(--ink-3);
  font-size:var(--t-sm);
  line-height:1.5;
}

.exp-mode-options{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
  margin:0 0 var(--s-3);
}

.exp-mode-option{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--ink-2);
  font-size:var(--t-sm);
  font-weight:600;
  cursor:pointer;
  transition:
    background var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}
.exp-mode-option:hover{border-color:var(--border-strong);color:var(--ink)}
.exp-mode-option.active,
.exp-mode-option[aria-pressed="true"]{
  border-color:var(--accent);
  background:var(--accent-tint);
  color:var(--accent);
}

/* ==========================================================================
   5. Status / inline error / empty
   ========================================================================== */

.exp-status{
  margin:0 0 10px;
  color:var(--ink-3);
  font-size:var(--t-sm);
}
.exp-status b{color:var(--ink)}

.exp-inline-error{
  display:block;
  margin:0 0 10px;
  padding:7px 10px;
  border:1px solid var(--danger);
  border-radius:var(--r-sm);
  background:var(--danger-soft);
  color:var(--danger-ink);
  font-size:var(--t-sm);
  line-height:1.4;
}
.exp-inline-error[hidden]{display:none}

.exp-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:var(--s-6) var(--s-4);
  text-align:center;
  color:var(--ink-3);
}
.exp-empty strong{
  color:var(--ink);
  font-size:var(--t-md);
  font-weight:600;
}
.exp-empty p{
  margin:0;
  max-width:42ch;
  font-size:var(--t-sm);
  line-height:1.5;
}

/* ==========================================================================
   6. Chips
   ========================================================================== */

.exp-chip,
.exp-chip-row > button{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:30px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:var(--t-xs);
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}
.exp-chip:hover,
.exp-chip-row > button:hover{
  border-color:var(--accent);
  background:var(--accent-tint);
  color:var(--accent);
}
.exp-chip.active,
.exp-chip[aria-pressed="true"],
.exp-chip-row > button.active{
  border-color:var(--accent);
  background:var(--accent);
  color:var(--n0);
}
.exp-chip-label{
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-3);
  font-size:var(--t-xs);
  font-weight:600;
}
.exp-chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

/* ==========================================================================
   7. Research Library drawer (.exp-lib-*)
   ========================================================================== */

/* Icon sizing. The ICON.* SVGs have a viewBox but no width/height, so inside
   flex containers they stretch to fill — a giant magnifier in the search box
   and blank folder squares in buttons. Force an explicit box. Stroke icons
   set fill="none" on their own <path>, which wins over the inherited fill. */
.exp-lib-drawer svg,
.exp-icon-btn svg,
.exp-secondary-btn svg,
.exp-primary-btn svg,
.exp-ghost-btn svg{
  width:18px;
  height:18px;
  display:block;
  flex:0 0 auto;
  fill:currentColor;
}
.exp-lib-search svg{width:18px;height:18px}
.exp-lib-item-meta svg{width:14px;height:14px}
.exp-lib-rail-item svg{width:16px;height:16px}

.exp-lib-scrim{
  position:fixed;
  inset:0;
  z-index:10020;
  background:rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--dur-3) var(--ease);
}
.exp-lib-scrim.open{opacity:1;pointer-events:auto}

/* Lock background scroll while the drawer is open (harmless elsewhere). */
html.exp-lib-open,
html.exp-lib-open body{overflow:hidden}
html.exp-lib-open .hub-content{overflow:hidden}

.exp-lib-drawer{
  position:fixed;
  top:0;
  right:0;
  z-index:10021;
  display:flex;
  flex-direction:column;
  width:min(760px,100vw);
  height:100%;
  max-height:100dvh;
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:var(--shadow-3);
  transform:translateX(100%);
  transition:transform var(--dur-3) var(--ease);
  overflow:hidden;
}
.exp-lib-drawer.open{transform:none}

/* Filter panel sizes to its content instead of stretching the flex column. */
.exp-lib-drawer > .exp-filter-row{flex:0 0 auto}

.exp-lib-head{
  display:flex;
  align-items:center;
  gap:var(--s-2);
  flex:0 0 auto;
  padding:var(--s-3) var(--s-5);
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.exp-lib-title{
  margin:0;
  flex:1 1 auto;
  min-width:0;
  font-family:var(--font-serif);
  font-size:var(--t-lg);
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Header children never shrink, so badge/Select/Close stay on-screen at 375px
   while the title (min-width:0) absorbs the squeeze. */
.exp-lib-head > .exp-lib-badge,
.exp-lib-head > .exp-secondary-btn,
.exp-lib-head > .exp-lib-close{flex:0 0 auto}
.exp-lib-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:var(--r-pill);
  background:var(--accent-tint);
  color:var(--accent);
  font-size:var(--t-xs);
  font-weight:700;
  line-height:1;
}
.exp-lib-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--ink-2);
  font-size:1.05rem;
  line-height:1;
  cursor:pointer;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.exp-lib-close:hover{background:var(--surface-2);color:var(--ink)}

.exp-lib-toolbar{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  flex-wrap:wrap;
  gap:var(--s-2);
  padding:var(--s-3) var(--s-5);
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.exp-lib-search{
  display:flex;
  align-items:center;
  gap:6px;
  flex:1 1 200px;
  min-width:0;
  min-height:36px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink-3);
  transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.exp-lib-search:focus-within{
  border-color:var(--accent);
  box-shadow:var(--focus);
}
.exp-lib-search svg{flex:0 0 auto;opacity:.7}
.exp-lib-search input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--t-sm);
  outline:none;
}
.exp-lib-search input::placeholder{color:var(--ink-3)}

.exp-lib-tabs{
  display:flex;
  align-items:stretch;
  gap:2px;
  flex:0 0 auto;
  padding:0 var(--s-5);
  border-bottom:1px solid var(--border);
  background:var(--surface);
  overflow-x:auto;
  scrollbar-width:none;
}
.exp-lib-tabs::-webkit-scrollbar{display:none}
.exp-lib-tab{
  flex:0 0 auto;
  padding:10px 12px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--ink-3);
  font-family:var(--font-sans);
  font-size:var(--t-sm);
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.exp-lib-tab:hover{color:var(--ink)}
.exp-lib-tab.active{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.exp-lib-body{
  display:flex;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

.exp-lib-rail{
  flex:0 0 210px;
  width:210px;
  padding:var(--s-3);
  border-right:1px solid var(--border);
  background:var(--surface-2);
  overflow-y:auto;
}
.exp-lib-drawer.rail-collapsed .exp-lib-rail{display:none}

.exp-lib-group-label{
  margin:var(--s-2) 4px 4px;
  color:var(--ink-3);
  font-size:var(--t-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.exp-lib-rail-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-height:34px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:var(--t-sm);
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.exp-lib-rail-item svg{flex:0 0 auto;opacity:.75}
.exp-lib-rail-item > span:not(.exp-lib-badge){
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.exp-lib-rail-item:hover{background:var(--surface-3);color:var(--ink)}
.exp-lib-rail-item.active{
  background:var(--accent-tint);
  color:var(--accent);
}
.exp-lib-rail-item .exp-lib-badge{background:var(--surface);color:var(--ink-3)}
.exp-lib-rail-item.active .exp-lib-badge{background:var(--accent);color:var(--n0)}

.exp-lib-list{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  padding:var(--s-2);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.exp-lib-item{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:var(--s-2);
  padding:var(--s-3);
  border:1px solid transparent;
  border-radius:var(--r-md);
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.exp-lib-item:hover{background:var(--surface-2)}
.exp-lib-item.is-selected{
  border-color:var(--accent);
  background:var(--accent-tint);
}
.exp-lib-item.active{border-color:var(--border-strong)}

.exp-lib-selectbox{
  display:flex;
  align-items:center;
  padding-top:2px;
  flex:0 0 auto;
}
.exp-lib-selectbox input{
  width:16px;
  height:16px;
  accent-color:var(--accent);
  cursor:pointer;
}

.exp-lib-item-main{
  flex:1 1 auto;
  min-width:0;
  cursor:pointer;
}
.exp-lib-item-title{
  margin:0 0 2px;
  font-family:var(--font-sans);
  font-size:var(--t-md);
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
  overflow-wrap:anywhere;
}
.exp-lib-item-snippet{
  margin:0 0 6px;
  color:var(--ink-3);
  font-size:var(--t-sm);
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.exp-lib-item-title mark,
.exp-lib-item-snippet mark{
  background:var(--accent-tint);
  color:var(--accent);
  border-radius:2px;
}

.exp-lib-item-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  color:var(--ink-3);
  font-size:var(--t-xs);
}
.exp-lib-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:1px 8px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--ink-2);
  font-size:var(--t-xs);
  font-weight:600;
  line-height:1.5;
  white-space:nowrap;
}
.exp-lib-chip[data-act="tag"]{cursor:pointer}
.exp-lib-chip[data-act="tag"]:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.exp-lib-pin,
.exp-lib-menu-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:30px;
  height:30px;
  padding:0;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--ink-3);
  font-size:.95rem;
  line-height:1;
  cursor:pointer;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.exp-lib-pin:hover,
.exp-lib-menu-btn:hover{background:var(--surface-3);color:var(--ink)}
.exp-lib-pin[aria-pressed="true"]{color:var(--accent)}

.exp-lib-item-menu{
  position:absolute;
  top:calc(100% - 6px);
  right:var(--s-3);
  z-index:20;
  display:flex;
  flex-direction:column;
  min-width:190px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--surface);
  box-shadow:var(--shadow-3);
}
.exp-lib-item-menu button{
  display:flex;
  align-items:center;
  width:100%;
  min-height:34px;
  padding:0 10px;
  border:0;
  border-radius:var(--r-sm);
  background:transparent;
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:var(--t-sm);
  font-weight:500;
  text-align:left;
  cursor:pointer;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
}
.exp-lib-item-menu button:hover{background:var(--surface-2);color:var(--ink)}
.exp-lib-item-menu button.is-danger,
.exp-lib-item-menu button[data-danger="true"]{color:var(--danger-ink)}
.exp-lib-item-menu button.is-danger:hover,
.exp-lib-item-menu button[data-danger="true"]:hover{background:var(--danger-soft)}

.exp-lib-bulkbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--s-2);
  flex:0 0 auto;
  padding:var(--s-2) var(--s-5);
  border-top:1px solid var(--border);
  background:var(--surface-2);
}
.exp-lib-bulkbar[hidden]{display:none}
.exp-lib-bulkbar > span{margin-right:auto;color:var(--ink-3);font-size:var(--t-sm)}

.exp-lib-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--s-2);
  flex:0 0 auto;
  padding:var(--s-3) var(--s-5);
  border-top:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-3);
  font-size:var(--t-xs);
}
.exp-lib-foot > span{display:inline-flex;align-items:center;gap:var(--s-2)}

.exp-lib-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:var(--s-10) var(--s-4);
  text-align:center;
  color:var(--ink-3);
}
.exp-lib-empty strong{color:var(--ink);font-size:var(--t-md);font-weight:600}
.exp-lib-empty p{margin:0;max-width:40ch;font-size:var(--t-sm);line-height:1.5}

/* ==========================================================================
   8. Recall + library hit highlight
   ========================================================================== */

.exp-lib-hit,
.exp-recall-hit{
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius:var(--r-sm);
  transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
.exp-lib-hit.exp-recall-fade,
.exp-recall-hit.exp-recall-fade{
  background:transparent;
  box-shadow:0 0 0 2px transparent;
}

/* ==========================================================================
   9. Responsive — 1023 / 767 / 480 / 380
   ========================================================================== */

@media (max-width:1023px){
  .exp-lib-drawer{width:min(560px,100vw)}
  .exp-lib-rail{flex-basis:180px;width:180px}
  .exp-mode-switch{flex-wrap:nowrap}
}

@media (max-width:767px){
  .exp-lib-drawer{
    width:100vw;
    height:100dvh;
    max-height:100dvh;
    border-left:0;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
    padding-left:env(safe-area-inset-left,0px);
    padding-right:env(safe-area-inset-right,0px);
  }
  .exp-lib-rail{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    z-index:5;
    flex-basis:auto;
    width:min(260px,80vw);
    box-shadow:var(--shadow-3);
  }
  .exp-lib-body{position:relative}
  /* Toolbar: search full-width on row 1, then folders / sort / filters. */
  .exp-lib-toolbar{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:var(--s-2);
  }
  .exp-lib-toolbar .exp-lib-search{grid-column:1 / -1}
  .exp-lib-search,
  .exp-lib-toolbar .exp-select,
  .exp-lib-toolbar .exp-icon-btn,
  .exp-lib-toolbar .exp-secondary-btn{min-height:44px}
  .exp-lib-search input{font-size:16px}
  /* Filter panel: 2-column grid, full-width controls, reset spans both. */
  .exp-lib-drawer .exp-filter-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:var(--s-2);
  }
  .exp-lib-drawer .exp-filter-row[hidden]{display:none}
  .exp-lib-drawer .exp-filter-row .exp-filter-group{
    width:100%;
    min-width:0;
    flex:none;
  }
  .exp-lib-drawer .exp-filter-row .exp-filter-group > .exp-select,
  .exp-lib-drawer .exp-filter-row .exp-filter-group > .exp-input{width:100%}
  .exp-lib-drawer .exp-filter-row .exp-filter-gap{display:none}
  .exp-lib-drawer .exp-filter-row > .exp-ghost-btn{
    grid-column:1 / -1;
    justify-content:center;
  }
  .exp-lib-title{font-size:var(--t-md)}
  .exp-lib-toolbar,
  .exp-lib-head,
  .exp-lib-foot{padding-left:var(--s-4);padding-right:var(--s-4)}
  .exp-lib-tabs{padding:0 var(--s-4)}
  .exp-mode-panel{padding:var(--s-3)}
  .exp-mode-head{flex-direction:column;align-items:stretch}
  .exp-mode-switch{
    margin-bottom:var(--s-2);
    overflow-x:auto;
    scroll-padding-inline:8px;
    -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 22px),transparent 100%);
  }
  .exp-lib-foot{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }
  .exp-lib-foot > #bp-lib-foot-info{grid-column:1 / -1}
  .exp-lib-foot > span:not(#bp-lib-foot-info){
    grid-column:1 / -1;
    min-width:0;
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:8px!important;
    width:100%;
  }
  .exp-lib-foot .exp-ghost-btn{
    width:100%;
    min-width:0;
    min-height:40px;
  }
}

@media (max-width:480px){
  .exp-primary-btn,
  .exp-secondary-btn,
  .exp-ghost-btn{min-height:40px;padding:0 12px}
  .exp-lib-head,
  .exp-lib-toolbar,
  .exp-lib-foot{padding-left:var(--s-3);padding-right:var(--s-3)}
  .exp-lib-search{flex-basis:100%}
  .exp-lib-item{padding:var(--s-2)}
  .exp-lib-item-snippet{-webkit-line-clamp:3}
  .exp-lib-bulkbar{padding-left:var(--s-3);padding-right:var(--s-3)}
  .exp-input-row > .exp-primary-btn,
  .exp-input-row > .exp-secondary-btn{flex:1 1 100%}
  .exp-mode-btn{min-height:38px;padding:0 12px}
}

@media (max-width:380px){
  .exp-lib-title{font-size:var(--t-md)}
  .exp-lib-head{gap:6px}
  .exp-mode-btn{padding:0 10px;font-size:var(--t-xs)}
  .exp-mode-icon{display:none}
  .exp-lib-foot{flex-direction:column;align-items:flex-start}
  .exp-chip,
  .exp-chip-row > button{padding:0 10px}
}

/* ==========================================================================
   10. Focus-visible + reduced motion
   ========================================================================== */

.exp-mode-btn:focus-visible,
.exp-primary-btn:focus-visible,
.exp-secondary-btn:focus-visible,
.exp-ghost-btn:focus-visible,
.exp-icon-btn:focus-visible,
.exp-chip:focus-visible,
.exp-mode-option:focus-visible,
.exp-lib-close:focus-visible,
.exp-lib-tab:focus-visible,
.exp-lib-rail-item:focus-visible,
.exp-lib-pin:focus-visible,
.exp-lib-menu-btn:focus-visible,
.exp-lib-item-main:focus-visible,
.exp-lib-item-menu button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:var(--focus);
  border-radius:var(--r-sm);
}

@media (prefers-reduced-motion:reduce){
  .exp-mode-btn,
  .exp-primary-btn,
  .exp-secondary-btn,
  .exp-ghost-btn,
  .exp-icon-btn,
  .exp-mode-option,
  .exp-chip,
  .exp-chip-row > button,
  .exp-lib-scrim,
  .exp-lib-drawer,
  .exp-lib-hit,
  .exp-recall-hit,
  .exp-lib-item,
  .exp-lib-tab,
  .exp-lib-rail-item,
  .exp-lib-close,
  .exp-lib-pin,
  .exp-lib-menu-btn{
    transition:none;
  }
}