/* Expand connections panel (#expandModal). Theme-aware via the app's console colours. */
#expandModal {
  --xp-fg: var(--console-fg, #fff);
  --xp-bg: var(--console-bg, #0b0b0f);
  --xp-muted: color-mix(in srgb, var(--xp-fg) 55%, transparent);
  --xp-faint: color-mix(in srgb, var(--xp-fg) 35%, transparent);
  --xp-line: color-mix(in srgb, var(--xp-fg) 11%, transparent);
  --xp-fill: color-mix(in srgb, var(--xp-fg) 5%, transparent);
  --xp-hover: color-mix(in srgb, var(--xp-fg) 9%, transparent);
  --xp-accent: var(--xp-fg);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background: color-mix(in srgb, #000 55%, transparent) !important;
}
html #expandModal .xp-modal {
  width: 600px !important; max-width: calc(100vw - 32px) !important; max-height: min(88vh, 860px) !important;
  display: flex; flex-direction: column; overflow: hidden !important; padding: 0 !important;
  background: var(--xp-bg) !important; color: var(--xp-fg) !important;
  border: 1px solid var(--xp-line) !important; border-radius: 16px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45) !important;
  font-family: Geist, system-ui, -apple-system, sans-serif;
  animation: xp-in .18s ease-out;
}
@keyframes xp-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* Header */
#expandModal .xp-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 16px; border-bottom: 1px solid var(--xp-line); }
#expandModal .xp-avatar {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--xp-fill); border: 1px solid var(--xp-line);
  font-weight: 700; font-size: 15px; color: var(--xp-fg);
}
#expandModal .xp-avatar[hidden] { display: none; }
#expandModal .xp-avatar img { width: 100%; height: 100%; object-fit: cover; }
#expandModal .xp-head-text { flex: 1; min-width: 0; }
#expandModal .xp-kicker { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--xp-muted); }
#expandModal .xp-title {
  margin: 2px 0 0 !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.01em;
  color: var(--xp-fg) !important; background: none !important; padding: 0 !important; border: 0 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#expandModal .xp-close {
  width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: 8px; background: transparent;
  color: var(--xp-muted); font-size: 22px; line-height: 1; cursor: pointer;
}
#expandModal .xp-close:hover { background: var(--xp-hover); color: var(--xp-fg); }

/* Body */
#expandModal .xp-body { flex: 1; overflow-y: auto; padding: 6px 20px 8px; }
#expandModal .xp-section { padding: 14px 0; border-bottom: 1px solid var(--xp-line); }
#expandModal .xp-section:last-child { border-bottom: 0; }
#expandModal .xp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#expandModal .xp-section-head h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--xp-fg); }
#expandModal .xp-hint { font-size: 11.5px; color: var(--xp-faint); }

/* Levels */
#expandModal .xp-levels { display: flex; flex-direction: column; gap: 10px; }
#expandModal .xp-level {
  margin: 0 !important; padding: 12px !important; border-radius: 12px !important;
  background: var(--xp-fill) !important; border: 1px solid var(--xp-line) !important;
}
#expandModal .xp-level-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#expandModal .xp-level-num {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: var(--xp-fg); color: var(--xp-bg); flex-shrink: 0;
}
#expandModal .xp-level-name { font-size: 13px; font-weight: 600; margin-right: auto; }

#expandModal .xp-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 9px; background: var(--xp-fill); border: 1px solid var(--xp-line); }
#expandModal .xp-seg button {
  height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; cursor: pointer;
  font: 500 12px/1 inherit; font-family: inherit; color: var(--xp-muted);
}
#expandModal .xp-seg button:hover { color: var(--xp-fg); }
#expandModal .xp-seg button.is-on { background: var(--xp-fg); color: var(--xp-bg); }

