:root {
  /* Layout */
  --page-nav-width: 50px;

  /* Typography */
  --font-family: Montserrat, sans-serif;
  --heading-font-size: 30px;
  --large-font-size: 19px;
  --normal-font-size: 14.5px;
  --subtext-font-size: 12px;
  --small-font-size: 11px;
  --micro-font-size: 9px;
  --bold-font-weight: 600;
  --normal-font-weight: 300;
  --semibold-font-weight: 400;
  --thin-font-weight: 200;
  --entity-clean-name-font-weight: 500;

  /* === THEME COLORS (Light Mode) === */
  /* Backgrounds */
  --bg-primary: rgba(254, 254, 254, 1);
  --bg-secondary: rgba(245, 245, 245, 1);
  --bg-tertiary: rgba(240, 240, 240, 1);
  --bg-elevated: rgba(255, 255, 255, 1);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --bg-hover: rgba(0, 0, 0, 0.03);
  --bg-active: rgba(0, 0, 0, 0.05);
  --bg-selected: rgba(0, 0, 0, 0.08);
  --bg-tag: rgba(0, 0, 0, 0.1);

  /* Text colors */
  --text-primary: rgba(0, 0, 0, 0.9);
  --text-secondary: rgba(0, 0, 0, 0.7);
  --text-tertiary: rgba(0, 0, 0, 0.6);
  --text-muted: rgba(0, 0, 0, 0.5);
  --text-faint: rgba(0, 0, 0, 0.4);

  /* Border colors */
  --border-light: rgba(0, 0, 0, 0.1);
  --border-medium: rgba(0, 0, 0, 0.15);
  --border-strong: rgba(0, 0, 0, 0.3);
  --border-dashed: rgba(0, 0, 0, 0.2);
  --border-faint: rgba(0, 0, 0, 0.065);

  /* Component-specific */
  --page-nav-background: rgba(240, 240, 240, 1);
  --page-main-section-background: var(--bg-primary);
  --tooltip-background-color: rgba(0, 0, 0, 0.85);
  --tooltip-text-color: rgba(255, 255, 255, 0.95);
  --card-bg: rgba(255, 255, 255, 1);
  --modal-bg: rgba(255, 255, 255, 1);
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --icon-color: rgba(0, 0, 0, 0.7);
  --icon-hover: rgba(0, 0, 0, 0.9);

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.1);
  --shadow-md: rgba(0, 0, 0, 0.15);
  --shadow-lg: rgba(0, 0, 0, 0.2);

  /* Charts */
  --chart-grid: rgba(128, 128, 128, 0.1);
  --chart-bar: rgba(128, 128, 128, 0.6);
  --chart-bar-border: rgba(128, 128, 128, 1);
  --chart-accent: rgba(180, 100, 255, 0.9);
  --chart-accent-light: rgba(180, 100, 255, 0.2);
  --chart-accent-hover: rgba(180, 100, 255, 0.75);
  --chart-dot-stroke: rgba(255, 255, 255, 1);
}


body {
  font-family: var(--font-family);
  font-weight: var(--normal-font-weight);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

p {
  margin: 0px;
  padding: 0px;
}

/* Theme-aware input and selector styles */
.theme-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  transition: all 0.2s;
}
.theme-input:hover, .theme-input:focus {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

/* Hide number input spinners globally */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.theme-entity-selector {
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.theme-entity-selector:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.theme-label {
  color: var(--text-secondary);
}

.theme-arrow {
  color: var(--text-muted);
}

.theme-divider {
  border-color: var(--border-light);
}

.page-nav-section {
  width: var(--page-nav-width);
  border-right: 1px solid var(--border-light);
  background-color: var(--page-nav-background);
  height: 100vh;
  padding-top: 15px;
  flex-shrink: 0;
  position: fixed;
  left: 0;
  top: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  z-index: 1500;
  transition: width 0.25s ease;
}

.page-nav-section:hover {
  width: calc(var(--page-nav-width) * 2.8);
}

.page-main-section {
  height: 100vh;
  width: 100%;
  margin-left: var(--page-nav-width);
  padding-right: 50px;
  padding-left: 30px;
  padding-top: 15px;
  background-color: var(--page-main-section-background);
  overflow-x: auto;
  overflow-y: auto;
}

#feedEvents-main-section {
  overflow-y: hidden !important;
}

#search-main-section {
  overflow-y: hidden !important;
}

.page-main-subsection {
  min-height: 100px;
  margin-bottom: 30px;
  padding-right: 50px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Page header section styles */
.page-header-section {
  padding-bottom: 15px;
  min-height: auto;
}

.page-header-meta {
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 8px;
  margin-bottom: 15px;
}

.page-header-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.page-header-meta-row:last-child {
  margin-bottom: 0;
}

.page-header-id {
  font-size: var(--micro-font-size);
  color: var(--text-muted);
  font-weight: var(--normal-font-weight);
}

.page-header-status,
.page-header-updated {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
}

.page-header-separator {
  color: var(--text-muted);
}

.page-header-title {
  margin-top: 5px;
  margin-bottom: 0;
}

.info-text-micro {
  font-weight: var(--normal-font-weight);
  font-size: var(--micro-font-size);
}

.info-text-small {
  font-weight: var(--normal-font-weight);
  font-size: var(--small-font-size);
}

.info-text-subtext {
  font-weight: var(--normal-font-weight);
  font-size: var(--subtext-font-size);
}

.info-text-normal {
  font-weight: var(--normal-font-weight);
  font-size: var(--normal-font-size);
}

.info-text-large {
  font-weight: var(--normal-font-weight);
  font-size: var(--large-font-size);
}

.info-text-heading {
  font-weight: var(--normal-font-weight);
  font-size: var(--heading-font-size);
  margin-bottom: 13px;
}

.info-value-in-table-large {
  font-weight: var(--normal-font-weight);
  font-size: var(--large-font-size);
}

.info-value-in-table-normal {
  font-weight: var(--normal-font-weight);
  font-size: var(--normal-font-size);
}

.info-value-in-table-subtext {
  font-weight: var(--normal-font-weight);
  font-size: var(--subtext-font-size);
}

.info-value-micro-subtext {
  font-weight: var(--normal-font-weight);
  font-size: var(--micro-font-size);
  color: var(--text-muted);
  display: block;
  text-align: right;
  margin-top: -2px;
}

.info-label-micro-subtext {
  font-weight: var(--normal-font-weight);
  font-size: var(--micro-font-size);
  color: var(--text-muted);
  margin-left: 4px;
  vertical-align: sub;
}

.info-value-in-table-small {
  font-weight: var(--normal-font-weight);
  font-size: var(--small-font-size);
}

.info-table-div {
  width: max(220px, 100%);
}

.info-table-div-large-entries p {
  border-bottom: 1px dashed var(--border-medium);
  display: flex;
  justify-content: space-between;
  align-items: end;
  width: 100%;
  padding-top: 5px;
  line-height: 20px;
}

.info-table-div-small-entries p {
  border-bottom: 1px dashed var(--border-faint);
  display: flex;
  justify-content: space-between;
  align-items: end;
  width: 100%;
  padding-top: 3px;
  line-height: 11px;
}

.no-border-below {
  border-bottom: none !important;
}

.border-bottom-small-dashed {
  border-bottom: 1px dashed var(--border-faint);
}

.info-text-block {
  max-width: max(350px, 40vw);
  padding-bottom: 15px;
}

.icon {
  color: var(--icon-color);
}

.text-border-bottom {
  border-bottom: 1px solid var(--border-strong);
  padding-right: 100px;
}

.span-on-the-right-text-on-the-left {
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
}

.span-on-the-right-text-on-the-left span {
  text-wrap: nowrap;
  text-align: right;
}

.empty-div-15px-space {
  height: 15px;
}

.padding-left-30px {
  padding-left: 30px;
}

.info-text-section-title {
  margin-bottom: 20px;
}

.page-main-subsection-holding-div {
  display: flex;
  gap: 10px;
  width: 100%;
  overflow-x: hidden;
  margin-bottom: 10px;
  align-items: stretch;
}

.page-main-subsection-holding-div > section {
  border: 1px dashed var(--border-strong);
  padding: 20px;
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.info-table-div-assetVectors {
  width: min(650px, 100%);
}

.info-object-assetVector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  min-height: 35px;
  width: 100%;
  background-image: none !important;
  margin-bottom: 4px;
}

.info-object-assetVector-row-type {
  padding: 3px 10px;
  margin-right: 5px;
  background-color: var(--bg-tag);
}

.info-object-assetVector-row-type p {
  margin: 0;
}

.info-object-assetVector-row-name {
  margin: 0;
  flex: 1;
}

.info-object-assetVector-row-sentiment {
  margin-right: 25px;
}

.chart-holder-div {
  width: 100%;
  height: 300px;
  padding: 10px;
}

/* Entity Page Specific Styles */
.entityPage-description-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.entityPage-description-image {
  flex-shrink: 0;
  max-width: 300px;
  order: -1; /* Move image to the left */
}

.entityPage-description-text {
  flex: 1;
}

.entityPage-description-image img {
  max-height: 100px;
  width: auto;
  border-radius: 4px;
}

.entityPage-chart-section.page-main-subsection {
  border: 1px dashed var(--border-strong);
  padding: 20px;
  margin-bottom: 10px;
}

.entityPage-bordered-section.page-main-subsection {
  border: 1px dashed var(--border-strong);
  padding: 20px;
  margin-bottom: 10px;
}

/* Relationship page attributes two-column layout */
.relationshipPage-attributes-column {
  break-inside: avoid;
  padding: 10px;
}

/* Event page section styling */
.eventPage-chart-section.page-main-subsection {
  border: 1px dashed var(--border-strong);
  padding: 20px;
  margin-bottom: 10px;
}

.eventPage-bordered-section.page-main-subsection {
  border: 1px dashed var(--border-strong);
  padding: 20px;
  margin-bottom: 10px;
}

/* Event Development pane (single column, no entity perspective) */
.eventPage-development-pane .objectPage-timeline-left {
  width: 100%;
  flex: none;
}

/* Absorbed events styling - indented with merge indicator */
.eventPage-absorbed-event {
  margin-left: 30px;
  border-left: 2px solid var(--border-medium);
  background-color: rgba(128, 128, 128, 0.03);
}

.eventPage-absorbed-event .objectPage-timeline-left {
  padding-left: 20px;
}

.eventPage-absorbed-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--micro-font-size);
  color: var(--text-muted);
  background-color: rgba(128, 128, 128, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
}

.eventPage-absorbed-indicator svg {
  width: 12px;
  height: 12px;
}

/* Absorbed events collapsed section */
.eventPage-absorbed-section {
  margin-top: 15px;
  margin-left: 20px;
  border-left: 2px dashed var(--border-medium);
  padding-left: 15px;
}

.eventPage-absorbed-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  background-color: rgba(128, 128, 128, 0.05);
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.eventPage-absorbed-toggle:hover {
  background-color: rgba(128, 128, 128, 0.1);
}

.eventPage-absorbed-toggle-icon {
  font-size: var(--normal-font-size);
  font-weight: var(--bold-font-weight);
  color: var(--text-muted);
  width: 16px;
  text-align: center;
}

.eventPage-absorbed-toggle-text {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
}

.eventPage-absorbed-container {
  margin-top: 10px;
}

.eventPage-absorbed-showmore {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  background-color: rgba(128, 128, 128, 0.08);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.eventPage-absorbed-showmore:hover {
  background-color: rgba(128, 128, 128, 0.15);
}

/* Absorbed indicator row (placed under event type) */
.eventPage-absorbed-indicator-row {
  margin-top: 4px;
}

/* Delta indicators for importance/articles changes */
.objectPage-timeline-delta {
  font-size: var(--micro-font-size);
  font-weight: var(--bold-font-weight);
  margin-left: 3px;
}

.info-table-div-eventEntities {
  width: 100%;
}

.info-object-eventEntities-row-impact {
  margin-top: 5px;
}

.info-object-eventEntities-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  padding-left: 20px !important;
  margin-bottom: 10px;
  min-height: 50px;
  width: 100%;
  border: 1px solid var(--border-medium);
  background-image: none;
}

.info-object-eventEntities-attention {
  margin: 0;
  text-align: left;
  flex-shrink: 0;
}

