/* Agent Connectors — clean Kasper workspace modal */

.cn-launch { display: grid; gap: 1rem; }
.cn-launch__card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(8rem, .55fr);
  gap: 1.25rem;
  align-items: center;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-lg);
  background: var(--k-surface);
  box-shadow: var(--k-shadow-sm);
}
.cn-launch__card img {
  width: min(8.5rem, 100%);
  justify-self: end;
}
.cn-launch__title {
  margin: 0 0 .35rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--k-brand-ink);
}
[data-theme="dark"] .cn-launch__title { color: var(--k-ink); }
.cn-launch__sub { margin: 0 0 .95rem; color: var(--k-ink-soft); line-height: 1.55; max-width: 38rem; }
.cn-launch__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* —— Workspace modal —— */
.cn-theater {
  border: 0;
  padding: 0;
  width: min(1120px, calc(100vw - 1.25rem));
  max-width: 1120px;
  height: min(92vh, 820px);
  max-height: min(92vh, 820px);
  background: transparent;
  color: var(--k-ink);
  overflow: hidden;
  border-radius: 1.25rem;
  box-shadow: 0 24px 64px rgba(8, 61, 59, .16);
}
.cn-theater::backdrop {
  background: rgba(8, 28, 27, .42);
  backdrop-filter: blur(6px);
}
.cn-theater__shell {
  height: 100%;
  background: #f7faf9;
  border: 1px solid var(--k-line);
  border-radius: 1.25rem;
  overflow: hidden;
}
[data-theme="dark"] .cn-theater__shell { background: var(--k-bg); }

.cn-workspace {
  height: 100%;
  overflow: auto;
  padding: 1.15rem 1.4rem 1.25rem;
}

.cn-ws-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
}
.cn-ws-head__meta { min-width: 0; }
.cn-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  margin: 0 0 .45rem;
  font-size: .78rem;
  color: var(--k-ink-soft);
}
.cn-crumb a { color: inherit; text-decoration: none; }
.cn-crumb a:hover { color: var(--k-brand-strong); }
.cn-ws-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--k-brand-ink);
  line-height: 1.15;
}
[data-theme="dark"] .cn-ws-title { color: var(--k-ink); }
.cn-ws-title svg { color: var(--k-brand); flex: 0 0 auto; }
.cn-ws-sub { margin: .4rem 0 0; color: var(--k-ink-soft); font-size: .9rem; max-width: 36rem; }
.cn-ws-head__actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }

