/* ===========================================
    RECIPE CARD (INDIVIDUAL) STYLES
    =========================================== */
.recipe-card {
    width: 19rem; 
    height: 27em; /* Fixed: consistent height for all recipe cards */
    padding: 8px 12px; 
    border-radius: 12px; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    background: rgba(39, 39, 39, 0.1); 
    backdrop-filter: blur(6px); 
    -webkit-backdrop-filter: blur(6px); 
    box-shadow: none; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    position: absolute; 
    cursor: grab; 
    user-select: none; 
    transition: all 0.3s ease, 
                left 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                top 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease, 
                transform 0.3s ease, 
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                height 0.25s cubic-bezier(0.4, 0, 0.2, 1); 
    z-index: 1; 
    transform-origin: center center; 
    overflow: hidden; 
}
/* Specific styles for standard recipe card height */
.recipe-card:not(.sheet-card) {
     height: 27em; /* Ensure consistent height */
}
/* Styles for placeholder sheet card */
.recipe-card.sheet-card {
    height: 15em; /* Smaller height for sheet cards */
    justify-content: flex-start; /* Align content top */
    padding-top: 20px;
}
.recipe-card.sheet-card .rcv-header-condensed {
     flex-grow: 0; /* Don't let header grow */
}
.recipe-card.sheet-card .rcv-type-icon-condensed {
    display: block !important; /* Ensure icon is visible */
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 15px !important;
    color: #10b981; /* Greenish for sheets */
    opacity: 0.8;
}
.recipe-card.sheet-card .rcv-name-condensed {
     font-size: 18px !important; /* Smaller title */
     opacity: 0.7;
     max-width: 95%;
     white-space: normal; /* Allow wrapping */
     margin-bottom: 10px;
}
.sheet-details {
    font-size: 13px;
    color: #4b5563;
    margin-top: 5px;
}