.info-object-eventEntities-middle {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.info-object-eventEntities-row-name {
  margin-top: 5px;
  margin: 0;
}

.info-object-eventEntities-attributes {
  display: flex;
  gap: 5px;
  align-items: center;
}

.info-object-eventEntities-row-type {
  padding: 3px 10px;
  background-color: var(--bg-tag);
  width: fit-content;
}

.info-object-eventEntities-row-type p {
  margin: 0;
}

.info-object-eventEntities-row-secondary {
  padding: 3px 10px;
  background-color: var(--bg-tag);
  width: fit-content;
}

.info-object-eventEntities-row-secondary p {
  margin: 0;
}

.info-object-eventEntities-row-sentiment {
  margin: 0;
  text-align: center;
  width: max(30px, 15%);
  flex-shrink: 0;
}

.event-entity-reference-span {
  padding: 0;
  border-radius: 0;
  border-bottom: 2px solid;
  background-color: transparent;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.event-entity-reference-span:hover {
  color: rgba(0, 0, 0, 0.57);
  filter: brightness(0.85);
}

.info-table-div-eventActions {
  width: min(800px, 100%);
}

.info-object-eventActions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  min-height: 35px;
  width: 100%;
  border: 1px solid var(--border-medium);
}

.info-object-eventActions-attention {
  margin: 0;
  flex-shrink: 0;
}

.info-object-eventActions-emmitent, .info-object-eventActions-recipient {
  flex-shrink: 0;
}

.info-object-eventActions-details {
  flex: 1;
  line-height: 1.3;
}

.info-object-eventActions-arrow-1, .info-object-eventActions-arrow-2 {
  margin: 0;
  color: var(--text-muted);
  flex-shrink: 0;
}

.info-object-eventEntities-action-item {
  margin: 2px 0;
  line-height: 1.4;
}

.info-object-eventEntities-action-item .icon {
  font-size: var(--subtext-font-size);
  vertical-align: baseline;
  margin-right: 2px;
}

.event-entityReferenceTooltip-container {
  position: absolute;
  background: var(--modal-bg);
  color: var(--text-primary);
  padding: 15px;
  border-radius: 6px;
  font-family: var(--font-family);
  width: 400px;
  max-height: 500px;
  overflow-y: auto;
  z-index: 1000;
  border: 1px solid var(--border-light);
}

.event-entityReferenceTooltip-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 10px;
}

.event-entityReferenceTooltip-attention {
  font-size: var(--normal-font-size);
}

.event-entityReferenceTooltip-type {
  padding: 3px 10px;
  background-color: var(--bg-tag);
  border-radius: 3px;
  font-size: var(--subtext-font-size);
}

.event-entityReferenceTooltip-secondary {
  padding: 3px 10px;
  background-color: var(--bg-tag);
  margin-left: 5px;
  border-radius: 3px;
  font-size: var(--subtext-font-size);
}

.event-entityReferenceTooltip-sentiment {
  margin-left: auto;
  font-size: var(--large-font-size);
  font-weight: var(--bold-font-weight);
}

.event-entityReferenceTooltip-title {
  font-size: var(--large-font-size);
  font-weight: var(--bold-font-weight);
  margin: 0 0 10px 0;
}

.event-entityReferenceTooltip-section {
  margin-bottom: 15px;
}

.event-entityReferenceTooltip-section-title {
  font-size: var(--subtext-font-size);
  font-weight: var(--bold-font-weight);
}

.event-entityReferenceTooltip-section-content {
  font-size: var(--subtext-font-size);
  line-height: 1.4;
  margin-top: 5px;
}

.event-entityReferenceTooltip-action-item {
  margin-bottom: 8px;
  font-size: var(--subtext-font-size);
  line-height: 1.4;
}

.event-entityReferenceTooltip-action-icon {
  width: var(--subtext-font-size);
  height: var(--subtext-font-size);
  margin-right: 5px;
}

.event-entityReferenceTooltip-footer {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  font-size: var(--small-font-size);
  color: var(--text-tertiary);
  font-style: italic;
}

.event-entityReferenceTooltip-eye-icon {
  width: var(--normal-font-size);
  height: var(--normal-font-size);
}

#event-relationships-chart-holder-div {
  width: 100%;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: var(--normal-font-size);
  color: var(--text-tertiary);
  margin-right: 100px;
  border: 1px dashed var(--border-dashed);
}

/* TradingView Chart Container */
#entityPage-tradingview-container {
  width: 100%;
  height: 600px;
  background-color: var(--bg-primary);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-dashed);
}

#entityPage-tradingviewSection {
  padding-right: 0px !important;
}

#event-relationships-section {
  padding-right: 0px !important;
}

.feedEvents-contextMenu {
  position: absolute;
  background-color: var(--modal-bg);
  border: 1px solid var(--border-dashed);
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--shadow-md);
  z-index: 10001;
  min-width: 160px;
  padding: 0;
}

.feedEvents-contextMenuSection {
  padding: 0;
}

