/* Dragon Library — Smart Vault styles
 * Inherits design tokens from shell.css (--navy-*, --cyan-*, --slate-*, --paper, etc.)
 * Design DNA: cards-as-container, dotted dividers, Be Vietnam Pro 300 H1, NO border-left "AI slop"
 */

.lib-shell {
  padding: 28px 36px 60px;
  max-width: 1640px;
  margin: 0 auto;
  position: relative;
  min-height: 100%;
}

/* ─── HEADER ─── */
.lib-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px;
  margin-bottom: 14px;
}
.lib-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: var(--cyan-500);
  letter-spacing: 0.10em; text-transform: uppercase;
  margin-bottom: 8px;
}
.lib-h1 {
  font-family: 'Be Vietnam Pro', 'Noto Sans KR', sans-serif;
  font-weight: 300; font-size: 38px;
  color: var(--navy-800);
  line-height: 1.05;
  margin: 0 0 8px;
  letter-spacing: 0.005em;
}
.lib-lead {
  font-size: 13.5px; color: var(--slate-500);
  margin: 4px 0 0;
  max-width: 640px;
  line-height: 1.5;
}
.lib-header-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }

/* ─── PRIVACY CHIP ─── */
.lib-privacy-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(31, 169, 255, 0.06);
  border: 1px solid rgba(31, 169, 255, 0.18);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--navy-700);
  margin-bottom: 24px;
  cursor: help;
}
.lib-privacy-chip svg { color: var(--cyan-500); }
.lib-privacy-path {
  color: var(--slate-400);
  border-left: 1px dotted var(--slate-300);
  padding-left: 8px;
  margin-left: 4px;
}

/* ─── STATS STRIP ─── */
.lib-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.lib-stat-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px 12px;
  box-shadow: var(--shadow-sm);
}
.lib-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: var(--slate-400);
  letter-spacing: 0.10em; text-transform: uppercase;
  margin-bottom: 10px;
}
.lib-stat-value {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 300; font-size: 28px;
  color: var(--navy-800); line-height: 1;
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 4px;
}
.lib-stat-unit {
  font-size: 14px; color: var(--slate-400); font-weight: 400;
}

/* ─── TODAY STRIP ─── */
.lib-today {
  background: linear-gradient(135deg, rgba(46,91,219,0.04) 0%, rgba(31,169,255,0.07) 100%);
  border: 1px solid rgba(46,91,219,0.15);
  border-radius: 16px;
  padding: 18px 20px 20px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.lib-today::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 240px; height: 90px;
  background: radial-gradient(circle at 90% 10%, rgba(125,214,255,0.25) 0%, transparent 70%);
  pointer-events: none;
}
.lib-today-head { margin-bottom: 14px; position: relative; z-index: 1; }
.lib-today-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: var(--cyan-600, var(--cyan-500));
  letter-spacing: 0.10em; text-transform: uppercase;
  margin-bottom: 4px;
}
.lib-today-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 400; font-size: 22px;
  color: var(--navy-800);
}
.lib-today-sub {
  font-size: 12px; color: var(--slate-500); margin-top: 4px;
}
.lib-today-strip {
  display: flex; gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  position: relative; z-index: 1;
}
.lib-today-strip::-webkit-scrollbar { height: 6px; }
.lib-today-strip::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 3px; }

.lib-reel-card {
  flex: 0 0 200px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.lib-reel-card:hover {
  transform: translateY(-2px);
  border-color: var(--cyan-400);
  box-shadow: 0 10px 22px rgba(31,169,255,0.14);
}
.lib-reel-thumb {
  width: 100%; height: 110px;
  object-fit: cover;
  display: block;
}
.lib-reel-thumb-icon {
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.lib-reel-body { padding: 10px 12px; }
.lib-reel-name {
  font-size: 12.5px; font-weight: 500;
  color: var(--navy-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-reel-meta {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
}
.lib-reel-studio { font-weight: 600; }
.lib-reel-time { color: var(--slate-400); margin-left: auto; }

/* ─── FILTER BAR ─── */
.lib-filter-bar {
  display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 0;
  border-top: 1px dotted var(--slate-300);
  border-bottom: 1px dotted var(--slate-300);
}
.lib-search-wrap {
  position: relative;
  flex: 0 0 280px;
  max-width: 280px;
}
.lib-search-ico {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--slate-400);
  pointer-events: none;
}
.lib-search-input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--navy-800);
  transition: border-color 120ms;
}
.lib-search-input:focus {
  outline: none;
  border-color: var(--cyan-400);
}
.lib-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
  align-items: center;
}
.lib-chips-right { margin-left: auto; }
.lib-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 11.5px; font-weight: 500;
  color: var(--slate-500);
  cursor: pointer;
  transition: all 120ms;
  font-family: 'Inter', sans-serif;
}
.lib-chip:hover { color: var(--navy-700); border-color: var(--slate-400); }
.lib-chip.active {
  background: var(--navy-800);
  color: white;
  border-color: var(--navy-800);
}
.lib-select {
  font-family: inherit;
  font-size: 12px;
  padding: 5px 24px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  color: var(--navy-800);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.lib-view-toggle {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 2px;
}
.lib-view-btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 5px 8px;
  border-radius: 5px;
  color: var(--slate-500);
  cursor: pointer;
}
.lib-view-btn:hover { color: var(--navy-700); }
.lib-view-btn.active {
  background: var(--navy-800);
  color: white;
}

