/* Hide stats corner */
.stats-corner{display:none}
.utility-zoom{
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  user-select: none;
  z-index: 1100;
}
.toast-host{position:fixed; bottom:20px; right:20px; z-index:1200; display:flex; flex-direction:column; align-items:flex-end; gap:12px; pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* Alignment guides */
.guide-line{position:absolute; pointer-events:none; background:rgba(255,255,255,0.55); z-index:750; opacity:0; transition:opacity .06s ease; mix-blend-mode:screen; box-shadow:0 0 0 1px rgba(255,255,255,0.18)}
.guide-line.active{opacity:1}
.guide-line--v{top:0; width:0.8px; height:100%}
.guide-line--h{left:0; height:0.8px; width:100%}

.node.search-hit{outline:2px solid rgba(255,255,255,0.75); box-shadow:0 0 24px rgba(255,255,255,0.35)}
.node.search-focus{outline:3px solid rgba(248,250,252,0.9); box-shadow:0 0 32px rgba(248,250,252,0.45)}


.hint {
position: fixed;
top: 56px;
left: calc(var(--panel-w) + 12px);
color: var(--muted);
font-size: 12px;
z-index: 1000;
user-select: none;
}

/* Hide comments mode */
.hide-comments .coupled-panel { display: none !important; }
.hide-comments .feedback-pills { display: none !important; }
.hide-comments .node[data-coupled='1'] .content { padding-bottom: 34px !important; }

.share-banner{position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:1150; padding:8px 14px; background:rgba(15,15,15,0.85); border:1px solid rgba(255,255,255,0.22); border-radius:999px; color:#e9ecf1; font-size:12px; letter-spacing:0.18em; display:none; align-items:center; gap:10px; text-transform:uppercase}
.share-banner .dot{width:6px; height:6px; border-radius:50%; background:#ffffff; display:inline-block}
.share-banner button{appearance:none; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.08); color:#f5f5f5; border-radius:999px; padding:6px 10px; font-size:11px; letter-spacing:0.08em; cursor:pointer; text-transform:none}
.share-banner button:hover{background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.32)}
body.sidebar-collapsed:not(.share-mode){--panel-w:80px}
body.share-mode{--panel-w:0px}
body.share-mode .share-banner{display:flex}
body.share-mode .toolbar,
body.share-mode .sidepanel,
body.share-mode #statsCorner,
body.share-mode .hint,
body.share-mode .layoutbar,
body.share-mode .filterbar,
body.share-mode .aligner{display:none !important}
body.share-mode .stage{width:100vw; margin:0}
body.share-mode .node{cursor:default}

/* Aligner popover (top-right) */
.aligner {
position: fixed;
top: 56px; /* below info */
right: 12px;
z-index: 1000;
user-select: none;
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
background: rgba(15,15,15,0.7);
padding: 6px 8px;
border-radius: 10px;
font-size: 12px;
letter-spacing: 0.2px;
display: flex;
gap: 6px;
backdrop-filter: blur(8px) saturate(120%);
}
.aligner[hidden] { display: none; }
.aligner button {
appearance: none;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.06);
color: #fff;
padding: 6px 8px;
border-radius: 8px;
font-size: 12px;
cursor: pointer;
}
.aligner button:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); }