#expandModal .xp-stepper { display: inline-flex; align-items: center; border: 1px solid var(--xp-line); border-radius: 9px; overflow: hidden; }
#expandModal .xp-stepper button {
  width: 28px; height: 28px; border: 0; background: transparent; color: var(--xp-fg); font-size: 15px; cursor: pointer;
}
#expandModal .xp-stepper button:hover { background: var(--xp-hover); }
#expandModal .xp-stepper input {
  width: 34px; height: 28px; border: 0 !important; background: transparent !important; color: var(--xp-fg) !important;
  text-align: center; font: 600 13px/1 inherit; font-family: inherit; padding: 0 !important; -moz-appearance: textfield;
}
#expandModal .xp-stepper input::-webkit-outer-spin-button,
#expandModal .xp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Chips (era + relation types). Relation chips wrap a checkbox the existing listeners read. */
#expandModal .xp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#expandModal .xp-relations { margin-top: 10px; }
#expandModal .xp-chips > button,
#expandModal .xp-chips .relation-checkbox-label {
  display: inline-flex; align-items: center; gap: 0; height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--xp-line); background: transparent; color: var(--xp-muted);
  font: 500 12.5px/1 inherit; font-family: inherit; cursor: pointer; user-select: none; margin: 0 !important;
  transition: background .12s, color .12s, border-color .12s;
}
#expandModal .xp-chips-sm .relation-checkbox-label { height: 26px; padding: 0 10px; font-size: 12px; }
#expandModal .xp-chips > button:hover,
#expandModal .xp-chips .relation-checkbox-label:hover { background: var(--xp-hover); color: var(--xp-fg); }
#expandModal .xp-chips > button.is-on,
#expandModal .xp-chips .relation-checkbox-label:has(input:checked) {
  background: color-mix(in srgb, var(--xp-fg) 13%, transparent); border-color: color-mix(in srgb, var(--xp-fg) 30%, transparent); color: var(--xp-fg);
}
#expandModal .xp-chips .relation-checkbox-label input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
#expandModal .xp-chips .relation-checkbox-label:has(input:focus-visible) { outline: 2px solid var(--theme-accent-1, #8b9cff); outline-offset: 1px; }

/* Custom prompt + validation check */
#expandModal .xp-input,
#expandModal .xp-field input,
#expandModal .xp-field select {
  width: 100%; box-sizing: border-box; height: 36px; padding: 0 12px !important; border-radius: 9px !important;
  border: 1px solid var(--xp-line) !important; background: var(--xp-bg) !important; color: var(--xp-fg) !important;
  font: 13px/1 inherit; font-family: inherit; outline: none;
}
#expandModal .xp-input:focus,
#expandModal .xp-field input:focus,
#expandModal .xp-field select:focus { border-color: color-mix(in srgb, var(--xp-fg) 40%, transparent) !important; }
#expandModal .xp-custom { margin-top: 10px; }
#expandModal .xp-custom-count { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--xp-muted); }
#expandModal .xp-custom-count input[type="number"] {
  width: 52px; height: 26px; padding: 0 6px; margin-left: 4px; border-radius: 6px; border: 1px solid var(--xp-line);
  background: var(--xp-bg); color: var(--xp-fg); font: 12px inherit; font-family: inherit;
}
#expandModal .xp-mini-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#expandModal .xp-check { margin-top: 10px; }
#expandModal .xp-check summary {
  list-style: none; cursor: pointer; font-size: 12px; color: var(--xp-muted); display: inline-flex; gap: 6px; align-items: baseline;
}
#expandModal .xp-check summary::-webkit-details-marker { display: none; }
#expandModal .xp-check summary::before { content: '+'; font-weight: 600; }
#expandModal .xp-check[open] summary::before { content: '−'; }
#expandModal .xp-check summary small { color: var(--xp-faint); }
#expandModal .xp-check summary:hover { color: var(--xp-fg); }
#expandModal .xp-check .xp-input { margin-top: 8px; }

#expandModal .xp-level-controls { display: flex; gap: 8px; margin: 10px 0 0 !important; }
#expandModal .xp-add-level,
#expandModal .xp-remove-level {
  height: 32px; padding: 0 12px; border-radius: 9px; cursor: pointer; font: 500 12.5px/1 inherit; font-family: inherit;
  border: 1px dashed color-mix(in srgb, var(--xp-fg) 22%, transparent); background: transparent; color: var(--xp-muted);
}
#expandModal .xp-remove-level { border-style: solid; border-color: transparent; }
#expandModal .xp-add-level:hover,
#expandModal .xp-remove-level:hover { background: var(--xp-hover); color: var(--xp-fg); }
#expandModal .xp-add-level:disabled,
#expandModal .xp-remove-level:disabled { display: none; }

