/* ============ QGFN front-end styles (RTL & LTR aware) ============ */

:root {
	--qgfn-primary: #1f6f5c;
	--qgfn-primary-soft: #e6f2ef;
	--qgfn-accent: #c98a2b;
	--qgfn-border: #d9e2df;
	--qgfn-text: #20302c;
}

.qgfn-btn {
	background: var(--qgfn-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	cursor: pointer;
	font-size: 14px;
}
.qgfn-btn:hover { opacity: .9; }
.qgfn-loading { color: #777; text-align: center; padding: 24px; }

/* ---------------- Family tree ---------------- */
.qgfn-tree-wrap { border: 1px solid var(--qgfn-border); border-radius: 12px; overflow: hidden; background: #fbfdfc; }
.qgfn-tree-toolbar { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid var(--qgfn-border); background: #fff; flex-wrap: wrap; }
.qgfn-tree-search { flex: 1; min-width: 180px; padding: 8px 12px; border: 1px solid var(--qgfn-border); border-radius: 8px; }
.qgfn-tree-viewport { overflow: hidden; height: 600px; cursor: grab; position: relative; touch-action: none; }
.qgfn-tree-viewport.is-dragging { cursor: grabbing; }
.qgfn-tree-canvas { transform-origin: 50% 0; padding: 32px; width: max-content; margin: 0 auto; transition: transform .05s linear; }

/* Connector-line tree layout. */
.qgfn-tree, .qgfn-tree ul { display: flex; justify-content: center; list-style: none; margin: 0; padding: 0; direction: ltr; }
.qgfn-tree li { display: flex; flex-direction: column; align-items: center; padding: 24px 12px 0; position: relative; }
.qgfn-tree li::before {
	content: ''; position: absolute; top: 0; height: 24px; width: 2px; background: var(--qgfn-border); left: 50%;
}
.qgfn-tree > li::before { display: none; }
.qgfn-tree ul { padding-top: 24px; position: relative; }
.qgfn-tree ul::before {
	content: ''; position: absolute; top: 0; height: 24px; width: 2px; background: var(--qgfn-border); left: 50%;
}
.qgfn-tree li:not(:only-child)::after {
	content: ''; position: absolute; top: 0; height: 2px; background: var(--qgfn-border);
}
.qgfn-tree li:first-child:not(:only-child)::after { left: 50%; right: 0; }
.qgfn-tree li:last-child:not(:only-child)::after { right: 50%; left: 0; }
.qgfn-tree li:not(:first-child):not(:last-child):not(:only-child)::after { left: 0; right: 0; }
.qgfn-hidden { display: none !important; }

.qgfn-couple { display: flex; align-items: center; gap: 8px; position: relative; direction: inherit; }
.qgfn-heart { color: #c0392b; }
.qgfn-toggle {
	position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%);
	width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--qgfn-border);
	background: #fff; cursor: pointer; line-height: 1; z-index: 2;
}

.qgfn-node-card {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	background: #fff; border: 2px solid var(--qgfn-border); border-radius: 12px;
	padding: 12px; width: 140px; text-align: center;
}
.qgfn-node-card.is-male { border-color: #7fb3d5; }
.qgfn-node-card.is-female { border-color: #d5a6bd; }
.qgfn-node-card.is-deceased { opacity: .65; }
.qgfn-node-card.is-hit { border-color: var(--qgfn-accent); box-shadow: 0 0 0 3px rgba(201, 138, 43, .35); }
.qgfn-node-photo {
	width: 56px; height: 56px; border-radius: 50%; background: var(--qgfn-primary-soft) center/cover no-repeat;
	display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--qgfn-primary); font-weight: 700;
}
.qgfn-node-name { font-weight: 700; font-size: 14px; color: var(--qgfn-text); text-decoration: none; }
.qgfn-node-loc { font-size: 12px; color: #6b7f7a; }
.qgfn-node-deceased { font-size: 11px; color: #a33; }

/* ---------------- Directory ---------------- */
.qgfn-dir-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.qgfn-dir-filters input, .qgfn-dir-filters select { padding: 8px 12px; border: 1px solid var(--qgfn-border); border-radius: 8px; flex: 1; min-width: 140px; }
.qgfn-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.qgfn-dir-card {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	background: #fff; border: 1px solid var(--qgfn-border); border-radius: 12px;
	padding: 16px; text-decoration: none; color: var(--qgfn-text); text-align: center;
	transition: box-shadow .15s ease;
}
.qgfn-dir-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.qgfn-dir-card span:last-child { font-size: 12px; color: #6b7f7a; }

/* ---------------- Relationship calculator ---------------- */
.qgfn-rel-calc { background: var(--qgfn-primary-soft); border-radius: 12px; padding: 20px; }
.qgfn-rel-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.qgfn-rel-form label { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; font-size: 14px; }
.qgfn-rel-form select { padding: 8px 12px; border: 1px solid var(--qgfn-border); border-radius: 8px; }
.qgfn-rel-result { margin-top: 16px; font-size: 16px; }

/* ---------------- Stats ---------------- */
.qgfn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.qgfn-stat {
	background: #fff; border: 1px solid var(--qgfn-border); border-radius: 12px;
	padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 4px;
}
.qgfn-stat-num { font-size: 28px; font-weight: 800; color: var(--qgfn-primary); }
.qgfn-stat-label { font-size: 13px; color: #6b7f7a; }

/* ---------------- Profile table ---------------- */
.qgfn-profile-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.qgfn-profile-table th, .qgfn-profile-table td { padding: 10px 14px; border-bottom: 1px solid var(--qgfn-border); text-align: start; }
.qgfn-profile-table th { width: 35%; color: var(--qgfn-primary); font-weight: 700; }

@media (max-width: 600px) {
	.qgfn-tree-viewport { height: 420px; }
	.qgfn-node-card { width: 110px; padding: 8px; }
}

/* ---------------- Forms & notices ---------------- */
.qgfn-form { background: #fff; border: 1px solid var(--qgfn-border); border-radius: 12px; padding: 20px; }
.qgfn-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.qgfn-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.qgfn-form input, .qgfn-form select, .qgfn-form textarea { padding: 8px 12px; border: 1px solid var(--qgfn-border); border-radius: 8px; }
.qgfn-form-full { margin-top: 12px; display: block; }
.qgfn-form .qgfn-btn { margin-top: 16px; }
.qgfn-notice { background: var(--qgfn-primary-soft); border-radius: 10px; padding: 14px 18px; margin: 12px 0; }
.qgfn-notice-success { background: #e7f6e7; }
.qgfn-notice-error { background: #fdecea; }

/* ---------------- Messenger ---------------- */
.qgfn-messenger { display: grid; grid-template-columns: 260px 1fr; gap: 0; border: 1px solid var(--qgfn-border); border-radius: 12px; overflow: hidden; min-height: 480px; background: #fff; }
.qgfn-msg-side { border-inline-end: 1px solid var(--qgfn-border); padding: 12px; overflow-y: auto; }
.qgfn-msg-side h4 { margin: 8px 0; font-size: 13px; color: #6b7f7a; }
.qgfn-msg-contact { display: block; width: 100%; text-align: start; background: none; border: none; border-radius: 8px; padding: 10px 12px; cursor: pointer; font-size: 14px; }
.qgfn-msg-contact:hover, .qgfn-msg-contact.is-active { background: var(--qgfn-primary-soft); }
.qgfn-badge { background: var(--qgfn-accent); color: #fff; border-radius: 10px; padding: 1px 7px; font-size: 11px; }
.qgfn-msg-request { display: flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 13px; flex-wrap: wrap; }
.qgfn-btn-small { padding: 4px 10px; font-size: 12px; }
.qgfn-btn-ghost { background: #eee; color: #333; }
.qgfn-msg-main { display: flex; flex-direction: column; }
.qgfn-msg-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #f7faf9; }
.qgfn-msg { max-width: 70%; padding: 10px 14px; border-radius: 14px; font-size: 14px; position: relative; }
.qgfn-msg time { display: block; font-size: 10px; opacity: .6; margin-top: 4px; }
.qgfn-msg.is-mine { align-self: flex-end; background: var(--qgfn-primary); color: #fff; }
.qgfn-msg.is-theirs { align-self: flex-start; background: #fff; border: 1px solid var(--qgfn-border); }
.qgfn-msg-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--qgfn-border); }
.qgfn-msg-form input { flex: 1; padding: 10px 14px; border: 1px solid var(--qgfn-border); border-radius: 8px; }

/* ---------------- AI ---------------- */
.qgfn-ai { border: 1px solid var(--qgfn-border); border-radius: 12px; padding: 16px; background: #fff; }
.qgfn-ai-log { min-height: 160px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.qgfn-ai-form { display: flex; gap: 8px; }
.qgfn-ai-form input { flex: 1; padding: 10px 14px; border: 1px solid var(--qgfn-border); border-radius: 8px; }

/* ---------------- Archive ---------------- */
.qgfn-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.qgfn-archive-card { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--qgfn-border); border-radius: 12px; padding: 12px; text-decoration: none; color: var(--qgfn-text); }
.qgfn-archive-thumb { display: block; height: 130px; border-radius: 8px; background: var(--qgfn-primary-soft) center/cover no-repeat; }
.qgfn-archive-doc { display: flex; align-items: center; justify-content: center; font-size: 40px; }

/* ---------------- Profile head ---------------- */
.qgfn-profile-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.qgfn-profile-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.qgfn-profile-bio { color: #4a5a55; }

@media (max-width: 700px) {
	.qgfn-messenger { grid-template-columns: 1fr; }
	.qgfn-msg-side { border-inline-end: none; border-bottom: 1px solid var(--qgfn-border); }
}

/* ---------------- D3 tree (Prompt 4) ---------------- */
.qgfn-tree-svg { display: block; touch-action: none; min-height: 600px; }
.qgfn-link { fill: none; stroke: var(--qgfn-border); stroke-width: 2px; }
.qgfn-couple-fo { display: flex; align-items: center; justify-content: center; gap: 8px; }
.qgfn-node foreignObject { overflow: visible; }
.qgfn-node .qgfn-node-card { width: 140px; padding: 8px; cursor: pointer; background: #fff; }
.qgfn-node .qgfn-node-card.is-spouse { opacity: .92; }
.qgfn-node .qgfn-node-card.is-selected { border-color: var(--qgfn-primary); box-shadow: 0 0 0 3px rgba(31, 111, 92, .3); }
.qgfn-node .qgfn-toggle { position: static; display: block; margin: 4px auto 0; transform: none; }
.qgfn-tree-relbar { min-height: 22px; padding: 6px 12px; font-size: 14px; background: var(--qgfn-primary-soft); border-bottom: 1px solid var(--qgfn-border); }
.qgfn-tree-relbar:empty { display: none; }
.qgfn-relatives-title { color: var(--qgfn-primary); margin: 24px 0 4px; }
@media (max-width: 600px) {
	.qgfn-tree-svg { min-height: 420px; }
}

/* ---------------- Messenger extras (Prompt 5) ---------------- */
.qgfn-msg-img { max-width: 220px; border-radius: 10px; display: block; margin-bottom: 4px; }
.qgfn-photo-btn { cursor: pointer; font-size: 20px; align-self: center; }
.qgfn-msg-thread-actions { display: flex; justify-content: flex-end; padding: 6px 12px 0; }
.qgfn-report-btn { position: absolute; inset-inline-end: -22px; top: 4px; background: none; border: none; cursor: pointer; opacity: .35; font-size: 13px; }
.qgfn-report-btn:hover { opacity: 1; color: #a33; }
.qgfn-req-note { display: block; font-size: 12px; color: #6b7f7a; }
[data-qgfn-unread] { display: inline-block; min-width: 8px; }
[data-qgfn-unread].is-active { background: #c0392b; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; margin-inline-start: 4px; }

/* ---------------- AI chips (Prompt 6) ---------------- */
.qgfn-ai-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.qgfn-ai-chip { background: var(--qgfn-primary-soft); border: 1px solid var(--qgfn-border); border-radius: 16px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.qgfn-ai-chip:hover { background: var(--qgfn-primary); color: #fff; }

/* ---------------- Children repeater & tree role badges ---------------- */
.qgfn-children-title { display: block; font-size: 14px; margin-bottom: 6px; font-weight: 600; }
.qgfn-child-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.qgfn-child-row input { flex: 2; }
.qgfn-child-row select { flex: 1; min-width: 110px; }
.qgfn-add-child { margin-top: 2px; }

.qgfn-node .qgfn-node-card { position: relative; overflow: visible; }
.qgfn-role-badge {
	position: absolute; top: -12px; inset-inline-start: -8px;
	font-size: 18px; line-height: 1; background: #fff;
	border: 1px solid var(--qgfn-border); border-radius: 50%;
	width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
	box-shadow: 0 1px 4px rgba(0,0,0,.12); z-index: 2;
}
.qgfn-tree-legend {
	display: flex; flex-wrap: wrap; gap: 12px; padding: 6px 12px;
	font-size: 13px; color: #4a5a55; background: #fff;
	border-bottom: 1px solid var(--qgfn-border);
}

/* ---------------- Schematic (placeholder) members ---------------- */
.qgfn-node-card.is-placeholder {
	border-style: dashed !important;
	background: #fbfbf6;
	opacity: .85;
}
.qgfn-node-card.is-placeholder .qgfn-node-photo { background-color: #f0ede2; color: #a89968; }
.qgfn-ph-tag { display: block; font-size: 10px; color: #b8860b; margin-top: 2px; }
.qgfn-child-photo { cursor: pointer; font-size: 18px; opacity: .5; }

/* ---------------- Clan Network: feed, timeline ---------------- */
.qgfn-feed-card { background: #fff; border: 1px solid var(--qgfn-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.qgfn-feed-card header { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.qgfn-feed-card header a { text-decoration: none; color: var(--qgfn-text); }
.qgfn-feed-meta { display: block; font-size: 12px; color: #6b7f7a; }
.qgfn-feed-card h4 { margin: 4px 0; }
.qgfn-feed-img { max-width: 100%; border-radius: 10px; margin-top: 6px; }
.qgfn-feed-card footer { display: flex; gap: 10px; margin-top: 10px; border-top: 1px solid var(--qgfn-border); padding-top: 8px; }
.qgfn-feed-card footer button { background: none; border: 1px solid var(--qgfn-border); border-radius: 16px; padding: 4px 12px; cursor: pointer; font-size: 13px; }
.qgfn-feed-card footer .qgfn-like.is-liked { background: var(--qgfn-primary-soft); border-color: var(--qgfn-primary); }
.qgfn-comments { margin-top: 8px; }
.qgfn-comment { font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--qgfn-border); }
.qgfn-comment time { color: #999; font-size: 11px; }
.qgfn-comment-form { display: flex; gap: 6px; margin-top: 6px; }
.qgfn-comment-form input { flex: 1; padding: 6px 10px; border: 1px solid var(--qgfn-border); border-radius: 8px; }

.qgfn-timeline { position: relative; padding-inline-start: 24px; border-inline-start: 3px solid var(--qgfn-primary-soft); }
.qgfn-tl-year { font-weight: 800; font-size: 20px; color: var(--qgfn-primary); margin: 18px 0 6px; }
.qgfn-tl-item { background: #fff; border: 1px solid var(--qgfn-border); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; position: relative; }
.qgfn-tl-item::before { content: '●'; position: absolute; inset-inline-start: -33px; color: var(--qgfn-primary); }
.qgfn-tl-type { display: inline-block; background: var(--qgfn-primary-soft); border-radius: 10px; padding: 1px 10px; font-size: 12px; margin-inline-end: 8px; }
.qgfn-tl-item time { display: block; font-size: 12px; color: #999; }
.qgfn-ach-type { color: var(--qgfn-accent); font-size: 13px; }
.qgfn-hof .qgfn-dir-card { border-color: var(--qgfn-accent); }

/* ---------------- Family editor ---------------- */
.qgfn-fe-row { background: #fff; border: 1px solid var(--qgfn-border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.qgfn-fe-row summary { cursor: pointer; display: flex; gap: 10px; align-items: center; }
.qgfn-check { flex-direction: row !important; align-items: center; gap: 8px !important; }

/* ---------------- Self-edit extras ---------------- */
.qgfn-current-photo { display: inline-block; width: 44px; height: 44px; border-radius: 50%; background: var(--qgfn-primary-soft) center/cover no-repeat; vertical-align: middle; margin-inline-end: 8px; border: 2px solid var(--qgfn-border); }
.qgfn-delete-form { margin-top: 10px; text-align: end; }
.qgfn-btn-danger { background: #b3261e; color: #fff; }

/* ---------------- Registration-target selector ---------------- */
.qgfn-reg-target { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px dashed var(--qgfn-border); }
.qgfn-reg-target-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.qgfn-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--qgfn-border); border-radius: 18px; padding: 6px 14px; cursor: pointer; font-size: 14px; flex-direction: row !important; }
.qgfn-pill:has(input:checked) { background: var(--qgfn-primary-soft); border-color: var(--qgfn-primary); font-weight: 700; }
.qgfn-reg-other, .qgfn-reg-yourname { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; max-width: 380px; }
.qgfn-head-note { margin-top: 10px; }

/* ---------------- Virtual clan root (forest) ---------------- */
.qgfn-node-card.is-clan {
	background: var(--qgfn-primary) !important;
	color: #fff; border-color: var(--qgfn-primary-dark) !important;
	cursor: default; min-width: 160px;
}
.qgfn-node-card.is-clan .qgfn-node-name { color: #fff; font-size: 15px; }

/* ---- Spouse cards: compact + in-clan guide marker ---- */
.qgfn-node-card.is-spouse { opacity: .93; }
.qgfn-clan-link {
	display: block; margin: 4px auto 0; border: 0; cursor: pointer;
	background: rgba(37, 99, 235, .12); color: var(--qgfn-primary, #2563eb);
	border-radius: 999px; padding: 2px 9px; font-size: 10px; line-height: 1.6;
	font-family: inherit;
}
.qgfn-clan-link:hover { background: rgba(37, 99, 235, .25); }
html[data-theme="dark"] .qgfn-clan-link { background: rgba(96, 165, 250, .18); color: #93c5fd; }

/* ---- Patrilineal layout: spouse as a compact square ---- */
.qgfn-node .qgfn-node-card.is-spouse {
	width: 92px; padding: 6px 4px; font-size: 11px;
}
.qgfn-node-card.is-spouse .qgfn-node-photo {
	width: 30px; height: 30px; line-height: 30px; font-size: 13px;
}
.qgfn-node-card.is-spouse .qgfn-node-name { font-size: 11px; }
.qgfn-node-card.is-spouse .qgfn-node-loc { display: none; }