.feedEvents-contextMenuSection:not(:last-child) {
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.feedEvents-contextMenuSectionHeader {
  padding: 4px 12px 2px 12px;
  font-size: var(--subtext-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feedEvents-contextMenuItem {
  padding: 5px 12px;
  font-size: var(--small-font-size);
  font-weight: var(--thin-font-weight);
  cursor: pointer;
  transition: background-color 0.2s;
  color: var(--text-primary);
}

.feedEvents-contextMenuItem:hover {
  background-color: var(--bg-active);
}

#feedEvents-allFeedsContainer {
  display: flex;
  gap: 0px;
  padding: 10px;
  overflow-x: auto;
  height: 100%;
  margin-left: -40px;
  flex: 1;
  transform-origin: 0 0;
  transition: transform 0.1s ease-out;
}

.feedEvents-pane {
  border: none;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.4);
  border-radius: 0;
  padding: 14px 16px 18px 10px;
  margin-bottom: 0;
  cursor: pointer;
  transition: background-color 0.2s;
  width: 330px;
}

.feedEvents-pane:hover {
  background-color: var(--bg-hover);
}

.feedEvents-topRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.feedEvents-topRow-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feedEvents-metric {
  font-size: var(--small-font-size);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 2px;
}

.feedEvents-updateTime {
  font-size: var(--micro-font-size);
  color: var(--text-tertiary);
}

.feedEvents-eventId {
  font-size: var(--micro-font-size);
  color: var(--text-muted);
}

.feedEvents-title {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feedEvents-metricsRow {
  display: flex;
  justify-content: flex-start;
}

.feedEvents-attention {
  font-size: var(--subtext-font-size);
  color: var(--text-secondary);
}

.feedEvents-articleCount {
  font-size: var(--subtext-font-size);
  color: var(--text-secondary);
}

.feedEvents-sentiment {
  font-size: var(--subtext-font-size);
  color: var(--text-secondary);
}

.feedEvents-showMore {
  text-align: center;
  padding: 12px;
  color: var(--text-secondary);
  font-size: var(--subtext-font-size);
  cursor: pointer;
  border-bottom: 1px solid var(--border-light);
  transition: background-color 0.2s;
}

.feedEvents-showMore:hover {
  background-color: var(--bg-hover);
}

.feedEvents-details {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}

.feedEvents-details-loading {
  color: var(--text-muted);
  font-size: var(--small-font-size);
  font-style: italic;
}

.feedEvents-detailSection {
  margin-bottom: 10px;
}

.feedEvents-detailLabel {
  font-size: var(--micro-font-size);
  color: var(--text-muted);
  margin: 0 0 4px 0;
  font-weight: var(--semibold-font-weight);
}

.feedEvents-detailText {
  font-size: var(--micro-font-size);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

.feedEvents-category {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.feedEvents-industries {
  font-size: var(--micro-font-size);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feedEvents-eventType {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.feedEvents-categoryTag {
  font-size: var(--micro-font-size);
  background-color: var(--bg-tag);
  padding: 2px 6px;
  border-radius: 4px;
}

.feedEvents-header {
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--border-faint);
  padding: 10px;
  margin-bottom: 15px;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: var(--page-main-section-background);
}

.feedEvents-feedName {
  font-size: var(--subtext-font-size);
  font-weight: var(--normal-font-weight);
  margin: 0;
}

.feedEvents-singleFeedContainer {
  width: 350px;
  min-height: 450px;
  max-height: calc(100vh - 30px);
  overflow-y: scroll;
  padding: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.feedEvents-singleFeedContainer::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.feedEvents-newFeedButton {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  background: none;
  border: 1px solid var(--border-dashed);
  padding: 4.25px 12.75px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.feedEvents-newFeedButton:hover {
  background-color: var(--bg-active);
  border-color: var(--border-strong);
}

.feedEvents-emptyFeedContainer {
  width: 230px;
  min-height: 450px;
  max-height: calc(100vh - 30px);
  padding: 0;
  border-right: 1px dashed var(--border-strong);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.7;
}

.feedEvents-feedSelector {
  width: 100%;
  padding: 12.75px;
  display: flex;
  gap: 8.5px;
  flex-wrap: wrap;
  margin-left: -25px;
}

.feedEvents-feedSelectorItem {
  font-size: var(--small-font-size);
  border: 1px solid var(--border-dashed);
  border-radius: 3px;
  padding: 8.5px;
  padding-left: 17px;
  padding-right: 17px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.feedEvents-feedSelectorItem.selected {
  background-color: var(--bg-tag);
}

.feedEvents-feedSelectorItem:hover {
  border-color: var(--border-strong);
}

/* Drag and drop states for feed selector items */
.feedEvents-feedSelectorItem.dragging {
  opacity: 0.5;
}

.feedEvents-feedSelectorItem.drag-over-left {
  background-color: rgba(0, 0, 0, 0.15);
  border-left: 3px solid rgba(0, 0, 0, 0.4);
}

.feedEvents-feedSelectorItem.drag-over-right {
  background-color: rgba(0, 0, 0, 0.15);
  border-right: 3px solid rgba(0, 0, 0, 0.4);
}

.feedEvents-feedSettingsModal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--text-muted);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedEvents-feedSettingsModal-container {
  background-color: var(--modal-bg);
  border-radius: 8px;
  width: 720px;
  max-width: 90vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px var(--shadow-md);
}

.feedEvents-feedSettingsModal-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feedEvents-feedSettingsModal-title {
  font-size: var(--normal-font-size);
  font-weight: var(--semibold-font-weight);
  margin: 0;
}

.feedEvents-feedSettingsModal-close {
  font-size: var(--large-font-size);
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 5px;
}

.feedEvents-feedSettingsModal-close:hover {
  color: var(--text-primary);
}

.feedEvents-feedSettingsModal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.feedEvents-feedSettingsModal-nameInput {
  width: 100%;
  font-size: var(--subtext-font-size);
  padding: 8px;
  border: 1px solid var(--border-dashed);
  border-radius: 4px;
  margin-bottom: 20px;
}

.feedEvents-feedSettingsModal-filtersLabel {
  font-size: var(--subtext-font-size);
  margin-bottom: 10px;
  font-weight: var(--semibold-font-weight);
}

.feedEvents-feedSettingsModal-conditionGroup {
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: var(--bg-hover);
  position: relative;
}

.feedEvents-feedSettingsModal-conditionRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  position: relative;
}

.feedEvents-feedSettingsModal-fieldSelect, .feedEvents-feedSettingsModal-operatorSelect, .feedEvents-feedSettingsModal-valueInput, .feedEvents-feedSettingsModal-logicSelect {
  font-size: var(--small-font-size);
  padding: 5px;
  border: 1px solid var(--border-dashed);
  border-radius: 4px;
}

.feedEvents-feedSettingsModal-fieldSelect {
  width: 150px;
}

.feedEvents-feedSettingsModal-operatorSelect {
  width: 60px;
}

.feedEvents-feedSettingsModal-valueInput {
  flex: 1;
}

.feedEvents-feedSettingsModal-logicSelect {
  width: 80px;
}

.feedEvents-feedSettingsModal-removeBtn {
  font-size: var(--small-font-size);
  color: red;
  cursor: pointer;
  padding: 5px;
}

.feedEvents-feedSettingsModal-addConditionBtn, .feedEvents-feedSettingsModal-addGroupBtn {
  font-size: var(--subtext-font-size);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  background: var(--bg-active);
  margin-right: 10px;
  margin-top: 10px;
}

.feedEvents-feedSettingsModal-addConditionBtn:hover, .feedEvents-feedSettingsModal-addGroupBtn:hover {
  background-color: var(--bg-tag);
}

.feedEvents-feedSettingsModal-footer {
  padding: 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.feedEvents-feedSettingsModal-saveBtn {
  background-color: #4CAF50;
  color: var(--tooltip-text-color);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: var(--subtext-font-size);
  cursor: pointer;
}

.feedEvents-feedSettingsModal-saveBtn:hover {
  background-color: #45a049;
}

.feedEvents-feedSettingsModal-cancelBtn {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  padding: 10px 20px;
  border-radius: 4px;
  font-size: var(--subtext-font-size);
  cursor: pointer;
}

.feedEvents-feedSettingsModal-cancelBtn:hover {
  background-color: var(--bg-active);
}

.feedEvents-feedSettingsModal-groupLogic {
  font-size: var(--small-font-size);
  margin: 0 10px;
  font-weight: var(--semibold-font-weight);
}

.feedEvents-feedSettingsModal-booleanSelect {
  font-size: var(--small-font-size);
  padding: 5px;
  border: 1px solid var(--border-dashed);
  border-radius: 4px;
  flex: 1;
}

.feedEvents-feedSettingsModal-close .icon {
  font-size: var(--large-font-size);
}

.feedEvents-feedSettingsModal-fieldSelect, .feedEvents-feedSettingsModal-operatorSelect, .feedEvents-feedSettingsModal-valueInput, .feedEvents-feedSettingsModal-logicSelect, .feedEvents-feedSettingsModal-booleanSelect {
  font-size: var(--subtext-font-size);
  padding: 5px;
  border: 1px solid var(--border-dashed);
  border-radius: 4px;
}

.feedEvents-feedSettingsModal-durationUnit {
  font-size: var(--subtext-font-size);
  padding: 5px;
  border: 1px solid var(--border-dashed);
  border-radius: 4px;
}

.feedEvents-feedSettingsModal-operatorText {
  font-size: var(--micro-font-size);
  margin: 0 5px;
}

.feedEvents-feedSettingsModal-logicPrefix {
  font-size: var(--small-font-size);
  font-weight: var(--semibold-font-weight);
  margin-right: 10px;
  min-width: 40px;
}

.feedEvents-feedSettingsModal-removeBtn .icon {
  font-size: var(--subtext-font-size);
}

.feedEvents-feedSettingsModal-saveBtn, .feedEvents-feedSettingsModal-cancelBtn {
  font-size: var(--subtext-font-size);
}

.feedEvents-feedSettingsModal-groupHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.feedEvents-feedSettingsModal-deleteGroupBtn {
  font-size: var(--subtext-font-size);
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 8px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  background: var(--bg-active);
}

.feedEvents-feedSettingsModal-deleteGroupBtn:hover {
  background-color: rgba(255, 0, 0, 0.1);
  color: red;
}

.feedEvents-feedSettingsModal-conditionsInGroup {
  margin-left: 20px;
}

.feedEvents-feedSettingsModal-fieldSelect, .feedEvents-feedSettingsModal-operatorSelect, .feedEvents-feedSettingsModal-valueInput, .feedEvents-feedSettingsModal-logicSelect, .feedEvents-feedSettingsModal-booleanSelect, .feedEvents-feedSettingsModal-durationUnit {
  font-size: var(--small-font-size);
  padding: 5px;
  border: 1px solid var(--border-dashed);
  border-radius: 4px;
}

.feedEvents-feedSettingsModal-multiSelect {
  font-size: var(--small-font-size);
  padding: 5px;
  border: 1px solid var(--border-dashed);
  border-radius: 4px;
  min-height: 60px;
  flex: 1;
}

.feedEvents-feedSettingsModal-sortingLabel {
  font-size: var(--subtext-font-size);
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: var(--semibold-font-weight);
}

.feedEvents-feedSettingsModal-sortingRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.feedEvents-feedSettingsModal-sortingSelect {
  font-size: var(--small-font-size);
  padding: 5px;
  border: 1px solid var(--border-dashed);
  border-radius: 4px;
  flex: 1;
  max-width: 200px;
}

.feedEvents-feedSettingsModal-sortingOrderText {
  font-size: var(--micro-font-size);
  margin-left: 10px;
  color: var(--text-tertiary);
}

.feedEvents-feedSettingsModal-addSortingBtn {
  font-size: var(--subtext-font-size);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  background: var(--bg-active);
  margin-top: 10px;
}

.feedEvents-feedSettingsModal-addSortingBtn:hover {
  background-color: var(--bg-tag);
}

/* Entity Feed Selector Styles */
.feedEvents-entitySelector {
  margin: 15px 0;
}

#feedEvents-selectedEntities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.feedEvents-entityRow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  background: transparent;
}

.feedEvents-entityRow:hover {
  background: var(--bg-hover);
}

.feedEvents-entityRow-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.feedEvents-entityRow-type {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  padding: 2px 5px;
  background: var(--bg-tag);
  border-radius: 3px;
}

.feedEvents-entityRow-name {
  font-size: var(--small-font-size);
  color: var(--text-primary);
}

.feedEvents-entityRow-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--subtext-font-size);
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

.feedEvents-entityRow-remove:hover {
  color: var(--text-primary);
}

.feedEvents-addEntityBtn {
  padding: 3px 8px;
  border: none;
  background: var(--bg-hover);
  border-radius: 3px;
  font-size: var(--small-font-size);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}

.feedEvents-addEntityBtn:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

/* Feed Type Selector - Segmented Control */
.feedEvents-feedType-container {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0;
}

.feedEvents-feedType-label {
  font-size: var(--small-font-size);
  color: var(--text-tertiary);
}

.feedEvents-feedType-options {
  display: inline-flex;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  overflow: hidden;
}

.feedEvents-feedType-option {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  cursor: pointer;
  background: transparent;
  border: none;
  transition: all 0.15s;
  user-select: none;
}

.feedEvents-feedType-option:not(:last-child) {
  border-right: 1px solid var(--border-medium);
}

.feedEvents-feedType-option:hover {
  background: var(--bg-hover);
}

.feedEvents-feedType-option.active {
  background: var(--bg-active);
  color: var(--text-primary);
}

.feedEvents-feedType-option input[type="radio"] {
  display: none;
}

.page-nav-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.page-nav-top {
  display: flex;
  flex-direction: column;
}

.page-nav-bottom {
  display: flex;
  flex-direction: column;
}

.page-nav-item {
  width: 100%;
  height: 58px;
  display: flex;
  align-items: center;
  padding-left: 0;
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s ease, padding-left 0.25s ease;
  overflow: hidden;
}

.page-nav-item:hover {
  background-color: var(--bg-selected);
}

.page-nav-item.active {
  background-color: var(--bg-tag);
  border-left: 3px solid var(--border-strong);
}

/* Icon shown in collapsed state */
.page-nav-icon {
  min-width: var(--page-nav-width);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color);
  transition: min-width 0.25s ease;
}

.page-nav-icon .icon {
  width: 20px;
  height: 20px;
}

/* Full title shown on hover */
.page-nav-title {
  font-size: var(--small-font-size);
  font-weight: var(--medium-font-weight);
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding-right: 20px;
}

/* Expanded state on nav hover */
.page-nav-section:hover .page-nav-icon {
  min-width: 36px;
}

.page-nav-section:hover .page-nav-title {
  opacity: 1;
}

.page-nav-section:hover .page-nav-item {
  padding-left: 10px;
}

.entityPage-metricsHighlight {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.entityPage-metricBox {
  flex: 1;
  text-align: center;
  padding: 15px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background-color: var(--bg-hover);
}

.entityPage-metricBox p:first-child {
  margin-bottom: 5px;
  color: var(--text-secondary);
}

.entityPage-metricBox p:last-child {
  margin: 0;
  font-weight: var(--semibold-font-weight);
}

.entityPage-chartsGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 20px;
}

.entityPage-chartContainer {
  width: 100%;
}

.entityPage-chartContainer > p {
  margin-bottom: 10px;
  font-weight: var(--semibold-font-weight);
}

#entityPage-prominence-chartHolder {
  height: 250px;
}

#entityPage-attention-chartHolder, #entityPage-sentiment-chartHolder {
  height: 200px;
}

.entityPage-eventsFeed-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 650px;
  overflow-y: auto;
  padding-bottom: 50px;
  padding-top: 15px;
  padding-right: 10px;
}

.entityPage-eventPane {
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  padding: 12px;
  padding-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: var(--card-bg);
}

.entityPage-eventPane:hover {
  background-color: var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--shadow-sm);
}

.entityPage-eventPane-topRow {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2px;
}

.entityPage-eventPane-updateTime {
  font-size: var(--micro-font-size);
  color: var(--text-tertiary);
}

.entityPage-eventPane-eventType {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
}

.entityPage-eventPane-title {
  font-size: var(--subtext-font-size);
  font-weight: var(--normal-font-weight);
  margin-bottom: 8px;
  word-wrap: break-word;
  line-height: 1.4;
}

.entityPage-eventPane-category {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.entityPage-eventPane-industries {
  font-size: var(--micro-font-size);
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}

.entityPage-eventPane-metricsRow {
  display: flex;
  justify-content: flex-start;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.entityPage-eventPane-attention, .entityPage-eventPane-articleCount {
  display: flex;
  align-items: center;
  gap: 3px;
}

.entityPage-eventPane-actions {
  border-top: 1px dashed var(--border-light);
  padding-top: 8px;
  margin-top: 8px;
}

.entityPage-eventPane-actionItem {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  margin-bottom: 4px;
  line-height: 1.3;
  display: flex;
  align-items: flex-start;
  gap: 3px;
}

.entityPage-eventPane-actionItem:last-child {
  margin-bottom: 0;
}

.entityPage-eventPane-actionItem .icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.entityPage-relationships-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 800px;
  overflow-y: auto;
  padding: 10px 0;
}

.entityPage-relationshipPane {
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: var(--card-bg);
  min-height: 60px;
}

.entityPage-relationshipPane:hover {
  background-color: var(--bg-hover);
  box-shadow: 0 2px 8px var(--shadow-sm);
}

.entityPage-relationshipPane.expanded {
  background-color: var(--bg-hover);
}

.entityPage-relationshipPane-header {
  pointer-events: none;
}

.entityPage-relationshipPane-entityName {
  font-size: var(--subtext-font-size);
  font-weight: var(--normal-font-weight);
  margin-bottom: 4px;
  color: var(--text-primary);
  line-height: 1.4;
}

.entityPage-relationshipPane-primaryRelationship {
  display: flex;
  align-items: center;
  gap: 5px;
}

.entityPage-relationshipPane-arrow {
  font-size: var(--micro-font-size);
  color: var(--text-muted);
}

.entityPage-relationshipPane-relationship {
  font-size: var(--micro-font-size);
  color: var(--text-tertiary);
  text-transform: capitalize;
}

.entityPage-relationshipPane-expanded {
  margin-top: 8px;
}

.entityPage-relationshipPane-divider {
  height: 1px;
  background: var(--bg-tag);
  margin: 6px 0;
}

.entityPage-relationshipPane-item {
  display: flex;
  align-items: center;
  padding: 3px 0;
  font-size: var(--micro-font-size);
  cursor: pointer;
}

.entityPage-relationshipPane-item:hover {
  background-color: var(--bg-active);
  margin: 0 -4px;
  padding: 3px 4px;
}

.entityPage-relationshipPane-itemType {
  flex: 1;
  margin-left: 5px;
  text-transform: capitalize;
  color: var(--text-secondary);
}

.entityPage-relationshipPane-itemValue {
  margin-left: auto;
  font-weight: var(--semibold-font-weight);
  color: var(--text-primary);
}

.entityPage-relationshipPane-action .entityPage-relationshipPane-itemType {
  color: var(--text-tertiary);
}

.entityPage-relationship-tooltip {
  cursor: pointer;
}

.entityPage-relationship-tooltip:hover {
  background: rgba(0, 0, 0, 0.95) !important;
}

.entityPage-relationship-tooltip-title {
  font-size: var(--subtext-font-size);
  margin-bottom: 4px;
}

.entityPage-relationship-tooltip-details {
  font-size: var(--small-font-size);
  color: rgba(255,255,255,0.9);
  line-height: 1.4;
}

.entity-lookup-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--text-muted);
  z-index: 2000;
  display: none;
}

.entity-lookup-modal {
  position: fixed;
  max-height: 80vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--modal-bg);
  border-radius: 8px;
  width: 600px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px var(--shadow-md);
}

.entity-lookup-modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 10px;
}

.entity-lookup-modal-input {
  flex: 1;
  border: none;
  border-bottom: 1px solid var(--border-dashed);
  padding: 5px;
  font-size: var(--subtext-font-size);
  outline: none;
}

.entity-lookup-modal-search-btn {
  padding: 5px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-dashed);
  background: var(--bg-hover);
  border-radius: 4px;
  font-size: var(--subtext-font-size);
  cursor: pointer;
}

.entity-lookup-modal-close {
  font-size: var(--large-font-size);
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 5px;
}