/* —— Map —— */
.cn-map {
  position: relative;
  min-height: 22rem;
  padding: .35rem 0 1.1rem;
}
.cn-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.cn-svg path {
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
}
.cn-svg path.is-off {
  stroke: #d5e0dd;
  stroke-dasharray: 4 7;
  opacity: .7;
}
.cn-svg path.is-on { opacity: 1; }
.cn-svg path.is-instr { stroke: #14b8a6; }
.cn-svg path.is-kb { stroke: #38bdf8; }
.cn-svg path.is-files { stroke: #8b5cf6; }
.cn-svg path.is-db { stroke: #10b981; }
.cn-svg path.is-api { stroke: #f59e0b; }

.cn-map__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(12rem, .85fr) minmax(17rem, 1fr);
  gap: 1.5rem;
  align-items: center;
  min-height: 22rem;
}
.cn-map__col { display: grid; gap: .7rem; align-content: center; }
.cn-map__col--center { justify-items: center; }

.cn-card {
  position: relative;
  width: 100%;
  border: 1px solid #e6eeec;
  background: #fff;
  border-radius: 1.15rem;
  box-shadow: 0 8px 24px rgba(8, 61, 59, .04);
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 1rem 1.05rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
[data-theme="dark"] .cn-card {
  background: var(--k-surface);
  border-color: var(--k-line);
}
.cn-card:hover, .cn-card:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--k-brand) 35%, var(--k-line));
  box-shadow: 0 12px 28px rgba(8, 61, 59, .08);
  transform: translateY(-1px);
}
.cn-card.is-active {
  border-color: var(--k-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-brand) 14%, transparent);
}
.cn-card.is-disconnected { opacity: .88; }
.cn-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .7rem;
}
.cn-card__label {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .92rem;
  font-weight: 800;
  color: var(--k-brand-ink);
}
[data-theme="dark"] .cn-card__label { color: var(--k-ink); }
.cn-ico {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: .6rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--k-brand-soft);
  color: var(--k-brand-strong);
}
.cn-ico--kb { background: #e0f2fe; color: #0284c7; }
.cn-ico--files { background: #ede9fe; color: #6d28d9; }
.cn-ico--db { background: #d1fae5; color: #047857; }
.cn-ico--api { background: #fef3c7; color: #b45309; }
.cn-ico svg { width: 1rem; height: 1rem; }

.cn-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .18rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 750;
  background: #ecfdf5;
  color: #047857;
}
.cn-pill.is-off { background: #f1f5f4; color: var(--k-ink-soft); }
.cn-pill--ghost {
  background: #f3f7f6;
  color: var(--k-ink-soft);
}
.cn-card__lead {
  margin: 0 0 .65rem;
  font-size: .82rem;
  color: var(--k-ink-soft);
  line-height: 1.5;
}
.cn-checks { display: grid; gap: .38rem; margin: 0; padding: 0; list-style: none; }
.cn-checks li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .8rem;
  color: var(--k-ink);
}
.cn-checks svg { color: var(--k-brand); flex: 0 0 auto; }

.cn-rail { display: grid; gap: .65rem; }

.cn-rail-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .7rem;
  align-items: center;
  width: 100%;
  padding: .72rem .85rem;
  border: 1px solid #e6eeec;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(8, 61, 59, .035);
  text-align: start;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
[data-theme="dark"] .cn-rail-card {
  background: var(--k-surface);
  border-color: var(--k-line);
}
.cn-rail-card:hover, .cn-rail-card:focus-visible {
  outline: none;
  transform: translateX(-2px);
  border-color: color-mix(in srgb, var(--k-brand) 30%, var(--k-line));
  box-shadow: 0 10px 22px rgba(8, 61, 59, .07);
}
[dir="ltr"] .cn-rail-card:hover, [dir="ltr"] .cn-rail-card:focus-visible { transform: translateX(2px); }
.cn-rail-card.is-active {
  border-color: var(--k-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-brand) 14%, transparent);
}
.cn-rail-card.is-disconnected { opacity: .86; }
.cn-rail-card__copy { min-width: 0; }
.cn-rail-card__title {
  margin: 0;
  font-size: .88rem;
  font-weight: 800;
  color: var(--k-brand-ink);
}
[data-theme="dark"] .cn-rail-card__title { color: var(--k-ink); }
.cn-rail-card__meta {
  margin: .12rem 0 0;
  font-size: .74rem;
  color: var(--k-ink-soft);
}
.cn-rail-card__end {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #94a3b8;
}
.cn-chevron { width: .85rem; height: .85rem; }

.cn-agent {
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: center;
  padding: 0;
  width: min(13.5rem, 100%);
}
.cn-agent:focus-visible { outline: none; }
.cn-agent__ring {
  width: 11rem;
  height: 11rem;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, #fff 0%, #f4faf8 62%, #e7f3ef 100%);
  border: 1px solid #e8eeec;
  box-shadow: 0 14px 36px rgba(8, 61, 59, .08);
  overflow: visible;
  perspective: 420px;
}
[data-theme="dark"] .cn-agent__ring {
  background: var(--k-surface);
  border-color: var(--k-line);
}
.cn-agent.is-active .cn-agent__ring {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--k-brand) 16%, transparent), 0 14px 36px rgba(8, 61, 59, .08);
}

/* Interactive Kasper SVG unit */
.kp-mascot {
  --kp-size: 168px;
  width: var(--kp-size);
  height: calc(var(--kp-size) * 1.1);
  margin: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.kp-mascot__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transform-origin: 50% 45%;
  transition: transform .12s ease-out;
  will-change: transform;
}
.kp-mascot.is-live .kp-mascot__pupil {
  transition: transform .05s linear;
}
.kp-mascot__antenna-tip {
  transform-origin: 100px 22px;
}
.kp-mascot.is-live .kp-mascot__antenna-tip {
  animation: kp-blink-antenna 2.8s ease-in-out infinite;
}
@keyframes kp-blink-antenna {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .kp-mascot.is-live .kp-mascot__antenna-tip { animation: none; }
  .kp-mascot__unit, .kp-mascot.is-live .kp-mascot__pupil { transition: none; }
}

.cn-launch__card .kp-mascot { justify-self: end; }
.cn-empty .kp-mascot { margin: 0 auto .35rem; }
.cn-modal__hero .kp-mascot { flex: 0 0 auto; }
.cn-agent__name {
  margin: .75rem 0 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--k-brand-ink);
}
[data-theme="dark"] .cn-agent__name { color: var(--k-ink); }
.cn-agent__sub {
  margin: .2rem 0 0;
  font-size: .76rem;
  color: var(--k-ink-soft);
}