/* Chronology layout bar */
.layoutbar {
position: fixed;
top: 92px; /* below aligner */
right: 12px;
z-index: 1000;
user-select: none;
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
background: rgba(15,15,15,0.7);
padding: 6px 8px;
border-radius: 10px;
font-size: 12px;
letter-spacing: 0.2px;
display: flex;
gap: 6px;
backdrop-filter: blur(8px) saturate(120%);
}
.layoutbar button {
appearance: none;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.06);
color: #fff;
padding: 6px 8px;
border-radius: 8px;
font-size: 12px;
cursor: pointer;
}
/* Filter bar */
.filterbar {
position: fixed;
top: 128px; /* below layoutbar */
right: 12px;
z-index: 1000;
user-select: none;
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
background: rgba(15,15,15,0.7);
padding: 6px 8px;
border-radius: 10px;
font-size: 12px;
letter-spacing: 0.2px;
display: flex;
gap: 10px;
backdrop-filter: blur(8px) saturate(120%);
align-items: center;
}
.filterbar label { display: inline-flex; align-items: center; gap: 6px; opacity: 0.9; }
.filterbar input[type="checkbox"] { width: 14px; height: 14px; }
.filterbar input[type="checkbox"] { accent-color: #ffffff; }

/* Ghosted cards and wires */
.node.ghost { opacity: 0.18; }
.layoutbar button:hover { background: #ffffff18; border-color: #ffffff99; }

/* Stage for nodes + connecting lines */
.stage {
position: relative;
width: calc(100vw - var(--panel-w));
margin-left: var(--panel-w);
height: 100vh;
overflow: hidden;
}

.stage-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
background: rgba(24, 24, 27, 0.82);
backdrop-filter: blur(6px);
z-index: 900;
color: rgba(248, 250, 252, 0.92);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
pointer-events: all;
}
.light .stage-loading {
color: #ffffff;
}
.stage-loading[hidden] {
display: none;
}
.stage-loading__spinner {
width: 32px;
height: 32px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,0.18);
border-top-color: var(--accent);
animation: spin 0.9s linear infinite;
}
.stage-loading__label {
text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

body.board-transitioning .stage {
cursor: progress;
}
body.board-transitioning .stage .world {
pointer-events: none;
filter: blur(1.5px);
transition: filter 0.18s ease;
}

/* Side panel (left) */
.sidepanel {
position: fixed;
top: 0;
left: 0;
width: var(--panel-w);
height: 100vh;
background: var(--panel);
border-right: 1px solid var(--line-weak);
display: flex;
color: var(--text-1);
z-index: 950;
box-sizing: border-box;
transition: width 0.3s ease;
}
.sidepanel.is-collapsed {
width: 80px;
}
.sidepanel.is-collapsed .sidepanel-brand-text,
.sidepanel.is-collapsed .sidepanel-subheader,
.sidepanel.is-collapsed .sidepanel-search,
.sidepanel.is-collapsed .projects-tree,
.sidepanel.is-collapsed .sidepanel-footer-actions {
display: none;
}
.sidepanel.is-collapsed .sidepanel-header {
justify-content: center;
flex-direction: column;
gap: var(--gap-3);
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.sidepanel.is-collapsed .sidepanel-footer {
border-top: none;
padding-top: 0;
}
.sidepanel.is-collapsed .sidepanel-footer-controls {
justify-content: center;
}
.sidepanel.is-collapsed .sidepanel-inner {
justify-content: space-between;
}
.sidepanel-inner {
flex: 1;
display: flex;
flex-direction: column;
padding: var(--gap-4) var(--gap-3);
gap: var(--gap-3);
}
.sidepanel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--gap-4);
border-bottom: 1px solid var(--line-weak);
margin-bottom: var(--gap-3);
}
.sidepanel-brand {
display: flex;
align-items: center;
gap: var(--gap-3);
}
.sidepanel-logo {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 8px;
}
.sidepanel-brand-text {
display: flex;
flex-direction: column;
}
.sidepanel-brand-name {
font-size: 18px;
font-weight: 700;
color: var(--text-1);
letter-spacing: -0.01em;
}
.sidepanel-brand-tagline {
font-size: 11px;
color: var(--accent);
letter-spacing: 0.05em;
text-transform: uppercase;
font-weight: 500;
}
.sidepanel-collapse-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: .55rem;
border: 1px solid var(--line-strong);
background: rgba(255, 255, 255, .03);
color: var(--text-2);
cursor: pointer;
transition: all .2s ease;
}
.sidepanel-collapse-btn:hover {
background: var(--hover);
border-color: var(--accent);
color: var(--text-1);
}
.sidepanel-collapse-btn svg {
width: 18px;
height: 18px;
transition: transform .3s ease;
}
.sidepanel.is-collapsed .sidepanel-collapse-btn svg {
transform: rotate(180deg);
}
.sidepanel-subheader {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
margin-bottom: var(--gap-3);
}
.sidepanel-title span {
display: block;
font-weight: 600;
letter-spacing: .01em;
color: var(--text-2);
font-size: 14px;
}
.sidepanel-new-btn {
display: inline-flex;
align-items: center;
gap: .45rem;
border-radius: .6rem;
padding: .55rem .75rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--line-strong);
color: var(--text-1);
cursor: pointer;
transition: background .15s ease, border-color .15s ease;
}
.sidepanel-new-btn:hover {
background: var(--hover);
border-color: rgba(255, 255, 255, 0.4);
}
.sidepanel-new-btn svg {
width: 16px;
height: 16px;
}
.sidepanel-search input {
width: 100%;
border-radius: .6rem;
border: 1px solid var(--line-weak);
background: var(--surface);
color: var(--text-1);
padding: .55rem .75rem;
outline: none;
transition: border-color .15s ease, box-shadow .2s ease;
}
.sidepanel-search input::placeholder { color: var(--text-3); }
.sidepanel-search input:focus {
border-color: var(--accent-2);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.projects-tree {
flex: 1 1 auto;
overflow-y: auto;
padding-right: 2px;
}
.projects-tree ul {
list-style: none;
margin: 0;
padding: 0;
}
.tree-node { margin-top: var(--gap-4); }
.tree-node:first-child { margin-top: 0; }
.tree-row {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: center;
padding: 0 .45rem;
min-height: var(--row-1);
border-radius: .55rem;
color: var(--text-2);
cursor: pointer;
transition: background .12s ease, color .12s ease;
position: relative;
}
.tree-row[data-level="2"] { min-height: var(--row-2); font-size: 14px; }
.tree-row:hover { background: var(--hover); }
.tree-row[data-level="1"] {
color: var(--text-1);
font-weight: 640;
}
.tree-node.is-active > .tree-row {
background: rgba(255, 255, 255, 0.1);
color: var(--text-1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
:root.light .tree-node.is-active > .tree-row {
background: rgba(255, 255, 255, 0.07);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.tree-node.is-active > .tree-row .tree-toggle {
color: rgba(255, 255, 255, 0.85);
}
:root.light .tree-node.is-active > .tree-row .tree-toggle {
color: var(--accent);
}
.tree-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: .45rem;
border: 1px solid transparent;
background: transparent;
color: var(--text-3);
cursor: pointer;
transition: border-color .12s ease, background .12s ease;
}
.tree-toggle:hover {
border-color: var(--line-weak);
background: var(--hover);
}
.tree-toggle svg {
width: 14px;
height: 14px;
transition: transform .15s ease;
}
.chev--rotated { transform: rotate(90deg); }
.tree-title {
display: inline-flex;
align-items: center;
gap: .4rem;
min-width: 0;
}
.tree-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tree-label-input {
background: var(--surface);
border: 1px solid var(--accent);
border-radius: 4px;
padding: 2px 6px;
font: inherit;
color: var(--text-1);
width: 100%;
outline: none;
}
.tree-label-input:focus {
box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}
.tree-title.editing {
flex: 1;
min-width: 0;
}
.new-project-row {
display: grid;
grid-template-columns: 22px 1fr;
align-items: center;
padding: 0 .45rem;
min-height: var(--row-1);
border-radius: .55rem;
background: var(--surface);
border: 1px solid var(--accent);
margin-bottom: var(--gap-3);
}
.new-project-input {
background: transparent;
border: none;
padding: 4px 6px;
font: inherit;
font-weight: 640;
color: var(--text-1);
width: 100%;
outline: none;
}
.tree-meta {
color: var(--text-3);
font-size: 12px;
white-space: nowrap;
margin-left: .6rem;
}
.tree-node.is-active > .tree-row .tree-meta {
color: var(--text-2);
font-weight: 500;
}
:root.light .tree-node.is-active > .tree-row .tree-meta {
color: var(--accent);
font-weight: 600;
}
.tree-badge {
border-radius: 999px;
border: 1px solid var(--line-strong);
padding: .05rem .4rem;
font-size: 11px;
color: var(--text-3);
background: rgba(255, 255, 255, 0.02);
margin-left: .6rem;
opacity: 0.8;
}
:root.light .tree-badge {
background: var(--bg);
opacity: 1;
}
.tree-actions {
display: none;
align-items: center;
gap: .3rem;
margin-left: .5rem;
}
.tree-row:hover .tree-actions { display: flex; }
.tree-row:hover .tree-meta,
.tree-row:hover .tree-badge {
display: none;
}
.tree-row:focus .tree-actions,
.tree-row:focus-within .tree-actions {
display: flex;
}
.tree-row:focus .tree-meta,
.tree-row:focus-within .tree-meta,
.tree-row:focus .tree-badge,
.tree-row:focus-within .tree-badge {
display: none;
}
.tree-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
}
.tree-pill--primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.tree-pill--primary:hover {
filter: brightness(1.05);
}
.tree-pill--primary:disabled {
opacity: 0.6;
cursor: wait;
}
.tree-pill--ghost {
background: transparent;
color: var(--text-2);
border-color: var(--line-weak);
}
.tree-pill--ghost:hover {
color: var(--text-1);
border-color: var(--line-strong);
}
.invite-group { margin-top: var(--gap-2); }
.invite-actions { gap: 0.35rem; }
.invite-row .tree-meta { color: var(--accent); font-weight: 600; }
.shared-group { margin-top: var(--gap-2); }
.tree-toggle.icon-only { width: 22px; display: inline-flex; align-items: center; justify-content: center; }
.tree-action-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: .4rem;
border: none;
background: transparent;
color: var(--text-3);
cursor: pointer;
transition: background .12s ease, color .12s ease;
}
.tree-action-btn:hover {
background: var(--hover);
color: var(--text-1);
}
.tree-action-btn.delete:hover {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.tree-action-btn:first-child:hover {
background: rgba(34, 197, 94, 0.1);
color: #22c55e;
}
.tree-action-btn svg {
width: 14px;
height: 14px;
}
.tree-action-btn.tree-share-btn svg {
width: 16px;
height: 16px;
}
.tree-action-btn.tree-share-btn:hover {
color: var(--accent);
}
.toast {
position: relative;
background: var(--panel);
color: var(--text-1);
padding: 12px 16px;
border-radius: 12px;
border: 1px solid var(--line-weak);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
font-size: 14px;
font-weight: 500;
opacity: 0;
transform: translateX(100px) scale(0.95);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: auto;
z-index: 1200;
max-width: 320px;
display: flex;
align-items: center;
gap: 10px;
}
.toast-logo {
width: 24px;
height: 24px;
border-radius: 4px;
flex-shrink: 0;
}
.toast-text {
flex: 1;
}
.toast.show {
opacity: 1;
transform: translateX(0) scale(1);
}
.toast::before {
content: '';
position: absolute;
top: 50%;
right: -8px;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 8px;
border-color: transparent transparent transparent var(--panel);
filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1));
}
:root.light .toast {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--modal-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
transition: opacity 0.2s ease;
}
.modal-overlay.show {
opacity: 1;
}
.modal {
background: var(--panel);
border: 1px solid var(--line-strong);
border-radius: 12px;
padding: 1.5rem;
max-width: 400px;
width: 90%;
box-shadow: 0 20px 60px var(--modal-shadow);
transform: scale(0.9);
transition: transform 0.2s ease;
}
.modal-overlay.show .modal {
transform: scale(1);
}
.share-modal {
max-width: 480px;
width: min(90vw, 520px);
display: flex;
flex-direction: column;
gap: 1rem;
padding-bottom: 1.75rem;
}
.share-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.share-modal__header h3 {
font-size: 20px;
font-weight: 600;
color: var(--text-1);
}
.share-modal__close {
border: none;
background: transparent;
color: var(--text-2);
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.share-modal__close:hover {
background: var(--hover);
color: var(--text-1);
}
.share-modal__summary {
margin: 0;
font-size: 0.9rem;
color: var(--text-2);
line-height: 1.5;
}
.share-modal__owner {
font-size: 0.85rem;
color: var(--text-3);
}
.share-modal__status {
font-size: 0.85rem;
min-height: 1.1rem;
color: var(--text-2);
}
.share-modal__status[data-state="error"] {
color: #ef4444;
}
.share-modal__status[data-state="success"] {
color: #22c55e;
}
.share-modal__form {
display: grid;
gap: 0.75rem;
padding: 0.75rem;
border-radius: 10px;
background: rgba(148, 163, 184, 0.06);
border: 1px solid rgba(148, 163, 184, 0.12);
}
.share-modal__field {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-3);
}
.share-modal__field input,
.share-modal__field select {
width: 100%;
padding: 0.5rem 0.65rem;
border-radius: 8px;
border: 1px solid var(--line-weak);
background: var(--surface);
color: var(--text-1);
font-size: 0.95rem;
transition: border 0.15s ease;
}
.share-modal__field input:focus,
.share-modal__field select:focus {
outline: none;
border-color: var(--accent);
}
.share-modal__form-actions {
display: flex;
justify-content: flex-end;
}
.share-modal__primary {
padding: 0.55rem 1rem;
border-radius: 8px;
border: none;
background: var(--accent);
color: #fff;
font-weight: 600;
cursor: pointer;
transition: filter 0.15s ease;
}
.share-modal__primary:disabled {
opacity: 0.6;
cursor: wait;
}
.share-modal__primary:hover:not(:disabled) {
filter: brightness(1.05);
}
.share-modal__loading {
font-size: 0.85rem;
color: var(--text-3);
display: none;
}
.share-modal__section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.share-modal__section h4 {
margin: 0;
font-size: 0.9rem;
font-weight: 600;
color: var(--text-1);
}
.share-modal__list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.4rem;
}
.share-modal__item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.6rem;
border-radius: 8px;
background: rgba(148, 163, 184, 0.08);
border: 1px solid rgba(148, 163, 184, 0.14);
}
.share-modal__item-info {
display: flex;
flex-direction: column;
font-size: 0.85rem;
gap: 0.1rem;
color: var(--text-2);
}
.share-modal__item-info strong {
color: var(--text-1);
font-weight: 600;
}
.share-modal__item-actions {
display: flex;
gap: 0.4rem;
align-items: center;
}
.share-modal__ghost,
.share-modal__danger {
border-radius: 8px;
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
background: transparent;
color: var(--text-2);
transition: all 0.15s ease;
}
.share-modal__ghost:hover {
border-color: var(--line-weak);
color: var(--text-1);
}
.share-modal__danger {
border-color: rgba(239, 68, 68, 0.4);
color: #ef4444;
}
.share-modal__danger:hover {
background: rgba(239, 68, 68, 0.12);
}
.share-modal__empty {
font-size: 0.85rem;
color: var(--text-3);
padding: 0.4rem 0.5rem;
}
.share-modal__leave {
margin-top: 0.5rem;
display: none;
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem;
border-radius: 10px;
border: 1px solid rgba(239, 68, 68, 0.18);
background: rgba(239, 68, 68, 0.08);
}
.share-modal__leave p {
margin: 0;
font-size: 0.85rem;
color: var(--text-2);
}
.share-modal__leave .share-modal__danger {
align-self: flex-start;
}