.entity-lookup-modal-body {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(90vh - 120px);
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}

.entity-lookup-modal-entity-span {
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: fit-content;
}

.entity-lookup-modal-entity-span:hover {
  background-color: var(--bg-hover);
}

.entity-lookup-modal-entity-type {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  padding: 2px 5px;
  background: var(--bg-tag);
  border-radius: 3px;
}

.entity-lookup-modal-entity-name {
  font-size: var(--small-font-size);
  color: var(--text-primary);
  flex: 0 1 auto;
}

.entity-lookup-modal-input {
  background: var(--card-bg);
  color: var(--text-primary);
}

.entity-lookup-modal-search-btn {
  color: var(--text-secondary);
}

.entity-lookup-modal-search-btn:hover {
  background: var(--bg-active);
}

/* Entity type filter labels */
.modal-entity-type-label {
  display: flex;
  align-items: center;
  font-size: var(--micro-font-size);
  cursor: pointer;
  padding: 3px 6px;
  border: 1px solid var(--border-medium);
  border-radius: 3px;
  background: var(--card-bg);
  transition: all 0.2s;
  user-select: none;
  color: var(--text-secondary);
}

.modal-entity-type-label.checked {
  background: var(--bg-active);
}

.modal-entity-type-label:hover {
  background: var(--bg-hover);
}

/* Generic filter button styles - used across search, relationship, pathfinding */
.filter-btn {
  font-size: var(--small-font-size);
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  background: var(--card-bg);
  color: var(--text-secondary);
  transition: all 0.2s;
  user-select: none;
}

.filter-btn.selected,
.filter-btn[data-selected="true"] {
  background: var(--bg-active);
}

.filter-btn:hover {
  background: var(--bg-hover);
}

.filter-btn.selected:hover,
.filter-btn[data-selected="true"]:hover {
  background: var(--bg-selected);
}

/* Control buttons (Select All, Clear All) */
.filter-control-btn {
  font-size: var(--small-font-size);
  padding: 5px 12px;
  border: 1px solid var(--border-dashed);
  background: var(--card-bg);
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-control-btn:hover {
  background: var(--bg-active);
}

/* Status/loading text */
.status-text {
  color: var(--text-muted);
}

.status-text-secondary {
  color: var(--text-tertiary);
}

/* ============================================
   Unified Entity Chip Styles
   Used across: filterBuilder, feed modals, entity lookup modal, search
   ============================================ */

/* Container for entity chip (clickable entity with type + name) */
.entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
}

.entity-chip:hover {
  background: var(--bg-hover);
}

/* Type badge - always smaller than entity name */
.entity-chip-type {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  padding: 2px 5px;
  background: var(--bg-tag);
  border-radius: 3px;
  white-space: nowrap;
}

/* Entity name */
.entity-chip-name {
  font-size: var(--small-font-size);
  color: var(--text-primary);
}

/* Legacy class - kept for backwards compatibility, now uses unified sizing */
.entity-type-badge {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  padding: 2px 5px;
  background: var(--bg-tag);
  border-radius: 3px;
}

/* Relationship browser info box */
.rel-info-box {
  background: var(--card-bg);
  border: 1px solid var(--border-dashed);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}

.rel-info-box-close {
  color: var(--text-muted);
  background: var(--bg-hover);
}

.rel-info-box-close:hover {
  color: var(--text-secondary);
  background: var(--bg-active);
}

/* Relationship browser control buttons */
.rel-control-btn {
  background: var(--card-bg);
  border: 1px solid var(--border-dashed);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}

.rel-control-btn:hover {
  background: var(--bg-hover);
}

/* Relationship browser modals */
.rel-modal-overlay {
  background: var(--modal-overlay);
}

.rel-modal-container {
  background: var(--modal-bg);
  box-shadow: 0 4px 20px var(--shadow-md);
  color: var(--text-primary);
}

.rel-modal-section {
  background: var(--bg-hover);
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 25px;
}

.rel-modal-section h4 {
  color: var(--text-primary);
}

.rel-modal-input {
  background: var(--card-bg);
  border: 1px solid var(--border-dashed);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: var(--small-font-size);
}

.rel-modal-input:focus {
  outline: none;
  border-color: var(--border-strong);
}

.rel-modal-select {
  background: var(--card-bg);
  border: 1px solid var(--border-dashed);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: var(--small-font-size);
  cursor: pointer;
}

.rel-modal-btn {
  background: var(--card-bg);
  border: 1px solid var(--border-dashed);
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: var(--subtext-font-size);
  transition: all 0.2s;
}

.rel-modal-btn:hover {
  background: var(--bg-active);
}

.rel-modal-btn-primary {
  background: #4CAF50;
  border-color: #4CAF50;
  color: white;
}

.rel-modal-btn-primary:hover {
  background: #45a049;
}

.rel-type-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-dashed);
  border-radius: 16px;
  background: var(--card-bg);
  cursor: pointer;
  font-size: var(--small-font-size);
  transition: all 0.2s;
  color: var(--text-secondary);
}

.rel-type-btn.selected {
  background: var(--bg-active);
}

.rel-type-btn:hover {
  background: var(--bg-hover);
}

.rel-modal-label {
  color: var(--text-secondary);
  font-size: var(--small-font-size);
}

.rel-modal-hint {
  color: var(--text-muted);
  font-size: var(--small-font-size);
}

/* D3 visualization text colors */
.rel-label-text {
  fill: var(--text-tertiary);
}

.rel-value-text {
  fill: var(--text-primary);
}

.entity-condition-span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.entity-condition-span:hover {
  background: var(--bg-hover);
}

.entity-condition-name {
  font-size: var(--small-font-size);
  color: var(--text-primary);
}

.search-selector-container, .saved-selector-container {
  display: flex;
  gap: 15px;
  padding: 10px 0;
}

.search-selector-pane, .saved-selector-pane, .feedEvents-newFeedButton {
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  padding: 8px 15px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: var(--subtext-font-size);
}

.search-selector-pane:hover, .saved-selector-pane:hover {
  background-color: var(--bg-hover);
}

.search-selector-pane.active, .saved-selector-pane.active {
  background-color: var(--bg-active);
  border-color: var(--border-strong);
}

.search-content-container {
  display: none;
  height: calc(100vh - 120px);
  gap: 30px;
}

.search-content-container.active {
  display: flex;
}

.search-parameters-section {
  flex: 1;
  overflow-y: auto;
  padding-right: 20px;
}

.search-results-section {
  width: 350px;
  flex-shrink: 0;
}

.search-section-title {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-strong);
  padding-right: 100px;
}

.search-query-subsection {
  margin-bottom: 30px;
}

.search-query-input {
  width: 100%;
  min-height: 40px;
  padding: 8px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: var(--small-font-size);
  resize: vertical;
  margin-bottom: 10px;
}

.search-button {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--border-dashed);
  background: var(--bg-hover);
  border-radius: 4px;
  font-size: var(--subtext-font-size);
  cursor: pointer;
  transition: all 0.2s;
}

.search-button:hover {
  background: var(--bg-active);
}

.search-button:focus {
  outline: none;
  border-bottom: 2px solid var(--border-dashed);
}

.search-filters-subsection {
  margin-bottom: 30px;
}

.search-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.search-logic-operator {
  font-weight: var(--semibold-font-weight);
}

.search-add-group-btn {
  padding: 3px 8px;
  border: none;
  background: var(--bg-hover);
  border-radius: 3px;
  font-size: var(--small-font-size);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}

.search-add-group-btn:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

.search-sets-container {
  margin-top: 10px;
}

/* Groups - simplified flat structure */
.search-group {
  background: var(--bg-hover);
  padding: 8px;
  margin-bottom: 6px;
  border-radius: 4px;
}

.search-group-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border-faint);
}

.search-group-logic {
  padding: 2px 6px;
  border: none;
  background: var(--bg-hover);
  border-radius: 3px;
  font-size: var(--small-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-muted);
  cursor: pointer;
  appearance: none;
  transition: all 0.15s;
}

.search-group-logic:hover {
  background: var(--bg-active);
  color: var(--text-secondary);
}

/* AND/OR Toggle Buttons */
.search-group-logic-toggle {
  display: flex;
  align-items: center;
}

.search-logic-toggle-btn {
  padding: 2px 8px;
  border: 1px solid var(--border-medium);
  background: var(--bg-secondary);
  font-size: 10px;
  font-weight: var(--semibold-font-weight);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.search-logic-toggle-btn.search-logic-and {
  border-radius: 3px 0 0 3px;
}

.search-logic-toggle-btn.search-logic-or {
  border-radius: 0 3px 3px 0;
  border-left: none;
}

.search-logic-toggle-btn.active {
  background: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
}

.search-logic-toggle-btn:hover:not(.active) {
  background: var(--bg-hover);
}

.search-add-condition-btn, .search-delete-group-btn {
  padding: 2px 6px;
  border: none;
  background: var(--bg-hover);
  border-radius: 3px;
  font-size: var(--small-font-size);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}

.search-add-condition-btn:hover, .search-delete-group-btn:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

.search-condition {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 3px;
  font-size: var(--small-font-size);
  flex-wrap: wrap;
}

.search-condition-content {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}

.search-condition input {
  padding: 2px 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  border-radius: 3px;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  cursor: text;
  outline: none;
  transition: all 0.15s;
  width: 80px;
}

.search-condition input:hover,
.search-condition input:focus {
  border-color: var(--border-medium);
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

/* Custom select dropdowns (styled like context menus) */
.search-custom-select {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  border-radius: 3px;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  transition: all 0.15s;
  user-select: none;
}

.search-custom-select:hover,
.search-custom-select:focus {
  border-color: var(--border-medium);
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

.search-condition input[type="number"] {
  -moz-appearance: textfield;
}

.search-condition input[type="number"]::-webkit-outer-spin-button,
.search-condition input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.search-condition-metric {
  min-width: 90px;
  flex-shrink: 0;
}

.search-condition-operator {
  min-width: 55px;
  flex-shrink: 0;
}

.search-condition-operator-text {
  padding: 2px 6px;
  background: var(--bg-hover);
  border-radius: 3px;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
}

.search-condition-value {
  min-width: 80px;
}

.search-condition-value.search-datetime-value {
  min-width: 240px;
}

.search-entity-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--small-font-size);
  white-space: nowrap;
  padding: 2px 6px;
  background: var(--bg-hover);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
}

.search-entity-name:hover,
.search-entity-name:focus {
  background: var(--bg-active);
  outline: none;
}

.entity-type-badge {
  background: var(--bg-tag);
  padding: 1px 4px;
  border-radius: 2px;
  font-size: var(--small-font-size);
}

.search-entity-filter {
  min-width: 80px;
}

.search-category-pill {
  padding: 2px 8px;
  background: var(--bg-hover);
  border-radius: 3px;
  font-size: var(--small-font-size);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.search-category-pill:hover,
.search-category-pill:focus {
  background: var(--bg-active);
  color: var(--text-secondary);
  outline: none;
}

.search-category-pill.selected {
  background: var(--accent-color, #4a9eff);
  color: white;
}

.search-delete-condition-btn {
  padding: 2px 6px;
  border: none;
  background: var(--bg-hover);
  border-radius: 3px;
  font-size: var(--small-font-size);
  cursor: pointer;
  color: var(--text-muted);
  margin-left: auto;
  transition: all 0.15s;
}

.search-delete-condition-btn:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

.search-delete-condition-btn:focus {
  outline: none;
}

.search-results-feed {
  height: calc(100vh - 180px);
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-multi-select {
  width: 150px;
  min-height: 60px;
}

.search-boolean-select {
  width: 80px;
}

.search-duration-unit {
  width: 80px;
}

/* Add new */

.search-logic-wrapper {
  position: relative;
  display: inline-block;
}

.search-logic-tooltip {
  position: absolute;
  bottom: -15px;
  left: 0;
  background: var(--tooltip-background-color);
  color: var(--tooltip-text-color);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 7px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 100;
}

.search-logic-wrapper:hover .search-logic-tooltip {
  opacity: 1;
}

.search-entity-input {
  width: 250px;
  border: 1px solid var(--border-dashed);
  border-bottom: 1px solid var(--border-dashed);
  padding: 8px 12px;
  font-size: var(--subtext-font-size);
  outline: none;
  flex: 1;
  border-radius: 4px;
  font-family: var(--font-family);
  transition: border-color 0.2s;
}

.search-entity-button {
  height: 30px;
  padding: 8px 20px;
  border: 1px solid var(--border-dashed);
  background: var(--bg-hover);
  border-radius: 4px;
  font-size: var(--subtext-font-size);
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
}

.search-entity-button:hover {
  background: var(--bg-active);
}

.search-entity-results {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}

.loading-container {
  position: fixed;
  top: 0;
  left: var(--page-nav-width);
  width: calc(100% - var(--page-nav-width));
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--page-main-section-background);
  z-index: 1000;
}

.loading-text {
  font-size: var(--large-font-size);
  font-weight: var(--normal-font-weight);
  font-family: var(--font-family);
  color: var(--text-secondary);
}

.loading-dots {
  display: inline-block;
  width: 40px;
  text-align: left;
}

.settings-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--modal-overlay);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-modal-container {
  background-color: var(--modal-bg);
  border-radius: 8px;
  width: 400px;
  max-width: 90vw;
  padding: 30px;
  box-shadow: 0 4px 20px var(--shadow-md);
}

.settings-modal-header {
  margin-bottom: 25px;
  text-align: center;
}

.settings-modal-title {
  font-size: var(--large-font-size);
  font-weight: var(--normal-font-weight);
  margin: 0;
}

.settings-modal-content {
  margin-bottom: 25px;
}

.settings-modal-user-info {
  background-color: var(--bg-hover);
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.settings-modal-label {
  font-size: var(--small-font-size);
  color: var(--text-tertiary);
  margin-bottom: 5px;
}

.settings-modal-username {
  font-size: var(--normal-font-size);
  font-weight: var(--semibold-font-weight);
}

.settings-modal-logout-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-dashed);
  background: var(--bg-hover);
  border-radius: 4px;
  font-size: var(--subtext-font-size);
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-primary);
}

