:root{
  --bubble-bg: #ffffff;
  --bubble-border: rgba(0,0,0,0.06);
  --bubble-shadow: 0 6px 20px rgba(0,0,0,0.08);
  --accent: #4f46e5;
}
body { background: radial-gradient(1200px 800px at 10% -10%, #f6f8ff 0, transparent 60%) no-repeat, #f7f7fb; }
.bubble {
  border-radius: 1.25rem;
  background: var(--bubble-bg);
  border: 1px solid var(--bubble-border);
  box-shadow: var(--bubble-shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
  overflow: hidden;
}
.bubble:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.12); }
.bubble::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(16,185,129,0.06));
  opacity: 0.6;
  pointer-events: none;
}
.bubble-header{
  display: flex; align-items: center; gap: .75rem;
}
.node-logo{
  width: 48px; height: 48px; border-radius: 50%;
  background: #eef2ff; display: grid; place-items: center;
  border: 1px solid rgba(99,102,241,.25);
  overflow: hidden; flex: 0 0 48px;
  font-size: 22px;
}
.node-logo img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.node-title{ margin:0; font-weight: 700; letter-spacing:.2px; }
.node-desc{ margin: .25rem 0 0; color:#555; font-size:.9rem; }
.node-actions{ display:flex; gap:.5rem; flex-wrap: wrap; }
.node-children{ margin-left: 1.25rem; border-left: 2px dashed #e5e7eb; padding-left: 1rem; }
.action-btn { white-space: nowrap; }
.expand-btn{ border-radius: 999px; }
.badge-chip{ font-size: .7rem; border-radius: 999px; background: #eef2ff; color:#4338ca; border:1px solid #c7d2fe; padding:.25rem .5rem; }
.breadcrumb-item + .breadcrumb-item::before { content: '›'; }
.color-accent-bar{ position:absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); opacity:.9; }
#diag{ font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; }



/* Mobile-first header */
.header-sticky {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: #f8f9fa; /* matches .bg-light, avoids jump on sticky */
  padding-top: .25rem;
  padding-bottom: .25rem;
}



/* Ensure all layout is box-sized properly */
*, *::before, *::after { box-sizing: border-box; }

/* Responsive brand logo (~70% bigger than before) */
.brand-logo {
  display: block;
  height: 76px;     /* up from 16px */
  width: auto;
  max-width: 140vw;  /* guardrail on very small screens */
  object-fit: contain;
}

@media (min-width: 576px) {
  .brand-logo { height: 64px; max-width: none; } /* up from 20px */
}

@media (min-width: 992px) {
  .brand-logo { height: 120px; } /* up from 24px */
}


/* --- Overflow guards (mobile) --- */
html, body { overflow-x: hidden; }
#tree, #tree * { max-width: 100%; }
img { max-width: 100%; height: auto; }

/* Let flex items actually shrink instead of forcing the row wider */
.bubble-header { display: flex; align-items: center; gap: .5rem; }
.bubble-header > * { min-width: 0; }              /* critical */
.node-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Wrap long text/URLs inside cards so they never widen the layout */
.bubble, .card.node-card { overflow-wrap: anywhere; }

/* Indentation that doesn't increase total width */
.node-children{
  margin-left: 0;                     /* remove width-growing margin */
  padding-left: .75rem;               /* keep a visible indent */
  border-left: 2px dashed #e5e7eb;
  box-sizing: border-box;
}
.node-children .node-children {       /* nested children = slightly tighter */
  padding-left: .5rem;
}

/* Buttons/rows wrap nicely on small screens */
.node-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.expand-btn { flex: 0 0 auto; }       /* don't stretch the expand btn */

/* Extra tightening on very small phones */
@media (max-width: 400px){
  .node-children{ padding-left: .5rem; border-left-width: 2px; }
}


/* 1) Make headers wrap nicely on phones */
.bubble-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;               /* allow line break */
}
.bubble-header > * { min-width: 0; }      /* let title shrink */
.node-title {
  flex: 1 1 auto;                /* title can take remaining space */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep the expand button visible & not stretching */
.expand-btn,
[data-expand] {
  flex: 0 0 auto;                /* never stretch wider than content */
  margin-left: auto;             /* push it to the right edge of the line */
}

/* If it wraps to a new line on very small screens, align it right */
@media (max-width: 420px){
  .expand-btn,
  [data-expand] { margin-left: 0; }
  .bubble-header { row-gap: .25rem; }
  .node-actions { width: 100%; justify-content: flex-start; }
}

/* 2) Indentation that never increases total width */
.node-children{
  margin-left: 0;                /* remove width-growing margin */
  padding-left: clamp(.35rem, 3vw, .75rem);   /* responsive indent */
  border-left: 2px dashed #e5e7eb;
  box-sizing: border-box;
}

/* Deeper levels = slightly tighter indent */
.node-children .node-children{
  padding-left: clamp(.25rem, 2.5vw, .6rem);
}
.node-children .node-children .node-children{
  padding-left: clamp(.2rem, 2vw, .5rem);
}

/* 3) Hard overflow guards */
html, body { overflow-x: hidden; }
#tree, #tree * { max-width: 100%; }
.bubble, .card.node-card { width: 100%; overflow-wrap: anywhere; }



/* --- Deeper-level portrait fixes (level 2/3+ on narrow screens) --- */

/* 1) Taper indentation further so deep levels don't eat width */
.node-children { padding-left: clamp(.35rem, 3vw, .75rem); }
.node-children .node-children { padding-left: clamp(.25rem, 2.5vw, .6rem); }
.node-children .node-children .node-children { padding-left: clamp(.15rem, 1.5vw, .4rem); border-left-width: 1px; }
.node-children .node-children .node-children .node-children { padding-left: clamp(.1rem, 1vw, .35rem); border-left-width: 1px; }

/* 2) On small phones, make deep headers tighter and logos smaller */
@media (max-width: 420px){
  /* level 2 */
  .node-children .bubble-header { gap: .4rem; }
  .node-children .node-logo { width: 40px; height: 40px; flex: 0 0 40px; font-size: 18px; }

  /* level 3+ */
  .node-children .node-children .bubble-header { gap: .35rem; }
  .node-children .node-children .node-logo { width: 36px; height: 36px; flex: 0 0 36px; font-size: 16px; }

  /* 3) If space is tight, let the expand button go to its own line, right-aligned */
  .node-children .node-children .bubble-header { flex-wrap: wrap; }
  .node-children .node-children [data-expand],
  .node-children .node-children .expand-btn {
    flex: 0 0 100%;
    order: 2;                         /* put it on the second line */
    display: inline-flex;
    justify-content: flex-end;        /* keep it on-screen at the right */
    margin-left: 0;
  }

  /* Keep titles readable without pushing width */
  .bubble-header > * { min-width: 0; }
  .node-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
}

/* Safety nets (re-assert) */
html, body { overflow-x: hidden; }
#tree, #tree * { max-width: 100%; }
.bubble, .card.node-card { width: 100%; overflow-wrap: anywhere; }








@media print {
  .node-card, .bubble, .card { break-inside: avoid; page-break-inside: avoid; }
}
.pdf-capture .btn,
.pdf-capture input[type="search"],
.pdf-capture #exportBtn,
.pdf-capture #exportPdfBtn,
.pdf-capture #exportVisualPdfBtn { display: none !important; }