.modal-title {
font-size: 18px;
font-weight: 600;
color: var(--text-1);
margin-bottom: 0.5rem;
}
.modal-message {
color: var(--text-2);
margin-bottom: 1.5rem;
line-height: 1.5;
}
.modal-actions {
display: flex;
gap: 0.75rem;
justify-content: flex-end;
}
.modal-btn {
padding: 0.5rem 1rem;
border-radius: 6px;
border: 1px solid var(--line-strong);
background: var(--surface);
color: var(--text-1);
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.modal-btn:hover {
background: var(--hover);
}
.modal-btn-danger {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
color: #ef4444;
}
.modal-btn-danger:hover {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.4);
}
.tree-children {
margin-left: 14px;
padding-left: 12px;
padding-top: var(--gap-4);
padding-bottom: var(--gap-1);
display: grid;
gap: var(--gap-1);
}
.tree-children .tree-leaf:first-child {
margin-top: var(--gap-2);
}
.tree-leaf .tree-row {
grid-template-columns: 22px 1fr auto;
position: relative;
}
.tree-leaf .tree-title::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--text-3);
display: inline-block;
opacity: 0.4;
}
.tree-leaf.is-active .tree-row {
background: rgba(255, 255, 255, 0.06);
color: var(--text-1);
box-shadow: none;
}
:root.light .tree-leaf.is-active .tree-row {
background: rgba(255, 255, 255, 0.05);
}
.tree-leaf.is-active .tree-badge {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: var(--accent);
}
:root.light .tree-leaf.is-active .tree-badge {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
}
.sidepanel-footer {
border-top: 1px solid var(--line-weak);
padding-top: var(--gap-3);
display: grid;
gap: var(--gap-3);
}
.sidepanel-footer-actions {
display: grid;
gap: var(--gap-2);
}
.sidepanel-footer-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
padding: .6rem .85rem;
border-radius: .6rem;
border: 1px solid var(--line-strong);
background: rgba(255, 255, 255, 0.05);
color: var(--text-1);
cursor: pointer;
font-weight: 600;
transition: background .12s ease, border-color .12s ease;
}
.sidepanel-footer-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
}
.sidepanel-footer-btn svg { width: 16px; height: 16px; }
.sidepanel-footer-btn--accent {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.4);
}
.sidepanel-footer-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gap-2);
}
.theme-toggle-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: .55rem;
border: 1px solid var(--line-strong);
background: rgba(255, 255, 255, .03);
color: var(--text-2);
cursor: pointer;
transition: all .2s ease;
}
.theme-toggle-btn:hover {
background: rgba(255, 204, 0, 0.1);
border-color: rgba(255, 204, 0, 0.3);
color: #fbbf24;
}
:root.light .theme-toggle-btn:hover {
background: rgba(0, 0, 0, 0.08);
border-color: var(--line-strong);
color: var(--text-1);
}
.theme-toggle-btn svg {
width: 18px;
height: 18px;
}
.theme-toggle-btn.light {
background: rgba(0, 0, 0, 0.05);
border-color: var(--line-strong);
color: var(--text-2);
}
.sidebar-modal{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--modal-overlay); backdrop-filter:blur(8px); z-index:1200; opacity:0; pointer-events:none; transition:opacity .2s ease}
.sidebar-modal[hidden]{display:none}
.sidebar-modal.is-open{opacity:1; pointer-events:auto}
.sidebar-modal__panel{background:rgba(17,17,24,0.96); border:1px solid rgba(148,163,184,0.2); border-radius:16px; box-shadow:0 28px 80px rgba(0,0,0,0.45); width:min(420px,90vw); max-height:90vh; overflow:auto; padding:24px 24px 28px; position:relative; color:#e2e8f0; font-size:14px}
.sidebar-modal__title{margin:0 0 8px 0; font-size:18px; letter-spacing:.02em}
.sidebar-modal__lead{margin:0 0 16px 0; color:#94a3b8; font-size:13px}
.sidebar-modal__section{margin-bottom:18px}
.sidebar-modal__section h3{margin:0 0 8px 0; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#a0a6b2}
.sidebar-modal__actions{display:flex; gap:10px; flex-wrap:wrap}
.sidebar-modal__action{appearance:none; border:1px solid rgba(148,163,184,0.35); background:transparent; color:#e2e8f0; border-radius:10px; padding:10px 14px; font-size:13px; cursor:pointer; transition:background .15s ease, border-color .15s ease}
.sidebar-modal__action:hover{background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.45)}
.sidebar-modal__action--accent{border-color:rgba(255,255,255,0.45)}
.sidebar-modal__action--accent:hover{background:rgba(255,255,255,0.18)}
.sidebar-modal__close{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:1px solid rgba(148,163,184,0.3); background:transparent; color:#e2e8f0; cursor:pointer}
.sidebar-modal__close:hover{background:rgba(255,255,255,0.08)}
.sidebar-modal__plans{display:grid; gap:16px; margin-top:16px}
.sidebar-modal__plan-card{border:1px solid rgba(148,163,184,0.25); border-radius:14px; padding:18px; background:rgba(15,15,24,0.92); display:flex; flex-direction:column; gap:12px}
.sidebar-modal__plan-price{margin:0; font-size:20px; color:#f8fafc}
.sidebar-modal__plan-price span{font-size:12px; color:#94a3b8}
.sidebar-modal__plan-features{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; color:#cbd5f5; font-size:13px}
.sidebar-modal__plan-features li{display:flex; align-items:center; gap:8px}
.sidebar-modal__plan-features svg{width:16px; height:16px}

/* World: panning + zooming container */
.world {
position: absolute;
inset: 0;
transform-origin: 0 0;
}

/* Wires behind nodes inside the world; allow overflow for infinite space */
svg.wires {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: auto; /* allow line interactions */
overflow: visible; /* do not clip long lines */
shape-rendering: geometricPrecision;
}

svg.wires .wire.wire--guest {
  stroke: #ffffff;
}

.nodes {
position: absolute;
inset: 0;
}

.node {
  position: absolute;
  width: 360px;
  min-width: 360px;
  min-height: auto;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  color: rgba(255, 255, 255, 0.85);
  cursor: grab;
  user-select: none;
  transition: border-color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.node:hover {
  border-color: rgba(255, 107, 107, 0.25);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.node.node--parent {
  border-width: 2px;
}

.node.is-editing {
  /* No special styling - let individual fields handle their own focus states */
}

.node:active {
  cursor: grabbing;
}

.node .chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -12px -14px 8px -14px;
  padding: 10px 14px 8px 14px;
  background: transparent;
}

.node .head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.node .dot {
  display: none;
}

/* Guest card styles disabled - invitee cards now look the same as normal cards */
/*
.node--guest-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.96) 100%);
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.32), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  color: #0f172a;
}

.node--guest-card .dot {
  background: #ffffff;
  box-shadow: 0 0 0 6px rgba(15, 23, 42, 0.08);
}

.node--guest-card .chrome {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.node--guest-card .title {
  color: #0b1220;
}

.node--guest-card .head-btn {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.12);
  color: rgba(30, 41, 59, 0.85);
}

.node--guest-card .head-btn:hover,
.node--guest-card .head-btn:focus-visible {
  color: #0f172a;
  background: rgba(30, 41, 59, 0.12);
  border-color: rgba(30, 41, 59, 0.24);
}

.node--guest-card .threads-container {
  border-top-color: rgba(15, 23, 42, 0.08);
}

.node--guest-card .threads-label {
  color: rgba(15, 23, 42, 0.58);
  opacity: 0.85;
}

.node--guest-card .thread-item {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

.node--guest-card .feedback-pill {
  background-color: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

.light .node--guest-card {
  background: linear-gradient(180deg, #ffffff 0%, #e8edf5 100%);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16), 0 1px 0 rgba(255, 255, 255, 0.86) inset;
  color: #0f172a;
}

.light .node--guest-card .dot {
  background: #1e293b;
  box-shadow: 0 0 0 6px rgba(30, 41, 59, 0.08);
}

.light .node--guest-card .chrome {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.light .node--guest-card .title {
  color: #0b1220;
}

.light .node--guest-card .head-btn {
  border-color: rgba(30, 41, 59, 0.18);
  background: rgba(30, 41, 59, 0.08);
  color: rgba(15, 23, 42, 0.76);
}

.light .node--guest-card .head-btn:hover,
.light .node--guest-card .head-btn:focus-visible {
  background: rgba(30, 41, 59, 0.14);
  border-color: rgba(30, 41, 59, 0.24);
  color: #0b1220;
}

.light .node--guest-card .thread-item {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.1);
}
*/

.node--locked {
  cursor: not-allowed !important;
}

.node--locked .title {
  cursor: not-allowed;
}

.node .head-btn.is-disabled,
.node .head-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}


.node .ordinal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.node .title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 6px;
  min-width: 60px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.node .title:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(1px);
}

.node .title[data-empty="1"]::after {
  content: attr(data-placeholder);
  color: rgba(209, 214, 235, 0.45);
  font-style: italic;
}

.node .title.editing {
  display: none;
}

.title-input {
  width: auto;
  min-width: 150px;
  font: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 107, 107, 0.4);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.95);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.15);
}

.title-input:focus {
  border-color: rgba(167, 139, 250, 0.9);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.28);
}

.node .head-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}

body.card-icons-hidden .node .head-actions {
  display: none !important;
}

body.card-icons-hidden .node .card-trash {
  display: none !important;
}

body.card-icons-hidden .node .ordinal {
  display: none !important;
}

body.card-icons-hidden .node .head-left {
  gap: 6px;
}

body.card-icons-hidden #toggleCardIcons {
  background: var(--active-bg);
  border-color: var(--accent);
  color: var(--accent);
}