.settings-modal-logout-btn:hover {
  background: var(--bg-active);
}

.settings-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: var(--large-font-size);
  cursor: pointer;
  color: var(--text-muted);
  padding: 5px;
}

.settings-modal-close:hover {
  color: var(--text-secondary);
}


.login-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--page-main-section-background);
  font-family: var(--font-family);
}

.login-card {
  background: var(--modal-bg);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 40px;
  width: 350px;
  max-width: 90vw;
  box-shadow: 0 2px 10px var(--shadow-sm);
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-title {
  font-size: var(--large-font-size);
  font-weight: var(--normal-font-weight);
  margin: 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.login-label {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  color: var(--text-secondary);
}

.login-input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-dashed);
  border-radius: 4px;
  font-size: var(--subtext-font-size);
  font-family: var(--font-family);
  font-weight: var(--normal-font-weight);
  background: var(--modal-bg);
  color: var(--text-primary);
  transition: border-color 0.2s;
}

.login-input:focus {
  outline: none;
  border-color: var(--border-strong);
}

.login-button {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-dashed);
  background: var(--bg-hover);
  border-radius: 4px;
  font-size: var(--subtext-font-size);
  font-family: var(--font-family);
  font-weight: var(--normal-font-weight);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 10px;
  color: var(--text-primary);
}

.login-button:hover {
  background: var(--bg-active);
}

.login-button:active {
  background: var(--bg-selected);
}

.login-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-error {
  background: rgba(255, 0, 0, 0.05);
  border: 1px solid rgba(255, 0, 0, 0.2);
  border-radius: 4px;
  padding: 10px;
  font-size: var(--small-font-size);
  color: rgba(255, 0, 0, 0.8);
  text-align: center;
  display: none;
}

.login-error.show {
  display: block;
}

.login-loading {
  text-align: center;
  font-size: var(--small-font-size);
  color: var(--text-tertiary);
  display: none;
}

.login-loading.show {
  display: block;
}

.page-header-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 6px;
  padding-bottom: 6px;
}

.page-header-row .page-header-info {
  display: flex;
  align-items: center;
  gap: 0;
}

.page-header-row .page-header-separator {
  margin: 0 10px;
  color: var(--text-muted);
}

.entityPage-saveButton {
  flex-shrink: 0;
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  background: none;
  border: 1px solid var(--border-dashed);
  padding: 3px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.entityPage-saveButton:hover {
  background-color: var(--bg-active);
  border-color: var(--border-strong);
}

.entityPage-saveModal-overlay,
.standalone-saveModal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--text-muted);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entityPage-saveModal-container {
  background-color: var(--modal-bg);
  border-radius: 8px;
  width: 500px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px var(--shadow-md);
}

.entityPage-saveModal-header {
  padding: 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.entityPage-saveModal-title {
  font-size: var(--normla-font-size);
  font-weight: var(--semibold-font-weight);
  margin: 0;
}

.entityPage-saveModal-close {
  font-size: var(--large-font-size);
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 5px;
}

.entityPage-saveModal-close:hover {
  color: var(--text-primary);
}

.entityPage-saveModal-body {
  padding: 20px;
}

.entityPage-saveModal-entityInfo {
  font-size: var(--normal-font-size);
  margin-bottom: 20px;
}

.entityPage-saveModal-notesLabel {
  font-size: var(--subtext-font-size);
  font-weight: var(--semibold-font-weight);
  margin-bottom: 10px;
}

.entityPage-saveModal-notesTextarea {
  width: 100%;
  min-height: 120px;
  padding: 10px;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: var(--small-font-size);
  resize: vertical;
}

.entityPage-saveModal-footer {
  padding: 20px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.entityPage-saveModal-saveBtn {
  background-color: #4CAF50;
  color: var(--tooltip-text-color);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: var(--subtext-font-size);
  cursor: pointer;
}

.entityPage-saveModal-saveBtn:hover {
  background-color: #45a049;
}

.entityPage-saveModal-cancelBtn {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  padding: 10px 20px;
  border-radius: 4px;
  font-size: var(--subtext-font-size);
  cursor: pointer;
}

.entityPage-saveModal-cancelBtn:hover {
  background-color: var(--bg-active);
}

.entityPage-saveModal-removeBtn {
  background-color: #f44336;
  color: var(--tooltip-text-color);
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: var(--subtext-font-size);
  cursor: pointer;
}

.entityPage-saveModal-removeBtn:hover {
  background-color: #da190b;
}

.savedEntities-container {
  display: flex;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 15px;
  padding: 20px 0;
  flex-wrap: wrap;
}

.savedEntities-card {
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  padding: 20px;
  background-color: var(--modal-bg);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  flex: 0 1 auto;
  min-width: 400px;
}

.savedEntities-card:hover {
  box-shadow: 0 4px 12px var(--shadow-sm);
  transform: translateY(-2px);
}

.savedEntities-card:hover .savedEntities-card-name,
.savedEntities-card:hover .savedRelationships-card-entity,
.savedEntities-card:hover .savedPaths-card-entity {
  opacity: 0.6;
}

.savedEntities-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.savedEntities-card-ref {
  font-size: var(--small-font-size);
  color: var(--text-tertiary);
  font-weight: var(--normal-font-weight);
}

.savedEntities-card-settingsBtn {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  background: none;
  border: 1px solid var(--border-dashed);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.savedEntities-card-settingsBtn:hover {
  background-color: var(--bg-active);
  border-color: var(--border-strong);
}

.savedEntities-card-name {
  font-size: var(--normal-font-size);
  font-weight: var(--normal-font-weight);
  margin: 0 0 15px 0;
}

/* Section titles for saved page (Entities, Events, Relationships, Paths) */
#saved-content-wrapper > .info-text-section-title,
.savedEntities-filters + .info-text-section-title {
  font-size: var(--normal-font-size);
  font-weight: var(--normal-font-weight);
}

/* Saved Relationships Card Display */
.savedRelationships-card-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: var(--normal-font-size);
  font-weight: var(--semibold-font-weight);
  white-space: nowrap;
}

.savedRelationships-card-entity {
  font-size: var(--normal-font-size);
  font-weight: var(--normal-font-weight);
  color: var(--text-primary);
}

.savedRelationships-card-separator {
  color: var(--text-muted);
  font-size: var(--normal-font-size);
  font-weight: var(--normal-font-weight);
}

.savedEntities-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.savedEntities-card-metric {
  display: flex;
  align-items: center;
  gap: 5px;
}

.savedEntities-card-metric-label {
  font-size: var(--subtext-font-size);
  color: var(--text-secondary);
}

.savedEntities-card-metric-value {
  font-size: var(--subtext-font-size);
  font-weight: var(--semibold-font-weight);
  display: flex;
  align-items: center;
}

/* Notes divider - thin line with "Notes" label on left and saved date on right */
.savedEntities-card-notes-divider {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  margin: 15px 0 0 0;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--bg-tag);
}

.savedEntities-card-notes-saved-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
}

.savedEntities-card-notes {
  margin-top: 8px;
}

.savedEntities-card-notes-text {
  font-size: var(--small-font-size);
  line-height: 1.5;
  color: var(--text-primary);
  margin: 0;
}

/* Filter controls */

.savedEntities-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0px;
}

.savedEntities-filter-label {
  font-size: var(--small-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-secondary);
  min-width: 70px;
}

/* Compact event filters - all on one line */
.savedEvents-filters-compact {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.savedEvents-filters-compact .savedEntities-filters {
  margin-bottom: 0;
}

.savedEvents-filters-compact .savedEntities-filter-label {
  min-width: auto;
}

.savedEvents-filter-separator {
  color: var(--border-light);
  font-weight: 300;
}

.savedEntities-filter-buttons {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.savedEntities-filter-btn {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  background: var(--modal-bg);
  border: 1px solid var(--border-dashed);
  padding: 5px 15px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.savedEntities-filter-btn:hover {
  background-color: var(--bg-active);
}

.savedEntities-filter-btn.active {
  background-color: var(--bg-tag);
  border-color: var(--border-strong);
}

/* Update card header for entity type */

.savedEntities-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.savedEntities-card-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.savedEntities-card-type {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  background-color: var(--bg-tag);
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: var(--normal-font-weight);
}

/* Rest of existing CSS remains the same */

.info-text-section-title {
  margin-bottom: 20px;
}

.savedEntities-filters {
  margin-bottom: 40px;
  padding: 0;
}

/* Reduce space after Entities title to bring it closer to first entity */

.info-text-section-title:last-of-type {
  margin-bottom: 10px;
}

/* Or more specifically target just the Entities title */

.page-main-subsection > .info-text-section-title:nth-of-type(2) {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* ============================================
   Section Filters - Reusable across pages
   ============================================ */

/* Main filter container - horizontal compact layout */
.section-filters {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 15px;
  padding: 10px 0;
}

/* Individual filter group */
.section-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Filter label */
.section-filter-label {
  font-size: var(--small-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Filter buttons container */
.section-filter-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Individual filter button */
.section-filter-btn {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  background: var(--modal-bg);
  border: 1px solid var(--border-dashed);
  padding: 4px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-secondary);
  margin-right: 6px;
  margin-bottom: 4px;
}

.section-filter-btn:last-child {
  margin-right: 0;
}

.section-filter-btn:hover {
  background-color: var(--bg-active);
  color: var(--text-primary);
}

.section-filter-btn.active {
  background-color: var(--bg-tag);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Separator between filter groups */
.section-filter-separator {
  color: var(--border-light);
  font-weight: 300;
  user-select: none;
}

/* Toggle switch style for on/off filters */
.section-filter-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.section-filter-toggle-switch {
  width: 36px;
  height: 20px;
  background: var(--border-medium);
  border-radius: 10px;
  position: relative;
  transition: background 0.2s;
}

.section-filter-toggle-switch::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s;
}

.section-filter-toggle.active .section-filter-toggle-switch {
  background: var(--text-secondary);
}

.section-filter-toggle.active .section-filter-toggle-switch::after {
  transform: translateX(16px);
}

.section-filter-toggle-label {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
}

.section-filter-toggle.active .section-filter-toggle-label {
  color: var(--text-primary);
}

/* No results message for filtered sections */
.section-filter-no-results {
  text-align: center;
  padding: 20px;
  color: var(--text-tertiary);
  font-size: var(--small-font-size);
}

.search-entity-input:focus {
  outline: none;
  border-color: var(--border-strong);
}

.search-sort-button {
  padding: 4px 10px;
  border: 1px solid var(--border-medium);
  background: var(--modal-bg);
  border-radius: 4px;
  font-size: var(--small-font-size);
  cursor: pointer;
  transition: all 0.2s;
}

.search-sort-button:hover {
  background: var(--bg-active);
}

.savedEvents-card-metrics-vertical {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 15px;
}

.savedEvents-card-metric-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px dashed var(--border-faint);
}

.savedEvents-card-metric-line:last-child {
  border-bottom: none;
}

/* Saved Paths Card Styling */
.savedPaths-card-path-display {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: var(--normal-font-size);
  font-weight: var(--semibold-font-weight);
}

.savedPaths-card-entity {
  font-size: var(--normal-font-size);
  font-weight: var(--normal-font-weight);
  color: var(--text-primary);
}

.savedPaths-card-arrow {
  color: var(--text-muted);
  font-size: var(--normal-font-size);
}

.savedPaths-card-steps {
  color: var(--text-primary);
  background: var(--bg-active);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--small-font-size);
  font-weight: var(--bold-font-weight);
}

#event-entities-holder {
  max-height: max(450px, 73vh);
  overflow-y: auto;
  overflow-x: hidden;
}

.entityPage-timeline-container {
  position: relative;
  padding: 30px 0;
  width: 100%;
  max-height: 800px;
  overflow-y: auto;
  overflow-x: hidden;
}

.objectPage_actions-container {
  max-height: 800px;
  overflow-y: auto;
}

.entityPage-timeline-events {
  position: relative;
}

.entityPage-timeline-day-header {
  margin-left: 20px;
  margin-bottom: 15px;
  margin-top: 30px;
}

.entityPage-timeline-day-header:first-child {
  margin-top: 0;
}

.entityPage-timeline-day-date {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  color: var(--text-secondary);
}

.entityPage-timeline-day-name {
  font-size: var(--micro-font-size);
  color: var(--text-tertiary);
  margin-left: 6px;
}

.entityPage-timeline-event {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  cursor: pointer;
  transition: background-color 0.1s;
  padding: 10px 0;
  padding-right: 70px !important;
  min-width: 600px;
}

.entityPage-timeline-event:hover {
  background: var(--bg-hover);
}

.entityPage-timeline-event.expanded {
  background: var(--bg-hover);
}

.entityPage-timeline-event-time {
  font-size: var(--subtext-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-primary);
  margin-bottom: 5px;
}

.entityPage-timeline-event-metrics {
  margin-bottom: 5px;
}

.entityPage-timeline-metrics-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-bottom: 3px;
}

.entityPage-timeline-metrics-label {
  font-size: var(--small-font-size);
  color: var(--text-muted);
  margin-right: 5px;
}

.entityPage-timeline-event-attention {
  font-size: var(--subtext-font-size);
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--text-secondary);
}