/* ─── BUTTONS ─── */
.lib-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  padding: 7px 14px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--navy-800);
  cursor: pointer;
  transition: all 120ms;
}
.lib-btn:hover { border-color: var(--navy-500); }
.lib-btn-primary {
  background: var(--navy-800);
  color: white;
  border-color: var(--navy-800);
}
.lib-btn-primary:hover { background: var(--navy-700); border-color: var(--navy-700); }
.lib-btn-ghost {
  background: transparent;
  color: var(--navy-700);
}

/* ─── GRID + CARD ─── */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1300px) { .lib-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px)  { .lib-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .lib-grid { grid-template-columns: 1fr; } }

.lib-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 200ms ease, border-color 200ms ease;
  display: flex; flex-direction: column;
}
.lib-card:hover {
  transform: translateY(-2px);
  /* Use navy (high-contrast) on hover instead of cyan-400. Thumb area on icon-only
     cards has a subtle cyan-tint background (sb.color × 9% alpha) — cyan border
     on cyan tint = invisible top edge (Eric flag 2026-05-26). Navy reads clearly
     against both cyan-tint and white. */
  border-color: var(--navy-500);
  box-shadow: 0 12px 28px rgba(14,31,77,0.16), 0 -1px 0 rgba(14,31,77,0.04);
}
.lib-card-thumb-wrap {
  position: relative;
  width: 100%; aspect-ratio: 16 / 10;
  min-height: 132px;            /* fallback for older browsers without aspect-ratio support — lock card thumb area at 132px min */
  overflow: hidden;
  background: var(--bg-canvas);
  flex-shrink: 0;               /* lock height inside flex-column card */
}
.lib-card-thumb-wrap > .lib-card-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Icon variant — display:flex + center. Combined selector beats .lib-card-thumb generic specificity. */
.lib-card-thumb-wrap > .lib-card-thumb-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 56px;
  line-height: 1;
}
.lib-card-star {
  position: absolute;
  top: 8px; right: 8px;
  appearance: none;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 100px;
  width: 26px; height: 26px;
  font-size: 14px; line-height: 1;
  color: var(--slate-400);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms, color 120ms;
}
.lib-card:hover .lib-card-star { opacity: 1; }
.lib-card-star:hover { color: #f59e0b; }
.lib-card-star-on {
  position: absolute;
  top: 8px; right: 8px;
  color: #f59e0b;
  font-size: 16px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 1;
}
.lib-card-version {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(15,23,42,0.78);
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}
.lib-card-version-dot { opacity: 0.5; margin: 0 2px; }

.lib-card-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.lib-card-name {
  font-size: 13.5px; font-weight: 500;
  color: var(--navy-800);
  margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-card-summary {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.4;
  margin-bottom: 8px;
  min-height: 32px;
  max-height: 48px; overflow: hidden;
}
.lib-card-summary-pending {
  font-style: italic;
  color: var(--slate-400);
}
/* Deterministic descriptor (hướng A) — "Loại · Dự án" when no AI summary. */
.lib-card-summary-det {
  color: var(--slate-400);
  font-weight: 500;
}
/* Drawer: secondary original-filename line under the display title. */
.lib-drawer-filename {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--slate-400);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Deterministic "Phân loại" metadata grid in the drawer. */
.lib-meta-grid { display: flex; flex-direction: column; gap: 6px; }
.lib-meta-row { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.lib-meta-k { flex: 0 0 76px; color: var(--slate-400); font-size: 12px; }
.lib-meta-v { flex: 1; color: var(--navy-800); min-width: 0; }
.lib-meta-mono {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--slate-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-card-meta {
  display: flex; align-items: center; gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--slate-500);
  margin-top: auto;
}
.lib-card-dot { color: var(--slate-300); }
.lib-card-studio { font-weight: 600; }
.lib-card-tags {
  margin-top: 8px;
  display: flex; gap: 4px; flex-wrap: wrap;
}

.lib-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; font-weight: 600;
  padding: 2px 7px;
  background: var(--bg-canvas);
  color: var(--slate-500);
  border-radius: 100px;
  letter-spacing: 0.02em;
}

/* ─── LIST VIEW ─── */
.lib-list {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.lib-list-head {
  display: grid;
  grid-template-columns: 1fr 140px 80px 90px 90px;
  gap: 14px;
  padding: 12px 18px;
  background: var(--bg-canvas);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  color: var(--slate-500);
  letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.lib-row {
  display: grid;
  grid-template-columns: 1fr 140px 80px 90px 90px;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  align-items: center;
  font-size: 13px;
  color: var(--navy-800);
  transition: background 120ms;
}
.lib-row:last-child { border-bottom: none; }
.lib-row:hover { background: rgba(14,31,77,0.03); }
.lib-row-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lib-row-ico { font-size: 16px; flex-shrink: 0; }
.lib-row-fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-row-stack {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  padding: 2px 6px;
  background: rgba(139,92,246,0.10);
  color: #8b5cf6;
  border-radius: 100px;
  flex-shrink: 0;
}
.lib-row-star { color: #f59e0b; flex-shrink: 0; }
.lib-row-studio { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; }
.lib-row-type, .lib-row-size, .lib-row-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--slate-500);
}

/* ─── EMPTY STATE ─── */
.lib-empty {
  text-align: center;
  padding: 80px 20px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 14px;
}
.lib-empty-ico {
  width: 80px; height: 80px;
  margin: 0 auto 16px;
  background: var(--bg-canvas);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-400);
}
.lib-empty-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 20px; font-weight: 400;
  color: var(--navy-800);
  margin-bottom: 6px;
}
.lib-empty-sub {
  font-size: 13px; color: var(--slate-500);
  margin-bottom: 18px;
}

/* ─── DROP OVERLAY ─── */
.lib-drop-overlay {
  position: fixed; inset: 0;
  background: rgba(31, 169, 255, 0.08);
  backdrop-filter: blur(2px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  animation: lib-fade-in 150ms ease;
}
.lib-drop-card {
  background: white;
  border: 2px dashed var(--cyan-400);
  border-radius: 18px;
  padding: 50px 80px;
  text-align: center;
  color: var(--cyan-500);
  box-shadow: 0 20px 60px rgba(31,169,255,0.18);
}
.lib-drop-card svg { color: var(--cyan-500); margin-bottom: 12px; }
.lib-drop-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 400; font-size: 22px;
  color: var(--navy-800);
  margin-bottom: 4px;
}
.lib-drop-sub { font-size: 13px; color: var(--slate-500); }
@keyframes lib-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ─── DRAWER ─── */
.lib-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.35);
  backdrop-filter: blur(2px);
  z-index: 9100;
  animation: lib-fade-in 200ms ease;
}
.lib-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 580px;
  max-width: 100vw;
  background: var(--paper);
  border-left: 1px solid var(--line);
  z-index: 9200;
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px rgba(0,0,0,0.12);
  transform: translateX(100%);
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lib-drawer.open { transform: translateX(0); }