body.card-icons-hidden #toggleCardIcons svg {
  color: currentColor;
}

.node .head-btn {
  appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(148, 163, 184, 0.16);
  color: rgba(226, 232, 240, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.node .head-btn svg {
  display: block;
}

.node .header-link-up svg,
.node .header-link-right svg {
  transition: transform 0.12s ease;
}

.node .header-link-up svg {
  transform: rotate(180deg);
}

body.ctrl-mode .node .header-link-up svg {
  transform: rotate(0deg);
}

body.ctrl-mode .node .header-link-right svg {
  transform: rotate(180deg);
}

.node .head-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  color: #f8fafc;
  transform: translateY(-1px);
}

.node .head-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

.node .head-btn:active {
  transform: scale(0.95);
}

.node .head-btn.is-max {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.node .content {
  position: relative;
  flex: 1;
  padding: 6px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.node .main-content-area {
  flex: 1;
  min-height: 48px;
  margin-bottom: 8px;
  position: relative;
}

.node .feedback-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.node .feedback-section:empty:not(.feedback-pills) {
  display: none;
  padding: 0;
  margin: 0;
}

.node .threads-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 4px;
  border-top: 1px solid rgba(41, 45, 62, 0.6);
  margin-top: auto;
  flex-shrink: 0;
}

.node .threads-container.is-empty,
.node .threads-container[hidden] {
  display: none !important;
}

.node .threads-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(182, 189, 207, 0.6);
  opacity: 0.6;
  margin-bottom: 4px;
}

.node .thread-item {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  min-height: 32px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  outline: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: pre-line;
  word-break: break-word;
}

.node .thread-item[contenteditable="true"] {
  cursor: text;
  user-select: text;
}

.node .thread-item.main-item {
  background: transparent;
  border: none;
  padding: 10px 4px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  min-height: 32px;
  position: relative;
  letter-spacing: 0.01em;
}

.node .thread-item::after {
  content: attr(data-placeholder);
  position: absolute;
  left: 10px;
  top: 8px;
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  display: none;
  font-size: 12px;
}

.node .thread-item:empty::after {
  display: block;
}

.node .thread-item.main-item::after {
  left: 2px;
  font-size: 13px;
  font-style: italic;
}

.node .thread-item:focus {
  border-color: rgba(220, 38, 38, 0.8);
  background: rgba(17, 19, 25, 0.7);
  color: #f8fafc;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15);
}

.node .thread-item.main-item:focus {
  background: rgba(17, 19, 25, 0.4);
  border: 1px solid rgba(220, 38, 38, 0.3);
  padding: 8px 10px;
  margin: 0 -8px;
}

.node .thread-item + .thread-item {
  margin-top: 6px;
}

.node .thread-item a {
  color: #ffffff;
  text-decoration: none;
  font-style: italic;
  transition: opacity 0.2s ease;
}

.node .thread-item a:hover {
  opacity: 0.8;
  text-decoration: underline;
  text-decoration-color: rgba(220, 38, 38, 0.5);
  text-underline-offset: 2px;
}

.node .card-trash {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(220, 38, 38, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.node .card-trash svg {
  stroke: currentColor;
}

.node:hover .card-trash {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.node .card-trash:hover {
  background: rgba(239, 68, 68, 1);
}

.node .card-trash:disabled {
  opacity: 0 !important;
  pointer-events: none !important;
}

.node.node--heading {
  min-width: 420px;
  max-width: 480px;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.36) inset, 0 20px 46px rgba(0, 0, 0, 0.6);
}

.node.node--heading .dot,
.node.node--heading .ordinal {
  display: none;
}

.node.node--heading .head-actions {
  display: none;
}

.node.node--heading .main-content-area {
  padding-top: 4px;
}

.node.node--heading .main-content-area .thread-item {
  border: none;
  background: transparent;
  padding: 4px 0;
  font-size: 26px;
  font-weight: 700;
  color: #f8fafc;
}

.node.node--heading .main-content-area .thread-item[data-empty="1"]::after {
  color: rgba(200, 205, 225, 0.4);
}

.node.node--heading .threads-container,
.node.node--heading .feedback-section {
  display: none !important;
}

.node.node--pill {
  min-width: 200px;
  max-width: 260px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.48);
  color: #f3e8ff;
  box-shadow: 0 18px 34px rgba(255, 255, 255, 0.3);
}

.node.node--pill .head-actions {
  display: none;
}

.node.node--pill .dot,
.node.node--pill .ordinal {
  display: none;
}

.node.node--pill .main-content-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}

.node.node--pill .main-content-area .thread-item {
  border: none;
  background: transparent;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: inherit;
  padding: 0;
  min-height: 0;
}

.node.node--pill .main-content-area .thread-item[data-empty="1"]::after {
  color: rgba(243, 232, 255, 0.7);
}

.node.node--pill .threads-container,
.node.node--pill .feedback-section {
  display: none !important;
}

.node.node--table {
  width: auto;
  min-width: 320px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.node.node--table .chrome {
  display: none;
}

.node.node--table .content {
  padding: 0;
  margin: 0;
}

.node.node--table .main-content-area {
  margin: 0;
  min-height: auto;
}

.node.node--table .head-actions {
  display: none;
}

.node.node--table .threads-container {
  display: none !important;
}

.node.node--table .feedback-section {
  padding: 12px 4px 0;
  margin: 12px 0 0;
  gap: 6px;
}

.node.node--table .feedback-section:empty:not(.feedback-pills) {
  display: none;
}

.node.node--table .table-grid-host {
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.node.node--table .table-heading {
  font-size: 17px;
  font-weight: 600;
  color: var(--table-btn-hover-text);
  padding: 0 4px 4px 4px;
  border: none;
  background: transparent;
  outline: none;
  cursor: text;
  text-align: left;
  line-height: 1.5;
  min-height: 22px;
  user-select: text;
  letter-spacing: -0.01em;
}

.node.node--table .table-heading:focus {
  color: var(--table-btn-hover-text);
}

.node.node--table .table-heading[data-empty="1"]::after {
  content: attr(data-placeholder);
  color: rgba(255, 107, 107, 0.35);
  font-style: italic;
}

:root.light .node.node--table .table-heading {
  color: var(--text-1);
}

:root.light .node.node--table .table-heading:focus {
  color: var(--text-1);
}

:root.light .node.node--table .table-heading[data-empty="1"]::after {
  color: rgba(148, 163, 184, 0.55);
}

:root.charcoal .node.node--table .table-heading {
  color: var(--text-1);
}

:root.charcoal .node.node--table .table-heading:focus {
  color: var(--text-1);
}

:root.charcoal .node.node--table .table-heading[data-empty="1"]::after {
  color: rgba(138, 138, 138, 0.4);
}

.node.node--table .table-grid-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 12px;
  background: var(--table-container-bg);
  border: 1px solid var(--table-border);
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.node.node--table .table-grid {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
  table-layout: auto;
  color: var(--table-text);
  background: var(--table-surface);
  border-radius: 12px;
  overflow: hidden;
}

.node.node--table .table-grid__cell {
  position: relative;
  padding: 14px 20px;
  border-right: 1px solid var(--table-border);
  border-bottom: 1px solid var(--table-border);
  font-size: 0.875rem;
  line-height: 1.6;
  min-height: 20px;
  vertical-align: middle;
  background: transparent;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: pre;
  overflow: visible;
  text-overflow: unset;
  min-width: 80px;
  max-width: none;
  cursor: text;
  user-select: text;
  word-break: normal;
  overflow-wrap: normal;
  color: var(--table-text);
  font-weight: 400;
  letter-spacing: 0.01em;
}

.node.node--table .table-grid__cell:last-child {
  border-right: none;
}

.node.node--table tbody tr:last-child:not(:first-child) .table-grid__cell {
  border-bottom: none;
}

.node.node--table .table-grid__cell--reorderable {
  position: relative;
  padding-left: 38px;
}

.node.node--table .table-row-handle {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 1px solid var(--table-checkbox-border);
  background: var(--table-checkbox-bg);
  color: var(--table-checkbox-check);
  width: 18px;
  height: 22px;
  border-radius: 4px;
  cursor: grab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  user-select: none;
  z-index: 1;
}

.node.node--table .table-row-handle::before {
  content: '⋮⋮';
  font-size: 11px;
  line-height: 1;
}

.node.node--table .table-row-handle:hover {
  background: var(--table-btn-hover-bg);
  border-color: var(--table-hover-border);
  color: var(--table-btn-hover-text);
}

.node.node--table .table-row-handle:focus-visible {
  outline: 2px solid var(--table-heading);
  outline-offset: 2px;
}

.node.node--table .table-row-handle:active {
  cursor: grabbing;
}

.node.node--table .table-row-handle.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--table-checkbox-bg);
  border-color: var(--table-checkbox-border);
  color: var(--table-btn-text);
}

.node.node--table .table-grid__cell--header {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--table-heading);
  border-bottom: 1px solid var(--table-border);
  padding: 12px 20px;
  padding-right: 36px;
  /* Ensure header cells allow text selection/edit despite parent .node setting */
  user-select: text;
  cursor: text;
  opacity: 0.9;
}