.entityPage-timeline-metrics-separator {
  font-size: var(--small-font-size);
  color: var(--text-faint);
}

.entityPage-timeline-event-sentiment {
  font-size: var(--subtext-font-size);
  font-weight: var(--bold-font-weight);
}

.entityPage-timeline-event-secondary .entityPage-timeline-event-attention {
  font-size: var(--small-font-size);
}

.entityPage-timeline-event-secondary .entityPage-timeline-event-sentiment {
  font-size: var(--small-font-size);
  color: var(--text-tertiary);
}

.entityPage-timeline-event-lasttime {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--border-light);
}

.entityPage-timeline-event-lastdate {
  font-size: var(--micro-font-size);
  color: var(--text-muted);
}

.entityPage-timeline-event-marker {
  position: absolute;
  left: 175px;
  border-radius: 0;
  z-index: 2;
  box-shadow: 0 1px 3px var(--shadow-md);
}

.entityPage-timeline-event-right {
  flex: 1;
  padding-left: 30px;
  min-width: 400px;
}

.entityPage-timeline-event-title {
  font-size: var(--normal-font-size);
  font-weight: var(--normal-font-weight);
  margin-bottom: 0;
  margin-left: 10px;
  line-height: 1.4;
  color: var(--text-primary);
}

.entityPage-timeline-event-expandable {
  margin-top: 8px;
}

.entityPage-timeline-event-impact {
  font-size: var(--subtext-font-size);
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.5;
  padding-left: 10px;
}

.entityPage-timeline-event-actions {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px dashed var(--border-strong);
  font-size: var(--subtext-font-size);
  color: var(--text-tertiary);
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.entityPage-timeline-action-item {
  margin-bottom: 4px;
  line-height: 1.4;
  display: inline;
  align-items: flex-start;
  gap: 5px;
}

.entityPage-timeline-action-attention {
  display: inline;
  align-items: center;
  gap: 2px;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
}

/* ============================================
   New Two-Panel Event Timeline Pane
   Used on entity and relationship pages
   ============================================ */

.objectPage-timeline-pane {
  border: none;
  border-top: 1px solid var(--border-light);
  margin-top: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  overflow: hidden;
}

.objectPage-timeline-pane:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.objectPage-timeline-pane:hover {
  background: var(--bg-hover);
}

/* Collapsed state (default) - hide impacts and actions, show action count */
.objectPage-timeline-pane.collapsed .objectPage-timeline-marketImpact,
.objectPage-timeline-pane.collapsed .objectPage-timeline-impact,
.objectPage-timeline-pane.collapsed .objectPage-timeline-actionsSection {
  display: none;
}

/* Expanded state - show impacts and actions, hide action count */
.objectPage-timeline-pane.expanded .objectPage-timeline-marketImpact,
.objectPage-timeline-pane.expanded .objectPage-timeline-impact,
.objectPage-timeline-pane.expanded .objectPage-timeline-actionsSection {
  display: block;
}

.objectPage-timeline-pane.expanded .objectPage-timeline-actionCount {
  visibility: hidden;
}

/* Panels wrapper for two-column layout */
.objectPage-timeline-panels {
  display: flex;
}

/* Left panel - Event info */
.objectPage-timeline-left {
  flex: 1;
  padding: 10px 14px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Right panel - Entity/Relationship perspective */
.objectPage-timeline-right {
  flex: 1;
  padding: 10px 14px;
  border-left: 1px dashed var(--border-medium);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Top row with category, metrics, time */
.objectPage-timeline-topRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  min-height: 20px;
}

.objectPage-timeline-topRow-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.objectPage-timeline-categoryTag {
  font-size: var(--micro-font-size);
  background-color: var(--bg-tag);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-secondary);
}

.objectPage-timeline-metric {
  font-size: var(--small-font-size);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 2px;
}

.objectPage-timeline-updateTime {
  font-size: var(--micro-font-size);
  color: var(--text-tertiary);
}

/* Event title - aligns with entity header on right */
.objectPage-timeline-title {
  font-size: var(--subtext-font-size);
  font-weight: var(--semibold-font-weight);
  margin-bottom: 4px;
  line-height: 1.4;
  color: var(--text-primary);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.objectPage-timeline-title:hover {
  opacity: 0.6;
}

/* Event type subtitle (shown always) - aligns with action count on right */
.objectPage-timeline-eventType {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  margin-bottom: 0;
  min-height: 16px;
}

/* Market impact in left panel */
.objectPage-timeline-marketImpact {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 10px;
}

/* Expandable description */
.objectPage-timeline-description {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}

/* Right panel header (for relationship page) - aligns with event title */
.objectPage-timeline-perspectiveHeader {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  margin-bottom: 4px;
}

/* Entity/Relationship metrics row */
.objectPage-timeline-entityMetrics {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.objectPage-timeline-entityMetric {
  font-size: var(--small-font-size);
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--text-secondary);
}

.objectPage-timeline-entityMetric-label {
  font-size: var(--micro-font-size);
  color: var(--text-muted);
  margin-right: 2px;
}

/* Impact text - aligns with market impact on left */
.objectPage-timeline-impact {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  line-height: 1.4;
  margin-top: 10px;
}

/* Entity name header in right panel - aligns with event title on left */
.objectPage-timeline-entityHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.objectPage-timeline-entityName {
  font-size: var(--subtext-font-size);
  font-weight: var(--normal-font-weight);
  color: var(--text-primary);
}

/* Action count shown in collapsed state (under entity name) - aligns with eventType */
.objectPage-timeline-actionCount {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  min-height: 16px;
}

/* Actions section - now at bottom of whole pane */
.objectPage-timeline-actionsSection {
  border-top: 1px dashed var(--border-light);
  padding: 10px 14px;
  background: transparent;
}

.objectPage-timeline-actionsSection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.objectPage-timeline-actionsSection-label {
  font-size: var(--micro-font-size);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.objectPage-timeline-actionsSection-showMore {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s;
  margin-top: 10px;
  text-align: left;
  padding: 8px 0;
  border-top: 1px dashed var(--border-light);
}

.objectPage-timeline-actionsSection-showMore:hover {
  color: var(--text-primary);
}

/* Unified action list container - used by timeline, relationship panes, etc. */
.objectPage-actionList-container,
.objectPage-timeline-actionsSection-content,
.rel-actions-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Simplified action items in lists (no background, no expansion) */
.objectPage-actionList-container .relationship_action-item,
.objectPage-timeline-actionsSection-content .relationship_action-item,
.rel-actions-content .relationship_action-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 4px 0 8px 0;
  cursor: default;
}

.objectPage-actionList-container .relationship_action-item:last-child,
.objectPage-timeline-actionsSection-content .relationship_action-item:last-child,
.rel-actions-content .relationship_action-item:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.objectPage-actionList-container .relationship_action-item:hover,
.objectPage-timeline-actionsSection-content .relationship_action-item:hover,
.rel-actions-content .relationship_action-item:hover {
  background: transparent;
  box-shadow: none;
}

.objectPage-actionList-container .objectPage_action-tooltip,
.objectPage-actionList-container .relationship_action-tooltip,
.objectPage-timeline-actionsSection-content .objectPage_action-tooltip,
.objectPage-timeline-actionsSection-content .relationship_action-tooltip {
  display: none !important;
}

/* Show more button */
.objectPage-timeline-showMore {
  text-align: center;
  padding: 12px;
  color: var(--text-secondary);
  font-size: var(--small-font-size);
  cursor: pointer;
  border: 1px dashed var(--border-light);
  border-radius: 4px;
  margin-top: 10px;
  transition: all 0.2s;
}

.objectPage-timeline-showMore:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

/* Global scrollbar styles */

*::-webkit-scrollbar {
  width: 8px;
  height: 5px;
}

*::-webkit-scrollbar-track {
  background: transparent;
  border-left: 5px solid transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-dashed);
  border-radius: 2px;
  border-left: 5px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--modal-overlay);
  border-left: 5px solid transparent;
  background-clip: padding-box;
}

.entityPage-timeline-line {
  position: absolute;
  left: 180px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--bg-tag);
}

.entityPage-timeline-event-left {
  width: 160px;
  padding-right: 30px;
  text-align: right;
  flex-shrink: 0;
  border-right: 1px dashed var(--border-dashed);
  margin-right: 50px;
  height: 100%;
}

#relationships-chart-holder-div {
  height: 90vh;
  width: 100%;
  background-color: var(--modal-bg);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-dashed);
}

#entityPage-timelineSection {
  border: 1px dashed var(--border-strong);
  padding: 20px;
  break-inside: avoid;
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
}

#search-rel-source-entity:hover {
  background: var(--bg-hover) !important;
  border-color: var(--border-strong);
}

.search-rel-result:hover {
  box-shadow: 0 2px 8px var(--shadow-sm);
  transform: translateY(-1px);
}

#search-relationship-content .search-rel-result {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

#search-relationship-results {
  width: 100% !important;
  max-width: none !important;
}

.relationship_actions-sort {
  float: right;
  display: inline-flex;
  gap: 5px;
}

.relationship_sort-btn {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  background: var(--modal-bg);
  border: 1px solid var(--border-dashed);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.relationship_sort-btn:hover {
  background-color: var(--bg-active);
}

.relationship_sort-btn.active {
  background-color: var(--bg-tag);
  border-color: var(--border-strong);
  font-weight: var(--semibold-font-weight);
}

.relationship_actions-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 600px;
  overflow-y: auto;
  padding: 10px 0;
}

.relationship_action-item {
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--modal-bg);
  transition: all 0.2s;
  position: relative;
  cursor: pointer;
}

.relationship_action-item:hover {
  background: var(--bg-hover);
  box-shadow: 0 2px 6px var(--shadow-sm);
  border-color: var(--border-medium);
}

.relationship_action-main {
  display: flex;
  flex-direction: column;
}

.relationship_action-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.4;
}

.relationship_action-emmitent, .relationship_action-recipient {
  font-size: var(--subtext-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-primary);
}

.relationship_action-arrow {
  font-size: var(--subtext-font-size);
  color: var(--text-faint);
  font-weight: var(--normal-font-weight);
}

.relationship_action-text {
  font-size: var(--subtext-font-size);
  color: var(--text-secondary);
  line-height: 1.4;
}

.relationship_action-metadata {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--small-font-size);
}

.relationship_action-time {
  color: var(--text-tertiary);
  font-size: var(--small-font-size);
  margin-right: 8px;
  white-space: nowrap;
}