.lib-drawer-head {
  flex-shrink: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  background: var(--paper);
}
.lib-drawer-head-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.lib-drawer-close {
  appearance: none;
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--slate-500);
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.lib-drawer-close:hover { color: var(--navy-700); }
.lib-drawer-title-wrap { min-width: 0; flex: 1; }
.lib-drawer-name {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 15px; font-weight: 500;
  color: var(--navy-800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-drawer-meta {
  display: flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--slate-500);
  margin-top: 3px;
}
.lib-drawer-dot { color: var(--slate-300); }
.lib-drawer-studio { font-weight: 600; }
.lib-drawer-vbadge {
  background: rgba(139,92,246,0.12);
  color: #8b5cf6;
  padding: 1px 6px;
  border-radius: 100px;
  font-weight: 600;
}
.lib-drawer-actions { display: flex; gap: 4px; flex-shrink: 0; }
.lib-icon-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 7px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--slate-500);
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  transition: all 120ms;
}
.lib-icon-btn:hover { border-color: var(--navy-500); color: var(--navy-800); }

.lib-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 18px 20px 30px;
}

/* ─── PREVIEW ─── */
.lib-preview {
  background: var(--bg-canvas);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 18px;
  min-height: 200px;
  display: flex; justify-content: center; align-items: center;
  overflow: hidden;
}
.lib-pv-image, .lib-pv-thumb { max-width: 100%; max-height: 360px; border-radius: 8px; }
.lib-pv-video { max-width: 100%; max-height: 320px; border-radius: 8px; }
.lib-pv-audio { width: 100%; }
.lib-pv-pdf { width: 100%; height: 460px; border: 1px solid var(--line); border-radius: 6px; }
.lib-pv-frame {
  width: 100%; height: 320px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
}
.lib-pv-generic {
  text-align: center;
  padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lib-pv-icon { font-size: 72px; }
.lib-pv-msg { font-size: 13px; color: var(--slate-500); }

/* ─── SECTIONS in drawer ─── */
.lib-section {
  margin-bottom: 18px;
  padding-top: 14px;
  border-top: 1px dotted var(--slate-300);
}
.lib-section:first-of-type { border-top: none; padding-top: 0; }
.lib-section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}
.lib-section-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700;
  color: var(--slate-500);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.lib-section-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--slate-400);
}
.lib-link-btn {
  appearance: none;
  background: transparent;
  border: none;
  font-size: 14px;
  color: var(--slate-400);
  cursor: pointer;
  padding: 0 4px;
}
.lib-link-btn:hover { color: var(--cyan-500); }