.node.node--table .table-grid__cell[contenteditable="true"]:focus {
  outline: none;
  background: var(--table-hover);
  color: var(--table-btn-hover-text);
}

.node.node--table .table-grid__cell.is-readonly {
  background: var(--table-surface);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  opacity: 0.7;
}

.node.node--table .table-grid__cell[data-empty="1"]::after {
  content: attr(data-placeholder);
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 107, 107, 0.3);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
}

.node.node--table .table-grid__cell::selection {
  background: rgba(255, 107, 107, 0.35);
}

:root.charcoal .node.node--table .table-grid__cell[data-empty="1"]::after {
  color: rgba(138, 138, 138, 0.3);
}

:root.charcoal .node.node--table .table-grid__cell::selection {
  background: rgba(229, 229, 229, 0.2);
}

.node.node--table .table-grid__cell[contenteditable="false"] {
  cursor: default;
}

.node.node--table .table-grid__cell--done {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
  text-align: center;
  padding: 8px;
  background: transparent;
  position: relative;
  border-left: 1px solid var(--table-border);
  color: var(--table-text);
}

.node.node--table .table-grid__cell--done.table-grid__cell--header {
  font-weight: 500;
  font-size: 0.8125rem;
  text-transform: none;
  letter-spacing: normal;
  background: transparent;
  border-bottom: 2px solid var(--table-border);
  color: var(--table-heading);
}

.node.node--table .table-done-cell-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.node.node--table .table-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--table-checkbox-border);
  background: var(--table-checkbox-bg);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  color: var(--table-checkbox-check);
}

