#session-tree-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 8px;
  height: 32px; min-height: 32px; padding: 6px 12px; border: 1px solid #0d6efd66;
  border-radius: 999px; background: #0d6efd14; color: #245aa6;
  font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .01em; white-space: nowrap;
  cursor: pointer; transition: background-color .16s ease, border-color .16s ease;
}
#session-tree-toggle:hover, #session-tree-toggle[aria-expanded="true"] { background: #0d6efd24; border-color: #0d6efd99; }
#session-tree-toggle:disabled { cursor: default; opacity: .6; }
.session-tree-badge-dot { position: relative; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 0 3px #3b82f61f; }
.session-tree-badge-dot::after { content: ''; position: absolute; inset: -3px; border: 1px solid #3b82f6; border-radius: 50%; opacity: 0; pointer-events: none; }
#session-tree-toggle[aria-expanded="false"]:not(:disabled) .session-tree-badge-dot { animation: session-tree-color 2.6s ease-in-out infinite; }
#session-tree-toggle[aria-expanded="false"]:not(:disabled) .session-tree-badge-dot::after { animation: session-tree-beacon 2.6s ease-in-out infinite; }
@keyframes session-tree-color {
  0%, 100% { background: #3b82f6; box-shadow: 0 0 0 3px #3b82f633; }
  50% { background: #a855f7; box-shadow: 0 0 0 4px #a855f74d; }
}
@keyframes session-tree-beacon {
  0%, 100% { transform: scale(.75); opacity: .35; border-color: #3b82f6; }
  50% { transform: scale(1.6); opacity: .8; border-color: #a855f7; }
}
body.dark-mode #session-tree-toggle { background: #3b82f624; color: #bfdbfe; border-color: #93c5fd57; }
body.dark-mode #session-tree-toggle:hover, body.dark-mode #session-tree-toggle[aria-expanded="true"] { background: #3b82f63d; color: #dbeafe; border-color: #93c5fd94; }
@media (prefers-reduced-motion: reduce) {
  #session-tree-toggle { transition: none; }
  #session-tree-toggle .session-tree-badge-dot,
  #session-tree-toggle .session-tree-badge-dot::after { animation: none !important; }
}
#session-tree-panel[hidden], #session-tree-retry[hidden] { display: none !important; }
#session-tree-panel {
  position: fixed; left: 12px; top: 20px; bottom: 20px; width: var(--session-tree-width, 208px);
  display: flex; flex-direction: column;
  box-sizing: border-box; padding: 14px 12px 14px 10px; overflow: hidden; z-index: 40;
  background: #f5f7fa; color: #263445; border: 1px solid #d9e0e8; border-radius: 12px;
  font-size: 13px; text-align: left; direction: ltr;
}
body.session-tree-open #app-container { margin-left: calc(var(--session-tree-width, 208px) + 16px); width: calc(100% - var(--session-tree-width, 208px) - 16px); }
.session-tree-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
#session-tree-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 10px; cursor: col-resize; touch-action: none; }
#session-tree-resize::after { content: ''; position: absolute; top: 40%; bottom: 40%; right: 3px; width: 3px; border-radius: 3px; background: #778ba5; }
#session-tree-resize:hover, #session-tree-resize:focus-visible { background: #326bc033; outline: 2px solid #326bc0; outline-offset: -2px; }
body.session-tree-resizing, body.session-tree-resizing * { cursor: col-resize !important; user-select: none !important; }
.session-tree-heading { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.session-tree-heading h2 { font-size: 14px; margin: 0; }
.session-tree-heading button { font-size: 20px; border: 0; background: transparent; color: inherit; cursor: pointer; }
#session-tree-panel p { font-size: 12px; opacity: .8; line-height: 1.5; }
.session-tree-list, .session-tree-list ul { list-style: none; padding: 0; margin: 0; }
.session-tree-list { margin: 8px 0; }
.session-tree-list ul { position: relative; padding-left: 20px; }
.session-tree-list li { position: relative; margin: 0; padding: 0; }
/* Connect each parent dot to its children, ending exactly at the last child. */
.session-tree-list ul::before { content: ''; position: absolute; left: 12px; top: -13px; height: 13px; border-left: 1px solid #778ba5; }
.session-tree-list ul > li::before { content: ''; position: absolute; left: -8px; top: 0; bottom: 0; border-left: 1px solid #778ba5; }
.session-tree-list ul > li:last-child::before { bottom: auto; height: 20px; }
.session-tree-list ul > li::after { content: ''; position: absolute; left: -8px; top: 20px; width: 14px; border-top: 1px solid #778ba5; }
.session-tree-node { display: flex; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; height: 40px; min-height: 40px; box-sizing: border-box; margin: 0; padding: 8px 6px; text-align: left;
  border: 0; border-radius: 6px; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.session-tree-node > span { line-height: 20px; }
.session-tree-node::before { content: ''; box-sizing: content-box; flex: 0 0 9px; height: 9px; border: 2px solid #778ba5; border-radius: 50%; }
.session-tree-node[aria-current="true"] { background: #e1ebfa; color: #194c8d; font-weight: bold; }
.session-tree-node[aria-current="true"]::before { background: #326bc0; border-color: #326bc0; }
.session-tree-node:focus-visible, #session-tree-toggle:focus-visible { outline: 2px solid #326bc0; outline-offset: 2px; }
.session-tree-node:disabled { cursor: default; opacity: .6; }
.session-tree-name { flex: 0 0 auto; white-space: nowrap; }
.session-tree-preview { display: flex; flex: 1 1 0; min-width: 0; overflow: hidden; }
.session-tree-preview::before { content: '“'; flex: 0 0 auto; }
.session-tree-preview::after { content: '”'; flex: 0 0 auto; }
.session-tree-preview-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-tree-count { flex: 0 0 auto; margin-left: auto; font-variant-numeric: tabular-nums; }
body.dark-mode #session-tree-panel { background: #18212c; color: #e3eaf4; border-color: #354456; }
body.dark-mode .session-tree-node[aria-current="true"] { background: #273d59; color: #b8d7ff; }
@media (max-width: 760px) {
  body.session-tree-open #app-container { margin-left: 0; width: 100%; }
  #session-tree-panel { top: 10px; bottom: 10px; width: min(var(--session-tree-width, 280px), calc(100vw - 24px)); box-shadow: 0 8px 32px #0005; }
}