/* —— Bottom panels —— */
.cn-boards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: .25rem;
}
.cn-board {
  border: 1px solid #e6eeec;
  background: #fff;
  border-radius: 1rem;
  padding: .15rem .95rem .85rem;
  box-shadow: 0 6px 16px rgba(8, 61, 59, .03);
}
[data-theme="dark"] .cn-board {
  background: var(--k-surface);
  border-color: var(--k-line);
}
.cn-board > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 0 .55rem;
  font-weight: 800;
  font-size: .88rem;
  color: var(--k-brand-ink);
}
[data-theme="dark"] .cn-board > summary { color: var(--k-ink); }
.cn-board > summary::-webkit-details-marker { display: none; }
.cn-board__sum {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.cn-board__sum svg { color: var(--k-ink-soft); }
.cn-board__chev { color: #94a3b8; transition: transform .15s ease; }
.cn-board[open] > summary .cn-board__chev { transform: rotate(180deg); }
.cn-board__rows { display: grid; gap: .55rem; }
.cn-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: .8rem;
}
.cn-kv span { color: var(--k-ink-soft); display: inline-flex; align-items: center; gap: .4rem; }
.cn-kv strong { font-weight: 750; color: var(--k-ink); }
.cn-dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--k-brand);
  display: inline-block;
}
.cn-board a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .35rem 0;
  color: var(--k-ink);
  text-decoration: none;
  font-size: .82rem;
}
.cn-board a:hover { color: var(--k-brand-strong); }

/* —— Detail sheet —— */
.cn-sheet {
  display: none;
  margin-top: .85rem;
  border: 1px solid #e6eeec;
  background: #fff;
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 8px 20px rgba(8, 61, 59, .04);
}
[data-theme="dark"] .cn-sheet {
  background: var(--k-surface);
  border-color: var(--k-line);
}
.cn-sheet.is-open { display: block; }
.cn-sheet__head {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: start;
  margin-bottom: .75rem;
}
.cn-list { display: grid; gap: .5rem; }
.cn-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .65rem;
  align-items: center;
  padding: .7rem .8rem;
  border: 1px solid var(--k-line);
  border-radius: .85rem;
  background: #f8fbfa;
}
[data-theme="dark"] .cn-row { background: color-mix(in srgb, var(--k-bg-muted) 35%, var(--k-surface)); }
.cn-row__title { margin: 0; font-weight: 750; font-size: .86rem; }
.cn-row__meta { margin: .15rem 0 0; font-size: .76rem; color: var(--k-ink-soft); }

.cn-empty {
  text-align: center;
  padding: 1.1rem .9rem;
  color: var(--k-ink-soft);
  font-size: .84rem;
  border: 1px dashed var(--k-line);
  border-radius: .85rem;
}
.cn-empty img { width: 4.5rem; margin: 0 auto .5rem; display: block; }

/* add source */
.cn-modal {
  border: 0;
  padding: 0;
  border-radius: 1.1rem;
  width: min(40rem, calc(100vw - 1.5rem));
  max-height: min(86vh, 36rem);
  box-shadow: 0 20px 48px rgba(8, 61, 59, .16);
  background: var(--k-surface);
  color: var(--k-ink);
}
.cn-modal::backdrop { background: rgba(8, 28, 27, .38); }
.cn-modal__body { padding: 1.15rem 1.25rem 1.3rem; overflow: auto; }
.cn-modal__hero {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .2rem;
}
.cn-modal__hero img { width: 2.8rem; height: 2.8rem; object-fit: contain; }
.cn-modal__tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin: .85rem 0 1rem; }
.cn-modal__tab {
  border: 1px solid var(--k-line);
  background: transparent;
  color: var(--k-ink-soft);
  border-radius: 999px;
  padding: .38rem .8rem;
  font: inherit;
  font-weight: 750;
  font-size: .82rem;
  cursor: pointer;
}
.cn-modal__tab.is-active {
  background: var(--k-brand);
  color: #fff;
  border-color: var(--k-brand);
}
.cn-modal__pane { display: none; }
.cn-modal__pane.is-active { display: grid; gap: .5rem; }

@media (max-width: 980px) {
  .cn-map__grid { grid-template-columns: 1fr; min-height: 0; }
  .cn-map__col--center { order: -1; margin: .2rem 0 .6rem; }
  .cn-svg { display: none; }
  .cn-boards { grid-template-columns: 1fr; }
  .cn-launch__card { grid-template-columns: 1fr; }
  .cn-launch__card img { justify-self: start; width: 6.5rem; }
  .cn-rail-card { border-radius: 1rem; }
}