.node.node--table .table-checkbox svg {
  opacity: 0;
  transform: scale(0.7);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.node.node--table .table-checkbox:hover {
  border-color: var(--table-hover-border);
  background: var(--table-hover);
  transform: scale(1.08);
}

.node.node--table .table-checkbox--checked {
  background: var(--table-checkbox-check);
  border-color: var(--table-checkbox-check);
}

.node.node--table .table-checkbox--checked svg {
  opacity: 1;
  transform: scale(1);
  color: var(--table-surface);
  stroke: var(--table-surface);
}

.node.node--table .table-row--done {
  opacity: 1;
}

.node.node--table .table-row--done .table-grid__cell:not(.table-grid__cell--header):not(.table-grid__cell--done) {
  background: rgba(255, 107, 107, 0.08);
  color: var(--table-heading);
  opacity: 0.7;
}

.node.node--table .table-controls {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
}

.node.node--table .table-stats {
  font-size: 0.75rem;
  color: var(--table-text);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.node.node--table tr.table-row--dragging {
  opacity: 0.65;
}

.node.node--table tr.table-row--drag-over {
  outline: 2px dashed rgba(220, 38, 38, 0.45);
  outline-offset: -2px;
}

.node.node--table .table-heading.is-readonly {
  cursor: default;
  color: var(--table-text);
  opacity: 0.65;
}

.node.node--table .table-column-remove,
.node.node--table .table-row-remove {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--table-btn-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.node.node--table .table-column-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  opacity: 0;
  pointer-events: none;
}

.node.node--table .table-grid__cell--header:hover .table-column-remove {
  opacity: 1;
  pointer-events: auto;
}

.node.node--table .table-row-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  opacity: 0;
  pointer-events: none;
}

.node.node--table tr:hover .table-row-remove {
  opacity: 1;
  pointer-events: auto;
}

.node.node--table .table-row-remove:hover,
.node.node--table .table-column-remove:hover {
  background: rgba(255, 107, 107, 0.16);
  color: var(--table-heading);
}

.node.node--table .table-row-remove svg,
.node.node--table .table-column-remove svg {
  pointer-events: none;
}

.node.node--table .table-row-remove:disabled,
.node.node--table .table-column-remove:disabled {
  opacity: 0;
  pointer-events: none;
}

.node.node--table .table-control-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--table-btn-border);
  background: var(--table-checkbox-bg);
  color: var(--table-btn-text);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.node.node--table .table-control-btn svg {
  flex-shrink: 0;
}

.node.node--table .table-control-btn:hover {
  background: var(--table-btn-hover-bg);
  border-color: var(--table-hover-border);
  color: var(--table-btn-hover-text);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.node.node--table .table-control-btn:active {
  transform: translateY(0);
}

.node.node--table .table-control-btn.is-readonly,
.node.node--table .table-control-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.node.node--table .table-control-btn.is-readonly:hover {
  background: transparent;
  color: var(--table-btn-text);
}

.node.node--table .table-control-btn--delete {
  border-color: var(--table-hover-border);
  color: var(--table-heading);
}

.node.node--table .table-control-btn--delete:hover {
  background: rgba(255, 107, 107, 0.12);
  border-color: var(--table-heading);
}

/* Table Confirmation Modal */
.table-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.15s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.table-confirm-modal {
  background: rgba(30, 30, 35, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 24px;
  min-width: 320px;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  animation: slideUp 0.2s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.table-confirm-message {
  color: rgba(226, 232, 240, 0.95);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 20px 0;
  text-align: center;
}

.table-confirm-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.table-confirm-btn {
  appearance: none;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  min-width: 90px;
}

.table-confirm-btn--cancel {
  background: rgba(71, 85, 105, 0.5);
  color: rgba(226, 232, 240, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.table-confirm-btn--cancel:hover {
  background: rgba(71, 85, 105, 0.7);
  border-color: rgba(148, 163, 184, 0.3);
  color: rgba(226, 232, 240, 1);
}

.table-confirm-btn--confirm {
  background: rgba(239, 68, 68, 0.2);
  color: rgba(252, 165, 165, 1);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.table-confirm-btn--confirm:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.6);
  color: rgba(254, 202, 202, 1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.table-confirm-btn--confirm:active {
  transform: translateY(0);
}

:root.light .node.node--table .table-heading.is-readonly {
  color: rgba(107, 114, 128, 0.75);
}

/* Light Mode Confirmation Modal */
:root.light .table-confirm-overlay {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
}

:root.light .table-confirm-modal {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

:root.light .table-confirm-message {
  color: #1f2937;
}

:root.light .table-confirm-btn--cancel {
  background: rgba(203, 213, 225, 0.6);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

:root.light .table-confirm-btn--cancel:hover {
  background: rgba(203, 213, 225, 0.8);
  border-color: rgba(148, 163, 184, 0.4);
  color: #334155;
}

:root.light .table-confirm-btn--confirm {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

:root.light .table-confirm-btn--confirm:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.45);
  color: #b91c1c;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.node-edit-input,
.node-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid rgba(220, 38, 38, 0.56);
  background: rgba(14, 16, 24, 0.94);
  color: #f8fafc;
  font: inherit;
  padding: 8px 10px;
  margin-top: 10px;
  outline: none;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.18) inset;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.node-edit-input::placeholder,
.node-edit-textarea::placeholder {
  color: rgba(216, 210, 255, 0.45);
}

.node-edit-input:focus,
.node-edit-textarea:focus {
  border-color: rgba(167, 139, 250, 0.9);
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.28);
}

.node-edit-input--sub {
  margin-top: 8px;
}

.node-edit-input--tags {
  margin-top: 16px;
}

.node-edit-textarea {
  min-height: 104px;
  resize: vertical;
}

.node-edit-textarea--meta {
  min-height: 72px;
  margin-top: 16px;
}

.feedback-pills {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.feedback-pills:empty {
  display: none;
}

.feedback-pills .feedback-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  min-height: 28px;
  cursor: text;
  transition: all 0.2s ease;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(148, 163, 184, 0.14);
  color: rgba(226, 232, 240, 0.92);
  pointer-events: auto;
}

.feedback-pills .feedback-pill.feedback-good {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: rgba(134, 239, 172, 0.9);
}

.feedback-pills .feedback-pill.feedback-bad {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: rgba(252, 165, 165, 0.9);
}

.feedback-pills .feedback-pill::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.feedback-pills .feedback-pill.feedback-good::before {
  content: '✓';
  background: rgba(34, 197, 94, 0.2);
  color: rgba(34, 197, 94, 0.9);
}

.feedback-pills .feedback-pill.feedback-bad::before {
  content: '✗';
  background: rgba(239, 68, 68, 0.2);
  color: rgba(239, 68, 68, 0.9);
}

.feedback-pills .feedback-pill:hover {
  opacity: 0.9;
}

.feedback-pills .feedback-pill:focus {
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);
}

.feedback-pills .feedback-pill.feedback-good:focus {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.15);
}

.feedback-pills .feedback-pill.feedback-bad:focus {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.15);
}

.feedback-pills .feedback-pill::after {
  content: attr(data-placeholder);
  opacity: 0.6;
  display: none;
}

.feedback-pills .feedback-pill:empty::after {
  display: inline;
}

.feedback-pills .feedback-pill[contenteditable="false"] {
  cursor: default;
}

.feedback-pills.feedback-inline {
  position: static;
  pointer-events: auto;
  width: 100%;
  gap: 8px;
}

.feedback-pills.feedback-inline .feedback-pill::before {
  display: inline-flex;
}

/* Light mode feedback pills */
.light .feedback-pills .feedback-pill {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.22);
  color: var(--text-2);
}
.light .feedback-pills .feedback-pill.feedback-good {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.35);
  color: #15803d;
}
.light .feedback-pills .feedback-pill.feedback-good::before {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
.light .feedback-pills .feedback-pill.feedback-bad {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
  color: #b91c1c;
}
.light .feedback-pills .feedback-pill.feedback-bad::before {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}
.light .feedback-pills .feedback-pill:hover {
  opacity: 0.85;
}
.light .feedback-pills .feedback-pill:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}
.light .feedback-pills .feedback-pill.feedback-good:focus {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.12);
}
.light .feedback-pills .feedback-pill.feedback-bad:focus {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.12);
}

/* Coupled panel (Comments/Intention) */
.node .coupled-panel {
  position: relative;
  margin-top: 18px;
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.25);
  background: rgba(15, 17, 24, 0.9);
  overflow: hidden;
}
.node[data-thread='1'] .coupled-panel { margin-top: 18px; }
.node .coupled-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(220, 38, 38, 0.28);
  background: rgba(26, 28, 40, 0.9);
  color: rgba(222, 215, 255, 0.88);
}
.node .coupled-header .label { opacity: 0.9; }
.node .coupled-content {
  padding: 10px 12px;
  min-height: 42px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(196, 203, 224, 0.9);
  outline: none;
  overflow: auto;
}

.node[data-coupled='1'] .content,
.node[data-thread='1'][data-coupled='1'] .content {
  padding-bottom: 0;
}

/* Done state */
.node.is-done {
  opacity: 0.34;
  transition: opacity 0.3s ease;
}