.relationship_action-separator {
  color: var(--text-faint);
}

.relationship_action-importance {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-tertiary);
  font-size: var(--small-font-size);
  min-width: 32px;
}

/* Event title inline on right side of action panes (non-event pages) */
.objectPage_action-event-title-spacer {
  flex: 1;
  min-width: 20px;
}

.objectPage_action-event-title-inline {
  font-size: var(--small-font-size);
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  text-align: right;
  margin-left: auto;
}

.relationship_action-tooltip {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}

.relationship_action-tooltip-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--small-font-size);
  margin-bottom: 5px;
}

.relationship_action-tooltip-row:last-child {
  margin-bottom: 0;
}

.relationship_action-tooltip-label {
  color: var(--text-tertiary);
}

.relationship_action-tooltip-value {
  color: var(--text-primary);
  font-weight: var(--semibold-font-weight);
  max-width: 70%;
  text-align: right;
}

.relationship_action-event-title {
  font-size: var(--small-font-size);
  line-height: 1.3;
}

/* ========================================
   LOAD SAVED MODAL STYLES
   Used on relationship browser page
   ======================================== */

.load-saved-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.load-saved-modal {
  background: var(--modal-bg);
  border-radius: 8px;
  width: 1200px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px var(--shadow-lg);
}

.load-saved-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-light);
}

.load-saved-modal-title {
  font-size: var(--normal-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-primary);
}

.load-saved-modal-close {
  font-size: var(--large-font-size);
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s;
  line-height: 1;
}

.load-saved-modal-close:hover {
  color: var(--text-primary);
}

.load-saved-modal-body {
  overflow-y: auto;
  padding: 20px;
  flex: 1;
  min-height: 200px;
}

.load-saved-content {
  display: none;
}

.load-saved-content.active {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: flex-start;
}

.load-saved-item {
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--card-bg);
  min-width: 160px;
}

.load-saved-item:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
}

.load-saved-item:last-child {
  margin-bottom: 0;
}

.load-saved-item-title {
  font-size: var(--subtext-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-primary);
  margin-bottom: 4px;
}

.load-saved-item-subtitle {
  font-size: var(--small-font-size);
  color: var(--text-tertiary);
}

.load-saved-item-meta {
  font-size: var(--micro-font-size);
  color: var(--text-muted);
  margin-top: 6px;
}

/* Single-line ellipsis notes for saved page cards */
.saved-notes-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: block;
}

.load-saved-empty {
  text-align: center;
  padding: 30px;
  color: var(--text-muted);
  font-size: var(--small-font-size);
}

/* Modal-specific card container styling */
.load-saved-modal-body .savedEntities-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 10px 0;
}

/* Modal filter controls styling */
.load-saved-modal-filters {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.load-saved-modal-filters .savedEntities-filters {
  margin-top: 0;
}

.load-saved-modal-filters .savedEntities-filter-label {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  margin-right: 8px;
}

.load-saved-modal-filters .savedEntities-filter-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.load-saved-modal-filters .savedEntities-filter-btn {
  font-size: var(--small-font-size);
  padding: 3px 10px;
}

/* ============================================
   Event Page Entity Pills & Attention Groups
   ============================================ */

/* Main container for all attention groups */
.event-entities-groups-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* Flat list layout for entity pills (no grouping) */
.event-entities-flat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  align-content: flex-start;
}

/* Individual attention group */
.event-entities-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.event-entities-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-entities-group-label {
  font-size: var(--subtext-font-size);
  color: var(--text-secondary);
  font-weight: 500;
}

.event-entities-group-count {
  font-size: var(--micro-font-size);
  color: var(--text-muted);
}

/* Flex-wrap container for entity pills */
.event-entities-group-content {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  align-content: flex-start;
}

/* Show more/less toggle */
.event-entities-group-showmore {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 0;
  margin-top: 5px;
  transition: color 0.2s;
}

.event-entities-group-showmore:hover {
  color: var(--text-primary);
}

/* Event page actions show more button */
.eventPage-actions-showmore {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 10px 0;
  margin-top: 5px;
  text-align: center;
  transition: color 0.2s;
}

.eventPage-actions-showmore:hover {
  color: var(--text-primary);
}

/* Entity page show more buttons */
.entityPage-relationships-showmore,
.entityPage-actions-showmore,
.entityPage-timeline-showmore {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 10px 0;
  margin-top: 5px;
  text-align: center;
  transition: color 0.2s;
}

.entityPage-relationships-showmore:hover,
.entityPage-actions-showmore:hover,
.entityPage-timeline-showmore:hover {
  color: var(--text-primary);
}

/* Relationship page show more buttons */
.relationshipPage-actions-showmore,
.relationshipPage-timeline-showmore {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 10px 0;
  margin-top: 5px;
  text-align: center;
  transition: color 0.2s;
}

.relationshipPage-actions-showmore:hover,
.relationshipPage-timeline-showmore:hover {
  color: var(--text-primary);
}

/* Search page show more buttons */
.search-event-showmore,
.search-rel-showmore,
.pathfinding-showmore {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 10px 0;
  margin-top: 5px;
  text-align: center;
  transition: color 0.2s;
}

.search-event-showmore:hover,
.search-rel-showmore:hover,
.pathfinding-showmore:hover {
  color: var(--text-primary);
}

/* ===== Entity Query Builder Styles ===== */
.entityquery-node,
.entityquery-edge {
  background: var(--bg-hover);
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
}

.entityquery-node-header,
.entityquery-edge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-faint);
}

.entityquery-node-id-input {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  font-size: var(--small-font-size);
  font-weight: var(--semibold-font-weight);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.entityquery-label {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  margin-right: 8px;
}

.entityquery-entity-selector {
  padding: 8px 12px;
  border: 1px dashed var(--border-medium);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  transition: all 0.2s;
}

.entityquery-entity-selector:hover {
  background: var(--bg-active);
  border-color: var(--border-strong);
}

.entityquery-entity-selector.has-entity {
  border-style: solid;
  color: var(--text-primary);
}

.entityquery-delete-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--subtext-font-size);
  padding: 2px 6px;
  border-radius: 3px;
  transition: all 0.2s;
}

.entityquery-delete-btn:hover {
  color: var(--error-color);
  background: var(--bg-active);
}

.entityquery-result-node {
  margin-bottom: 20px;
  padding: 15px;
  background: var(--bg-hover);
  border-radius: 4px;
}

.entityquery-result-node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-faint);
}

.entityquery-result-showmore {
  cursor: pointer;
  padding: 8px 12px;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--small-font-size);
  background: var(--bg-active);
  border-radius: 4px;
  margin-top: 10px;
  transition: all 0.2s;
}

.entityquery-result-showmore:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

#entityquery-json-preview {
  background: var(--bg-hover);
  padding: 10px;
  border-radius: 4px;
  font-size: 11px;
  overflow-x: auto;
  max-height: 200px;
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.entityquery-type-pill {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  font-size: var(--micro-font-size);
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text-secondary);
}

.entityquery-type-pill:hover {
  background: var(--bg-hover);
}

.entityquery-type-pill.selected {
  background: var(--bg-active);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.entityquery-input {
  padding: 5px 8px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: var(--small-font-size);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.entityquery-input:focus {
  outline: none;
  border-color: var(--border-strong);
}

.entityquery-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--small-font-size);
}

.entityquery-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.entityquery-edge-arrow {
  color: var(--text-muted);
  font-size: var(--subtext-font-size);
}

/* Entity Query Results - Entity Cards */
.entityquery-entity-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-primary);
}

.entityquery-entity-card:hover {
  background: var(--bg-hover);
  border-color: var(--border-medium);
}

.entityquery-entity-type {
  background: var(--bg-tag);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--micro-font-size);
  white-space: nowrap;
}

.entityquery-entity-name {
  font-size: var(--small-font-size);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

/* Entity Query Edge Result Cards */
.entityquery-edge-card {
  padding: 10px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  margin-bottom: 8px;
  background: var(--bg-primary);
}

.entityquery-edge-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.entityquery-edge-card-type {
  font-size: var(--micro-font-size);
  color: var(--text-secondary);
  background: var(--bg-tag);
  padding: 2px 6px;
  border-radius: 3px;
}

.entityquery-edge-card-importance {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
}

/* Entity pill - matches feed page entity style with sentiment border */
.event-entity-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border-medium);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  max-width: min(560px, 100%);
}

.event-entity-pill:hover {
  background-color: var(--bg-hover);
}

.event-entity-pill.event-entity-pill-expanded {
  background-color: var(--bg-selected);
}

.event-entity-pill-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-left: 4px solid;
  padding-left: 6px;
}

.event-entity-pill-type {
  background: var(--bg-tag);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--micro-font-size);
  white-space: nowrap;
}

.event-entity-pill-name {
  font-size: var(--small-font-size);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Expansion container - full width below pill */
.event-entity-pill-expansion {
  flex-basis: 100%;
  width: 100%;
  padding: 12px 15px 12px 20px;
  margin-top: 5px;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: var(--bg-hover);
  font-size: var(--subtext-font-size);
  line-height: 1.5;
}

.event-entity-pill-expansion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.event-entity-pill-expansion-importance {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--small-font-size);
  font-weight: 500;
}

.event-entity-pill-expansion-sentiment {
  font-size: var(--small-font-size);
  font-weight: 500;
}

.event-entity-pill-expansion-section {
  margin-bottom: 12px;
}

.event-entity-pill-expansion-section:last-child {
  margin-bottom: 0;
}

.event-entity-pill-expansion-section-title {
  font-weight: 500;
  margin-bottom: 6px;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
}

.event-entity-pill-expansion-impact {
  color: var(--text-primary);
}

.event-entity-pill-expansion-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-entity-pill-expansion-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: var(--bg-hover);
  border-radius: 3px;
  font-size: var(--subtext-font-size);
  cursor: pointer;
  transition: background 0.2s;
}

.event-entity-pill-expansion-action-item:hover {
  background: var(--bg-active);
}

.event-entity-pill-expansion-action-item .action-item-text {
  flex: 1;
}

.event-entity-pill-expansion-action-item .action-item-importance {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  margin-left: 10px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ============================================
   Entity Perspective Modal
   ============================================ */

.entity-perspective-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--modal-overlay);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entity-perspective-modal {
  background: var(--modal-bg);
  border-radius: 8px;
  width: fit-content;
  min-width: 40vw;
  max-width: 85vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px var(--shadow-md);
  z-index: 2501;
}

.entity-perspective-modal-header {
  display: flex;
  flex-direction: column;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-light);
}

.entity-perspective-modal-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.entity-perspective-modal-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.entity-perspective-modal-title-type {
  background: var(--bg-tag);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--micro-font-size);
}

.entity-perspective-modal-saveBtn {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  background: none;
  border: 1px solid var(--border-dashed);
  padding: 3px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.entity-perspective-modal-saveBtn:hover {
  background-color: var(--bg-active);
  border-color: var(--border-strong);
}

.entity-perspective-modal-title-name {
  font-size: var(--large-font-size);
  font-weight: var(--normal-font-weight);
  margin: 0;
}

.entity-perspective-modal-close {
  font-size: var(--large-font-size);
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 5px;
  line-height: 1;
}

.entity-perspective-modal-close:hover {
  color: var(--text-primary);
}

.entity-perspective-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.entity-perspective-modal-metrics {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

.entity-perspective-modal-importance {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--small-font-size);
  font-weight: 500;
}

.entity-perspective-modal-sentiment {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--small-font-size);
  font-weight: 500;
}

.entity-perspective-modal-sentiment-label {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
}

.entity-perspective-modal-sentiment-value {
  font-size: var(--normal-font-size);
  font-weight: 500;
}

.entity-perspective-modal-section {
  margin-bottom: 15px;
}

.entity-perspective-modal-section:last-child {
  margin-bottom: 0;
}

.entity-perspective-modal-section-title {
  font-weight: 500;
  margin-bottom: 8px;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
}

.entity-perspective-modal-section-content {
  font-size: var(--subtext-font-size);
  line-height: 1.5;
  color: var(--text-primary);
}

.entity-perspective-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.entity-perspective-modal-action-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: var(--bg-hover);
  border-radius: 3px;
  font-size: var(--subtext-font-size);
  cursor: pointer;
  transition: background 0.2s;
}

.entity-perspective-modal-action-item:hover {
  background: var(--bg-active);
}

.entity-perspective-modal-action-item .action-item-text {
  flex: 1;
}

.entity-perspective-modal-action-item .action-item-importance {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  margin-left: 10px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
}