.lib-ai-summary {
  font-size: 13.5px;
  color: var(--navy-800);
  line-height: 1.55;
  margin-bottom: 8px;
}
.lib-ai-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.lib-ai-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--slate-400);
  letter-spacing: 0.02em;
}

/* ─── PROVENANCE ─── */
.lib-provenance { display: flex; flex-direction: column; gap: 10px; }
.lib-prov-row {
  display: flex; gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.lib-prov-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.lib-prov-text { flex: 1; min-width: 0; }
.lib-prov-sub {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; font-weight: 600;
  color: var(--slate-400);
  letter-spacing: 0.08em; text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.lib-prov-prompt em {
  font-style: italic;
  color: var(--navy-700);
}
.lib-prov-text code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--bg-canvas);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}
.lib-prov-link {
  color: var(--cyan-500);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(31,169,255,0.3);
}
.lib-prov-link:hover { color: var(--cyan-600, var(--cyan-500)); text-decoration-color: var(--cyan-500); }
.lib-prov-versions { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.lib-prov-version {
  appearance: none;
  background: var(--bg-canvas);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--slate-500);
  cursor: pointer;
  transition: all 120ms;
}
.lib-prov-version:hover { color: var(--navy-700); border-color: var(--slate-400); }
.lib-prov-version.active {
  background: #8b5cf6;
  color: white;
  border-color: #8b5cf6;
}

.lib-rail-empty {
  font-size: 12px;
  color: var(--slate-400);
  font-style: italic;
  padding: 8px 0;
}

/* ─── CHAT ─── */
.lib-chat {
  background: var(--bg-canvas);
  border-radius: 10px;
  padding: 12px;
  min-height: 100px;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 8px;
}
.lib-chat-empty {
  font-size: 12px;
  color: var(--slate-400);
  font-style: italic;
  text-align: center;
  padding: 18px 12px;
}
.lib-chat-msg {
  margin-bottom: 10px;
  display: flex;
}
.lib-chat-user { justify-content: flex-end; }
.lib-chat-assistant { justify-content: flex-start; }
.lib-chat-body {
  max-width: 90%;
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.lib-chat-user .lib-chat-body {
  background: var(--navy-800);
  color: white;
}
.lib-chat-assistant .lib-chat-body {
  background: white;
  border: 1px solid var(--line);
  color: var(--navy-800);
}
.lib-chat-thinking .lib-chat-body { color: var(--slate-500); font-style: italic; }

.lib-spinner {
  display: inline-block;
  width: 10px; height: 10px;
  border: 2px solid var(--slate-300);
  border-top-color: var(--cyan-500);
  border-radius: 50%;
  animation: lib-spin 0.8s linear infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes lib-spin { to { transform: rotate(360deg); } }

.lib-chat-input-wrap {
  display: flex; gap: 6px;
}
.lib-chat-input {
  flex: 1;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--navy-800);
}
.lib-chat-input:focus {
  outline: none;
  border-color: var(--cyan-400);
}
.lib-chat-send {
  padding: 8px 14px;
  font-size: 15px;
}

/* ─── TOAST ─── */
.lib-toast {
  position: fixed;
  bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy-800);
  color: white;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9500;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transition: all 200ms ease;
}
.lib-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lib-toast-success { background: #10b981; }
.lib-toast-error { background: #dc2626; }