.node.is-done::after {
  content: '✓';
  position: absolute;
  left: 12px;
  bottom: 10px;
  color: #22c55e;
  font-size: 18px;
  font-weight: 700;
  opacity: 1;
  pointer-events: none;
}

/* Selection highlight */
.node.selected,
.node.group-selected {
/* Thicker border and bright purple ring for visibility */
border-width: 2px !important;
background: linear-gradient(var(--card), var(--card)) padding-box,
linear-gradient(135deg, #ffffff, #f5f5f5) border-box !important; /* bright white gradient */
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 2px 10px rgba(255, 255, 255, 0.45) !important;
}

/* Metrics footer pinned to bottom-right of card */
.node .metrics {
position: absolute;
right: 44px;
bottom: 8px;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
font-weight: 300;
color: inherit;
user-select: none;
pointer-events: none;
opacity: 0.6;
}
.node .metrics .value { font-weight: 300; }
.node .metrics .metric {
display: inline-flex;
align-items: center;
gap: 4px;
opacity: 1;
}
.node .metrics .icon {
display: inline-flex;
width: 14px;
height: 14px;
align-items: center;
justify-content: center;
}
.node .metrics .icon img {
  display: block;
  width: 14px;
  height: 14px;
  filter: brightness(0) invert(1);
}

/* Light mode readability adjustments */
.light .node {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(185, 28, 28, 0.12);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.light .node.node--table {
  background: transparent;
  border: none;
  box-shadow: none;
}
.light .node.node--table:hover {
  box-shadow: none;
}
.light .node:hover {
  border-color: rgba(220, 38, 38, 0.35);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}
.light .node .head-btn {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-2);
}
.light .node .head-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(88, 28, 135, 0.95);
}
.light .node .head-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.32);
  outline-offset: 2px;
}
.light .node .ordinal {
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}
.light .node .metrics {
  color: var(--text-2);
  opacity: 0.75;
}
.light .node .metrics .icon img {
  filter: brightness(0) opacity(0.65);
}

/* Light mode card/content readability */
.light .node .title { color: rgba(69, 10, 10, 0.95); }
.light .node .title:hover { background: var(--hover); }

.light .node .threads-container { border-top-color: var(--line-weak); }

.light .node .threads-label { color: var(--text-3); opacity: 0.8; }

.light .node .thread-item {
  border: 1px solid rgba(185, 28, 28, 0.12);
  background: rgba(185, 28, 28, 0.04);
  color: var(--text-2);
}
.light .node .thread-item::after { color: var(--text-3); }
.light .node .thread-item:focus {
  background: var(--active-bg);
  border-color: var(--accent);
  color: var(--text-1);
}
.light .node .thread-item.main-item:focus {
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--text-1);
  padding: 8px 10px;
  margin: 0 -8px;
}

/* Main content row should be seamless in light mode */
.light .node .thread-item.main-item {
  background: transparent;
  border: none;
  color: var(--text-2);
}
.light .node .thread-item.main-item::after { color: var(--text-3); }

.light .node .coupled-panel {
  border-color: var(--line-weak);
  background: var(--panel);
}
.light .node .coupled-header {
  border-bottom-color: var(--line-weak);
  background: var(--surface);
  color: var(--text-2);
}
.light .node .coupled-content {
  color: var(--text-1);
  background: var(--bg);
}

/* Light mode dot indicator */
.light .node .dot {
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.15);
}

/* Light mode card trash button */
.light .node .card-trash {
  background: rgba(220, 38, 38, 0.85);
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3);
}
.light .node .card-trash:hover {
  background: rgba(239, 68, 68, 0.95);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

/* Light mode edit inputs */
.light .title-input {
  background: var(--panel);
  color: var(--text-1);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.24);
}
.light .node-edit-input,
.light .node-edit-textarea {
  background: var(--panel);
  color: var(--text-1);
  border-color: var(--line-strong);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.light .node-edit-input::placeholder,
.light .node-edit-textarea::placeholder { color: var(--text-3); }
.light .node-edit-input:focus,
.light .node-edit-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.charcoal .node-edit-input,
.charcoal .node-edit-textarea {
  color: var(--text-1);
  border-color: var(--line-strong);
  box-shadow: 0 0 0 1px rgba(229, 229, 229, 0.12) inset;
}
.charcoal .node-edit-input::placeholder,
.charcoal .node-edit-textarea::placeholder { color: var(--text-3); }
.charcoal .node-edit-input:focus,
.charcoal .node-edit-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(229, 229, 229, 0.28);
}

.node.collapsed .content { display: none; }
.node.collapsed { padding-bottom: 28px; }

/* Connection line styles */
.wire {
stroke: var(--line);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.wire.active { stroke: var(--line-active); stroke-width: 2.25; }
.wire.selected { stroke-width: 4; filter: drop-shadow(0 0 2px rgba(255,255,255,0.7)); }
.wire-ghost {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 5, 5;
  fill: none;
  pointer-events: none;
  opacity: 0.7;
}

.content a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.content a:hover { border-bottom-color: currentColor; }

/* Marquee selection rectangle */
.marquee {
position: absolute;
border: 1px dashed var(--accent);
background: rgba(255, 255, 255, 0.08);
pointer-events: none;
z-index: 500;
}

/* Context menu for nodes */
.ctx-menu {
position: fixed;
z-index: 3000;
min-width: 220px;
max-width: 320px;
background: #1e1e1f;
border: 1px solid #2a2a2a;
border-radius: 8px;
padding: 6px;
color: #e9ecf1;
box-shadow: 0 10px 28px -12px rgba(0,0,0,.55);
}
.ctx-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
user-select: none;
transition: background 0.15s ease, box-shadow 0.15s ease;
}
.ctx-item:hover { background: rgba(255,255,255,.06); }
.ctx-item.is-primary {
background: rgba(255, 255, 255, 0.9);
color: #f8f6ff;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.ctx-item.is-primary:hover {
background: rgba(255, 255, 255, 0.95);
}
.ctx-item.is-primary .icon { color: inherit; }
.ctx-item.is-primary.disabled {
opacity: 0.6;
box-shadow: none;
background: rgba(255, 255, 255, 0.45);
}
.ctx-item.is-delete {
background: rgba(239, 68, 68, 0.15);
color: #fca5a5;
box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3);
}
.ctx-item.is-delete:hover {
background: rgba(239, 68, 68, 0.25);
box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.45);
color: #fef2f2;
}
.ctx-item.is-delete .icon {
color: #ef4444;
}
.ctx-item.disabled { opacity: .6; cursor: default; }
.ctx-item .icon { width: 14px; height: 14px; display: inline-block; color: inherit; }
.ctx-sep { height: 1px; background: #2a2a2a; margin: 6px 4px; }

body.ai-ask-open { overflow: hidden; }
.ai-ask-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(9, 11, 18, 0.72);
backdrop-filter: blur(4px);
z-index: 5000;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
.ai-ask-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.ai-ask-panel {
width: min(600px, 100%);
max-height: min(84vh, 720px);
background: #171a23;
border: 1px solid rgba(72, 76, 97, 0.55);
border-radius: 14px;
padding: 20px;
display: flex;
flex-direction: column;
box-shadow: 0 28px 80px -24px rgba(0, 0, 0, 0.7);
color: #eef1f6;
}
.ai-ask-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.ai-ask-headings { display: flex; flex-direction: column; gap: 4px; }
.ai-ask-title { font-size: 18px; font-weight: 600; letter-spacing: 0.01em; }
.ai-ask-subtitle { font-size: 12px; color: #98a3c2; line-height: 1.5; }
.ai-ask-close {
appearance: none;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.04);
color: inherit;
cursor: pointer;
transition: background 0.15s ease;
}
.ai-ask-close:hover { background: rgba(255, 255, 255, 0.08); }
.ai-ask-cardbox {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 12px 14px;
margin: 0 auto 12px;
width: 100%;
max-width: 520px;
}
.ai-ask-cardtitle { font-size: 14px; font-weight: 600; margin-bottom: 6px; color: #f4f6fb; }
.ai-ask-cardsummary { font-size: 13px; color: #cbd5f5; white-space: pre-wrap; line-height: 1.5; }
.ai-ask-chatlog {
flex: 1;
overflow-y: auto;
margin: 4px auto 12px;
padding-right: 4px;
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
max-width: 520px;
}
.ai-ask-chatlog::-webkit-scrollbar { width: 6px; }
.ai-ask-chatlog::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); border-radius: 4px; }
.ai-ask-msg { display: flex; }
.ai-ask-msg.is-user { justify-content: flex-end; }
.ai-ask-msg.is-assistant { justify-content: flex-start; }
.ai-ask-msg-bubble {
max-width: 100%;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.06);
}
.ai-ask-msg-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.ai-ask-msg.is-user .ai-ask-msg-bubble {
background: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.35);
color: #fbf7ff;
}
.ai-ask-msg.is-assistant .ai-ask-msg-bubble { color: #e2e8f0; }
.ai-ask-msg.is-pending .ai-ask-msg-bubble { opacity: 0.7; }
.ai-ask-msg.is-error .ai-ask-msg-bubble {
border-color: rgba(239, 68, 68, 0.45);
background: rgba(127, 29, 29, 0.35);
color: #fee2e2;
}
.ai-ask-form {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
max-width: 520px;
margin: 0 auto;
}
.ai-ask-form.is-busy { opacity: 0.85; }
.ai-ask-input {
width: 100%;
min-height: 64px;
resize: vertical;
background: #10121a;
border: 1px solid #2f3241;
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
color: #f8fafc;
line-height: 1.45;
}
.ai-ask-input:focus {
outline: 1px solid rgba(255, 255, 255, 0.55);
outline-offset: 2px;
}
.ai-ask-actions { display: flex; justify-content: flex-end; }
.ai-ask-send {
appearance: none;
border: none;
border-radius: 8px;
padding: 9px 18px;
font-size: 14px;
font-weight: 600;
color: #f9f6ff;
cursor: pointer;
background: rgba(255, 255, 255, 0.9);
transition: transform 0.15s ease, filter 0.15s ease;
}
.ai-ask-send:not(:disabled):hover { filter: brightness(1.08); }
.ai-ask-send:disabled { opacity: 0.6; cursor: default; }

/* Utility toolbar (top right) */
.utility-toolbar {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--gap-2);
  border: 1px solid var(--line-weak);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.utility-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-1);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.utility-btn:hover {
  background: var(--hover);
  border-color: var(--accent);
  color: var(--text-1);
}
.utility-btn:active {
  background: var(--active-bg);
}
.utility-dropdown {
  position: relative;
}
.utility-dropdown .menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
}
:root.light .utility-toolbar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.more-icon-close {
  color: #ff4444;
}
#moreMenuButton:has(.more-icon-close[style*="display: block"]) {
  background: #2a0808;
  border-color: transparent;
}
#moreMenuButton:has(.more-icon-close[style*="display: block"]):hover {
  background: #3d0c0c;
  border-color: transparent;
}
:root.light #moreMenuButton:has(.more-icon-close[style*="display: block"]) {
  background: #2a0808;
}
:root.light #moreMenuButton:has(.more-icon-close[style*="display: block"]):hover {
  background: #3d0c0c;
}
.invite-children { margin-top: var(--gap-2); }
.invite-leaf .tree-meta { color: var(--text-3); font-weight: 500; }
.node.node--table tbody tr {
  transition: background-color 0.2s ease;
}

