/* ═══════════════════════════════════════════════════════════════
   SHAPE FIXES — companion to inline JS styles in renderNode.
   ═══════════════════════════════════════════════════════════════ */

/* ── Add-branch button: solid border everywhere ── */
.add-child-btn { border-style: solid !important; }
.add-child-btn:hover { border-style: solid !important; }

/* ── Edit button: emoji only ── */
.node-btn.edit-btn { padding: 4px 6px; }

/* ── Resize handle pseudo-elements (single L-corner) ── */
.resize-handle::before {
    content: '';
    position: absolute;
    bottom: 3px; right: 3px;
    width: 8px; height: 8px;
    border: none;
    border-right: 2px solid rgba(255,255,255,0.25);
    border-bottom: 2px solid rgba(255,255,255,0.25);
}
.resize-handle::after { content: none; }
.node:hover .resize-handle { opacity: 0.8 !important; }
.node:hover .resize-handle::before {
    border-right-color: var(--node-border-color, rgba(255,255,255,0.5));
    border-bottom-color: var(--node-border-color, rgba(255,255,255,0.5));
}
body.light-mode .resize-handle::before {
    border-right-color: rgba(0,0,0,0.2);
    border-bottom-color: rgba(0,0,0,0.2);
}
body.light-mode .node:hover .resize-handle::before {
    border-right-color: var(--node-border-color, rgba(0,0,0,0.4));
    border-bottom-color: var(--node-border-color, rgba(0,0,0,0.4));
}

