/* Fhellow: the export menu, its failure line, and the print of one answer.
 * The button borrows LibreChat's hover-button classes (fhellow-export.js).
 * Loaded by a <link> that build_tone_overlay.py injects into index.html. */

.fh-export-btn {
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
}

.fh-export-menu {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
  padding: 0.25rem;
  font-family: var(--fh-sans, sans-serif);
  font-size: 0.875rem;
  color: var(--text-primary, #1f1f1f);
  background: var(--surface-primary, #ffffff);
  border: 1px solid var(--border-medium, #e3e3e3);
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(20, 17, 13, 0.16);
}

.fh-export-item {
  padding: 0.45rem 0.75rem;
  text-align: left;
  color: inherit;
  background: none;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}

.fh-export-item:hover:not(:disabled),
.fh-export-item:focus-visible {
  background: var(--surface-hover, #f0f0f0);
  outline: none;
}

.fh-export-item:disabled {
  color: var(--text-secondary, #6b6b6b);
  cursor: progress;
}

.fh-export-line {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary, #6b6b6b);
}

/* Print of one answer. Scoped by :has so an ordinary print is untouched:
 * everything that neither holds nor sits inside the marked answer goes,
 * and the answer's ancestors let go of their heights, scrolling and columns. */
@media print {
  html:has(.fh-print-only) {
    height: auto !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  body:has(.fh-print-only) *:not(:has(.fh-print-only)):not(.fh-print-only):not(.fh-print-only *) {
    display: none !important;
  }

  body:has(.fh-print-only),
  body:has(.fh-print-only) *:has(.fh-print-only) {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
  }

  .fh-print-only {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .fh-print-only,
  .fh-print-only * {
    color: #111111 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* The avatar column; the answer column takes the full width instead. */
  .fh-print-only > :not(.agent-turn) {
    display: none !important;
  }

  .fh-print-only .agent-turn {
    width: 100% !important;
    max-width: none !important;
  }

  /* Controls, not content: the action row (bar and sibling switch), the progress line, this menu. */
  .fh-print-only .hover-button,
  .fh-print-only .fh-progress,
  .fh-print-only .fh-review-draft,
  .fh-print-only .fh-export-line,
  .fh-print-only :has(> * > [data-testid="copy-response-button"]),
  .fh-export-menu {
    display: none !important;
  }

  /* A source's button becomes its address, so the printed list still says where. */
  .fh-print-only .fh-source-btn {
    display: inline !important;
    margin-left: 0.25rem !important;
    padding: 0 !important;
    border: 0 !important;
    font-weight: normal !important;
    /* Beats .dark .fh-source-btn and the tone sheet's nowrap, so addresses print black and wrap. */
    color: #111111 !important;
    white-space: normal !important;
    word-break: break-all;
  }

  .fh-print-only .fh-source-btn > * {
    display: none !important;
  }

  .fh-print-only .fh-source-btn::after {
    content: attr(href);
  }
}