/* ============================================
   Entity Perspective Pane (Timeline-style)
   ============================================ */

/* Shared styles for both inline and modal panes */
.entity-perspective-pane-inline,
.entity-perspective-pane-modal {
  width: 100%;
}

.entity-perspective-pane-header {
  margin-bottom: 10px;
}

.entity-perspective-pane-topRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.entity-perspective-pane-topRow-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.entity-perspective-pane-type {
  background: var(--bg-tag);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--micro-font-size);
}

.entity-perspective-pane-metric {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.entity-perspective-pane-name {
  font-size: var(--small-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-primary);
  line-height: 1.4;
}

.entity-perspective-pane-impact {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
  padding-left: 12px;
}

.entity-perspective-pane-actionsSection {
  border-top: 1px dashed var(--border-light);
  padding-top: 12px;
  margin-top: 12px;
  padding-left: 12px;
}

.entity-perspective-pane-actionsSection-header {
  margin-bottom: 8px;
}

.entity-perspective-pane-actionsSection-label {
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  font-weight: var(--semibold-font-weight);
}

.entity-perspective-pane-actionsSection-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Match timeline action panes styling - simplified (no background, no expansion) */
.entity-perspective-pane-actionsSection-content .objectPage_action-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 4px 0 8px 0;
  cursor: default;
}

.entity-perspective-pane-actionsSection-content .objectPage_action-item:last-child {
  border-bottom: none;
  padding-bottom: 4px;
}

.entity-perspective-pane-actionsSection-content .objectPage_action-item:hover {
  background: transparent;
  box-shadow: none;
}

.entity-perspective-pane-actionsSection-content .objectPage_action-tooltip {
  display: none !important;
}

.entity-perspective-pane-actionsSection-showMore {
  font-size: var(--small-font-size);
  color: var(--text-link);
  cursor: pointer;
  padding: 8px 0 4px;
  text-align: center;
}

.entity-perspective-pane-actionsSection-showMore:hover {
  text-decoration: underline;
}

/* Modal-specific overrides */
.entity-perspective-modal-header-bar {
  display: flex;
  justify-content: flex-end;
  padding: 10px 15px;
  border-bottom: 1px solid var(--border-light);
}

.entity-perspective-modal-content {
  padding: 15px 20px;
  overflow-y: auto;
  max-height: 70vh;
}

/* ============================================
   Merged Event Notification
   ============================================ */
.merged-event-notification-overlay {
  position: fixed;
  top: 0;
  left: var(--page-nav-width);
  width: calc(100% - var(--page-nav-width));
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--page-main-section-background);
  z-index: 1000;
}

.merged-event-notification {
  text-align: center;
  padding: 40px 50px;
  max-width: 500px;
}

.merged-event-notification-icon {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.merged-event-notification-title {
  font-size: var(--large-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.merged-event-notification-text {
  font-size: var(--normal-font-size);
  font-weight: var(--normal-font-weight);
  color: var(--text-secondary);
  margin: 0 0 20px 0;
}

.merged-event-notification-target {
  margin: 0 0 25px 0;
}

.merged-event-notification-link {
  font-size: var(--normal-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-link);
  text-decoration: none;
}

.merged-event-notification-link:hover {
  text-decoration: underline;
}

.merged-event-notification-btn {
  font-size: var(--small-font-size);
  font-weight: var(--normal-font-weight);
  background: var(--text-primary);
  color: var(--bg-primary);
  border: none;
  padding: 10px 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.merged-event-notification-btn:hover {
  opacity: 0.85;
}

/* ============================================
   ENTITY QUERY VISUAL GRAPH INTERFACE
   ============================================ */

/* Canvas with grid background */
#entityquery-canvas {
  background: var(--bg-primary);
}

#entityquery-canvas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 20px,
      var(--border-faint) 20px,
      var(--border-faint) 21px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 20px,
      var(--border-faint) 20px,
      var(--border-faint) 21px
    );
  pointer-events: none;
  z-index: 0;
}

#entityquery-panes-container {
  z-index: 1;
}

#entityquery-edges-svg {
  z-index: 0;
}

/* Entity Panes */
.entityquery-pane {
  position: absolute;
  min-width: 180px;
  max-width: 280px;
  background: var(--card-bg);
  border: 2px solid var(--border-medium);
  border-radius: 8px;
  cursor: move;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: border-color 0.15s, box-shadow 0.15s;
  z-index: 1;
}

.entityquery-pane:hover {
  border-color: var(--border-strong);
}

.entityquery-pane-selected {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.entityquery-pane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-hover);
  border-bottom: 1px solid var(--border-light);
  border-radius: 6px 6px 0 0;
  cursor: pointer;
}

.entityquery-pane-role {
  font-size: var(--small-font-size);
  font-weight: var(--semibold-font-weight);
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: capitalize;
}

.entityquery-pane-role.anchor {
  background: #4CAF50;
  color: white;
}

.entityquery-pane-role.result {
  background: #2196F3;
  color: white;
}

.entityquery-pane-role.intermediate {
  background: #FF9800;
  color: white;
}

.entityquery-pane-id {
  font-size: var(--small-font-size);
  font-weight: var(--semibold-font-weight);
  color: var(--text-primary);
}

.entityquery-pane-delete {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
  border-radius: 3px;
  transition: all 0.15s;
}

.entityquery-pane-delete:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

.entityquery-pane-content {
  padding: 10px;
  max-height: 150px;
  overflow-y: auto;
}

.entityquery-pane-content .feedEvents-entityRow {
  margin-bottom: 4px;
}

.entityquery-pane-content .entityquery-type-pill {
  margin: 2px;
}

/* Empty state for panes */
.entityquery-pane-empty {
  font-size: var(--small-font-size);
  color: var(--text-muted);
  font-style: italic;
  padding: 5px 0;
}

/* Edge Lines */
.entityquery-edge-line {
  stroke: var(--text-secondary);
  stroke-width: 2;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
  transition: stroke 0.15s, stroke-width 0.15s;
}

.entityquery-edge-line:hover {
  stroke: #3b82f6;
  stroke-width: 3;
}

.entityquery-edge-hitbox {
  stroke: transparent;
  stroke-width: 15;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
}

/* Edge label */
.entityquery-edge-label {
  font-size: var(--micro-font-size);
  fill: var(--text-secondary);
  pointer-events: none;
  text-anchor: middle;
}

/* Modal Overlay */
.entityquery-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal Container */
.entityquery-modal {
  background: var(--card-bg);
  border-radius: 8px;
  width: 500px;
  max-width: 90vw;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.entityquery-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-light);
  font-weight: var(--semibold-font-weight);
  font-size: var(--normal-font-size);
}

.entityquery-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0 5px;
  line-height: 1;
}

.entityquery-modal-close:hover {
  color: var(--text-primary);
}

.entityquery-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.entityquery-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid var(--border-light);
}

/* Role Selector in Entity Modal */
.entityquery-role-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.entityquery-role-option {
  flex: 1;
  padding: 10px;
  text-align: center;
  border: 1px solid var(--border-medium);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: var(--small-font-size);
}

.entityquery-role-option:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.entityquery-role-option.selected {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

/* Mode Toggle in Entity Modal */
.entityquery-mode-toggle {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-light);
}

.entityquery-mode-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--small-font-size);
}

/* Entity List in Modal */
.entityquery-entity-list {
  margin-bottom: 15px;
}

.entityquery-add-entity-modal-btn {
  padding: 5px 10px;
  background: var(--bg-hover);
  border: 1px dashed var(--border-medium);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  transition: all 0.15s;
}

.entityquery-add-entity-modal-btn:hover {
  background: var(--bg-active);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Type Pills Container in Modal */
.entityquery-type-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Edge Modal Specific Styles */
.entityquery-edge-modal {
  width: 550px;
}

.entityquery-edge-clause {
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 10px;
}

.entityquery-edge-clause-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-faint);
}

.entityquery-edge-clause-type {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--small-font-size);
}

.entityquery-edge-conditions {
  margin-bottom: 8px;
}

.entityquery-edge-condition {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: var(--bg-primary);
  border-radius: 4px;
  font-size: var(--small-font-size);
}

.entityquery-edge-condition-delete {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
}

.entityquery-edge-condition-delete:hover {
  color: var(--text-primary);
}

.entityquery-edge-clause-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-faint);
}

.entityquery-add-condition-btn,
.entityquery-delete-clause-btn {
  padding: 3px 8px;
  background: var(--bg-hover);
  border: none;
  border-radius: 3px;
  font-size: var(--small-font-size);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}

.entityquery-add-condition-btn:hover,
.entityquery-delete-clause-btn:hover {
  background: var(--bg-active);
  color: var(--text-primary);
}

.entityquery-add-clause-btn {
  padding: 6px 12px;
  background: var(--bg-hover);
  border: 1px dashed var(--border-medium);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--small-font-size);
  color: var(--text-secondary);
  width: 100%;
  margin-top: 5px;
  transition: all 0.15s;
}

.entityquery-add-clause-btn:hover {
  background: var(--bg-active);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* Main Logic Selector */
.entityquery-main-logic {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--small-font-size);
}

/* Path Visualization Mode */
.entityquery-path-selected {
  background: rgba(74, 144, 226, 0.15) !important;
  border: 2px solid #4a90e2 !important;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.entityquery-path-svg {
  background: var(--bg-primary);
}

.entityquery-path-edge-label {
  pointer-events: none;
  font-weight: 500;
}

.entityquery-path-role-label {
  pointer-events: none;
  font-weight: 600;
  letter-spacing: 0.5px;
}


/* ============= Message Box Panel ============= */

.messagebox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  z-index: 1800;
  transition: background 0.3s ease;
  pointer-events: none;
}

.messagebox-overlay-visible {
  background: rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}

.messagebox-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  height: 100vh;
  background: var(--bg-primary);
  border-left: 1px solid var(--border-light);
  box-shadow: -4px 0 20px var(--shadow-md);
  z-index: 1900;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
}

.messagebox-panel-open {
  right: 0;
}

.messagebox-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.messagebox-header-title {
  font-size: var(--normal-font-size);
  font-weight: var(--bold-font-weight);
  color: var(--text-primary);
}

.messagebox-close {
  font-size: 24px;
  cursor: pointer;
  color: var(--text-tertiary);
  line-height: 1;
}

.messagebox-close:hover {
  color: var(--text-primary);
}

.messagebox-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.messagebox-loading,
.messagebox-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--small-font-size);
  padding: 40px 20px;
}

.messagebox-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: var(--small-font-size);
  line-height: 1.45;
  word-wrap: break-word;
}

.messagebox-bubble-user {
  align-self: flex-end;
  background: var(--bg-selected);
  color: var(--text-primary);
  border-bottom-right-radius: 4px;
}

.messagebox-bubble-admin {
  align-self: flex-start;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}

.messagebox-bubble-content {
  white-space: pre-wrap;
}

.messagebox-bubble-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  gap: 8px;
}

.messagebox-bubble-time {
  font-size: var(--micro-font-size);
  color: var(--text-muted);
}

.messagebox-page-link {
  font-size: var(--micro-font-size);
  color: var(--text-muted);
  text-decoration: none;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

.messagebox-page-link:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}

.messagebox-input-area {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.messagebox-attach-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.messagebox-attach-btn:hover { color: var(--text-primary); }

.messagebox-image-preview {
  position: relative;
  padding: 8px 16px 0;
  border-top: 1px solid var(--border-light);
}
.messagebox-image-preview img {
  max-width: 120px;
  max-height: 80px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}
.messagebox-image-preview-remove {
  position: absolute;
  top: 4px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: var(--bg-active);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.messagebox-bubble img.messagebox-bubble-image {
  max-width: 100%;
  max-height: 200px;
  border-radius: 6px;
  margin-top: 6px;
  cursor: pointer;
}

.messagebox-bubble-meta-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg-selected);
  cursor: help;
  flex-shrink: 0;
  position: relative;
}
.messagebox-bubble-meta-dot:hover .messagebox-meta-tooltip {
  display: block;
}
.messagebox-meta-tooltip {
  display: none;
  position: absolute;
  bottom: 22px;
  right: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 10px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-width: 280px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  line-height: 1.4;
}

.messagebox-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: var(--small-font-size);
  font-family: var(--font-family);
  background: var(--bg-secondary);
  color: var(--text-primary);
  outline: none;
  max-height: 100px;
}

.messagebox-input:focus {
  border-color: var(--border-strong);
}

.messagebox-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-selected);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.messagebox-send-btn:hover {
  background: var(--bg-active);
}

.messagebox-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.messagebox-unread-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #e74c3c;
  color: white;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}