/* jargon_highlight.css — highlight styles for UNJARGON
   ---------------------------------------------------- */

/* Theme tokens (tweak these to recolor) */
:root{
  --j-term-underline: #6e57ff;                 /* term underline (brand)      */
  --j-term-underlay:  rgb(255 242 161);   /* term yellow underlay        */
  --j-sent-underlay:   rgba(60, 132, 244, 0.18);    /* sentence light-blue underlay*/
  --j-tooltip-bg:     #fff9df;
  --j-tooltip-border: #ccc;
  --j-tooltip-shadow: 0 8px 24px rgba(0,0,0,.15);
}

/* Wrapper = must stay inline to avoid “chunky” spacing */
.jargon-wrapper{
  position: relative;
  display: inline;
  cursor: help;
}

/* Token element (both terms & sentences) */
.jargon{
  position: relative;
  color: #1a1a1a;
  text-decoration: none;
  padding: 0 .06em;           /* tiny breathing room for the underlay */
  border-radius: 2px;
}

/* Terms (words/phrases): underline + soft yellow band */
.jargon.k-term{
  border-bottom: 2px solid var(--j-term-underline);
  box-shadow: inset 0 -0.32em var(--j-term-underlay);
}

/* Complex sentences: soft blue band (no underline) */
.jargon.k-sent{
  box-shadow: inset 0 -0.36em var(--j-sent-underlay);
}

 

/* Optional numbered badge (if you render one) */
.jargon-index{
  position: absolute;
  top: -0.6em;
  left: -0.3em;
  width: 1.2em; height: 1.2em; line-height: 1.2em;
  text-align: center;
  font-size: .75em; font-weight: 700;
  background: #f90; color: #fff; border-radius: 50%;
  pointer-events: none;
}

/* Legend chips (used in the header legend) */
.hl-legend{ display:flex; gap:12px; justify-content:center; font-size:.9rem; opacity:.85; }
.hl-key{ display:inline-flex; align-items:center; gap:6px; }
.hl-key i{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.hl-key .k-term{ background: var(--j-term-underlay); border: 2px solid #ffe08a;box-shadow: inset 0 -0.20em #6e57ff;}
.hl-key .k-sent{ background: var(--j-sent-underlay); box-shadow: inset 0 -0.20em rgba(120, 170, 255, .35); border: 2px solid #cfe0ff; }


/* Legend row */
.hl-legend{display:flex;gap:12px;justify-content:center;font-size:.9rem;opacity:.8}
.hl-key{display:inline-flex;align-items:center;gap:6px}
.hl-key i{width:14px;height:14px;border-radius:3px;display:inline-block}

/* Legend chips (visual keys) */
.k-term{background:#fff3bf;border:1px solid #ffe08a}
.k-sent{background:#e8f0ff;border:1px solid #cfe0ff}

/* Inline wrappers (keep inline to avoid spacing gaps) */
.jargon-wrapper{ position:relative; display:inline; cursor:help; }
.jargon{ text-decoration:none; position:relative; color:#1a1a1a; }

/* Terms: underline + soft yellow underlay */
.jargon.k-term{
  border-bottom:2px solid #6e57ff;               /* brand underline */
  box-shadow:inset 0 -0.32em rgba(255,235,110,.7);/* gentle yellow bed */
}

/* Complex sentences: soft blue highlight band */
.jargon.k-sent{
  padding:0 .06em;
  background:rgba(60,132,244,.18);
  box-shadow:inset 0 -1px 0 rgba(60,132,244,.25);
}

/* Make legend chips visually match the inline highlights */
/* .hl-legend .k-term{ border-bottom:2px solid #6e57ff; } */
.hl-legend .k-sent{ background:rgba(60,132,244,.18); }
 
/* Tooltips live inside the transcript and are measured in px */
.annotated-transcript { position: relative; overflow: visible; }

/* Box-sizing keeps width math consistent with JS */
.jargon-tooltip{
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  box-sizing: border-box;
  min-width: 160px;
  max-width: 320px;            /* JS will tighten this per container */
  padding: 8px 12px;
  background: var(--j-tooltip-bg);
  border: 1px solid var(--j-tooltip-border);
  border-radius: 6px;
  box-shadow: var(--j-tooltip-shadow);
  font-size: .9rem; line-height: 1.25; color: #222;
  z-index: 1000; white-space: normal;
  visibility: hidden; opacity: 0; transition: opacity .15s ease;
}
.jargon-wrapper:hover .jargon-tooltip,
.jargon-wrapper:focus-within .jargon-tooltip,
.jargon-wrapper.show .jargon-tooltip { visibility: visible; opacity: 1; }

/* Arrow */
.jargon-tooltip::after{
  content: "";
  position: absolute;
  top: -6px; left: 12px;
  border: 6px solid transparent;
  border-bottom-color: var(--j-tooltip-bg);
}

/* Flip above when needed (JS toggles this) */
.jargon-tooltip.flip-up{
  top: auto; bottom: 100%;
  margin-top: 0; margin-bottom: 6px;
}
.jargon-tooltip.flip-up::after{
  top: auto; bottom: -6px;
  border-bottom-color: transparent;
  border-top-color: var(--j-tooltip-bg);
}
/* base */
.jargon-wrapper .jargon-tooltip { z-index: 1000; }

/* precedence: jargon/term > sentence */
.jargon-wrapper .jargon.k-term ~ .jargon-tooltip { z-index: 1100; }

/* Hide original sidebar tooltips when floating tooltip is active - only for revs panel */
#sidePanel > div.tab-content > div > details:nth-child(4) .jargon-wrapper:hover .jargon-tooltip,
#sidePanel > div.tab-content > div > details:nth-child(4) .jargon-wrapper:focus-within .jargon-tooltip,
#sidePanel > div.tab-content > div > details:nth-child(4) .jargon-wrapper.show .jargon-tooltip {
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
}

/* PDF viewer popup styling - professional appearance */
.popup {
  max-width: 320px !important;
  overflow-y: auto !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  padding: 16px 20px !important;
  border-radius: 8px !important;
  border: 1px solid #e1e5e9 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08) !important;
  background: #ffffff !important;
  color: #2d3748 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  z-index: 10000 !important;
  backdrop-filter: blur(8px) !important;
}

/* Professional styling for popup headers */
.popup .header {
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.popup .title {
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: #1a202c !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Better content styling */
.popup .popupContent {
  color: #4a5568 !important;
  margin: 0 !important;
}

.popup .popupContent p {
  margin: 0 0 8px 0 !important;
}

.popup .popupContent p:last-child {
  margin-bottom: 0 !important;
}

/* Style specific sections */
.popup .popupContent br + br {
  display: none !important;
}

/* Better formatting for complex sentence content */
.popup .popupContent {
  font-size: 0.85rem !important;
  white-space: pre-line !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1.2 !important;
}

/* Style the complex sentence quote (first paragraph) */
.popup .popupContent p:first-child {
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  font-style: italic !important;
  color: #64748b !important;
  line-height: 1.3 !important;
}

/* Style strong tags (bold labels) */
.popup .popupContent strong {
  font-weight: 600 !important;
  color: #1e293b !important;
}

/* Add subtle animation */
.popup {
  animation: popupFadeIn 0.2s ease-out !important;
}

@keyframes popupFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}