/* Extras: switches */
#expandModal .xp-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#expandModal .xp-toggle {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--xp-line); background: transparent;
}
#expandModal .xp-toggle:hover { background: var(--xp-fill); }
#expandModal .xp-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
#expandModal .xp-switch {
  position: relative; width: 30px; height: 18px; flex-shrink: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--xp-fg) 18%, transparent); transition: background .15s;
}
#expandModal .xp-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--xp-bg); transition: transform .15s;
}
#expandModal .xp-toggle input:checked + .xp-switch { background: #22c55e; }
#expandModal .xp-toggle input:checked + .xp-switch::after { transform: translateX(12px); background: #fff; }
#expandModal .xp-toggle input:focus-visible + .xp-switch { outline: 2px solid var(--theme-accent-1, #8b9cff); outline-offset: 2px; }
#expandModal .xp-toggle-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#expandModal .xp-toggle-text b { font-size: 12.5px; font-weight: 600; color: var(--xp-fg); }
#expandModal .xp-toggle-text small { font-size: 11px; color: var(--xp-faint); }

/* Advanced */
#expandModal .xp-advanced summary {
  list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--xp-muted);
  display: flex; align-items: center; gap: 6px;
}
#expandModal .xp-advanced summary::-webkit-details-marker { display: none; }
#expandModal .xp-advanced summary::after { content: '›'; transform: rotate(90deg); transition: transform .15s; font-size: 16px; }
#expandModal .xp-advanced[open] summary::after { transform: rotate(-90deg); }
#expandModal .xp-advanced summary:hover { color: var(--xp-fg); }
#expandModal .xp-adv-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; margin-top: 12px; }
#expandModal .xp-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--xp-muted); }
#expandModal .xp-field small { font-size: 11px; color: var(--xp-faint); }

/* Footer */
#expandModal .xp-foot {
  display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--xp-line);
  background: color-mix(in srgb, var(--xp-fg) 2%, var(--xp-bg));
}
#expandModal .xp-estimate { margin-right: auto; font-size: 12px; color: var(--xp-muted); }
#expandModal .xp-btn { height: 36px; padding: 0 16px; border-radius: 10px; cursor: pointer; font: 600 13px/1 inherit; font-family: inherit; }
#expandModal .xp-btn-ghost { border: 1px solid var(--xp-line); background: transparent; color: var(--xp-fg); }
#expandModal .xp-btn-ghost:hover { background: var(--xp-hover); }
#expandModal .xp-btn-primary { border: 0; background: var(--xp-fg) !important; color: var(--xp-bg) !important; padding: 0 22px; }
#expandModal .xp-btn-primary:hover { filter: brightness(.92); }

@media (max-width: 560px) {
  #expandModal .xp-toggles, #expandModal .xp-adv-grid { grid-template-columns: 1fr; }
  #expandModal .xp-level-name { width: 100%; }
}

/* Win over the app-wide colour-mode / order-section styles inside this panel */
html[data-color-mode] #expandModal .xp-level {
  background: var(--xp-fill) !important; border: 1px solid var(--xp-line) !important; box-shadow: none !important;
}
html[data-color-mode] #expandModal .xp-level-num { background: var(--xp-fg) !important; color: var(--xp-bg) !important; }
html[data-color-mode] #expandModal .xp-relations,
html[data-color-mode] #expandModal .relation-checkboxes {
  background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
}
html[data-color-mode] #expandModal .xp-chips .relation-checkbox-label,
html[data-color-mode] #expandModal .xp-chips > button,
html[data-color-mode] #expandModal .xp-seg button,
html[data-color-mode] #expandModal .xp-btn,
html[data-color-mode] #expandModal .xp-add-level,
html[data-color-mode] #expandModal .xp-remove-level { font-family: Geist, system-ui, -apple-system, sans-serif !important; }
html[data-color-mode] #expandModal .xp-chips .relation-checkbox-label { background: transparent !important; border-color: var(--xp-line) !important; color: var(--xp-muted) !important; }
html[data-color-mode] #expandModal .xp-chips .relation-checkbox-label:has(input:checked) {
  background: color-mix(in srgb, var(--xp-fg) 13%, transparent) !important; border-color: color-mix(in srgb, var(--xp-fg) 30%, transparent) !important; color: var(--xp-fg) !important;
}
html[data-color-mode] #expandModal .xp-stepper button { display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; }
/* Outlined level badge: the number uses the normal text colour (filled badges lose it to global text colours) */
html[data-color-mode] #expandModal .xp-level-num {
  background: transparent !important; color: var(--xp-fg) !important; -webkit-text-fill-color: var(--xp-fg);
  border: 1.5px solid color-mix(in srgb, var(--xp-fg) 45%, transparent);
}