family-tree:18233 Loaded hidden person branches from storage:
Array(2) family-tree:18242 Reset father branch toggle state to false on page
load (mother card will be visible) family-tree:19100 DOM Content Loaded -
Initializing tree... family-tree:2801 Fetching tree data from:
http://127.0.0.1:8000/family-tree/data/tree family-tree:2815 Tree data loaded:
Array(8) family-tree:2816 Number of people: 8 family-tree:18224 Loaded hidden
ancestors by person from storage: Array(2) family-tree:18233 Loaded hidden
person branches from storage: Array(2) family-tree:18242 Reset father branch
toggle state to false on page load (mother card will be visible)
family-tree:2840 saaim mother (ID: 244) has siblings: Array(1) family-tree:2840
Muhammad Saaim (ID: 242) has siblings: Array(2) family-tree:2852 Clearing
previous tree state... family-tree:2864 Setting up tree... family-tree:3040
Excluded ancestor IDs from main tree: Array(7) family-tree:3073 dataMap size
after filtering: 8 family-tree:3074 Hidden ancestor IDs: Array(0)
family-tree:3078 Main person parents (should be in dataMap): Array(7)
family-tree:3111 Verified: Main person parent 243 is in dataMap family-tree:3111
Verified: Main person parent 244 is in dataMap family-tree:3166 Parent sibling
IDs to exclude from tree hierarchy: Array(1) family-tree:3395 Root nodes: 1
family-tree:3396 Root: Object family-tree:3397 Data map size: 8 family-tree:3521
Tree descendants: 1 family-tree:3522 Unique IDs: Array(1) family-tree:2866
Building tree... family-tree:3660 Main person identified by user_id: 242
Muhammad Saaim family-tree:3689 Main person ID: 242 family-tree:3693 Root
persons: Array(4) family-tree:3699 Selected main person: Muhammad Saaim
family-tree:3791 Looking for sibling connections... family-tree:3797 Node 242
(Muhammad Saaim): siblings = Array(2) depth = 0 parents = Array(2)
family-tree:3808 Checking sibling 243: NOT FOUND in nodeMap family-tree:3808
Checking sibling 244: NOT FOUND in nodeMap family-tree:3932 Total sibling links
found: 0 family-tree:4154 Unique nodes to render: 1 family-tree:4155 Excluded
parent IDs from main tree: Array(2) family-tree:4461 Checking node for parent
cards: Muhammad Saaim ID: 242 mainPersonId: 242 isMainPerson: true
family-tree:4476 ✓ Adding parent cards above: Muhammad Saaim ID: 242
family-tree:4736 Adding view button on father card - motherHasSiblings: true
fatherBranchToggled: false family-tree:4807 Total father partners found: 0
Array(0) family-tree:5097 Skipping father siblings - father branch is hidden
because mother has siblings family-tree:13908 Mother card check - mother: saaim
mother shouldShowMother: true fatherBranchToggled: false family-tree:13943 Total
mother partners found: 0 Array(0) shouldShowMotherBranch: true family-tree:14332
Adding view button on mother card - motherHasSiblings: true fatherBranchToggled:
false family-tree:14379 Mother has siblings - showing mother's branch and hiding
father's branch family-tree:14404 Excluding mother's parent from siblings: saaim
mother's mother (this is a parent, not a sibling) family-tree:14444 Total mother
siblings found: 0 Array(0) family-tree:15644 Checking grandmother's parents:
Object family-tree:15666 Grandmother parent data found: Array(1)
family-tree:15677 Grandmother has parents: true family-tree:16720 ===
PARENT-CHILD LINK DEBUG === family-tree:16721 Main person ID: 242
family-tree:16722 Main person parents: Array(2) family-tree:16726 All children
found: Array(3) family-tree:16779 Filtered children (after removing partners):
Array(3) family-tree:16800 Child node not found in tree: saaim's father ID: 243
(anonymous) @ family-tree:16800Understand this warning family-tree:16800 Child
node not found in tree: saaim mother ID: 244 (anonymous) @
family-tree:16800Understand this warning family-tree:16817 Child nodes with
positions: Array(1) family-tree:16826 Main person node position: 490 0
family-tree:16846 Drawing parent-child links: Object family-tree:16873 Drew
horizontal line from -310 to 310 at Y: -110 family-tree:16904 Drawing vertical
line from parent midpoint ( 0 , -110 ) to child ( 0 , -40 ) family-tree:16970
=== END PARENT-CHILD LINK DEBUG === family-tree:2868 Centering tree...
family-tree:2870 Tree initialization complete family-tree:3040 Excluded ancestor
IDs from main tree: Array(7) family-tree:3073 dataMap size after filtering: 8
family-tree:3074 Hidden ancestor IDs: Array(0) family-tree:3078 Main person
parents (should be in dataMap): Array(7) family-tree:3111 Verified: Main person
parent 243 is in dataMap family-tree:3111 Verified: Main person parent 244 is in
dataMap family-tree:3166 Parent sibling IDs to exclude from tree hierarchy:
Array(1) family-tree:3395 Root nodes: 1 family-tree:3396 Root: Object
family-tree:3397 Data map size: 8 family-tree:3521 Tree descendants: 1
family-tree:3522 Unique IDs: Array(1) family-tree:3660 Main person identified by
user_id: 242 Muhammad Saaim family-tree:3689 Main person ID: 242
family-tree:3693 Root persons: Array(4) family-tree:3699 Selected main person:
Muhammad Saaim family-tree:3791 Looking for sibling connections...
family-tree:3797 Node 242 (Muhammad Saaim): siblings = Array(2) depth = 0
parents = Array(2) family-tree:3808 Checking sibling 243: NOT FOUND in nodeMap
family-tree:3808 Checking sibling 244: NOT FOUND in nodeMap family-tree:3932
Total sibling links found: 0 family-tree:4154 Unique nodes to render: 1
family-tree:4155 Excluded parent IDs from main tree: Array(2) family-tree:4461
Checking node for parent cards: Muhammad Saaim ID: 242 mainPersonId: 242
isMainPerson: true family-tree:4476 ✓ Adding parent cards above: Muhammad Saaim
ID: 242 family-tree:4736 Adding view button on father card - motherHasSiblings:
true fatherBranchToggled: false family-tree:4807 Total father partners found: 0
Array(0) family-tree:5097 Skipping father siblings - father branch is hidden
because mother has siblings family-tree:13908 Mother card check - mother: saaim
mother shouldShowMother: true fatherBranchToggled: false family-tree:13943 Total
mother partners found: 0 Array(0) shouldShowMotherBranch: true family-tree:14332
Adding view button on mother card - motherHasSiblings: true fatherBranchToggled:
false family-tree:14379 Mother has siblings - showing mother's branch and hiding
father's branch family-tree:14404 Excluding mother's parent from siblings: saaim
mother's mother (this is a parent, not a sibling) family-tree:14444 Total mother
siblings found: 0 Array(0) family-tree:15644 Checking grandmother's parents:
Object family-tree:15666 Grandmother parent data found: Array(1)
family-tree:15677 Grandmother has parents: true family-tree:16720 ===
PARENT-CHILD LINK DEBUG === family-tree:16721 Main person ID: 242
family-tree:16722 Main person parents: Array(2) family-tree:16726 All children
found: Array(3) family-tree:16779 Filtered children (after removing partners):
Array(3) family-tree:16800 Child node not found in tree: saaim's father ID: 243
(anonymous) @ family-tree:16800Understand this warning family-tree:16800 Child
node not found in tree: saaim mother ID: 244 (anonymous) @
family-tree:16800Understand this warning family-tree:16817 Child nodes with
positions: Array(1) family-tree:16826 Main person node position: 482.5 0
family-tree:16846 Drawing parent-child links: Object family-tree:16873 Drew
horizontal line from -310 to 310 at Y: -110 family-tree:16904 Drawing vertical
line from parent midpoint ( 0 , -110 ) to child ( 0 , -40 ) family-tree:16970
=== END PARENT-CHILD LINK DEBUG ===

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="SsAmvR4Dw4G6ycU9HtKwdDEy1mt4bZ4tzLEKGoBW">
    <title>Family Tree - Family Tree</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #e8e8e8;
            margin: 0;
            padding: 0;
        }
    </style>
    
    <style>
    body {
        background-color: #e8e8e8;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    }

    /* Hide only specific console output elements, not all content */
    pre[class*="console"],
    div[class*="console-log"],
    div[class*="console-output"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* Top Header Bar */
    .top-header {
        background: white;
        border-bottom: 1px solid #ddd;
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tree-title {
        font-size: 16px;
        font-weight: 500;
        color: #333;
    }

    .header-nav {
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .nav-tab {
        padding: 8px 16px;
        border: none;
        background: none;
        cursor: pointer;
        color: #666;
        font-size: 14px;
        border-bottom: 2px solid transparent;
    }

    .nav-tab.active {
        color: #ff6b35;
        border-bottom-color: #ff6b35;
    }

    /* Second Header Bar */
    .second-header {
        background: white;
        border-bottom: 1px solid #ddd;
        padding: 12px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-info {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: #666;
    }

    .header-controls {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .branch-builder-btn {
        background: #ff6b35;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .search-box {
        padding: 6px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        width: 200px;
        position: relative;
    }

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

    .search-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: 400px;
        overflow-y: auto;
        z-index: 2000;
        margin-top: 4px;
        display: none;
    }

    .search-dropdown.show {
        display: block;
    }

    .search-result-item {
        display: flex;
        align-items: center;
        padding: 10px 12px;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s;
    }

    .search-result-item:hover {
        background: #f5f5f5;
    }

    .search-result-item:last-child {
        border-bottom: none;
    }

    .search-result-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
        flex-shrink: 0;
        overflow: hidden;
    }

    .search-result-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .search-result-avatar i {
        font-size: 20px;
        color: #999;
    }

    .search-result-info {
        flex: 1;
        min-width: 0;
    }

    .search-result-name {
        font-size: 14px;
        font-weight: 500;
        color: #333;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .search-no-results {
        padding: 20px;
        text-align: center;
        color: #999;
        font-size: 14px;
    }

    .checklist-widget {
        background: #f0f0f0;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .progress-bar {
        width: 100px;
        height: 6px;
        background: #ddd;
        border-radius: 3px;
        overflow: hidden;
    }

    .progress-fill {
        height: 100%;
        background: #4caf50;
        width: 25%;
    }

    /* Tree Container */
    #tree-container {
        width: 100%;
        height: calc(100vh - 200px);
        background: #e8e8e8;
        position: relative;
        overflow: auto;
    }

    /* Person Node Styles */
    .person-node {
        cursor: pointer;
    }

    .person-card {
        fill: white;
        stroke-width: 3;
        rx: 8;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }

    .person-node.male .person-card {
        stroke: #add8e6;
        stroke-width: 3;
    }

    .person-node.female .person-card {
        stroke: #ffb6c1;
        stroke-width: 3;
    }

    /* Add Parent Buttons above person cards */
    .add-parent-button {
        cursor: pointer;
    }

    .add-parent-button rect {
        fill: white;
        stroke: #999;
        stroke-width: 2;
        stroke-dasharray: 5, 5;
        rx: 8;
    }

    .add-parent-button:hover rect {
        stroke: #666;
        fill: #f9f9f9;
    }

    .add-parent-line {
        stroke: #999;
        stroke-width: 2;
    }

    .person-icon {
        fill: #ccc;
    }

    .camera-icon {
        fill: #999;
        font-size: 10px;
    }

    .person-name {
        fill: #333;
        font-size: 12px;
        font-weight: 500;
        text-anchor: middle;
    }

    .add-icon {
        fill: #999;
        cursor: pointer;
        font-size: 14px;
    }

    .add-icon:hover {
        fill: #ff6b35;
    }

    .edit-icon {
        fill: #999;
        cursor: pointer;
        font-size: 12px;
    }

    .edit-icon:hover {
        fill: #ff6b35;
    }

    .delete-icon {
        fill: #dc3545;
        cursor: pointer;
        font-size: 12px;
    }

    .delete-icon:hover {
        fill: #c82333;
    }

    .status-dot {
        fill: #8b4513;
    }

    /* Links */
    .link {
        fill: none;
        stroke: #999;
        stroke-width: 2;
    }

    .spouse-link {
        fill: none;
        stroke: #999;
        stroke-width: 2;
    }

    /* Parent sibling card styling */
    .parent-sibling-card {
        cursor: pointer;
    }

    .sibling-link {
        fill: none;
        stroke: #999;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Ensure sibling links are visible and properly rendered */
    .sibling-link path {
        fill: none !important;
        stroke: #999 !important;
        stroke-width: 2 !important;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Left Profile Sidebar */
    .profile-sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        width: 260px;
        height: 100vh;
        background: white;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        z-index: 2000;
        transition: left 0.3s ease;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .profile-sidebar.open {
        left: 0;
        pointer-events: auto;
    }

    .profile-sidebar-header {
        padding: 12px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .profile-sidebar-title {
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin: 0;
    }

    .profile-sidebar-close {
        background: none;
        border: none;
        font-size: 18px;
        cursor: pointer;
        color: #666;
        padding: 0;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .profile-sidebar-close:hover {
        color: #333;
    }

    .profile-sidebar-nav {
        padding: 0 12px 10px 12px;
        border-bottom: 1px solid #e0e0e0;
    }

    .profile-sidebar-nav a {
        color: #d32f2f;
        text-decoration: none;
        font-size: 12px;
    }

    .profile-sidebar-nav a:hover {
        text-decoration: underline;
    }

    .profile-avatar-section {
        padding: 15px 12px;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
    }

    .profile-avatar-wrapper {
        position: relative;
        display: inline-block;
        margin-bottom: 12px;
    }

    .profile-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }

    .profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .profile-avatar-placeholder {
        width: 100%;
        height: 100%;
        background: #d0d0d0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .profile-avatar-camera {
        position: absolute;
        bottom: 6px;
        right: 6px;
        width: 24px;
        height: 24px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .profile-avatar-camera i {
        color: white;
        font-size: 12px;
    }

    .profile-action-buttons {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .profile-action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        border-radius: 8px;
        transition: background 0.2s;
    }

    .profile-action-btn:hover {
        background: #f5f5f5;
    }

    .profile-action-btn-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f0f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }

    .profile-action-btn-label {
        font-size: 10px;
        color: #666;
        margin-top: 3px;
    }

    .profile-section {
        padding: 12px;
        border-bottom: 1px solid #e0e0e0;
    }

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

    .profile-section-title {
        font-size: 11px;
        font-weight: 600;
        color: #333;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .profile-section-action {
        color: #ff6b35;
        font-size: 11px;
        cursor: pointer;
        border: none;
        background: none;
        padding: 0;
    }

    .profile-section-action:hover {
        text-decoration: underline;
    }

    #profile-biography-content {
        font-size: 13px;
        line-height: 1.6;
        color: #333;
        margin-top: 8px;
    }

    #profile-biography-content p {
        margin: 0 0 10px 0;
    }

    #profile-biography-content p:last-child {
        margin-bottom: 0;
    }

    .profile-section-toggle {
        background: none;
        border: none;
        color: #666;
        cursor: pointer;
        padding: 0;
        margin-right: 10px;
    }

    .profile-dna-button {
        margin: 12px;
        padding: 10px;
        background: #f5f5f5;
        border: none;
        border-radius: 8px;
        width: calc(100% - 24px);
        font-size: 12px;
        color: #333;
        cursor: pointer;
        font-weight: 500;
    }

    .profile-dna-button:hover {
        background: #e8e8e8;
    }

    .profile-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1999;
        display: none;
        pointer-events: none;
    }

    .profile-sidebar-overlay.active {
        display: block;
        pointer-events: auto;
    }

    /* Right Sidebar Controls */
    .sidebar-controls {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 10px;
        z-index: 1000;
    }

    .control-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: white;
        border: 1px solid #ddd;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .control-btn:hover {
        background: #f5f5f5;
    }

    .control-btn i {
        font-size: 18px;
        color: #666;
    }

    /* Empty Tree State */
    .empty-tree-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 70vh;
        padding: 40px 20px;
    }

    .empty-tree-wrapper {
        position: relative;
        width: 100%;
        max-width: 600px;
        min-height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .empty-add-card {
        position: absolute;
        background: white;
        border: 2px dashed #999;
        border-radius: 10px;
        padding: 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        width: 140px;
        min-height: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .empty-add-card:hover {
        border-color: #666;
        background: #f9f9f9;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .add-father-empty {
        top: 0;
        left: 0;
        margin-top: -180px;
    }

    .add-mother-empty {
        top: 0;
        right: 0;
        margin-top: -180px;
    }

    .empty-add-icon {
        font-size: 48px;
        font-weight: 300;
        color: #333;
        line-height: 1;
        margin-bottom: 10px;
    }

    .empty-add-label {
        font-size: 14px;
        color: #333;
        font-weight: 500;
    }

    .empty-user-card {
        position: relative;
        z-index: 10;
        margin-top: 20px;
    }

    .empty-user-card .main-person-card {
        background: white;
        border: 3px solid #add8e6;
        border-radius: 12px;
        padding: 20px;
        width: 280px;
        min-height: 120px;
        display: flex;
        align-items: center;
        gap: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: relative;
    }

    .empty-user-card .profile-picture-placeholder {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #e0e0e0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-shrink: 0;
    }

    .empty-user-card .profile-picture-placeholder::before {
        content: "";
        width: 50px;
        height: 50px;
        background: #8b5a9f;
        border-radius: 50%;
        position: absolute;
    }

    .empty-user-card .profile-picture-placeholder::after {
        content: "";
        width: 30px;
        height: 30px;
        background: #8b5a9f;
        border-radius: 0 0 15px 15px;
        position: absolute;
        top: 35px;
    }

    .empty-user-card .camera-icon-overlay {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 24px;
        height: 24px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 12px;
    }

    .empty-user-card .person-name-section {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .empty-user-card .person-name {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0;
        line-height: 1.3;
    }

    .empty-user-card .edit-icon-btn {
        position: absolute;
        bottom: 15px;
        right: 15px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: white;
        border: 1px solid #999;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #999;
        font-size: 14px;
        transition: all 0.2s;
    }

    .empty-user-card .edit-icon-btn:hover {
        border-color: #ff6b35;
        color: #ff6b35;
        background: #fff5f2;
    }

    .empty-user-card .add-child-icon {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: white;
        border: 2px solid #28a745;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #28a745;
        font-size: 20px;
        font-weight: bold;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.2s;
    }

    .empty-user-card .add-child-icon:hover {
        background: #28a745;
        color: white;
        transform: translateX(-50%) scale(1.1);
    }

    /* Branch Builder Modal */
    .branch-builder-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
    }

    .branch-builder-overlay.active {
        display: flex;
    }

    .branch-builder-container {
        position: relative;
        background: #e8e8e8;
        border-radius: 12px;
        padding: 30px 40px 40px 40px;
        width: 90%;
        max-width: 950px;
        max-height: 90vh;
        overflow: auto;
    }

    .branch-builder-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;
    }

    .branch-builder-title {
        font-size: 20px;
        font-weight: 600;
        color: #333;
    }

    .close-branch-builder {
        background: white;
        border: 1px solid #ddd;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 20px;
        color: #666;
        font-weight: bold;
        transition: all 0.2s;
    }

    .close-branch-builder:hover {
        background: #f0f0f0;
    }

    .branch-builder-grid {
        position: relative;
        min-height: 700px;
        width: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* SVG for connecting lines in Branch Builder */
    .branch-builder-lines {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        overflow: visible;
    }

    .branch-builder-lines line {
        stroke: #999;
        stroke-width: 2;
        stroke-linecap: round;
        shape-rendering: crispEdges;
    }

    .center-person-card {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        margin: 0;
        width: 160px;
    }

    .center-person-card .relationship-card {
        width: 160px;
        min-height: 180px;
        padding: 20px 15px;
        margin: -146px auto;
        text-align: center;
    }

    .center-person-card .relationship-label {
        text-align: center;
        word-break: break-word;
    }

    /* Center person silhouette - dark purple matching screenshot */
    .silhouette-icon {
        width: 60px;
        height: 50px;
        margin: 0 auto 15px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .silhouette-icon::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        background: #8b5a9f;
        border-radius: 50%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .silhouette-icon::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 16px;
        background: #8b5a9f;
        border-radius: 10px;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
    }

    .relationship-card {
        background: white;
        border-radius: 10px;
        padding: 15px 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
        border: 3px solid;
        width: 140px;
        min-height: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: absolute;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin: 0;
    }

    .relationship-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .relationship-card.male {
        border-color: #add8e6;
    }

    .relationship-card.female {
        border-color: #ffb6c1;
    }

    .relationship-card.partner {
        border-color: #add8e6;
    }

    .relationship-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        background: transparent;
        line-height: 1;
    }

    /* Silhouette icons for relationship cards - matching tree view exactly */
    .silhouette-male {
        width: 60px;
        height: 50px;
        margin-bottom: 12px;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .silhouette-female,
    .silhouette-partner {
        width: 60px;
        height: 50px;
        margin-bottom: 12px;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Female silhouette - matching tree view style but wider body */
    .silhouette-female::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        background: #d0d0d0;
        border-radius: 50%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .silhouette-female::after {
        content: "";
        position: absolute;
        width: 22px;
        height: 18px;
        background: #d0d0d0;
        border-radius: 10px;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Partner uses same female silhouette */
    .silhouette-partner::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        background: #d0d0d0;
        border-radius: 50%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .silhouette-partner::after {
        content: "";
        position: absolute;
        width: 22px;
        height: 18px;
        background: #d0d0d0;
        border-radius: 10px;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Male silhouette - matching tree view exactly */
    .silhouette-male::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        background: #d0d0d0;
        border-radius: 50%;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .silhouette-male::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 16px;
        background: #d0d0d0;
        border-radius: 10px;
        top: 16px;
        left: 50%;
        transform: translateX(-50%);
    }

    .relationship-label {
        font-weight: 600;
        font-size: 13px;
        color: #333;
        margin-bottom: 4px;
        line-height: 1.3;
    }

    .relationship-subtitle {
        font-size: 10px;
        color: #666;
        margin-top: 4px;
        line-height: 1.2;
    }

    /* Position relationship cards around center - matching screenshot exactly */
    /* Top row: Father (left) and Mother (right) - above center person */
    .add-father {
        left: calc(60% - 170px);
        top: calc(40% - 250px);
        transform: translate(-50%, -50%);
    }

    .add-mother {
        left: calc(60% + 30px);
        top: calc(40% - 250px);
        transform: translate(-50%, -50%);
    }

    /* Left column: Brother (top) and Sister (bottom) */
    .add-brother {
        left: calc(60% - 340px);
        top: calc(50% - 110px);
        transform: translate(-50%, -50%);
    }

    .add-sister {
        left: calc(60% - 340px);
        top: calc(41% + 110px);
        transform: translate(-50%, -50%);
    }

    /* Right side: Partner - aligned with middle */
    .add-partner {
        left: calc(42% + 340px);
        top: calc(57% - 110px);
        transform: translate(-50%, -50%);
    }

    /* Bottom row: Son (left) and Daughter (right) - below center person */
    .add-son {
        left: calc(60% - 170px);
        top: calc(40% + 250px);
        transform: translate(-50%, -50%);
    }

    .add-daughter {
        left: calc(60% + 30px);
        top: calc(40% + 250px);
        transform: translate(-50%, -50%);
    }

    /* Add Person Modal */
    .add-person-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 20000;
        display: none;
        align-items: center;
        justify-content: center;
    }

    .add-person-modal-overlay.active {
        display: flex;
    }

    .add-person-modal {
        background: white;
        border-radius: 8px;
        width: 90%;
        max-width: 750px;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        position: relative;
    }

    .add-person-modal-header {
        padding: 20px 25px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
    }

    .add-person-modal-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }

    .add-person-modal-close {
        background: none;
        border: none;
        font-size: 24px;
        color: #666;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .add-person-modal-body {
        padding: 25px;
    }

    .gender-radio-group {
        display: flex;
        gap: 25px;
        margin-bottom: 25px;
    }

    .gender-radio {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .gender-radio input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: #8b5a9f;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
        color: #333;
        font-weight: 500;
    }

    .form-group input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    .form-group input[list] {
        padding-right: 30px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-color: white;
    }

    .select-wrapper {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .select-wrapper input[type="text"] {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    .select-wrapper input[type="text"]:focus {
        outline: none;
        border-color: #0d6efd;
    }

    .dropdown-arrow-btn {
        width: 32px;
        height: 36px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #666;
        font-size: 12px;
        flex-shrink: 0;
    }

    .dropdown-arrow-btn:hover {
        background: #f5f5f5;
        border-color: #0d6efd;
    }

    .dropdown-arrow-btn:active {
        background: #e9ecef;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 32px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        max-height: 200px;
        overflow-y: auto;
        z-index: 1000;
        display: none;
        margin-top: 2px;
    }

    .dropdown-menu.show {
        display: block;
    }

    .dropdown-item {
        padding: 8px 12px;
        cursor: pointer;
        font-size: 14px;
        color: #333;
    }

    .dropdown-item:hover {
        background: #f0f0f0;
    }

    .dropdown-item.selected {
        background: #e8e8e8;
    }

    .form-group select {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        appearance: none;
        background-color: white;
        cursor: pointer;
    }

    .form-group select:focus {
        outline: none;
        border-color: #0d6efd;
    }

    .birth-date-group {
        display: flex;
        gap: 8px;
        align-items: flex-end;
    }

    .birth-date-group select {
        flex: 1;
    }

    .birth-date-group input {
        min-width: 0;
    }

    .birth-date-group input[name="death_date_type"] {
        flex: 1.3;
        min-width: 120px;
    }

    .birth-date-group input[name="death_month"] {
        flex: 1.2;
        min-width: 110px;
    }

    .birth-date-group input[name="death_day"] {
        flex: 1;
        min-width: 80px;
    }

    .birth-date-group input[name="death_year"] {
        flex: 1;
        min-width: 80px;
    }

    .status-radio-group {
        display: flex;
        gap: 25px;
        margin-bottom: 25px;
    }

    .status-radio {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .status-radio input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: #8b5a9f;
    }

    .edit-more-link {
        color: #ff6b35;
        text-decoration: none;
        font-size: 14px;
        margin-bottom: 20px;
        display: inline-block;
    }

    .add-person-modal-footer {
        padding: 20px 25px;
        border-top: 1px solid #ddd;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        position: sticky;
        bottom: 0;
        background: white;
        z-index: 10;
    }

    .btn-ok {
        background: #ff6b35;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        font-weight: 500;
    }

    .btn-cancel {
        background: white;
        color: #ff6b35;
        border: 2px solid #ff6b35;
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        font-weight: 500;
    }

    /* Biography Editor Modal */
    .biography-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 25000;
        display: none;
        align-items: center;
        justify-content: center;
    }

    .biography-modal-overlay.active {
        display: flex;
    }

    .biography-modal {
        background: white;
        border-radius: 8px;
        width: 90%;
        max-width: 900px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        position: relative;
    }

    .biography-modal-header {
        padding: 20px 25px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: white;
    }

    .biography-modal-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }

    .biography-modal-title-icon {
        color: #28a745;
        font-size: 20px;
    }

    .biography-modal-title-text {
        color: #007bff;
    }

    .biography-modal-close {
        background: none;
        border: none;
        font-size: 24px;
        color: #666;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .biography-modal-close:hover {
        color: #333;
    }

    .biography-modal-body {
        padding: 0;
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .biography-editor-toolbar {
        border-bottom: 1px solid #ddd;
        padding: 10px 15px;
        background: #f8f9fa;
    }

    .biography-editor-content {
        flex: 1;
        padding: 20px;
        min-height: 400px;
    }

    #biography-editor {
        width: 100%;
        min-height: 400px;
    }

    .biography-editor-textarea {
        width: 100%;
        min-height: 400px;
        border: none;
        outline: none;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.6;
    }

    .ql-container {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
        font-size: 14px;
    }

    .biography-add-note {
        padding: 15px 20px;
        border-top: 1px solid #ddd;
    }

    .biography-add-note-link {
        color: #007bff;
        text-decoration: none;
        font-size: 14px;
        cursor: pointer;
    }

    .biography-add-note-link:hover {
        text-decoration: underline;
    }

    .biography-modal-footer {
        padding: 20px 25px;
        border-top: 1px solid #ddd;
        display: flex;
        justify-content: center;
        gap: 15px;
        background: white;
    }

    .btn-save-continue,
    .btn-save-close {
        background: #ff6b35;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        font-weight: 500;
    }

    .btn-save-continue:hover,
    .btn-save-close:hover {
        background: #e55a2b;
    }

    .btn-save-continue::after {
        content: " »";
    }

    .biography-btn-cancel {
        background: white;
        color: #ff6b35;
        border: 2px solid #ff6b35;
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        font-weight: 500;
    }

    .biography-btn-cancel:hover {
        background: #fff5f2;
    }

    /* Facts Editor Modal */
    .facts-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 25000;
        display: none;
        align-items: center;
        justify-content: center;
    }

    .facts-modal-overlay.active {
        display: flex;
    }

    .facts-modal {
        background: white;
        border-radius: 8px;
        width: 90%;
        max-width: 700px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        position: relative;
    }

    .facts-modal-header {
        padding: 20px 25px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: white;
    }

    .facts-modal-title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }

    .facts-modal-title-icon {
        color: #28a745;
        font-size: 20px;
    }

    .facts-modal-title-text {
        color: #007bff;
    }

    .facts-modal-close {
        background: none;
        border: none;
        font-size: 24px;
        color: #666;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .facts-modal-close:hover {
        color: #333;
    }

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

    .fact-item {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
        align-items: flex-start;
    }

    .fact-item-input {
        flex: 1;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    .fact-item-label {
        flex: 0 0 150px;
    }

    .fact-item-value {
        flex: 1;
    }

    .fact-item-delete {
        background: #dc3545;
        color: white;
        border: none;
        padding: 10px 15px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
    }

    .fact-item-delete:hover {
        background: #c82333;
    }

    .facts-add-new {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #ddd;
    }

    .facts-add-new-btn {
        background: #28a745;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
    }

    .facts-add-new-btn:hover {
        background: #218838;
    }

    .facts-modal-footer {
        padding: 20px 25px;
        border-top: 1px solid #ddd;
        display: flex;
        justify-content: center;
        gap: 15px;
        background: white;
    }

    .facts-btn-cancel {
        background: white;
        color: #ff6b35;
        border: 2px solid #ff6b35;
        padding: 10px 20px;
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        font-weight: 500;
    }

    .facts-btn-cancel:hover {
        background: #fff5f2;
    }
</style>
</head>
<body>
    
    
    <!-- Top Header Bar -->
<div class="top-header">
    <div class="tree-title">
         Family Tree     </div>
    <div class="header-nav">
        <button class="nav-tab active">Family view</button>
        <button class="nav-tab" title="Profile">
            <i class="bi bi-person"></i>
        </button>
                <a
            href="https://familytree.hexafume.com/login"
            class="nav-tab"
            title="Login"
            style="text-decoration: none; color: inherit"
        >
            <i class="bi bi-box-arrow-in-right"></i> Login
        </a>
        <a
            href="https://familytree.hexafume.com/register"
            class="nav-tab"
            title="Register"
            style="text-decoration: none; color: inherit"
        >
            <i class="bi bi-person-plus"></i> Register
        </a>
            </div>
</div>

<!-- Second Header Bar -->
<div class="second-header">
    <div class="nav-info">
        <span>></span>
        <span id="person-count"
            >0 of 0 people</span
        >
    </div>
    <div class="header-controls">
        <div class="search-container">
            <input
                type="text"
                class="search-box"
                id="search-input"
                placeholder="Find a person..."
                onkeyup="searchTree()"
                oninput="searchTree()"
                onfocus="showSearchDropdown()"
            />
            <div class="search-dropdown" id="search-dropdown"></div>
        </div>
    </div>
</div>

<!-- Profile Sidebar Overlay -->
<div
    class="profile-sidebar-overlay"
    id="profile-sidebar-overlay"
    onclick="closeProfileSidebar()"
></div>

<!-- Left Profile Sidebar -->
<div class="profile-sidebar" id="profile-sidebar">
    <div class="profile-sidebar-header">
        <h2 class="profile-sidebar-title" id="profile-sidebar-name">
            Person Name
        </h2>
        <button class="profile-sidebar-close" onclick="closeProfileSidebar()">
            ×
        </button>
    </div>

    <div class="profile-avatar-section">
        <div class="profile-avatar-wrapper">
            <div class="profile-avatar" id="profile-avatar">
                <div
                    class="profile-avatar-placeholder"
                    id="profile-avatar-placeholder"
                >
                    <i
                        class="bi bi-person"
                        style="font-size: 60px; color: #999"
                    ></i>
                </div>
                <img
                    id="profile-avatar-image"
                    style="display: none"
                    src=""
                    alt=""
                />
            </div>
            <div class="profile-avatar-camera" onclick="openPhotoUpload()">
                <i class="bi bi-camera"></i>
            </div>
        </div>

        <div class="profile-action-buttons">
            <button class="profile-action-btn" onclick="viewFullProfile()">
                <div class="profile-action-btn-icon">
                    <i class="bi bi-person-badge"></i>
                </div>
                <span class="profile-action-btn-label">Profile</span>
            </button>
            <button class="profile-action-btn" onclick="editProfile()">
                <div class="profile-action-btn-icon">
                    <i class="bi bi-pencil"></i>
                </div>
                <span class="profile-action-btn-label">Edit</span>
            </button>
            <button
                class="profile-action-btn"
                onclick="openBranchBuilderFromProfile()"
            >
                <div class="profile-action-btn-icon">
                    <i class="bi bi-person-plus"></i>
                </div>
                <span class="profile-action-btn-label">Add</span>
            </button>
            <button class="profile-action-btn" onclick="showMoreOptions()">
                <div class="profile-action-btn-icon">
                    <i class="bi bi-three-dots"></i>
                </div>
                <span class="profile-action-btn-label">More</span>
            </button>
        </div>
    </div>

    <div class="profile-section">
        <div class="profile-section-header">
            <span class="profile-section-title" id="photos-section-title"
                >PHOTOS</span
            >
            <button class="profile-section-action" onclick="addPhotos()">
                + Add
            </button>
        </div>
        <div id="profile-photos-content" style="display: none">
            <!-- Photos will be loaded here -->
        </div>
    </div>

    <div class="profile-section">
        <div class="profile-section-header">
            <span class="profile-section-title">BIOGRAPHY</span>
            <button class="profile-section-action" onclick="addBiography()">
                + Add
            </button>
        </div>
        <div id="profile-biography-content" style="display: none">
            <!-- Biography will be loaded here -->
        </div>
    </div>

    <div class="profile-section">
        <div class="profile-section-header">
            <span class="profile-section-title">IMMEDIATE FAMILY</span>
            <div>
                <button
                    class="profile-section-toggle"
                    onclick="toggleSection('family')"
                >
                    <i class="bi bi-chevron-down" id="family-chevron"></i>
                </button>
                <button
                    class="profile-section-action"
                    onclick="addFamilyMember()"
                >
                    + Add
                </button>
            </div>
        </div>
        <div id="profile-family-content" style="display: none">
            <!-- Family members will be loaded here -->
        </div>
    </div>

    <div class="profile-section">
        <div class="profile-section-header">
            <span class="profile-section-title">FACTS</span>
            <div>
                <button
                    class="profile-section-toggle"
                    onclick="toggleSection('facts')"
                >
                    <i class="bi bi-chevron-down" id="facts-chevron"></i>
                </button>
                <button class="profile-section-action" onclick="addFact()">
                    + Add
                </button>
            </div>
        </div>
        <div id="profile-facts-content" style="display: none">
            <!-- Facts will be loaded here -->
        </div>
    </div>
</div>

<!-- Facts Editor Modal -->
<div id="facts-modal-overlay" class="facts-modal-overlay">
    <div class="facts-modal">
        <div class="facts-modal-header">
            <div class="facts-modal-title">
                <i class="bi bi-info-circle facts-modal-title-icon"></i>
                <span class="facts-modal-title-text" id="facts-modal-title"
                    >Facts</span
                >
            </div>
            <button class="facts-modal-close" onclick="closeFactsModal()">
                ×
            </button>
        </div>
        <div class="facts-modal-body">
            <div id="facts-list">
                <!-- Facts will be dynamically added here -->
            </div>
            <div class="facts-add-new">
                <button
                    type="button"
                    class="facts-add-new-btn"
                    onclick="addNewFactItem()"
                >
                    + Add New Fact
                </button>
            </div>
        </div>
        <div class="facts-modal-footer">
            <button
                type="button"
                class="facts-btn-cancel"
                onclick="closeFactsModal()"
            >
                Cancel
            </button>
            <button
                type="button"
                class="btn-save-close"
                onclick="saveFactsAndClose()"
            >
                Save & close
            </button>
            <button
                type="button"
                class="btn-save-continue"
                onclick="saveFactsAndContinue()"
            >
                Save & continue
            </button>
        </div>
    </div>
</div>

<!-- Tree Container -->
<div id="tree-container">
    <div class="sidebar-controls">
        <button
            class="control-btn"
            title="Fullscreen"
            onclick="toggleFullscreen()"
        >
            <i class="bi bi-fullscreen" id="fullscreen-icon"></i>
        </button>
        <button class="control-btn" title="Home" onclick="centerTree()">
            <i class="bi bi-house"></i>
        </button>
        <button class="control-btn" title="Zoom In" onclick="zoomIn()">
            <i class="bi bi-plus-lg"></i>
        </button>
        <button class="control-btn" title="Zoom Out" onclick="zoomOut()">
            <i class="bi bi-dash-lg"></i>
        </button>
    </div>
    <svg
        id="tree-svg"
        width="100%"
        height="100%"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
    ></svg>
</div>

<!-- Hidden input to pass logged-in user ID to JavaScript -->
<input
    type="hidden"
    id="logged-in-user-id"
    value=""
/>

<!-- Branch Builder Modal -->
<div id="branch-builder-overlay" class="branch-builder-overlay">
    <div class="branch-builder-container">
        <div class="branch-builder-header">
            <div class="branch-builder-title">Branch Builder™</div>
            <button class="close-branch-builder" onclick="closeBranchBuilder()">
                ×
            </button>
        </div>

        <div class="branch-builder-grid" id="branch-builder-grid">
            <!-- SVG for connecting lines -->
            <svg class="branch-builder-lines" id="branch-builder-lines"></svg>

            <!-- Center Person Card -->
            <div class="center-person-card" id="center-person-card">
                <div class="relationship-card male" id="center-card">
                    <div class="silhouette-icon"></div>
                    <div
                        class="relationship-label"
                        id="center-person-name"
                        style="
                            font-size: 14px;
                            word-break: break-word;
                            margin-top: 15px;
                            text-align: center;
                            line-height: 1.4;
                        "
                    >
                        Muhamad Saaim
                    </div>
                </div>
            </div>

            <!-- Add Father (above center, left) -->
            <div
                class="relationship-card male add-father"
                onclick="addRelationship('father')"
            >
                <div class="silhouette-male"></div>
                <div class="relationship-label">Add father</div>
            </div>

            <!-- Add Mother (above center, right) -->
            <div
                class="relationship-card female add-mother"
                onclick="addRelationship('mother')"
            >
                <div class="silhouette-female"></div>
                <div class="relationship-label">Add mother</div>
            </div>

            <!-- Add Brother (left of center, top) -->
            <div
                class="relationship-card male add-brother"
                onclick="addRelationship('brother')"
            >
                <div class="silhouette-male"></div>
                <div class="relationship-label">Add brother</div>
            </div>

            <!-- Add Sister (left of center, bottom) -->
            <div
                class="relationship-card female add-sister"
                onclick="addRelationship('sister')"
            >
                <div class="silhouette-female"></div>
                <div class="relationship-label">Add sister</div>
            </div>

            <!-- Add Partner (right of center) -->
            <div
                class="relationship-card partner add-partner"
                onclick="addRelationship('partner')"
            >
                <div class="silhouette-female"></div>
                <div class="relationship-label">Add partner</div>
                <div class="relationship-subtitle">
                    wife, ex-wife, partner, ...
                </div>
            </div>

            <!-- Add Son (below center, left) -->
            <div
                class="relationship-card male add-son"
                onclick="addRelationship('son')"
            >
                <div class="silhouette-male"></div>
                <div class="relationship-label">Add son</div>
            </div>

            <!-- Add Daughter (below center, right) -->
            <div
                class="relationship-card female add-daughter"
                onclick="addRelationship('daughter')"
            >
                <div class="silhouette-female"></div>
                <div class="relationship-label">Add daughter</div>
            </div>
        </div>
    </div>
</div>

<!-- Add Person Modal -->
<div id="add-person-modal-overlay" class="add-person-modal-overlay">
    <div class="add-person-modal">
        <div class="add-person-modal-header">
            <div class="add-person-modal-title" id="add-person-modal-title">
                Add person
            </div>
            <button
                class="add-person-modal-close"
                onclick="closeAddPersonModal()"
            >
                ×
            </button>
        </div>
        <form
            id="add-person-form"
            method="POST"
            action="https://familytree.hexafume.com/family-tree"
            enctype="multipart/form-data"
        >
            <input type="hidden" name="_token" value="SsAmvR4Dw4G6ycU9HtKwdDEy1mt4bZ4tzLEKGoBW" autocomplete="off">             <div class="add-person-modal-body">
                <!-- Gender Selection -->
                <div class="gender-radio-group">
                    <div class="gender-radio">
                        <input
                            type="radio"
                            id="gender_male"
                            name="gender"
                            value="male"
                        />
                        <label for="gender_male" style="margin: 0">Male</label>
                    </div>
                    <div class="gender-radio">
                        <input
                            type="radio"
                            id="gender_female"
                            name="gender"
                            value="female"
                            checked
                        />
                        <label for="gender_female" style="margin: 0"
                            >Female</label
                        >
                    </div>
                    <div class="gender-radio">
                        <input
                            type="radio"
                            id="gender_unknown"
                            name="gender"
                            value="other"
                        />
                        <label for="gender_unknown" style="margin: 0"
                            >Unknown</label
                        >
                    </div>
                </div>

                <!-- Name Fields -->
                <div class="form-group">
                    <label for="modal_first_name"
                        >First (and middle) name:</label
                    >
                    <input
                        type="text"
                        id="modal_first_name"
                        name="first_name"
                        class="form-control"
                        required
                    />
                </div>

                <div class="form-group">
                    <label for="modal_last_name">Maiden name:</label>
                    <input
                        type="text"
                        id="modal_last_name"
                        name="last_name"
                        class="form-control"
                        value=""
                        placeholder="Saaim"
                    />
                </div>

                <div class="form-group">
                    <label for="modal_prefix">Prefix:</label>
                    <div class="select-wrapper">
                        <input
                            type="text"
                            id="modal_prefix"
                            name="prefix"
                            class="form-control"
                            placeholder="Select..."
                            list="prefix-options"
                        />
                        <datalist id="prefix-options">
                            <option value="Dr.">Dr.</option>
                            <option value="Prof.">Prof.</option>
                            <option value="Rev.">Rev.</option>
                            <option value="Sir">Sir</option>
                        </datalist>
                        <button
                            type="button"
                            class="dropdown-arrow-btn"
                            onclick="toggleDropdown('prefix')"
                        >
                            ▼
                        </button>
                    </div>
                </div>

                <div class="form-group">
                    <label for="modal_suffix">Suffix:</label>
                    <div class="select-wrapper">
                        <input
                            type="text"
                            id="modal_suffix"
                            name="suffix"
                            class="form-control"
                            placeholder="Select..."
                            list="suffix-options"
                        />
                        <datalist id="suffix-options">
                            <option value="Esq.">Esq.</option>
                            <option value="I">I</option>
                            <option value="II">II</option>
                            <option value="III">III</option>
                            <option value="Jr.">Jr.</option>
                            <option value="Sr.">Sr.</option>
                        </datalist>
                        <button
                            type="button"
                            class="dropdown-arrow-btn"
                            onclick="toggleDropdown('suffix')"
                        >
                            ▼
                        </button>
                    </div>
                </div>

                <div class="form-group">
                    <label for="modal_married_name">Married name:</label>
                    <input
                        type="text"
                        id="modal_married_name"
                        name="married_name"
                        class="form-control"
                    />
                </div>

                <!-- Birth Date -->
                <div class="form-group">
                    <label>Birth date:</label>
                    <div class="birth-date-group">
                        <div class="select-wrapper">
                            <input
                                type="text"
                                name="birth_date_type"
                                id="birth_date_type"
                                class="form-control"
                                value="Exactly"
                                list="birth-date-type-options"
                                placeholder="Exactly"
                            />
                            <datalist id="birth-date-type-options">
                                <option value="Exactly">Exactly</option>
                                <option value="Before">Before</option>
                                <option value="After">After</option>
                                <option value="Circa">Circa</option>
                                <option value="Unsure date">Unsure date</option>
                                <option value="Between ... and ...">
                                    Between ... and ...
                                </option>
                                <option value="From ... to ...">
                                    From ... to ...
                                </option>
                                <option value="From">From</option>
                                <option value="To">To</option>
                                <option value="Free text">Free text</option>
                            </datalist>
                            <button
                                type="button"
                                class="dropdown-arrow-btn"
                                onclick="toggleDropdown('birth_date_type')"
                            >
                                ▼
                            </button>
                        </div>
                        <div class="select-wrapper">
                            <input
                                type="text"
                                name="birth_month"
                                id="birth_month"
                                class="form-control"
                                placeholder="Month"
                                list="month-options"
                            />
                            <datalist id="month-options">
                                                                <option
                                    value="January"
                                >
                                    January
                                </option>
                                                                <option
                                    value="February"
                                >
                                    February
                                </option>
                                                                <option
                                    value="March"
                                >
                                    March
                                </option>
                                                                <option
                                    value="April"
                                >
                                    April
                                </option>
                                                                <option
                                    value="May"
                                >
                                    May
                                </option>
                                                                <option
                                    value="June"
                                >
                                    June
                                </option>
                                                                <option
                                    value="July"
                                >
                                    July
                                </option>
                                                                <option
                                    value="August"
                                >
                                    August
                                </option>
                                                                <option
                                    value="September"
                                >
                                    September
                                </option>
                                                                <option
                                    value="October"
                                >
                                    October
                                </option>
                                                                <option
                                    value="November"
                                >
                                    November
                                </option>
                                                                <option
                                    value="December"
                                >
                                    December
                                </option>
                                                            </datalist>
                            <button
                                type="button"
                                class="dropdown-arrow-btn"
                                onclick="toggleDropdown('birth_month')"
                            >
                                ▼
                            </button>
                        </div>
                        <div class="select-wrapper">
                            <input
                                type="text"
                                name="birth_day"
                                id="birth_day"
                                class="form-control"
                                placeholder="Day"
                                list="day-options"
                            />
                            <datalist id="day-options">
                                                                <option value="1">1</option>
                                                                <option value="2">2</option>
                                                                <option value="3">3</option>
                                                                <option value="4">4</option>
                                                                <option value="5">5</option>
                                                                <option value="6">6</option>
                                                                <option value="7">7</option>
                                                                <option value="8">8</option>
                                                                <option value="9">9</option>
                                                                <option value="10">10</option>
                                                                <option value="11">11</option>
                                                                <option value="12">12</option>
                                                                <option value="13">13</option>
                                                                <option value="14">14</option>
                                                                <option value="15">15</option>
                                                                <option value="16">16</option>
                                                                <option value="17">17</option>
                                                                <option value="18">18</option>
                                                                <option value="19">19</option>
                                                                <option value="20">20</option>
                                                                <option value="21">21</option>
                                                                <option value="22">22</option>
                                                                <option value="23">23</option>
                                                                <option value="24">24</option>
                                                                <option value="25">25</option>
                                                                <option value="26">26</option>
                                                                <option value="27">27</option>
                                                                <option value="28">28</option>
                                                                <option value="29">29</option>
                                                                <option value="30">30</option>
                                                                <option value="31">31</option>
                                                            </datalist>
                            <button
                                type="button"
                                class="dropdown-arrow-btn"
                                onclick="toggleDropdown('birth_day')"
                            >
                                ▼
                            </button>
                        </div>
                        <div class="select-wrapper">
                            <input
                                type="text"
                                name="birth_year"
                                id="birth_year"
                                class="form-control"
                                placeholder="Year"
                                list="year-options"
                            />
                            <datalist id="year-options">
                                                                <option value="2026">2026</option>
                                                                <option value="2025">2025</option>
                                                                <option value="2024">2024</option>
                                                                <option value="2023">2023</option>
                                                                <option value="2022">2022</option>
                                                                <option value="2021">2021</option>
                                                                <option value="2020">2020</option>
                                                                <option value="2019">2019</option>
                                                                <option value="2018">2018</option>
                                                                <option value="2017">2017</option>
                                                                <option value="2016">2016</option>
                                                                <option value="2015">2015</option>
                                                                <option value="2014">2014</option>
                                                                <option value="2013">2013</option>
                                                                <option value="2012">2012</option>
                                                                <option value="2011">2011</option>
                                                                <option value="2010">2010</option>
                                                                <option value="2009">2009</option>
                                                                <option value="2008">2008</option>
                                                                <option value="2007">2007</option>
                                                                <option value="2006">2006</option>
                                                                <option value="2005">2005</option>
                                                                <option value="2004">2004</option>
                                                                <option value="2003">2003</option>
                                                                <option value="2002">2002</option>
                                                                <option value="2001">2001</option>
                                                                <option value="2000">2000</option>
                                                                <option value="1999">1999</option>
                                                                <option value="1998">1998</option>
                                                                <option value="1997">1997</option>
                                                                <option value="1996">1996</option>
                                                                <option value="1995">1995</option>
                                                                <option value="1994">1994</option>
                                                                <option value="1993">1993</option>
                                                                <option value="1992">1992</option>
                                                                <option value="1991">1991</option>
                                                                <option value="1990">1990</option>
                                                                <option value="1989">1989</option>
                                                                <option value="1988">1988</option>
                                                                <option value="1987">1987</option>
                                                                <option value="1986">1986</option>
                                                                <option value="1985">1985</option>
                                                                <option value="1984">1984</option>
                                                                <option value="1983">1983</option>
                                                                <option value="1982">1982</option>
                                                                <option value="1981">1981</option>
                                                                <option value="1980">1980</option>
                                                                <option value="1979">1979</option>
                                                                <option value="1978">1978</option>
                                                                <option value="1977">1977</option>
                                                                <option value="1976">1976</option>
                                                                <option value="1975">1975</option>
                                                                <option value="1974">1974</option>
                                                                <option value="1973">1973</option>
                                                                <option value="1972">1972</option>
                                                                <option value="1971">1971</option>
                                                                <option value="1970">1970</option>
                                                                <option value="1969">1969</option>
                                                                <option value="1968">1968</option>
                                                                <option value="1967">1967</option>
                                                                <option value="1966">1966</option>
                                                                <option value="1965">1965</option>
                                                                <option value="1964">1964</option>
                                                                <option value="1963">1963</option>
                                                                <option value="1962">1962</option>
                                                                <option value="1961">1961</option>
                                                                <option value="1960">1960</option>
                                                                <option value="1959">1959</option>
                                                                <option value="1958">1958</option>
                                                                <option value="1957">1957</option>
                                                                <option value="1956">1956</option>
                                                                <option value="1955">1955</option>
                                                                <option value="1954">1954</option>
                                                                <option value="1953">1953</option>
                                                                <option value="1952">1952</option>
                                                                <option value="1951">1951</option>
                                                                <option value="1950">1950</option>
                                                                <option value="1949">1949</option>
                                                                <option value="1948">1948</option>
                                                                <option value="1947">1947</option>
                                                                <option value="1946">1946</option>
                                                                <option value="1945">1945</option>
                                                                <option value="1944">1944</option>
                                                                <option value="1943">1943</option>
                                                                <option value="1942">1942</option>
                                                                <option value="1941">1941</option>
                                                                <option value="1940">1940</option>
                                                                <option value="1939">1939</option>
                                                                <option value="1938">1938</option>
                                                                <option value="1937">1937</option>
                                                                <option value="1936">1936</option>
                                                                <option value="1935">1935</option>
                                                                <option value="1934">1934</option>
                                                                <option value="1933">1933</option>
                                                                <option value="1932">1932</option>
                                                                <option value="1931">1931</option>
                                                                <option value="1930">1930</option>
                                                                <option value="1929">1929</option>
                                                                <option value="1928">1928</option>
                                                                <option value="1927">1927</option>
                                                                <option value="1926">1926</option>
                                                                <option value="1925">1925</option>
                                                                <option value="1924">1924</option>
                                                                <option value="1923">1923</option>
                                                                <option value="1922">1922</option>
                                                                <option value="1921">1921</option>
                                                                <option value="1920">1920</option>
                                                                <option value="1919">1919</option>
                                                                <option value="1918">1918</option>
                                                                <option value="1917">1917</option>
                                                                <option value="1916">1916</option>
                                                                <option value="1915">1915</option>
                                                                <option value="1914">1914</option>
                                                                <option value="1913">1913</option>
                                                                <option value="1912">1912</option>
                                                                <option value="1911">1911</option>
                                                                <option value="1910">1910</option>
                                                                <option value="1909">1909</option>
                                                                <option value="1908">1908</option>
                                                                <option value="1907">1907</option>
                                                                <option value="1906">1906</option>
                                                                <option value="1905">1905</option>
                                                                <option value="1904">1904</option>
                                                                <option value="1903">1903</option>
                                                                <option value="1902">1902</option>
                                                                <option value="1901">1901</option>
                                                                <option value="1900">1900</option>
                                                                <option value="1899">1899</option>
                                                                <option value="1898">1898</option>
                                                                <option value="1897">1897</option>
                                                                <option value="1896">1896</option>
                                                                <option value="1895">1895</option>
                                                                <option value="1894">1894</option>
                                                                <option value="1893">1893</option>
                                                                <option value="1892">1892</option>
                                                                <option value="1891">1891</option>
                                                                <option value="1890">1890</option>
                                                                <option value="1889">1889</option>
                                                                <option value="1888">1888</option>
                                                                <option value="1887">1887</option>
                                                                <option value="1886">1886</option>
                                                                <option value="1885">1885</option>
                                                                <option value="1884">1884</option>
                                                                <option value="1883">1883</option>
                                                                <option value="1882">1882</option>
                                                                <option value="1881">1881</option>
                                                                <option value="1880">1880</option>
                                                                <option value="1879">1879</option>
                                                                <option value="1878">1878</option>
                                                                <option value="1877">1877</option>
                                                                <option value="1876">1876</option>
                                                                <option value="1875">1875</option>
                                                                <option value="1874">1874</option>
                                                                <option value="1873">1873</option>
                                                                <option value="1872">1872</option>
                                                                <option value="1871">1871</option>
                                                                <option value="1870">1870</option>
                                                                <option value="1869">1869</option>
                                                                <option value="1868">1868</option>
                                                                <option value="1867">1867</option>
                                                                <option value="1866">1866</option>
                                                                <option value="1865">1865</option>
                                                                <option value="1864">1864</option>
                                                                <option value="1863">1863</option>
                                                                <option value="1862">1862</option>
                                                                <option value="1861">1861</option>
                                                                <option value="1860">1860</option>
                                                                <option value="1859">1859</option>
                                                                <option value="1858">1858</option>
                                                                <option value="1857">1857</option>
                                                                <option value="1856">1856</option>
                                                                <option value="1855">1855</option>
                                                                <option value="1854">1854</option>
                                                                <option value="1853">1853</option>
                                                                <option value="1852">1852</option>
                                                                <option value="1851">1851</option>
                                                                <option value="1850">1850</option>
                                                                <option value="1849">1849</option>
                                                                <option value="1848">1848</option>
                                                                <option value="1847">1847</option>
                                                                <option value="1846">1846</option>
                                                                <option value="1845">1845</option>
                                                                <option value="1844">1844</option>
                                                                <option value="1843">1843</option>
                                                                <option value="1842">1842</option>
                                                                <option value="1841">1841</option>
                                                                <option value="1840">1840</option>
                                                                <option value="1839">1839</option>
                                                                <option value="1838">1838</option>
                                                                <option value="1837">1837</option>
                                                                <option value="1836">1836</option>
                                                                <option value="1835">1835</option>
                                                                <option value="1834">1834</option>
                                                                <option value="1833">1833</option>
                                                                <option value="1832">1832</option>
                                                                <option value="1831">1831</option>
                                                                <option value="1830">1830</option>
                                                                <option value="1829">1829</option>
                                                                <option value="1828">1828</option>
                                                                <option value="1827">1827</option>
                                                                <option value="1826">1826</option>
                                                                <option value="1825">1825</option>
                                                                <option value="1824">1824</option>
                                                                <option value="1823">1823</option>
                                                                <option value="1822">1822</option>
                                                                <option value="1821">1821</option>
                                                                <option value="1820">1820</option>
                                                                <option value="1819">1819</option>
                                                                <option value="1818">1818</option>
                                                                <option value="1817">1817</option>
                                                                <option value="1816">1816</option>
                                                                <option value="1815">1815</option>
                                                                <option value="1814">1814</option>
                                                                <option value="1813">1813</option>
                                                                <option value="1812">1812</option>
                                                                <option value="1811">1811</option>
                                                                <option value="1810">1810</option>
                                                                <option value="1809">1809</option>
                                                                <option value="1808">1808</option>
                                                                <option value="1807">1807</option>
                                                                <option value="1806">1806</option>
                                                                <option value="1805">1805</option>
                                                                <option value="1804">1804</option>
                                                                <option value="1803">1803</option>
                                                                <option value="1802">1802</option>
                                                                <option value="1801">1801</option>
                                                                <option value="1800">1800</option>
                                                            </datalist>
                            <button
                                type="button"
                                class="dropdown-arrow-btn"
                                onclick="toggleDropdown('birth_year')"
                            >
                                ▼
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Birth Place -->
                <div class="form-group">
                    <label for="modal_birth_place">Birth place:</label>
                    <input
                        type="text"
                        id="modal_birth_place"
                        name="birth_place"
                        class="form-control"
                    />
                </div>

                <!-- Status -->
                <div class="status-radio-group">
                    <div class="status-radio">
                        <input
                            type="radio"
                            id="status_living"
                            name="status"
                            value="living"
                            checked
                            onchange="toggleDeathFields()"
                        />
                        <label for="status_living" style="margin: 0"
                            >Living</label
                        >
                    </div>
                    <div class="status-radio">
                        <input
                            type="radio"
                            id="status_deceased"
                            name="status"
                            value="deceased"
                            onchange="toggleDeathFields()"
                        />
                        <label for="status_deceased" style="margin: 0"
                            >Deceased</label
                        >
                    </div>
                </div>

                <!-- Death Fields - Hidden by default -->
                <div
                    id="death-fields-section"
                    style="display: none; margin-top: 20px"
                >
                    <div
                        style="
                            display: grid;
                            grid-template-columns: 1fr 1fr;
                            gap: 25px;
                        "
                    >
                        <!-- Left Column -->
                        <div>
                            <!-- Death Date -->
                            <div class="form-group">
                                <label>Death date:</label>
                                <div class="birth-date-group">
                                    <input
                                        type="text"
                                        name="death_date_type"
                                        id="death_date_type"
                                        class="form-control"
                                        value="Exactly"
                                        list="death-date-type-options"
                                        placeholder="Exactly"
                                    />
                                    <datalist id="death-date-type-options">
                                        <option value="Exactly">Exactly</option>
                                        <option value="Before">Before</option>
                                        <option value="After">After</option>
                                        <option value="Circa">Circa</option>
                                        <option value="Unsure date">
                                            Unsure date
                                        </option>
                                        <option value="Between ... and ...">
                                            Between ... and ...
                                        </option>
                                        <option value="From ... to ...">
                                            From ... to ...
                                        </option>
                                        <option value="From">From</option>
                                        <option value="To">To</option>
                                        <option value="Free text">
                                            Free text
                                        </option>
                                    </datalist>

                                    <input
                                        type="text"
                                        name="death_month"
                                        id="death_month"
                                        class="form-control"
                                        placeholder="Month"
                                        list="death-month-options"
                                    />
                                    <datalist id="death-month-options">
                                                                                <option
                                            value="January"
                                        >
                                            January
                                        </option>
                                                                                <option
                                            value="February"
                                        >
                                            February
                                        </option>
                                                                                <option
                                            value="March"
                                        >
                                            March
                                        </option>
                                                                                <option
                                            value="April"
                                        >
                                            April
                                        </option>
                                                                                <option
                                            value="May"
                                        >
                                            May
                                        </option>
                                                                                <option
                                            value="June"
                                        >
                                            June
                                        </option>
                                                                                <option
                                            value="July"
                                        >
                                            July
                                        </option>
                                                                                <option
                                            value="August"
                                        >
                                            August
                                        </option>
                                                                                <option
                                            value="September"
                                        >
                                            September
                                        </option>
                                                                                <option
                                            value="October"
                                        >
                                            October
                                        </option>
                                                                                <option
                                            value="November"
                                        >
                                            November
                                        </option>
                                                                                <option
                                            value="December"
                                        >
                                            December
                                        </option>
                                                                            </datalist>

                                    <input
                                        type="text"
                                        name="death_day"
                                        id="death_day"
                                        class="form-control"
                                        placeholder="Day"
                                        list="death-day-options"
                                    />
                                    <datalist id="death-day-options">
                                                                                <option value="1">
                                            1
                                        </option>
                                                                                <option value="2">
                                            2
                                        </option>
                                                                                <option value="3">
                                            3
                                        </option>
                                                                                <option value="4">
                                            4
                                        </option>
                                                                                <option value="5">
                                            5
                                        </option>
                                                                                <option value="6">
                                            6
                                        </option>
                                                                                <option value="7">
                                            7
                                        </option>
                                                                                <option value="8">
                                            8
                                        </option>
                                                                                <option value="9">
                                            9
                                        </option>
                                                                                <option value="10">
                                            10
                                        </option>
                                                                                <option value="11">
                                            11
                                        </option>
                                                                                <option value="12">
                                            12
                                        </option>
                                                                                <option value="13">
                                            13
                                        </option>
                                                                                <option value="14">
                                            14
                                        </option>
                                                                                <option value="15">
                                            15
                                        </option>
                                                                                <option value="16">
                                            16
                                        </option>
                                                                                <option value="17">
                                            17
                                        </option>
                                                                                <option value="18">
                                            18
                                        </option>
                                                                                <option value="19">
                                            19
                                        </option>
                                                                                <option value="20">
                                            20
                                        </option>
                                                                                <option value="21">
                                            21
                                        </option>
                                                                                <option value="22">
                                            22
                                        </option>
                                                                                <option value="23">
                                            23
                                        </option>
                                                                                <option value="24">
                                            24
                                        </option>
                                                                                <option value="25">
                                            25
                                        </option>
                                                                                <option value="26">
                                            26
                                        </option>
                                                                                <option value="27">
                                            27
                                        </option>
                                                                                <option value="28">
                                            28
                                        </option>
                                                                                <option value="29">
                                            29
                                        </option>
                                                                                <option value="30">
                                            30
                                        </option>
                                                                                <option value="31">
                                            31
                                        </option>
                                                                            </datalist>

                                    <input
                                        type="text"
                                        name="death_year"
                                        id="death_year"
                                        class="form-control"
                                        placeholder="Year"
                                    />
                                </div>
                            </div>

                            <!-- Cause of death -->
                            <div class="form-group">
                                <label for="modal_cause_of_death"
                                    >Cause of death:</label
                                >
                                <div class="select-wrapper">
                                    <input
                                        type="text"
                                        id="modal_cause_of_death"
                                        name="cause_of_death"
                                        class="form-control"
                                    />
                                    <button
                                        type="button"
                                        class="dropdown-arrow-btn"
                                        onclick="toggleDropdown('cause_of_death')"
                                    >
                                        ▼
                                    </button>
                                    <div
                                        class="dropdown-menu"
                                        id="cause_of_death-dropdown"
                                    >
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Accident')"
                                        >
                                            Accident
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Alzheimer\'s disease')"
                                        >
                                            Alzheimer's disease
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Asthma')"
                                        >
                                            Asthma
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'At War')"
                                        >
                                            At War
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'At young age')"
                                        >
                                            At young age
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Bronchitis')"
                                        >
                                            Bronchitis
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Cancer')"
                                        >
                                            Cancer
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Chronic obstructive pulmonary disease')"
                                        >
                                            Chronic obstructive pulmonary
                                            disease
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Cirrhosis')"
                                        >
                                            Cirrhosis
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Diabetes')"
                                        >
                                            Diabetes
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Emphysema')"
                                        >
                                            Emphysema
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Heart attack')"
                                        >
                                            Heart attack
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Heart disease')"
                                        >
                                            Heart disease
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Holocaust')"
                                        >
                                            Holocaust
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Homicide')"
                                        >
                                            Homicide
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Hypertension')"
                                        >
                                            Hypertension
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Illness')"
                                        >
                                            Illness
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Influenza')"
                                        >
                                            Influenza
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Kidney disease')"
                                        >
                                            Kidney disease
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Liver disease')"
                                        >
                                            Liver disease
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Medical Problem')"
                                        >
                                            Medical Problem
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Miscarriage')"
                                        >
                                            Miscarriage
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Multiple sclerosis')"
                                        >
                                            Multiple sclerosis
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Parkinson\'s disease')"
                                        >
                                            Parkinson's disease
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Pneumonia')"
                                        >
                                            Pneumonia
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Pogrom')"
                                        >
                                            Pogrom
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Sepsis')"
                                        >
                                            Sepsis
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Stillborn')"
                                        >
                                            Stillborn
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Stroke')"
                                        >
                                            Stroke
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Suicide')"
                                        >
                                            Suicide
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Tuberculosis')"
                                        >
                                            Tuberculosis
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('cause_of_death', 'Unknown')"
                                        >
                                            Unknown
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Right Column -->
                        <div>
                            <!-- Death place -->
                            <div class="form-group">
                                <label for="modal_death_place"
                                    >Death place:</label
                                >
                                <div class="select-wrapper">
                                    <input
                                        type="text"
                                        id="modal_death_place"
                                        name="death_place"
                                        class="form-control"
                                    />
                                    <button
                                        type="button"
                                        class="dropdown-arrow-btn"
                                        onclick="toggleDropdown('death_place')"
                                    >
                                        ▼
                                    </button>
                                    <div
                                        class="dropdown-menu"
                                        id="death_place-dropdown"
                                    >
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('death_place', 'At home')"
                                        >
                                            At home
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('death_place', 'Hospital')"
                                        >
                                            Hospital
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('death_place', 'Nursing home')"
                                        >
                                            Nursing home
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('death_place', 'At war')"
                                        >
                                            At war
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('death_place', 'Unknown')"
                                        >
                                            Unknown
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Burial place or cemetery -->
                            <div class="form-group">
                                <label for="modal_burial_place"
                                    >Burial place or cemetery:</label
                                >
                                <div class="select-wrapper">
                                    <input
                                        type="text"
                                        id="modal_burial_place"
                                        name="burial_place"
                                        class="form-control"
                                    />
                                    <button
                                        type="button"
                                        class="dropdown-arrow-btn"
                                        onclick="toggleDropdown('burial_place')"
                                    >
                                        ▼
                                    </button>
                                    <div
                                        class="dropdown-menu"
                                        id="burial_place-dropdown"
                                    >
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('burial_place', 'Cremated')"
                                        >
                                            Cremated
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('burial_place', 'Family cemetery')"
                                        >
                                            Family cemetery
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('burial_place', 'Local cemetery')"
                                        >
                                            Local cemetery
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('burial_place', 'Military cemetery')"
                                        >
                                            Military cemetery
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('burial_place', 'National cemetery')"
                                        >
                                            National cemetery
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('burial_place', 'Private cemetery')"
                                        >
                                            Private cemetery
                                        </div>
                                        <div
                                            class="dropdown-item"
                                            onclick="selectDropdownOption('burial_place', 'Unknown')"
                                        >
                                            Unknown
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Hidden field for death_date (will be populated on submit) -->
                <input
                    type="hidden"
                    id="modal_death_date"
                    name="death_date"
                    value=""
                />

                <!-- Email -->
                <div class="form-group">
                    <label for="modal_email">Email address:</label>
                    <input
                        type="email"
                        id="modal_email"
                        name="email"
                        class="form-control"
                    />
                </div>

                <!-- Invite to join site - hidden by default -->
                <div
                    class="form-group"
                    id="invite-section"
                    style="display: none"
                >
                    <div style="display: flex; align-items: center; gap: 8px">
                        <input
                            type="checkbox"
                            id="modal_invite"
                            name="invite_to_site"
                            value="1"
                            style="width: auto"
                        />
                        <label
                            for="modal_invite"
                            style="
                                margin: 0;
                                font-weight: normal;
                                cursor: pointer;
                            "
                            >Invite to join site</label
                        >
                    </div>
                </div>

                <!-- Hidden fields for relationships -->
                <input
                    type="hidden"
                    id="modal_parent_id"
                    name="parent_ids[]"
                    value=""
                />
                <input
                    type="hidden"
                    id="modal_sibling_id"
                    name="sibling_id"
                    value=""
                />
                <input
                    type="hidden"
                    id="modal_spouse_id"
                    name="spouse_id"
                    value=""
                />
                <input
                    type="hidden"
                    id="modal_relationship"
                    name="relationship"
                    value=""
                />

                <!-- Hidden field for birth_date (will be populated on submit) -->
                <input
                    type="hidden"
                    id="modal_birth_date"
                    name="birth_date"
                    value=""
                />

                <a href="#" class="edit-more-link"
                    >Edit more (bio, more facts...)</a
                >
            </div>
            <div class="add-person-modal-footer">
                <button
                    type="button"
                    class="btn-cancel"
                    onclick="closeAddPersonModal()"
                >
                    Cancel
                </button>
                <button type="submit" class="btn-ok" id="submit-add-person-btn">
                    OK
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Biography Editor Modal -->
<div id="biography-modal-overlay" class="biography-modal-overlay">
    <div class="biography-modal">
        <div class="biography-modal-header">
            <div class="biography-modal-title">
                <i class="bi bi-file-text biography-modal-title-icon"></i>
                <span
                    class="biography-modal-title-text"
                    id="biography-modal-title"
                    >Biography</span
                >
            </div>
            <button
                class="biography-modal-close"
                onclick="closeBiographyModal()"
            >
                ×
            </button>
        </div>
        <div class="biography-modal-body">
            <div class="biography-editor-content">
                <div id="biography-editor"></div>
            </div>
            <div class="biography-add-note">
                <a
                    href="#"
                    class="biography-add-note-link"
                    onclick="addAnotherNote(); return false;"
                >
                    + Add another note
                </a>
            </div>
        </div>
        <div class="biography-modal-footer">
            <button
                type="button"
                class="biography-btn-cancel"
                onclick="closeBiographyModal()"
            >
                Cancel
            </button>
            <button
                type="button"
                class="btn-save-close"
                onclick="saveBiographyAndClose()"
            >
                Save & close
            </button>
            <button
                type="button"
                class="btn-save-continue"
                onclick="saveBiographyAndContinue()"
            >
                Save & continue
            </button>
        </div>
    </div>
</div>

<div class="empty-tree-container">
    <div class="empty-tree-wrapper">
        <!-- Add Father Card (dashed border) -->
        <div
            class="empty-add-card add-father-empty"
            onclick="addRelationshipFromEmpty('father')"
        >
            <div class="empty-add-icon">+</div>
            <div class="empty-add-label">Add father</div>
        </div>

        <!-- Add Mother Card (dashed border) -->
        <div
            class="empty-add-card add-mother-empty"
            onclick="addRelationshipFromEmpty('mother')"
        >
            <div class="empty-add-icon">+</div>
            <div class="empty-add-label">Add mother</div>
        </div>

        <!-- User Card (center) - MyHeritage Style -->
        <div class="empty-user-card">
            <div class="main-person-card">
                <!-- Profile Picture Placeholder -->
                <div class="profile-picture-placeholder">
                    <div class="camera-icon-overlay">📷</div>
                </div>

                <!-- Name Section -->
                <div class="person-name-section">
                    <div class="person-name">
                         You                     </div>
                </div>

                <!-- Edit Icon -->
                <div class="edit-icon-btn" title="Edit"  data-edit-url="https://familytree.hexafume.com/family-tree/create"
                                        onclick="window.location.href=this.getAttribute('data-edit-url')">
                    ✎
                </div>

                <!-- Add Child Icon (below card) -->
                <div
                    class="add-child-icon"
                    title="Add child"
                    onclick="openBranchBuilderFromHeader()"
                >
                    +
                </div>
            </div>
        </div>
    </div>
</div>
 
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- D3.js for tree visualization -->
    <script src="https://cdn.jsdelivr.net/npm/d3@7" onerror="this.onerror=null;this.src='https://unpkg.com/d3@7/dist/d3.min.js';"></script>
    <!-- Quill Rich Text Editor -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    
    <script>
    // Keep console enabled for debugging, but hide any console output that appears on the page
    // Console messages will appear in the browser's console tab, not on the webpage
    (function () {
        // Don't disable console - allow messages in console tab
        // The hideConsoleOutputOnPage function below will hide any console text that appears on the page

        // Aggressively hide console output that appears on the page
        function hideConsoleOutputOnPage() {
            try {
                // Wait for DOM to be ready
                if (document.readyState === "loading") {
                    document.addEventListener(
                        "DOMContentLoaded",
                        hideConsoleOutputOnPage
                    );
                    return;
                }

                // DEBUG: Log what we're finding (this won't show because console is disabled)
                // But we can inspect in DevTools
                let foundConsoleOutput = false;

                // Check all direct children of body
                const bodyChildren = Array.from(document.body.children);
                bodyChildren.forEach(function (el) {
                    // Skip known good elements
                    if (
                        el.classList.contains("top-header") ||
                        el.classList.contains("second-header") ||
                        el.id === "tree-container" ||
                        el.querySelector("#tree-container") ||
                        el.querySelector(".top-header") ||
                        el.querySelector(".second-header") ||
                        el.tagName === "SCRIPT" ||
                        el.tagName === "STYLE" ||
                        el.tagName === "SVG"
                    ) {
                        return;
                    }

                    // Check if element contains console output text
                    if (el.textContent) {
                        const text = el.textContent.trim();

                        // Check for console output patterns
                        const hasFamilyTreePattern = /family-tree:\d+/.test(
                            text
                        );
                        const hasLoadedHidden = text.includes("Loaded hidden");
                        const hasDOMContentLoaded =
                            text.includes("DOM Content Loaded");
                        const hasTreeDataLoaded =
                            text.includes("Tree data loaded");
                        const consolePatternCount = (
                            text.match(/family-tree:\d+/g) || []
                        ).length;

                        // If it has multiple console patterns, it's definitely console output
                        if (
                            consolePatternCount > 1 ||
                            (hasFamilyTreePattern &&
                                (hasLoadedHidden ||
                                    hasDOMContentLoaded ||
                                    hasTreeDataLoaded))
                        ) {
                            // Remove the element completely
                            el.style.cssText =
                                "display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; left: -9999px !important;";
                            try {
                                el.remove();
                            } catch (e) {
                                // If remove fails, at least hide it
                            }
                        }
                    }
                });

                // Also check for text nodes directly in body
                const walker = document.createTreeWalker(
                    document.body,
                    NodeFilter.SHOW_TEXT,
                    {
                        acceptNode: function (node) {
                            // Skip text nodes inside known good elements
                            let parent = node.parentElement;
                            while (parent && parent !== document.body) {
                                if (
                                    parent.classList.contains("top-header") ||
                                    parent.classList.contains(
                                        "second-header"
                                    ) ||
                                    parent.id === "tree-container" ||
                                    parent.tagName === "SCRIPT" ||
                                    parent.tagName === "STYLE" ||
                                    parent.tagName === "SVG"
                                ) {
                                    return NodeFilter.FILTER_REJECT;
                                }
                                parent = parent.parentElement;
                            }
                            return NodeFilter.FILTER_ACCEPT;
                        },
                    },
                    false
                );

                const textNodesToRemove = [];
                let textNode;
                while ((textNode = walker.nextNode())) {
                    if (textNode.textContent) {
                        const text = textNode.textContent.trim();
                        if (
                            text.includes("family-tree:") &&
                            (text.includes("Loaded hidden") ||
                                text.includes("DOM Content Loaded") ||
                                text.includes("Tree data loaded"))
                        ) {
                            textNodesToRemove.push(textNode);
                        }
                    }
                }

                textNodesToRemove.forEach(function (node) {
                    try {
                        if (node.parentNode) {
                            node.parentNode.removeChild(node);
                        }
                    } catch (e) {
                        // Silently fail
                    }
                });
            } catch (e) {
                // Silently fail
            }
        }

        // Run immediately and repeatedly to catch dynamically added content
        if (document.body) {
            hideConsoleOutputOnPage();
        }

        // Run multiple times to catch content added at different times
        setTimeout(hideConsoleOutputOnPage, 50);
        setTimeout(hideConsoleOutputOnPage, 100);
        setTimeout(hideConsoleOutputOnPage, 200);
        setTimeout(hideConsoleOutputOnPage, 500);
        setTimeout(hideConsoleOutputOnPage, 1000);
        setTimeout(hideConsoleOutputOnPage, 2000);

        // Use MutationObserver to catch content added dynamically
        if (typeof MutationObserver !== "undefined" && document.body) {
            const observer = new MutationObserver(function (mutations) {
                hideConsoleOutputOnPage();
            });

            observer.observe(document.body, {
                childList: true,
                subtree: false, // Only watch direct children of body
                characterData: false,
            });
        }

        // Add global CSS to hide console output elements
        const style = document.createElement("style");
        style.id = "hide-console-output";
        style.textContent = `
            [data-console-output="true"] {
                display: none !important;
                visibility: hidden !important;
                height: 0 !important;
                overflow: hidden !important;
                opacity: 0 !important;
                pointer-events: none !important;
                position: absolute !important;
                left: -9999px !important;
                width: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
            }
        `;
        if (document.head) {
            document.head.appendChild(style);
        } else {
            document.addEventListener("DOMContentLoaded", function () {
                document.head.appendChild(style);
            });
        }
    })();

    // Get logged-in user ID from Laravel (for identifying main person)
    const loggedInUserIdElement = document.getElementById("logged-in-user-id");
    const loggedInUserId =
        loggedInUserIdElement && loggedInUserIdElement.value
            ? parseInt(loggedInUserIdElement.value)
            : null;

    let treeData = [];
    let svg, g, zoom, tree, root, nodes, links;
    let width, height;
    let currentViewMode = "vertical";

    // Initialize global variables for hiding ancestors
    if (!window.hiddenAncestorIds) {
        window.hiddenAncestorIds = new Set();
    }
    if (!window.hiddenPersonBranches) {
        window.hiddenPersonBranches = new Set();
    }
    if (!window.hiddenAncestorsByPerson) {
        window.hiddenAncestorsByPerson = new Map();
    }
    // Special state for father's branch toggle (MyHeritage logic: hide mother when father's branch is shown)
    if (window.fatherBranchToggled === undefined) {
        window.fatherBranchToggled = false;
    }
    // Special state for father's partner branch toggle
    if (window.fatherPartnerBranchToggled === undefined) {
        window.fatherPartnerBranchToggled = false;
    }
    // Special state for grandfather's partner branch toggle
    if (window.grandfatherPartnerBranchToggled === undefined) {
        window.grandfatherPartnerBranchToggled = false;
    }
    // Special state for grandmother's branch toggle
    if (window.grandmotherBranchToggled === undefined) {
        window.grandmotherBranchToggled = false;
    }

    // Redraw Branch Builder lines on window resize
    let resizeTimeout;
    window.addEventListener("resize", function () {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function () {
            if (
                document
                    .getElementById("branch-builder-overlay")
                    ?.classList.contains("active")
            ) {
                drawBranchBuilderLines();
            }
        }, 250);
    });

    // Helper function to automatically add edit and delete icons to any card
    function addEditDeleteIcons(cardGroup, personId, personName) {
        // Add edit icon (pencil, right side)
        cardGroup
            .append("circle")
            .attr("cx", 50)
            .attr("cy", 28)
            .attr("r", 8)
            .attr("fill", "white")
            .attr("stroke", "#999")
            .attr("stroke-width", 1)
            .style("cursor", "pointer")
            .on("click", function (event) {
                event.stopPropagation();
                window.location.href = `https://familytree.hexafume.com/family-tree/${personId}/edit`;
            });
        cardGroup
            .append("text")
            .attr("class", "edit-icon")
            .attr("x", 50)
            .attr("y", 31)
            .attr("text-anchor", "middle")
            .attr("font-size", "12px")
            .text("✎")
            .style("cursor", "pointer")
            .on("click", function (event) {
                event.stopPropagation();
                window.location.href = `https://familytree.hexafume.com/family-tree/${personId}/edit`;
            });

        // Add delete icon (trash, left side)
        cardGroup
            .append("circle")
            .attr("cx", -50)
            .attr("cy", 28)
            .attr("r", 8)
            .attr("fill", "white")
            .attr("stroke", "#dc3545")
            .attr("stroke-width", 1)
            .style("cursor", "pointer")
            .on("click", function (event) {
                event.stopPropagation();
                deletePerson(personId, personName);
            });
        cardGroup
            .append("text")
            .attr("class", "delete-icon")
            .attr("x", -50)
            .attr("y", 31)
            .attr("text-anchor", "middle")
            .attr("font-size", "12px")
            .attr("fill", "#dc3545")
            .text("🗑")
            .style("cursor", "pointer")
            .on("click", function (event) {
                event.stopPropagation();
                deletePerson(personId, personName);
            });
    }

    // Disable console logging to prevent output on webpage
    // Uncomment the lines below if you need to debug
    // const originalLog = console.log;
    // const originalError = console.error;
    // const originalWarn = console.warn;
    // console.log = function() {};
    // console.error = function() {};
    // console.warn = function() {};

    // Keep console enabled - messages will appear in console tab only
    // The hideConsoleOutputOnPage function will prevent console text from appearing on the webpage

    // Helper function to update avatar in a group
    function updateAvatarInGroup(group, personData, svg, personId) {
        // Find the icon group - it's typically a 'g' child that contains images
        // Try multiple strategies to find where the avatar images are

        // Strategy 1: Find a group that contains images
        let iconGroup = group.select("g").filter(function () {
            return d3.select(this).selectAll("image").size() > 0;
        });

        // Strategy 2: If no group with images found, try the first g child
        if (iconGroup.empty()) {
            const firstG = group.select("g").node();
            if (firstG) {
                iconGroup = d3.select(firstG);
            }
        }

        // Strategy 3: If still empty, check if images are direct children of the group
        if (iconGroup.empty()) {
            const directImages = group.selectAll("image");
            if (directImages.size() > 0) {
                // Images are direct children, create a wrapper group or update directly
                // For now, let's try to find or create an icon group
                const existingG = group.select("g").node();
                if (existingG) {
                    iconGroup = d3.select(existingG);
                } else {
                    // Create a new g element for the icon
                    iconGroup = group
                        .append("g")
                        .attr("transform", "translate(0, -20)");
                }
            }
        }

        // Strategy 4: Search all descendant groups for one with images
        if (iconGroup.empty()) {
            const allDescendantGroups = group.selectAll("g");
            allDescendantGroups.each(function () {
                const descGroup = d3.select(this);
                if (descGroup.selectAll("image").size() > 0) {
                    iconGroup = descGroup;
                }
            });
        }

        if (!iconGroup.empty()) {
            // Remove existing avatar images from the icon group and its parent
            iconGroup.selectAll("image").remove();
            // Also remove images that might be siblings of the icon group
            const parentGroup = iconGroup.node().parentElement;
            if (parentGroup) {
                d3.select(parentGroup).selectAll("image").remove();
            }
            // Re-render avatar with new photo
            renderAvatar(iconGroup, personData, svg);
            console.log(`Updated avatar for person ${personId} in group`);
            return true;
        } else {
            // Last resort: try to update images directly in the group
            const images = group.selectAll("image");
            if (images.size() > 0) {
                // Remove old images
                images.remove();
                // Create icon group and render avatar
                const newIconGroup = group
                    .append("g")
                    .attr("transform", "translate(0, -20)");
                renderAvatar(newIconGroup, personData, svg);
                console.log(
                    `Updated avatar for person ${personId} by creating new icon group`
                );
                return true;
            }
        }
        return false;
    }

    // Function to update avatar image for a specific person in the tree
    function updatePersonAvatarInTree(personId, newPhotoPath) {
        if (!personId || !newPhotoPath) {
            console.warn(
                "updatePersonAvatarInTree: Missing personId or photo path"
            );
            return;
        }

        console.log(
            `Updating avatar in tree for person ${personId} with photo: ${newPhotoPath}`
        );

        // Find all person nodes with this ID
        const svg = d3.select("#tree-svg");
        if (svg.empty()) {
            console.warn("SVG not found for avatar update");
            return;
        }

        // Get person data from treeData
        const personData = treeData.find((p) => p.id === personId);
        if (!personData) {
            console.warn(
                `Person data not found in treeData for ID: ${personId}`
            );
            return;
        }

        // Update photo in person data
        personData.photo = newPhotoPath;

        // Find all groups with data-person-id matching this person
        // This includes parent cards, sibling cards, partner cards, etc.
        const personGroupsById = svg.selectAll(
            `g[data-person-id="${personId}"]`
        );

        console.log(
            `Found ${personGroupsById.size()} groups with data-person-id="${personId}"`
        );

        // Also find person nodes by checking their datum data
        const personNodes = svg.selectAll(".person-node");

        let updatedCount = 0;

        // Update groups with data-person-id
        personGroupsById.each(function () {
            const group = d3.select(this);
            console.log(`Updating group with data-person-id="${personId}"`);
            if (updateAvatarInGroup(group, personData, svg, personId)) {
                updatedCount++;
            }
        });

        // Update person nodes by checking datum
        personNodes.each(function () {
            const node = d3.select(this);
            const nodeData = node.datum();
            if (nodeData && nodeData.data && nodeData.data.id === personId) {
                if (updateAvatarInGroup(node, personData, svg, personId)) {
                    updatedCount++;
                }
            }
        });

        // Strategy 3: Find all card groups (parent-sibling-card, parent-partner-card, parent-card)
        // and check if they should display this person by looking at their edit/delete icons,
        // click handlers, or text content
        const allCardGroups = svg.selectAll(
            "g.parent-sibling-card, g.parent-partner-card, g.parent-card"
        );
        console.log(`Found ${allCardGroups.size()} total card groups to check`);
        allCardGroups.each(function () {
            const group = d3.select(this);
            let matchesPerson = false;

            // Method 0: Check if group already has data-person-id (should have been caught by Strategy 1, but double-check)
            const groupPersonId = group.attr("data-person-id");
            if (groupPersonId === String(personId)) {
                matchesPerson = true;
                console.log(
                    `Found matching card group by data-person-id: ${personId}`
                );
            }

            // Method 1: Check edit/delete icons - they have onclick handlers with the person ID
            if (!matchesPerson) {
                const editDeleteIcons = group.selectAll(
                    ".edit-icon, .delete-icon"
                );
                editDeleteIcons.each(function () {
                    const icon = d3.select(this);
                    const onclick = icon.attr("onclick") || "";
                    // Check if onclick contains the person ID (could be in quotes)
                    if (
                        onclick.includes(`'${personId}'`) ||
                        onclick.includes(`"${personId}"`) ||
                        onclick.includes(`(${personId},`) ||
                        onclick.includes(`(${personId})`)
                    ) {
                        matchesPerson = true;
                        console.log(
                            `Found matching card group by edit/delete icon for person ${personId}`
                        );
                    }
                });
            }

            // Method 2: Check if the group itself has a click handler (stored in __onclick or as event listener)
            // We can't easily check event listeners, but we can check if the group has data attributes
            // or check text content that matches the person's name

            // Method 3: Check text content - look for person's name in text elements
            if (!matchesPerson && personData) {
                const personName =
                    personData.name || personData.first_name || "";
                if (personName && personName.length > 2) {
                    const textElements = group.selectAll("text");
                    textElements.each(function () {
                        const textContent = d3.select(this).text();
                        // Check if text contains a significant portion of the person's name
                        const nameStart = personName.substring(
                            0,
                            Math.min(5, personName.length)
                        );
                        if (textContent.includes(nameStart)) {
                            // Additional check: see if edit/delete icons exist (even if we didn't find them before)
                            const hasEditDelete =
                                group
                                    .selectAll(".edit-icon, .delete-icon")
                                    .size() > 0;
                            if (hasEditDelete) {
                                matchesPerson = true;
                            }
                        }
                    });
                }
            }

            // Method 4: Check all nested groups for edit/delete icons (for deeply nested cards)
            if (!matchesPerson) {
                const allNestedEditDelete = group.selectAll(
                    ".edit-icon, .delete-icon"
                );
                allNestedEditDelete.each(function () {
                    const icon = d3.select(this);
                    const onclick = icon.attr("onclick") || "";
                    if (
                        onclick.includes(`'${personId}'`) ||
                        onclick.includes(`"${personId}"`) ||
                        onclick.includes(`(${personId},`) ||
                        onclick.includes(`(${personId})`)
                    ) {
                        matchesPerson = true;
                    }
                });
            }

            if (matchesPerson) {
                if (updateAvatarInGroup(group, personData, svg, personId)) {
                    updatedCount++;
                    console.log(
                        `Found and updated card group for person ${personId}`
                    );
                }
            }
        });

        // Strategy 4: Find all image elements and check if they're in a group for this person
        // by walking up the DOM tree and checking for data attributes, classes, or edit icons
        const allImages = svg.selectAll("image");
        allImages.each(function () {
            const img = d3.select(this);
            let parentElement = img.node().parentElement;
            let foundPersonGroup = false;

            // Walk up the DOM to find a group that might be for this person
            while (parentElement && parentElement !== svg.node()) {
                const parentGroup = d3.select(parentElement);

                // Check if this group has data-person-id matching our person
                const dataPersonId = parentGroup.attr("data-person-id");
                if (dataPersonId === String(personId)) {
                    foundPersonGroup = true;
                    break;
                }

                // Check if this is a card group and might contain this person
                const classes = parentGroup.attr("class") || "";
                if (
                    classes.includes("parent-sibling-card") ||
                    classes.includes("parent-partner-card") ||
                    classes.includes("parent-card") ||
                    classes.includes("person-node")
                ) {
                    // Check edit/delete icons in this group
                    const editDeleteIcons = parentGroup.selectAll(
                        ".edit-icon, .delete-icon"
                    );
                    editDeleteIcons.each(function () {
                        const icon = d3.select(this);
                        const onclick = icon.attr("onclick") || "";
                        if (
                            onclick.includes(`'${personId}'`) ||
                            onclick.includes(`"${personId}"`) ||
                            onclick.includes(`(${personId},`) ||
                            onclick.includes(`(${personId})`)
                        ) {
                            foundPersonGroup = true;
                        }
                    });
                    if (foundPersonGroup) break;
                }

                parentElement = parentElement.parentElement;
            }

            if (foundPersonGroup) {
                // Update this image directly with cache-busting
                const cacheBuster =
                    new Date().getTime() +
                    "-" +
                    Math.random().toString(36).substr(2, 9);
                const newPhotoUrl = `https://familytree.hexafume.com/storage/${newPhotoPath}?v=${cacheBuster}`;
                img.attr("href", newPhotoUrl).attr("xlink:href", newPhotoUrl);
                updatedCount++;
                console.log(
                    `Updated image href directly for person ${personId}`
                );
            }
        });

        // Strategy 5: Aggressive search - check ALL groups recursively for this person
        // This catches any cards that might not have been found by the above strategies
        const allGroups = svg.selectAll("g");
        allGroups.each(function () {
            const group = d3.select(this);

            // Skip if we already updated this group
            if (group.attr("data-avatar-updated") === "true") {
                return;
            }

            // Check for edit/delete icons anywhere in this group
            const editDeleteIcons = group.selectAll(".edit-icon, .delete-icon");
            let foundPersonId = false;

            editDeleteIcons.each(function () {
                const icon = d3.select(this);
                const onclick = icon.attr("onclick") || "";
                if (
                    onclick.includes(`'${personId}'`) ||
                    onclick.includes(`"${personId}"`) ||
                    onclick.includes(`(${personId},`) ||
                    onclick.includes(`(${personId})`)
                ) {
                    foundPersonId = true;
                }
            });

            // Also check if this group contains images (it might be an avatar group)
            const hasImages = group.selectAll("image").size() > 0;

            if (foundPersonId && hasImages) {
                // Mark as updated to avoid duplicate updates
                group.attr("data-avatar-updated", "true");
                if (updateAvatarInGroup(group, personData, svg, personId)) {
                    updatedCount++;
                    console.log(
                        `Found and updated group for person ${personId} via aggressive search`
                    );
                }
            }
        });

        // Remove the temporary marker
        svg.selectAll("g[data-avatar-updated='true']").attr(
            "data-avatar-updated",
            null
        );

        // If we found 0 locations, log more details for debugging
        if (updatedCount === 0) {
            console.warn(
                `WARNING: Could not find any cards for person ${personId} to update.`
            );
            console.warn(`Person data:`, personData);
            console.warn(`Total card groups found:`, allCardGroups.size());
            console.warn(`Total images found:`, allImages.size());

            // Try one more time with a simpler approach - just update all images that might be for this person
            // by checking if they're in groups that have text matching the person's name
            const personName = personData.name || personData.first_name || "";
            if (personName) {
                const allGroupsWithText = svg.selectAll("g");
                allGroupsWithText.each(function () {
                    const group = d3.select(this);
                    const textElements = group.selectAll("text");
                    textElements.each(function () {
                        const textContent = d3.select(this).text();
                        if (
                            textContent &&
                            personName &&
                            textContent.includes(personName.substring(0, 3))
                        ) {
                            const images = group.selectAll("image");
                            if (images.size() > 0) {
                                const cacheBuster =
                                    new Date().getTime() +
                                    "-" +
                                    Math.random().toString(36).substr(2, 9);
                                const newPhotoUrl = `https://familytree.hexafume.com/storage/${newPhotoPath}?v=${cacheBuster}`;
                                images
                                    .attr("href", newPhotoUrl)
                                    .attr("xlink:href", newPhotoUrl);
                                updatedCount++;
                                console.log(
                                    `Updated image for person ${personId} by name matching: ${textContent}`
                                );
                            }
                        }
                    });
                });
            }
        }

        console.log(
            `Avatar update complete for person ${personId}. Updated ${updatedCount} locations.`
        );
    }

    /**
     * ============================================================================
     * CARD CREATION STANDARDS FOR FUTURE DEVELOPMENT
     * ============================================================================
     *
     * When creating NEW person cards in the future, follow these rules:
     *
     * 1. ALWAYS use renderAvatar() for displaying person avatars
     *    - DO NOT use hardcoded avatar images (blue_card.png, pink card.png) directly
     *    - renderAvatar() handles photos, cache-busting, and fallbacks automatically
     *
     * 2. Standard card creation pattern:
     *    const cardGroup = parent.append("g")
     *        .attr("class", "your-card-class")
     *        .attr("data-person-id", personData.id)
     *        .attr("transform", `translate(${x}, ${y})`);
     *
     *    // Card rectangle
     *    cardGroup.append("rect")...
     *
     *    // Avatar icon - ALWAYS use renderAvatar()
     *    const iconGroup = cardGroup.append("g")
     *        .attr("transform", "translate(0, -20)");
     *    renderAvatar(iconGroup, personData, svg);
     *
     * 3. For convenience, use the createPersonCard() helper function which
     *    automatically follows this pattern and ensures consistency.
     *
     * 4. This ensures:
     *    - Uploaded photos display correctly
     *    - Photos update immediately after upload
     *    - Cache-busting prevents stale images
     *    - Consistent behavior across all card types
     *
     * ============================================================================
     */

    /**
     * Helper function to render avatar with photo support
     *
     * IMPORTANT: This function MUST be used for ALL person cards in the tree
     * to ensure uploaded photos are displayed and updated correctly.
     *
     * DO NOT use hardcoded avatar images (blue_card.png, pink card.png) directly.
     * Always use this function which handles:
     * - Photo display with cache-busting
     * - Gender-based fallback avatars
     * - Circular clipping for photos
     * - Error handling
     *
     * For creating new cards, consider using createPersonCard() helper function
     * which automatically uses renderAvatar().
     *
     * @param {d3.Selection} iconGroup - D3 selection of the group element to append avatar to
     * @param {Object} personData - Person data object (must have id, gender, photo)
     * @param {d3.Selection} svg - The SVG element (required for clipPath definitions)
     * @param {number} x - X position of avatar (default: -24)
     * @param {number} y - Y position of avatar (default: -24)
     * @param {number} width - Width of avatar (default: 48)
     * @param {number} height - Height of avatar (default: 48)
     * @param {number} clipRadius - Radius for circular clipping (default: 24)
     */
    function renderAvatar(
        iconGroup,
        personData,
        svg,
        x = -24,
        y = -24,
        width = 48,
        height = 48,
        clipRadius = 24
    ) {
        // Check if personData exists and has photo
        if (!personData) {
            console.warn("renderAvatar: personData is null/undefined");
            // Default to male avatar if no data
            iconGroup
                .append("image")
                .attr(
                    "xlink:href",
                    "https://familytree.hexafume.com/images/avatars/blue_card.png"
                )
                .attr("href", "https://familytree.hexafume.com/images/avatars/blue_card.png")
                .attr("x", x)
                .attr("y", y)
                .attr("width", width)
                .attr("height", height);
            return;
        }

        // Check if photo exists and is not empty
        const hasPhoto = personData.photo && personData.photo.trim() !== "";
        if (hasPhoto) {
            console.log(
                `renderAvatar: Using photo for person ${personData.id} (${
                    personData.name || personData.first_name
                }):`,
                personData.photo
            );
            // Use uploaded photo with circular clip
            const clipId = `clip-avatar-${
                personData.id
            }-${Date.now()}-${Math.random()}`;
            svg.append("defs")
                .append("clipPath")
                .attr("id", clipId)
                .append("circle")
                .attr("cx", 0)
                .attr("cy", 0)
                .attr("r", clipRadius);

            // Add cache-busting parameter to prevent browser caching
            // Use timestamp + random to ensure unique URL each time
            const cacheBuster =
                new Date().getTime() +
                "-" +
                Math.random().toString(36).substr(2, 9);
            const photoUrl = `https://familytree.hexafume.com/storage/${personData.photo}?v=${cacheBuster}`;

            iconGroup
                .append("image")
                .attr("xlink:href", photoUrl)
                .attr("href", photoUrl)
                .attr("x", x)
                .attr("y", y)
                .attr("width", width)
                .attr("height", height)
                .attr("clip-path", `url(#${clipId})`)
                .on("error", function () {
                    console.error(
                        "Failed to load photo for person:",
                        personData.id,
                        "URL:",
                        photoUrl
                    );
                    // Fallback to default avatar on error
                    d3.select(this).remove();
                    const gender = personData.gender || "male";
                    const fallbackUrl =
                        gender === "female"
                            ? "https://familytree.hexafume.com/images/avatars/pink card.png"
                            : "https://familytree.hexafume.com/images/avatars/blue_card.png";
                    iconGroup
                        .append("image")
                        .attr("xlink:href", fallbackUrl)
                        .attr("href", fallbackUrl)
                        .attr("x", x)
                        .attr("y", y)
                        .attr("width", width)
                        .attr("height", height);
                });
        } else {
            // Use gender-based default avatar
            console.log(
                `renderAvatar: No photo for person ${personData.id} (${
                    personData.name || personData.first_name
                }), using default avatar`
            );
            const gender = personData.gender || "male";
            if (gender === "female") {
                iconGroup
                    .append("image")
                    .attr(
                        "xlink:href",
                        "https://familytree.hexafume.com/images/avatars/pink card.png"
                    )
                    .attr("href", "https://familytree.hexafume.com/images/avatars/pink card.png")
                    .attr("x", x)
                    .attr("y", y)
                    .attr("width", width)
                    .attr("height", height);
            } else {
                iconGroup
                    .append("image")
                    .attr(
                        "xlink:href",
                        "https://familytree.hexafume.com/images/avatars/blue_card.png"
                    )
                    .attr("href", "https://familytree.hexafume.com/images/avatars/blue_card.png")
                    .attr("x", x)
                    .attr("y", y)
                    .attr("width", width)
                    .attr("height", height);
            }
        }
    }

    /**
     * Helper function to create a person card with avatar
     * This ensures all cards (current and future) use renderAvatar() consistently
     *
     * @param {d3.Selection} parentGroup - The parent D3 selection to append the card to
     * @param {Object} personData - The person data object (must have id, name/first_name, gender, photo)
     * @param {Object} options - Configuration options:
     *   - cardClass: CSS class for the card (e.g., 'parent-card', 'sibling-card')
     *   - x: X position for the card transform
     *   - y: Y position for the card transform
     *   - cardWidth: Width of the card rectangle (default: 120)
     *   - cardHeight: Height of the card rectangle (default: 80)
     *   - borderColor: Border color (default: gender-based)
     *   - onClick: Click handler function
     * @param {d3.Selection} svg - The SVG element (required for renderAvatar)
     * @returns {d3.Selection} The created card group
     */
    function createPersonCard(parentGroup, personData, options, svg) {
        if (!personData || !personData.id) {
            console.warn(
                "createPersonCard: personData is required and must have an id"
            );
            return null;
        }

        const defaults = {
            cardClass: "person-card",
            x: 0,
            y: 0,
            cardWidth: 120,
            cardHeight: 80,
            borderColor: personData.gender === "female" ? "#ffb6c1" : "#add8e6",
            onClick: null,
        };

        const config = { ...defaults, ...options };

        // Create the card group
        const cardGroup = parentGroup
            .append("g")
            .attr("class", config.cardClass)
            .attr("data-person-id", personData.id)
            .attr("transform", `translate(${config.x}, ${config.y})`);

        // Add click handler if provided
        if (config.onClick) {
            cardGroup.on("click", function (event) {
                event.stopPropagation();
                config.onClick(event, personData);
            });
        }

        // Create card rectangle
        const rect = cardGroup
            .append("rect")
            .attr("x", -config.cardWidth / 2)
            .attr("y", -config.cardHeight / 2)
            .attr("width", config.cardWidth)
            .attr("height", config.cardHeight)
            .attr("rx", 8)
            .attr("ry", 8)
            .attr("fill", "white")
            .attr("stroke", config.borderColor)
            .attr("stroke-width", 3)
            .style("filter", "drop-shadow(0 2px 4px rgba(0,0,0,0.1))")
            .style("cursor", config.onClick ? "pointer" : "default");

        // Add click handler to rect as well
        if (config.onClick) {
            rect.on("click", function (event) {
                event.stopPropagation();
                config.onClick(event, personData);
            });
        }

        // Create icon group and render avatar
        const iconGroup = cardGroup
            .append("g")
            .attr("transform", "translate(0, -20)");

        // Always use renderAvatar for consistent photo support
        renderAvatar(iconGroup, personData, svg);

        return cardGroup;
    }

    // Initialize tree visualization
    async function initTree() {
        try {
            // Add cache-busting parameter to ensure fresh data
            const cacheBuster = `?t=${Date.now()}&r=${Math.random()}`;
            const response = await fetch(
                'https://familytree.hexafume.com/family-tree/data/tree' + cacheBuster
            );

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            treeData = data;

            console.log("Tree data loaded:", treeData);
            console.log("Number of people:", treeData.length);

            if (!Array.isArray(treeData)) {
                console.error("Tree data is not an array!", treeData);
                throw new Error("Invalid tree data format");
            }

            // Initialize empty sets first (before loading from storage)
            if (!window.hiddenAncestorIds) {
                window.hiddenAncestorIds = new Set();
            }
            if (!window.hiddenAncestorsByPerson) {
                window.hiddenAncestorsByPerson = new Map();
            }
            if (!window.hiddenPersonBranches) {
                window.hiddenPersonBranches = new Set();
            }

            // Load hidden state from localStorage AFTER treeData is loaded
            // This ensures validation works correctly with current tree data
            loadHiddenStateFromStorage();

            // Additional safety check: If treeData is empty or invalid, clear all localStorage
            if (!treeData || treeData.length === 0) {
                console.warn(
                    "Tree data is empty - clearing localStorage to prevent corruption"
                );
                localStorage.removeItem("familyTree_hiddenAncestorIds");
                localStorage.removeItem("familyTree_hiddenAncestorsByPerson");
                localStorage.removeItem("familyTree_hiddenPersonBranches");
                window.hiddenAncestorIds = new Set();
                window.hiddenAncestorsByPerson = new Map();
                window.hiddenPersonBranches = new Set();
            }

            // Additional safety: Check if hidden ancestor IDs are suspiciously high
            // If more than 80% of people are marked as hidden, something is wrong
            if (treeData && treeData.length > 0 && window.hiddenAncestorIds) {
                const hiddenCount = window.hiddenAncestorIds.size;
                const totalCount = treeData.length;
                const hiddenPercentage = (hiddenCount / totalCount) * 100;

                if (hiddenPercentage > 80) {
                    console.warn(
                        `Suspicious: ${hiddenPercentage.toFixed(
                            1
                        )}% of people are marked as hidden (${hiddenCount}/${totalCount}) - clearing localStorage to prevent corruption`
                    );
                    localStorage.removeItem("familyTree_hiddenAncestorIds");
                    localStorage.removeItem(
                        "familyTree_hiddenAncestorsByPerson"
                    );
                    localStorage.removeItem("familyTree_hiddenPersonBranches");
                    window.hiddenAncestorIds = new Set();
                    window.hiddenAncestorsByPerson = new Map();
                    window.hiddenPersonBranches = new Set();
                }
            }

            // Log siblings data for each person
            treeData.forEach((person) => {
                if (person.siblings && person.siblings.length > 0) {
                    console.log(
                        `${person.name} (ID: ${person.id}) has siblings:`,
                        person.siblings
                    );
                }
            });

            if (!treeData || treeData.length === 0) {
                console.warn("No tree data available");
                return;
            }

            console.log("Clearing previous tree state...");
            // Clear SVG completely
            const svg = d3.select("#tree-svg");
            if (svg && !svg.empty()) {
                svg.selectAll("*").remove();
            }

            // Reset tree variables
            nodes = null;
            links = null;
            root = null;

            console.log("Setting up tree...");
            setupTree();
            console.log("Building tree...");
            buildTree();
            console.log(
                "Waiting for tree to render before loading zoom state..."
            );
            // Wait for tree to fully render before loading zoom state
            setTimeout(() => {
                console.log("Loading saved zoom/pan state...");
                // Try to load saved zoom state, otherwise center the tree
                if (!loadZoomStateFromStorage()) {
                    console.log("No saved zoom state found, centering tree...");
                    centerTree();
                }
            }, 100);

            // Safety check: Validate tree structure after building
            // If tree looks corrupted (no nodes rendered or too many root nodes), clear localStorage and rebuild
            const renderedNodes = svg.selectAll(".node").size();
            const rootNodes = root
                ? root.descendants().filter((d) => d.depth === 0)
                : [];

            // Check for corruption indicators:
            // 1. No nodes rendered but we have data
            // 2. Too many root nodes (should typically be 1 - the main person)
            // 3. Tree data exists but tree structure is broken
            const isCorrupted =
                (renderedNodes === 0 && treeData && treeData.length > 0) ||
                (rootNodes.length > 5 && treeData && treeData.length > 0) ||
                (treeData &&
                    treeData.length > 0 &&
                    (!root ||
                        !root.descendants ||
                        root.descendants().length === 0));

            if (isCorrupted) {
                console.warn(
                    "Tree appears corrupted - clearing localStorage and rebuilding...",
                    {
                        renderedNodes,
                        rootNodesCount: rootNodes.length,
                        treeDataLength: treeData ? treeData.length : 0,
                        hasRoot: !!root,
                        descendantsCount: root ? root.descendants().length : 0,
                    }
                );
                localStorage.removeItem("familyTree_hiddenAncestorIds");
                localStorage.removeItem("familyTree_hiddenAncestorsByPerson");
                localStorage.removeItem("familyTree_hiddenPersonBranches");
                window.hiddenAncestorIds = new Set();
                window.hiddenAncestorsByPerson = new Map();
                window.hiddenPersonBranches = new Set();

                // Rebuild tree with clean state
                console.log("Rebuilding tree with clean state...");
                buildTree();
                centerTree();
            }

            console.log("Tree initialization complete");

            // Setup universal card click handler after tree is built
            setTimeout(function () {
                setupUniversalCardClickHandler();
            }, 500);
        } catch (error) {
            console.error("Error loading tree data:", error);
            console.error("Error stack:", error.stack);
        }
    }

    function setupTree() {
        const container = document.getElementById("tree-container");
        if (!container) {
            console.error("Tree container not found!");
            return;
        }
        width = container.clientWidth;
        height = container.clientHeight;

        // Clear previous content
        d3.select("#tree-svg").selectAll("*").remove();

        svg = d3
            .select("#tree-svg")
            .attr("width", width)
            .attr("height", height)
            .style("pointer-events", "all"); // Ensure SVG can receive mouse events

        g = svg.append("g");

        // Set up zoom behavior (allows panning on empty space and zooming)
        zoom = d3
            .zoom()
            .scaleExtent([0.1, 3])
            .on("zoom", (event) => {
                g.attr("transform", event.transform);
                // Save zoom/pan state to localStorage
                saveZoomStateToStorage(event.transform);
            })
            .filter(function (event) {
                // Default filter: allow left mouse button and touch
                // Only prevent on interactive elements
                const target = event.target;

                // Prevent panning on interactive elements
                if (
                    (target.classList &&
                        (target.classList.contains("edit-icon") ||
                            target.classList.contains("delete-icon"))) ||
                    target.closest("button") ||
                    target.closest(".control-btn")
                ) {
                    return false;
                }

                // Allow panning everywhere else
                return true;
            });

        // Apply zoom to SVG (allows panning on empty space)
        svg.call(zoom);

        // Add grab cursor to SVG to indicate draggable (like MyHeritage)
        svg.style("cursor", "grab");

        // Change cursor to grabbing when dragging starts
        svg.on("mousedown", function (event) {
            const target = event.target;
            // Only change cursor if not clicking on interactive elements
            if (
                !(target.classList && target.classList.contains("edit-icon")) &&
                !(
                    target.classList && target.classList.contains("delete-icon")
                ) &&
                !target.closest("button") &&
                !target.closest(".control-btn")
            ) {
                svg.style("cursor", "grabbing");
            }
        });

        svg.on("mouseup", function () {
            svg.style("cursor", "grab");
        });

        svg.on("mouseleave", function () {
            svg.style("cursor", "grab");
        });

        // Create tree layout - vertical orientation
        tree = d3
            .tree()
            .size([width - 300, height - 100])
            .separation((a, b) => {
                // Bring siblings much closer together
                if (a.parent === b.parent) {
                    return 0.05 / a.depth; // Very close for siblings - reduced spacing
                }
                return 1.5 / a.depth; // Normal separation for others
            });

        // Find the main person first (before building hierarchy)
        // PRIORITY 1: Find the logged-in user's Person (by user_id) - this is ALWAYS the main person
        // PRIORITY 2: If no user_id match, find the first root person (person with no parents)
        let mainPersonIdForHierarchy = null;

        // Use the logged-in user's ID (set at top of script)
        if (loggedInUserId) {
            // Find the Person record linked to the logged-in user
            const userPersonForHierarchy = treeData.find(
                (p) => p.user_id === loggedInUserId
            );
            if (userPersonForHierarchy) {
                mainPersonIdForHierarchy = userPersonForHierarchy.id;
            }
        }

        // Fallback: If no user_id match, find the first root person
        if (!mainPersonIdForHierarchy) {
            const rootPersonsForHierarchy = treeData
                .filter((p) => !p.parents || p.parents.length === 0)
                .sort((a, b) => a.id - b.id);
            if (rootPersonsForHierarchy.length > 0) {
                mainPersonIdForHierarchy = rootPersonsForHierarchy[0].id;
            } else if (treeData.length > 0) {
                // Final fallback: use the first person
                mainPersonIdForHierarchy = treeData.sort(
                    (a, b) => a.id - b.id
                )[0].id;
            }
        }

        // Get parent IDs of main person AND all their ancestors (recursively) to exclude them from tree hierarchy
        // This ensures grandparents, great-grandparents, etc. don't appear in the main tree
        const getAllAncestors = (personId, visited = new Set()) => {
            if (visited.has(personId)) return []; // Prevent infinite loops
            visited.add(personId);

            const person = treeData.find((p) => p.id === personId);
            if (!person || !person.parents || person.parents.length === 0) {
                return [];
            }

            const ancestors = [...person.parents];
            person.parents.forEach((parentId) => {
                const parentAncestors = getAllAncestors(parentId, visited);
                ancestors.push(...parentAncestors);
            });

            return ancestors;
        };

        const mainPersonParentsForHierarchy = [];
        if (mainPersonIdForHierarchy) {
            const mainPersonData = treeData.find(
                (p) => p.id === mainPersonIdForHierarchy
            );
            if (mainPersonData && mainPersonData.parents) {
                // Get direct parents
                mainPersonParentsForHierarchy.push(...mainPersonData.parents);

                // Get all ancestors of those parents (grandparents, great-grandparents, etc.)
                mainPersonData.parents.forEach((parentId) => {
                    const ancestors = getAllAncestors(parentId);
                    ancestors.forEach((ancestorId) => {
                        if (
                            !mainPersonParentsForHierarchy.includes(ancestorId)
                        ) {
                            mainPersonParentsForHierarchy.push(ancestorId);
                        }
                    });
                });
            }
        }

        console.log(
            "Excluded ancestor IDs from main tree:",
            mainPersonParentsForHierarchy,
            `(${mainPersonParentsForHierarchy.length} ancestors excluded)`
        );

        // Safety check: If too many ancestors are being excluded relative to total data, something might be wrong
        if (treeData && treeData.length > 0) {
            const excludedPercentage =
                (mainPersonParentsForHierarchy.length / treeData.length) * 100;
            if (excludedPercentage > 90) {
                console.warn(
                    `Warning: ${excludedPercentage.toFixed(
                        1
                    )}% of tree data is being excluded (${
                        mainPersonParentsForHierarchy.length
                    }/${treeData.length}). This might indicate data corruption.`
                );
            }
        }

        // Build hierarchy (exclude main person's parents and hidden ancestors)
        const dataMap = new Map();
        treeData.forEach((d) => {
            // Skip main person's parents - they'll only show above main person
            // Also skip hidden ancestors (but not the main person's direct parents themselves)
            const isMainPersonParent = mainPersonParentsForHierarchy.includes(
                d.id
            );
            const isHiddenAncestor =
                window.hiddenAncestorIds && window.hiddenAncestorIds.has(d.id);

            // Don't exclude if it's a direct parent of main person (they show as cards above)
            // Only exclude if it's a hidden ancestor that's NOT a direct parent
            if (isHiddenAncestor && !isMainPersonParent) {
                // Skip this hidden ancestor (but keep main person's parents visible as cards)
                console.log(
                    "Excluding hidden ancestor from tree:",
                    d.id,
                    d.name || d.first_name
                );
                return;
            }

            // Always add to dataMap - we'll filter out main person's parents later when building hierarchy
            // This ensures parent cards can still be displayed even if their ancestors are hidden
            dataMap.set(d.id, { ...d, children: [] });
        });

        console.log("dataMap size after filtering:", dataMap.size);
        console.log(
            "Hidden ancestor IDs:",
            window.hiddenAncestorIds ? Array.from(window.hiddenAncestorIds) : []
        );
        console.log(
            "Main person parents (should be in dataMap):",
            mainPersonParentsForHierarchy
        );

        // Verify main person's direct parents are in dataMap (they must always be visible as cards)
        if (mainPersonIdForHierarchy) {
            const mainPersonData = treeData.find(
                (p) => p.id === mainPersonIdForHierarchy
            );
            if (mainPersonData && mainPersonData.parents) {
                mainPersonData.parents.forEach((parentId) => {
                    if (!dataMap.has(parentId)) {
                        console.error(
                            "ERROR: Main person parent",
                            parentId,
                            "is missing from dataMap!"
                        );
                        // Force add it - this should never happen, but just in case
                        const parentData = treeData.find(
                            (p) => p.id === parentId
                        );
                        if (parentData) {
                            dataMap.set(parentId, {
                                ...parentData,
                                children: [],
                            });
                            console.log(
                                "Fixed: Added missing parent to dataMap:",
                                parentId
                            );
                        }
                    } else {
                        console.log(
                            "Verified: Main person parent",
                            parentId,
                            "is in dataMap"
                        );
                    }
                });
            }
        }

        // Find root nodes (nodes without parents, excluding main person's parents)
        // Also exclude parent siblings - they're shown as cards next to parents, not in the tree hierarchy
        // Also exclude grandparent siblings - they're shown as cards next to grandparents, not in the tree hierarchy
        const parentSiblingIds = new Set();
        if (mainPersonIdForHierarchy) {
            const mainPersonData = treeData.find(
                (p) => p.id === mainPersonIdForHierarchy
            );
            if (mainPersonData && mainPersonData.parents) {
                mainPersonData.parents.forEach((parentId) => {
                    const parentData = treeData.find((p) => p.id === parentId);
                    if (parentData) {
                        // Get explicit siblings
                        if (
                            parentData.siblings &&
                            parentData.siblings.length > 0
                        ) {
                            parentData.siblings.forEach((sibId) =>
                                parentSiblingIds.add(sibId)
                            );
                        }
                        // Get implicit siblings (shared parents)
                        if (
                            parentData.parents &&
                            parentData.parents.length > 0
                        ) {
                            treeData.forEach((p) => {
                                if (p.id === parentId) return;
                                if (
                                    p.parents &&
                                    p.parents.length > 0 &&
                                    p.parents.every((pId) =>
                                        parentData.parents.includes(pId)
                                    ) &&
                                    parentData.parents.every((pId) =>
                                        p.parents.includes(pId)
                                    )
                                ) {
                                    parentSiblingIds.add(p.id);
                                }
                            });
                        }

                        // Also collect siblings of grandparents (parents of parents)
                        if (
                            parentData.parents &&
                            parentData.parents.length > 0
                        ) {
                            parentData.parents.forEach((grandparentId) => {
                                const grandparentData = treeData.find(
                                    (p) => p.id === grandparentId
                                );
                                if (grandparentData) {
                                    // Get explicit siblings of grandparent
                                    if (
                                        grandparentData.siblings &&
                                        grandparentData.siblings.length > 0
                                    ) {
                                        grandparentData.siblings.forEach(
                                            (sibId) =>
                                                parentSiblingIds.add(sibId)
                                        );
                                    }
                                    // Get implicit siblings of grandparent (shared parents)
                                    if (
                                        grandparentData.parents &&
                                        grandparentData.parents.length > 0
                                    ) {
                                        treeData.forEach((p) => {
                                            if (p.id === grandparentId) return;
                                            if (
                                                p.parents &&
                                                p.parents.length > 0 &&
                                                p.parents.every((pId) =>
                                                    grandparentData.parents.includes(
                                                        pId
                                                    )
                                                ) &&
                                                grandparentData.parents.every(
                                                    (pId) =>
                                                        p.parents.includes(pId)
                                                )
                                            ) {
                                                parentSiblingIds.add(p.id);
                                            }
                                        });
                                    }
                                }
                            });
                        }
                    }
                });
            }
        }
        console.log(
            "Parent and grandparent sibling IDs to exclude from tree hierarchy:",
            Array.from(parentSiblingIds)
        );

        const rootNodes = [];
        treeData.forEach((d) => {
            // Skip if not in dataMap (was excluded)
            if (!dataMap.has(d.id)) {
                return;
            }

            // Skip main person's parents
            if (mainPersonParentsForHierarchy.includes(d.id)) {
                return;
            }

            // Skip parent and grandparent siblings - they're shown as cards next to parents/grandparents, not in the tree hierarchy
            if (parentSiblingIds.has(d.id)) {
                console.log(
                    "Excluding parent/grandparent sibling from tree hierarchy:",
                    d.id,
                    d.name || d.first_name
                );
                return;
            }

            // Skip partners of main person's parents - they're shown as partner cards, not in the tree hierarchy
            if (mainPersonIdForHierarchy) {
                const mainPersonData = treeData.find(
                    (p) => p.id === mainPersonIdForHierarchy
                );
                if (mainPersonData && mainPersonData.parents) {
                    mainPersonData.parents.forEach((parentId) => {
                        const parentData = treeData.find(
                            (p) => p.id === parentId
                        );
                        if (
                            parentData &&
                            parentData.spouses &&
                            parentData.spouses.includes(d.id)
                        ) {
                            // This person is a spouse of a parent - exclude from tree hierarchy
                            // (unless they're the mother, who is shown as a parent card)
                            const isMother =
                                mainPersonData.parents.includes(d.id) &&
                                d.gender === "female";
                            if (!isMother) {
                                console.log(
                                    "Excluding parent partner from tree hierarchy:",
                                    d.id,
                                    d.name || d.first_name
                                );
                                return;
                            }
                        }
                    });
                }

                // Skip partners of children - they're shown as partner cards next to children, not in the tree hierarchy
                if (mainPersonData) {
                    // Get all children (main person + siblings)
                    const allChildrenIdsForHierarchy = new Set();
                    allChildrenIdsForHierarchy.add(mainPersonIdForHierarchy);

                    // Add siblings
                    if (mainPersonData.siblings) {
                        mainPersonData.siblings.forEach((siblingId) => {
                            allChildrenIdsForHierarchy.add(siblingId);
                        });
                    }

                    // Add implicit siblings
                    if (
                        mainPersonData.parents &&
                        mainPersonData.parents.length > 0
                    ) {
                        treeData.forEach((p) => {
                            if (p.id === mainPersonIdForHierarchy) return;
                            if (p.parents && p.parents.length > 0) {
                                const sharesParent =
                                    mainPersonData.parents.some((pid) =>
                                        p.parents.includes(pid)
                                    );
                                if (sharesParent) {
                                    allChildrenIdsForHierarchy.add(p.id);
                                }
                            }
                        });
                    }

                    // Check if this person is a partner of any child
                    if (!allChildrenIdsForHierarchy.has(d.id)) {
                        // Check if any child has this person as a spouse
                        const isPartnerOfChild = Array.from(
                            allChildrenIdsForHierarchy
                        ).some((childId) => {
                            const childData = treeData.find(
                                (p) => p.id === childId
                            );
                            return (
                                childData &&
                                childData.spouses &&
                                childData.spouses.includes(d.id)
                            );
                        });

                        if (isPartnerOfChild) {
                            console.log(
                                "Excluding child partner from tree hierarchy:",
                                d.id,
                                d.name || d.first_name,
                                "is partner of a child"
                            );
                            return;
                        }
                    }
                }
            }

            // Check if person has any valid (non-excluded) parents
            // Don't filter out hidden ancestors here - they're already excluded from dataMap
            const validParents = d.parents
                ? d.parents.filter(
                      (pId) =>
                          !mainPersonParentsForHierarchy.includes(pId) &&
                          (!window.hiddenAncestorIds ||
                              !window.hiddenAncestorIds.has(pId)) &&
                          dataMap.has(pId) // Parent must exist in dataMap
                  )
                : [];

            // Special case: If this is the main person (Muhammad Saaim), treat him as root node
            // even if his parents are excluded, so he appears at the root level
            if (d.id === mainPersonIdForHierarchy) {
                const node = dataMap.get(d.id);
                if (node) {
                    rootNodes.push(node);
                }
            } else if (validParents.length === 0) {
                // No valid parents - this is a root node
                // BUT: Exclude if this person is a partner of someone (they should appear as partner cards, not root nodes)
                const isPartnerOfAnyone = treeData.some((person) => {
                    return person.spouses && person.spouses.includes(d.id);
                });

                if (isPartnerOfAnyone) {
                    console.log(
                        "Excluding partner from root nodes (has no parents but is a partner):",
                        d.id,
                        d.name || d.first_name
                    );
                    return; // Skip - this is a partner, should appear as partner card, not root node
                }

                // Exclude parents of partners - they should only appear as parent cards above partner cards, not in tree hierarchy
                // Check if this person is a parent of any partner (spouse of main person's parents)
                if (mainPersonIdForHierarchy) {
                    const mainPersonData = treeData.find(
                        (p) => p.id === mainPersonIdForHierarchy
                    );
                    if (mainPersonData && mainPersonData.parents) {
                        const isParentOfPartner = mainPersonData.parents.some(
                            (parentId) => {
                                const parentData = treeData.find(
                                    (p) => p.id === parentId
                                );
                                if (parentData && parentData.spouses) {
                                    // Check if any of this parent's partners have d.id as their parent
                                    return parentData.spouses.some(
                                        (partnerId) => {
                                            const partnerData = treeData.find(
                                                (p) => p.id === partnerId
                                            );
                                            return (
                                                partnerData &&
                                                partnerData.parents &&
                                                partnerData.parents.includes(
                                                    d.id
                                                )
                                            );
                                        }
                                    );
                                }
                                return false;
                            }
                        );

                        if (isParentOfPartner) {
                            console.log(
                                "Excluding parent of partner from root nodes:",
                                d.id,
                                d.name || d.first_name
                            );
                            return; // Skip - this is a parent of a partner, should only appear as parent card
                        }
                    }
                }

                const node = dataMap.get(d.id);
                if (node) {
                    rootNodes.push(node);
                }
            } else {
                // Has valid parents - add as child
                // BUT: Exclude if this person is a parent of a partner (they should only appear as parent cards)
                let isParentOfPartner = false;
                if (mainPersonIdForHierarchy) {
                    const mainPersonData = treeData.find(
                        (p) => p.id === mainPersonIdForHierarchy
                    );
                    if (mainPersonData && mainPersonData.parents) {
                        isParentOfPartner = mainPersonData.parents.some(
                            (parentId) => {
                                const parentData = treeData.find(
                                    (p) => p.id === parentId
                                );
                                if (parentData && parentData.spouses) {
                                    // Check if any of this parent's partners have d.id as their parent
                                    return parentData.spouses.some(
                                        (partnerId) => {
                                            const partnerData = treeData.find(
                                                (p) => p.id === partnerId
                                            );
                                            return (
                                                partnerData &&
                                                partnerData.parents &&
                                                partnerData.parents.includes(
                                                    d.id
                                                )
                                            );
                                        }
                                    );
                                }
                                return false;
                            }
                        );
                    }
                }

                if (isParentOfPartner) {
                    console.log(
                        "Excluding parent of partner from tree hierarchy (has parents but is parent of partner):",
                        d.id,
                        d.name || d.first_name
                    );
                    return; // Skip - this is a parent of a partner, should only appear as parent card
                }

                validParents.forEach((parentId) => {
                    const parent = dataMap.get(parentId);
                    if (parent) {
                        const childNode = dataMap.get(d.id);
                        if (
                            childNode &&
                            !parent.children.find((c) => c.id === d.id)
                        ) {
                            parent.children.push(childNode);
                        }
                    }
                });
            }
        });

        // Sort children - but we'll do custom sorting in hierarchy.eachBefore
        // Don't sort here as we want: [brothers] [Muhammad Saaim] [sisters]

        // Sort root nodes - put main person (Muhammad Saaim) first
        if (mainPersonIdForHierarchy) {
            rootNodes.sort((a, b) => {
                if (a.id === mainPersonIdForHierarchy) return -1;
                if (b.id === mainPersonIdForHierarchy) return 1;
                return a.id - b.id; // Otherwise sort by ID
            });
        }

        // If multiple root nodes, create a virtual root to connect them
        if (rootNodes.length > 1) {
            const virtualRoot = {
                id: "virtual-root",
                name: "",
                children: rootNodes,
            };
            root = virtualRoot;
        } else if (rootNodes.length === 1) {
            root = rootNodes[0];
        } else {
            // If no root nodes, try to use first node from dataMap
            const firstNode = dataMap.values().next().value;
            if (firstNode) {
                console.warn(
                    "No root nodes found, using first node from dataMap:",
                    firstNode.id
                );
                root = firstNode;
            } else {
                console.error(
                    "No nodes available in dataMap! Cannot build tree."
                );
                console.error("Tree data length:", treeData.length);
                console.error(
                    "Hidden ancestor IDs:",
                    window.hiddenAncestorIds
                        ? Array.from(window.hiddenAncestorIds)
                        : []
                );
                console.error(
                    "Main person parents for hierarchy:",
                    mainPersonParentsForHierarchy
                );
                alert(
                    "Error: No nodes available to display. Please refresh the page."
                );
                return; // Exit early if no nodes
            }
        }

        console.log("Root nodes:", rootNodes.length);
        console.log("Root:", root);
        console.log("Data map size:", dataMap.size);

        // Convert to hierarchy format
        const hierarchy = d3.hierarchy(root);

        // Find the main person - UNIVERSAL LOGIC that works for all users
        // The main person is the root person (person with no parents)
        let mainPersonId = null;
        const rootPersonsForTree = treeData
            .filter((p) => !p.parents || p.parents.length === 0)
            .sort((a, b) => a.id - b.id);
        if (rootPersonsForTree.length > 0) {
            mainPersonId = rootPersonsForTree[0].id;
        } else if (treeData.length > 0) {
            // Fallback: If no root person exists, use the first person
            mainPersonId = treeData.sort((a, b) => a.id - b.id)[0].id;
        }

        // Sort nodes at each level to control positioning
        // Order: [main person] [brothers (male)] [sisters (female)]
        hierarchy.eachBefore(function (node) {
            if (node.children && node.children.length > 1) {
                // Separate into groups: main person first, then brothers (males), then sisters (females)
                const mainPersonNode = mainPersonId
                    ? node.children.find((c) => c.data.id === mainPersonId)
                    : null;
                const brothers = node.children
                    .filter((c) => {
                        if (c.data.id === mainPersonId) return false; // Exclude main person
                        return c.data.gender === "male";
                    })
                    .sort((a, b) => a.data.id - b.data.id); // Sort brothers by ID
                const sisters = node.children
                    .filter((c) => {
                        if (c.data.id === mainPersonId) return false; // Exclude main person
                        return c.data.gender === "female";
                    })
                    .sort((a, b) => a.data.id - b.data.id); // Sort sisters by ID

                // Rebuild children array: [main person] [brothers] [sisters]
                // This ensures: main person (left) → brother (right) → sister (rightmost)
                node.children = [];
                if (mainPersonNode) {
                    node.children.push(mainPersonNode);
                }
                if (brothers.length > 0) {
                    node.children.push(...brothers);
                }
                if (sisters.length > 0) {
                    node.children.push(...sisters);
                }

                console.log(
                    "Sorted children:",
                    node.children.map(
                        (c) =>
                            (c.data.name || c.data.first_name) +
                            " (gender: " +
                            c.data.gender +
                            ", id: " +
                            c.data.id +
                            ")"
                    )
                );
            }
        });

        root = tree(hierarchy);

        // After tree layout, re-sort siblings to ensure correct order: [brothers] [Muhammad Saaim] [sisters]
        root.eachBefore(function (node) {
            if (node.children && node.children.length > 1) {
                // Separate into groups
                const muhammadNode = mainPersonId
                    ? node.children.find((c) => c.data.id === mainPersonId)
                    : null;
                const brothers = node.children
                    .filter((c) => {
                        if (c.data.id === mainPersonId) return false;
                        return c.data.gender === "male";
                    })
                    .sort((a, b) => a.data.id - b.data.id);
                const sisters = node.children
                    .filter((c) => {
                        if (c.data.id === mainPersonId) return false;
                        return c.data.gender === "female";
                    })
                    .sort((a, b) => a.data.id - b.data.id);

                // Rebuild: [Muhammad Saaim] [brothers] [sisters]
                node.children = [];
                if (muhammadNode) {
                    node.children.push(muhammadNode);
                }
                if (brothers.length > 0) {
                    node.children.push(...brothers);
                }
                if (sisters.length > 0) {
                    node.children.push(...sisters);
                }

                // Recalculate x positions to maintain order
                const startX = node.children[0].x;
                const endX = node.children[node.children.length - 1].x;
                const span = endX - startX;
                const spacing = span / (node.children.length - 1);

                node.children.forEach((child, index) => {
                    child.x = startX + spacing * index;
                });

                console.log(
                    "Re-sorted after tree layout:",
                    node.children.map(
                        (c) =>
                            (c.data.name || c.data.first_name) +
                            " (x: " +
                            c.x +
                            ")"
                    )
                );
            }
        });

        console.log("Tree descendants:", root.descendants().length);
        console.log("Unique IDs:", [
            ...new Set(root.descendants().map((d) => d.data.id)),
        ]);

        // Reduce spacing between siblings by compressing their x positions
        const siblingGroups = new Map();
        root.descendants().forEach((d) => {
            if (d.data.id === "virtual-root") return;
            const parentKey =
                d.parent && d.parent.data.id !== "virtual-root"
                    ? d.parent.data.id
                    : "root-" + d.depth;

            if (!siblingGroups.has(parentKey)) {
                siblingGroups.set(parentKey, []);
            }
            siblingGroups.get(parentKey).push(d);
        });

        // Compress sibling groups
        siblingGroups.forEach((siblings, parentKey) => {
            if (siblings.length < 2) return;

            // Sort siblings in correct order: [brothers] [Muhammad Saaim] [sisters]
            const muhammadNode = mainPersonId
                ? siblings.find((s) => s.data.id === mainPersonId)
                : null;
            const brothers = siblings
                .filter((s) => {
                    if (s.data.id === mainPersonId) return false;
                    return s.data.gender === "male";
                })
                .sort((a, b) => a.data.id - b.data.id);
            const sisters = siblings
                .filter((s) => {
                    if (s.data.id === mainPersonId) return false;
                    return s.data.gender === "female";
                })
                .sort((a, b) => a.data.id - b.data.id);

            // Rebuild in correct order: [Muhammad Saaim] [brothers] [sisters]
            const orderedSiblings = [];
            if (muhammadNode) orderedSiblings.push(muhammadNode);
            if (brothers.length > 0) orderedSiblings.push(...brothers);
            if (sisters.length > 0) orderedSiblings.push(...sisters);

            // Update the Map with ordered siblings
            siblingGroups.set(parentKey, orderedSiblings);

            // Use ordered siblings for compression - maintain order: [main person] [brothers] [sisters]
            const siblingsForCompression = orderedSiblings;

            // Calculate compressed spacing with minimum distance between cards
            const minX = Math.min(...siblingsForCompression.map((s) => s.x));
            const maxX = Math.max(...siblingsForCompression.map((s) => s.x));
            const currentSpan = maxX - minX;
            const cardWidth = 140; // Card width (standardized size)
            const minSpacing = cardWidth + 20; // Minimum spacing between card centers
            const minRequiredSpan =
                (siblingsForCompression.length - 1) * minSpacing;
            const compressedSpan = Math.max(currentSpan * 0.4, minRequiredSpan); // Ensure minimum spacing
            const newMinX = minX + (currentSpan - compressedSpan) / 2;

            // Redistribute siblings with compressed spacing, maintaining order: [brothers] [main person] [sisters]
            siblingsForCompression.forEach((sibling, index) => {
                if (siblingsForCompression.length === 1) return;
                const ratio = index / (siblingsForCompression.length - 1);
                let newX = newMinX + compressedSpan * ratio;

                // Ensure minimum spacing from previous sibling
                if (index > 0) {
                    const prevSibling = siblingsForCompression[index - 1];
                    const minXForThis = prevSibling.x + minSpacing;
                    if (newX < minXForThis) {
                        newX = minXForThis;
                    }
                }

                sibling.x = newX;
            });

            console.log(
                "Compressed siblings in order:",
                siblingsForCompression.map(
                    (s) =>
                        (s.data.name || s.data.first_name) + " (x: " + s.x + ")"
                )
            );
        });

        // Center the main person horizontally
        if (mainPersonId) {
            const mainPersonNode = root
                .descendants()
                .find(
                    (d) =>
                        d.data.id === mainPersonId &&
                        d.data.id !== "virtual-root"
                );
            if (mainPersonNode) {
                const centerX = (width - 300) / 2; // Center of the tree area
                const offsetX = centerX - mainPersonNode.x;

                // Adjust all node positions to center the main person
                root.descendants().forEach((d) => {
                    if (d.data.id !== "virtual-root") {
                        d.x = d.x + offsetX;
                    }
                });

                console.log(
                    "Centered main person at x:",
                    mainPersonNode.x,
                    "offset:",
                    offsetX
                );
            }
        }

        // Center the tree vertically
        g.attr("transform", `translate(${150}, ${50})`);
    }

    function buildTree() {
        // Find the main person - UNIVERSAL LOGIC that works for all users
        // PRIORITY 1: Find the logged-in user's Person (by user_id) - this is ALWAYS the main person
        // PRIORITY 2: If no user_id match, find the first root person (person with no parents)
        // This ensures the logged-in user is always the main person, even if they have parents
        let mainPersonId = null;

        // Use the logged-in user's ID (set at top of script)
        if (loggedInUserId) {
            // Find the Person record linked to the logged-in user
            const userPerson = treeData.find(
                (p) => p.user_id === loggedInUserId
            );
            if (userPerson) {
                mainPersonId = userPerson.id;
                console.log(
                    "Main person identified by user_id:",
                    mainPersonId,
                    userPerson.name || userPerson.first_name
                );
            }
        }

        // Fallback: If no user_id match, find the first root person (person with no parents)
        if (!mainPersonId) {
            const rootPersons = treeData
                .filter((p) => !p.parents || p.parents.length === 0)
                .sort((a, b) => a.id - b.id);
            if (rootPersons.length > 0) {
                mainPersonId = rootPersons[0].id;
                console.log(
                    "Main person identified by root status:",
                    mainPersonId
                );
            } else if (treeData.length > 0) {
                // Final fallback: use the first person
                mainPersonId = treeData.sort((a, b) => a.id - b.id)[0].id;
                console.log(
                    "Main person identified by first person:",
                    mainPersonId
                );
            }
        }

        console.log("Main person ID:", mainPersonId);
        const rootPersonsForLog = treeData.filter(
            (p) => !p.parents || p.parents.length === 0
        );
        console.log(
            "Root persons:",
            rootPersonsForLog.map(
                (p) => (p.name || p.first_name) + " (ID: " + p.id + ")"
            )
        );
        console.log(
            "Selected main person:",
            mainPersonId
                ? treeData.find((p) => p.id === mainPersonId)?.name ||
                      treeData.find((p) => p.id === mainPersonId)?.first_name
                : "none"
        );

        // Build a map of all nodes (excluding virtual root)
        const nodeMap = new Map();
        root.descendants().forEach((d) => {
            if (d.data.id !== "virtual-root") {
                nodeMap.set(d.data.id, d);
            }
        });

        // Get parent IDs of main person to exclude them from spouse links
        const mainPersonParentsForSpouse = [];
        if (mainPersonId) {
            const mainPersonData = treeData.find((p) => p.id === mainPersonId);
            if (mainPersonData && mainPersonData.parents) {
                mainPersonParentsForSpouse.push(...mainPersonData.parents);
            }
        }

        // Find spouse connections
        const spouseLinks = [];
        const spouseMap = new Map(); // Map parent ID to spouse midpoint

        root.descendants()
            .filter((d) => d.data.id !== "virtual-root")
            .forEach((d) => {
                // Skip main person's parents from spouse links
                if (mainPersonParentsForSpouse.includes(d.data.id)) {
                    return;
                }

                if (d.data.spouses && d.data.spouses.length > 0) {
                    d.data.spouses.forEach((spouseId) => {
                        // Skip if spouse is also a main person's parent
                        if (mainPersonParentsForSpouse.includes(spouseId)) {
                            return;
                        }

                        const spouse = nodeMap.get(spouseId);
                        if (spouse && d.depth === spouse.depth) {
                            const exists = spouseLinks.some(
                                (link) =>
                                    (link.sourceId === d.data.id &&
                                        link.targetId === spouseId) ||
                                    (link.sourceId === spouseId &&
                                        link.targetId === d.data.id)
                            );
                            if (!exists) {
                                const midpointX = (d.x + spouse.x) / 2;
                                const midpointY = d.y;
                                spouseLinks.push({
                                    source: d,
                                    target: spouse,
                                    sourceId: d.data.id,
                                    targetId: spouseId,
                                    midpointX: midpointX,
                                    midpointY: midpointY,
                                });
                                // Store midpoint for both parents
                                spouseMap.set(d.data.id, {
                                    x: midpointX,
                                    y: midpointY,
                                });
                                spouseMap.set(spouseId, {
                                    x: midpointX,
                                    y: midpointY,
                                });
                            }
                        }
                    });
                }
            });

        // Draw horizontal spouse lines
        g.selectAll(".spouse-link")
            .data(spouseLinks)
            .enter()
            .append("line")
            .attr("class", "spouse-link")
            .attr("x1", (d) => d.source.x)
            .attr("y1", (d) => d.source.y)
            .attr("x2", (d) => d.target.x)
            .attr("y2", (d) => d.target.y);

        // Find sibling connections (people who share the same parents)
        const siblingLinks = [];
        console.log("Looking for sibling connections...");

        // First, check explicit sibling relationships from data
        root.descendants()
            .filter((d) => d.data.id !== "virtual-root")
            .forEach((d) => {
                console.log(
                    `Node ${d.data.id} (${d.data.name}): siblings =`,
                    d.data.siblings,
                    "depth =",
                    d.depth,
                    "parents =",
                    d.data.parents
                );
                if (d.data.siblings && d.data.siblings.length > 0) {
                    d.data.siblings.forEach((siblingId) => {
                        const sibling = nodeMap.get(siblingId);
                        console.log(
                            `  Checking sibling ${siblingId}:`,
                            sibling
                                ? `found at depth ${sibling.depth}`
                                : "NOT FOUND in nodeMap"
                        );
                        if (sibling && d.depth === sibling.depth) {
                            // Only add if not already added (avoid duplicates)
                            const exists = siblingLinks.some(
                                (link) =>
                                    (link.sourceId === d.data.id &&
                                        link.targetId === siblingId) ||
                                    (link.sourceId === siblingId &&
                                        link.targetId === d.data.id)
                            );
                            if (!exists) {
                                console.log(
                                    `  Adding sibling link: ${d.data.id} <-> ${siblingId}`
                                );
                                siblingLinks.push({
                                    source: d,
                                    target: sibling,
                                    sourceId: d.data.id,
                                    targetId: siblingId,
                                });
                            }
                        } else if (sibling && d.depth !== sibling.depth) {
                            console.log(
                                `  Sibling ${siblingId} found but different depth: ${d.depth} vs ${sibling.depth}`
                            );
                        }
                    });
                }
            });

        // Also connect siblings who share the same excluded parents (main person's parents)
        // These are siblings of Muhammad Saaim who should be connected
        // BUT exclude people who are siblings of parents (they're shown at parent level, not child level)
        if (mainPersonId) {
            const mainPersonData = treeData.find((p) => p.id === mainPersonId);
            if (mainPersonData && mainPersonData.parents) {
                // Get all parent sibling IDs to exclude them from child-level sibling rendering
                const parentSiblingIds = new Set();
                mainPersonData.parents.forEach((parentId) => {
                    const parentData = treeData.find((p) => p.id === parentId);
                    if (parentData) {
                        // Get explicit siblings
                        if (
                            parentData.siblings &&
                            parentData.siblings.length > 0
                        ) {
                            parentData.siblings.forEach((sibId) =>
                                parentSiblingIds.add(sibId)
                            );
                        }
                        // Get implicit siblings (shared parents)
                        if (
                            parentData.parents &&
                            parentData.parents.length > 0
                        ) {
                            treeData.forEach((p) => {
                                if (p.id === parentId) return;
                                if (
                                    p.parents &&
                                    p.parents.length > 0 &&
                                    p.parents.every((pId) =>
                                        parentData.parents.includes(pId)
                                    ) &&
                                    parentData.parents.every((pId) =>
                                        p.parents.includes(pId)
                                    )
                                ) {
                                    parentSiblingIds.add(p.id);
                                }
                            });
                        }
                    }
                });

                // Find all people who share the same parents as Muhammad Saaim
                const mainPersonParentIds = mainPersonData.parents;
                const siblingsWithSameParents = treeData.filter((p) => {
                    if (p.id === mainPersonId) return false; // Exclude main person
                    if (parentSiblingIds.has(p.id)) return false; // Exclude parent siblings (they're shown at parent level)
                    if (!p.parents || p.parents.length === 0) return false;
                    // Check if they share the same parents
                    const sharedParents = p.parents.filter((pid) =>
                        mainPersonParentIds.includes(pid)
                    );
                    return (
                        sharedParents.length === mainPersonParentIds.length &&
                        sharedParents.length === p.parents.length
                    );
                });

                // Connect these siblings to Muhammad Saaim
                siblingsWithSameParents.forEach((sibling) => {
                    const mainPersonNode = nodeMap.get(mainPersonId);
                    const siblingNode = nodeMap.get(sibling.id);
                    if (
                        mainPersonNode &&
                        siblingNode &&
                        mainPersonNode.depth === siblingNode.depth
                    ) {
                        const exists = siblingLinks.some(
                            (link) =>
                                (link.sourceId === mainPersonId &&
                                    link.targetId === sibling.id) ||
                                (link.sourceId === sibling.id &&
                                    link.targetId === mainPersonId)
                        );
                        if (!exists) {
                            siblingLinks.push({
                                source: mainPersonNode,
                                target: siblingNode,
                                sourceId: mainPersonId,
                                targetId: sibling.id,
                            });
                        }
                    }
                });
            }
        }

        console.log("Total sibling links found:", siblingLinks.length);

        // Draw curved sibling lines connecting at top centers of cards with gentle upward arc
        g.selectAll(".sibling-link")
            .data(siblingLinks)
            .enter()
            .append("path")
            .attr("class", "sibling-link")
            .attr("fill", "none")
            .attr("d", (d) => {
                const startX = d.source.x;
                const startY = d.source.y - 40; // Top center of source card
                const endX = d.target.x;
                const endY = d.target.y - 40; // Top center of target card

                // Calculate a very gentle, subtle arc - minimal upward bend
                const distance = Math.abs(endX - startX);
                const bendHeight = Math.min(6, Math.max(5, distance * 0.02)); // Very subtle bend, 5-6px
                const midX = (startX + endX) / 2;
                const midY = Math.min(startY, endY) - bendHeight;

                // Create a smooth, very gentle quadratic bezier curve
                // Minimal upward arch for a clean, elegant look matching the screenshot
                return `M ${startX} ${startY} Q ${midX} ${midY}, ${endX} ${endY}`;
            });

        // Get parent IDs of main person to exclude them from links
        const mainPersonParentsForLinks = [];
        if (mainPersonId) {
            const mainPersonData = treeData.find((p) => p.id === mainPersonId);
            if (mainPersonData && mainPersonData.parents) {
                mainPersonParentsForLinks.push(...mainPersonData.parents);
            }
        }

        // Draw parent-child links (vertical lines)
        const parentChildLinks = [];
        root.links().forEach((link) => {
            const parent = link.source;
            const child = link.target;

            // Skip links involving virtual root
            if (
                parent.data.id === "virtual-root" ||
                child.data.id === "virtual-root"
            ) {
                return;
            }

            // Skip links involving main person's parents (they'll be shown above main person instead)
            if (mainPersonParentsForLinks.includes(parent.data.id)) {
                return;
            }

            // Check if parent has a spouse midpoint
            const midpoint = spouseMap.get(parent.data.id);

            if (midpoint) {
                // Draw from spouse midpoint to child
                parentChildLinks.push({
                    source: { x: midpoint.x, y: midpoint.y, data: parent.data },
                    target: { x: child.x, y: child.y, data: child.data },
                });
            } else {
                // Draw from parent directly to child
                parentChildLinks.push({
                    source: { x: parent.x, y: parent.y, data: parent.data },
                    target: { x: child.x, y: child.y, data: child.data },
                });
            }
        });

        links = g
            .selectAll(".link")
            .data(parentChildLinks)
            .enter()
            .append("path")
            .attr("class", "link")
            .attr("d", (d) => {
                return `M ${d.source.x} ${d.source.y} L ${d.target.x} ${d.target.y}`;
            });

        // Get parent IDs of main person to exclude them from main tree (they'll show above main person instead)
        const mainPersonParents = [];
        if (mainPersonId) {
            const mainPersonData = treeData.find((p) => p.id === mainPersonId);
            if (mainPersonData && mainPersonData.parents) {
                mainPersonParents.push(...mainPersonData.parents);
            }
        }

        // Get partner IDs of main person's parents to exclude them from main tree rendering
        const parentPartnerIds = new Set();
        if (mainPersonId) {
            const mainPersonData = treeData.find((p) => p.id === mainPersonId);
            if (mainPersonData && mainPersonData.parents) {
                mainPersonData.parents.forEach((parentId) => {
                    const parentData = treeData.find((p) => p.id === parentId);
                    if (parentData && parentData.spouses) {
                        parentData.spouses.forEach((spouseId) => {
                            // Exclude partners (but not the mother, who is shown as a parent card)
                            const isMother =
                                mainPersonData.parents.includes(spouseId) &&
                                treeData.find((p) => p.id === spouseId)
                                    ?.gender === "female";
                            if (!isMother) {
                                parentPartnerIds.add(spouseId);
                                console.log(
                                    "Excluding parent partner from main tree:",
                                    spouseId
                                );
                            }
                        });
                    }
                });
            }
        }

        // Get partner IDs of children to exclude them from main tree rendering
        // Partners of children should appear next to their children, not as separate nodes
        const childPartnerIds = new Set();
        if (mainPersonId) {
            const mainPersonData = treeData.find((p) => p.id === mainPersonId);
            if (mainPersonData) {
                // Get all children (main person + siblings)
                const allChildrenIds = new Set();
                allChildrenIds.add(mainPersonId);

                // Add siblings
                if (mainPersonData.siblings) {
                    mainPersonData.siblings.forEach((siblingId) => {
                        allChildrenIds.add(siblingId);
                    });
                }

                // Add implicit siblings (people who share the same parents)
                if (
                    mainPersonData.parents &&
                    mainPersonData.parents.length > 0
                ) {
                    treeData.forEach((p) => {
                        if (p.id === mainPersonId) return;
                        if (p.parents && p.parents.length > 0) {
                            const sharesParent = mainPersonData.parents.some(
                                (pid) => p.parents.includes(pid)
                            );
                            if (sharesParent) {
                                allChildrenIds.add(p.id);
                            }
                        }
                    });
                }

                // Find partners of children
                allChildrenIds.forEach((childId) => {
                    const childData = treeData.find((p) => p.id === childId);
                    if (childData && childData.spouses) {
                        childData.spouses.forEach((spouseId) => {
                            childPartnerIds.add(spouseId);
                            const partnerData = treeData.find(
                                (p) => p.id === spouseId
                            );
                            console.log(
                                "Excluding child partner from main tree:",
                                spouseId,
                                partnerData
                                    ? partnerData.name || partnerData.first_name
                                    : "Unknown",
                                "partner of",
                                childData.name || childData.first_name
                            );
                        });
                    }
                });

                // Also check reverse: if someone's spouse is a child, exclude them
                treeData.forEach((person) => {
                    if (person.spouses && person.spouses.length > 0) {
                        const hasChildAsSpouse = person.spouses.some(
                            (spouseId) => allChildrenIds.has(spouseId)
                        );
                        if (
                            hasChildAsSpouse &&
                            !allChildrenIds.has(person.id)
                        ) {
                            childPartnerIds.add(person.id);
                            console.log(
                                "Excluding child partner (reverse) from main tree:",
                                person.id,
                                person.name || person.first_name
                            );
                        }
                    }
                });
            }
        }

        // Draw nodes (filter out virtual root, main person's parents, parent partners, child partners, and ensure unique nodes)
        const uniqueNodes = [];
        const seenIds = new Set();
        root.descendants().forEach((d) => {
            if (d.data.id !== "virtual-root" && !seenIds.has(d.data.id)) {
                // Exclude main person's parents from main tree rendering
                if (!mainPersonParents.includes(d.data.id)) {
                    // Exclude parent partners from main tree rendering (they're shown as partner cards)
                    if (!parentPartnerIds.has(d.data.id)) {
                        // Exclude child partners from main tree rendering (they're shown as partner cards next to children)
                        if (!childPartnerIds.has(d.data.id)) {
                            uniqueNodes.push(d);
                            seenIds.add(d.data.id);
                        } else {
                            console.log(
                                "Skipping child partner node:",
                                d.data.id,
                                d.data.name || d.data.first_name
                            );
                        }
                    }
                }
            }
        });

        console.log("Unique nodes to render:", uniqueNodes.length);
        console.log("Excluded parent IDs from main tree:", mainPersonParents);

        nodes = g
            .selectAll(".person-node")
            .data(uniqueNodes)
            .enter()
            .append("g")
            .attr("class", (d) => `person-node ${d.data.gender || ""}`)
            .attr("transform", (d) => `translate(${d.x},${d.y})`)
            .style("cursor", "pointer");

        // Add drag behavior to person cards for panning the tree (like MyHeritage)
        let isDragging = false;
        let dragStartX = 0;
        let dragStartY = 0;
        let dragThreshold = 3; // Minimum pixels to move before considering it a drag
        let clickTimeout = null;
        let targetPersonId = null;

        nodes.each(function (d) {
            const node = d3.select(this);
            let mouseDownX = 0;
            let mouseDownY = 0;
            let hasMoved = false;

            // Use click handler for navigation (after zoom/pan is done)
            let clickStartTime = 0;
            let clickStartX = 0;
            let clickStartY = 0;

            node.on("mousedown", function (event) {
                // Only stop propagation for interactive elements (buttons, icons)
                const target = event.target;
                if (
                    target.classList &&
                    (target.classList.contains("edit-icon") ||
                        target.classList.contains("delete-icon") ||
                        target.closest("button"))
                ) {
                    event.stopPropagation();
                    return;
                }

                // Don't stop propagation - let zoom handle panning
                // Track click start for click detection
                clickStartTime = Date.now();
                clickStartX = event.clientX;
                clickStartY = event.clientY;
                targetPersonId = d.data.id;
                node.style("cursor", "grabbing");

                // Let the event bubble up to zoom handler
            });

            // Handle click (not drag) to navigate
            node.on("click", function (event) {
                const target = event.target;
                // Don't navigate if clicking on interactive elements
                if (
                    target.classList &&
                    (target.classList.contains("edit-icon") ||
                        target.classList.contains("delete-icon") ||
                        target.closest("button"))
                ) {
                    return;
                }

                // Check if it was a click (not a drag) - small movement threshold
                const timeDiff = Date.now() - clickStartTime;
                const moveX = Math.abs(event.clientX - clickStartX);
                const moveY = Math.abs(event.clientY - clickStartY);

                if (
                    timeDiff < 300 &&
                    moveX < 5 &&
                    moveY < 5 &&
                    targetPersonId &&
                    !isDragging
                ) {
                    event.stopPropagation();
                    event.preventDefault();
                    console.log(
                        "Opening profile sidebar for person:",
                        targetPersonId,
                        d.data
                    );

                    // Use window.openProfileSidebar to ensure it's accessible
                    if (typeof window.openProfileSidebar === "function") {
                        window.openProfileSidebar(targetPersonId, d.data);
                    } else if (typeof openProfileSidebar === "function") {
                        openProfileSidebar(targetPersonId, d.data);
                    } else {
                        console.error(
                            "openProfileSidebar function not found! Available functions:",
                            Object.keys(window).filter(
                                (k) => typeof window[k] === "function"
                            )
                        );
                        // Fallback: try to open sidebar directly
                        const sidebar =
                            document.getElementById("profile-sidebar");
                        if (sidebar) {
                            sidebar.classList.add("open");
                            document
                                .getElementById("profile-sidebar-overlay")
                                .classList.add("active");
                        }
                    }
                }
            });

            node.on("mouseup", function (event) {
                node.style("cursor", "pointer");
            });

            node.on("mouseleave", function (event) {
                if (event.buttons === 0) {
                    node.style("cursor", "pointer");
                    if (clickTimeout) {
                        clearTimeout(clickTimeout);
                        clickTimeout = null;
                    }
                    isDragging = false;
                    hasMoved = false;
                }
            });
        });

        // Add person card rectangle (rounded corners)
        nodes
            .append("rect")
            .attr("class", "person-card")
            .attr("x", -60)
            .attr("y", -40)
            .attr("width", 120)
            .attr("height", 80)
            .attr("rx", 8)
            .attr("ry", 8);

        // Add status dot (top-right corner)
        nodes
            .append("circle")
            .attr("class", "status-dot")
            .attr("cx", 50)
            .attr("cy", -30)
            .attr("r", 4);

        // Add person icon (silhouette) or photo
        nodes.each(function (d) {
            const node = d3.select(this);
            if (d.data.photo) {
                const clipId = `clip-${d.data.id}`;
                svg.append("defs")
                    .append("clipPath")
                    .attr("id", clipId)
                    .append("circle")
                    .attr("cx", 0)
                    .attr("cy", -10)
                    .attr("r", 18);

                node.append("image")
                    .attr(
                        "xlink:href",
                        `https://familytree.hexafume.com/storage/${d.data.photo}`
                    )
                    .attr("x", -18)
                    .attr("y", -28)
                    .attr("width", 36)
                    .attr("height", 36)
                    .attr("clip-path", `url(#${clipId})`);

                // Small camera icon overlay
                node.append("circle")
                    .attr("cx", 12)
                    .attr("cy", -22)
                    .attr("r", 6)
                    .attr("fill", "rgba(0,0,0,0.6)");
                node.append("text")
                    .attr("x", 12)
                    .attr("y", -19)
                    .attr("text-anchor", "middle")
                    .attr("font-size", "8px")
                    .attr("fill", "white")
                    .text("📷");
            } else {
                // Use renderAvatar to support photos
                const iconGroup = node
                    .append("g")
                    .attr("transform", "translate(0, -10)");
                renderAvatar(iconGroup, d.data, svg);

                // Small camera icon in corner
                node.append("circle")
                    .attr("cx", 12)
                    .attr("cy", -22)
                    .attr("r", 6)
                    .attr("fill", "#999");
                node.append("text")
                    .attr("x", 12)
                    .attr("y", -19)
                    .attr("text-anchor", "middle")
                    .attr("font-size", "8px")
                    .attr("fill", "white")
                    .text("📷");
            }
        });

        // Add person name
        nodes
            .append("text")
            .attr("class", "person-name")
            .attr("x", 0)
            .attr("y", 20)
            .attr("text-anchor", "middle")
            .text((d) => {
                const name = d.data.name || d.data.first_name || "Unknown";
                return name.length > 25 ? name.substring(0, 25) + "..." : name;
            });

        // Add + icon (bottom center) for adding children - opens Branch Builder
        nodes
            .append("circle")
            .attr("cx", 0)
            .attr("cy", 32)
            .attr("r", 10)
            .attr("fill", "white")
            .attr("stroke", "#999")
            .attr("stroke-width", 1)
            .style("cursor", "pointer")
            .on("click", function (event, d) {
                event.stopPropagation();
                openBranchBuilder(d.data);
            });
        nodes
            .append("text")
            .attr("class", "add-icon")
            .attr("x", 0)
            .attr("y", 36)
            .attr("text-anchor", "middle")
            .attr("font-size", "16px")
            .attr("font-weight", "bold")
            .text("+")
            .style("cursor", "pointer")
            .on("click", function (event, d) {
                event.stopPropagation();
                openBranchBuilder(d.data);
            });

        // Add edit icon (pencil, right side) to all person nodes
        nodes
            .append("circle")
            .attr("cx", 50)
            .attr("cy", 28)
            .attr("r", 8)
            .attr("fill", "white")
            .attr("stroke", "#999")
            .attr("stroke-width", 1)
            .style("cursor", "pointer")
            .on("click", function (event, d) {
                event.stopPropagation();
                window.location.href = `https://familytree.hexafume.com/family-tree/${d.data.id}/edit`;
            });
        nodes
            .append("text")
            .attr("class", "edit-icon")
            .attr("x", 50)
            .attr("y", 31)
            .attr("text-anchor", "middle")
            .attr("font-size", "12px")
            .text("✎")
            .style("cursor", "pointer")
            .on("click", function (event, d) {
                event.stopPropagation();
                window.location.href = `https://familytree.hexafume.com/family-tree/${d.data.id}/edit`;
            });

        // Add delete icon (trash, left side) to all person nodes
        nodes
            .append("circle")
            .attr("cx", -50)
            .attr("cy", 28)
            .attr("r", 8)
            .attr("fill", "white")
            .attr("stroke", "#dc3545")
            .attr("stroke-width", 1)
            .style("cursor", "pointer")
            .on("click", function (event, d) {
                event.stopPropagation();
                const personName =
                    d.data.name || d.data.first_name || "this person";
                deletePerson(d.data.id, personName);
            });
        nodes
            .append("text")
            .attr("class", "delete-icon")
            .attr("x", -50)
            .attr("y", 31)
            .attr("text-anchor", "middle")
            .attr("font-size", "12px")
            .attr("fill", "#dc3545")
            .text("🗑")
            .style("cursor", "pointer")
            .on("click", function (event, d) {
                event.stopPropagation();
                const personName =
                    d.data.name || d.data.first_name || "this person";
                deletePerson(d.data.id, personName);
            });

        // ====================================================================
        // PERMANENT STANDARD: Add Father / Add Mother Button Logic
        // ====================================================================
        // This logic applies to ALL generations (current and future):
        // - Button Width: 140px
        // - Button Height: 90px
        // - Button Spacing: 30px (between Add Father and Add Mother buttons)
        // - Add Father Position: -ButtonWidth/2 - Spacing/2 (left side)
        // - Add Mother Position: ButtonWidth/2 + Spacing/2 (right side)
        // This standard MUST be maintained for all future generations
        // ====================================================================

        // Hide main person card elements when father's partner branch is toggled
        // (but keep the node visible so partner cards can still render)
        nodes.each(function (d) {
            const node = d3.select(this);
            const isMainPerson =
                mainPersonId !== null && d.data.id === mainPersonId;
            if (isMainPerson && window.fatherPartnerBranchToggled) {
                // Hide the person card and related elements, but keep the node visible
                node.selectAll(
                    ".person-card, .status-dot, image, text, circle, .person-icon"
                ).style("display", "none");
            }
        });

        // Add parent cards or "Add Father" and "Add Mother" buttons above the main person
        nodes.each(function (d) {
            const node = d3.select(this);

            // Only show for the main person - strict check
            const isMainPerson =
                mainPersonId !== null && d.data.id === mainPersonId;

            console.log(
                "Checking node for parent cards:",
                d.data.name || d.data.first_name,
                "ID:",
                d.data.id,
                "mainPersonId:",
                mainPersonId,
                "isMainPerson:",
                isMainPerson
            );

            if (!isMainPerson) {
                return; // Skip - not the main person
            }

            console.log(
                "✓ Adding parent cards above:",
                d.data.name || d.data.first_name,
                "ID:",
                d.data.id
            );

            const cardY = -150; // Position above the card
            const cardWidth = 140; // Card width (decent size)
            const cardHeight = 90; // Card height (decent size)
            const spacing = 500; // Spacing between cards (increased for better visual separation)

            // Check if this person has parents
            const parents = d.data.parents || [];
            const hasParents = parents && parents.length > 0;

            if (hasParents) {
                // Show parent cards instead of buttons
                const parentData = parents
                    .map((parentId) => treeData.find((p) => p.id === parentId))
                    .filter((p) => p);

                // Find father (male) and mother (female)
                const father = parentData.find((p) => p.gender === "male");
                const mother = parentData.find((p) => p.gender === "female");

                // Check if mother has siblings - if yes, hide father's branch (matching MyHeritage behavior)
                let motherHasSiblings = false;
                if (mother) {
                    // Check explicit siblings
                    if (mother.siblings && mother.siblings.length > 0) {
                        motherHasSiblings = true;
                    }
                    // Check implicit siblings (shared parents)
                    if (
                        !motherHasSiblings &&
                        mother.parents &&
                        mother.parents.length > 0
                    ) {
                        const hasImplicitSiblings = treeData.some((p) => {
                            if (
                                p.id === mother.id ||
                                p.id === father?.id ||
                                p.id === mainPersonId
                            )
                                return false;
                            if (
                                p.parents &&
                                p.parents.length > 0 &&
                                p.parents.every((pId) =>
                                    mother.parents.includes(pId)
                                ) &&
                                mother.parents.every((pId) =>
                                    p.parents.includes(pId)
                                )
                            ) {
                                return true;
                            }
                            return false;
                        });
                        motherHasSiblings = hasImplicitSiblings;
                    }
                }

                // Check if father has siblings - if yes, hide mother's branch when toggled (matching MyHeritage behavior)
                let fatherHasSiblings = false;
                if (father) {
                    // Check explicit siblings
                    if (father.siblings && father.siblings.length > 0) {
                        fatherHasSiblings = true;
                    }
                    // Check implicit siblings (shared parents)
                    if (
                        !fatherHasSiblings &&
                        father.parents &&
                        father.parents.length > 0
                    ) {
                        const hasImplicitSiblings = treeData.some((p) => {
                            if (
                                p.id === father.id ||
                                p.id === mother?.id ||
                                p.id === mainPersonId
                            )
                                return false;
                            if (
                                p.parents &&
                                p.parents.length > 0 &&
                                p.parents.every((pId) =>
                                    father.parents.includes(pId)
                                ) &&
                                father.parents.every((pId) =>
                                    p.parents.includes(pId)
                                )
                            ) {
                                return true;
                            }
                            return false;
                        });
                        fatherHasSiblings = hasImplicitSiblings;
                    }
                }

                // MyHeritage logic: When father's view button is clicked, show father's branch and hide mother's siblings
                // When father's view button is NOT clicked and mother has siblings, show mother's siblings and hide father's branch
                // When father's partner branch is toggled, ONLY show father + father's partner + father's partner's relations
                const shouldShowFatherBranch =
                    window.fatherBranchToggled ||
                    window.fatherPartnerBranchToggled ||
                    (!window.fatherPartnerBranchToggled && !motherHasSiblings);
                const shouldShowMotherBranch =
                    (!window.fatherBranchToggled &&
                        !window.fatherPartnerBranchToggled) ||
                    !fatherHasSiblings; // Show mother's branch when not showing father's branch and not showing father's partner branch
                // Hide mother card when father's partner branch is toggled
                const shouldShowMother = !window.fatherPartnerBranchToggled;

                // Always show father card (left) - even when mother has siblings, or when father's partner branch is toggled
                // NOTE: When creating new cards, always use renderAvatar() for the icon (or use createPersonCard() helper)
                // DO NOT use hardcoded avatar images directly - this ensures photos update correctly
                if (father) {
                    const fatherGroup = node
                        .append("g")
                        .attr("class", "parent-card")
                        .attr("data-person-id", father.id)
                        .attr(
                            "transform",
                            `translate(${
                                -cardWidth / 2 - spacing / 2 - 100
                            }, ${cardY})`
                        )
                        .on("click", function (event) {
                            event.stopPropagation();
                            event.preventDefault();
                            event.stopPropagation();
                            if (
                                typeof window.openProfileSidebar === "function"
                            ) {
                                window.openProfileSidebar(father.id, father);
                            }
                        });

                    // Card rectangle with blue border for male
                    fatherGroup
                        .append("rect")
                        .attr("x", -cardWidth / 2)
                        .attr("y", -cardHeight / 2)
                        .attr("width", cardWidth)
                        .attr("height", cardHeight)
                        .attr("rx", 8)
                        .attr("ry", 8)
                        .attr("fill", "white")
                        .attr("stroke", "#add8e6") // Light blue border for male
                        .attr("stroke-width", 3)
                        .style(
                            "filter",
                            "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                        )
                        .style("cursor", "pointer")
                        .on("click", function (event) {
                            event.stopPropagation();
                            event.preventDefault();
                            event.stopPropagation();
                            if (
                                typeof window.openProfileSidebar === "function"
                            ) {
                                window.openProfileSidebar(father.id, father);
                            }
                        });

                    // Silhouette icon or photo
                    const fatherIcon = fatherGroup
                        .append("g")
                        .attr("transform", "translate(0, -20)");
                    renderAvatar(fatherIcon, father, svg);

                    // Name - combine first_name and last_name
                    let fatherName = father.name;
                    if (!fatherName) {
                        fatherName = father.first_name || "";
                        if (father.last_name) {
                            fatherName += " " + father.last_name;
                        }
                        if (!fatherName) {
                            fatherName = "Unknown";
                        }
                    }
                    fatherGroup
                        .append("text")
                        .attr("x", 0)
                        .attr("y", 20)
                        .attr("text-anchor", "middle")
                        .attr("font-size", "12px")
                        .attr("fill", "#333")
                        .text(
                            fatherName.length > 15
                                ? fatherName.substring(0, 25) + "..."
                                : fatherName
                        );

                    // Add + icon (bottom center) for adding children - opens Branch Builder
                    fatherGroup
                        .append("circle")
                        .attr("cx", 0)
                        .attr("cy", 32)
                        .attr("r", 10)
                        .attr("fill", "white")
                        .attr("stroke", "#999")
                        .attr("stroke-width", 1)
                        .style("cursor", "pointer")
                        .on("click", function (event) {
                            event.stopPropagation();
                            openBranchBuilder(father);
                        });
                    fatherGroup
                        .append("text")
                        .attr("x", 0)
                        .attr("y", 36)
                        .attr("text-anchor", "middle")
                        .attr("font-size", "16px")
                        .attr("font-weight", "bold")
                        .text("+")
                        .style("cursor", "pointer")
                        .on("click", function (event) {
                            event.stopPropagation();
                            openBranchBuilder(father);
                        });

                    // Add edit and delete icons automatically
                    addEditDeleteIcons(fatherGroup, father.id, fatherName);

                    // Add toggle hide/show button (eye icon) - top right
                    const isFatherHidden = areAncestorsHidden(father.id);
                    const hideFatherButton = fatherGroup
                        .append("g")
                        .attr("class", "hide-branch-button")
                        .attr("transform", "translate(45, -35)")
                        .style("cursor", "pointer")
                        .on("click", function (event) {
                            event.stopPropagation();
                            togglePersonBranch(father.id);
                        });

                    hideFatherButton
                        .append("circle")
                        .attr("cx", 0)
                        .attr("cy", 0)
                        .attr("r", 10)
                        .attr("fill", isFatherHidden ? "#28a745" : "#6c757d")
                        .attr("stroke", "white")
                        .attr("stroke-width", 1);

                    hideFatherButton
                        .append("text")
                        .attr("x", 0)
                        .attr("y", 3)
                        .attr("text-anchor", "middle")
                        .attr("font-size", "10px")
                        .attr("fill", "white")
                        .text(isFatherHidden ? "👁️" : "👁️‍🗨️");

                    hideFatherButton
                        .append("title")
                        .text(
                            isFatherHidden
                                ? `Click to show the family branch of ${fatherName}`
                                : `Click to hide the family branch of ${fatherName}`
                        );

                    // Add view button to toggle to father's branch view (matching MyHeritage)
                    // This button appears on father's card when mother has siblings
                    // When clicked, it shows father's branch (hiding mother's siblings)
                    if (motherHasSiblings) {
                        console.log(
                            "Adding view button on father card - motherHasSiblings:",
                            motherHasSiblings,
                            "fatherBranchToggled:",
                            window.fatherBranchToggled
                        );
                        const viewFatherBranchButton = fatherGroup
                            .append("g")
                            .attr("class", "view-father-branch-button")
                            .attr("transform", "translate(-45, -35)")
                            .style("cursor", "pointer")
                            .on("click", function (event) {
                                event.stopPropagation();
                                showFatherBranch();
                            });

                        viewFatherBranchButton
                            .append("circle")
                            .attr("cx", 0)
                            .attr("cy", 0)
                            .attr("r", 10)
                            .attr(
                                "fill",
                                window.fatherBranchToggled
                                    ? "#28a745"
                                    : "#6c757d"
                            )
                            .attr("stroke", "white")
                            .attr("stroke-width", 1);

                        viewFatherBranchButton
                            .append("text")
                            .attr("x", 0)
                            .attr("y", 3)
                            .attr("text-anchor", "middle")
                            .attr("font-size", "10px")
                            .attr("fill", "white")
                            .text("👁️");

                        viewFatherBranchButton
                            .append("title")
                            .text("Click to view father's branch");
                    }

                    // Add partner cards after mother card (matching MyHeritage)
                    // Find additional spouses/partners of father (excluding mother)
                    // Show if father's branch is visible OR if father's partner branch is toggled
                    const fatherPartners = [];
                    if (
                        (shouldShowFatherBranch ||
                            window.fatherPartnerBranchToggled) &&
                        father.spouses &&
                        father.spouses.length > 0
                    ) {
                        father.spouses.forEach((spouseId) => {
                            // Exclude mother (she's already drawn as a parent)
                            if (mother && spouseId === mother.id) return;
                            // Exclude if this spouse is also a parent of main person
                            if (parents.includes(spouseId)) return;

                            const partnerData = treeData.find(
                                (p) => p.id === spouseId
                            );
                            if (partnerData) {
                                fatherPartners.push(partnerData);
                                console.log(
                                    "Found father partner:",
                                    partnerData.name || partnerData.first_name
                                );
                            }
                        });
                    }
                    console.log(
                        "Total father partners found:",
                        fatherPartners.length,
                        fatherPartners.map((p) => p.name || p.first_name)
                    );

                    // Draw partner cards after mother card, before siblings
                    // When partner branch is toggled, center the partner card
                    fatherPartners.forEach((partner, index) => {
                        // Calculate position: after mother card (or after father if no mother)
                        // When partner branch is toggled, center the partner card
                        const motherX = cardWidth / 2 + spacing / 2 + 150; // Match actual mother card position
                        const partnerSpacing = 200; // Spacing between cards
                        let partnerX;
                        if (window.fatherPartnerBranchToggled) {
                            // Center the partner card when partner branch is toggled
                            partnerX = 0;
                        } else if (mother) {
                            partnerX =
                                motherX +
                                cardWidth +
                                partnerSpacing +
                                index * (cardWidth + partnerSpacing);
                        } else {
                            partnerX =
                                cardWidth / 2 +
                                spacing / 2 +
                                index * (cardWidth + partnerSpacing);
                        }
                        const partnerY = cardY; // Same Y as father and mother

                        const partnerGroup = node
                            .append("g")
                            .attr("class", "parent-partner-card")
                            .attr("data-person-id", partner.id)
                            .attr(
                                "transform",
                                `translate(${partnerX}, ${partnerY})`
                            )
                            .on("click", function (event) {
                                event.stopPropagation();
                                if (
                                    typeof window.openProfileSidebar ===
                                    "function"
                                ) {
                                    window.openProfileSidebar(
                                        partner.id,
                                        partner
                                    );
                                } else {
                                    event.preventDefault();
                                    event.stopPropagation();
                                    if (
                                        typeof window.openProfileSidebar ===
                                        "function"
                                    ) {
                                        window.openProfileSidebar(
                                            partner.id,
                                            partner
                                        );
                                    }
                                }
                            });

                        // Card rectangle with border color based on gender
                        const borderColor =
                            partner.gender === "female" ? "#ffb6c1" : "#add8e6";
                        const partnerRect = partnerGroup
                            .append("rect")
                            .attr("x", -cardWidth / 2)
                            .attr("y", -cardHeight / 2)
                            .attr("width", cardWidth)
                            .attr("height", cardHeight)
                            .attr("rx", 8)
                            .attr("ry", 8)
                            .attr("fill", "white")
                            .attr("stroke", borderColor)
                            .attr("stroke-width", 3)
                            .style(
                                "filter",
                                "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                            )
                            .style("cursor", "pointer")
                            .on("click", function (event) {
                                event.stopPropagation();
                                if (
                                    typeof window.openProfileSidebar ===
                                    "function"
                                ) {
                                    window.openProfileSidebar(
                                        partner.id,
                                        partner
                                    );
                                } else {
                                    event.preventDefault();
                                    event.stopPropagation();
                                    if (
                                        typeof window.openProfileSidebar ===
                                        "function"
                                    ) {
                                        window.openProfileSidebar(
                                            partner.id,
                                            partner
                                        );
                                    }
                                }
                            });

                        // Silhouette icon or photo
                        const partnerIcon = partnerGroup
                            .append("g")
                            .attr("transform", "translate(0, -20)");
                        renderAvatar(partnerIcon, partner, svg);

                        // Name
                        let partnerName = partner.name;
                        if (!partnerName) {
                            partnerName = partner.first_name || "";
                            if (partner.last_name) {
                                partnerName += " " + partner.last_name;
                            }
                            if (!partnerName) {
                                partnerName = "Unknown";
                            }
                        }
                        partnerGroup
                            .append("text")
                            .attr("x", 0)
                            .attr("y", 20)
                            .attr("text-anchor", "middle")
                            .attr("font-size", "12px")
                            .attr("fill", "#333")
                            .text(
                                partnerName.length > 15
                                    ? partnerName.substring(0, 25) + "..."
                                    : partnerName
                            );

                        // Add + icon
                        partnerGroup
                            .append("circle")
                            .attr("cx", 0)
                            .attr("cy", 32)
                            .attr("r", 10)
                            .attr("fill", "white")
                            .attr("stroke", "#999")
                            .attr("stroke-width", 1)
                            .style("cursor", "pointer")
                            .on("click", function (event) {
                                event.stopPropagation();
                                openBranchBuilder(partner);
                            });
                        partnerGroup
                            .append("text")
                            .attr("x", 0)
                            .attr("y", 36)
                            .attr("text-anchor", "middle")
                            .attr("font-size", "16px")
                            .attr("font-weight", "bold")
                            .text("+")
                            .style("cursor", "pointer")
                            .on("click", function (event) {
                                event.stopPropagation();
                                openBranchBuilder(partner);
                            });

                        // Add edit and delete icons
                        addEditDeleteIcons(
                            partnerGroup,
                            partner.id,
                            partnerName
                        );

                        // Check if father's partner has relations (siblings or additional partners) to show view button
                        let fatherPartnerHasRelations = false;
                        // Check for siblings
                        if (partner.siblings && partner.siblings.length > 0) {
                            fatherPartnerHasRelations = true;
                        }
                        // Check for implicit siblings (shared parents)
                        if (
                            !fatherPartnerHasRelations &&
                            partner.parents &&
                            partner.parents.length > 0
                        ) {
                            const hasImplicitSiblings = treeData.some((p) => {
                                if (
                                    p.id === partner.id ||
                                    p.id === father?.id ||
                                    p.id === mainPersonId
                                )
                                    return false;
                                if (partner.parents.includes(p.id))
                                    return false;
                                if (
                                    p.parents &&
                                    p.parents.length > 0 &&
                                    p.parents.every((pId) =>
                                        partner.parents.includes(pId)
                                    ) &&
                                    partner.parents.every((pId) =>
                                        p.parents.includes(pId)
                                    )
                                ) {
                                    return true;
                                }
                                return false;
                            });
                            if (hasImplicitSiblings) {
                                fatherPartnerHasRelations = true;
                            }
                        }
                        // Check for additional partners
                        if (
                            !fatherPartnerHasRelations &&
                            partner.spouses &&
                            partner.spouses.length > 0
                        ) {
                            const hasAdditionalPartners = partner.spouses.some(
                                (spouseId) => {
                                    return spouseId !== mother?.id;
                                }
                            );
                            if (hasAdditionalPartners) {
                                fatherPartnerHasRelations = true;
                            }
                        }

                        // Add view button to toggle to father's partner branch view (matching MyHeritage)
                        // This button appears on father's partner card when it has relations
                        if (fatherPartnerHasRelations) {
                            console.log(
                                "Adding view button on father's partner card - has relations:",
                                fatherPartnerHasRelations,
                                "fatherPartnerBranchToggled:",
                                window.fatherPartnerBranchToggled
                            );
                            const viewFatherPartnerBranchButton = partnerGroup
                                .append("g")
                                .attr(
                                    "class",
                                    "view-father-partner-branch-button"
                                )
                                .attr("transform", "translate(-45, -35)")
                                .style("cursor", "pointer")
                                .on("click", function (event) {
                                    event.stopPropagation();
                                    if (window.fatherPartnerBranchToggled) {
                                        hideFatherPartnerBranch();
                                    } else {
                                        showFatherPartnerBranch();
                                    }
                                });

                            viewFatherPartnerBranchButton
                                .append("circle")
                                .attr("cx", 0)
                                .attr("cy", 0)
                                .attr("r", 10)
                                .attr(
                                    "fill",
                                    window.fatherPartnerBranchToggled
                                        ? "#28a745"
                                        : "#6c757d"
                                )
                                .attr("stroke", "white")
                                .attr("stroke-width", 1);

                            viewFatherPartnerBranchButton
                                .append("text")
                                .attr("x", 0)
                                .attr("y", 3)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "10px")
                                .attr("fill", "white")
                                .text("👁️");

                            viewFatherPartnerBranchButton
                                .append("title")
                                .text("Click to view father's partner branch");
                        }

                        console.log(
                            `Drew partner card for ${partnerName} at (${partnerX}, ${partnerY})`
                        );

                        // Draw line(s) connecting father card and partner card when partner branch is toggled
                        // Draw TWO lines if partner has additional partners (like father-mother connection)
                        if (window.fatherPartnerBranchToggled && father) {
                            // Father card position
                            const fatherX = -cardWidth / 2 - spacing / 2 - 100;
                            const fatherY = cardY;

                            // Partner card position
                            const partnerCardX = partnerX;
                            const partnerCardY = partnerY;

                            // Check if partner has additional partners (excluding mother and father)
                            let hasAdditionalPartners = false;
                            if (partner.spouses && partner.spouses.length > 0) {
                                hasAdditionalPartners = partner.spouses.some(
                                    (spouseId) => {
                                        if (spouseId === mother?.id)
                                            return false;
                                        if (spouseId === father?.id)
                                            return false;
                                        return true;
                                    }
                                );
                            }

                            if (hasAdditionalPartners) {
                                // Draw TWO lines (like father-mother connection)
                                const mainPersonNode = root
                                    .descendants()
                                    .find(
                                        (d) =>
                                            d.data.id === mainPersonId &&
                                            d.data.id !== "virtual-root"
                                    );
                                if (mainPersonNode) {
                                    const absoluteFatherX =
                                        mainPersonNode.x + fatherX;
                                    const absolutePartnerX =
                                        mainPersonNode.x + partnerCardX;
                                    const middleLineY =
                                        mainPersonNode.y + cardY;

                                    // Separate the two lines with a small distance
                                    const lineSeparation = 4;

                                    // Make lines extend fully from father card's right edge to partner card's left edge
                                    const lineStartX =
                                        absoluteFatherX + cardWidth / 2;
                                    const lineEndX =
                                        absolutePartnerX - cardWidth / 2;

                                    // Draw first line (slightly above center)
                                    g.append("line")
                                        .attr(
                                            "class",
                                            "spouse-link parent-partner-link-first"
                                        )
                                        .attr("x1", lineStartX)
                                        .attr(
                                            "y1",
                                            middleLineY - lineSeparation / 2
                                        )
                                        .attr("x2", lineEndX)
                                        .attr(
                                            "y2",
                                            middleLineY - lineSeparation / 2
                                        )
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1.5)
                                        .style("pointer-events", "none");

                                    // Draw second line (slightly below center)
                                    g.append("line")
                                        .attr(
                                            "class",
                                            "spouse-link parent-partner-link-second"
                                        )
                                        .attr("x1", lineStartX)
                                        .attr(
                                            "y1",
                                            middleLineY + lineSeparation / 2
                                        )
                                        .attr("x2", lineEndX)
                                        .attr(
                                            "y2",
                                            middleLineY + lineSeparation / 2
                                        )
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1.5)
                                        .style("pointer-events", "none");
                                }
                            } else {
                                // Draw single line (when no additional partners)
                                const lineY = cardY - cardHeight / 10;
                                const lineX1 = fatherX + cardWidth / 2;
                                const lineX2 = partnerCardX - cardWidth / 2;

                                node.append("line")
                                    .attr("class", "parent-partner-link")
                                    .attr("x1", lineX1)
                                    .attr("y1", lineY)
                                    .attr("x2", lineX2)
                                    .attr("y2", lineY)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 1.5)
                                    .style("pointer-events", "none");
                            }
                        }

                        // ====================================================================
                        // ADD RELATIONS TO FATHER'S PARTNER CARD (same logic as father card)
                        // ====================================================================

                        // Find siblings of father's partner
                        const fatherPartnerSiblings = [];
                        if (partner.siblings && partner.siblings.length > 0) {
                            partner.siblings.forEach((siblingId) => {
                                const siblingData = treeData.find(
                                    (p) => p.id === siblingId
                                );
                                if (
                                    siblingData &&
                                    siblingData.id !== partner.id &&
                                    siblingData.id !== father.id &&
                                    !partner.parents?.includes(siblingId)
                                ) {
                                    fatherPartnerSiblings.push(siblingData);
                                }
                            });
                        }
                        // Also check implicit siblings (shared parents)
                        if (partner.parents && partner.parents.length > 0) {
                            treeData.forEach((p) => {
                                if (
                                    p.id === partner.id ||
                                    p.id === father.id ||
                                    p.id === mainPersonId ||
                                    partner.parents.includes(p.id)
                                )
                                    return;
                                if (
                                    p.parents &&
                                    p.parents.length > 0 &&
                                    p.parents.every((pId) =>
                                        partner.parents.includes(pId)
                                    ) &&
                                    partner.parents.every((pId) =>
                                        p.parents.includes(pId)
                                    ) &&
                                    !fatherPartnerSiblings.find(
                                        (s) => s.id === p.id
                                    )
                                ) {
                                    fatherPartnerSiblings.push(p);
                                }
                            });
                        }

                        // Sort siblings: brothers first, then sisters
                        fatherPartnerSiblings.sort((a, b) => {
                            if (a.gender === "male" && b.gender === "female")
                                return -1;
                            if (a.gender === "female" && b.gender === "male")
                                return 1;
                            return a.id - b.id;
                        });

                        // Draw father's partner's sibling cards to the right of partner card
                        // ONLY show when father's partner branch is toggled
                        if (
                            fatherPartnerSiblings.length > 0 &&
                            window.fatherPartnerBranchToggled
                        ) {
                            const partnerSiblingSpacing = 200;
                            fatherPartnerSiblings.forEach(
                                (sibling, siblingIndex) => {
                                    const siblingX =
                                        partnerX +
                                        cardWidth +
                                        partnerSiblingSpacing +
                                        siblingIndex *
                                            (cardWidth + partnerSiblingSpacing);
                                    const siblingY = cardY;

                                    const siblingGroup = node
                                        .append("g")
                                        .attr(
                                            "class",
                                            "parent-sibling-card father-partner-sibling-card"
                                        )
                                        .attr("data-person-id", sibling.id)
                                        .attr(
                                            "transform",
                                            `translate(${siblingX}, ${siblingY})`
                                        )
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            if (
                                                typeof window.openProfileSidebar ===
                                                "function"
                                            ) {
                                                window.openProfileSidebar(
                                                    sibling.id,
                                                    sibling
                                                );
                                            } else {
                                                event.preventDefault();
                                                event.stopPropagation();
                                                if (
                                                    typeof window.openProfileSidebar ===
                                                    "function"
                                                ) {
                                                    window.openProfileSidebar(
                                                        sibling.id,
                                                        sibling
                                                    );
                                                }
                                            }
                                        });

                                    const borderColor =
                                        sibling.gender === "female"
                                            ? "#ffb6c1"
                                            : "#add8e6";
                                    siblingGroup
                                        .append("rect")
                                        .attr("x", -cardWidth / 2)
                                        .attr("y", -cardHeight / 2)
                                        .attr("width", cardWidth)
                                        .attr("height", cardHeight)
                                        .attr("rx", 8)
                                        .attr("ry", 8)
                                        .attr("fill", "white")
                                        .attr("stroke", borderColor)
                                        .attr("stroke-width", 3)
                                        .style(
                                            "filter",
                                            "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                        );

                                    // Silhouette icon or photo
                                    const siblingIcon = siblingGroup
                                        .append("g")
                                        .attr("transform", "translate(0, -20)");
                                    renderAvatar(siblingIcon, sibling, svg);

                                    // Name
                                    let siblingName =
                                        sibling.name ||
                                        sibling.first_name ||
                                        "Unknown";
                                    if (sibling.last_name && !sibling.name) {
                                        siblingName += " " + sibling.last_name;
                                    }
                                    siblingGroup
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 20)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "12px")
                                        .attr("fill", "#333")
                                        .text(
                                            siblingName.length > 15
                                                ? siblingName.substring(0, 25) +
                                                      "..."
                                                : siblingName
                                        );

                                    // Add + icon
                                    siblingGroup
                                        .append("circle")
                                        .attr("cx", 0)
                                        .attr("cy", 32)
                                        .attr("r", 10)
                                        .attr("fill", "white")
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1)
                                        .style("cursor", "pointer")
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            openBranchBuilder(sibling);
                                        });
                                    siblingGroup
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 36)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "16px")
                                        .attr("font-weight", "bold")
                                        .text("+")
                                        .style("cursor", "pointer")
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            openBranchBuilder(sibling);
                                        });

                                    addEditDeleteIcons(
                                        siblingGroup,
                                        sibling.id,
                                        siblingName
                                    );
                                }
                            );

                            // Draw sibling lines for father's partner's siblings (same as father's siblings)
                            if (fatherPartnerSiblings.length > 0) {
                                const partnerXForLink = partnerX;
                                const linkY = cardY - cardHeight / 2 - 20;

                                const partnerSiblingPositions = [];
                                fatherPartnerSiblings.forEach(
                                    (sibling, siblingIndex) => {
                                        const siblingX =
                                            partnerX +
                                            cardWidth +
                                            partnerSiblingSpacing +
                                            siblingIndex *
                                                (cardWidth +
                                                    partnerSiblingSpacing);
                                        partnerSiblingPositions.push({
                                            x: siblingX,
                                            sibling: sibling,
                                        });
                                    }
                                );

                                const startX = partnerXForLink;
                                const startY = linkY;
                                const endX =
                                    partnerSiblingPositions.length > 0
                                        ? partnerSiblingPositions[
                                              partnerSiblingPositions.length - 1
                                          ].x
                                        : partnerXForLink;
                                const endY = linkY;

                                const distance = Math.abs(endX - startX);
                                const bendHeight = Math.min(
                                    6,
                                    Math.max(5, distance * 0.02)
                                );
                                const midX = (startX + endX) / 2;
                                const midY =
                                    Math.min(startY, endY) - bendHeight;
                                const pathData = `M ${startX} ${startY} Q ${midX} ${midY}, ${endX} ${endY}`;

                                node.append("path")
                                    .attr("class", "sibling-link")
                                    .attr("fill", "none")
                                    .attr("d", pathData);

                                // Vertical line to partner card
                                const partnerT = 0;
                                const partnerCurveY =
                                    (1 - partnerT) * (1 - partnerT) * startY +
                                    2 * (1 - partnerT) * partnerT * midY +
                                    partnerT * partnerT * endY;
                                node.append("line")
                                    .attr("class", "sibling-link")
                                    .attr("x1", partnerXForLink)
                                    .attr("y1", partnerCurveY)
                                    .attr("x2", partnerXForLink)
                                    .attr("y2", cardY - cardHeight / 2)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 2);

                                // Vertical lines to each sibling
                                partnerSiblingPositions.forEach((pos) => {
                                    const siblingX = pos.x;
                                    const t =
                                        endX !== startX
                                            ? (siblingX - startX) /
                                              (endX - startX)
                                            : 0;
                                    const curveY =
                                        (1 - t) * (1 - t) * startY +
                                        2 * (1 - t) * t * midY +
                                        t * t * endY;
                                    node.append("line")
                                        .attr("class", "sibling-link")
                                        .attr("x1", siblingX)
                                        .attr("y1", curveY)
                                        .attr("x2", siblingX)
                                        .attr("y2", cardY - cardHeight / 2)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2);
                                });
                            }
                        }

                        // Show parent cards (or "Unknown" buttons) above partner card when partner has siblings
                        // ONLY show when father's partner branch is toggled
                        if (
                            fatherPartnerSiblings.length > 0 &&
                            window.fatherPartnerBranchToggled
                        ) {
                            const partnerParentButtonY = cardY - 400; // Position above partner card (moved higher to join lines)
                            const grandparentCardWidth = 140;
                            const grandparentCardHeight = 90;
                            const grandparentSpacing = 350; // Spacing between grandparent cards
                            const grandparentCardY =
                                partnerParentButtonY - cardY;

                            const parentFatherX =
                                partnerX - grandparentSpacing / 2;
                            const parentMotherX =
                                partnerX + grandparentSpacing / 2;

                            // Check if partner has actual parents
                            const partnerParents = partner.parents || [];
                            const partnerParentData = partnerParents
                                .map((parentId) =>
                                    treeData.find((p) => p.id === parentId)
                                )
                                .filter((p) => p);

                            const partnerFather = partnerParentData.find(
                                (p) => p.gender === "male"
                            );
                            const partnerMother = partnerParentData.find(
                                (p) => p.gender === "female"
                            );

                            // Show actual father card or "Unknown" button
                            if (partnerFather) {
                                // Actual father card
                                const partnerFatherGroup = node
                                    .append("g")
                                    .attr("class", "grandparent-card")
                                    .attr("data-person-id", partnerFather.id)
                                    .attr(
                                        "transform",
                                        `translate(${parentFatherX}, ${grandparentCardY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        if (
                                            typeof window.openProfileSidebar ===
                                            "function"
                                        ) {
                                            window.openProfileSidebar(
                                                partnerFather.id,
                                                partnerFather
                                            );
                                        } else {
                                            event.preventDefault();
                                            event.stopPropagation();
                                            if (
                                                typeof window.openProfileSidebar ===
                                                "function"
                                            ) {
                                                window.openProfileSidebar(
                                                    partnerFather.id,
                                                    partnerFather
                                                );
                                            }
                                        }
                                    });

                                partnerFatherGroup
                                    .append("rect")
                                    .attr("x", -grandparentCardWidth / 2)
                                    .attr("y", -grandparentCardHeight / 2)
                                    .attr("width", grandparentCardWidth)
                                    .attr("height", grandparentCardHeight)
                                    .attr("rx", 8)
                                    .attr("ry", 8)
                                    .attr("fill", "white")
                                    .attr("stroke", "#add8e6")
                                    .attr("stroke-width", 3)
                                    .style(
                                        "filter",
                                        "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                    );

                                const partnerFatherIcon = partnerFatherGroup
                                    .append("g")
                                    .attr("transform", "translate(0, -20)");
                                // Use renderAvatar to support photos
                                renderAvatar(
                                    partnerFatherIcon,
                                    partnerFather,
                                    svg
                                );

                                let partnerFatherName =
                                    partnerFather.name ||
                                    partnerFather.first_name ||
                                    "";
                                if (partnerFather.last_name)
                                    partnerFatherName +=
                                        " " + partnerFather.last_name;
                                if (!partnerFatherName)
                                    partnerFatherName = "Unknown";

                                partnerFatherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 20)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "12px")
                                    .attr("fill", "#333")
                                    .text(
                                        partnerFatherName.length > 15
                                            ? partnerFatherName.substring(
                                                  0,
                                                  15
                                              ) + "..."
                                            : partnerFatherName
                                    );

                                addEditDeleteIcons(
                                    partnerFatherGroup,
                                    partnerFather.id,
                                    partnerFatherName
                                );
                            } else {
                                // Unknown Father button
                                const unknownFatherGroup = node
                                    .append("g")
                                    .attr("class", "grandparent-card")
                                    .attr(
                                        "transform",
                                        `translate(${parentFatherX}, ${grandparentCardY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        addParentFromNode(partner, "father");
                                    })
                                    .style("cursor", "pointer");

                                unknownFatherGroup
                                    .append("rect")
                                    .attr("x", -grandparentCardWidth / 2)
                                    .attr("y", -grandparentCardHeight / 2)
                                    .attr("width", grandparentCardWidth)
                                    .attr("height", grandparentCardHeight)
                                    .attr("rx", 8)
                                    .attr("ry", 8)
                                    .attr("fill", "white")
                                    .attr("stroke", "#add8e6")
                                    .attr("stroke-width", 3)
                                    .style(
                                        "filter",
                                        "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                    );

                                const unknownFatherIcon = unknownFatherGroup
                                    .append("g")
                                    .attr("transform", "translate(0, -20)");
                                // Unknown father - use default male avatar (no person data available)
                                unknownFatherIcon
                                    .append("image")
                                    .attr(
                                        "xlink:href",
                                        "https://familytree.hexafume.com/images/avatars/blue_card.png"
                                    )
                                    .attr(
                                        "href",
                                        "https://familytree.hexafume.com/images/avatars/blue_card.png"
                                    )
                                    .attr("x", -24)
                                    .attr("y", -24)
                                    .attr("width", 48)
                                    .attr("height", 48);

                                unknownFatherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 20)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "12px")
                                    .attr("fill", "#333")
                                    .text("Unknown");
                            }

                            // Show actual mother card or "Unknown" button
                            if (partnerMother) {
                                // Actual mother card
                                const partnerMotherGroup = node
                                    .append("g")
                                    .attr("class", "grandparent-card")
                                    .attr("data-person-id", partnerMother.id)
                                    .attr(
                                        "transform",
                                        `translate(${parentMotherX}, ${grandparentCardY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        if (
                                            typeof window.openProfileSidebar ===
                                            "function"
                                        ) {
                                            window.openProfileSidebar(
                                                partnerMother.id,
                                                partnerMother
                                            );
                                        } else {
                                            event.preventDefault();
                                            event.stopPropagation();
                                            if (
                                                typeof window.openProfileSidebar ===
                                                "function"
                                            ) {
                                                window.openProfileSidebar(
                                                    partnerMother.id,
                                                    partnerMother
                                                );
                                            }
                                        }
                                    });

                                partnerMotherGroup
                                    .append("rect")
                                    .attr("x", -grandparentCardWidth / 2)
                                    .attr("y", -grandparentCardHeight / 2)
                                    .attr("width", grandparentCardWidth)
                                    .attr("height", grandparentCardHeight)
                                    .attr("rx", 8)
                                    .attr("ry", 8)
                                    .attr("fill", "white")
                                    .attr("stroke", "#ffb6c1")
                                    .attr("stroke-width", 3)
                                    .style(
                                        "filter",
                                        "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                    );

                                const partnerMotherIcon = partnerMotherGroup
                                    .append("g")
                                    .attr("transform", "translate(0, -20)");
                                renderAvatar(
                                    partnerMotherIcon,
                                    partnerMother,
                                    svg
                                );

                                let partnerMotherName =
                                    partnerMother.name ||
                                    partnerMother.first_name ||
                                    "";
                                if (partnerMother.last_name)
                                    partnerMotherName +=
                                        " " + partnerMother.last_name;
                                if (!partnerMotherName)
                                    partnerMotherName = "Unknown";

                                partnerMotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 20)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "12px")
                                    .attr("fill", "#333")
                                    .text(
                                        partnerMotherName.length > 15
                                            ? partnerMotherName.substring(
                                                  0,
                                                  15
                                              ) + "..."
                                            : partnerMotherName
                                    );

                                addEditDeleteIcons(
                                    partnerMotherGroup,
                                    partnerMother.id,
                                    partnerMotherName
                                );
                            } else {
                                // Unknown Mother button
                                const unknownMotherGroup = node
                                    .append("g")
                                    .attr("class", "grandparent-card")
                                    .attr(
                                        "transform",
                                        `translate(${parentMotherX}, ${grandparentCardY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        addParentFromNode(partner, "mother");
                                    })
                                    .style("cursor", "pointer");

                                unknownMotherGroup
                                    .append("rect")
                                    .attr("x", -grandparentCardWidth / 2)
                                    .attr("y", -grandparentCardHeight / 2)
                                    .attr("width", grandparentCardWidth)
                                    .attr("height", grandparentCardHeight)
                                    .attr("rx", 8)
                                    .attr("ry", 8)
                                    .attr("fill", "white")
                                    .attr("stroke", "#ffb6c1")
                                    .attr("stroke-width", 3)
                                    .style(
                                        "filter",
                                        "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                    );

                                const unknownMotherIcon = unknownMotherGroup
                                    .append("g")
                                    .attr("transform", "translate(0, -20)");
                                // Unknown mother - use default female avatar (no person data available)
                                unknownMotherIcon
                                    .append("image")
                                    .attr(
                                        "xlink:href",
                                        "https://familytree.hexafume.com/images/avatars/pink card.png"
                                    )
                                    .attr(
                                        "href",
                                        "https://familytree.hexafume.com/images/avatars/pink card.png"
                                    )
                                    .attr("x", -24)
                                    .attr("y", -24)
                                    .attr("width", 48)
                                    .attr("height", 48);

                                unknownMotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 20)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "12px")
                                    .attr("fill", "#333")
                                    .text("unknown");
                            }

                            // Draw lines from parent cards to partner card (like screenshot)
                            const mainPersonNode = root
                                .descendants()
                                .find(
                                    (d) =>
                                        d.data.id === mainPersonId &&
                                        d.data.id !== "virtual-root"
                                );
                            if (mainPersonNode) {
                                // Calculate absolute positions
                                const absolutePartnerX =
                                    mainPersonNode.x + partnerX;
                                const absoluteParentFatherX =
                                    mainPersonNode.x + parentFatherX;
                                const absoluteParentMotherX =
                                    mainPersonNode.x + parentMotherX;

                                // Y position of parent cards bottom (where horizontal line connects)
                                // Keep line at previous position (250 offset) while cards are at 400
                                const parentCardsBottomY =
                                    mainPersonNode.y +
                                    (cardY - 250) +
                                    grandparentCardHeight / 2;
                                // Y position of partner card top
                                const partnerCardTopY =
                                    mainPersonNode.y + cardY - cardHeight / 2;

                                // Draw horizontal line connecting the two parent cards at their bottom-center
                                g.append("line")
                                    .attr("class", "parent-link")
                                    .attr("x1", absoluteParentFatherX)
                                    .attr("y1", parentCardsBottomY)
                                    .attr("x2", absoluteParentMotherX)
                                    .attr("y2", parentCardsBottomY)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 2)
                                    .style("pointer-events", "none");

                                // Draw vertical line from midpoint of horizontal line to top of partner card
                                const horizontalLineMidpointX =
                                    (absoluteParentFatherX +
                                        absoluteParentMotherX) /
                                    2;
                                g.append("line")
                                    .attr("class", "parent-link")
                                    .attr("x1", horizontalLineMidpointX)
                                    .attr("y1", parentCardsBottomY)
                                    .attr("x2", absolutePartnerX)
                                    .attr("y2", partnerCardTopY)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 2)
                                    .style("pointer-events", "none");
                            }
                        }

                        // Find additional partners of father's partner (excluding mother and father)
                        const fatherPartnerPartners = [];
                        if (partner.spouses && partner.spouses.length > 0) {
                            partner.spouses.forEach((spouseId) => {
                                if (spouseId === mother?.id) return;
                                if (spouseId === father?.id) return; // Exclude father to prevent duplicate card
                                const partnerData = treeData.find(
                                    (p) => p.id === spouseId
                                );
                                if (partnerData) {
                                    fatherPartnerPartners.push(partnerData);
                                }
                            });
                        }

                        // Draw additional partner cards to the LEFT of father card
                        // ONLY show when father's partner branch is toggled
                        if (
                            fatherPartnerPartners.length > 0 &&
                            window.fatherPartnerBranchToggled
                        ) {
                            // Father card position when partner branch is toggled
                            const fatherX = -cardWidth / 2 - spacing / 2 - 100;

                            fatherPartnerPartners.forEach(
                                (additionalPartner, partnerIndex) => {
                                    // Position to the LEFT of father card
                                    const additionalPartnerX =
                                        fatherX -
                                        cardWidth -
                                        200 -
                                        partnerIndex * (cardWidth + 200);
                                    const additionalPartnerY = cardY;

                                    const additionalPartnerGroup = node
                                        .append("g")
                                        .attr(
                                            "class",
                                            "parent-partner-card father-partner-partner-card"
                                        )
                                        .attr(
                                            "transform",
                                            `translate(${additionalPartnerX}, ${additionalPartnerY})`
                                        )
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            if (
                                                typeof window.openProfileSidebar ===
                                                "function"
                                            ) {
                                                window.openProfileSidebar(
                                                    additionalPartner.id,
                                                    additionalPartner
                                                );
                                            } else {
                                                event.preventDefault();
                                                event.stopPropagation();
                                                if (
                                                    typeof window.openProfileSidebar ===
                                                    "function"
                                                ) {
                                                    window.openProfileSidebar(
                                                        additionalPartner.id,
                                                        additionalPartner
                                                    );
                                                }
                                            }
                                        });

                                    // Always use blue border for father's partner's partner card
                                    const borderColor = "#add8e6";
                                    additionalPartnerGroup
                                        .append("rect")
                                        .attr("x", -cardWidth / 2)
                                        .attr("y", -cardHeight / 2)
                                        .attr("width", cardWidth)
                                        .attr("height", cardHeight)
                                        .attr("rx", 8)
                                        .attr("ry", 8)
                                        .attr("fill", "white")
                                        .attr("stroke", borderColor)
                                        .attr("stroke-width", 3)
                                        .style(
                                            "filter",
                                            "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                        );

                                    // Silhouette, name, + icon, edit/delete icons (same structure)
                                    const additionalPartnerIcon =
                                        additionalPartnerGroup
                                            .append("g")
                                            .attr(
                                                "transform",
                                                "translate(0, -20)"
                                            );
                                    additionalPartnerIcon
                                        .append("circle")
                                        .attr("cx", 0)
                                        .attr("cy", -8)
                                        .attr("r", 8)
                                        .attr("fill", "#d0d0d0");
                                    additionalPartnerIcon
                                        .append("rect")
                                        .attr("x", -10)
                                        .attr("y", 0)
                                        .attr("width", 20)
                                        .attr("height", 16)
                                        .attr("rx", 10)
                                        .attr("fill", "#d0d0d0");

                                    let additionalPartnerName =
                                        additionalPartner.name ||
                                        additionalPartner.first_name ||
                                        "Unknown";
                                    if (
                                        additionalPartner.last_name &&
                                        !additionalPartner.name
                                    ) {
                                        additionalPartnerName +=
                                            " " + additionalPartner.last_name;
                                    }
                                    additionalPartnerGroup
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 20)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "12px")
                                        .attr("fill", "#333")
                                        .text(
                                            additionalPartnerName.length > 15
                                                ? additionalPartnerName.substring(
                                                      0,
                                                      25
                                                  ) + "..."
                                                : additionalPartnerName
                                        );

                                    additionalPartnerGroup
                                        .append("circle")
                                        .attr("cx", 0)
                                        .attr("cy", 32)
                                        .attr("r", 10)
                                        .attr("fill", "white")
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1)
                                        .style("cursor", "pointer")
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            openBranchBuilder(
                                                additionalPartner
                                            );
                                        });
                                    additionalPartnerGroup
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 36)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "16px")
                                        .attr("font-weight", "bold")
                                        .text("+")
                                        .style("cursor", "pointer")
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            openBranchBuilder(
                                                additionalPartner
                                            );
                                        });

                                    addEditDeleteIcons(
                                        additionalPartnerGroup,
                                        additionalPartner.id,
                                        additionalPartnerName
                                    );

                                    // Draw line from additional partner to father card
                                    const mainPersonNode = root
                                        .descendants()
                                        .find(
                                            (d) =>
                                                d.data.id === mainPersonId &&
                                                d.data.id !== "virtual-root"
                                        );
                                    if (mainPersonNode && father) {
                                        // Father card position when partner branch is toggled
                                        const fatherX =
                                            -cardWidth / 2 - spacing / 2 - 100;
                                        const absoluteFatherX =
                                            mainPersonNode.x + fatherX;
                                        const absoluteAdditionalPartnerX =
                                            mainPersonNode.x +
                                            additionalPartnerX;
                                        const middleLineY =
                                            mainPersonNode.y + cardY;

                                        // Line from right edge of additional partner to left edge of father card
                                        const partnerLineStartX =
                                            absoluteAdditionalPartnerX +
                                            cardWidth / 2;
                                        const partnerLineEndX =
                                            absoluteFatherX - cardWidth / 2;

                                        g.append("line")
                                            .attr(
                                                "class",
                                                "spouse-link parent-partner-link"
                                            )
                                            .attr("x1", partnerLineStartX)
                                            .attr("y1", middleLineY)
                                            .attr("x2", partnerLineEndX)
                                            .attr("y2", middleLineY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 1.5)
                                            .style("pointer-events", "none");
                                    }
                                }
                            );
                        }
                    });

                    // If no mother exists, show "Add mother" button (MyHeritage style)
                    // BUT: Hide when father's partner branch is toggled
                    if (!mother && !window.fatherPartnerBranchToggled) {
                        const addMotherButtonX = cardWidth / 2 + spacing / 2;
                        // Position button so its bottom aligns with father card's bottom
                        // Both cards have same height (100px), so center at same Y (cardY)
                        const addMotherButtonY = cardY;
                        // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                        const addMotherButtonWidth = 140; // Standardized button width for all generations
                        const addMotherButtonHeight = 90; // Standardized button height for all generations

                        const addMotherGroup = node
                            .append("g")
                            .attr("class", "add-mother-button")
                            .attr(
                                "transform",
                                `translate(${addMotherButtonX}, ${addMotherButtonY})`
                            )
                            .on("click", function (event) {
                                event.stopPropagation();
                                addParentFromNode(d.data, "mother");
                            });

                        // Dashed border rectangle - light gray border, no background
                        addMotherGroup
                            .append("rect")
                            .attr("x", -addMotherButtonWidth / 2)
                            .attr("y", -addMotherButtonHeight / 2)
                            .attr("width", addMotherButtonWidth)
                            .attr("height", addMotherButtonHeight)
                            .attr("rx", 8)
                            .attr("ry", 8)
                            .attr("fill", "none")
                            .attr("stroke", "#d0d0d0")
                            .attr("stroke-width", 1)
                            .attr("stroke-dasharray", "5,5")
                            .style("cursor", "pointer");

                        // "Add mother" text - black color
                        addMotherGroup
                            .append("text")
                            .attr("x", 0)
                            .attr("y", 8)
                            .attr("text-anchor", "middle")
                            .attr("font-size", "11px")
                            .attr("font-weight", "500")
                            .attr("fill", "#333")
                            .text("Add mother")
                            .style("cursor", "pointer");
                    }

                    // Draw TWO straight horizontal lines between papa arslan and mama arslan when partner exists (matching MyHeritage)
                    // These lines should be in the middle/center of the cards (not at the top)
                    // BUT: Only show if father's branch is visible (not hidden when mother has siblings)
                    // AND: Hide when father's partner branch is toggled (only show partner's relations)
                    if (
                        shouldShowFatherBranch &&
                        !window.fatherPartnerBranchToggled &&
                        father &&
                        mother &&
                        fatherPartners.length > 0
                    ) {
                        // Use EXACT same positions as the actual cards are drawn
                        // Father card is at: -cardWidth / 2 - spacing / 2 - 100
                        const fatherX = -cardWidth / 2 - spacing / 2 - 100;
                        // Mother card is at: cardWidth / 2 + spacing / 2 + 150
                        const motherX = cardWidth / 2 + spacing / 2 + 150;
                        const mainPersonNode = root
                            .descendants()
                            .find(
                                (d) =>
                                    d.data.id === mainPersonId &&
                                    d.data.id !== "virtual-root"
                            );
                        if (mainPersonNode) {
                            // Calculate absolute positions
                            // cardY = -150 is the center Y of parent cards (relative to main person node)
                            const absoluteFatherX = mainPersonNode.x + fatherX;
                            const absoluteMotherX = mainPersonNode.x + motherX;
                            const middleLineY = mainPersonNode.y + cardY; // Middle/center Y of cards (cardY is already the center)

                            // Separate the two lines with a small distance so they're visible as separate lines
                            const lineSeparation = 4; // Small separation between the two lines

                            // Make lines extend fully from father card's right edge to mother card's left edge
                            // cardWidth / 2 gives us the distance from card center to card edge
                            const lineStartX = absoluteFatherX + cardWidth / 2; // Start at right edge of father card
                            const lineEndX = absoluteMotherX - cardWidth / 2; // End at left edge of mother card

                            // Draw first straight horizontal line between father and mother (Line 1)
                            // Positioned slightly above center, with reduced width
                            g.append("line")
                                .attr(
                                    "class",
                                    "spouse-link parent-spouse-link-first"
                                )
                                .attr("x1", lineStartX)
                                .attr("y1", middleLineY - lineSeparation / 2) // Slightly above center
                                .attr("x2", lineEndX)
                                .attr("y2", middleLineY - lineSeparation / 2)
                                .attr("stroke", "#999")
                                .attr("stroke-width", 1.5)
                                .style("pointer-events", "none");

                            // Draw second straight horizontal line between father and mother (Line 2)
                            // Positioned slightly below center, with reduced width
                            g.append("line")
                                .attr(
                                    "class",
                                    "spouse-link parent-spouse-link-second"
                                )
                                .attr("x1", lineStartX)
                                .attr("y1", middleLineY + lineSeparation / 2) // Slightly below center
                                .attr("x2", lineEndX)
                                .attr("y2", middleLineY + lineSeparation / 2)
                                .attr("stroke", "#999")
                                .attr("stroke-width", 1.5)
                                .style("pointer-events", "none");

                            // Draw single line from mama arslan to partner card (matching MyHeritage)
                            if (fatherPartners.length > 0) {
                                fatherPartners.forEach((partner, index) => {
                                    const partnerSpacing = 200;
                                    // Use EXACT same motherX as the actual mother card position (must match line 5533)
                                    const partnerMotherX =
                                        cardWidth / 2 + spacing / 2 + 150;
                                    const partnerX =
                                        partnerMotherX +
                                        cardWidth +
                                        partnerSpacing +
                                        index * (cardWidth + partnerSpacing);
                                    const absolutePartnerX =
                                        mainPersonNode.x + partnerX;

                                    // Make line extend fully from mother card's right edge to partner card's left edge
                                    const partnerLineStartX =
                                        absoluteMotherX + cardWidth / 2; // Start at right edge of mother card
                                    const partnerLineEndX =
                                        absolutePartnerX - cardWidth / 2; // End at left edge of partner card

                                    // Draw single horizontal line from mama to partner (at middle of cards)
                                    g.append("line")
                                        .attr(
                                            "class",
                                            "spouse-link parent-partner-link"
                                        )
                                        .attr("x1", partnerLineStartX)
                                        .attr("y1", middleLineY)
                                        .attr("x2", partnerLineEndX)
                                        .attr("y2", middleLineY)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1.5)
                                        .style("pointer-events", "none");
                                });
                            }
                        }
                    }

                    // Add sibling cards next to father card using CSS-based positioning (matching MyHeritage)
                    // Find siblings of father
                    // BUT: Only show if father's branch is visible (not hidden when mother has siblings)
                    // AND: Hide father's siblings when father's partner branch is toggled (only show partner's relations)
                    if (
                        !shouldShowFatherBranch ||
                        window.fatherPartnerBranchToggled
                    ) {
                        console.log(
                            "Skipping father siblings - father branch is hidden or father's partner branch is toggled"
                        );
                    } else {
                        console.log(
                            "Checking for father siblings. Father ID:",
                            father.id,
                            "Father name:",
                            fatherName
                        );
                        console.log("Father siblings array:", father.siblings);
                        console.log("Father parents array:", father.parents);
                        console.log(
                            "All treeData persons:",
                            treeData.map(
                                (p) =>
                                    `${p.name || p.first_name} (ID: ${
                                        p.id
                                    }, parents: ${
                                        p.parents ? p.parents.join(",") : "none"
                                    })`
                            )
                        );

                        const fatherSiblings = [];
                        // Exclude father's parents from being treated as siblings
                        const fatherParentIds = father.parents
                            ? new Set(father.parents)
                            : new Set();

                        if (father.siblings && father.siblings.length > 0) {
                            console.log(
                                "Father has explicit siblings:",
                                father.siblings
                            );
                            father.siblings.forEach((siblingId) => {
                                // Skip if this is actually a parent of the father
                                if (fatherParentIds.has(siblingId)) {
                                    console.log(
                                        "Skipping sibling ID:",
                                        siblingId,
                                        "- this is a parent of the father, not a sibling"
                                    );
                                    return;
                                }

                                const siblingData = treeData.find(
                                    (p) => p.id === siblingId
                                );
                                console.log(
                                    "Looking for sibling ID:",
                                    siblingId,
                                    "Found:",
                                    siblingData
                                        ? siblingData.name ||
                                              siblingData.first_name
                                        : "NOT FOUND"
                                );
                                if (
                                    siblingData &&
                                    siblingData.id !== father.id
                                ) {
                                    fatherSiblings.push(siblingData);
                                    console.log(
                                        "Added explicit sibling:",
                                        siblingData.name ||
                                            siblingData.first_name
                                    );
                                }
                            });
                        }
                        // Also check implicit siblings (shared parents)
                        if (father.parents && father.parents.length > 0) {
                            console.log(
                                "Checking for implicit siblings (shared parents). Father parents:",
                                father.parents
                            );
                            treeData.forEach((p) => {
                                if (p.id === father.id || p.id === mainPersonId)
                                    return;
                                // Skip if this person is actually a parent of the father
                                if (fatherParentIds.has(p.id)) {
                                    return;
                                }
                                if (
                                    p.parents &&
                                    p.parents.length > 0 &&
                                    p.parents.every((pId) =>
                                        father.parents.includes(pId)
                                    ) &&
                                    father.parents.every((pId) =>
                                        p.parents.includes(pId)
                                    ) &&
                                    !fatherSiblings.find((s) => s.id === p.id)
                                ) {
                                    fatherSiblings.push(p);
                                    console.log(
                                        "Found implicit sibling:",
                                        p.name || p.first_name,
                                        "ID:",
                                        p.id
                                    );
                                }
                            });
                        }
                        // Also check if any person in treeData has the same parents as father (they would be father's sibling)
                        // BUT exclude people who are already in the main tree hierarchy (they're children, not parent siblings)
                        console.log(
                            "Checking all persons for potential siblings of father..."
                        );
                        const excludedIdsForSiblingCheck = new Set([
                            father.id,
                            mainPersonId,
                        ]);
                        // Exclude father's parents from being treated as siblings
                        if (father.parents && father.parents.length > 0) {
                            father.parents.forEach((parentId) =>
                                excludedIdsForSiblingCheck.add(parentId)
                            );
                        }
                        // Also exclude main person's parents (they're shown as cards above, not siblings)
                        if (mainPersonId) {
                            const mainPersonData = treeData.find(
                                (p) => p.id === mainPersonId
                            );
                            if (mainPersonData && mainPersonData.parents) {
                                mainPersonData.parents.forEach((parentId) =>
                                    excludedIdsForSiblingCheck.add(parentId)
                                );
                            }
                        }
                        // Exclude people who are children of main person (they're in the tree hierarchy)
                        if (mainPersonId) {
                            const mainPersonData = treeData.find(
                                (p) => p.id === mainPersonId
                            );
                            if (mainPersonData && mainPersonData.children) {
                                mainPersonData.children.forEach((childId) =>
                                    excludedIdsForSiblingCheck.add(childId)
                                );
                            }
                        }

                        treeData.forEach((p) => {
                            if (excludedIdsForSiblingCheck.has(p.id)) return;
                            // Check if this person has the same parents as father (they would be father's sibling)
                            if (
                                p.parents &&
                                p.parents.length > 0 &&
                                father.parents &&
                                father.parents.length > 0
                            ) {
                                const sharedParents = p.parents.filter((pId) =>
                                    father.parents.includes(pId)
                                );
                                if (
                                    sharedParents.length ===
                                        father.parents.length &&
                                    sharedParents.length === p.parents.length
                                ) {
                                    if (
                                        !fatherSiblings.find(
                                            (s) => s.id === p.id
                                        )
                                    ) {
                                        fatherSiblings.push(p);
                                        console.log(
                                            "Found potential sibling through shared parents:",
                                            p.name || p.first_name,
                                            "ID:",
                                            p.id
                                        );
                                    }
                                }
                            }
                        });
                        // Final filter: Remove any siblings that are actually parents of the father
                        const filteredFatherSiblings = fatherSiblings.filter(
                            (s) => !fatherParentIds.has(s.id)
                        );

                        console.log(
                            "Total father siblings found (before filtering parents):",
                            fatherSiblings.length,
                            fatherSiblings.map((s) => s.name || s.first_name)
                        );
                        console.log(
                            "Total father siblings found (after filtering parents):",
                            filteredFatherSiblings.length,
                            filteredFatherSiblings.map(
                                (s) => s.name || s.first_name
                            )
                        );

                        // Use the filtered list
                        const finalFatherSiblings = filteredFatherSiblings;

                        // Also find siblings of father's siblings (matching MyHeritage - they appear at the end)
                        const siblingsOfSiblings = [];
                        finalFatherSiblings.forEach((fatherSibling) => {
                            // Check explicit siblings
                            if (
                                fatherSibling.siblings &&
                                fatherSibling.siblings.length > 0
                            ) {
                                fatherSibling.siblings.forEach(
                                    (siblingOfSiblingId) => {
                                        // Exclude the father sibling itself and father
                                        if (
                                            siblingOfSiblingId ===
                                                fatherSibling.id ||
                                            siblingOfSiblingId === father.id
                                        ) {
                                            return;
                                        }
                                        // Exclude if already in finalFatherSiblings array
                                        if (
                                            finalFatherSiblings.find(
                                                (s) =>
                                                    s.id === siblingOfSiblingId
                                            )
                                        ) {
                                            return;
                                        }

                                        const siblingOfSiblingData =
                                            treeData.find(
                                                (p) =>
                                                    p.id === siblingOfSiblingId
                                            );
                                        if (siblingOfSiblingData) {
                                            // Exclude main person and main person's parents
                                            if (
                                                siblingOfSiblingData.id ===
                                                mainPersonId
                                            )
                                                return;
                                            if (
                                                parents.includes(
                                                    siblingOfSiblingData.id
                                                )
                                            )
                                                return;
                                            // Exclude parents of the father's sibling (they are parents, not siblings)
                                            if (
                                                fatherSibling.parents &&
                                                fatherSibling.parents.includes(
                                                    siblingOfSiblingData.id
                                                )
                                            ) {
                                                console.log(
                                                    `Skipping ${
                                                        siblingOfSiblingData.name ||
                                                        siblingOfSiblingData.first_name
                                                    } (ID: ${
                                                        siblingOfSiblingData.id
                                                    }) - this is a parent of ${
                                                        fatherSibling.name ||
                                                        fatherSibling.first_name
                                                    }, not a sibling`
                                                );
                                                return;
                                            }

                                            // Check if not already added
                                            if (
                                                !siblingsOfSiblings.find(
                                                    (s) =>
                                                        s.id ===
                                                        siblingOfSiblingData.id
                                                )
                                            ) {
                                                siblingsOfSiblings.push(
                                                    siblingOfSiblingData
                                                );
                                                console.log(
                                                    `Found sibling of father's sibling (${
                                                        fatherSibling.name ||
                                                        fatherSibling.first_name
                                                    }):`,
                                                    siblingOfSiblingData.name ||
                                                        siblingOfSiblingData.first_name,
                                                    "ID:",
                                                    siblingOfSiblingData.id
                                                );
                                            }
                                        }
                                    }
                                );
                            }

                            // Check implicit siblings (shared parents)
                            if (
                                fatherSibling.parents &&
                                fatherSibling.parents.length > 0
                            ) {
                                treeData.forEach((p) => {
                                    // Exclude if already in finalFatherSiblings or siblingsOfSiblings
                                    if (
                                        finalFatherSiblings.find(
                                            (s) => s.id === p.id
                                        )
                                    )
                                        return;
                                    if (
                                        siblingsOfSiblings.find(
                                            (s) => s.id === p.id
                                        )
                                    )
                                        return;
                                    if (
                                        p.id === fatherSibling.id ||
                                        p.id === father.id
                                    )
                                        return;
                                    if (p.id === mainPersonId) return;
                                    if (parents.includes(p.id)) return;
                                    // Exclude parents of the father's sibling (they are parents, not siblings)
                                    if (
                                        fatherSibling.parents &&
                                        fatherSibling.parents.includes(p.id)
                                    ) {
                                        console.log(
                                            `Skipping ${
                                                p.name || p.first_name
                                            } (ID: ${
                                                p.id
                                            }) - this is a parent of ${
                                                fatherSibling.name ||
                                                fatherSibling.first_name
                                            }, not a sibling`
                                        );
                                        return;
                                    }

                                    // Check if shares same parents as father's sibling
                                    if (
                                        p.parents &&
                                        p.parents.length > 0 &&
                                        p.parents.every((pId) =>
                                            fatherSibling.parents.includes(pId)
                                        ) &&
                                        fatherSibling.parents.every((pId) =>
                                            p.parents.includes(pId)
                                        )
                                    ) {
                                        siblingsOfSiblings.push(p);
                                        console.log(
                                            `Found implicit sibling of father's sibling (${
                                                fatherSibling.name ||
                                                fatherSibling.first_name
                                            }):`,
                                            p.name || p.first_name,
                                            "ID:",
                                            p.id
                                        );
                                    }
                                });
                            }
                        });

                        // Add siblings of siblings to the end of finalFatherSiblings array
                        const allFatherSiblings = [
                            ...finalFatherSiblings,
                            ...siblingsOfSiblings,
                        ];

                        console.log(
                            "Total father siblings + siblings of siblings:",
                            allFatherSiblings.length,
                            allFatherSiblings.map((s) => s.name || s.first_name)
                        );

                        // Sort siblings: brothers (male) first, then sisters (female), sorted by ID for consistency
                        // BUT: Keep siblings-of-siblings at the end (after direct siblings)
                        // First, separate direct siblings from siblings-of-siblings
                        const directSiblings = finalFatherSiblings.slice();
                        const siblingsOfSiblingsArray =
                            siblingsOfSiblings.slice();

                        // Separate all siblings by gender and type
                        const directBrothers = directSiblings.filter(
                            (s) => s.gender === "male"
                        );
                        const directSisters = directSiblings.filter(
                            (s) => s.gender === "female"
                        );
                        const siblingsOfSiblingsBrothers =
                            siblingsOfSiblingsArray.filter(
                                (s) => s.gender === "male"
                            );
                        const siblingsOfSiblingsSisters =
                            siblingsOfSiblingsArray.filter(
                                (s) => s.gender === "female"
                            );

                        // Combine all brothers together
                        const allBrothers = [
                            ...directBrothers,
                            ...siblingsOfSiblingsBrothers,
                        ];

                        // Find the newest brother (highest ID)
                        const newestBrother =
                            allBrothers.length > 0
                                ? allBrothers.reduce((max, brother) =>
                                      brother.id > max.id ? brother : max
                                  )
                                : null;

                        // Get all other brothers (excluding the newest one) and sort them normally
                        const otherBrothers = allBrothers.filter(
                            (b) => b.id !== newestBrother?.id
                        );
                        otherBrothers.sort((a, b) => a.id - b.id); // Ascending order

                        // Combine all sisters together
                        const allSisters = [
                            ...directSisters,
                            ...siblingsOfSiblingsSisters,
                        ];

                        // Find the newest sister (highest ID)
                        const newestSister =
                            allSisters.length > 0
                                ? allSisters.reduce((max, sister) =>
                                      sister.id > max.id ? sister : max
                                  )
                                : null;

                        // Get all other sisters (excluding the newest one) and sort them normally
                        const otherSisters = allSisters.filter(
                            (s) => s.id !== newestSister?.id
                        );
                        otherSisters.sort((a, b) => a.id - b.id); // Ascending order

                        // Combine: other brothers first, then other sisters, then newest brother, then newest sister at the very end
                        const sortedFatherSiblings = [
                            ...otherBrothers,
                            ...otherSisters,
                        ];

                        // Add newest brother (bro333) after other siblings
                        if (newestBrother) {
                            sortedFatherSiblings.push(newestBrother);
                        }

                        // Add newest sister at the very end (after bro333)
                        if (newestSister) {
                            sortedFatherSiblings.push(newestSister);
                        }

                        // Draw sibling cards to the right of father card - positioned using CSS transform
                        // In MyHeritage, parent siblings appear after all partners, at the same Y level
                        // Calculate starting position for siblings
                        const fatherX = -cardWidth / 2 - spacing / 2;
                        const motherX = cardWidth / 2 + spacing / 2 + 100; // Moved 100px to the right // Mother position
                        const partnerSpacing = 200; // Spacing between cards
                        const lastPartnerX =
                            fatherPartners.length > 0
                                ? mother
                                    ? motherX +
                                      cardWidth +
                                      partnerSpacing +
                                      (fatherPartners.length - 1) *
                                          (cardWidth + partnerSpacing)
                                    : cardWidth / 2 +
                                      spacing / 2 +
                                      (fatherPartners.length - 1) *
                                          (cardWidth + partnerSpacing)
                                : mother
                                ? motherX
                                : fatherX;
                        const siblingSpacing = 200; // Spacing between sibling groups (sibling + partner)
                        const partnerCloseSpacing = 150; // Very close spacing between sibling and their partner
                        const startSiblingX =
                            fatherPartners.length > 0 || mother
                                ? lastPartnerX + cardWidth + siblingSpacing
                                : fatherX + cardWidth + siblingSpacing;

                        // Track cumulative X position to account for siblings with partners
                        let cumulativeX = 0;

                        // Store sibling positions for line drawing
                        const siblingPositions = [];

                        sortedFatherSiblings.forEach((sibling, index) => {
                            // Calculate position for this sibling (accounting for previous siblings and their partners)
                            const siblingX = startSiblingX + cumulativeX;
                            const siblingY = cardY; // Same Y as father, mother, and partners (same level)

                            // Store position for line drawing
                            siblingPositions.push({
                                x: siblingX,
                                sibling: sibling,
                            });

                            const siblingGroup = node
                                .append("g")
                                .attr("class", "parent-sibling-card")
                                .attr("data-person-id", sibling.id)
                                .attr(
                                    "transform",
                                    `translate(${siblingX}, ${siblingY})`
                                )
                                .on("click", function (event) {
                                    event.stopPropagation();
                                    if (
                                        typeof window.openProfileSidebar ===
                                        "function"
                                    ) {
                                        window.openProfileSidebar(
                                            sibling.id,
                                            sibling
                                        );
                                    } else {
                                        event.preventDefault();
                                        event.stopPropagation();
                                        if (
                                            typeof window.openProfileSidebar ===
                                            "function"
                                        ) {
                                            window.openProfileSidebar(
                                                sibling.id,
                                                sibling
                                            );
                                        }
                                    }
                                });

                            // Card rectangle with blue border for male, pink for female
                            const borderColor =
                                sibling.gender === "female"
                                    ? "#ffb6c1"
                                    : "#add8e6";
                            siblingGroup
                                .append("rect")
                                .attr("x", -cardWidth / 2)
                                .attr("y", -cardHeight / 2)
                                .attr("width", cardWidth)
                                .attr("height", cardHeight)
                                .attr("rx", 8)
                                .attr("ry", 8)
                                .attr("fill", "white")
                                .attr("stroke", borderColor)
                                .attr("stroke-width", 3)
                                .style(
                                    "filter",
                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                );

                            // Use renderAvatar to support photos
                            const siblingIcon = siblingGroup
                                .append("g")
                                .attr("transform", "translate(0, -20)");
                            renderAvatar(siblingIcon, sibling, svg);

                            // Name
                            let siblingName = sibling.name;
                            if (!siblingName) {
                                siblingName = sibling.first_name || "";
                                if (sibling.last_name) {
                                    siblingName += " " + sibling.last_name;
                                }
                                if (!siblingName) {
                                    siblingName = "Unknown";
                                }
                            }
                            siblingGroup
                                .append("text")
                                .attr("x", 0)
                                .attr("y", 20)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "12px")
                                .attr("fill", "#333")
                                .text(
                                    siblingName.length > 15
                                        ? siblingName.substring(0, 25) + "..."
                                        : siblingName
                                );

                            // Add + icon
                            siblingGroup
                                .append("circle")
                                .attr("cx", 0)
                                .attr("cy", 32)
                                .attr("r", 10)
                                .attr("fill", "white")
                                .attr("stroke", "#999")
                                .attr("stroke-width", 1)
                                .style("cursor", "pointer")
                                .on("click", function (event) {
                                    event.stopPropagation();
                                    openBranchBuilder(sibling);
                                });
                            siblingGroup
                                .append("text")
                                .attr("x", 0)
                                .attr("y", 36)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "16px")
                                .attr("font-weight", "bold")
                                .text("+")
                                .style("cursor", "pointer")
                                .on("click", function (event) {
                                    event.stopPropagation();
                                    openBranchBuilder(sibling);
                                });

                            // Add edit and delete icons
                            addEditDeleteIcons(
                                siblingGroup,
                                sibling.id,
                                siblingName
                            );

                            console.log(
                                `Drew sibling card for ${siblingName} next to father ${fatherName} at (${siblingX}, ${siblingY}), father at (${fatherX}, ${cardY})`
                            );

                            // Find and draw children of this sibling
                            const siblingChildren = treeData.filter((p) => {
                                if (!p.parents || p.parents.length === 0)
                                    return false;
                                // Check if this person is a child of the sibling
                                return p.parents.includes(sibling.id);
                            });

                            // Also check if sibling has a partner - children might have both as parents
                            let siblingPartnerId = null;
                            if (sibling.spouses && sibling.spouses.length > 0) {
                                siblingPartnerId = sibling.spouses[0];
                                // Also find children that have the partner as a parent
                                const partnerChildren = treeData.filter((p) => {
                                    if (!p.parents || p.parents.length === 0)
                                        return false;
                                    // Check if this person is a child of the partner
                                    return p.parents.includes(siblingPartnerId);
                                });
                                // Add children that have partner as parent but not sibling (they should have both)
                                partnerChildren.forEach((child) => {
                                    if (
                                        !siblingChildren.find(
                                            (c) => c.id === child.id
                                        )
                                    ) {
                                        // Check if child has both parents
                                        if (
                                            child.parents.includes(
                                                sibling.id
                                            ) &&
                                            child.parents.includes(
                                                siblingPartnerId
                                            )
                                        ) {
                                            siblingChildren.push(child);
                                        }
                                    }
                                });
                            }

                            console.log(
                                `Found ${siblingChildren.length} children for sibling ${siblingName} (ID: ${sibling.id}):`,
                                siblingChildren.map(
                                    (c) =>
                                        `${c.name || c.first_name} (ID: ${
                                            c.id
                                        })`
                                )
                            );

                            // Draw children below the sibling card
                            if (siblingChildren.length > 0) {
                                const childCardY = siblingY + cardHeight + 100; // Position below sibling card
                                const childCardSpacing = 200; // Spacing between child cards

                                // Calculate partner X position if partner exists
                                let partnerX = null;
                                if (siblingPartnerId) {
                                    partnerX =
                                        siblingX +
                                        cardWidth +
                                        partnerCloseSpacing;
                                }

                                // Calculate parent midpoint (center between sibling and partner, or just sibling if no partner)
                                const parentMidX = partnerX
                                    ? (siblingX + partnerX) / 2
                                    : siblingX;

                                // Calculate child positions - center them below the parent midpoint
                                const totalChildWidth =
                                    siblingChildren.length *
                                        (cardWidth + childCardSpacing) -
                                    childCardSpacing;
                                const startChildX =
                                    parentMidX -
                                    totalChildWidth / 2 +
                                    cardWidth / 2;

                                // Draw connecting lines (only once, before drawing child cards)
                                const parentLineY = siblingY + cardHeight / 2; // Bottom center of parent cards
                                const childLevelY = childCardY - cardHeight / 2; // Top of child cards

                                // If sibling has a partner, draw lines exactly like the image
                                if (siblingPartnerId && partnerX) {
                                    // Step 1: Draw horizontal line connecting the two parent cards at their bottom
                                    node.append("line")
                                        .attr("class", "parent-child-link")
                                        .attr("x1", siblingX)
                                        .attr("y1", parentLineY)
                                        .attr("x2", partnerX)
                                        .attr("y2", parentLineY)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2)
                                        .style("pointer-events", "none");

                                    // Step 2: Draw vertical line from the exact midpoint of the horizontal line down to child level
                                    node.append("line")
                                        .attr("class", "parent-child-link")
                                        .attr("x1", parentMidX)
                                        .attr("y1", parentLineY)
                                        .attr("x2", parentMidX)
                                        .attr("y2", childLevelY)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2)
                                        .style("pointer-events", "none");

                                    // Step 3: If multiple children, draw horizontal line at child level, then vertical lines to each child
                                    if (siblingChildren.length > 1) {
                                        const minChildX = Math.min(
                                            ...siblingChildren.map(
                                                (_, idx) =>
                                                    startChildX +
                                                    idx *
                                                        (cardWidth +
                                                            childCardSpacing)
                                            )
                                        );
                                        const maxChildX = Math.max(
                                            ...siblingChildren.map(
                                                (_, idx) =>
                                                    startChildX +
                                                    idx *
                                                        (cardWidth +
                                                            childCardSpacing)
                                            )
                                        );

                                        // Horizontal line connecting all children
                                        node.append("line")
                                            .attr("class", "parent-child-link")
                                            .attr("x1", minChildX)
                                            .attr("y1", childLevelY)
                                            .attr("x2", maxChildX)
                                            .attr("y2", childLevelY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");

                                        // Vertical lines from horizontal line down to each child card
                                        siblingChildren.forEach(
                                            (child, childIndex) => {
                                                const childX =
                                                    startChildX +
                                                    childIndex *
                                                        (cardWidth +
                                                            childCardSpacing);
                                                node.append("line")
                                                    .attr(
                                                        "class",
                                                        "parent-child-link"
                                                    )
                                                    .attr("x1", childX)
                                                    .attr("y1", childLevelY)
                                                    .attr("x2", childX)
                                                    .attr(
                                                        "y2",
                                                        childCardY -
                                                            cardHeight / 2
                                                    )
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 2)
                                                    .style(
                                                        "pointer-events",
                                                        "none"
                                                    );
                                            }
                                        );
                                    } else {
                                        // Single child - draw line directly from parent midpoint to child center
                                        const childX = startChildX;
                                        node.append("line")
                                            .attr("class", "parent-child-link")
                                            .attr("x1", parentMidX)
                                            .attr("y1", childLevelY)
                                            .attr("x2", childX)
                                            .attr("y2", childLevelY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");

                                        // Vertical line from horizontal line down to child card top
                                        node.append("line")
                                            .attr("class", "parent-child-link")
                                            .attr("x1", childX)
                                            .attr("y1", childLevelY)
                                            .attr("x2", childX)
                                            .attr(
                                                "y2",
                                                childCardY - cardHeight / 2
                                            )
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");
                                    }
                                } else {
                                    // No partner - draw line from sibling center down to children
                                    node.append("line")
                                        .attr("class", "parent-child-link")
                                        .attr("x1", siblingX)
                                        .attr("y1", parentLineY)
                                        .attr("x2", siblingX)
                                        .attr("y2", childLevelY)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2)
                                        .style("pointer-events", "none");

                                    // If multiple children, draw horizontal line at child level
                                    if (siblingChildren.length > 1) {
                                        const minChildX = Math.min(
                                            ...siblingChildren.map(
                                                (_, idx) =>
                                                    startChildX +
                                                    idx *
                                                        (cardWidth +
                                                            childCardSpacing)
                                            )
                                        );
                                        const maxChildX = Math.max(
                                            ...siblingChildren.map(
                                                (_, idx) =>
                                                    startChildX +
                                                    idx *
                                                        (cardWidth +
                                                            childCardSpacing)
                                            )
                                        );

                                        node.append("line")
                                            .attr("class", "parent-child-link")
                                            .attr("x1", minChildX)
                                            .attr("y1", childLevelY)
                                            .attr("x2", maxChildX)
                                            .attr("y2", childLevelY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");

                                        // Vertical lines to each child
                                        siblingChildren.forEach(
                                            (child, childIndex) => {
                                                const childX =
                                                    startChildX +
                                                    childIndex *
                                                        (cardWidth +
                                                            childCardSpacing);
                                                node.append("line")
                                                    .attr(
                                                        "class",
                                                        "parent-child-link"
                                                    )
                                                    .attr("x1", childX)
                                                    .attr("y1", childLevelY)
                                                    .attr("x2", childX)
                                                    .attr(
                                                        "y2",
                                                        childCardY -
                                                            cardHeight / 2
                                                    )
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 2)
                                                    .style(
                                                        "pointer-events",
                                                        "none"
                                                    );
                                            }
                                        );
                                    } else {
                                        // Single child - direct line
                                        const childX = startChildX;
                                        node.append("line")
                                            .attr("class", "parent-child-link")
                                            .attr("x1", siblingX)
                                            .attr("y1", childLevelY)
                                            .attr("x2", childX)
                                            .attr("y2", childLevelY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");

                                        node.append("line")
                                            .attr("class", "parent-child-link")
                                            .attr("x1", childX)
                                            .attr("y1", childLevelY)
                                            .attr("x2", childX)
                                            .attr(
                                                "y2",
                                                childCardY - cardHeight / 2
                                            )
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");
                                    }
                                }

                                siblingChildren.forEach((child, childIndex) => {
                                    const childX =
                                        startChildX +
                                        childIndex *
                                            (cardWidth + childCardSpacing);

                                    // Draw child card
                                    const childGroup = node
                                        .append("g")
                                        .attr("class", "sibling-child-card")
                                        .attr("data-person-id", child.id)
                                        .attr(
                                            "transform",
                                            `translate(${childX}, ${childCardY})`
                                        )
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            if (
                                                typeof window.openProfileSidebar ===
                                                "function"
                                            ) {
                                                window.openProfileSidebar(
                                                    child.id,
                                                    child
                                                );
                                            } else {
                                                event.preventDefault();
                                                event.stopPropagation();
                                                if (
                                                    typeof window.openProfileSidebar ===
                                                    "function"
                                                ) {
                                                    window.openProfileSidebar(
                                                        child.id,
                                                        child
                                                    );
                                                }
                                            }
                                        });

                                    // Card rectangle
                                    const childBorderColor =
                                        child.gender === "female"
                                            ? "#ffb6c1"
                                            : "#add8e6";
                                    childGroup
                                        .append("rect")
                                        .attr("x", -cardWidth / 2)
                                        .attr("y", -cardHeight / 2)
                                        .attr("width", cardWidth)
                                        .attr("height", cardHeight)
                                        .attr("rx", 8)
                                        .attr("ry", 8)
                                        .attr("fill", "white")
                                        .attr("stroke", childBorderColor)
                                        .attr("stroke-width", 3)
                                        .style(
                                            "filter",
                                            "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                        );

                                    // Silhouette icon
                                    const childIcon = childGroup
                                        .append("g")
                                        .attr("transform", "translate(0, -20)");
                                    renderAvatar(childIcon, child, svg);

                                    // Name
                                    let childName = child.name;
                                    if (!childName) {
                                        childName = child.first_name || "";
                                        if (child.last_name) {
                                            childName += " " + child.last_name;
                                        }
                                        if (!childName) {
                                            childName = "Unknown";
                                        }
                                    }
                                    childGroup
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 20)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "12px")
                                        .attr("fill", "#333")
                                        .text(
                                            childName.length > 15
                                                ? childName.substring(0, 25) +
                                                      "..."
                                                : childName
                                        );

                                    // Add + icon
                                    childGroup
                                        .append("circle")
                                        .attr("cx", 0)
                                        .attr("cy", 32)
                                        .attr("r", 10)
                                        .attr("fill", "white")
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1)
                                        .style("cursor", "pointer")
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            openBranchBuilder(child);
                                        });
                                    childGroup
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 36)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "16px")
                                        .attr("font-weight", "bold")
                                        .text("+")
                                        .style("cursor", "pointer")
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            openBranchBuilder(child);
                                        });

                                    // Add edit and delete icons
                                    addEditDeleteIcons(
                                        childGroup,
                                        child.id,
                                        childName
                                    );

                                    console.log(
                                        `Drew child card for ${childName} (ID: ${child.id}) below sibling ${siblingName} at (${childX}, ${childCardY})`
                                    );
                                });
                            }

                            // Draw partner card immediately after sibling card (very close)
                            if (sibling.spouses && sibling.spouses.length > 0) {
                                // Get the first partner (you can modify this to handle multiple partners)
                                const partnerId = sibling.spouses[0];
                                const partnerData = treeData.find(
                                    (p) => p.id === partnerId
                                );

                                if (partnerData) {
                                    // Position partner card right after sibling card with very close spacing
                                    const partnerX =
                                        siblingX +
                                        cardWidth +
                                        partnerCloseSpacing;
                                    const partnerY = siblingY;

                                    const partnerGroup = node
                                        .append("g")
                                        .attr("class", "sibling-partner-card")
                                        .attr(
                                            "transform",
                                            `translate(${partnerX}, ${partnerY})`
                                        )
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            if (
                                                typeof window.openProfileSidebar ===
                                                "function"
                                            ) {
                                                window.openProfileSidebar(
                                                    partnerData.id,
                                                    partnerData
                                                );
                                            } else {
                                                event.preventDefault();
                                                event.stopPropagation();
                                                if (
                                                    typeof window.openProfileSidebar ===
                                                    "function"
                                                ) {
                                                    window.openProfileSidebar(
                                                        partnerData.id,
                                                        partnerData
                                                    );
                                                }
                                            }
                                        });

                                    // Card rectangle with pink border for female, blue for male
                                    const partnerBorderColor =
                                        partnerData.gender === "female"
                                            ? "#ffb6c1"
                                            : "#add8e6";
                                    partnerGroup
                                        .append("rect")
                                        .attr("x", -cardWidth / 2)
                                        .attr("y", -cardHeight / 2)
                                        .attr("width", cardWidth)
                                        .attr("height", cardHeight)
                                        .attr("rx", 8)
                                        .attr("ry", 8)
                                        .attr("fill", "white")
                                        .attr("stroke", partnerBorderColor)
                                        .attr("stroke-width", 3)
                                        .style(
                                            "filter",
                                            "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                        );

                                    // Use renderAvatar to support photos
                                    const partnerIcon = partnerGroup
                                        .append("g")
                                        .attr("transform", "translate(0, -20)");
                                    renderAvatar(partnerIcon, partnerData, svg);

                                    // Name
                                    let partnerName = partnerData.name;
                                    if (!partnerName) {
                                        partnerName =
                                            partnerData.first_name || "";
                                        if (partnerData.last_name) {
                                            partnerName +=
                                                " " + partnerData.last_name;
                                        }
                                        if (!partnerName) {
                                            partnerName = "Unknown";
                                        }
                                    }
                                    partnerGroup
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 20)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "12px")
                                        .attr("fill", "#333")
                                        .text(
                                            partnerName.length > 15
                                                ? partnerName.substring(0, 25) +
                                                      "..."
                                                : partnerName
                                        );

                                    // Add + icon
                                    partnerGroup
                                        .append("circle")
                                        .attr("cx", 0)
                                        .attr("cy", 32)
                                        .attr("r", 10)
                                        .attr("fill", "white")
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1)
                                        .style("cursor", "pointer")
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            openBranchBuilder(partnerData);
                                        });
                                    partnerGroup
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 36)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "16px")
                                        .attr("font-weight", "bold")
                                        .text("+")
                                        .style("cursor", "pointer")
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            openBranchBuilder(partnerData);
                                        });

                                    // Add edit and delete icons
                                    addEditDeleteIcons(
                                        partnerGroup,
                                        partnerData.id,
                                        partnerName
                                    );

                                    // Draw horizontal line connecting sibling to partner
                                    partnerGroup
                                        .append("line")
                                        .attr("x1", -cardWidth / 2)
                                        .attr("y1", 0)
                                        .attr(
                                            "x2",
                                            -cardWidth / 2 - partnerCloseSpacing
                                        )
                                        .attr("y2", 0)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2);

                                    // Update cumulative X to account for sibling + partner
                                    cumulativeX +=
                                        cardWidth +
                                        partnerCloseSpacing +
                                        cardWidth +
                                        siblingSpacing;

                                    console.log(
                                        `Drew partner card for ${partnerName} next to sibling ${siblingName} at (${partnerX}, ${partnerY})`
                                    );
                                } else {
                                    // No partner found, just update cumulative X for sibling
                                    cumulativeX += cardWidth + siblingSpacing;
                                }
                            } else {
                                // No partner, just update cumulative X for sibling
                                cumulativeX += cardWidth + siblingSpacing;
                            }
                        });

                        // Draw curved sibling lines connecting all siblings (matching MyHeritage style)
                        // The line should start from father's top center, pass over mother, and extend to all siblings with a gentle curve
                        // BUT: Only show if father's branch is visible (not hidden when mother has siblings)
                        if (
                            shouldShowFatherBranch &&
                            fatherSiblings.length > 0
                        ) {
                            // Match the actual father card X position (includes -100 offset)
                            const fatherXForLink =
                                -cardWidth / 2 - spacing / 2 - 100;
                            const linkY = cardY - cardHeight / 2 - 20; // Position above the cards (moved up 20px)

                            // Draw horizontal line from father card's top center to the last (rightmost) sibling card
                            const startX = fatherXForLink;
                            const startY = linkY;
                            // Use the last sibling position (rightmost) to extend the line across all siblings
                            const endX =
                                siblingPositions.length > 0
                                    ? siblingPositions[
                                          siblingPositions.length - 1
                                      ].x
                                    : fatherXForLink;
                            const endY = linkY;

                            // EXACT same calculation as regular sibling links (lines 2508-2521)
                            const distance = Math.abs(endX - startX);
                            const bendHeight = Math.min(
                                6,
                                Math.max(5, distance * 0.02)
                            ); // Very subtle bend, 5-6px
                            const midX = (startX + endX) / 2;
                            const midY = Math.min(startY, endY) - bendHeight;

                            // EXACT same path formula as regular sibling links
                            const pathData = `M ${startX} ${startY} Q ${midX} ${midY}, ${endX} ${endY}`;

                            // Use EXACT same attributes as regular sibling links
                            node.append("path")
                                .attr("class", "sibling-link")
                                .attr("fill", "none")
                                .attr("d", pathData);

                            // Draw vertical lines from horizontal line down to each card (matching MyHeritage)
                            // Only draw vertical lines for siblings, not for mother (she's a spouse, not a sibling)
                            // Line 1: From horizontal line to father card
                            const fatherT = 0;
                            const fatherCurveY =
                                (1 - fatherT) * (1 - fatherT) * startY +
                                2 * (1 - fatherT) * fatherT * midY +
                                fatherT * fatherT * endY;

                            // Vertical line from horizontal line down to father card top
                            node.append("line")
                                .attr("class", "sibling-link")
                                .attr("x1", fatherXForLink)
                                .attr("y1", fatherCurveY)
                                .attr("x2", fatherXForLink)
                                .attr("y2", cardY - cardHeight / 2)
                                .attr("stroke", "#999")
                                .attr("stroke-width", 2);

                            // Lines 2, 3, 4...: From horizontal line to each sibling card (not mother, not partners)
                            // Use the stored sibling positions to ensure perfect alignment
                            siblingPositions.forEach((pos) => {
                                const siblingX = pos.x;

                                // Calculate Y on the curve at this X position (for quadratic bezier)
                                const t =
                                    endX !== startX
                                        ? (siblingX - startX) / (endX - startX)
                                        : 0; // Avoid division by zero
                                const curveY =
                                    (1 - t) * (1 - t) * startY +
                                    2 * (1 - t) * t * midY +
                                    t * t * endY;

                                node.append("line")
                                    .attr("class", "sibling-link")
                                    .attr("x1", siblingX)
                                    .attr("y1", curveY)
                                    .attr("x2", siblingX)
                                    .attr("y2", cardY - cardHeight / 2)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 2);
                            });
                        }
                    } // End of shouldShowFatherBranch check for father siblings

                    // Recursively show parent cards or "Add father" and "Add mother" buttons above father card
                    // BUT: Only show if father's branch is visible (not hidden when mother has siblings)
                    // AND: Hide when father's partner branch is toggled (only show partner's relations)
                    if (
                        shouldShowFatherBranch &&
                        !window.fatherPartnerBranchToggled
                    ) {
                        const fatherParentButtonY = cardY - 150; // Position above father card
                        // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                        const parentButtonWidth = 140; // Standardized button width for all generations
                        const parentButtonHeight = 90; // Standardized button height for all generations
                        const parentSpacing = 30; // Standardized button spacing for all generations

                        // Check if father has parents (grandparents) and they're not hidden
                        // Also check if father's branch is not hidden
                        const areFatherAncestorsHidden = areAncestorsHidden(
                            father.id
                        );
                        const fatherParents = father.parents || [];

                        // Check if ancestors were hidden specifically for this father
                        const hiddenAncestorsForFather =
                            window.hiddenAncestorsByPerson &&
                            window.hiddenAncestorsByPerson.has(father.id)
                                ? window.hiddenAncestorsByPerson.get(father.id)
                                : new Set();

                        console.log(
                            "Father ID:",
                            father.id,
                            "Father name:",
                            father.name || father.first_name
                        );
                        console.log("Father parents:", fatherParents);
                        console.log(
                            "Hidden ancestor IDs:",
                            window.hiddenAncestorIds
                                ? Array.from(window.hiddenAncestorIds)
                                : []
                        );
                        console.log(
                            "Hidden ancestors for father:",
                            Array.from(hiddenAncestorsForFather)
                        );

                        const visibleFatherParents = fatherParents.filter(
                            (pId) => {
                                const isHidden =
                                    (window.hiddenAncestorIds &&
                                        window.hiddenAncestorIds.has(pId)) ||
                                    hiddenAncestorsForFather.has(pId);
                                console.log(
                                    "  Parent ID:",
                                    pId,
                                    "isHidden:",
                                    isHidden
                                );
                                return !isHidden;
                            }
                        );
                        // Check actual parent count (not filtered) to determine if we should show "Add" buttons
                        const fatherHasActualParents =
                            fatherParents && fatherParents.length > 0;
                        const fatherHasVisibleParents =
                            visibleFatherParents &&
                            visibleFatherParents.length > 0;

                        console.log(
                            "Visible father parents:",
                            visibleFatherParents
                        );

                        // Show parent cards if they exist and are visible
                        // Note: We show parent cards even if ancestors are hidden (we just won't show grandparents)
                        if (fatherHasVisibleParents) {
                            // Show grandparent cards above father card (only visible ones)
                            const grandparentData = visibleFatherParents
                                .map((parentId) =>
                                    treeData.find((p) => p.id === parentId)
                                )
                                .filter((p) => p);
                            const grandfather = grandparentData.find(
                                (p) => p.gender === "male"
                            );
                            const grandmother = grandparentData.find(
                                (p) => p.gender === "female"
                            );

                            // Always show grandparent cards if they exist (regardless of hidden state)
                            // The hidden state only affects ancestors OF the grandparents (great-grandparents)
                            const shouldShowGrandparentsAncestors =
                                !areFatherAncestorsHidden;

                            const grandparentCardY =
                                fatherParentButtonY - cardY;
                            const grandparentCardWidth = 140; // Card width (decent size)
                            const grandparentCardHeight = 90; // Card height (decent size)
                            const grandparentSpacing = 350; // Spacing between grandparent cards
                            const grandfatherPartnerCloseSpacing = 350; // Spacing for grandfather partner cards (increased to move card further right)

                            // Declare grandparent card X positions early so they're available for partner card positioning
                            const grandfatherCardX =
                                -grandparentCardWidth / 2 -
                                grandparentSpacing / 2;
                            const grandmotherCardX =
                                grandparentCardWidth / 2 +
                                grandparentSpacing / 2;

                            // Declare grandfatherPartners at higher scope so it's accessible in grandmother section
                            let grandfatherPartners = [];
                            // Declare grandmotherPartners at higher scope so it's accessible for double line drawing
                            let grandmotherPartners = [];

                            // Check if grandfather has siblings - similar to fatherHasSiblings logic
                            let grandfatherHasSiblings = false;
                            if (grandfather) {
                                // Check explicit siblings
                                if (
                                    grandfather.siblings &&
                                    grandfather.siblings.length > 0
                                ) {
                                    grandfatherHasSiblings = true;
                                }
                                // Check implicit siblings (shared parents)
                                if (
                                    !grandfatherHasSiblings &&
                                    grandfather.parents &&
                                    grandfather.parents.length > 0
                                ) {
                                    const hasImplicitSiblings = treeData.some(
                                        (p) => {
                                            if (
                                                p.id === grandfather.id ||
                                                p.id === grandmother?.id ||
                                                p.id === mainPersonId
                                            )
                                                return false;
                                            if (
                                                p.parents &&
                                                p.parents.length > 0 &&
                                                p.parents.every((pId) =>
                                                    grandfather.parents.includes(
                                                        pId
                                                    )
                                                ) &&
                                                grandfather.parents.every(
                                                    (pId) =>
                                                        p.parents.includes(pId)
                                                )
                                            ) {
                                                return true;
                                            }
                                            return false;
                                        }
                                    );
                                    grandfatherHasSiblings =
                                        hasImplicitSiblings;
                                }
                            }

                            // MyHeritage logic for grandparents: When grandmother's view button is clicked, show grandmother's branch (siblings/partners) AND keep grandfather visible
                            // When grandmother's view button is NOT clicked, show both grandfather and grandmother (default state)
                            // Unlike mother/father toggle, both grandparents remain visible - toggle only affects showing grandmother's siblings/partners
                            // When grandfather's partner branch is toggled, ONLY show grandfather + grandfather's partner + grandfather's partner's relations
                            // Grandfather card should always be shown (like father card), but hide grandfather's siblings when partner branch is toggled
                            const shouldShowGrandfatherBranch = true; // Always show grandfather card
                            // Show grandmother: hide when grandfather's partner branch is toggled (only show partner's relations)
                            const shouldShowGrandmotherBranchForDisplay =
                                !window.grandfatherPartnerBranchToggled;

                            // Show grandfather card (left) - always show (like father card)
                            if (grandfather) {
                                // Double-check: ensure grandfather is not in hiddenAncestorIds
                                const isGrandfatherHidden =
                                    (window.hiddenAncestorIds &&
                                        window.hiddenAncestorIds.has(
                                            grandfather.id
                                        )) ||
                                    (hiddenAncestorsForFather &&
                                        hiddenAncestorsForFather.has(
                                            grandfather.id
                                        ));
                                if (isGrandfatherHidden) {
                                    console.log(
                                        "Skipping grandfather card - it is hidden or branch toggled:",
                                        grandfather.id,
                                        grandfather.name ||
                                            grandfather.first_name,
                                        "isGrandfatherHidden:",
                                        isGrandfatherHidden,
                                        "shouldShowGrandfatherBranch:",
                                        shouldShowGrandfatherBranch
                                    );
                                    // Don't render the grandfather card if it's hidden or grandmother's branch is toggled - skip to grandmother
                                } else {
                                    // Render grandfather card
                                    const grandfatherGroup = fatherGroup
                                        .append("g")
                                        .attr("class", "parent-card")
                                        .attr("data-person-id", grandfather.id)
                                        .attr(
                                            "transform",
                                            `translate(${
                                                -grandparentCardWidth / 2 -
                                                grandparentSpacing / 2
                                            }, ${grandparentCardY})`
                                        )
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            if (
                                                typeof window.openProfileSidebar ===
                                                "function"
                                            ) {
                                                window.openProfileSidebar(
                                                    grandfather.id,
                                                    grandfather
                                                );
                                            } else {
                                                event.preventDefault();
                                                event.stopPropagation();
                                                if (
                                                    typeof window.openProfileSidebar ===
                                                    "function"
                                                ) {
                                                    window.openProfileSidebar(
                                                        grandfather.id,
                                                        grandfather
                                                    );
                                                }
                                            }
                                        });

                                    grandfatherGroup
                                        .append("rect")
                                        .attr("x", -grandparentCardWidth / 2)
                                        .attr("y", -grandparentCardHeight / 2)
                                        .attr("width", grandparentCardWidth)
                                        .attr("height", grandparentCardHeight)
                                        .attr("rx", 8)
                                        .attr("ry", 8)
                                        .attr("fill", "white")
                                        .attr("stroke", "#add8e6")
                                        .attr("stroke-width", 3);

                                    const grandfatherIcon = grandfatherGroup
                                        .append("g")
                                        .attr("transform", "translate(0, -20)");
                                    renderAvatar(
                                        grandfatherIcon,
                                        grandfather,
                                        svg
                                    );

                                    let grandfatherName =
                                        grandfather.name ||
                                        grandfather.first_name ||
                                        "";
                                    if (grandfather.last_name)
                                        grandfatherName +=
                                            " " + grandfather.last_name;
                                    if (!grandfatherName)
                                        grandfatherName = "Unknown";

                                    grandfatherGroup
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 20)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "12px")
                                        .attr("fill", "#333")
                                        .text(
                                            grandfatherName.length > 25
                                                ? grandfatherName.substring(
                                                      0,
                                                      25
                                                  ) + "..."
                                                : grandfatherName
                                        );

                                    // Add toggle hide/show button (eye icon) - top right
                                    const isGrandfatherHidden =
                                        areAncestorsHidden(grandfather.id);
                                    const hideGrandfatherButton =
                                        grandfatherGroup
                                            .append("g")
                                            .attr("class", "hide-branch-button")
                                            .attr(
                                                "transform",
                                                "translate(45, -35)"
                                            )
                                            .style("cursor", "pointer")
                                            .on("click", function (event) {
                                                event.stopPropagation();
                                                togglePersonBranch(
                                                    grandfather.id
                                                );
                                            });

                                    hideGrandfatherButton
                                        .append("circle")
                                        .attr("cx", 0)
                                        .attr("cy", 0)
                                        .attr("r", 10)
                                        .attr(
                                            "fill",
                                            isGrandfatherHidden
                                                ? "#28a745"
                                                : "#6c757d"
                                        )
                                        .attr("stroke", "white")
                                        .attr("stroke-width", 1);

                                    hideGrandfatherButton
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 3)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "10px")
                                        .attr("fill", "white")
                                        .text(
                                            isGrandfatherHidden ? "👁️" : "👁️‍🗨️"
                                        );

                                    hideGrandfatherButton
                                        .append("title")
                                        .text(
                                            isGrandfatherHidden
                                                ? `Click to show the family branch of ${grandfatherName}`
                                                : `Click to hide the family branch of ${grandfatherName}`
                                        );

                                    // Add edit and delete icons automatically
                                    addEditDeleteIcons(
                                        grandfatherGroup,
                                        grandfather.id,
                                        grandfatherName
                                    );

                                    // Add button - black style matching root node
                                    const grandfatherIcons = grandfatherGroup
                                        .append("g")
                                        .attr("transform", "translate(0, 35)")
                                        .style("cursor", "pointer")
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            openBranchBuilder(grandfather);
                                        });
                                    grandfatherIcons
                                        .append("circle")
                                        .attr("cx", 0)
                                        .attr("cy", 0)
                                        .attr("r", 10)
                                        .attr("fill", "white")
                                        .attr("stroke", "#d0d0d0")
                                        .attr("stroke-width", 1);
                                    grandfatherIcons
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 4)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "16px")
                                        .attr("font-weight", "bold")
                                        .attr("fill", "#333")
                                        .text("+");

                                    // Find and render grandfather partners (excluding grandmother)
                                    grandfatherPartners = [];
                                    if (
                                        grandfather.spouses &&
                                        grandfather.spouses.length > 0
                                    ) {
                                        grandfather.spouses.forEach(
                                            (spouseId) => {
                                                // Exclude grandmother (she's already drawn as a grandparent)
                                                // Check both the grandmother variable and if the spouse is in grandparentData
                                                const isGrandmother =
                                                    (grandmother &&
                                                        spouseId ===
                                                            grandmother.id) ||
                                                    grandparentData.some(
                                                        (gp) =>
                                                            gp.id === spouseId
                                                    );

                                                if (isGrandmother) {
                                                    console.log(
                                                        "Excluding grandmother from grandfather partners:",
                                                        spouseId,
                                                        grandmother
                                                            ? grandmother.name ||
                                                                  grandmother.first_name
                                                            : "no grandmother var"
                                                    );
                                                    return;
                                                }

                                                // Additional check: exclude if this spouse is a parent of the father
                                                const isParentOfFather =
                                                    visibleFatherParents.includes(
                                                        spouseId
                                                    );
                                                if (isParentOfFather) {
                                                    console.log(
                                                        "Excluding parent of father from grandfather partners:",
                                                        spouseId
                                                    );
                                                    return;
                                                }

                                                const partnerData =
                                                    treeData.find(
                                                        (p) => p.id === spouseId
                                                    );
                                                if (partnerData) {
                                                    grandfatherPartners.push(
                                                        partnerData
                                                    );
                                                    console.log(
                                                        "Found grandfather partner:",
                                                        partnerData.name ||
                                                            partnerData.first_name
                                                    );
                                                }
                                            }
                                        );
                                    }
                                    console.log(
                                        "Total grandfather partners found:",
                                        grandfatherPartners.length,
                                        grandfatherPartners.map(
                                            (p) => p.name || p.first_name
                                        )
                                    );

                                    // Only show the first partner card (limit to 1)
                                    const partnersToShow =
                                        grandfatherPartners.slice(0, 1);

                                    // Draw grandfather partner cards - hide when grandmother branch is toggled, but show when grandfather's partner branch is toggled
                                    if (
                                        !window.grandmotherBranchToggled ||
                                        window.grandfatherPartnerBranchToggled
                                    ) {
                                        // Position partner card to the right of grandmother card (like father's partner to the right of mother)
                                        // Use the already declared grandfatherCardX and grandmotherCardX variables
                                        const grandfatherCardXForPartner =
                                            grandfatherCardX;
                                        const grandmotherCardXForPartner =
                                            grandmotherCardX;

                                        partnersToShow.forEach(
                                            (partner, index) => {
                                                // Position partner card after grandmother card (to the right), or after grandfather card when toggle is active
                                                const positionAfterGrandfather =
                                                    window.grandfatherPartnerBranchToggled ||
                                                    !grandmother;
                                                const partnerX =
                                                    positionAfterGrandfather
                                                        ? grandfatherCardXForPartner +
                                                          grandparentCardWidth +
                                                          grandfatherPartnerCloseSpacing +
                                                          index *
                                                              (grandparentCardWidth +
                                                                  grandfatherPartnerCloseSpacing)
                                                        : grandmotherCardXForPartner +
                                                          grandparentCardWidth +
                                                          grandfatherPartnerCloseSpacing +
                                                          index *
                                                              (grandparentCardWidth +
                                                                  grandfatherPartnerCloseSpacing);
                                                const partnerY =
                                                    grandparentCardY;

                                                const partnerGroup = fatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "grandparent-partner-card"
                                                    )
                                                    .attr(
                                                        "data-person-id",
                                                        partner.id
                                                    )
                                                    .attr(
                                                        "transform",
                                                        `translate(${partnerX}, ${partnerY})`
                                                    )
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            if (
                                                                typeof window.openProfileSidebar ===
                                                                "function"
                                                            ) {
                                                                window.openProfileSidebar(
                                                                    partner.id,
                                                                    partner
                                                                );
                                                            }
                                                        }
                                                    );

                                                // Card rectangle with border color based on gender
                                                const borderColor =
                                                    partner.gender === "female"
                                                        ? "#ffb6c1"
                                                        : "#add8e6";
                                                partnerGroup
                                                    .append("rect")
                                                    .attr(
                                                        "x",
                                                        -grandparentCardWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -grandparentCardHeight /
                                                            2
                                                    )
                                                    .attr(
                                                        "width",
                                                        grandparentCardWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        grandparentCardHeight
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("ry", 8)
                                                    .attr("fill", "white")
                                                    .attr("stroke", borderColor)
                                                    .attr("stroke-width", 3)
                                                    .style(
                                                        "filter",
                                                        "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                    );

                                                // Avatar
                                                const partnerIcon = partnerGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, -20)"
                                                    );
                                                renderAvatar(
                                                    partnerIcon,
                                                    partner,
                                                    svg
                                                );

                                                // Name
                                                let partnerName = partner.name;
                                                if (!partnerName) {
                                                    partnerName =
                                                        partner.first_name ||
                                                        "";
                                                    if (partner.last_name) {
                                                        partnerName +=
                                                            " " +
                                                            partner.last_name;
                                                    }
                                                    if (!partnerName) {
                                                        partnerName = "Unknown";
                                                    }
                                                }
                                                partnerGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 20)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "12px")
                                                    .attr("fill", "#333")
                                                    .text(
                                                        partnerName.length > 15
                                                            ? partnerName.substring(
                                                                  0,
                                                                  25
                                                              ) + "..."
                                                            : partnerName
                                                    );

                                                // Add + icon
                                                partnerGroup
                                                    .append("circle")
                                                    .attr("cx", 0)
                                                    .attr("cy", 32)
                                                    .attr("r", 10)
                                                    .attr("fill", "white")
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 1)
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            openBranchBuilder(
                                                                partner
                                                            );
                                                        }
                                                    );
                                                partnerGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 36)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "16px")
                                                    .attr("font-weight", "bold")
                                                    .text("+")
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            openBranchBuilder(
                                                                partner
                                                            );
                                                        }
                                                    );

                                                // Check if grandfather's partner has relations (siblings or additional partners) to show view button
                                                let grandfatherPartnerHasRelations = false;
                                                // Check for siblings
                                                if (
                                                    partner.siblings &&
                                                    partner.siblings.length > 0
                                                ) {
                                                    grandfatherPartnerHasRelations = true;
                                                }
                                                // Check for implicit siblings (shared parents)
                                                if (
                                                    !grandfatherPartnerHasRelations &&
                                                    partner.parents &&
                                                    partner.parents.length > 0
                                                ) {
                                                    const hasImplicitSiblings =
                                                        treeData.some((p) => {
                                                            if (
                                                                p.id ===
                                                                    partner.id ||
                                                                p.id ===
                                                                    grandfather?.id ||
                                                                p.id ===
                                                                    grandmother?.id ||
                                                                p.id ===
                                                                    mainPersonId
                                                            )
                                                                return false;
                                                            if (
                                                                partner.parents.includes(
                                                                    p.id
                                                                )
                                                            )
                                                                return false;
                                                            if (
                                                                p.parents &&
                                                                p.parents
                                                                    .length >
                                                                    0 &&
                                                                p.parents.every(
                                                                    (pId) =>
                                                                        partner.parents.includes(
                                                                            pId
                                                                        )
                                                                ) &&
                                                                partner.parents.every(
                                                                    (pId) =>
                                                                        p.parents.includes(
                                                                            pId
                                                                        )
                                                                )
                                                            ) {
                                                                return true;
                                                            }
                                                            return false;
                                                        });
                                                    if (hasImplicitSiblings) {
                                                        grandfatherPartnerHasRelations = true;
                                                    }
                                                }
                                                // Check for additional partners
                                                if (
                                                    !grandfatherPartnerHasRelations &&
                                                    partner.spouses &&
                                                    partner.spouses.length > 0
                                                ) {
                                                    const hasAdditionalPartners =
                                                        partner.spouses.some(
                                                            (spouseId) => {
                                                                if (
                                                                    grandmother &&
                                                                    spouseId ===
                                                                        grandmother.id
                                                                )
                                                                    return false;
                                                                if (
                                                                    grandfather &&
                                                                    spouseId ===
                                                                        grandfather.id
                                                                )
                                                                    return false;
                                                                return true;
                                                            }
                                                        );
                                                    if (hasAdditionalPartners) {
                                                        grandfatherPartnerHasRelations = true;
                                                    }
                                                }

                                                // Add view button to toggle to grandfather's partner branch view (matching father's partner)
                                                // This button appears on grandfather's partner card when it has relations
                                                if (
                                                    grandfatherPartnerHasRelations
                                                ) {
                                                    console.log(
                                                        "Adding view button on grandfather's partner card - has relations:",
                                                        grandfatherPartnerHasRelations,
                                                        "grandfatherPartnerBranchToggled:",
                                                        window.grandfatherPartnerBranchToggled
                                                    );
                                                    const viewGrandfatherPartnerBranchButton =
                                                        partnerGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "view-grandfather-partner-branch-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                "translate(-45, -35)"
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    if (
                                                                        window.grandfatherPartnerBranchToggled
                                                                    ) {
                                                                        hideGrandfatherPartnerBranch();
                                                                    } else {
                                                                        showGrandfatherPartnerBranch();
                                                                    }
                                                                }
                                                            );

                                                    viewGrandfatherPartnerBranchButton
                                                        .append("circle")
                                                        .attr("cx", 0)
                                                        .attr("cy", 0)
                                                        .attr("r", 10)
                                                        .attr(
                                                            "fill",
                                                            window.grandfatherPartnerBranchToggled
                                                                ? "#28a745"
                                                                : "#6c757d"
                                                        )
                                                        .attr("stroke", "white")
                                                        .attr(
                                                            "stroke-width",
                                                            1
                                                        );

                                                    viewGrandfatherPartnerBranchButton
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 3)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "10px"
                                                        )
                                                        .attr("fill", "white")
                                                        .text("👁️");

                                                    viewGrandfatherPartnerBranchButton
                                                        .append("title")
                                                        .text(
                                                            "Click to view grandfather's partner branch"
                                                        );
                                                }

                                                // Add edit and delete icons
                                                addEditDeleteIcons(
                                                    partnerGroup,
                                                    partner.id,
                                                    partnerName
                                                );

                                                // Draw line(s) connecting grandfather card and partner card
                                                // Draw TWO lines if partner has additional partners (like father-mother connection)
                                                // Check if partner has additional partners (excluding grandmother and grandfather)
                                                let hasAdditionalPartners = false;
                                                if (
                                                    partner.spouses &&
                                                    partner.spouses.length > 0
                                                ) {
                                                    hasAdditionalPartners =
                                                        partner.spouses.some(
                                                            (spouseId) => {
                                                                if (
                                                                    grandmother &&
                                                                    spouseId ===
                                                                        grandmother.id
                                                                )
                                                                    return false;
                                                                if (
                                                                    grandfather &&
                                                                    spouseId ===
                                                                        grandfather.id
                                                                )
                                                                    return false;
                                                                return true;
                                                            }
                                                        );
                                                }

                                                // Only draw lines if grandfather's partner branch is NOT toggled
                                                // When toggled, don't draw lines to avoid lines between partner and partner's partner
                                                if (
                                                    !window.grandfatherPartnerBranchToggled
                                                ) {
                                                    if (hasAdditionalPartners) {
                                                        // Draw TWO lines (like father-mother connection)
                                                        const mainPersonNode =
                                                            root
                                                                .descendants()
                                                                .find(
                                                                    (d) =>
                                                                        d.data
                                                                            .id ===
                                                                            mainPersonId &&
                                                                        d.data
                                                                            .id !==
                                                                            "virtual-root"
                                                                );
                                                        if (mainPersonNode) {
                                                            // Connect from grandfather card to partner card when toggle is active, otherwise from grandmother card
                                                            const connectFromGrandfather =
                                                                window.grandfatherPartnerBranchToggled ||
                                                                !grandmother;
                                                            const absoluteConnectionX =
                                                                connectFromGrandfather
                                                                    ? mainPersonNode.x +
                                                                      grandfatherCardXForPartner
                                                                    : mainPersonNode.x +
                                                                      grandmotherCardXForPartner;
                                                            const absolutePartnerX =
                                                                mainPersonNode.x +
                                                                partnerX;
                                                            const middleLineY =
                                                                mainPersonNode.y +
                                                                grandparentCardY;

                                                            // Separate the two lines with a small distance
                                                            const lineSeparation = 4;

                                                            // Make lines extend fully from connection card's right edge to partner card's left edge
                                                            const lineStartX =
                                                                absoluteConnectionX +
                                                                grandparentCardWidth /
                                                                    2;
                                                            const lineEndX =
                                                                absolutePartnerX -
                                                                grandparentCardWidth /
                                                                    2;

                                                            // Draw first line (slightly above center)
                                                            fatherGroup
                                                                .append("line")
                                                                .attr(
                                                                    "class",
                                                                    "spouse-link parent-partner-link-first"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    lineStartX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    middleLineY -
                                                                        lineSeparation /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    lineEndX
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    middleLineY -
                                                                        lineSeparation /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1.5
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );

                                                            // Draw second line (slightly below center)
                                                            fatherGroup
                                                                .append("line")
                                                                .attr(
                                                                    "class",
                                                                    "spouse-link parent-partner-link-second"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    lineStartX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    middleLineY +
                                                                        lineSeparation /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    lineEndX
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    middleLineY +
                                                                        lineSeparation /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1.5
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );
                                                        }
                                                    } else {
                                                        // Draw single line (when no additional partners)
                                                        const lineY =
                                                            grandparentCardY -
                                                            grandparentCardHeight /
                                                                10;
                                                        // Connect from grandfather card to partner card when toggle is active, otherwise from grandmother card
                                                        const connectFromGrandfather =
                                                            window.grandfatherPartnerBranchToggled ||
                                                            !grandmother;
                                                        const lineX1 =
                                                            connectFromGrandfather
                                                                ? grandfatherCardXForPartner +
                                                                  grandparentCardWidth /
                                                                      2
                                                                : grandmotherCardXForPartner +
                                                                  grandparentCardWidth /
                                                                      2;
                                                        const lineX2 =
                                                            partnerX -
                                                            grandparentCardWidth /
                                                                2;

                                                        fatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-partner-link"
                                                            )
                                                            .attr("x1", lineX1)
                                                            .attr("y1", lineY)
                                                            .attr("x2", lineX2)
                                                            .attr("y2", lineY)
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    }
                                                }

                                                console.log(
                                                    "Drew partner card for",
                                                    partnerName,
                                                    "at",
                                                    `(${partnerX}, ${partnerY})`
                                                );

                                                // ====================================================================
                                                // ADD RELATIONS TO GRANDFATHER'S PARTNER CARD (same logic as father's partner card)
                                                // ====================================================================

                                                // Find siblings of grandfather's partner
                                                const grandfatherPartnerSiblings =
                                                    [];
                                                if (
                                                    partner.siblings &&
                                                    partner.siblings.length > 0
                                                ) {
                                                    partner.siblings.forEach(
                                                        (siblingId) => {
                                                            const siblingData =
                                                                treeData.find(
                                                                    (p) =>
                                                                        p.id ===
                                                                        siblingId
                                                                );
                                                            if (
                                                                siblingData &&
                                                                siblingData.id !==
                                                                    partner.id &&
                                                                siblingData.id !==
                                                                    grandfather?.id &&
                                                                siblingData.id !==
                                                                    grandmother?.id &&
                                                                !partner.parents?.includes(
                                                                    siblingId
                                                                )
                                                            ) {
                                                                grandfatherPartnerSiblings.push(
                                                                    siblingData
                                                                );
                                                            }
                                                        }
                                                    );
                                                }
                                                // Also check implicit siblings (shared parents)
                                                if (
                                                    !grandfatherPartnerSiblings.length &&
                                                    partner.parents &&
                                                    partner.parents.length > 0
                                                ) {
                                                    treeData.forEach((p) => {
                                                        if (
                                                            p.id ===
                                                                partner.id ||
                                                            p.id ===
                                                                grandfather?.id ||
                                                            p.id ===
                                                                grandmother?.id ||
                                                            p.id ===
                                                                mainPersonId ||
                                                            partner.parents.includes(
                                                                p.id
                                                            )
                                                        )
                                                            return;
                                                        if (
                                                            p.parents &&
                                                            p.parents.length >
                                                                0 &&
                                                            p.parents.every(
                                                                (pId) =>
                                                                    partner.parents.includes(
                                                                        pId
                                                                    )
                                                            ) &&
                                                            partner.parents.every(
                                                                (pId) =>
                                                                    p.parents.includes(
                                                                        pId
                                                                    )
                                                            ) &&
                                                            !grandfatherPartnerSiblings.find(
                                                                (s) =>
                                                                    s.id ===
                                                                    p.id
                                                            )
                                                        ) {
                                                            grandfatherPartnerSiblings.push(
                                                                p
                                                            );
                                                        }
                                                    });
                                                }

                                                // Sort siblings: brothers first, then sisters
                                                grandfatherPartnerSiblings.sort(
                                                    (a, b) => {
                                                        if (
                                                            a.gender ===
                                                                "male" &&
                                                            b.gender ===
                                                                "female"
                                                        )
                                                            return -1;
                                                        if (
                                                            a.gender ===
                                                                "female" &&
                                                            b.gender === "male"
                                                        )
                                                            return 1;
                                                        return a.id - b.id;
                                                    }
                                                );

                                                // Draw grandfather's partner's sibling cards to the right of partner card
                                                // ONLY show when grandfather's partner branch is toggled
                                                if (
                                                    grandfatherPartnerSiblings.length >
                                                        0 &&
                                                    window.grandfatherPartnerBranchToggled
                                                ) {
                                                    const partnerSiblingSpacing = 200;
                                                    grandfatherPartnerSiblings.forEach(
                                                        (
                                                            sibling,
                                                            siblingIndex
                                                        ) => {
                                                            const siblingX =
                                                                partnerX +
                                                                grandparentCardWidth +
                                                                partnerSiblingSpacing +
                                                                siblingIndex *
                                                                    (grandparentCardWidth +
                                                                        partnerSiblingSpacing);
                                                            const siblingY =
                                                                grandparentCardY;

                                                            const siblingGroup =
                                                                fatherGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "class",
                                                                        "parent-sibling-card grandfather-partner-sibling-card"
                                                                    )
                                                                    .attr(
                                                                        "data-person-id",
                                                                        sibling.id
                                                                    )
                                                                    .attr(
                                                                        "transform",
                                                                        `translate(${siblingX}, ${siblingY})`
                                                                    )
                                                                    .on(
                                                                        "click",
                                                                        function (
                                                                            event
                                                                        ) {
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    sibling.id,
                                                                                    sibling
                                                                                );
                                                                            }
                                                                        }
                                                                    );

                                                            const borderColor =
                                                                sibling.gender ===
                                                                "female"
                                                                    ? "#ffb6c1"
                                                                    : "#add8e6";
                                                            siblingGroup
                                                                .append("rect")
                                                                .attr(
                                                                    "x",
                                                                    -grandparentCardWidth /
                                                                        2
                                                                )
                                                                .attr(
                                                                    "y",
                                                                    -grandparentCardHeight /
                                                                        2
                                                                )
                                                                .attr(
                                                                    "width",
                                                                    grandparentCardWidth
                                                                )
                                                                .attr(
                                                                    "height",
                                                                    grandparentCardHeight
                                                                )
                                                                .attr("rx", 8)
                                                                .attr("ry", 8)
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    borderColor
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    3
                                                                )
                                                                .style(
                                                                    "filter",
                                                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                                );

                                                            // Silhouette icon or photo
                                                            const siblingIcon =
                                                                siblingGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "transform",
                                                                        "translate(0, -20)"
                                                                    );
                                                            renderAvatar(
                                                                siblingIcon,
                                                                sibling,
                                                                svg
                                                            );

                                                            // Name
                                                            let siblingName =
                                                                sibling.name ||
                                                                sibling.first_name ||
                                                                "Unknown";
                                                            if (
                                                                sibling.last_name &&
                                                                !sibling.name
                                                            ) {
                                                                siblingName +=
                                                                    " " +
                                                                    sibling.last_name;
                                                            }
                                                            siblingGroup
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 20)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "12px"
                                                                )
                                                                .attr(
                                                                    "fill",
                                                                    "#333"
                                                                )
                                                                .text(
                                                                    siblingName.length >
                                                                        15
                                                                        ? siblingName.substring(
                                                                              0,
                                                                              25
                                                                          ) +
                                                                              "..."
                                                                        : siblingName
                                                                );

                                                            // Add + icon
                                                            siblingGroup
                                                                .append(
                                                                    "circle"
                                                                )
                                                                .attr("cx", 0)
                                                                .attr("cy", 32)
                                                                .attr("r", 10)
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1
                                                                )
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        openBranchBuilder(
                                                                            sibling
                                                                        );
                                                                    }
                                                                );
                                                            siblingGroup
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 36)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "16px"
                                                                )
                                                                .attr(
                                                                    "font-weight",
                                                                    "bold"
                                                                )
                                                                .text("+")
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        openBranchBuilder(
                                                                            sibling
                                                                        );
                                                                    }
                                                                );

                                                            addEditDeleteIcons(
                                                                siblingGroup,
                                                                sibling.id,
                                                                siblingName
                                                            );
                                                        }
                                                    );

                                                    // Draw sibling lines for grandfather's partner's siblings (same as father's partner's siblings)
                                                    if (
                                                        grandfatherPartnerSiblings.length >
                                                        0
                                                    ) {
                                                        const partnerXForLink =
                                                            partnerX;
                                                        const linkY =
                                                            grandparentCardY -
                                                            grandparentCardHeight /
                                                                2 -
                                                            20;

                                                        const partnerSiblingPositions =
                                                            [];
                                                        grandfatherPartnerSiblings.forEach(
                                                            (
                                                                sibling,
                                                                siblingIndex
                                                            ) => {
                                                                const siblingX =
                                                                    partnerX +
                                                                    grandparentCardWidth +
                                                                    partnerSiblingSpacing +
                                                                    siblingIndex *
                                                                        (grandparentCardWidth +
                                                                            partnerSiblingSpacing);
                                                                partnerSiblingPositions.push(
                                                                    {
                                                                        x: siblingX,
                                                                        sibling:
                                                                            sibling,
                                                                    }
                                                                );
                                                            }
                                                        );

                                                        const startX =
                                                            partnerXForLink;
                                                        const startY = linkY;
                                                        const endX =
                                                            partnerSiblingPositions.length >
                                                            0
                                                                ? partnerSiblingPositions[
                                                                      partnerSiblingPositions.length -
                                                                          1
                                                                  ].x
                                                                : partnerXForLink;
                                                        const endY = linkY;

                                                        const distance =
                                                            Math.abs(
                                                                endX - startX
                                                            );
                                                        const bendHeight =
                                                            Math.min(
                                                                6,
                                                                Math.max(
                                                                    5,
                                                                    distance *
                                                                        0.02
                                                                )
                                                            );
                                                        const midX =
                                                            (startX + endX) / 2;
                                                        const midY =
                                                            Math.min(
                                                                startY,
                                                                endY
                                                            ) - bendHeight;
                                                        const pathData = `M ${startX} ${startY} Q ${midX} ${midY}, ${endX} ${endY}`;

                                                        fatherGroup
                                                            .append("path")
                                                            .attr(
                                                                "class",
                                                                "sibling-link"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "none"
                                                            )
                                                            .attr(
                                                                "d",
                                                                pathData
                                                            );

                                                        // Vertical line to partner card
                                                        const partnerT = 0;
                                                        const partnerCurveY =
                                                            (1 - partnerT) *
                                                                (1 - partnerT) *
                                                                startY +
                                                            2 *
                                                                (1 - partnerT) *
                                                                partnerT *
                                                                midY +
                                                            partnerT *
                                                                partnerT *
                                                                endY;
                                                        fatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "sibling-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                partnerXForLink
                                                            )
                                                            .attr(
                                                                "y1",
                                                                partnerCurveY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                partnerXForLink
                                                            )
                                                            .attr(
                                                                "y2",
                                                                grandparentCardY -
                                                                    grandparentCardHeight /
                                                                        2
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            );

                                                        // Vertical lines to each sibling
                                                        partnerSiblingPositions.forEach(
                                                            (pos) => {
                                                                const siblingX =
                                                                    pos.x;
                                                                const t =
                                                                    endX !==
                                                                    startX
                                                                        ? (siblingX -
                                                                              startX) /
                                                                          (endX -
                                                                              startX)
                                                                        : 0;
                                                                const curveY =
                                                                    (1 - t) *
                                                                        (1 -
                                                                            t) *
                                                                        startY +
                                                                    2 *
                                                                        (1 -
                                                                            t) *
                                                                        t *
                                                                        midY +
                                                                    t *
                                                                        t *
                                                                        endY;
                                                                fatherGroup
                                                                    .append(
                                                                        "line"
                                                                    )
                                                                    .attr(
                                                                        "class",
                                                                        "sibling-link"
                                                                    )
                                                                    .attr(
                                                                        "x1",
                                                                        siblingX
                                                                    )
                                                                    .attr(
                                                                        "y1",
                                                                        curveY
                                                                    )
                                                                    .attr(
                                                                        "x2",
                                                                        siblingX
                                                                    )
                                                                    .attr(
                                                                        "y2",
                                                                        grandparentCardY -
                                                                            grandparentCardHeight /
                                                                                2
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#999"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        2
                                                                    );
                                                            }
                                                        );
                                                    }
                                                }

                                                // Find additional partners of grandfather's partner
                                                const grandfatherPartnerPartners =
                                                    [];
                                                if (
                                                    partner.spouses &&
                                                    partner.spouses.length > 0
                                                ) {
                                                    partner.spouses.forEach(
                                                        (spouseId) => {
                                                            if (
                                                                spouseId ===
                                                                grandmother?.id
                                                            )
                                                                return;
                                                            if (
                                                                spouseId ===
                                                                grandfather?.id
                                                            )
                                                                return; // Exclude grandfather to prevent duplicate card
                                                            const partnerData =
                                                                treeData.find(
                                                                    (p) =>
                                                                        p.id ===
                                                                        spouseId
                                                                );
                                                            if (partnerData) {
                                                                grandfatherPartnerPartners.push(
                                                                    partnerData
                                                                );
                                                            }
                                                        }
                                                    );
                                                }

                                                // Draw additional partner cards to the LEFT of grandfather card
                                                // ONLY show when grandfather's partner branch is toggled
                                                if (
                                                    grandfatherPartnerPartners.length >
                                                        0 &&
                                                    window.grandfatherPartnerBranchToggled
                                                ) {
                                                    // Use grandfather card position
                                                    const grandfatherCardXForPartnerLink =
                                                        grandfatherCardX;

                                                    grandfatherPartnerPartners.forEach(
                                                        (
                                                            additionalPartner,
                                                            partnerIndex
                                                        ) => {
                                                            // Position to the LEFT of grandfather card
                                                            const additionalPartnerX =
                                                                grandfatherCardXForPartnerLink -
                                                                grandparentCardWidth -
                                                                200 -
                                                                partnerIndex *
                                                                    (grandparentCardWidth +
                                                                        200);
                                                            const additionalPartnerY =
                                                                grandparentCardY;

                                                            const additionalPartnerGroup =
                                                                fatherGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "class",
                                                                        "parent-partner-card grandfather-partner-partner-card"
                                                                    )
                                                                    .attr(
                                                                        "transform",
                                                                        `translate(${additionalPartnerX}, ${additionalPartnerY})`
                                                                    )
                                                                    .on(
                                                                        "click",
                                                                        function (
                                                                            event
                                                                        ) {
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    additionalPartner.id,
                                                                                    additionalPartner
                                                                                );
                                                                            }
                                                                        }
                                                                    );

                                                            // Always use blue border for grandfather's partner's partner card
                                                            const borderColor =
                                                                "#add8e6";
                                                            additionalPartnerGroup
                                                                .append("rect")
                                                                .attr(
                                                                    "x",
                                                                    -grandparentCardWidth /
                                                                        2
                                                                )
                                                                .attr(
                                                                    "y",
                                                                    -grandparentCardHeight /
                                                                        2
                                                                )
                                                                .attr(
                                                                    "width",
                                                                    grandparentCardWidth
                                                                )
                                                                .attr(
                                                                    "height",
                                                                    grandparentCardHeight
                                                                )
                                                                .attr("rx", 8)
                                                                .attr("ry", 8)
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    borderColor
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    3
                                                                )
                                                                .style(
                                                                    "filter",
                                                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                                );

                                                            // Silhouette, name, + icon, edit/delete icons (same structure)
                                                            const additionalPartnerIcon =
                                                                additionalPartnerGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "transform",
                                                                        "translate(0, -20)"
                                                                    );
                                                            renderAvatar(
                                                                additionalPartnerIcon,
                                                                additionalPartner,
                                                                svg
                                                            );

                                                            let additionalPartnerName =
                                                                additionalPartner.name ||
                                                                additionalPartner.first_name ||
                                                                "Unknown";
                                                            if (
                                                                additionalPartner.last_name &&
                                                                !additionalPartner.name
                                                            ) {
                                                                additionalPartnerName +=
                                                                    " " +
                                                                    additionalPartner.last_name;
                                                            }
                                                            additionalPartnerGroup
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 20)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "12px"
                                                                )
                                                                .attr(
                                                                    "fill",
                                                                    "#333"
                                                                )
                                                                .text(
                                                                    additionalPartnerName.length >
                                                                        15
                                                                        ? additionalPartnerName.substring(
                                                                              0,
                                                                              25
                                                                          ) +
                                                                              "..."
                                                                        : additionalPartnerName
                                                                );

                                                            additionalPartnerGroup
                                                                .append(
                                                                    "circle"
                                                                )
                                                                .attr("cx", 0)
                                                                .attr("cy", 32)
                                                                .attr("r", 10)
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1
                                                                )
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        openBranchBuilder(
                                                                            additionalPartner
                                                                        );
                                                                    }
                                                                );
                                                            additionalPartnerGroup
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 36)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "16px"
                                                                )
                                                                .attr(
                                                                    "font-weight",
                                                                    "bold"
                                                                )
                                                                .text("+")
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        openBranchBuilder(
                                                                            additionalPartner
                                                                        );
                                                                    }
                                                                );

                                                            addEditDeleteIcons(
                                                                additionalPartnerGroup,
                                                                additionalPartner.id,
                                                                additionalPartnerName
                                                            );
                                                        }
                                                    );
                                                }
                                            }
                                        );
                                    } // End of if (!window.grandmotherBranchToggled) for grandfather partners

                                    // Add siblings and children for grandfather (same logic as father card)
                                    console.log(
                                        "Checking for grandfather siblings. Grandfather ID:",
                                        grandfather.id,
                                        "Grandfather name:",
                                        grandfatherName
                                    );
                                    const grandfatherSiblings = [];
                                    const grandfatherParentIds =
                                        grandfather.parents
                                            ? new Set(grandfather.parents)
                                            : new Set();

                                    if (
                                        grandfather.siblings &&
                                        grandfather.siblings.length > 0
                                    ) {
                                        grandfather.siblings.forEach(
                                            (siblingId) => {
                                                if (
                                                    grandfatherParentIds.has(
                                                        siblingId
                                                    )
                                                ) {
                                                    return;
                                                }
                                                const siblingData =
                                                    treeData.find(
                                                        (p) =>
                                                            p.id === siblingId
                                                    );
                                                if (
                                                    siblingData &&
                                                    siblingData.id !==
                                                        grandfather.id
                                                ) {
                                                    grandfatherSiblings.push(
                                                        siblingData
                                                    );
                                                }
                                            }
                                        );
                                    }

                                    if (
                                        grandfather.parents &&
                                        grandfather.parents.length > 0
                                    ) {
                                        treeData.forEach((p) => {
                                            if (
                                                p.id === grandfather.id ||
                                                p.id === mainPersonId
                                            )
                                                return;
                                            if (
                                                grandfatherParentIds.has(p.id)
                                            ) {
                                                return;
                                            }
                                            if (
                                                p.parents &&
                                                p.parents.length > 0 &&
                                                p.parents.every((pId) =>
                                                    grandfather.parents.includes(
                                                        pId
                                                    )
                                                ) &&
                                                grandfather.parents.every(
                                                    (pId) =>
                                                        p.parents.includes(pId)
                                                ) &&
                                                !grandfatherSiblings.find(
                                                    (s) => s.id === p.id
                                                )
                                            ) {
                                                grandfatherSiblings.push(p);
                                            }
                                        });
                                    }

                                    const excludedIdsForGrandfatherSiblingCheck =
                                        new Set([grandfather.id, mainPersonId]);
                                    if (
                                        grandfather.parents &&
                                        grandfather.parents.length > 0
                                    ) {
                                        grandfather.parents.forEach(
                                            (parentId) =>
                                                excludedIdsForGrandfatherSiblingCheck.add(
                                                    parentId
                                                )
                                        );
                                    }
                                    if (mainPersonId) {
                                        const mainPersonData = treeData.find(
                                            (p) => p.id === mainPersonId
                                        );
                                        if (
                                            mainPersonData &&
                                            mainPersonData.parents
                                        ) {
                                            mainPersonData.parents.forEach(
                                                (parentId) =>
                                                    excludedIdsForGrandfatherSiblingCheck.add(
                                                        parentId
                                                    )
                                            );
                                        }
                                        if (
                                            mainPersonData &&
                                            mainPersonData.children
                                        ) {
                                            mainPersonData.children.forEach(
                                                (childId) =>
                                                    excludedIdsForGrandfatherSiblingCheck.add(
                                                        childId
                                                    )
                                            );
                                        }
                                    }

                                    treeData.forEach((p) => {
                                        if (
                                            excludedIdsForGrandfatherSiblingCheck.has(
                                                p.id
                                            )
                                        )
                                            return;
                                        if (
                                            p.parents &&
                                            p.parents.length > 0 &&
                                            grandfather.parents &&
                                            grandfather.parents.length > 0
                                        ) {
                                            const sharedParents =
                                                p.parents.filter((pId) =>
                                                    grandfather.parents.includes(
                                                        pId
                                                    )
                                                );
                                            if (
                                                sharedParents.length ===
                                                    grandfather.parents
                                                        .length &&
                                                sharedParents.length ===
                                                    p.parents.length
                                            ) {
                                                if (
                                                    !grandfatherSiblings.find(
                                                        (s) => s.id === p.id
                                                    )
                                                ) {
                                                    grandfatherSiblings.push(p);
                                                }
                                            }
                                        }
                                    });

                                    const filteredGrandfatherSiblings =
                                        grandfatherSiblings.filter(
                                            (s) =>
                                                !grandfatherParentIds.has(s.id)
                                        );
                                    const finalGrandfatherSiblings =
                                        filteredGrandfatherSiblings;

                                    const siblingsOfGrandfatherSiblings = [];
                                    finalGrandfatherSiblings.forEach(
                                        (grandfatherSibling) => {
                                            if (
                                                grandfatherSibling.siblings &&
                                                grandfatherSibling.siblings
                                                    .length > 0
                                            ) {
                                                grandfatherSibling.siblings.forEach(
                                                    (siblingOfSiblingId) => {
                                                        if (
                                                            siblingOfSiblingId ===
                                                                grandfatherSibling.id ||
                                                            siblingOfSiblingId ===
                                                                grandfather.id
                                                        ) {
                                                            return;
                                                        }
                                                        if (
                                                            finalGrandfatherSiblings.find(
                                                                (s) =>
                                                                    s.id ===
                                                                    siblingOfSiblingId
                                                            )
                                                        ) {
                                                            return;
                                                        }

                                                        const siblingOfSiblingData =
                                                            treeData.find(
                                                                (p) =>
                                                                    p.id ===
                                                                    siblingOfSiblingId
                                                            );
                                                        if (
                                                            siblingOfSiblingData
                                                        ) {
                                                            if (
                                                                siblingOfSiblingData.id ===
                                                                mainPersonId
                                                            )
                                                                return;
                                                            if (
                                                                parents.includes(
                                                                    siblingOfSiblingData.id
                                                                )
                                                            )
                                                                return;
                                                            if (
                                                                grandfatherSibling.parents &&
                                                                grandfatherSibling.parents.includes(
                                                                    siblingOfSiblingData.id
                                                                )
                                                            ) {
                                                                return;
                                                            }

                                                            if (
                                                                !siblingsOfGrandfatherSiblings.find(
                                                                    (s) =>
                                                                        s.id ===
                                                                        siblingOfSiblingData.id
                                                                )
                                                            ) {
                                                                siblingsOfGrandfatherSiblings.push(
                                                                    siblingOfSiblingData
                                                                );
                                                            }
                                                        }
                                                    }
                                                );
                                            }

                                            if (
                                                grandfatherSibling.parents &&
                                                grandfatherSibling.parents
                                                    .length > 0
                                            ) {
                                                treeData.forEach((p) => {
                                                    if (
                                                        finalGrandfatherSiblings.find(
                                                            (s) => s.id === p.id
                                                        )
                                                    )
                                                        return;
                                                    if (
                                                        siblingsOfGrandfatherSiblings.find(
                                                            (s) => s.id === p.id
                                                        )
                                                    )
                                                        return;
                                                    if (
                                                        p.id ===
                                                            grandfatherSibling.id ||
                                                        p.id === grandfather.id
                                                    )
                                                        return;
                                                    if (p.id === mainPersonId)
                                                        return;
                                                    if (parents.includes(p.id))
                                                        return;
                                                    if (
                                                        grandfatherSibling.parents &&
                                                        grandfatherSibling.parents.includes(
                                                            p.id
                                                        )
                                                    ) {
                                                        return;
                                                    }

                                                    if (
                                                        p.parents &&
                                                        p.parents.length > 0 &&
                                                        p.parents.every((pId) =>
                                                            grandfatherSibling.parents.includes(
                                                                pId
                                                            )
                                                        ) &&
                                                        grandfatherSibling.parents.every(
                                                            (pId) =>
                                                                p.parents.includes(
                                                                    pId
                                                                )
                                                        )
                                                    ) {
                                                        siblingsOfGrandfatherSiblings.push(
                                                            p
                                                        );
                                                    }
                                                });
                                            }
                                        }
                                    );

                                    const allGrandfatherSiblings = [
                                        ...finalGrandfatherSiblings,
                                        ...siblingsOfGrandfatherSiblings,
                                    ];

                                    const directGrandfatherSiblings =
                                        finalGrandfatherSiblings.slice();
                                    const siblingsOfGrandfatherSiblingsArray =
                                        siblingsOfGrandfatherSiblings.slice();

                                    const directGrandfatherBrothers =
                                        directGrandfatherSiblings.filter(
                                            (s) => s.gender === "male"
                                        );
                                    const directGrandfatherSisters =
                                        directGrandfatherSiblings.filter(
                                            (s) => s.gender === "female"
                                        );
                                    const siblingsOfGrandfatherSiblingsBrothers =
                                        siblingsOfGrandfatherSiblingsArray.filter(
                                            (s) => s.gender === "male"
                                        );
                                    const siblingsOfGrandfatherSiblingsSisters =
                                        siblingsOfGrandfatherSiblingsArray.filter(
                                            (s) => s.gender === "female"
                                        );

                                    const allGrandfatherBrothers = [
                                        ...directGrandfatherBrothers,
                                        ...siblingsOfGrandfatherSiblingsBrothers,
                                    ];

                                    const newestGrandfatherBrother =
                                        allGrandfatherBrothers.length > 0
                                            ? allGrandfatherBrothers.reduce(
                                                  (max, brother) =>
                                                      brother.id > max.id
                                                          ? brother
                                                          : max
                                              )
                                            : null;

                                    const otherGrandfatherBrothers =
                                        allGrandfatherBrothers.filter(
                                            (b) =>
                                                b.id !==
                                                newestGrandfatherBrother?.id
                                        );
                                    otherGrandfatherBrothers.sort(
                                        (a, b) => a.id - b.id
                                    );

                                    const allGrandfatherSisters = [
                                        ...directGrandfatherSisters,
                                        ...siblingsOfGrandfatherSiblingsSisters,
                                    ];

                                    const newestGrandfatherSister =
                                        allGrandfatherSisters.length > 0
                                            ? allGrandfatherSisters.reduce(
                                                  (max, sister) =>
                                                      sister.id > max.id
                                                          ? sister
                                                          : max
                                              )
                                            : null;

                                    const otherGrandfatherSisters =
                                        allGrandfatherSisters.filter(
                                            (s) =>
                                                s.id !==
                                                newestGrandfatherSister?.id
                                        );
                                    otherGrandfatherSisters.sort(
                                        (a, b) => a.id - b.id
                                    );

                                    // Put all brothers first, then all sisters
                                    const sortedGrandfatherSiblings = [
                                        ...otherGrandfatherBrothers,
                                    ];

                                    if (newestGrandfatherBrother) {
                                        sortedGrandfatherSiblings.push(
                                            newestGrandfatherBrother
                                        );
                                    }

                                    sortedGrandfatherSiblings.push(
                                        ...otherGrandfatherSisters
                                    );

                                    if (newestGrandfatherSister) {
                                        sortedGrandfatherSiblings.push(
                                            newestGrandfatherSister
                                        );
                                    }

                                    const fatherX =
                                        -cardWidth / 2 - spacing / 2 - 100;
                                    // grandfatherCardX and grandmotherCardX are already declared earlier
                                    const grandfatherSiblingSpacing = 200;
                                    // grandfatherPartnerCloseSpacing is already defined earlier

                                    // Calculate where siblings should start - after partner card if it exists, otherwise after grandmother/grandfather
                                    let startGrandfatherSiblingX;
                                    if (
                                        grandfatherPartners.length > 0 &&
                                        partnersToShow.length > 0
                                    ) {
                                        // Start siblings after the partner card
                                        // Partner card is positioned to the right of grandmother (or grandfather if no grandmother)
                                        const partnerX = grandmother
                                            ? grandmotherCardX +
                                              grandparentCardWidth +
                                              grandfatherPartnerCloseSpacing
                                            : grandfatherCardX +
                                              grandparentCardWidth +
                                              grandfatherPartnerCloseSpacing;
                                        startGrandfatherSiblingX =
                                            partnerX +
                                            grandparentCardWidth / 2 +
                                            grandfatherSiblingSpacing;
                                    } else {
                                        // No partner card, start after grandmother/grandfather
                                        startGrandfatherSiblingX = grandmother
                                            ? grandmotherCardX +
                                              grandparentCardWidth / 2 +
                                              grandfatherSiblingSpacing
                                            : grandfatherCardX +
                                              grandparentCardWidth / 2 +
                                              grandfatherSiblingSpacing;
                                    }

                                    let grandfatherCumulativeX = 0;

                                    // Store sibling positions for line drawing
                                    const grandfatherSiblingPositions = [];

                                    // Draw grandfather siblings - hide when grandmother branch is toggled OR when grandfather's partner branch is toggled
                                    if (
                                        !window.grandmotherBranchToggled &&
                                        !window.grandfatherPartnerBranchToggled
                                    ) {
                                        sortedGrandfatherSiblings.forEach(
                                            (sibling, index) => {
                                                const siblingX =
                                                    startGrandfatherSiblingX +
                                                    grandfatherCumulativeX;
                                                // Position all siblings on the same horizontal line
                                                const siblingY =
                                                    grandparentCardY;

                                                // Store position for line drawing
                                                grandfatherSiblingPositions.push(
                                                    {
                                                        x: siblingX,
                                                        y: siblingY,
                                                        sibling: sibling,
                                                    }
                                                );

                                                const siblingGroup = fatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "parent-sibling-card"
                                                    )
                                                    .attr(
                                                        "data-person-id",
                                                        sibling.id
                                                    )
                                                    .attr(
                                                        "transform",
                                                        `translate(${siblingX}, ${siblingY})`
                                                    )
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            if (
                                                                typeof window.openProfileSidebar ===
                                                                "function"
                                                            ) {
                                                                window.openProfileSidebar(
                                                                    sibling.id,
                                                                    sibling
                                                                );
                                                            }
                                                        }
                                                    );

                                                const borderColor =
                                                    sibling.gender === "female"
                                                        ? "#ffb6c1"
                                                        : "#add8e6";
                                                siblingGroup
                                                    .append("rect")
                                                    .attr(
                                                        "x",
                                                        -grandparentCardWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -grandparentCardHeight /
                                                            2
                                                    )
                                                    .attr(
                                                        "width",
                                                        grandparentCardWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        grandparentCardHeight
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("ry", 8)
                                                    .attr("fill", "white")
                                                    .attr("stroke", borderColor)
                                                    .attr("stroke-width", 3)
                                                    .style(
                                                        "filter",
                                                        "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                    );

                                                const siblingIcon = siblingGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, -20)"
                                                    );
                                                renderAvatar(
                                                    siblingIcon,
                                                    sibling,
                                                    svg
                                                );

                                                let siblingName = sibling.name;
                                                if (!siblingName) {
                                                    siblingName =
                                                        sibling.first_name ||
                                                        "";
                                                    if (sibling.last_name) {
                                                        siblingName +=
                                                            " " +
                                                            sibling.last_name;
                                                    }
                                                    if (!siblingName) {
                                                        siblingName = "Unknown";
                                                    }
                                                }
                                                siblingGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 20)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "12px")
                                                    .attr("fill", "#333")
                                                    .text(
                                                        siblingName.length > 15
                                                            ? siblingName.substring(
                                                                  0,
                                                                  25
                                                              ) + "..."
                                                            : siblingName
                                                    );

                                                siblingGroup
                                                    .append("circle")
                                                    .attr("cx", 0)
                                                    .attr("cy", 32)
                                                    .attr("r", 10)
                                                    .attr("fill", "white")
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 1)
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            openBranchBuilder(
                                                                sibling
                                                            );
                                                        }
                                                    );
                                                siblingGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 36)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "16px")
                                                    .attr("font-weight", "bold")
                                                    .text("+")
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            openBranchBuilder(
                                                                sibling
                                                            );
                                                        }
                                                    );

                                                addEditDeleteIcons(
                                                    siblingGroup,
                                                    sibling.id,
                                                    siblingName
                                                );

                                                const siblingChildren =
                                                    treeData.filter((p) => {
                                                        if (
                                                            !p.parents ||
                                                            p.parents.length ===
                                                                0
                                                        )
                                                            return false;
                                                        return p.parents.includes(
                                                            sibling.id
                                                        );
                                                    });

                                                let siblingPartnerId = null;
                                                if (
                                                    sibling.spouses &&
                                                    sibling.spouses.length > 0
                                                ) {
                                                    siblingPartnerId =
                                                        sibling.spouses[0];
                                                    const partnerChildren =
                                                        treeData.filter((p) => {
                                                            if (
                                                                !p.parents ||
                                                                p.parents
                                                                    .length ===
                                                                    0
                                                            )
                                                                return false;
                                                            return p.parents.includes(
                                                                siblingPartnerId
                                                            );
                                                        });
                                                    partnerChildren.forEach(
                                                        (child) => {
                                                            if (
                                                                !siblingChildren.find(
                                                                    (c) =>
                                                                        c.id ===
                                                                        child.id
                                                                )
                                                            ) {
                                                                if (
                                                                    child.parents.includes(
                                                                        sibling.id
                                                                    ) &&
                                                                    child.parents.includes(
                                                                        siblingPartnerId
                                                                    )
                                                                ) {
                                                                    siblingChildren.push(
                                                                        child
                                                                    );
                                                                }
                                                            }
                                                        }
                                                    );
                                                }

                                                if (
                                                    siblingChildren.length > 0
                                                ) {
                                                    const childCardY =
                                                        siblingY +
                                                        grandparentCardHeight +
                                                        100;
                                                    const childCardSpacing = 200;

                                                    let partnerX = null;
                                                    if (siblingPartnerId) {
                                                        partnerX =
                                                            siblingX +
                                                            grandparentCardWidth +
                                                            grandfatherPartnerCloseSpacing;
                                                    }

                                                    const parentMidX = partnerX
                                                        ? (siblingX +
                                                              partnerX) /
                                                          2
                                                        : siblingX;

                                                    const totalChildWidth =
                                                        siblingChildren.length *
                                                            (grandparentCardWidth +
                                                                childCardSpacing) -
                                                        childCardSpacing;
                                                    const startChildX =
                                                        parentMidX -
                                                        totalChildWidth / 2 +
                                                        grandparentCardWidth /
                                                            2;

                                                    const parentLineY =
                                                        siblingY +
                                                        grandparentCardHeight /
                                                            2;
                                                    const childLevelY =
                                                        childCardY -
                                                        grandparentCardHeight /
                                                            2;

                                                    if (
                                                        siblingPartnerId &&
                                                        partnerX
                                                    ) {
                                                        node.append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-child-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                siblingX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                parentLineY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                partnerX
                                                            )
                                                            .attr(
                                                                "y2",
                                                                parentLineY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );

                                                        node.append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-child-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                parentMidX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                parentLineY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                parentMidX
                                                            )
                                                            .attr(
                                                                "y2",
                                                                childLevelY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );

                                                        if (
                                                            siblingChildren.length >
                                                            1
                                                        ) {
                                                            const minChildX =
                                                                Math.min(
                                                                    ...siblingChildren.map(
                                                                        (
                                                                            _,
                                                                            idx
                                                                        ) =>
                                                                            startChildX +
                                                                            idx *
                                                                                (grandparentCardWidth +
                                                                                    childCardSpacing)
                                                                    )
                                                                );
                                                            const maxChildX =
                                                                Math.max(
                                                                    ...siblingChildren.map(
                                                                        (
                                                                            _,
                                                                            idx
                                                                        ) =>
                                                                            startChildX +
                                                                            idx *
                                                                                (grandparentCardWidth +
                                                                                    childCardSpacing)
                                                                    )
                                                                );

                                                            node.append("line")
                                                                .attr(
                                                                    "class",
                                                                    "parent-child-link"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    minChildX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    childLevelY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    maxChildX
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    childLevelY
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    2
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );

                                                            siblingChildren.forEach(
                                                                (
                                                                    child,
                                                                    childIndex
                                                                ) => {
                                                                    const childX =
                                                                        startChildX +
                                                                        childIndex *
                                                                            (grandparentCardWidth +
                                                                                childCardSpacing);
                                                                    node.append(
                                                                        "line"
                                                                    )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-child-link"
                                                                        )
                                                                        .attr(
                                                                            "x1",
                                                                            childX
                                                                        )
                                                                        .attr(
                                                                            "y1",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "x2",
                                                                            childX
                                                                        )
                                                                        .attr(
                                                                            "y2",
                                                                            childCardY -
                                                                                grandparentCardHeight /
                                                                                    2
                                                                        )
                                                                        .attr(
                                                                            "stroke",
                                                                            "#999"
                                                                        )
                                                                        .attr(
                                                                            "stroke-width",
                                                                            2
                                                                        )
                                                                        .style(
                                                                            "pointer-events",
                                                                            "none"
                                                                        );
                                                                }
                                                            );
                                                        } else {
                                                            const childX =
                                                                startChildX;
                                                            node.append("line")
                                                                .attr(
                                                                    "class",
                                                                    "parent-child-link"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    parentMidX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    childLevelY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    childX
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    childLevelY
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    2
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );

                                                            node.append("line")
                                                                .attr(
                                                                    "class",
                                                                    "parent-child-link"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    childX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    childLevelY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    childX
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    childCardY -
                                                                        grandparentCardHeight /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    2
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );
                                                        }
                                                    } else {
                                                        node.append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-child-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                siblingX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                parentLineY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                siblingX
                                                            )
                                                            .attr(
                                                                "y2",
                                                                childLevelY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );

                                                        if (
                                                            siblingChildren.length >
                                                            1
                                                        ) {
                                                            const minChildX =
                                                                Math.min(
                                                                    ...siblingChildren.map(
                                                                        (
                                                                            _,
                                                                            idx
                                                                        ) =>
                                                                            startChildX +
                                                                            idx *
                                                                                (grandparentCardWidth +
                                                                                    childCardSpacing)
                                                                    )
                                                                );
                                                            const maxChildX =
                                                                Math.max(
                                                                    ...siblingChildren.map(
                                                                        (
                                                                            _,
                                                                            idx
                                                                        ) =>
                                                                            startChildX +
                                                                            idx *
                                                                                (grandparentCardWidth +
                                                                                    childCardSpacing)
                                                                    )
                                                                );

                                                            node.append("line")
                                                                .attr(
                                                                    "class",
                                                                    "parent-child-link"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    minChildX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    childLevelY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    maxChildX
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    childLevelY
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    2
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );

                                                            siblingChildren.forEach(
                                                                (
                                                                    child,
                                                                    childIndex
                                                                ) => {
                                                                    const childX =
                                                                        startChildX +
                                                                        childIndex *
                                                                            (grandparentCardWidth +
                                                                                childCardSpacing);
                                                                    node.append(
                                                                        "line"
                                                                    )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-child-link"
                                                                        )
                                                                        .attr(
                                                                            "x1",
                                                                            childX
                                                                        )
                                                                        .attr(
                                                                            "y1",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "x2",
                                                                            childX
                                                                        )
                                                                        .attr(
                                                                            "y2",
                                                                            childCardY -
                                                                                grandparentCardHeight /
                                                                                    2
                                                                        )
                                                                        .attr(
                                                                            "stroke",
                                                                            "#999"
                                                                        )
                                                                        .attr(
                                                                            "stroke-width",
                                                                            2
                                                                        )
                                                                        .style(
                                                                            "pointer-events",
                                                                            "none"
                                                                        );
                                                                }
                                                            );
                                                        } else {
                                                            const childX =
                                                                startChildX;
                                                            node.append("line")
                                                                .attr(
                                                                    "class",
                                                                    "parent-child-link"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    siblingX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    childLevelY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    childX
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    childLevelY
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    2
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );

                                                            node.append("line")
                                                                .attr(
                                                                    "class",
                                                                    "parent-child-link"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    childX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    childLevelY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    childX
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    childCardY -
                                                                        grandparentCardHeight /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    2
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );
                                                        }
                                                    }

                                                    siblingChildren.forEach(
                                                        (child, childIndex) => {
                                                            const childX =
                                                                startChildX +
                                                                childIndex *
                                                                    (grandparentCardWidth +
                                                                        childCardSpacing);

                                                            const childGroup =
                                                                node
                                                                    .append("g")
                                                                    .attr(
                                                                        "class",
                                                                        "sibling-child-card"
                                                                    )
                                                                    .attr(
                                                                        "data-person-id",
                                                                        child.id
                                                                    )
                                                                    .attr(
                                                                        "transform",
                                                                        `translate(${childX}, ${childCardY})`
                                                                    )
                                                                    .on(
                                                                        "click",
                                                                        function (
                                                                            event
                                                                        ) {
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    child.id,
                                                                                    child
                                                                                );
                                                                            }
                                                                        }
                                                                    );

                                                            const childBorderColor =
                                                                child.gender ===
                                                                "female"
                                                                    ? "#ffb6c1"
                                                                    : "#add8e6";
                                                            childGroup
                                                                .append("rect")
                                                                .attr(
                                                                    "x",
                                                                    -grandparentCardWidth /
                                                                        2
                                                                )
                                                                .attr(
                                                                    "y",
                                                                    -grandparentCardHeight /
                                                                        2
                                                                )
                                                                .attr(
                                                                    "width",
                                                                    grandparentCardWidth
                                                                )
                                                                .attr(
                                                                    "height",
                                                                    grandparentCardHeight
                                                                )
                                                                .attr("rx", 8)
                                                                .attr("ry", 8)
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    childBorderColor
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    3
                                                                )
                                                                .style(
                                                                    "filter",
                                                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                                );

                                                            const childIcon =
                                                                childGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "transform",
                                                                        "translate(0, -20)"
                                                                    );
                                                            renderAvatar(
                                                                childIcon,
                                                                child,
                                                                svg
                                                            );

                                                            let childName =
                                                                child.name;
                                                            if (!childName) {
                                                                childName =
                                                                    child.first_name ||
                                                                    "";
                                                                if (
                                                                    child.last_name
                                                                ) {
                                                                    childName +=
                                                                        " " +
                                                                        child.last_name;
                                                                }
                                                                if (
                                                                    !childName
                                                                ) {
                                                                    childName =
                                                                        "Unknown";
                                                                }
                                                            }
                                                            childGroup
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 20)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "12px"
                                                                )
                                                                .attr(
                                                                    "fill",
                                                                    "#333"
                                                                )
                                                                .text(
                                                                    childName.length >
                                                                        15
                                                                        ? childName.substring(
                                                                              0,
                                                                              25
                                                                          ) +
                                                                              "..."
                                                                        : childName
                                                                );

                                                            childGroup
                                                                .append(
                                                                    "circle"
                                                                )
                                                                .attr("cx", 0)
                                                                .attr("cy", 32)
                                                                .attr("r", 10)
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1
                                                                )
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        openBranchBuilder(
                                                                            child
                                                                        );
                                                                    }
                                                                );
                                                            childGroup
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 36)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "16px"
                                                                )
                                                                .attr(
                                                                    "font-weight",
                                                                    "bold"
                                                                )
                                                                .text("+")
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        openBranchBuilder(
                                                                            child
                                                                        );
                                                                    }
                                                                );

                                                            addEditDeleteIcons(
                                                                childGroup,
                                                                child.id,
                                                                childName
                                                            );
                                                        }
                                                    );
                                                }

                                                if (
                                                    sibling.spouses &&
                                                    sibling.spouses.length > 0
                                                ) {
                                                    const partnerId =
                                                        sibling.spouses[0];
                                                    const partnerData =
                                                        treeData.find(
                                                            (p) =>
                                                                p.id ===
                                                                partnerId
                                                        );

                                                    if (partnerData) {
                                                        partnerX =
                                                            siblingX +
                                                            grandparentCardWidth +
                                                            grandfatherPartnerCloseSpacing;
                                                        const partnerY =
                                                            siblingY;

                                                        const partnerGroup =
                                                            node
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "sibling-partner-card"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${partnerX}, ${partnerY})`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                partnerData.id,
                                                                                partnerData
                                                                            );
                                                                        }
                                                                    }
                                                                );

                                                        const partnerBorderColor =
                                                            partnerData.gender ===
                                                            "female"
                                                                ? "#ffb6c1"
                                                                : "#add8e6";
                                                        partnerGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -grandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -grandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                grandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                grandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                partnerBorderColor
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            )
                                                            .style(
                                                                "filter",
                                                                "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                            );

                                                        const partnerIcon =
                                                            partnerGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            partnerIcon,
                                                            partnerData,
                                                            svg
                                                        );

                                                        let partnerName =
                                                            partnerData.name;
                                                        if (!partnerName) {
                                                            partnerName =
                                                                partnerData.first_name ||
                                                                "";
                                                            if (
                                                                partnerData.last_name
                                                            ) {
                                                                partnerName +=
                                                                    " " +
                                                                    partnerData.last_name;
                                                            }
                                                            if (!partnerName) {
                                                                partnerName =
                                                                    "Unknown";
                                                            }
                                                        }
                                                        partnerGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                partnerName.length >
                                                                    15
                                                                    ? partnerName.substring(
                                                                          0,
                                                                          25
                                                                      ) + "..."
                                                                    : partnerName
                                                            );

                                                        partnerGroup
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 32)
                                                            .attr("r", 10)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        partnerData
                                                                    );
                                                                }
                                                            );
                                                        partnerGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 36)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "16px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "bold"
                                                            )
                                                            .text("+")
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        partnerData
                                                                    );
                                                                }
                                                            );

                                                        addEditDeleteIcons(
                                                            partnerGroup,
                                                            partnerData.id,
                                                            partnerName
                                                        );

                                                        partnerGroup
                                                            .append("line")
                                                            .attr(
                                                                "x1",
                                                                -grandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr("y1", 0)
                                                            .attr(
                                                                "x2",
                                                                -grandparentCardWidth /
                                                                    2 -
                                                                    grandfatherPartnerCloseSpacing
                                                            )
                                                            .attr("y2", 0)
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            );

                                                        grandfatherCumulativeX +=
                                                            grandparentCardWidth +
                                                            grandfatherPartnerCloseSpacing +
                                                            grandparentCardWidth;
                                                    }
                                                } else {
                                                    grandfatherCumulativeX +=
                                                        grandparentCardWidth +
                                                        grandfatherSiblingSpacing;
                                                }
                                            }
                                        );

                                        // Draw complete horizontal line from grandfather to last sibling (matching father's siblings pattern)
                                        // Only draw if grandmother branch is not toggled
                                        if (
                                            sortedGrandfatherSiblings.length >
                                                0 &&
                                            !window.grandmotherBranchToggled
                                        ) {
                                            const grandfatherCardCenterX =
                                                grandfatherCardX;
                                            const linkY =
                                                grandparentCardY -
                                                grandparentCardHeight / 2 -
                                                20;

                                            // Draw horizontal line from grandfather card's top center to the last (rightmost) sibling card
                                            const startX =
                                                grandfatherCardCenterX;
                                            const startY = linkY;
                                            const endX =
                                                grandfatherSiblingPositions.length >
                                                0
                                                    ? grandfatherSiblingPositions[
                                                          grandfatherSiblingPositions.length -
                                                              1
                                                      ].x
                                                    : grandfatherCardCenterX;
                                            const endY = linkY;

                                            // Draw horizontal line
                                            fatherGroup
                                                .append("line")
                                                .attr("class", "sibling-link")
                                                .attr("x1", startX)
                                                .attr("y1", startY)
                                                .attr("x2", endX)
                                                .attr("y2", endY)
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 2)
                                                .style(
                                                    "pointer-events",
                                                    "none"
                                                );

                                            // Draw vertical line from horizontal line down to grandfather card top
                                            fatherGroup
                                                .append("line")
                                                .attr("class", "sibling-link")
                                                .attr(
                                                    "x1",
                                                    grandfatherCardCenterX
                                                )
                                                .attr("y1", startY)
                                                .attr(
                                                    "x2",
                                                    grandfatherCardCenterX
                                                )
                                                .attr(
                                                    "y2",
                                                    grandparentCardY -
                                                        grandparentCardHeight /
                                                            2
                                                )
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 2)
                                                .style(
                                                    "pointer-events",
                                                    "none"
                                                );

                                            // Draw vertical lines from horizontal line down to each sibling card
                                            grandfatherSiblingPositions.forEach(
                                                (pos) => {
                                                    const siblingX = pos.x;
                                                    const siblingY =
                                                        pos.y ||
                                                        grandparentCardY;
                                                    // Draw line from horizontal line down to sibling card top
                                                    fatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "sibling-link"
                                                        )
                                                        .attr("x1", siblingX)
                                                        .attr("y1", linkY)
                                                        .attr("x2", siblingX)
                                                        .attr(
                                                            "y2",
                                                            siblingY -
                                                                grandparentCardHeight /
                                                                    2
                                                        )
                                                        .attr("stroke", "#999")
                                                        .attr("stroke-width", 2)
                                                        .style(
                                                            "pointer-events",
                                                            "none"
                                                        );
                                                }
                                            );
                                        }
                                    } // End of if (!window.grandmotherBranchToggled) for grandfather siblings

                                    // Recursively show great-grandparent cards or "Add father/mother" buttons above grandfather
                                    // Only show if ancestors are NOT hidden AND grandmother branch is NOT toggled
                                    // When grandmotherBranchToggled is true, hide grandfather's great-grandparents
                                    if (
                                        shouldShowGrandparentsAncestors &&
                                        !window.grandmotherBranchToggled
                                    ) {
                                        const grandfatherParentButtonY =
                                            grandparentCardY - 150;
                                        const grandfatherParents =
                                            grandfather.parents || [];
                                        const visibleGrandfatherParents =
                                            grandfatherParents.filter(
                                                (pId) =>
                                                    !window.hiddenAncestorIds ||
                                                    !window.hiddenAncestorIds.has(
                                                        pId
                                                    )
                                            );
                                        const grandfatherHasParents =
                                            visibleGrandfatherParents &&
                                            visibleGrandfatherParents.length >
                                                0;

                                        if (grandfatherHasParents) {
                                            // Show great-grandparent cards above grandfather
                                            const greatGrandparentData =
                                                visibleGrandfatherParents
                                                    .map((parentId) =>
                                                        treeData.find(
                                                            (p) =>
                                                                p.id ===
                                                                parentId
                                                        )
                                                    )
                                                    .filter((p) => p);
                                            const greatGrandfather =
                                                greatGrandparentData.find(
                                                    (p) => p.gender === "male"
                                                );
                                            const greatGrandmother =
                                                greatGrandparentData.find(
                                                    (p) => p.gender === "female"
                                                );

                                            console.log(
                                                "Great-grandparent data:",
                                                greatGrandparentData.map(
                                                    (p) => ({
                                                        id: p.id,
                                                        name:
                                                            p.first_name ||
                                                            p.name,
                                                        gender: p.gender,
                                                    })
                                                )
                                            );
                                            console.log(
                                                "Great-grandfather:",
                                                greatGrandfather
                                                    ? greatGrandfather.first_name ||
                                                          greatGrandfather.name
                                                    : "none"
                                            );
                                            console.log(
                                                "Great-grandmother:",
                                                greatGrandmother
                                                    ? greatGrandmother.first_name ||
                                                          greatGrandmother.name
                                                    : "none"
                                            );

                                            const greatGrandparentCardY =
                                                grandfatherParentButtonY -
                                                grandparentCardY;
                                            const greatGrandparentCardWidth = 140; // Card width (decent size)
                                            const greatGrandparentCardHeight = 90; // Card height (decent size)
                                            const greatGrandparentSpacing = 150; // Reduced spacing for great-grandparents

                                            // Show great-grandfather card (left)
                                            if (greatGrandfather) {
                                                console.log(
                                                    "Great-grandfather found:",
                                                    greatGrandfather.first_name ||
                                                        greatGrandfather.name,
                                                    "ID:",
                                                    greatGrandfather.id
                                                );
                                                const greatGrandfatherGroup =
                                                    grandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "parent-card"
                                                        )
                                                        .attr(
                                                            "data-person-id",
                                                            greatGrandfather.id
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                -greatGrandparentCardWidth /
                                                                    2 -
                                                                greatGrandparentSpacing /
                                                                    2
                                                            }, ${greatGrandparentCardY})`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                if (
                                                                    typeof window.openProfileSidebar ===
                                                                    "function"
                                                                ) {
                                                                    window.openProfileSidebar(
                                                                        greatGrandfather.id,
                                                                        greatGrandfather
                                                                    );
                                                                } else {
                                                                    event.preventDefault();
                                                                    event.stopPropagation();
                                                                    if (
                                                                        typeof window.openProfileSidebar ===
                                                                        "function"
                                                                    ) {
                                                                        window.openProfileSidebar(
                                                                            greatGrandfather.id,
                                                                            greatGrandfather
                                                                        );
                                                                    }
                                                                }
                                                            }
                                                        );

                                                greatGrandfatherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "x",
                                                        -greatGrandparentCardWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -greatGrandparentCardHeight /
                                                            2
                                                    )
                                                    .attr(
                                                        "width",
                                                        greatGrandparentCardWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        greatGrandparentCardHeight
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("ry", 8)
                                                    .attr("fill", "white")
                                                    .attr("stroke", "#add8e6")
                                                    .attr("stroke-width", 3);

                                                const greatGrandfatherIcon =
                                                    greatGrandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "transform",
                                                            "translate(0, -20)"
                                                        );
                                                renderAvatar(
                                                    greatGrandfatherIcon,
                                                    greatGrandfather,
                                                    svg
                                                );

                                                let greatGrandfatherName =
                                                    greatGrandfather.name ||
                                                    greatGrandfather.first_name ||
                                                    "";
                                                if (greatGrandfather.last_name)
                                                    greatGrandfatherName +=
                                                        " " +
                                                        greatGrandfather.last_name;
                                                if (!greatGrandfatherName)
                                                    greatGrandfatherName =
                                                        "Unknown";

                                                greatGrandfatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 20)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "12px")
                                                    .attr("fill", "#333")
                                                    .text(
                                                        greatGrandfatherName.length >
                                                            15
                                                            ? greatGrandfatherName.substring(
                                                                  0,
                                                                  15
                                                              ) + "..."
                                                            : greatGrandfatherName
                                                    );

                                                // Add button - black style matching root node
                                                const greatGrandfatherIcons =
                                                    greatGrandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "transform",
                                                            "translate(0, 35)"
                                                        )
                                                        .style(
                                                            "cursor",
                                                            "pointer"
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                openBranchBuilder(
                                                                    greatGrandfather
                                                                );
                                                            }
                                                        );
                                                greatGrandfatherIcons
                                                    .append("circle")
                                                    .attr("cx", 0)
                                                    .attr("cy", 0)
                                                    .attr("r", 10)
                                                    .attr("fill", "white")
                                                    .attr("stroke", "#d0d0d0")
                                                    .attr("stroke-width", 1);
                                                greatGrandfatherIcons
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 4)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "16px")
                                                    .attr("font-weight", "bold")
                                                    .attr("fill", "#333")
                                                    .text("+");

                                                // Add toggle hide/show button (eye icon) - top right
                                                const isGreatGrandfatherHidden =
                                                    areAncestorsHidden(
                                                        greatGrandfather.id
                                                    );
                                                const hideGreatGrandfatherButton =
                                                    greatGrandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "hide-branch-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            "translate(45, -35)"
                                                        )
                                                        .style(
                                                            "cursor",
                                                            "pointer"
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                togglePersonBranch(
                                                                    greatGrandfather.id
                                                                );
                                                            }
                                                        );

                                                hideGreatGrandfatherButton
                                                    .append("circle")
                                                    .attr("cx", 0)
                                                    .attr("cy", 0)
                                                    .attr("r", 10)
                                                    .attr(
                                                        "fill",
                                                        isGreatGrandfatherHidden
                                                            ? "#28a745"
                                                            : "#6c757d"
                                                    )
                                                    .attr("stroke", "white")
                                                    .attr("stroke-width", 1);

                                                hideGreatGrandfatherButton
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 3)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "10px")
                                                    .attr("fill", "white")
                                                    .text(
                                                        isGreatGrandfatherHidden
                                                            ? "👁️"
                                                            : "👁️‍🗨️"
                                                    );

                                                hideGreatGrandfatherButton
                                                    .append("title")
                                                    .text(
                                                        isGreatGrandfatherHidden
                                                            ? `Click to show the family branch of ${greatGrandfatherName}`
                                                            : `Click to hide the family branch of ${greatGrandfatherName}`
                                                    );

                                                // Add edit and delete icons automatically
                                                addEditDeleteIcons(
                                                    greatGrandfatherGroup,
                                                    greatGrandfather.id,
                                                    greatGrandfatherName
                                                );

                                                // Add siblings and children for great-grandfather (same logic as father card)
                                                console.log(
                                                    "Checking for great-grandfather siblings. Great-grandfather ID:",
                                                    greatGrandfather.id,
                                                    "Great-grandfather name:",
                                                    greatGrandfatherName
                                                );
                                                const greatGrandfatherSiblings =
                                                    [];
                                                const greatGrandfatherParentIds =
                                                    greatGrandfather.parents
                                                        ? new Set(
                                                              greatGrandfather.parents
                                                          )
                                                        : new Set();

                                                if (
                                                    greatGrandfather.siblings &&
                                                    greatGrandfather.siblings
                                                        .length > 0
                                                ) {
                                                    greatGrandfather.siblings.forEach(
                                                        (siblingId) => {
                                                            if (
                                                                greatGrandfatherParentIds.has(
                                                                    siblingId
                                                                )
                                                            ) {
                                                                return;
                                                            }
                                                            const siblingData =
                                                                treeData.find(
                                                                    (p) =>
                                                                        p.id ===
                                                                        siblingId
                                                                );
                                                            if (
                                                                siblingData &&
                                                                siblingData.id !==
                                                                    greatGrandfather.id
                                                            ) {
                                                                greatGrandfatherSiblings.push(
                                                                    siblingData
                                                                );
                                                            }
                                                        }
                                                    );
                                                }

                                                if (
                                                    greatGrandfather.parents &&
                                                    greatGrandfather.parents
                                                        .length > 0
                                                ) {
                                                    treeData.forEach((p) => {
                                                        if (
                                                            p.id ===
                                                                greatGrandfather.id ||
                                                            p.id ===
                                                                mainPersonId
                                                        )
                                                            return;
                                                        if (
                                                            greatGrandfatherParentIds.has(
                                                                p.id
                                                            )
                                                        ) {
                                                            return;
                                                        }
                                                        if (
                                                            p.parents &&
                                                            p.parents.length >
                                                                0 &&
                                                            p.parents.every(
                                                                (pId) =>
                                                                    greatGrandfather.parents.includes(
                                                                        pId
                                                                    )
                                                            ) &&
                                                            greatGrandfather.parents.every(
                                                                (pId) =>
                                                                    p.parents.includes(
                                                                        pId
                                                                    )
                                                            ) &&
                                                            !greatGrandfatherSiblings.find(
                                                                (s) =>
                                                                    s.id ===
                                                                    p.id
                                                            )
                                                        ) {
                                                            greatGrandfatherSiblings.push(
                                                                p
                                                            );
                                                        }
                                                    });
                                                }

                                                const excludedIdsForGreatGrandfatherSiblingCheck =
                                                    new Set([
                                                        greatGrandfather.id,
                                                        mainPersonId,
                                                    ]);
                                                if (
                                                    greatGrandfather.parents &&
                                                    greatGrandfather.parents
                                                        .length > 0
                                                ) {
                                                    greatGrandfather.parents.forEach(
                                                        (parentId) =>
                                                            excludedIdsForGreatGrandfatherSiblingCheck.add(
                                                                parentId
                                                            )
                                                    );
                                                }
                                                if (mainPersonId) {
                                                    const mainPersonData =
                                                        treeData.find(
                                                            (p) =>
                                                                p.id ===
                                                                mainPersonId
                                                        );
                                                    if (
                                                        mainPersonData &&
                                                        mainPersonData.parents
                                                    ) {
                                                        mainPersonData.parents.forEach(
                                                            (parentId) =>
                                                                excludedIdsForGreatGrandfatherSiblingCheck.add(
                                                                    parentId
                                                                )
                                                        );
                                                    }
                                                    if (
                                                        mainPersonData &&
                                                        mainPersonData.children
                                                    ) {
                                                        mainPersonData.children.forEach(
                                                            (childId) =>
                                                                excludedIdsForGreatGrandfatherSiblingCheck.add(
                                                                    childId
                                                                )
                                                        );
                                                    }
                                                }

                                                treeData.forEach((p) => {
                                                    if (
                                                        excludedIdsForGreatGrandfatherSiblingCheck.has(
                                                            p.id
                                                        )
                                                    )
                                                        return;
                                                    if (
                                                        p.parents &&
                                                        p.parents.length > 0 &&
                                                        greatGrandfather.parents &&
                                                        greatGrandfather.parents
                                                            .length > 0
                                                    ) {
                                                        const sharedParents =
                                                            p.parents.filter(
                                                                (pId) =>
                                                                    greatGrandfather.parents.includes(
                                                                        pId
                                                                    )
                                                            );
                                                        if (
                                                            sharedParents.length ===
                                                                greatGrandfather
                                                                    .parents
                                                                    .length &&
                                                            sharedParents.length ===
                                                                p.parents.length
                                                        ) {
                                                            if (
                                                                !greatGrandfatherSiblings.find(
                                                                    (s) =>
                                                                        s.id ===
                                                                        p.id
                                                                )
                                                            ) {
                                                                greatGrandfatherSiblings.push(
                                                                    p
                                                                );
                                                            }
                                                        }
                                                    }
                                                });

                                                const filteredGreatGrandfatherSiblings =
                                                    greatGrandfatherSiblings.filter(
                                                        (s) =>
                                                            !greatGrandfatherParentIds.has(
                                                                s.id
                                                            )
                                                    );
                                                const finalGreatGrandfatherSiblings =
                                                    filteredGreatGrandfatherSiblings;

                                                const siblingsOfGreatGrandfatherSiblings =
                                                    [];
                                                finalGreatGrandfatherSiblings.forEach(
                                                    (
                                                        greatGrandfatherSibling
                                                    ) => {
                                                        if (
                                                            greatGrandfatherSibling.siblings &&
                                                            greatGrandfatherSibling
                                                                .siblings
                                                                .length > 0
                                                        ) {
                                                            greatGrandfatherSibling.siblings.forEach(
                                                                (
                                                                    siblingOfSiblingId
                                                                ) => {
                                                                    if (
                                                                        siblingOfSiblingId ===
                                                                            greatGrandfatherSibling.id ||
                                                                        siblingOfSiblingId ===
                                                                            greatGrandfather.id
                                                                    ) {
                                                                        return;
                                                                    }
                                                                    if (
                                                                        finalGreatGrandfatherSiblings.find(
                                                                            (
                                                                                s
                                                                            ) =>
                                                                                s.id ===
                                                                                siblingOfSiblingId
                                                                        )
                                                                    ) {
                                                                        return;
                                                                    }

                                                                    const siblingOfSiblingData =
                                                                        treeData.find(
                                                                            (
                                                                                p
                                                                            ) =>
                                                                                p.id ===
                                                                                siblingOfSiblingId
                                                                        );
                                                                    if (
                                                                        siblingOfSiblingData
                                                                    ) {
                                                                        if (
                                                                            siblingOfSiblingData.id ===
                                                                            mainPersonId
                                                                        )
                                                                            return;
                                                                        if (
                                                                            parents.includes(
                                                                                siblingOfSiblingData.id
                                                                            )
                                                                        )
                                                                            return;
                                                                        if (
                                                                            greatGrandfatherSibling.parents &&
                                                                            greatGrandfatherSibling.parents.includes(
                                                                                siblingOfSiblingData.id
                                                                            )
                                                                        ) {
                                                                            return;
                                                                        }

                                                                        if (
                                                                            !siblingsOfGreatGrandfatherSiblings.find(
                                                                                (
                                                                                    s
                                                                                ) =>
                                                                                    s.id ===
                                                                                    siblingOfSiblingData.id
                                                                            )
                                                                        ) {
                                                                            siblingsOfGreatGrandfatherSiblings.push(
                                                                                siblingOfSiblingData
                                                                            );
                                                                        }
                                                                    }
                                                                }
                                                            );
                                                        }

                                                        if (
                                                            greatGrandfatherSibling.parents &&
                                                            greatGrandfatherSibling
                                                                .parents
                                                                .length > 0
                                                        ) {
                                                            treeData.forEach(
                                                                (p) => {
                                                                    if (
                                                                        finalGreatGrandfatherSiblings.find(
                                                                            (
                                                                                s
                                                                            ) =>
                                                                                s.id ===
                                                                                p.id
                                                                        )
                                                                    )
                                                                        return;
                                                                    if (
                                                                        siblingsOfGreatGrandfatherSiblings.find(
                                                                            (
                                                                                s
                                                                            ) =>
                                                                                s.id ===
                                                                                p.id
                                                                        )
                                                                    )
                                                                        return;
                                                                    if (
                                                                        p.id ===
                                                                            greatGrandfatherSibling.id ||
                                                                        p.id ===
                                                                            greatGrandfather.id
                                                                    )
                                                                        return;
                                                                    if (
                                                                        p.id ===
                                                                        mainPersonId
                                                                    )
                                                                        return;
                                                                    if (
                                                                        parents.includes(
                                                                            p.id
                                                                        )
                                                                    )
                                                                        return;
                                                                    if (
                                                                        greatGrandfatherSibling.parents &&
                                                                        greatGrandfatherSibling.parents.includes(
                                                                            p.id
                                                                        )
                                                                    ) {
                                                                        return;
                                                                    }

                                                                    if (
                                                                        p.parents &&
                                                                        p
                                                                            .parents
                                                                            .length >
                                                                            0 &&
                                                                        p.parents.every(
                                                                            (
                                                                                pId
                                                                            ) =>
                                                                                greatGrandfatherSibling.parents.includes(
                                                                                    pId
                                                                                )
                                                                        ) &&
                                                                        greatGrandfatherSibling.parents.every(
                                                                            (
                                                                                pId
                                                                            ) =>
                                                                                p.parents.includes(
                                                                                    pId
                                                                                )
                                                                        )
                                                                    ) {
                                                                        siblingsOfGreatGrandfatherSiblings.push(
                                                                            p
                                                                        );
                                                                    }
                                                                }
                                                            );
                                                        }
                                                    }
                                                );

                                                const allGreatGrandfatherSiblings =
                                                    [
                                                        ...finalGreatGrandfatherSiblings,
                                                        ...siblingsOfGreatGrandfatherSiblings,
                                                    ];

                                                const directGreatGrandfatherSiblings =
                                                    finalGreatGrandfatherSiblings.slice();
                                                const siblingsOfGreatGrandfatherSiblingsArray =
                                                    siblingsOfGreatGrandfatherSiblings.slice();

                                                const directGreatGrandfatherBrothers =
                                                    directGreatGrandfatherSiblings.filter(
                                                        (s) =>
                                                            s.gender === "male"
                                                    );
                                                const directGreatGrandfatherSisters =
                                                    directGreatGrandfatherSiblings.filter(
                                                        (s) =>
                                                            s.gender ===
                                                            "female"
                                                    );
                                                const siblingsOfGreatGrandfatherSiblingsBrothers =
                                                    siblingsOfGreatGrandfatherSiblingsArray.filter(
                                                        (s) =>
                                                            s.gender === "male"
                                                    );
                                                const siblingsOfGreatGrandfatherSiblingsSisters =
                                                    siblingsOfGreatGrandfatherSiblingsArray.filter(
                                                        (s) =>
                                                            s.gender ===
                                                            "female"
                                                    );

                                                const allGreatGrandfatherBrothers =
                                                    [
                                                        ...directGreatGrandfatherBrothers,
                                                        ...siblingsOfGreatGrandfatherSiblingsBrothers,
                                                    ];

                                                const newestGreatGrandfatherBrother =
                                                    allGreatGrandfatherBrothers.length >
                                                    0
                                                        ? allGreatGrandfatherBrothers.reduce(
                                                              (max, brother) =>
                                                                  brother.id >
                                                                  max.id
                                                                      ? brother
                                                                      : max
                                                          )
                                                        : null;

                                                const otherGreatGrandfatherBrothers =
                                                    allGreatGrandfatherBrothers.filter(
                                                        (b) =>
                                                            b.id !==
                                                            newestGreatGrandfatherBrother?.id
                                                    );
                                                otherGreatGrandfatherBrothers.sort(
                                                    (a, b) => a.id - b.id
                                                );

                                                const allGreatGrandfatherSisters =
                                                    [
                                                        ...directGreatGrandfatherSisters,
                                                        ...siblingsOfGreatGrandfatherSiblingsSisters,
                                                    ];

                                                const newestGreatGrandfatherSister =
                                                    allGreatGrandfatherSisters.length >
                                                    0
                                                        ? allGreatGrandfatherSisters.reduce(
                                                              (max, sister) =>
                                                                  sister.id >
                                                                  max.id
                                                                      ? sister
                                                                      : max
                                                          )
                                                        : null;

                                                const otherGreatGrandfatherSisters =
                                                    allGreatGrandfatherSisters.filter(
                                                        (s) =>
                                                            s.id !==
                                                            newestGreatGrandfatherSister?.id
                                                    );
                                                otherGreatGrandfatherSisters.sort(
                                                    (a, b) => a.id - b.id
                                                );

                                                const sortedGreatGrandfatherSiblings =
                                                    [
                                                        ...otherGreatGrandfatherBrothers,
                                                        ...otherGreatGrandfatherSisters,
                                                    ];

                                                if (
                                                    newestGreatGrandfatherBrother
                                                ) {
                                                    sortedGreatGrandfatherSiblings.push(
                                                        newestGreatGrandfatherBrother
                                                    );
                                                }

                                                if (
                                                    newestGreatGrandfatherSister
                                                ) {
                                                    sortedGreatGrandfatherSiblings.push(
                                                        newestGreatGrandfatherSister
                                                    );
                                                }

                                                const greatGrandfatherCardX =
                                                    -greatGrandparentCardWidth /
                                                        2 -
                                                    greatGrandparentSpacing / 2;
                                                const greatGrandmotherCardX =
                                                    greatGrandparentCardWidth /
                                                        2 +
                                                    greatGrandparentSpacing / 2;
                                                const greatGrandfatherSiblingSpacing = 200;
                                                const greatGrandfatherPartnerCloseSpacing = 150;
                                                const startGreatGrandfatherSiblingX =
                                                    greatGrandmother
                                                        ? greatGrandmotherCardX +
                                                          greatGrandparentCardWidth /
                                                              2 +
                                                          greatGrandfatherSiblingSpacing
                                                        : greatGrandfatherCardX +
                                                          greatGrandparentCardWidth /
                                                              2 +
                                                          greatGrandfatherSiblingSpacing;

                                                let greatGrandfatherCumulativeX = 0;

                                                sortedGreatGrandfatherSiblings.forEach(
                                                    (sibling) => {
                                                        const siblingX =
                                                            startGreatGrandfatherSiblingX +
                                                            greatGrandfatherCumulativeX;
                                                        const siblingY =
                                                            greatGrandparentCardY;

                                                        const siblingGroup =
                                                            node
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "parent-sibling-card"
                                                                )
                                                                .attr(
                                                                    "data-person-id",
                                                                    sibling.id
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${siblingX}, ${siblingY})`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                sibling.id,
                                                                                sibling
                                                                            );
                                                                        }
                                                                    }
                                                                );

                                                        const borderColor =
                                                            sibling.gender ===
                                                            "female"
                                                                ? "#ffb6c1"
                                                                : "#add8e6";
                                                        siblingGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -greatGrandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGrandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                greatGrandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGrandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                borderColor
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            )
                                                            .style(
                                                                "filter",
                                                                "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                            );

                                                        const siblingIcon =
                                                            siblingGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            siblingIcon,
                                                            sibling,
                                                            svg
                                                        );

                                                        let siblingName =
                                                            sibling.name;
                                                        if (!siblingName) {
                                                            siblingName =
                                                                sibling.first_name ||
                                                                "";
                                                            if (
                                                                sibling.last_name
                                                            ) {
                                                                siblingName +=
                                                                    " " +
                                                                    sibling.last_name;
                                                            }
                                                            if (!siblingName) {
                                                                siblingName =
                                                                    "Unknown";
                                                            }
                                                        }
                                                        siblingGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                siblingName.length >
                                                                    15
                                                                    ? siblingName.substring(
                                                                          0,
                                                                          25
                                                                      ) + "..."
                                                                    : siblingName
                                                            );

                                                        siblingGroup
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 32)
                                                            .attr("r", 10)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        sibling
                                                                    );
                                                                }
                                                            );
                                                        siblingGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 36)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "16px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "bold"
                                                            )
                                                            .text("+")
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        sibling
                                                                    );
                                                                }
                                                            );

                                                        addEditDeleteIcons(
                                                            siblingGroup,
                                                            sibling.id,
                                                            siblingName
                                                        );

                                                        const siblingChildren =
                                                            treeData.filter(
                                                                (p) => {
                                                                    if (
                                                                        !p.parents ||
                                                                        p
                                                                            .parents
                                                                            .length ===
                                                                            0
                                                                    )
                                                                        return false;
                                                                    return p.parents.includes(
                                                                        sibling.id
                                                                    );
                                                                }
                                                            );

                                                        let siblingPartnerId =
                                                            null;
                                                        if (
                                                            sibling.spouses &&
                                                            sibling.spouses
                                                                .length > 0
                                                        ) {
                                                            siblingPartnerId =
                                                                sibling
                                                                    .spouses[0];
                                                            const partnerChildren =
                                                                treeData.filter(
                                                                    (p) => {
                                                                        if (
                                                                            !p.parents ||
                                                                            p
                                                                                .parents
                                                                                .length ===
                                                                                0
                                                                        )
                                                                            return false;
                                                                        return p.parents.includes(
                                                                            siblingPartnerId
                                                                        );
                                                                    }
                                                                );
                                                            partnerChildren.forEach(
                                                                (child) => {
                                                                    if (
                                                                        !siblingChildren.find(
                                                                            (
                                                                                c
                                                                            ) =>
                                                                                c.id ===
                                                                                child.id
                                                                        )
                                                                    ) {
                                                                        if (
                                                                            child.parents.includes(
                                                                                sibling.id
                                                                            ) &&
                                                                            child.parents.includes(
                                                                                siblingPartnerId
                                                                            )
                                                                        ) {
                                                                            siblingChildren.push(
                                                                                child
                                                                            );
                                                                        }
                                                                    }
                                                                }
                                                            );
                                                        }

                                                        if (
                                                            siblingChildren.length >
                                                            0
                                                        ) {
                                                            const childCardY =
                                                                siblingY +
                                                                greatGrandparentCardHeight +
                                                                100;
                                                            const childCardSpacing = 200;

                                                            let partnerX = null;
                                                            if (
                                                                siblingPartnerId
                                                            ) {
                                                                partnerX =
                                                                    siblingX +
                                                                    greatGrandparentCardWidth +
                                                                    greatGrandfatherPartnerCloseSpacing;
                                                            }

                                                            const parentMidX =
                                                                partnerX
                                                                    ? (siblingX +
                                                                          partnerX) /
                                                                      2
                                                                    : siblingX;

                                                            const totalChildWidth =
                                                                siblingChildren.length *
                                                                    (greatGrandparentCardWidth +
                                                                        childCardSpacing) -
                                                                childCardSpacing;
                                                            const startChildX =
                                                                parentMidX -
                                                                totalChildWidth /
                                                                    2 +
                                                                greatGrandparentCardWidth /
                                                                    2;

                                                            const parentLineY =
                                                                siblingY +
                                                                greatGrandparentCardHeight /
                                                                    2;
                                                            const childLevelY =
                                                                childCardY -
                                                                greatGrandparentCardHeight /
                                                                    2;

                                                            if (
                                                                siblingPartnerId &&
                                                                partnerX
                                                            ) {
                                                                node.append(
                                                                    "line"
                                                                )
                                                                    .attr(
                                                                        "class",
                                                                        "parent-child-link"
                                                                    )
                                                                    .attr(
                                                                        "x1",
                                                                        siblingX
                                                                    )
                                                                    .attr(
                                                                        "y1",
                                                                        parentLineY
                                                                    )
                                                                    .attr(
                                                                        "x2",
                                                                        partnerX
                                                                    )
                                                                    .attr(
                                                                        "y2",
                                                                        parentLineY
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#999"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        2
                                                                    )
                                                                    .style(
                                                                        "pointer-events",
                                                                        "none"
                                                                    );

                                                                node.append(
                                                                    "line"
                                                                )
                                                                    .attr(
                                                                        "class",
                                                                        "parent-child-link"
                                                                    )
                                                                    .attr(
                                                                        "x1",
                                                                        parentMidX
                                                                    )
                                                                    .attr(
                                                                        "y1",
                                                                        parentLineY
                                                                    )
                                                                    .attr(
                                                                        "x2",
                                                                        parentMidX
                                                                    )
                                                                    .attr(
                                                                        "y2",
                                                                        childLevelY
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#999"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        2
                                                                    )
                                                                    .style(
                                                                        "pointer-events",
                                                                        "none"
                                                                    );

                                                                if (
                                                                    siblingChildren.length >
                                                                    1
                                                                ) {
                                                                    const minChildX =
                                                                        Math.min(
                                                                            ...siblingChildren.map(
                                                                                (
                                                                                    _,
                                                                                    idx
                                                                                ) =>
                                                                                    startChildX +
                                                                                    idx *
                                                                                        (greatGrandparentCardWidth +
                                                                                            childCardSpacing)
                                                                            )
                                                                        );
                                                                    const maxChildX =
                                                                        Math.max(
                                                                            ...siblingChildren.map(
                                                                                (
                                                                                    _,
                                                                                    idx
                                                                                ) =>
                                                                                    startChildX +
                                                                                    idx *
                                                                                        (greatGrandparentCardWidth +
                                                                                            childCardSpacing)
                                                                            )
                                                                        );

                                                                    node.append(
                                                                        "line"
                                                                    )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-child-link"
                                                                        )
                                                                        .attr(
                                                                            "x1",
                                                                            minChildX
                                                                        )
                                                                        .attr(
                                                                            "y1",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "x2",
                                                                            maxChildX
                                                                        )
                                                                        .attr(
                                                                            "y2",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "stroke",
                                                                            "#999"
                                                                        )
                                                                        .attr(
                                                                            "stroke-width",
                                                                            2
                                                                        )
                                                                        .style(
                                                                            "pointer-events",
                                                                            "none"
                                                                        );

                                                                    siblingChildren.forEach(
                                                                        (
                                                                            child,
                                                                            childIndex
                                                                        ) => {
                                                                            const childX =
                                                                                startChildX +
                                                                                childIndex *
                                                                                    (greatGrandparentCardWidth +
                                                                                        childCardSpacing);
                                                                            node.append(
                                                                                "line"
                                                                            )
                                                                                .attr(
                                                                                    "class",
                                                                                    "parent-child-link"
                                                                                )
                                                                                .attr(
                                                                                    "x1",
                                                                                    childX
                                                                                )
                                                                                .attr(
                                                                                    "y1",
                                                                                    childLevelY
                                                                                )
                                                                                .attr(
                                                                                    "x2",
                                                                                    childX
                                                                                )
                                                                                .attr(
                                                                                    "y2",
                                                                                    childCardY -
                                                                                        greatGrandparentCardHeight /
                                                                                            2
                                                                                )
                                                                                .attr(
                                                                                    "stroke",
                                                                                    "#999"
                                                                                )
                                                                                .attr(
                                                                                    "stroke-width",
                                                                                    2
                                                                                )
                                                                                .style(
                                                                                    "pointer-events",
                                                                                    "none"
                                                                                );
                                                                        }
                                                                    );
                                                                } else {
                                                                    const childX =
                                                                        startChildX;
                                                                    node.append(
                                                                        "line"
                                                                    )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-child-link"
                                                                        )
                                                                        .attr(
                                                                            "x1",
                                                                            parentMidX
                                                                        )
                                                                        .attr(
                                                                            "y1",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "x2",
                                                                            childX
                                                                        )
                                                                        .attr(
                                                                            "y2",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "stroke",
                                                                            "#999"
                                                                        )
                                                                        .attr(
                                                                            "stroke-width",
                                                                            2
                                                                        )
                                                                        .style(
                                                                            "pointer-events",
                                                                            "none"
                                                                        );

                                                                    node.append(
                                                                        "line"
                                                                    )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-child-link"
                                                                        )
                                                                        .attr(
                                                                            "x1",
                                                                            childX
                                                                        )
                                                                        .attr(
                                                                            "y1",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "x2",
                                                                            childX
                                                                        )
                                                                        .attr(
                                                                            "y2",
                                                                            childCardY -
                                                                                greatGrandparentCardHeight /
                                                                                    2
                                                                        )
                                                                        .attr(
                                                                            "stroke",
                                                                            "#999"
                                                                        )
                                                                        .attr(
                                                                            "stroke-width",
                                                                            2
                                                                        )
                                                                        .style(
                                                                            "pointer-events",
                                                                            "none"
                                                                        );
                                                                }
                                                            } else {
                                                                node.append(
                                                                    "line"
                                                                )
                                                                    .attr(
                                                                        "class",
                                                                        "parent-child-link"
                                                                    )
                                                                    .attr(
                                                                        "x1",
                                                                        siblingX
                                                                    )
                                                                    .attr(
                                                                        "y1",
                                                                        parentLineY
                                                                    )
                                                                    .attr(
                                                                        "x2",
                                                                        siblingX
                                                                    )
                                                                    .attr(
                                                                        "y2",
                                                                        childLevelY
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#999"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        2
                                                                    )
                                                                    .style(
                                                                        "pointer-events",
                                                                        "none"
                                                                    );

                                                                if (
                                                                    siblingChildren.length >
                                                                    1
                                                                ) {
                                                                    const minChildX =
                                                                        Math.min(
                                                                            ...siblingChildren.map(
                                                                                (
                                                                                    _,
                                                                                    idx
                                                                                ) =>
                                                                                    startChildX +
                                                                                    idx *
                                                                                        (greatGrandparentCardWidth +
                                                                                            childCardSpacing)
                                                                            )
                                                                        );
                                                                    const maxChildX =
                                                                        Math.max(
                                                                            ...siblingChildren.map(
                                                                                (
                                                                                    _,
                                                                                    idx
                                                                                ) =>
                                                                                    startChildX +
                                                                                    idx *
                                                                                        (greatGrandparentCardWidth +
                                                                                            childCardSpacing)
                                                                            )
                                                                        );

                                                                    node.append(
                                                                        "line"
                                                                    )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-child-link"
                                                                        )
                                                                        .attr(
                                                                            "x1",
                                                                            minChildX
                                                                        )
                                                                        .attr(
                                                                            "y1",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "x2",
                                                                            maxChildX
                                                                        )
                                                                        .attr(
                                                                            "y2",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "stroke",
                                                                            "#999"
                                                                        )
                                                                        .attr(
                                                                            "stroke-width",
                                                                            2
                                                                        )
                                                                        .style(
                                                                            "pointer-events",
                                                                            "none"
                                                                        );

                                                                    siblingChildren.forEach(
                                                                        (
                                                                            child,
                                                                            childIndex
                                                                        ) => {
                                                                            const childX =
                                                                                startChildX +
                                                                                childIndex *
                                                                                    (greatGrandparentCardWidth +
                                                                                        childCardSpacing);
                                                                            node.append(
                                                                                "line"
                                                                            )
                                                                                .attr(
                                                                                    "class",
                                                                                    "parent-child-link"
                                                                                )
                                                                                .attr(
                                                                                    "x1",
                                                                                    childX
                                                                                )
                                                                                .attr(
                                                                                    "y1",
                                                                                    childLevelY
                                                                                )
                                                                                .attr(
                                                                                    "x2",
                                                                                    childX
                                                                                )
                                                                                .attr(
                                                                                    "y2",
                                                                                    childCardY -
                                                                                        greatGrandparentCardHeight /
                                                                                            2
                                                                                )
                                                                                .attr(
                                                                                    "stroke",
                                                                                    "#999"
                                                                                )
                                                                                .attr(
                                                                                    "stroke-width",
                                                                                    2
                                                                                )
                                                                                .style(
                                                                                    "pointer-events",
                                                                                    "none"
                                                                                );
                                                                        }
                                                                    );
                                                                } else {
                                                                    const childX =
                                                                        startChildX;
                                                                    node.append(
                                                                        "line"
                                                                    )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-child-link"
                                                                        )
                                                                        .attr(
                                                                            "x1",
                                                                            siblingX
                                                                        )
                                                                        .attr(
                                                                            "y1",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "x2",
                                                                            childX
                                                                        )
                                                                        .attr(
                                                                            "y2",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "stroke",
                                                                            "#999"
                                                                        )
                                                                        .attr(
                                                                            "stroke-width",
                                                                            2
                                                                        )
                                                                        .style(
                                                                            "pointer-events",
                                                                            "none"
                                                                        );

                                                                    node.append(
                                                                        "line"
                                                                    )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-child-link"
                                                                        )
                                                                        .attr(
                                                                            "x1",
                                                                            childX
                                                                        )
                                                                        .attr(
                                                                            "y1",
                                                                            childLevelY
                                                                        )
                                                                        .attr(
                                                                            "x2",
                                                                            childX
                                                                        )
                                                                        .attr(
                                                                            "y2",
                                                                            childCardY -
                                                                                greatGrandparentCardHeight /
                                                                                    2
                                                                        )
                                                                        .attr(
                                                                            "stroke",
                                                                            "#999"
                                                                        )
                                                                        .attr(
                                                                            "stroke-width",
                                                                            2
                                                                        )
                                                                        .style(
                                                                            "pointer-events",
                                                                            "none"
                                                                        );
                                                                }
                                                            }

                                                            siblingChildren.forEach(
                                                                (
                                                                    child,
                                                                    childIndex
                                                                ) => {
                                                                    const childX =
                                                                        startChildX +
                                                                        childIndex *
                                                                            (greatGrandparentCardWidth +
                                                                                childCardSpacing);

                                                                    const childGroup =
                                                                        node
                                                                            .append(
                                                                                "g"
                                                                            )
                                                                            .attr(
                                                                                "class",
                                                                                "sibling-child-card"
                                                                            )
                                                                            .attr(
                                                                                "data-person-id",
                                                                                child.id
                                                                            )
                                                                            .attr(
                                                                                "transform",
                                                                                `translate(${childX}, ${childCardY})`
                                                                            )
                                                                            .on(
                                                                                "click",
                                                                                function (
                                                                                    event
                                                                                ) {
                                                                                    event.stopPropagation();
                                                                                    if (
                                                                                        typeof window.openProfileSidebar ===
                                                                                        "function"
                                                                                    ) {
                                                                                        window.openProfileSidebar(
                                                                                            child.id,
                                                                                            child
                                                                                        );
                                                                                    }
                                                                                }
                                                                            );

                                                                    const childBorderColor =
                                                                        child.gender ===
                                                                        "female"
                                                                            ? "#ffb6c1"
                                                                            : "#add8e6";
                                                                    childGroup
                                                                        .append(
                                                                            "rect"
                                                                        )
                                                                        .attr(
                                                                            "x",
                                                                            -greatGrandparentCardWidth /
                                                                                2
                                                                        )
                                                                        .attr(
                                                                            "y",
                                                                            -greatGrandparentCardHeight /
                                                                                2
                                                                        )
                                                                        .attr(
                                                                            "width",
                                                                            greatGrandparentCardWidth
                                                                        )
                                                                        .attr(
                                                                            "height",
                                                                            greatGrandparentCardHeight
                                                                        )
                                                                        .attr(
                                                                            "rx",
                                                                            8
                                                                        )
                                                                        .attr(
                                                                            "ry",
                                                                            8
                                                                        )
                                                                        .attr(
                                                                            "fill",
                                                                            "white"
                                                                        )
                                                                        .attr(
                                                                            "stroke",
                                                                            childBorderColor
                                                                        )
                                                                        .attr(
                                                                            "stroke-width",
                                                                            3
                                                                        )
                                                                        .style(
                                                                            "filter",
                                                                            "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                                        );

                                                                    const childIcon =
                                                                        childGroup
                                                                            .append(
                                                                                "g"
                                                                            )
                                                                            .attr(
                                                                                "transform",
                                                                                "translate(0, -20)"
                                                                            );
                                                                    renderAvatar(
                                                                        childIcon,
                                                                        child,
                                                                        svg
                                                                    );

                                                                    let childName =
                                                                        child.name;
                                                                    if (
                                                                        !childName
                                                                    ) {
                                                                        childName =
                                                                            child.first_name ||
                                                                            "";
                                                                        if (
                                                                            child.last_name
                                                                        ) {
                                                                            childName +=
                                                                                " " +
                                                                                child.last_name;
                                                                        }
                                                                        if (
                                                                            !childName
                                                                        ) {
                                                                            childName =
                                                                                "Unknown";
                                                                        }
                                                                    }
                                                                    childGroup
                                                                        .append(
                                                                            "text"
                                                                        )
                                                                        .attr(
                                                                            "x",
                                                                            0
                                                                        )
                                                                        .attr(
                                                                            "y",
                                                                            20
                                                                        )
                                                                        .attr(
                                                                            "text-anchor",
                                                                            "middle"
                                                                        )
                                                                        .attr(
                                                                            "font-size",
                                                                            "12px"
                                                                        )
                                                                        .attr(
                                                                            "fill",
                                                                            "#333"
                                                                        )
                                                                        .text(
                                                                            childName.length >
                                                                                15
                                                                                ? childName.substring(
                                                                                      0,
                                                                                      25
                                                                                  ) +
                                                                                      "..."
                                                                                : childName
                                                                        );

                                                                    childGroup
                                                                        .append(
                                                                            "circle"
                                                                        )
                                                                        .attr(
                                                                            "cx",
                                                                            0
                                                                        )
                                                                        .attr(
                                                                            "cy",
                                                                            32
                                                                        )
                                                                        .attr(
                                                                            "r",
                                                                            10
                                                                        )
                                                                        .attr(
                                                                            "fill",
                                                                            "white"
                                                                        )
                                                                        .attr(
                                                                            "stroke",
                                                                            "#999"
                                                                        )
                                                                        .attr(
                                                                            "stroke-width",
                                                                            1
                                                                        )
                                                                        .style(
                                                                            "cursor",
                                                                            "pointer"
                                                                        )
                                                                        .on(
                                                                            "click",
                                                                            function (
                                                                                event
                                                                            ) {
                                                                                event.stopPropagation();
                                                                                openBranchBuilder(
                                                                                    child
                                                                                );
                                                                            }
                                                                        );
                                                                    childGroup
                                                                        .append(
                                                                            "text"
                                                                        )
                                                                        .attr(
                                                                            "x",
                                                                            0
                                                                        )
                                                                        .attr(
                                                                            "y",
                                                                            36
                                                                        )
                                                                        .attr(
                                                                            "text-anchor",
                                                                            "middle"
                                                                        )
                                                                        .attr(
                                                                            "font-size",
                                                                            "16px"
                                                                        )
                                                                        .attr(
                                                                            "font-weight",
                                                                            "bold"
                                                                        )
                                                                        .text(
                                                                            "+"
                                                                        )
                                                                        .style(
                                                                            "cursor",
                                                                            "pointer"
                                                                        )
                                                                        .on(
                                                                            "click",
                                                                            function (
                                                                                event
                                                                            ) {
                                                                                event.stopPropagation();
                                                                                openBranchBuilder(
                                                                                    child
                                                                                );
                                                                            }
                                                                        );

                                                                    addEditDeleteIcons(
                                                                        childGroup,
                                                                        child.id,
                                                                        childName
                                                                    );
                                                                }
                                                            );
                                                        }

                                                        if (
                                                            sibling.spouses &&
                                                            sibling.spouses
                                                                .length > 0
                                                        ) {
                                                            const partnerId =
                                                                sibling
                                                                    .spouses[0];
                                                            const partnerData =
                                                                treeData.find(
                                                                    (p) =>
                                                                        p.id ===
                                                                        partnerId
                                                                );

                                                            if (partnerData) {
                                                                const partnerX =
                                                                    siblingX +
                                                                    greatGrandparentCardWidth +
                                                                    greatGrandfatherPartnerCloseSpacing;
                                                                const partnerY =
                                                                    siblingY;

                                                                const partnerGroup =
                                                                    node
                                                                        .append(
                                                                            "g"
                                                                        )
                                                                        .attr(
                                                                            "class",
                                                                            "sibling-partner-card"
                                                                        )
                                                                        .attr(
                                                                            "transform",
                                                                            `translate(${partnerX}, ${partnerY})`
                                                                        )
                                                                        .on(
                                                                            "click",
                                                                            function (
                                                                                event
                                                                            ) {
                                                                                event.stopPropagation();
                                                                                if (
                                                                                    typeof window.openProfileSidebar ===
                                                                                    "function"
                                                                                ) {
                                                                                    window.openProfileSidebar(
                                                                                        partnerData.id,
                                                                                        partnerData
                                                                                    );
                                                                                }
                                                                            }
                                                                        );

                                                                const partnerBorderColor =
                                                                    partnerData.gender ===
                                                                    "female"
                                                                        ? "#ffb6c1"
                                                                        : "#add8e6";
                                                                partnerGroup
                                                                    .append(
                                                                        "rect"
                                                                    )
                                                                    .attr(
                                                                        "x",
                                                                        -greatGrandparentCardWidth /
                                                                            2
                                                                    )
                                                                    .attr(
                                                                        "y",
                                                                        -greatGrandparentCardHeight /
                                                                            2
                                                                    )
                                                                    .attr(
                                                                        "width",
                                                                        greatGrandparentCardWidth
                                                                    )
                                                                    .attr(
                                                                        "height",
                                                                        greatGrandparentCardHeight
                                                                    )
                                                                    .attr(
                                                                        "rx",
                                                                        8
                                                                    )
                                                                    .attr(
                                                                        "ry",
                                                                        8
                                                                    )
                                                                    .attr(
                                                                        "fill",
                                                                        "white"
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        partnerBorderColor
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        3
                                                                    )
                                                                    .style(
                                                                        "filter",
                                                                        "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                                    );

                                                                const partnerIcon =
                                                                    partnerGroup
                                                                        .append(
                                                                            "g"
                                                                        )
                                                                        .attr(
                                                                            "transform",
                                                                            "translate(0, -20)"
                                                                        );
                                                                renderAvatar(
                                                                    partnerIcon,
                                                                    partnerData,
                                                                    svg
                                                                );

                                                                let partnerName =
                                                                    partnerData.name;
                                                                if (
                                                                    !partnerName
                                                                ) {
                                                                    partnerName =
                                                                        partnerData.first_name ||
                                                                        "";
                                                                    if (
                                                                        partnerData.last_name
                                                                    ) {
                                                                        partnerName +=
                                                                            " " +
                                                                            partnerData.last_name;
                                                                    }
                                                                    if (
                                                                        !partnerName
                                                                    ) {
                                                                        partnerName =
                                                                            "Unknown";
                                                                    }
                                                                }
                                                                partnerGroup
                                                                    .append(
                                                                        "text"
                                                                    )
                                                                    .attr(
                                                                        "x",
                                                                        0
                                                                    )
                                                                    .attr(
                                                                        "y",
                                                                        20
                                                                    )
                                                                    .attr(
                                                                        "text-anchor",
                                                                        "middle"
                                                                    )
                                                                    .attr(
                                                                        "font-size",
                                                                        "12px"
                                                                    )
                                                                    .attr(
                                                                        "fill",
                                                                        "#333"
                                                                    )
                                                                    .text(
                                                                        partnerName.length >
                                                                            15
                                                                            ? partnerName.substring(
                                                                                  0,
                                                                                  25
                                                                              ) +
                                                                                  "..."
                                                                            : partnerName
                                                                    );

                                                                partnerGroup
                                                                    .append(
                                                                        "circle"
                                                                    )
                                                                    .attr(
                                                                        "cx",
                                                                        0
                                                                    )
                                                                    .attr(
                                                                        "cy",
                                                                        32
                                                                    )
                                                                    .attr(
                                                                        "r",
                                                                        10
                                                                    )
                                                                    .attr(
                                                                        "fill",
                                                                        "white"
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#999"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        1
                                                                    )
                                                                    .style(
                                                                        "cursor",
                                                                        "pointer"
                                                                    )
                                                                    .on(
                                                                        "click",
                                                                        function (
                                                                            event
                                                                        ) {
                                                                            event.stopPropagation();
                                                                            openBranchBuilder(
                                                                                partnerData
                                                                            );
                                                                        }
                                                                    );
                                                                partnerGroup
                                                                    .append(
                                                                        "text"
                                                                    )
                                                                    .attr(
                                                                        "x",
                                                                        0
                                                                    )
                                                                    .attr(
                                                                        "y",
                                                                        36
                                                                    )
                                                                    .attr(
                                                                        "text-anchor",
                                                                        "middle"
                                                                    )
                                                                    .attr(
                                                                        "font-size",
                                                                        "16px"
                                                                    )
                                                                    .attr(
                                                                        "font-weight",
                                                                        "bold"
                                                                    )
                                                                    .text("+")
                                                                    .style(
                                                                        "cursor",
                                                                        "pointer"
                                                                    )
                                                                    .on(
                                                                        "click",
                                                                        function (
                                                                            event
                                                                        ) {
                                                                            event.stopPropagation();
                                                                            openBranchBuilder(
                                                                                partnerData
                                                                            );
                                                                        }
                                                                    );

                                                                addEditDeleteIcons(
                                                                    partnerGroup,
                                                                    partnerData.id,
                                                                    partnerName
                                                                );

                                                                partnerGroup
                                                                    .append(
                                                                        "line"
                                                                    )
                                                                    .attr(
                                                                        "x1",
                                                                        -greatGrandparentCardWidth /
                                                                            2
                                                                    )
                                                                    .attr(
                                                                        "y1",
                                                                        0
                                                                    )
                                                                    .attr(
                                                                        "x2",
                                                                        -greatGrandparentCardWidth /
                                                                            2 -
                                                                            greatGrandfatherPartnerCloseSpacing
                                                                    )
                                                                    .attr(
                                                                        "y2",
                                                                        0
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#999"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        2
                                                                    );

                                                                greatGrandfatherCumulativeX +=
                                                                    greatGrandparentCardWidth +
                                                                    greatGrandfatherPartnerCloseSpacing +
                                                                    greatGrandparentCardWidth;
                                                            }
                                                        } else {
                                                            greatGrandfatherCumulativeX +=
                                                                greatGrandparentCardWidth +
                                                                greatGrandfatherSiblingSpacing;
                                                        }
                                                    }
                                                );

                                                // Check if great-grandfather has parents - show cards if they exist, otherwise show "Add father" and "Add mother" buttons
                                                // Always show "Add" buttons when the card is visible, regardless of whether parents exist
                                                const greatGrandfatherParents =
                                                    greatGrandfather.parents ||
                                                    [];
                                                const visibleGreatGrandfatherParents =
                                                    greatGrandfatherParents.filter(
                                                        (pId) =>
                                                            !window.hiddenAncestorIds ||
                                                            !window.hiddenAncestorIds.has(
                                                                pId
                                                            )
                                                    );
                                                // Check actual parents (not filtered) to determine if buttons should show
                                                const greatGrandfatherHasActualParents =
                                                    greatGrandfatherParents &&
                                                    greatGrandfatherParents.length >
                                                        0;
                                                const greatGrandfatherHasParents =
                                                    visibleGreatGrandfatherParents &&
                                                    visibleGreatGrandfatherParents.length >
                                                        0;
                                                const areGreatGrandfatherAncestorsHidden =
                                                    areAncestorsHidden(
                                                        greatGrandfather.id
                                                    );

                                                // Show parent cards if they exist and ancestors are not hidden
                                                if (
                                                    greatGrandfatherHasParents &&
                                                    !areGreatGrandfatherAncestorsHidden
                                                ) {
                                                    // Show great-great-grandparent cards above great-grandfather card
                                                    const greatGreatGrandparentData =
                                                        visibleGreatGrandfatherParents
                                                            .map((parentId) =>
                                                                treeData.find(
                                                                    (p) =>
                                                                        p.id ===
                                                                        parentId
                                                                )
                                                            )
                                                            .filter((p) => p);
                                                    const greatGreatGrandfather =
                                                        greatGreatGrandparentData.find(
                                                            (p) =>
                                                                p.gender ===
                                                                "male"
                                                        );
                                                    const greatGreatGrandmother =
                                                        greatGreatGrandparentData.find(
                                                            (p) =>
                                                                p.gender ===
                                                                "female"
                                                        );

                                                    const greatGreatGrandparentCardY =
                                                        greatGrandparentCardY -
                                                        150;
                                                    const greatGreatGrandparentCardWidth = 120;
                                                    const greatGreatGrandparentCardHeight = 80;
                                                    const greatGreatGrandparentSpacing = 100; // Reduced spacing for great-great-grandparents on father's side

                                                    // Show great-great-grandfather card (left)
                                                    if (greatGreatGrandfather) {
                                                        const greatGreatGrandfatherGroup =
                                                            greatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "parent-card"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        -greatGreatGrandparentCardWidth /
                                                                            2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandfather.id,
                                                                                greatGreatGrandfather
                                                                            );
                                                                        } else {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandfather.id,
                                                                                    greatGreatGrandfather
                                                                                );
                                                                            }
                                                                        }
                                                                    }
                                                                );

                                                        greatGreatGrandfatherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#add8e6"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            );

                                                        const greatGreatGrandfatherIcon =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            greatGreatGrandfatherIcon,
                                                            greatGreatGrandfather,
                                                            svg
                                                        );

                                                        let greatGreatGrandfatherName =
                                                            greatGreatGrandfather.name ||
                                                            greatGreatGrandfather.first_name ||
                                                            "";
                                                        if (
                                                            greatGreatGrandfather.last_name
                                                        )
                                                            greatGreatGrandfatherName +=
                                                                " " +
                                                                greatGreatGrandfather.last_name;
                                                        if (
                                                            !greatGreatGrandfatherName
                                                        )
                                                            greatGreatGrandfatherName =
                                                                "Unknown";

                                                        greatGreatGrandfatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                greatGreatGrandfatherName.length >
                                                                    15
                                                                    ? greatGreatGrandfatherName.substring(
                                                                          0,
                                                                          15
                                                                      ) + "..."
                                                                    : greatGreatGrandfatherName
                                                            );

                                                        // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                        const greatGreatGrandfatherIcons =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, 35)"
                                                                );
                                                        greatGreatGrandfatherIcons
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#28a745"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandfather
                                                                    );
                                                                }
                                                            );
                                                        greatGreatGrandfatherIcons
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 4)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#28a745"
                                                            )
                                                            .text("+");

                                                        // Add edit and delete icons automatically
                                                        addEditDeleteIcons(
                                                            greatGreatGrandfatherGroup,
                                                            greatGreatGrandfather.id,
                                                            greatGreatGrandfatherName
                                                        );
                                                    }

                                                    // Show great-great-grandmother card (right)
                                                    if (greatGreatGrandmother) {
                                                        const greatGreatGrandmotherGroup =
                                                            greatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "parent-card"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        greatGreatGrandparentCardWidth /
                                                                            2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandmother.id,
                                                                                greatGreatGrandmother
                                                                            );
                                                                        } else {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandmother.id,
                                                                                    greatGreatGrandmother
                                                                                );
                                                                            }
                                                                        }
                                                                    }
                                                                );

                                                        greatGreatGrandmotherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#ffb6c1"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            );

                                                        const greatGreatGrandmotherIcon =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            greatGreatGrandmotherIcon,
                                                            greatGreatGrandmother,
                                                            svg
                                                        );

                                                        let greatGreatGrandmotherName =
                                                            greatGreatGrandmother.name ||
                                                            greatGreatGrandmother.first_name ||
                                                            "";
                                                        if (
                                                            greatGreatGrandmother.last_name
                                                        )
                                                            greatGreatGrandmotherName +=
                                                                " " +
                                                                greatGreatGrandmother.last_name;
                                                        if (
                                                            !greatGreatGrandmotherName
                                                        )
                                                            greatGreatGrandmotherName =
                                                                "Unknown";

                                                        greatGreatGrandmotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                greatGreatGrandmotherName.length >
                                                                    15
                                                                    ? greatGreatGrandmotherName.substring(
                                                                          0,
                                                                          15
                                                                      ) + "..."
                                                                    : greatGreatGrandmotherName
                                                            );

                                                        // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                        const greatGreatGrandmotherIcons =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, 35)"
                                                                );
                                                        greatGreatGrandmotherIcons
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#28a745"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandmother
                                                                    );
                                                                }
                                                            );
                                                        greatGreatGrandmotherIcons
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 4)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#28a745"
                                                            )
                                                            .text("+");

                                                        // Add edit and delete icons automatically
                                                        addEditDeleteIcons(
                                                            greatGreatGrandmotherGroup,
                                                            greatGreatGrandmother.id,
                                                            greatGreatGrandmotherName
                                                        );
                                                    }

                                                    // Add lines from top center of great-grandfather card, branching to great-great-grandparent cards
                                                    const greatGreatGrandparentBranchY =
                                                        greatGreatGrandparentCardY -
                                                        greatGrandparentCardY +
                                                        greatGreatGrandparentCardHeight /
                                                            2 +
                                                        10;
                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr("x1", 0)
                                                        .attr(
                                                            "y1",
                                                            -greatGrandparentCardHeight /
                                                                2
                                                        )
                                                        .attr("x2", 0)
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentBranchY
                                                        );

                                                    if (
                                                        greatGreatGrandfather ||
                                                        greatGreatGrandmother
                                                    ) {
                                                        const leftX =
                                                            greatGreatGrandfather
                                                                ? -greatGreatGrandparentCardWidth /
                                                                      2 -
                                                                  greatGreatGrandparentSpacing /
                                                                      2
                                                                : 0;
                                                        const rightX =
                                                            greatGreatGrandmother
                                                                ? greatGreatGrandparentCardWidth /
                                                                      2 +
                                                                  greatGreatGrandparentSpacing /
                                                                      2
                                                                : greatGreatGrandfather &&
                                                                  !greatGreatGrandmother
                                                                ? greatGreatGrandparentCardWidth /
                                                                      2 +
                                                                  greatGreatGrandparentSpacing /
                                                                      2
                                                                : 0;
                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "add-parent-line"
                                                            )
                                                            .attr("x1", leftX)
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentBranchY
                                                            )
                                                            .attr("x2", rightX)
                                                            .attr(
                                                                "y2",
                                                                greatGreatGrandparentBranchY
                                                            );

                                                        if (
                                                            greatGreatGrandfather
                                                        ) {
                                                            greatGrandfatherGroup
                                                                .append("line")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-line"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    -greatGreatGrandparentCardWidth /
                                                                        2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    greatGreatGrandparentBranchY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    -greatGreatGrandparentCardWidth /
                                                                        2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY +
                                                                        greatGreatGrandparentCardHeight /
                                                                            2
                                                                );
                                                        }

                                                        if (
                                                            greatGreatGrandmother
                                                        ) {
                                                            greatGrandfatherGroup
                                                                .append("line")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-line"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    greatGreatGrandparentCardWidth /
                                                                        2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    greatGreatGrandparentBranchY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    greatGreatGrandparentCardWidth /
                                                                        2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY +
                                                                        greatGreatGrandparentCardHeight /
                                                                            2
                                                                );
                                                        }
                                                    }

                                                    // If great-great-grandfather exists but great-great-grandmother doesn't, show "Add mother" button
                                                    if (
                                                        greatGreatGrandfather &&
                                                        !greatGreatGrandmother &&
                                                        !areGreatGrandfatherAncestorsHidden
                                                    ) {
                                                        const addGreatGreatGrandmotherButtonY =
                                                            greatGreatGrandparentCardY -
                                                            greatGrandparentCardY;
                                                        const addGreatGreatGrandmotherGroup =
                                                            greatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        greatGreatGrandparentCardWidth /
                                                                            2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${addGreatGreatGrandmotherButtonY})`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        addParentFromNode(
                                                                            greatGrandfather,
                                                                            "mother"
                                                                        );
                                                                    }
                                                                );

                                                        addGreatGreatGrandmotherGroup
                                                            .append("rect")
                                                            .attr("width", 90)
                                                            .attr("height", 60)
                                                            .attr("x", -45)
                                                            .attr("y", -30)
                                                            .attr("rx", 8)
                                                            .attr(
                                                                "stroke",
                                                                "#ddd"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .attr(
                                                                "stroke-dasharray",
                                                                "5,5"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            );

                                                        addGreatGreatGrandmotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", -15)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "28px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "300"
                                                            )
                                                            .text("+");

                                                        addGreatGreatGrandmotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 8)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "11px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "500"
                                                            )
                                                            .text("Add mother");

                                                        const addGreatGreatGrandmotherBranchY =
                                                            greatGreatGrandparentBranchY;
                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "add-parent-line"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandparentCardWidth /
                                                                    2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y1",
                                                                addGreatGreatGrandmotherBranchY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                greatGreatGrandparentCardWidth /
                                                                    2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y2",
                                                                addGreatGreatGrandmotherButtonY +
                                                                    30
                                                            );
                                                    }

                                                    // If great-great-grandmother exists but great-great-grandfather doesn't, show "Add father" button
                                                    if (
                                                        greatGreatGrandmother &&
                                                        !greatGreatGrandfather &&
                                                        !areGreatGrandfatherAncestorsHidden
                                                    ) {
                                                        const addGreatGreatGrandfatherButtonY =
                                                            greatGreatGrandparentCardY -
                                                            greatGrandparentCardY;
                                                        const addGreatGreatGrandfatherGroup =
                                                            greatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        -greatGreatGrandparentCardWidth /
                                                                            2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${addGreatGreatGrandfatherButtonY})`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        addParentFromNode(
                                                                            greatGrandfather,
                                                                            "father"
                                                                        );
                                                                    }
                                                                );

                                                        addGreatGreatGrandfatherGroup
                                                            .append("rect")
                                                            .attr("width", 90)
                                                            .attr("height", 60)
                                                            .attr("x", -45)
                                                            .attr("y", -30)
                                                            .attr("rx", 8)
                                                            .attr(
                                                                "stroke",
                                                                "#ddd"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .attr(
                                                                "stroke-dasharray",
                                                                "5,5"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            );

                                                        addGreatGreatGrandfatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", -15)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "28px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "300"
                                                            )
                                                            .text("+");

                                                        addGreatGreatGrandfatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 8)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "11px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "500"
                                                            )
                                                            .text("Add father");

                                                        const addGreatGreatGrandfatherBranchY =
                                                            greatGreatGrandparentBranchY;
                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "add-parent-line"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y1",
                                                                addGreatGreatGrandfatherBranchY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y2",
                                                                addGreatGreatGrandfatherButtonY +
                                                                    30
                                                            );
                                                    }
                                                }

                                                // Always show "Add father" and "Add mother" buttons when great-grandfather has no visible parents
                                                // This ensures buttons are visible just like on other cards (e.g., great-grandmother)
                                                // Show buttons when there are no visible parents (either no parents at all, or all parents are hidden)
                                                console.log(
                                                    "Great grandfather button check:",
                                                    {
                                                        id: greatGrandfather.id,
                                                        name: greatGrandfatherName,
                                                        hasParents:
                                                            greatGrandfatherHasParents,
                                                        hasActualParents:
                                                            greatGrandfatherHasActualParents,
                                                        parents:
                                                            greatGrandfatherParents,
                                                        visibleParents:
                                                            visibleGreatGrandfatherParents,
                                                    }
                                                );
                                                if (
                                                    !greatGrandfatherHasParents
                                                ) {
                                                    console.log(
                                                        "Creating Add father and Add mother buttons for great grandfather:",
                                                        greatGrandfather.id
                                                    );
                                                    // Show "Add father" and "Add mother" buttons above great-grandfather card
                                                    const greatGreatGrandparentButtonY =
                                                        greatGrandparentCardY -
                                                        150;
                                                    // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                    const greatGreatGrandparentButtonWidth = 100; // Reduced button width to prevent overlap
                                                    const greatGreatGrandparentButtonHeight = 70; // Reduced button height to prevent overlap
                                                    const greatGreatGrandparentSpacing = 30; // Standardized button spacing for all generations

                                                    // Add Father button (left) above great-grandfather card
                                                    const greatGrandfatherParentFatherGroup =
                                                        greatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    -greatGreatGrandparentButtonWidth /
                                                                        2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentButtonY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandfather,
                                                                        "father"
                                                                    );
                                                                }
                                                            );

                                                    greatGrandfatherParentFatherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentButtonWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentButtonHeight
                                                        )
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentButtonHeight /
                                                                2
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    greatGrandfatherParentFatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    greatGrandfatherParentFatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add father");

                                                    // Add Mother button (right) above great-grandfather card
                                                    const greatGrandfatherParentMotherGroup =
                                                        greatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    greatGreatGrandparentButtonWidth /
                                                                        2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentButtonY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandfather,
                                                                        "mother"
                                                                    );
                                                                }
                                                            );

                                                    greatGrandfatherParentMotherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentButtonWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentButtonHeight
                                                        )
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentButtonHeight /
                                                                2
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    greatGrandfatherParentMotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    greatGrandfatherParentMotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add mother");

                                                    // Add lines from top center of great-grandfather card, branching to parent buttons
                                                    const greatGrandfatherParentBranchY =
                                                        greatGreatGrandparentButtonY -
                                                        greatGrandparentCardY +
                                                        greatGreatGrandparentButtonHeight /
                                                            2 +
                                                        10;
                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr("x1", 0)
                                                        .attr(
                                                            "y1",
                                                            -greatGrandparentCardHeight /
                                                                2
                                                        )
                                                        .attr("x2", 0)
                                                        .attr(
                                                            "y2",
                                                            greatGrandfatherParentBranchY
                                                        );

                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandfatherParentBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGrandfatherParentBranchY
                                                        );

                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandfatherParentBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY +
                                                                greatGreatGrandparentButtonHeight /
                                                                    2
                                                        );

                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandfatherParentBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY +
                                                                greatGreatGrandparentButtonHeight /
                                                                    2
                                                        );
                                                }
                                            }

                                            // Show great-grandmother card (right)
                                            if (greatGrandmother) {
                                                console.log(
                                                    "Rendering great-grandmother card:",
                                                    greatGrandmother.first_name ||
                                                        greatGrandmother.name,
                                                    "ID:",
                                                    greatGrandmother.id
                                                );
                                                const greatGrandmotherGroup =
                                                    grandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "parent-card"
                                                        )
                                                        .attr(
                                                            "data-person-id",
                                                            greatGrandmother.id
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                greatGrandparentCardWidth /
                                                                    2 +
                                                                greatGrandparentSpacing /
                                                                    2
                                                            }, ${greatGrandparentCardY})`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                if (
                                                                    typeof window.openProfileSidebar ===
                                                                    "function"
                                                                ) {
                                                                    window.openProfileSidebar(
                                                                        greatGrandmother.id,
                                                                        greatGrandmother
                                                                    );
                                                                } else {
                                                                    event.preventDefault();
                                                                    event.stopPropagation();
                                                                    if (
                                                                        typeof window.openProfileSidebar ===
                                                                        "function"
                                                                    ) {
                                                                        window.openProfileSidebar(
                                                                            greatGrandmother.id,
                                                                            greatGrandmother
                                                                        );
                                                                    }
                                                                }
                                                            }
                                                        );

                                                greatGrandmotherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "x",
                                                        -greatGrandparentCardWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -greatGrandparentCardHeight /
                                                            2
                                                    )
                                                    .attr(
                                                        "width",
                                                        greatGrandparentCardWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        greatGrandparentCardHeight
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("ry", 8)
                                                    .attr("fill", "white")
                                                    .attr("stroke", "#ffb6c1")
                                                    .attr("stroke-width", 3);

                                                const greatGrandmotherIcon =
                                                    greatGrandmotherGroup
                                                        .append("g")
                                                        .attr(
                                                            "transform",
                                                            "translate(0, -20)"
                                                        );
                                                renderAvatar(
                                                    greatGrandmotherIcon,
                                                    greatGrandmother,
                                                    svg
                                                );

                                                let greatGrandmotherName =
                                                    greatGrandmother.name ||
                                                    greatGrandmother.first_name ||
                                                    "";
                                                if (greatGrandmother.last_name)
                                                    greatGrandmotherName +=
                                                        " " +
                                                        greatGrandmother.last_name;
                                                if (!greatGrandmotherName)
                                                    greatGrandmotherName =
                                                        "Unknown";

                                                greatGrandmotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 20)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "12px")
                                                    .attr("fill", "#333")
                                                    .text(
                                                        greatGrandmotherName.length >
                                                            15
                                                            ? greatGrandmotherName.substring(
                                                                  0,
                                                                  15
                                                              ) + "..."
                                                            : greatGrandmotherName
                                                    );

                                                // Add button - black style matching root node
                                                const greatGrandmotherIcons =
                                                    greatGrandmotherGroup
                                                        .append("g")
                                                        .attr(
                                                            "transform",
                                                            "translate(0, 35)"
                                                        )
                                                        .style(
                                                            "cursor",
                                                            "pointer"
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                openBranchBuilder(
                                                                    greatGrandmother
                                                                );
                                                            }
                                                        );
                                                greatGrandmotherIcons
                                                    .append("circle")
                                                    .attr("cx", 0)
                                                    .attr("cy", 0)
                                                    .attr("r", 10)
                                                    .attr("fill", "white")
                                                    .attr("stroke", "#d0d0d0")
                                                    .attr("stroke-width", 1);
                                                greatGrandmotherIcons
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 4)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "16px")
                                                    .attr("font-weight", "bold")
                                                    .attr("fill", "#333")
                                                    .text("+");

                                                // Add toggle hide/show button (eye icon) - top right
                                                const isGreatGrandmotherHidden =
                                                    areAncestorsHidden(
                                                        greatGrandmother.id
                                                    );
                                                const hideGreatGrandmotherButton =
                                                    greatGrandmotherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "hide-branch-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            "translate(45, -35)"
                                                        )
                                                        .style(
                                                            "cursor",
                                                            "pointer"
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                togglePersonBranch(
                                                                    greatGrandmother.id
                                                                );
                                                            }
                                                        );

                                                hideGreatGrandmotherButton
                                                    .append("circle")
                                                    .attr("cx", 0)
                                                    .attr("cy", 0)
                                                    .attr("r", 10)
                                                    .attr(
                                                        "fill",
                                                        isGreatGrandmotherHidden
                                                            ? "#28a745"
                                                            : "#6c757d"
                                                    )
                                                    .attr("stroke", "white")
                                                    .attr("stroke-width", 1);

                                                hideGreatGrandmotherButton
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 3)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "10px")
                                                    .attr("fill", "white")
                                                    .text(
                                                        isGreatGrandmotherHidden
                                                            ? "👁️"
                                                            : "👁️‍🗨️"
                                                    );

                                                hideGreatGrandmotherButton
                                                    .append("title")
                                                    .text(
                                                        isGreatGrandmotherHidden
                                                            ? `Click to show the family branch of ${greatGrandmotherName}`
                                                            : `Click to hide the family branch of ${greatGrandmotherName}`
                                                    );

                                                // Add edit and delete icons automatically
                                                addEditDeleteIcons(
                                                    greatGrandmotherGroup,
                                                    greatGrandmother.id,
                                                    greatGrandmotherName
                                                );

                                                // Check if great-grandmother has parents - show cards if they exist, otherwise show "Add father" and "Add mother" buttons
                                                const greatGrandmotherParents =
                                                    greatGrandmother.parents ||
                                                    [];
                                                const visibleGreatGrandmotherParents =
                                                    greatGrandmotherParents.filter(
                                                        (pId) =>
                                                            !window.hiddenAncestorIds ||
                                                            !window.hiddenAncestorIds.has(
                                                                pId
                                                            )
                                                    );
                                                const greatGrandmotherHasParents =
                                                    visibleGreatGrandmotherParents &&
                                                    visibleGreatGrandmotherParents.length >
                                                        0;
                                                const areGreatGrandmotherAncestorsHidden =
                                                    areAncestorsHidden(
                                                        greatGrandmother.id
                                                    );

                                                if (
                                                    greatGrandmotherHasParents &&
                                                    !areGreatGrandmotherAncestorsHidden
                                                ) {
                                                    // Show great-great-grandparent cards above great-grandmother card
                                                    const greatGreatGrandparentData =
                                                        visibleGreatGrandmotherParents
                                                            .map((parentId) =>
                                                                treeData.find(
                                                                    (p) =>
                                                                        p.id ===
                                                                        parentId
                                                                )
                                                            )
                                                            .filter((p) => p);
                                                    const greatGreatGrandfather =
                                                        greatGreatGrandparentData.find(
                                                            (p) =>
                                                                p.gender ===
                                                                "male"
                                                        );
                                                    const greatGreatGrandmother =
                                                        greatGreatGrandparentData.find(
                                                            (p) =>
                                                                p.gender ===
                                                                "female"
                                                        );

                                                    const greatGreatGrandparentCardY =
                                                        greatGrandparentCardY -
                                                        150;
                                                    const greatGreatGrandparentCardWidth = 120;
                                                    const greatGreatGrandparentCardHeight = 80;
                                                    const greatGreatGrandparentSpacing = 100; // Reduced spacing for great-great-grandparents

                                                    // Show great-great-grandfather card (left)
                                                    if (greatGreatGrandfather) {
                                                        const greatGreatGrandfatherGroup =
                                                            greatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "parent-card"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        -greatGreatGrandparentCardWidth /
                                                                            2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandfather.id,
                                                                                greatGreatGrandfather
                                                                            );
                                                                        } else {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandfather.id,
                                                                                    greatGreatGrandfather
                                                                                );
                                                                            }
                                                                        }
                                                                    }
                                                                );

                                                        greatGreatGrandfatherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#add8e6"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            );

                                                        const greatGreatGrandfatherIcon =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            greatGreatGrandfatherIcon,
                                                            greatGreatGrandfather,
                                                            svg
                                                        );

                                                        let greatGreatGrandfatherName =
                                                            greatGreatGrandfather.name ||
                                                            greatGreatGrandfather.first_name ||
                                                            "";
                                                        if (
                                                            greatGreatGrandfather.last_name
                                                        )
                                                            greatGreatGrandfatherName +=
                                                                " " +
                                                                greatGreatGrandfather.last_name;
                                                        if (
                                                            !greatGreatGrandfatherName
                                                        )
                                                            greatGreatGrandfatherName =
                                                                "Unknown";

                                                        greatGreatGrandfatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                greatGreatGrandfatherName.length >
                                                                    15
                                                                    ? greatGreatGrandfatherName.substring(
                                                                          0,
                                                                          15
                                                                      ) + "..."
                                                                    : greatGreatGrandfatherName
                                                            );

                                                        // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                        const greatGreatGrandfatherIcons =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, 35)"
                                                                );
                                                        greatGreatGrandfatherIcons
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#28a745"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandfather
                                                                    );
                                                                }
                                                            );
                                                        greatGreatGrandfatherIcons
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 4)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#28a745"
                                                            )
                                                            .text("+");

                                                        // Add edit and delete icons automatically
                                                        addEditDeleteIcons(
                                                            greatGreatGrandfatherGroup,
                                                            greatGreatGrandfather.id,
                                                            greatGreatGrandfatherName
                                                        );
                                                    }

                                                    // Show great-great-grandmother card (right)
                                                    if (greatGreatGrandmother) {
                                                        const greatGreatGrandmotherGroup =
                                                            greatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "parent-card"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        greatGreatGrandparentCardWidth /
                                                                            2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandmother.id,
                                                                                greatGreatGrandmother
                                                                            );
                                                                        } else {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandmother.id,
                                                                                    greatGreatGrandmother
                                                                                );
                                                                            }
                                                                        }
                                                                    }
                                                                );

                                                        greatGreatGrandmotherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#ffb6c1"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            );

                                                        const greatGreatGrandmotherIcon =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            greatGreatGrandmotherIcon,
                                                            greatGreatGrandmother,
                                                            svg
                                                        );

                                                        let greatGreatGrandmotherName =
                                                            greatGreatGrandmother.name ||
                                                            greatGreatGrandmother.first_name ||
                                                            "";
                                                        if (
                                                            greatGreatGrandmother.last_name
                                                        )
                                                            greatGreatGrandmotherName +=
                                                                " " +
                                                                greatGreatGrandmother.last_name;
                                                        if (
                                                            !greatGreatGrandmotherName
                                                        )
                                                            greatGreatGrandmotherName =
                                                                "Unknown";

                                                        greatGreatGrandmotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                greatGreatGrandmotherName.length >
                                                                    15
                                                                    ? greatGreatGrandmotherName.substring(
                                                                          0,
                                                                          15
                                                                      ) + "..."
                                                                    : greatGreatGrandmotherName
                                                            );

                                                        // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                        const greatGreatGrandmotherIcons =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, 35)"
                                                                );
                                                        greatGreatGrandmotherIcons
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#28a745"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandmother
                                                                    );
                                                                }
                                                            );
                                                        greatGreatGrandmotherIcons
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 4)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#28a745"
                                                            )
                                                            .text("+");

                                                        // Add edit and delete icons automatically
                                                        addEditDeleteIcons(
                                                            greatGreatGrandmotherGroup,
                                                            greatGreatGrandmother.id,
                                                            greatGreatGrandmotherName
                                                        );
                                                    }

                                                    // Add lines from top center of great-grandmother card, branching to great-great-grandparent cards
                                                    const greatGreatGrandparentBranchY =
                                                        greatGreatGrandparentCardY -
                                                        greatGrandparentCardY +
                                                        greatGreatGrandparentCardHeight /
                                                            2 +
                                                        10;
                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr("x1", 0)
                                                        .attr(
                                                            "y1",
                                                            -greatGrandparentCardHeight /
                                                                2
                                                        )
                                                        .attr("x2", 0)
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentBranchY
                                                        );

                                                    if (
                                                        greatGreatGrandfather ||
                                                        greatGreatGrandmother
                                                    ) {
                                                        const leftX =
                                                            greatGreatGrandfather
                                                                ? -greatGreatGrandparentCardWidth /
                                                                      2 -
                                                                  greatGreatGrandparentSpacing /
                                                                      2
                                                                : 0;
                                                        const rightX =
                                                            greatGreatGrandmother
                                                                ? greatGreatGrandparentCardWidth /
                                                                      2 +
                                                                  greatGreatGrandparentSpacing /
                                                                      2
                                                                : greatGreatGrandfather &&
                                                                  !greatGreatGrandmother
                                                                ? greatGreatGrandparentCardWidth /
                                                                      2 +
                                                                  greatGreatGrandparentSpacing /
                                                                      2
                                                                : 0;
                                                        greatGrandmotherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "add-parent-line"
                                                            )
                                                            .attr("x1", leftX)
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentBranchY
                                                            )
                                                            .attr("x2", rightX)
                                                            .attr(
                                                                "y2",
                                                                greatGreatGrandparentBranchY
                                                            );

                                                        if (
                                                            greatGreatGrandfather
                                                        ) {
                                                            greatGrandmotherGroup
                                                                .append("line")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-line"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    -greatGreatGrandparentCardWidth /
                                                                        2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    greatGreatGrandparentBranchY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    -greatGreatGrandparentCardWidth /
                                                                        2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY +
                                                                        greatGreatGrandparentCardHeight /
                                                                            2
                                                                );
                                                        }

                                                        if (
                                                            greatGreatGrandmother
                                                        ) {
                                                            greatGrandmotherGroup
                                                                .append("line")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-line"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    greatGreatGrandparentCardWidth /
                                                                        2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    greatGreatGrandparentBranchY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    greatGreatGrandparentCardWidth /
                                                                        2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY +
                                                                        greatGreatGrandparentCardHeight /
                                                                            2
                                                                );
                                                        }
                                                    }

                                                    // If great-great-grandfather exists but great-great-grandmother doesn't, show "Add mother" button
                                                    if (
                                                        greatGreatGrandfather &&
                                                        !greatGreatGrandmother &&
                                                        !areGreatGrandmotherAncestorsHidden
                                                    ) {
                                                        const addGreatGreatGrandmotherButtonY =
                                                            greatGreatGrandparentCardY -
                                                            greatGrandparentCardY;
                                                        const addGreatGreatGrandmotherGroup =
                                                            greatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        greatGreatGrandparentCardWidth /
                                                                            2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${addGreatGreatGrandmotherButtonY})`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        addParentFromNode(
                                                                            greatGrandmother,
                                                                            "mother"
                                                                        );
                                                                    }
                                                                );

                                                        addGreatGreatGrandmotherGroup
                                                            .append("rect")
                                                            .attr("width", 90)
                                                            .attr("height", 60)
                                                            .attr("x", -45)
                                                            .attr("y", -30)
                                                            .attr("rx", 8)
                                                            .attr(
                                                                "stroke",
                                                                "#ddd"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .attr(
                                                                "stroke-dasharray",
                                                                "5,5"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            );

                                                        addGreatGreatGrandmotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", -15)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "28px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "300"
                                                            )
                                                            .text("+");

                                                        addGreatGreatGrandmotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 8)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "11px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "500"
                                                            )
                                                            .text("Add mother");

                                                        const addGreatGreatGrandmotherBranchY =
                                                            greatGreatGrandparentBranchY;
                                                        greatGrandmotherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "add-parent-line"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandparentCardWidth /
                                                                    2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y1",
                                                                addGreatGreatGrandmotherBranchY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                greatGreatGrandparentCardWidth /
                                                                    2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y2",
                                                                addGreatGreatGrandmotherButtonY +
                                                                    30
                                                            );
                                                    }

                                                    // If great-great-grandmother exists but great-great-grandfather doesn't, show "Add father" button
                                                    if (
                                                        greatGreatGrandmother &&
                                                        !greatGreatGrandfather &&
                                                        !areGreatGrandmotherAncestorsHidden
                                                    ) {
                                                        const addGreatGreatGrandfatherButtonY =
                                                            greatGreatGrandparentCardY -
                                                            greatGrandparentCardY;
                                                        const addGreatGreatGrandfatherGroup =
                                                            greatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        -greatGreatGrandparentCardWidth /
                                                                            2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${addGreatGreatGrandfatherButtonY})`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        addParentFromNode(
                                                                            greatGrandmother,
                                                                            "father"
                                                                        );
                                                                    }
                                                                );

                                                        addGreatGreatGrandfatherGroup
                                                            .append("rect")
                                                            .attr("width", 90)
                                                            .attr("height", 60)
                                                            .attr("x", -45)
                                                            .attr("y", -30)
                                                            .attr("rx", 8)
                                                            .attr(
                                                                "stroke",
                                                                "#ddd"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .attr(
                                                                "stroke-dasharray",
                                                                "5,5"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            );

                                                        addGreatGreatGrandfatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", -15)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "28px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "300"
                                                            )
                                                            .text("+");

                                                        addGreatGreatGrandfatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 8)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "11px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "500"
                                                            )
                                                            .text("Add father");

                                                        const addGreatGreatGrandfatherBranchY =
                                                            greatGreatGrandparentBranchY;
                                                        greatGrandmotherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "add-parent-line"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y1",
                                                                addGreatGreatGrandfatherBranchY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y2",
                                                                addGreatGreatGrandfatherButtonY +
                                                                    30
                                                            );
                                                    }
                                                } else if (
                                                    !greatGrandmotherHasParents &&
                                                    !areGreatGrandmotherAncestorsHidden
                                                ) {
                                                    // Show "Add father" and "Add mother" buttons above great-grandmother card
                                                    const greatGreatGrandparentButtonY =
                                                        greatGrandparentCardY -
                                                        150;
                                                    // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                    const greatGreatGrandparentButtonWidth = 100; // Reduced button width to prevent overlap
                                                    const greatGreatGrandparentButtonHeight = 70; // Reduced button height to prevent overlap
                                                    const greatGreatGrandparentSpacing = 30; // Standardized button spacing for all generations

                                                    // Add Father button (left) above great-grandmother card
                                                    const greatGrandmotherParentFatherGroup =
                                                        greatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    -greatGreatGrandparentButtonWidth /
                                                                        2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentButtonY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandmother,
                                                                        "father"
                                                                    );
                                                                }
                                                            );

                                                    greatGrandmotherParentFatherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentButtonWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentButtonHeight
                                                        )
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentButtonHeight /
                                                                2
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    greatGrandmotherParentFatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    greatGrandmotherParentFatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add father");

                                                    // Add Mother button (right) above great-grandmother card
                                                    const greatGrandmotherParentMotherGroup =
                                                        greatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    greatGreatGrandparentButtonWidth /
                                                                        2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentButtonY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandmother,
                                                                        "mother"
                                                                    );
                                                                }
                                                            );

                                                    greatGrandmotherParentMotherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentButtonWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentButtonHeight
                                                        )
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentButtonHeight /
                                                                2
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    greatGrandmotherParentMotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    greatGrandmotherParentMotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add mother");

                                                    // Add lines from top center of great-grandmother card, branching to parent buttons
                                                    const greatGrandmotherParentBranchY =
                                                        greatGreatGrandparentButtonY -
                                                        greatGrandparentCardY +
                                                        greatGreatGrandparentButtonHeight /
                                                            2 +
                                                        10;
                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr("x1", 0)
                                                        .attr(
                                                            "y1",
                                                            -greatGrandparentCardHeight /
                                                                2
                                                        )
                                                        .attr("x2", 0)
                                                        .attr(
                                                            "y2",
                                                            greatGrandmotherParentBranchY
                                                        );

                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandmotherParentBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGrandmotherParentBranchY
                                                        );

                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandmotherParentBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY +
                                                                greatGreatGrandparentButtonHeight /
                                                                    2
                                                        );

                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandmotherParentBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY +
                                                                greatGreatGrandparentButtonHeight /
                                                                    2
                                                        );
                                                }
                                            }

                                            // Add lines from top center of grandfather card, branching to great-grandparent cards
                                            const greatGrandparentBranchY =
                                                greatGrandparentCardY +
                                                greatGrandparentCardHeight / 2 +
                                                10;
                                            grandfatherGroup
                                                .append("line")
                                                .attr(
                                                    "class",
                                                    "add-parent-line"
                                                )
                                                .attr("x1", 0)
                                                .attr(
                                                    "y1",
                                                    -grandparentCardHeight / 2
                                                )
                                                .attr("x2", 0)
                                                .attr(
                                                    "y2",
                                                    greatGrandparentBranchY
                                                );

                                            if (
                                                greatGrandfather ||
                                                greatGrandmother
                                            ) {
                                                const leftX = greatGrandfather
                                                    ? -greatGrandparentCardWidth /
                                                          2 -
                                                      greatGrandparentSpacing /
                                                          2
                                                    : 0;
                                                // Extend to right if great-grandmother exists OR if we'll show "Add mother" button
                                                const rightX = greatGrandmother
                                                    ? greatGrandparentCardWidth /
                                                          2 +
                                                      greatGrandparentSpacing /
                                                          2
                                                    : greatGrandfather &&
                                                      !greatGrandmother
                                                    ? greatGrandparentCardWidth /
                                                          2 +
                                                      greatGrandparentSpacing /
                                                          2
                                                    : 0;
                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr("x1", leftX)
                                                    .attr(
                                                        "y1",
                                                        greatGrandparentBranchY
                                                    )
                                                    .attr("x2", rightX)
                                                    .attr(
                                                        "y2",
                                                        greatGrandparentBranchY
                                                    );

                                                if (greatGrandfather) {
                                                    grandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGrandparentCardWidth /
                                                                2 -
                                                                greatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandparentBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            -greatGrandparentCardWidth /
                                                                2 -
                                                                greatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGrandparentCardY +
                                                                greatGrandparentCardHeight /
                                                                    2
                                                        );
                                                }

                                                if (greatGrandmother) {
                                                    grandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGrandparentCardWidth /
                                                                2 +
                                                                greatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandparentBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGrandparentCardWidth /
                                                                2 +
                                                                greatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGrandparentCardY +
                                                                greatGrandparentCardHeight /
                                                                    2
                                                        );
                                                }
                                            }

                                            // Show "Add father" button if great-grandfather doesn't exist
                                            if (!greatGrandfather) {
                                                const addGreatGrandfatherButtonY =
                                                    grandfatherParentButtonY -
                                                    grandparentCardY;
                                                const addGreatGrandfatherGroup =
                                                    grandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                -greatGrandparentCardWidth /
                                                                    2 -
                                                                greatGrandparentSpacing /
                                                                    2
                                                            }, ${addGreatGrandfatherButtonY})`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    grandfather,
                                                                    "father"
                                                                );
                                                            }
                                                        );

                                                addGreatGrandfatherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        parentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        parentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -parentButtonWidth / 2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -parentButtonHeight / 2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                addGreatGrandfatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                addGreatGrandfatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add father");

                                                // Add line to "Add father" button
                                                const addGreatGrandfatherBranchY =
                                                    greatGrandparentBranchY ||
                                                    grandfatherParentButtonY -
                                                        grandparentCardY;
                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        -greatGrandparentCardWidth /
                                                            2 -
                                                            greatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        addGreatGrandfatherBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        -greatGrandparentCardWidth /
                                                            2 -
                                                            greatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        addGreatGrandfatherButtonY +
                                                            parentButtonHeight /
                                                                2
                                                    );
                                            }

                                            // Show "Add mother" button if great-grandmother doesn't exist
                                            if (!greatGrandmother) {
                                                const addGreatGrandmotherButtonY =
                                                    greatGrandparentCardY ||
                                                    grandfatherParentButtonY -
                                                        grandparentCardY; // Position at same level as great-grandparent cards
                                                const addGreatGrandmotherGroup =
                                                    grandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                greatGrandparentCardWidth /
                                                                    2 +
                                                                greatGrandparentSpacing /
                                                                    2
                                                            }, ${addGreatGrandmotherButtonY})`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    grandfather,
                                                                    "mother"
                                                                );
                                                            }
                                                        );

                                                addGreatGrandmotherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        parentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        parentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -parentButtonWidth / 2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -parentButtonHeight / 2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                addGreatGrandmotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                addGreatGrandmotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add mother");

                                                // Add line to "Add mother" button from the horizontal branch line
                                                const addGreatGrandmotherBranchY =
                                                    greatGrandparentBranchY ||
                                                    grandfatherParentButtonY -
                                                        grandparentCardY;
                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        greatGrandparentCardWidth /
                                                            2 +
                                                            greatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        addGreatGrandmotherBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        greatGrandparentCardWidth /
                                                            2 +
                                                            greatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        addGreatGrandmotherButtonY +
                                                            parentButtonHeight /
                                                                2
                                                    );
                                            }
                                        } else {
                                            // No great-grandparents - show "Add father" and "Add mother" buttons
                                            // BUT only if ancestors are NOT hidden (if hidden, don't show buttons)
                                            const areGrandfatherAncestorsHidden =
                                                areAncestorsHidden(
                                                    grandfather.id
                                                );

                                            if (
                                                !areGrandfatherAncestorsHidden
                                            ) {
                                                const grandfatherParentFatherGroup =
                                                    grandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                -parentButtonWidth /
                                                                    2 -
                                                                parentSpacing /
                                                                    2
                                                            }, ${
                                                                grandfatherParentButtonY -
                                                                grandparentCardY
                                                            })`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    grandfather,
                                                                    "father"
                                                                );
                                                            }
                                                        );

                                                grandfatherParentFatherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        parentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        parentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -parentButtonWidth / 2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -parentButtonHeight / 2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                grandfatherParentFatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                grandfatherParentFatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add father");

                                                const grandfatherParentMotherGroup =
                                                    grandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                parentButtonWidth /
                                                                    2 +
                                                                parentSpacing /
                                                                    2
                                                            }, ${
                                                                grandfatherParentButtonY -
                                                                grandparentCardY
                                                            })`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    grandfather,
                                                                    "mother"
                                                                );
                                                            }
                                                        );

                                                grandfatherParentMotherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        parentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        parentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -parentButtonWidth / 2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -parentButtonHeight / 2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                grandfatherParentMotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                grandfatherParentMotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add mother");

                                                // Lines connecting grandfather to buttons
                                                const grandfatherBranchY =
                                                    grandfatherParentButtonY -
                                                    grandparentCardY +
                                                    parentButtonHeight / 2 +
                                                    10;
                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr("x1", 0)
                                                    .attr(
                                                        "y1",
                                                        -grandparentCardHeight /
                                                            2
                                                    )
                                                    .attr("x2", 0)
                                                    .attr(
                                                        "y2",
                                                        grandfatherBranchY
                                                    );

                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        -parentButtonWidth / 2 -
                                                            parentSpacing / 2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        grandfatherBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        parentButtonWidth / 2 +
                                                            parentSpacing / 2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        grandfatherBranchY
                                                    );

                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        -parentButtonWidth / 2 -
                                                            parentSpacing / 2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        grandfatherBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        -parentButtonWidth / 2 -
                                                            parentSpacing / 2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        grandfatherParentButtonY -
                                                            grandparentCardY +
                                                            parentButtonHeight /
                                                                2
                                                    );

                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        parentButtonWidth / 2 +
                                                            parentSpacing / 2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        grandfatherBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        parentButtonWidth / 2 +
                                                            parentSpacing / 2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        grandfatherParentButtonY -
                                                            grandparentCardY +
                                                            parentButtonHeight /
                                                                2
                                                    );
                                            }
                                        }
                                    } // End of shouldShowGrandparentsAncestors check for grandfather
                                } // End of else block for grandfather not hidden
                            }

                            // Show grandmother card (right) - similar structure
                            // Show grandmother card by default (when grandmotherBranchToggled is false)
                            // Hide grandmother card only when grandmotherBranchToggled is true AND grandfather has siblings
                            const shouldShowGrandmother =
                                shouldShowGrandmotherBranchForDisplay;

                            console.log(
                                "Grandmother card check (father's branch):",
                                {
                                    grandmother: grandmother
                                        ? grandmother.name ||
                                          grandmother.first_name
                                        : "null",
                                    shouldShowGrandmother,
                                    grandmotherBranchToggled:
                                        window.grandmotherBranchToggled,
                                    grandfatherHasSiblings,
                                    shouldShowGrandmotherBranchForDisplay,
                                }
                            );

                            if (grandmother && shouldShowGrandmother) {
                                const grandmotherGroup = fatherGroup
                                    .append("g")
                                    .attr("class", "parent-card")
                                    .attr("data-person-id", grandmother.id)
                                    .attr(
                                        "transform",
                                        `translate(${
                                            grandparentCardWidth / 2 +
                                            grandparentSpacing / 2 +
                                            30
                                        }, ${grandparentCardY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        if (
                                            typeof window.openProfileSidebar ===
                                            "function"
                                        ) {
                                            window.openProfileSidebar(
                                                grandmother.id,
                                                grandmother
                                            );
                                        } else {
                                            event.preventDefault();
                                            event.stopPropagation();
                                            if (
                                                typeof window.openProfileSidebar ===
                                                "function"
                                            ) {
                                                window.openProfileSidebar(
                                                    grandmother.id,
                                                    grandmother
                                                );
                                            }
                                        }
                                    });

                                grandmotherGroup
                                    .append("rect")
                                    .attr("x", -grandparentCardWidth / 2)
                                    .attr("y", -grandparentCardHeight / 2)
                                    .attr("width", grandparentCardWidth)
                                    .attr("height", grandparentCardHeight)
                                    .attr("rx", 8)
                                    .attr("ry", 8)
                                    .attr("fill", "white")
                                    .attr("stroke", "#ffb6c1")
                                    .attr("stroke-width", 3);

                                const grandmotherIcon = grandmotherGroup
                                    .append("g")
                                    .attr("transform", "translate(0, -20)");
                                // Use renderAvatar to support photos
                                renderAvatar(grandmotherIcon, grandmother, svg);

                                let grandmotherName =
                                    grandmother.name ||
                                    grandmother.first_name ||
                                    "";
                                if (grandmother.last_name)
                                    grandmotherName +=
                                        " " + grandmother.last_name;
                                if (!grandmotherName)
                                    grandmotherName = "Unknown";

                                grandmotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 20)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "12px")
                                    .attr("fill", "#333")
                                    .text(
                                        grandmotherName.length > 25
                                            ? grandmotherName.substring(0, 25) +
                                                  "..."
                                            : grandmotherName
                                    );

                                // Add toggle hide/show button (eye icon) - top right
                                const isGrandmotherHidden = areAncestorsHidden(
                                    grandmother.id
                                );
                                const hideGrandmotherButton = grandmotherGroup
                                    .append("g")
                                    .attr("class", "hide-branch-button")
                                    .attr("transform", "translate(45, -35)")
                                    .style("cursor", "pointer")
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        togglePersonBranch(grandmother.id);
                                    });

                                hideGrandmotherButton
                                    .append("circle")
                                    .attr("cx", 0)
                                    .attr("cy", 0)
                                    .attr("r", 10)
                                    .attr(
                                        "fill",
                                        isGrandmotherHidden
                                            ? "#28a745"
                                            : "#6c757d"
                                    )
                                    .attr("stroke", "white")
                                    .attr("stroke-width", 1);

                                hideGrandmotherButton
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 3)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "10px")
                                    .attr("fill", "white")
                                    .text(isGrandmotherHidden ? "👁️" : "👁️‍🗨️");

                                hideGrandmotherButton
                                    .append("title")
                                    .text(
                                        isGrandmotherHidden
                                            ? `Click to show the family branch of ${grandmotherName}`
                                            : `Click to hide the family branch of ${grandmotherName}`
                                    );

                                // Check if grandmother has siblings to show toggle view button
                                const grandmotherSiblings = [];
                                if (
                                    grandmother.siblings &&
                                    grandmother.siblings.length > 0
                                ) {
                                    grandmother.siblings.forEach(
                                        (siblingId) => {
                                            const siblingData = treeData.find(
                                                (p) => p.id === siblingId
                                            );
                                            if (
                                                siblingData &&
                                                siblingData.id !==
                                                    grandmother.id
                                            ) {
                                                // Exclude grandfather and parents
                                                if (
                                                    grandfather &&
                                                    siblingId === grandfather.id
                                                )
                                                    return;
                                                if (
                                                    grandmother.parents &&
                                                    grandmother.parents.includes(
                                                        siblingId
                                                    )
                                                )
                                                    return;
                                                grandmotherSiblings.push(
                                                    siblingData
                                                );
                                            }
                                        }
                                    );
                                }
                                // Also check implicit siblings (shared parents)
                                if (
                                    grandmother.parents &&
                                    grandmother.parents.length > 0
                                ) {
                                    treeData.forEach((p) => {
                                        if (
                                            p.id === grandmother.id ||
                                            p.id === grandfather?.id
                                        )
                                            return;
                                        if (
                                            grandmother.parents &&
                                            grandmother.parents.includes(p.id)
                                        )
                                            return;
                                        if (
                                            p.parents &&
                                            p.parents.length > 0 &&
                                            p.parents.every((pId) =>
                                                grandmother.parents.includes(
                                                    pId
                                                )
                                            ) &&
                                            grandmother.parents.every((pId) =>
                                                p.parents.includes(pId)
                                            ) &&
                                            !grandmotherSiblings.find(
                                                (s) => s.id === p.id
                                            )
                                        ) {
                                            grandmotherSiblings.push(p);
                                        }
                                    });
                                }
                                const grandmotherHasSiblings =
                                    grandmotherSiblings.length > 0;

                                // Add view button to toggle to grandmother's branch view (matching mother card)
                                if (grandmotherHasSiblings) {
                                    const viewGrandmotherBranchButton =
                                        grandmotherGroup
                                            .append("g")
                                            .attr(
                                                "class",
                                                "view-grandmother-branch-button"
                                            )
                                            .attr(
                                                "transform",
                                                "translate(-45, -35)"
                                            )
                                            .style("cursor", "pointer")
                                            .on("click", function (event) {
                                                event.stopPropagation();
                                                showGrandmotherBranch();
                                            });

                                    viewGrandmotherBranchButton
                                        .append("circle")
                                        .attr("cx", 0)
                                        .attr("cy", 0)
                                        .attr("r", 10)
                                        .attr(
                                            "fill",
                                            window.grandmotherBranchToggled
                                                ? "#28a745"
                                                : "#6c757d"
                                        )
                                        .attr("stroke", "white")
                                        .attr("stroke-width", 1);

                                    viewGrandmotherBranchButton
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 3)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "10px")
                                        .attr("fill", "white")
                                        .text("👁️");

                                    viewGrandmotherBranchButton
                                        .append("title")
                                        .text(
                                            "Click to view grandmother's branch"
                                        );
                                }

                                // Find grandmother's partners (spouses excluding grandfather) - same logic as mother
                                // grandmotherPartners is already declared at higher scope, just populate it here
                                grandmotherPartners = [];
                                if (
                                    grandmother.spouses &&
                                    grandmother.spouses.length > 0
                                ) {
                                    grandmother.spouses.forEach((spouseId) => {
                                        // Exclude grandfather (he's already drawn as a grandparent)
                                        if (
                                            grandfather &&
                                            spouseId === grandfather.id
                                        )
                                            return;
                                        // Exclude if this spouse is also a parent of father
                                        if (
                                            visibleFatherParents.includes(
                                                spouseId
                                            )
                                        )
                                            return;

                                        const partnerData = treeData.find(
                                            (p) => p.id === spouseId
                                        );
                                        if (partnerData) {
                                            grandmotherPartners.push(
                                                partnerData
                                            );
                                            console.log(
                                                "Found grandmother partner:",
                                                partnerData.name ||
                                                    partnerData.first_name
                                            );
                                        }
                                    });
                                }
                                console.log(
                                    "Total grandmother partners found:",
                                    grandmotherPartners.length,
                                    grandmotherPartners.map(
                                        (p) => p.name || p.first_name
                                    )
                                );

                                // Draw grandmother's partner cards to the LEFT of grandfather card (matching mother's partner logic)
                                // Only show when grandmother's branch is visible (when grandmotherBranchToggled is true)
                                if (window.grandmotherBranchToggled) {
                                    grandmotherPartners.forEach(
                                        (partner, index) => {
                                            // Use EXACT same grandfather card position
                                            const grandfatherX =
                                                -grandparentCardWidth / 2 -
                                                grandparentSpacing / 2;
                                            const partnerSpacing = 200; // Spacing between cards
                                            // Position to the left of grandfather card
                                            const partnerX =
                                                grandfatherX -
                                                grandparentCardWidth -
                                                partnerSpacing -
                                                index *
                                                    (grandparentCardWidth +
                                                        partnerSpacing);
                                            const partnerY = grandparentCardY; // Same Y as grandfather and grandmother

                                            const partnerGroup = fatherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "parent-partner-card grandmother-partner-card"
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${partnerX}, ${partnerY})`
                                                )
                                                .on("click", function (event) {
                                                    event.preventDefault();
                                                    event.stopPropagation();
                                                    if (
                                                        typeof window.openProfileSidebar ===
                                                        "function"
                                                    ) {
                                                        window.openProfileSidebar(
                                                            partner.id,
                                                            partner
                                                        );
                                                    }
                                                });

                                            // Card rectangle with border color based on gender
                                            // Grandmother's partner should always be male (blue) - opposite of grandmother
                                            const borderColor = "#add8e6"; // Always blue for grandmother's partner
                                            partnerGroup
                                                .append("rect")
                                                .attr(
                                                    "x",
                                                    -grandparentCardWidth / 2
                                                )
                                                .attr(
                                                    "y",
                                                    -grandparentCardHeight / 2
                                                )
                                                .attr(
                                                    "width",
                                                    grandparentCardWidth
                                                )
                                                .attr(
                                                    "height",
                                                    grandparentCardHeight
                                                )
                                                .attr("rx", 8)
                                                .attr("ry", 8)
                                                .attr("fill", "white")
                                                .attr("stroke", borderColor)
                                                .attr("stroke-width", 3)
                                                .style(
                                                    "filter",
                                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                );

                                            // Use renderAvatar to support photos
                                            // Force male avatar for grandmother's partner (opposite of grandmother)
                                            const partnerIcon = partnerGroup
                                                .append("g")
                                                .attr(
                                                    "transform",
                                                    "translate(0, -20)"
                                                );
                                            // Create a copy of partner with gender forced to "male" for avatar rendering
                                            const partnerForAvatar = {
                                                ...partner,
                                                gender: "male",
                                            };
                                            renderAvatar(
                                                partnerIcon,
                                                partnerForAvatar,
                                                svg
                                            );

                                            // Name
                                            let partnerName = partner.name;
                                            if (!partnerName) {
                                                partnerName =
                                                    partner.first_name || "";
                                                if (partner.last_name) {
                                                    partnerName +=
                                                        " " + partner.last_name;
                                                }
                                                if (!partnerName) {
                                                    partnerName = "Unknown";
                                                }
                                            }
                                            partnerGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 20)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "12px")
                                                .attr("fill", "#333")
                                                .text(
                                                    partnerName.length > 25
                                                        ? partnerName.substring(
                                                              0,
                                                              25
                                                          ) + "..."
                                                        : partnerName
                                                );

                                            // Add + icon
                                            partnerGroup
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 32)
                                                .attr("r", 10)
                                                .attr("fill", "white")
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 1)
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(partner);
                                                });
                                            partnerGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 36)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "16px")
                                                .attr("font-weight", "bold")
                                                .text("+")
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(partner);
                                                });

                                            // Add edit and delete icons
                                            addEditDeleteIcons(
                                                partnerGroup,
                                                partner.id,
                                                partnerName
                                            );

                                            // Draw single horizontal line from grandmother's partner card to grandfather card
                                            const lineY =
                                                grandparentCardY -
                                                grandparentCardHeight / 10;
                                            // Connect from partner card's right edge to grandfather card's left edge
                                            const lineX1 =
                                                partnerX +
                                                grandparentCardWidth / 2; // Right edge of partner card
                                            const lineX2 =
                                                grandfatherX -
                                                grandparentCardWidth / 2; // Left edge of grandfather card

                                            fatherGroup
                                                .append("line")
                                                .attr(
                                                    "class",
                                                    "parent-partner-link"
                                                )
                                                .attr("x1", lineX1)
                                                .attr("y1", lineY)
                                                .attr("x2", lineX2)
                                                .attr("y2", lineY)
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 1.5)
                                                .style(
                                                    "pointer-events",
                                                    "none"
                                                );

                                            console.log(
                                                `Drew grandmother partner card for ${partnerName} at (${partnerX}, ${partnerY})`
                                            );
                                        }
                                    );
                                }

                                // Add sibling cards next to grandmother card (matching mother card logic)
                                // Show grandmother's siblings only when grandmotherBranchToggled is true (when showing grandmother's branch)
                                if (
                                    grandmotherHasSiblings &&
                                    window.grandmotherBranchToggled
                                ) {
                                    console.log(
                                        "Grandmother has siblings - showing grandmother's branch"
                                    );

                                    // Sort siblings: brothers (male) first, then sisters (female), sorted by ID for consistency
                                    grandmotherSiblings.sort((a, b) => {
                                        // First sort by gender: male first, then female
                                        if (
                                            a.gender === "male" &&
                                            b.gender === "female"
                                        )
                                            return -1;
                                        if (
                                            a.gender === "female" &&
                                            b.gender === "male"
                                        )
                                            return 1;
                                        // If same gender, sort by ID for consistent ordering
                                        return a.id - b.id;
                                    });

                                    // Draw grandmother's sibling cards to the right of grandmother
                                    const grandmotherX = grandmotherCardX;
                                    const grandmotherSiblingSpacing = 200;

                                    grandmotherSiblings.forEach(
                                        (sibling, index) => {
                                            const siblingX =
                                                grandmotherX +
                                                grandparentCardWidth +
                                                grandmotherSiblingSpacing +
                                                index *
                                                    (grandparentCardWidth +
                                                        grandmotherSiblingSpacing);
                                            const siblingY = grandparentCardY; // Same Y as grandmother

                                            const siblingGroup = fatherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "parent-sibling-card grandmother-sibling-card"
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${siblingX}, ${siblingY})`
                                                )
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    if (
                                                        typeof window.openProfileSidebar ===
                                                        "function"
                                                    ) {
                                                        window.openProfileSidebar(
                                                            sibling.id,
                                                            sibling
                                                        );
                                                    } else {
                                                        event.preventDefault();
                                                        event.stopPropagation();
                                                        if (
                                                            typeof window.openProfileSidebar ===
                                                            "function"
                                                        ) {
                                                            window.openProfileSidebar(
                                                                sibling.id,
                                                                sibling
                                                            );
                                                        }
                                                    }
                                                });

                                            // Card rectangle with border color based on gender
                                            const borderColor =
                                                sibling.gender === "female"
                                                    ? "#ffb6c1"
                                                    : "#add8e6";
                                            siblingGroup
                                                .append("rect")
                                                .attr(
                                                    "x",
                                                    -grandparentCardWidth / 2
                                                )
                                                .attr(
                                                    "y",
                                                    -grandparentCardHeight / 2
                                                )
                                                .attr(
                                                    "width",
                                                    grandparentCardWidth
                                                )
                                                .attr(
                                                    "height",
                                                    grandparentCardHeight
                                                )
                                                .attr("rx", 8)
                                                .attr("ry", 8)
                                                .attr("fill", "white")
                                                .attr("stroke", borderColor)
                                                .attr("stroke-width", 3)
                                                .style(
                                                    "filter",
                                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                );

                                            // Use renderAvatar to support photos
                                            const siblingIcon = siblingGroup
                                                .append("g")
                                                .attr(
                                                    "transform",
                                                    "translate(0, -20)"
                                                );
                                            renderAvatar(
                                                siblingIcon,
                                                sibling,
                                                svg
                                            );

                                            // Name
                                            let siblingName = sibling.name;
                                            if (!siblingName) {
                                                siblingName =
                                                    sibling.first_name || "";
                                                if (sibling.last_name) {
                                                    siblingName +=
                                                        " " + sibling.last_name;
                                                }
                                                if (!siblingName) {
                                                    siblingName = "Unknown";
                                                }
                                            }
                                            siblingGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 20)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "12px")
                                                .attr("fill", "#333")
                                                .text(
                                                    siblingName.length > 25
                                                        ? siblingName.substring(
                                                              0,
                                                              25
                                                          ) + "..."
                                                        : siblingName
                                                );

                                            // Add + icon
                                            siblingGroup
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 32)
                                                .attr("r", 10)
                                                .attr("fill", "white")
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 1)
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(sibling);
                                                });
                                            siblingGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 36)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "16px")
                                                .attr("font-weight", "bold")
                                                .text("+")
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(sibling);
                                                });

                                            // Add edit and delete icons
                                            addEditDeleteIcons(
                                                siblingGroup,
                                                sibling.id,
                                                siblingName
                                            );

                                            console.log(
                                                `Drew grandmother sibling card for ${siblingName} at (${siblingX}, ${siblingY})`
                                            );
                                        }
                                    );

                                    // Draw sibling lines for grandmother's siblings (matching mother's sibling lines)
                                    if (grandmotherSiblings.length > 0) {
                                        const grandmotherXForLink =
                                            grandmotherCardX;
                                        const linkY =
                                            grandparentCardY -
                                            grandparentCardHeight / 2 -
                                            20; // Position above the cards

                                        // Store sibling positions for line drawing
                                        const grandmotherSiblingPositions = [];
                                        grandmotherSiblings.forEach(
                                            (sibling, index) => {
                                                const siblingX =
                                                    grandmotherX +
                                                    grandparentCardWidth +
                                                    grandmotherSiblingSpacing +
                                                    index *
                                                        (grandparentCardWidth +
                                                            grandmotherSiblingSpacing);
                                                grandmotherSiblingPositions.push(
                                                    {
                                                        x: siblingX,
                                                        sibling: sibling,
                                                    }
                                                );
                                            }
                                        );

                                        // Draw horizontal line from grandmother card's top center to the last (rightmost) sibling card
                                        const startX = grandmotherXForLink;
                                        const startY = linkY;
                                        const endX =
                                            grandmotherSiblingPositions.length >
                                            0
                                                ? grandmotherSiblingPositions[
                                                      grandmotherSiblingPositions.length -
                                                          1
                                                  ].x
                                                : grandmotherXForLink;
                                        const endY = linkY;

                                        // Same calculation as mother's sibling links
                                        const distance = Math.abs(
                                            endX - startX
                                        );
                                        const bendHeight = Math.min(
                                            6,
                                            Math.max(5, distance * 0.02)
                                        ); // Very subtle bend, 5-6px
                                        const midX = (startX + endX) / 2;
                                        const midY =
                                            Math.min(startY, endY) - bendHeight;

                                        // Same path formula as mother's sibling links
                                        const pathData = `M ${startX} ${startY} Q ${midX} ${midY}, ${endX} ${endY}`;

                                        // Use same attributes as mother's sibling links
                                        fatherGroup
                                            .append("path")
                                            .attr("class", "sibling-link")
                                            .attr("fill", "none")
                                            .attr("d", pathData);

                                        // Draw vertical lines from horizontal line down to each card
                                        // Line 1: From horizontal line to grandmother card
                                        const grandmotherT = 0;
                                        const grandmotherCurveY =
                                            (1 - grandmotherT) *
                                                (1 - grandmotherT) *
                                                startY +
                                            2 *
                                                (1 - grandmotherT) *
                                                grandmotherT *
                                                midY +
                                            grandmotherT * grandmotherT * endY;

                                        // Vertical line from horizontal line down to grandmother card top
                                        fatherGroup
                                            .append("line")
                                            .attr("class", "sibling-link")
                                            .attr("x1", grandmotherXForLink)
                                            .attr("y1", grandmotherCurveY)
                                            .attr("x2", grandmotherXForLink)
                                            .attr(
                                                "y2",
                                                grandparentCardY -
                                                    grandparentCardHeight / 2
                                            )
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2);

                                        // Lines 2, 3, 4...: From horizontal line to each sibling card
                                        grandmotherSiblingPositions.forEach(
                                            (pos) => {
                                                const siblingX = pos.x;

                                                // Calculate Y on the curve at this X position (for quadratic bezier)
                                                const t =
                                                    endX !== startX
                                                        ? (siblingX - startX) /
                                                          (endX - startX)
                                                        : 0; // Avoid division by zero
                                                const curveY =
                                                    (1 - t) * (1 - t) * startY +
                                                    2 * (1 - t) * t * midY +
                                                    t * t * endY;

                                                fatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "sibling-link"
                                                    )
                                                    .attr("x1", siblingX)
                                                    .attr("y1", curveY)
                                                    .attr("x2", siblingX)
                                                    .attr(
                                                        "y2",
                                                        grandparentCardY -
                                                            grandparentCardHeight /
                                                                2
                                                    )
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 2);
                                            }
                                        );
                                    }
                                }

                                // Add edit and delete icons automatically
                                addEditDeleteIcons(
                                    grandmotherGroup,
                                    grandmother.id,
                                    grandmotherName
                                );

                                // Add button - black style matching root node
                                const grandmotherIconsForFather =
                                    grandmotherGroup
                                        .append("g")
                                        .attr("transform", "translate(0, 35)")
                                        .style("cursor", "pointer")
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            openBranchBuilder(grandmother);
                                        });
                                grandmotherIconsForFather
                                    .append("circle")
                                    .attr("cx", 0)
                                    .attr("cy", 0)
                                    .attr("r", 10)
                                    .attr("fill", "white")
                                    .attr("stroke", "#d0d0d0")
                                    .attr("stroke-width", 1);
                                grandmotherIconsForFather
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 4)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "16px")
                                    .attr("font-weight", "bold")
                                    .attr("fill", "#333")
                                    .text("+");

                                // Recursively show great-grandparent cards or "Add father/mother" buttons above grandmother
                                // Only show if ancestors are NOT hidden AND grandmother branch is NOT toggled
                                // When grandmotherBranchToggled is true, hide grandmother's great-grandparents (only show siblings and partners)
                                if (
                                    shouldShowGrandparentsAncestors &&
                                    !window.grandmotherBranchToggled
                                ) {
                                    const grandmotherParentButtonY =
                                        grandparentCardY - 150;
                                    const grandmotherParents =
                                        grandmother.parents || [];
                                    const visibleGrandmotherParents =
                                        grandmotherParents.filter(
                                            (pId) =>
                                                !window.hiddenAncestorIds ||
                                                !window.hiddenAncestorIds.has(
                                                    pId
                                                )
                                        );
                                    const grandmotherHasParents =
                                        visibleGrandmotherParents &&
                                        visibleGrandmotherParents.length > 0;

                                    if (grandmotherHasParents) {
                                        // Show great-grandparent cards above grandmother (same logic as grandfather)
                                        const greatGrandparentData =
                                            visibleGrandmotherParents
                                                .map((parentId) =>
                                                    treeData.find(
                                                        (p) => p.id === parentId
                                                    )
                                                )
                                                .filter((p) => p);
                                        const greatGrandfather =
                                            greatGrandparentData.find(
                                                (p) => p.gender === "male"
                                            );
                                        const greatGrandmother =
                                            greatGrandparentData.find(
                                                (p) => p.gender === "female"
                                            );

                                        const greatGrandparentCardY =
                                            grandmotherParentButtonY -
                                            grandparentCardY;
                                        const greatGrandparentCardWidth = 140; // Card width (decent size)
                                        const greatGrandparentCardHeight = 90; // Card height (decent size)
                                        const greatGrandparentSpacing = 150; // Reduced spacing for great-grandparents

                                        // Show great-grandfather card (left)
                                        if (greatGrandfather) {
                                            const greatGrandfatherGroup =
                                                grandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "parent-card"
                                                    )
                                                    .attr(
                                                        "data-person-id",
                                                        greatGrandfather.id
                                                    )
                                                    .attr(
                                                        "transform",
                                                        `translate(${
                                                            -greatGrandparentCardWidth /
                                                                2 -
                                                            greatGrandparentSpacing /
                                                                2
                                                        }, ${greatGrandparentCardY})`
                                                    )
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.preventDefault();
                                                            event.stopPropagation();
                                                            if (
                                                                typeof window.openProfileSidebar ===
                                                                "function"
                                                            ) {
                                                                window.openProfileSidebar(
                                                                    greatGrandfather.id,
                                                                    greatGrandfather
                                                                );
                                                            }
                                                        }
                                                    );

                                            greatGrandfatherGroup
                                                .append("rect")
                                                .attr(
                                                    "x",
                                                    -greatGrandparentCardWidth /
                                                        2
                                                )
                                                .attr(
                                                    "y",
                                                    -greatGrandparentCardHeight /
                                                        2
                                                )
                                                .attr(
                                                    "width",
                                                    greatGrandparentCardWidth
                                                )
                                                .attr(
                                                    "height",
                                                    greatGrandparentCardHeight
                                                )
                                                .attr("rx", 8)
                                                .attr("ry", 8)
                                                .attr("fill", "white")
                                                .attr("stroke", "#add8e6")
                                                .attr("stroke-width", 3);

                                            const greatGrandfatherIcon =
                                                greatGrandfatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, -20)"
                                                    );
                                            // Use renderAvatar to support photos
                                            renderAvatar(
                                                greatGrandfatherIcon,
                                                greatGrandfather,
                                                svg
                                            );

                                            let greatGrandfatherName =
                                                greatGrandfather.name ||
                                                greatGrandfather.first_name ||
                                                "";
                                            if (greatGrandfather.last_name)
                                                greatGrandfatherName +=
                                                    " " +
                                                    greatGrandfather.last_name;
                                            if (!greatGrandfatherName)
                                                greatGrandfatherName =
                                                    "Unknown";

                                            greatGrandfatherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 20)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "12px")
                                                .attr("fill", "#333")
                                                .text(
                                                    greatGrandfatherName.length >
                                                        15
                                                        ? greatGrandfatherName.substring(
                                                              0,
                                                              15
                                                          ) + "..."
                                                        : greatGrandfatherName
                                                );

                                            // Add button - black style matching root node
                                            const greatGrandfatherIcons =
                                                greatGrandfatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, 35)"
                                                    )
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            openBranchBuilder(
                                                                greatGrandfather
                                                            );
                                                        }
                                                    );
                                            greatGrandfatherIcons
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 0)
                                                .attr("r", 10)
                                                .attr("fill", "white")
                                                .attr("stroke", "#d0d0d0")
                                                .attr("stroke-width", 1);
                                            greatGrandfatherIcons
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 4)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "16px")
                                                .attr("font-weight", "bold")
                                                .attr("fill", "#333")
                                                .text("+");

                                            // Add toggle hide/show button (eye icon) - top right
                                            const isGreatGrandfatherHidden2 =
                                                areAncestorsHidden(
                                                    greatGrandfather.id
                                                );
                                            const hideGreatGrandfatherButton2 =
                                                greatGrandfatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "hide-branch-button"
                                                    )
                                                    .attr(
                                                        "transform",
                                                        "translate(45, -35)"
                                                    )
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            togglePersonBranch(
                                                                greatGrandfather.id
                                                            );
                                                        }
                                                    );

                                            hideGreatGrandfatherButton2
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 0)
                                                .attr("r", 10)
                                                .attr(
                                                    "fill",
                                                    isGreatGrandfatherHidden2
                                                        ? "#28a745"
                                                        : "#6c757d"
                                                )
                                                .attr("stroke", "white")
                                                .attr("stroke-width", 1);

                                            hideGreatGrandfatherButton2
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 3)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "10px")
                                                .attr("fill", "white")
                                                .text(
                                                    isGreatGrandfatherHidden2
                                                        ? "👁️"
                                                        : "👁️‍🗨️"
                                                );

                                            hideGreatGrandfatherButton2
                                                .append("title")
                                                .text(
                                                    isGreatGrandfatherHidden2
                                                        ? `Click to show the family branch of ${greatGrandfatherName}`
                                                        : `Click to hide the family branch of ${greatGrandfatherName}`
                                                );

                                            // Check if great-grandfather has parents - show cards if they exist, otherwise show "Add father" and "Add mother" buttons
                                            const greatGrandfatherParents =
                                                greatGrandfather.parents || [];
                                            const visibleGreatGrandfatherParents =
                                                greatGrandfatherParents.filter(
                                                    (pId) =>
                                                        !window.hiddenAncestorIds ||
                                                        !window.hiddenAncestorIds.has(
                                                            pId
                                                        )
                                                );
                                            const greatGrandfatherHasParents =
                                                visibleGreatGrandfatherParents &&
                                                visibleGreatGrandfatherParents.length >
                                                    0;
                                            const areGreatGrandfatherAncestorsHidden2 =
                                                areAncestorsHidden(
                                                    greatGrandfather.id
                                                );

                                            if (
                                                greatGrandfatherHasParents &&
                                                !areGreatGrandfatherAncestorsHidden2
                                            ) {
                                                // Show great-great-grandparent cards above great-grandfather card
                                                const greatGreatGrandparentData =
                                                    visibleGreatGrandfatherParents
                                                        .map((parentId) =>
                                                            treeData.find(
                                                                (p) =>
                                                                    p.id ===
                                                                    parentId
                                                            )
                                                        )
                                                        .filter((p) => p);
                                                const greatGreatGrandfather =
                                                    greatGreatGrandparentData.find(
                                                        (p) =>
                                                            p.gender === "male"
                                                    );
                                                const greatGreatGrandmother =
                                                    greatGreatGrandparentData.find(
                                                        (p) =>
                                                            p.gender ===
                                                            "female"
                                                    );

                                                const greatGreatGrandparentCardY =
                                                    greatGrandparentCardY - 150;
                                                const greatGreatGrandparentCardWidth = 100;
                                                const greatGreatGrandparentCardHeight = 80;
                                                const greatGreatGrandparentSpacing = 100; // Reduced spacing for great-great-grandparents

                                                // Show great-great-grandfather card (left)
                                                if (greatGreatGrandfather) {
                                                    const greatGreatGrandfatherGroup =
                                                        greatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "parent-card"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    -greatGreatGrandparentCardWidth /
                                                                        2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentCardY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.preventDefault();
                                                                    event.stopPropagation();
                                                                    if (
                                                                        typeof window.openProfileSidebar ===
                                                                        "function"
                                                                    ) {
                                                                        window.openProfileSidebar(
                                                                            greatGreatGrandfather.id,
                                                                            greatGreatGrandfather
                                                                        );
                                                                    }
                                                                }
                                                            );

                                                    greatGreatGrandfatherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentCardWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentCardHeight /
                                                                2
                                                        )
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentCardWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentCardHeight
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("ry", 8)
                                                        .attr("fill", "white")
                                                        .attr(
                                                            "stroke",
                                                            "#add8e6"
                                                        )
                                                        .attr(
                                                            "stroke-width",
                                                            3
                                                        );

                                                    const greatGreatGrandfatherIcon =
                                                        greatGreatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "transform",
                                                                "translate(0, -20)"
                                                            );
                                                    greatGreatGrandfatherIcon
                                                        .append("circle")
                                                        .attr("cx", 0)
                                                        .attr("cy", -8)
                                                        .attr("r", 8)
                                                        .attr(
                                                            "fill",
                                                            "#d0d0d0"
                                                        );
                                                    greatGreatGrandfatherIcon
                                                        .append("rect")
                                                        .attr("x", -10)
                                                        .attr("y", 0)
                                                        .attr("width", 20)
                                                        .attr("height", 16)
                                                        .attr("rx", 10)
                                                        .attr(
                                                            "fill",
                                                            "#d0d0d0"
                                                        );

                                                    let greatGreatGrandfatherName =
                                                        greatGreatGrandfather.name ||
                                                        greatGreatGrandfather.first_name ||
                                                        "";
                                                    if (
                                                        greatGreatGrandfather.last_name
                                                    )
                                                        greatGreatGrandfatherName +=
                                                            " " +
                                                            greatGreatGrandfather.last_name;
                                                    if (
                                                        !greatGreatGrandfatherName
                                                    )
                                                        greatGreatGrandfatherName =
                                                            "Unknown";

                                                    greatGreatGrandfatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 20)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "12px"
                                                        )
                                                        .attr("fill", "#333")
                                                        .text(
                                                            greatGreatGrandfatherName.length >
                                                                15
                                                                ? greatGreatGrandfatherName.substring(
                                                                      0,
                                                                      15
                                                                  ) + "..."
                                                                : greatGreatGrandfatherName
                                                        );

                                                    // Add button - black style matching root node
                                                    const greatGreatGrandfatherIcons =
                                                        greatGreatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "transform",
                                                                "translate(0, 35)"
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandfather
                                                                    );
                                                                }
                                                            );
                                                    greatGreatGrandfatherIcons
                                                        .append("rect")
                                                        .attr("x", -20)
                                                        .attr("y", -8)
                                                        .attr("width", 40)
                                                        .attr("height", 16)
                                                        .attr("rx", 4)
                                                        .attr("fill", "none")
                                                        .attr(
                                                            "stroke",
                                                            "#d0d0d0"
                                                        )
                                                        .attr("stroke-width", 1)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        );
                                                    greatGreatGrandfatherIcons
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 4)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "10px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .attr("fill", "#333")
                                                        .text("+");

                                                    // Add edit and delete icons automatically
                                                    addEditDeleteIcons(
                                                        greatGreatGrandfatherGroup,
                                                        greatGreatGrandfather.id,
                                                        greatGreatGrandfatherName
                                                    );
                                                }

                                                // Show great-great-grandmother card (right)
                                                if (greatGreatGrandmother) {
                                                    const greatGreatGrandmotherGroup =
                                                        greatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "parent-card"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    greatGreatGrandparentCardWidth /
                                                                        2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentCardY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    if (
                                                                        typeof window.openProfileSidebar ===
                                                                        "function"
                                                                    ) {
                                                                        window.openProfileSidebar(
                                                                            greatGreatGrandmother.id,
                                                                            greatGreatGrandmother
                                                                        );
                                                                    } else {
                                                                        event.preventDefault();
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandmother.id,
                                                                                greatGreatGrandmother
                                                                            );
                                                                        }
                                                                    }
                                                                }
                                                            );

                                                    greatGreatGrandmotherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentCardWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentCardHeight /
                                                                2
                                                        )
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentCardWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentCardHeight
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("ry", 8)
                                                        .attr("fill", "white")
                                                        .attr(
                                                            "stroke",
                                                            "#ffb6c1"
                                                        )
                                                        .attr(
                                                            "stroke-width",
                                                            3
                                                        );

                                                    const greatGreatGrandmotherIcon =
                                                        greatGreatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "transform",
                                                                "translate(0, -20)"
                                                            );
                                                    greatGreatGrandmotherIcon
                                                        .append("circle")
                                                        .attr("cx", 0)
                                                        .attr("cy", -8)
                                                        .attr("r", 8)
                                                        .attr(
                                                            "fill",
                                                            "#d0d0d0"
                                                        );
                                                    greatGreatGrandmotherIcon
                                                        .append("rect")
                                                        .attr("x", -10)
                                                        .attr("y", 0)
                                                        .attr("width", 20)
                                                        .attr("height", 16)
                                                        .attr("rx", 10)
                                                        .attr(
                                                            "fill",
                                                            "#d0d0d0"
                                                        );

                                                    let greatGreatGrandmotherName =
                                                        greatGreatGrandmother.name ||
                                                        greatGreatGrandmother.first_name ||
                                                        "";
                                                    if (
                                                        greatGreatGrandmother.last_name
                                                    )
                                                        greatGreatGrandmotherName +=
                                                            " " +
                                                            greatGreatGrandmother.last_name;
                                                    if (
                                                        !greatGreatGrandmotherName
                                                    )
                                                        greatGreatGrandmotherName =
                                                            "Unknown";

                                                    greatGreatGrandmotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 20)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "12px"
                                                        )
                                                        .attr("fill", "#333")
                                                        .text(
                                                            greatGreatGrandmotherName.length >
                                                                15
                                                                ? greatGreatGrandmotherName.substring(
                                                                      0,
                                                                      15
                                                                  ) + "..."
                                                                : greatGreatGrandmotherName
                                                        );

                                                    // Add button - black style matching root node
                                                    const greatGreatGrandmotherIcons =
                                                        greatGreatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "transform",
                                                                "translate(0, 35)"
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandmother
                                                                    );
                                                                }
                                                            );
                                                    greatGreatGrandmotherIcons
                                                        .append("rect")
                                                        .attr("x", -20)
                                                        .attr("y", -8)
                                                        .attr("width", 40)
                                                        .attr("height", 16)
                                                        .attr("rx", 4)
                                                        .attr("fill", "none")
                                                        .attr(
                                                            "stroke",
                                                            "#d0d0d0"
                                                        )
                                                        .attr("stroke-width", 1)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        );
                                                    greatGreatGrandmotherIcons
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 4)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "10px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .attr("fill", "#333")
                                                        .text("+");

                                                    // Add edit and delete icons automatically
                                                    addEditDeleteIcons(
                                                        greatGreatGrandmotherGroup,
                                                        greatGreatGrandmother.id,
                                                        greatGreatGrandmotherName
                                                    );
                                                }

                                                // Add lines from top center of great-grandfather card, branching to great-great-grandparent cards
                                                const greatGreatGrandparentBranchY =
                                                    greatGreatGrandparentCardY -
                                                    greatGrandparentCardY +
                                                    greatGreatGrandparentCardHeight /
                                                        2 +
                                                    10;
                                                greatGrandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr("x1", 0)
                                                    .attr(
                                                        "y1",
                                                        -greatGrandparentCardHeight /
                                                            2
                                                    )
                                                    .attr("x2", 0)
                                                    .attr(
                                                        "y2",
                                                        greatGreatGrandparentBranchY
                                                    );

                                                if (
                                                    greatGreatGrandfather ||
                                                    greatGreatGrandmother
                                                ) {
                                                    const leftX =
                                                        greatGreatGrandfather
                                                            ? -greatGreatGrandparentCardWidth /
                                                                  2 -
                                                              greatGreatGrandparentSpacing /
                                                                  2
                                                            : 0;
                                                    const rightX =
                                                        greatGreatGrandmother
                                                            ? greatGreatGrandparentCardWidth /
                                                                  2 +
                                                              greatGreatGrandparentSpacing /
                                                                  2
                                                            : greatGreatGrandfather &&
                                                              !greatGreatGrandmother
                                                            ? greatGreatGrandparentCardWidth /
                                                                  2 +
                                                              greatGreatGrandparentSpacing /
                                                                  2
                                                            : 0;
                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr("x1", leftX)
                                                        .attr(
                                                            "y1",
                                                            greatGreatGrandparentBranchY
                                                        )
                                                        .attr("x2", rightX)
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentBranchY
                                                        );

                                                    if (greatGreatGrandfather) {
                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "add-parent-line"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentBranchY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y2",
                                                                greatGreatGrandparentCardY -
                                                                    greatGrandparentCardY +
                                                                    greatGreatGrandparentCardHeight /
                                                                        2
                                                            );
                                                    }

                                                    if (greatGreatGrandmother) {
                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "add-parent-line"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandparentCardWidth /
                                                                    2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentBranchY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                greatGreatGrandparentCardWidth /
                                                                    2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y2",
                                                                greatGreatGrandparentCardY -
                                                                    greatGrandparentCardY +
                                                                    greatGreatGrandparentCardHeight /
                                                                        2
                                                            );
                                                    }
                                                }

                                                // If great-great-grandfather exists but great-great-grandmother doesn't, show "Add mother" button
                                                if (
                                                    greatGreatGrandfather &&
                                                    !greatGreatGrandmother &&
                                                    !areGreatGrandfatherAncestorsHidden2
                                                ) {
                                                    const addGreatGreatGrandmotherButtonY =
                                                        greatGreatGrandparentCardY -
                                                        greatGrandparentCardY;
                                                    const addGreatGreatGrandmotherGroup =
                                                        greatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    greatGreatGrandparentCardWidth /
                                                                        2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${addGreatGreatGrandmotherButtonY})`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandfather,
                                                                        "mother"
                                                                    );
                                                                }
                                                            );

                                                    addGreatGreatGrandmotherGroup
                                                        .append("rect")
                                                        .attr("width", 90)
                                                        .attr("height", 60)
                                                        .attr("x", -45)
                                                        .attr("y", -30)
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    addGreatGreatGrandmotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    addGreatGreatGrandmotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add mother");

                                                    const addGreatGreatGrandmotherBranchY =
                                                        greatGreatGrandparentBranchY;
                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGreatGrandparentCardWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            addGreatGreatGrandmotherBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentCardWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            addGreatGreatGrandmotherButtonY +
                                                                30
                                                        );
                                                }

                                                // If great-great-grandmother exists but great-great-grandfather doesn't, show "Add father" button
                                                if (
                                                    greatGreatGrandmother &&
                                                    !greatGreatGrandfather &&
                                                    !areGreatGrandfatherAncestorsHidden2
                                                ) {
                                                    const addGreatGreatGrandfatherButtonY =
                                                        greatGreatGrandparentCardY -
                                                        greatGrandparentCardY;
                                                    const addGreatGreatGrandfatherGroup =
                                                        greatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    -greatGreatGrandparentCardWidth /
                                                                        2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${addGreatGreatGrandfatherButtonY})`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandfather,
                                                                        "father"
                                                                    );
                                                                }
                                                            );

                                                    addGreatGreatGrandfatherGroup
                                                        .append("rect")
                                                        .attr("width", 90)
                                                        .attr("height", 60)
                                                        .attr("x", -45)
                                                        .attr("y", -30)
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    addGreatGreatGrandfatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    addGreatGreatGrandfatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add father");

                                                    const addGreatGreatGrandfatherBranchY =
                                                        greatGreatGrandparentBranchY;
                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentCardWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            addGreatGreatGrandfatherBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            -greatGreatGrandparentCardWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            addGreatGreatGrandfatherButtonY +
                                                                30
                                                        );
                                                }
                                            } else if (
                                                !greatGrandfatherHasParents &&
                                                !areGreatGrandfatherAncestorsHidden2
                                            ) {
                                                // Show "Add father" and "Add mother" buttons above great-grandfather card
                                                const greatGreatGrandparentButtonY =
                                                    greatGrandparentCardY - 150;
                                                // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                const greatGreatGrandparentButtonWidth = 100; // Reduced button width to prevent overlap
                                                const greatGreatGrandparentButtonHeight = 70; // Reduced button height to prevent overlap
                                                const greatGreatGrandparentSpacing = 30; // Button spacing

                                                // Add Father button (left) above great-grandfather card
                                                const greatGrandfatherParentFatherGroup =
                                                    greatGrandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                -greatGreatGrandparentButtonWidth /
                                                                    2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                            }, ${
                                                                greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY
                                                            })`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    greatGrandfather,
                                                                    "father"
                                                                );
                                                            }
                                                        );

                                                greatGrandfatherParentFatherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        greatGreatGrandparentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        greatGreatGrandparentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -greatGreatGrandparentButtonHeight /
                                                            2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                greatGrandfatherParentFatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                greatGrandfatherParentFatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add father");

                                                // Add Mother button (right) above great-grandfather card
                                                const greatGrandfatherParentMotherGroup =
                                                    greatGrandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                greatGreatGrandparentButtonWidth /
                                                                    2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                            }, ${
                                                                greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY
                                                            })`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    greatGrandfather,
                                                                    "mother"
                                                                );
                                                            }
                                                        );

                                                greatGrandfatherParentMotherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        greatGreatGrandparentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        greatGreatGrandparentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -greatGreatGrandparentButtonHeight /
                                                            2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                greatGrandfatherParentMotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                greatGrandfatherParentMotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add mother");

                                                // Add lines from top center of great-grandfather card, branching to parent buttons
                                                const greatGrandfatherParentBranchY =
                                                    greatGreatGrandparentButtonY -
                                                    greatGrandparentCardY +
                                                    greatGreatGrandparentButtonHeight /
                                                        2 +
                                                    10;
                                                greatGrandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr("x1", 0)
                                                    .attr(
                                                        "y1",
                                                        -greatGrandparentCardHeight /
                                                            2
                                                    )
                                                    .attr("x2", 0)
                                                    .attr(
                                                        "y2",
                                                        greatGrandfatherParentBranchY
                                                    );

                                                greatGrandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2 -
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandfatherParentBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        greatGreatGrandparentButtonWidth /
                                                            2 +
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGrandfatherParentBranchY
                                                    );

                                                greatGrandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2 -
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandfatherParentBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2 -
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGreatGrandparentButtonY -
                                                            greatGrandparentCardY +
                                                            greatGreatGrandparentButtonHeight /
                                                                2
                                                    );

                                                greatGrandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        greatGreatGrandparentButtonWidth /
                                                            2 +
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandfatherParentBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        greatGreatGrandparentButtonWidth /
                                                            2 +
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGreatGrandparentButtonY -
                                                            greatGrandparentCardY +
                                                            greatGreatGrandparentButtonHeight /
                                                                2
                                                    );
                                            }
                                        }

                                        // Show great-grandmother card (right)
                                        if (greatGrandmother) {
                                            const greatGrandmotherGroup =
                                                grandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "parent-card"
                                                    )
                                                    .attr(
                                                        "data-person-id",
                                                        greatGrandmother.id
                                                    )
                                                    .attr(
                                                        "transform",
                                                        `translate(${
                                                            greatGrandparentCardWidth /
                                                                2 +
                                                            greatGrandparentSpacing /
                                                                2
                                                        }, ${greatGrandparentCardY})`
                                                    )
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            if (
                                                                typeof window.openProfileSidebar ===
                                                                "function"
                                                            ) {
                                                                window.openProfileSidebar(
                                                                    greatGrandmother.id,
                                                                    greatGrandmother
                                                                );
                                                            } else {
                                                                event.preventDefault();
                                                                event.stopPropagation();
                                                                if (
                                                                    typeof window.openProfileSidebar ===
                                                                    "function"
                                                                ) {
                                                                    window.openProfileSidebar(
                                                                        greatGrandmother.id,
                                                                        greatGrandmother
                                                                    );
                                                                }
                                                            }
                                                        }
                                                    );

                                            greatGrandmotherGroup
                                                .append("rect")
                                                .attr(
                                                    "x",
                                                    -greatGrandparentCardWidth /
                                                        2
                                                )
                                                .attr(
                                                    "y",
                                                    -greatGrandparentCardHeight /
                                                        2
                                                )
                                                .attr(
                                                    "width",
                                                    greatGrandparentCardWidth
                                                )
                                                .attr(
                                                    "height",
                                                    greatGrandparentCardHeight
                                                )
                                                .attr("rx", 8)
                                                .attr("ry", 8)
                                                .attr("fill", "white")
                                                .attr("stroke", "#ffb6c1")
                                                .attr("stroke-width", 3);

                                            const greatGrandmotherIcon =
                                                greatGrandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, -20)"
                                                    );
                                            // Use renderAvatar to support photos
                                            renderAvatar(
                                                greatGrandmotherIcon,
                                                greatGrandmother,
                                                svg
                                            );

                                            let greatGrandmotherName =
                                                greatGrandmother.name ||
                                                greatGrandmother.first_name ||
                                                "";
                                            if (greatGrandmother.last_name)
                                                greatGrandmotherName +=
                                                    " " +
                                                    greatGrandmother.last_name;
                                            if (!greatGrandmotherName)
                                                greatGrandmotherName =
                                                    "Unknown";

                                            greatGrandmotherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 20)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "12px")
                                                .attr("fill", "#333")
                                                .text(
                                                    greatGrandmotherName.length >
                                                        15
                                                        ? greatGrandmotherName.substring(
                                                              0,
                                                              15
                                                          ) + "..."
                                                        : greatGrandmotherName
                                                );

                                            // Add button - black style matching root node
                                            const greatGrandmotherIcons =
                                                greatGrandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, 35)"
                                                    )
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            openBranchBuilder(
                                                                greatGrandmother
                                                            );
                                                        }
                                                    );
                                            greatGrandmotherIcons
                                                .append("rect")
                                                .attr("x", -20)
                                                .attr("y", -8)
                                                .attr("width", 40)
                                                .attr("height", 16)
                                                .attr("rx", 4)
                                                .attr("fill", "none")
                                                .attr("stroke", "#d0d0d0")
                                                .attr("stroke-width", 1)
                                                .attr(
                                                    "stroke-dasharray",
                                                    "5,5"
                                                );
                                            greatGrandmotherIcons
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 4)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "10px")
                                                .attr("font-weight", "500")
                                                .attr("fill", "#333")
                                                .text("+");

                                            // Add toggle hide/show button (eye icon) - top right
                                            const isGreatGrandmotherHidden =
                                                areAncestorsHidden(
                                                    greatGrandmother.id
                                                );
                                            const hideGreatGrandmotherButton =
                                                greatGrandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "hide-branch-button"
                                                    )
                                                    .attr(
                                                        "transform",
                                                        "translate(45, -35)"
                                                    )
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            togglePersonBranch(
                                                                greatGrandmother.id
                                                            );
                                                        }
                                                    );

                                            hideGreatGrandmotherButton
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 0)
                                                .attr("r", 10)
                                                .attr(
                                                    "fill",
                                                    isGreatGrandmotherHidden
                                                        ? "#28a745"
                                                        : "#6c757d"
                                                )
                                                .attr("stroke", "white")
                                                .attr("stroke-width", 1);

                                            hideGreatGrandmotherButton
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 3)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "10px")
                                                .attr("fill", "white")
                                                .text(
                                                    isGreatGrandmotherHidden
                                                        ? "👁️"
                                                        : "👁️‍🗨️"
                                                );

                                            hideGreatGrandmotherButton
                                                .append("title")
                                                .text(
                                                    isGreatGrandmotherHidden
                                                        ? `Click to show the family branch of ${greatGrandmotherName}`
                                                        : `Click to hide the family branch of ${greatGrandmotherName}`
                                                );

                                            // Check if great-grandmother has parents - show cards if they exist, otherwise show "Add father" and "Add mother" buttons
                                            const greatGrandmotherParents =
                                                greatGrandmother.parents || [];
                                            const visibleGreatGrandmotherParents =
                                                greatGrandmotherParents.filter(
                                                    (pId) =>
                                                        !window.hiddenAncestorIds ||
                                                        !window.hiddenAncestorIds.has(
                                                            pId
                                                        )
                                                );
                                            const greatGrandmotherHasParents =
                                                visibleGreatGrandmotherParents &&
                                                visibleGreatGrandmotherParents.length >
                                                    0;
                                            const areGreatGrandmotherAncestorsHidden2 =
                                                areAncestorsHidden(
                                                    greatGrandmother.id
                                                );

                                            if (
                                                greatGrandmotherHasParents &&
                                                !areGreatGrandmotherAncestorsHidden2
                                            ) {
                                                // Show great-great-grandparent cards above great-grandmother card
                                                const greatGreatGrandparentData =
                                                    visibleGreatGrandmotherParents
                                                        .map((parentId) =>
                                                            treeData.find(
                                                                (p) =>
                                                                    p.id ===
                                                                    parentId
                                                            )
                                                        )
                                                        .filter((p) => p);
                                                const greatGreatGrandfather =
                                                    greatGreatGrandparentData.find(
                                                        (p) =>
                                                            p.gender === "male"
                                                    );
                                                const greatGreatGrandmother =
                                                    greatGreatGrandparentData.find(
                                                        (p) =>
                                                            p.gender ===
                                                            "female"
                                                    );

                                                const greatGreatGrandparentCardY =
                                                    greatGrandparentCardY - 150;
                                                const greatGreatGrandparentCardWidth = 100;
                                                const greatGreatGrandparentCardHeight = 80;
                                                const greatGreatGrandparentSpacing = 100; // Reduced spacing for great-great-grandparents

                                                // Show great-great-grandfather card (left)
                                                if (greatGreatGrandfather) {
                                                    const greatGreatGrandfatherGroup =
                                                        greatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "parent-card"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    -greatGreatGrandparentCardWidth /
                                                                        2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentCardY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.preventDefault();
                                                                    event.stopPropagation();
                                                                    if (
                                                                        typeof window.openProfileSidebar ===
                                                                        "function"
                                                                    ) {
                                                                        window.openProfileSidebar(
                                                                            greatGreatGrandfather.id,
                                                                            greatGreatGrandfather
                                                                        );
                                                                    }
                                                                }
                                                            );

                                                    greatGreatGrandfatherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentCardWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentCardHeight /
                                                                2
                                                        )
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentCardWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentCardHeight
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("ry", 8)
                                                        .attr("fill", "white")
                                                        .attr(
                                                            "stroke",
                                                            "#add8e6"
                                                        )
                                                        .attr(
                                                            "stroke-width",
                                                            3
                                                        );

                                                    const greatGreatGrandfatherIcon =
                                                        greatGreatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "transform",
                                                                "translate(0, -20)"
                                                            );
                                                    greatGreatGrandfatherIcon
                                                        .append("circle")
                                                        .attr("cx", 0)
                                                        .attr("cy", -8)
                                                        .attr("r", 8)
                                                        .attr(
                                                            "fill",
                                                            "#d0d0d0"
                                                        );
                                                    greatGreatGrandfatherIcon
                                                        .append("rect")
                                                        .attr("x", -10)
                                                        .attr("y", 0)
                                                        .attr("width", 20)
                                                        .attr("height", 16)
                                                        .attr("rx", 10)
                                                        .attr(
                                                            "fill",
                                                            "#d0d0d0"
                                                        );

                                                    let greatGreatGrandfatherName =
                                                        greatGreatGrandfather.name ||
                                                        greatGreatGrandfather.first_name ||
                                                        "";
                                                    if (
                                                        greatGreatGrandfather.last_name
                                                    )
                                                        greatGreatGrandfatherName +=
                                                            " " +
                                                            greatGreatGrandfather.last_name;
                                                    if (
                                                        !greatGreatGrandfatherName
                                                    )
                                                        greatGreatGrandfatherName =
                                                            "Unknown";

                                                    greatGreatGrandfatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 20)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "12px"
                                                        )
                                                        .attr("fill", "#333")
                                                        .text(
                                                            greatGreatGrandfatherName.length >
                                                                15
                                                                ? greatGreatGrandfatherName.substring(
                                                                      0,
                                                                      15
                                                                  ) + "..."
                                                                : greatGreatGrandfatherName
                                                        );

                                                    // Add button - black style matching root node
                                                    const greatGreatGrandfatherIcons =
                                                        greatGreatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "transform",
                                                                "translate(0, 35)"
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandfather
                                                                    );
                                                                }
                                                            );
                                                    greatGreatGrandfatherIcons
                                                        .append("rect")
                                                        .attr("x", -20)
                                                        .attr("y", -8)
                                                        .attr("width", 40)
                                                        .attr("height", 16)
                                                        .attr("rx", 4)
                                                        .attr("fill", "none")
                                                        .attr(
                                                            "stroke",
                                                            "#d0d0d0"
                                                        )
                                                        .attr("stroke-width", 1)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        );
                                                    greatGreatGrandfatherIcons
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 4)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "10px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .attr("fill", "#333")
                                                        .text("+");

                                                    // Add edit and delete icons automatically
                                                    addEditDeleteIcons(
                                                        greatGreatGrandfatherGroup,
                                                        greatGreatGrandfather.id,
                                                        greatGreatGrandfatherName
                                                    );
                                                }

                                                // Show great-great-grandmother card (right)
                                                if (greatGreatGrandmother) {
                                                    const greatGreatGrandmotherGroup =
                                                        greatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "parent-card"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    greatGreatGrandparentCardWidth /
                                                                        2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentCardY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    if (
                                                                        typeof window.openProfileSidebar ===
                                                                        "function"
                                                                    ) {
                                                                        window.openProfileSidebar(
                                                                            greatGreatGrandmother.id,
                                                                            greatGreatGrandmother
                                                                        );
                                                                    } else {
                                                                        event.preventDefault();
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandmother.id,
                                                                                greatGreatGrandmother
                                                                            );
                                                                        }
                                                                    }
                                                                }
                                                            );

                                                    greatGreatGrandmotherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentCardWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentCardHeight /
                                                                2
                                                        )
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentCardWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentCardHeight
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("ry", 8)
                                                        .attr("fill", "white")
                                                        .attr(
                                                            "stroke",
                                                            "#ffb6c1"
                                                        )
                                                        .attr(
                                                            "stroke-width",
                                                            3
                                                        );

                                                    const greatGreatGrandmotherIcon =
                                                        greatGreatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "transform",
                                                                "translate(0, -20)"
                                                            );
                                                    greatGreatGrandmotherIcon
                                                        .append("circle")
                                                        .attr("cx", 0)
                                                        .attr("cy", -8)
                                                        .attr("r", 8)
                                                        .attr(
                                                            "fill",
                                                            "#d0d0d0"
                                                        );
                                                    greatGreatGrandmotherIcon
                                                        .append("rect")
                                                        .attr("x", -10)
                                                        .attr("y", 0)
                                                        .attr("width", 20)
                                                        .attr("height", 16)
                                                        .attr("rx", 10)
                                                        .attr(
                                                            "fill",
                                                            "#d0d0d0"
                                                        );

                                                    let greatGreatGrandmotherName =
                                                        greatGreatGrandmother.name ||
                                                        greatGreatGrandmother.first_name ||
                                                        "";
                                                    if (
                                                        greatGreatGrandmother.last_name
                                                    )
                                                        greatGreatGrandmotherName +=
                                                            " " +
                                                            greatGreatGrandmother.last_name;
                                                    if (
                                                        !greatGreatGrandmotherName
                                                    )
                                                        greatGreatGrandmotherName =
                                                            "Unknown";

                                                    greatGreatGrandmotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 20)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "12px"
                                                        )
                                                        .attr("fill", "#333")
                                                        .text(
                                                            greatGreatGrandmotherName.length >
                                                                15
                                                                ? greatGreatGrandmotherName.substring(
                                                                      0,
                                                                      15
                                                                  ) + "..."
                                                                : greatGreatGrandmotherName
                                                        );

                                                    // Add button - black style matching root node
                                                    const greatGreatGrandmotherIcons =
                                                        greatGreatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "transform",
                                                                "translate(0, 35)"
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandmother
                                                                    );
                                                                }
                                                            );
                                                    greatGreatGrandmotherIcons
                                                        .append("rect")
                                                        .attr("x", -20)
                                                        .attr("y", -8)
                                                        .attr("width", 40)
                                                        .attr("height", 16)
                                                        .attr("rx", 4)
                                                        .attr("fill", "none")
                                                        .attr(
                                                            "stroke",
                                                            "#d0d0d0"
                                                        )
                                                        .attr("stroke-width", 1)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        );
                                                    greatGreatGrandmotherIcons
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 4)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "10px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .attr("fill", "#333")
                                                        .text("+");

                                                    // Add edit and delete icons automatically
                                                    addEditDeleteIcons(
                                                        greatGreatGrandmotherGroup,
                                                        greatGreatGrandmother.id,
                                                        greatGreatGrandmotherName
                                                    );
                                                }

                                                // Add lines from top center of great-grandmother card, branching to great-great-grandparent cards
                                                const greatGreatGrandparentBranchY =
                                                    greatGreatGrandparentCardY -
                                                    greatGrandparentCardY +
                                                    greatGreatGrandparentCardHeight /
                                                        2 +
                                                    10;
                                                greatGrandmotherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr("x1", 0)
                                                    .attr(
                                                        "y1",
                                                        -greatGrandparentCardHeight /
                                                            2
                                                    )
                                                    .attr("x2", 0)
                                                    .attr(
                                                        "y2",
                                                        greatGreatGrandparentBranchY
                                                    );

                                                if (
                                                    greatGreatGrandfather ||
                                                    greatGreatGrandmother
                                                ) {
                                                    const leftX =
                                                        greatGreatGrandfather
                                                            ? -greatGreatGrandparentCardWidth /
                                                                  2 -
                                                              greatGreatGrandparentSpacing /
                                                                  2
                                                            : 0;
                                                    const rightX =
                                                        greatGreatGrandmother
                                                            ? greatGreatGrandparentCardWidth /
                                                                  2 +
                                                              greatGreatGrandparentSpacing /
                                                                  2
                                                            : greatGreatGrandfather &&
                                                              !greatGreatGrandmother
                                                            ? greatGreatGrandparentCardWidth /
                                                                  2 +
                                                              greatGreatGrandparentSpacing /
                                                                  2
                                                            : 0;
                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr("x1", leftX)
                                                        .attr(
                                                            "y1",
                                                            greatGreatGrandparentBranchY
                                                        )
                                                        .attr("x2", rightX)
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentBranchY
                                                        );

                                                    if (greatGreatGrandfather) {
                                                        greatGrandmotherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "add-parent-line"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentBranchY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y2",
                                                                greatGreatGrandparentCardY -
                                                                    greatGrandparentCardY +
                                                                    greatGreatGrandparentCardHeight /
                                                                        2
                                                            );
                                                    }

                                                    if (greatGreatGrandmother) {
                                                        greatGrandmotherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "add-parent-line"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandparentCardWidth /
                                                                    2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentBranchY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                greatGreatGrandparentCardWidth /
                                                                    2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                            )
                                                            .attr(
                                                                "y2",
                                                                greatGreatGrandparentCardY -
                                                                    greatGrandparentCardY +
                                                                    greatGreatGrandparentCardHeight /
                                                                        2
                                                            );
                                                    }
                                                }

                                                // If great-great-grandfather exists but great-great-grandmother doesn't, show "Add mother" button
                                                if (
                                                    greatGreatGrandfather &&
                                                    !greatGreatGrandmother &&
                                                    !areGreatGrandmotherAncestorsHidden2
                                                ) {
                                                    const addGreatGreatGrandmotherButtonY =
                                                        greatGreatGrandparentCardY -
                                                        greatGrandparentCardY;
                                                    const addGreatGreatGrandmotherGroup =
                                                        greatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    greatGreatGrandparentCardWidth /
                                                                        2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${addGreatGreatGrandmotherButtonY})`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandmother,
                                                                        "mother"
                                                                    );
                                                                }
                                                            );

                                                    addGreatGreatGrandmotherGroup
                                                        .append("rect")
                                                        .attr("width", 90)
                                                        .attr("height", 60)
                                                        .attr("x", -45)
                                                        .attr("y", -30)
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    addGreatGreatGrandmotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    addGreatGreatGrandmotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add mother");

                                                    const addGreatGreatGrandmotherBranchY =
                                                        greatGreatGrandparentBranchY;
                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGreatGrandparentCardWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            addGreatGreatGrandmotherBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentCardWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            addGreatGreatGrandmotherButtonY +
                                                                30
                                                        );
                                                }

                                                // If great-great-grandmother exists but great-great-grandfather doesn't, show "Add father" button
                                                if (
                                                    greatGreatGrandmother &&
                                                    !greatGreatGrandfather &&
                                                    !areGreatGrandmotherAncestorsHidden2
                                                ) {
                                                    const addGreatGreatGrandfatherButtonY =
                                                        greatGreatGrandparentCardY -
                                                        greatGrandparentCardY;
                                                    const addGreatGreatGrandfatherGroup =
                                                        greatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    -greatGreatGrandparentCardWidth /
                                                                        2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${addGreatGreatGrandfatherButtonY})`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandmother,
                                                                        "father"
                                                                    );
                                                                }
                                                            );

                                                    addGreatGreatGrandfatherGroup
                                                        .append("rect")
                                                        .attr("width", 90)
                                                        .attr("height", 60)
                                                        .attr("x", -45)
                                                        .attr("y", -30)
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    addGreatGreatGrandfatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    addGreatGreatGrandfatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add father");

                                                    const addGreatGreatGrandfatherBranchY =
                                                        greatGreatGrandparentBranchY;
                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentCardWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            addGreatGreatGrandfatherBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            -greatGreatGrandparentCardWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            addGreatGreatGrandfatherButtonY +
                                                                30
                                                        );
                                                }
                                            } else if (
                                                !greatGrandmotherHasParents &&
                                                !areGreatGrandmotherAncestorsHidden2
                                            ) {
                                                // Show "Add father" and "Add mother" buttons above great-grandmother card
                                                const greatGreatGrandparentButtonY =
                                                    greatGrandparentCardY - 150;
                                                // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                const greatGreatGrandparentButtonWidth = 100; // Reduced button width to prevent overlap
                                                const greatGreatGrandparentButtonHeight = 70; // Reduced button height to prevent overlap
                                                const greatGreatGrandparentSpacing = 30; // Button spacing

                                                // Add Father button (left) above great-grandmother card
                                                const greatGrandmotherParentFatherGroup =
                                                    greatGrandmotherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                -greatGreatGrandparentButtonWidth /
                                                                    2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                            }, ${
                                                                greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY
                                                            })`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    greatGrandmother,
                                                                    "father"
                                                                );
                                                            }
                                                        );

                                                greatGrandmotherParentFatherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        greatGreatGrandparentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        greatGreatGrandparentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -greatGreatGrandparentButtonHeight /
                                                            2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                greatGrandmotherParentFatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                greatGrandmotherParentFatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add father");

                                                // Add Mother button (right) above great-grandmother card
                                                const greatGrandmotherParentMotherGroup =
                                                    greatGrandmotherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                greatGreatGrandparentButtonWidth /
                                                                    2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                            }, ${
                                                                greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY
                                                            })`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    greatGrandmother,
                                                                    "mother"
                                                                );
                                                            }
                                                        );

                                                greatGrandmotherParentMotherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        greatGreatGrandparentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        greatGreatGrandparentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -greatGreatGrandparentButtonHeight /
                                                            2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                greatGrandmotherParentMotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                greatGrandmotherParentMotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add mother");

                                                // Add lines from top center of great-grandmother card, branching to parent buttons
                                                const greatGrandmotherParentBranchY =
                                                    greatGreatGrandparentButtonY -
                                                    greatGrandparentCardY +
                                                    greatGreatGrandparentButtonHeight /
                                                        2 +
                                                    10;
                                                greatGrandmotherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr("x1", 0)
                                                    .attr(
                                                        "y1",
                                                        -greatGrandparentCardHeight /
                                                            2
                                                    )
                                                    .attr("x2", 0)
                                                    .attr(
                                                        "y2",
                                                        greatGrandmotherParentBranchY
                                                    );

                                                greatGrandmotherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2 -
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandmotherParentBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        greatGreatGrandparentButtonWidth /
                                                            2 +
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGrandmotherParentBranchY
                                                    );

                                                greatGrandmotherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2 -
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandmotherParentBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2 -
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGreatGrandparentButtonY -
                                                            greatGrandparentCardY +
                                                            greatGreatGrandparentButtonHeight /
                                                                2
                                                    );

                                                greatGrandmotherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        greatGreatGrandparentButtonWidth /
                                                            2 +
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandmotherParentBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        greatGreatGrandparentButtonWidth /
                                                            2 +
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGreatGrandparentButtonY -
                                                            greatGrandparentCardY +
                                                            greatGreatGrandparentButtonHeight /
                                                                2
                                                    );
                                            }
                                        }

                                        // Add lines from top center of grandmother card, branching to great-grandparent cards
                                        const greatGrandparentBranchY =
                                            greatGrandparentCardY +
                                            greatGrandparentCardHeight / 2 +
                                            10;
                                        grandmotherGroup
                                            .append("line")
                                            .attr("class", "add-parent-line")
                                            .attr("x1", 0)
                                            .attr(
                                                "y1",
                                                -grandparentCardHeight / 2
                                            )
                                            .attr("x2", 0)
                                            .attr(
                                                "y2",
                                                greatGrandparentBranchY
                                            );

                                        if (
                                            greatGrandfather ||
                                            greatGrandmother
                                        ) {
                                            const leftX = greatGrandfather
                                                ? -greatGrandparentCardWidth /
                                                      2 -
                                                  greatGrandparentSpacing / 2
                                                : 0;
                                            // Extend to right if great-grandmother exists OR if we'll show "Add mother" button
                                            const rightX = greatGrandmother
                                                ? greatGrandparentCardWidth /
                                                      2 +
                                                  greatGrandparentSpacing / 2
                                                : greatGrandfather &&
                                                  !greatGrandmother
                                                ? greatGrandparentCardWidth /
                                                      2 +
                                                  greatGrandparentSpacing / 2
                                                : 0;
                                            grandmotherGroup
                                                .append("line")
                                                .attr(
                                                    "class",
                                                    "add-parent-line"
                                                )
                                                .attr("x1", leftX)
                                                .attr(
                                                    "y1",
                                                    greatGrandparentBranchY
                                                )
                                                .attr("x2", rightX)
                                                .attr(
                                                    "y2",
                                                    greatGrandparentBranchY
                                                );

                                            if (greatGrandfather) {
                                                grandmotherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        -greatGrandparentCardWidth /
                                                            2 -
                                                            greatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandparentBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        -greatGrandparentCardWidth /
                                                            2 -
                                                            greatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGrandparentCardY +
                                                            greatGrandparentCardHeight /
                                                                2
                                                    );
                                            }

                                            if (greatGrandmother) {
                                                grandmotherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        greatGrandparentCardWidth /
                                                            2 +
                                                            greatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandparentBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        greatGrandparentCardWidth /
                                                            2 +
                                                            greatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGrandparentCardY +
                                                            greatGrandparentCardHeight /
                                                                2
                                                    );
                                            }
                                        }

                                        // Show "Add father" button if great-grandfather doesn't exist
                                        if (!greatGrandfather) {
                                            const addGreatGrandfatherButtonY =
                                                grandmotherParentButtonY -
                                                grandparentCardY;
                                            const addGreatGrandfatherGroup =
                                                grandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "add-parent-button"
                                                    )
                                                    .attr(
                                                        "transform",
                                                        `translate(${
                                                            -greatGrandparentCardWidth /
                                                                2 -
                                                            greatGrandparentSpacing /
                                                                2
                                                        }, ${addGreatGrandfatherButtonY})`
                                                    )
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            addParentFromNode(
                                                                grandmother,
                                                                "father"
                                                            );
                                                        }
                                                    );

                                            addGreatGrandfatherGroup
                                                .append("rect")
                                                .attr(
                                                    "width",
                                                    parentButtonWidth
                                                )
                                                .attr(
                                                    "height",
                                                    parentButtonHeight
                                                )
                                                .attr(
                                                    "x",
                                                    -parentButtonWidth / 2
                                                )
                                                .attr(
                                                    "y",
                                                    -parentButtonHeight / 2
                                                )
                                                .attr("rx", 8)
                                                .attr("stroke", "#ddd")
                                                .attr("stroke-width", 2)
                                                .attr("stroke-dasharray", "5,5")
                                                .attr("fill", "white");

                                            addGreatGrandfatherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", -15)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "28px")
                                                .attr("font-weight", "300")
                                                .text("+");

                                            addGreatGrandfatherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 8)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "11px")
                                                .attr("font-weight", "500")
                                                .text("Add father");

                                            const addGreatGrandfatherBranchY =
                                                greatGrandparentBranchY ||
                                                grandmotherParentButtonY -
                                                    grandparentCardY;
                                            grandmotherGroup
                                                .append("line")
                                                .attr(
                                                    "class",
                                                    "add-parent-line"
                                                )
                                                .attr(
                                                    "x1",
                                                    -greatGrandparentCardWidth /
                                                        2 -
                                                        greatGrandparentSpacing /
                                                            2
                                                )
                                                .attr(
                                                    "y1",
                                                    addGreatGrandfatherBranchY
                                                )
                                                .attr(
                                                    "x2",
                                                    -greatGrandparentCardWidth /
                                                        2 -
                                                        greatGrandparentSpacing /
                                                            2
                                                )
                                                .attr(
                                                    "y2",
                                                    addGreatGrandfatherButtonY +
                                                        parentButtonHeight / 2
                                                );
                                        }

                                        // Show "Add mother" button if great-grandmother doesn't exist
                                        if (!greatGrandmother) {
                                            const addGreatGrandmotherButtonY =
                                                grandmotherParentButtonY -
                                                grandparentCardY;
                                            const addGreatGrandmotherGroup =
                                                grandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "add-parent-button"
                                                    )
                                                    .attr(
                                                        "transform",
                                                        `translate(${
                                                            greatGrandparentCardWidth /
                                                                2 +
                                                            greatGrandparentSpacing /
                                                                2
                                                        }, ${addGreatGrandmotherButtonY})`
                                                    )
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            addParentFromNode(
                                                                grandmother,
                                                                "mother"
                                                            );
                                                        }
                                                    );

                                            addGreatGrandmotherGroup
                                                .append("rect")
                                                .attr(
                                                    "width",
                                                    parentButtonWidth
                                                )
                                                .attr(
                                                    "height",
                                                    parentButtonHeight
                                                )
                                                .attr(
                                                    "x",
                                                    -parentButtonWidth / 2
                                                )
                                                .attr(
                                                    "y",
                                                    -parentButtonHeight / 2
                                                )
                                                .attr("rx", 8)
                                                .attr("stroke", "#ddd")
                                                .attr("stroke-width", 2)
                                                .attr("stroke-dasharray", "5,5")
                                                .attr("fill", "white");

                                            addGreatGrandmotherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", -15)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "28px")
                                                .attr("font-weight", "300")
                                                .text("+");

                                            addGreatGrandmotherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 8)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "11px")
                                                .attr("font-weight", "500")
                                                .text("Add mother");

                                            const addGreatGrandmotherBranchY =
                                                greatGrandparentBranchY ||
                                                grandmotherParentButtonY -
                                                    grandparentCardY;
                                            grandmotherGroup
                                                .append("line")
                                                .attr(
                                                    "class",
                                                    "add-parent-line"
                                                )
                                                .attr(
                                                    "x1",
                                                    greatGrandparentCardWidth /
                                                        2 +
                                                        greatGrandparentSpacing /
                                                            2
                                                )
                                                .attr(
                                                    "y1",
                                                    addGreatGrandmotherBranchY
                                                )
                                                .attr(
                                                    "x2",
                                                    greatGrandparentCardWidth /
                                                        2 +
                                                        greatGrandparentSpacing /
                                                            2
                                                )
                                                .attr(
                                                    "y2",
                                                    addGreatGrandmotherButtonY +
                                                        parentButtonHeight / 2
                                                );
                                        }
                                    } else {
                                        // No visible parents for grandmother - show "Add father" and "Add mother" buttons
                                        // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                        const parentButtonWidth = 140; // Standardized button width for all generations
                                        const parentButtonHeight = 90; // Standardized button height for all generations
                                        const parentSpacing = 30; // Standardized button spacing for all generations

                                        const grandmotherParentFatherGroup =
                                            grandmotherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "add-parent-button"
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${
                                                        -parentButtonWidth / 2 -
                                                        parentSpacing / 2
                                                    }, ${
                                                        grandmotherParentButtonY -
                                                        grandparentCardY
                                                    })`
                                                )
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    addParentFromNode(
                                                        grandmother,
                                                        "father"
                                                    );
                                                });

                                        grandmotherParentFatherGroup
                                            .append("rect")
                                            .attr("width", parentButtonWidth)
                                            .attr("height", parentButtonHeight)
                                            .attr("x", -parentButtonWidth / 2)
                                            .attr("y", -parentButtonHeight / 2)
                                            .attr("rx", 8)
                                            .attr("stroke", "#ddd")
                                            .attr("stroke-width", 2)
                                            .attr("stroke-dasharray", "5,5")
                                            .attr("fill", "white");

                                        grandmotherParentFatherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", -15)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "28px")
                                            .attr("font-weight", "300")
                                            .text("+");

                                        grandmotherParentFatherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", 8)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "11px")
                                            .attr("font-weight", "500")
                                            .text("Add father");

                                        const grandmotherParentMotherGroup =
                                            grandmotherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "add-parent-button"
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${
                                                        parentButtonWidth / 2 +
                                                        parentSpacing / 2
                                                    }, ${
                                                        grandmotherParentButtonY -
                                                        grandparentCardY
                                                    })`
                                                )
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    addParentFromNode(
                                                        grandmother,
                                                        "mother"
                                                    );
                                                });

                                        grandmotherParentMotherGroup
                                            .append("rect")
                                            .attr("width", parentButtonWidth)
                                            .attr("height", parentButtonHeight)
                                            .attr("x", -parentButtonWidth / 2)
                                            .attr("y", -parentButtonHeight / 2)
                                            .attr("rx", 8)
                                            .attr("stroke", "#ddd")
                                            .attr("stroke-width", 2)
                                            .attr("stroke-dasharray", "5,5")
                                            .attr("fill", "white");

                                        grandmotherParentMotherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", -15)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "28px")
                                            .attr("font-weight", "300")
                                            .text("+");

                                        grandmotherParentMotherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", 8)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "11px")
                                            .attr("font-weight", "500")
                                            .text("Add mother");

                                        // Lines connecting grandmother to buttons
                                        const grandmotherBranchY =
                                            grandmotherParentButtonY -
                                            grandparentCardY +
                                            parentButtonHeight / 2 +
                                            10;
                                        grandmotherGroup
                                            .append("line")
                                            .attr("class", "add-parent-line")
                                            .attr("x1", 0)
                                            .attr(
                                                "y1",
                                                -grandparentCardHeight / 2
                                            )
                                            .attr("x2", 0)
                                            .attr("y2", grandmotherBranchY);

                                        grandmotherGroup
                                            .append("line")
                                            .attr("class", "add-parent-line")
                                            .attr(
                                                "x1",
                                                -parentButtonWidth / 2 -
                                                    parentSpacing / 2
                                            )
                                            .attr("y1", grandmotherBranchY)
                                            .attr(
                                                "x2",
                                                parentButtonWidth / 2 +
                                                    parentSpacing / 2
                                            )
                                            .attr("y2", grandmotherBranchY);

                                        grandmotherGroup
                                            .append("line")
                                            .attr("class", "add-parent-line")
                                            .attr(
                                                "x1",
                                                -parentButtonWidth / 2 -
                                                    parentSpacing / 2
                                            )
                                            .attr("y1", grandmotherBranchY)
                                            .attr(
                                                "x2",
                                                -parentButtonWidth / 2 -
                                                    parentSpacing / 2
                                            )
                                            .attr(
                                                "y2",
                                                grandmotherParentButtonY -
                                                    grandparentCardY +
                                                    parentButtonHeight / 2
                                            );

                                        grandmotherGroup
                                            .append("line")
                                            .attr("class", "add-parent-line")
                                            .attr(
                                                "x1",
                                                parentButtonWidth / 2 +
                                                    parentSpacing / 2
                                            )
                                            .attr("y1", grandmotherBranchY)
                                            .attr(
                                                "x2",
                                                parentButtonWidth / 2 +
                                                    parentSpacing / 2
                                            )
                                            .attr(
                                                "y2",
                                                grandmotherParentButtonY -
                                                    grandparentCardY +
                                                    parentButtonHeight / 2
                                            );
                                    }
                                } // End of shouldShowGrandparentsAncestors check for grandmother
                            }

                            // Add lines from top center of father card, branching to grandparent cards
                            const grandparentBranchY =
                                grandparentCardY +
                                grandparentCardHeight / 2 +
                                10;
                            fatherGroup
                                .append("line")
                                .attr("class", "add-parent-line")
                                .attr("x1", 0)
                                .attr("y1", -cardHeight / 2)
                                .attr("x2", 0)
                                .attr("y2", grandparentBranchY);

                            if (grandfather || grandmother) {
                                const leftX = grandfather
                                    ? -grandparentCardWidth / 2 -
                                      grandparentSpacing / 2
                                    : 0;
                                // Extend to right if grandmother exists OR if we'll show "Add mother" button
                                const rightX = grandmother
                                    ? grandparentCardWidth / 2 +
                                      grandparentSpacing / 2 +
                                      30
                                    : grandfather && !grandmother
                                    ? grandparentCardWidth / 2 +
                                      grandparentSpacing / 2 +
                                      30
                                    : 0;
                                fatherGroup
                                    .append("line")
                                    .attr("class", "add-parent-line")
                                    .attr("x1", leftX)
                                    .attr("y1", grandparentBranchY)
                                    .attr("x2", rightX)
                                    .attr("y2", grandparentBranchY);

                                if (grandfather) {
                                    fatherGroup
                                        .append("line")
                                        .attr("class", "add-parent-line")
                                        .attr(
                                            "x1",
                                            -grandparentCardWidth / 2 -
                                                grandparentSpacing / 2
                                        )
                                        .attr("y1", grandparentBranchY)
                                        .attr(
                                            "x2",
                                            -grandparentCardWidth / 2 -
                                                grandparentSpacing / 2
                                        )
                                        .attr(
                                            "y2",
                                            grandparentCardY +
                                                grandparentCardHeight / 2
                                        );
                                }

                                if (grandmother) {
                                    fatherGroup
                                        .append("line")
                                        .attr("class", "add-parent-line")
                                        .attr(
                                            "x1",
                                            grandparentCardWidth / 2 +
                                                grandparentSpacing / 2 +
                                                30
                                        )
                                        .attr("y1", grandparentBranchY)
                                        .attr(
                                            "x2",
                                            grandparentCardWidth / 2 +
                                                grandparentSpacing / 2 +
                                                30
                                        )
                                        .attr(
                                            "y2",
                                            grandparentCardY +
                                                grandparentCardHeight / 2
                                        );
                                }
                            }

                            // If grandfather exists but grandmother doesn't, show "Add mother" button
                            if (grandfather && !grandmother) {
                                const addGrandmotherButtonY =
                                    fatherParentButtonY - cardY;
                                const addGrandmotherGroup = fatherGroup
                                    .append("g")
                                    .attr("class", "add-parent-button")
                                    .attr(
                                        "transform",
                                        `translate(${
                                            grandparentCardWidth / 2 +
                                            parentSpacing / 2
                                        }, ${addGrandmotherButtonY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        addParentFromNode(father, "mother");
                                    });

                                addGrandmotherGroup
                                    .append("rect")
                                    .attr("width", parentButtonWidth)
                                    .attr("height", parentButtonHeight)
                                    .attr("x", -parentButtonWidth / 2)
                                    .attr("y", -parentButtonHeight / 2)
                                    .attr("rx", 8)
                                    .attr("stroke", "#ddd")
                                    .attr("stroke-width", 2)
                                    .attr("stroke-dasharray", "5,5")
                                    .attr("fill", "white");

                                addGrandmotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", -15)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "28px")
                                    .attr("font-weight", "300")
                                    .text("+");

                                addGrandmotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 8)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "11px")
                                    .attr("font-weight", "500")
                                    .text("Add mother");

                                // Add line to "Add mother" button from the horizontal branch line
                                const addGrandmotherBranchY =
                                    grandparentBranchY;
                                fatherGroup
                                    .append("line")
                                    .attr("class", "add-parent-line")
                                    .attr(
                                        "x1",
                                        grandparentCardWidth / 2 +
                                            parentSpacing / 2
                                    )
                                    .attr("y1", addGrandmotherBranchY)
                                    .attr(
                                        "x2",
                                        grandparentCardWidth / 2 +
                                            parentSpacing / 2
                                    )
                                    .attr(
                                        "y2",
                                        addGrandmotherButtonY +
                                            parentButtonHeight / 2
                                    );
                            }

                            // If grandmother exists but grandfather doesn't, show "Add father" button
                            if (grandmother && !grandfather) {
                                const addGrandfatherButtonY =
                                    fatherParentButtonY - cardY;
                                const addGrandfatherGroup = fatherGroup
                                    .append("g")
                                    .attr("class", "add-parent-button")
                                    .attr(
                                        "transform",
                                        `translate(${
                                            -grandparentCardWidth / 2 -
                                            grandparentSpacing / 2
                                        }, ${addGrandfatherButtonY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        addParentFromNode(father, "father");
                                    });

                                addGrandfatherGroup
                                    .append("rect")
                                    .attr("width", parentButtonWidth)
                                    .attr("height", parentButtonHeight)
                                    .attr("x", -parentButtonWidth / 2)
                                    .attr("y", -parentButtonHeight / 2)
                                    .attr("rx", 8)
                                    .attr("stroke", "#ddd")
                                    .attr("stroke-width", 2)
                                    .attr("stroke-dasharray", "5,5")
                                    .attr("fill", "white");

                                addGrandfatherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", -15)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "28px")
                                    .attr("font-weight", "300")
                                    .text("+");

                                addGrandfatherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 8)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "11px")
                                    .attr("font-weight", "500")
                                    .text("Add father");

                                // Add line to "Add father" button from the horizontal branch line
                                const addGrandfatherBranchY =
                                    grandparentBranchY;
                                fatherGroup
                                    .append("line")
                                    .attr("class", "add-parent-line")
                                    .attr(
                                        "x1",
                                        -grandparentCardWidth / 2 -
                                            grandparentSpacing / 2
                                    )
                                    .attr("y1", addGrandfatherBranchY)
                                    .attr(
                                        "x2",
                                        -grandparentCardWidth / 2 -
                                            grandparentSpacing / 2
                                    )
                                    .attr(
                                        "y2",
                                        addGrandfatherButtonY +
                                            parentButtonHeight / 2
                                    );
                            }

                            // Draw TWO straight horizontal lines between grandfather and grandmother when grandmother has partner (matching MyHeritage)
                            // This must be AFTER all other lines are drawn so they appear on top
                            if (
                                grandmotherPartners.length > 0 &&
                                grandfather &&
                                grandmother
                            ) {
                                console.log(
                                    "Drawing two lines between grandfather and grandmother. Partners:",
                                    grandmotherPartners.length,
                                    "Grandfather:",
                                    grandfather.name || grandfather.first_name,
                                    "Grandmother:",
                                    grandmother.name || grandmother.first_name
                                );
                                // Use EXACT same positions as the actual cards are drawn
                                // fatherGroup has transform: translate(-cardWidth / 2 - spacing / 2 - 100, cardY)
                                // So we need to account for fatherGroup's X offset
                                const fatherGroupXOffset =
                                    -cardWidth / 2 - spacing / 2 - 100;

                                // Grandfather card is at: -grandparentCardWidth / 2 - grandparentSpacing / 2 (relative to fatherGroup)
                                const grandfatherX =
                                    -grandparentCardWidth / 2 -
                                    grandparentSpacing / 2;
                                // Grandmother card is at: grandparentCardWidth / 2 + grandparentSpacing / 2 + 30 (relative to fatherGroup)
                                const grandmotherX =
                                    grandparentCardWidth / 2 +
                                    grandparentSpacing / 2 +
                                    30;
                                const mainPersonNode = root
                                    .descendants()
                                    .find(
                                        (d) =>
                                            d.data.id === mainPersonId &&
                                            d.data.id !== "virtual-root"
                                    );
                                if (mainPersonNode) {
                                    // Calculate absolute positions: mainPersonNode position + fatherGroup offset + card position
                                    const absoluteGrandfatherX =
                                        mainPersonNode.x +
                                        fatherGroupXOffset +
                                        grandfatherX;
                                    const absoluteGrandmotherX =
                                        mainPersonNode.x +
                                        fatherGroupXOffset +
                                        grandmotherX;
                                    const middleLineY =
                                        mainPersonNode.y +
                                        cardY +
                                        grandparentCardY; // Middle/center Y of cards (cardY is fatherGroup's Y offset)

                                    // Separate the two lines with a small distance (4px apart) so they're visible as separate lines
                                    const lineSeparation = 4; // Small separation between the two lines

                                    // Make lines extend fully from grandfather card's right edge to grandmother card's left edge
                                    // grandparentCardWidth / 2 gives us the distance from card center to card edge
                                    const lineStartX =
                                        absoluteGrandfatherX +
                                        grandparentCardWidth / 2; // Start at right edge of grandfather card
                                    const lineEndX =
                                        absoluteGrandmotherX -
                                        grandparentCardWidth / 2; // End at left edge of grandmother card

                                    console.log(
                                        "Line positions - Start X:",
                                        lineStartX,
                                        "End X:",
                                        lineEndX,
                                        "Y:",
                                        middleLineY
                                    );

                                    // Draw first straight horizontal line between grandfather and grandmother (Line 1)
                                    // Positioned slightly above center - raise to top so it's visible
                                    const line1 = g
                                        .append("line")
                                        .attr(
                                            "class",
                                            "spouse-link grandparent-spouse-link-first"
                                        )
                                        .attr("x1", lineStartX)
                                        .attr(
                                            "y1",
                                            middleLineY - lineSeparation / 2
                                        ) // Slightly above center
                                        .attr("x2", lineEndX)
                                        .attr(
                                            "y2",
                                            middleLineY - lineSeparation / 2
                                        )
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2)
                                        .style("pointer-events", "none")
                                        .raise(); // Raise to top

                                    // Draw second straight horizontal line between grandfather and grandmother (Line 2)
                                    // Positioned slightly below center - raise to top so it's visible
                                    const line2 = g
                                        .append("line")
                                        .attr(
                                            "class",
                                            "spouse-link grandparent-spouse-link-second"
                                        )
                                        .attr("x1", lineStartX)
                                        .attr(
                                            "y1",
                                            middleLineY + lineSeparation / 2
                                        ) // Slightly below center
                                        .attr("x2", lineEndX)
                                        .attr(
                                            "y2",
                                            middleLineY + lineSeparation / 2
                                        )
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2)
                                        .style("pointer-events", "none")
                                        .raise(); // Raise to top

                                    console.log(
                                        "Two lines drawn between grandfather and grandmother - raised to top"
                                    );

                                    // Note: Line from grandmother to grandfather partner is already drawn in fatherGroup section
                                    // (around line 10580) to avoid duplicates
                                } else {
                                    console.log(
                                        "Main person node not found for drawing grandfather-grandmother lines"
                                    );
                                }
                            }
                        } else {
                            // No visible grandparents - check if we should show "Add father" and "Add mother" buttons
                            // Only show "Add" buttons if father has NO actual parents (not just hidden)
                            // If parents exist but are hidden, we should show parent cards instead (handled above)
                            const fatherHasActualParents =
                                fatherParents && fatherParents.length > 0;
                            const areFatherAncestorsHidden = areAncestorsHidden(
                                father.id
                            );

                            console.log(
                                "Checking if should show Add buttons for father:",
                                {
                                    fatherName:
                                        father.name || father.first_name,
                                    fatherId: father.id,
                                    fatherHasActualParents:
                                        fatherHasActualParents,
                                    fatherParents: fatherParents,
                                    areFatherAncestorsHidden:
                                        areFatherAncestorsHidden,
                                }
                            );

                            // Only show "Add" buttons if father has NO actual parents
                            // Don't check areAncestorsHidden - if parents exist but are hidden, they should be shown above
                            if (!fatherHasActualParents) {
                                console.log(
                                    "Father has no actual parents - showing Add buttons"
                                );
                                // Add Father button (left) above father card
                                const fatherParentFatherGroup = fatherGroup
                                    .append("g")
                                    .attr("class", "add-parent-button")
                                    .attr(
                                        "transform",
                                        `translate(${
                                            -parentButtonWidth / 2 -
                                            parentSpacing / 2
                                        }, ${fatherParentButtonY - cardY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        addParentFromNode(father, "father");
                                    });

                                fatherParentFatherGroup
                                    .append("rect")
                                    .attr("width", parentButtonWidth)
                                    .attr("height", parentButtonHeight)
                                    .attr("x", -parentButtonWidth / 2)
                                    .attr("y", -parentButtonHeight / 2)
                                    .attr("rx", 8)
                                    .attr("stroke", "#ddd")
                                    .attr("stroke-width", 2)
                                    .attr("stroke-dasharray", "5,5")
                                    .attr("fill", "white");

                                fatherParentFatherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", -15)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "28px")
                                    .attr("font-weight", "300")
                                    .text("+");

                                fatherParentFatherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 8)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "11px")
                                    .attr("font-weight", "500")
                                    .text("Add father");

                                // Add Mother button (right) above father card
                                const fatherParentMotherGroup = fatherGroup
                                    .append("g")
                                    .attr("class", "add-parent-button")
                                    .attr(
                                        "transform",
                                        `translate(${
                                            parentButtonWidth / 2 +
                                            parentSpacing / 2
                                        }, ${fatherParentButtonY - cardY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        addParentFromNode(father, "mother");
                                    });

                                fatherParentMotherGroup
                                    .append("rect")
                                    .attr("width", parentButtonWidth)
                                    .attr("height", parentButtonHeight)
                                    .attr("x", -parentButtonWidth / 2)
                                    .attr("y", -parentButtonHeight / 2)
                                    .attr("rx", 8)
                                    .attr("stroke", "#ddd")
                                    .attr("stroke-width", 2)
                                    .attr("stroke-dasharray", "5,5")
                                    .attr("fill", "white");

                                fatherParentMotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", -15)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "28px")
                                    .attr("font-weight", "300")
                                    .text("+");

                                fatherParentMotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 8)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "11px")
                                    .attr("font-weight", "500")
                                    .text("Add mother");

                                // Add lines from top center of father card, branching to parent buttons
                                const fatherParentBranchY =
                                    fatherParentButtonY -
                                    cardY +
                                    parentButtonHeight / 2 +
                                    10;
                                fatherGroup
                                    .append("line")
                                    .attr("class", "add-parent-line")
                                    .attr("x1", 0)
                                    .attr("y1", -cardHeight / 2)
                                    .attr("x2", 0)
                                    .attr("y2", fatherParentBranchY);

                                fatherGroup
                                    .append("line")
                                    .attr("class", "add-parent-line")
                                    .attr(
                                        "x1",
                                        -parentButtonWidth / 2 -
                                            parentSpacing / 2
                                    )
                                    .attr("y1", fatherParentBranchY)
                                    .attr(
                                        "x2",
                                        parentButtonWidth / 2 +
                                            parentSpacing / 2
                                    )
                                    .attr("y2", fatherParentBranchY);

                                fatherGroup
                                    .append("line")
                                    .attr("class", "add-parent-line")
                                    .attr(
                                        "x1",
                                        -parentButtonWidth / 2 -
                                            parentSpacing / 2
                                    )
                                    .attr("y1", fatherParentBranchY)
                                    .attr(
                                        "x2",
                                        -parentButtonWidth / 2 -
                                            parentSpacing / 2
                                    )
                                    .attr(
                                        "y2",
                                        fatherParentButtonY -
                                            cardY +
                                            parentButtonHeight / 2
                                    );

                                fatherGroup
                                    .append("line")
                                    .attr("class", "add-parent-line")
                                    .attr(
                                        "x1",
                                        parentButtonWidth / 2 +
                                            parentSpacing / 2
                                    )
                                    .attr("y1", fatherParentBranchY)
                                    .attr(
                                        "x2",
                                        parentButtonWidth / 2 +
                                            parentSpacing / 2
                                    )
                                    .attr(
                                        "y2",
                                        fatherParentButtonY -
                                            cardY +
                                            parentButtonHeight / 2
                                    );
                            }
                        }
                    } // End of shouldShowFatherBranch check for father's parents/grandparents
                }

                // If father exists but mother doesn't, show "Add mother" button above main person
                if (father && !mother) {
                    const addMotherButtonY = cardY; // Position at same level as parent cards
                    const buttonWidth = 90;
                    const buttonHeight = 60;
                    const buttonSpacing = spacing; // Use same spacing as parent cards

                    console.log(
                        "Adding Add Mother button for:",
                        d.data.first_name,
                        "father:",
                        father.first_name,
                        "mother:",
                        mother
                    );

                    // Add Mother button (right side, where mother card would be)
                    const addMotherGroup = node
                        .append("g")
                        .attr("class", "add-parent-button")
                        .attr(
                            "transform",
                            `translate(${
                                cardWidth / 2 + buttonSpacing / 2
                            }, ${addMotherButtonY})`
                        )
                        .on("click", function (event) {
                            event.stopPropagation();
                            addParentFromNode(d.data, "mother");
                        });

                    addMotherGroup
                        .append("rect")
                        .attr("width", buttonWidth)
                        .attr("height", buttonHeight)
                        .attr("x", -buttonWidth / 2)
                        .attr("y", -buttonHeight / 2)
                        .attr("rx", 8)
                        .attr("stroke", "#ddd")
                        .attr("stroke-width", 2)
                        .attr("stroke-dasharray", "5,5")
                        .attr("fill", "white");

                    addMotherGroup
                        .append("text")
                        .attr("x", 0)
                        .attr("y", -15)
                        .attr("text-anchor", "middle")
                        .attr("font-size", "28px")
                        .attr("font-weight", "300")
                        .text("+");

                    addMotherGroup
                        .append("text")
                        .attr("x", 0)
                        .attr("y", 8)
                        .attr("text-anchor", "middle")
                        .attr("font-size", "11px")
                        .attr("font-weight", "500")
                        .text("Add mother");
                }

                // Show mother card (right) - but hide if father's branch is toggled
                console.log(
                    "Mother card check - mother:",
                    mother ? mother.name || mother.first_name : "null",
                    "shouldShowMother:",
                    shouldShowMother,
                    "fatherBranchToggled:",
                    window.fatherBranchToggled
                );
                if (mother && shouldShowMother) {
                    // Find mother's partners (spouses excluding father)
                    // BUT: Only show if mother's branch is visible (not hidden when father's branch is toggled)
                    const motherPartners = [];
                    if (
                        shouldShowMotherBranch &&
                        mother.spouses &&
                        mother.spouses.length > 0
                    ) {
                        mother.spouses.forEach((spouseId) => {
                            // Exclude father (he's already drawn as a parent)
                            if (father && spouseId === father.id) return;
                            // Exclude if this spouse is also a parent of main person
                            if (parents.includes(spouseId)) return;

                            const partnerData = treeData.find(
                                (p) => p.id === spouseId
                            );
                            if (partnerData) {
                                motherPartners.push(partnerData);
                                console.log(
                                    "Found mother partner:",
                                    partnerData.name || partnerData.first_name
                                );
                            }
                        });
                    }
                    console.log(
                        "Total mother partners found:",
                        motherPartners.length,
                        motherPartners.map((p) => p.name || p.first_name),
                        "shouldShowMotherBranch:",
                        shouldShowMotherBranch
                    );

                    // Draw mother's partner cards to the LEFT of father card (matching MyHeritage)
                    // Only show when mother's branch is visible
                    if (shouldShowMotherBranch) {
                        motherPartners.forEach((partner, index) => {
                            // Use EXACT same father card position as actual card
                            const fatherX = -cardWidth / 2 - spacing / 2 - 100;
                            const partnerSpacing = 200; // Spacing between cards
                            // Position to the left of father card
                            const partnerX =
                                fatherX -
                                cardWidth -
                                partnerSpacing -
                                index * (cardWidth + partnerSpacing);
                            const partnerY = cardY; // Same Y as father and mother

                            const partnerGroup = node
                                .append("g")
                                .attr(
                                    "class",
                                    "parent-partner-card mother-partner-card"
                                )
                                .attr(
                                    "transform",
                                    `translate(${partnerX}, ${partnerY})`
                                )
                                .on("click", function (event) {
                                    event.preventDefault();
                                    event.stopPropagation();
                                    if (
                                        typeof window.openProfileSidebar ===
                                        "function"
                                    ) {
                                        window.openProfileSidebar(
                                            partner.id,
                                            partner
                                        );
                                    }
                                });

                            // Card rectangle with border color based on gender
                            // Mother's partner should always be male (blue) - opposite of mother
                            const borderColor = "#add8e6"; // Always blue for mother's partner
                            partnerGroup
                                .append("rect")
                                .attr("x", -cardWidth / 2)
                                .attr("y", -cardHeight / 2)
                                .attr("width", cardWidth)
                                .attr("height", cardHeight)
                                .attr("rx", 8)
                                .attr("ry", 8)
                                .attr("fill", "white")
                                .attr("stroke", borderColor)
                                .attr("stroke-width", 3)
                                .style(
                                    "filter",
                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                );

                            // Use renderAvatar to support photos
                            // Force male avatar for mother's partner (opposite of mother)
                            const partnerIcon = partnerGroup
                                .append("g")
                                .attr("transform", "translate(0, -20)");
                            // Create a copy of partner with gender forced to "male" for avatar rendering
                            const partnerForAvatar = {
                                ...partner,
                                gender: "male",
                            };
                            renderAvatar(partnerIcon, partnerForAvatar, svg);

                            // Name
                            let partnerName = partner.name;
                            if (!partnerName) {
                                partnerName = partner.first_name || "";
                                if (partner.last_name) {
                                    partnerName += " " + partner.last_name;
                                }
                                if (!partnerName) {
                                    partnerName = "Unknown";
                                }
                            }
                            partnerGroup
                                .append("text")
                                .attr("x", 0)
                                .attr("y", 20)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "12px")
                                .attr("fill", "#333")
                                .text(
                                    partnerName.length > 15
                                        ? partnerName.substring(0, 25) + "..."
                                        : partnerName
                                );

                            // Add + icon
                            partnerGroup
                                .append("circle")
                                .attr("cx", 0)
                                .attr("cy", 32)
                                .attr("r", 10)
                                .attr("fill", "white")
                                .attr("stroke", "#999")
                                .attr("stroke-width", 1)
                                .style("cursor", "pointer")
                                .on("click", function (event) {
                                    event.stopPropagation();
                                    openBranchBuilder(partner);
                                });
                            partnerGroup
                                .append("text")
                                .attr("x", 0)
                                .attr("y", 36)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "16px")
                                .attr("font-weight", "bold")
                                .text("+")
                                .style("cursor", "pointer")
                                .on("click", function (event) {
                                    event.stopPropagation();
                                    openBranchBuilder(partner);
                                });

                            // Add edit and delete icons
                            addEditDeleteIcons(
                                partnerGroup,
                                partner.id,
                                partnerName
                            );

                            console.log(
                                `Drew mother partner card for ${partnerName} at (${partnerX}, ${partnerY})`
                            );

                            // ====================================================================
                            // ADD RELATIONS TO MOTHER'S PARTNER CARD (same logic as mother card)
                            // ====================================================================

                            // Find siblings of mother's partner
                            const motherPartnerSiblings = [];
                            if (
                                partner.siblings &&
                                partner.siblings.length > 0
                            ) {
                                partner.siblings.forEach((siblingId) => {
                                    const siblingData = treeData.find(
                                        (p) => p.id === siblingId
                                    );
                                    if (
                                        siblingData &&
                                        siblingData.id !== partner.id &&
                                        siblingData.id !== mother.id &&
                                        !partner.parents?.includes(siblingId)
                                    ) {
                                        motherPartnerSiblings.push(siblingData);
                                    }
                                });
                            }
                            // Also check implicit siblings (shared parents)
                            if (partner.parents && partner.parents.length > 0) {
                                treeData.forEach((p) => {
                                    if (
                                        p.id === partner.id ||
                                        p.id === mother.id ||
                                        p.id === mainPersonId ||
                                        partner.parents.includes(p.id)
                                    )
                                        return;
                                    if (
                                        p.parents &&
                                        p.parents.length > 0 &&
                                        p.parents.every((pId) =>
                                            partner.parents.includes(pId)
                                        ) &&
                                        partner.parents.every((pId) =>
                                            p.parents.includes(pId)
                                        ) &&
                                        !motherPartnerSiblings.find(
                                            (s) => s.id === p.id
                                        )
                                    ) {
                                        motherPartnerSiblings.push(p);
                                    }
                                });
                            }

                            // Sort siblings: brothers first, then sisters
                            motherPartnerSiblings.sort((a, b) => {
                                if (
                                    a.gender === "male" &&
                                    b.gender === "female"
                                )
                                    return -1;
                                if (
                                    a.gender === "female" &&
                                    b.gender === "male"
                                )
                                    return 1;
                                return a.id - b.id;
                            });

                            // Draw mother's partner's sibling cards to the right of partner card
                            if (
                                motherPartnerSiblings.length > 0 &&
                                shouldShowMotherBranch
                            ) {
                                const partnerSiblingSpacing = 200;
                                motherPartnerSiblings.forEach(
                                    (sibling, siblingIndex) => {
                                        const siblingX =
                                            partnerX +
                                            cardWidth +
                                            partnerSiblingSpacing +
                                            siblingIndex *
                                                (cardWidth +
                                                    partnerSiblingSpacing);
                                        const siblingY = cardY;

                                        const siblingGroup = node
                                            .append("g")
                                            .attr(
                                                "class",
                                                "parent-sibling-card mother-partner-sibling-card"
                                            )
                                            .attr(
                                                "transform",
                                                `translate(${siblingX}, ${siblingY})`
                                            )
                                            .on("click", function (event) {
                                                event.preventDefault();
                                                event.stopPropagation();
                                                if (
                                                    typeof window.openProfileSidebar ===
                                                    "function"
                                                ) {
                                                    window.openProfileSidebar(
                                                        sibling.id,
                                                        sibling
                                                    );
                                                }
                                            });

                                        const borderColor =
                                            sibling.gender === "female"
                                                ? "#ffb6c1"
                                                : "#add8e6";
                                        siblingGroup
                                            .append("rect")
                                            .attr("x", -cardWidth / 2)
                                            .attr("y", -cardHeight / 2)
                                            .attr("width", cardWidth)
                                            .attr("height", cardHeight)
                                            .attr("rx", 8)
                                            .attr("ry", 8)
                                            .attr("fill", "white")
                                            .attr("stroke", borderColor)
                                            .attr("stroke-width", 3)
                                            .style(
                                                "filter",
                                                "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                            );

                                        // Silhouette icon
                                        const siblingIcon = siblingGroup
                                            .append("g")
                                            .attr(
                                                "transform",
                                                "translate(0, -20)"
                                            );
                                        siblingIcon
                                            .append("circle")
                                            .attr("cx", 0)
                                            .attr("cy", -8)
                                            .attr("r", 8)
                                            .attr("fill", "#d0d0d0");
                                        siblingIcon
                                            .append("rect")
                                            .attr("x", -10)
                                            .attr("y", 0)
                                            .attr("width", 20)
                                            .attr("height", 16)
                                            .attr("rx", 10)
                                            .attr("fill", "#d0d0d0");

                                        // Name
                                        let siblingName =
                                            sibling.name ||
                                            sibling.first_name ||
                                            "Unknown";
                                        if (
                                            sibling.last_name &&
                                            !sibling.name
                                        ) {
                                            siblingName +=
                                                " " + sibling.last_name;
                                        }
                                        siblingGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", 20)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "12px")
                                            .attr("fill", "#333")
                                            .text(
                                                siblingName.length > 15
                                                    ? siblingName.substring(
                                                          0,
                                                          25
                                                      ) + "..."
                                                    : siblingName
                                            );

                                        // Add + icon
                                        siblingGroup
                                            .append("circle")
                                            .attr("cx", 0)
                                            .attr("cy", 32)
                                            .attr("r", 10)
                                            .attr("fill", "white")
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 1)
                                            .style("cursor", "pointer")
                                            .on("click", function (event) {
                                                event.stopPropagation();
                                                openBranchBuilder(sibling);
                                            });
                                        siblingGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", 36)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "16px")
                                            .attr("font-weight", "bold")
                                            .text("+")
                                            .style("cursor", "pointer")
                                            .on("click", function (event) {
                                                event.stopPropagation();
                                                openBranchBuilder(sibling);
                                            });

                                        addEditDeleteIcons(
                                            siblingGroup,
                                            sibling.id,
                                            siblingName
                                        );
                                    }
                                );

                                // Draw sibling lines for mother's partner's siblings (same as mother's siblings)
                                if (motherPartnerSiblings.length > 0) {
                                    const partnerXForLink = partnerX;
                                    const linkY = cardY - cardHeight / 2 - 20;

                                    const partnerSiblingPositions = [];
                                    motherPartnerSiblings.forEach(
                                        (sibling, siblingIndex) => {
                                            const siblingX =
                                                partnerX +
                                                cardWidth +
                                                partnerSiblingSpacing +
                                                siblingIndex *
                                                    (cardWidth +
                                                        partnerSiblingSpacing);
                                            partnerSiblingPositions.push({
                                                x: siblingX,
                                                sibling: sibling,
                                            });
                                        }
                                    );

                                    const startX = partnerXForLink;
                                    const startY = linkY;
                                    const endX =
                                        partnerSiblingPositions.length > 0
                                            ? partnerSiblingPositions[
                                                  partnerSiblingPositions.length -
                                                      1
                                              ].x
                                            : partnerXForLink;
                                    const endY = linkY;

                                    const distance = Math.abs(endX - startX);
                                    const bendHeight = Math.min(
                                        6,
                                        Math.max(5, distance * 0.02)
                                    );
                                    const midX = (startX + endX) / 2;
                                    const midY =
                                        Math.min(startY, endY) - bendHeight;
                                    const pathData = `M ${startX} ${startY} Q ${midX} ${midY}, ${endX} ${endY}`;

                                    node.append("path")
                                        .attr("class", "sibling-link")
                                        .attr("fill", "none")
                                        .attr("d", pathData);

                                    // Vertical line to partner card
                                    const partnerT = 0;
                                    const partnerCurveY =
                                        (1 - partnerT) *
                                            (1 - partnerT) *
                                            startY +
                                        2 * (1 - partnerT) * partnerT * midY +
                                        partnerT * partnerT * endY;
                                    node.append("line")
                                        .attr("class", "sibling-link")
                                        .attr("x1", partnerXForLink)
                                        .attr("y1", partnerCurveY)
                                        .attr("x2", partnerXForLink)
                                        .attr("y2", cardY - cardHeight / 2)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2);

                                    // Vertical lines to each sibling
                                    partnerSiblingPositions.forEach((pos) => {
                                        const siblingX = pos.x;
                                        const t =
                                            endX !== startX
                                                ? (siblingX - startX) /
                                                  (endX - startX)
                                                : 0;
                                        const curveY =
                                            (1 - t) * (1 - t) * startY +
                                            2 * (1 - t) * t * midY +
                                            t * t * endY;
                                        node.append("line")
                                            .attr("class", "sibling-link")
                                            .attr("x1", siblingX)
                                            .attr("y1", curveY)
                                            .attr("x2", siblingX)
                                            .attr("y2", cardY - cardHeight / 2)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2);
                                    });
                                }
                            }

                            // Find additional partners of mother's partner (excluding mother)
                            const motherPartnerPartners = [];
                            if (partner.spouses && partner.spouses.length > 0) {
                                partner.spouses.forEach((spouseId) => {
                                    if (spouseId === mother.id) return;
                                    const partnerData = treeData.find(
                                        (p) => p.id === spouseId
                                    );
                                    if (partnerData) {
                                        motherPartnerPartners.push(partnerData);
                                    }
                                });
                            }

                            // Draw additional partner cards to the right of mother's partner
                            if (
                                motherPartnerPartners.length > 0 &&
                                shouldShowMotherBranch
                            ) {
                                motherPartnerPartners.forEach(
                                    (additionalPartner, partnerIndex) => {
                                        const additionalPartnerX =
                                            partnerX +
                                            cardWidth +
                                            200 +
                                            partnerIndex * (cardWidth + 200);
                                        const additionalPartnerY = cardY;

                                        const additionalPartnerGroup = node
                                            .append("g")
                                            .attr(
                                                "class",
                                                "parent-partner-card mother-partner-partner-card"
                                            )
                                            .attr(
                                                "data-person-id",
                                                additionalPartner.id
                                            )
                                            .attr(
                                                "transform",
                                                `translate(${additionalPartnerX}, ${additionalPartnerY})`
                                            )
                                            .on("click", function (event) {
                                                event.stopPropagation();
                                                if (
                                                    typeof window.openProfileSidebar ===
                                                    "function"
                                                ) {
                                                    window.openProfileSidebar(
                                                        additionalPartner.id,
                                                        additionalPartner
                                                    );
                                                } else {
                                                    event.preventDefault();
                                                    event.stopPropagation();
                                                    if (
                                                        typeof window.openProfileSidebar ===
                                                        "function"
                                                    ) {
                                                        window.openProfileSidebar(
                                                            additionalPartner.id,
                                                            additionalPartner
                                                        );
                                                    }
                                                }
                                            });

                                        const borderColor =
                                            additionalPartner.gender ===
                                            "female"
                                                ? "#ffb6c1"
                                                : "#add8e6";
                                        additionalPartnerGroup
                                            .append("rect")
                                            .attr("x", -cardWidth / 2)
                                            .attr("y", -cardHeight / 2)
                                            .attr("width", cardWidth)
                                            .attr("height", cardHeight)
                                            .attr("rx", 8)
                                            .attr("ry", 8)
                                            .attr("fill", "white")
                                            .attr("stroke", borderColor)
                                            .attr("stroke-width", 3)
                                            .style(
                                                "filter",
                                                "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                            );

                                        // Silhouette, name, + icon, edit/delete icons (same structure)
                                        const additionalPartnerIcon =
                                            additionalPartnerGroup
                                                .append("g")
                                                .attr(
                                                    "transform",
                                                    "translate(0, -20)"
                                                );
                                        additionalPartnerIcon
                                            .append("circle")
                                            .attr("cx", 0)
                                            .attr("cy", -8)
                                            .attr("r", 8)
                                            .attr("fill", "#d0d0d0");
                                        additionalPartnerIcon
                                            .append("rect")
                                            .attr("x", -10)
                                            .attr("y", 0)
                                            .attr("width", 20)
                                            .attr("height", 16)
                                            .attr("rx", 10)
                                            .attr("fill", "#d0d0d0");

                                        let additionalPartnerName =
                                            additionalPartner.name ||
                                            additionalPartner.first_name ||
                                            "Unknown";
                                        if (
                                            additionalPartner.last_name &&
                                            !additionalPartner.name
                                        ) {
                                            additionalPartnerName +=
                                                " " +
                                                additionalPartner.last_name;
                                        }
                                        additionalPartnerGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", 20)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "12px")
                                            .attr("fill", "#333")
                                            .text(
                                                additionalPartnerName.length >
                                                    15
                                                    ? additionalPartnerName.substring(
                                                          0,
                                                          25
                                                      ) + "..."
                                                    : additionalPartnerName
                                            );

                                        additionalPartnerGroup
                                            .append("circle")
                                            .attr("cx", 0)
                                            .attr("cy", 32)
                                            .attr("r", 10)
                                            .attr("fill", "white")
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 1)
                                            .style("cursor", "pointer")
                                            .on("click", function (event) {
                                                event.stopPropagation();
                                                openBranchBuilder(
                                                    additionalPartner
                                                );
                                            });
                                        additionalPartnerGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", 36)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "16px")
                                            .attr("font-weight", "bold")
                                            .text("+")
                                            .style("cursor", "pointer")
                                            .on("click", function (event) {
                                                event.stopPropagation();
                                                openBranchBuilder(
                                                    additionalPartner
                                                );
                                            });

                                        addEditDeleteIcons(
                                            additionalPartnerGroup,
                                            additionalPartner.id,
                                            additionalPartnerName
                                        );

                                        // Draw line from mother's partner to additional partner
                                        const mainPersonNode = root
                                            .descendants()
                                            .find(
                                                (d) =>
                                                    d.data.id ===
                                                        mainPersonId &&
                                                    d.data.id !== "virtual-root"
                                            );
                                        if (mainPersonNode) {
                                            const absolutePartnerX =
                                                mainPersonNode.x + partnerX;
                                            const absoluteAdditionalPartnerX =
                                                mainPersonNode.x +
                                                additionalPartnerX;
                                            const middleLineY =
                                                mainPersonNode.y + cardY;

                                            const partnerLineStartX =
                                                absolutePartnerX +
                                                cardWidth / 2;
                                            const partnerLineEndX =
                                                absoluteAdditionalPartnerX -
                                                cardWidth / 2;

                                            g.append("line")
                                                .attr(
                                                    "class",
                                                    "spouse-link parent-partner-link"
                                                )
                                                .attr("x1", partnerLineStartX)
                                                .attr("y1", middleLineY)
                                                .attr("x2", partnerLineEndX)
                                                .attr("y2", middleLineY)
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 1.5)
                                                .style(
                                                    "pointer-events",
                                                    "none"
                                                );
                                        }
                                    }
                                );
                            }
                        });
                    }

                    // Draw TWO straight horizontal lines between father and mother when mother has partner (matching MyHeritage)
                    // Only show when mother's branch is visible
                    if (
                        shouldShowMotherBranch &&
                        motherPartners.length > 0 &&
                        father &&
                        mother
                    ) {
                        // Use EXACT same positions as the actual cards are drawn
                        // Father card is at: -cardWidth / 2 - spacing / 2 - 100
                        const fatherX = -cardWidth / 2 - spacing / 2 - 100;
                        // Mother card is at: cardWidth / 2 + spacing / 2 + 150
                        const motherX = cardWidth / 2 + spacing / 2 + 150;
                        const mainPersonNode = root
                            .descendants()
                            .find(
                                (d) =>
                                    d.data.id === mainPersonId &&
                                    d.data.id !== "virtual-root"
                            );
                        if (mainPersonNode) {
                            // Calculate absolute positions
                            const absoluteFatherX = mainPersonNode.x + fatherX;
                            const absoluteMotherX = mainPersonNode.x + motherX;
                            const middleLineY = mainPersonNode.y + cardY; // Middle/center Y of cards

                            // Separate the two lines with a small distance (4px apart) so they're visible as separate lines
                            const lineSeparation = 4; // Small separation between the two lines

                            // Make lines extend fully from father card's right edge to mother card's left edge
                            // cardWidth / 2 gives us the distance from card center to card edge
                            const lineStartX = absoluteFatherX + cardWidth / 2; // Start at right edge of father card
                            const lineEndX = absoluteMotherX - cardWidth / 2; // End at left edge of mother card

                            // Draw first straight horizontal line between father and mother (Line 1)
                            // Positioned slightly above center
                            g.append("line")
                                .attr(
                                    "class",
                                    "spouse-link parent-spouse-link-first"
                                )
                                .attr("x1", lineStartX)
                                .attr("y1", middleLineY - lineSeparation / 2) // Slightly above center
                                .attr("x2", lineEndX)
                                .attr("y2", middleLineY - lineSeparation / 2)
                                .attr("stroke", "#999")
                                .attr("stroke-width", 1.5)
                                .style("pointer-events", "none");

                            // Draw second straight horizontal line between father and mother (Line 2)
                            // Positioned slightly below center
                            g.append("line")
                                .attr(
                                    "class",
                                    "spouse-link parent-spouse-link-second"
                                )
                                .attr("x1", lineStartX)
                                .attr("y1", middleLineY + lineSeparation / 2) // Slightly below center
                                .attr("x2", lineEndX)
                                .attr("y2", middleLineY + lineSeparation / 2)
                                .attr("stroke", "#999")
                                .attr("stroke-width", 1.5)
                                .style("pointer-events", "none");

                            // Draw single line from mother's partner to father card (matching MyHeritage)
                            if (motherPartners.length > 0) {
                                motherPartners.forEach((partner, index) => {
                                    const partnerSpacing = 200;
                                    // Use EXACT same partner position as the actual card is drawn
                                    const partnerX =
                                        fatherX -
                                        cardWidth -
                                        partnerSpacing -
                                        index * (cardWidth + partnerSpacing);
                                    const absolutePartnerX =
                                        mainPersonNode.x + partnerX;

                                    // Make line extend fully from partner card's right edge to father card's left edge
                                    const partnerLineStartX =
                                        absolutePartnerX + cardWidth / 2; // Start at right edge of partner card
                                    const partnerLineEndX =
                                        absoluteFatherX - cardWidth / 2; // End at left edge of father card

                                    // Draw single horizontal line from partner to father (at middle of cards)
                                    g.append("line")
                                        .attr(
                                            "class",
                                            "spouse-link parent-partner-link"
                                        )
                                        .attr("x1", partnerLineStartX)
                                        .attr("y1", middleLineY)
                                        .attr("x2", partnerLineEndX)
                                        .attr("y2", middleLineY)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1.5)
                                        .style("pointer-events", "none");
                                });
                            }
                        }
                    }

                    const motherGroup = node
                        .append("g")
                        .attr("class", "parent-card")
                        .attr("data-person-id", mother.id)
                        .attr(
                            "transform",
                            `translate(${
                                cardWidth / 2 + spacing / 2 + 150
                            }, ${cardY})`
                        )
                        .on("click", function (event) {
                            event.stopPropagation();
                            if (
                                typeof window.openProfileSidebar === "function"
                            ) {
                                window.openProfileSidebar(mother.id, mother);
                            } else {
                                event.preventDefault();
                                event.stopPropagation();
                                if (
                                    typeof window.openProfileSidebar ===
                                    "function"
                                ) {
                                    window.openProfileSidebar(
                                        mother.id,
                                        mother
                                    );
                                }
                            }
                        });

                    // Card rectangle with pink border for female
                    motherGroup
                        .append("rect")
                        .attr("x", -cardWidth / 2)
                        .attr("y", -cardHeight / 2)
                        .attr("width", cardWidth)
                        .attr("height", cardHeight)
                        .attr("rx", 8)
                        .attr("ry", 8)
                        .attr("fill", "white")
                        .attr("stroke", "#ffb6c1") // Pink border for female
                        .attr("stroke-width", 3)
                        .style(
                            "filter",
                            "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                        )
                        .style("cursor", "pointer")
                        .on("click", function (event) {
                            event.stopPropagation();
                            if (
                                typeof window.openProfileSidebar === "function"
                            ) {
                                window.openProfileSidebar(mother.id, mother);
                            } else {
                                event.preventDefault();
                                event.stopPropagation();
                                if (
                                    typeof window.openProfileSidebar ===
                                    "function"
                                ) {
                                    window.openProfileSidebar(
                                        mother.id,
                                        mother
                                    );
                                }
                            }
                        });

                    // Silhouette icon or photo
                    const motherIcon = motherGroup
                        .append("g")
                        .attr("transform", "translate(0, -20)");
                    renderAvatar(motherIcon, mother, svg);

                    // Name - combine first_name and last_name
                    let motherName = mother.name;
                    if (!motherName) {
                        motherName = mother.first_name || "";
                        if (mother.last_name) {
                            motherName += " " + mother.last_name;
                        }
                        if (!motherName) {
                            motherName = "Unknown";
                        }
                    }
                    motherGroup
                        .append("text")
                        .attr("x", 0)
                        .attr("y", 20)
                        .attr("text-anchor", "middle")
                        .attr("font-size", "12px")
                        .attr("fill", "#333")
                        .text(
                            motherName.length > 15
                                ? motherName.substring(0, 25) + "..."
                                : motherName
                        );

                    // Add + icon (bottom center) for adding children - opens Branch Builder
                    motherGroup
                        .append("circle")
                        .attr("cx", 0)
                        .attr("cy", 32)
                        .attr("r", 10)
                        .attr("fill", "white")
                        .attr("stroke", "#999")
                        .attr("stroke-width", 1)
                        .style("cursor", "pointer")
                        .on("click", function (event) {
                            event.stopPropagation();
                            openBranchBuilder(mother);
                        });
                    motherGroup
                        .append("text")
                        .attr("x", 0)
                        .attr("y", 36)
                        .attr("text-anchor", "middle")
                        .attr("font-size", "16px")
                        .attr("font-weight", "bold")
                        .text("+")
                        .style("cursor", "pointer")
                        .on("click", function (event) {
                            event.stopPropagation();
                            openBranchBuilder(mother);
                        });

                    // Add edit and delete icons automatically
                    addEditDeleteIcons(motherGroup, mother.id, motherName);

                    // Add toggle hide/show button (eye icon) - top right
                    const isMotherHidden = areAncestorsHidden(mother.id);
                    const hideMotherButton = motherGroup
                        .append("g")
                        .attr("class", "hide-branch-button")
                        .attr("transform", "translate(45, -35)")
                        .style("cursor", "pointer")
                        .on("click", function (event) {
                            event.stopPropagation();
                            togglePersonBranch(mother.id);
                        });

                    hideMotherButton
                        .append("circle")
                        .attr("cx", 0)
                        .attr("cy", 0)
                        .attr("r", 10)
                        .attr("fill", isMotherHidden ? "#28a745" : "#6c757d")
                        .attr("stroke", "white")
                        .attr("stroke-width", 1);

                    hideMotherButton
                        .append("text")
                        .attr("x", 0)
                        .attr("y", 3)
                        .attr("text-anchor", "middle")
                        .attr("font-size", "10px")
                        .attr("fill", "white")
                        .text(isMotherHidden ? "👁️" : "👁️‍🗨️");

                    hideMotherButton
                        .append("title")
                        .text(
                            isMotherHidden
                                ? `Click to show the family branch of ${motherName}`
                                : `Click to hide the family branch of ${motherName}`
                        );

                    // Add view button to toggle to mother's branch view (matching MyHeritage)
                    // This button appears on mother's card when mother has siblings
                    // When clicked, it shows mother's branch (hiding father's branch)
                    if (motherHasSiblings) {
                        console.log(
                            "Adding view button on mother card - motherHasSiblings:",
                            motherHasSiblings,
                            "fatherBranchToggled:",
                            window.fatherBranchToggled
                        );
                        const viewMotherBranchButton = motherGroup
                            .append("g")
                            .attr("class", "view-mother-branch-button")
                            .attr("transform", "translate(-45, -35)")
                            .style("cursor", "pointer")
                            .on("click", function (event) {
                                event.stopPropagation();
                                showMotherBranch();
                            });

                        viewMotherBranchButton
                            .append("circle")
                            .attr("cx", 0)
                            .attr("cy", 0)
                            .attr("r", 10)
                            .attr(
                                "fill",
                                !window.fatherBranchToggled
                                    ? "#28a745"
                                    : "#6c757d"
                            )
                            .attr("stroke", "white")
                            .attr("stroke-width", 1);

                        viewMotherBranchButton
                            .append("text")
                            .attr("x", 0)
                            .attr("y", 3)
                            .attr("text-anchor", "middle")
                            .attr("font-size", "10px")
                            .attr("fill", "white")
                            .text("👁️");

                        viewMotherBranchButton
                            .append("title")
                            .text("Click to view mother's branch");
                    }

                    // Add sibling cards next to mother card (matching MyHeritage)
                    // Show mother's siblings only when fatherBranchToggled is false (when showing mother's branch)
                    if (motherHasSiblings && !window.fatherBranchToggled) {
                        console.log(
                            "Mother has siblings - showing mother's branch and hiding father's branch"
                        );

                        // Find siblings of mother
                        // BUT exclude mother's parents (grandfather and grandmother) - they're shown as parent cards, not siblings
                        const motherSiblings = [];
                        if (mother.siblings && mother.siblings.length > 0) {
                            mother.siblings.forEach((siblingId) => {
                                const siblingData = treeData.find(
                                    (p) => p.id === siblingId
                                );
                                if (
                                    siblingData &&
                                    siblingData.id !== mother.id &&
                                    siblingData.id !== father?.id &&
                                    !mother.parents.includes(siblingId) // Exclude mother's parents (grandfather/grandmother)
                                ) {
                                    motherSiblings.push(siblingData);
                                    console.log(
                                        "Found mother sibling:",
                                        siblingData.name ||
                                            siblingData.first_name
                                    );
                                } else if (mother.parents.includes(siblingId)) {
                                    console.log(
                                        "Excluding mother's parent from siblings:",
                                        siblingData?.name ||
                                            siblingData?.first_name ||
                                            siblingId,
                                        "(this is a parent, not a sibling)"
                                    );
                                }
                            });
                        }
                        // Also check implicit siblings (shared parents)
                        // BUT exclude mother's parents (grandfather and grandmother) - they're shown as parent cards, not siblings
                        if (mother.parents && mother.parents.length > 0) {
                            treeData.forEach((p) => {
                                if (
                                    p.id === mother.id ||
                                    p.id === father?.id ||
                                    p.id === mainPersonId ||
                                    mother.parents.includes(p.id) // Exclude mother's parents (grandfather/grandmother)
                                )
                                    return;
                                if (
                                    p.parents &&
                                    p.parents.length > 0 &&
                                    p.parents.every((pId) =>
                                        mother.parents.includes(pId)
                                    ) &&
                                    mother.parents.every((pId) =>
                                        p.parents.includes(pId)
                                    ) &&
                                    !motherSiblings.find((s) => s.id === p.id)
                                ) {
                                    motherSiblings.push(p);
                                    console.log(
                                        "Found implicit mother sibling:",
                                        p.name || p.first_name
                                    );
                                }
                            });
                        }
                        console.log(
                            "Total mother siblings found:",
                            motherSiblings.length,
                            motherSiblings.map((s) => s.name || s.first_name)
                        );

                        // Sort siblings: brothers (male) first, then sisters (female), sorted by ID for consistency
                        motherSiblings.sort((a, b) => {
                            // First sort by gender: male first, then female
                            if (a.gender === "male" && b.gender === "female")
                                return -1;
                            if (a.gender === "female" && b.gender === "male")
                                return 1;
                            // If same gender, sort by ID for consistent ordering
                            return a.id - b.id;
                        });

                        // Draw mother's sibling cards to the right of mother
                        const motherX = cardWidth / 2 + spacing / 2 + 100; // Moved 100px to the right
                        const motherSiblingSpacing = 200;

                        motherSiblings.forEach((sibling, index) => {
                            const siblingX =
                                motherX +
                                cardWidth +
                                motherSiblingSpacing +
                                index * (cardWidth + motherSiblingSpacing);
                            const siblingY = cardY; // Same Y as mother

                            const siblingGroup = node
                                .append("g")
                                .attr(
                                    "class",
                                    "parent-sibling-card mother-sibling-card"
                                )
                                .attr(
                                    "transform",
                                    `translate(${siblingX}, ${siblingY})`
                                )
                                .on("click", function (event) {
                                    event.stopPropagation();
                                    if (
                                        typeof window.openProfileSidebar ===
                                        "function"
                                    ) {
                                        window.openProfileSidebar(
                                            sibling.id,
                                            sibling
                                        );
                                    } else {
                                        event.preventDefault();
                                        event.stopPropagation();
                                        if (
                                            typeof window.openProfileSidebar ===
                                            "function"
                                        ) {
                                            window.openProfileSidebar(
                                                sibling.id,
                                                sibling
                                            );
                                        }
                                    }
                                });

                            // Card rectangle with border color based on gender
                            const borderColor =
                                sibling.gender === "female"
                                    ? "#ffb6c1"
                                    : "#add8e6";
                            siblingGroup
                                .append("rect")
                                .attr("x", -cardWidth / 2)
                                .attr("y", -cardHeight / 2)
                                .attr("width", cardWidth)
                                .attr("height", cardHeight)
                                .attr("rx", 8)
                                .attr("ry", 8)
                                .attr("fill", "white")
                                .attr("stroke", borderColor)
                                .attr("stroke-width", 3)
                                .style(
                                    "filter",
                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                );

                            // Use renderAvatar to support photos
                            const siblingIcon = siblingGroup
                                .append("g")
                                .attr("transform", "translate(0, -20)");
                            renderAvatar(siblingIcon, sibling, svg);

                            // Name
                            let siblingName = sibling.name;
                            if (!siblingName) {
                                siblingName = sibling.first_name || "";
                                if (sibling.last_name) {
                                    siblingName += " " + sibling.last_name;
                                }
                                if (!siblingName) {
                                    siblingName = "Unknown";
                                }
                            }
                            siblingGroup
                                .append("text")
                                .attr("x", 0)
                                .attr("y", 20)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "12px")
                                .attr("fill", "#333")
                                .text(
                                    siblingName.length > 15
                                        ? siblingName.substring(0, 25) + "..."
                                        : siblingName
                                );

                            // Add + icon
                            siblingGroup
                                .append("circle")
                                .attr("cx", 0)
                                .attr("cy", 32)
                                .attr("r", 10)
                                .attr("fill", "white")
                                .attr("stroke", "#999")
                                .attr("stroke-width", 1)
                                .style("cursor", "pointer")
                                .on("click", function (event) {
                                    event.stopPropagation();
                                    openBranchBuilder(sibling);
                                });
                            siblingGroup
                                .append("text")
                                .attr("x", 0)
                                .attr("y", 36)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "16px")
                                .attr("font-weight", "bold")
                                .text("+")
                                .style("cursor", "pointer")
                                .on("click", function (event) {
                                    event.stopPropagation();
                                    openBranchBuilder(sibling);
                                });

                            // Add edit and delete icons
                            addEditDeleteIcons(
                                siblingGroup,
                                sibling.id,
                                siblingName
                            );

                            console.log(
                                `Drew mother sibling card for ${siblingName} at (${siblingX}, ${siblingY})`
                            );
                        });

                        // Draw sibling lines for mother's siblings (matching MyHeritage) - EXACT same logic as father's siblings
                        if (motherSiblings.length > 0) {
                            // Match the actual mother card X position (includes +150 offset)
                            // Use relative position like father does (not absolute)
                            const motherXForLink =
                                cardWidth / 2 + spacing / 2 + 150;
                            const linkY = cardY - cardHeight / 2 - 20; // Position above the cards (moved up 20px

                            // Store sibling positions for line drawing (relative positions, matching father's logic)
                            const motherSiblingPositions = [];
                            motherSiblings.forEach((sibling, index) => {
                                const siblingX =
                                    motherX +
                                    cardWidth +
                                    motherSiblingSpacing +
                                    index * (cardWidth + motherSiblingSpacing);
                                motherSiblingPositions.push({
                                    x: siblingX,
                                    sibling: sibling,
                                });
                            });

                            // Draw horizontal line from mother card's top center to the last (rightmost) sibling card
                            const startX = motherXForLink;
                            const startY = linkY;
                            // Use the last sibling position (rightmost) to extend the line across all siblings
                            const endX =
                                motherSiblingPositions.length > 0
                                    ? motherSiblingPositions[
                                          motherSiblingPositions.length - 1
                                      ].x
                                    : motherXForLink;
                            const endY = linkY;

                            // EXACT same calculation as father's sibling links
                            const distance = Math.abs(endX - startX);
                            const bendHeight = Math.min(
                                6,
                                Math.max(5, distance * 0.02)
                            ); // Very subtle bend, 5-6px
                            const midX = (startX + endX) / 2;
                            const midY = Math.min(startY, endY) - bendHeight;

                            // EXACT same path formula as father's sibling links
                            const pathData = `M ${startX} ${startY} Q ${midX} ${midY}, ${endX} ${endY}`;

                            // Use EXACT same attributes as father's sibling links
                            node.append("path")
                                .attr("class", "sibling-link")
                                .attr("fill", "none")
                                .attr("d", pathData);

                            // Draw vertical lines from horizontal line down to each card (matching MyHeritage)
                            // Line 1: From horizontal line to mother card
                            const motherT = 0;
                            const motherCurveY =
                                (1 - motherT) * (1 - motherT) * startY +
                                2 * (1 - motherT) * motherT * midY +
                                motherT * motherT * endY;

                            // Vertical line from horizontal line down to mother card top
                            node.append("line")
                                .attr("class", "sibling-link")
                                .attr("x1", motherXForLink)
                                .attr("y1", motherCurveY)
                                .attr("x2", motherXForLink)
                                .attr("y2", cardY - cardHeight / 2)
                                .attr("stroke", "#999")
                                .attr("stroke-width", 2);

                            // Lines 2, 3, 4...: From horizontal line to each sibling card
                            // Use the stored sibling positions to ensure perfect alignment
                            motherSiblingPositions.forEach((pos) => {
                                const siblingX = pos.x;

                                // Calculate Y on the curve at this X position (for quadratic bezier)
                                const t =
                                    endX !== startX
                                        ? (siblingX - startX) / (endX - startX)
                                        : 0; // Avoid division by zero
                                const curveY =
                                    (1 - t) * (1 - t) * startY +
                                    2 * (1 - t) * t * midY +
                                    t * t * endY;

                                node.append("line")
                                    .attr("class", "sibling-link")
                                    .attr("x1", siblingX)
                                    .attr("y1", curveY)
                                    .attr("x2", siblingX)
                                    .attr("y2", cardY - cardHeight / 2)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 2);
                            });
                        }
                    }

                    // Show parent cards or "Add father" and "Add mother" buttons above mother card
                    // BUT: Only show if we're showing mother's branch (not father's branch)
                    const areMotherAncestorsHidden = areAncestorsHidden(
                        mother.id
                    );
                    const motherParents = mother.parents || [];

                    // Check if parents actually exist in treeData (regardless of hidden state)
                    // We want to show parent cards if they exist, not "Add" buttons
                    const motherParentData = motherParents
                        .map((parentId) =>
                            treeData.find((p) => p.id === parentId)
                        )
                        .filter((p) => p); // Filter out undefined (parents that don't exist in data)

                    const grandfather = motherParentData.find(
                        (p) => p.gender === "male"
                    );
                    const grandmother = motherParentData.find(
                        (p) => p.gender === "female"
                    );

                    const motherHasParents = motherParentData.length > 0;

                    // Also check visibility for showing cards
                    const hiddenAncestorsForMother =
                        window.hiddenAncestorsByPerson &&
                        window.hiddenAncestorsByPerson.has(mother.id)
                            ? window.hiddenAncestorsByPerson.get(mother.id)
                            : new Set();

                    const visibleMotherParents = motherParents.filter((pId) => {
                        const isHidden =
                            (window.hiddenAncestorIds &&
                                window.hiddenAncestorIds.has(pId)) ||
                            hiddenAncestorsForMother.has(pId);
                        return !isHidden;
                    });

                    const motherHasVisibleParents =
                        visibleMotherParents && visibleMotherParents.length > 0;

                    // Show mother's parents only when showing mother's branch (not father's branch)
                    // When mother has siblings: show mother's parents when fatherBranchToggled is false (showing mother's branch)
                    // When father has siblings: show mother's parents when fatherBranchToggled is true (showing mother's branch)
                    let shouldShowMotherParents = true;
                    if (motherHasSiblings) {
                        // When mother has siblings, show her parents when we're showing mother's branch (not toggled)
                        shouldShowMotherParents = !window.fatherBranchToggled;
                    }
                    // Note: If neither has siblings, show parents normally

                    console.log(
                        "Mother's branch - Checking if should show parents:",
                        {
                            areMotherAncestorsHidden: areMotherAncestorsHidden,
                            shouldShowMotherParents: shouldShowMotherParents,
                            motherHasParents: motherHasParents,
                            motherHasVisibleParents: motherHasVisibleParents,
                            willShow:
                                !areMotherAncestorsHidden &&
                                shouldShowMotherParents,
                        }
                    );

                    if (!areMotherAncestorsHidden && shouldShowMotherParents) {
                        // Declare grandmotherPartnersMother at higher scope so it's accessible everywhere in mother's branch
                        let grandmotherPartnersMother = [];
                        // Declare grandfatherPartnersMother at higher scope so it's accessible everywhere in mother's branch
                        let grandfatherPartnersMother = [];
                        // Declare partnersToShowMother at higher scope so it's accessible everywhere in mother's branch
                        let partnersToShowMother = [];

                        const motherParentButtonY = cardY - 150; // Position above mother card
                        // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                        const parentButtonWidth = 140; // Standardized button width for all generations
                        const parentButtonHeight = 90; // Standardized button height for all generations
                        const parentSpacing = 30; // Standardized button spacing for all generations
                        const grandparentCardWidth = 140;
                        const grandparentCardHeight = 90;
                        const grandparentSpacing = 350; // Spacing between mother's parent cards (grandfather and grandmother)

                        // Show parent cards if they exist, "Add" buttons if they don't
                        const grandparentCardY = motherParentButtonY - cardY;

                        console.log("Mother's branch - Checking parents:", {
                            motherHasParents: motherHasParents,
                            grandfather: grandfather
                                ? {
                                      id: grandfather.id,
                                      name:
                                          grandfather.first_name ||
                                          grandfather.name,
                                  }
                                : null,
                            grandmother: grandmother
                                ? {
                                      id: grandmother.id,
                                      name:
                                          grandmother.first_name ||
                                          grandmother.name,
                                  }
                                : null,
                        });

                        // Check if mother has actual parents (not just visible ones)
                        const motherHasActualParents =
                            motherParents && motherParents.length > 0;

                        console.log("=== MOTHER PARENTS DEBUG ===");
                        console.log("motherParents:", motherParents);
                        console.log(
                            "motherParents.length:",
                            motherParents
                                ? motherParents.length
                                : "null/undefined"
                        );
                        console.log(
                            "motherHasActualParents:",
                            motherHasActualParents
                        );
                        console.log("motherHasParents:", motherHasParents);
                        console.log(
                            "Will show Add buttons:",
                            !motherHasActualParents
                        );
                        console.log("=== END MOTHER PARENTS DEBUG ===");

                        if (motherHasParents) {
                            // Show parent cards (grandparents of main person) - they exist in data
                            // grandfather and grandmother are already set above from motherParentData

                            // Show grandfather card (left) above mother card
                            if (grandfather) {
                                // Declare spacing variables early to avoid initialization errors
                                const grandfatherPartnerCloseSpacingMother = 150;
                                // grandmotherPartnersMother is already declared at higher scope above

                                console.log(
                                    "Rendering grandfather card in mother's branch:",
                                    grandfather.first_name || grandfather.name,
                                    "ID:",
                                    grandfather.id
                                );
                                const grandfatherGroup = motherGroup
                                    .append("g")
                                    .attr("class", "parent-card")
                                    .attr(
                                        "transform",
                                        `translate(${
                                            -grandparentCardWidth / 2 -
                                            grandparentSpacing / 2
                                        }, ${grandparentCardY})`
                                    )
                                    .on("click", function (event) {
                                        event.preventDefault();
                                        event.stopPropagation();
                                        if (
                                            typeof window.openProfileSidebar ===
                                            "function"
                                        ) {
                                            window.openProfileSidebar(
                                                grandfather.id,
                                                grandfather
                                            );
                                        }
                                    });

                                grandfatherGroup
                                    .append("rect")
                                    .attr("x", -grandparentCardWidth / 2)
                                    .attr("y", -grandparentCardHeight / 2)
                                    .attr("width", grandparentCardWidth)
                                    .attr("height", grandparentCardHeight)
                                    .attr("rx", 8)
                                    .attr("ry", 8)
                                    .attr("fill", "white")
                                    .attr("stroke", "#add8e6")
                                    .attr("stroke-width", 3);

                                const grandfatherIcon = grandfatherGroup
                                    .append("g")
                                    .attr("transform", "translate(0, -20)");
                                // Use renderAvatar to support photos
                                renderAvatar(grandfatherIcon, grandfather, svg);

                                let grandfatherName =
                                    grandfather.name ||
                                    grandfather.first_name ||
                                    "";
                                if (grandfather.last_name)
                                    grandfatherName +=
                                        " " + grandfather.last_name;
                                if (!grandfatherName)
                                    grandfatherName = "Unknown";

                                grandfatherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 20)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "12px")
                                    .attr("fill", "#333")
                                    .text(
                                        grandfatherName.length > 25
                                            ? grandfatherName.substring(0, 25) +
                                                  "..."
                                            : grandfatherName
                                    );

                                addEditDeleteIcons(
                                    grandfatherGroup,
                                    grandfather.id,
                                    grandfatherName
                                );

                                // Add toggle hide/show button (eye icon) - top right
                                const isGrandfatherHidden = areAncestorsHidden(
                                    grandfather.id
                                );
                                const hideGrandfatherButton = grandfatherGroup
                                    .append("g")
                                    .attr("class", "hide-branch-button")
                                    .attr("transform", "translate(45, -35)")
                                    .style("cursor", "pointer")
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        togglePersonBranch(grandfather.id);
                                    });

                                hideGrandfatherButton
                                    .append("circle")
                                    .attr("cx", 0)
                                    .attr("cy", 0)
                                    .attr("r", 10)
                                    .attr(
                                        "fill",
                                        isGrandfatherHidden
                                            ? "#28a745"
                                            : "#6c757d"
                                    )
                                    .attr("stroke", "white")
                                    .attr("stroke-width", 1);

                                hideGrandfatherButton
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 3)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "10px")
                                    .attr("fill", "white")
                                    .text(isGrandfatherHidden ? "👁️" : "👁️‍🗨️");

                                hideGrandfatherButton
                                    .append("title")
                                    .text(
                                        isGrandfatherHidden
                                            ? `Click to show the family branch of ${grandfatherName}`
                                            : `Click to hide the family branch of ${grandfatherName}`
                                    );

                                // Add button - black style matching root node
                                const grandfatherIconsForMother =
                                    grandfatherGroup
                                        .append("g")
                                        .attr("transform", "translate(0, 35)")
                                        .style("cursor", "pointer")
                                        .on("click", function (event) {
                                            event.stopPropagation();
                                            openBranchBuilder(grandfather);
                                        });
                                grandfatherIconsForMother
                                    .append("circle")
                                    .attr("cx", 0)
                                    .attr("cy", 0)
                                    .attr("r", 10)
                                    .attr("fill", "white")
                                    .attr("stroke", "#d0d0d0")
                                    .attr("stroke-width", 1);
                                grandfatherIconsForMother
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 4)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "16px")
                                    .attr("font-weight", "bold")
                                    .attr("fill", "#333")
                                    .text("+");

                                // Find and render grandfather partners in mother's branch (excluding grandmother)
                                // Hide grandfather partners when grandmother branch is toggled (only show grandmother's partners)
                                // grandfatherPartnersMother is already declared at higher scope above
                                if (!window.grandmotherBranchToggled) {
                                    grandfatherPartnersMother = [];
                                    if (
                                        grandfather.spouses &&
                                        grandfather.spouses.length > 0
                                    ) {
                                        grandfather.spouses.forEach(
                                            (spouseId) => {
                                                // Exclude grandmother (she's already drawn as a grandparent)
                                                // Check both the grandmother variable and if the spouse is in motherParentData
                                                const isGrandmother =
                                                    (grandmother &&
                                                        spouseId ===
                                                            grandmother.id) ||
                                                    (motherParentData &&
                                                        motherParentData.some(
                                                            (gp) =>
                                                                gp.id ===
                                                                spouseId
                                                        ));

                                                if (isGrandmother) {
                                                    console.log(
                                                        "Excluding grandmother from grandfather partners in mother's branch:",
                                                        spouseId,
                                                        grandmother
                                                            ? grandmother.name ||
                                                                  grandmother.first_name
                                                            : "no grandmother var"
                                                    );
                                                    return;
                                                }

                                                // Additional check: exclude if this spouse is a parent of the mother
                                                const isParentOfMother =
                                                    motherParents.includes(
                                                        spouseId
                                                    );
                                                if (isParentOfMother) {
                                                    console.log(
                                                        "Excluding parent of mother from grandfather partners in mother's branch:",
                                                        spouseId
                                                    );
                                                    return;
                                                }

                                                const partnerData =
                                                    treeData.find(
                                                        (p) => p.id === spouseId
                                                    );
                                                if (partnerData) {
                                                    grandfatherPartnersMother.push(
                                                        partnerData
                                                    );
                                                    console.log(
                                                        "Found grandfather partner in mother's branch:",
                                                        partnerData.name ||
                                                            partnerData.first_name
                                                    );
                                                }
                                            }
                                        );
                                    }
                                    console.log(
                                        "Total grandfather partners found in mother's branch:",
                                        grandfatherPartnersMother.length,
                                        grandfatherPartnersMother.map(
                                            (p) => p.name || p.first_name
                                        )
                                    );

                                    // Only show the first partner card (limit to 1)
                                    // partnersToShowMother is already declared at higher scope above
                                    partnersToShowMother =
                                        grandfatherPartnersMother.slice(0, 1);

                                    // Draw grandfather partner cards in mother's branch
                                    // Position partner card to the right of grandmother card (like father's partner to the right of mother)
                                    // Note: grandfatherCardX and grandmotherCardXMother are already declared later in this block for siblings
                                    // We'll use different variable names here to avoid conflicts
                                    const grandfatherCardXForPartnerMother =
                                        -grandparentCardWidth / 2 -
                                        grandparentSpacing / 2;
                                    const grandmotherCardXForPartnerMother =
                                        grandparentCardWidth / 2 +
                                        grandparentSpacing / 2;

                                    partnersToShowMother.forEach(
                                        (partner, index) => {
                                            // Position partner card after grandmother card (to the right)
                                            const partnerX = grandmother
                                                ? grandmotherCardXForPartnerMother +
                                                  grandparentCardWidth +
                                                  grandfatherPartnerCloseSpacingMother +
                                                  index *
                                                      (grandparentCardWidth +
                                                          grandfatherPartnerCloseSpacingMother)
                                                : grandfatherCardXForPartnerMother +
                                                  grandparentCardWidth +
                                                  grandfatherPartnerCloseSpacingMother +
                                                  index *
                                                      (grandparentCardWidth +
                                                          grandfatherPartnerCloseSpacingMother);
                                            const partnerY = grandparentCardY;

                                            const partnerGroup = motherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "grandparent-partner-card"
                                                )
                                                .attr(
                                                    "data-person-id",
                                                    partner.id
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${partnerX}, ${partnerY})`
                                                )
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    if (
                                                        typeof window.openProfileSidebar ===
                                                        "function"
                                                    ) {
                                                        window.openProfileSidebar(
                                                            partner.id,
                                                            partner
                                                        );
                                                    }
                                                });

                                            // Card rectangle with border color based on gender
                                            const borderColor =
                                                partner.gender === "female"
                                                    ? "#ffb6c1"
                                                    : "#add8e6";
                                            partnerGroup
                                                .append("rect")
                                                .attr(
                                                    "x",
                                                    -grandparentCardWidth / 2
                                                )
                                                .attr(
                                                    "y",
                                                    -grandparentCardHeight / 2
                                                )
                                                .attr(
                                                    "width",
                                                    grandparentCardWidth
                                                )
                                                .attr(
                                                    "height",
                                                    grandparentCardHeight
                                                )
                                                .attr("rx", 8)
                                                .attr("ry", 8)
                                                .attr("fill", "white")
                                                .attr("stroke", borderColor)
                                                .attr("stroke-width", 3)
                                                .style(
                                                    "filter",
                                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                );

                                            // Avatar
                                            const partnerIcon = partnerGroup
                                                .append("g")
                                                .attr(
                                                    "transform",
                                                    "translate(0, -20)"
                                                );
                                            renderAvatar(
                                                partnerIcon,
                                                partner,
                                                svg
                                            );

                                            // Name
                                            let partnerName = partner.name;
                                            if (!partnerName) {
                                                partnerName =
                                                    partner.first_name || "";
                                                if (partner.last_name) {
                                                    partnerName +=
                                                        " " + partner.last_name;
                                                }
                                                if (!partnerName) {
                                                    partnerName = "Unknown";
                                                }
                                            }
                                            partnerGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 20)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "12px")
                                                .attr("fill", "#333")
                                                .text(
                                                    partnerName.length > 15
                                                        ? partnerName.substring(
                                                              0,
                                                              25
                                                          ) + "..."
                                                        : partnerName
                                                );

                                            // Add + icon
                                            partnerGroup
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 32)
                                                .attr("r", 10)
                                                .attr("fill", "white")
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 1)
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(partner);
                                                });
                                            partnerGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 36)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "16px")
                                                .attr("font-weight", "bold")
                                                .text("+")
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(partner);
                                                });

                                            // Add edit and delete icons
                                            addEditDeleteIcons(
                                                partnerGroup,
                                                partner.id,
                                                partnerName
                                            );

                                            // Draw line(s) connecting grandfather card and partner card (same logic as father-partner)
                                            // Check if partner has additional partners (excluding grandmother and grandfather)
                                            let hasAdditionalPartners = false;
                                            if (
                                                partner.spouses &&
                                                partner.spouses.length > 0
                                            ) {
                                                hasAdditionalPartners =
                                                    partner.spouses.some(
                                                        (spouseId) => {
                                                            if (
                                                                grandmother &&
                                                                spouseId ===
                                                                    grandmother.id
                                                            )
                                                                return false;
                                                            if (
                                                                grandfather &&
                                                                spouseId ===
                                                                    grandfather.id
                                                            )
                                                                return false;
                                                            return true;
                                                        }
                                                    );
                                            }

                                            if (hasAdditionalPartners) {
                                                // Draw TWO lines (like father-mother connection)
                                                const mainPersonNode = root
                                                    .descendants()
                                                    .find(
                                                        (d) =>
                                                            d.data.id ===
                                                                mainPersonId &&
                                                            d.data.id !==
                                                                "virtual-root"
                                                    );
                                                if (mainPersonNode) {
                                                    // Connect from grandmother card to partner card (not from grandfather)
                                                    const absoluteGrandmotherX =
                                                        grandmother
                                                            ? mainPersonNode.x +
                                                              grandmotherCardXForPartnerMother
                                                            : mainPersonNode.x +
                                                              grandfatherCardXForPartnerMother;
                                                    const absolutePartnerX =
                                                        mainPersonNode.x +
                                                        partnerX;
                                                    const middleLineY =
                                                        mainPersonNode.y +
                                                        grandparentCardY;

                                                    // Separate the two lines with a small distance
                                                    const lineSeparation = 4;

                                                    // Make lines extend fully from grandmother card's right edge to partner card's left edge
                                                    const lineStartX =
                                                        absoluteGrandmotherX +
                                                        grandparentCardWidth /
                                                            2;
                                                    const lineEndX =
                                                        absolutePartnerX -
                                                        grandparentCardWidth /
                                                            2;

                                                    // Draw first line (slightly above center)
                                                    motherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "parent-partner-link"
                                                        )
                                                        .attr("x1", lineStartX)
                                                        .attr(
                                                            "y1",
                                                            middleLineY -
                                                                lineSeparation /
                                                                    2
                                                        )
                                                        .attr("x2", lineEndX)
                                                        .attr(
                                                            "y2",
                                                            middleLineY -
                                                                lineSeparation /
                                                                    2
                                                        )
                                                        .attr("stroke", "#999")
                                                        .attr(
                                                            "stroke-width",
                                                            1.5
                                                        )
                                                        .style(
                                                            "pointer-events",
                                                            "none"
                                                        );

                                                    // Draw second line (slightly below center)
                                                    motherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "parent-partner-link"
                                                        )
                                                        .attr("x1", lineStartX)
                                                        .attr(
                                                            "y1",
                                                            middleLineY +
                                                                lineSeparation /
                                                                    2
                                                        )
                                                        .attr("x2", lineEndX)
                                                        .attr(
                                                            "y2",
                                                            middleLineY +
                                                                lineSeparation /
                                                                    2
                                                        )
                                                        .attr("stroke", "#999")
                                                        .attr(
                                                            "stroke-width",
                                                            1.5
                                                        )
                                                        .style(
                                                            "pointer-events",
                                                            "none"
                                                        );
                                                }
                                            } else {
                                                // Draw single line (when no additional partners)
                                                const lineY =
                                                    grandparentCardY -
                                                    grandparentCardHeight / 10;
                                                // Connect from grandmother card to partner card (not from grandfather)
                                                const lineX1 = grandmother
                                                    ? grandmotherCardXForPartnerMother +
                                                      grandparentCardWidth / 2
                                                    : grandfatherCardXForPartnerMother +
                                                      grandparentCardWidth / 2;
                                                const lineX2 =
                                                    partnerX -
                                                    grandparentCardWidth / 2;

                                                motherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "parent-partner-link"
                                                    )
                                                    .attr("x1", lineX1)
                                                    .attr("y1", lineY)
                                                    .attr("x2", lineX2)
                                                    .attr("y2", lineY)
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 1.5)
                                                    .style(
                                                        "pointer-events",
                                                        "none"
                                                    );
                                            }

                                            console.log(
                                                "Drew partner card for",
                                                partnerName,
                                                "in mother's branch at",
                                                `(${partnerX}, ${partnerY})`
                                            );
                                        }
                                    );
                                } // End of if (!window.grandmotherBranchToggled) for grandfather partners in mother's branch

                                // Add siblings and children for grandfather in mother's branch (same logic as father card)
                                // Hide grandfather siblings when grandmother branch is toggled (only show grandmother's siblings)
                                if (!window.grandmotherBranchToggled) {
                                    console.log(
                                        "Checking for grandfather siblings in mother's branch. Grandfather ID:",
                                        grandfather.id,
                                        "Grandfather name:",
                                        grandfatherName
                                    );
                                    const grandfatherSiblingsMother = [];
                                    const grandfatherParentIdsMother =
                                        grandfather.parents
                                            ? new Set(grandfather.parents)
                                            : new Set();

                                    if (
                                        grandfather.siblings &&
                                        grandfather.siblings.length > 0
                                    ) {
                                        grandfather.siblings.forEach(
                                            (siblingId) => {
                                                if (
                                                    grandfatherParentIdsMother.has(
                                                        siblingId
                                                    )
                                                ) {
                                                    return;
                                                }
                                                const siblingData =
                                                    treeData.find(
                                                        (p) =>
                                                            p.id === siblingId
                                                    );
                                                if (
                                                    siblingData &&
                                                    siblingData.id !==
                                                        grandfather.id
                                                ) {
                                                    grandfatherSiblingsMother.push(
                                                        siblingData
                                                    );
                                                }
                                            }
                                        );
                                    }

                                    if (
                                        grandfather.parents &&
                                        grandfather.parents.length > 0
                                    ) {
                                        treeData.forEach((p) => {
                                            if (
                                                p.id === grandfather.id ||
                                                p.id === mainPersonId
                                            )
                                                return;
                                            if (
                                                grandfatherParentIdsMother.has(
                                                    p.id
                                                )
                                            ) {
                                                return;
                                            }
                                            if (
                                                p.parents &&
                                                p.parents.length > 0 &&
                                                p.parents.every((pId) =>
                                                    grandfather.parents.includes(
                                                        pId
                                                    )
                                                ) &&
                                                grandfather.parents.every(
                                                    (pId) =>
                                                        p.parents.includes(pId)
                                                ) &&
                                                !grandfatherSiblingsMother.find(
                                                    (s) => s.id === p.id
                                                )
                                            ) {
                                                grandfatherSiblingsMother.push(
                                                    p
                                                );
                                            }
                                        });
                                    }

                                    const excludedIdsForGrandfatherSiblingCheckMother =
                                        new Set([grandfather.id, mainPersonId]);
                                    if (
                                        grandfather.parents &&
                                        grandfather.parents.length > 0
                                    ) {
                                        grandfather.parents.forEach(
                                            (parentId) =>
                                                excludedIdsForGrandfatherSiblingCheckMother.add(
                                                    parentId
                                                )
                                        );
                                    }
                                    if (mainPersonId) {
                                        const mainPersonData = treeData.find(
                                            (p) => p.id === mainPersonId
                                        );
                                        if (
                                            mainPersonData &&
                                            mainPersonData.parents
                                        ) {
                                            mainPersonData.parents.forEach(
                                                (parentId) =>
                                                    excludedIdsForGrandfatherSiblingCheckMother.add(
                                                        parentId
                                                    )
                                            );
                                        }
                                        if (
                                            mainPersonData &&
                                            mainPersonData.children
                                        ) {
                                            mainPersonData.children.forEach(
                                                (childId) =>
                                                    excludedIdsForGrandfatherSiblingCheckMother.add(
                                                        childId
                                                    )
                                            );
                                        }
                                    }

                                    treeData.forEach((p) => {
                                        if (
                                            excludedIdsForGrandfatherSiblingCheckMother.has(
                                                p.id
                                            )
                                        )
                                            return;
                                        if (
                                            p.parents &&
                                            p.parents.length > 0 &&
                                            grandfather.parents &&
                                            grandfather.parents.length > 0
                                        ) {
                                            const sharedParents =
                                                p.parents.filter((pId) =>
                                                    grandfather.parents.includes(
                                                        pId
                                                    )
                                                );
                                            if (
                                                sharedParents.length ===
                                                    grandfather.parents
                                                        .length &&
                                                sharedParents.length ===
                                                    p.parents.length
                                            ) {
                                                if (
                                                    !grandfatherSiblingsMother.find(
                                                        (s) => s.id === p.id
                                                    )
                                                ) {
                                                    grandfatherSiblingsMother.push(
                                                        p
                                                    );
                                                }
                                            }
                                        }
                                    });

                                    const filteredGrandfatherSiblingsMother =
                                        grandfatherSiblingsMother.filter(
                                            (s) =>
                                                !grandfatherParentIdsMother.has(
                                                    s.id
                                                )
                                        );
                                    const finalGrandfatherSiblingsMother =
                                        filteredGrandfatherSiblingsMother;

                                    const siblingsOfGrandfatherSiblingsMother =
                                        [];
                                    finalGrandfatherSiblingsMother.forEach(
                                        (grandfatherSibling) => {
                                            if (
                                                grandfatherSibling.siblings &&
                                                grandfatherSibling.siblings
                                                    .length > 0
                                            ) {
                                                grandfatherSibling.siblings.forEach(
                                                    (siblingOfSiblingId) => {
                                                        if (
                                                            siblingOfSiblingId ===
                                                                grandfatherSibling.id ||
                                                            siblingOfSiblingId ===
                                                                grandfather.id
                                                        ) {
                                                            return;
                                                        }
                                                        if (
                                                            finalGrandfatherSiblingsMother.find(
                                                                (s) =>
                                                                    s.id ===
                                                                    siblingOfSiblingId
                                                            )
                                                        ) {
                                                            return;
                                                        }

                                                        const siblingOfSiblingData =
                                                            treeData.find(
                                                                (p) =>
                                                                    p.id ===
                                                                    siblingOfSiblingId
                                                            );
                                                        if (
                                                            siblingOfSiblingData
                                                        ) {
                                                            if (
                                                                siblingOfSiblingData.id ===
                                                                mainPersonId
                                                            )
                                                                return;
                                                            if (
                                                                parents.includes(
                                                                    siblingOfSiblingData.id
                                                                )
                                                            )
                                                                return;
                                                            if (
                                                                grandfatherSibling.parents &&
                                                                grandfatherSibling.parents.includes(
                                                                    siblingOfSiblingData.id
                                                                )
                                                            ) {
                                                                return;
                                                            }

                                                            if (
                                                                !siblingsOfGrandfatherSiblingsMother.find(
                                                                    (s) =>
                                                                        s.id ===
                                                                        siblingOfSiblingData.id
                                                                )
                                                            ) {
                                                                siblingsOfGrandfatherSiblingsMother.push(
                                                                    siblingOfSiblingData
                                                                );
                                                            }
                                                        }
                                                    }
                                                );
                                            }

                                            if (
                                                grandfatherSibling.parents &&
                                                grandfatherSibling.parents
                                                    .length > 0
                                            ) {
                                                treeData.forEach((p) => {
                                                    if (
                                                        finalGrandfatherSiblingsMother.find(
                                                            (s) => s.id === p.id
                                                        )
                                                    )
                                                        return;
                                                    if (
                                                        siblingsOfGrandfatherSiblingsMother.find(
                                                            (s) => s.id === p.id
                                                        )
                                                    )
                                                        return;
                                                    if (
                                                        p.id ===
                                                            grandfatherSibling.id ||
                                                        p.id === grandfather.id
                                                    )
                                                        return;
                                                    if (p.id === mainPersonId)
                                                        return;
                                                    if (parents.includes(p.id))
                                                        return;
                                                    if (
                                                        grandfatherSibling.parents &&
                                                        grandfatherSibling.parents.includes(
                                                            p.id
                                                        )
                                                    ) {
                                                        return;
                                                    }

                                                    if (
                                                        p.parents &&
                                                        p.parents.length > 0 &&
                                                        p.parents.every((pId) =>
                                                            grandfatherSibling.parents.includes(
                                                                pId
                                                            )
                                                        ) &&
                                                        grandfatherSibling.parents.every(
                                                            (pId) =>
                                                                p.parents.includes(
                                                                    pId
                                                                )
                                                        )
                                                    ) {
                                                        siblingsOfGrandfatherSiblingsMother.push(
                                                            p
                                                        );
                                                    }
                                                });
                                            }
                                        }
                                    );

                                    const allGrandfatherSiblingsMother = [
                                        ...finalGrandfatherSiblingsMother,
                                        ...siblingsOfGrandfatherSiblingsMother,
                                    ];

                                    const directGrandfatherSiblingsMother =
                                        finalGrandfatherSiblingsMother.slice();
                                    const siblingsOfGrandfatherSiblingsMotherArray =
                                        siblingsOfGrandfatherSiblingsMother.slice();

                                    const directGrandfatherBrothersMother =
                                        directGrandfatherSiblingsMother.filter(
                                            (s) => s.gender === "male"
                                        );
                                    const directGrandfatherSistersMother =
                                        directGrandfatherSiblingsMother.filter(
                                            (s) => s.gender === "female"
                                        );
                                    const siblingsOfGrandfatherSiblingsBrothersMother =
                                        siblingsOfGrandfatherSiblingsMotherArray.filter(
                                            (s) => s.gender === "male"
                                        );
                                    const siblingsOfGrandfatherSiblingsSistersMother =
                                        siblingsOfGrandfatherSiblingsMotherArray.filter(
                                            (s) => s.gender === "female"
                                        );

                                    const allGrandfatherBrothersMother = [
                                        ...directGrandfatherBrothersMother,
                                        ...siblingsOfGrandfatherSiblingsBrothersMother,
                                    ];

                                    const newestGrandfatherBrotherMother =
                                        allGrandfatherBrothersMother.length > 0
                                            ? allGrandfatherBrothersMother.reduce(
                                                  (max, brother) =>
                                                      brother.id > max.id
                                                          ? brother
                                                          : max
                                              )
                                            : null;

                                    const otherGrandfatherBrothersMother =
                                        allGrandfatherBrothersMother.filter(
                                            (b) =>
                                                b.id !==
                                                newestGrandfatherBrotherMother?.id
                                        );
                                    otherGrandfatherBrothersMother.sort(
                                        (a, b) => a.id - b.id
                                    );

                                    const allGrandfatherSistersMother = [
                                        ...directGrandfatherSistersMother,
                                        ...siblingsOfGrandfatherSiblingsSistersMother,
                                    ];

                                    const newestGrandfatherSisterMother =
                                        allGrandfatherSistersMother.length > 0
                                            ? allGrandfatherSistersMother.reduce(
                                                  (max, sister) =>
                                                      sister.id > max.id
                                                          ? sister
                                                          : max
                                              )
                                            : null;

                                    const otherGrandfatherSistersMother =
                                        allGrandfatherSistersMother.filter(
                                            (s) =>
                                                s.id !==
                                                newestGrandfatherSisterMother?.id
                                        );
                                    otherGrandfatherSistersMother.sort(
                                        (a, b) => a.id - b.id
                                    );

                                    // Put all brothers first, then all sisters
                                    const sortedGrandfatherSiblingsMother = [
                                        ...otherGrandfatherBrothersMother,
                                    ];

                                    if (newestGrandfatherBrotherMother) {
                                        sortedGrandfatherSiblingsMother.push(
                                            newestGrandfatherBrotherMother
                                        );
                                    }

                                    sortedGrandfatherSiblingsMother.push(
                                        ...otherGrandfatherSistersMother
                                    );

                                    if (newestGrandfatherSisterMother) {
                                        sortedGrandfatherSiblingsMother.push(
                                            newestGrandfatherSisterMother
                                        );
                                    }

                                    const grandfatherCardXMother =
                                        -grandparentCardWidth / 2 -
                                        grandparentSpacing / 2;
                                    const grandmotherCardXMother =
                                        grandparentCardWidth / 2 +
                                        grandparentSpacing / 2;
                                    const grandfatherSiblingSpacingMother = 200;
                                    // Calculate where siblings should start - after partner card if it exists, otherwise after grandmother/grandfather
                                    let startGrandfatherSiblingXMother;
                                    if (
                                        grandfatherPartnersMother.length > 0 &&
                                        partnersToShowMother.length > 0
                                    ) {
                                        // Start siblings after the partner card
                                        // Partner card is positioned to the right of grandmother (or grandfather if no grandmother)
                                        const partnerX = grandmother
                                            ? grandmotherCardXMother +
                                              grandparentCardWidth +
                                              grandfatherPartnerCloseSpacingMother
                                            : grandfatherCardXMother +
                                              grandparentCardWidth +
                                              grandfatherPartnerCloseSpacingMother;
                                        startGrandfatherSiblingXMother =
                                            partnerX +
                                            grandparentCardWidth / 2 +
                                            grandfatherSiblingSpacingMother;
                                    } else {
                                        // No partner card, start after grandmother/grandfather
                                        startGrandfatherSiblingXMother =
                                            grandmother
                                                ? grandmotherCardXMother +
                                                  grandparentCardWidth / 2 +
                                                  grandfatherSiblingSpacingMother
                                                : grandfatherCardXMother +
                                                  grandparentCardWidth / 2 +
                                                  grandfatherSiblingSpacingMother;
                                    }

                                    let grandfatherCumulativeXMother = 0;

                                    // Store sibling positions for line drawing
                                    const grandfatherSiblingPositionsMother =
                                        [];

                                    sortedGrandfatherSiblingsMother.forEach(
                                        (sibling) => {
                                            const siblingX =
                                                startGrandfatherSiblingXMother +
                                                grandfatherCumulativeXMother;
                                            // Position all siblings on the same horizontal line
                                            const siblingY = grandparentCardY;

                                            // Store position for line drawing
                                            grandfatherSiblingPositionsMother.push(
                                                {
                                                    x: siblingX,
                                                    y: siblingY,
                                                    sibling: sibling,
                                                }
                                            );

                                            const siblingGroup = motherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "parent-sibling-card"
                                                )
                                                .attr(
                                                    "data-person-id",
                                                    sibling.id
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${siblingX}, ${siblingY})`
                                                )
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    if (
                                                        typeof window.openProfileSidebar ===
                                                        "function"
                                                    ) {
                                                        window.openProfileSidebar(
                                                            sibling.id,
                                                            sibling
                                                        );
                                                    }
                                                });

                                            const borderColor =
                                                sibling.gender === "female"
                                                    ? "#ffb6c1"
                                                    : "#add8e6";
                                            siblingGroup
                                                .append("rect")
                                                .attr(
                                                    "x",
                                                    -grandparentCardWidth / 2
                                                )
                                                .attr(
                                                    "y",
                                                    -grandparentCardHeight / 2
                                                )
                                                .attr(
                                                    "width",
                                                    grandparentCardWidth
                                                )
                                                .attr(
                                                    "height",
                                                    grandparentCardHeight
                                                )
                                                .attr("rx", 8)
                                                .attr("ry", 8)
                                                .attr("fill", "white")
                                                .attr("stroke", borderColor)
                                                .attr("stroke-width", 3)
                                                .style(
                                                    "filter",
                                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                );

                                            const siblingIcon = siblingGroup
                                                .append("g")
                                                .attr(
                                                    "transform",
                                                    "translate(0, -20)"
                                                );
                                            renderAvatar(
                                                siblingIcon,
                                                sibling,
                                                svg
                                            );

                                            let siblingName = sibling.name;
                                            if (!siblingName) {
                                                siblingName =
                                                    sibling.first_name || "";
                                                if (sibling.last_name) {
                                                    siblingName +=
                                                        " " + sibling.last_name;
                                                }
                                                if (!siblingName) {
                                                    siblingName = "Unknown";
                                                }
                                            }
                                            siblingGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 20)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "12px")
                                                .attr("fill", "#333")
                                                .text(
                                                    siblingName.length > 15
                                                        ? siblingName.substring(
                                                              0,
                                                              25
                                                          ) + "..."
                                                        : siblingName
                                                );

                                            siblingGroup
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 32)
                                                .attr("r", 10)
                                                .attr("fill", "white")
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 1)
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(sibling);
                                                });
                                            siblingGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 36)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "16px")
                                                .attr("font-weight", "bold")
                                                .text("+")
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(sibling);
                                                });

                                            addEditDeleteIcons(
                                                siblingGroup,
                                                sibling.id,
                                                siblingName
                                            );

                                            const siblingChildren =
                                                treeData.filter((p) => {
                                                    if (
                                                        !p.parents ||
                                                        p.parents.length === 0
                                                    )
                                                        return false;
                                                    return p.parents.includes(
                                                        sibling.id
                                                    );
                                                });

                                            let siblingPartnerId = null;
                                            if (
                                                sibling.spouses &&
                                                sibling.spouses.length > 0
                                            ) {
                                                siblingPartnerId =
                                                    sibling.spouses[0];
                                                const partnerChildren =
                                                    treeData.filter((p) => {
                                                        if (
                                                            !p.parents ||
                                                            p.parents.length ===
                                                                0
                                                        )
                                                            return false;
                                                        return p.parents.includes(
                                                            siblingPartnerId
                                                        );
                                                    });
                                                partnerChildren.forEach(
                                                    (child) => {
                                                        if (
                                                            !siblingChildren.find(
                                                                (c) =>
                                                                    c.id ===
                                                                    child.id
                                                            )
                                                        ) {
                                                            if (
                                                                child.parents.includes(
                                                                    sibling.id
                                                                ) &&
                                                                child.parents.includes(
                                                                    siblingPartnerId
                                                                )
                                                            ) {
                                                                siblingChildren.push(
                                                                    child
                                                                );
                                                            }
                                                        }
                                                    }
                                                );
                                            }

                                            if (siblingChildren.length > 0) {
                                                const childCardY =
                                                    siblingY +
                                                    grandparentCardHeight +
                                                    100;
                                                const childCardSpacing = 200;

                                                let partnerX = null;
                                                if (siblingPartnerId) {
                                                    partnerX =
                                                        siblingX +
                                                        grandparentCardWidth +
                                                        grandfatherPartnerCloseSpacingMother;
                                                }

                                                const parentMidX = partnerX
                                                    ? (siblingX + partnerX) / 2
                                                    : siblingX;

                                                const totalChildWidth =
                                                    siblingChildren.length *
                                                        (grandparentCardWidth +
                                                            childCardSpacing) -
                                                    childCardSpacing;
                                                const startChildX =
                                                    parentMidX -
                                                    totalChildWidth / 2 +
                                                    grandparentCardWidth / 2;

                                                const parentLineY =
                                                    siblingY +
                                                    grandparentCardHeight / 2;
                                                const childLevelY =
                                                    childCardY -
                                                    grandparentCardHeight / 2;

                                                if (
                                                    siblingPartnerId &&
                                                    partnerX
                                                ) {
                                                    node.append("line")
                                                        .attr(
                                                            "class",
                                                            "parent-child-link"
                                                        )
                                                        .attr("x1", siblingX)
                                                        .attr("y1", parentLineY)
                                                        .attr("x2", partnerX)
                                                        .attr("y2", parentLineY)
                                                        .attr("stroke", "#999")
                                                        .attr("stroke-width", 2)
                                                        .style(
                                                            "pointer-events",
                                                            "none"
                                                        );

                                                    node.append("line")
                                                        .attr(
                                                            "class",
                                                            "parent-child-link"
                                                        )
                                                        .attr("x1", parentMidX)
                                                        .attr("y1", parentLineY)
                                                        .attr("x2", parentMidX)
                                                        .attr("y2", childLevelY)
                                                        .attr("stroke", "#999")
                                                        .attr("stroke-width", 2)
                                                        .style(
                                                            "pointer-events",
                                                            "none"
                                                        );

                                                    if (
                                                        siblingChildren.length >
                                                        1
                                                    ) {
                                                        const minChildX =
                                                            Math.min(
                                                                ...siblingChildren.map(
                                                                    (_, idx) =>
                                                                        startChildX +
                                                                        idx *
                                                                            (grandparentCardWidth +
                                                                                childCardSpacing)
                                                                )
                                                            );
                                                        const maxChildX =
                                                            Math.max(
                                                                ...siblingChildren.map(
                                                                    (_, idx) =>
                                                                        startChildX +
                                                                        idx *
                                                                            (grandparentCardWidth +
                                                                                childCardSpacing)
                                                                )
                                                            );

                                                        node.append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-child-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                minChildX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                childLevelY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                maxChildX
                                                            )
                                                            .attr(
                                                                "y2",
                                                                childLevelY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );

                                                        siblingChildren.forEach(
                                                            (
                                                                child,
                                                                childIndex
                                                            ) => {
                                                                const childX =
                                                                    startChildX +
                                                                    childIndex *
                                                                        (grandparentCardWidth +
                                                                            childCardSpacing);
                                                                node.append(
                                                                    "line"
                                                                )
                                                                    .attr(
                                                                        "class",
                                                                        "parent-child-link"
                                                                    )
                                                                    .attr(
                                                                        "x1",
                                                                        childX
                                                                    )
                                                                    .attr(
                                                                        "y1",
                                                                        childLevelY
                                                                    )
                                                                    .attr(
                                                                        "x2",
                                                                        childX
                                                                    )
                                                                    .attr(
                                                                        "y2",
                                                                        childCardY -
                                                                            grandparentCardHeight /
                                                                                2
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#999"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        2
                                                                    )
                                                                    .style(
                                                                        "pointer-events",
                                                                        "none"
                                                                    );
                                                            }
                                                        );
                                                    } else {
                                                        const childX =
                                                            startChildX;
                                                        node.append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-child-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                parentMidX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                childLevelY
                                                            )
                                                            .attr("x2", childX)
                                                            .attr(
                                                                "y2",
                                                                childLevelY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );

                                                        node.append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-child-link"
                                                            )
                                                            .attr("x1", childX)
                                                            .attr(
                                                                "y1",
                                                                childLevelY
                                                            )
                                                            .attr("x2", childX)
                                                            .attr(
                                                                "y2",
                                                                childCardY -
                                                                    grandparentCardHeight /
                                                                        2
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    }
                                                } else {
                                                    node.append("line")
                                                        .attr(
                                                            "class",
                                                            "parent-child-link"
                                                        )
                                                        .attr("x1", siblingX)
                                                        .attr("y1", parentLineY)
                                                        .attr("x2", siblingX)
                                                        .attr("y2", childLevelY)
                                                        .attr("stroke", "#999")
                                                        .attr("stroke-width", 2)
                                                        .style(
                                                            "pointer-events",
                                                            "none"
                                                        );

                                                    if (
                                                        siblingChildren.length >
                                                        1
                                                    ) {
                                                        const minChildX =
                                                            Math.min(
                                                                ...siblingChildren.map(
                                                                    (_, idx) =>
                                                                        startChildX +
                                                                        idx *
                                                                            (grandparentCardWidth +
                                                                                childCardSpacing)
                                                                )
                                                            );
                                                        const maxChildX =
                                                            Math.max(
                                                                ...siblingChildren.map(
                                                                    (_, idx) =>
                                                                        startChildX +
                                                                        idx *
                                                                            (grandparentCardWidth +
                                                                                childCardSpacing)
                                                                )
                                                            );

                                                        node.append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-child-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                minChildX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                childLevelY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                maxChildX
                                                            )
                                                            .attr(
                                                                "y2",
                                                                childLevelY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );

                                                        siblingChildren.forEach(
                                                            (
                                                                child,
                                                                childIndex
                                                            ) => {
                                                                const childX =
                                                                    startChildX +
                                                                    childIndex *
                                                                        (grandparentCardWidth +
                                                                            childCardSpacing);
                                                                node.append(
                                                                    "line"
                                                                )
                                                                    .attr(
                                                                        "class",
                                                                        "parent-child-link"
                                                                    )
                                                                    .attr(
                                                                        "x1",
                                                                        childX
                                                                    )
                                                                    .attr(
                                                                        "y1",
                                                                        childLevelY
                                                                    )
                                                                    .attr(
                                                                        "x2",
                                                                        childX
                                                                    )
                                                                    .attr(
                                                                        "y2",
                                                                        childCardY -
                                                                            grandparentCardHeight /
                                                                                2
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#999"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        2
                                                                    )
                                                                    .style(
                                                                        "pointer-events",
                                                                        "none"
                                                                    );
                                                            }
                                                        );
                                                    } else {
                                                        const childX =
                                                            startChildX;
                                                        node.append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-child-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                siblingX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                childLevelY
                                                            )
                                                            .attr("x2", childX)
                                                            .attr(
                                                                "y2",
                                                                childLevelY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );

                                                        node.append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-child-link"
                                                            )
                                                            .attr("x1", childX)
                                                            .attr(
                                                                "y1",
                                                                childLevelY
                                                            )
                                                            .attr("x2", childX)
                                                            .attr(
                                                                "y2",
                                                                childCardY -
                                                                    grandparentCardHeight /
                                                                        2
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    }
                                                }

                                                siblingChildren.forEach(
                                                    (child, childIndex) => {
                                                        const childX =
                                                            startChildX +
                                                            childIndex *
                                                                (grandparentCardWidth +
                                                                    childCardSpacing);

                                                        const childGroup = node
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "sibling-child-card"
                                                            )
                                                            .attr(
                                                                "data-person-id",
                                                                child.id
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${childX}, ${childCardY})`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    if (
                                                                        typeof window.openProfileSidebar ===
                                                                        "function"
                                                                    ) {
                                                                        window.openProfileSidebar(
                                                                            child.id,
                                                                            child
                                                                        );
                                                                    }
                                                                }
                                                            );

                                                        const childBorderColor =
                                                            child.gender ===
                                                            "female"
                                                                ? "#ffb6c1"
                                                                : "#add8e6";
                                                        childGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -grandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -grandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                grandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                grandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                childBorderColor
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            )
                                                            .style(
                                                                "filter",
                                                                "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                            );

                                                        const childIcon =
                                                            childGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            childIcon,
                                                            child,
                                                            svg
                                                        );

                                                        let childName =
                                                            child.name;
                                                        if (!childName) {
                                                            childName =
                                                                child.first_name ||
                                                                "";
                                                            if (
                                                                child.last_name
                                                            ) {
                                                                childName +=
                                                                    " " +
                                                                    child.last_name;
                                                            }
                                                            if (!childName) {
                                                                childName =
                                                                    "Unknown";
                                                            }
                                                        }
                                                        childGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                childName.length >
                                                                    15
                                                                    ? childName.substring(
                                                                          0,
                                                                          25
                                                                      ) + "..."
                                                                    : childName
                                                            );

                                                        childGroup
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 32)
                                                            .attr("r", 10)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        child
                                                                    );
                                                                }
                                                            );
                                                        childGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 36)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "16px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "bold"
                                                            )
                                                            .text("+")
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        child
                                                                    );
                                                                }
                                                            );

                                                        addEditDeleteIcons(
                                                            childGroup,
                                                            child.id,
                                                            childName
                                                        );
                                                    }
                                                );
                                            }

                                            if (
                                                sibling.spouses &&
                                                sibling.spouses.length > 0
                                            ) {
                                                const partnerId =
                                                    sibling.spouses[0];
                                                const partnerData =
                                                    treeData.find(
                                                        (p) =>
                                                            p.id === partnerId
                                                    );

                                                if (partnerData) {
                                                    const partnerX =
                                                        siblingX +
                                                        grandparentCardWidth +
                                                        grandfatherPartnerCloseSpacingMother;
                                                    const partnerY = siblingY;

                                                    const partnerGroup = node
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "sibling-partner-card"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${partnerX}, ${partnerY})`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                if (
                                                                    typeof window.openProfileSidebar ===
                                                                    "function"
                                                                ) {
                                                                    window.openProfileSidebar(
                                                                        partnerData.id,
                                                                        partnerData
                                                                    );
                                                                }
                                                            }
                                                        );

                                                    const partnerBorderColor =
                                                        partnerData.gender ===
                                                        "female"
                                                            ? "#ffb6c1"
                                                            : "#add8e6";
                                                    partnerGroup
                                                        .append("rect")
                                                        .attr(
                                                            "x",
                                                            -grandparentCardWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -grandparentCardHeight /
                                                                2
                                                        )
                                                        .attr(
                                                            "width",
                                                            grandparentCardWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            grandparentCardHeight
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("ry", 8)
                                                        .attr("fill", "white")
                                                        .attr(
                                                            "stroke",
                                                            partnerBorderColor
                                                        )
                                                        .attr("stroke-width", 3)
                                                        .style(
                                                            "filter",
                                                            "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                        );

                                                    const partnerIcon =
                                                        partnerGroup
                                                            .append("g")
                                                            .attr(
                                                                "transform",
                                                                "translate(0, -20)"
                                                            );
                                                    renderAvatar(
                                                        partnerIcon,
                                                        partnerData,
                                                        svg
                                                    );

                                                    let partnerName =
                                                        partnerData.name;
                                                    if (!partnerName) {
                                                        partnerName =
                                                            partnerData.first_name ||
                                                            "";
                                                        if (
                                                            partnerData.last_name
                                                        ) {
                                                            partnerName +=
                                                                " " +
                                                                partnerData.last_name;
                                                        }
                                                        if (!partnerName) {
                                                            partnerName =
                                                                "Unknown";
                                                        }
                                                    }
                                                    partnerGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 20)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "12px"
                                                        )
                                                        .attr("fill", "#333")
                                                        .text(
                                                            partnerName.length >
                                                                15
                                                                ? partnerName.substring(
                                                                      0,
                                                                      25
                                                                  ) + "..."
                                                                : partnerName
                                                        );

                                                    partnerGroup
                                                        .append("circle")
                                                        .attr("cx", 0)
                                                        .attr("cy", 32)
                                                        .attr("r", 10)
                                                        .attr("fill", "white")
                                                        .attr("stroke", "#999")
                                                        .attr("stroke-width", 1)
                                                        .style(
                                                            "cursor",
                                                            "pointer"
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                openBranchBuilder(
                                                                    partnerData
                                                                );
                                                            }
                                                        );
                                                    partnerGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 36)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "16px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "bold"
                                                        )
                                                        .text("+")
                                                        .style(
                                                            "cursor",
                                                            "pointer"
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                openBranchBuilder(
                                                                    partnerData
                                                                );
                                                            }
                                                        );

                                                    addEditDeleteIcons(
                                                        partnerGroup,
                                                        partnerData.id,
                                                        partnerName
                                                    );

                                                    partnerGroup
                                                        .append("line")
                                                        .attr(
                                                            "x1",
                                                            -grandparentCardWidth /
                                                                2
                                                        )
                                                        .attr("y1", 0)
                                                        .attr(
                                                            "x2",
                                                            -grandparentCardWidth /
                                                                2 -
                                                                grandfatherPartnerCloseSpacingMother
                                                        )
                                                        .attr("y2", 0)
                                                        .attr("stroke", "#999")
                                                        .attr(
                                                            "stroke-width",
                                                            2
                                                        );

                                                    grandfatherCumulativeXMother +=
                                                        grandparentCardWidth +
                                                        grandfatherPartnerCloseSpacingMother +
                                                        grandparentCardWidth;
                                                }
                                            } else {
                                                grandfatherCumulativeXMother +=
                                                    grandparentCardWidth +
                                                    grandfatherSiblingSpacingMother;
                                            }
                                        }
                                    );

                                    // Draw complete horizontal line from grandfather to last sibling (matching father's siblings pattern)
                                    if (
                                        sortedGrandfatherSiblingsMother.length >
                                        0
                                    ) {
                                        const grandfatherCardCenterXMother =
                                            grandfatherCardXMother;
                                        const linkYMother =
                                            grandparentCardY -
                                            grandparentCardHeight / 2 -
                                            20;

                                        // Draw horizontal line from grandfather card's top center to the last (rightmost) sibling card
                                        const startXMother =
                                            grandfatherCardCenterXMother;
                                        const startYMother = linkYMother;
                                        const endXMother =
                                            grandfatherSiblingPositionsMother.length >
                                            0
                                                ? grandfatherSiblingPositionsMother[
                                                      grandfatherSiblingPositionsMother.length -
                                                          1
                                                  ].x
                                                : grandfatherCardCenterXMother;
                                        const endYMother = linkYMother;

                                        // Draw horizontal line
                                        motherGroup
                                            .append("line")
                                            .attr("class", "sibling-link")
                                            .attr("x1", startXMother)
                                            .attr("y1", startYMother)
                                            .attr("x2", endXMother)
                                            .attr("y2", endYMother)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");

                                        // Draw vertical line from horizontal line down to grandfather card top
                                        motherGroup
                                            .append("line")
                                            .attr("class", "sibling-link")
                                            .attr(
                                                "x1",
                                                grandfatherCardCenterXMother
                                            )
                                            .attr("y1", startYMother)
                                            .attr(
                                                "x2",
                                                grandfatherCardCenterXMother
                                            )
                                            .attr(
                                                "y2",
                                                grandparentCardY -
                                                    grandparentCardHeight / 2
                                            )
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");

                                        // Draw vertical lines from horizontal line down to each sibling card
                                        grandfatherSiblingPositionsMother.forEach(
                                            (pos) => {
                                                const siblingX = pos.x;
                                                const siblingY =
                                                    pos.y || grandparentCardY;
                                                // Draw line from horizontal line down to sibling card top
                                                motherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "sibling-link"
                                                    )
                                                    .attr("x1", siblingX)
                                                    .attr("y1", linkYMother)
                                                    .attr("x2", siblingX)
                                                    .attr(
                                                        "y2",
                                                        siblingY -
                                                            grandparentCardHeight /
                                                                2
                                                    )
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 2)
                                                    .style(
                                                        "pointer-events",
                                                        "none"
                                                    );
                                            }
                                        );
                                    }
                                } // End of if (!window.grandmotherBranchToggled) for grandfather siblings in mother's branch

                                // Recursively show great-grandparent cards or "Add father/mother" buttons above grandfather
                                // Only show if ancestors are NOT hidden AND grandmother branch is NOT toggled
                                // When grandmotherBranchToggled is true, hide grandfather's great-grandparents (same logic as father side)
                                console.log(
                                    "Checking grandfather's parents - grandfather:",
                                    grandfather.first_name || grandfather.name,
                                    "ID:",
                                    grandfather.id,
                                    "areMotherAncestorsHidden:",
                                    areMotherAncestorsHidden,
                                    "grandmotherBranchToggled:",
                                    window.grandmotherBranchToggled
                                );
                                const areGrandfatherAncestorsHidden =
                                    areAncestorsHidden(grandfather.id);
                                if (
                                    !areGrandfatherAncestorsHidden &&
                                    !window.grandmotherBranchToggled
                                ) {
                                    const grandfatherParentButtonY =
                                        grandparentCardY - 150;
                                    const grandfatherParents =
                                        grandfather.parents || [];
                                    console.log(
                                        "Grandfather parents array:",
                                        grandfatherParents
                                    );

                                    // Check if grandfather has parents in treeData (regardless of hidden state)
                                    const grandfatherParentData =
                                        grandfatherParents
                                            .map((parentId) =>
                                                treeData.find(
                                                    (p) => p.id === parentId
                                                )
                                            )
                                            .filter((p) => p);

                                    let greatGrandfather =
                                        grandfatherParentData.find(
                                            (p) => p.gender === "male"
                                        );
                                    let greatGrandmother =
                                        grandfatherParentData.find(
                                            (p) => p.gender === "female"
                                        );

                                    console.log(
                                        "After initial search - greatGrandmother:",
                                        greatGrandmother
                                            ? {
                                                  id: greatGrandmother.id,
                                                  name:
                                                      greatGrandmother.first_name ||
                                                      greatGrandmother.name,
                                              }
                                            : "NOT FOUND",
                                        "grandfather.id:",
                                        grandfather.id
                                    );

                                    // Fallback: If great-grandmother not found in grandfatherParents, search entire treeData
                                    // by checking if any person has grandfather.id in their children array
                                    // This handles cases where the great-grandmother was just added but grandfather.parents wasn't updated
                                    if (!greatGrandmother && grandfather.id) {
                                        console.log(
                                            "Fallback search for great-grandmother - searching treeData for female with grandfather ID",
                                            grandfather.id,
                                            "in children array"
                                        );

                                        // First, check if person 295 exists in treeData (the great-grandmother the user mentioned)
                                        const person295 = treeData.find(
                                            (p) => p.id === 295
                                        );
                                        console.log(
                                            "Person 295 in treeData:",
                                            person295
                                                ? {
                                                      id: person295.id,
                                                      name:
                                                          person295.first_name ||
                                                          person295.name,
                                                      gender: person295.gender,
                                                      children:
                                                          person295.children ||
                                                          [],
                                                      parents:
                                                          person295.parents ||
                                                          [],
                                                  }
                                                : "NOT FOUND"
                                        );

                                        const allFemales = treeData.filter(
                                            (p) => p.gender === "female"
                                        );
                                        console.log(
                                            "All females in treeData:",
                                            allFemales.map((p) => ({
                                                id: p.id,
                                                name: p.first_name || p.name,
                                                children: p.children || [],
                                                parents: p.parents || [],
                                            }))
                                        );

                                        // Check if person 295 is in the females list
                                        const person295InFemales =
                                            allFemales.find(
                                                (p) => p.id === 295
                                            );
                                        console.log(
                                            "Person 295 in females list:",
                                            person295InFemales
                                                ? {
                                                      id: person295InFemales.id,
                                                      name:
                                                          person295InFemales.first_name ||
                                                          person295InFemales.name,
                                                  }
                                                : "NOT FOUND"
                                        );

                                        // Search by children array
                                        greatGrandmother = treeData.find(
                                            (p) => {
                                                if (p.gender !== "female")
                                                    return false;
                                                const personChildren =
                                                    p.children || [];
                                                const hasGrandfatherAsChild =
                                                    Array.isArray(
                                                        personChildren
                                                    ) &&
                                                    personChildren.includes(
                                                        grandfather.id
                                                    );
                                                if (hasGrandfatherAsChild) {
                                                    console.log(
                                                        "Found great-grandmother via children array:",
                                                        p.first_name || p.name,
                                                        "ID:",
                                                        p.id
                                                    );
                                                }
                                                return hasGrandfatherAsChild;
                                            }
                                        );

                                        // If still not found, check if person 295 exists and is a female
                                        // This handles cases where the relationship exists in DB but children array isn't updated
                                        if (!greatGrandmother) {
                                            // Try to find person 295 in treeData (might not be in allFemales if gender is null/undefined)
                                            const person295Direct =
                                                treeData.find(
                                                    (p) => p.id === 295
                                                );
                                            console.log(
                                                "Direct search for person 295:",
                                                person295Direct
                                                    ? {
                                                          id: person295Direct.id,
                                                          name:
                                                              person295Direct.first_name ||
                                                              person295Direct.name,
                                                          gender: person295Direct.gender,
                                                      }
                                                    : "NOT FOUND"
                                            );

                                            if (
                                                person295Direct &&
                                                (person295Direct.gender ===
                                                    "female" ||
                                                    !person295Direct.gender)
                                            ) {
                                                // If grandfather only has one parent (the father), assume person 295 is the mother
                                                if (
                                                    grandfatherParents.length ===
                                                        1 &&
                                                    grandfatherParents[0] !==
                                                        295
                                                ) {
                                                    console.log(
                                                        "Grandfather has only one parent (father ID: " +
                                                            grandfatherParents[0] +
                                                            "), using person 295 as the mother"
                                                    );
                                                    greatGrandmother =
                                                        person295Direct;
                                                } else if (
                                                    person295Direct.gender ===
                                                    "female"
                                                ) {
                                                    console.log(
                                                        "Using person 295 as great-grandmother (found in treeData, gender is female)"
                                                    );
                                                    greatGrandmother =
                                                        person295Direct;
                                                }
                                            }
                                        }

                                        if (!greatGrandmother) {
                                            console.log(
                                                "Great-grandmother not found via fallback search"
                                            );
                                        }
                                    }

                                    // Same fallback for great-grandfather
                                    if (!greatGrandfather && grandfather.id) {
                                        greatGrandfather = treeData.find(
                                            (p) => {
                                                if (p.gender !== "male")
                                                    return false;
                                                const personChildren =
                                                    p.children || [];
                                                return (
                                                    Array.isArray(
                                                        personChildren
                                                    ) &&
                                                    personChildren.includes(
                                                        grandfather.id
                                                    )
                                                );
                                            }
                                        );
                                    }

                                    const grandfatherHasParents =
                                        greatGrandfather || greatGrandmother;

                                    console.log(
                                        "Mother's branch - Grandfather's parents check:",
                                        {
                                            grandfatherId: grandfather.id,
                                            grandfatherName:
                                                grandfather.first_name ||
                                                grandfather.name,
                                            grandfatherParents:
                                                grandfatherParents,
                                            grandfatherParentData:
                                                grandfatherParentData.map(
                                                    (p) => ({
                                                        id: p.id,
                                                        name:
                                                            p.first_name ||
                                                            p.name,
                                                        gender: p.gender,
                                                    })
                                                ),
                                            greatGrandfather: greatGrandfather
                                                ? {
                                                      id: greatGrandfather.id,
                                                      name:
                                                          greatGrandfather.first_name ||
                                                          greatGrandfather.name,
                                                  }
                                                : null,
                                            greatGrandmother: greatGrandmother
                                                ? {
                                                      id: greatGrandmother.id,
                                                      name:
                                                          greatGrandmother.first_name ||
                                                          greatGrandmother.name,
                                                  }
                                                : null,
                                            grandfatherHasParents:
                                                grandfatherHasParents,
                                        }
                                    );

                                    if (grandfatherHasParents) {
                                        // Show great-grandparent cards above grandfather (they exist in data)

                                        const greatGrandparentCardY =
                                            grandfatherParentButtonY -
                                            grandparentCardY;
                                        const greatGrandparentCardWidth = 140; // Card width (decent size)
                                        const greatGrandparentCardHeight = 90; // Card height (decent size)
                                        const greatGrandparentSpacing = 150; // Reduced spacing for great-grandparents on mother's side

                                        // Show great-grandfather card (left)
                                        if (greatGrandfather) {
                                            const greatGrandfatherGroup =
                                                grandfatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "parent-card"
                                                    )
                                                    .attr(
                                                        "data-person-id",
                                                        greatGrandfather.id
                                                    )
                                                    .attr(
                                                        "transform",
                                                        `translate(${
                                                            -greatGrandparentCardWidth /
                                                                2 -
                                                            greatGrandparentSpacing /
                                                                2
                                                        }, ${greatGrandparentCardY})`
                                                    )
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.preventDefault();
                                                            event.stopPropagation();
                                                            if (
                                                                typeof window.openProfileSidebar ===
                                                                "function"
                                                            ) {
                                                                window.openProfileSidebar(
                                                                    greatGrandfather.id,
                                                                    greatGrandfather
                                                                );
                                                            }
                                                        }
                                                    );

                                            greatGrandfatherGroup
                                                .append("rect")
                                                .attr(
                                                    "x",
                                                    -greatGrandparentCardWidth /
                                                        2
                                                )
                                                .attr(
                                                    "y",
                                                    -greatGrandparentCardHeight /
                                                        2
                                                )
                                                .attr(
                                                    "width",
                                                    greatGrandparentCardWidth
                                                )
                                                .attr(
                                                    "height",
                                                    greatGrandparentCardHeight
                                                )
                                                .attr("rx", 8)
                                                .attr("ry", 8)
                                                .attr("fill", "white")
                                                .attr("stroke", "#add8e6")
                                                .attr("stroke-width", 3);

                                            const greatGrandfatherIcon =
                                                greatGrandfatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, -20)"
                                                    );
                                            // Use renderAvatar to support photos
                                            renderAvatar(
                                                greatGrandfatherIcon,
                                                greatGrandfather,
                                                svg
                                            );

                                            let greatGrandfatherName =
                                                greatGrandfather.name ||
                                                greatGrandfather.first_name ||
                                                "";
                                            if (greatGrandfather.last_name)
                                                greatGrandfatherName +=
                                                    " " +
                                                    greatGrandfather.last_name;
                                            if (!greatGrandfatherName)
                                                greatGrandfatherName =
                                                    "Unknown";

                                            greatGrandfatherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 20)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "12px")
                                                .attr("fill", "#333")
                                                .text(
                                                    greatGrandfatherName.length >
                                                        15
                                                        ? greatGrandfatherName.substring(
                                                              0,
                                                              15
                                                          ) + "..."
                                                        : greatGrandfatherName
                                                );

                                            addEditDeleteIcons(
                                                greatGrandfatherGroup,
                                                greatGrandfather.id,
                                                greatGrandfatherName
                                            );

                                            // Add toggle hide/show button (eye icon) - top right
                                            const isGreatGrandfatherHidden =
                                                areAncestorsHidden(
                                                    greatGrandfather.id
                                                );
                                            const hideGreatGrandfatherButton =
                                                greatGrandfatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "hide-branch-button"
                                                    )
                                                    .attr(
                                                        "transform",
                                                        "translate(45, -35)"
                                                    )
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            togglePersonBranch(
                                                                greatGrandfather.id
                                                            );
                                                        }
                                                    );

                                            hideGreatGrandfatherButton
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 0)
                                                .attr("r", 10)
                                                .attr(
                                                    "fill",
                                                    isGreatGrandfatherHidden
                                                        ? "#28a745"
                                                        : "#6c757d"
                                                )
                                                .attr("stroke", "white")
                                                .attr("stroke-width", 1);

                                            hideGreatGrandfatherButton
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 3)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "10px")
                                                .attr("fill", "white")
                                                .text(
                                                    isGreatGrandfatherHidden
                                                        ? "👁️"
                                                        : "👁️‍🗨️"
                                                );

                                            hideGreatGrandfatherButton
                                                .append("title")
                                                .text(
                                                    isGreatGrandfatherHidden
                                                        ? `Click to show the family branch of ${greatGrandfatherName}`
                                                        : `Click to hide the family branch of ${greatGrandfatherName}`
                                                );

                                            // Add button - black style matching root node
                                            const greatGrandfatherIconsForMother =
                                                greatGrandfatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, 35)"
                                                    )
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            openBranchBuilder(
                                                                greatGrandfather
                                                            );
                                                        }
                                                    );
                                            greatGrandfatherIconsForMother
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 0)
                                                .attr("r", 10)
                                                .attr("fill", "white")
                                                .attr("stroke", "#d0d0d0")
                                                .attr("stroke-width", 1);
                                            greatGrandfatherIconsForMother
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 4)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "16px")
                                                .attr("font-weight", "bold")
                                                .attr("fill", "#333")
                                                .text("+");

                                            // Check if great-grandfather has parents - show "Add father" and "Add mother" buttons if no parents exist
                                            const greatGrandfatherParents =
                                                greatGrandfather.parents || [];
                                            const visibleGreatGrandfatherParents =
                                                greatGrandfatherParents.filter(
                                                    (pId) =>
                                                        !window.hiddenAncestorIds ||
                                                        !window.hiddenAncestorIds.has(
                                                            pId
                                                        )
                                                );
                                            const greatGrandfatherHasParents =
                                                visibleGreatGrandfatherParents.length >
                                                0;
                                            const greatGrandfatherHasBothParents =
                                                visibleGreatGrandfatherParents.length >=
                                                2;

                                            // Always show "Add father" and "Add mother" buttons on great-grandfather card when visible
                                            // This matches the behavior of other cards in the tree
                                            // Show buttons when there are no visible parents (regardless of actual parents)
                                            console.log(
                                                "Great grandfather (mother's branch) button check:",
                                                {
                                                    id: greatGrandfather.id,
                                                    name: greatGrandfatherName,
                                                    hasParents:
                                                        greatGrandfatherHasParents,
                                                    hasBothParents:
                                                        greatGrandfatherHasBothParents,
                                                    parents:
                                                        greatGrandfatherParents,
                                                    visibleParents:
                                                        visibleGreatGrandfatherParents,
                                                    areMotherAncestorsHidden:
                                                        areMotherAncestorsHidden,
                                                }
                                            );
                                            // Show buttons independently - each button shows when that specific parent doesn't exist
                                            // Check actual parent data to determine which buttons to show
                                            // Use greatGrandfatherParents (all parent IDs) not just visible ones
                                            const greatGrandfatherParentData =
                                                greatGrandfatherParents
                                                    .map((parentId) =>
                                                        treeData.find(
                                                            (p) =>
                                                                p.id ===
                                                                parentId
                                                        )
                                                    )
                                                    .filter((p) => p);

                                            const greatGreatGrandfather =
                                                greatGrandfatherParentData.find(
                                                    (p) => p.gender === "male"
                                                );
                                            const greatGreatGrandmother =
                                                greatGrandfatherParentData.find(
                                                    (p) => p.gender === "female"
                                                );

                                            console.log(
                                                "Great-grandfather button check (mother's branch):",
                                                {
                                                    greatGrandfatherId:
                                                        greatGrandfather.id,
                                                    greatGrandfatherParents:
                                                        greatGrandfatherParents,
                                                    greatGrandfatherParentData:
                                                        greatGrandfatherParentData.map(
                                                            (p) => ({
                                                                id: p.id,
                                                                name:
                                                                    p.name ||
                                                                    p.first_name,
                                                                gender: p.gender,
                                                            })
                                                        ),
                                                    greatGreatGrandfather:
                                                        greatGreatGrandfather
                                                            ? {
                                                                  id: greatGreatGrandfather.id,
                                                                  name:
                                                                      greatGreatGrandfather.name ||
                                                                      greatGreatGrandfather.first_name,
                                                              }
                                                            : null,
                                                    greatGreatGrandmother:
                                                        greatGreatGrandmother
                                                            ? {
                                                                  id: greatGreatGrandmother.id,
                                                                  name:
                                                                      greatGreatGrandmother.name ||
                                                                      greatGreatGrandmother.first_name,
                                                              }
                                                            : null,
                                                    showAddFather:
                                                        !greatGreatGrandfather,
                                                    showAddMother:
                                                        !greatGreatGrandmother,
                                                }
                                            );

                                            const areGreatGrandfatherAncestorsHidden =
                                                areAncestorsHidden(
                                                    greatGrandfather.id
                                                );
                                            if (
                                                !areGreatGrandfatherAncestorsHidden
                                            ) {
                                                // Check if great-great-grandparents exist and should be shown
                                                const greatGreatGrandfatherHasParents =
                                                    greatGreatGrandfather &&
                                                    greatGreatGrandfather.parents &&
                                                    greatGreatGrandfather
                                                        .parents.length > 0;
                                                const greatGreatGrandmotherHasParents =
                                                    greatGreatGrandmother &&
                                                    greatGreatGrandmother.parents &&
                                                    greatGreatGrandmother
                                                        .parents.length > 0;

                                                // Show great-great-grandparent cards if they exist
                                                if (
                                                    greatGreatGrandfather ||
                                                    greatGreatGrandmother
                                                ) {
                                                    const greatGreatGrandparentCardY =
                                                        greatGrandparentCardY -
                                                        150; // Same position as Add buttons
                                                    const greatGreatGrandparentCardWidth = 100;
                                                    const greatGreatGrandparentCardHeight = 80;
                                                    const greatGreatGrandparentSpacing = 100; // Reduced spacing for great-great-grandparents

                                                    // Show great-great-grandfather card (left)
                                                    if (greatGreatGrandfather) {
                                                        const greatGreatGrandfatherGroup =
                                                            greatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "parent-card"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        -greatGreatGrandparentCardWidth /
                                                                            2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandfather.id,
                                                                                greatGreatGrandfather
                                                                            );
                                                                        } else {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandfather.id,
                                                                                    greatGreatGrandfather
                                                                                );
                                                                            }
                                                                        }
                                                                    }
                                                                );

                                                        greatGreatGrandfatherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#add8e6"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            );

                                                        const greatGreatGrandfatherIcon =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            greatGreatGrandfatherIcon,
                                                            greatGreatGrandfather,
                                                            svg
                                                        );

                                                        let greatGreatGrandfatherName =
                                                            greatGreatGrandfather.name ||
                                                            greatGreatGrandfather.first_name ||
                                                            "";
                                                        if (
                                                            greatGreatGrandfather.last_name
                                                        )
                                                            greatGreatGrandfatherName +=
                                                                " " +
                                                                greatGreatGrandfather.last_name;
                                                        if (
                                                            !greatGreatGrandfatherName
                                                        )
                                                            greatGreatGrandfatherName =
                                                                "Unknown";

                                                        greatGreatGrandfatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                greatGreatGrandfatherName.length >
                                                                    15
                                                                    ? greatGreatGrandfatherName.substring(
                                                                          0,
                                                                          15
                                                                      ) + "..."
                                                                    : greatGreatGrandfatherName
                                                            );

                                                        addEditDeleteIcons(
                                                            greatGreatGrandfatherGroup,
                                                            greatGreatGrandfather.id,
                                                            greatGreatGrandfatherName
                                                        );

                                                        // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                        const greatGreatGrandfatherIconsForGreatGrandfather =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, 35)"
                                                                );
                                                        greatGreatGrandfatherIconsForGreatGrandfather
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#28a745"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandfather
                                                                    );
                                                                }
                                                            );
                                                        greatGreatGrandfatherIconsForGreatGrandfather
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 4)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#28a745"
                                                            )
                                                            .text("+");
                                                    }

                                                    // Show great-great-grandmother card (right)
                                                    if (greatGreatGrandmother) {
                                                        const greatGreatGrandmotherGroup =
                                                            greatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "parent-card"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        greatGreatGrandparentCardWidth /
                                                                            2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandmother.id,
                                                                                greatGreatGrandmother
                                                                            );
                                                                        } else {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandmother.id,
                                                                                    greatGreatGrandmother
                                                                                );
                                                                            }
                                                                        }
                                                                    }
                                                                );

                                                        greatGreatGrandmotherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#ffb6c1"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            );

                                                        const greatGreatGrandmotherIcon =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            greatGreatGrandmotherIcon,
                                                            greatGreatGrandmother,
                                                            svg
                                                        );

                                                        let greatGreatGrandmotherName =
                                                            greatGreatGrandmother.name ||
                                                            greatGreatGrandmother.first_name ||
                                                            "";
                                                        if (
                                                            greatGreatGrandmother.last_name
                                                        )
                                                            greatGreatGrandmotherName +=
                                                                " " +
                                                                greatGreatGrandmother.last_name;
                                                        if (
                                                            !greatGreatGrandmotherName
                                                        )
                                                            greatGreatGrandmotherName =
                                                                "Unknown";

                                                        greatGreatGrandmotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                greatGreatGrandmotherName.length >
                                                                    15
                                                                    ? greatGreatGrandmotherName.substring(
                                                                          0,
                                                                          15
                                                                      ) + "..."
                                                                    : greatGreatGrandmotherName
                                                            );

                                                        addEditDeleteIcons(
                                                            greatGreatGrandmotherGroup,
                                                            greatGreatGrandmother.id,
                                                            greatGreatGrandmotherName
                                                        );

                                                        // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                        const greatGreatGrandmotherIconsForGreatGrandfather =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, 35)"
                                                                );
                                                        greatGreatGrandmotherIconsForGreatGrandfather
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#28a745"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandmother
                                                                    );
                                                                }
                                                            );
                                                        greatGreatGrandmotherIconsForGreatGrandfather
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 4)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#28a745"
                                                            )
                                                            .text("+");
                                                    }

                                                    // Add connecting lines from great-great-grandparents to great-grandfather
                                                    const greatGreatGrandparentLineY =
                                                        greatGreatGrandparentCardY -
                                                        greatGrandparentCardY +
                                                        greatGreatGrandparentCardHeight /
                                                            2;
                                                    const greatGrandfatherCardTopY =
                                                        -greatGrandparentCardHeight /
                                                        2; // Connect to top of great-grandfather card

                                                    if (
                                                        greatGreatGrandfather &&
                                                        greatGreatGrandmother
                                                    ) {
                                                        // Both exist - draw horizontal line and vertical line
                                                        const greatGreatGrandfatherX =
                                                            -greatGreatGrandparentCardWidth /
                                                                2 -
                                                            greatGreatGrandparentSpacing /
                                                                2;
                                                        const greatGreatGrandmotherX =
                                                            greatGreatGrandparentCardWidth /
                                                                2 +
                                                            greatGreatGrandparentSpacing /
                                                                2;

                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandfatherX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                greatGreatGrandmotherX
                                                            )
                                                            .attr(
                                                                "y2",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );

                                                        const greatGreatGrandparentMidX =
                                                            (greatGreatGrandfatherX +
                                                                greatGreatGrandmotherX) /
                                                            2;
                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandparentMidX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                greatGreatGrandparentMidX
                                                            )
                                                            .attr(
                                                                "y2",
                                                                greatGrandfatherCardTopY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    } else if (
                                                        greatGreatGrandfather
                                                    ) {
                                                        // Only great-great-grandfather
                                                        const greatGreatGrandfatherX =
                                                            -greatGreatGrandparentCardWidth /
                                                                2 -
                                                            greatGreatGrandparentSpacing /
                                                                2;
                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandfatherX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr("x2", 0)
                                                            .attr(
                                                                "y2",
                                                                greatGrandfatherCardTopY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    } else if (
                                                        greatGreatGrandmother
                                                    ) {
                                                        // Only great-great-grandmother
                                                        const greatGreatGrandmotherX =
                                                            greatGreatGrandparentCardWidth /
                                                                2 +
                                                            greatGreatGrandparentSpacing /
                                                                2;
                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandmotherX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr("x2", 0)
                                                            .attr(
                                                                "y2",
                                                                greatGrandfatherCardTopY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    }
                                                }

                                                // Add Father and Mother buttons - only show if ancestors are not hidden
                                                // These buttons should only appear when ancestors are visible
                                                if (
                                                    !areGreatGrandfatherAncestorsHidden
                                                ) {
                                                    const greatGreatGrandparentButtonY =
                                                        greatGrandparentCardY -
                                                        150;
                                                    // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                    const greatGreatGrandparentButtonWidth = 100; // Reduced button width to prevent overlap
                                                    const greatGreatGrandparentButtonHeight = 70; // Reduced button height to prevent overlap
                                                    const greatGreatGrandparentSpacing = 30; // Standardized button spacing for all generations

                                                    // Add Father button (left) - show if great-great-grandfather doesn't exist (regardless of great-great-grandmother)
                                                    if (
                                                        !greatGreatGrandfather
                                                    ) {
                                                        const greatGreatGrandfatherParentFatherGroup =
                                                            greatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        -greatGreatGrandparentButtonWidth /
                                                                            2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentButtonY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        addParentFromNode(
                                                                            greatGrandfather,
                                                                            "father"
                                                                        );
                                                                    }
                                                                );

                                                        greatGreatGrandfatherParentFatherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentButtonWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentButtonHeight
                                                            )
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentButtonWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentButtonHeight /
                                                                    2
                                                            )
                                                            .attr("rx", 8)
                                                            .attr(
                                                                "stroke",
                                                                "#ddd"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .attr(
                                                                "stroke-dasharray",
                                                                "5,5"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            );

                                                        greatGreatGrandfatherParentFatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", -15)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "28px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "300"
                                                            )
                                                            .text("+");

                                                        greatGreatGrandfatherParentFatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 8)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "11px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "500"
                                                            )
                                                            .text("Add father");
                                                    }

                                                    // Add Mother button (right) - show if great-great-grandmother doesn't exist (regardless of great-great-grandfather)
                                                    if (
                                                        !greatGreatGrandmother
                                                    ) {
                                                        const greatGreatGrandfatherParentMotherGroup =
                                                            greatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        greatGreatGrandparentButtonWidth /
                                                                            2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentButtonY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        addParentFromNode(
                                                                            greatGrandfather,
                                                                            "mother"
                                                                        );
                                                                    }
                                                                );

                                                        greatGreatGrandfatherParentMotherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentButtonWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentButtonHeight
                                                            )
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentButtonWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentButtonHeight /
                                                                    2
                                                            )
                                                            .attr("rx", 8)
                                                            .attr(
                                                                "stroke",
                                                                "#ddd"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .attr(
                                                                "stroke-dasharray",
                                                                "5,5"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            );

                                                        greatGreatGrandfatherParentMotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", -15)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "28px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "300"
                                                            )
                                                            .text("+");

                                                        greatGreatGrandfatherParentMotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 8)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "11px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "500"
                                                            )
                                                            .text("Add mother");
                                                    }

                                                    // Add lines from top center of great-grandfather card, branching to parent buttons
                                                    const greatGrandfatherParentBranchY =
                                                        greatGreatGrandparentButtonY -
                                                        greatGrandparentCardY +
                                                        greatGreatGrandparentButtonHeight /
                                                            2 +
                                                        10;
                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr("x1", 0)
                                                        .attr(
                                                            "y1",
                                                            -greatGrandparentCardHeight /
                                                                2
                                                        )
                                                        .attr("x2", 0)
                                                        .attr(
                                                            "y2",
                                                            greatGrandfatherParentBranchY
                                                        );

                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandfatherParentBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGrandfatherParentBranchY
                                                        );

                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandfatherParentBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY +
                                                                greatGreatGrandparentButtonHeight /
                                                                    2
                                                        );

                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandfatherParentBranchY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY +
                                                                greatGreatGrandparentButtonHeight /
                                                                    2
                                                        );
                                                }
                                            }
                                        } else {
                                            // Great-grandfather doesn't exist - show "Add father" button above grandfather card
                                            // Also show "Add mother" button if great-grandmother doesn't exist
                                            if (
                                                !areGrandfatherAncestorsHidden
                                            ) {
                                                const greatGrandparentButtonY =
                                                    grandfatherParentButtonY -
                                                    grandparentCardY;
                                                // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                const greatGrandparentButtonWidth = 140; // Standardized button width for all generations
                                                const greatGrandparentButtonHeight = 90; // Standardized button height for all generations
                                                const greatGrandparentSpacing = 30; // Standardized button spacing for all generations

                                                // Add Father button (left) - always show when great-grandfather doesn't exist
                                                const grandfatherParentFatherGroup =
                                                    grandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                -greatGrandparentButtonWidth /
                                                                    2 -
                                                                greatGrandparentSpacing /
                                                                    2
                                                            }, ${greatGrandparentButtonY})`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    grandfather,
                                                                    "father"
                                                                );
                                                            }
                                                        );

                                                grandfatherParentFatherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        greatGrandparentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        greatGrandparentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -greatGrandparentButtonWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -greatGrandparentButtonHeight /
                                                            2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                grandfatherParentFatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                grandfatherParentFatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add father");

                                                // Add Mother button (right) - show if great-grandmother doesn't exist
                                                if (!greatGrandmother) {
                                                    const grandfatherParentMotherGroup =
                                                        grandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    greatGrandparentButtonWidth /
                                                                        2 +
                                                                    greatGrandparentSpacing /
                                                                        2
                                                                }, ${greatGrandparentButtonY})`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        grandfather,
                                                                        "mother"
                                                                    );
                                                                }
                                                            );

                                                    grandfatherParentMotherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "width",
                                                            greatGrandparentButtonWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGrandparentButtonHeight
                                                        )
                                                        .attr(
                                                            "x",
                                                            -greatGrandparentButtonWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGrandparentButtonHeight /
                                                                2
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    grandfatherParentMotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    grandfatherParentMotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add mother");
                                                }
                                            }
                                        }

                                        // Show great-grandmother card (right) - render AFTER checking for "Add mother" button
                                        // This ensures the card appears when great-grandmother exists (found via fallback search)
                                        if (greatGrandmother) {
                                            console.log(
                                                "Rendering great-grandmother card in mother's branch:",
                                                greatGrandmother.first_name ||
                                                    greatGrandmother.name,
                                                "ID:",
                                                greatGrandmother.id
                                            );
                                            const greatGrandmotherGroup =
                                                grandfatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "parent-card"
                                                    )
                                                    .attr(
                                                        "data-person-id",
                                                        greatGrandmother.id
                                                    )
                                                    .attr(
                                                        "transform",
                                                        `translate(${
                                                            greatGrandparentCardWidth /
                                                                2 +
                                                            greatGrandparentSpacing /
                                                                2
                                                        }, ${greatGrandparentCardY})`
                                                    )
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            if (
                                                                typeof window.openProfileSidebar ===
                                                                "function"
                                                            ) {
                                                                window.openProfileSidebar(
                                                                    greatGrandmother.id,
                                                                    greatGrandmother
                                                                );
                                                            } else {
                                                                event.preventDefault();
                                                                event.stopPropagation();
                                                                if (
                                                                    typeof window.openProfileSidebar ===
                                                                    "function"
                                                                ) {
                                                                    window.openProfileSidebar(
                                                                        greatGrandmother.id,
                                                                        greatGrandmother
                                                                    );
                                                                }
                                                            }
                                                        }
                                                    );

                                            greatGrandmotherGroup
                                                .append("rect")
                                                .attr(
                                                    "x",
                                                    -greatGrandparentCardWidth /
                                                        2
                                                )
                                                .attr(
                                                    "y",
                                                    -greatGrandparentCardHeight /
                                                        2
                                                )
                                                .attr(
                                                    "width",
                                                    greatGrandparentCardWidth
                                                )
                                                .attr(
                                                    "height",
                                                    greatGrandparentCardHeight
                                                )
                                                .attr("rx", 8)
                                                .attr("ry", 8)
                                                .attr("fill", "white")
                                                .attr("stroke", "#ffb6c1")
                                                .attr("stroke-width", 3);

                                            const greatGrandmotherIcon =
                                                greatGrandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, -20)"
                                                    );
                                            // Use renderAvatar to support photos
                                            renderAvatar(
                                                greatGrandmotherIcon,
                                                greatGrandmother,
                                                svg
                                            );

                                            let greatGrandmotherName =
                                                greatGrandmother.name ||
                                                greatGrandmother.first_name ||
                                                "";
                                            if (greatGrandmother.last_name)
                                                greatGrandmotherName +=
                                                    " " +
                                                    greatGrandmother.last_name;
                                            if (!greatGrandmotherName)
                                                greatGrandmotherName =
                                                    "Unknown";

                                            greatGrandmotherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 20)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "12px")
                                                .attr("fill", "#333")
                                                .text(
                                                    greatGrandmotherName.length >
                                                        15
                                                        ? greatGrandmotherName.substring(
                                                              0,
                                                              15
                                                          ) + "..."
                                                        : greatGrandmotherName
                                                );

                                            addEditDeleteIcons(
                                                greatGrandmotherGroup,
                                                greatGrandmother.id,
                                                greatGrandmotherName
                                            );

                                            // Add toggle hide/show button (eye icon) - top right
                                            const isGreatGrandmotherHidden =
                                                areAncestorsHidden(
                                                    greatGrandmother.id
                                                );
                                            const hideGreatGrandmotherButton =
                                                greatGrandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "hide-branch-button"
                                                    )
                                                    .attr(
                                                        "transform",
                                                        "translate(45, -35)"
                                                    )
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            togglePersonBranch(
                                                                greatGrandmother.id
                                                            );
                                                        }
                                                    );

                                            hideGreatGrandmotherButton
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 0)
                                                .attr("r", 10)
                                                .attr(
                                                    "fill",
                                                    isGreatGrandmotherHidden
                                                        ? "#28a745"
                                                        : "#6c757d"
                                                )
                                                .attr("stroke", "white")
                                                .attr("stroke-width", 1);

                                            hideGreatGrandmotherButton
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 3)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "10px")
                                                .attr("fill", "white")
                                                .text(
                                                    isGreatGrandmotherHidden
                                                        ? "👁️"
                                                        : "👁️‍🗨️"
                                                );

                                            hideGreatGrandmotherButton
                                                .append("title")
                                                .text(
                                                    isGreatGrandmotherHidden
                                                        ? `Click to show the family branch of ${greatGrandmotherName}`
                                                        : `Click to hide the family branch of ${greatGrandmotherName}`
                                                );

                                            // Add button - black style matching root node
                                            const greatGrandmotherIconsForMother =
                                                greatGrandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, 35)"
                                                    )
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            openBranchBuilder(
                                                                greatGrandmother
                                                            );
                                                        }
                                                    );
                                            greatGrandmotherIconsForMother
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 0)
                                                .attr("r", 10)
                                                .attr("fill", "white")
                                                .attr("stroke", "#d0d0d0")
                                                .attr("stroke-width", 1);
                                            greatGrandmotherIconsForMother
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 4)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "16px")
                                                .attr("font-weight", "bold")
                                                .attr("fill", "#333")
                                                .text("+");

                                            // Check if great-grandmother has parents - show cards if they exist, otherwise show "Add father" and "Add mother" buttons
                                            const greatGrandmotherParents =
                                                greatGrandmother.parents || [];
                                            const visibleGreatGrandmotherParents =
                                                greatGrandmotherParents.filter(
                                                    (pId) =>
                                                        !window.hiddenAncestorIds ||
                                                        !window.hiddenAncestorIds.has(
                                                            pId
                                                        )
                                                );

                                            // Get actual parent data (not just visible)
                                            const greatGrandmotherParentData =
                                                greatGrandmotherParents
                                                    .map((parentId) =>
                                                        treeData.find(
                                                            (p) =>
                                                                p.id ===
                                                                parentId
                                                        )
                                                    )
                                                    .filter((p) => p);

                                            const greatGreatGrandfatherForGreatGrandmother =
                                                greatGrandmotherParentData.find(
                                                    (p) => p.gender === "male"
                                                );
                                            const greatGreatGrandmotherForGreatGrandmother =
                                                greatGrandmotherParentData.find(
                                                    (p) => p.gender === "female"
                                                );

                                            const areGreatGrandmotherAncestorsHidden =
                                                areAncestorsHidden(
                                                    greatGrandmother.id
                                                );
                                            if (
                                                !areGreatGrandmotherAncestorsHidden
                                            ) {
                                                // Show great-great-grandparent cards if they exist
                                                if (
                                                    greatGreatGrandfatherForGreatGrandmother ||
                                                    greatGreatGrandmotherForGreatGrandmother
                                                ) {
                                                    const greatGreatGrandparentCardY =
                                                        greatGrandparentCardY -
                                                        150; // Same position as Add buttons
                                                    const greatGreatGrandparentCardWidth = 100;
                                                    const greatGreatGrandparentCardHeight = 80;
                                                    const greatGreatGrandparentSpacing = 100; // Reduced spacing for great-great-grandparents

                                                    // Show great-great-grandfather card (left)
                                                    if (
                                                        greatGreatGrandfatherForGreatGrandmother
                                                    ) {
                                                        const greatGreatGrandfatherGroup =
                                                            greatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "parent-card"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        -greatGreatGrandparentCardWidth /
                                                                            2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandfatherForGreatGrandmother.id,
                                                                                greatGreatGrandfatherForGreatGrandmother
                                                                            );
                                                                        } else {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandfatherForGreatGrandmother.id,
                                                                                    greatGreatGrandfatherForGreatGrandmother
                                                                                );
                                                                            }
                                                                        }
                                                                    }
                                                                );

                                                        greatGreatGrandfatherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#add8e6"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            );

                                                        const greatGreatGrandfatherIcon =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            greatGreatGrandfatherIcon,
                                                            greatGreatGrandfatherForGreatGrandmother,
                                                            svg
                                                        );

                                                        let greatGreatGrandfatherName =
                                                            greatGreatGrandfatherForGreatGrandmother.name ||
                                                            greatGreatGrandfatherForGreatGrandmother.first_name ||
                                                            "";
                                                        if (
                                                            greatGreatGrandfatherForGreatGrandmother.last_name
                                                        )
                                                            greatGreatGrandfatherName +=
                                                                " " +
                                                                greatGreatGrandfatherForGreatGrandmother.last_name;
                                                        if (
                                                            !greatGreatGrandfatherName
                                                        )
                                                            greatGreatGrandfatherName =
                                                                "Unknown";

                                                        greatGreatGrandfatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                greatGreatGrandfatherName.length >
                                                                    15
                                                                    ? greatGreatGrandfatherName.substring(
                                                                          0,
                                                                          15
                                                                      ) + "..."
                                                                    : greatGreatGrandfatherName
                                                            );

                                                        addEditDeleteIcons(
                                                            greatGreatGrandfatherGroup,
                                                            greatGreatGrandfatherForGreatGrandmother.id,
                                                            greatGreatGrandfatherName
                                                        );

                                                        // Add toggle hide/show button (eye icon) - top right
                                                        const isGreatGreatGrandfatherHidden =
                                                            areAncestorsHidden(
                                                                greatGreatGrandfatherForGreatGrandmother.id
                                                            );
                                                        const hideGreatGreatGrandfatherButton =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "hide-branch-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    "translate(40, -35)"
                                                                )
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        togglePersonBranch(
                                                                            greatGreatGrandfatherForGreatGrandmother.id
                                                                        );
                                                                    }
                                                                );

                                                        hideGreatGreatGrandfatherButton
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 10)
                                                            .attr(
                                                                "fill",
                                                                isGreatGreatGrandfatherHidden
                                                                    ? "#28a745"
                                                                    : "#6c757d"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            );

                                                        hideGreatGreatGrandfatherButton
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 3)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "10px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .text(
                                                                isGreatGreatGrandfatherHidden
                                                                    ? "👁️"
                                                                    : "👁️‍🗨️"
                                                            );

                                                        hideGreatGreatGrandfatherButton
                                                            .append("title")
                                                            .text(
                                                                isGreatGreatGrandfatherHidden
                                                                    ? `Click to show the family branch of ${greatGreatGrandfatherName}`
                                                                    : `Click to hide the family branch of ${greatGreatGrandfatherName}`
                                                            );

                                                        // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                        const greatGreatGrandfatherIconsForGreatGrandmother =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, 35)"
                                                                );
                                                        greatGreatGrandfatherIconsForGreatGrandmother
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#28a745"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandfatherForGreatGrandmother
                                                                    );
                                                                }
                                                            );
                                                        greatGreatGrandfatherIconsForGreatGrandmother
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 4)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#28a745"
                                                            )
                                                            .text("+");
                                                    }

                                                    // Show great-great-grandmother card (right)
                                                    if (
                                                        greatGreatGrandmotherForGreatGrandmother
                                                    ) {
                                                        const greatGreatGrandmotherGroup =
                                                            greatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "parent-card"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        greatGreatGrandparentCardWidth /
                                                                            2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandmotherForGreatGrandmother.id,
                                                                                greatGreatGrandmotherForGreatGrandmother
                                                                            );
                                                                        } else {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandmotherForGreatGrandmother.id,
                                                                                    greatGreatGrandmotherForGreatGrandmother
                                                                                );
                                                                            }
                                                                        }
                                                                    }
                                                                );

                                                        greatGreatGrandmotherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#ffb6c1"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            );

                                                        const greatGreatGrandmotherIcon =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            greatGreatGrandmotherIcon,
                                                            greatGreatGrandmotherForGreatGrandmother,
                                                            svg
                                                        );

                                                        let greatGreatGrandmotherName =
                                                            greatGreatGrandmotherForGreatGrandmother.name ||
                                                            greatGreatGrandmotherForGreatGrandmother.first_name ||
                                                            "";
                                                        if (
                                                            greatGreatGrandmotherForGreatGrandmother.last_name
                                                        )
                                                            greatGreatGrandmotherName +=
                                                                " " +
                                                                greatGreatGrandmotherForGreatGrandmother.last_name;
                                                        if (
                                                            !greatGreatGrandmotherName
                                                        )
                                                            greatGreatGrandmotherName =
                                                                "Unknown";

                                                        greatGreatGrandmotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                greatGreatGrandmotherName.length >
                                                                    15
                                                                    ? greatGreatGrandmotherName.substring(
                                                                          0,
                                                                          15
                                                                      ) + "..."
                                                                    : greatGreatGrandmotherName
                                                            );

                                                        addEditDeleteIcons(
                                                            greatGreatGrandmotherGroup,
                                                            greatGreatGrandmotherForGreatGrandmother.id,
                                                            greatGreatGrandmotherName
                                                        );

                                                        // Add toggle hide/show button (eye icon) - top right
                                                        const isGreatGreatGrandmotherHidden =
                                                            areAncestorsHidden(
                                                                greatGreatGrandmotherForGreatGrandmother.id
                                                            );
                                                        const hideGreatGreatGrandmotherButton =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "hide-branch-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    "translate(40, -35)"
                                                                )
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        togglePersonBranch(
                                                                            greatGreatGrandmotherForGreatGrandmother.id
                                                                        );
                                                                    }
                                                                );

                                                        hideGreatGreatGrandmotherButton
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 10)
                                                            .attr(
                                                                "fill",
                                                                isGreatGreatGrandmotherHidden
                                                                    ? "#28a745"
                                                                    : "#6c757d"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            );

                                                        hideGreatGreatGrandmotherButton
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 3)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "10px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .text(
                                                                isGreatGreatGrandmotherHidden
                                                                    ? "👁️"
                                                                    : "👁️‍🗨️"
                                                            );

                                                        hideGreatGreatGrandmotherButton
                                                            .append("title")
                                                            .text(
                                                                isGreatGreatGrandmotherHidden
                                                                    ? `Click to show the family branch of ${greatGreatGrandmotherName}`
                                                                    : `Click to hide the family branch of ${greatGreatGrandmotherName}`
                                                            );

                                                        // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                        const greatGreatGrandmotherIconsForGreatGrandmother =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, 35)"
                                                                );
                                                        greatGreatGrandmotherIconsForGreatGrandmother
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#28a745"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandmotherForGreatGrandmother
                                                                    );
                                                                }
                                                            );
                                                        greatGreatGrandmotherIconsForGreatGrandmother
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 4)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#28a745"
                                                            )
                                                            .text("+");
                                                    }

                                                    // Add connecting lines from great-great-grandparents to great-grandmother
                                                    const greatGreatGrandparentLineY =
                                                        greatGreatGrandparentCardY -
                                                        greatGrandparentCardY +
                                                        greatGreatGrandparentCardHeight /
                                                            2;
                                                    const greatGrandmotherCardTopY =
                                                        -greatGrandparentCardHeight /
                                                        2;

                                                    if (
                                                        greatGreatGrandfatherForGreatGrandmother &&
                                                        greatGreatGrandmotherForGreatGrandmother
                                                    ) {
                                                        // Both exist - draw horizontal line and vertical line
                                                        const greatGreatGrandfatherX =
                                                            -greatGreatGrandparentCardWidth /
                                                                2 -
                                                            greatGreatGrandparentSpacing /
                                                                2;
                                                        const greatGreatGrandmotherX =
                                                            greatGreatGrandparentCardWidth /
                                                                2 +
                                                            greatGreatGrandparentSpacing /
                                                                2;

                                                        greatGrandmotherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandfatherX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                greatGreatGrandmotherX
                                                            )
                                                            .attr(
                                                                "y2",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );

                                                        const greatGreatGrandparentMidX =
                                                            (greatGreatGrandfatherX +
                                                                greatGreatGrandmotherX) /
                                                            2;
                                                        greatGrandmotherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandparentMidX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                greatGreatGrandparentMidX
                                                            )
                                                            .attr(
                                                                "y2",
                                                                greatGrandmotherCardTopY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    } else if (
                                                        greatGreatGrandfatherForGreatGrandmother
                                                    ) {
                                                        // Only great-great-grandfather
                                                        const greatGreatGrandfatherX =
                                                            -greatGreatGrandparentCardWidth /
                                                                2 -
                                                            greatGreatGrandparentSpacing /
                                                                2;
                                                        greatGrandmotherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandfatherX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr("x2", 0)
                                                            .attr(
                                                                "y2",
                                                                greatGrandmotherCardTopY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    } else if (
                                                        greatGreatGrandmotherForGreatGrandmother
                                                    ) {
                                                        // Only great-great-grandmother
                                                        const greatGreatGrandmotherX =
                                                            greatGreatGrandparentCardWidth /
                                                                2 +
                                                            greatGreatGrandparentSpacing /
                                                                2;
                                                        greatGrandmotherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandmotherX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr("x2", 0)
                                                            .attr(
                                                                "y2",
                                                                greatGrandmotherCardTopY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    }
                                                }

                                                const greatGreatGrandparentButtonY =
                                                    greatGrandparentCardY - 150;
                                                // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                const greatGreatGrandparentButtonWidth = 100; // Reduced button width to prevent overlap
                                                const greatGreatGrandparentButtonHeight = 70; // Reduced button height to prevent overlap
                                                const greatGreatGrandparentSpacing = 30; // Standardized button spacing for all generations

                                                // Add Father button (left) - show if great-great-grandfather doesn't exist
                                                if (
                                                    !greatGreatGrandfatherForGreatGrandmother
                                                ) {
                                                    const greatGreatGrandmotherParentFatherGroup =
                                                        greatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    -greatGreatGrandparentButtonWidth /
                                                                        2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentButtonY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandmother,
                                                                        "father"
                                                                    );
                                                                }
                                                            );

                                                    greatGreatGrandmotherParentFatherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentButtonWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentButtonHeight
                                                        )
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentButtonHeight /
                                                                2
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    greatGreatGrandmotherParentFatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    greatGreatGrandmotherParentFatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add father");
                                                }

                                                // Add Mother button (right) - show if great-great-grandmother doesn't exist
                                                if (
                                                    !greatGreatGrandmotherForGreatGrandmother
                                                ) {
                                                    const greatGreatGrandmotherParentMotherGroup =
                                                        greatGrandmotherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    greatGreatGrandparentButtonWidth /
                                                                        2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentButtonY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandmother,
                                                                        "mother"
                                                                    );
                                                                }
                                                            );

                                                    greatGreatGrandmotherParentMotherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentButtonWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentButtonHeight
                                                        )
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentButtonHeight /
                                                                2
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    greatGreatGrandmotherParentMotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    greatGreatGrandmotherParentMotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add mother");
                                                }

                                                // Add lines from top center of great-grandmother card, branching to parent buttons
                                                const greatGrandmotherParentBranchY =
                                                    greatGreatGrandparentButtonY -
                                                    greatGrandparentCardY +
                                                    greatGreatGrandparentButtonHeight /
                                                        2 +
                                                    10;
                                                greatGrandmotherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr("x1", 0)
                                                    .attr(
                                                        "y1",
                                                        -greatGrandparentCardHeight /
                                                            2
                                                    )
                                                    .attr("x2", 0)
                                                    .attr(
                                                        "y2",
                                                        greatGrandmotherParentBranchY
                                                    );

                                                greatGrandmotherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2 -
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandmotherParentBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        greatGreatGrandparentButtonWidth /
                                                            2 +
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGrandmotherParentBranchY
                                                    );

                                                greatGrandmotherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2 -
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandmotherParentBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        -greatGreatGrandparentButtonWidth /
                                                            2 -
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGreatGrandparentButtonY -
                                                            greatGrandparentCardY +
                                                            greatGreatGrandparentButtonHeight /
                                                                2
                                                    );

                                                greatGrandmotherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "add-parent-line"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        greatGreatGrandparentButtonWidth /
                                                            2 +
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandmotherParentBranchY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        greatGreatGrandparentButtonWidth /
                                                            2 +
                                                            greatGreatGrandparentSpacing /
                                                                2
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGreatGrandparentButtonY -
                                                            greatGrandparentCardY +
                                                            greatGreatGrandparentButtonHeight /
                                                                2
                                                    );
                                            }
                                        }

                                        // Draw lines connecting great-grandparents to grandfather card
                                        if (
                                            greatGrandfather ||
                                            greatGrandmother
                                        ) {
                                            const greatGrandfatherX =
                                                greatGrandfather
                                                    ? -greatGrandparentCardWidth /
                                                          2 -
                                                      greatGrandparentSpacing /
                                                          2
                                                    : 0;
                                            const greatGrandmotherX =
                                                greatGrandmother
                                                    ? greatGrandparentCardWidth /
                                                          2 +
                                                      greatGrandparentSpacing /
                                                          2
                                                    : greatGrandfather
                                                    ? -greatGrandparentCardWidth /
                                                          2 -
                                                      greatGrandparentSpacing /
                                                          2
                                                    : 0;
                                            const greatGrandparentLineY =
                                                greatGrandparentCardY +
                                                greatGrandparentCardHeight / 2; // Bottom of great-grandparent cards
                                            const grandfatherCardTopY =
                                                -grandparentCardHeight / 2; // Top of grandfather card

                                            if (
                                                greatGrandfather &&
                                                greatGrandmother
                                            ) {
                                                // Horizontal line connecting great-grandparents
                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "parent-link"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        greatGrandfatherX
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandparentLineY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        greatGrandmotherX
                                                    )
                                                    .attr(
                                                        "y2",
                                                        greatGrandparentLineY
                                                    )
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 1.5)
                                                    .style(
                                                        "pointer-events",
                                                        "none"
                                                    );

                                                // Vertical line from midpoint down to grandfather card
                                                const greatGrandparentMidX =
                                                    (greatGrandfatherX +
                                                        greatGrandmotherX) /
                                                    2;
                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "parent-link"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        greatGrandparentMidX
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandparentLineY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        greatGrandparentMidX
                                                    )
                                                    .attr(
                                                        "y2",
                                                        grandfatherCardTopY
                                                    )
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 1.5)
                                                    .style(
                                                        "pointer-events",
                                                        "none"
                                                    );
                                            } else if (
                                                greatGrandfather &&
                                                !greatGrandmother
                                            ) {
                                                // Only great-grandfather - connect to "Add mother" button
                                                // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                const greatGrandparentButtonWidth = 140; // Standardized button width for all generations
                                                const greatGrandparentButtonHeight = 90; // Standardized button height for all generations
                                                const greatGrandparentSpacing = 30; // Standardized button spacing for all generations

                                                const addMotherButtonX =
                                                    greatGrandparentCardWidth /
                                                        2 +
                                                    greatGrandparentSpacing / 2; // Button center X
                                                const addMotherButtonBottomY =
                                                    greatGrandparentCardY +
                                                    greatGrandparentButtonHeight /
                                                        2; // Button bottom Y

                                                // Horizontal line from great-grandfather card bottom to "Add mother" button bottom
                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "parent-link"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        greatGrandfatherX
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandparentLineY
                                                    )
                                                    .attr(
                                                        "x2",
                                                        addMotherButtonX
                                                    )
                                                    .attr(
                                                        "y2",
                                                        addMotherButtonBottomY
                                                    )
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 1.5)
                                                    .style(
                                                        "pointer-events",
                                                        "none"
                                                    );

                                                // Vertical line from midpoint of horizontal line down to grandfather card
                                                const midX =
                                                    (greatGrandfatherX +
                                                        addMotherButtonX) /
                                                    2;
                                                const midY =
                                                    (greatGrandparentLineY +
                                                        addMotherButtonBottomY) /
                                                    2;

                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "parent-link"
                                                    )
                                                    .attr("x1", midX)
                                                    .attr("y1", midY)
                                                    .attr("x2", midX)
                                                    .attr(
                                                        "y2",
                                                        grandfatherCardTopY
                                                    )
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 1.5)
                                                    .style(
                                                        "pointer-events",
                                                        "none"
                                                    );

                                                // Create "Add mother" button
                                                const addGreatGrandmotherButtonGroup =
                                                    grandfatherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${addMotherButtonX}, ${
                                                                addMotherButtonBottomY -
                                                                greatGrandparentButtonHeight /
                                                                    2
                                                            })`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    grandfather,
                                                                    "mother"
                                                                );
                                                            }
                                                        );

                                                addGreatGrandmotherButtonGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        greatGrandparentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        greatGrandparentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -greatGrandparentButtonWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -greatGrandparentButtonHeight /
                                                            2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                addGreatGrandmotherButtonGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                addGreatGrandmotherButtonGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add mother");
                                            } else if (
                                                greatGrandmother &&
                                                !greatGrandfather
                                            ) {
                                                // Only great-grandmother
                                                grandfatherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "parent-link"
                                                    )
                                                    .attr(
                                                        "x1",
                                                        greatGrandmotherX
                                                    )
                                                    .attr(
                                                        "y1",
                                                        greatGrandparentLineY
                                                    )
                                                    .attr("x2", 0)
                                                    .attr(
                                                        "y2",
                                                        grandfatherCardTopY
                                                    )
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 1.5)
                                                    .style(
                                                        "pointer-events",
                                                        "none"
                                                    );
                                            }
                                        }
                                    } else {
                                        // Show "Add father" and "Add mother" buttons above grandfather
                                        const greatGrandparentButtonWidth = 140; // Match card width
                                        const greatGrandparentButtonHeight = 90; // Match card height
                                        const greatGrandparentSpacing = 30; // Standardized button spacing for all generations

                                        // Add Father button (left) above grandfather card
                                        const grandfatherParentFatherGroup =
                                            grandfatherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "add-parent-button"
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${
                                                        -greatGrandparentButtonWidth /
                                                            2 -
                                                        greatGrandparentSpacing /
                                                            2
                                                    }, ${
                                                        grandfatherParentButtonY -
                                                        grandparentCardY
                                                    })`
                                                )
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    addParentFromNode(
                                                        grandfather,
                                                        "father"
                                                    );
                                                });

                                        grandfatherParentFatherGroup
                                            .append("rect")
                                            .attr(
                                                "width",
                                                greatGrandparentButtonWidth
                                            )
                                            .attr(
                                                "height",
                                                greatGrandparentButtonHeight
                                            )
                                            .attr(
                                                "x",
                                                -greatGrandparentButtonWidth / 2
                                            )
                                            .attr(
                                                "y",
                                                -greatGrandparentButtonHeight /
                                                    2
                                            )
                                            .attr("rx", 8)
                                            .attr("stroke", "#ddd")
                                            .attr("stroke-width", 2)
                                            .attr("stroke-dasharray", "5,5")
                                            .attr("fill", "white");

                                        grandfatherParentFatherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", -15)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "28px")
                                            .attr("font-weight", "300")
                                            .text("+");

                                        grandfatherParentFatherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", 8)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "11px")
                                            .attr("font-weight", "500")
                                            .text("Add father");

                                        // Add Mother button (right) above grandfather card
                                        const grandfatherParentMotherGroup =
                                            grandfatherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "add-parent-button"
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${
                                                        greatGrandparentButtonWidth /
                                                            2 +
                                                        greatGrandparentSpacing /
                                                            2
                                                    }, ${
                                                        grandfatherParentButtonY -
                                                        grandparentCardY
                                                    })`
                                                )
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    addParentFromNode(
                                                        grandfather,
                                                        "mother"
                                                    );
                                                });

                                        grandfatherParentMotherGroup
                                            .append("rect")
                                            .attr(
                                                "width",
                                                greatGrandparentButtonWidth
                                            )
                                            .attr(
                                                "height",
                                                greatGrandparentButtonHeight
                                            )
                                            .attr(
                                                "x",
                                                -greatGrandparentButtonWidth / 2
                                            )
                                            .attr(
                                                "y",
                                                -greatGrandparentButtonHeight /
                                                    2
                                            )
                                            .attr("rx", 8)
                                            .attr("stroke", "#ddd")
                                            .attr("stroke-width", 2)
                                            .attr("stroke-dasharray", "5,5")
                                            .attr("fill", "white");

                                        grandfatherParentMotherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", -15)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "28px")
                                            .attr("font-weight", "300")
                                            .text("+");

                                        grandfatherParentMotherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", 8)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "11px")
                                            .attr("font-weight", "500")
                                            .text("Add mother");

                                        // Draw lines connecting "Add father" and "Add mother" buttons
                                        // Horizontal line connecting the two buttons
                                        const grandfatherButtonX1 =
                                            -greatGrandparentButtonWidth / 2 -
                                            greatGrandparentSpacing / 2;
                                        const grandfatherButtonX2 =
                                            greatGrandparentButtonWidth / 2 +
                                            greatGrandparentSpacing / 2;
                                        const grandfatherButtonY =
                                            grandfatherParentButtonY -
                                            grandparentCardY +
                                            greatGrandparentButtonHeight / 2; // Bottom of buttons

                                        grandfatherGroup
                                            .append("line")
                                            .attr("class", "parent-link")
                                            .attr("x1", grandfatherButtonX1)
                                            .attr("y1", grandfatherButtonY)
                                            .attr("x2", grandfatherButtonX2)
                                            .attr("y2", grandfatherButtonY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 1.5)
                                            .style("pointer-events", "none");

                                        // Vertical line from midpoint down to grandfather card
                                        const grandfatherButtonMidX =
                                            (grandfatherButtonX1 +
                                                grandfatherButtonX2) /
                                            2;
                                        const grandfatherCardTopY =
                                            -grandparentCardHeight / 2; // Top of grandfather card

                                        grandfatherGroup
                                            .append("line")
                                            .attr("class", "parent-link")
                                            .attr("x1", grandfatherButtonMidX)
                                            .attr("y1", grandfatherButtonY)
                                            .attr("x2", grandfatherButtonMidX)
                                            .attr("y2", grandfatherCardTopY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 1.5)
                                            .style("pointer-events", "none");
                                    }
                                }
                            }

                            // Show grandmother card (right) above mother card
                            if (grandmother) {
                                const grandmotherGroup = motherGroup
                                    .append("g")
                                    .attr("class", "parent-card")
                                    .attr(
                                        "transform",
                                        `translate(${
                                            grandparentCardWidth / 2 +
                                            grandparentSpacing / 2
                                        }, ${grandparentCardY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        if (
                                            typeof window.openProfileSidebar ===
                                            "function"
                                        ) {
                                            window.openProfileSidebar(
                                                grandmother.id,
                                                grandmother
                                            );
                                        } else {
                                            event.preventDefault();
                                            event.stopPropagation();
                                            if (
                                                typeof window.openProfileSidebar ===
                                                "function"
                                            ) {
                                                window.openProfileSidebar(
                                                    grandmother.id,
                                                    grandmother
                                                );
                                            }
                                        }
                                    });

                                grandmotherGroup
                                    .append("rect")
                                    .attr("x", -grandparentCardWidth / 2)
                                    .attr("y", -grandparentCardHeight / 2)
                                    .attr("width", grandparentCardWidth)
                                    .attr("height", grandparentCardHeight)
                                    .attr("rx", 8)
                                    .attr("ry", 8)
                                    .attr("fill", "white")
                                    .attr("stroke", "#ffb6c1")
                                    .attr("stroke-width", 3);

                                const grandmotherIcon = grandmotherGroup
                                    .append("g")
                                    .attr("transform", "translate(0, -20)");
                                // Use renderAvatar to support photos
                                renderAvatar(grandmotherIcon, grandmother, svg);

                                let grandmotherName =
                                    grandmother.name ||
                                    grandmother.first_name ||
                                    "";
                                if (grandmother.last_name)
                                    grandmotherName +=
                                        " " + grandmother.last_name;
                                if (!grandmotherName)
                                    grandmotherName = "Unknown";

                                grandmotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 20)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "12px")
                                    .attr("fill", "#333")
                                    .text(
                                        grandmotherName.length > 25
                                            ? grandmotherName.substring(0, 25) +
                                                  "..."
                                            : grandmotherName
                                    );

                                addEditDeleteIcons(
                                    grandmotherGroup,
                                    grandmother.id,
                                    grandmotherName
                                );

                                // Add toggle hide/show button (eye icon) - top right
                                const isGrandmotherHidden = areAncestorsHidden(
                                    grandmother.id
                                );
                                const hideGrandmotherButton = grandmotherGroup
                                    .append("g")
                                    .attr("class", "hide-branch-button")
                                    .attr("transform", "translate(45, -35)")
                                    .style("cursor", "pointer")
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        togglePersonBranch(grandmother.id);
                                    });

                                hideGrandmotherButton
                                    .append("circle")
                                    .attr("cx", 0)
                                    .attr("cy", 0)
                                    .attr("r", 10)
                                    .attr(
                                        "fill",
                                        isGrandmotherHidden
                                            ? "#28a745"
                                            : "#6c757d"
                                    )
                                    .attr("stroke", "white")
                                    .attr("stroke-width", 1);

                                hideGrandmotherButton
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 3)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "10px")
                                    .attr("fill", "white")
                                    .text(isGrandmotherHidden ? "👁️" : "👁️‍🗨️");

                                hideGrandmotherButton
                                    .append("title")
                                    .text(
                                        isGrandmotherHidden
                                            ? `Click to show the family branch of ${grandmotherName}`
                                            : `Click to hide the family branch of ${grandmotherName}`
                                    );

                                // Find grandmother's partners and siblings early to check if toggle button should be shown
                                // (same logic as father's branch - check spouses excluding grandfather)
                                let grandmotherPartnersForToggleCheck = [];
                                if (
                                    grandmother.spouses &&
                                    grandmother.spouses.length > 0
                                ) {
                                    grandmother.spouses.forEach((spouseId) => {
                                        // Exclude grandfather (he's already drawn as a grandparent)
                                        if (
                                            grandfather &&
                                            spouseId === grandfather.id
                                        )
                                            return;
                                        // Exclude if this spouse is also a parent of mother
                                        if (motherParents.includes(spouseId))
                                            return;

                                        const partnerData = treeData.find(
                                            (p) => p.id === spouseId
                                        );
                                        if (partnerData) {
                                            grandmotherPartnersForToggleCheck.push(
                                                partnerData
                                            );
                                        }
                                    });
                                }

                                // Find grandmother's siblings early for toggle check
                                const grandmotherSiblingsForToggle = [];
                                const grandmotherParentIdsForToggle =
                                    grandmother.parents
                                        ? new Set(grandmother.parents)
                                        : new Set();

                                if (
                                    grandmother.siblings &&
                                    grandmother.siblings.length > 0
                                ) {
                                    grandmother.siblings.forEach(
                                        (siblingId) => {
                                            if (
                                                grandmotherParentIdsForToggle.has(
                                                    siblingId
                                                )
                                            ) {
                                                return;
                                            }
                                            const siblingData = treeData.find(
                                                (p) => p.id === siblingId
                                            );
                                            if (
                                                siblingData &&
                                                siblingData.id !==
                                                    grandmother.id
                                            ) {
                                                grandmotherSiblingsForToggle.push(
                                                    siblingData
                                                );
                                            }
                                        }
                                    );
                                }

                                // Check implicit siblings (shared parents)
                                if (
                                    grandmother.parents &&
                                    grandmother.parents.length > 0
                                ) {
                                    treeData.forEach((p) => {
                                        if (
                                            p.id === grandmother.id ||
                                            p.id === mainPersonId
                                        )
                                            return;
                                        if (
                                            grandmotherParentIdsForToggle.has(
                                                p.id
                                            )
                                        ) {
                                            return;
                                        }
                                        if (
                                            p.parents &&
                                            p.parents.length > 0 &&
                                            p.parents.every((pId) =>
                                                grandmother.parents.includes(
                                                    pId
                                                )
                                            ) &&
                                            grandmother.parents.every((pId) =>
                                                p.parents.includes(pId)
                                            ) &&
                                            !grandmotherSiblingsForToggle.find(
                                                (s) => s.id === p.id
                                            )
                                        ) {
                                            grandmotherSiblingsForToggle.push(
                                                p
                                            );
                                        }
                                    });
                                }

                                // Check if grandmother has siblings or partners to show view button
                                const grandmotherHasSiblingsForToggle =
                                    grandmotherSiblingsForToggle.length > 0;
                                const grandmotherHasPartnersForToggle =
                                    grandmotherPartnersForToggleCheck.length >
                                    0;
                                const hasGrandmotherBranchContent =
                                    grandmotherHasSiblingsForToggle ||
                                    grandmotherHasPartnersForToggle;

                                // Add view button to toggle to grandmother's branch view (matching father's branch)
                                if (hasGrandmotherBranchContent) {
                                    const viewGrandmotherBranchButton =
                                        grandmotherGroup
                                            .append("g")
                                            .attr(
                                                "class",
                                                "view-grandmother-branch-button"
                                            )
                                            .attr(
                                                "transform",
                                                "translate(-45, -35)"
                                            )
                                            .style("cursor", "pointer")
                                            .on("click", function (event) {
                                                event.stopPropagation();
                                                showGrandmotherBranch();
                                            });

                                    viewGrandmotherBranchButton
                                        .append("circle")
                                        .attr("cx", 0)
                                        .attr("cy", 0)
                                        .attr("r", 10)
                                        .attr(
                                            "fill",
                                            window.grandmotherBranchToggled
                                                ? "#28a745"
                                                : "#6c757d"
                                        )
                                        .attr("stroke", "white")
                                        .attr("stroke-width", 1);

                                    viewGrandmotherBranchButton
                                        .append("text")
                                        .attr("x", 0)
                                        .attr("y", 3)
                                        .attr("text-anchor", "middle")
                                        .attr("font-size", "10px")
                                        .attr("fill", "white")
                                        .text("👁️");

                                    viewGrandmotherBranchButton
                                        .append("title")
                                        .text(
                                            "Click to view grandmother's branch"
                                        );
                                }

                                // Add button - black style matching root node
                                const grandmotherIcons = grandmotherGroup
                                    .append("g")
                                    .attr("transform", "translate(0, 35)")
                                    .style("cursor", "pointer")
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        openBranchBuilder(grandmother);
                                    });
                                grandmotherIcons
                                    .append("circle")
                                    .attr("cx", 0)
                                    .attr("cy", 0)
                                    .attr("r", 10)
                                    .attr("fill", "white")
                                    .attr("stroke", "#d0d0d0")
                                    .attr("stroke-width", 1);
                                grandmotherIcons
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 4)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "16px")
                                    .attr("font-weight", "bold")
                                    .attr("fill", "#333")
                                    .text("+");

                                // Find grandmother's partners (spouses excluding grandfather) in mother's branch - same logic as father's branch
                                // grandmotherPartnersMother is already declared at higher scope, just populate it here
                                grandmotherPartnersMother = [];
                                if (
                                    grandmother.spouses &&
                                    grandmother.spouses.length > 0
                                ) {
                                    grandmother.spouses.forEach((spouseId) => {
                                        // Exclude grandfather (he's already drawn as a grandparent)
                                        if (
                                            grandfather &&
                                            spouseId === grandfather.id
                                        )
                                            return;
                                        // Exclude if this spouse is also a parent of mother
                                        if (motherParents.includes(spouseId))
                                            return;

                                        const partnerData = treeData.find(
                                            (p) => p.id === spouseId
                                        );
                                        if (partnerData) {
                                            grandmotherPartnersMother.push(
                                                partnerData
                                            );
                                            console.log(
                                                "Found grandmother partner in mother's branch:",
                                                partnerData.name ||
                                                    partnerData.first_name
                                            );
                                        }
                                    });
                                }
                                console.log(
                                    "Total grandmother partners found in mother's branch:",
                                    grandmotherPartnersMother.length,
                                    grandmotherPartnersMother.map(
                                        (p) => p.name || p.first_name
                                    )
                                );

                                // Draw grandmother's partner cards to the LEFT of grandfather card in mother's branch (matching father's branch logic)
                                // Only show when grandmother's branch is visible (when grandmotherBranchToggled is true)
                                if (window.grandmotherBranchToggled) {
                                    grandmotherPartnersMother.forEach(
                                        (partner, index) => {
                                            // Use EXACT same grandfather card position
                                            const grandfatherXMother =
                                                -grandparentCardWidth / 2 -
                                                grandparentSpacing / 2;
                                            const partnerSpacing = 200; // Spacing between cards
                                            // Position to the left of grandfather card
                                            const partnerX =
                                                grandfatherXMother -
                                                grandparentCardWidth -
                                                partnerSpacing -
                                                index *
                                                    (grandparentCardWidth +
                                                        partnerSpacing);
                                            const partnerY = grandparentCardY; // Same Y as grandfather and grandmother

                                            const partnerGroup = motherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "parent-partner-card grandmother-partner-card"
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${partnerX}, ${partnerY})`
                                                )
                                                .on("click", function (event) {
                                                    event.preventDefault();
                                                    event.stopPropagation();
                                                    if (
                                                        typeof window.openProfileSidebar ===
                                                        "function"
                                                    ) {
                                                        window.openProfileSidebar(
                                                            partner.id,
                                                            partner
                                                        );
                                                    }
                                                });

                                            // Card rectangle with border color based on gender
                                            // Grandmother's partner should always be male (blue) - opposite of grandmother
                                            const borderColor = "#add8e6"; // Always blue for grandmother's partner
                                            partnerGroup
                                                .append("rect")
                                                .attr(
                                                    "x",
                                                    -grandparentCardWidth / 2
                                                )
                                                .attr(
                                                    "y",
                                                    -grandparentCardHeight / 2
                                                )
                                                .attr(
                                                    "width",
                                                    grandparentCardWidth
                                                )
                                                .attr(
                                                    "height",
                                                    grandparentCardHeight
                                                )
                                                .attr("rx", 8)
                                                .attr("ry", 8)
                                                .attr("fill", "white")
                                                .attr("stroke", borderColor)
                                                .attr("stroke-width", 3)
                                                .style(
                                                    "filter",
                                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                );

                                            // Use renderAvatar to support photos
                                            // Force male avatar for grandmother's partner (opposite of grandmother)
                                            const partnerIcon = partnerGroup
                                                .append("g")
                                                .attr(
                                                    "transform",
                                                    "translate(0, -20)"
                                                );
                                            // Create a copy of partner with gender forced to "male" for avatar rendering
                                            const partnerForAvatar = {
                                                ...partner,
                                                gender: "male",
                                            };
                                            renderAvatar(
                                                partnerIcon,
                                                partnerForAvatar,
                                                svg
                                            );

                                            // Name
                                            let partnerName = partner.name;
                                            if (!partnerName) {
                                                partnerName =
                                                    partner.first_name || "";
                                                if (partner.last_name) {
                                                    partnerName +=
                                                        " " + partner.last_name;
                                                }
                                                if (!partnerName) {
                                                    partnerName = "Unknown";
                                                }
                                            }
                                            partnerGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 20)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "12px")
                                                .attr("fill", "#333")
                                                .text(
                                                    partnerName.length > 25
                                                        ? partnerName.substring(
                                                              0,
                                                              25
                                                          ) + "..."
                                                        : partnerName
                                                );

                                            // Add + icon
                                            partnerGroup
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 32)
                                                .attr("r", 10)
                                                .attr("fill", "white")
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 1)
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(partner);
                                                });
                                            partnerGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 36)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "16px")
                                                .attr("font-weight", "bold")
                                                .text("+")
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(partner);
                                                });

                                            // Add edit and delete icons
                                            addEditDeleteIcons(
                                                partnerGroup,
                                                partner.id,
                                                partnerName
                                            );

                                            // Draw single horizontal line from grandmother's partner card to grandfather card
                                            const lineY =
                                                grandparentCardY -
                                                grandparentCardHeight / 10;
                                            // Connect from partner card's right edge to grandfather card's left edge
                                            const lineX1 =
                                                partnerX +
                                                grandparentCardWidth / 2; // Right edge of partner card
                                            const lineX2 =
                                                grandfatherXMother -
                                                grandparentCardWidth / 2; // Left edge of grandfather card

                                            motherGroup
                                                .append("line")
                                                .attr(
                                                    "class",
                                                    "parent-partner-link"
                                                )
                                                .attr("x1", lineX1)
                                                .attr("y1", lineY)
                                                .attr("x2", lineX2)
                                                .attr("y2", lineY)
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 1.5)
                                                .style(
                                                    "pointer-events",
                                                    "none"
                                                );

                                            console.log(
                                                `Drew grandmother partner card in mother's branch for ${partnerName} at (${partnerX}, ${partnerY})`
                                            );
                                        }
                                    );
                                }

                                // Add sibling cards next to grandmother card in mother's branch (matching father's branch logic)
                                // Show grandmother's siblings only when grandmotherBranchToggled is true (when showing grandmother's branch)
                                // Find grandmother's siblings
                                const grandmotherSiblingsMother = [];
                                const grandmotherParentIdsMother =
                                    grandmother.parents
                                        ? new Set(grandmother.parents)
                                        : new Set();

                                if (
                                    grandmother.siblings &&
                                    grandmother.siblings.length > 0
                                ) {
                                    grandmother.siblings.forEach(
                                        (siblingId) => {
                                            if (
                                                grandmotherParentIdsMother.has(
                                                    siblingId
                                                )
                                            ) {
                                                return;
                                            }
                                            const siblingData = treeData.find(
                                                (p) => p.id === siblingId
                                            );
                                            if (
                                                siblingData &&
                                                siblingData.id !==
                                                    grandmother.id
                                            ) {
                                                grandmotherSiblingsMother.push(
                                                    siblingData
                                                );
                                            }
                                        }
                                    );
                                }

                                if (
                                    grandmother.parents &&
                                    grandmother.parents.length > 0
                                ) {
                                    treeData.forEach((p) => {
                                        if (
                                            p.id === grandmother.id ||
                                            p.id === mainPersonId
                                        )
                                            return;
                                        if (
                                            grandmotherParentIdsMother.has(p.id)
                                        ) {
                                            return;
                                        }
                                        if (
                                            p.parents &&
                                            p.parents.length > 0 &&
                                            p.parents.every((pId) =>
                                                grandmother.parents.includes(
                                                    pId
                                                )
                                            ) &&
                                            grandmother.parents.every((pId) =>
                                                p.parents.includes(pId)
                                            ) &&
                                            !grandmotherSiblingsMother.find(
                                                (s) => s.id === p.id
                                            )
                                        ) {
                                            grandmotherSiblingsMother.push(p);
                                        }
                                    });
                                }

                                const grandmotherHasSiblingsMother =
                                    grandmotherSiblingsMother.length > 0;

                                if (
                                    grandmotherHasSiblingsMother &&
                                    window.grandmotherBranchToggled
                                ) {
                                    console.log(
                                        "Grandmother has siblings in mother's branch - showing grandmother's branch"
                                    );

                                    // Sort siblings: brothers (male) first, then sisters (female), sorted by ID for consistency
                                    grandmotherSiblingsMother.sort((a, b) => {
                                        // First sort by gender: male first, then female
                                        if (
                                            a.gender === "male" &&
                                            b.gender === "female"
                                        )
                                            return -1;
                                        if (
                                            a.gender === "female" &&
                                            b.gender === "male"
                                        )
                                            return 1;
                                        // If same gender, sort by ID for consistent ordering
                                        return a.id - b.id;
                                    });

                                    // Draw grandmother's sibling cards to the right of grandmother
                                    const grandmotherXMother =
                                        grandparentCardWidth / 2 +
                                        grandparentSpacing / 2;
                                    const grandmotherSiblingSpacing = 200;

                                    grandmotherSiblingsMother.forEach(
                                        (sibling, index) => {
                                            const siblingX =
                                                grandmotherXMother +
                                                grandparentCardWidth +
                                                grandmotherSiblingSpacing +
                                                index *
                                                    (grandparentCardWidth +
                                                        grandmotherSiblingSpacing);
                                            const siblingY = grandparentCardY; // Same Y as grandmother

                                            const siblingGroup = motherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "parent-sibling-card grandmother-sibling-card"
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${siblingX}, ${siblingY})`
                                                )
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    if (
                                                        typeof window.openProfileSidebar ===
                                                        "function"
                                                    ) {
                                                        window.openProfileSidebar(
                                                            sibling.id,
                                                            sibling
                                                        );
                                                    }
                                                });

                                            // Card rectangle with border color based on gender
                                            const borderColor =
                                                sibling.gender === "female"
                                                    ? "#ffb6c1"
                                                    : "#add8e6";
                                            siblingGroup
                                                .append("rect")
                                                .attr(
                                                    "x",
                                                    -grandparentCardWidth / 2
                                                )
                                                .attr(
                                                    "y",
                                                    -grandparentCardHeight / 2
                                                )
                                                .attr(
                                                    "width",
                                                    grandparentCardWidth
                                                )
                                                .attr(
                                                    "height",
                                                    grandparentCardHeight
                                                )
                                                .attr("rx", 8)
                                                .attr("ry", 8)
                                                .attr("fill", "white")
                                                .attr("stroke", borderColor)
                                                .attr("stroke-width", 3)
                                                .style(
                                                    "filter",
                                                    "drop-shadow(0 2px 4px rgba(0,0,0,0.1))"
                                                );

                                            // Use renderAvatar to support photos
                                            const siblingIcon = siblingGroup
                                                .append("g")
                                                .attr(
                                                    "transform",
                                                    "translate(0, -20)"
                                                );
                                            renderAvatar(
                                                siblingIcon,
                                                sibling,
                                                svg
                                            );

                                            // Name
                                            let siblingName = sibling.name;
                                            if (!siblingName) {
                                                siblingName =
                                                    sibling.first_name || "";
                                                if (sibling.last_name) {
                                                    siblingName +=
                                                        " " + sibling.last_name;
                                                }
                                                if (!siblingName) {
                                                    siblingName = "Unknown";
                                                }
                                            }
                                            siblingGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 20)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "12px")
                                                .attr("fill", "#333")
                                                .text(
                                                    siblingName.length > 25
                                                        ? siblingName.substring(
                                                              0,
                                                              25
                                                          ) + "..."
                                                        : siblingName
                                                );

                                            // Add + icon
                                            siblingGroup
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 32)
                                                .attr("r", 10)
                                                .attr("fill", "white")
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 1)
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(sibling);
                                                });
                                            siblingGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 36)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "16px")
                                                .attr("font-weight", "bold")
                                                .text("+")
                                                .style("cursor", "pointer")
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    openBranchBuilder(sibling);
                                                });

                                            // Add edit and delete icons
                                            addEditDeleteIcons(
                                                siblingGroup,
                                                sibling.id,
                                                siblingName
                                            );

                                            console.log(
                                                `Drew grandmother sibling card in mother's branch for ${siblingName} at (${siblingX}, ${siblingY})`
                                            );
                                        }
                                    );

                                    // Draw sibling lines for grandmother's siblings in mother's branch (matching father's side logic)
                                    if (grandmotherSiblingsMother.length > 0) {
                                        const grandmotherXForLink =
                                            grandmotherXMother;
                                        const linkY =
                                            grandparentCardY -
                                            grandparentCardHeight / 2 -
                                            20; // Position above the cards

                                        // Store sibling positions for line drawing
                                        const grandmotherSiblingPositions = [];
                                        grandmotherSiblingsMother.forEach(
                                            (sibling, index) => {
                                                const siblingX =
                                                    grandmotherXMother +
                                                    grandparentCardWidth +
                                                    grandmotherSiblingSpacing +
                                                    index *
                                                        (grandparentCardWidth +
                                                            grandmotherSiblingSpacing);
                                                grandmotherSiblingPositions.push(
                                                    {
                                                        x: siblingX,
                                                        sibling: sibling,
                                                    }
                                                );
                                            }
                                        );

                                        // Draw horizontal line from grandmother card's top center to the last (rightmost) sibling card
                                        const startX = grandmotherXForLink;
                                        const startY = linkY;
                                        const endX =
                                            grandmotherSiblingPositions.length >
                                            0
                                                ? grandmotherSiblingPositions[
                                                      grandmotherSiblingPositions.length -
                                                          1
                                                  ].x
                                                : grandmotherXForLink;
                                        const endY = linkY;

                                        // Same calculation as mother's sibling links
                                        const distance = Math.abs(
                                            endX - startX
                                        );
                                        const bendHeight = Math.min(
                                            6,
                                            Math.max(5, distance * 0.02)
                                        ); // Very subtle bend, 5-6px
                                        const midX = (startX + endX) / 2;
                                        const midY =
                                            Math.min(startY, endY) - bendHeight;

                                        // Same path formula as mother's sibling links
                                        const pathData = `M ${startX} ${startY} Q ${midX} ${midY}, ${endX} ${endY}`;

                                        // Use same attributes as mother's sibling links
                                        motherGroup
                                            .append("path")
                                            .attr("class", "sibling-link")
                                            .attr("fill", "none")
                                            .attr("d", pathData);

                                        // Draw vertical lines from horizontal line down to each card
                                        // Line 1: From horizontal line to grandmother card
                                        const grandmotherT = 0;
                                        const grandmotherCurveY =
                                            (1 - grandmotherT) *
                                                (1 - grandmotherT) *
                                                startY +
                                            2 *
                                                (1 - grandmotherT) *
                                                grandmotherT *
                                                midY +
                                            grandmotherT * grandmotherT * endY;

                                        // Vertical line from horizontal line down to grandmother card top
                                        motherGroup
                                            .append("line")
                                            .attr("class", "sibling-link")
                                            .attr("x1", grandmotherXForLink)
                                            .attr("y1", grandmotherCurveY)
                                            .attr("x2", grandmotherXForLink)
                                            .attr(
                                                "y2",
                                                grandparentCardY -
                                                    grandparentCardHeight / 2
                                            )
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2);

                                        // Lines 2, 3, 4...: From horizontal line to each sibling card
                                        grandmotherSiblingPositions.forEach(
                                            (pos) => {
                                                const siblingX = pos.x;

                                                // Calculate Y on the curve at this X position (for quadratic bezier)
                                                const t =
                                                    endX !== startX
                                                        ? (siblingX - startX) /
                                                          (endX - startX)
                                                        : 0; // Avoid division by zero
                                                const curveY =
                                                    (1 - t) * (1 - t) * startY +
                                                    2 * (1 - t) * t * midY +
                                                    t * t * endY;

                                                motherGroup
                                                    .append("line")
                                                    .attr(
                                                        "class",
                                                        "sibling-link"
                                                    )
                                                    .attr("x1", siblingX)
                                                    .attr("y1", curveY)
                                                    .attr("x2", siblingX)
                                                    .attr(
                                                        "y2",
                                                        grandparentCardY -
                                                            grandparentCardHeight /
                                                                2
                                                    )
                                                    .attr("stroke", "#999")
                                                    .attr("stroke-width", 2);
                                            }
                                        );
                                    }
                                }

                                // Recursively show great-grandparent cards or "Add father/mother" buttons above grandmother
                                // Only show if ancestors are NOT hidden AND grandmother branch is NOT toggled
                                // When grandmotherBranchToggled is true, hide grandmother's great-grandparents (only show siblings and partners)
                                console.log(
                                    "Checking if should show grandmother parents. areMotherAncestorsHidden:",
                                    areMotherAncestorsHidden,
                                    "grandmotherBranchToggled:",
                                    window.grandmotherBranchToggled
                                );
                                const areGrandmotherAncestorsHidden =
                                    areAncestorsHidden(grandmother.id);
                                if (
                                    !areGrandmotherAncestorsHidden &&
                                    !window.grandmotherBranchToggled
                                ) {
                                    const grandmotherParentButtonY =
                                        grandparentCardY - 150;
                                    const grandmotherParents =
                                        grandmother.parents || [];

                                    console.log(
                                        "Checking grandmother's parents:",
                                        {
                                            grandmotherId: grandmother.id,
                                            grandmotherName:
                                                grandmother.name ||
                                                grandmother.first_name,
                                            grandmotherParents:
                                                grandmotherParents,
                                        }
                                    );

                                    // Check if grandmother has parents in treeData (regardless of hidden state)
                                    const grandmotherParentData =
                                        grandmotherParents
                                            .map((parentId) =>
                                                treeData.find(
                                                    (p) => p.id === parentId
                                                )
                                            )
                                            .filter((p) => p);

                                    console.log(
                                        "Grandmother parent data found:",
                                        grandmotherParentData.map((p) => ({
                                            id: p.id,
                                            name: p.name || p.first_name,
                                            gender: p.gender,
                                        }))
                                    );

                                    let grandmotherHasParents =
                                        grandmotherParentData.length > 0;

                                    // Debug: Check if the found parent is actually the grandfather (which would be wrong)
                                    // The grandfather and grandmother are siblings (both parents of the mother), not parent-child
                                    if (
                                        grandfather &&
                                        grandmotherParentData.some(
                                            (p) => p.id === grandfather.id
                                        )
                                    ) {
                                        console.error(
                                            "ERROR: Grandmother's parents array incorrectly contains the grandfather!",
                                            "Grandmother ID:",
                                            grandmother.id,
                                            "Grandfather ID:",
                                            grandfather.id,
                                            "This is a data issue - grandfather and grandmother are siblings, not parent-child"
                                        );
                                        // Force grandmotherHasParents to false to show "Add" buttons instead
                                        grandmotherHasParents = false;
                                    }

                                    console.log(
                                        "Grandmother has parents:",
                                        grandmotherHasParents
                                    );
                                    console.log(
                                        "About to check grandmotherHasParents condition. Value:",
                                        grandmotherHasParents,
                                        "Type:",
                                        typeof grandmotherHasParents
                                    );

                                    console.log(
                                        "Right before if check - grandmotherHasParents:",
                                        grandmotherHasParents
                                    );
                                    console.log(
                                        "About to check if statement, grandmotherHasParents:",
                                        grandmotherHasParents
                                    );
                                    if (!grandmotherHasParents) {
                                        // Show "Add father" and "Add mother" buttons above grandmother when she has no parents
                                        console.log(
                                            "=== SHOWING ADD BUTTONS FOR GRANDMOTHER ==="
                                        );
                                        // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                        const greatGrandparentButtonWidth = 140; // Standardized button width for all generations
                                        const greatGrandparentButtonHeight = 90; // Standardized button height for all generations
                                        const greatGrandparentSpacing = 30; // Standardized button spacing for all generations

                                        // Add Father button (left) above grandmother card
                                        const grandmotherParentFatherGroup =
                                            grandmotherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "add-parent-button"
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${
                                                        -greatGrandparentButtonWidth /
                                                            2 -
                                                        greatGrandparentSpacing /
                                                            2
                                                    }, ${
                                                        grandmotherParentButtonY -
                                                        grandparentCardY
                                                    })`
                                                )
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    addParentFromNode(
                                                        grandmother,
                                                        "father"
                                                    );
                                                });

                                        grandmotherParentFatherGroup
                                            .append("rect")
                                            .attr(
                                                "width",
                                                greatGrandparentButtonWidth
                                            )
                                            .attr(
                                                "height",
                                                greatGrandparentButtonHeight
                                            )
                                            .attr(
                                                "x",
                                                -greatGrandparentButtonWidth / 2
                                            )
                                            .attr(
                                                "y",
                                                -greatGrandparentButtonHeight /
                                                    2
                                            )
                                            .attr("rx", 8)
                                            .attr("stroke", "#ddd")
                                            .attr("stroke-width", 2)
                                            .attr("stroke-dasharray", "5,5")
                                            .attr("fill", "white");

                                        grandmotherParentFatherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", -15)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "28px")
                                            .attr("font-weight", "300")
                                            .text("+");

                                        grandmotherParentFatherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", 8)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "11px")
                                            .attr("font-weight", "500")
                                            .text("Add father");

                                        // Add Mother button (right) above grandmother card
                                        const grandmotherParentMotherGroup =
                                            grandmotherGroup
                                                .append("g")
                                                .attr(
                                                    "class",
                                                    "add-parent-button"
                                                )
                                                .attr(
                                                    "transform",
                                                    `translate(${
                                                        greatGrandparentButtonWidth /
                                                            2 +
                                                        greatGrandparentSpacing /
                                                            2
                                                    }, ${
                                                        grandmotherParentButtonY -
                                                        grandparentCardY
                                                    })`
                                                )
                                                .on("click", function (event) {
                                                    event.stopPropagation();
                                                    addParentFromNode(
                                                        grandmother,
                                                        "mother"
                                                    );
                                                });

                                        grandmotherParentMotherGroup
                                            .append("rect")
                                            .attr(
                                                "width",
                                                greatGrandparentButtonWidth
                                            )
                                            .attr(
                                                "height",
                                                greatGrandparentButtonHeight
                                            )
                                            .attr(
                                                "x",
                                                -greatGrandparentButtonWidth / 2
                                            )
                                            .attr(
                                                "y",
                                                -greatGrandparentButtonHeight /
                                                    2
                                            )
                                            .attr("rx", "8")
                                            .attr("stroke", "#ddd")
                                            .attr("stroke-width", 2)
                                            .attr("stroke-dasharray", "5,5")
                                            .attr("fill", "white");

                                        grandmotherParentMotherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", -15)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "28px")
                                            .attr("font-weight", "300")
                                            .text("+");

                                        grandmotherParentMotherGroup
                                            .append("text")
                                            .attr("x", 0)
                                            .attr("y", 8)
                                            .attr("text-anchor", "middle")
                                            .attr("font-size", "11px")
                                            .attr("font-weight", "500")
                                            .text("Add mother");

                                        // Draw lines connecting "Add father" and "Add mother" buttons
                                        const grandmotherButtonX1 =
                                            -greatGrandparentButtonWidth / 2 -
                                            greatGrandparentSpacing / 2;
                                        const grandmotherButtonX2 =
                                            greatGrandparentButtonWidth / 2 +
                                            greatGrandparentSpacing / 2;
                                        const grandmotherButtonY =
                                            grandmotherParentButtonY -
                                            grandparentCardY +
                                            greatGrandparentButtonHeight / 2;

                                        // Horizontal line connecting the two buttons
                                        grandmotherGroup
                                            .append("line")
                                            .attr("class", "parent-link")
                                            .attr("x1", grandmotherButtonX1)
                                            .attr("y1", grandmotherButtonY)
                                            .attr("x2", grandmotherButtonX2)
                                            .attr("y2", grandmotherButtonY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 1.5)
                                            .style("pointer-events", "none");

                                        // Vertical line from midpoint down to grandmother card
                                        const grandmotherButtonMidX =
                                            (grandmotherButtonX1 +
                                                grandmotherButtonX2) /
                                            2;
                                        const grandmotherCardTopY =
                                            -grandparentCardHeight / 2;

                                        grandmotherGroup
                                            .append("line")
                                            .attr("class", "parent-link")
                                            .attr("x1", grandmotherButtonMidX)
                                            .attr("y1", grandmotherButtonY)
                                            .attr("x2", grandmotherButtonMidX)
                                            .attr("y2", grandmotherCardTopY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 1.5)
                                            .style("pointer-events", "none");
                                    } else if (grandmotherHasParents) {
                                        console.log(
                                            "Entering if block - grandmotherHasParents is true"
                                        );
                                        // Show great-grandparent cards above grandmother (they exist in data)
                                        const greatGrandfather =
                                            grandmotherParentData.find(
                                                (p) => p.gender === "male"
                                            );
                                        const greatGrandmother =
                                            grandmotherParentData.find(
                                                (p) => p.gender === "female"
                                            );

                                        const greatGrandparentCardY =
                                            grandmotherParentButtonY -
                                            grandparentCardY;
                                        const greatGrandparentCardWidth = 140; // Card width (decent size)
                                        const greatGrandparentCardHeight = 90; // Card height (decent size)
                                        const greatGrandparentSpacing = 150; // Reduced spacing for great-grandparents on mother's side

                                        // Show great-grandfather card (left)
                                        if (greatGrandfather) {
                                            const greatGrandfatherGroup =
                                                grandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "parent-card"
                                                    )
                                                    .attr(
                                                        "data-person-id",
                                                        greatGrandfather.id
                                                    )
                                                    .attr(
                                                        "transform",
                                                        `translate(${
                                                            -greatGrandparentCardWidth /
                                                                2 -
                                                            greatGrandparentSpacing /
                                                                2
                                                        }, ${greatGrandparentCardY})`
                                                    )
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.preventDefault();
                                                            event.stopPropagation();
                                                            if (
                                                                typeof window.openProfileSidebar ===
                                                                "function"
                                                            ) {
                                                                window.openProfileSidebar(
                                                                    greatGrandfather.id,
                                                                    greatGrandfather
                                                                );
                                                            }
                                                        }
                                                    );

                                            greatGrandfatherGroup
                                                .append("rect")
                                                .attr(
                                                    "x",
                                                    -greatGrandparentCardWidth /
                                                        2
                                                )
                                                .attr(
                                                    "y",
                                                    -greatGrandparentCardHeight /
                                                        2
                                                )
                                                .attr(
                                                    "width",
                                                    greatGrandparentCardWidth
                                                )
                                                .attr(
                                                    "height",
                                                    greatGrandparentCardHeight
                                                )
                                                .attr("rx", 8)
                                                .attr("ry", 8)
                                                .attr("fill", "white")
                                                .attr("stroke", "#add8e6")
                                                .attr("stroke-width", 3);

                                            const greatGrandfatherIcon =
                                                greatGrandfatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, -20)"
                                                    );
                                            // Use renderAvatar to support photos
                                            renderAvatar(
                                                greatGrandfatherIcon,
                                                greatGrandfather,
                                                svg
                                            );

                                            let greatGrandfatherName =
                                                greatGrandfather.name ||
                                                greatGrandfather.first_name ||
                                                "";
                                            if (greatGrandfather.last_name)
                                                greatGrandfatherName +=
                                                    " " +
                                                    greatGrandfather.last_name;
                                            if (!greatGrandfatherName)
                                                greatGrandfatherName =
                                                    "Unknown";

                                            greatGrandfatherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 20)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "12px")
                                                .attr("fill", "#333")
                                                .text(
                                                    greatGrandfatherName.length >
                                                        15
                                                        ? greatGrandfatherName.substring(
                                                              0,
                                                              15
                                                          ) + "..."
                                                        : greatGrandfatherName
                                                );

                                            addEditDeleteIcons(
                                                greatGrandfatherGroup,
                                                greatGrandfather.id,
                                                greatGrandfatherName
                                            );

                                            // Add toggle hide/show button (eye icon) - top right
                                            const isGreatGrandfatherHidden =
                                                areAncestorsHidden(
                                                    greatGrandfather.id
                                                );
                                            const hideGreatGrandfatherButton =
                                                greatGrandfatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "hide-branch-button"
                                                    )
                                                    .attr(
                                                        "transform",
                                                        "translate(45, -35)"
                                                    )
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            togglePersonBranch(
                                                                greatGrandfather.id
                                                            );
                                                        }
                                                    );

                                            hideGreatGrandfatherButton
                                                .append("circle")
                                                .attr("cx", 0)
                                                .attr("cy", 0)
                                                .attr("r", 10)
                                                .attr(
                                                    "fill",
                                                    isGreatGrandfatherHidden
                                                        ? "#28a745"
                                                        : "#6c757d"
                                                )
                                                .attr("stroke", "white")
                                                .attr("stroke-width", 1);

                                            hideGreatGrandfatherButton
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 3)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "10px")
                                                .attr("fill", "white")
                                                .text(
                                                    isGreatGrandfatherHidden
                                                        ? "👁️"
                                                        : "👁️‍🗨️"
                                                );

                                            hideGreatGrandfatherButton
                                                .append("title")
                                                .text(
                                                    isGreatGrandfatherHidden
                                                        ? `Click to show the family branch of ${greatGrandfatherName}`
                                                        : `Click to hide the family branch of ${greatGrandfatherName}`
                                                );

                                            // Add icons (plus, edit, delete) - simplified for great-grandparents
                                            // Add button - black style matching root node
                                            const greatGrandfatherIconsForGrandmother =
                                                greatGrandfatherGroup
                                                    .append("g")
                                                    .attr(
                                                        "transform",
                                                        "translate(0, 35)"
                                                    )
                                                    .style("cursor", "pointer")
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            openBranchBuilder(
                                                                greatGrandfather
                                                            );
                                                        }
                                                    );
                                            greatGrandfatherIconsForGrandmother
                                                .append("rect")
                                                .attr("x", -20)
                                                .attr("y", -8)
                                                .attr("width", 40)
                                                .attr("height", 16)
                                                .attr("rx", 4)
                                                .attr("fill", "none")
                                                .attr("stroke", "#d0d0d0")
                                                .attr("stroke-width", 1)
                                                .attr(
                                                    "stroke-dasharray",
                                                    "5,5"
                                                );
                                            greatGrandfatherIconsForGrandmother
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 4)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "10px")
                                                .attr("font-weight", "500")
                                                .attr("fill", "#333")
                                                .text("+");

                                            // Check if great-grandfather has parents - show cards if they exist, otherwise show "Add father" and "Add mother" buttons
                                            const greatGrandfatherParentsForGrandmother =
                                                greatGrandfather.parents || [];
                                            const visibleGreatGrandfatherParentsForGrandmother =
                                                greatGrandfatherParentsForGrandmother.filter(
                                                    (pId) =>
                                                        !window.hiddenAncestorIds ||
                                                        !window.hiddenAncestorIds.has(
                                                            pId
                                                        )
                                                );

                                            // Get actual parent data (not just visible)
                                            const greatGrandfatherParentDataForGrandmother =
                                                greatGrandfatherParentsForGrandmother
                                                    .map((parentId) =>
                                                        treeData.find(
                                                            (p) =>
                                                                p.id ===
                                                                parentId
                                                        )
                                                    )
                                                    .filter((p) => p);

                                            const greatGreatGrandfatherForGrandmother =
                                                greatGrandfatherParentDataForGrandmother.find(
                                                    (p) => p.gender === "male"
                                                );
                                            const greatGreatGrandmotherForGrandmother =
                                                greatGrandfatherParentDataForGrandmother.find(
                                                    (p) => p.gender === "female"
                                                );

                                            const areGreatGrandfatherAncestorsHiddenForGrandmother =
                                                areAncestorsHidden(
                                                    greatGrandfather.id
                                                );
                                            if (
                                                !areGreatGrandfatherAncestorsHiddenForGrandmother
                                            ) {
                                                // Show great-great-grandparent cards if they exist
                                                if (
                                                    greatGreatGrandfatherForGrandmother ||
                                                    greatGreatGrandmotherForGrandmother
                                                ) {
                                                    const greatGreatGrandparentCardY =
                                                        greatGrandparentCardY -
                                                        150; // Same position as Add buttons
                                                    const greatGreatGrandparentCardWidth = 100;
                                                    const greatGreatGrandparentCardHeight = 80;
                                                    const greatGreatGrandparentSpacing = 100; // Reduced spacing for great-great-grandparents

                                                    // Show great-great-grandfather card (left)
                                                    if (
                                                        greatGreatGrandfatherForGrandmother
                                                    ) {
                                                        const greatGreatGrandfatherGroup =
                                                            greatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "parent-card"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        -greatGreatGrandparentCardWidth /
                                                                            2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandfatherForGrandmother.id,
                                                                                greatGreatGrandfatherForGrandmother
                                                                            );
                                                                        } else {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandfatherForGrandmother.id,
                                                                                    greatGreatGrandfatherForGrandmother
                                                                                );
                                                                            }
                                                                        }
                                                                    }
                                                                );

                                                        greatGreatGrandfatherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#add8e6"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            );

                                                        const greatGreatGrandfatherIcon =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        renderAvatar(
                                                            greatGreatGrandfatherIcon,
                                                            greatGreatGrandfatherForGrandmother,
                                                            svg
                                                        );

                                                        let greatGreatGrandfatherName =
                                                            greatGreatGrandfatherForGrandmother.name ||
                                                            greatGreatGrandfatherForGrandmother.first_name ||
                                                            "";
                                                        if (
                                                            greatGreatGrandfatherForGrandmother.last_name
                                                        )
                                                            greatGreatGrandfatherName +=
                                                                " " +
                                                                greatGreatGrandfatherForGrandmother.last_name;
                                                        if (
                                                            !greatGreatGrandfatherName
                                                        )
                                                            greatGreatGrandfatherName =
                                                                "Unknown";

                                                        greatGreatGrandfatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                greatGreatGrandfatherName.length >
                                                                    15
                                                                    ? greatGreatGrandfatherName.substring(
                                                                          0,
                                                                          15
                                                                      ) + "..."
                                                                    : greatGreatGrandfatherName
                                                            );

                                                        addEditDeleteIcons(
                                                            greatGreatGrandfatherGroup,
                                                            greatGreatGrandfatherForGrandmother.id,
                                                            greatGreatGrandfatherName
                                                        );

                                                        // Add toggle hide/show button (eye icon) - top right
                                                        const isGreatGreatGrandfatherHidden =
                                                            areAncestorsHidden(
                                                                greatGreatGrandfatherForGrandmother.id
                                                            );
                                                        const hideGreatGreatGrandfatherButton =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "hide-branch-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    "translate(40, -35)"
                                                                )
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        togglePersonBranch(
                                                                            greatGreatGrandfatherForGrandmother.id
                                                                        );
                                                                    }
                                                                );

                                                        hideGreatGreatGrandfatherButton
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 10)
                                                            .attr(
                                                                "fill",
                                                                isGreatGreatGrandfatherHidden
                                                                    ? "#28a745"
                                                                    : "#6c757d"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            );

                                                        hideGreatGreatGrandfatherButton
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 3)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "10px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .text(
                                                                isGreatGreatGrandfatherHidden
                                                                    ? "👁️"
                                                                    : "👁️‍🗨️"
                                                            );

                                                        hideGreatGreatGrandfatherButton
                                                            .append("title")
                                                            .text(
                                                                isGreatGreatGrandfatherHidden
                                                                    ? `Click to show the family branch of ${greatGreatGrandfatherName}`
                                                                    : `Click to hide the family branch of ${greatGreatGrandfatherName}`
                                                            );

                                                        // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                        const greatGreatGrandfatherIconsForGrandmother =
                                                            greatGreatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, 35)"
                                                                );
                                                        greatGreatGrandfatherIconsForGrandmother
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#28a745"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandfatherForGrandmother
                                                                    );
                                                                }
                                                            );
                                                        greatGreatGrandfatherIconsForGrandmother
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 4)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#28a745"
                                                            )
                                                            .text("+");

                                                        // Check if great-great-grandfather has parents - show great-great-great-grandparents if they exist
                                                        const greatGreatGrandfatherParentsForGrandmother =
                                                            greatGreatGrandfatherForGrandmother.parents ||
                                                            [];
                                                        const visibleGreatGreatGrandfatherParentsForGrandmother =
                                                            greatGreatGrandfatherParentsForGrandmother.filter(
                                                                (pId) =>
                                                                    !window.hiddenAncestorIds ||
                                                                    !window.hiddenAncestorIds.has(
                                                                        pId
                                                                    )
                                                            );

                                                        // Get actual parent data (not just visible)
                                                        const greatGreatGrandfatherParentDataForGrandmother =
                                                            greatGreatGrandfatherParentsForGrandmother
                                                                .map(
                                                                    (
                                                                        parentId
                                                                    ) =>
                                                                        treeData.find(
                                                                            (
                                                                                p
                                                                            ) =>
                                                                                p.id ===
                                                                                parentId
                                                                        )
                                                                )
                                                                .filter(
                                                                    (p) => p
                                                                );

                                                        const greatGreatGreatGrandfatherForGrandmother =
                                                            greatGreatGrandfatherParentDataForGrandmother.find(
                                                                (p) =>
                                                                    p.gender ===
                                                                    "male"
                                                            );
                                                        const greatGreatGreatGrandmotherForGrandmother =
                                                            greatGreatGrandfatherParentDataForGrandmother.find(
                                                                (p) =>
                                                                    p.gender ===
                                                                    "female"
                                                            );

                                                        const areGreatGreatGrandfatherAncestorsHiddenForGrandmother =
                                                            areAncestorsHidden(
                                                                greatGreatGrandfatherForGrandmother.id
                                                            );
                                                        if (
                                                            (greatGreatGreatGrandfatherForGrandmother ||
                                                                greatGreatGreatGrandmotherForGrandmother) &&
                                                            !areGreatGreatGrandfatherAncestorsHiddenForGrandmother
                                                        ) {
                                                            // Show great-great-great-grandparent cards if they exist
                                                            const greatGreatGreatGrandparentCardY =
                                                                greatGreatGrandparentCardY -
                                                                150;
                                                            const greatGreatGreatGrandparentCardWidth = 80;
                                                            const greatGreatGreatGrandparentCardHeight = 70;
                                                            const greatGreatGreatGrandparentSpacing = 80;

                                                            // Show great-great-great-grandfather card (left)
                                                            if (
                                                                greatGreatGreatGrandfatherForGrandmother
                                                            ) {
                                                                const greatGreatGreatGrandfatherGroup =
                                                                    greatGreatGrandfatherGroup
                                                                        .append(
                                                                            "g"
                                                                        )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-card"
                                                                        )
                                                                        .attr(
                                                                            "transform",
                                                                            `translate(${
                                                                                -greatGreatGreatGrandparentCardWidth /
                                                                                    2 -
                                                                                greatGreatGreatGrandparentSpacing /
                                                                                    2
                                                                            }, ${
                                                                                greatGreatGreatGrandparentCardY -
                                                                                greatGreatGrandparentCardY
                                                                            })`
                                                                        )
                                                                        .on(
                                                                            "click",
                                                                            function (
                                                                                event
                                                                            ) {
                                                                                event.stopPropagation();
                                                                                if (
                                                                                    typeof window.openProfileSidebar ===
                                                                                    "function"
                                                                                ) {
                                                                                    window.openProfileSidebar(
                                                                                        greatGreatGreatGrandfatherForGrandmother.id,
                                                                                        greatGreatGreatGrandfatherForGrandmother
                                                                                    );
                                                                                }
                                                                            }
                                                                        );

                                                                greatGreatGreatGrandfatherGroup
                                                                    .append(
                                                                        "rect"
                                                                    )
                                                                    .attr(
                                                                        "x",
                                                                        -greatGreatGreatGrandparentCardWidth /
                                                                            2
                                                                    )
                                                                    .attr(
                                                                        "y",
                                                                        -greatGreatGreatGrandparentCardHeight /
                                                                            2
                                                                    )
                                                                    .attr(
                                                                        "width",
                                                                        greatGreatGreatGrandparentCardWidth
                                                                    )
                                                                    .attr(
                                                                        "height",
                                                                        greatGreatGreatGrandparentCardHeight
                                                                    )
                                                                    .attr(
                                                                        "rx",
                                                                        8
                                                                    )
                                                                    .attr(
                                                                        "ry",
                                                                        8
                                                                    )
                                                                    .attr(
                                                                        "fill",
                                                                        "white"
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#add8e6"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        3
                                                                    );

                                                                const greatGreatGreatGrandfatherIcon =
                                                                    greatGreatGreatGrandfatherGroup
                                                                        .append(
                                                                            "g"
                                                                        )
                                                                        .attr(
                                                                            "transform",
                                                                            "translate(0, -15)"
                                                                        );
                                                                renderAvatar(
                                                                    greatGreatGreatGrandfatherIcon,
                                                                    greatGreatGreatGrandfatherForGrandmother,
                                                                    svg
                                                                );

                                                                let greatGreatGreatGrandfatherName =
                                                                    greatGreatGreatGrandfatherForGrandmother.name ||
                                                                    greatGreatGreatGrandfatherForGrandmother.first_name ||
                                                                    "";
                                                                if (
                                                                    greatGreatGreatGrandfatherForGrandmother.last_name
                                                                )
                                                                    greatGreatGreatGrandfatherName +=
                                                                        " " +
                                                                        greatGreatGreatGrandfatherForGrandmother.last_name;
                                                                if (
                                                                    !greatGreatGreatGrandfatherName
                                                                )
                                                                    greatGreatGreatGrandfatherName =
                                                                        "Unknown";

                                                                greatGreatGreatGrandfatherGroup
                                                                    .append(
                                                                        "text"
                                                                    )
                                                                    .attr(
                                                                        "x",
                                                                        0
                                                                    )
                                                                    .attr(
                                                                        "y",
                                                                        18
                                                                    )
                                                                    .attr(
                                                                        "text-anchor",
                                                                        "middle"
                                                                    )
                                                                    .attr(
                                                                        "font-size",
                                                                        "10px"
                                                                    )
                                                                    .attr(
                                                                        "fill",
                                                                        "#333"
                                                                    )
                                                                    .text(
                                                                        greatGreatGreatGrandfatherName.length >
                                                                            12
                                                                            ? greatGreatGreatGrandfatherName.substring(
                                                                                  0,
                                                                                  12
                                                                              ) +
                                                                                  "..."
                                                                            : greatGreatGreatGrandfatherName
                                                                    );

                                                                addEditDeleteIcons(
                                                                    greatGreatGreatGrandfatherGroup,
                                                                    greatGreatGreatGrandfatherForGrandmother.id,
                                                                    greatGreatGreatGrandfatherName
                                                                );
                                                            }

                                                            // Show great-great-great-grandmother card (right)
                                                            if (
                                                                greatGreatGreatGrandmotherForGrandmother
                                                            ) {
                                                                const greatGreatGreatGrandmotherGroup =
                                                                    greatGreatGrandfatherGroup
                                                                        .append(
                                                                            "g"
                                                                        )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-card"
                                                                        )
                                                                        .attr(
                                                                            "transform",
                                                                            `translate(${
                                                                                greatGreatGreatGrandparentCardWidth /
                                                                                    2 +
                                                                                greatGreatGreatGrandparentSpacing /
                                                                                    2
                                                                            }, ${
                                                                                greatGreatGreatGrandparentCardY -
                                                                                greatGreatGrandparentCardY
                                                                            })`
                                                                        )
                                                                        .on(
                                                                            "click",
                                                                            function (
                                                                                event
                                                                            ) {
                                                                                event.stopPropagation();
                                                                                if (
                                                                                    typeof window.openProfileSidebar ===
                                                                                    "function"
                                                                                ) {
                                                                                    window.openProfileSidebar(
                                                                                        greatGreatGreatGrandmotherForGrandmother.id,
                                                                                        greatGreatGreatGrandmotherForGrandmother
                                                                                    );
                                                                                }
                                                                            }
                                                                        );

                                                                greatGreatGreatGrandmotherGroup
                                                                    .append(
                                                                        "rect"
                                                                    )
                                                                    .attr(
                                                                        "x",
                                                                        -greatGreatGreatGrandparentCardWidth /
                                                                            2
                                                                    )
                                                                    .attr(
                                                                        "y",
                                                                        -greatGreatGreatGrandparentCardHeight /
                                                                            2
                                                                    )
                                                                    .attr(
                                                                        "width",
                                                                        greatGreatGreatGrandparentCardWidth
                                                                    )
                                                                    .attr(
                                                                        "height",
                                                                        greatGreatGreatGrandparentCardHeight
                                                                    )
                                                                    .attr(
                                                                        "rx",
                                                                        8
                                                                    )
                                                                    .attr(
                                                                        "ry",
                                                                        8
                                                                    )
                                                                    .attr(
                                                                        "fill",
                                                                        "white"
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#ffb6c1"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        3
                                                                    );

                                                                const greatGreatGreatGrandmotherIcon =
                                                                    greatGreatGreatGrandmotherGroup
                                                                        .append(
                                                                            "g"
                                                                        )
                                                                        .attr(
                                                                            "transform",
                                                                            "translate(0, -15)"
                                                                        );
                                                                renderAvatar(
                                                                    greatGreatGreatGrandmotherIcon,
                                                                    greatGreatGreatGrandmotherForGrandmother,
                                                                    svg
                                                                );

                                                                let greatGreatGreatGrandmotherName =
                                                                    greatGreatGreatGrandmotherForGrandmother.name ||
                                                                    greatGreatGreatGrandmotherForGrandmother.first_name ||
                                                                    "";
                                                                if (
                                                                    greatGreatGreatGrandmotherForGrandmother.last_name
                                                                )
                                                                    greatGreatGreatGrandmotherName +=
                                                                        " " +
                                                                        greatGreatGreatGrandmotherForGrandmother.last_name;
                                                                if (
                                                                    !greatGreatGreatGrandmotherName
                                                                )
                                                                    greatGreatGreatGrandmotherName =
                                                                        "Unknown";

                                                                greatGreatGreatGrandmotherGroup
                                                                    .append(
                                                                        "text"
                                                                    )
                                                                    .attr(
                                                                        "x",
                                                                        0
                                                                    )
                                                                    .attr(
                                                                        "y",
                                                                        18
                                                                    )
                                                                    .attr(
                                                                        "text-anchor",
                                                                        "middle"
                                                                    )
                                                                    .attr(
                                                                        "font-size",
                                                                        "10px"
                                                                    )
                                                                    .attr(
                                                                        "fill",
                                                                        "#333"
                                                                    )
                                                                    .text(
                                                                        greatGreatGreatGrandmotherName.length >
                                                                            12
                                                                            ? greatGreatGreatGrandmotherName.substring(
                                                                                  0,
                                                                                  12
                                                                              ) +
                                                                                  "..."
                                                                            : greatGreatGreatGrandmotherName
                                                                    );

                                                                addEditDeleteIcons(
                                                                    greatGreatGreatGrandmotherGroup,
                                                                    greatGreatGreatGrandmotherForGrandmother.id,
                                                                    greatGreatGreatGrandmotherName
                                                                );
                                                            }
                                                        }
                                                    }

                                                    // Show great-great-grandmother card (right)
                                                    if (
                                                        greatGreatGrandmotherForGrandmother
                                                    ) {
                                                        const greatGreatGrandmotherGroup =
                                                            greatGrandfatherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "parent-card"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        greatGreatGrandparentCardWidth /
                                                                            2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentCardY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        if (
                                                                            typeof window.openProfileSidebar ===
                                                                            "function"
                                                                        ) {
                                                                            window.openProfileSidebar(
                                                                                greatGreatGrandmotherForGrandmother.id,
                                                                                greatGreatGrandmotherForGrandmother
                                                                            );
                                                                        } else {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandmotherForGrandmother.id,
                                                                                    greatGreatGrandmotherForGrandmother
                                                                                );
                                                                            }
                                                                        }
                                                                    }
                                                                );

                                                        greatGreatGrandmotherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentCardWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentCardHeight /
                                                                    2
                                                            )
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentCardWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentCardHeight
                                                            )
                                                            .attr("rx", 8)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#ffb6c1"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                3
                                                            );

                                                        const greatGreatGrandmotherIcon =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, -20)"
                                                                );
                                                        greatGreatGrandmotherIcon
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", -8)
                                                            .attr("r", 8)
                                                            .attr(
                                                                "fill",
                                                                "#d0d0d0"
                                                            );
                                                        // Add realistic long hair for females
                                                        // Hair base/volume around head (larger circle for hair volume)
                                                        greatGreatGrandmotherIcon
                                                            .append("ellipse")
                                                            .attr("cx", 0)
                                                            .attr("cy", -10)
                                                            .attr("rx", 10)
                                                            .attr("ry", 8)
                                                            .attr(
                                                                "fill",
                                                                "#d0d0d0"
                                                            );
                                                        // Long flowing hair on the left side - more realistic curve
                                                        greatGreatGrandmotherIcon
                                                            .append("path")
                                                            .attr(
                                                                "d",
                                                                "M -10,-6 Q -14,-2 -13,6 Q -12,14 -10,18 Q -8,20 -6,20"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#d0d0d0"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "none"
                                                            );
                                                        // Additional left hair strand for volume
                                                        greatGreatGrandmotherIcon
                                                            .append("path")
                                                            .attr(
                                                                "d",
                                                                "M -8,-4 Q -11,2 -10,10 Q -9,16 -7,18"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#d0d0d0"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "none"
                                                            );
                                                        // Long flowing hair on the right side - more realistic curve
                                                        greatGreatGrandmotherIcon
                                                            .append("path")
                                                            .attr(
                                                                "d",
                                                                "M 10,-6 Q 14,-2 13,6 Q 12,14 10,18 Q 8,20 6,20"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#d0d0d0"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "none"
                                                            );
                                                        // Additional right hair strand for volume
                                                        greatGreatGrandmotherIcon
                                                            .append("path")
                                                            .attr(
                                                                "d",
                                                                "M 8,-4 Q 11,2 10,10 Q 9,16 7,18"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#d0d0d0"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "none"
                                                            );
                                                        // Front bangs/hair framing the face
                                                        greatGreatGrandmotherIcon
                                                            .append("path")
                                                            .attr(
                                                                "d",
                                                                "M -6,-12 Q -3,-14 0,-15 Q 3,-14 6,-12"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#d0d0d0"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "none"
                                                            );
                                                        // Hair on top for more volume
                                                        greatGreatGrandmotherIcon
                                                            .append("ellipse")
                                                            .attr("cx", 0)
                                                            .attr("cy", -14)
                                                            .attr("rx", 9)
                                                            .attr("ry", 5)
                                                            .attr(
                                                                "fill",
                                                                "#d0d0d0"
                                                            );
                                                        greatGreatGrandmotherIcon
                                                            .append("rect")
                                                            .attr("x", -10)
                                                            .attr("y", 0)
                                                            .attr("width", 20)
                                                            .attr("height", 16)
                                                            .attr("rx", 10)
                                                            .attr(
                                                                "fill",
                                                                "#d0d0d0"
                                                            );

                                                        let greatGreatGrandmotherName =
                                                            greatGreatGrandmotherForGrandmother.name ||
                                                            greatGreatGrandmotherForGrandmother.first_name ||
                                                            "";
                                                        if (
                                                            greatGreatGrandmotherForGrandmother.last_name
                                                        )
                                                            greatGreatGrandmotherName +=
                                                                " " +
                                                                greatGreatGrandmotherForGrandmother.last_name;
                                                        if (
                                                            !greatGreatGrandmotherName
                                                        )
                                                            greatGreatGrandmotherName =
                                                                "Unknown";

                                                        greatGreatGrandmotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 20)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#333"
                                                            )
                                                            .text(
                                                                greatGreatGrandmotherName.length >
                                                                    15
                                                                    ? greatGreatGrandmotherName.substring(
                                                                          0,
                                                                          15
                                                                      ) + "..."
                                                                    : greatGreatGrandmotherName
                                                            );

                                                        addEditDeleteIcons(
                                                            greatGreatGrandmotherGroup,
                                                            greatGreatGrandmotherForGrandmother.id,
                                                            greatGreatGrandmotherName
                                                        );

                                                        // Add toggle hide/show button (eye icon) - top right
                                                        const isGreatGreatGrandmotherHidden =
                                                            areAncestorsHidden(
                                                                greatGreatGrandmotherForGrandmother.id
                                                            );
                                                        const hideGreatGreatGrandmotherButton =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "hide-branch-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    "translate(40, -35)"
                                                                )
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        togglePersonBranch(
                                                                            greatGreatGrandmotherForGrandmother.id
                                                                        );
                                                                    }
                                                                );

                                                        hideGreatGreatGrandmotherButton
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 10)
                                                            .attr(
                                                                "fill",
                                                                isGreatGreatGrandmotherHidden
                                                                    ? "#28a745"
                                                                    : "#6c757d"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            );

                                                        hideGreatGreatGrandmotherButton
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 3)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "10px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .text(
                                                                isGreatGreatGrandmotherHidden
                                                                    ? "👁️"
                                                                    : "👁️‍🗨️"
                                                            );

                                                        hideGreatGreatGrandmotherButton
                                                            .append("title")
                                                            .text(
                                                                isGreatGreatGrandmotherHidden
                                                                    ? `Click to show the family branch of ${greatGreatGrandmotherName}`
                                                                    : `Click to hide the family branch of ${greatGreatGrandmotherName}`
                                                            );

                                                        // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                        const greatGreatGrandmotherIconsForGrandmother =
                                                            greatGreatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "transform",
                                                                    "translate(0, 35)"
                                                                );
                                                        greatGreatGrandmotherIconsForGrandmother
                                                            .append("circle")
                                                            .attr("cx", 0)
                                                            .attr("cy", 0)
                                                            .attr("r", 8)
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#28a745"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1
                                                            )
                                                            .style(
                                                                "cursor",
                                                                "pointer"
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    openBranchBuilder(
                                                                        greatGreatGrandmotherForGrandmother
                                                                    );
                                                                }
                                                            );
                                                        greatGreatGrandmotherIconsForGrandmother
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 4)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "12px"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "#28a745"
                                                            )
                                                            .text("+");

                                                        // Check if great-great-grandmother has parents - show great-great-great-grandparents if they exist
                                                        const greatGreatGrandmotherParentsForGrandmother =
                                                            greatGreatGrandmotherForGrandmother.parents ||
                                                            [];
                                                        const visibleGreatGreatGrandmotherParentsForGrandmother =
                                                            greatGreatGrandmotherParentsForGrandmother.filter(
                                                                (pId) =>
                                                                    !window.hiddenAncestorIds ||
                                                                    !window.hiddenAncestorIds.has(
                                                                        pId
                                                                    )
                                                            );

                                                        // Get actual parent data (not just visible)
                                                        const greatGreatGrandmotherParentDataForGrandmother =
                                                            greatGreatGrandmotherParentsForGrandmother
                                                                .map(
                                                                    (
                                                                        parentId
                                                                    ) =>
                                                                        treeData.find(
                                                                            (
                                                                                p
                                                                            ) =>
                                                                                p.id ===
                                                                                parentId
                                                                        )
                                                                )
                                                                .filter(
                                                                    (p) => p
                                                                );

                                                        const greatGreatGreatGrandfatherForGreatGreatGrandmother =
                                                            greatGreatGrandmotherParentDataForGrandmother.find(
                                                                (p) =>
                                                                    p.gender ===
                                                                    "male"
                                                            );
                                                        const greatGreatGreatGrandmotherForGreatGreatGrandmother =
                                                            greatGreatGrandmotherParentDataForGrandmother.find(
                                                                (p) =>
                                                                    p.gender ===
                                                                    "female"
                                                            );

                                                        const areGreatGreatGrandmotherAncestorsHiddenForGrandmother =
                                                            areAncestorsHidden(
                                                                greatGreatGrandmotherForGrandmother.id
                                                            );
                                                        if (
                                                            (greatGreatGreatGrandfatherForGreatGreatGrandmother ||
                                                                greatGreatGreatGrandmotherForGreatGreatGrandmother) &&
                                                            !areGreatGreatGrandmotherAncestorsHiddenForGrandmother
                                                        ) {
                                                            // Show great-great-great-grandparent cards if they exist
                                                            const greatGreatGreatGrandparentCardY =
                                                                greatGreatGrandparentCardY -
                                                                150;
                                                            const greatGreatGreatGrandparentCardWidth = 80;
                                                            const greatGreatGreatGrandparentCardHeight = 70;
                                                            const greatGreatGreatGrandparentSpacing = 80;

                                                            // Show great-great-great-grandfather card (left)
                                                            if (
                                                                greatGreatGreatGrandfatherForGreatGreatGrandmother
                                                            ) {
                                                                const greatGreatGreatGrandfatherGroup =
                                                                    greatGreatGrandmotherGroup
                                                                        .append(
                                                                            "g"
                                                                        )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-card"
                                                                        )
                                                                        .attr(
                                                                            "transform",
                                                                            `translate(${
                                                                                -greatGreatGreatGrandparentCardWidth /
                                                                                    2 -
                                                                                greatGreatGreatGrandparentSpacing /
                                                                                    2
                                                                            }, ${
                                                                                greatGreatGreatGrandparentCardY -
                                                                                greatGreatGrandparentCardY
                                                                            })`
                                                                        )
                                                                        .on(
                                                                            "click",
                                                                            function (
                                                                                event
                                                                            ) {
                                                                                event.stopPropagation();
                                                                                if (
                                                                                    typeof window.openProfileSidebar ===
                                                                                    "function"
                                                                                ) {
                                                                                    window.openProfileSidebar(
                                                                                        greatGreatGreatGrandfatherForGreatGreatGrandmother.id,
                                                                                        greatGreatGreatGrandfatherForGreatGreatGrandmother
                                                                                    );
                                                                                }
                                                                            }
                                                                        );

                                                                greatGreatGreatGrandfatherGroup
                                                                    .append(
                                                                        "rect"
                                                                    )
                                                                    .attr(
                                                                        "x",
                                                                        -greatGreatGreatGrandparentCardWidth /
                                                                            2
                                                                    )
                                                                    .attr(
                                                                        "y",
                                                                        -greatGreatGreatGrandparentCardHeight /
                                                                            2
                                                                    )
                                                                    .attr(
                                                                        "width",
                                                                        greatGreatGreatGrandparentCardWidth
                                                                    )
                                                                    .attr(
                                                                        "height",
                                                                        greatGreatGreatGrandparentCardHeight
                                                                    )
                                                                    .attr(
                                                                        "rx",
                                                                        8
                                                                    )
                                                                    .attr(
                                                                        "ry",
                                                                        8
                                                                    )
                                                                    .attr(
                                                                        "fill",
                                                                        "white"
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#add8e6"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        3
                                                                    );

                                                                const greatGreatGreatGrandfatherIcon =
                                                                    greatGreatGreatGrandfatherGroup
                                                                        .append(
                                                                            "g"
                                                                        )
                                                                        .attr(
                                                                            "transform",
                                                                            "translate(0, -15)"
                                                                        );
                                                                renderAvatar(
                                                                    greatGreatGreatGrandfatherIcon,
                                                                    greatGreatGreatGrandfatherForGreatGreatGrandmother,
                                                                    svg
                                                                );

                                                                let greatGreatGreatGrandfatherName =
                                                                    greatGreatGreatGrandfatherForGreatGreatGrandmother.name ||
                                                                    greatGreatGreatGrandfatherForGreatGreatGrandmother.first_name ||
                                                                    "";
                                                                if (
                                                                    greatGreatGreatGrandfatherForGreatGreatGrandmother.last_name
                                                                )
                                                                    greatGreatGreatGrandfatherName +=
                                                                        " " +
                                                                        greatGreatGreatGrandfatherForGreatGreatGrandmother.last_name;
                                                                if (
                                                                    !greatGreatGreatGrandfatherName
                                                                )
                                                                    greatGreatGreatGrandfatherName =
                                                                        "Unknown";

                                                                greatGreatGreatGrandfatherGroup
                                                                    .append(
                                                                        "text"
                                                                    )
                                                                    .attr(
                                                                        "x",
                                                                        0
                                                                    )
                                                                    .attr(
                                                                        "y",
                                                                        18
                                                                    )
                                                                    .attr(
                                                                        "text-anchor",
                                                                        "middle"
                                                                    )
                                                                    .attr(
                                                                        "font-size",
                                                                        "10px"
                                                                    )
                                                                    .attr(
                                                                        "fill",
                                                                        "#333"
                                                                    )
                                                                    .text(
                                                                        greatGreatGreatGrandfatherName.length >
                                                                            12
                                                                            ? greatGreatGreatGrandfatherName.substring(
                                                                                  0,
                                                                                  12
                                                                              ) +
                                                                                  "..."
                                                                            : greatGreatGreatGrandfatherName
                                                                    );

                                                                addEditDeleteIcons(
                                                                    greatGreatGreatGrandfatherGroup,
                                                                    greatGreatGreatGrandfatherForGreatGreatGrandmother.id,
                                                                    greatGreatGreatGrandfatherName
                                                                );
                                                            }

                                                            // Show great-great-great-grandmother card (right)
                                                            if (
                                                                greatGreatGreatGrandmotherForGreatGreatGrandmother
                                                            ) {
                                                                const greatGreatGreatGrandmotherGroup =
                                                                    greatGreatGrandmotherGroup
                                                                        .append(
                                                                            "g"
                                                                        )
                                                                        .attr(
                                                                            "class",
                                                                            "parent-card"
                                                                        )
                                                                        .attr(
                                                                            "transform",
                                                                            `translate(${
                                                                                greatGreatGreatGrandparentCardWidth /
                                                                                    2 +
                                                                                greatGreatGreatGrandparentSpacing /
                                                                                    2
                                                                            }, ${
                                                                                greatGreatGreatGrandparentCardY -
                                                                                greatGreatGrandparentCardY
                                                                            })`
                                                                        )
                                                                        .on(
                                                                            "click",
                                                                            function (
                                                                                event
                                                                            ) {
                                                                                event.stopPropagation();
                                                                                if (
                                                                                    typeof window.openProfileSidebar ===
                                                                                    "function"
                                                                                ) {
                                                                                    window.openProfileSidebar(
                                                                                        greatGreatGreatGrandmotherForGreatGreatGrandmother.id,
                                                                                        greatGreatGreatGrandmotherForGreatGreatGrandmother
                                                                                    );
                                                                                }
                                                                            }
                                                                        );

                                                                greatGreatGreatGrandmotherGroup
                                                                    .append(
                                                                        "rect"
                                                                    )
                                                                    .attr(
                                                                        "x",
                                                                        -greatGreatGreatGrandparentCardWidth /
                                                                            2
                                                                    )
                                                                    .attr(
                                                                        "y",
                                                                        -greatGreatGreatGrandparentCardHeight /
                                                                            2
                                                                    )
                                                                    .attr(
                                                                        "width",
                                                                        greatGreatGreatGrandparentCardWidth
                                                                    )
                                                                    .attr(
                                                                        "height",
                                                                        greatGreatGreatGrandparentCardHeight
                                                                    )
                                                                    .attr(
                                                                        "rx",
                                                                        8
                                                                    )
                                                                    .attr(
                                                                        "ry",
                                                                        8
                                                                    )
                                                                    .attr(
                                                                        "fill",
                                                                        "white"
                                                                    )
                                                                    .attr(
                                                                        "stroke",
                                                                        "#ffb6c1"
                                                                    )
                                                                    .attr(
                                                                        "stroke-width",
                                                                        3
                                                                    );

                                                                const greatGreatGreatGrandmotherIcon =
                                                                    greatGreatGreatGrandmotherGroup
                                                                        .append(
                                                                            "g"
                                                                        )
                                                                        .attr(
                                                                            "transform",
                                                                            "translate(0, -15)"
                                                                        );
                                                                renderAvatar(
                                                                    greatGreatGreatGrandmotherIcon,
                                                                    greatGreatGreatGrandmotherForGreatGreatGrandmother,
                                                                    svg
                                                                );

                                                                let greatGreatGreatGrandmotherName =
                                                                    greatGreatGreatGrandmotherForGreatGreatGrandmother.name ||
                                                                    greatGreatGreatGrandmotherForGreatGreatGrandmother.first_name ||
                                                                    "";
                                                                if (
                                                                    greatGreatGreatGrandmotherForGreatGreatGrandmother.last_name
                                                                )
                                                                    greatGreatGreatGrandmotherName +=
                                                                        " " +
                                                                        greatGreatGreatGrandmotherForGreatGreatGrandmother.last_name;
                                                                if (
                                                                    !greatGreatGreatGrandmotherName
                                                                )
                                                                    greatGreatGreatGrandmotherName =
                                                                        "Unknown";

                                                                greatGreatGreatGrandmotherGroup
                                                                    .append(
                                                                        "text"
                                                                    )
                                                                    .attr(
                                                                        "x",
                                                                        0
                                                                    )
                                                                    .attr(
                                                                        "y",
                                                                        18
                                                                    )
                                                                    .attr(
                                                                        "text-anchor",
                                                                        "middle"
                                                                    )
                                                                    .attr(
                                                                        "font-size",
                                                                        "10px"
                                                                    )
                                                                    .attr(
                                                                        "fill",
                                                                        "#333"
                                                                    )
                                                                    .text(
                                                                        greatGreatGreatGrandmotherName.length >
                                                                            12
                                                                            ? greatGreatGreatGrandmotherName.substring(
                                                                                  0,
                                                                                  12
                                                                              ) +
                                                                                  "..."
                                                                            : greatGreatGreatGrandmotherName
                                                                    );

                                                                addEditDeleteIcons(
                                                                    greatGreatGreatGrandmotherGroup,
                                                                    greatGreatGreatGrandmotherForGreatGreatGrandmother.id,
                                                                    greatGreatGreatGrandmotherName
                                                                );
                                                            }
                                                        }
                                                    }

                                                    // Add connecting lines from great-great-grandparents to great-grandfather
                                                    const greatGreatGrandparentLineY =
                                                        greatGreatGrandparentCardY -
                                                        greatGrandparentCardY +
                                                        greatGreatGrandparentCardHeight /
                                                            2;
                                                    const greatGrandfatherCardTopY =
                                                        -greatGrandparentCardHeight /
                                                        2;

                                                    if (
                                                        greatGreatGrandfatherForGrandmother &&
                                                        greatGreatGrandmotherForGrandmother
                                                    ) {
                                                        // Both exist - draw horizontal line and vertical line
                                                        const greatGreatGrandfatherX =
                                                            -greatGreatGrandparentCardWidth /
                                                                2 -
                                                            greatGreatGrandparentSpacing /
                                                                2;
                                                        const greatGreatGrandmotherX =
                                                            greatGreatGrandparentCardWidth /
                                                                2 +
                                                            greatGreatGrandparentSpacing /
                                                                2;

                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandfatherX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                greatGreatGrandmotherX
                                                            )
                                                            .attr(
                                                                "y2",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );

                                                        const greatGreatGrandparentMidX =
                                                            (greatGreatGrandfatherX +
                                                                greatGreatGrandmotherX) /
                                                            2;
                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandparentMidX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr(
                                                                "x2",
                                                                greatGreatGrandparentMidX
                                                            )
                                                            .attr(
                                                                "y2",
                                                                greatGrandfatherCardTopY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    } else if (
                                                        greatGreatGrandfatherForGrandmother
                                                    ) {
                                                        // Only great-great-grandfather
                                                        const greatGreatGrandfatherX =
                                                            -greatGreatGrandparentCardWidth /
                                                                2 -
                                                            greatGreatGrandparentSpacing /
                                                                2;
                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandfatherX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr("x2", 0)
                                                            .attr(
                                                                "y2",
                                                                greatGrandfatherCardTopY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    } else if (
                                                        greatGreatGrandmotherForGrandmother
                                                    ) {
                                                        // Only great-great-grandmother
                                                        const greatGreatGrandmotherX =
                                                            greatGreatGrandparentCardWidth /
                                                                2 +
                                                            greatGreatGrandparentSpacing /
                                                                2;
                                                        greatGrandfatherGroup
                                                            .append("line")
                                                            .attr(
                                                                "class",
                                                                "parent-link"
                                                            )
                                                            .attr(
                                                                "x1",
                                                                greatGreatGrandmotherX
                                                            )
                                                            .attr(
                                                                "y1",
                                                                greatGreatGrandparentLineY
                                                            )
                                                            .attr("x2", 0)
                                                            .attr(
                                                                "y2",
                                                                greatGrandfatherCardTopY
                                                            )
                                                            .attr(
                                                                "stroke",
                                                                "#999"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                1.5
                                                            )
                                                            .style(
                                                                "pointer-events",
                                                                "none"
                                                            );
                                                    }
                                                }

                                                const greatGreatGrandparentButtonY =
                                                    greatGrandparentCardY - 150;
                                                // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                const greatGreatGrandparentButtonWidth = 100; // Reduced button width to prevent overlap
                                                const greatGreatGrandparentButtonHeight = 70; // Reduced button height to prevent overlap
                                                const greatGreatGrandparentSpacing = 30; // Standardized button spacing for all generations

                                                // Add Father button (left) - show if great-great-grandfather doesn't exist
                                                if (
                                                    !greatGreatGrandfatherForGrandmother
                                                ) {
                                                    const greatGreatGrandfatherParentFatherGroup =
                                                        greatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    -greatGreatGrandparentButtonWidth /
                                                                        2 -
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentButtonY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandfather,
                                                                        "father"
                                                                    );
                                                                }
                                                            );

                                                    greatGreatGrandfatherParentFatherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentButtonWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentButtonHeight
                                                        )
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentButtonHeight /
                                                                2
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    greatGreatGrandfatherParentFatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    greatGreatGrandfatherParentFatherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add father");
                                                }

                                                // Add Mother button (right) - show if great-great-grandmother doesn't exist
                                                if (
                                                    !greatGreatGrandmotherForGrandmother
                                                ) {
                                                    const greatGreatGrandfatherParentMotherGroup =
                                                        greatGrandfatherGroup
                                                            .append("g")
                                                            .attr(
                                                                "class",
                                                                "add-parent-button"
                                                            )
                                                            .attr(
                                                                "transform",
                                                                `translate(${
                                                                    greatGreatGrandparentButtonWidth /
                                                                        2 +
                                                                    greatGreatGrandparentSpacing /
                                                                        2
                                                                }, ${
                                                                    greatGreatGrandparentButtonY -
                                                                    greatGrandparentCardY
                                                                })`
                                                            )
                                                            .on(
                                                                "click",
                                                                function (
                                                                    event
                                                                ) {
                                                                    event.stopPropagation();
                                                                    addParentFromNode(
                                                                        greatGrandfather,
                                                                        "mother"
                                                                    );
                                                                }
                                                            );

                                                    greatGreatGrandfatherParentMotherGroup
                                                        .append("rect")
                                                        .attr(
                                                            "width",
                                                            greatGreatGrandparentButtonWidth
                                                        )
                                                        .attr(
                                                            "height",
                                                            greatGreatGrandparentButtonHeight
                                                        )
                                                        .attr(
                                                            "x",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2
                                                        )
                                                        .attr(
                                                            "y",
                                                            -greatGreatGrandparentButtonHeight /
                                                                2
                                                        )
                                                        .attr("rx", 8)
                                                        .attr("stroke", "#ddd")
                                                        .attr("stroke-width", 2)
                                                        .attr(
                                                            "stroke-dasharray",
                                                            "5,5"
                                                        )
                                                        .attr("fill", "white");

                                                    greatGreatGrandfatherParentMotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", -15)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "28px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "300"
                                                        )
                                                        .text("+");

                                                    greatGreatGrandfatherParentMotherGroup
                                                        .append("text")
                                                        .attr("x", 0)
                                                        .attr("y", 8)
                                                        .attr(
                                                            "text-anchor",
                                                            "middle"
                                                        )
                                                        .attr(
                                                            "font-size",
                                                            "11px"
                                                        )
                                                        .attr(
                                                            "font-weight",
                                                            "500"
                                                        )
                                                        .text("Add mother");

                                                    // Add lines from top center of great-grandfather card, branching to parent buttons
                                                    const greatGrandfatherParentBranchYForGrandmother =
                                                        greatGreatGrandparentButtonY -
                                                        greatGrandparentCardY +
                                                        greatGreatGrandparentButtonHeight /
                                                            2 +
                                                        10;
                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr("x1", 0)
                                                        .attr(
                                                            "y1",
                                                            -greatGrandparentCardHeight /
                                                                2
                                                        )
                                                        .attr("x2", 0)
                                                        .attr(
                                                            "y2",
                                                            greatGrandfatherParentBranchYForGrandmother
                                                        );

                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandfatherParentBranchYForGrandmother
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGrandfatherParentBranchYForGrandmother
                                                        );

                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandfatherParentBranchYForGrandmother
                                                        )
                                                        .attr(
                                                            "x2",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY +
                                                                greatGreatGrandparentButtonHeight /
                                                                    2
                                                        );

                                                    greatGrandfatherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandfatherParentBranchYForGrandmother
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY +
                                                                greatGreatGrandparentButtonHeight /
                                                                    2
                                                        );
                                                }
                                            }

                                            // Show "Add father" button if great-grandfather doesn't exist
                                            if (!greatGrandfather) {
                                                // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                const greatGrandparentButtonWidth = 140; // Standardized button width for all generations
                                                const greatGrandparentButtonHeight = 90; // Standardized button height for all generations
                                                const greatGrandparentSpacing = 700; // Match grandparent spacing

                                                // Add Father button (left) above grandmother card
                                                const greatGrandfatherParentFatherGroup =
                                                    grandmotherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                -greatGrandparentCardWidth /
                                                                    2 -
                                                                greatGrandparentSpacing /
                                                                    2
                                                            }, ${greatGrandparentCardY})`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    grandmother,
                                                                    "father"
                                                                );
                                                            }
                                                        );

                                                greatGrandfatherParentFatherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        greatGrandparentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        greatGrandparentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -greatGrandparentButtonWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -greatGrandparentButtonHeight /
                                                            2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                greatGrandfatherParentFatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                greatGrandfatherParentFatherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add father");
                                            }

                                            // Show "Add mother" button if great-grandmother doesn't exist
                                            if (!greatGrandmother) {
                                                // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                const greatGrandparentButtonWidth = 140; // Standardized button width for all generations
                                                const greatGrandparentButtonHeight = 90; // Standardized button height for all generations
                                                const greatGrandparentSpacing = 30;

                                                // Add Mother button (right) above grandmother card
                                                const greatGrandfatherParentMotherGroup =
                                                    grandmotherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "add-parent-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                greatGrandparentCardWidth /
                                                                    2 +
                                                                greatGrandparentSpacing /
                                                                    2
                                                            }, ${greatGrandparentCardY})`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                addParentFromNode(
                                                                    grandmother,
                                                                    "mother"
                                                                );
                                                            }
                                                        );

                                                const greatGrandmotherParentMotherGroup =
                                                    greatGrandfatherParentMotherGroup;
                                                greatGrandmotherParentMotherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "width",
                                                        greatGrandparentButtonWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        greatGrandparentButtonHeight
                                                    )
                                                    .attr(
                                                        "x",
                                                        -greatGrandparentButtonWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -greatGrandparentButtonHeight /
                                                            2
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("stroke", "#ddd")
                                                    .attr("stroke-width", 2)
                                                    .attr(
                                                        "stroke-dasharray",
                                                        "5,5"
                                                    )
                                                    .attr("fill", "white");

                                                greatGrandfatherParentMotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", -15)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "28px")
                                                    .attr("font-weight", "300")
                                                    .text("+");

                                                greatGrandfatherParentMotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 8)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "11px")
                                                    .attr("font-weight", "500")
                                                    .text("Add mother");
                                            }

                                            // Show great-grandmother card (right)
                                            if (greatGrandmother) {
                                                const greatGrandmotherGroup =
                                                    grandmotherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "parent-card"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            `translate(${
                                                                greatGrandparentCardWidth /
                                                                    2 +
                                                                greatGrandparentSpacing /
                                                                    2
                                                            }, ${greatGrandparentCardY})`
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                if (
                                                                    typeof window.openProfileSidebar ===
                                                                    "function"
                                                                ) {
                                                                    window.openProfileSidebar(
                                                                        greatGrandmother.id,
                                                                        greatGrandmother
                                                                    );
                                                                } else {
                                                                    event.preventDefault();
                                                                    event.stopPropagation();
                                                                    if (
                                                                        typeof window.openProfileSidebar ===
                                                                        "function"
                                                                    ) {
                                                                        window.openProfileSidebar(
                                                                            greatGrandmother.id,
                                                                            greatGrandmother
                                                                        );
                                                                    }
                                                                }
                                                            }
                                                        );

                                                greatGrandmotherGroup
                                                    .append("rect")
                                                    .attr(
                                                        "x",
                                                        -greatGrandparentCardWidth /
                                                            2
                                                    )
                                                    .attr(
                                                        "y",
                                                        -greatGrandparentCardHeight /
                                                            2
                                                    )
                                                    .attr(
                                                        "width",
                                                        greatGrandparentCardWidth
                                                    )
                                                    .attr(
                                                        "height",
                                                        greatGrandparentCardHeight
                                                    )
                                                    .attr("rx", 8)
                                                    .attr("ry", 8)
                                                    .attr("fill", "white")
                                                    .attr("stroke", "#ffb6c1")
                                                    .attr("stroke-width", 3);

                                                const greatGrandmotherIcon =
                                                    greatGrandmotherGroup
                                                        .append("g")
                                                        .attr(
                                                            "transform",
                                                            "translate(0, -20)"
                                                        );
                                                renderAvatar(
                                                    greatGrandmotherIcon,
                                                    greatGrandmother,
                                                    svg
                                                );

                                                let greatGrandmotherName =
                                                    greatGrandmother.name ||
                                                    greatGrandmother.first_name ||
                                                    "";
                                                if (greatGrandmother.last_name)
                                                    greatGrandmotherName +=
                                                        " " +
                                                        greatGrandmother.last_name;
                                                if (!greatGrandmotherName)
                                                    greatGrandmotherName =
                                                        "Unknown";

                                                greatGrandmotherGroup
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 20)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "12px")
                                                    .attr("fill", "#333")
                                                    .text(
                                                        greatGrandmotherName.length >
                                                            15
                                                            ? greatGrandmotherName.substring(
                                                                  0,
                                                                  15
                                                              ) + "..."
                                                            : greatGrandmotherName
                                                    );

                                                addEditDeleteIcons(
                                                    greatGrandmotherGroup,
                                                    greatGrandmother.id,
                                                    greatGrandmotherName
                                                );

                                                // Add toggle hide/show button (eye icon) - top right
                                                const isGreatGrandmotherHidden =
                                                    areAncestorsHidden(
                                                        greatGrandmother.id
                                                    );
                                                const hideGreatGrandmotherButton =
                                                    greatGrandmotherGroup
                                                        .append("g")
                                                        .attr(
                                                            "class",
                                                            "hide-branch-button"
                                                        )
                                                        .attr(
                                                            "transform",
                                                            "translate(45, -35)"
                                                        )
                                                        .style(
                                                            "cursor",
                                                            "pointer"
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                togglePersonBranch(
                                                                    greatGrandmother.id
                                                                );
                                                            }
                                                        );

                                                hideGreatGrandmotherButton
                                                    .append("circle")
                                                    .attr("cx", 0)
                                                    .attr("cy", 0)
                                                    .attr("r", 10)
                                                    .attr(
                                                        "fill",
                                                        isGreatGrandmotherHidden
                                                            ? "#28a745"
                                                            : "#6c757d"
                                                    )
                                                    .attr("stroke", "white")
                                                    .attr("stroke-width", 1);

                                                hideGreatGrandmotherButton
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 3)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "10px")
                                                    .attr("fill", "white")
                                                    .text(
                                                        isGreatGrandmotherHidden
                                                            ? "👁️"
                                                            : "👁️‍🗨️"
                                                    );

                                                hideGreatGrandmotherButton
                                                    .append("title")
                                                    .text(
                                                        isGreatGrandmotherHidden
                                                            ? `Click to show the family branch of ${greatGrandmotherName}`
                                                            : `Click to hide the family branch of ${greatGrandmotherName}`
                                                    );

                                                // Add button - black style matching root node
                                                const greatGrandmotherIconsForGrandmother =
                                                    greatGrandmotherGroup
                                                        .append("g")
                                                        .attr(
                                                            "transform",
                                                            "translate(0, 35)"
                                                        )
                                                        .style(
                                                            "cursor",
                                                            "pointer"
                                                        )
                                                        .on(
                                                            "click",
                                                            function (event) {
                                                                event.stopPropagation();
                                                                openBranchBuilder(
                                                                    greatGrandmother
                                                                );
                                                            }
                                                        );
                                                greatGrandmotherIconsForGrandmother
                                                    .append("circle")
                                                    .attr("cx", 0)
                                                    .attr("cy", 0)
                                                    .attr("r", 10)
                                                    .attr("fill", "white")
                                                    .attr("stroke", "#d0d0d0")
                                                    .attr("stroke-width", 1);
                                                greatGrandmotherIconsForGrandmother
                                                    .append("text")
                                                    .attr("x", 0)
                                                    .attr("y", 4)
                                                    .attr(
                                                        "text-anchor",
                                                        "middle"
                                                    )
                                                    .attr("font-size", "16px")
                                                    .attr("font-weight", "bold")
                                                    .attr("fill", "#333")
                                                    .text("+");

                                                // Check if great-grandmother has parents - show cards if they exist, otherwise show "Add father" and "Add mother" buttons
                                                const greatGrandmotherParentsForGrandmother =
                                                    greatGrandmother.parents ||
                                                    [];
                                                const visibleGreatGrandmotherParentsForGrandmother =
                                                    greatGrandmotherParentsForGrandmother.filter(
                                                        (pId) =>
                                                            !window.hiddenAncestorIds ||
                                                            !window.hiddenAncestorIds.has(
                                                                pId
                                                            )
                                                    );

                                                // Get actual parent data (not just visible)
                                                const greatGrandmotherParentDataForGrandmother =
                                                    greatGrandmotherParentsForGrandmother
                                                        .map((parentId) =>
                                                            treeData.find(
                                                                (p) =>
                                                                    p.id ===
                                                                    parentId
                                                            )
                                                        )
                                                        .filter((p) => p);

                                                const greatGreatGrandfatherForGreatGrandmother =
                                                    greatGrandmotherParentDataForGrandmother.find(
                                                        (p) =>
                                                            p.gender === "male"
                                                    );
                                                const greatGreatGrandmotherForGreatGrandmother =
                                                    greatGrandmotherParentDataForGrandmother.find(
                                                        (p) =>
                                                            p.gender ===
                                                            "female"
                                                    );

                                                const areGreatGrandmotherAncestorsHiddenForGrandmother =
                                                    areAncestorsHidden(
                                                        greatGrandmother.id
                                                    );
                                                if (
                                                    !areGreatGrandmotherAncestorsHiddenForGrandmother
                                                ) {
                                                    // Show great-great-grandparent cards if they exist
                                                    if (
                                                        greatGreatGrandfatherForGreatGrandmother ||
                                                        greatGreatGrandmotherForGreatGrandmother
                                                    ) {
                                                        const greatGreatGrandparentCardY =
                                                            greatGrandparentCardY -
                                                            150; // Same position as Add buttons
                                                        const greatGreatGrandparentCardWidth = 100;
                                                        const greatGreatGrandparentCardHeight = 80;
                                                        const greatGreatGrandparentSpacing = 100; // Reduced spacing for great-great-grandparents

                                                        // Show great-great-grandfather card (left)
                                                        if (
                                                            greatGreatGrandfatherForGreatGrandmother
                                                        ) {
                                                            const greatGreatGrandfatherGroup =
                                                                greatGrandmotherGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "class",
                                                                        "parent-card"
                                                                    )
                                                                    .attr(
                                                                        "transform",
                                                                        `translate(${
                                                                            -greatGreatGrandparentCardWidth /
                                                                                2 -
                                                                            greatGreatGrandparentSpacing /
                                                                                2
                                                                        }, ${
                                                                            greatGreatGrandparentCardY -
                                                                            greatGrandparentCardY
                                                                        })`
                                                                    )
                                                                    .on(
                                                                        "click",
                                                                        function (
                                                                            event
                                                                        ) {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandfatherForGreatGrandmother.id,
                                                                                    greatGreatGrandfatherForGreatGrandmother
                                                                                );
                                                                            }
                                                                        }
                                                                    );

                                                            greatGreatGrandfatherGroup
                                                                .append("rect")
                                                                .attr(
                                                                    "x",
                                                                    -greatGreatGrandparentCardWidth /
                                                                        2
                                                                )
                                                                .attr(
                                                                    "y",
                                                                    -greatGreatGrandparentCardHeight /
                                                                        2
                                                                )
                                                                .attr(
                                                                    "width",
                                                                    greatGreatGrandparentCardWidth
                                                                )
                                                                .attr(
                                                                    "height",
                                                                    greatGreatGrandparentCardHeight
                                                                )
                                                                .attr("rx", 8)
                                                                .attr("ry", 8)
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#add8e6"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    3
                                                                );

                                                            const greatGreatGrandfatherIcon =
                                                                greatGreatGrandfatherGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "transform",
                                                                        "translate(0, -20)"
                                                                    );
                                                            greatGreatGrandfatherIcon
                                                                .append(
                                                                    "circle"
                                                                )
                                                                .attr("cx", 0)
                                                                .attr("cy", -8)
                                                                .attr("r", 8)
                                                                .attr(
                                                                    "fill",
                                                                    "#d0d0d0"
                                                                );
                                                            greatGreatGrandfatherIcon
                                                                .append("rect")
                                                                .attr("x", -10)
                                                                .attr("y", 0)
                                                                .attr(
                                                                    "width",
                                                                    20
                                                                )
                                                                .attr(
                                                                    "height",
                                                                    16
                                                                )
                                                                .attr("rx", 10)
                                                                .attr(
                                                                    "fill",
                                                                    "#d0d0d0"
                                                                );

                                                            let greatGreatGrandfatherName =
                                                                greatGreatGrandfatherForGreatGrandmother.name ||
                                                                greatGreatGrandfatherForGreatGrandmother.first_name ||
                                                                "";
                                                            if (
                                                                greatGreatGrandfatherForGreatGrandmother.last_name
                                                            )
                                                                greatGreatGrandfatherName +=
                                                                    " " +
                                                                    greatGreatGrandfatherForGreatGrandmother.last_name;
                                                            if (
                                                                !greatGreatGrandfatherName
                                                            )
                                                                greatGreatGrandfatherName =
                                                                    "Unknown";

                                                            greatGreatGrandfatherGroup
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 20)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "12px"
                                                                )
                                                                .attr(
                                                                    "fill",
                                                                    "#333"
                                                                )
                                                                .text(
                                                                    greatGreatGrandfatherName.length >
                                                                        15
                                                                        ? greatGreatGrandfatherName.substring(
                                                                              0,
                                                                              15
                                                                          ) +
                                                                              "..."
                                                                        : greatGreatGrandfatherName
                                                                );

                                                            addEditDeleteIcons(
                                                                greatGreatGrandfatherGroup,
                                                                greatGreatGrandfatherForGreatGrandmother.id,
                                                                greatGreatGrandfatherName
                                                            );

                                                            // Add toggle hide/show button (eye icon) - top right
                                                            const isGreatGreatGrandfatherHidden =
                                                                areAncestorsHidden(
                                                                    greatGreatGrandfatherForGreatGrandmother.id
                                                                );
                                                            const hideGreatGreatGrandfatherButton =
                                                                greatGreatGrandfatherGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "class",
                                                                        "hide-branch-button"
                                                                    )
                                                                    .attr(
                                                                        "transform",
                                                                        "translate(40, -35)"
                                                                    )
                                                                    .style(
                                                                        "cursor",
                                                                        "pointer"
                                                                    )
                                                                    .on(
                                                                        "click",
                                                                        function (
                                                                            event
                                                                        ) {
                                                                            event.stopPropagation();
                                                                            togglePersonBranch(
                                                                                greatGreatGrandfatherForGreatGrandmother.id
                                                                            );
                                                                        }
                                                                    );

                                                            hideGreatGreatGrandfatherButton
                                                                .append(
                                                                    "circle"
                                                                )
                                                                .attr("cx", 0)
                                                                .attr("cy", 0)
                                                                .attr("r", 10)
                                                                .attr(
                                                                    "fill",
                                                                    isGreatGreatGrandfatherHidden
                                                                        ? "#28a745"
                                                                        : "#6c757d"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1
                                                                );

                                                            hideGreatGreatGrandfatherButton
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 3)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "10px"
                                                                )
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .text(
                                                                    isGreatGreatGrandfatherHidden
                                                                        ? "👁️"
                                                                        : "👁️‍🗨️"
                                                                );

                                                            hideGreatGreatGrandfatherButton
                                                                .append("title")
                                                                .text(
                                                                    isGreatGreatGrandfatherHidden
                                                                        ? `Click to show the family branch of ${greatGreatGrandfatherName}`
                                                                        : `Click to hide the family branch of ${greatGreatGrandfatherName}`
                                                                );

                                                            // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                            const greatGreatGrandfatherIconsForGreatGrandmother =
                                                                greatGreatGrandfatherGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "transform",
                                                                        "translate(0, 35)"
                                                                    );
                                                            greatGreatGrandfatherIconsForGreatGrandmother
                                                                .append(
                                                                    "circle"
                                                                )
                                                                .attr("cx", 0)
                                                                .attr("cy", 0)
                                                                .attr("r", 8)
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#28a745"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1
                                                                )
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        openBranchBuilder(
                                                                            greatGreatGrandfatherForGreatGrandmother
                                                                        );
                                                                    }
                                                                );
                                                            greatGreatGrandfatherIconsForGreatGrandmother
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 4)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "12px"
                                                                )
                                                                .attr(
                                                                    "fill",
                                                                    "#28a745"
                                                                )
                                                                .text("+");
                                                        }

                                                        // Show great-great-grandmother card (right)
                                                        if (
                                                            greatGreatGrandmotherForGreatGrandmother
                                                        ) {
                                                            const greatGreatGrandmotherGroup =
                                                                greatGrandmotherGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "class",
                                                                        "parent-card"
                                                                    )
                                                                    .attr(
                                                                        "transform",
                                                                        `translate(${
                                                                            greatGreatGrandparentCardWidth /
                                                                                2 +
                                                                            greatGreatGrandparentSpacing /
                                                                                2
                                                                        }, ${
                                                                            greatGreatGrandparentCardY -
                                                                            greatGrandparentCardY
                                                                        })`
                                                                    )
                                                                    .on(
                                                                        "click",
                                                                        function (
                                                                            event
                                                                        ) {
                                                                            event.preventDefault();
                                                                            event.stopPropagation();
                                                                            if (
                                                                                typeof window.openProfileSidebar ===
                                                                                "function"
                                                                            ) {
                                                                                window.openProfileSidebar(
                                                                                    greatGreatGrandmotherForGreatGrandmother.id,
                                                                                    greatGreatGrandmotherForGreatGrandmother
                                                                                );
                                                                            }
                                                                        }
                                                                    );

                                                            greatGreatGrandmotherGroup
                                                                .append("rect")
                                                                .attr(
                                                                    "x",
                                                                    -greatGreatGrandparentCardWidth /
                                                                        2
                                                                )
                                                                .attr(
                                                                    "y",
                                                                    -greatGreatGrandparentCardHeight /
                                                                        2
                                                                )
                                                                .attr(
                                                                    "width",
                                                                    greatGreatGrandparentCardWidth
                                                                )
                                                                .attr(
                                                                    "height",
                                                                    greatGreatGrandparentCardHeight
                                                                )
                                                                .attr("rx", 8)
                                                                .attr("ry", 8)
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#ffb6c1"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    3
                                                                );

                                                            const greatGreatGrandmotherIcon =
                                                                greatGreatGrandmotherGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "transform",
                                                                        "translate(0, -20)"
                                                                    );
                                                            greatGreatGrandmotherIcon
                                                                .append(
                                                                    "circle"
                                                                )
                                                                .attr("cx", 0)
                                                                .attr("cy", -8)
                                                                .attr("r", 8)
                                                                .attr(
                                                                    "fill",
                                                                    "#d0d0d0"
                                                                );
                                                            greatGreatGrandmotherIcon
                                                                .append("rect")
                                                                .attr("x", -10)
                                                                .attr("y", 0)
                                                                .attr(
                                                                    "width",
                                                                    20
                                                                )
                                                                .attr(
                                                                    "height",
                                                                    16
                                                                )
                                                                .attr("rx", 10)
                                                                .attr(
                                                                    "fill",
                                                                    "#d0d0d0"
                                                                );

                                                            let greatGreatGrandmotherName =
                                                                greatGreatGrandmotherForGreatGrandmother.name ||
                                                                greatGreatGrandmotherForGreatGrandmother.first_name ||
                                                                "";
                                                            if (
                                                                greatGreatGrandmotherForGreatGrandmother.last_name
                                                            )
                                                                greatGreatGrandmotherName +=
                                                                    " " +
                                                                    greatGreatGrandmotherForGreatGrandmother.last_name;
                                                            if (
                                                                !greatGreatGrandmotherName
                                                            )
                                                                greatGreatGrandmotherName =
                                                                    "Unknown";

                                                            greatGreatGrandmotherGroup
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 20)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "12px"
                                                                )
                                                                .attr(
                                                                    "fill",
                                                                    "#333"
                                                                )
                                                                .text(
                                                                    greatGreatGrandmotherName.length >
                                                                        15
                                                                        ? greatGreatGrandmotherName.substring(
                                                                              0,
                                                                              15
                                                                          ) +
                                                                              "..."
                                                                        : greatGreatGrandmotherName
                                                                );

                                                            addEditDeleteIcons(
                                                                greatGreatGrandmotherGroup,
                                                                greatGreatGrandmotherForGreatGrandmother.id,
                                                                greatGreatGrandmotherName
                                                            );

                                                            // Add toggle hide/show button (eye icon) - top right
                                                            const isGreatGreatGrandmotherHidden =
                                                                areAncestorsHidden(
                                                                    greatGreatGrandmotherForGreatGrandmother.id
                                                                );
                                                            const hideGreatGreatGrandmotherButton =
                                                                greatGreatGrandmotherGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "class",
                                                                        "hide-branch-button"
                                                                    )
                                                                    .attr(
                                                                        "transform",
                                                                        "translate(40, -35)"
                                                                    )
                                                                    .style(
                                                                        "cursor",
                                                                        "pointer"
                                                                    )
                                                                    .on(
                                                                        "click",
                                                                        function (
                                                                            event
                                                                        ) {
                                                                            event.stopPropagation();
                                                                            togglePersonBranch(
                                                                                greatGreatGrandmotherForGreatGrandmother.id
                                                                            );
                                                                        }
                                                                    );

                                                            hideGreatGreatGrandmotherButton
                                                                .append(
                                                                    "circle"
                                                                )
                                                                .attr("cx", 0)
                                                                .attr("cy", 0)
                                                                .attr("r", 10)
                                                                .attr(
                                                                    "fill",
                                                                    isGreatGreatGrandmotherHidden
                                                                        ? "#28a745"
                                                                        : "#6c757d"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1
                                                                );

                                                            hideGreatGreatGrandmotherButton
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 3)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "10px"
                                                                )
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .text(
                                                                    isGreatGreatGrandmotherHidden
                                                                        ? "👁️"
                                                                        : "👁️‍🗨️"
                                                                );

                                                            hideGreatGreatGrandmotherButton
                                                                .append("title")
                                                                .text(
                                                                    isGreatGreatGrandmotherHidden
                                                                        ? `Click to show the family branch of ${greatGreatGrandmotherName}`
                                                                        : `Click to hide the family branch of ${greatGreatGrandmotherName}`
                                                                );

                                                            // Add icons (plus, edit, delete) - simplified for great-great-grandparents
                                                            const greatGreatGrandmotherIconsForGreatGrandmother =
                                                                greatGreatGrandmotherGroup
                                                                    .append("g")
                                                                    .attr(
                                                                        "transform",
                                                                        "translate(0, 35)"
                                                                    );
                                                            greatGreatGrandmotherIconsForGreatGrandmother
                                                                .append(
                                                                    "circle"
                                                                )
                                                                .attr("cx", 0)
                                                                .attr("cy", 0)
                                                                .attr("r", 8)
                                                                .attr(
                                                                    "fill",
                                                                    "white"
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#28a745"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1
                                                                )
                                                                .style(
                                                                    "cursor",
                                                                    "pointer"
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        openBranchBuilder(
                                                                            greatGreatGrandmotherForGreatGrandmother
                                                                        );
                                                                    }
                                                                );
                                                            greatGreatGrandmotherIconsForGreatGrandmother
                                                                .append("text")
                                                                .attr("x", 0)
                                                                .attr("y", 4)
                                                                .attr(
                                                                    "text-anchor",
                                                                    "middle"
                                                                )
                                                                .attr(
                                                                    "font-size",
                                                                    "12px"
                                                                )
                                                                .attr(
                                                                    "fill",
                                                                    "#28a745"
                                                                )
                                                                .text("+");
                                                        }

                                                        // Add connecting lines from great-great-grandparents to great-grandmother
                                                        const greatGreatGrandparentLineY =
                                                            greatGreatGrandparentCardY -
                                                            greatGrandparentCardY +
                                                            greatGreatGrandparentCardHeight /
                                                                2;
                                                        const greatGrandmotherCardTopY =
                                                            -greatGrandparentCardHeight /
                                                            2;

                                                        if (
                                                            greatGreatGrandfatherForGreatGrandmother &&
                                                            greatGreatGrandmotherForGreatGrandmother
                                                        ) {
                                                            // Both exist - draw horizontal line and vertical line
                                                            const greatGreatGrandfatherX =
                                                                -greatGreatGrandparentCardWidth /
                                                                    2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2;
                                                            const greatGreatGrandmotherX =
                                                                greatGreatGrandparentCardWidth /
                                                                    2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2;

                                                            greatGrandmotherGroup
                                                                .append("line")
                                                                .attr(
                                                                    "class",
                                                                    "parent-link"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    greatGreatGrandfatherX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    greatGreatGrandparentLineY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    greatGreatGrandmotherX
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    greatGreatGrandparentLineY
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1.5
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );

                                                            const greatGreatGrandparentMidX =
                                                                (greatGreatGrandfatherX +
                                                                    greatGreatGrandmotherX) /
                                                                2;
                                                            greatGrandmotherGroup
                                                                .append("line")
                                                                .attr(
                                                                    "class",
                                                                    "parent-link"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    greatGreatGrandparentMidX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    greatGreatGrandparentLineY
                                                                )
                                                                .attr(
                                                                    "x2",
                                                                    greatGreatGrandparentMidX
                                                                )
                                                                .attr(
                                                                    "y2",
                                                                    greatGrandmotherCardTopY
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1.5
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );
                                                        } else if (
                                                            greatGreatGrandfatherForGreatGrandmother
                                                        ) {
                                                            // Only great-great-grandfather
                                                            const greatGreatGrandfatherX =
                                                                -greatGreatGrandparentCardWidth /
                                                                    2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2;
                                                            greatGrandmotherGroup
                                                                .append("line")
                                                                .attr(
                                                                    "class",
                                                                    "parent-link"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    greatGreatGrandfatherX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    greatGreatGrandparentLineY
                                                                )
                                                                .attr("x2", 0)
                                                                .attr(
                                                                    "y2",
                                                                    greatGrandmotherCardTopY
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1.5
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );
                                                        } else if (
                                                            greatGreatGrandmotherForGreatGrandmother
                                                        ) {
                                                            // Only great-great-grandmother
                                                            const greatGreatGrandmotherX =
                                                                greatGreatGrandparentCardWidth /
                                                                    2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2;
                                                            greatGrandmotherGroup
                                                                .append("line")
                                                                .attr(
                                                                    "class",
                                                                    "parent-link"
                                                                )
                                                                .attr(
                                                                    "x1",
                                                                    greatGreatGrandmotherX
                                                                )
                                                                .attr(
                                                                    "y1",
                                                                    greatGreatGrandparentLineY
                                                                )
                                                                .attr("x2", 0)
                                                                .attr(
                                                                    "y2",
                                                                    greatGrandmotherCardTopY
                                                                )
                                                                .attr(
                                                                    "stroke",
                                                                    "#999"
                                                                )
                                                                .attr(
                                                                    "stroke-width",
                                                                    1.5
                                                                )
                                                                .style(
                                                                    "pointer-events",
                                                                    "none"
                                                                );
                                                        }
                                                    }

                                                    const greatGreatGrandparentButtonY =
                                                        greatGrandparentCardY -
                                                        150;
                                                    const greatGreatGrandparentButtonWidth = 140;
                                                    const greatGreatGrandparentButtonHeight = 90;
                                                    const greatGreatGrandparentSpacing = 30; // Standardized button spacing for all generations

                                                    // Add Father button (left) - show if great-great-grandfather doesn't exist
                                                    if (
                                                        !greatGreatGrandfatherForGreatGrandmother
                                                    ) {
                                                        const greatGreatGrandmotherParentFatherGroup =
                                                            greatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        -greatGreatGrandparentButtonWidth /
                                                                            2 -
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentButtonY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        addParentFromNode(
                                                                            greatGrandmother,
                                                                            "father"
                                                                        );
                                                                    }
                                                                );

                                                        greatGreatGrandmotherParentFatherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentButtonWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentButtonHeight
                                                            )
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentButtonWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentButtonHeight /
                                                                    2
                                                            )
                                                            .attr("rx", 8)
                                                            .attr(
                                                                "stroke",
                                                                "#ddd"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .attr(
                                                                "stroke-dasharray",
                                                                "5,5"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            );

                                                        greatGreatGrandmotherParentFatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", -15)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "28px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "300"
                                                            )
                                                            .text("+");

                                                        greatGreatGrandmotherParentFatherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 8)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "11px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "500"
                                                            )
                                                            .text("Add father");
                                                    }

                                                    // Add Mother button (right) - show if great-great-grandmother doesn't exist
                                                    if (
                                                        !greatGreatGrandmotherForGreatGrandmother
                                                    ) {
                                                        const greatGreatGrandmotherParentMotherGroup =
                                                            greatGrandmotherGroup
                                                                .append("g")
                                                                .attr(
                                                                    "class",
                                                                    "add-parent-button"
                                                                )
                                                                .attr(
                                                                    "transform",
                                                                    `translate(${
                                                                        greatGreatGrandparentButtonWidth /
                                                                            2 +
                                                                        greatGreatGrandparentSpacing /
                                                                            2
                                                                    }, ${
                                                                        greatGreatGrandparentButtonY -
                                                                        greatGrandparentCardY
                                                                    })`
                                                                )
                                                                .on(
                                                                    "click",
                                                                    function (
                                                                        event
                                                                    ) {
                                                                        event.stopPropagation();
                                                                        addParentFromNode(
                                                                            greatGrandmother,
                                                                            "mother"
                                                                        );
                                                                    }
                                                                );

                                                        greatGreatGrandmotherParentMotherGroup
                                                            .append("rect")
                                                            .attr(
                                                                "width",
                                                                greatGreatGrandparentButtonWidth
                                                            )
                                                            .attr(
                                                                "height",
                                                                greatGreatGrandparentButtonHeight
                                                            )
                                                            .attr(
                                                                "x",
                                                                -greatGreatGrandparentButtonWidth /
                                                                    2
                                                            )
                                                            .attr(
                                                                "y",
                                                                -greatGreatGrandparentButtonHeight /
                                                                    2
                                                            )
                                                            .attr("rx", 8)
                                                            .attr(
                                                                "stroke",
                                                                "#ddd"
                                                            )
                                                            .attr(
                                                                "stroke-width",
                                                                2
                                                            )
                                                            .attr(
                                                                "stroke-dasharray",
                                                                "5,5"
                                                            )
                                                            .attr(
                                                                "fill",
                                                                "white"
                                                            );

                                                        greatGreatGrandmotherParentMotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", -15)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "28px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "300"
                                                            )
                                                            .text("+");

                                                        greatGreatGrandmotherParentMotherGroup
                                                            .append("text")
                                                            .attr("x", 0)
                                                            .attr("y", 8)
                                                            .attr(
                                                                "text-anchor",
                                                                "middle"
                                                            )
                                                            .attr(
                                                                "font-size",
                                                                "11px"
                                                            )
                                                            .attr(
                                                                "font-weight",
                                                                "500"
                                                            )
                                                            .text("Add mother");
                                                    }

                                                    // Add lines from top center of great-grandmother card, branching to parent buttons
                                                    const greatGrandmotherParentBranchYForGrandmother =
                                                        greatGreatGrandparentButtonY -
                                                        greatGrandparentCardY +
                                                        greatGreatGrandparentButtonHeight /
                                                            2 +
                                                        10;
                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr("x1", 0)
                                                        .attr(
                                                            "y1",
                                                            -greatGrandparentCardHeight /
                                                                2
                                                        )
                                                        .attr("x2", 0)
                                                        .attr(
                                                            "y2",
                                                            greatGrandmotherParentBranchYForGrandmother
                                                        );

                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandmotherParentBranchYForGrandmother
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGrandmotherParentBranchYForGrandmother
                                                        );

                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandmotherParentBranchYForGrandmother
                                                        )
                                                        .attr(
                                                            "x2",
                                                            -greatGreatGrandparentButtonWidth /
                                                                2 -
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY +
                                                                greatGreatGrandparentButtonHeight /
                                                                    2
                                                        );

                                                    greatGrandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "add-parent-line"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandmotherParentBranchYForGrandmother
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGreatGrandparentButtonWidth /
                                                                2 +
                                                                greatGreatGrandparentSpacing /
                                                                    2
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGreatGrandparentButtonY -
                                                                greatGrandparentCardY +
                                                                greatGreatGrandparentButtonHeight /
                                                                    2
                                                        );
                                                }
                                            }

                                            // Draw lines connecting great-grandparents to grandmother card
                                            if (
                                                greatGrandfather ||
                                                greatGrandmother
                                            ) {
                                                const greatGrandfatherX =
                                                    greatGrandfather
                                                        ? -greatGrandparentCardWidth /
                                                              2 -
                                                          greatGrandparentSpacing /
                                                              2
                                                        : 0;
                                                const greatGrandmotherX =
                                                    greatGrandmother
                                                        ? greatGrandparentCardWidth /
                                                              2 +
                                                          greatGrandparentSpacing /
                                                              2
                                                        : greatGrandfather
                                                        ? -greatGrandparentCardWidth /
                                                              2 -
                                                          greatGrandparentSpacing /
                                                              2
                                                        : 0;
                                                const greatGrandparentLineY =
                                                    greatGrandparentCardY +
                                                    greatGrandparentCardHeight /
                                                        2; // Bottom of great-grandparent cards
                                                const grandmotherCardTopY =
                                                    -grandparentCardHeight / 2; // Top of grandmother card

                                                if (
                                                    greatGrandfather &&
                                                    greatGrandmother
                                                ) {
                                                    // Horizontal line connecting great-grandparents
                                                    grandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "parent-link"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGrandfatherX
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandparentLineY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGrandmotherX
                                                        )
                                                        .attr(
                                                            "y2",
                                                            greatGrandparentLineY
                                                        )
                                                        .attr("stroke", "#999")
                                                        .attr(
                                                            "stroke-width",
                                                            1.5
                                                        )
                                                        .style(
                                                            "pointer-events",
                                                            "none"
                                                        );

                                                    // Vertical line from midpoint down to grandmother card
                                                    const greatGrandparentMidX =
                                                        (greatGrandfatherX +
                                                            greatGrandmotherX) /
                                                        2;
                                                    grandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "parent-link"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGrandparentMidX
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandparentLineY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            greatGrandparentMidX
                                                        )
                                                        .attr(
                                                            "y2",
                                                            grandmotherCardTopY
                                                        )
                                                        .attr("stroke", "#999")
                                                        .attr(
                                                            "stroke-width",
                                                            1.5
                                                        )
                                                        .style(
                                                            "pointer-events",
                                                            "none"
                                                        );
                                                } else if (
                                                    greatGrandfather &&
                                                    !greatGrandmother
                                                ) {
                                                    // Only great-grandfather - connect to "Add mother" button
                                                    // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                                    const greatGrandparentButtonWidth = 140; // Standardized button width for all generations
                                                    const greatGrandparentButtonHeight = 90; // Standardized button height for all generations
                                                    const greatGrandparentSpacing = 30;

                                                    const addMotherButtonX =
                                                        greatGrandparentCardWidth /
                                                            2 +
                                                        greatGrandparentSpacing /
                                                            2; // Button center X
                                                    const addMotherButtonBottomY =
                                                        greatGrandparentCardY +
                                                        greatGrandparentButtonHeight /
                                                            2; // Button bottom Y

                                                    // Horizontal line from great-grandfather card bottom to "Add mother" button bottom
                                                    grandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "parent-link"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGrandfatherX
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandparentLineY
                                                        )
                                                        .attr(
                                                            "x2",
                                                            addMotherButtonX
                                                        )
                                                        .attr(
                                                            "y2",
                                                            addMotherButtonBottomY
                                                        )
                                                        .attr("stroke", "#999")
                                                        .attr(
                                                            "stroke-width",
                                                            1.5
                                                        )
                                                        .style(
                                                            "pointer-events",
                                                            "none"
                                                        );

                                                    // Vertical line from midpoint of horizontal line down to grandmother card
                                                    const midX =
                                                        (greatGrandfatherX +
                                                            addMotherButtonX) /
                                                        2;
                                                    const midY =
                                                        (greatGrandparentLineY +
                                                            addMotherButtonBottomY) /
                                                        2;

                                                    grandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "parent-link"
                                                        )
                                                        .attr("x1", midX)
                                                        .attr("y1", midY)
                                                        .attr("x2", midX)
                                                        .attr(
                                                            "y2",
                                                            grandmotherCardTopY
                                                        )
                                                        .attr("stroke", "#999")
                                                        .attr(
                                                            "stroke-width",
                                                            1.5
                                                        )
                                                        .style(
                                                            "pointer-events",
                                                            "none"
                                                        );
                                                } else if (
                                                    greatGrandmother &&
                                                    !greatGrandfather
                                                ) {
                                                    // Only great-grandmother
                                                    grandmotherGroup
                                                        .append("line")
                                                        .attr(
                                                            "class",
                                                            "parent-link"
                                                        )
                                                        .attr(
                                                            "x1",
                                                            greatGrandmotherX
                                                        )
                                                        .attr(
                                                            "y1",
                                                            greatGrandparentLineY
                                                        )
                                                        .attr("x2", 0)
                                                        .attr(
                                                            "y2",
                                                            grandmotherCardTopY
                                                        )
                                                        .attr("stroke", "#999")
                                                        .attr(
                                                            "stroke-width",
                                                            1.5
                                                        )
                                                        .style(
                                                            "pointer-events",
                                                            "none"
                                                        );
                                                }
                                            }
                                        } else {
                                            console.log(
                                                "=== ELSE BLOCK REACHED ==="
                                            );
                                            console.log(
                                                "RIGHT BEFORE ELSE - grandmotherHasParents value:",
                                                grandmotherHasParents
                                            );
                                            console.log(
                                                "grandmotherGroup exists:",
                                                !!grandmotherGroup
                                            );
                                            console.log(
                                                "grandmother exists:",
                                                !!grandmother
                                            );
                                            console.log(
                                                "Entering else block - showing Add father/mother buttons above grandmother",
                                                {
                                                    grandmotherId:
                                                        grandmother.id,
                                                    grandmotherName:
                                                        grandmother.name ||
                                                        grandmother.first_name,
                                                    grandmotherHasParents:
                                                        grandmotherHasParents,
                                                    grandmotherParentDataLength:
                                                        grandmotherParentData.length,
                                                }
                                            );
                                            // Show "Add father" and "Add mother" buttons above grandmother
                                            // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                                            const greatGrandparentButtonWidth = 140; // Standardized button width for all generations
                                            const greatGrandparentButtonHeight = 90; // Standardized button height for all generations
                                            const greatGrandparentSpacing = 30; // Standardized button spacing for all generations

                                            // Add Father button (left) above grandmother card
                                            const grandmotherParentFatherGroup =
                                                grandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "add-parent-button"
                                                    )
                                                    .attr(
                                                        "transform",
                                                        `translate(${
                                                            -greatGrandparentButtonWidth /
                                                                2 -
                                                            greatGrandparentSpacing /
                                                                2
                                                        }, ${
                                                            grandmotherParentButtonY -
                                                            grandparentCardY
                                                        })`
                                                    )
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            addParentFromNode(
                                                                grandmother,
                                                                "father"
                                                            );
                                                        }
                                                    );

                                            grandmotherParentFatherGroup
                                                .append("rect")
                                                .attr(
                                                    "width",
                                                    greatGrandparentButtonWidth
                                                )
                                                .attr(
                                                    "height",
                                                    greatGrandparentButtonHeight
                                                )
                                                .attr(
                                                    "x",
                                                    -greatGrandparentButtonWidth /
                                                        2
                                                )
                                                .attr(
                                                    "y",
                                                    -greatGrandparentButtonHeight /
                                                        2
                                                )
                                                .attr("rx", 8)
                                                .attr("stroke", "#ddd")
                                                .attr("stroke-width", 2)
                                                .attr("stroke-dasharray", "5,5")
                                                .attr("fill", "white");

                                            grandmotherParentFatherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", -15)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "28px")
                                                .attr("font-weight", "300")
                                                .text("+");

                                            grandmotherParentFatherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 8)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "11px")
                                                .attr("font-weight", "500")
                                                .text("Add father");

                                            // Add Mother button (right) above grandmother card
                                            const grandmotherParentMotherGroup =
                                                grandmotherGroup
                                                    .append("g")
                                                    .attr(
                                                        "class",
                                                        "add-parent-button"
                                                    )
                                                    .attr(
                                                        "transform",
                                                        `translate(${
                                                            greatGrandparentButtonWidth /
                                                                2 +
                                                            greatGrandparentSpacing /
                                                                2
                                                        }, ${
                                                            grandmotherParentButtonY -
                                                            grandparentCardY
                                                        })`
                                                    )
                                                    .on(
                                                        "click",
                                                        function (event) {
                                                            event.stopPropagation();
                                                            addParentFromNode(
                                                                grandmother,
                                                                "mother"
                                                            );
                                                        }
                                                    );

                                            grandmotherParentMotherGroup
                                                .append("rect")
                                                .attr(
                                                    "width",
                                                    greatGrandparentButtonWidth
                                                )
                                                .attr(
                                                    "height",
                                                    greatGrandparentButtonHeight
                                                )
                                                .attr(
                                                    "x",
                                                    -greatGrandparentButtonWidth /
                                                        2
                                                )
                                                .attr(
                                                    "y",
                                                    -greatGrandparentButtonHeight /
                                                        2
                                                )
                                                .attr("rx", 8)
                                                .attr("stroke", "#ddd")
                                                .attr("stroke-width", 2)
                                                .attr("stroke-dasharray", "5,5")
                                                .attr("fill", "white");

                                            grandmotherParentMotherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", -15)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "28px")
                                                .attr("font-weight", "300")
                                                .text("+");

                                            grandmotherParentMotherGroup
                                                .append("text")
                                                .attr("x", 0)
                                                .attr("y", 8)
                                                .attr("text-anchor", "middle")
                                                .attr("font-size", "11px")
                                                .attr("font-weight", "500")
                                                .text("Add mother");

                                            // Draw lines connecting "Add father" and "Add mother" buttons
                                            // Horizontal line connecting the two buttons
                                            const grandmotherButtonX1 =
                                                -greatGrandparentButtonWidth /
                                                    2 -
                                                greatGrandparentSpacing / 2;
                                            const grandmotherButtonX2 =
                                                greatGrandparentButtonWidth /
                                                    2 +
                                                greatGrandparentSpacing / 2;
                                            const grandmotherButtonY =
                                                -150 +
                                                greatGrandparentButtonHeight /
                                                    2; // Bottom of buttons

                                            grandmotherGroup
                                                .append("line")
                                                .attr("class", "parent-link")
                                                .attr("x1", grandmotherButtonX1)
                                                .attr("y1", grandmotherButtonY)
                                                .attr("x2", grandmotherButtonX2)
                                                .attr("y2", grandmotherButtonY)
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 1.5)
                                                .style(
                                                    "pointer-events",
                                                    "none"
                                                );

                                            // Vertical line from midpoint down to grandmother card
                                            const grandmotherButtonMidX =
                                                (grandmotherButtonX1 +
                                                    grandmotherButtonX2) /
                                                2;
                                            const grandmotherCardTopY =
                                                -grandparentCardHeight / 2; // Top of grandmother card

                                            grandmotherGroup
                                                .append("line")
                                                .attr("class", "parent-link")
                                                .attr(
                                                    "x1",
                                                    grandmotherButtonMidX
                                                )
                                                .attr("y1", grandmotherButtonY)
                                                .attr(
                                                    "x2",
                                                    grandmotherButtonMidX
                                                )
                                                .attr("y2", grandmotherCardTopY)
                                                .attr("stroke", "#999")
                                                .attr("stroke-width", 1.5)
                                                .style(
                                                    "pointer-events",
                                                    "none"
                                                );
                                        }
                                    }
                                }

                                // Draw lines connecting grandparents to mother card (matching parent-child pattern)
                                // Pattern: Horizontal line at bottom of grandparent cards -> Vertical down -> Connect to mother card
                                if (grandfather || grandmother) {
                                    const grandfatherX = grandfather
                                        ? -grandparentCardWidth / 2 -
                                          grandparentSpacing / 2
                                        : 0;
                                    const grandmotherX = grandmother
                                        ? grandparentCardWidth / 2 +
                                          grandparentSpacing / 2
                                        : grandfather
                                        ? -grandparentCardWidth / 2 -
                                          grandparentSpacing / 2
                                        : 0;
                                    const grandparentLineY =
                                        grandparentCardY +
                                        grandparentCardHeight / 2; // Bottom of grandparent cards
                                    const motherCardTopY = -cardHeight / 2; // Top of mother card

                                    if (grandfather && grandmother) {
                                        // Step 1: Horizontal line at bottom of grandparent cards
                                        motherGroup
                                            .append("line")
                                            .attr("class", "parent-link")
                                            .attr("x1", grandfatherX)
                                            .attr("y1", grandparentLineY)
                                            .attr("x2", grandmotherX)
                                            .attr("y2", grandparentLineY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");

                                        // Step 2: Vertical line from midpoint down to mother card
                                        const grandparentMidX =
                                            (grandfatherX + grandmotherX) / 2;
                                        motherGroup
                                            .append("line")
                                            .attr("class", "parent-link")
                                            .attr("x1", grandparentMidX)
                                            .attr("y1", grandparentLineY)
                                            .attr("x2", grandparentMidX)
                                            .attr("y2", motherCardTopY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");
                                    } else if (grandfather) {
                                        // Only grandfather - line from bottom of grandfather card to mother card
                                        motherGroup
                                            .append("line")
                                            .attr("class", "parent-link")
                                            .attr("x1", grandfatherX)
                                            .attr("y1", grandparentLineY)
                                            .attr("x2", 0)
                                            .attr("y2", motherCardTopY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");
                                    } else if (grandmother) {
                                        // Only grandmother - line from bottom of grandmother card to mother card
                                        motherGroup
                                            .append("line")
                                            .attr("class", "parent-link")
                                            .attr("x1", grandmotherX)
                                            .attr("y1", grandparentLineY)
                                            .attr("x2", 0)
                                            .attr("y2", motherCardTopY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");
                                    }
                                }
                            }

                            // Draw TWO straight horizontal lines between grandfather and grandmother in mother's branch when grandmother has partner (matching father's side)
                            // This must be AFTER all other lines are drawn so they appear on top
                            if (
                                grandmotherPartnersMother.length > 0 &&
                                grandfather &&
                                grandmother
                            ) {
                                console.log(
                                    "Drawing two lines between grandfather and grandmother in mother's branch. Partners:",
                                    grandmotherPartnersMother.length,
                                    "Grandfather:",
                                    grandfather.name || grandfather.first_name,
                                    "Grandmother:",
                                    grandmother.name || grandmother.first_name
                                );
                                // Use EXACT same positions as the actual cards are drawn
                                // motherGroup has transform: translate(cardWidth / 2 + spacing / 2 + 150, cardY)
                                const motherGroupXOffset =
                                    cardWidth / 2 + spacing / 2 + 150;

                                // Grandfather card is at: -grandparentCardWidth / 2 - grandparentSpacing / 2 (relative to motherGroup)
                                const grandfatherXMother =
                                    -grandparentCardWidth / 2 -
                                    grandparentSpacing / 2;
                                // Grandmother card is at: grandparentCardWidth / 2 + grandparentSpacing / 2 + 30 (relative to motherGroup)
                                const grandmotherXMother =
                                    grandparentCardWidth / 2 +
                                    grandparentSpacing / 2 +
                                    30;
                                const mainPersonNode = root
                                    .descendants()
                                    .find(
                                        (d) =>
                                            d.data.id === mainPersonId &&
                                            d.data.id !== "virtual-root"
                                    );
                                if (mainPersonNode) {
                                    // Calculate absolute positions: mainPersonNode position + motherGroup offset + card position
                                    const absoluteGrandfatherXMother =
                                        mainPersonNode.x +
                                        motherGroupXOffset +
                                        grandfatherXMother;
                                    const absoluteGrandmotherXMother =
                                        mainPersonNode.x +
                                        motherGroupXOffset +
                                        grandmotherXMother;
                                    const middleLineYMother =
                                        mainPersonNode.y +
                                        cardY +
                                        grandparentCardY; // Middle/center Y of cards

                                    // Separate the two lines with a small distance (4px apart) so they're visible as separate lines
                                    const lineSeparation = 4;

                                    // Make lines extend fully from grandfather card's right edge to grandmother card's left edge
                                    const lineStartXMother =
                                        absoluteGrandfatherXMother +
                                        grandparentCardWidth / 2; // Start at right edge of grandfather card
                                    const lineEndXMother =
                                        absoluteGrandmotherXMother -
                                        grandparentCardWidth / 2; // End at left edge of grandmother card

                                    console.log(
                                        "Line positions (mother's branch) - Start X:",
                                        lineStartXMother,
                                        "End X:",
                                        lineEndXMother,
                                        "Y:",
                                        middleLineYMother
                                    );

                                    // Draw first straight horizontal line between grandfather and grandmother (Line 1)
                                    const line1Mother = g
                                        .append("line")
                                        .attr(
                                            "class",
                                            "spouse-link grandparent-spouse-link-first mother-branch"
                                        )
                                        .attr("x1", lineStartXMother)
                                        .attr(
                                            "y1",
                                            middleLineYMother -
                                                lineSeparation / 2
                                        )
                                        .attr("x2", lineEndXMother)
                                        .attr(
                                            "y2",
                                            middleLineYMother -
                                                lineSeparation / 2
                                        )
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2)
                                        .style("pointer-events", "none")
                                        .raise();

                                    // Draw second straight horizontal line between grandfather and grandmother (Line 2)
                                    const line2Mother = g
                                        .append("line")
                                        .attr(
                                            "class",
                                            "spouse-link grandparent-spouse-link-second mother-branch"
                                        )
                                        .attr("x1", lineStartXMother)
                                        .attr(
                                            "y1",
                                            middleLineYMother +
                                                lineSeparation / 2
                                        )
                                        .attr("x2", lineEndXMother)
                                        .attr(
                                            "y2",
                                            middleLineYMother +
                                                lineSeparation / 2
                                        )
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2)
                                        .style("pointer-events", "none")
                                        .raise();

                                    console.log(
                                        "Two lines drawn between grandfather and grandmother in mother's branch - raised to top"
                                    );
                                } else {
                                    console.log(
                                        "Main person node not found for drawing grandfather-grandmother lines in mother's branch"
                                    );
                                }
                            }

                            // Only show "Add" buttons if mother has NO actual parents
                            // Don't check areAncestorsHidden - if parents exist but are hidden, they should be shown above
                            console.log("=== REACHED ADD BUTTONS CHECK ===");
                            console.log("Checking motherHasActualParents:", {
                                motherHasActualParents: motherHasActualParents,
                                motherParents: motherParents,
                                motherParentsLength: motherParents
                                    ? motherParents.length
                                    : 0,
                                willShowAddButtons: !motherHasActualParents,
                            });

                            if (!motherHasActualParents) {
                                console.log(
                                    "Mother has no actual parents - showing Add buttons"
                                );
                                // Add Father button (left) above mother card
                                const motherParentFatherGroup = motherGroup
                                    .append("g")
                                    .attr("class", "add-parent-button")
                                    .attr(
                                        "transform",
                                        `translate(${
                                            -parentButtonWidth / 2 -
                                            parentSpacing / 2
                                        }, ${motherParentButtonY - cardY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        addParentFromNode(mother, "father");
                                    });

                                motherParentFatherGroup
                                    .append("rect")
                                    .attr("width", parentButtonWidth)
                                    .attr("height", parentButtonHeight)
                                    .attr("x", -parentButtonWidth / 2)
                                    .attr("y", -parentButtonHeight / 2)
                                    .attr("rx", 8)
                                    .attr("stroke", "#ddd")
                                    .attr("stroke-width", 2)
                                    .attr("stroke-dasharray", "5,5")
                                    .attr("fill", "white");

                                motherParentFatherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", -15)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "28px")
                                    .attr("font-weight", "300")
                                    .text("+");

                                motherParentFatherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 8)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "11px")
                                    .attr("font-weight", "500")
                                    .text("Add father");

                                // Add Mother button (right) above mother card
                                const motherParentMotherGroup = motherGroup
                                    .append("g")
                                    .attr("class", "add-parent-button")
                                    .attr(
                                        "transform",
                                        `translate(${
                                            parentButtonWidth / 2 +
                                            parentSpacing / 2
                                        }, ${motherParentButtonY - cardY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        addParentFromNode(mother, "mother");
                                    });

                                motherParentMotherGroup
                                    .append("rect")
                                    .attr("width", parentButtonWidth)
                                    .attr("height", parentButtonHeight)
                                    .attr("x", -parentButtonWidth / 2)
                                    .attr("y", -parentButtonHeight / 2)
                                    .attr("rx", 8)
                                    .attr("stroke", "#ddd")
                                    .attr("stroke-width", 2)
                                    .attr("stroke-dasharray", "5,5")
                                    .attr("fill", "white");

                                motherParentMotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", -15)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "28px")
                                    .attr("font-weight", "300")
                                    .text("+");

                                motherParentMotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 8)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "11px")
                                    .attr("font-weight", "500")
                                    .text("Add mother");

                                // Add lines from top center of mother card, branching to parent buttons
                                // Horizontal line connecting the two buttons
                                const motherButtonX1 =
                                    -parentButtonWidth / 2 - parentSpacing / 2;
                                const motherButtonX2 =
                                    parentButtonWidth / 2 + parentSpacing / 2;
                                const motherButtonY =
                                    motherParentButtonY -
                                    cardY +
                                    parentButtonHeight / 2;

                                motherGroup
                                    .append("line")
                                    .attr("class", "parent-link")
                                    .attr("x1", motherButtonX1)
                                    .attr("y1", motherButtonY)
                                    .attr("x2", motherButtonX2)
                                    .attr("y2", motherButtonY)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 1.5)
                                    .style("pointer-events", "none");

                                // Vertical line from midpoint down to mother card
                                const motherButtonMidX =
                                    (motherButtonX1 + motherButtonX2) / 2;
                                const motherCardTopY = -cardHeight / 2; // Top of mother card

                                motherGroup
                                    .append("line")
                                    .attr("class", "parent-link")
                                    .attr("x1", motherButtonMidX)
                                    .attr("y1", motherButtonY)
                                    .attr("x2", motherButtonMidX)
                                    .attr("y2", motherCardTopY)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 1.5)
                                    .style("pointer-events", "none");
                            }

                            // Show "Add father" and "Add mother" buttons independently
                            // Add Father button (left) - show if grandfather doesn't exist (regardless of grandmother)
                            if (!grandfather) {
                                // If grandmother exists, position button at end of horizontal line (grandfather position)
                                // Otherwise, use standard button position
                                const grandfatherX =
                                    -grandparentCardWidth / 2 -
                                    grandparentSpacing / 2;
                                const lineY =
                                    grandparentCardY +
                                    grandparentCardHeight / 2;
                                const buttonX = grandmother
                                    ? grandfatherX
                                    : -parentButtonWidth / 2 -
                                      parentSpacing / 2;
                                const buttonY = grandmother
                                    ? lineY - parentButtonHeight / 2
                                    : motherParentButtonY - cardY;

                                const motherParentFatherGroup = motherGroup
                                    .append("g")
                                    .attr("class", "add-parent-button")
                                    .attr(
                                        "transform",
                                        `translate(${buttonX}, ${buttonY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        addParentFromNode(mother, "father");
                                    });

                                motherParentFatherGroup
                                    .append("rect")
                                    .attr("width", parentButtonWidth)
                                    .attr("height", parentButtonHeight)
                                    .attr("x", -parentButtonWidth / 2)
                                    .attr("y", -parentButtonHeight / 2)
                                    .attr("rx", 8)
                                    .attr("stroke", "#ddd")
                                    .attr("stroke-width", 2)
                                    .attr("stroke-dasharray", "5,5")
                                    .attr("fill", "white");

                                motherParentFatherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", -15)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "28px")
                                    .attr("font-weight", "300")
                                    .text("+");

                                motherParentFatherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 8)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "11px")
                                    .attr("font-weight", "500")
                                    .text("Add father");
                            }

                            // Add Mother button (right) - show if grandmother doesn't exist (regardless of grandfather)
                            if (!grandmother) {
                                // If grandfather exists, position button at end of horizontal line (grandmother position)
                                // Otherwise, use standard button position
                                const grandmotherX =
                                    grandparentCardWidth / 2 +
                                    grandparentSpacing / 2;
                                const lineY =
                                    grandparentCardY +
                                    grandparentCardHeight / 2;
                                const buttonX = grandfather
                                    ? grandmotherX
                                    : parentButtonWidth / 2 + parentSpacing / 2;
                                const buttonY = grandfather
                                    ? lineY - parentButtonHeight / 2
                                    : motherParentButtonY - cardY;

                                const motherParentMotherGroup = motherGroup
                                    .append("g")
                                    .attr("class", "add-parent-button")
                                    .attr(
                                        "transform",
                                        `translate(${buttonX}, ${buttonY})`
                                    )
                                    .on("click", function (event) {
                                        event.stopPropagation();
                                        addParentFromNode(mother, "mother");
                                    });

                                motherParentMotherGroup
                                    .append("rect")
                                    .attr("width", parentButtonWidth)
                                    .attr("height", parentButtonHeight)
                                    .attr("x", -parentButtonWidth / 2)
                                    .attr("y", -parentButtonHeight / 2)
                                    .attr("rx", 8)
                                    .attr("stroke", "#ddd")
                                    .attr("stroke-width", 2)
                                    .attr("stroke-dasharray", "5,5")
                                    .attr("fill", "white");

                                motherParentMotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", -15)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "28px")
                                    .attr("font-weight", "300")
                                    .text("+");

                                motherParentMotherGroup
                                    .append("text")
                                    .attr("x", 0)
                                    .attr("y", 8)
                                    .attr("text-anchor", "middle")
                                    .attr("font-size", "11px")
                                    .attr("font-weight", "500")
                                    .text("Add mother");
                            }

                            // Add lines from top center of mother card, branching to parent buttons (when both buttons are shown)
                            // This matches the father's side logic exactly
                            if (!grandfather && !grandmother) {
                                const motherParentBranchY =
                                    motherParentButtonY -
                                    cardY +
                                    parentButtonHeight / 2 +
                                    10;
                                motherGroup
                                    .append("line")
                                    .attr("class", "add-parent-line")
                                    .attr("x1", 0)
                                    .attr("y1", -cardHeight / 2)
                                    .attr("x2", 0)
                                    .attr("y2", motherParentBranchY);

                                motherGroup
                                    .append("line")
                                    .attr("class", "add-parent-line")
                                    .attr(
                                        "x1",
                                        -parentButtonWidth / 2 -
                                            parentSpacing / 2
                                    )
                                    .attr("y1", motherParentBranchY)
                                    .attr(
                                        "x2",
                                        parentButtonWidth / 2 +
                                            parentSpacing / 2
                                    )
                                    .attr("y2", motherParentBranchY);

                                motherGroup
                                    .append("line")
                                    .attr("class", "add-parent-line")
                                    .attr(
                                        "x1",
                                        -parentButtonWidth / 2 -
                                            parentSpacing / 2
                                    )
                                    .attr("y1", motherParentBranchY)
                                    .attr(
                                        "x2",
                                        -parentButtonWidth / 2 -
                                            parentSpacing / 2
                                    )
                                    .attr(
                                        "y2",
                                        motherParentButtonY -
                                            cardY +
                                            parentButtonHeight / 2
                                    );

                                motherGroup
                                    .append("line")
                                    .attr("class", "add-parent-line")
                                    .attr(
                                        "x1",
                                        parentButtonWidth / 2 +
                                            parentSpacing / 2
                                    )
                                    .attr("y1", motherParentBranchY)
                                    .attr(
                                        "x2",
                                        parentButtonWidth / 2 +
                                            parentSpacing / 2
                                    )
                                    .attr(
                                        "y2",
                                        motherParentButtonY -
                                            cardY +
                                            parentButtonHeight / 2
                                    );
                            }

                            // Draw lines connecting parent cards/"Add" buttons to mother card
                            // Handle all cases: both parents exist, one exists, neither exists
                            // Mother card is centered at (0, 0) in motherGroup, so top is at -cardHeight/2
                            const motherCardTopY = -cardHeight / 2;

                            // Case 1: Both parent cards exist
                            if (grandfather && grandmother) {
                                const grandfatherX =
                                    -grandparentCardWidth / 2 -
                                    grandparentSpacing / 2;
                                const grandmotherX =
                                    grandparentCardWidth / 2 +
                                    grandparentSpacing / 2;
                                // Position horizontal line at the bottom center of parent cards
                                // grandparentCardY is relative to motherGroup (which is at cardY)
                                // grandparentCardY = (cardY - 150) - cardY = -150
                                // So bottom of parent cards = -150 + 45 = -105
                                const lineY =
                                    grandparentCardY +
                                    grandparentCardHeight / 2;

                                // Draw horizontal line connecting both cards at their bottom
                                motherGroup
                                    .append("line")
                                    .attr("class", "parent-link")
                                    .attr("x1", grandfatherX)
                                    .attr("y1", lineY)
                                    .attr("x2", grandmotherX)
                                    .attr("y2", lineY)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 2)
                                    .style("pointer-events", "none");

                                // Draw vertical line from exact midpoint of horizontal line down to mother card top
                                const midX = (grandfatherX + grandmotherX) / 2;
                                // Line goes from y=-105 (lineY) to y=-45 (motherCardTopY)
                                // Extend line into the card to ensure it's visible and connects
                                const lineEndY = motherCardTopY + 5; // Extend 5px into the card
                                motherGroup
                                    .append("line")
                                    .attr("class", "parent-link")
                                    .attr("x1", midX)
                                    .attr("y1", lineY)
                                    .attr("x2", midX)
                                    .attr("y2", lineEndY)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 2)
                                    .style("pointer-events", "none")
                                    .style("z-index", "10");
                            }
                            // Case 2: Only grandfather card exists, "Add mother" button shown
                            else if (grandfather && !grandmother) {
                                const grandfatherX =
                                    -grandparentCardWidth / 2 -
                                    grandparentSpacing / 2;
                                // Use the same horizontal line Y position as Case 1 (bottom of parent cards)
                                const lineY =
                                    grandparentCardY +
                                    grandparentCardHeight / 2;
                                // Button is positioned at grandmother position (end of horizontal line)
                                const grandmotherX =
                                    grandparentCardWidth / 2 +
                                    grandparentSpacing / 2;

                                // Draw horizontal line from grandfather card to "Add mother" button
                                // Button is already positioned at grandmotherX, lineY
                                motherGroup
                                    .append("line")
                                    .attr("class", "parent-link")
                                    .attr("x1", grandfatherX)
                                    .attr("y1", lineY)
                                    .attr("x2", grandmotherX)
                                    .attr("y2", lineY)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 2)
                                    .style("pointer-events", "none");

                                // Draw vertical line from midpoint of horizontal line down to mother card top
                                const midX = (grandfatherX + grandmotherX) / 2;
                                // Extend line into the card to ensure it's visible and connects
                                const lineEndY = motherCardTopY + 5; // Extend 5px into the card
                                motherGroup
                                    .append("line")
                                    .attr("class", "parent-link")
                                    .attr("x1", midX)
                                    .attr("y1", lineY)
                                    .attr("x2", midX)
                                    .attr("y2", lineEndY)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 2)
                                    .style("pointer-events", "none")
                                    .style("z-index", "10");
                            }
                            // Case 3: Only grandmother card exists, "Add father" button shown
                            else if (!grandfather && grandmother) {
                                const grandmotherX =
                                    grandparentCardWidth / 2 +
                                    grandparentSpacing / 2;
                                // Use the same horizontal line Y position as Case 1 (bottom of parent cards)
                                const lineY =
                                    grandparentCardY +
                                    grandparentCardHeight / 2;
                                // Button is positioned at grandfather position (end of horizontal line)
                                const grandfatherX =
                                    -grandparentCardWidth / 2 -
                                    grandparentSpacing / 2;

                                // Draw horizontal line from "Add father" button to grandmother card
                                // Button is already positioned at grandfatherX, lineY
                                motherGroup
                                    .append("line")
                                    .attr("class", "parent-link")
                                    .attr("x1", grandfatherX)
                                    .attr("y1", lineY)
                                    .attr("x2", grandmotherX)
                                    .attr("y2", lineY)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 2)
                                    .style("pointer-events", "none");

                                // Draw vertical line from midpoint of horizontal line down to mother card top
                                const midX = (grandfatherX + grandmotherX) / 2;
                                // Extend line into the card to ensure it's visible and connects
                                const lineEndY = motherCardTopY + 5; // Extend 5px into the card
                                motherGroup
                                    .append("line")
                                    .attr("class", "parent-link")
                                    .attr("x1", midX)
                                    .attr("y1", lineY)
                                    .attr("x2", midX)
                                    .attr("y2", lineEndY)
                                    .attr("stroke", "#999")
                                    .attr("stroke-width", 2)
                                    .style("pointer-events", "none")
                                    .style("z-index", "10");
                            }
                            // Case 4: Neither exists - lines are already drawn above for both buttons
                        } else {
                            // Mother has no parents in data - show "Add father" and "Add mother" buttons
                            console.log(
                                "Mother has no parents in data - showing Add buttons"
                            );
                            // PERMANENT STANDARD: All Add Father/Add Mother buttons use these values
                            const parentButtonWidth = 140; // Standardized button width for all generations
                            const parentButtonHeight = 90; // Standardized button height for all generations
                            const parentSpacing = 30; // Standardized button spacing for all generations
                            const motherParentButtonY = cardY - 150; // Position above mother card

                            // Add Father button (left) above mother card
                            const motherParentFatherGroup = motherGroup
                                .append("g")
                                .attr("class", "add-parent-button")
                                .attr(
                                    "transform",
                                    `translate(${
                                        -parentButtonWidth / 2 -
                                        parentSpacing / 2
                                    }, ${motherParentButtonY - cardY})`
                                )
                                .on("click", function (event) {
                                    event.stopPropagation();
                                    addParentFromNode(mother, "father");
                                });

                            motherParentFatherGroup
                                .append("rect")
                                .attr("width", parentButtonWidth)
                                .attr("height", parentButtonHeight)
                                .attr("x", -parentButtonWidth / 2)
                                .attr("y", -parentButtonHeight / 2)
                                .attr("rx", 8)
                                .attr("stroke", "#ddd")
                                .attr("stroke-width", 2)
                                .attr("stroke-dasharray", "5,5")
                                .attr("fill", "white");

                            motherParentFatherGroup
                                .append("text")
                                .attr("x", 0)
                                .attr("y", -15)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "28px")
                                .attr("font-weight", "300")
                                .text("+");

                            motherParentFatherGroup
                                .append("text")
                                .attr("x", 0)
                                .attr("y", 8)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "11px")
                                .attr("font-weight", "500")
                                .text("Add father");

                            // Add Mother button (right) above mother card
                            const motherParentMotherGroup = motherGroup
                                .append("g")
                                .attr("class", "add-parent-button")
                                .attr(
                                    "transform",
                                    `translate(${
                                        parentButtonWidth / 2 +
                                        parentSpacing / 2
                                    }, ${motherParentButtonY - cardY})`
                                )
                                .on("click", function (event) {
                                    event.stopPropagation();
                                    addParentFromNode(mother, "mother");
                                });

                            motherParentMotherGroup
                                .append("rect")
                                .attr("width", parentButtonWidth)
                                .attr("height", parentButtonHeight)
                                .attr("x", -parentButtonWidth / 2)
                                .attr("y", -parentButtonHeight / 2)
                                .attr("rx", 8)
                                .attr("stroke", "#ddd")
                                .attr("stroke-width", 2)
                                .attr("stroke-dasharray", "5,5")
                                .attr("fill", "white");

                            motherParentMotherGroup
                                .append("text")
                                .attr("x", 0)
                                .attr("y", -15)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "28px")
                                .attr("font-weight", "300")
                                .text("+");

                            motherParentMotherGroup
                                .append("text")
                                .attr("x", 0)
                                .attr("y", 8)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "11px")
                                .attr("font-weight", "500")
                                .text("Add mother");

                            // Add lines from top center of mother card, branching to parent buttons
                            // Horizontal line connecting the two buttons
                            const motherButtonX1 =
                                -parentButtonWidth / 2 - parentSpacing / 2;
                            const motherButtonX2 =
                                parentButtonWidth / 2 + parentSpacing / 2;
                            const motherButtonY =
                                motherParentButtonY -
                                cardY +
                                parentButtonHeight / 2;

                            motherGroup
                                .append("line")
                                .attr("class", "parent-link")
                                .attr("x1", motherButtonX1)
                                .attr("y1", motherButtonY)
                                .attr("x2", motherButtonX2)
                                .attr("y2", motherButtonY)
                                .attr("stroke", "#999")
                                .attr("stroke-width", 1.5)
                                .style("pointer-events", "none");

                            // Vertical line from midpoint down to mother card
                            const motherButtonMidX =
                                (motherButtonX1 + motherButtonX2) / 2;
                            const motherCardTopY = -cardHeight / 2; // Top of mother card

                            motherGroup
                                .append("line")
                                .attr("class", "parent-link")
                                .attr("x1", motherButtonMidX)
                                .attr("y1", motherButtonY)
                                .attr("x2", motherButtonMidX)
                                .attr("y2", motherCardTopY)
                                .attr("stroke", "#999")
                                .attr("stroke-width", 1.5)
                                .style("pointer-events", "none");

                            // Vertical lines from horizontal line up to each button
                            motherGroup
                                .append("line")
                                .attr("class", "parent-link")
                                .attr("x1", motherButtonX1)
                                .attr("y1", motherButtonY)
                                .attr("x2", motherButtonX1)
                                .attr(
                                    "y2",
                                    motherParentButtonY -
                                        cardY +
                                        parentButtonHeight / 2
                                )
                                .attr("stroke", "#999")
                                .attr("stroke-width", 1.5)
                                .style("pointer-events", "none");

                            motherGroup
                                .append("line")
                                .attr("class", "parent-link")
                                .attr("x1", motherButtonX2)
                                .attr("y1", motherButtonY)
                                .attr("x2", motherButtonX2)
                                .attr(
                                    "y2",
                                    motherParentButtonY -
                                        cardY +
                                        parentButtonHeight / 2
                                )
                                .attr("stroke", "#999")
                                .attr("stroke-width", 1.5)
                                .style("pointer-events", "none");
                        }
                    }

                    // Add lines from parent cards down to ALL children (matching MyHeritage)
                    // Pattern: Horizontal line between parents -> Vertical down -> Horizontal at child level -> Vertical to each child
                    if (father || mother) {
                        // Get main person node for position calculations
                        const mainPersonNodeForLinks = root
                            .descendants()
                            .find(
                                (d) =>
                                    d.data.id === mainPersonId &&
                                    d.data.id !== "virtual-root"
                            );

                        if (mainPersonNodeForLinks) {
                            // Find ALL children of these parents (main person + all siblings)
                            // Method 1: Get main person's siblings (more reliable)
                            const mainPersonData = treeData.find(
                                (p) => p.id === mainPersonId
                            );
                            const allChildren = [];

                            // Always include the main person
                            if (mainPersonData) {
                                allChildren.push(mainPersonData);
                            }

                            // Add all siblings (explicit and implicit)
                            if (mainPersonData) {
                                // Get explicit siblings
                                if (
                                    mainPersonData.siblings &&
                                    mainPersonData.siblings.length > 0
                                ) {
                                    mainPersonData.siblings.forEach(
                                        (siblingId) => {
                                            const sibling = treeData.find(
                                                (p) => p.id === siblingId
                                            );
                                            if (
                                                sibling &&
                                                !allChildren.find(
                                                    (c) => c.id === sibling.id
                                                )
                                            ) {
                                                allChildren.push(sibling);
                                            }
                                        }
                                    );
                                }

                                // Get implicit siblings (people who share the same parents)
                                if (
                                    mainPersonData.parents &&
                                    mainPersonData.parents.length > 0
                                ) {
                                    treeData.forEach((p) => {
                                        if (p.id === mainPersonId) return; // Skip main person
                                        if (
                                            allChildren.find(
                                                (c) => c.id === p.id
                                            )
                                        )
                                            return; // Already added

                                        // Check if they share at least one parent
                                        if (p.parents && p.parents.length > 0) {
                                            const sharesParent =
                                                mainPersonData.parents.some(
                                                    (pid) =>
                                                        p.parents.includes(pid)
                                                );
                                            if (sharesParent) {
                                                allChildren.push(p);
                                            }
                                        }
                                    });
                                }
                            }

                            console.log("=== PARENT-CHILD LINK DEBUG ===");
                            console.log("Main person ID:", mainPersonId);
                            console.log(
                                "Main person parents:",
                                mainPersonData ? mainPersonData.parents : "none"
                            );
                            console.log(
                                "All children found:",
                                allChildren.map(
                                    (c) =>
                                        `${c.name || c.first_name} (ID: ${
                                            c.id
                                        }, parents: ${c.parents || []})`
                                )
                            );

                            // Filter out partners of children - they should not appear as children
                            // Partners are shown next to their respective children, not as separate children
                            const filteredChildren = allChildren.filter(
                                (child) => {
                                    // Check if this person is a partner/spouse of any other child
                                    const isPartnerOfChild = allChildren.some(
                                        (otherChild) => {
                                            if (otherChild.id === child.id)
                                                return false; // Skip self
                                            if (
                                                otherChild.spouses &&
                                                otherChild.spouses.includes(
                                                    child.id
                                                )
                                            ) {
                                                return true; // This person is a partner of another child
                                            }
                                            return false;
                                        }
                                    );

                                    // Also check if this person is a partner of anyone in the tree
                                    const isPartnerOfAnyone = treeData.some(
                                        (person) => {
                                            return (
                                                person.spouses &&
                                                person.spouses.includes(
                                                    child.id
                                                )
                                            );
                                        }
                                    );

                                    if (
                                        isPartnerOfChild ||
                                        (isPartnerOfAnyone && !child.parents) ||
                                        child.parents.length === 0
                                    ) {
                                        console.log(
                                            `Excluding partner from children: ${
                                                child.name || child.first_name
                                            } (ID: ${child.id}) - is partner`
                                        );
                                        return false; // Exclude this partner
                                    }
                                    return true; // Keep this child
                                }
                            );

                            console.log(
                                "Filtered children (after removing partners):",
                                filteredChildren.map(
                                    (c) =>
                                        `${c.name || c.first_name} (ID: ${
                                            c.id
                                        }, parents: ${c.parents || []})`
                                )
                            );

                            // Get positions of all children from tree (use filtered children, excluding partners)
                            const childNodes = filteredChildren
                                .map((child) => {
                                    const childNode = root
                                        .descendants()
                                        .find(
                                            (d) =>
                                                d.data.id === child.id &&
                                                d.data.id !== "virtual-root"
                                        );
                                    if (!childNode) {
                                        console.warn(
                                            "Child node not found in tree:",
                                            child.name || child.first_name,
                                            "ID:",
                                            child.id
                                        );
                                    }
                                    return childNode
                                        ? {
                                              data: child,
                                              x: childNode.x,
                                              y: childNode.y,
                                          }
                                        : null;
                                })
                                .filter((c) => c !== null);

                            console.log(
                                "Child nodes with positions:",
                                childNodes.map(
                                    (c) =>
                                        `${
                                            c.data.name || c.data.first_name
                                        } at (${c.x}, ${c.y})`
                                )
                            );
                            console.log(
                                "Main person node position:",
                                mainPersonNodeForLinks.x,
                                mainPersonNodeForLinks.y
                            );

                            if (childNodes.length > 0) {
                                // Step 1: Draw horizontal line connecting father and mother cards (at bottom-center of cards)
                                // MyHeritage style: Always draw horizontal line if father exists (even if no mother, show "Add mother" button)
                                const fatherX = father
                                    ? -cardWidth / 2 - spacing / 2 - 100 // Moved 100px to the left to keep midpoint centered
                                    : 0;
                                const motherX = mother
                                    ? cardWidth / 2 + spacing / 2 + 100 // Moved 100px to the right
                                    : father
                                    ? cardWidth / 2 + spacing / 2 // Position for "Add mother" button
                                    : 0;
                                // Bottom-center of parent cards (cardY is center, so bottom is cardY + cardHeight/2)
                                const parentLineY = cardY + cardHeight / 2;

                                console.log("Drawing parent-child links:", {
                                    father: father
                                        ? father.name || father.first_name
                                        : "none",
                                    mother: mother
                                        ? mother.name || mother.first_name
                                        : "none",
                                    fatherX,
                                    motherX,
                                    parentLineY,
                                    cardY,
                                    cardHeight,
                                });

                                // Draw horizontal line between father and mother (or "Add mother" position) - MyHeritage style
                                // Line connects bottom-center of father card to bottom-center of mother/"Add mother" button
                                if (father) {
                                    node.append("line")
                                        .attr("class", "parent-child-link")
                                        .attr("x1", fatherX)
                                        .attr("y1", parentLineY)
                                        .attr("x2", motherX)
                                        .attr("y2", parentLineY)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1.5)
                                        .style("pointer-events", "none");

                                    console.log(
                                        "Drew horizontal line from",
                                        fatherX,
                                        "to",
                                        motherX,
                                        "at Y:",
                                        parentLineY
                                    );
                                }

                                // Step 2: Calculate midpoint of horizontal line and draw vertical line down to child
                                const parentMidX = (fatherX + motherX) / 2;
                                const parentMidY = parentLineY;

                                // Calculate child positions relative to main person node
                                const childPositions = childNodes.map(
                                    (child) => ({
                                        data: child.data,
                                        x: child.x - mainPersonNodeForLinks.x, // Relative X
                                        y: child.y - mainPersonNodeForLinks.y, // Relative Y
                                    })
                                );

                                // Calculate Y positions
                                // Child nodes are at Y=0 relative to main person (they're siblings at same level)
                                // Top of child cards is at Y = -40 (40px above center, since card height is 80px)
                                const childCardTopY = -40; // Top of child cards

                                // MyHeritage style: For single child, draw straight vertical line from parent midpoint down, then horizontal to child
                                // For multiple children, use the horizontal line pattern
                                if (childNodes.length === 1) {
                                    // Single child - draw straight vertical line from parent midpoint down, then horizontal to child
                                    const childX = childPositions[0].x;
                                    const childLevelY = -70; // Horizontal line Y position (same as multiple children)

                                    console.log(
                                        "Drawing straight vertical line from parent midpoint (",
                                        parentMidX,
                                        ",",
                                        parentMidY,
                                        ") down to child level (",
                                        parentMidX,
                                        ",",
                                        childLevelY,
                                        "), then horizontal to child (",
                                        childX,
                                        ",",
                                        childCardTopY,
                                        ")"
                                    );

                                    // Draw vertical line from parent midpoint straight down to child level
                                    node.append("line")
                                        .attr("class", "parent-child-link")
                                        .attr("x1", parentMidX)
                                        .attr("y1", parentMidY)
                                        .attr("x2", parentMidX)
                                        .attr("y2", childLevelY)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1.5)
                                        .style("pointer-events", "none");

                                    // Draw horizontal line from vertical line to child
                                    node.append("line")
                                        .attr("class", "parent-child-link")
                                        .attr("x1", parentMidX)
                                        .attr("y1", childLevelY)
                                        .attr("x2", childX)
                                        .attr("y2", childLevelY)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1.5)
                                        .style("pointer-events", "none");

                                    // Draw vertical line from horizontal line down to child top
                                    node.append("line")
                                        .attr("class", "parent-child-link")
                                        .attr("x1", childX)
                                        .attr("y1", childLevelY)
                                        .attr("x2", childX)
                                        .attr("y2", childCardTopY)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 1.5)
                                        .style("pointer-events", "none");
                                } else {
                                    // Multiple children - use horizontal line pattern
                                    const childLevelY = -70; // Horizontal line Y position (slightly above child cards)

                                    // Draw vertical line from parent midpoint down to child level
                                    node.append("line")
                                        .attr("class", "parent-child-link")
                                        .attr("x1", parentMidX)
                                        .attr("y1", parentMidY)
                                        .attr("x2", parentMidX)
                                        .attr("y2", childLevelY)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2)
                                        .style("pointer-events", "none");

                                    // Draw horizontal line at child level connecting ALL children
                                    const minChildX = Math.min(
                                        ...childPositions.map((c) => c.x)
                                    );
                                    const maxChildX = Math.max(
                                        ...childPositions.map((c) => c.x)
                                    );

                                    node.append("line")
                                        .attr("class", "parent-child-link")
                                        .attr("x1", minChildX)
                                        .attr("y1", childLevelY)
                                        .attr("x2", maxChildX)
                                        .attr("y2", childLevelY)
                                        .attr("stroke", "#999")
                                        .attr("stroke-width", 2)
                                        .style("pointer-events", "none");

                                    // Draw vertical lines from horizontal line down to EACH child
                                    childPositions.forEach((child) => {
                                        node.append("line")
                                            .attr("class", "parent-child-link")
                                            .attr("x1", child.x)
                                            .attr("y1", childLevelY)
                                            .attr("x2", child.x)
                                            .attr("y2", childCardTopY)
                                            .attr("stroke", "#999")
                                            .attr("stroke-width", 2)
                                            .style("pointer-events", "none");
                                    });
                                }
                                console.log(
                                    "=== END PARENT-CHILD LINK DEBUG ==="
                                );
                            }
                        }
                    }
                } else {
                    // Show "Add Father" and "Add Mother" buttons if no parents exist
                    // BUT only if ancestors are NOT hidden (if hidden, don't show buttons)
                    // AND hide when father's partner branch is toggled
                    const areMainPersonAncestorsHidden = areAncestorsHidden(
                        d.data.id
                    );

                    if (
                        !areMainPersonAncestorsHidden &&
                        !window.fatherPartnerBranchToggled
                    ) {
                        const buttonY = -150;
                        const buttonWidth = 90;
                        const buttonHeight = 60;
                        const spacing = 100; // Spacing between buttons (matching parent cards spacing)

                        // Add Father button (left)
                        const fatherGroup = node
                            .append("g")
                            .attr("class", "add-parent-button")
                            .attr(
                                "transform",
                                `translate(${
                                    -buttonWidth / 2 - 25
                                }, ${buttonY})`
                            )
                            .on("click", function (event) {
                                event.stopPropagation();
                                addParentFromNode(d.data, "father");
                            });

                        fatherGroup
                            .append("rect")
                            .attr("width", buttonWidth)
                            .attr("height", buttonHeight)
                            .attr("x", -buttonWidth / 2)
                            .attr("y", -buttonHeight / 2)
                            .attr("rx", 8);

                        fatherGroup
                            .append("text")
                            .attr("x", 0)
                            .attr("y", -15)
                            .attr("text-anchor", "middle")
                            .attr("font-size", "28px")
                            .attr("font-weight", "300")
                            .text("+");

                        fatherGroup
                            .append("text")
                            .attr("x", 0)
                            .attr("y", 8)
                            .attr("text-anchor", "middle")
                            .attr("font-size", "11px")
                            .attr("font-weight", "500")
                            .text("Add father");

                        // Add Mother button (right)
                        const motherGroup = node
                            .append("g")
                            .attr("class", "add-parent-button")
                            .attr(
                                "transform",
                                `translate(${buttonWidth / 2 + 25}, ${buttonY})`
                            )
                            .on("click", function (event) {
                                event.stopPropagation();
                                addParentFromNode(d.data, "mother");
                            });

                        motherGroup
                            .append("rect")
                            .attr("width", buttonWidth)
                            .attr("height", buttonHeight)
                            .attr("x", -buttonWidth / 2)
                            .attr("y", -buttonHeight / 2)
                            .attr("rx", 8);

                        motherGroup
                            .append("text")
                            .attr("x", 0)
                            .attr("y", -15)
                            .attr("text-anchor", "middle")
                            .attr("font-size", "28px")
                            .attr("font-weight", "300")
                            .text("+");

                        motherGroup
                            .append("text")
                            .attr("x", 0)
                            .attr("y", 8)
                            .attr("text-anchor", "middle")
                            .attr("font-size", "11px")
                            .attr("font-weight", "500")
                            .text("Add mother");

                        // Add lines from top center of person card, branching to parent buttons
                        const branchY = buttonY + buttonHeight / 2 + 10;
                        node.append("line")
                            .attr("class", "add-parent-line")
                            .attr("x1", 0)
                            .attr("y1", -40)
                            .attr("x2", 0)
                            .attr("y2", branchY);

                        node.append("line")
                            .attr("class", "add-parent-line")
                            .attr("x1", -buttonWidth / 2 - 25)
                            .attr("y1", branchY)
                            .attr("x2", buttonWidth / 2 + 25)
                            .attr("y2", branchY);

                        node.append("line")
                            .attr("class", "add-parent-line")
                            .attr("x1", -buttonWidth / 2 - 25)
                            .attr("y1", branchY)
                            .attr("x2", -buttonWidth / 2 - 25)
                            .attr("y2", buttonY + buttonHeight / 2);

                        node.append("line")
                            .attr("class", "add-parent-line")
                            .attr("x1", buttonWidth / 2 + 25)
                            .attr("y1", branchY)
                            .attr("x2", buttonWidth / 2 + 25)
                            .attr("y2", buttonY + buttonHeight / 2);
                    }
                }
            }
        });

        // Add edit icon (pencil, right side)
        nodes
            .append("circle")
            .attr("cx", 50)
            .attr("cy", 28)
            .attr("r", 8)
            .attr("fill", "white")
            .attr("stroke", "#999")
            .attr("stroke-width", 1)
            .style("cursor", "pointer")
            .on("click", function (event, d) {
                event.stopPropagation();
                window.location.href = `https://familytree.hexafume.com/family-tree/${d.data.id}/edit`;
            });
        nodes
            .append("text")
            .attr("class", "edit-icon")
            .attr("x", 50)
            .attr("y", 31)
            .attr("text-anchor", "middle")
            .attr("font-size", "12px")
            .text("✎")
            .style("cursor", "pointer")
            .on("click", function (event, d) {
                event.stopPropagation();
                window.location.href = `https://familytree.hexafume.com/family-tree/${d.data.id}/edit`;
            });

        // Add delete icon (trash, left side)
        nodes
            .append("circle")
            .attr("cx", -50)
            .attr("cy", 28)
            .attr("r", 8)
            .attr("fill", "white")
            .attr("stroke", "#dc3545")
            .attr("stroke-width", 1)
            .style("cursor", "pointer")
            .on("click", function (event, d) {
                event.stopPropagation();
                deletePerson(d.data.id, d.data.name || d.data.first_name);
            });
        nodes
            .append("text")
            .attr("class", "delete-icon")
            .attr("x", -50)
            .attr("y", 31)
            .attr("text-anchor", "middle")
            .attr("font-size", "12px")
            .attr("fill", "#dc3545")
            .text("🗑")
            .style("cursor", "pointer")
            .on("click", function (event, d) {
                event.stopPropagation();
                deletePerson(d.data.id, d.data.name || d.data.first_name);
            });
    }

    function centerTree() {
        if (!root) return;
        const bounds = g.node().getBBox();
        const fullWidth = width;
        const fullHeight = height;
        const widthScale = (fullWidth - 300) / bounds.width;
        const heightScale = (fullHeight - 100) / bounds.height;
        const scale = Math.min(widthScale, heightScale, 1);
        const translate = [
            (fullWidth - bounds.width * scale) / 2 - bounds.x * scale,
            (fullHeight - bounds.height * scale) / 2 - bounds.y * scale,
        ];
        const transform = d3.zoomIdentity
            .translate(translate[0], translate[1])
            .scale(scale);

        svg.transition().duration(750).call(zoom.transform, transform);

        // Save the centered transform to localStorage
        saveZoomStateToStorage(transform);
    }

    function zoomIn() {
        svg.transition().duration(300).call(zoom.scaleBy, 1.2);
    }

    function zoomOut() {
        svg.transition().duration(300).call(zoom.scaleBy, 0.8);
    }

    function toggleFullscreen() {
        const treeContainer = document.getElementById("tree-container");
        const fullscreenIcon = document.getElementById("fullscreen-icon");

        if (!treeContainer) return;

        if (
            !document.fullscreenElement &&
            !document.webkitFullscreenElement &&
            !document.mozFullScreenElement &&
            !document.msFullscreenElement
        ) {
            // Enter fullscreen
            if (treeContainer.requestFullscreen) {
                treeContainer.requestFullscreen();
            } else if (treeContainer.webkitRequestFullscreen) {
                treeContainer.webkitRequestFullscreen();
            } else if (treeContainer.mozRequestFullScreen) {
                treeContainer.mozRequestFullScreen();
            } else if (treeContainer.msRequestFullscreen) {
                treeContainer.msRequestFullscreen();
            }

            // Change icon to exit fullscreen
            if (fullscreenIcon) {
                fullscreenIcon.classList.remove("bi-fullscreen");
                fullscreenIcon.classList.add("bi-fullscreen-exit");
            }
        } else {
            // Exit fullscreen
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }

            // Change icon back to fullscreen
            if (fullscreenIcon) {
                fullscreenIcon.classList.remove("bi-fullscreen-exit");
                fullscreenIcon.classList.add("bi-fullscreen");
            }
        }
    }

    // Listen for fullscreen changes to update icon
    document.addEventListener("fullscreenchange", updateFullscreenIcon);
    document.addEventListener("webkitfullscreenchange", updateFullscreenIcon);
    document.addEventListener("mozfullscreenchange", updateFullscreenIcon);
    document.addEventListener("MSFullscreenChange", updateFullscreenIcon);

    function updateFullscreenIcon() {
        const fullscreenIcon = document.getElementById("fullscreen-icon");
        if (!fullscreenIcon) return;

        const isFullscreen = !!(
            document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement
        );

        if (isFullscreen) {
            fullscreenIcon.classList.remove("bi-fullscreen");
            fullscreenIcon.classList.add("bi-fullscreen-exit");
        } else {
            fullscreenIcon.classList.remove("bi-fullscreen-exit");
            fullscreenIcon.classList.add("bi-fullscreen");
        }
    }

    function searchTree() {
        const searchInput = document.getElementById("search-input");
        const dropdown = document.getElementById("search-dropdown");
        if (!searchInput) return;

        const searchTerm = searchInput.value.toLowerCase().trim();

        // Clear dropdown if search is empty
        if (searchTerm === "") {
            if (dropdown) {
                dropdown.innerHTML = "";
                dropdown.classList.remove("show");
            }
            // Reset tree visibility
            resetTreeVisibility();
            return;
        }

        // Search through treeData to find matching people for dropdown
        if (treeData && treeData.length > 0) {
            const matches = treeData.filter((person) => {
                if (!person) return false;
                const firstName = (
                    person.first_name ||
                    person.name ||
                    ""
                ).toLowerCase();
                const lastName = (person.last_name || "").toLowerCase();
                const fullName = (firstName + " " + lastName).trim();

                return (
                    firstName.includes(searchTerm) ||
                    lastName.includes(searchTerm) ||
                    fullName.includes(searchTerm)
                );
            });

            // Populate dropdown with results
            if (dropdown) {
                dropdown.innerHTML = "";

                if (matches.length === 0) {
                    dropdown.innerHTML =
                        '<div class="search-no-results">No results found</div>';
                    dropdown.classList.add("show");
                } else {
                    // Limit to 10 results for performance
                    const displayMatches = matches.slice(0, 10);

                    displayMatches.forEach((person) => {
                        const item = document.createElement("div");
                        item.className = "search-result-item";
                        item.onmousedown = function (e) {
                            e.preventDefault(); // Prevent input blur
                        };
                        item.onclick = function () {
                            selectPersonFromSearch(person);
                        };

                        const avatar = document.createElement("div");
                        avatar.className = "search-result-avatar";

                        if (person.photo) {
                            const img = document.createElement("img");
                            img.src = `https://familytree.hexafume.com/storage/${person.photo}`;
                            img.alt = person.name || person.first_name;
                            avatar.appendChild(img);
                        } else {
                            const icon = document.createElement("i");
                            icon.className =
                                person.gender === "female"
                                    ? "bi bi-person-fill"
                                    : "bi bi-person-fill";
                            avatar.appendChild(icon);
                        }

                        const info = document.createElement("div");
                        info.className = "search-result-info";

                        const name = document.createElement("div");
                        name.className = "search-result-name";
                        name.textContent =
                            person.name || person.first_name || "Unknown";

                        info.appendChild(name);

                        item.appendChild(avatar);
                        item.appendChild(info);
                        dropdown.appendChild(item);
                    });

                    dropdown.classList.add("show");
                }
            }
        } else if (dropdown) {
            dropdown.innerHTML =
                '<div class="search-no-results">No data available</div>';
            dropdown.classList.add("show");
        }

        // Also filter tree visualization
        filterTreeBySearch(searchTerm);
    }

    function selectPersonFromSearch(person) {
        if (!person || !person.id) return;

        // Close dropdown
        const dropdown = document.getElementById("search-dropdown");
        if (dropdown) {
            dropdown.classList.remove("show");
        }

        // Clear search input
        const searchInput = document.getElementById("search-input");
        if (searchInput) {
            searchInput.value = "";
        }

        // Reset tree visibility first
        resetTreeVisibility();

        // Find the person in the tree and navigate to them
        if (g && svg) {
            const personNode = g.selectAll(".person-node").filter(function (d) {
                return d && d.data && d.data.id === person.id;
            });

            if (personNode && personNode.size() > 0) {
                personNode.each(function (d) {
                    // Center the tree on this person
                    const x = d.x;
                    const y = d.y;

                    // Get current transform
                    const transform = d3.zoomTransform(svg.node());
                    const width = svg.attr("width");
                    const height = svg.attr("height");

                    // Calculate new transform to center on person
                    const newX = width / 2 - x * transform.k;
                    const newY = height / 2 - y * transform.k;

                    // Apply zoom and pan
                    svg.transition()
                        .duration(750)
                        .call(
                            zoom.transform,
                            d3.zoomIdentity
                                .translate(newX, newY)
                                .scale(transform.k)
                        );

                    // Open profile sidebar
                    if (typeof window.openProfileSidebar === "function") {
                        window.openProfileSidebar(person.id, person);
                    }
                });
            } else {
                // Person not in current tree view, try to open profile directly
                if (typeof window.openProfileSidebar === "function") {
                    window.openProfileSidebar(person.id, person);
                }
            }
        } else {
            // Tree not initialized, just open profile
            if (typeof window.openProfileSidebar === "function") {
                window.openProfileSidebar(person.id, person);
            }
        }
    }

    function filterTreeBySearch(searchTerm) {
        if (!g || !svg) return;

        // Search through all person nodes
        const allPersonNodes = g.selectAll(".person-node");

        if (allPersonNodes && allPersonNodes.size() > 0) {
            allPersonNodes.each(function (d) {
                const node = d3.select(this);
                if (!d || !d.data) return;

                const name = (
                    d.data.name ||
                    d.data.first_name ||
                    ""
                ).toLowerCase();
                const lastName = (d.data.last_name || "").toLowerCase();
                const fullName = (name + " " + lastName).trim();

                const matches =
                    name.includes(searchTerm) ||
                    lastName.includes(searchTerm) ||
                    fullName.includes(searchTerm);

                node.style("opacity", matches ? 1 : 0.2);
                node.style("pointer-events", matches ? "all" : "none");
            });
        }

        // Update links
        const treeLinks = g.selectAll(".link");
        if (treeLinks && treeLinks.size() > 0) {
            treeLinks.style("opacity", function (d) {
                if (!d || !d.source || !d.target) return 0.1;

                const sourceName = (
                    (d.source.data &&
                        (d.source.data.name || d.source.data.first_name)) ||
                    ""
                ).toLowerCase();
                const targetName = (
                    (d.target.data &&
                        (d.target.data.name || d.target.data.first_name)) ||
                    ""
                ).toLowerCase();
                const matches =
                    sourceName.includes(searchTerm) ||
                    targetName.includes(searchTerm);
                return matches ? 1 : 0.1;
            });
        }

        const spouseLinks = g.selectAll(".spouse-link");
        if (spouseLinks && spouseLinks.size() > 0) {
            spouseLinks.style("opacity", function (d) {
                if (!d || !d.source || !d.target) return 0.1;

                const sourceName = (
                    (d.source.data &&
                        (d.source.data.name || d.source.data.first_name)) ||
                    ""
                ).toLowerCase();
                const targetName = (
                    (d.target.data &&
                        (d.target.data.name || d.target.data.first_name)) ||
                    ""
                ).toLowerCase();
                const matches =
                    sourceName.includes(searchTerm) ||
                    targetName.includes(searchTerm);
                return matches ? 1 : 0.1;
            });
        }

        const siblingLinks = g.selectAll(".sibling-link");
        if (siblingLinks && siblingLinks.size() > 0) {
            siblingLinks.style("opacity", function (d) {
                if (!d || !d.source || !d.target) return 0.1;

                const sourceName = (
                    (d.source.data &&
                        (d.source.data.name || d.source.data.first_name)) ||
                    ""
                ).toLowerCase();
                const targetName = (
                    (d.target.data &&
                        (d.target.data.name || d.target.data.first_name)) ||
                    ""
                ).toLowerCase();
                const matches =
                    sourceName.includes(searchTerm) ||
                    targetName.includes(searchTerm);
                return matches ? 1 : 0.1;
            });
        }
    }

    function resetTreeVisibility() {
        if (!g) return;

        const allPersonNodes = g.selectAll(".person-node");
        if (allPersonNodes && allPersonNodes.size() > 0) {
            allPersonNodes.style("opacity", 1);
            allPersonNodes.style("pointer-events", "all");
        }

        const allLinks = g.selectAll(".link, .spouse-link, .sibling-link");
        if (allLinks && allLinks.size() > 0) {
            allLinks.style("opacity", 1);
        }
    }

    function showSearchDropdown() {
        const searchInput = document.getElementById("search-input");
        const dropdown = document.getElementById("search-dropdown");
        if (searchInput && dropdown && searchInput.value.trim() !== "") {
            dropdown.classList.add("show");
        }
    }

    function hideSearchDropdown() {
        // Delay to allow click events to fire
        setTimeout(function () {
            const dropdown = document.getElementById("search-dropdown");
            if (dropdown) {
                dropdown.classList.remove("show");
            }
        }, 200);
    }

    // Close dropdown when clicking outside
    document.addEventListener("click", function (event) {
        const searchContainer = document.querySelector(".search-container");
        const dropdown = document.getElementById("search-dropdown");
        const searchInput = document.getElementById("search-input");

        if (searchContainer && dropdown && searchInput) {
            // Check if click is outside the search container
            if (!searchContainer.contains(event.target)) {
                dropdown.classList.remove("show");
            }
        }
    });

    // Current generation setting (default: 1)
    let currentGeneration = 1;
    let showCousins = true;

    function toggleGenerationsModal() {
        const modal = document.getElementById("generations-modal");
        if (modal) {
            modal.classList.toggle("show");
            if (modal.classList.contains("show")) {
                updateSliderPosition(currentGeneration);
                updateSliderLabels();
                const checkbox = document.getElementById(
                    "show-cousins-checkbox"
                );
                if (checkbox) {
                    checkbox.checked = showCousins;
                }
            }
        }
    }

    function closeGenerationsModal() {
        const modal = document.getElementById("generations-modal");
        if (modal) {
            modal.classList.remove("show");
        }
    }

    function closeGenerationsModalOnOverlay(event) {
        if (event.target.id === "generations-modal") {
            closeGenerationsModal();
        }
    }

    function setGeneration(value) {
        currentGeneration = value;
        updateSliderPosition(value);
        updateSliderLabels();
        updateGenerationsButton();
        filterGenerations();
    }

    function updateSliderPosition(value) {
        const handle = document.getElementById("generations-slider-handle");
        const fill = document.getElementById("generations-slider-fill");
        const track = document.querySelector(".generations-slider-track");

        if (!handle || !fill || !track) return;

        // Calculate position (0% to 100% for values 1 to 5)
        const percentage = ((value - 1) / 4) * 100;

        handle.style.left = percentage + "%";
        fill.style.width = percentage + "%";
    }

    // Add drag functionality to slider
    function initSliderDrag() {
        const handle = document.getElementById("generations-slider-handle");
        const track = document.querySelector(".generations-slider-track");

        if (!handle || !track) return;

        let isDragging = false;

        handle.addEventListener("mousedown", function (e) {
            isDragging = true;
            e.preventDefault();
        });

        track.addEventListener("click", function (e) {
            if (isDragging) return;
            const rect = track.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const percentage = (x / rect.width) * 100;
            const value = Math.round((percentage / 100) * 4) + 1;
            const clampedValue = Math.max(1, Math.min(5, value));
            setGeneration(clampedValue);
        });

        document.addEventListener("mousemove", function (e) {
            if (!isDragging) return;

            const rect = track.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const percentage = (x / rect.width) * 100;
            const value = Math.round((percentage / 100) * 4) + 1;
            const clampedValue = Math.max(1, Math.min(5, value));

            if (clampedValue !== currentGeneration) {
                setGeneration(clampedValue);
            }
        });

        document.addEventListener("mouseup", function () {
            isDragging = false;
        });
    }

    function updateSliderLabels() {
        const labels = document.querySelectorAll(".generations-slider-label");
        labels.forEach((label) => {
            const value = parseInt(label.getAttribute("data-value"));
            if (value === currentGeneration) {
                label.classList.add("active");
            } else {
                label.classList.remove("active");
            }
        });
    }

    function updateGenerationsButton() {
        const valueElement = document.getElementById("generations-value");
        if (valueElement) {
            valueElement.textContent =
                currentGeneration === 5 ? "5+" : currentGeneration.toString();
        }
    }

    function toggleShowCousins() {
        const checkbox = document.getElementById("show-cousins-checkbox");
        if (checkbox) {
            showCousins = checkbox.checked;
            filterGenerations();
        }
    }

    function filterGenerations() {
        // Implementation for generation filtering
        setupTree();
        buildTree();
        centerTree();
    }

    // Initialize slider on page load
    if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", function () {
            updateSliderPosition(currentGeneration);
            updateSliderLabels();
            updateGenerationsButton();
            initSliderDrag();
        });
    } else {
        updateSliderPosition(currentGeneration);
        updateSliderLabels();
        updateGenerationsButton();
        initSliderDrag();
    }

    let selectedPersonData = null;

    function openBranchBuilder(personData) {
        selectedPersonData = personData;

        // Debug: Log the personData to see what's available
        console.log("openBranchBuilder called with personData:", personData);
        console.log("personData.spouses:", personData.spouses);

        // If spouses is not in personData, try to get it from treeData
        if (!personData.spouses || personData.spouses.length === 0) {
            const personInTree = treeData.find((p) => p.id === personData.id);
            if (personInTree && personInTree.spouses) {
                selectedPersonData.spouses = personInTree.spouses;
                console.log("Found spouses in treeData:", personInTree.spouses);
            }
        }

        const nameElement = document.getElementById("center-person-name");
        const fullName = personData.name || personData.first_name || "Person";
        nameElement.textContent = fullName;
        nameElement.style.fontSize = fullName.length > 20 ? "12px" : "14px";

        // Update center card gender styling
        const centerCard = document.getElementById("center-card");
        if (personData.gender === "female") {
            centerCard.classList.remove("male");
            centerCard.classList.add("female");
            centerCard.style.borderColor = "#ffb6c1";
        } else {
            centerCard.classList.remove("female");
            centerCard.classList.add("male");
            centerCard.style.borderColor = "#add8e6";
        }

        // Update "Add partner" label based on whether person already has partners
        const partnerLabel = document.querySelector(
            ".add-partner .relationship-label"
        );
        if (partnerLabel) {
            const hasExistingPartners =
                (personData.spouses && personData.spouses.length > 0) ||
                (selectedPersonData.spouses &&
                    selectedPersonData.spouses.length > 0);
            partnerLabel.textContent = hasExistingPartners
                ? "Add another partner"
                : "Add partner";
        }

        document
            .getElementById("branch-builder-overlay")
            .classList.add("active");

        // Draw connecting lines after modal is fully rendered
        // Use multiple attempts to ensure layout is complete
        setTimeout(drawBranchBuilderLines, 50);
        setTimeout(drawBranchBuilderLines, 200);
        setTimeout(drawBranchBuilderLines, 400);
    }

    function drawBranchBuilderLines() {
        const svg = document.getElementById("branch-builder-lines");
        if (!svg) return;

        // Clear existing lines
        svg.innerHTML = "";

        const grid = document.getElementById("branch-builder-grid");
        const centerCard = document.getElementById("center-person-card");
        if (!centerCard || !grid) return;

        // Wait for layout to settle
        requestAnimationFrame(() => {
            // Get positions relative to the grid container
            const gridRect = grid.getBoundingClientRect();
            const centerRect = centerCard.getBoundingClientRect();

            // Calculate center point of center card relative to grid
            const centerX =
                centerRect.left + centerRect.width / 2 - gridRect.left;
            const centerY =
                centerRect.top + centerRect.height / 2 - gridRect.top;

            // Set SVG size to match grid
            svg.setAttribute("width", gridRect.width);
            svg.setAttribute("height", gridRect.height);
            svg.setAttribute(
                "viewBox",
                `0 0 ${gridRect.width} ${gridRect.height}`
            );

            // Relationship cards to connect with edge-based connections
            const relationships = [
                {
                    selector: ".add-father",
                    id: "line-father",
                    centerEdge: "top",
                    cardEdge: "bottom",
                },
                {
                    selector: ".add-mother",
                    id: "line-mother",
                    centerEdge: "top",
                    cardEdge: "bottom",
                },
                {
                    selector: ".add-brother",
                    id: "line-brother",
                    centerEdge: "left",
                    cardEdge: "right",
                },
                {
                    selector: ".add-sister",
                    id: "line-sister",
                    centerEdge: "left",
                    cardEdge: "right",
                },
                {
                    selector: ".add-partner",
                    id: "line-partner",
                    centerEdge: "right",
                    cardEdge: "left",
                },
                {
                    selector: ".add-son",
                    id: "line-son",
                    centerEdge: "bottom",
                    cardEdge: "top",
                },
                {
                    selector: ".add-daughter",
                    id: "line-daughter",
                    centerEdge: "bottom",
                    cardEdge: "top",
                },
            ];

            // Helper function to get edge point
            function getEdgePoint(rect, edge, offsetX, offsetY) {
                const x = rect.left - offsetX;
                const y = rect.top - offsetY;
                const w = rect.width;
                const h = rect.height;

                switch (edge) {
                    case "top":
                        return { x: x + w / 2, y: y };
                    case "right":
                        return { x: x + w, y: y + h / 2 };
                    case "bottom":
                        return { x: x + w / 2, y: y + h };
                    case "left":
                        return { x: x, y: y + h / 2 };
                    default:
                        return { x: x + w / 2, y: y + h / 2 };
                }
            }

            relationships.forEach((rel) => {
                const card = grid.querySelector(rel.selector);
                if (card) {
                    const cardRect = card.getBoundingClientRect();

                    // Get edge points for clean connections
                    const centerPoint = getEdgePoint(
                        centerRect,
                        rel.centerEdge,
                        gridRect.left,
                        gridRect.top
                    );
                    const cardPoint = getEdgePoint(
                        cardRect,
                        rel.cardEdge,
                        gridRect.left,
                        gridRect.top
                    );

                    // Draw straight orthogonal lines (vertical then horizontal) instead of diagonal lines
                    if (
                        rel.centerEdge === "top" ||
                        rel.centerEdge === "bottom"
                    ) {
                        // Card is above or below center - draw vertical, then horizontal
                        // The horizontal line should be at the same Y as the card's edge point
                        // This aligns with the horizontal line between "Add mother" and "Add father" cards
                        const horizontalLineY = cardPoint.y;

                        // Step 1: Vertical line from center edge straight up/down to the horizontal line level
                        // This ensures we go straight up (or down) first, not diagonally
                        const line1 = document.createElementNS(
                            "http://www.w3.org/2000/svg",
                            "line"
                        );
                        line1.setAttribute("id", rel.id + "-1");
                        line1.setAttribute("x1", centerPoint.x);
                        line1.setAttribute("y1", centerPoint.y);
                        line1.setAttribute("x2", centerPoint.x);
                        line1.setAttribute("y2", horizontalLineY);
                        line1.setAttribute("stroke", "#999");
                        line1.setAttribute("stroke-width", "2");
                        line1.setAttribute("stroke-linecap", "round");
                        line1.setAttribute("shape-rendering", "crispEdges");
                        svg.appendChild(line1);

                        // Step 2: Horizontal line from center X to card X (at the same Y as the horizontal line between cards)
                        // This creates the straight horizontal segment
                        const line2 = document.createElementNS(
                            "http://www.w3.org/2000/svg",
                            "line"
                        );
                        line2.setAttribute("id", rel.id + "-2");
                        line2.setAttribute("x1", centerPoint.x);
                        line2.setAttribute("y1", horizontalLineY);
                        line2.setAttribute("x2", cardPoint.x);
                        line2.setAttribute("y2", horizontalLineY);
                        line2.setAttribute("stroke", "#999");
                        line2.setAttribute("stroke-width", "2");
                        line2.setAttribute("stroke-linecap", "round");
                        line2.setAttribute("shape-rendering", "crispEdges");
                        svg.appendChild(line2);
                    } else {
                        // Card is to the left or right of center - draw horizontal, then vertical, then horizontal
                        const midX = (centerPoint.x + cardPoint.x) / 2;

                        // Horizontal line from center edge
                        const line1 = document.createElementNS(
                            "http://www.w3.org/2000/svg",
                            "line"
                        );
                        line1.setAttribute("id", rel.id + "-1");
                        line1.setAttribute("x1", centerPoint.x);
                        line1.setAttribute("y1", centerPoint.y);
                        line1.setAttribute("x2", midX);
                        line1.setAttribute("y2", centerPoint.y);
                        line1.setAttribute("stroke", "#999");
                        line1.setAttribute("stroke-width", "2");
                        line1.setAttribute("stroke-linecap", "round");
                        line1.setAttribute("shape-rendering", "crispEdges");
                        svg.appendChild(line1);

                        // Vertical line
                        const line2 = document.createElementNS(
                            "http://www.w3.org/2000/svg",
                            "line"
                        );
                        line2.setAttribute("id", rel.id + "-2");
                        line2.setAttribute("x1", midX);
                        line2.setAttribute("y1", centerPoint.y);
                        line2.setAttribute("x2", midX);
                        line2.setAttribute("y2", cardPoint.y);
                        line2.setAttribute("stroke", "#999");
                        line2.setAttribute("stroke-width", "2");
                        line2.setAttribute("stroke-linecap", "round");
                        line2.setAttribute("shape-rendering", "crispEdges");
                        svg.appendChild(line2);

                        // Horizontal line to card edge
                        const line3 = document.createElementNS(
                            "http://www.w3.org/2000/svg",
                            "line"
                        );
                        line3.setAttribute("id", rel.id + "-3");
                        line3.setAttribute("x1", midX);
                        line3.setAttribute("y1", cardPoint.y);
                        line3.setAttribute("x2", cardPoint.x);
                        line3.setAttribute("y2", cardPoint.y);
                        line3.setAttribute("stroke", "#999");
                        line3.setAttribute("stroke-width", "2");
                        line3.setAttribute("stroke-linecap", "round");
                        line3.setAttribute("shape-rendering", "crispEdges");
                        svg.appendChild(line3);
                    }
                }
            });
        });
    }

    function closeBranchBuilder() {
        document
            .getElementById("branch-builder-overlay")
            .classList.remove("active");
        selectedPersonData = null;

        // Clear lines
        const svg = document.getElementById("branch-builder-lines");
        if (svg) {
            svg.innerHTML = "";
        }
    }

    // Profile Sidebar Functions
    let currentProfilePersonId = null;
    let currentProfilePersonData = null;

    // Make function globally accessible
    window.openProfileSidebar = function (personId, personData) {
        try {
            console.log(
                "openProfileSidebar called with:",
                personId,
                personData
            );
            currentProfilePersonId = personId;
            // Get fresh person data from treeData to ensure we have the latest facts
            if (typeof treeData !== "undefined" && treeData) {
                const personInTree = treeData.find((p) => p.id === personId);
                if (personInTree) {
                    // Create a copy to avoid direct reference, but keep it synced
                    currentProfilePersonData = {
                        ...personInTree,
                        facts: personInTree.facts
                            ? personInTree.facts.map((f) => ({ ...f }))
                            : [],
                    };
                } else {
                    currentProfilePersonData = personData;
                }
            } else {
                currentProfilePersonData = personData;
            }

            // Check if sidebar elements exist
            const profileSidebarEl = document.getElementById("profile-sidebar");
            const sidebarName = document.getElementById("profile-sidebar-name");

            if (!profileSidebarEl) {
                console.error("Profile sidebar element not found!");
                return;
            }

            if (!sidebarName) {
                console.error("Profile sidebar name element not found!");
                return;
            }

            // Update sidebar content
            const name = personData.name || personData.first_name || "Unknown";
            sidebarName.textContent = name;

            // Update research link
            const researchLink = document.getElementById(
                "profile-research-link"
            );
            if (researchLink) {
                researchLink.href = `https://familytree.hexafume.com/family-tree/${personId}`;
            }

            // Update avatar
            const avatarImage = document.getElementById("profile-avatar-image");
            const avatarPlaceholder = document.getElementById(
                "profile-avatar-placeholder"
            );

            if (avatarImage && avatarPlaceholder) {
                if (personData.photo) {
                    avatarImage.src = `https://familytree.hexafume.com/storage/${personData.photo}`;
                    avatarImage.style.display = "block";
                    avatarPlaceholder.style.display = "none";
                } else {
                    // Use gender-based avatar
                    const gender = personData.gender || "male";
                    if (gender === "female") {
                        avatarImage.src =
                            "https://familytree.hexafume.com/images/avatars/pink card.png";
                    } else {
                        avatarImage.src =
                            "https://familytree.hexafume.com/images/avatars/blue_card.png";
                    }
                    avatarImage.style.display = "block";
                    avatarPlaceholder.style.display = "none";
                }
            } else {
                console.warn("Avatar elements not found:", {
                    avatarImage: !!avatarImage,
                    avatarPlaceholder: !!avatarPlaceholder,
                });
            }

            // Load additional data (don't let errors here prevent sidebar from opening)
            try {
                if (typeof loadProfileData === "function") {
                    loadProfileData(personId);
                }
                // Load photos
                if (typeof loadPhotos === "function") {
                    loadPhotos();
                }
            } catch (error) {
                console.warn("Error loading profile data:", error);
            }

            // Show sidebar
            const overlay = document.getElementById("profile-sidebar-overlay");

            if (profileSidebarEl && overlay) {
                // Force display in case it's hidden
                profileSidebarEl.style.display = "block";
                profileSidebarEl.style.pointerEvents = "auto";
                overlay.style.display = "block";
                overlay.style.pointerEvents = "auto";
                overlay.style.zIndex = "1999";

                // Add classes to show sidebar
                profileSidebarEl.classList.add("open");
                overlay.classList.add("active");

                // Force a reflow to ensure transition works
                profileSidebarEl.offsetHeight;

                console.log("Sidebar opened successfully", {
                    sidebarClasses: profileSidebarEl.className,
                    overlayClasses: overlay.className,
                    sidebarLeft: window.getComputedStyle(profileSidebarEl).left,
                });
            } else {
                console.error("Sidebar elements not found!", {
                    sidebar: !!profileSidebarEl,
                    overlay: !!overlay,
                });
            }
        } catch (error) {
            console.error("Error opening profile sidebar:", error);
            console.error("Error stack:", error.stack);
        }
    };

    // Also create a regular function for backward compatibility
    function openProfileSidebar(personId, personData) {
        window.openProfileSidebar(personId, personData);
    }

    function closeProfileSidebar() {
        const sidebar = document.getElementById("profile-sidebar");
        const overlay = document.getElementById("profile-sidebar-overlay");

        if (sidebar) {
            sidebar.classList.remove("open");
            // Ensure sidebar is not blocking interactions
            sidebar.style.pointerEvents = "none";
        }

        if (overlay) {
            overlay.classList.remove("active");
            // Force hide the overlay and ensure it doesn't block clicks
            overlay.style.display = "none";
            overlay.style.pointerEvents = "none";
            overlay.style.zIndex = "-1";
        }

        // Re-enable pointer events on the tree container after a short delay
        setTimeout(function () {
            const treeContainer = document.getElementById("tree-container");
            if (treeContainer) {
                treeContainer.style.pointerEvents = "auto";
            }
            const svgElement = document.querySelector("#tree-container svg");
            if (svgElement) {
                svgElement.style.pointerEvents = "auto";
            }
        }, 100);
    }

    function loadProfileData(personId) {
        try {
            // Load photos, biography, family, facts via AJAX
            // For now, we'll use the data from treeData
            if (typeof treeData === "undefined" || !treeData) {
                console.warn("treeData not available");
                return;
            }

            const person = treeData.find((p) => p.id === personId);

            if (person) {
                // Load biography
                const biographyContent = document.getElementById(
                    "profile-biography-content"
                );
                if (biographyContent) {
                    if (person.biography) {
                        biographyContent.innerHTML = person.biography;
                        biographyContent.style.display = "block";
                    } else {
                        // Clear and hide biography if person doesn't have one
                        biographyContent.innerHTML = "";
                        biographyContent.style.display = "none";
                    }
                }

                // Load family members
                if (typeof loadFamilyMembers === "function") {
                    loadFamilyMembers(person);
                }

                // Load facts
                if (typeof loadFacts === "function") {
                    loadFacts(person);
                }
            }
        } catch (error) {
            console.error("Error in loadProfileData:", error);
        }
    }

    function loadFamilyMembers(person) {
        const familyContent = document.getElementById("profile-family-content");
        familyContent.innerHTML = "";

        // Parents
        if (person.parents && person.parents.length > 0) {
            const parents = person.parents
                .map((id) => treeData.find((p) => p.id === id))
                .filter((p) => p);
            parents.forEach((parent) => {
                const div = document.createElement("div");
                div.style.padding = "10px 0";
                div.style.borderBottom = "1px solid #f0f0f0";
                div.innerHTML = `
                    <strong>${
                        parent.name || parent.first_name || "Unknown"
                    }</strong>
                    <span style="color: #666; font-size: 12px; margin-left: 10px;">${
                        parent.gender === "female" ? "Mother" : "Father"
                    }</span>
                `;
                div.style.cursor = "pointer";
                div.onclick = () => openProfileSidebar(parent.id, parent);
                familyContent.appendChild(div);
            });
        }

        // Spouses
        if (person.spouses && person.spouses.length > 0) {
            const spouses = person.spouses
                .map((id) => treeData.find((p) => p.id === id))
                .filter((p) => p);
            spouses.forEach((spouse) => {
                const div = document.createElement("div");
                div.style.padding = "10px 0";
                div.style.borderBottom = "1px solid #f0f0f0";
                div.innerHTML = `
                    <strong>${
                        spouse.name || spouse.first_name || "Unknown"
                    }</strong>
                    <span style="color: #666; font-size: 12px; margin-left: 10px;">Spouse</span>
                `;
                div.style.cursor = "pointer";
                div.onclick = () => openProfileSidebar(spouse.id, spouse);
                familyContent.appendChild(div);
            });
        }

        // Children
        const children = treeData.filter(
            (p) => p.parents && p.parents.includes(personId)
        );
        if (children.length > 0) {
            children.forEach((child) => {
                const div = document.createElement("div");
                div.style.padding = "10px 0";
                div.style.borderBottom = "1px solid #f0f0f0";
                div.innerHTML = `
                    <strong>${
                        child.name || child.first_name || "Unknown"
                    }</strong>
                    <span style="color: #666; font-size: 12px; margin-left: 10px;">Child</span>
                `;
                div.style.cursor = "pointer";
                div.onclick = () => openProfileSidebar(child.id, child);
                familyContent.appendChild(div);
            });
        }

        if (familyContent.innerHTML) {
            familyContent.style.display = "block";
        }
    }

    function loadFacts(person) {
        const factsContent = document.getElementById("profile-facts-content");
        if (!factsContent) {
            return;
        }

        // Always clear the content first
        factsContent.innerHTML = "";

        const facts = [];

        // Add default facts
        if (person.birth_date)
            facts.push({ label: "Birth Date", value: person.birth_date });
        if (person.birth_place)
            facts.push({ label: "Birth Place", value: person.birth_place });
        if (person.death_date)
            facts.push({ label: "Death Date", value: person.death_date });
        if (person.death_place)
            facts.push({ label: "Death Place", value: person.death_place });
        if (person.gender)
            facts.push({ label: "Gender", value: person.gender });

        // Add custom facts if they exist - create a copy to avoid reference issues
        if (
            person.facts &&
            Array.isArray(person.facts) &&
            person.facts.length > 0
        ) {
            person.facts.forEach((fact) => {
                if (fact && fact.label && fact.value) {
                    // Create a new object to avoid reference sharing
                    facts.push({
                        label: String(fact.label),
                        value: String(fact.value),
                    });
                }
            });
        }

        // Display facts
        if (facts.length > 0) {
            facts.forEach((fact) => {
                const div = document.createElement("div");
                div.style.padding = "10px 0";
                div.style.borderBottom = "1px solid #f0f0f0";
                div.innerHTML = `
                    <strong style="font-size: 12px; color: #666;">${fact.label}:</strong>
                    <span style="margin-left: 10px; font-size: 14px;">${fact.value}</span>
                `;
                factsContent.appendChild(div);
            });
            factsContent.style.display = "block";
        } else {
            // Explicitly hide if no facts
            factsContent.style.display = "none";
        }
    }

    function toggleSection(section) {
        const content = document.getElementById(`profile-${section}-content`);
        const chevron = document.getElementById(`${section}-chevron`);

        if (content.style.display === "none") {
            content.style.display = "block";
            chevron.classList.remove("bi-chevron-down");
            chevron.classList.add("bi-chevron-up");
        } else {
            content.style.display = "none";
            chevron.classList.remove("bi-chevron-up");
            chevron.classList.add("bi-chevron-down");
        }
    }

    function viewFullProfile() {
        if (currentProfilePersonId) {
            window.location.href = `https://familytree.hexafume.com/family-tree/${currentProfilePersonId}`;
        }
    }

    function editProfile() {
        if (currentProfilePersonId) {
            window.location.href = `https://familytree.hexafume.com/family-tree/${currentProfilePersonId}/edit`;
        }
    }

    function openBranchBuilderFromProfile() {
        if (currentProfilePersonData) {
            closeProfileSidebar();
            openBranchBuilder(currentProfilePersonData);
        }
    }

    function showMoreOptions() {
        // Implement more options menu
        alert("More options coming soon!");
    }

    function addPhotos() {
        if (!currentProfilePersonId) {
            alert("Please select a person first!");
            return;
        }

        // Create a file input element (photos only for now)
        const fileInput = document.createElement("input");
        fileInput.type = "file";
        fileInput.accept = "image/*"; // Only images for now, videos will be added later
        fileInput.multiple = true;
        fileInput.style.display = "none";

        // Handle file selection
        fileInput.addEventListener("change", function (e) {
            const files = Array.from(e.target.files);
            if (files.length === 0) {
                return;
            }

            // Upload each file
            files.forEach((file) => {
                uploadPhotoOrVideo(file);
            });
        });

        // Trigger file input
        document.body.appendChild(fileInput);
        fileInput.click();
        document.body.removeChild(fileInput);
    }

    function uploadPhotoOrVideo(file) {
        if (!currentProfilePersonId) {
            return;
        }

        // Validate file type (photos only for now)
        if (!file.type.match(/^image\//)) {
            alert(
                "Only image files are supported. Please select a photo (jpeg, png, jpg, gif)."
            );
            return;
        }

        const formData = new FormData();
        formData.append("file", file);
        formData.append("title", file.name);

        fetch(`/family-tree/${currentProfilePersonId}/upload-photo`, {
            method: "POST",
            headers: {
                "X-CSRF-TOKEN": document
                    .querySelector('meta[name="csrf-token"]')
                    .getAttribute("content"),
            },
            body: formData,
        })
            .then((response) => {
                // Check if response is ok
                if (!response.ok) {
                    return response
                        .json()
                        .then((data) => {
                            throw new Error(
                                data.error ||
                                    data.message ||
                                    `Server error: ${response.status}`
                            );
                        })
                        .catch(() => {
                            throw new Error(
                                `Server error: ${response.status} ${response.statusText}`
                            );
                        });
                }
                return response.json();
            })
            .then((data) => {
                if (data.success) {
                    console.log("Photo/video uploaded successfully:", data);
                    // Reload photos
                    loadPhotos();
                } else {
                    let errorMsg = data.error || "Unknown error";
                    if (data.errors && data.errors.file) {
                        errorMsg = data.errors.file[0] || errorMsg;
                    } else if (data.message) {
                        errorMsg = data.message;
                    }
                    alert("Error uploading file: " + errorMsg);
                }
            })
            .catch((error) => {
                console.error("Error uploading file:", error);
                let errorMsg = error.message || "Please try again.";
                if (error.message && error.message.includes("413")) {
                    errorMsg = "File is too large. Maximum size is 50MB.";
                } else if (error.message && error.message.includes("422")) {
                    errorMsg =
                        "Invalid file type. Please upload an image or video file.";
                }
                alert("Error uploading file: " + errorMsg);
            });
    }

    function loadPhotos() {
        if (!currentProfilePersonId) {
            return;
        }

        fetch(`/family-tree/${currentProfilePersonId}/photos`)
            .then((response) => response.json())
            .then((data) => {
                if (data.success) {
                    displayPhotos(data.photos);
                }
            })
            .catch((error) => {
                console.error("Error loading photos:", error);
            });
    }

    function displayPhotos(photos) {
        const photosContent = document.getElementById("profile-photos-content");
        const photosTitle = document.getElementById("photos-section-title");

        if (!photosContent) {
            return;
        }

        // Update title with count
        if (photosTitle) {
            photosTitle.textContent = `PHOTOS (${photos.length})`;
        }

        // Show the content section
        photosContent.style.display = "block";

        if (photos.length === 0) {
            photosContent.innerHTML =
                '<p style="padding: 20px; text-align: center; color: #999;">No photos yet. Click "+ Add" to upload.</p>';
            return;
        }

        // Create grid layout for photos
        let html =
            '<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; padding: 10px;">';

        photos.forEach((photo) => {
            const isVideo = photo.file_type === "video";
            html += `
                <div style="position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; background: #f0f0f0;">
                    ${
                        isVideo
                            ? `
                        <video style="width: 100%; height: 100%; object-fit: cover;" src="${photo.url}" controls></video>
                    `
                            : `
                        <img style="width: 100%; height: 100%; object-fit: cover;" src="${
                            photo.url
                        }" alt="${photo.title || ""}" />
                    `
                    }
                    <button onclick="deletePhoto(${
                        photo.id
                    })" style="position: absolute; top: 5px; right: 5px; background: rgba(255,0,0,0.7); color: white; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 12px;">×</button>
                </div>
            `;
        });

        html += "</div>";
        photosContent.innerHTML = html;
    }

    function deletePhoto(photoId) {
        if (!currentProfilePersonId) {
            return;
        }

        if (!confirm("Are you sure you want to delete this photo/video?")) {
            return;
        }

        fetch(`/family-tree/${currentProfilePersonId}/photos/${photoId}`, {
            method: "DELETE",
            headers: {
                "X-CSRF-TOKEN": document
                    .querySelector('meta[name="csrf-token"]')
                    .getAttribute("content"),
            },
        })
            .then((response) => response.json())
            .then((data) => {
                if (data.success) {
                    // Reload photos
                    loadPhotos();
                } else {
                    alert(
                        "Error deleting photo: " +
                            (data.error || "Unknown error")
                    );
                }
            })
            .catch((error) => {
                console.error("Error deleting photo:", error);
                alert("Error deleting photo. Please try again.");
            });
    }

    function openPhotoUpload() {
        console.log("openPhotoUpload called");
        console.log("currentProfilePersonId:", currentProfilePersonId);
        console.log("currentProfilePersonData:", currentProfilePersonData);

        if (!currentProfilePersonId) {
            alert("Please select a person first!");
            return;
        }

        console.log(
            "Creating file input for person ID:",
            currentProfilePersonId
        );

        // Create a file input element
        const fileInput = document.createElement("input");
        fileInput.type = "file";
        fileInput.accept = "image/*";
        fileInput.style.display = "none";

        // Handle file selection
        fileInput.addEventListener("change", function (e) {
            console.log("File selected");
            const file = e.target.files[0];
            if (!file) {
                console.log("No file selected");
                return;
            }

            console.log(
                "Selected file:",
                file.name,
                "Size:",
                file.size,
                "Type:",
                file.type
            );

            // Validate file type
            if (!file.type.match("image.*")) {
                alert("Please select an image file!");
                return;
            }

            // Validate file size (2MB max)
            if (file.size > 2 * 1024 * 1024) {
                alert("File size must be less than 2MB!");
                return;
            }

            // Create FormData for upload
            const formData = new FormData();
            formData.append("photo", file);
            formData.append("_token", "SsAmvR4Dw4G6ycU9HtKwdDEy1mt4bZ4tzLEKGoBW");

            // Show loading state
            const avatarImage = document.getElementById("profile-avatar-image");
            const avatarPlaceholder = document.getElementById(
                "profile-avatar-placeholder"
            );
            if (avatarImage) {
                avatarImage.style.opacity = "0.5";
            }

            // Upload the file
            const uploadUrl = `https://familytree.hexafume.com/family-tree/${currentProfilePersonId}/upload-avatar`;
            console.log("Uploading to URL:", uploadUrl);
            console.log("FormData created, starting upload...");

            fetch(uploadUrl, {
                method: "POST",
                body: formData,
                headers: {
                    "X-Requested-With": "XMLHttpRequest",
                },
            })
                .then((response) => {
                    console.log(
                        "Upload response received, status:",
                        response.status
                    );
                    if (!response.ok) {
                        console.error(
                            "Upload failed with status:",
                            response.status
                        );
                        return response.json().then((err) => {
                            throw new Error(
                                err.error || `HTTP ${response.status}`
                            );
                        });
                    }
                    return response.json();
                })
                .then((data) => {
                    console.log("Upload response data:", data);
                    if (data.success) {
                        console.log(
                            "Upload successful, photo URL:",
                            data.photo_url
                        );
                        console.log("Photo path:", data.photo);

                        // Update sidebar avatar immediately
                        if (avatarImage && avatarPlaceholder) {
                            // Use the same URL format as openProfileSidebar uses
                            // Add timestamp to prevent caching issues
                            const photoUrl = `https://familytree.hexafume.com/storage/${
                                data.photo
                            }?t=${Date.now()}`;
                            console.log("Setting avatar image URL:", photoUrl);
                            console.log("Photo data:", data);

                            // First, hide the placeholder
                            avatarPlaceholder.style.display = "none";

                            // Set up image load handler BEFORE setting src
                            avatarImage.onload = function () {
                                console.log("Avatar image loaded successfully");
                                avatarImage.style.display = "block";
                                avatarImage.style.opacity = "1";
                                avatarImage.style.visibility = "visible";
                                avatarPlaceholder.style.display = "none";
                            };

                            // Handle image load errors
                            avatarImage.onerror = function () {
                                console.error(
                                    "Failed to load avatar image. URL:",
                                    photoUrl
                                );
                                console.error(
                                    "Trying alternative URL format..."
                                );
                                // Try alternative URL format (without trailing slash)
                                const altUrl = `https://familytree.hexafume.com/storage/${
                                    data.photo
                                }?t=${Date.now()}`;
                                console.log("Trying alternative URL:", altUrl);
                                avatarImage.src = altUrl;

                                // If this also fails, show placeholder again
                                avatarImage.onerror = function () {
                                    console.error("Both URL formats failed");
                                    avatarPlaceholder.style.display = "flex";
                                    avatarImage.style.display = "none";
                                    alert(
                                        "Image uploaded successfully but failed to display. Please refresh the page to see it."
                                    );
                                };
                            };

                            // Show image container and set source
                            avatarImage.style.display = "block";
                            avatarImage.style.visibility = "visible";
                            avatarImage.style.opacity = "0.8"; // Start slightly transparent

                            // Set the image source (this will trigger onload or onerror)
                            avatarImage.src = photoUrl;

                            // Force a repaint
                            avatarImage.offsetHeight;
                        } else {
                            console.error("Avatar elements not found:", {
                                avatarImage: !!avatarImage,
                                avatarPlaceholder: !!avatarPlaceholder,
                            });
                        }

                        // Update currentProfilePersonData with new photo
                        if (currentProfilePersonData) {
                            currentProfilePersonData.photo = data.photo;
                            console.log(
                                "Updated currentProfilePersonData.photo:",
                                data.photo
                            );
                        }

                        // Update treeData immediately so the tree can use the new photo
                        if (
                            treeData &&
                            Array.isArray(treeData) &&
                            currentProfilePersonId
                        ) {
                            const personInTreeData = treeData.find(
                                (p) => p.id === currentProfilePersonId
                            );
                            if (personInTreeData) {
                                personInTreeData.photo = data.photo;
                                console.log(
                                    "Updated treeData for person ID:",
                                    currentProfilePersonId,
                                    "New photo:",
                                    data.photo
                                );
                            } else {
                                console.warn(
                                    "Person not found in treeData:",
                                    currentProfilePersonId
                                );
                            }
                        }

                        // Update avatar images in the tree SVG
                        // Try multiple times with delays to catch cards that render later
                        if (currentProfilePersonId && data.photo) {
                            console.log(
                                "Updating avatar in tree for person:",
                                currentProfilePersonId
                            );
                            if (
                                typeof updatePersonAvatarInTree === "function"
                            ) {
                                // Try immediately
                                updatePersonAvatarInTree(
                                    currentProfilePersonId,
                                    data.photo
                                );

                                // Try again after a short delay (for cards that render asynchronously)
                                setTimeout(() => {
                                    console.log(
                                        "Retrying avatar update after delay for person:",
                                        currentProfilePersonId
                                    );
                                    updatePersonAvatarInTree(
                                        currentProfilePersonId,
                                        data.photo
                                    );
                                }, 200);

                                // Try again after tree rebuilds
                                setTimeout(() => {
                                    console.log(
                                        "Retrying avatar update after tree rebuild for person:",
                                        currentProfilePersonId
                                    );
                                    updatePersonAvatarInTree(
                                        currentProfilePersonId,
                                        data.photo
                                    );
                                }, 600);
                            } else {
                                console.warn(
                                    "updatePersonAvatarInTree function not found"
                                );
                            }
                        }

                        // Re-open sidebar with updated data to ensure everything is in sync
                        if (
                            currentProfilePersonId &&
                            currentProfilePersonData
                        ) {
                            // Small delay to ensure image has time to load
                            setTimeout(() => {
                                if (
                                    typeof window.openProfileSidebar ===
                                    "function"
                                ) {
                                    window.openProfileSidebar(
                                        currentProfilePersonId,
                                        currentProfilePersonData
                                    );
                                }
                            }, 500);
                        }

                        // Reload tree data to update card avatars
                        // Add a delay to ensure database is updated and to avoid race conditions
                        setTimeout(() => {
                            if (typeof initTree === "function") {
                                console.log(
                                    "Refreshing tree to update card avatars..."
                                );
                                // Call initTree which will fetch fresh data and rebuild the tree
                                initTree()
                                    .then(() => {
                                        console.log(
                                            "Tree refreshed with new avatar"
                                        );
                                    })
                                    .catch((err) => {
                                        console.error(
                                            "Error refreshing tree:",
                                            err
                                        );
                                    });
                            } else {
                                // Fallback: try to rebuild tree if initTree is not available
                                if (typeof rebuildTree === "function") {
                                    console.log(
                                        "initTree not available, using rebuildTree..."
                                    );
                                    rebuildTree();
                                }
                            }
                        }, 500); // Increased delay to 500ms to ensure DB update is complete

                        // Show success message
                        console.log("Avatar uploaded successfully!");
                    } else {
                        alert(
                            "Upload failed: " + (data.error || "Unknown error")
                        );
                        if (avatarImage) {
                            avatarImage.style.opacity = "1";
                        }
                    }
                })
                .catch((error) => {
                    console.error("Upload error:", error);
                    console.error("Error details:", error.message, error.stack);
                    alert(
                        "Error uploading photo: " +
                            error.message +
                            ". Please try again."
                    );
                    if (avatarImage) {
                        avatarImage.style.opacity = "1";
                    }
                    if (avatarPlaceholder) {
                        avatarPlaceholder.style.display = "flex";
                    }
                });

            // Remove the file input
            document.body.removeChild(fileInput);
        });

        // Append to body and trigger click
        document.body.appendChild(fileInput);
        fileInput.click();
    }

    // Biography Editor Functions
    let biographyEditorInstance = null;
    let currentBiographyPersonId = null;

    function addBiography() {
        if (!currentProfilePersonId || !currentProfilePersonData) {
            alert("Please select a person first!");
            return;
        }
        currentBiographyPersonId = currentProfilePersonId;
        openBiographyModal();
    }

    function openBiographyModal() {
        if (!currentBiographyPersonId || !currentProfilePersonData) {
            return;
        }

        // Set modal title with person's name
        const personName =
            currentProfilePersonData.name ||
            currentProfilePersonData.first_name ||
            "Person";
        document.getElementById("biography-modal-title").textContent =
            personName + ": Biography";

        // Get current biography content
        const currentBiography = currentProfilePersonData.biography || "";

        // Show modal
        const modalOverlay = document.getElementById("biography-modal-overlay");
        modalOverlay.classList.add("active");

        // Initialize Quill editor if not already initialized
        if (biographyEditorInstance === null) {
            biographyEditorInstance = new Quill("#biography-editor", {
                theme: "snow",
                modules: {
                    toolbar: [
                        // First row: formatting and alignment
                        ["bold", "italic", "underline"],
                        [{ align: [] }],
                        [{ list: "ordered" }, { list: "bullet" }],
                        [{ indent: "-1" }, { indent: "+1" }],
                        ["blockquote", "code-block"],
                        // Second row: editing and insertion
                        ["link", "image"],
                        ["clean"],
                    ],
                },
                placeholder: "Start writing the biography...",
            });
        }

        // Set content (convert HTML to Delta format if needed)
        if (currentBiography) {
            // If biography contains HTML, convert it
            const tempDiv = document.createElement("div");
            tempDiv.innerHTML = currentBiography;
            biographyEditorInstance.root.innerHTML = currentBiography;
        } else {
            biographyEditorInstance.setText("");
        }
    }

    function closeBiographyModal() {
        document
            .getElementById("biography-modal-overlay")
            .classList.remove("active");
        if (biographyEditorInstance) {
            // Clear content but keep editor instance
            biographyEditorInstance.setText("");
        }
        currentBiographyPersonId = null;
    }

    function saveBiography(saveAndClose = false) {
        if (!currentBiographyPersonId) {
            alert("No person selected!");
            return;
        }

        if (!biographyEditorInstance) {
            alert("Editor not initialized!");
            return;
        }

        // Get HTML content from Quill
        const biographyContent = biographyEditorInstance.root.innerHTML;

        // Get CSRF token
        const csrfToken = document
            .querySelector('meta[name="csrf-token"]')
            .getAttribute("content");

        // Save biography via AJAX
        fetch(
            `https://familytree.hexafume.com/family-tree/${currentBiographyPersonId}/biography`,
            {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": csrfToken,
                    Accept: "application/json",
                },
                body: JSON.stringify({
                    biography: biographyContent,
                }),
            }
        )
            .then((response) => response.json())
            .then((data) => {
                if (data.success) {
                    // Update the person data in memory (both currentProfilePersonData and treeData)
                    if (currentProfilePersonData) {
                        currentProfilePersonData.biography = biographyContent;
                    }
                    // Also update in treeData array so it persists when switching persons
                    if (typeof treeData !== "undefined" && treeData) {
                        const personInTree = treeData.find(
                            (p) => p.id === currentBiographyPersonId
                        );
                        if (personInTree) {
                            personInTree.biography = biographyContent;
                        }
                    }

                    // Update the biography display in the profile sidebar
                    const biographyContentDiv = document.getElementById(
                        "profile-biography-content"
                    );
                    if (biographyContentDiv) {
                        // Strip Quill wrapper classes for display
                        const displayContent = biographyContent.replace(
                            /<p><br><\/p>/g,
                            ""
                        );
                        biographyContentDiv.innerHTML = displayContent || "";
                        biographyContentDiv.style.display = displayContent
                            ? "block"
                            : "none";
                    }

                    if (saveAndClose) {
                        closeBiographyModal();
                    }
                } else {
                    alert(
                        "Error saving biography: " +
                            (data.error || "Unknown error")
                    );
                }
            })
            .catch((error) => {
                console.error("Error saving biography:", error);
                alert("Error saving biography. Please try again.");
            });
    }

    function saveBiographyAndClose() {
        saveBiography(true);
    }

    function saveBiographyAndContinue() {
        saveBiography(false);
    }

    function addAnotherNote() {
        // This function can be extended to add multiple notes
        // For now, it's a placeholder
        alert("Add another note feature coming soon!");
    }

    function addFamilyMember() {
        if (currentProfilePersonData) {
            closeProfileSidebar();
            openBranchBuilder(currentProfilePersonData);
        }
    }

    // Facts Editor Functions
    let currentFactsPersonId = null;

    function addFact() {
        if (!currentProfilePersonId || !currentProfilePersonData) {
            alert("Please select a person first!");
            return;
        }
        currentFactsPersonId = currentProfilePersonId;
        openFactsModal();
    }

    function openFactsModal() {
        if (!currentFactsPersonId || !currentProfilePersonData) {
            return;
        }

        // Set modal title with person's name
        const personName =
            currentProfilePersonData.name ||
            currentProfilePersonData.first_name ||
            "Person";
        document.getElementById("facts-modal-title").textContent =
            personName + ": Facts";

        // Get current facts - ensure we get from the correct person and create a copy
        let currentFacts = [];
        if (
            currentProfilePersonData.facts &&
            Array.isArray(currentProfilePersonData.facts)
        ) {
            // Create a deep copy to avoid reference sharing
            currentFacts = currentProfilePersonData.facts.map((fact) => ({
                label: fact.label || "",
                value: fact.value || "",
            }));
        }

        // Also check treeData to ensure we have the latest facts
        if (typeof treeData !== "undefined" && treeData) {
            const personInTree = treeData.find(
                (p) => p.id === currentFactsPersonId
            );
            if (
                personInTree &&
                personInTree.facts &&
                Array.isArray(personInTree.facts)
            ) {
                // Use facts from treeData if available (more up-to-date)
                currentFacts = personInTree.facts.map((fact) => ({
                    label: fact.label || "",
                    value: fact.value || "",
                }));
            }
        }

        // Show modal
        const modalOverlay = document.getElementById("facts-modal-overlay");
        modalOverlay.classList.add("active");

        // Populate facts list
        const factsList = document.getElementById("facts-list");
        factsList.innerHTML = "";

        if (currentFacts.length > 0) {
            currentFacts.forEach((fact, index) => {
                addFactItemToDOM(fact.label || "", fact.value || "", index);
            });
        } else {
            // Add one empty fact item by default
            addFactItemToDOM("", "", 0);
        }
    }

    function addFactItemToDOM(label, value, index) {
        const factsList = document.getElementById("facts-list");
        const factItem = document.createElement("div");
        factItem.className = "fact-item";
        factItem.setAttribute("data-index", index);
        factItem.innerHTML = `
            <input
                type="text"
                class="fact-item-input fact-item-label"
                placeholder="Fact label (e.g., Occupation)"
                value="${label}"
            />
            <input
                type="text"
                class="fact-item-input fact-item-value"
                placeholder="Fact value"
                value="${value}"
            />
            <button
                type="button"
                class="fact-item-delete"
                onclick="removeFactItem(this)"
            >
                Delete
            </button>
        `;
        factsList.appendChild(factItem);
    }

    function addNewFactItem() {
        const factsList = document.getElementById("facts-list");
        const existingItems = factsList.querySelectorAll(".fact-item");
        const newIndex = existingItems.length;
        addFactItemToDOM("", "", newIndex);
    }

    function removeFactItem(button) {
        const factItem = button.closest(".fact-item");
        factItem.remove();
    }

    function closeFactsModal() {
        document
            .getElementById("facts-modal-overlay")
            .classList.remove("active");
        currentFactsPersonId = null;
    }

    function saveFacts(saveAndClose = false) {
        if (!currentFactsPersonId) {
            alert("No person selected!");
            return;
        }

        // Collect all facts from the form
        const factsList = document.getElementById("facts-list");
        const factItems = factsList.querySelectorAll(".fact-item");
        const facts = [];

        factItems.forEach((item) => {
            const labelInput = item.querySelector(".fact-item-label");
            const valueInput = item.querySelector(".fact-item-value");
            const label = labelInput.value.trim();
            const value = valueInput.value.trim();

            // Only add facts that have both label and value
            if (label && value) {
                facts.push({ label, value });
            }
        });

        // Get CSRF token
        const csrfToken = document
            .querySelector('meta[name="csrf-token"]')
            .getAttribute("content");

        // Save facts via AJAX
        fetch(`https://familytree.hexafume.com/family-tree/${currentFactsPersonId}/facts`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-TOKEN": csrfToken,
                Accept: "application/json",
            },
            body: JSON.stringify({
                facts: facts,
            }),
        })
            .then((response) => response.json())
            .then((data) => {
                if (data.success) {
                    // Create a deep copy of facts array to avoid reference sharing
                    const factsCopy = facts.map((fact) => ({
                        label: fact.label,
                        value: fact.value,
                    }));

                    // Update in treeData array first (source of truth)
                    if (typeof treeData !== "undefined" && treeData) {
                        const personInTree = treeData.find(
                            (p) => p.id === currentFactsPersonId
                        );
                        if (personInTree) {
                            personInTree.facts = factsCopy;

                            // Update currentProfilePersonData from treeData to keep them in sync
                            if (
                                currentProfilePersonId === currentFactsPersonId
                            ) {
                                currentProfilePersonData = {
                                    ...personInTree,
                                    facts: factsCopy.map((f) => ({ ...f })),
                                };
                            }
                        }
                    } else if (currentProfilePersonData) {
                        // Fallback if treeData not available
                        currentProfilePersonData.facts = factsCopy;
                    }

                    // Reload facts display using the updated data from treeData
                    if (typeof loadFacts === "function") {
                        if (typeof treeData !== "undefined" && treeData) {
                            const personInTree = treeData.find(
                                (p) => p.id === currentFactsPersonId
                            );
                            if (personInTree) {
                                loadFacts(personInTree);
                            }
                        } else if (currentProfilePersonData) {
                            loadFacts(currentProfilePersonData);
                        }
                    }

                    if (saveAndClose) {
                        closeFactsModal();
                    }
                } else {
                    alert(
                        "Error saving facts: " + (data.error || "Unknown error")
                    );
                }
            })
            .catch((error) => {
                console.error("Error saving facts:", error);
                alert("Error saving facts. Please try again.");
            });
    }

    function saveFactsAndClose() {
        saveFacts(true);
    }

    function saveFactsAndContinue() {
        saveFacts(false);
    }

    function orderDNATest() {
        alert("DNA test ordering coming soon!");
    }

    // Function to add parent from a person node
    function addParentFromNode(personData, parentType) {
        const personName = personData.name || personData.first_name || "Person";
        let title = "";
        let gender = "";

        if (parentType === "father") {
            title = `Add father of ${personName}`;
            gender = "male";
        } else if (parentType === "mother") {
            title = `Add mother of ${personName}`;
            gender = "female";
        }

        // Set modal title
        document.getElementById("add-person-modal-title").textContent = title;

        // Set gender radio button
        document.getElementById(`gender_${gender}`).checked = true;

        // Set parent relationship
        document.getElementById("modal_parent_id").value = personData.id;
        document.getElementById("modal_relationship").value = parentType;

        // Clear other relationship fields
        document.getElementById("modal_sibling_id").value = "";
        document.getElementById("modal_spouse_id").value = "";

        // Open the modal
        openAddPersonModal();
    }

    // Function to add relationship from empty tree state
    function addRelationshipFromEmpty(relationshipType) {
        let title = "";
        let gender = "";

        // Set modal title and default gender based on relationship type
        switch (relationshipType) {
            case "father":
                title = "Add father";
                gender = "male";
                break;
            case "mother":
                title = "Add mother";
                gender = "female";
                break;
        }

        // Set modal title
        document.getElementById("add-person-modal-title").textContent = title;

        // Set gender radio button
        document.getElementById(`gender_${gender}`).checked = true;

        // Clear relationship fields
        document.getElementById("modal_parent_id").value = "";
        document.getElementById("modal_sibling_id").value = "";
        document.getElementById("modal_spouse_id").value = "";
        document.getElementById("modal_relationship").value = relationshipType;

        // Open the modal
        openAddPersonModal();
    }

    function addRelationship(relationshipType) {
        if (!selectedPersonData) return;

        const personId = selectedPersonData.id;
        const personName =
            selectedPersonData.name ||
            selectedPersonData.first_name ||
            "Person";
        let title = "";
        let gender = "";
        let relationshipLabel = "";

        // Set modal title and default gender based on relationship type
        switch (relationshipType) {
            case "father":
                title = `Add father of ${personName}`;
                gender = "male";
                relationshipLabel = "father";
                document.getElementById("modal_parent_id").value = personId;
                document.getElementById("modal_relationship").value = "father";
                break;
            case "mother":
                title = `Add mother of ${personName}`;
                gender = "female";
                relationshipLabel = "mother";
                document.getElementById("modal_parent_id").value = personId;
                document.getElementById("modal_relationship").value = "mother";
                break;
            case "brother":
                title = `Add brother of ${personName}`;
                gender = "male";
                relationshipLabel = "brother";
                document.getElementById("modal_sibling_id").value = personId;
                document.getElementById("modal_relationship").value = "brother";
                break;
            case "sister":
                title = `Add sister of ${personName}`;
                gender = "female";
                relationshipLabel = "sister";
                document.getElementById("modal_sibling_id").value = personId;
                document.getElementById("modal_relationship").value = "sister";
                break;
            case "partner":
                // Check if person already has partners/spouses
                const hasExistingPartners =
                    selectedPersonData.spouses &&
                    selectedPersonData.spouses.length > 0;
                title = hasExistingPartners
                    ? `Add another partner of ${personName}`
                    : `Add partner of ${personName}`;
                gender = "female";
                relationshipLabel = "partner";
                document.getElementById("modal_spouse_id").value = personId;
                document.getElementById("modal_relationship").value = "partner";
                break;
            case "son":
                title = `Add son of ${personName}`;
                gender = "male";
                relationshipLabel = "son";
                document.getElementById("modal_parent_id").value = personId;
                document.getElementById("modal_relationship").value = "son";

                // Debug: Log selectedPersonData to see its structure
                console.log(
                    "Adding son - selectedPersonData:",
                    selectedPersonData
                );
                console.log(
                    "selectedPersonData.spouses:",
                    selectedPersonData.spouses
                );
                console.log(
                    "Type of spouses:",
                    typeof selectedPersonData.spouses
                );
                console.log(
                    "Is array?",
                    Array.isArray(selectedPersonData.spouses)
                );

                // If the person has a partner/spouse, add them as a parent too
                // Check both spouses array and also check if it's stored differently
                let sonPartnerId = null;

                if (
                    selectedPersonData.spouses &&
                    Array.isArray(selectedPersonData.spouses) &&
                    selectedPersonData.spouses.length > 0
                ) {
                    sonPartnerId = selectedPersonData.spouses[0];
                    console.log(
                        "Found partner in spouses array:",
                        sonPartnerId
                    );
                } else if (
                    selectedPersonData.spouses &&
                    typeof selectedPersonData.spouses === "string"
                ) {
                    // If spouses is a string (comma-separated IDs), parse it
                    const spouseIds = selectedPersonData.spouses
                        .split(",")
                        .map((id) => id.trim())
                        .filter((id) => id);
                    if (spouseIds.length > 0) {
                        sonPartnerId = spouseIds[0];
                        console.log(
                            "Found partner in spouses string:",
                            sonPartnerId
                        );
                    }
                } else {
                    // Try to find partner in treeData
                    const personInTree = treeData.find(
                        (p) => p.id === personId
                    );
                    if (
                        personInTree &&
                        personInTree.spouses &&
                        personInTree.spouses.length > 0
                    ) {
                        sonPartnerId = personInTree.spouses[0];
                        console.log("Found partner in treeData:", sonPartnerId);
                    }
                }

                if (sonPartnerId) {
                    // Remove any existing partner parent input
                    const existingPartnerParent = document.getElementById(
                        "modal_partner_parent_id"
                    );
                    if (existingPartnerParent) {
                        existingPartnerParent.remove();
                    }

                    // Create a new hidden input for the partner as parent
                    const partnerParentInput = document.createElement("input");
                    partnerParentInput.type = "hidden";
                    partnerParentInput.id = "modal_partner_parent_id";
                    partnerParentInput.name = "parent_ids[]";
                    partnerParentInput.value = sonPartnerId;

                    // Insert it after the main parent_id input
                    const mainParentInput =
                        document.getElementById("modal_parent_id");
                    mainParentInput.parentNode.insertBefore(
                        partnerParentInput,
                        mainParentInput.nextSibling
                    );

                    console.log(
                        `✅ Added partner (ID: ${sonPartnerId}) as parent for new ${relationshipLabel}`
                    );
                    console.log("Form will submit with parent_ids:", [
                        personId,
                        sonPartnerId,
                    ]);
                } else {
                    console.log("❌ No partner found for person ID:", personId);
                }
                break;
            case "daughter":
                title = `Add daughter of ${personName}`;
                gender = "female";
                relationshipLabel = "daughter";
                document.getElementById("modal_parent_id").value = personId;
                document.getElementById("modal_relationship").value =
                    "daughter";

                // Debug: Log selectedPersonData to see its structure
                console.log(
                    "Adding daughter - selectedPersonData:",
                    selectedPersonData
                );
                console.log(
                    "selectedPersonData.spouses:",
                    selectedPersonData.spouses
                );

                // If the person has a partner/spouse, add them as a parent too
                // Check both spouses array and also check if it's stored differently
                let daughterPartnerId = null;

                if (
                    selectedPersonData.spouses &&
                    Array.isArray(selectedPersonData.spouses) &&
                    selectedPersonData.spouses.length > 0
                ) {
                    daughterPartnerId = selectedPersonData.spouses[0];
                    console.log(
                        "Found partner in spouses array:",
                        daughterPartnerId
                    );
                } else if (
                    selectedPersonData.spouses &&
                    typeof selectedPersonData.spouses === "string"
                ) {
                    // If spouses is a string (comma-separated IDs), parse it
                    const spouseIds = selectedPersonData.spouses
                        .split(",")
                        .map((id) => id.trim())
                        .filter((id) => id);
                    if (spouseIds.length > 0) {
                        daughterPartnerId = spouseIds[0];
                        console.log(
                            "Found partner in spouses string:",
                            daughterPartnerId
                        );
                    }
                } else {
                    // Try to find partner in treeData
                    const personInTree = treeData.find(
                        (p) => p.id === personId
                    );
                    if (
                        personInTree &&
                        personInTree.spouses &&
                        personInTree.spouses.length > 0
                    ) {
                        daughterPartnerId = personInTree.spouses[0];
                        console.log(
                            "Found partner in treeData:",
                            daughterPartnerId
                        );
                    }
                }

                if (daughterPartnerId) {
                    // Remove any existing partner parent input
                    const existingPartnerParent = document.getElementById(
                        "modal_partner_parent_id"
                    );
                    if (existingPartnerParent) {
                        existingPartnerParent.remove();
                    }

                    // Create a new hidden input for the partner as parent
                    const partnerParentInput = document.createElement("input");
                    partnerParentInput.type = "hidden";
                    partnerParentInput.id = "modal_partner_parent_id";
                    partnerParentInput.name = "parent_ids[]";
                    partnerParentInput.value = daughterPartnerId;

                    // Insert it after the main parent_id input
                    const mainParentInput =
                        document.getElementById("modal_parent_id");
                    mainParentInput.parentNode.insertBefore(
                        partnerParentInput,
                        mainParentInput.nextSibling
                    );

                    console.log(
                        `✅ Added partner (ID: ${daughterPartnerId}) as parent for new ${relationshipLabel}`
                    );
                    console.log("Form will submit with parent_ids:", [
                        personId,
                        daughterPartnerId,
                    ]);
                } else {
                    console.log("❌ No partner found for person ID:", personId);
                }
                break;
        }

        // Set modal title
        document.getElementById("add-person-modal-title").textContent = title;

        // Set gender radio button
        document.getElementById(`gender_${gender}`).checked = true;
        if (gender === "female") {
            document.getElementById("gender_female").checked = true;
        } else if (gender === "male") {
            document.getElementById("gender_male").checked = true;
        }

        // Pre-fill maiden name with last name if available
        const lastName = selectedPersonData.last_name || "";
        if (lastName) {
            document.getElementById("modal_last_name").value = lastName;
        }

        // Clear other relationship fields
        if (
            relationshipType !== "father" &&
            relationshipType !== "mother" &&
            relationshipType !== "son" &&
            relationshipType !== "daughter"
        ) {
            document.getElementById("modal_parent_id").value = "";
            // Remove partner parent input if it exists
            const existingPartnerParent = document.getElementById(
                "modal_partner_parent_id"
            );
            if (existingPartnerParent) {
                existingPartnerParent.remove();
            }
        }
        if (relationshipType !== "brother" && relationshipType !== "sister") {
            document.getElementById("modal_sibling_id").value = "";
        }
        if (relationshipType !== "partner") {
            document.getElementById("modal_spouse_id").value = "";
        }

        // IMPORTANT: For siblings, make sure parent_ids is empty (siblings share parents, but we handle that on the backend)
        if (relationshipType === "brother" || relationshipType === "sister") {
            document.getElementById("modal_parent_id").value = "";
        }

        // Close branch builder and open add person modal
        closeBranchBuilder();
        openAddPersonModal();
    }

    function openAddPersonModal() {
        document
            .getElementById("add-person-modal-overlay")
            .classList.add("active");
    }

    function closeAddPersonModal() {
        document
            .getElementById("add-person-modal-overlay")
            .classList.remove("active");
        // Reset form
        document.getElementById("add-person-form").reset();
        document.getElementById("modal_parent_id").value = "";
        document.getElementById("modal_sibling_id").value = "";
        document.getElementById("modal_spouse_id").value = "";
        document.getElementById("modal_relationship").value = "";
        document.getElementById("modal_birth_date").value = "";
        document.getElementById("modal_death_date").value = "";

        // Remove partner parent input if it exists
        const existingPartnerParent = document.getElementById(
            "modal_partner_parent_id"
        );
        if (existingPartnerParent) {
            existingPartnerParent.remove();
        }

        // Reset status to Living
        document.getElementById("status_living").checked = true;
        toggleDeathFields();

        // Hide invite section
        document.getElementById("invite-section").style.display = "none";

        // Re-enable disabled fields
        const birthMonth = document.getElementById("birth_month");
        const birthDay = document.getElementById("birth_day");
        const birthYear = document.getElementById("birth_year");
        const birthDateType = document.getElementById("birth_date_type");
        if (birthMonth) birthMonth.disabled = false;
        if (birthDay) birthDay.disabled = false;
        if (birthYear) birthYear.disabled = false;
        if (birthDateType) birthDateType.disabled = false;
    }

    // Close modal when clicking outside
    document.addEventListener("click", function (event) {
        const overlay = document.getElementById("add-person-modal-overlay");
        if (event.target === overlay) {
            closeAddPersonModal();
        }

        const biographyOverlay = document.getElementById(
            "biography-modal-overlay"
        );
        if (event.target === biographyOverlay) {
            closeBiographyModal();
        }

        const factsOverlay = document.getElementById("facts-modal-overlay");
        if (event.target === factsOverlay) {
            closeFactsModal();
        }
    });

    // Toggle dropdown menu
    function toggleDropdown(fieldId) {
        const input = document.getElementById(`modal_${fieldId}`);
        const wrapper = input.closest(".select-wrapper");
        const menu =
            wrapper.querySelector(".dropdown-menu") ||
            document.getElementById(`${fieldId}-dropdown`);

        // Close all other dropdowns
        document.querySelectorAll(".dropdown-menu").forEach((m) => {
            if (m !== menu) m.classList.remove("show");
        });

        if (menu) {
            menu.classList.toggle("show");
        } else {
            // Create dropdown menu if it doesn't exist
            const datalist =
                document.getElementById(`${fieldId}-options`) ||
                document.getElementById(
                    `${fieldId.replace("birth_", "")}-options`
                ) ||
                document.getElementById("birth-date-type-options") ||
                document.getElementById("month-options") ||
                document.getElementById("day-options") ||
                document.getElementById("year-options");

            if (datalist) {
                const newMenu = document.createElement("div");
                newMenu.className = "dropdown-menu";
                datalist.querySelectorAll("option").forEach((option) => {
                    const item = document.createElement("div");
                    item.className = "dropdown-item";
                    item.textContent = option.value;
                    item.onclick = function () {
                        input.value = option.value;
                        newMenu.classList.remove("show");
                    };
                    newMenu.appendChild(item);
                });
                wrapper.appendChild(newMenu);
                newMenu.classList.add("show");
            }
        }
    }

    // Select dropdown option
    function selectDropdownOption(fieldId, value) {
        const input = document.getElementById(`modal_${fieldId}`);
        if (input) {
            input.value = value;
        }
        // Close dropdown
        const menu = document.getElementById(`${fieldId}-dropdown`);
        if (menu) {
            menu.classList.remove("show");
        }
    }

    // Close dropdowns when clicking outside
    document.addEventListener("click", function (event) {
        if (!event.target.closest(".select-wrapper")) {
            document.querySelectorAll(".dropdown-menu").forEach((menu) => {
                menu.classList.remove("show");
            });
        }
    });

    // Handle form submission - convert birth and death date inputs to single date fields
    const addPersonForm = document.getElementById("add-person-form");
    if (addPersonForm) {
        addPersonForm.addEventListener("submit", function (e) {
            console.log("=== FORM SUBMISSION STARTED ===");
            console.log("Form submitting...");

            // Log relationship data
            console.log(
                "Sibling ID:",
                document.getElementById("modal_sibling_id")?.value ||
                    "NOT FOUND"
            );
            console.log(
                "Parent ID:",
                document.getElementById("modal_parent_id")?.value || "NOT FOUND"
            );
            console.log(
                "Spouse ID:",
                document.getElementById("modal_spouse_id")?.value || "NOT FOUND"
            );
            console.log(
                "Relationship:",
                document.getElementById("modal_relationship")?.value ||
                    "NOT FOUND"
            );
            console.log(
                "First Name:",
                document.getElementById("modal_first_name")?.value ||
                    "NOT FOUND"
            );
            console.log(
                "Gender:",
                document.querySelector('input[name="gender"]:checked')?.value ||
                    "NOT FOUND"
            );

            // Convert birth date
            const birthMonthInput = document.getElementById("birth_month");
            const birthDayInput = document.getElementById("birth_day");
            const birthYearInput = document.getElementById("birth_year");

            const birthMonth = birthMonthInput.value;
            const birthDay = birthDayInput.value;
            const birthYear = birthYearInput.value;

            if (birthMonth && birthDay && birthYear) {
                let monthNum = parseInt(birthMonth);

                // If month is not a number, try to convert from month name
                if (isNaN(monthNum)) {
                    const monthNames = [
                        "January",
                        "February",
                        "March",
                        "April",
                        "May",
                        "June",
                        "July",
                        "August",
                        "September",
                        "October",
                        "November",
                        "December",
                    ];
                    monthNum = monthNames.indexOf(birthMonth) + 1;
                }

                const dayNum = parseInt(birthDay);
                const yearNum = parseInt(birthYear);

                if (
                    monthNum &&
                    monthNum >= 1 &&
                    monthNum <= 12 &&
                    dayNum &&
                    dayNum >= 1 &&
                    dayNum <= 31 &&
                    yearNum &&
                    yearNum >= 1000
                ) {
                    const dateStr = `${yearNum}-${String(monthNum).padStart(
                        2,
                        "0"
                    )}-${String(dayNum).padStart(2, "0")}`;
                    document.getElementById("modal_birth_date").value = dateStr;
                }
            }

            // Convert death date if deceased
            const statusDeceased = document.getElementById("status_deceased");
            if (statusDeceased && statusDeceased.checked) {
                const deathMonthInput = document.getElementById("death_month");
                const deathDayInput = document.getElementById("death_day");
                const deathYearInput = document.getElementById("death_year");

                const deathMonth = deathMonthInput.value;
                const deathDay = deathDayInput.value;
                const deathYear = deathYearInput.value;

                if (deathMonth && deathDay && deathYear) {
                    let monthNum = parseInt(deathMonth);

                    // If month is not a number, try to convert from month name
                    if (isNaN(monthNum)) {
                        const monthNames = [
                            "January",
                            "February",
                            "March",
                            "April",
                            "May",
                            "June",
                            "July",
                            "August",
                            "September",
                            "October",
                            "November",
                            "December",
                        ];
                        monthNum = monthNames.indexOf(deathMonth) + 1;
                    }

                    const dayNum = parseInt(deathDay);
                    const yearNum = parseInt(deathYear);

                    if (
                        monthNum &&
                        monthNum >= 1 &&
                        monthNum <= 12 &&
                        dayNum &&
                        dayNum >= 1 &&
                        dayNum <= 31 &&
                        yearNum &&
                        yearNum >= 1000
                    ) {
                        const dateStr = `${yearNum}-${String(monthNum).padStart(
                            2,
                            "0"
                        )}-${String(dayNum).padStart(2, "0")}`;
                        document.getElementById("modal_death_date").value =
                            dateStr;
                    }
                }
            }

            // Validate required fields before submitting
            const firstName = document
                .getElementById("modal_first_name")
                ?.value?.trim();
            if (!firstName) {
                e.preventDefault();
                alert("Please enter a first name. This field is required.");
                console.error(
                    "Form submission prevented: First name is required"
                );
                return false;
            }

            // Log all form values before submission
            const formData = new FormData(this);
            console.log("=== Form Submission Data ===");
            for (let [key, value] of formData.entries()) {
                console.log(key + ":", value);
            }
            console.log("=== End Form Data ===");

            // IMPORTANT: Don't prevent default - allow form to submit normally
            console.log("Form submission completed, allowing normal submit");
            // Form will submit normally via POST to the server
            return true; // Allow form to submit
        });

        // Also add click handler to submit button as backup
        const submitBtn = document.getElementById("submit-add-person-btn");
        if (submitBtn) {
            submitBtn.addEventListener("click", function (e) {
                console.log("Submit button clicked directly");
                const form = document.getElementById("add-person-form");
                if (form) {
                    const firstName = document
                        .getElementById("modal_first_name")
                        ?.value?.trim();
                    if (!firstName) {
                        e.preventDefault();
                        alert(
                            "Please enter a first name. This field is required."
                        );
                        return false;
                    }
                    console.log("Button click: Form will submit");
                }
            });
        }
    } else {
        console.error('Form with id "add-person-form" not found!');
    }

    function openBranchBuilderFromHeader() {
        // If no person selected, show default
        if (treeData.length > 0 && root) {
            // Find the root node or first person
            const firstNode = root.descendants()[0];
            if (firstNode) {
                openBranchBuilder(firstNode.data);
            } else {
                window.location.href = 'https://familytree.hexafume.com/family-tree/create';
            }
        } else {
            window.location.href = 'https://familytree.hexafume.com/family-tree/create';
        }
    }

    function showBranchBuilder() {
        openBranchBuilderFromHeader();
    }

    // Close modal when clicking outside
    document.addEventListener("click", function (event) {
        const overlay = document.getElementById("branch-builder-overlay");
        if (event.target === overlay) {
            closeBranchBuilder();
        }
    });

    // Track which person's branches are hidden (even if they have no ancestors yet)
    if (!window.hiddenPersonBranches) {
        window.hiddenPersonBranches = new Set();
    }

    // Load hidden state from localStorage on page load
    // Validates person IDs against current treeData to prevent stale data issues
    function loadHiddenStateFromStorage() {
        try {
            // Get all valid person IDs from current tree data (if available)
            // If treeData is not loaded yet, we'll skip validation and validate later
            const validPersonIds =
                treeData && treeData.length > 0
                    ? new Set(treeData.map((p) => p.id))
                    : null;

            const savedHiddenAncestorIds = localStorage.getItem(
                "familyTree_hiddenAncestorIds"
            );
            const savedHiddenAncestorsByPerson = localStorage.getItem(
                "familyTree_hiddenAncestorsByPerson"
            );
            const savedHiddenPersonBranches = localStorage.getItem(
                "familyTree_hiddenPersonBranches"
            );

            // Early validation: Check for stale data using checksum
            if (validPersonIds && treeData.length > 0) {
                const savedChecksum = localStorage.getItem(
                    "familyTree_dataChecksum"
                );
                if (savedChecksum) {
                    const currentPersonIdsArray =
                        Array.from(validPersonIds).sort();
                    const currentChecksum = currentPersonIdsArray.join(",");

                    // If checksums don't match, data structure has changed - clear old data
                    if (savedChecksum !== currentChecksum) {
                        console.warn(
                            "Tree data structure changed (checksum mismatch) - clearing stale localStorage data"
                        );
                        localStorage.removeItem("familyTree_hiddenAncestorIds");
                        localStorage.removeItem(
                            "familyTree_hiddenAncestorsByPerson"
                        );
                        localStorage.removeItem(
                            "familyTree_hiddenPersonBranches"
                        );
                        localStorage.removeItem("familyTree_dataChecksum");
                        localStorage.removeItem("familyTree_lastSaveTime");
                        return; // Exit early, don't load stale data
                    }
                }

                // Check if savedHiddenAncestorIds contains too many IDs
                if (savedHiddenAncestorIds) {
                    try {
                        const ids = JSON.parse(savedHiddenAncestorIds);
                        if (
                            Array.isArray(ids) &&
                            ids.length > treeData.length * 0.9
                        ) {
                            console.warn(
                                `Suspicious localStorage data: ${
                                    ids.length
                                } hidden IDs for ${
                                    treeData.length
                                } total people (${(
                                    (ids.length / treeData.length) *
                                    100
                                ).toFixed(1)}%) - clearing localStorage`
                            );
                            localStorage.removeItem(
                                "familyTree_hiddenAncestorIds"
                            );
                            localStorage.removeItem(
                                "familyTree_hiddenAncestorsByPerson"
                            );
                            localStorage.removeItem(
                                "familyTree_hiddenPersonBranches"
                            );
                            localStorage.removeItem("familyTree_dataChecksum");
                            localStorage.removeItem("familyTree_lastSaveTime");
                            return; // Exit early, don't load corrupted data
                        }
                    } catch (e) {
                        // If parsing fails, clear it
                        console.warn(
                            "Failed to parse hiddenAncestorIds - clearing localStorage"
                        );
                        localStorage.removeItem("familyTree_hiddenAncestorIds");
                        localStorage.removeItem(
                            "familyTree_hiddenAncestorsByPerson"
                        );
                        localStorage.removeItem(
                            "familyTree_hiddenPersonBranches"
                        );
                        localStorage.removeItem("familyTree_dataChecksum");
                        localStorage.removeItem("familyTree_lastSaveTime");
                        return;
                    }
                }
            }

            if (savedHiddenAncestorIds) {
                let ids;
                try {
                    ids = JSON.parse(savedHiddenAncestorIds);
                    // Ensure it's an array
                    if (!Array.isArray(ids)) {
                        console.warn(
                            "Invalid format in localStorage - expected array, got:",
                            typeof ids
                        );
                        ids = [];
                    }
                } catch (e) {
                    console.error(
                        "Error parsing hidden ancestor IDs from localStorage:",
                        e
                    );
                    ids = [];
                }

                // Filter out invalid IDs that don't exist in current tree data (if validation is available)
                const validIds = validPersonIds
                    ? ids.filter((id) => {
                          // Ensure ID is a valid number
                          const numId =
                              typeof id === "number" ? id : parseInt(id);
                          return !isNaN(numId) && validPersonIds.has(numId);
                      })
                    : ids.filter((id) => {
                          // Even without validation, ensure IDs are valid numbers
                          const numId =
                              typeof id === "number" ? id : parseInt(id);
                          return !isNaN(numId);
                      });

                window.hiddenAncestorIds = new Set(validIds);

                // If some IDs were filtered out, update localStorage
                if (validPersonIds && validIds.length !== ids.length) {
                    console.log(
                        `Cleaned up ${
                            ids.length - validIds.length
                        } stale ancestor IDs from localStorage`
                    );
                    if (validIds.length > 0) {
                        localStorage.setItem(
                            "familyTree_hiddenAncestorIds",
                            JSON.stringify(validIds)
                        );
                    } else {
                        localStorage.removeItem("familyTree_hiddenAncestorIds");
                    }
                }

                // Additional safety: If more than 50% of IDs are invalid, clear everything (likely corrupted)
                if (
                    validPersonIds &&
                    ids.length > 0 &&
                    validIds.length < ids.length * 0.5
                ) {
                    console.warn(
                        `More than 50% of hidden ancestor IDs are invalid (${validIds.length}/${ids.length}) - clearing all hidden state to prevent corruption`
                    );
                    localStorage.removeItem("familyTree_hiddenAncestorIds");
                    localStorage.removeItem(
                        "familyTree_hiddenAncestorsByPerson"
                    );
                    localStorage.removeItem("familyTree_hiddenPersonBranches");
                    window.hiddenAncestorIds = new Set();
                    window.hiddenAncestorsByPerson = new Map();
                    window.hiddenPersonBranches = new Set();
                }

                console.log(
                    "Loaded hidden ancestor IDs from storage:",
                    Array.from(window.hiddenAncestorIds)
                );
            }

            if (savedHiddenAncestorsByPerson) {
                const mapData = JSON.parse(savedHiddenAncestorsByPerson);
                window.hiddenAncestorsByPerson = new Map();
                let hasStaleData = false;

                for (let [personId, ancestorIds] of Object.entries(mapData)) {
                    const personIdNum = parseInt(personId);
                    // Only validate if validPersonIds is available (treeData is loaded)
                    if (validPersonIds) {
                        // Only add if the person ID exists in current tree data
                        if (validPersonIds.has(personIdNum)) {
                            // Filter ancestor IDs to only include valid ones
                            const validAncestorIds = Array.isArray(ancestorIds)
                                ? ancestorIds.filter((id) =>
                                      validPersonIds.has(id)
                                  )
                                : Array.from(ancestorIds).filter((id) =>
                                      validPersonIds.has(id)
                                  );

                            if (validAncestorIds.length > 0) {
                                window.hiddenAncestorsByPerson.set(
                                    personIdNum,
                                    new Set(validAncestorIds)
                                );
                            }

                            // Check if we filtered out any ancestor IDs
                            const originalCount = Array.isArray(ancestorIds)
                                ? ancestorIds.length
                                : ancestorIds.size;
                            if (validAncestorIds.length !== originalCount) {
                                hasStaleData = true;
                            }
                        } else {
                            hasStaleData = true;
                        }
                    } else {
                        // No validation available yet, load all data (will be validated later)
                        const ancestorIdsArray = Array.isArray(ancestorIds)
                            ? ancestorIds
                            : Array.from(ancestorIds);
                        window.hiddenAncestorsByPerson.set(
                            personIdNum,
                            new Set(ancestorIdsArray)
                        );
                    }
                }

                // Update localStorage if we filtered out stale data
                if (validPersonIds && hasStaleData) {
                    const cleanedMapData = {};
                    for (let [
                        personId,
                        ancestorIds,
                    ] of window.hiddenAncestorsByPerson.entries()) {
                        cleanedMapData[personId] = Array.from(ancestorIds);
                    }
                    if (Object.keys(cleanedMapData).length > 0) {
                        localStorage.setItem(
                            "familyTree_hiddenAncestorsByPerson",
                            JSON.stringify(cleanedMapData)
                        );
                    } else {
                        localStorage.removeItem(
                            "familyTree_hiddenAncestorsByPerson"
                        );
                    }
                }

                console.log(
                    "Loaded hidden ancestors by person from storage:",
                    Array.from(window.hiddenAncestorsByPerson.keys())
                );
            }

            if (savedHiddenPersonBranches) {
                const branches = JSON.parse(savedHiddenPersonBranches);
                // Filter out invalid person IDs (if validation is available)
                const validBranches = validPersonIds
                    ? branches.filter((id) => validPersonIds.has(id))
                    : branches;
                window.hiddenPersonBranches = new Set(validBranches);

                // If some IDs were filtered out, update localStorage
                if (
                    validPersonIds &&
                    validBranches.length !== branches.length
                ) {
                    console.log(
                        `Cleaned up ${
                            branches.length - validBranches.length
                        } stale person branch IDs from localStorage`
                    );
                    if (validBranches.length > 0) {
                        localStorage.setItem(
                            "familyTree_hiddenPersonBranches",
                            JSON.stringify(validBranches)
                        );
                    } else {
                        localStorage.removeItem(
                            "familyTree_hiddenPersonBranches"
                        );
                    }
                }

                console.log(
                    "Loaded hidden person branches from storage:",
                    Array.from(window.hiddenPersonBranches)
                );
            }

            // Load father branch toggle state - but reset to false on page load to ensure mother card is visible
            // The toggle state will be set when user clicks the view button
            window.fatherBranchToggled = false;
            console.log(
                "Reset father branch toggle state to false on page load (mother card will be visible)"
            );
        } catch (e) {
            console.error("Error loading hidden state from storage:", e);
            // If there's an error, clear ALL localStorage data to prevent corruption
            console.log("Clearing potentially corrupted localStorage data...");
            localStorage.removeItem("familyTree_hiddenAncestorIds");
            localStorage.removeItem("familyTree_hiddenAncestorsByPerson");
            localStorage.removeItem("familyTree_hiddenPersonBranches");
            // Reset to empty sets
            window.hiddenAncestorIds = new Set();
            window.hiddenAncestorsByPerson = new Map();
            window.hiddenPersonBranches = new Set();
            localStorage.removeItem("familyTree_hiddenAncestorsByPerson");
            localStorage.removeItem("familyTree_hiddenPersonBranches");
            // Initialize empty sets
            window.hiddenAncestorIds = new Set();
            window.hiddenAncestorsByPerson = new Map();
            window.hiddenPersonBranches = new Set();
        }
    }

    // Debounce timer for saving zoom state
    let zoomSaveTimeout = null;

    // Save zoom/pan state to localStorage (with debounce to avoid excessive saves)
    function saveZoomStateToStorage(transform) {
        try {
            if (!transform) return;

            // Clear existing timeout
            if (zoomSaveTimeout) {
                clearTimeout(zoomSaveTimeout);
            }

            // Debounce: save after 500ms of no zoom/pan activity
            zoomSaveTimeout = setTimeout(() => {
                const zoomState = {
                    x: transform.x,
                    y: transform.y,
                    k: transform.k, // scale
                    timestamp: Date.now(),
                };

                localStorage.setItem(
                    "familyTree_zoomState",
                    JSON.stringify(zoomState)
                );
                console.log("Zoom state saved:", zoomState);
            }, 500);
        } catch (e) {
            console.error("Error saving zoom state:", e);
        }
    }

    // Load zoom/pan state from localStorage
    function loadZoomStateFromStorage() {
        try {
            const savedZoomState = localStorage.getItem("familyTree_zoomState");
            if (!savedZoomState) {
                return false;
            }

            const zoomState = JSON.parse(savedZoomState);

            // Validate the saved state
            if (
                typeof zoomState.x !== "number" ||
                typeof zoomState.y !== "number" ||
                typeof zoomState.k !== "number" ||
                isNaN(zoomState.x) ||
                isNaN(zoomState.y) ||
                isNaN(zoomState.k) ||
                zoomState.k < 0.1 ||
                zoomState.k > 3
            ) {
                console.warn("Invalid zoom state in localStorage, clearing it");
                localStorage.removeItem("familyTree_zoomState");
                return false;
            }

            // Apply the saved transform
            if (svg && zoom && !svg.empty()) {
                const transform = d3.zoomIdentity
                    .translate(zoomState.x, zoomState.y)
                    .scale(zoomState.k);

                // Use immediate transform (no transition) to avoid conflicts
                svg.call(zoom.transform, transform);

                console.log("Zoom state loaded:", zoomState);
                return true;
            } else {
                console.warn("Cannot load zoom state: svg or zoom not ready", {
                    svg: !!svg,
                    zoom: !!zoom,
                    svgEmpty: svg ? svg.empty() : "N/A",
                });
            }

            return false;
        } catch (e) {
            console.error("Error loading zoom state:", e);
            localStorage.removeItem("familyTree_zoomState");
            return false;
        }
    }

    // Save hidden state to localStorage
    function saveHiddenStateToStorage() {
        try {
            // CRITICAL: Validate all data before saving to prevent corruption
            // Only save IDs that exist in current treeData
            const validPersonIds =
                treeData && treeData.length > 0
                    ? new Set(treeData.map((p) => p.id))
                    : null;

            // Validate and save hiddenAncestorIds
            if (window.hiddenAncestorIds && window.hiddenAncestorIds.size > 0) {
                let idsToSave = Array.from(window.hiddenAncestorIds);

                // Filter out invalid IDs before saving
                if (validPersonIds) {
                    idsToSave = idsToSave.filter((id) => {
                        const numId =
                            typeof id === "number" ? id : parseInt(id);
                        return !isNaN(numId) && validPersonIds.has(numId);
                    });
                } else {
                    // Even without treeData, ensure IDs are valid numbers
                    idsToSave = idsToSave.filter((id) => {
                        const numId =
                            typeof id === "number" ? id : parseInt(id);
                        return !isNaN(numId);
                    });
                }

                if (idsToSave.length > 0) {
                    localStorage.setItem(
                        "familyTree_hiddenAncestorIds",
                        JSON.stringify(idsToSave)
                    );
                    // Save a timestamp to detect stale data
                    localStorage.setItem(
                        "familyTree_lastSaveTime",
                        Date.now().toString()
                    );
                    // Save a checksum of valid person IDs to detect data changes
                    if (validPersonIds) {
                        const personIdsArray =
                            Array.from(validPersonIds).sort();
                        const checksum = personIdsArray.join(",");
                        localStorage.setItem(
                            "familyTree_dataChecksum",
                            checksum
                        );
                    }
                } else {
                    localStorage.removeItem("familyTree_hiddenAncestorIds");
                }
            } else {
                localStorage.removeItem("familyTree_hiddenAncestorIds");
            }

            // Validate and save hiddenAncestorsByPerson
            if (
                window.hiddenAncestorsByPerson &&
                window.hiddenAncestorsByPerson.size > 0
            ) {
                const mapData = {};
                for (let [
                    personId,
                    ancestorIds,
                ] of window.hiddenAncestorsByPerson.entries()) {
                    const personIdNum =
                        typeof personId === "number"
                            ? personId
                            : parseInt(personId);

                    // Only save if person ID is valid
                    if (isNaN(personIdNum)) continue;
                    if (validPersonIds && !validPersonIds.has(personIdNum))
                        continue;

                    // Filter ancestor IDs to only include valid ones
                    let validAncestorIds = Array.from(ancestorIds);
                    if (validPersonIds) {
                        validAncestorIds = validAncestorIds.filter((id) => {
                            const numId =
                                typeof id === "number" ? id : parseInt(id);
                            return !isNaN(numId) && validPersonIds.has(numId);
                        });
                    } else {
                        validAncestorIds = validAncestorIds.filter((id) => {
                            const numId =
                                typeof id === "number" ? id : parseInt(id);
                            return !isNaN(numId);
                        });
                    }

                    if (validAncestorIds.length > 0) {
                        mapData[personIdNum] = validAncestorIds;
                    }
                }

                if (Object.keys(mapData).length > 0) {
                    localStorage.setItem(
                        "familyTree_hiddenAncestorsByPerson",
                        JSON.stringify(mapData)
                    );
                } else {
                    localStorage.removeItem(
                        "familyTree_hiddenAncestorsByPerson"
                    );
                }
            } else {
                localStorage.removeItem("familyTree_hiddenAncestorsByPerson");
            }

            // Validate and save hiddenPersonBranches
            if (
                window.hiddenPersonBranches &&
                window.hiddenPersonBranches.size > 0
            ) {
                let branchesToSave = Array.from(window.hiddenPersonBranches);

                // Filter out invalid IDs before saving
                if (validPersonIds) {
                    branchesToSave = branchesToSave.filter((id) => {
                        const numId =
                            typeof id === "number" ? id : parseInt(id);
                        return !isNaN(numId) && validPersonIds.has(numId);
                    });
                } else {
                    branchesToSave = branchesToSave.filter((id) => {
                        const numId =
                            typeof id === "number" ? id : parseInt(id);
                        return !isNaN(numId);
                    });
                }

                if (branchesToSave.length > 0) {
                    localStorage.setItem(
                        "familyTree_hiddenPersonBranches",
                        JSON.stringify(branchesToSave)
                    );
                } else {
                    localStorage.removeItem("familyTree_hiddenPersonBranches");
                }
            } else {
                localStorage.removeItem("familyTree_hiddenPersonBranches");
            }

            console.log("Saved hidden state to storage (validated)");
        } catch (e) {
            console.error("Error saving hidden state to storage:", e);
            // On error, don't save anything to prevent corruption
        }
    }

    // Load state on page load
    loadHiddenStateFromStorage();

    // Function to check if a person's ancestors are currently hidden
    function areAncestorsHidden(personId) {
        // First check if this person's branch was explicitly hidden
        if (
            window.hiddenPersonBranches &&
            window.hiddenPersonBranches.has(personId)
        ) {
            console.log(
                "areAncestorsHidden - personId:",
                personId,
                "branch is explicitly hidden, returning true"
            );
            return true;
        }

        // Check if this person's ancestors were hidden specifically for this person
        if (
            window.hiddenAncestorsByPerson &&
            window.hiddenAncestorsByPerson.has(personId)
        ) {
            const hiddenAncestors =
                window.hiddenAncestorsByPerson.get(personId);
            if (hiddenAncestors && hiddenAncestors.size > 0) {
                console.log(
                    "areAncestorsHidden - personId:",
                    personId,
                    "has hidden ancestors for this person, returning true"
                );
                return true;
            }
        }

        if (!window.hiddenAncestorIds || window.hiddenAncestorIds.size === 0) {
            return false;
        }

        // Find the main person ID
        const mainPerson =
            treeData.find(
                (p) =>
                    p.name &&
                    (p.name.includes("Muhammad") ||
                        (p.first_name && p.first_name.includes("Muhammad")))
            ) || treeData.find((p) => !p.parents || p.parents.length === 0);
        const mainPersonId = mainPerson ? mainPerson.id : null;

        // Get main person's direct parents (they must always be visible)
        const mainPersonParents = [];
        if (mainPerson && mainPerson.parents) {
            mainPersonParents.push(...mainPerson.parents);
        }

        // Collect all ancestor IDs for this person
        const ancestorIds = new Set();
        function collectAncestors(personId) {
            const person = treeData.find((p) => p.id === personId);
            if (!person || !person.parents || person.parents.length === 0) {
                return;
            }

            person.parents.forEach((parentId) => {
                // Skip main person and main person's direct parents
                if (
                    parentId === personId ||
                    parentId === mainPersonId ||
                    mainPersonParents.includes(parentId)
                ) {
                    return;
                }

                if (!ancestorIds.has(parentId)) {
                    ancestorIds.add(parentId);
                    collectAncestors(parentId);
                }
            });
        }

        collectAncestors(personId);

        console.log("areAncestorsHidden - personId:", personId);
        console.log(
            "areAncestorsHidden - ancestorIds collected:",
            Array.from(ancestorIds)
        );
        console.log(
            "areAncestorsHidden - hiddenAncestorIds:",
            window.hiddenAncestorIds
                ? Array.from(window.hiddenAncestorIds)
                : "undefined"
        );

        // Check if any of this person's ancestors are in the hidden set
        // BUT only if they were hidden specifically for this person's branch
        // We need to check if any ancestor was hidden for this person specifically
        if (
            window.hiddenAncestorsByPerson &&
            window.hiddenAncestorsByPerson.has(personId)
        ) {
            const hiddenAncestorsForThisPerson =
                window.hiddenAncestorsByPerson.get(personId);
            for (let ancestorId of ancestorIds) {
                if (hiddenAncestorsForThisPerson.has(ancestorId)) {
                    console.log(
                        "areAncestorsHidden - Found hidden ancestor:",
                        ancestorId,
                        "for person",
                        personId,
                        "returning true"
                    );
                    return true;
                }
            }
        }

        console.log(
            "areAncestorsHidden - No hidden ancestors found, returning false"
        );
        return false;
    }

    // Function to toggle hiding/showing a person's ancestors
    function togglePersonBranch(personId) {
        console.log("togglePersonBranch called for personId:", personId);
        console.log(
            "window.hiddenAncestorIds:",
            window.hiddenAncestorIds
                ? Array.from(window.hiddenAncestorIds)
                : "undefined"
        );
        const isHidden = areAncestorsHidden(personId);
        console.log("areAncestorsHidden returned:", isHidden);
        if (isHidden) {
            console.log("Calling showPersonBranch...");
            showPersonBranch(personId);
        } else {
            console.log("Calling hidePersonBranch...");
            hidePersonBranch(personId);
        }
    }

    // Function to toggle father's branch (MyHeritage style - hides mother, shows father's branch)
    // Also clears the father from hiddenPersonBranches when unhiding
    function toggleFatherBranch() {
        console.log("toggleFatherBranch called");
        if (window.fatherBranchToggled === undefined) {
            window.fatherBranchToggled = false;
        }

        // Toggle the state
        window.fatherBranchToggled = !window.fatherBranchToggled;
        console.log("Father branch toggled to:", window.fatherBranchToggled);

        // If unhiding (toggling to show), clear the father from hiddenPersonBranches
        if (window.fatherBranchToggled) {
            // When showing father's branch, clear any hidden state for the father
            // Find the father's ID from the main person's parents
            let currentMainPersonId = null;
            if (loggedInUserId) {
                const userPerson = treeData.find(
                    (p) => p.user_id === loggedInUserId
                );
                if (userPerson) {
                    currentMainPersonId = userPerson.id;
                }
            }
            if (!currentMainPersonId) {
                const rootPersons = treeData.filter(
                    (p) => !p.parents || p.parents.length === 0
                );
                if (rootPersons.length > 0) {
                    currentMainPersonId = rootPersons[0].id;
                }
            }

            if (currentMainPersonId) {
                const mainPerson = treeData.find(
                    (p) => p.id === currentMainPersonId
                );
                if (mainPerson && mainPerson.parents) {
                    const fatherId = mainPerson.parents.find((pId) => {
                        const parent = treeData.find((p) => p.id === pId);
                        return parent && parent.gender === "male";
                    });

                    if (fatherId) {
                        // Clear the father from hiddenPersonBranches
                        if (window.hiddenPersonBranches) {
                            window.hiddenPersonBranches.delete(fatherId);
                            console.log(
                                "Cleared father (ID:",
                                fatherId,
                                ") from hiddenPersonBranches"
                            );
                        }
                        // Also clear from hiddenAncestorsByPerson
                        if (window.hiddenAncestorsByPerson) {
                            window.hiddenAncestorsByPerson.delete(fatherId);
                            console.log(
                                "Cleared father (ID:",
                                fatherId,
                                ") from hiddenAncestorsByPerson"
                            );
                        }
                        // Clear from hiddenAncestorIds (remove father's ancestors)
                        if (window.hiddenAncestorIds && mainPerson.parents) {
                            // Get all ancestors of the father and remove them
                            const fatherPerson = treeData.find(
                                (p) => p.id === fatherId
                            );
                            if (fatherPerson && fatherPerson.parents) {
                                fatherPerson.parents.forEach((ancestorId) => {
                                    window.hiddenAncestorIds.delete(ancestorId);
                                });
                            }
                        }
                    }
                }
            }
        }

        // Save to localStorage
        try {
            localStorage.setItem(
                "familyTree_fatherBranchToggled",
                JSON.stringify(window.fatherBranchToggled)
            );
            // Also save the updated hidden state
            saveHiddenStateToStorage();
        } catch (e) {
            console.error("Error saving father branch toggle state:", e);
        }

        // Redraw the tree
        rebuildTree();
    }

    // Function to show father's branch (set toggle to true)
    function showFatherBranch() {
        console.log("showFatherBranch called");
        window.fatherBranchToggled = true;

        // Save to localStorage
        try {
            localStorage.setItem(
                "familyTree_fatherBranchToggled",
                JSON.stringify(window.fatherBranchToggled)
            );
        } catch (e) {
            console.error("Error saving father branch toggle state:", e);
        }

        // Redraw the tree
        rebuildTree();
    }

    // Function to show mother's branch (set toggle to false)
    function showMotherBranch() {
        console.log("showMotherBranch called");
        window.fatherBranchToggled = false;

        // Save to localStorage
        try {
            localStorage.setItem(
                "familyTree_fatherBranchToggled",
                JSON.stringify(window.fatherBranchToggled)
            );
        } catch (e) {
            console.error("Error saving father branch toggle state:", e);
        }

        // Redraw the tree
        rebuildTree();
    }

    function showGrandmotherBranch() {
        console.log("showGrandmotherBranch called");
        if (window.grandmotherBranchToggled === undefined) {
            window.grandmotherBranchToggled = false;
        }
        // Toggle: if currently false, set to true (show grandmother's branch, hide grandfather's)
        // If currently true, set to false (show grandfather's branch, hide grandmother's)
        window.grandmotherBranchToggled = !window.grandmotherBranchToggled;

        // Save to localStorage
        try {
            localStorage.setItem(
                "familyTree_grandmotherBranchToggled",
                JSON.stringify(window.grandmotherBranchToggled)
            );
        } catch (e) {
            console.error("Error saving grandmother branch toggle state:", e);
        }

        // Redraw the tree
        rebuildTree();
    }

    // Function to show father's partner branch (set toggle to true)
    function showFatherPartnerBranch() {
        console.log("showFatherPartnerBranch called");
        window.fatherPartnerBranchToggled = true;

        // Save to localStorage
        try {
            localStorage.setItem(
                "familyTree_fatherPartnerBranchToggled",
                JSON.stringify(window.fatherPartnerBranchToggled)
            );
        } catch (e) {
            console.error(
                "Error saving father partner branch toggle state:",
                e
            );
        }

        // Redraw the tree
        rebuildTree();
    }

    // Function to hide father's partner branch (set toggle to false)
    function hideFatherPartnerBranch() {
        console.log("hideFatherPartnerBranch called");
        window.fatherPartnerBranchToggled = false;

        // Save to localStorage
        try {
            localStorage.setItem(
                "familyTree_fatherPartnerBranchToggled",
                JSON.stringify(window.fatherPartnerBranchToggled)
            );
        } catch (e) {
            console.error(
                "Error saving father partner branch toggle state:",
                e
            );
        }

        // Redraw the tree
        rebuildTree();
    }

    // Function to show grandfather's partner branch (set toggle to true)
    function showGrandfatherPartnerBranch() {
        console.log("showGrandfatherPartnerBranch called");
        window.grandfatherPartnerBranchToggled = true;

        // Save to localStorage
        try {
            localStorage.setItem(
                "familyTree_grandfatherPartnerBranchToggled",
                JSON.stringify(window.grandfatherPartnerBranchToggled)
            );
        } catch (e) {
            console.error(
                "Error saving grandfather partner branch toggle state:",
                e
            );
        }

        // Redraw the tree
        rebuildTree();
    }

    // Function to hide grandfather's partner branch (set toggle to false)
    function hideGrandfatherPartnerBranch() {
        console.log("hideGrandfatherPartnerBranch called");
        window.grandfatherPartnerBranchToggled = false;

        // Save to localStorage
        try {
            localStorage.setItem(
                "familyTree_grandfatherPartnerBranchToggled",
                JSON.stringify(window.grandfatherPartnerBranchToggled)
            );
        } catch (e) {
            console.error(
                "Error saving grandfather partner branch toggle state:",
                e
            );
        }

        // Redraw the tree
        rebuildTree();
    }

    // Function to show a person's ancestors (remove from hidden set)
    function showPersonBranch(personId) {
        // Find the main person ID
        const mainPerson =
            treeData.find(
                (p) =>
                    p.name &&
                    (p.name.includes("Muhammad") ||
                        (p.first_name && p.first_name.includes("Muhammad")))
            ) || treeData.find((p) => !p.parents || p.parents.length === 0);
        const mainPersonId = mainPerson ? mainPerson.id : null;

        // Get main person's direct parents (they must always be visible)
        const mainPersonParents = [];
        if (mainPerson && mainPerson.parents) {
            mainPersonParents.push(...mainPerson.parents);
        }

        // Collect all ancestor IDs for this person
        const ancestorIds = new Set();
        function collectAncestors(personId) {
            const person = treeData.find((p) => p.id === personId);
            if (!person || !person.parents || person.parents.length === 0) {
                return;
            }

            person.parents.forEach((parentId) => {
                // Skip main person and main person's direct parents
                if (
                    parentId === personId ||
                    parentId === mainPersonId ||
                    mainPersonParents.includes(parentId)
                ) {
                    return;
                }

                if (!ancestorIds.has(parentId)) {
                    ancestorIds.add(parentId);
                    collectAncestors(parentId);
                }
            });
        }

        collectAncestors(personId);

        console.log("Showing ancestors for person ID:", personId);
        console.log("Ancestor IDs to show:", Array.from(ancestorIds));

        // Get the ancestors that were hidden for this person before deleting
        let hiddenAncestorsForThisPerson = null;
        if (
            window.hiddenAncestorsByPerson &&
            window.hiddenAncestorsByPerson.has(personId)
        ) {
            hiddenAncestorsForThisPerson =
                window.hiddenAncestorsByPerson.get(personId);
        }

        // Remove these ancestor IDs from the hidden set for this specific person
        if (window.hiddenAncestorsByPerson) {
            window.hiddenAncestorsByPerson.delete(personId);
            console.log(
                "Removed person from hiddenAncestorsByPerson:",
                personId
            );
        }

        // Also remove from global set (but be careful - only remove if they were hidden only for this person)
        if (window.hiddenAncestorIds && hiddenAncestorsForThisPerson) {
            hiddenAncestorsForThisPerson.forEach((id) => {
                // Check if this ancestor was only hidden for this person
                let onlyHiddenForThisPerson = true;
                if (window.hiddenAncestorsByPerson) {
                    for (let [
                        otherPersonId,
                        otherHiddenAncestors,
                    ] of window.hiddenAncestorsByPerson.entries()) {
                        if (
                            otherPersonId !== personId &&
                            otherHiddenAncestors.has(id)
                        ) {
                            onlyHiddenForThisPerson = false;
                            break;
                        }
                    }
                }
                if (onlyHiddenForThisPerson) {
                    window.hiddenAncestorIds.delete(id);
                }
            });
            console.log(
                "Remaining hidden ancestor IDs:",
                Array.from(window.hiddenAncestorIds)
            );
        }

        // Remove this person from the hidden branches set
        if (window.hiddenPersonBranches) {
            window.hiddenPersonBranches.delete(personId);
            console.log("Removed person from hidden branches:", personId);
        }

        // Save state to localStorage
        saveHiddenStateToStorage();

        // Redraw the tree
        rebuildTree();
    }

    // Function to hide a person's ancestors only (not descendants)
    function hidePersonBranch(personId) {
        // IMPORTANT: Never hide the person themselves, only their ancestors
        // Also never hide the main person or their direct parents (they must always be visible)

        // Find the main person ID using the same logic as buildTree
        let mainPersonId = null;

        // Use the logged-in user's ID (same as buildTree)
        if (loggedInUserId) {
            const userPerson = treeData.find(
                (p) => p.user_id === loggedInUserId
            );
            if (userPerson) {
                mainPersonId = userPerson.id;
                console.log(
                    "hidePersonBranch: Main person identified by user_id:",
                    mainPersonId
                );
            }
        }

        // Fallback: If no user_id match, find the first root person (person with no parents)
        if (!mainPersonId) {
            const rootPersons = treeData
                .filter((p) => !p.parents || p.parents.length === 0)
                .sort((a, b) => a.id - b.id);
            if (rootPersons.length > 0) {
                mainPersonId = rootPersons[0].id;
                console.log(
                    "hidePersonBranch: Main person identified by root status:",
                    mainPersonId
                );
            } else if (treeData.length > 0) {
                // Final fallback: use the first person
                mainPersonId = treeData.sort((a, b) => a.id - b.id)[0].id;
                console.log(
                    "hidePersonBranch: Main person identified by first person:",
                    mainPersonId
                );
            }
        }

        // Get main person's direct parents (they must always be visible)
        const mainPersonParents = [];
        if (mainPersonId) {
            const mainPerson = treeData.find((p) => p.id === mainPersonId);
            if (mainPerson && mainPerson.parents) {
                mainPersonParents.push(...mainPerson.parents);
            }
        }

        // Collect all IDs to hide: only ancestors (parents, grandparents, etc.)
        const idsToHide = new Set();

        // Recursively collect all ancestors (but not the person itself or descendants)
        function collectAncestors(personId) {
            const person = treeData.find((p) => p.id === personId);
            console.log("collectAncestors called for personId:", personId);
            console.log(
                "Person found:",
                person ? person.name || person.first_name : "NOT FOUND"
            );

            if (!person) {
                console.warn("Person not found in treeData:", personId);
                return;
            }

            console.log("Person parents:", person.parents);

            if (person.parents && person.parents.length > 0) {
                person.parents.forEach((parentId) => {
                    console.log("Checking parent ID:", parentId);
                    console.log(
                        "  - Is parentId === personId?",
                        parentId === personId
                    );
                    console.log(
                        "  - Is parentId === mainPersonId?",
                        parentId === mainPersonId
                    );
                    console.log(
                        "  - Is parentId in mainPersonParents?",
                        mainPersonParents.includes(parentId)
                    );
                    console.log(
                        "  - Is personId === mainPersonId?",
                        personId === mainPersonId
                    );

                    // NEVER hide:
                    // 1. The person themselves
                    // 2. The main person
                    // 3. The main person's direct parents (they must always be visible)
                    //    BUT: Allow hiding main person's parents if we're hiding ancestors FOR the main person
                    if (parentId === personId || parentId === mainPersonId) {
                        console.log(
                            "  -> Skipping parent (must remain visible):",
                            parentId
                        );
                        return; // Skip - must remain visible
                    }

                    // Only prevent hiding main person's direct parents if we're NOT hiding ancestors for the main person
                    // If we're hiding ancestors for the main person, allow hiding their parents
                    if (
                        mainPersonParents.includes(parentId) &&
                        personId !== mainPersonId
                    ) {
                        console.log(
                            "  -> Skipping parent (main person's direct parent, but not hiding for main person):",
                            parentId
                        );
                        return; // Skip - must remain visible
                    }

                    if (!idsToHide.has(parentId)) {
                        console.log("  -> Adding to hide list:", parentId);
                        idsToHide.add(parentId);
                        collectAncestors(parentId); // Recursively get grandparents, etc.
                    } else {
                        console.log("  -> Already in hide list:", parentId);
                    }
                });
            } else {
                console.log("Person has no parents (or empty parents array)");
            }
        }

        // Start collecting ancestors (but don't include the person itself)
        collectAncestors(personId);

        console.log("Hiding ancestors for person ID:", personId);
        console.log("Main person ID:", mainPersonId);
        console.log("Main person parents (always visible):", mainPersonParents);
        console.log(
            "Total ancestor IDs to hide:",
            idsToHide.size,
            "IDs:",
            Array.from(idsToHide)
        );

        // Store hidden ancestor IDs per person in a Map for later use
        // This allows us to track which ancestors were hidden for which person's branch
        if (!window.hiddenAncestorsByPerson) {
            window.hiddenAncestorsByPerson = new Map();
        }
        window.hiddenAncestorsByPerson.set(personId, idsToHide);

        // Also maintain a global set for backward compatibility and filtering
        if (!window.hiddenAncestorIds) {
            window.hiddenAncestorIds = new Set();
        }
        idsToHide.forEach((id) => window.hiddenAncestorIds.add(id));

        console.log(
            "All hidden ancestor IDs:",
            Array.from(window.hiddenAncestorIds)
        );
        console.log(
            "Hidden ancestors for person",
            personId,
            ":",
            Array.from(idsToHide)
        );

        // Track that this person's branch is hidden (even if they have no ancestors)
        if (!window.hiddenPersonBranches) {
            window.hiddenPersonBranches = new Set();
        }
        window.hiddenPersonBranches.add(personId);
        console.log("Added person to hidden branches:", personId);
        console.log(
            "All hidden person branches:",
            Array.from(window.hiddenPersonBranches)
        );

        // Save state to localStorage
        saveHiddenStateToStorage();

        // Redraw the tree to reflect the changes
        rebuildTree();
    }

    // Shared function to rebuild the tree after hiding/showing ancestors
    function rebuildTree() {
        // Don't rebuild if tree data is not loaded yet
        if (!treeData || treeData.length === 0) {
            console.warn("Cannot rebuild tree: tree data not loaded yet");
            return;
        }

        // Only clear the SVG content, not the SVG element itself
        const svg = d3.select("#tree-svg");
        if (svg && !svg.empty()) {
            // Remove all children but keep the SVG element
            svg.selectAll("*").remove();
        }

        // Reset tree variables
        nodes = null;
        links = null;
        root = null;

        setTimeout(() => {
            console.log("Rebuilding tree after hiding/showing ancestors...");
            console.log(
                "Hidden ancestor IDs:",
                Array.from(window.hiddenAncestorIds || [])
            );
            console.log("Tree data count:", treeData ? treeData.length : 0);

            // Reinitialize the tree - setupTree will recreate the SVG if needed
            if (
                typeof setupTree === "function" &&
                treeData &&
                treeData.length > 0
            ) {
                try {
                    setupTree();
                    console.log(
                        "setupTree completed, now calling buildTree..."
                    );
                    if (typeof buildTree === "function") {
                        buildTree();
                        console.log("buildTree completed");
                        // Wait for tree to render before restoring zoom state
                        setTimeout(() => {
                            // Restore saved zoom/pan state after rebuilding, otherwise center
                            if (
                                typeof loadZoomStateFromStorage === "function"
                            ) {
                                if (!loadZoomStateFromStorage()) {
                                    if (typeof centerTree === "function") {
                                        centerTree();
                                        console.log(
                                            "Tree centered (no saved zoom state)"
                                        );
                                    }
                                } else {
                                    console.log("Saved zoom state restored");
                                }
                            } else if (typeof centerTree === "function") {
                                centerTree();
                                console.log(
                                    "Tree centered (loadZoomStateFromStorage not available)"
                                );
                            }
                        }, 100);
                    } else {
                        console.error("buildTree function not found!");
                        // Don't reload, just log the error
                        console.error(
                            "buildTree is not a function, type:",
                            typeof buildTree
                        );
                    }
                } catch (error) {
                    console.error("Error rebuilding tree:", error);
                    console.error("Error stack:", error.stack);
                    // Instead of reloading, try to reinitialize the tree
                    console.log(
                        "Attempting to reinitialize tree from scratch..."
                    );
                    try {
                        initTree();
                    } catch (initError) {
                        console.error(
                            "Failed to reinitialize tree:",
                            initError
                        );
                        // Only reload as last resort
                        alert("Error rebuilding tree. Page will reload.");
                        window.location.reload();
                    }
                }
            } else {
                console.error("setupTree function not found or no tree data!");
                console.error("setupTree type:", typeof setupTree);
                console.error("treeData:", treeData);
                // Try to reinitialize instead of reloading
                console.log("Attempting to reinitialize tree...");
                try {
                    initTree();
                } catch (initError) {
                    console.error("Failed to reinitialize tree:", initError);
                    // Only reload as last resort
                    alert("Tree data not available. Page will reload.");
                    window.location.reload();
                }
            }
        }, 100);
    }

    function deletePerson(personId, personName) {
        if (
            confirm(
                `Are you sure you want to delete "${personName}" from the family tree?\n\nThis will also remove all relationships associated with this person.`
            )
        ) {
            // Create a form and submit it
            const form = document.createElement("form");
            form.method = "POST";
            form.action = `https://familytree.hexafume.com/family-tree/${personId}`;

            // Add CSRF token
            const csrfToken = document.createElement("input");
            csrfToken.type = "hidden";
            csrfToken.name = "_token";
            csrfToken.value = "SsAmvR4Dw4G6ycU9HtKwdDEy1mt4bZ4tzLEKGoBW";
            form.appendChild(csrfToken);

            // Add method spoofing for DELETE
            const methodInput = document.createElement("input");
            methodInput.type = "hidden";
            methodInput.name = "_method";
            methodInput.value = "DELETE";
            form.appendChild(methodInput);

            document.body.appendChild(form);
            form.submit();
        }
    }

    // Handle "Edit more" link - redirect to full create page with pre-filled data
    function setupEditMoreLink() {
        const editMoreLink = document.querySelector(".edit-more-link");
        if (editMoreLink) {
            editMoreLink.addEventListener("click", function (e) {
                e.preventDefault();
                const form = document.getElementById("add-person-form");
                const formData = new FormData(form);

                // Build URL with query parameters
                let url = 'https://familytree.hexafume.com/family-tree/create?';
                const params = [];

                if (formData.get("first_name"))
                    params.push(
                        `first_name=${encodeURIComponent(
                            formData.get("first_name")
                        )}`
                    );
                if (formData.get("last_name"))
                    params.push(
                        `last_name=${encodeURIComponent(
                            formData.get("last_name")
                        )}`
                    );
                if (formData.get("gender"))
                    params.push(`gender=${formData.get("gender")}`);
                if (formData.get("birth_place"))
                    params.push(
                        `birth_place=${encodeURIComponent(
                            formData.get("birth_place")
                        )}`
                    );
                if (document.getElementById("modal_parent_id").value)
                    params.push(
                        `parent_id=${
                            document.getElementById("modal_parent_id").value
                        }`
                    );
                if (document.getElementById("modal_sibling_id").value)
                    params.push(
                        `sibling_id=${
                            document.getElementById("modal_sibling_id").value
                        }`
                    );
                if (document.getElementById("modal_spouse_id").value)
                    params.push(
                        `spouse_id=${
                            document.getElementById("modal_spouse_id").value
                        }`
                    );
                if (document.getElementById("modal_relationship").value)
                    params.push(
                        `relationship=${
                            document.getElementById("modal_relationship").value
                        }`
                    );

                url += params.join("&");
                window.location.href = url;
            });
        }
    }

    // Toggle death fields based on status selection
    function toggleDeathFields() {
        const statusDeceased = document.getElementById("status_deceased");
        const deathFieldsSection = document.getElementById(
            "death-fields-section"
        );

        if (statusDeceased && deathFieldsSection) {
            if (statusDeceased.checked) {
                deathFieldsSection.style.display = "block";
            } else {
                deathFieldsSection.style.display = "none";
                // Clear death fields when hiding
                document.getElementById("death_date_type").value = "Exactly";
                document.getElementById("death_month").value = "";
                document.getElementById("death_day").value = "";
                document.getElementById("death_year").value = "";
                document.getElementById("modal_cause_of_death").value = "";
                document.getElementById("modal_death_place").value = "";
                document.getElementById("modal_burial_place").value = "";
                document.getElementById("modal_death_date").value = "";
            }
        }
    }

    // Show/hide invite checkbox based on email input
    function setupInviteCheckbox() {
        const emailInput = document.getElementById("modal_email");
        const inviteSection = document.getElementById("invite-section");

        if (emailInput && inviteSection) {
            emailInput.addEventListener("input", function () {
                if (this.value.trim() !== "") {
                    inviteSection.style.display = "block";
                } else {
                    inviteSection.style.display = "none";
                    document.getElementById("modal_invite").checked = false;
                }
            });
        }
    }

    // Manual reset function - can be called from console: resetFamilyTreeStorage()
    window.resetFamilyTreeStorage = function () {
        console.log("Manually clearing all family tree localStorage...");
        localStorage.removeItem("familyTree_hiddenAncestorIds");
        localStorage.removeItem("familyTree_hiddenAncestorsByPerson");
        localStorage.removeItem("familyTree_hiddenPersonBranches");
        window.hiddenAncestorIds = new Set();
        window.hiddenAncestorsByPerson = new Map();
        window.hiddenPersonBranches = new Set();
        console.log("localStorage cleared. Refreshing page...");
        location.reload();
    };

    // Universal event delegation for all card clicks
    function setupUniversalCardClickHandler() {
        if (!svg) return;

        // Use event delegation on the SVG to catch all card clicks
        svg.on("click", function (event) {
            const target = event.target;
            if (!target) return;

            // Skip if clicking on interactive elements
            if (
                target.classList &&
                (target.classList.contains("edit-icon") ||
                    target.classList.contains("delete-icon") ||
                    (target.closest && target.closest("button")))
            ) {
                return;
            }

            // Find the closest card group with data-person-id
            let cardGroup = target;
            let personId = null;
            let personData = null;

            // Traverse up the DOM to find the card group
            let maxDepth = 10; // Prevent infinite loops
            while (cardGroup && cardGroup !== svg.node() && maxDepth-- > 0) {
                // Check if element has data attribute with person ID
                if (cardGroup.getAttribute) {
                    personId = cardGroup.getAttribute("data-person-id");
                    if (personId) {
                        // Convert to number if it's a numeric string
                        const numericId = isNaN(personId)
                            ? personId
                            : parseInt(personId);
                        personData = treeData.find(
                            (p) => p.id == numericId || p.id == personId
                        );
                        if (
                            personData &&
                            typeof window.openProfileSidebar === "function"
                        ) {
                            event.stopPropagation();
                            event.preventDefault();
                            window.openProfileSidebar(
                                numericId || personId,
                                personData
                            );
                            return;
                        }
                    }
                }

                // Also check if this is a card group by class
                if (cardGroup.classList) {
                    const classes = cardGroup.classList;
                    if (
                        (classes.contains("parent-card") ||
                            classes.contains("grandparent-card") ||
                            classes.contains("sibling-card") ||
                            classes.contains("child-card") ||
                            classes.contains("partner-card") ||
                            classes.contains("person-card")) &&
                        cardGroup.getAttribute
                    ) {
                        // Try to get person ID from data attribute
                        personId = cardGroup.getAttribute("data-person-id");
                        if (personId) {
                            const numericId = isNaN(personId)
                                ? personId
                                : parseInt(personId);
                            personData = treeData.find(
                                (p) => p.id == numericId || p.id == personId
                            );
                            if (
                                personData &&
                                typeof window.openProfileSidebar === "function"
                            ) {
                                event.stopPropagation();
                                event.preventDefault();
                                window.openProfileSidebar(
                                    numericId || personId,
                                    personData
                                );
                                return;
                            }
                        }
                    }
                }

                cardGroup = cardGroup.parentNode;
            }
        });
    }

    // Initialize on page load
    document.addEventListener("DOMContentLoaded", function () {
        // console.log("DOM Content Loaded - Initializing tree...");
        try {
            initTree();
            setupEditMoreLink();
            setupInviteCheckbox();
            // Setup universal card click handler after tree is initialized
            setTimeout(setupUniversalCardClickHandler, 1000);
        } catch (error) {
            console.error("Error during initialization:", error);
            console.error("Error stack:", error.stack);

            // If there's an error, try clearing localStorage and reloading
            console.log(
                "Error detected - clearing localStorage and reloading..."
            );
            localStorage.removeItem("familyTree_hiddenAncestorIds");
            localStorage.removeItem("familyTree_hiddenAncestorsByPerson");
            localStorage.removeItem("familyTree_hiddenPersonBranches");

            alert(
                "Error loading family tree. localStorage has been cleared. The page will reload. If the problem persists, please check the browser console for details."
            );
            location.reload();
        }
    });

    // Handle window resize
    window.addEventListener("resize", () => {
        if (svg) {
            const container = document.getElementById("tree-container");
            width = container.clientWidth;
            height = container.clientHeight;
            svg.attr("width", width).attr("height", height);
            setupTree();
            buildTree();
            centerTree();
        }
    });
</script>
</body>
</html>