/* The AI helper's views: "Ask about your family", research leads, interview questions and
   caption ideas (js/historian.js, js/ai.js). They use the Family History theme variables
   (--fh-*, set on .fh) and fall back to a warm paper look without them. */

.fh-ask, .fh-research, .fh-screen, .fh-interview, .fh-captions {
  --_paper: var(--fh-paper, #fbf7ef);
  --_ink: var(--fh-ink, #2b2620);
  --_muted: var(--fh-muted, #7a6e60);
  --_accent: var(--fh-accent, #9a5b2e);
  --_card: var(--fh-card, #ffffff);
  --_serif: var(--fh-serif, Georgia, "Iowan Old Style", "Times New Roman", serif);
  --_line: color-mix(in srgb, var(--_ink) 14%, transparent);
  --_soft: color-mix(in srgb, var(--_accent) 12%, var(--_card));
  /* words on the accent color: white, and dark in dark mode (white on the light accent was 2.2:1) */
  --_on-accent: #fff;
  /* accent-colored words: nearer the ink, so small text keeps 4.5:1 on paper, cards and --_soft */
  --_accent-text: color-mix(in srgb, var(--_accent) 70%, var(--_ink));
  --_by-ai: color-mix(in srgb, var(--_muted) 80%, var(--_ink));
}

@media (prefers-color-scheme: dark) {
  .fh-ask, .fh-research, .fh-screen, .fh-interview, .fh-captions { --_on-accent: var(--fh-accent-fg, #17130e); }
}

/* ---------------------------------------------------------------- full screen */

.ai-view.fh-screen { background: var(--_paper); color: var(--_ink); z-index: 65; display: flex; flex-direction: column; }
.fh-top { display: flex; align-items: center; gap: 10px; padding: calc(var(--safe-t, 0px) + 10px) 12px 10px; border-bottom: 1px solid var(--_line); background: var(--_paper); }
.fh-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--_card); color: var(--_ink); display: grid; place-items: center; flex: none; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.fh-close svg { width: 20px; height: 20px; }
.fh-top .fh-title { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
.fh-top .fh-title b { font-family: var(--_serif); font-size: 18px; font-weight: 600; }
.fh-top .fh-title span { font-size: 13px; color: var(--_muted); }
.fh-screen-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }

/* ---------------------------------------------------------------- shared bits */

.fh-section { font-family: var(--_serif); font-size: 17px; font-weight: 600; margin: 18px 0 8px; }
.fh-hint, .fh-note, .fh-status { color: var(--_muted); font-size: 14px; line-height: 1.45; margin: 6px 0; }
.fh-status { min-height: 1.45em; }
.fh-link { border: 0; background: none; color: var(--_accent-text); font-weight: 600; padding: 12px 2px; font-size: 14px; }
.fh-btn { display: block; width: 100%; border: 0; border-radius: 14px; padding: 13px 16px; background: var(--_accent); color: var(--_on-accent); font-weight: 700; font-size: 15px; margin: 8px 0; }
.fh-btn.secondary { background: var(--_soft); color: var(--_accent-text); }
.fh-btn:disabled { opacity: .55; }
.fh-chip { border: 1px solid var(--_line); background: var(--_card); color: var(--_ink); border-radius: 999px; padding: 8px 13px; font-size: 14px; text-align: left; line-height: 1.3; }
.fh-chip[aria-pressed="true"] { background: var(--_accent); border-color: var(--_accent); color: var(--_on-accent); }
.fh-field { display: block; margin: 10px 0 4px; }
.fh-field span { display: block; font-size: 13px; font-weight: 600; color: var(--_muted); margin-bottom: 6px; }
.fh-field input, .fh-interview input { width: 100%; box-sizing: border-box; border: 1px solid var(--_line); border-radius: 12px; padding: 11px 13px; background: var(--_card); color: var(--_ink); font: inherit; font-size: 16px; }   /* 16px: iPhone does not zoom in */
.fh-off { background: var(--_card); border-radius: 16px; padding: 16px; color: var(--_ink); }
.fh-off h3 { font-family: var(--_serif); margin: 0 0 6px; font-size: 17px; }
.fh-off p { margin: 0; color: var(--_muted); font-size: 14px; }

.fh-ask .rich, .fh-research .rich { line-height: 1.5; }
.fh-ask .rich h3, .fh-research .rich h3 { font-family: var(--_serif); font-size: 16px; font-weight: 600; margin: 12px 0 4px; }
.fh-ask .rich p, .fh-research .rich p { margin: 0 0 8px; }
.fh-ask .rich p:last-child { margin-bottom: 0; }
.fh-ask .rich a, .fh-research .rich a, .fh-sources a, .fh-lead-link { color: var(--_accent-text); word-break: break-word; }

/* who wrote it: anything from the AI helper is labelled where it's shown */
.fh-by-ai { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--_by-ai); margin: 0 0 4px; }
.fh-by-ai::before { content: "✨ "; }
.fh-lead-top .fh-by-ai { display: inline; margin: 0 0 0 auto; }

/* ---------------------------------------------------------------- ask about your family */

.fh-ask { color: var(--_ink); display: flex; flex-direction: column; gap: 10px; }
.fh-ask.full { flex: 1; min-height: 0; gap: 0; }
.fh-thread { display: flex; flex-direction: column; gap: 10px; }
.fh-ask.full .fh-thread { flex: 1; overflow-y: auto; padding: 14px 14px 8px; }
.fh-more { align-self: center; }
.fh-more[hidden] { display: none; }
.fh-msg { max-width: 92%; border-radius: 18px; padding: 11px 14px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.fh-msg p { margin: 0; }
.fh-msg.user { align-self: flex-end; background: var(--_accent); color: var(--_on-accent); border-bottom-right-radius: 5px; }
.fh-msg.assistant { align-self: flex-start; background: var(--_card); color: var(--_ink); border: 1px solid var(--_line); border-bottom-left-radius: 5px; }
.fh-msg.thinking .fh-wait { color: var(--_muted); font-style: italic; }
.fh-msg.thinking .fh-wait::after { content: "…"; animation: fh-blink 1s infinite; }
@keyframes fh-blink { 50% { opacity: .2; } }

.fh-cite { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; vertical-align: baseline; margin: 0 2px; padding: 1px 8px 1px 6px; border: 1px solid color-mix(in srgb, var(--_accent) 35%, transparent); border-radius: 999px; background: var(--_soft); color: var(--_accent-text); font-size: 12.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.fh-cite-ico { font-size: 11px; }
.fh-cite-txt { overflow: hidden; text-overflow: ellipsis; }
.fh-cite:active { transform: scale(.97); }

.fh-follow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 2px 0 4px; }
.fh-follow-label { width: 100%; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--_muted); }
.fh-starters { display: flex; flex-wrap: wrap; gap: 8px; }
.fh-starters[hidden] { display: none; }
.fh-ask.full .fh-starters { padding: 0 14px 10px; }

.fh-bar { display: flex; gap: 8px; align-items: flex-end; }
.fh-ask.full .fh-bar { padding: 10px 12px 6px; border-top: 1px solid var(--_line); background: var(--_paper); }
.fh-bar textarea { flex: 1; min-width: 0; resize: none; border-radius: 20px; border: 1px solid var(--_line); background: var(--_card); color: var(--_ink); padding: 10px 14px; font: inherit; font-size: 16px; line-height: 1.35; }
.fh-bar textarea::placeholder { color: var(--_muted); }
.fh-send { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--_accent); color: var(--_on-accent); display: grid; place-items: center; flex: none; }
.fh-send svg { width: 20px; height: 20px; }
.fh-send:disabled { opacity: .45; }
.fh-ask-foot { display: flex; justify-content: space-between; gap: 12px; }
.fh-ask.full .fh-ask-foot { padding: 0 14px calc(var(--safe-b, 0px) + 6px); background: var(--_paper); }
.fh-ask-foot [hidden] { display: none; }

/* ---------------------------------------------------------------- research */

.fh-research { color: var(--_ink); }
.fh-screen .fh-research { padding: 8px 16px calc(var(--safe-b, 0px) + 30px); }
.fh-live { font-size: 15px; }
.fh-entry { background: var(--_card); border: 1px solid var(--_line); border-radius: 16px; padding: 12px 14px; margin: 10px 0; }
.fh-entry summary { cursor: pointer; font-size: 14.5px; line-height: 1.4; }
.fh-entry[open] summary { margin-bottom: 10px; }
.fh-count { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--_soft); color: var(--_accent-text); font-size: 12px; font-weight: 700; }
.fh-leads { display: grid; gap: 10px; margin-bottom: 12px; }
.fh-lead { border: 1px solid var(--_line); border-left: 4px solid var(--_muted); border-radius: 12px; padding: 11px 12px; background: var(--_paper); }
.fh-lead.strong { border-left-color: #3f8a4f; }
.fh-lead.possible { border-left-color: var(--_accent); }
.fh-lead.weak { border-left-color: var(--_muted); }
.fh-lead[data-status="confirmed"] { background: color-mix(in srgb, #357a44 10%, var(--_card)); }
.fh-lead[data-status="not"] { opacity: .6; }
.fh-lead[data-status="not"] .fh-lead-name { text-decoration: line-through; }
.fh-lead-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.fh-badge { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: var(--_soft); color: var(--_accent-text); }
.fh-badge.strong { background: color-mix(in srgb, #3f8a4f 16%, var(--_card)); color: #2f6b3c; }
@media (prefers-color-scheme: dark) { .fh-badge.strong { color: #9ad7a6; } }   /* dark green on dark was 2.2:1 */
.fh-badge.weak { background: color-mix(in srgb, var(--_muted) 16%, var(--_card)); color: var(--_by-ai); }   /* muted on its tint was 4:1 */
.fh-lead-type { font-size: 13.5px; color: var(--_muted); }
.fh-lead-name { font-family: var(--_serif); font-size: 17px; font-weight: 600; }
.fh-lead-when { font-size: 14px; color: var(--_muted); margin-top: 2px; }
.fh-lead-why { font-size: 14.5px; line-height: 1.45; margin: 6px 0; }
.fh-lead-link { display: inline-block; font-weight: 600; font-size: 14px; margin: 2px 0; }
.fh-lead-src { font-size: 14px; color: var(--_muted); }
.fh-lead-warn { font-size: 12.5px; color: var(--_muted); font-style: italic; }
.fh-lead-actions { display: flex; gap: 8px; margin-top: 10px; }
.fh-mark { flex: 1; min-height: 44px; border: 1px solid var(--_line); border-radius: 10px; padding: 9px 8px; background: var(--_card); color: var(--_ink); font-size: 14px; font-weight: 600; }
.fh-mark.yes[aria-pressed="true"] { background: #357a44; border-color: #357a44; color: #fff; }
.fh-mark.no[aria-pressed="true"] { background: var(--_muted); border-color: var(--_muted); color: var(--_on-accent); }
.fh-sources ol { padding-left: 20px; font-size: 13.5px; }
.fh-sources li { margin: 3px 0; }

/* ---------------------------------------------------------------- interview questions (in a sheet or a page) */

.fh-interview { margin: 12px 0; color: inherit; }
.fh-interview[hidden] { display: none; }
.fh-interview .fh-chip { background: var(--fh-card, var(--chip, #f2f2f5)); color: inherit; }
.fh-interview .fh-chip[aria-pressed="true"] { background: var(--_accent); color: var(--_on-accent); }
.fh-interview input { margin: 8px 0 2px; background: var(--fh-card, var(--chip, #f2f2f5)); color: inherit; }
.fh-themes { display: flex; flex-wrap: wrap; gap: 6px; }
.fh-questions ol { padding-left: 22px; margin: 8px 0; }
.fh-questions li { margin: 6px 0; line-height: 1.45; font-size: 15px; }
.fh-q { border: 0; background: none; color: inherit; text-align: left; padding: 0; font: inherit; vertical-align: top; }
.fh-q:active { color: var(--_accent); }

/* ---------------------------------------------------------------- caption ideas (in the photo viewer) */

.fh-captions[hidden] { display: none; }
.fh-caption-btn { border: 0; border-radius: 999px; padding: 8px 14px; background: rgba(127,127,127,.22); color: inherit; font-weight: 600; font-size: 14px; }
.fh-caption-btn:disabled { opacity: .6; }
.fh-caption-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.fh-caption-chips:empty { display: none; }
.fh-captions .fh-by-ai { color: inherit; opacity: .85; margin: 0; }
.fh-caption-chip { border: 1px solid rgba(127,127,127,.35); border-radius: 12px; padding: 9px 12px; background: rgba(127,127,127,.12); color: inherit; text-align: left; font-size: 15px; }