/* ── Pill: text overflow ── */
.node.shape-pill .node-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.node.shape-pill .node-description {
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ══════════════════════════════════════════════════════════════════
   FIX: TREE-HIGHLIGHT FLASH
   
   styles.css sets .node { transition: box-shadow 0.2s, transform 0.2s }
   styles.css tree-highlighted sets transition: opacity 0.1s, filter 0.1s
   This REPLACES box-shadow/transform transitions, killing hover glow.
   Fix: preserve box-shadow and transform in the transition list.
   ══════════════════════════════════════════════════════════════════ */
.node.tree-highlighted {
    transition: opacity 0.1s ease, filter 0.1s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.node.tree-dimmed {
    transition: opacity 0.1s ease, filter 0.1s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

/* ── Clip-path shapes: suppress CSS box-shadow on .node wrapper ── */
.node.shape-diamond, .node.shape-hexagon, .node.shape-parallelogram {
    box-shadow: none !important;
}
.node.shape-diamond:hover, .node.shape-hexagon:hover, .node.shape-parallelogram:hover {
    box-shadow: none !important;
}

/* ── Override layout-additions.css !important size declarations ── */
.node.shape-diamond, .node.shape-hexagon, .node.shape-parallelogram {
    width: auto !important; height: auto !important;
    max-width: none !important; max-height: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   BIG NODE TEXT — prevent wrapping on large diamond/hex/para shapes
   The .big-node class is added by renderNode when customSize is set
   and both dimensions exceed defaults by >20%.
   ══════════════════════════════════════════════════════════════════ */
.node.big-node.shape-diamond .node-title,
.node.big-node.shape-hexagon .node-title {
    -webkit-line-clamp: unset !important;
    display: block !important;
    max-width: 85% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    font-size: 0.9em !important;
}
.node.big-node.shape-parallelogram .node-title {
    -webkit-line-clamp: unset !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
}
/* Show description on big diamond/hex nodes instead of hiding */
.node.big-node.shape-diamond .node-description,
.node.big-node.shape-hexagon .node-description {
    display: block !important;
    font-size: 0.75em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    max-width: 80%;
    margin: 0 auto;
}
/* Show resize handle on big diamond/hex so users can resize them */
.node.big-node.shape-diamond .resize-handle,
.node.big-node.shape-hexagon .resize-handle {
    display: block !important;
}

/* ══════════════════════════════════════════════════════════════════
   SQUARE SHAPE
   ══════════════════════════════════════════════════════════════════ */
.node.shape-square {
    border-radius: var(--radius-sm, 4px);
}
.node.shape-square .node-content {
    padding-top: 0; height: 100%;
}
.node.shape-square .node-body-area { overflow: hidden; }
.node.shape-square .node-title {
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.node.shape-square .node-description {
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: 0.85em;
}

/* ── Hide timeline/multi settings ── */
#timeline-settings-section, #multi-settings-section {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   BUTTON BORDERS — ALL SHAPES
   
   JS cssText shorthand "border:1px solid ..." decomposes in the
   browser, leaving border-style and border-width empty.
   layout-additions.css only provides .node-actions border for
   clip shapes (diamond/hex/para). These CSS rules with !important
   ensure borders render on ALL shapes reliably.
   ══════════════════════════════════════════════════════════════════ */

/* ── Node-actions container border (wraps 📝 ✏️) ── */
.node .node-actions {
    border: 1px solid var(--border-light, #444) !important;
    border-radius: 4px;
    background: var(--bg-elevated, #2a2a2a);
    padding: 2px 4px;
}

/* ── Individual button styling ── */
.node-btn {
    border: 1px solid var(--border-light, #444) !important;
    border-radius: 4px !important;
    padding: 3px 5px !important;
    background: var(--bg-elevated, #2a2a2a);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.node-btn:hover {
    border-color: var(--accent, #4a9eff) !important;
    color: var(--accent, #4a9eff);
    background: rgba(74, 158, 255, 0.12) !important;
}

/* ── Add-branch button: ensure solid border renders ── */
.add-child-btn {
    border: 1px solid var(--border-light, #444) !important;
    border-radius: 4px;
    background: var(--bg-elevated, #2a2a2a);
}
.add-child-btn:hover {
    border-color: var(--accent, #4a9eff) !important;
    color: var(--accent, #4a9eff);
    background: var(--accent-dim, rgba(74, 158, 255, 0.12)) !important;
}

/* ══════════════════════════════════════════════════════════════════
   CONNECTION HANDLE IMPROVEMENTS
   Bigger handles with large hover zone, visual feedback during drag
   ══════════════════════════════════════════════════════════════════ */

/* Connection handles — visible dot is 14px, hover zone is 30px via ::after */
.connection-handle {
    width: 14px !important;
    height: 14px !important;
}
.left-handle {
    left: -7px !important;
}
.right-handle {
    right: -7px !important;
}
/* Invisible hover zone extending to 30px around the handle */
.connection-handle::after {
    content: '' !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 1;
}
/* Handle hover state — glow when mouse enters the 30px zone */
.connection-handle:hover {
    transform: translateY(-50%) scale(1.4) !important;
    box-shadow: 0 0 8px var(--accent, #4a9eff);
    opacity: 1 !important;
}

/* Prevent text selection while dragging a connection */
body.connecting-mode,
body.connecting-mode * {
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: crosshair !important;
}

/* Target hint: pulse glow on valid drop targets while dragging */
.connection-handle.conn-target-hint {
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    background: var(--accent, #4a9eff) !important;
    box-shadow: 0 0 12px var(--accent, #4a9eff), 0 0 24px rgba(74, 158, 255, 0.3);
    animation: conn-target-pulse 1s ease-in-out infinite;
    z-index: 20 !important;
}
@keyframes conn-target-pulse {
    0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 8px var(--accent, #4a9eff); }
    50% { transform: translateY(-50%) scale(1.3); box-shadow: 0 0 16px var(--accent, #4a9eff), 0 0 28px rgba(74, 158, 255, 0.4); }
}
.right-handle.conn-target-hint {
    animation: conn-target-pulse-r 1s ease-in-out infinite;
}
@keyframes conn-target-pulse-r {
    0%, 100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 8px var(--accent, #4a9eff); }
    50% { transform: translateY(-50%) scale(1.3); box-shadow: 0 0 16px var(--accent, #4a9eff), 0 0 28px rgba(74, 158, 255, 0.4); }
}

/* Source handle while connecting — green */
.connection-handle.connecting {
    opacity: 1 !important;
    background: var(--success, #4ade80) !important;
    box-shadow: 0 0 8px var(--success, #4ade80);
    transform: translateY(-50%) scale(1.3);
}

/* ══════════════════════════════════════════════════════════════════
   BIGGER CONN-CIRCLE — easy to find and click
   Large invisible hover zone with visible circle centered inside.
   ══════════════════════════════════════════════════════════════════ */
.conn-add-btn-wrap {
    width: 80px !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.conn-circle {
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    transition: all 0.15s ease !important;
}
/* Show circle when hovering the zone */
.conn-add-btn-wrap:hover .conn-circle {
    opacity: 1 !important;
    background: var(--bg-elevated, #2a2a2a) !important;
    color: var(--accent, #4a9eff) !important;
    border-color: var(--accent, #4a9eff) !important;
    transform: scale(1.0) !important;
}
/* Distinct hover on the circle itself */
.conn-circle:hover {
    background: var(--accent, #4a9eff) !important;
    color: #fff !important;
    transform: scale(1.15) !important;
    box-shadow: 0 0 10px rgba(74, 158, 255, 0.4);
}

/* ══════════════════════════════════════════════════════════════════
   CURSOR FIXES — ensure correct cursors are applied on startup
   ══════════════════════════════════════════════════════════════════ */
.node {
    cursor: grab;
}
.node:active, .node.dragging {
    cursor: grabbing;
}
.node .node-btn,
.node .add-child-btn {
    cursor: pointer !important;
}
.node .resize-handle {
    cursor: nwse-resize !important;
}
.node .connection-handle {
    cursor: crosshair !important;
}
#canvas-container {
    cursor: default;
}
#canvas-container.panning {
    cursor: grabbing;
}
/* ═══ Restore Defaults Button ═══ */
.restore-defaults-btn {
    float: right;
    background: transparent;
    border: 1px solid var(--border-light, #444);
    color: var(--text-muted, #888);
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
    margin-top: -2px;
}
.restore-defaults-btn:hover {
    background: var(--bg-elevated, #2a2a2a);
    color: var(--accent, #4a9eff);
    border-color: var(--accent, #4a9eff);
}