.recipe-card:hover:not(.dragging):not(.dragged-out-thumbnail) { 
    background: rgba(39, 39, 39, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.recipe-card.dragging { 
    cursor: grabbing !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important; 
    transform: scale(1.03) !important; 
    z-index: 1000 !important;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; 
}

/*
 * 4. IMPORTANT: The style for the thumbnail that follows the cursor.
 * This creates a small, card-like representation of the dragged item.
 */
.recipe-card.dragged-out-thumbnail {
    width: 100px !important;  
    height: 120px !important; 
    padding: 8px !important;
    display: flex !important; 
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important; 
    overflow: hidden !important;
}

.recipe-card.dragged-out-thumbnail .rcv-header-condensed {
    width: 100% !important; padding: 0 !important; flex-grow: 0 !important; 
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important; 
}

.recipe-card.dragged-out-thumbnail .rcv-type-icon-condensed {
    display: block !important; 
    width: 36px !important; height: 36px !important;  
    margin: 5px auto 4px auto !important; 
    opacity: 0.75 !important; color: #333; 
}
/* Ensure sheet icon color is distinct in thumbnail */
.recipe-card.dragged-out-thumbnail.sheet-card .rcv-type-icon-condensed {
     color: #10b981 !important;
}

.recipe-card.dragged-out-thumbnail .rcv-name-condensed {
    font-size: 11px !important; line-height: 1.25 !important;
    max-height: 2.5em !important; white-space: normal !important; 
    overflow: hidden !important; text-overflow: ellipsis !important;
    text-align: center !important; padding: 0 3px !important; 
    color: #000 !important; opacity: 0.65 !important; margin-bottom: 0 !important; 
}

.recipe-card.dragged-out-thumbnail .rcv-watermark-condensed,
.recipe-card.dragged-out-thumbnail .rcv-expansion-panel {
    display: none !important; 
}

.recipe-card.expanded-host {
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 1001 !important; cursor: default;
}
.rcv-expansion-panel { /* For individual recipe cards */
    position: absolute; top: 0; left: 100%; width: 300px; height: 100%;
    background: rgba(250, 251, 253, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1.5px solid rgba(255, 255, 255, 0.8); border-left: none;
    border-radius: 0 12px 12px 0; box-shadow: 12px 0px 35px rgba(50, 70, 100, 0.15);
    padding: 20px; z-index: -1; opacity: 0; transform: translateX(-25px) scaleX(0.9);
    transform-origin: left center; pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
}
.recipe-card.expanded-host .rcv-expansion-panel {
    opacity: 1; transform: translateX(0) scaleX(1); pointer-events: auto; z-index: 1000;
}
.expansion-panel-content h4 { font-size: 16px; color: #3b82f6; margin-bottom: 15px; border-bottom: 1px solid rgba(59, 130, 246, 0.2); padding-bottom: 10px; }
.expansion-panel-content p { font-size: 13px; color: #343a40; margin-bottom: 10px; }

.recipe-card .rcv-header-condensed {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; flex-grow: 1; padding: 5px;
}
.recipe-card .rcv-type-icon-condensed { display: none; } 
.recipe-card .rcv-name-condensed {
    font-size: 28px; font-weight: bold; color: #000; opacity: 0.3;
    text-align: center; max-width: 90%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; margin-bottom: 8px; line-height: 1.2;
}

.rcv-watermark-condensed { 
    position: absolute; bottom: 0.9rem; left: 0; width: 100%;
    text-align: center; font-weight: 700; font-size: 1rem; color: #000;
    opacity: 0.1; pointer-events: none; letter-spacing: -0.04em; text-transform: none;
}

/* ===========================================
    RECIPE COLLECTION CARD STYLES
    =========================================== */
.recipe-collection-card {
    width: 280px; height: 190px; padding: 20px; border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background: rgba(50, 50, 50, 0.12);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex; flex-direction: column; position: absolute;
    cursor: grab; user-select: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease,
                left 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                top 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
    overflow: visible; 
}

.recipe-collection-card:hover {
    background: rgba(50, 50, 50, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}
.recipe-collection-card.dragging {
    cursor: grabbing; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: scale(1.05) !important; z-index: 1000 !important;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
.recipe-collection-card.collection-expanding {
    transform: scale(1.03) translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.22);
    z-index: 1001 !important; cursor: default;
}

.rcc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; z-index: 2; }
.rcc-icon { color: #3b82f6; width: 24px; height: 24px; opacity: 0.9; flex-shrink: 0; }
.rcc-name {
    font-size: 17px; font-weight: 600; color: #222;
    line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex-grow: 1; margin-right: 5px;
}
.rcc-count-badge {
    background-color: rgba(59, 130, 246, 0.8); color: white; font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 10px; line-height: 1; flex-shrink: 0;
}
.rcc-mini-fan-preview {
    flex-grow: 1; display: flex; align-items: center; justify-content: center;
    position: relative; margin-bottom: 10px; min-height: 60px; z-index: 1;
    pointer-events: none;
}
.mini-fan-card {
    width: 70%; height: 80%; background-color: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px;
    position: absolute; box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transform-origin: bottom center;
}
.mini-fan-card:nth-child(1) { transform: translate(-3px, 6px) rotate(-4deg); z-index: 1;}
.mini-fan-card:nth-child(2) { transform: translate(0, 3px) rotate(0deg); z-index: 2;}
.mini-fan-card:nth-child(3) { transform: translate(3px, 0px) rotate(4deg); z-index: 3;}
.mini-fan-card:nth-child(n+4) { display: none; }


/* Styles for Right-Side Expanded List */
.collection-expanded-list-area {
    position: absolute; top: 50%; left: calc(100% + 15px);
    transform: translateY(-50%); width: 280px; max-height: 350px;
    overflow-y: auto; overflow-x: hidden; z-index: 1000; opacity: 0;
    transform: translateY(-50%) translateX(-20px) scale(0.9); 
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
                transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
    scrollbar-width: thin; scrollbar-color: rgba(59, 130, 246, 0.5) transparent;
}
.collection-expanded-list-area::-webkit-scrollbar { width: 5px; }
.collection-expanded-list-area::-webkit-scrollbar-track { background: transparent; }
.collection-expanded-list-area::-webkit-scrollbar-thumb { background-color: rgba(59, 130, 246, 0.5); border-radius: 10px; border: 1px solid transparent; }

.recipe-collection-card.expanded-collection-host .collection-expanded-list-area {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scale(1); 
    pointer-events: auto;
}
.expanded-list-item {
    height: 55px; padding: 10px 15px; margin-bottom: 8px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4); box-shadow: 0 4px 15px rgba(60, 80, 110, 0.08);
    display: flex; align-items: center; gap: 10px;
    /* Use 'auto' initially, switch to 'grab' only if drag starts */
    cursor: auto; 
    position: relative; 
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.2s ease, border 0.2s ease,
                max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),   
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),   
                margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);    
    opacity: 0; transform: translateX(20px);
    animation: slideInItem 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    overflow: hidden; 
}
/* Add grab cursor only when actively being dragged (via JS) */
.expanded-list-item.potential-drag {
    cursor: grab;
}


.expanded-list-item.ghosted-for-drag {
    max-height: 0px !important; 
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border-width: 0 !important;
}

@keyframes slideInItem { to { opacity: 1; transform: translateX(0); } }
.expanded-list-item:not(.ghosted-for-drag):hover { 
    transform: translateX(8px) scale(1.03);
    box-shadow: 0 6px 20px rgba(60, 80, 110, 0.12);
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(255, 255, 255, 0.75);
    z-index: 10;
}
.expanded-list-item .rcv-type-icon-condensed { display: block !important; width: 18px; height: 18px; opacity: 0.8;}
.expanded-list-item .rcv-name-condensed { font-size: 14px; font-weight: 500; flex-grow: 1; color: #111; }
.expanded-list-item .expand-detail-btn { background: none; border: none; padding: 5px; margin-left: auto; color: #78808c; cursor: pointer; line-height: 0; opacity: 0.6; }
.expanded-list-item:hover .expand-detail-btn { opacity: 1; }
.expanded-list-item .expand-detail-btn:hover { color: #3b82f6; }
.expanded-list-item .expand-detail-btn [data-lucide] { width: 16px; height: 16px; }

.recipe-collection-card.showing-sheet-panel .sheet-data-panel {
    /* instead of translateX(0) scaleX(1) */
    transform: translateY(-50%) translateX(0) scaleX(1);
}/* Sheet Data Panel Styles */
.sheet-data-panel {
    position: absolute;
    top: 50%; /* vertically center with extension menu */
    left: calc(100% + 280px + 30px); /* collection width + list width + gaps */
    width: 19rem;
    height: 27em;
    max-height: 70vh; /* Allow shrinking on smaller viewports */
    background: rgba(250, 251, 253, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1.5px solid rgba(255, 255, 255, 0.8);
    border-left: none;
    border-radius: 0 18px 18px 0; /* Match collection card radius */
    box-shadow: 12px 0px 35px rgba(50, 70, 100, 0.15);
    padding: 20px;
    z-index: 1002; /* Above expanded list */
    opacity: 0;
    transform-origin: left center;
    pointer-events: none;
    transition:
      opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.recipe-collection-card.showing-sheet-panel .sheet-data-panel {
    opacity: 1;
    transform: translateX(0) scaleX(1);
    pointer-events: auto;
}

.sheet-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    flex-shrink: 0; /* Prevent header from shrinking */
}

.sheet-panel-header h4 {
    font-size: 16px;
    color: #3b82f6;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sheet-panel-header .close-panel-btn {
    background: none;
    border: none;
    padding: 3px;
    cursor: pointer;
    color: #9ca3af;
    line-height: 0;
}

.sheet-panel-header .close-panel-btn:hover {
    color: #ef4444;
}

.sheet-panel-content {
    flex-grow: 1;
    overflow-y: auto;
    font-size: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(59, 130, 246, 0.5) transparent;
}

.sheet-panel-content::-webkit-scrollbar {
    width: 5px;
}

.sheet-panel-content::-webkit-scrollbar-track {
    background: transparent;
}

.sheet-panel-content::-webkit-scrollbar-thumb {
    background-color: rgba(59, 130, 246, 0.5);
    border-radius: 10px;
}

.sheet-panel-content table {
    width: 100%;
    border-collapse: collapse;
}

.sheet-panel-content th,
.sheet-panel-content td {
    border: 1px solid #e5e7eb;
    padding: 5px 8px;
    text-align: left;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sheet-panel-content th {
    background-color: #f3f4f6;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}



/* Context Menu (for cards) */
.context-menu {
    position: absolute; background-color: rgba(252, 253, 255, 0.85);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(200, 210, 230, 0.4); border-radius: 14px;
    box-shadow: 0 8px 25px rgba(50, 70, 100, 0.18); padding: 10px;
    z-index: 2000; display: flex; flex-direction: column;
}
.context-menu button {
    background: none; border: none; padding: 12px 18px; text-align: left;
    font-size: 14px; color: #212529; cursor: pointer; border-radius: 10px;
    transition: background-color 0.2s; display: flex; align-items: center; gap: 10px;
}
.context-menu button:hover { background-color: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.context-menu button:disabled { color: #adb5bd; cursor: not-allowed; background-color: transparent !important; }
.context-menu button [data-lucide] { width:16px; height:16px; color: #5f6a7a; }
.context-menu button:hover [data-lucide] { color: #3b82f6; }
.context-menu button:disabled [data-lucide] { color: #ced4da; }


/* ───── Linking UX Styles ───── */
.edge-anchor-handle {
    position:absolute; 
    width:22px; 
    height:22px; 
    background:rgba(59, 130, 246, 0.7); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
    border-radius:50%; 
    backdrop-filter: blur(3px); 
    -webkit-backdrop-filter: blur(3px);
    display:none; 
    align-items:center; 
    justify-content:center; 
    cursor:pointer;
    box-shadow:0 1px 5px rgba(59,130,246,0.3); 
    z-index:2500; 
    transition: transform 0.1s ease-out, background-color 0.1s ease-out;
}
.edge-anchor-handle:hover {
    transform: scale(1.15); 
    background:rgba(59, 130, 246, 0.9); 
}
.edge-anchor-handle::before { 
    content:"+"; 
    color:rgba(255, 255, 255, 0.9); 
    font-size:16px; 
    font-weight:bold; 
    line-height: 22px; 
    text-shadow: 0 1px 1px rgba(0,0,0,0.1); 
}

#linkLayer {
    position:absolute; top:0; left:0; width:100%; height:100%;
    pointer-events:none; z-index:500; 
}
.link-path {
    fill:none; stroke:#3b82f6; stroke-width:2.5; 
    stroke-opacity: 0.7;
    pointer-events:stroke; 
    transition: stroke-opacity 0.2s ease;
}
.link-path:hover {
    stroke-opacity: 1;
}
.link-label {
    font-size:10px; fill:#1f2937; user-select:none; pointer-events:none;
    text-anchor: middle; 
    paint-order: stroke; stroke: rgba(255,255,255,0.7); stroke-width: 2px; stroke-linecap: butt; stroke-linejoin: miter; 
}

/* Context Menu (for links) */
.link-context-menu { 
    position:absolute; background:rgba(252,253,255,0.9);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border:1px solid rgba(200,210,230,0.4);
    border-radius:14px; box-shadow:0 8px 25px rgba(50,70,100,0.18);
    display:flex; flex-direction:column; padding:8px 0; 
    z-index:3000; 
}
.link-context-menu button {
    background:none; border:none; padding:10px 16px; text-align:left;
    font-size:13px; color:#212529; cursor:pointer; 
    border-radius: 8px; 
    transition:background 0.2s;
    display: flex; align-items: center; gap: 8px; 
}
.link-context-menu button:hover { background:rgba(59,130,246,0.12); color:#3b82f6; }
.link-context-menu button:not(:last-child) {
    margin-bottom: 2px; 
}
.link-context-menu hr { margin:4px 0; border: none; border-top: 1px solid rgba(0,0,0,0.1); }
.link-context-menu button[data-link-action="deleteLink"] { color:#ef4444; }


.hidden { display: none !important; }
[data-lucide] { width: 1.1em; height: 1.1em; stroke-width: 2.1; vertical-align: -0.2em; }

/* Magnetic Target Styles */
.recipe-card.magnetic-target,
.recipe-collection-card.magnetic-target {
    border: 2px solid #3B82F6 !important;
    border-radius: inherit; 
    box-shadow: 0 0 20px 5px rgba(59, 130, 246, 0.3) !important; 
    transition: border 0.2s ease-out, box-shadow 0.2s ease-out;
}
.recipe-card.magnetic-target-pulse,
.recipe-collection-card.magnetic-target-pulse {
    animation: pulseEffect 0.8s infinite alternate;
}
@keyframes pulseEffect {
    from { box-shadow: 0 0 15px 3px rgba(59, 130, 246, 0.4) !important; }
    to { box-shadow: 0 0 25px 8px rgba(59, 130, 246, 0.7) !important; }
}
/* Other interaction styles */
.recipe-card.welcoming, .recipe-collection-card.welcoming { transform: scale(1.05); }
.recipe-card.snapping-in, .recipe-collection-card.snapping-in {
    transition: left 0.15s cubic-bezier(0.25, 1, 0.5, 1),
                top 0.15s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}
.recipe-card.merged-effect, .recipe-collection-card.merged-effect { animation: mergeFlash 0.3s ease-out; }
@keyframes mergeFlash {
    0% { opacity: 1; transform: scale(1.03); } 
    50% { opacity: 0.7; transform: scale(0.98); } 
    100% { opacity: 1; transform: scale(1); }  
}

/* Styles for Text Document Collection Card Icon & Count Badge */
.recipe-collection-card.text-document-collection .rcc-icon {
    color: #22c55e; /* Green for text docs */
}
.recipe-collection-card.text-document-collection .rcc-count-badge {
    background-color: rgba(34, 197, 94, 0.8); /* Greenish badge */
}

/* Styles for Hierarchical Heading List in Expanded Area */
.collection-expanded-list-area .expanded-list-item.heading-item {
    height: auto; /* Allow dynamic height for details/summary */
    min-height: 45px;
    padding: 0; /* Remove padding if details/summary handles it */
    align-items: flex-start; /* Align items to top */
}

.collection-expanded-list-area .expanded-list-item.heading-level-1 > .rcv-name-condensed { /* Direct child span of H1 item */
    font-weight: 600;
}
.collection-expanded-list-area .expanded-list-item.heading-level-1 {
     padding: 10px 15px; /* Restore padding for H1 items */
}


.collection-expanded-list-area .rcv-name-condensed-small {
    font-size: 0.9em;
    opacity: 0.85;
    flex-grow: 1;
    line-height: 1.4;
    padding: 2px 0;
}

.collection-expanded-list-area details {
    width: 100%;
    border-radius: 14px; /* Match expanded-list-item for hover */
    transition: background 0.2s ease;
}
.collection-expanded-list-area details:hover {
    background: rgba(230, 245, 235, 0.7); /* Slight hover for details block */
}

.collection-expanded-list-area summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 10px 15px; /* Padding for summary line */
    position: relative;
    border-radius: 14px; /* Ensure summary can also show hover effect */
}
.collection-expanded-list-area summary::-webkit-details-marker {
    display: none;
}
.collection-expanded-list-area summary:hover {
     background: rgba(255, 255, 255, 0.75); /* Copied from .expanded-list-item:hover */
     border-color: rgba(34, 197, 94, 0.5);
     box-shadow: 0 4px 10px rgba(60,80,110,0.1);
}


.collection-expanded-list-area summary .heading-toggle-icon {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    color: #555e68;
    flex-shrink: 0;
}

.collection-expanded-list-area details > .children-container {
    padding-left: 20px; /* Indent children of details */
    border-left: 1px solid #e0e4e8;
    margin-left: 15px; /* Align with summary text/icon */
    padding-top: 5px;
    padding-bottom: 5px;
}
.collection-expanded-list-area details > .children-container .expanded-list-item,
.collection-expanded-list-area details > .children-container details summary {
    margin-bottom: 5px; /* Space between nested items */
    background: rgba(255,255,255,0.5); /* Lighter background for nested items */
}


/* Text Document Preview Panel */
.text-document-preview-panel {
    position: absolute;
    top: 50%;
    left: calc(100% + 280px + 15px + 15px); /* collection width + list width + gap + panel gap */
    width: 26rem; /* Increased width */
    height: auto; /* Auto height based on content */
    min-height: 27em; /* Minimum height similar to recipe cards */
    max-height: 75vh;
    background: rgba(248, 255, 250, 0.98); /* Light green-tinted white */
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1.5px solid rgba(220, 255, 230, 0.8);
    border-left: none;
    border-radius: 0 18px 18px 0;
    box-shadow: 10px 0px 35px rgba(50, 90, 70, 0.15);
    padding: 25px;
    z-index: 1002;
    opacity: 0;
    transform-origin: left center;
    pointer-events: none;
    transition:
        opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.recipe-collection-card.showing-text-preview .text-document-preview-panel {
    opacity: 1;
    transform: translateY(-50%) translateX(0) scaleX(1); /* Centered with list */
    pointer-events: auto;
}
/* Adjust panel position if list is not present or collection itself is the anchor */
.recipe-collection-card.expanded-collection-host:not(:has(.collection-expanded-list-area[style*="opacity: 1"])) .text-document-preview-panel {
    left: calc(100% + 15px); /* Position next to collection card if list area is hidden */
}


.text-preview-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(34, 197, 94, 0.3);
    flex-shrink: 0;
}

.text-preview-panel-header h4 {
    font-size: 17px;
    font-weight: 600;
    color: #16a34a; /* Darker green */
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-preview-panel-header .close-panel-btn {
    background: none; border: none; padding: 3px; cursor: pointer; color: #888; line-height: 0;
}
.text-preview-panel-header .close-panel-btn:hover { color: #ef4444; }


.text-preview-panel-content {
    flex-grow: 1;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.75;
    color: #2d3748; /* Dark gray for text */
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 197, 94, 0.6) #f0fdf4; /* Green scrollbar */
}
.text-preview-panel-content::-webkit-scrollbar { width: 6px; }
.text-preview-panel-content::-webkit-scrollbar-track { background: #f0fdf4; border-radius:3px;}
.text-preview-panel-content::-webkit-scrollbar-thumb { background-color: rgba(34, 197, 94, 0.6); border-radius: 3px; }

.text-preview-panel-content > *:first-child { margin-top: 0; padding-top: 0;}

.text-preview-panel-content h1,
.text-preview-panel-content h2,
.text-preview-panel-content h3,
.text-preview-panel-content h4,
.text-preview-panel-content h5,
.text-preview-panel-content h6 {
    margin-top: 1.4em;
    margin-bottom: 0.7em;
    line-height: 1.35;
    font-weight: 600;
    color: #1f2937;
}
.text-preview-panel-content h1 { font-size: 1.7em; padding-bottom: 0.2em; border-bottom: 1px solid #d1fae5;}
.text-preview-panel-content h2 { font-size: 1.4em; }
.text-preview-panel-content h3 { font-size: 1.25em; }
.text-preview-panel-content p { margin-bottom: 1.1em; }
.text-preview-panel-content ul, .text-preview-panel-content ol { margin-left: 25px; margin-bottom: 1.1em; }
.text-preview-panel-content li { margin-bottom: 0.6em; }
.text-preview-panel-content blockquote {
    border-left: 4px solid #6ee7b7; /* Lighter green */
    padding-left: 18px;
    margin: 1.2em 0;
    font-style: italic;
    color: #4b5563;
}
.text-preview-panel-content pre {
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    padding: 12px 15px;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1.1em;
    font-size: 0.9em;
}
.text-preview-panel-content code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    background-color: #e9fcf2; /* Very light green */
    color: #065f46; /* Dark green for code */
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
.text-preview-panel-content pre code { background-color: transparent; padding: 0; font-size: inherit; color: inherit;}
.text-preview-panel-content a { color: #059669; text-decoration: none; }
.text-preview-panel-content a:hover { text-decoration: underline; }