.node.node--table tbody tr:nth-child(n+2):hover .table-grid__cell {
  background: var(--table-hover);
  transform: translateX(1px);
}

/* ========================================
   CHARCOAL THEME OVERRIDES
   Replace red accent colors with gray (only for visible elements)
   ======================================== */

/* Card hover border */
:root.charcoal .node:hover {
  border-color: rgba(229, 229, 229, 0.25);
}

/* Title input focus states */
:root.charcoal .title-input:focus {
  border-color: rgba(229, 229, 229, 0.6);
  box-shadow: 0 0 0 3px rgba(229, 229, 229, 0.2);
}

/* Thread item focus states */
:root.charcoal .node .thread-item:focus {
  border-color: rgba(229, 229, 229, 0.5);
  box-shadow: 0 0 0 1px rgba(229, 229, 229, 0.15);
}

:root.charcoal .node .thread-item.main-item:focus {
  border: 1px solid rgba(229, 229, 229, 0.3);
}

/* Link hover decorations */
:root.charcoal .node .thread-item a:hover {
  text-decoration-color: rgba(229, 229, 229, 0.4);
}

/* Card trash button hover (when visible) */
:root.charcoal .card-trash:hover {
  background: rgba(154, 154, 154, 0.9);
}

/* Table row/column remove button hovers */
:root.charcoal .node.node--table .table-row-remove:hover,
:root.charcoal .node.node--table .table-column-remove:hover {
  background: rgba(229, 229, 229, 0.12);
}

/* Table completed row backgrounds */
:root.charcoal .node.node--table .table-row--done .table-grid__cell:not(.table-grid__cell--header):not(.table-grid__cell--done) {
  background: rgba(229, 229, 229, 0.08);
}

/* Dragging row outline */
:root.charcoal .dragging-row {
  outline: 2px dashed rgba(229, 229, 229, 0.35);
}

/* Table add column/row hover states */
:root.charcoal .table-add-column:hover,
:root.charcoal .table-add-row:hover {
  background: rgba(229, 229, 229, 0.1);
}

/* Feedback pills - enhanced visibility in charcoal mode */
:root.charcoal .feedback-pills .feedback-pill {
  border: 1px solid rgba(229, 229, 229, 0.32);
  background: rgba(229, 229, 229, 0.14);
  color: rgba(229, 229, 229, 0.92);
  pointer-events: auto;
  transition: all 0.15s ease;
}

:root.charcoal .feedback-pills .feedback-pill.feedback-good {
  background: rgba(34, 197, 94, 0.16);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: rgba(134, 239, 172, 0.95);
}

:root.charcoal .feedback-pills .feedback-pill.feedback-bad {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: rgba(252, 165, 165, 0.95);
}

/* Better hover state for charcoal mode */
:root.charcoal .feedback-pills .feedback-pill:hover {
  background: rgba(229, 229, 229, 0.2);
  cursor: text;
}

:root.charcoal .feedback-pills .feedback-pill.feedback-good:hover {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.5);
}

:root.charcoal .feedback-pills .feedback-pill.feedback-bad:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.5);
}

/* Much clearer focus state for editing */
:root.charcoal .feedback-pills .feedback-pill:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(229, 229, 229, 0.45);
}

:root.charcoal .feedback-pills .feedback-pill.feedback-good:focus {
  background: rgba(34, 197, 94, 0.28);
  border-color: rgba(34, 197, 94, 0.65);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35), 0 0 8px 2px rgba(34, 197, 94, 0.15);
  color: rgba(134, 239, 172, 1);
}

:root.charcoal .feedback-pills .feedback-pill.feedback-bad:focus {
  background: rgba(239, 68, 68, 0.28);
  border-color: rgba(239, 68, 68, 0.65);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35), 0 0 8px 2px rgba(239, 68, 68, 0.15);
  color: rgba(252, 165, 165, 1);
}

/* Visual cue for editable state */
:root.charcoal .feedback-pills .feedback-pill[contenteditable="true"] {
  position: relative;
  cursor: text;
}

:root.charcoal .feedback-pills .feedback-pill[contenteditable="true"]:not(:focus):hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Make placeholder text more visible when empty */
:root.charcoal .feedback-pills .feedback-pill:empty::after {
  opacity: 0.75;
  font-style: italic;
}

/* Disabled state should look clearly different */
:root.charcoal .feedback-pills .feedback-pill[contenteditable="false"] {
  opacity: 0.6;
  cursor: not-allowed;
}

:root.charcoal .feedback-pills .feedback-pill[contenteditable="false"]:hover {
  transform: none;
  box-shadow: none;
}

/* Enhance icon visibility in charcoal mode */
:root.charcoal .feedback-pills .feedback-pill.feedback-good::before {
  background: rgba(34, 197, 94, 0.25);
  color: rgba(134, 239, 172, 1);
}

:root.charcoal .feedback-pills .feedback-pill.feedback-bad::before {
  background: rgba(239, 68, 68, 0.25);
  color: rgba(252, 165, 165, 1);
}