@deepcitation/deepcitation-js 1.1.22 → 1.1.23

package/lib/react/styles.css

@@ -1,814 +0,0 @@
-/**
- * DeepCitation React Component Styles
- * CSS-only implementation for citation display and popover
- */
-
-/* Base citation container */
-.dc-citation {
-  position: relative;
-  display: inline-flex;
-  align-items: baseline;
-  cursor: pointer;
-  padding: 0.0625rem 0.125rem;
-  margin: -0.0625rem -0.125rem;
-  border-radius: 0.125rem;
-  transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out;
-}
-
-/* After first click (pinned), show zoom-in cursor to indicate next click expands image */
-.dc-citation[data-tooltip-expanded="true"][data-has-image="true"] {
-  cursor: zoom-in;
-}
-
-.dc-citation:hover {
-  background-color: var(--dc-hover-bg, rgba(59, 130, 246, 0.08));
-}
-
-.dc-citation:active {
-  background-color: var(--dc-active-bg, rgba(59, 130, 246, 0.12));
-}
-
-/* Citation bracket wrapper */
-.dc-citation-bracket {
-  display: inline-flex;
-  align-items: baseline;
-  justify-content: center;
-  gap: 0.125rem;
-  white-space: nowrap;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  font-size: 0.75rem;
-  line-height: 1.25;
-  color: var(--dc-text-secondary, #64748b);
-  transition: color 0.15s ease-out, transform 0.1s ease-out;
-}
-
-.dc-citation:hover .dc-citation-bracket {
-  color: var(--dc-text-primary, #334155);
-}
-
-.dc-citation:active .dc-citation-bracket {
-  transform: scale(0.98);
-}
-
-/* Citation number/text */
-.dc-citation-text {
-  max-width: 20rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Text variant - plain styling that inherits from parent */
-.dc-citation-text--plain {
-  max-width: none;
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-}
-
-/* Text variant container - inherit all styling from parent */
-.dc-citation--text {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.dc-citation--text .dc-citation-text--plain {
-  color: inherit;
-}
-
-/* Status-specific styles */
-/* Only brackets variant gets verified blue text color */
-.dc-citation--brackets.dc-citation--verified .dc-citation-text {
-  color: var(--dc-color-verified, #2563eb);
-}
-
-.dc-citation--verified:hover {
-  background-color: var(--dc-verified-hover-bg, rgba(37, 99, 235, 0.08));
-}
-
-/* Only brackets variant gets verified blue text on hover */
-.dc-citation--brackets.dc-citation--verified:hover .dc-citation-text {
-  text-decoration: underline;
-  color: var(--dc-color-verified-hover, #1d4ed8);
-}
-
-.dc-citation--miss {
-  opacity: 0.7;
-}
-
-.dc-citation--miss .dc-citation-text {
-  text-decoration: line-through;
-  color: var(--dc-text-tertiary, #94a3b8);
-}
-
-.dc-citation--miss:hover {
-  background-color: var(--dc-miss-hover-bg, rgba(148, 163, 184, 0.1));
-  opacity: 1;
-}
-
-/* NOTE: Partial matches use the same text styling as verified (blue)
-   because they WERE found in the document - they just don't match exactly.
-   The indicator shows the match quality (orange for partial). */
-
-.dc-citation--pending .dc-citation-text {
-  animation: dc-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.dc-citation--pending:hover {
-  background-color: var(--dc-pending-hover-bg, rgba(100, 116, 139, 0.08));
-}
-
-@keyframes dc-pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-/* Status indicators */
-.dc-indicator {
-  display: inline-flex;
-  position: relative;
-  margin-left: 0.125rem;
-}
-
-.dc-indicator--verified {
-  color: var(--dc-color-success, #16a34a);
-  top: 0.25rem;
-}
-
-.dc-indicator--partial {
-  color: var(--dc-color-error, #dc2626);
-  top: 0.25rem;
-}
-
-/* Popover container - CSS only */
-.dc-popover-wrapper {
-  position: relative;
-  display: inline-flex;
-}
-
-.dc-popover {
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-0.5rem);
-  z-index: 50;
-
-  display: none;
-  flex-direction: column;
-  gap: 0.5rem;
-
-  padding: 0.5rem;
-
-  background: var(--dc-popover-bg, #ffffff);
-  border: 1px solid var(--dc-border-color, #e2e8f0);
-  border-radius: 0.375rem;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.15s ease-out;
-}
-
-/* Arrow for popover */
-.dc-popover::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 0.375rem solid transparent;
-  border-top-color: var(--dc-popover-bg, #ffffff);
-}
-
-.dc-popover::before {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 0.4375rem solid transparent;
-  border-top-color: var(--dc-border-color, #e2e8f0);
-}
-
-/* Invisible bridge to prevent tooltip from disappearing when moving mouse to it */
-.dc-popover-wrapper::before {
-  content: "";
-  position: absolute;
-  bottom: 100%;
-  left: -1rem;
-  right: -1rem;
-  height: 1.5rem; /* Bridge height to connect to popover */
-  background: transparent;
-  pointer-events: none;
-}
-
-.dc-popover-wrapper:hover::before,
-.dc-popover-wrapper[data-expanded="true"]::before {
-  pointer-events: auto;
-}
-
-/* Show popover on hover or when expanded via click */
-.dc-popover-wrapper:hover .dc-popover,
-.dc-popover-wrapper:focus-within .dc-popover,
-.dc-popover-wrapper[data-expanded="true"] .dc-popover {
-  display: flex;
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* Popover positioned below */
-.dc-popover--bottom {
-  bottom: auto;
-  top: 100%;
-  transform: translateX(-50%) translateY(0.5rem);
-}
-
-.dc-popover--bottom::after {
-  top: auto;
-  bottom: 100%;
-  border-top-color: transparent;
-  border-bottom-color: var(--dc-popover-bg, #ffffff);
-}
-
-.dc-popover--bottom::before {
-  top: auto;
-  bottom: 100%;
-  border-top-color: transparent;
-  border-bottom-color: var(--dc-border-color, #e2e8f0);
-}
-
-/* Image-only popover (no padding, natural size) */
-.dc-popover:has(.dc-popover-image-button:only-child) {
-  padding: 0;
-  min-width: auto;
-  max-width: none;
-}
-
-.dc-popover:has(.dc-popover-image-button:only-child) .dc-popover-image {
-  border-radius: 0.375rem;
-}
-
-
-/* Verification image in popover - preserve aspect ratio */
-.dc-popover-image {
-  display: block;
-  width: auto;
-  height: auto;
-  max-width: 700px;
-  max-height: 500px;
-  object-fit: contain;
-  border-radius: 0.375rem;
-  background: var(--dc-image-bg, #f8fafc);
-  user-select: none;
-  -webkit-user-drag: none;
-  cursor: zoom-in;
-}
-
-.dc-popover-image-button {
-  cursor: zoom-in;
-}
-
-
-@keyframes dc-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-/* ========================================
-   Full-size Image Overlay
-   ======================================== */
-
-.dc-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.8);
-  backdrop-filter: blur(4px);
-  animation: dc-fade-in 0.15s ease-out;
-}
-
-.dc-overlay-content {
-  position: relative;
-  max-width: 95vw;
-  max-height: 95vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: zoom-out;
-}
-
-.dc-overlay-image {
-  max-width: 100%;
-  max-height: 95vh;
-  object-fit: contain;
-  border-radius: 0.5rem;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-  user-select: none;
-  -webkit-user-drag: none;
-}
-
-/* Status tooltip for miss/partial explanations */
-.dc-status-tooltip {
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-0.5rem);
-  z-index: 50;
-
-  display: none;
-  flex-direction: column;
-  gap: 0.375rem;
-
-  padding: 0.625rem 0.75rem;
-  min-width: 18rem;
-  max-width: 28rem;
-
-  background: var(--dc-popover-bg, #ffffff);
-  border: 1px solid var(--dc-border-color, #e2e8f0);
-  border-radius: 0.375rem;
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.15s ease-out;
-
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 0.75rem;
-  line-height: 1.4;
-  text-align: left;
-}
-
-/* Arrow for status tooltip */
-.dc-status-tooltip::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 0.375rem solid transparent;
-  border-top-color: var(--dc-popover-bg, #ffffff);
-}
-
-.dc-status-tooltip::before {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 0.4375rem solid transparent;
-  border-top-color: var(--dc-border-color, #e2e8f0);
-}
-
-/* Show status tooltip on hover or when expanded via click */
-.dc-popover-wrapper:hover .dc-status-tooltip,
-.dc-popover-wrapper:focus-within .dc-status-tooltip,
-.dc-popover-wrapper[data-expanded="true"] .dc-status-tooltip {
-  display: flex;
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* Status tooltip header */
-.dc-status-header {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-weight: 600;
-  color: var(--dc-text-primary, #334155);
-}
-
-.dc-status-header--miss {
-  color: var(--dc-color-warning, #d97706);
-}
-
-.dc-status-header--partial {
-  color: var(--dc-color-error, #dc2626);
-}
-
-/* Status icon */
-.dc-status-icon {
-  display: inline-flex;
-  flex-shrink: 0;
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-/* Status description */
-.dc-status-description {
-  color: var(--dc-text-secondary, #64748b);
-  font-size: 0.6875rem;
-}
-
-/* Expected/Searched text block */
-.dc-status-searched {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  margin-top: 0.25rem;
-  padding-top: 0.375rem;
-  border-top: 1px solid var(--dc-border-color, #e2e8f0);
-}
-
-.dc-status-label {
-  font-size: 0.625rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-  color: var(--dc-text-tertiary, #94a3b8);
-}
-
-.dc-status-text {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  font-size: 0.6875rem;
-  padding: 0.375rem 0.5rem;
-  background: var(--dc-code-bg, #f1f5f9);
-  border-radius: 0.25rem;
-  color: var(--dc-text-primary, #334155);
-  word-break: break-word;
-  max-height: 4rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.dc-status-text--miss {
-  color: var(--dc-color-warning, #d97706);
-  font-style: italic;
-}
-
-.dc-status-text--expected {
-  color: var(--dc-color-error, #dc2626);
-  text-decoration: line-through;
-  opacity: 0.7;
-}
-
-/* Diff details container in popover */
-.dc-diff-details {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  margin-top: 0.5rem;
-  padding-top: 0.5rem;
-  border-top: 1px solid var(--dc-border-color, #e2e8f0);
-  font-family: system-ui, -apple-system, sans-serif;
-  font-size: 0.75rem;
-}
-
-/* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .dc-status-tooltip {
-    --dc-popover-bg: #1e293b;
-    --dc-border-color: #334155;
-    --dc-text-primary: #e2e8f0;
-    --dc-text-secondary: #94a3b8;
-    --dc-text-tertiary: #64748b;
-    --dc-code-bg: #0f172a;
-    --dc-color-warning: #fbbf24;
-    --dc-color-error: #f87171;
-  }
-}
-
-/* ========================================
-   Search Phrases Section (simplified)
-   ======================================== */
-
-.dc-search-phrases {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  margin-top: 0.375rem;
-}
-
-.dc-search-phrases-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.dc-search-phrases-toggle {
-  background: none;
-  border: none;
-  color: var(--dc-text-tertiary, #94a3b8);
-  font-size: 0.625rem;
-  cursor: pointer;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  padding: 0;
-}
-
-.dc-search-phrases-toggle:hover {
-  color: var(--dc-text-secondary, #64748b);
-}
-
-.dc-search-phrases-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  max-height: 10rem;
-  overflow-y: auto;
-}
-
-.dc-search-phrase-item {
-  padding: 0.375rem 0.5rem;
-  border-left: 3px solid var(--dc-color-error, #dc2626);
-  background: var(--dc-code-bg, #f1f5f9);
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  font-size: 0.6875rem;
-  line-height: 1.4;
-  color: var(--dc-text-primary, #334155);
-  word-break: break-word;
-}
-
-.dc-search-phrase-more {
-  font-size: 0.625rem;
-  color: var(--dc-text-tertiary, #94a3b8);
-  padding-left: 0.5rem;
-}
-
-/* Dark mode support for search phrases */
-@media (prefers-color-scheme: dark) {
-  .dc-search-phrase-item {
-    --dc-code-bg: #0f172a;
-    --dc-text-primary: #e2e8f0;
-    --dc-color-error: #f87171;
-  }
-}
-
-/* ========================================
-   Diff Display Styles
-   ======================================== */
-
-.dc-diff-display {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.dc-diff-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
-  color: var(--dc-text-secondary, #64748b);
-}
-
-.dc-diff-content {
-  font-size: 0.75rem;
-  line-height: 1.5;
-}
-
-.dc-diff-blocks {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.dc-diff-block {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.dc-diff-block--added {
-  background-color: var(--dc-diff-added-bg, rgba(16, 185, 129, 0.08));
-  padding: 0 0.25rem;
-  border-radius: 0.125rem;
-}
-
-.dc-diff-block-added {
-  background-color: var(--dc-diff-added-bg, rgba(16, 185, 129, 0.05));
-  padding: 0.125rem 0.25rem;
-  border-radius: 0.125rem;
-}
-
-.dc-diff-part {
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-}
-
-.dc-diff-part--removed {
-  text-decoration: line-through;
-  text-decoration-thickness: 2px;
-  text-decoration-color: var(--dc-diff-removed-color, rgba(239, 68, 68, 0.5));
-  opacity: 0.6;
-  color: var(--dc-diff-removed-text, #ef4444);
-  margin: 0 0.125rem;
-}
-
-.dc-diff-part--removed:hover {
-  opacity: 1;
-  text-decoration: none;
-}
-
-.dc-diff-part--added {
-  text-decoration: underline;
-  text-decoration-thickness: 2px;
-  background-color: var(--dc-diff-added-highlight, rgba(16, 185, 129, 0.1));
-  color: var(--dc-text-primary, #334155);
-  margin: 0 0.125rem;
-  padding: 0 0.125rem;
-  border-radius: 0.0625rem;
-}
-
-.dc-diff-part--unchanged {
-  opacity: 0.9;
-  color: var(--dc-text-primary, #334155);
-}
-
-/* ========================================
-   Verification Tabs Styles
-   ======================================== */
-
-.dc-verification-tabs {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.dc-verification-tabs--exact {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.dc-verification-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin-bottom: 0.5rem;
-  padding: 0 1rem;
-  color: var(--dc-text-secondary, #64748b);
-}
-
-.dc-tabs-container {
-  padding: 0.5rem 1rem 0.75rem;
-}
-
-.dc-tabs-nav {
-  display: flex;
-  padding: 0.25rem;
-  background-color: var(--dc-tabs-bg, #f1f5f9);
-  border: 1px solid var(--dc-border-color, #e2e8f0);
-  user-select: none;
-}
-
-.dc-tab-button {
-  flex: 1;
-  padding: 0.375rem 0.5rem;
-  font-size: 0.625rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  border-radius: 0.125rem;
-  transition: all 0.1s ease-out;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  color: var(--dc-tab-inactive, #94a3b8);
-}
-
-.dc-tab-button:hover {
-  color: var(--dc-tab-hover, #64748b);
-  background-color: var(--dc-tab-hover-bg, rgba(148, 163, 184, 0.1));
-}
-
-.dc-tab-button--active {
-  background-color: var(--dc-tab-active-bg, #ffffff);
-  color: var(--dc-text-primary, #334155);
-  transform: scale(1.02);
-}
-
-.dc-tabs-content {
-  padding: 0 1rem 1rem;
-  min-height: 2.5rem;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-}
-
-.dc-tab-content {
-  animation: dc-fade-in 0.1s ease-out;
-}
-
-.dc-tab-content--found {
-  /* Specific styles for found tab */
-}
-
-.dc-tab-content--expected {
-  color: var(--dc-text-secondary, #64748b);
-}
-
-.dc-tab-content--diff {
-  /* Specific styles for diff tab */
-}
-
-.dc-tab-text-wrapper {
-  position: relative;
-  padding: 0.5rem;
-}
-
-.dc-tab-text {
-  /* Base text styling */
-}
-
-.dc-copy-button-wrapper {
-  position: absolute;
-  top: 0;
-  right: 1rem;
-  z-index: 10;
-}
-
-.dc-tab-empty {
-  color: var(--dc-text-tertiary, #94a3b8);
-  font-style: italic;
-}
-
-.dc-exact-match-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.dc-exact-match-content {
-  padding: 0 1rem 1rem;
-  min-height: 2.5rem;
-  font-size: 0.75rem;
-  line-height: 1.5;
-  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
-}
-
-.dc-exact-match-indicator {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  font-weight: 600;
-}
-
-.dc-check-icon {
-  display: inline-flex;
-  flex-shrink: 0;
-  width: 0.6rem;
-  height: 0.6rem;
-}
-
-.dc-diff-result {
-  word-break: break-word;
-  white-space: pre-wrap;
-  position: relative;
-}
-
-.dc-diff-block--added {
-  background-color: var(--dc-diff-added-block-bg, rgba(236, 253, 245, 1));
-  margin: 0 -0.25rem;
-  padding: 0 0.25rem;
-  border-radius: 0.125rem;
-}
-
-.dc-diff-block--removed {
-  background-color: var(--dc-diff-removed-block-bg, rgba(254, 242, 242, 1));
-  margin: 0 -0.25rem;
-  padding: 0 0.25rem;
-  border-radius: 0.125rem;
-  opacity: 0.6;
-}
-
-/* Dark mode for diff and tabs */
-@media (prefers-color-scheme: dark) {
-  .dc-tabs-nav {
-    --dc-tabs-bg: #1e293b;
-    --dc-border-color: #334155;
-  }
-
-  .dc-tab-button--active {
-    --dc-tab-active-bg: #475569;
-  }
-
-  .dc-diff-block--added {
-    --dc-diff-added-block-bg: rgba(16, 185, 129, 0.15);
-  }
-
-  .dc-diff-block--removed {
-    --dc-diff-removed-block-bg: rgba(239, 68, 68, 0.1);
-  }
-
-  .dc-diff-part--added {
-    --dc-diff-added-highlight: rgba(16, 185, 129, 0.25);
-  }
-}