/* Library (History, Saved, one saved answer) scoped under .page-library, and the header
   History menu scoped under .history-menu-panel. */

.page-library {
  .library-notice:not(:empty) { margin-bottom: 1rem; }
  .tabs { gap: 1rem; }

  .library-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
  .library-toolbar .tab-list { flex: none; }
  .library-search { flex: 1 1 14rem; min-width: 0; }
  .library-search .input { width: 100%; }

  .library-body { display: grid; gap: 0.75rem; }
  .library-skeleton { display: grid; gap: 0.75rem; }
  .library-skeleton .skeleton-stack {
    padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card);
  }

  .library-list { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
  .library-row {
    display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; padding: 0.875rem 1rem;
    border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); color: var(--card-foreground);
    box-shadow: var(--shadow-sm); transition: border-color var(--duration) var(--ease);
    &:hover, &:focus-within { border-color: color-mix(in oklab, var(--primary-accent) 30%, var(--border)); }
  }
  .library-row-main { display: grid; gap: 0.25rem; flex: 1; min-width: 0; }
  .library-row-title { font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }
  .library-row-question {
    font-size: var(--text-xs); color: var(--muted-foreground); overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere;
  }
  .library-row-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem;
    font-size: var(--text-xs); color: var(--muted-foreground);
  }
  .library-researching { animation: pulse 2s ease-in-out infinite; cursor: help; }
  .library-researching:focus-visible { outline: none; box-shadow: var(--accent-ring); }
  .library-subjects { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
  .library-subjects .chip { font-size: var(--text-xs); padding: 0.125rem 0.5rem; }
  .library-row-actions { display: flex; align-items: center; gap: 0.25rem; flex: none; }
  .library-delete:hover { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }
  .library-note { font-size: var(--text-xs); color: var(--muted-foreground); line-height: 1.5; }

  /* one saved answer */
  .library-back { margin: -0.5rem 0 1rem -0.625rem; }
  .library-reader .page-title { overflow-wrap: anywhere; text-wrap: balance; }
  .library-reader-meta {
    display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: var(--text-sm); color: var(--muted-foreground);
  }
  .library-reader-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
  .library-reader-actions .text-destructive:hover { background: color-mix(in oklab, var(--destructive) 10%, transparent); }
  .library-reader-body { display: grid; gap: 1rem; }
  .library-answer .question { justify-content: flex-end; }
  .library-candidates { margin: 0; padding-left: 1.125rem; font-size: var(--text-sm); }
}

@media (max-width: 480px) {
  .page-library .library-row { flex-direction: column; }
  .page-library .library-row-actions { align-self: stretch; justify-content: flex-end; }
  .page-library .library-toolbar .tab-list { width: 100%; }
  .page-library .library-toolbar .tab { flex: 1; }
}

/* header History menu */
.history-menu-anchor[hidden] { display: none; }
.history-menu-panel {
  display: flex; flex-direction: column; width: min(20rem, calc(100vw - 2rem)); max-height: min(60vh, 24rem);

  .history-menu-content { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
  .history-menu-status {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem;
    font-size: var(--text-sm); color: var(--muted-foreground);
    &.text-destructive { color: var(--destructive); }
    svg { width: 1rem; height: 1rem; flex: none; }
  }
  .history-menu-item { width: 100%; text-align: left; cursor: default; }
  .history-menu-title { display: block; max-width: 100%; }
  .history-menu-meta { display: flex; flex-wrap: wrap; gap: 0.125rem 0.5rem; font-size: var(--text-xs); color: var(--muted-foreground); }
  .history-menu-item[aria-current="true"] .history-menu-title { font-weight: 600; }
  .history-menu-researching { color: var(--accent-text); animation: pulse 2s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .page-library .library-researching, .history-menu-panel .history-menu-researching { animation: none; }
}