:root {
  color-scheme: dark;
  /* shadcn-compatible product tokens for the Studio migration. */
  --background: #ffffff;
  --foreground: #18181b;
  --card: #ffffff;
  --card-foreground: #18181b;
  --primary: #18181b;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f5;
  --secondary-foreground: #27272a;
  --muted-surface: #f4f4f5;
  --muted-foreground: #71717a;
  --accent: #f4f4f5;
  --accent-foreground: #27272a;
  --border: #e4e4e7;
  --input: #e4e4e7;
  --ring: #0f766e;
  --brand: #0f766e;
  --radius: .625rem;
  --ink: #f5fbfb;
  --muted: #8fa4a8;
  --line: rgba(190, 229, 230, .13);
  --panel: rgba(13, 27, 30, .82);
  --panel-strong: #102225;
  --bg: #071013;
  --aqua: #19d6df;
  --aqua-deep: #008c9b;
  --lime: #b6dc38;
  --yellow: #ffd33d;
  --danger: #ff846f;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 181, 193, .13), transparent 30rem),
    radial-gradient(circle at 90% 90%, rgba(182, 220, 56, .07), transparent 34rem),
    var(--bg);
  font-family: Poppins, system-ui, sans-serif;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.studio-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 7px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 16, 19, .82);
  backdrop-filter: blur(20px);
}

.studio-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.studio-brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.studio-brand strong { font: 800 18px Sora, sans-serif; letter-spacing: -.03em; }
.studio-brand small { margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }

.studio-orb {
  position: relative;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 48% 52% 55% 45%;
  background: radial-gradient(circle at 35% 28%, #fff6a7 0 5%, #ffd842 9%, #15d9e1 43%, #087b89 72%, #082d33);
  box-shadow: 0 0 24px rgba(25, 214, 223, .3);
  animation: breathe 5s ease-in-out infinite;
}

.studio-orb i { position: absolute; top: 12px; width: 5px; height: 10px; border-radius: 6px; background: white; }
.studio-orb i:first-child { left: 10px; }
.studio-orb i:last-child { right: 10px; }
@keyframes breathe { 50% { transform: translateY(-2px) scale(1.035); border-radius: 53% 47% 44% 56%; } }

.session-actions { position: relative; display: flex; align-items: center; color: var(--muted); font-size: 13px; }
.profile-menu { position: relative; padding: 0; border: 0; }
.profile-menu > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 158px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  transition: border-color .16s, background .16s;
}
.profile-menu > summary::-webkit-details-marker { display: none; }
.profile-menu > summary:hover, .profile-menu[open] > summary { border-color: var(--line); background: rgba(255,255,255,.04); }
.profile-menu > summary .profile-avatar { width: 31px; height: 31px; border-radius: 10px; font-size: 9px; }
.profile-avatar { display: grid; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid rgba(25,214,223,.28); border-radius: 12px; color: #061518; background: linear-gradient(135deg,var(--aqua),var(--lime)); box-shadow: 0 8px 24px rgba(25,214,223,.14); font: 800 11px Sora,sans-serif; letter-spacing: .02em; place-items: center; }
.profile-summary-copy { display: grid; min-width: 0; flex: 1; line-height: 1.2; }
.profile-summary-copy strong { max-width: 150px; overflow: hidden; font: 600 11px Sora,sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary-copy small { display: none; }
.profile-chevron { color: #668085; font-size: 15px; transition: transform .16s; }
.profile-menu[open] .profile-chevron { transform: rotate(180deg); }
.profile-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 350px;
  padding: 12px;
  border: 1px solid rgba(190,229,230,.16);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(18,39,43,.98),rgba(6,19,22,.99));
  box-shadow: 0 28px 70px rgba(0,0,0,.44);
}
.profile-popover-heading { display: flex; align-items: center; gap: 11px; padding: 7px 7px 14px; border-bottom: 1px solid var(--line); }
.profile-popover-heading .profile-avatar { width: 42px; height: 42px; border-radius: 13px; }
.profile-popover-heading > span:last-child { display: grid; min-width: 0; }
.profile-popover-heading strong { overflow: hidden; color: var(--ink); font: 700 12px Sora,sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.profile-popover-heading small { margin-top: 4px; overflow: hidden; color: #71868a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.profile-team-picker { display: grid; gap: 7px; padding: 15px 5px 13px; border-bottom: 1px solid var(--line); }
.profile-team-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 3px; }
.profile-team-heading button { display: grid; width: 25px; height: 25px; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--aqua); background: rgba(25,214,223,.04); cursor: pointer; place-items: center; }
.profile-team-heading button:hover { border-color: rgba(25,214,223,.42); background: rgba(25,214,223,.09); }
.profile-team-list { display: grid; gap: 3px; max-height: 205px; overflow-y: auto; }
.profile-team-list > button { display: grid; grid-template-columns: 30px minmax(0,1fr) 18px; gap: 8px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: 10px; color: #9fb2b5; background: transparent; text-align: left; cursor: pointer; }
.profile-team-list > button:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.profile-team-list > button.active { color: var(--ink); background: linear-gradient(90deg,rgba(25,214,223,.12),rgba(182,220,56,.04)); }
.profile-team-list .team-mark { display: grid; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 9px; color: #607a7e; background: rgba(255,255,255,.025); font: 700 9px Sora,sans-serif; place-items: center; }
.profile-team-list > button.active .team-mark { border-color: rgba(25,214,223,.3); color: #061518; background: linear-gradient(135deg,var(--aqua),var(--lime)); }
.profile-team-list .team-copy { display: grid; min-width: 0; }
.profile-team-list .team-copy strong { overflow: hidden; font: 600 10px Sora,sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.profile-team-list .team-copy small { margin-top: 3px; overflow: hidden; color: #657b7f; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.profile-team-list .team-check { color: var(--aqua); text-align: center; }
.profile-team-empty { margin: 3px; padding: 10px; border: 1px dashed var(--line); border-radius: 9px; color: #71868a; font-size: 9px; line-height: 1.5; }
.profile-workspace-picker { display: grid; gap: 7px; padding: 13px 5px; border-bottom: 1px solid var(--line); }
.profile-workspace-picker > label { padding: 0 3px; }
.profile-menu-actions { display: grid; gap: 3px; padding-top: 8px; }
.profile-menu-actions button { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; width: 100%; padding: 9px; border: 0; border-radius: 10px; color: #aec0c2; background: transparent; text-align: left; cursor: pointer; }
.profile-menu-actions button:hover { color: var(--ink); background: rgba(25,214,223,.07); }
.profile-menu-actions button > span:first-child { display: grid; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 9px; color: var(--aqua); background: rgba(255,255,255,.025); place-items: center; }
.profile-menu-actions button > span:nth-child(2) { display: grid; }
.profile-menu-actions strong { font: 600 10px Sora,sans-serif; }
.profile-menu-actions small { margin-top: 3px; color: #667c80; font-size: 8px; }
.profile-menu-actions b { color: #607b80; font-weight: 400; }
.quiet-button, .text-button, .secondary-button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
}
.quiet-button { padding: 8px 12px; }
.quiet-button:hover, .secondary-button:hover { border-color: rgba(25, 214, 223, .42); color: white; }

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .65fr);
  gap: clamp(38px, 8vw, 120px);
  align-items: center;
  width: min(1180px, calc(100% - 48px));
  min-height: calc(100vh - 60px);
  margin: auto;
  padding: 72px 0;
}

.eyebrow, .card-kicker {
  margin: 0 0 12px;
  color: var(--aqua);
  font: 700 11px Sora, sans-serif;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.auth-story h1 {
  max-width: 760px;
  margin: 0;
  font: 800 clamp(42px, 6.5vw, 78px)/.98 Sora, sans-serif;
  letter-spacing: -.065em;
}
.auth-story > p:not(.eyebrow) { max-width: 680px; color: #b1c1c3; font-size: 17px; line-height: 1.8; }

.architecture-line { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 34px; }
.architecture-line span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); font: 600 11px Sora, sans-serif; }
.architecture-line b { color: var(--aqua); font-weight: 400; }

.auth-card, .editor-card, .link-library, .dialog-card {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(18, 39, 43, .94), rgba(9, 23, 26, .94));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .26);
}
.auth-card { padding: 34px; border-radius: 24px; }
.auth-card h2, .dialog-card h2 { margin: 0 0 8px; font: 700 25px Sora, sans-serif; letter-spacing: -.035em; }
.auth-card > p:not(.card-kicker):not(.form-status) { margin: 0 0 24px; color: var(--muted); font-size: 13px; line-height: 1.6; }

form { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 7px; color: #b9c8ca; font-size: 12px; font-weight: 600; }
input, select, textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid rgba(190, 229, 230, .16);
  border-radius: 10px;
  outline: none;
  color: var(--ink);
  background: rgba(4, 14, 17, .72);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 86px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(25, 214, 223, .1); }
input::placeholder, textarea::placeholder { color: #62767a; }

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 45px;
  padding: 10px 18px;
  border: 0;
  border-radius: 11px;
  color: #061518;
  background: linear-gradient(110deg, var(--aqua), var(--lime));
  box-shadow: 0 12px 30px rgba(14, 195, 202, .14);
  font: 700 13px Sora, sans-serif;
  cursor: pointer;
}
.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.primary-button:disabled { opacity: .45; cursor: wait; transform: none; }
.text-button { width: 100%; margin-top: 12px; padding: 9px; border: 0; color: var(--aqua); font-size: 12px; }
.form-status, .global-status, .inline-status { min-height: 20px; margin: 0; color: var(--muted); font-size: 12px; }
.form-status.error, .global-status.error, .inline-status.error { color: var(--danger); }
.form-status.success, .global-status.success, .inline-status.success { color: var(--lime); }

.studio-shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - 60px); }
.studio-sidebar { position: sticky; top: 60px; display: flex; flex-direction: column; align-self: start; height: calc(100vh - 60px); padding: 24px 18px; overflow-y: auto; border-right: 1px solid var(--line); background: rgba(7, 18, 21, .72); }
.context-picker { display: flex; flex-direction: column; gap: 15px; padding: 3px 2px 22px; border-bottom: 1px solid var(--line); }
.context-field { display: grid; gap: 7px; }
.section-label { color: #71868a; font: 700 9px Sora, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.context-select { position: relative; }
.context-select::before {
  position: absolute;
  top: 50%;
  left: 13px;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 0 4px rgba(25, 214, 223, .08), 0 0 12px rgba(25, 214, 223, .34);
  content: '';
  pointer-events: none;
  transform: translateY(-50%);
}
.context-select::after {
  position: absolute;
  top: 50%;
  right: 13px;
  color: #789095;
  content: '⌄';
  font: 700 15px/1 Sora, sans-serif;
  pointer-events: none;
  transform: translateY(-62%);
}
.context-select select {
  min-height: 43px;
  padding: 9px 34px 9px 31px;
  appearance: none;
  border-color: rgba(190, 229, 230, .18);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(13, 31, 34, .92), rgba(5, 17, 20, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  font: 600 11.5px Sora, sans-serif;
  cursor: pointer;
}
.context-select select:hover { border-color: rgba(25, 214, 223, .34); }
.context-select select:disabled { opacity: .48; cursor: not-allowed; }
.context-select:has(select:disabled)::before { background: #5b7074; box-shadow: none; }

.studio-nav { display: flex; flex-direction: column; gap: 5px; padding-top: 22px; }
.studio-nav button { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 0; border-radius: 10px; color: #82969a; background: transparent; text-align: left; font-weight: 600; cursor: pointer; }
.studio-nav button span { width: 19px; color: #5d777c; text-align: center; }
.studio-nav button:hover { color: var(--ink); background: rgba(255,255,255,.035); }
.studio-nav button.active { color: var(--ink); background: linear-gradient(90deg, rgba(25,214,223,.14), rgba(182,220,56,.05)); }
.studio-nav button.active span { color: var(--aqua); }
.studio-content { min-width: 0; padding: 32px clamp(18px, 2.5vw, 40px) 80px; }
.content-status-strip { display: flex; justify-content: flex-end; max-width: 1480px; min-height: 20px; margin: -15px auto 8px; pointer-events: none; }
.content-status-strip:has(.global-status:empty) { display: none; }
.global-status { width: fit-content; max-width: 460px; min-height: 0; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7,16,19,.76); text-align: right; }
.studio-panel { display: none; max-width: 1480px; margin: auto; }
.studio-panel.active { display: block; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.panel-heading h2 { margin: 0; font: 700 24px Sora, sans-serif; letter-spacing: -.035em; }
.panel-heading p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.secondary-button { padding: 10px 14px; white-space: nowrap; font: 600 12px Sora, sans-serif; }
.compact-button { min-height: 40px; padding: 9px 15px; white-space: nowrap; }
.panel-heading [data-new],.agent-section-heading [data-new],.widget-editor-empty [data-new] {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 15px 8px 9px;
  border-radius: 12px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.panel-heading [data-new]::before,.agent-section-heading [data-new]::before,.widget-editor-empty [data-new]::before {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #0f766e url('/assets/icons8/line-awesome-plus.svg') center / 15px 15px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  content: '';
  flex: none;
}
.manager-heading .card-kicker { margin-bottom: 8px; }

.agent-editor-panel { max-width: 1320px; }
.agent-editor-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  margin-bottom: 22px;
}
.agent-editor-heading h2 { margin: 0; font: 700 clamp(25px, 3vw, 36px) Sora, sans-serif; letter-spacing: -.045em; }
.agent-editor-heading p:not(.card-kicker) { max-width: 720px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
#agentEditorTitle {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: 3px 28px 4px 0;
  border-radius: 8px;
  outline: none;
  cursor: text;
  overflow-wrap: anywhere;
}
#agentEditorTitle::after {
  position: absolute;
  top: 50%;
  right: 7px;
  margin: 0;
  color: #698085;
  content: '✎';
  font: 500 14px/1 Sora, sans-serif;
  opacity: 0;
  transition: opacity .15s, color .15s;
  transform: translateY(-50%);
}
#agentEditorTitle:hover::after, #agentEditorTitle:focus-visible::after { color: var(--aqua); opacity: .75; }
#agentEditorTitle[contenteditable="true"] {
  min-width: min(440px, 70vw);
  padding: 3px 10px 4px;
  background: rgba(25, 214, 223, .07);
  box-shadow: 0 0 0 2px var(--aqua), 0 0 0 6px rgba(25, 214, 223, .09);
}
#agentEditorTitle[contenteditable="true"]::after { content: ''; }
.editor-save-button { align-self: start; }
.agent-detail-nav {
  display: flex;
  gap: 7px;
  margin: 0 0 20px;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(5, 18, 21, .54);
}
.agent-detail-nav button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  color: #81969a;
  background: transparent;
  font: 600 10.5px Sora, sans-serif;
  cursor: pointer;
}
.agent-detail-nav button:hover { color: white; background: rgba(255,255,255,.035); }
.agent-detail-nav button.active { color: white; background: linear-gradient(110deg, rgba(25,214,223,.16), rgba(182,220,56,.08)); }
.agent-detail-nav button:disabled { opacity: .32; cursor: not-allowed; }
.agent-detail-nav span { min-width: 19px; padding: 2px 5px; border-radius: 999px; color: #9fb1b3; background: rgba(255,255,255,.06); font-size: 8px; text-align: center; }
.agent-detail-nav button.active span { color: var(--aqua); background: rgba(25,214,223,.11); }
.agent-detail-section { display: none; }
.agent-detail-section.active { display: block; }
.agent-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: 4px 0 20px; }
.agent-section-heading h3 { margin: 0; font: 700 24px Sora, sans-serif; letter-spacing: -.035em; }
.agent-section-heading p:not(.card-kicker) { max-width: 760px; margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.heading-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.agent-detail-section > .editor-layout,
.agent-detail-section > div > .editor-layout { max-width: none; }
.editor-layout.agent-scoped .manager-filter,
.editor-layout.agent-scoped .agent-owner-field { display: none; }
.knowledge-manager.agent-scoped .knowledge-agent-filter,
.knowledge-manager.agent-scoped .agent-owner-field { display: none; }
#avatarManager.agent-scoped { display: block; }
#avatarManager.agent-scoped > .record-list { display: none; }
#avatarManager.agent-scoped .avatar-customizer { width: 100%; }
.agent-editor-page { gap: 0; padding: clamp(22px, 4vw, 42px); }
.agent-form-section { padding: 0 0 30px; border: 0; }
.agent-form-section + .agent-form-section { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.agent-form-section-heading,
.agent-form-section > summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  margin-bottom: 20px;
}
.agent-form-section > summary { list-style: none; }
.agent-form-section > summary::-webkit-details-marker { display: none; }
.agent-form-section-heading > span,
.agent-form-section > summary > span {
  display: grid;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(25,214,223,.28);
  border-radius: 9px;
  color: var(--aqua);
  background: rgba(25,214,223,.06);
  font: 700 9px Sora, sans-serif;
  place-items: center;
}
.agent-form-section h3 { margin: 0; color: var(--ink); font: 700 16px Sora, sans-serif; letter-spacing: -.025em; }
.agent-form-section-heading p,
.agent-form-section > summary p { margin: 5px 0 0; color: var(--muted); font: 400 11px/1.55 Poppins, sans-serif; }
.agent-form-section[open] > summary { margin-bottom: 20px; }
.agent-form-section:not([open]) > summary { margin-bottom: 0; }
.agent-enabled-row { margin: 30px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.agent-form-actions { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.engagement-builder { display: grid; gap: 0; padding: clamp(22px,4vw,42px); }
.engagement-form-section { display: grid; gap: 16px; padding: 0 0 30px; }
.engagement-form-section + .engagement-form-section { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.engagement-form-section .agent-form-section-heading { margin-bottom: 4px; }
.engagement-form-section textarea { min-height: 132px; }
.engagement-toggle-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.engagement-toggle-grid > label { position: relative; cursor: pointer; }
.engagement-toggle-grid input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; }
.engagement-toggle-grid label > span { display: block; min-height: 88px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); transition: .16s; }
.engagement-toggle-grid input:checked + span { border-color: rgba(25,214,223,.55); background: linear-gradient(120deg,rgba(25,214,223,.09),rgba(182,220,56,.03)); box-shadow: inset 0 0 0 1px rgba(25,214,223,.1); }
.engagement-toggle-grid b,.engagement-toggle-grid small { display: block; }
.engagement-toggle-grid b { color: #dce9ea; font: 600 11px Sora,sans-serif; }
.engagement-toggle-grid small { margin-top: 6px; color: #74898c; font-size: 9px; line-height: 1.55; }
.engagement-builder > .form-actions { padding-top: 25px; border-top: 1px solid var(--line); }
.agent-type-picker { margin-bottom: 18px; }
.agent-type-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.agent-type-grid label { position: relative; cursor: pointer; }
.agent-type-grid input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; }
.agent-type-grid label > span { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 3px 11px; min-height: 94px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); align-content: center; transition: .16s; }
.agent-type-grid input:checked + span { border-color: rgba(25,214,223,.58); background: linear-gradient(120deg,rgba(25,214,223,.09),rgba(182,220,56,.035)); box-shadow: inset 0 0 0 1px rgba(25,214,223,.1); }
.agent-type-grid i { grid-row: 1 / 3; display: grid; width: 42px; height: 42px; border: 1px solid rgba(25,214,223,.24); border-radius: 12px; color: var(--aqua); background: rgba(25,214,223,.06); font: 700 18px Sora,sans-serif; font-style: normal; place-items: center; }
.agent-type-grid b { font: 600 11px Sora,sans-serif; }
.agent-type-grid small { color: var(--muted); font-size: 9px; line-height: 1.5; }
.agent-default-website-field { display: grid; gap: 7px; margin: 0 0 18px; padding: 14px 15px; border: 1px solid rgba(25,214,223,.2); border-radius: 13px; background: rgba(25,214,223,.045); }
.agent-default-website-field > input { background: rgba(255,255,255,.035); }
.agent-default-website-field .field-note { margin: 0; }
.agent-editor-page[data-agent-type="controlled_room"] .agent-default-website-field { display: none; }

.avatar-preview-orb {
  position: relative;
  display: grid;
  width: 62px;
  height: 62px;
  border-radius: 48% 52% 55% 45%;
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.96) 0 3%, rgba(255,241,134,.9) 5%, transparent 14%),
    radial-gradient(circle at 35% 27%, var(--avatar-highlight,#ffd842) 0 8%, var(--avatar-accent,#15d9e1) 39%, var(--avatar-deep,#087b89) 72%, #082d33 100%);
  box-shadow: 0 13px 30px color-mix(in srgb,var(--avatar-accent,#15d9e1) 30%,transparent), inset -9px -12px 18px rgba(1,34,41,.3);
  animation: studio-orb-idle var(--avatar-speed,5s) ease-in-out infinite;
  isolation: isolate;
  place-items: center;
  scale: var(--avatar-intensity,1);
}
.avatar-preview-orb::before {
  position: absolute;
  z-index: -1;
  inset: -13%;
  border: 1px solid color-mix(in srgb,var(--avatar-accent,#15d9e1) 38%,transparent);
  border-radius: 50%;
  opacity: .5;
  animation: studio-orb-halo 3.2s ease-out infinite;
  content: '';
}
.avatar-preview-orb::after {
  position: absolute;
  inset: 7% 14% 48% 18%;
  border-radius: 50%;
  background: linear-gradient(155deg,rgba(255,255,255,.2),transparent 68%);
  content: '';
  pointer-events: none;
}
.avatar-orb-face { position: relative; z-index: 2; display: flex; width: 46%; height: 42%; align-items: center; justify-content: space-between; animation: studio-orb-look 6.4s ease-in-out infinite; }
.avatar-orb-face i { display: block; width: 27%; height: 68%; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,45,54,.14); animation: studio-orb-blink 5.7s infinite; }
.avatar-orb-face i:last-child { animation-delay: .025s; }
.avatar-preview-orb.is-renderer-ready { opacity: 0; }
.orb-idle-preview { border: 0; background: transparent; pointer-events: none; }
.avatar-cody3d-preview { display: block; object-fit: contain; }
@keyframes studio-orb-idle { 0%,100%{transform:translate3d(0,0,0) rotate(-.5deg);border-radius:48% 52% 55% 45%}50%{transform:translate3d(2px,-6px,0) rotate(.8deg);border-radius:53% 47% 45% 55%} }
@keyframes studio-orb-halo { 0%{opacity:.5;transform:scale(.88)}72%,100%{opacity:0;transform:scale(1.16)} }
@keyframes studio-orb-look { 0%,24%,100%{transform:translateX(0)}36%,49%{transform:translateX(7%)}66%,78%{transform:translateX(-5%)} }
@keyframes studio-orb-blink { 0%,45%,49%,100%{scale:1 1}47%{scale:1 .08} }

.agent-preview-layout { display: grid; gap: 18px; }
.agent-preview-controls { display: grid; gap: 18px; padding: 22px; box-shadow: none; }
.preview-control-grid { display: grid; grid-template-columns: 1.2fr .78fr .78fr; gap: 12px; }
.agent-preview-controls[data-agent-type="website_companion"] #agentPreviewModeField { display: none; }
.agent-preview-controls[data-agent-type="website_companion"] .preview-control-grid { grid-template-columns: repeat(2,minmax(0,220px)); }
.preview-host-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; }
.preview-host-row button { min-height: 43px; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.preview-toolbar > div:first-child { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center; }
.preview-toolbar strong { color: #e6f0f1; font: 600 11px Sora,sans-serif; }
.preview-toolbar small { grid-column: 2; color: var(--muted); font-size: 9.5px; }
.preview-state-dot { grid-row: 1 / 3; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px rgba(182,220,56,.5); }
#agentPreviewStatus:empty { display: none; }
@media (min-width: 981px) {
  .agent-preview-controls[data-agent-type="website_companion"] {
    grid-template-columns: minmax(160px,.72fr) minmax(160px,.72fr) minmax(300px,1.7fr) auto;
    gap: 16px 12px;
    align-items: end;
  }
  .agent-preview-controls[data-agent-type="website_companion"] :is(.preview-control-grid,.preview-host-row) { display: contents; }
  .agent-preview-controls[data-agent-type="website_companion"] :is(.preview-toolbar,#agentPreviewStatus) { grid-column: 1 / -1; }
}
.embed-code-block { padding: 13px; border: 1px dashed var(--line); border-radius: 11px; background: rgba(3,12,14,.46); }
.embed-code-block span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.embed-code-block code { display: block; max-height: 130px; overflow: auto; color: #cae4e5; font: 10px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.website-frame { position: relative; min-height: 690px; overflow: hidden; border: 1px solid rgba(190,229,230,.22); border-radius: 22px; color: #15262a; background: #f3f7f5; box-shadow: 0 28px 70px rgba(0,0,0,.24); isolation: isolate; }
.website-frame > header { position: relative; z-index: 4; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-bottom: 1px solid #dbe4e1; background: #e8eeec; }
.website-frame > header i { width: 8px; height: 8px; border-radius: 50%; background: #b6c4c0; }
.website-frame > header i:first-child { background: #ff8b78; }
.website-frame > header i:nth-child(2) { background: #f4c95b; }
.website-frame > header i:nth-child(3) { background: #79c98c; }
.website-frame > header span { min-width: 0; margin-left: 8px; overflow: hidden; color: #60716e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.website-frame > header small { margin-left: auto; color: #7a8c88; font: 600 8px Sora,sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.website-frame-viewport { position: relative; height: 652px; overflow: auto; overscroll-behavior: contain; background: #fff; scrollbar-color: rgba(43,140,234,.65) rgba(12,41,47,.08); scrollbar-width: thin; scroll-behavior: smooth; }
.website-frame-viewport:focus-visible { outline: 2px solid rgba(43,140,234,.8); outline-offset: -2px; }
.website-frame-viewport::-webkit-scrollbar { width: 9px; }
.website-frame-viewport::-webkit-scrollbar-track { background: rgba(12,41,47,.06); }
.website-frame-viewport::-webkit-scrollbar-thumb { border: 2px solid #eef3f2; border-radius: 99px; background: rgba(43,140,234,.68); }
.website-frame-snapshot { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top center; }
.website-frame.has-site-snapshot .website-frame-page { display: none; }
.website-frame.is-loading-site .website-frame-viewport::after { position: absolute; top: 16px; right: 16px; padding: 7px 10px; border: 1px solid rgba(13,53,60,.12); border-radius: 999px; color: #31545a; background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(13,53,60,.12); font: 600 8px Sora,sans-serif; letter-spacing: .04em; text-transform: uppercase; content: 'Rendering site…'; }
.website-frame-page { min-height: 1304px; background: radial-gradient(circle at 85% 18%, rgba(25,214,223,.12), transparent 34%), linear-gradient(145deg,#f8faf9,#edf3f0); }
.website-frame-nav { display: flex; justify-content: space-between; padding: 21px 6%; color: #536560; font-size: 9px; }
.website-frame-nav b { color: #102c30; font: 700 13px Sora, sans-serif; }
.website-frame-hero { width: 58%; padding: 78px 0 56px 8%; }
.website-frame-hero small { color: #008d99; font: 700 8px Sora, sans-serif; letter-spacing: .13em; }
.website-frame-hero h4 { margin: 12px 0; color: #0b252a; font: 700 clamp(25px, 3vw, 43px)/1.03 Sora, sans-serif; letter-spacing: -.055em; }
.website-frame-hero p { color: #6e807c; font-size: 10px; line-height: 1.7; }
.website-frame-hero button { margin-top: 10px; padding: 9px 13px; border: 0; border-radius: 7px; color: #fff; background: #0c7f89; font-size: 9px; }
.website-frame-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 6%; }
.website-frame-cards i { height: 92px; border: 1px solid #dbe6e2; border-radius: 11px; background: rgba(255,255,255,.74); box-shadow: 0 8px 25px rgba(20,52,53,.06); }
.embed-placement { position: absolute; z-index: 3; right: 22px; bottom: 0; width: 190px; height: 238px; transition: width .62s cubic-bezier(.32,.72,.3,1), height .62s cubic-bezier(.32,.72,.3,1), right .62s cubic-bezier(.32,.72,.3,1), left .62s cubic-bezier(.32,.72,.3,1), top .62s cubic-bezier(.32,.72,.3,1), bottom .62s cubic-bezier(.32,.72,.3,1), translate .62s cubic-bezier(.32,.72,.3,1); transform-origin: right bottom; }
.embed-placement[data-position="left"] { right: auto; left: 22px; transform-origin: left bottom; }
.embed-placement[data-position="center"] { right: auto; left: 50%; translate: -50% 0; transform-origin: center bottom; }
.embed-placement[data-prominence="small"] { scale: .78; }
.embed-placement[data-prominence="large"] { scale: 1.16; }
.embed-placement .avatar-idle-preview { display: block; width: 100%; height: 100%; border: 0; background: transparent; pointer-events: none; }
.website-frame[data-agent-type="website_companion"]:not(.is-site-scrolled) .embed-placement:not(.interactive) { right: 3%; bottom: -2px; width: min(35%,330px); height: 420px; }
.website-frame[data-agent-type="website_companion"]:not(.is-site-scrolled) .embed-placement:not(.interactive)[data-position="left"] { right: auto; left: 3%; }
.website-frame[data-agent-type="website_companion"]:not(.is-site-scrolled) .embed-placement:not(.interactive)[data-position="center"] { right: auto; left: 50%; translate: -50% 0; }
.website-frame[data-agent-type="website_companion"]:not(.is-site-scrolled) .embed-placement:not(.interactive)[data-expanded-vertical="top"] { top: 50px; bottom: auto; }
.website-frame[data-agent-type="website_companion"]:not(.is-site-scrolled) .embed-placement:not(.interactive)[data-expanded-vertical="center"] { top: calc(50% + 19px); bottom: auto; translate: 0 -50%; }
.website-frame[data-agent-type="website_companion"]:not(.is-site-scrolled) .embed-placement:not(.interactive)[data-position="center"][data-expanded-vertical="center"] { translate: -50% -50%; }
.website-frame[data-agent-type="website_companion"].is-site-scrolled .embed-placement:not(.interactive) { right: 22px; bottom: 0; left: auto; width: 190px; height: 238px; }
.website-frame[data-agent-type="website_companion"].is-site-scrolled .embed-placement:not(.interactive)[data-position="left"] { right: auto; left: 22px; }
.website-frame[data-agent-type="website_companion"].is-site-scrolled .embed-placement:not(.interactive)[data-position="center"] { right: auto; left: 50%; translate: -50% 0; }
.website-frame[data-agent-type="website_companion"].is-site-scrolled .embed-placement:not(.interactive)[data-dock-vertical="top"] { top: 50px; bottom: auto; }
.website-frame[data-agent-type="website_companion"].is-site-scrolled .embed-placement:not(.interactive)[data-dock-vertical="center"] { top: calc(50% + 19px); bottom: auto; translate: 0 -50%; }
.website-frame[data-agent-type="website_companion"].is-site-scrolled .embed-placement:not(.interactive)[data-position="center"][data-dock-vertical="center"] { translate: -50% -50%; }
.embed-placement .preview-orb { position: absolute; right: 16px; bottom: 22px; width: 92px; height: 92px; box-shadow: 0 16px 38px rgba(0,141,153,.35),inset -10px -13px 20px rgba(1,34,41,.3); }
.embed-placement[data-position="left"] .preview-orb { right: auto; left: 16px; }
.embed-placement[data-position="center"] .preview-orb { right: auto; left: 50%; translate: -50% 0; }
.embed-placement .orb-idle-preview { position: absolute; right: -8px; bottom: -4px; width: 188px; height: 188px; filter: drop-shadow(0 16px 24px rgba(0,141,153,.2)); }
.embed-placement[data-position="left"] .orb-idle-preview { right: auto; left: -8px; }
.embed-placement[data-position="center"] .orb-idle-preview { right: auto; left: 50%; translate: -50% 0; }
.embed-placement .preview-cody3d { position: absolute; right: -14px; bottom: -2px; width: 220px; height: 220px; object-fit: contain; filter: drop-shadow(0 18px 18px rgba(25,45,132,.2)); animation: cody-preview-idle 6.8s ease-in-out infinite; transform-origin: center 64%; }
.embed-placement[data-position="left"] .preview-cody3d { right: auto; left: -14px; }
.embed-placement[data-position="center"] .preview-cody3d { right: auto; left: 50%; translate: -50% 0; }
@keyframes cody-preview-idle { 0%,100%{transform:translate3d(-3px,0,0) rotate(-.6deg)}32%{transform:translate3d(3px,-7px,0) rotate(.5deg)}68%{transform:translate3d(6px,-3px,0) rotate(.9deg)} }
.preview-prompt-stack { position: absolute; z-index: 3; bottom: 2px; left: 50%; display: flex; width: max-content; max-width: 310px; flex-direction: column; align-items: center; gap: 7px; transform: translateX(-50%); pointer-events: none; }
.preview-talk-pill { display: flex; min-height: 34px; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: var(--preview-pill-text,#fff); background: var(--preview-pill-bg,#20313f); box-shadow: 0 10px 24px rgba(20,55,58,.18); white-space: nowrap; }
.preview-talk-pill > i { display: flex; height: 13px; align-items: center; gap: 2px; }
.preview-talk-pill > i b { width: 2px; height: 7px; border-radius: 999px; background: currentColor; }
.preview-talk-pill > i b:nth-child(2) { height: 12px; }
.preview-talk-pill strong { font: 650 10px Sora,sans-serif; }
.preview-dock-copy { width: max-content; max-width: 290px; padding: 8px 13px; overflow: hidden; border: 1px solid rgba(17,53,58,.14); border-radius: 15px; color: var(--preview-callout-text,#16373c); background: var(--preview-callout-bg,rgba(255,255,255,.96)); box-shadow: 0 10px 26px rgba(20,55,58,.15); font: 550 9px/1.35 Poppins,sans-serif; text-align: center; text-overflow: ellipsis; white-space: pre-line; }
.embed-placement.interactive { width: min(390px,72%); height: min(540px,82%); inset: auto 14px 14px auto; overflow: hidden; border: 1px solid rgba(25,214,223,.28); border-radius: 20px; background: #071012; box-shadow: 0 20px 55px rgba(0,0,0,.32); scale: 1; transform: none; }
.embed-placement.interactive[data-position="left"] { right: auto; left: 14px; }
.embed-placement.interactive[data-position="center"] { right: auto; left: 50%; translate: -50% 0; }
.embed-placement.interactive.frameless { inset: 52px 0 0; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.embed-placement.interactive.frameless[data-position="center"] { right: 0; left: 0; translate: 0 0; }
.embed-placement.interactive.inline { inset: 176px 6% auto; width: 88%; height: 430px; border-radius: 18px; }
.embed-placement.interactive.page-native { inset: 52px 0 0; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.embed-placement.interactive.page-native[data-position="center"] { right: 0; left: 0; translate: 0 0; }
.embed-placement.interactive.takeover { inset: 38px 0 0; width: auto; height: auto; border: 0; border-radius: 0; }
.embed-placement.interactive iframe { width: 100%; height: 100%; border: 0; }
.preview-actions { flex-wrap: wrap; }
.embed-install-card { display: grid; grid-template-columns: minmax(220px,.65fr) minmax(360px,1.35fr) auto; gap: 16px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(10,28,31,.7); }
.embed-install-card h4 { margin: 0; font: 700 14px Sora,sans-serif; }
.embed-install-card p:not(.card-kicker) { margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.embed-install-card .embed-code-block { min-width: 0; }

.manager-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.manager-metric {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(20, 44, 48, .68), rgba(8, 23, 26, .68));
}
.manager-metric strong { display: block; font: 700 22px Sora, sans-serif; letter-spacing: -.04em; }
.manager-metric span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }

.agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}
.agent-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, hsla(var(--agent-hue, 184), 85%, 55%, .11), transparent 52%),
    linear-gradient(145deg, rgba(18, 39, 43, .9), rgba(8, 21, 24, .92));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .16);
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.agent-card:hover, .agent-card.active { border-color: hsla(var(--agent-hue, 184), 85%, 60%, .48); transform: translateY(-2px); box-shadow: 0 22px 54px rgba(0, 0, 0, .24); }
.agent-card-main {
  width: 100%;
  padding: 22px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.agent-card-top { display: flex; align-items: center; gap: 12px; padding-right: 28px; }
.agent-card-avatar {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  width: 62px;
  height: 50px;
  place-items: center;
}
.agent-card-avatar .avatar-preview-orb { width: 42px; height: 42px; }
.agent-card-avatar .avatar-cody3d-preview { width: 60px; height: 60px; max-width: none; animation: cody-preview-idle 6.8s ease-in-out infinite; }
.agent-card-avatar .avatar-idle-preview { width: 66px; height: 66px; border: 0; pointer-events: none; }
.agent-card-avatar .avatar-ava-poster { display: block; width: 68px; height: 68px; max-width: none; object-fit: contain; filter: drop-shadow(0 7px 8px rgba(0,0,0,.2)); }
.agent-card-title { min-width: 0; }
.agent-card-title strong { display: block; overflow: hidden; font: 700 15px Sora, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.agent-card-title span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.agent-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 16px; color: var(--lime); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.agent-status::before { width: 6px; height: 6px; border-radius: 50%; background: currentColor; content: ''; box-shadow: 0 0 10px currentColor; }
.agent-status.disabled { color: #71868a; }
.agent-card-description { min-height: 42px; margin: 10px 0 17px; color: #9badaf; font-size: 11px; line-height: 1.65; }
.agent-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.agent-card-stats span { padding: 8px; border: 1px solid rgba(190, 229, 230, .08); border-radius: 9px; color: #71868a; background: rgba(255,255,255,.02); font-size: 9px; text-align: center; }
.agent-card-stats b { display: block; margin-bottom: 2px; color: #dce8e9; font: 700 13px Sora, sans-serif; }

.agent-action-menu { position: absolute; z-index: 5; top: 13px; right: 13px; padding: 0; border: 0; }
.agent-action-menu > summary {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #a9babc;
  background: rgba(5, 17, 20, .82);
  place-items: center;
  list-style: none;
}
.agent-action-menu > summary::-webkit-details-marker { display: none; }
.agent-action-menu[open] > summary { border-color: rgba(25,214,223,.45); color: white; }
.agent-action-popover {
  position: absolute;
  top: 40px;
  right: 0;
  width: 190px;
  padding: 6px;
  border: 1px solid rgba(190, 229, 230, .18);
  border-radius: 12px;
  background: #0d2024;
  box-shadow: 0 18px 50px rgba(0,0,0,.48);
}
.agent-action-popover button { width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; color: #b9c9cb; background: transparent; text-align: left; font-size: 11px; cursor: pointer; }
.agent-action-popover button:hover { color: white; background: rgba(25,214,223,.09); }
.agent-action-popover button.danger { color: var(--danger); }

.manager-filter { margin-bottom: 12px; }
.manager-filter select { margin-top: 2px; }
.danger-button {
  min-height: 41px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 132, 111, .28);
  border-radius: 10px;
  color: var(--danger);
  background: rgba(255, 132, 111, .04);
  font: 600 11px Sora, sans-serif;
  cursor: pointer;
}
.danger-button:hover { background: rgba(255, 132, 111, .1); }
.danger-button:disabled { display: none; }

.editor-layout { display: grid; grid-template-columns: minmax(210px, .58fr) minmax(460px, 1.5fr); gap: 22px; align-items: start; }
.record-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.record-button, .link-record {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  color: inherit;
  background: rgba(255,255,255,.025);
  text-align: left;
}
.record-button { cursor: pointer; }
.record-button:hover, .record-button.active { border-color: rgba(25,214,223,.42); background: rgba(25,214,223,.07); }
.record-button strong, .link-record strong { display: block; overflow: hidden; font: 600 13px Sora, sans-serif; text-overflow: ellipsis; }
.record-button span, .link-record span { display: block; margin-top: 5px; overflow: hidden; color: #72878b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.empty-records { padding: 24px 18px; border: 1px dashed var(--line); border-radius: 13px; color: #6f8488; font-size: 12px; line-height: 1.6; }
.widget-record { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 7px 8px 7px 0; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.widget-record:hover, .widget-record.active { border-color: rgba(25,214,223,.42); background: rgba(25,214,223,.07); }
.widget-record-main { min-width: 0; padding: 8px 4px 8px 13px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.widget-record-main strong, .widget-record-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-record-main strong { font: 600 13px Sora,sans-serif; }
.widget-record-main span { margin-top: 5px; color: #72878b; font-size: 10px; }
.widget-toggle { flex-direction: row; align-items: center; gap: 6px; cursor: pointer; }
.widget-toggle input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; }
.widget-toggle i { position: relative; width: 32px; height: 18px; border-radius: 999px; background: #314348; transition: .16s; }
.widget-toggle i::after { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #849699; content: ''; transition: .16s; }
.widget-toggle input:checked + i { background: rgba(25,214,223,.35); }
.widget-toggle input:checked + i::after { left: 17px; background: var(--aqua); }
.widget-toggle span { width: 18px; color: #75898c; font-size: 9px; }

.knowledge-manager { display: grid; gap: 14px; }
.knowledge-agent-filter { max-width: 320px; }
.knowledge-library-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.knowledge-library-summary article { display: grid; gap: 2px; min-height: 92px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,rgba(25,214,223,.045),rgba(255,255,255,.018)); align-content: center; }
.knowledge-library-summary strong { color: #fff; font: 700 23px Sora,sans-serif; letter-spacing: -.045em; text-transform: capitalize; }
.knowledge-library-summary span { color: #c4d2d4; font: 600 10px Sora,sans-serif; }
.knowledge-library-summary small { margin-top: 3px; color: #6f8589; font-size: 8.5px; }
.knowledge-library-toolbar { display: grid; grid-template-columns: minmax(280px,1fr) minmax(145px,.25fr) minmax(135px,.22fr); gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(4,15,18,.46); }
.knowledge-library-toolbar label { gap: 5px; }
.knowledge-library-toolbar label > span { color: #708589; font: 600 8px Sora,sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.knowledge-library-toolbar input,.knowledge-library-toolbar select { min-height: 41px; }
.knowledge-library-layout { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(430px,1.1fr); gap: 16px; align-items: start; }
.knowledge-results-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: rgba(4,15,18,.42); }
.knowledge-results-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.knowledge-results-panel > header strong { font: 600 12px Sora,sans-serif; }
.knowledge-results-panel > header small { overflow: hidden; color: #71878a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-record-list { display: flex; flex-direction: column; min-height: 300px; max-height: 680px; overflow: auto; padding: 8px; }
.knowledge-record { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; border: 1px solid transparent; border-radius: 12px; }
.knowledge-record + .knowledge-record { margin-top: 3px; }
.knowledge-record:hover,.knowledge-record.active { border-color: rgba(25,214,223,.3); background: rgba(25,214,223,.055); }
.knowledge-record.disabled { opacity: .58; }
.knowledge-record-main { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; min-width: 0; padding: 11px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.knowledge-record-main > i { display: grid; width: 34px; height: 34px; border: 1px solid rgba(25,214,223,.2); border-radius: 10px; color: var(--aqua); background: rgba(25,214,223,.055); font: 700 12px Sora,sans-serif; font-style: normal; place-items: center; }
.knowledge-record-main > span { min-width: 0; }
.knowledge-record-main strong,.knowledge-record-main small,.knowledge-record-main em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knowledge-record-main strong { font: 600 11px Sora,sans-serif; }
.knowledge-record-main small { margin-top: 4px; color: #72878b; font-size: 8.5px; }
.knowledge-record-main em { margin-top: 5px; color: #617579; font: 600 7.5px Sora,sans-serif; font-style: normal; letter-spacing: .07em; text-transform: uppercase; }
.knowledge-record-toggle { margin-right: 9px; }
.knowledge-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 10px 12px; border-top: 1px solid var(--line); }
.knowledge-pagination span { color: #788d90; font-size: 9px; }
.knowledge-pagination button:disabled { opacity: .35; cursor: default; }
.knowledge-editor-stack { min-width: 0; }
.knowledge-form-heading { margin-bottom: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.knowledge-form-heading h3 { margin: 0; font: 700 18px Sora,sans-serif; letter-spacing: -.025em; }
.knowledge-form-heading p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 9.5px; line-height: 1.6; }
.knowledge-source-picker[hidden],.knowledge-website-form[hidden],.website-page-inspector[hidden],#knowledgeForm[hidden] { display: none; }
.knowledge-source-options { display: grid; gap: 9px; }
.knowledge-source-options > button { display: grid; grid-template-columns: 46px minmax(0,1fr) 30px; gap: 14px; align-items: center; width: 100%; min-height: 72px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: inherit; background: rgba(255,255,255,.025); text-align: left; cursor: pointer; transition: border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease; }
.knowledge-source-options > button:hover { border-color: rgba(25,214,223,.38); background: rgba(25,214,223,.06); box-shadow: 0 8px 24px rgba(0,0,0,.08); transform: translateY(-1px); }
.knowledge-source-options > button:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.knowledge-source-options > button > i { display: grid; width: 46px; height: 46px; border: 1px solid rgba(25,214,223,.22); border-radius: 13px; color: var(--aqua); background: rgba(25,214,223,.07); font-style: normal; place-items: center; }
.knowledge-source-options > button > i::before,.knowledge-source-options > button > b::before { display: block; width: 21px; height: 21px; background: currentColor; content: ''; }
.knowledge-source-options > button[data-knowledge-source-kind="text"] > i::before { -webkit-mask: url('/assets/icons8/line-awesome-pen.svg') center / contain no-repeat; mask: url('/assets/icons8/line-awesome-pen.svg') center / contain no-repeat; }
.knowledge-source-options > button[data-knowledge-source-kind="file"] > i::before { -webkit-mask: url('/assets/icons8/line-awesome-file-upload.svg') center / contain no-repeat; mask: url('/assets/icons8/line-awesome-file-upload.svg') center / contain no-repeat; }
.knowledge-source-options > button[data-knowledge-source-kind="website"] > i::before { -webkit-mask: url('/assets/icons8/line-awesome-globe.svg') center / contain no-repeat; mask: url('/assets/icons8/line-awesome-globe.svg') center / contain no-repeat; }
.knowledge-source-options > button > span { display: grid; gap: 4px; min-width: 0; }
.knowledge-source-options strong { font: 650 12px Sora,sans-serif; }
.knowledge-source-options small { color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.knowledge-source-options b { display: grid; width: 30px; height: 30px; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 400; place-items: center; transition: color .16s ease,background .16s ease,transform .16s ease; }
.knowledge-source-options > button > b::before { width: 17px; height: 17px; -webkit-mask: url('/assets/icons8/line-awesome-arrow-right.svg') center / contain no-repeat; mask: url('/assets/icons8/line-awesome-arrow-right.svg') center / contain no-repeat; }
.knowledge-source-options > button:hover > b { color: var(--aqua); background: rgba(25,214,223,.1); transform: translateX(2px); }
.knowledge-source-picker .form-actions { margin-top: 14px; }
.knowledge-website-form { display: grid; gap: 15px; }
.knowledge-website-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.knowledge-website-heading > div { min-width: 0; }
.website-page-inspector { display: grid; gap: 17px; }
.website-page-inspector > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.website-page-inspector h3 { margin: 2px 0 0; font: 700 20px/1.25 Sora,sans-serif; letter-spacing: -.03em; }
#websitePageInspectorStatus { flex: none; padding: 6px 9px; border: 1px solid rgba(182,220,56,.25); border-radius: 999px; color: var(--lime); background: rgba(182,220,56,.07); font: 600 8px Sora,sans-serif; text-transform: uppercase; }
#websitePageInspectorStatus[data-enabled="false"] { border-color: var(--line); color: #7d9194; background: rgba(255,255,255,.025); }
#websitePageInspectorUrl { overflow: hidden; color: var(--aqua); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
#websitePageInspectorDescription { margin: 0; color: #9badb0; font-size: 11px; line-height: 1.7; }
#websitePageInspectorMetadata { display: grid; grid-template-columns: minmax(100px,.35fr) minmax(0,1fr); margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
#websitePageInspectorMetadata dt,#websitePageInspectorMetadata dd { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 9px; }
#websitePageInspectorMetadata dt { color: #758b8e; background: rgba(255,255,255,.02); font-weight: 600; }
#websitePageInspectorMetadata dd { overflow: hidden; color: #c5d2d4; text-overflow: ellipsis; white-space: nowrap; }
#websitePageInspectorMetadata dt:nth-last-of-type(1),#websitePageInspectorMetadata dd:last-child { border-bottom: 0; }
.knowledge-open-page { display: inline-flex; align-items: center; color: #aebfc1; text-decoration: none; }
.website-catalog-manage { width: 100%; margin-top: 4px; font-size: 8.5px; }

.editor-card { padding: clamp(20px, 3vw, 32px); border-radius: 18px; }
.form-grid { display: grid; gap: 13px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.code-field { font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; }
details { padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
details + details { border-top: 0; }
summary { color: #dbe8e9; font: 600 12px Sora, sans-serif; cursor: pointer; }
.prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.tool-grid label, .check-row { flex-direction: row; align-items: center; gap: 8px; }
.tool-grid label { padding: 9px; border: 1px solid var(--line); border-radius: 9px; font-size: 10px; }
.tool-grid input, .check-row input { width: 15px; min-height: 15px; accent-color: var(--aqua); }
.check-row { width: fit-content; }
.experience-widget-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.experience-widget-grid label { flex-direction: row; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.experience-widget-grid input { flex: 0 0 auto; width: 15px; min-height: 15px; margin-top: 2px; accent-color: var(--aqua); }
.experience-widget-grid span { min-width: 0; }
.experience-widget-grid strong { display: block; color: #dbe8e9; font-size: 10px; }
.experience-widget-grid small { display: block; margin-top: 3px; color: #6f8488; font-size: 9px; }
.field-note { margin: 5px 0 0; color: #71868a; font-size: 10.5px; line-height: 1.6; }
.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.form-actions .inline-status { flex: 1; }

.widget-form-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.widget-form-heading h3, .widget-editor-empty h3 { margin: 0; font: 700 19px Sora, sans-serif; letter-spacing: -.025em; }
.widget-form-heading p:not(.card-kicker), .widget-editor-empty p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.widget-editor-empty { display: grid; min-height: 320px; color: var(--muted); text-align: center; place-items: center; place-content: center; }
.widget-editor-empty[hidden] { display: none; }
.widget-editor-empty > span { display: grid; width: 50px; height: 50px; margin-bottom: 14px; border: 1px solid rgba(25,214,223,.25); border-radius: 16px; color: var(--aqua); background: rgba(25,214,223,.07); font-size: 26px; place-items: center; }
.widget-editor-empty p { max-width: 340px; margin-bottom: 16px; }
.widget-type-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px; padding: 17px 18px 17px 58px; border: 1px solid rgba(25,214,223,.24); border-radius: 14px; background: linear-gradient(135deg,rgba(25,214,223,.075),rgba(182,220,56,.025)); }
.widget-type-step label { grid-row: 1 / 3; }
.widget-type-step select { min-height: 47px; border-color: rgba(25,214,223,.32); font: 600 12px Sora,sans-serif; }
.widget-type-step p { align-self: end; max-width: 230px; margin: 0; color: #7f9699; font-size: 10px; line-height: 1.5; }
.widget-step-number { position: absolute; top: 23px; left: 17px; display: grid; width: 28px; height: 28px; border: 1px solid rgba(25,214,223,.38); border-radius: 9px; color: var(--aqua); background: rgba(4,14,17,.42); font: 700 10px Sora,sans-serif; place-items: center; }
.widget-identity-fields { padding-bottom: 3px; }
.widget-config-builder { display: flex; flex-direction: column; gap: 16px; padding: 18px; border: 1px solid rgba(25,214,223,.16); border-radius: 14px; background: rgba(4,14,17,.38); }
.widget-config-prompt { display: grid; min-height: 180px; color: var(--muted); text-align: center; place-content: center; place-items: center; }
.widget-config-prompt span { display: grid; width: 38px; height: 38px; margin-bottom: 12px; border: 1px solid rgba(25,214,223,.28); border-radius: 12px; color: var(--aqua); background: rgba(25,214,223,.07); font: 700 12px Sora,sans-serif; place-items: center; }
.widget-config-prompt h4 { margin: 0; color: #dbe8e9; font: 700 14px Sora,sans-serif; }
.widget-config-prompt p { max-width: 430px; margin: 7px 0 0; font-size: 10.5px; line-height: 1.65; }
.widget-builder-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.widget-builder-heading h4 { margin: 0; font: 700 14px Sora, sans-serif; }
.widget-builder-heading p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.widget-common-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.booking-weekdays { margin: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; }
.booking-weekdays legend { padding: 0 6px; color: var(--muted); font-size: 10px; }
.booking-weekday-options { display: flex; flex-wrap: wrap; gap: 8px; }
.booking-weekday-options .check-row { min-width: 62px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; }
.config-repeater { display: flex; flex-direction: column; gap: 10px; }
.config-row { position: relative; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.config-row-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.config-row-header strong { color: #dbe8e9; font: 600 11px Sora, sans-serif; }
.config-remove, .config-add { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.025); cursor: pointer; }
.config-remove { padding: 5px 8px; color: var(--danger); font-size: 9px; }
.config-add { width: fit-content; padding: 8px 11px; color: var(--aqua); font: 600 10px Sora, sans-serif; }
.config-add:hover, .config-remove:hover { background: rgba(25,214,223,.08); }
.config-row .check-row { align-self: end; min-height: 43px; }
.config-row .field-options-hidden { display: none; }
.config-row textarea[data-config="html"] { min-height: 150px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 11px; }
.widget-upload { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; padding: 13px; border: 1px dashed var(--line); border-radius: 11px; }
.widget-upload button { min-height: 43px; }
.widget-upload .inline-status { grid-column: 1 / -1; }
.legacy-upgrade-note { padding: 10px 12px; border: 1px solid rgba(255,211,61,.2); border-radius: 9px; color: #d8c88b; background: rgba(255,211,61,.045); font-size: 10px; line-height: 1.55; }
.advanced-config { border: 1px solid var(--line); border-radius: 12px; padding: 13px; }
.advanced-config[open] summary { margin-bottom: 13px; }

.avatar-customizer fieldset { margin: 0; }
.agent-runtime-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid rgba(25,214,223,.18); border-radius: 13px; background: rgba(25,214,223,.045); }
.agent-runtime-summary > span { display: grid; gap: 4px; min-width: 0; }
.agent-runtime-summary small { color: #71868a; font: 600 8px Sora,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.agent-runtime-summary b { overflow: hidden; color: #dce9ea; font: 600 11px Sora,sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-summary em { color: #71868a; font-size: 9px; font-style: normal; }
.avatar-runtime-config { display: grid; gap: 14px; padding: 16px; border-color: rgba(25,214,223,.18); border-radius: 14px; background: linear-gradient(135deg,rgba(25,214,223,.055),rgba(255,255,255,.018)); }
.avatar-runtime-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.avatar-runtime-heading > div { display: grid; gap: 5px; min-width: 0; }
.avatar-runtime-heading span { width: fit-content; padding: 5px 8px; border: 1px solid rgba(25,214,223,.22); border-radius: 999px; color: var(--aqua); background: rgba(25,214,223,.06); font: 600 8px Sora,sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.avatar-runtime-heading h4 { margin: 0; color: #e8f1f2; font: 600 13px Sora,sans-serif; }
.avatar-runtime-heading > small { max-width: 210px; color: #71868a; font-size: 9px; line-height: 1.55; text-align: right; }
.avatar-runtime-config label > small { margin-top: 4px; color: #71868a; font-size: 8.5px; line-height: 1.5; }
.avatar-anam-runtime { display: grid; gap: 10px; padding: 13px; border: 1px solid rgba(255,211,61,.16); border-radius: 12px; background: rgba(255,211,61,.035); }
.avatar-anam-runtime[hidden] { display: none; }
.agent-avatar-builder-meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid rgba(25,214,223,.18); border-radius: 14px; background: linear-gradient(120deg,rgba(25,214,223,.07),rgba(255,255,255,.018)); }
.agent-avatar-builder-meta h3 { margin: 0; font: 700 17px Sora,sans-serif; }
.agent-avatar-builder-meta p:not(.card-kicker) { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.agent-avatar-builder-meta > span { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: var(--lime); background: rgba(182,220,56,.07); font-size: 9px; }
.avatar-type-picker { padding: 16px; }
.avatar-type-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.avatar-type-grid label { position: relative; cursor: pointer; }
.avatar-type-grid input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; }
.avatar-type-grid label > span { display: grid; min-height: 132px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; color: var(--muted); background: rgba(255,255,255,.025); text-align: center; place-items: center; transition: .16s; }
.avatar-type-grid input:checked + span { border-color: rgba(25,214,223,.58); color: white; background: rgba(25,214,223,.08); box-shadow: inset 0 0 0 1px rgba(25,214,223,.12); }
.avatar-type-grid b { display: block; color: inherit; font: 600 11px Sora,sans-serif; }
.avatar-type-grid small { color: #71868a; font-size: 9px; }
.avatar-type-grid i { display: grid; width: 45px; height: 45px; color: white; font-style: normal; place-items: center; }
.avatar-type-orb { position: relative; border-radius: 50%; background: radial-gradient(circle at 34% 28%,#fff6a7 0 6%,#ffd33d 12%,#19d6df 45%,#008c9b 74%,#082d33); box-shadow: 0 0 20px rgba(25,214,223,.28); }
.avatar-type-orb::before,.avatar-type-orb::after { position: absolute; top: 15px; width: 6px; height: 13px; border-radius: 999px; background: white; content: ''; }
.avatar-type-orb::before { left: 12px; }
.avatar-type-orb::after { right: 12px; }
.avatar-type-cutout { border-radius: 20px 20px 8px 8px; background: linear-gradient(160deg,#d9fbf8,#537d82); font: 800 10px Sora,sans-serif; }
.avatar-type-model { border: 1px solid rgba(25,214,223,.5); border-radius: 10px; background: linear-gradient(145deg,rgba(25,214,223,.23),rgba(7,16,19,.6)); font-size: 30px; transform: rotate(12deg); }
.avatar-editor-layout { display: grid; grid-template-columns: minmax(220px,.72fr) minmax(300px,1.28fr); gap: 16px; }
.avatar-editor-stage { position: relative; display: grid; min-height: 440px; overflow: hidden; border: 1px solid rgba(25,214,223,.18); border-radius: 16px; background: radial-gradient(circle at 50% 30%,rgba(25,214,223,.18),transparent 42%),linear-gradient(#102c31,#061013); place-items: center; }
.avatar-editor-stage::before { position: absolute; top: 14px; left: 16px; z-index: 3; padding: 6px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: rgba(255,255,255,.7); background: rgba(3,12,14,.42); content: 'Live avatar preview'; font: 600 8px Sora,sans-serif; text-transform: uppercase; letter-spacing: .09em; }
.avatar-editor-stage::after { position: absolute; right: 12%; bottom: 10%; left: 12%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse,rgba(25,214,223,.22),transparent 70%); filter: blur(8px); content: ''; }
.avatar-editor-stage iframe { position: absolute; inset: -8%; z-index: 1; width: 116%; height: 116%; border: 0; pointer-events: none; }
.avatar-editor-stage img { position: relative; z-index: 1; max-width: 88%; max-height: 90%; object-fit: contain; filter: drop-shadow(0 18px 25px rgba(0,0,0,.35)); }
.avatar-editor-stage .avatar-preview-orb { position: relative; z-index: 1; width: 130px; height: 130px; background: radial-gradient(circle at 34% 28%,#fff6a7 0 5%,var(--avatar-highlight,#ffd33d) 10%,var(--avatar-accent,#19d6df) 43%,var(--avatar-deep,#008c9b) 72%,#082d33); animation-duration: var(--avatar-speed,5s); scale: var(--avatar-intensity,1); }
.avatar-editor-stage .avatar-model-preview { position: relative; z-index: 1; display: grid; gap: 11px; color: #b9cbcd; text-align: center; place-items: center; }
.avatar-model-preview i { display: grid; width: 120px; height: 120px; border: 2px solid var(--avatar-model-color,#19d6df); border-radius: 24px; background: linear-gradient(145deg,color-mix(in srgb,var(--avatar-model-color,#19d6df) 30%,transparent),rgba(3,13,15,.5)); box-shadow: 18px 20px 0 color-mix(in srgb,var(--avatar-model-color,#19d6df) 11%,transparent); font: 300 74px Sora,sans-serif; place-items: center; transform: perspective(400px) rotateX(-10deg) rotateY(24deg) scale(var(--avatar-model-scale,1)); }
.avatar-model-preview span { max-width: 190px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.avatar-option-fields { display: grid; gap: 12px; align-content: start; }
.avatar-option-fields > section { display: flex; flex-direction: column; gap: 14px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: rgba(4,14,17,.38); }
.avatar-option-fields output { float: right; color: var(--aqua); font: 600 10px Sora,sans-serif; }
input[type="color"] { min-height: 43px; padding: 5px; cursor: pointer; }
input[type="range"] { min-height: 26px; padding: 0; border: 0; background: transparent; accent-color: var(--aqua); }

.environment-builder { padding: 22px; }
.environment-builder-layout { display: grid; grid-template-columns: minmax(500px,1.15fr) minmax(360px,.85fr); gap: 20px; align-items: start; }
.environment-options { display: flex; flex-direction: column; gap: 15px; }
.environment-builder[data-agent-type="website_companion"] .environment-room-settings { display: none; }
.environment-builder[data-agent-type="controlled_room"] .environment-web-settings { display: none; }
.website-companion-settings { display: grid; gap: 14px; margin: 16px 0; padding: 16px; border: 1px solid rgba(25,214,223,.18); border-radius: 15px; background: linear-gradient(145deg,rgba(25,214,223,.055),rgba(3,13,15,.26)); }
.website-companion-settings > header { display: grid; gap: 4px; }
.website-companion-settings > header span { color: var(--aqua); font: 600 8px Sora,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.website-companion-settings > header h4 { margin: 0; color: #e6eff0; font: 650 14px Sora,sans-serif; letter-spacing: -.02em; }
.website-companion-settings > header p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.website-style-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.website-arrival-toggles { grid-template-columns: repeat(3,minmax(0,1fr)); }
.environment-preview-surface { max-width: 240px; }
.environment-stage { --environment-bg:#071012; --environment-secondary:#12353b; --environment-accent:#19d6df; --environment-highlight:#ffd33d; position: sticky; top: 90px; min-height: 650px; overflow: hidden; border: 1px solid rgba(190,229,230,.2); border-radius: 20px; background: radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--environment-accent) 24%,transparent),transparent 34%),linear-gradient(155deg,var(--environment-secondary),var(--environment-bg) 68%); isolation: isolate; }
.environment-wallpaper { position: absolute; inset: 0; z-index: -3; background-image: linear-gradient(145deg,rgba(4,12,15,.18),rgba(4,12,15,.66)),var(--environment-wallpaper); background-position: center; background-size: cover; }
.environment-grid-overlay { position: absolute; z-index: -1; right: -20%; bottom: -26%; left: -20%; height: 58%; background-image: linear-gradient(color-mix(in srgb,var(--environment-accent) 25%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--environment-accent) 25%,transparent) 1px,transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(to bottom,transparent,#000 26%); transform: perspective(430px) rotateX(64deg); transform-origin: center bottom; }
.environment-stage.without-grid .environment-grid-overlay { display: none; }
.environment-stage.without-glow { background: linear-gradient(155deg,var(--environment-secondary),var(--environment-bg) 68%); }
.environment-particles i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--environment-highlight); box-shadow: 0 0 14px currentColor; animation: environment-drift 6s ease-in-out infinite; }
.environment-particles i:nth-child(1){left:14%;top:22%}.environment-particles i:nth-child(2){left:72%;top:19%;animation-delay:-2s}.environment-particles i:nth-child(3){left:83%;top:57%;animation-delay:-4s}.environment-particles i:nth-child(4){left:34%;top:69%;animation-delay:-1s}.environment-particles i:nth-child(5){left:54%;top:34%;animation-delay:-3s}
.environment-stage.without-particles .environment-particles { display: none; }
.environment-brand-preview { position: absolute; top: 20px; left: 22px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; color: #fff; }
.environment-brand-preview img { grid-row: 1 / 3; width: 52px; height: 34px; object-fit: contain; }
.environment-brand-preview strong { font: 700 14px Sora,sans-serif; }
.environment-brand-preview small { color: color-mix(in srgb,var(--environment-accent) 76%,white); font-size: 9px; }
.environment-avatar-preview { position: absolute; right: 16%; bottom: 12%; display: grid; width: 52%; height: 58%; place-items: center; filter: drop-shadow(0 26px 34px rgba(0,0,0,.32)); }
.environment-avatar-preview iframe,.environment-avatar-preview img { width: 100%; height: 100%; border: 0; object-fit: contain; }
.environment-avatar-preview .orb-idle-preview { position: absolute; inset: 0; }
.environment-avatar-preview .avatar-preview-orb { width: 160px; height: 160px; }
.environment-callout-preview { position: absolute; top: 22%; right: 7%; left: 7%; display: grid; gap: 10px; text-align: center; }
.environment-callout-preview strong { color: #fff; font: 700 clamp(22px,2.8vw,42px)/1.08 Sora,sans-serif; letter-spacing: -.045em; }
.environment-callout-preview small { color: rgba(255,255,255,.6); font-size: 11px; }
.environment-stage.without-callout .environment-callout-preview { display: none; }
.environment-chip-preview { position: absolute; right: 6%; bottom: 22px; left: 6%; display: flex; gap: 7px; padding: 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(5,14,17,.7); backdrop-filter: blur(14px); }
.environment-chip-preview span { flex: 1; padding: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: rgba(255,255,255,.78); font-size: 8px; text-align: center; }
.environment-stage.without-chips .environment-chip-preview { display: none; }
.environment-stage[data-surface="web"] { color: #173338; background: radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--environment-accent) 14%,transparent),transparent 34%),linear-gradient(145deg,#fff,#edf4f1); }
.environment-stage[data-surface="web"]::before { position: absolute; top: 78px; left: 8%; width: 52%; color: #15353b; content: 'Your website becomes the canvas.'; font: 700 clamp(28px,3vw,48px)/1.03 Sora,sans-serif; letter-spacing: -.055em; }
.environment-stage[data-surface="web"]::after { position: absolute; top: 205px; left: 8%; width: 42%; color: #6a817c; content: 'The live avatar stays available without covering the page. Case studies, forms, prize wheels, and other widgets open as floating layers.'; font: 400 11px/1.7 Poppins,sans-serif; }
.environment-stage[data-surface="web"] .environment-wallpaper,.environment-stage[data-surface="web"] .environment-grid-overlay,.environment-stage[data-surface="web"] .environment-particles { display: none; }
.environment-stage[data-surface="web"] .environment-brand-preview { color: #15353b; }
.environment-stage[data-surface="web"] .environment-brand-preview small { color: #70827e; }
.environment-stage[data-surface="web"] .environment-avatar-preview { right: auto; bottom: 0; left: 3%; width: 210px; height: 270px; }
.environment-stage[data-surface="web"] .environment-callout-preview { display: none; }
.environment-stage[data-surface="web"] .environment-chip-preview { display: none; }
.environment-stage[data-surface="web"] .environment-chip-preview span { color: #2c4c51; border-color: #dce6e3; }
.environment-web-prompt-preview { display: none; }
.environment-stage[data-surface="web"] .environment-web-prompt-preview { position: absolute; z-index: 4; right: 2%; bottom: 10px; display: flex; width: 280px; flex-direction: column; align-items: center; gap: 7px; pointer-events: none; }
.environment-stage[data-surface="web"][data-companion-position="left"] .environment-avatar-preview { right: auto; left: 0; }
.environment-stage[data-surface="web"][data-companion-position="right"] .environment-avatar-preview { right: 0; left: auto; }
.environment-stage[data-surface="web"][data-companion-position="center"] .environment-avatar-preview { right: auto; left: 50%; translate: -50% 0; }
.environment-stage[data-surface="web"][data-companion-position="left"] .environment-web-prompt-preview { right: auto; left: 0; }
.environment-stage[data-surface="web"][data-companion-position="right"] .environment-web-prompt-preview { right: 0; left: auto; }
.environment-stage[data-surface="web"][data-companion-position="center"] .environment-web-prompt-preview { right: auto; left: 50%; translate: -50% 0; }
.environment-stage[data-surface="web"][data-companion-prominence="small"] .environment-avatar-preview { width: 176px; height: 226px; }
.environment-stage[data-surface="web"][data-companion-prominence="small"] .environment-web-prompt-preview { width: 214px; }
.environment-stage[data-surface="web"][data-companion-prominence="large"] .environment-avatar-preview { width: 280px; height: 360px; }
.environment-stage[data-surface="web"][data-companion-prominence="large"] .environment-web-prompt-preview { width: 310px; }
.environment-stage[data-surface="web"][data-start-expanded="true"] .environment-avatar-preview { width: 52%; height: 66%; }
.environment-stage[data-surface="web"][data-start-expanded="true"] .environment-web-prompt-preview { width: 46%; }
.environment-stage[data-surface="web"][data-start-expanded="true"][data-expanded-vertical="top"] .environment-avatar-preview { top: 6%; bottom: auto; }
.environment-stage[data-surface="web"][data-start-expanded="true"][data-expanded-vertical="center"] .environment-avatar-preview { top: 50%; bottom: auto; translate: 0 -50%; }
.environment-stage[data-surface="web"][data-start-expanded="true"][data-companion-position="center"][data-expanded-vertical="center"] .environment-avatar-preview { translate: -50% -50%; }
.environment-web-talk-pill { display: flex; min-height: 35px; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: var(--companion-pill-text,#fff); background: var(--companion-pill-bg,#20313f); box-shadow: 0 8px 22px rgba(20,42,48,.2); }
.environment-web-talk-pill > i { display: flex; height: 14px; align-items: center; gap: 2px; }
.environment-web-talk-pill > i b { width: 2px; height: 7px; border-radius: 999px; background: currentColor; }
.environment-web-talk-pill > i b:nth-child(2) { height: 12px; }
.environment-web-talk-pill strong { font: 650 10px Sora,sans-serif; }
.environment-web-callout-pill { max-width: 100%; padding: 8px 13px; overflow: hidden; border: 1px solid rgba(28,46,61,.14); border-radius: 15px; color: var(--companion-callout-text,#213340); background: var(--companion-callout-bg,#fff); box-shadow: 0 8px 22px rgba(20,42,48,.14); font-size: 9px; line-height: 1.3; text-align: center; text-overflow: ellipsis; white-space: pre-line; }
.environment-preset-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.environment-preset-grid label { position: relative; cursor: pointer; }
.environment-preset-grid input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; }
.environment-preset-grid label > span { display: grid; grid-template-columns: 50px 1fr; gap: 2px 10px; align-items: center; min-height: 76px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.environment-preset-grid input:checked + span { border-color: rgba(25,214,223,.56); background: rgba(25,214,223,.07); }
.environment-preset-grid .scene-swatch { grid-row: 1 / 3; width: 50px; height: 50px; border-radius: 10px; }
.scene-swatch.studio{background:radial-gradient(circle at 60% 30%,#19d6df55,transparent 40%),linear-gradient(145deg,#17363c,#050b0d)}.scene-swatch.light{background:linear-gradient(145deg,#fff,#dce8ff)}.scene-swatch.gradient{background:linear-gradient(135deg,#19d6df,#554de8,#ffd33d)}.scene-swatch.custom{background:repeating-linear-gradient(45deg,#162b30 0 8px,#213b40 8px 16px)}
.environment-preset-grid b { font: 600 10px Sora,sans-serif; }
.environment-preset-grid small { color: var(--muted); font-size: 8px; }
.environment-media-picker { display: grid; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(3,13,15,.2)); transition: border-color .16s, background .16s; }
.environment-media-picker:focus-within, .environment-media-picker.drag-active { border-color: rgba(25,214,223,.48); background: rgba(25,214,223,.045); }
.environment-media-preview { position: relative; display: grid; width: 100%; height: 176px; min-height: 0; overflow: hidden; padding: 0; border: 1px dashed rgba(190,229,230,.2); border-radius: 12px; color: #9eb1b4; background-color: rgba(2,11,13,.58); background-image: linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.025) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.025) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.025) 75%); background-position: 0 0,0 8px,8px -8px,-8px 0; background-size: 16px 16px; cursor: pointer; place-items: center; }
.environment-media-preview:hover { border-color: rgba(25,214,223,.52); }
.environment-logo-picker .environment-media-preview { height: 128px; }
.environment-media-preview img { width: 100%; height: 100%; object-fit: cover; }
.environment-logo-picker .environment-media-preview img { padding: 18px; object-fit: contain; }
.environment-media-preview > span { display: grid; gap: 4px; max-width: 250px; padding: 18px; text-align: center; place-items: center; }
.environment-media-preview i { display: grid; width: 34px; height: 34px; margin-bottom: 4px; border: 1px solid rgba(25,214,223,.26); border-radius: 11px; color: var(--aqua); background: rgba(25,214,223,.07); font-style: normal; font-size: 18px; place-items: center; }
.environment-media-preview b { color: #d7e4e5; font: 600 10px Sora,sans-serif; }
.environment-media-preview small { color: #71868a; font-size: 8px; }
.environment-media-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.environment-media-heading > span { display: grid; gap: 3px; min-width: 0; }
.environment-media-heading strong { color: #c8d7d9; font: 600 11px Sora,sans-serif; }
.environment-media-heading small { color: #6f8488; font-size: 8px; line-height: 1.5; }
.environment-media-heading > div { display: flex; flex: 0 0 auto; gap: 6px; }
.environment-media-heading .quiet-button { padding: 7px 9px; font-size: 9px; }
.environment-media-input { position: absolute; width: 1px; height: 1px; min-height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.environment-media-clear { padding: 7px 8px; border: 0; color: #71868a; background: transparent; font-size: 9px; cursor: pointer; }
.environment-media-clear:hover:not(:disabled) { color: var(--danger); }
.environment-media-clear:disabled { opacity: .38; cursor: default; }
.environment-media-url { gap: 5px; color: #71868a; font-size: 8px; }
.environment-media-url input { min-height: 38px; padding: 8px 10px; font-size: 9px; }
.environment-media-status { min-height: 0; font-size: 9px; }
.environment-toggle-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.environment-toggle-grid label { flex-direction: row; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.environment-toggle-grid input { width: 15px; min-height: 15px; accent-color: var(--aqua); }
.environment-toggle-grid span { color: #c0d0d2; font-size: 9px; }

#websiteCrawlBadge { flex: none; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(3,14,17,.72); color: #91a6a9; font-size: 8px; letter-spacing: .05em; text-transform: uppercase; }
#websiteCrawlBadge[data-status="completed"] { border-color: rgba(182,220,56,.28); background: rgba(182,220,56,.08); color: var(--lime); }
#websiteCrawlBadge[data-status="failed"] { border-color: rgba(255,91,99,.3); background: rgba(255,91,99,.08); color: #ff9ca2; }
#websiteCrawlBadge[data-status="starting"],#websiteCrawlBadge[data-status="scraping"],#websiteCrawlBadge[data-status="indexing"] { border-color: rgba(25,214,223,.32); background: rgba(25,214,223,.09); color: var(--aqua); }
.website-crawl-paths textarea { min-height: 92px; font: 10px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.website-semantic-toggle { align-self: end; min-height: 42px; }
.website-crawl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.website-crawl-actions .inline-status { flex: 1 1 220px; margin: 0; }
.website-page-catalog { display: grid; gap: 6px; max-height: 270px; overflow: auto; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(3,14,17,.42); }
.website-page-catalog > p { margin: 4px; color: var(--muted); font-size: 9px; }
.website-page-catalog-heading { display: flex; justify-content: space-between; gap: 12px; padding: 3px 4px 8px; }
.website-page-catalog-heading strong { font: 600 10px Sora,sans-serif; }
.website-page-catalog-heading small { color: var(--aqua); font-size: 8px; }
.website-page-catalog > a { display: grid; gap: 2px; padding: 8px 9px; border-radius: 9px; color: inherit; text-decoration: none; }
.website-page-catalog > a:hover { background: rgba(25,214,223,.08); }
.website-page-catalog > a strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.website-page-catalog > a span { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
@keyframes environment-drift { 0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-18px);opacity:1} }

.publication-preview { min-height: 52px; padding: 12px; border: 1px dashed var(--line); border-radius: 11px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.publication-preview a { color: var(--aqua); }
.publication-preview code { color: #d9e5e6; font-family: ui-monospace, monospace; overflow-wrap: anywhere; }

.abm-layout { display: grid; grid-template-columns: minmax(500px, 1.3fr) minmax(280px, .7fr); gap: 22px; align-items: start; }
.editor-card h3, .link-library h3 { margin: 0 0 4px; font: 700 17px Sora, sans-serif; }
fieldset { display: flex; flex-direction: column; gap: 14px; margin: 4px 0; padding: 18px; border: 1px solid var(--line); border-radius: 13px; }
legend { padding: 0 7px; color: var(--aqua); font: 600 11px Sora, sans-serif; }
.link-library { padding: 22px; border-radius: 18px; }
.link-library .record-list { margin-top: 16px; }
.link-record { position: relative; }
.link-record .link-actions { display: flex; gap: 7px; margin-top: 12px; }
.link-record button, .link-record a { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: #b9cacc; background: rgba(255,255,255,.03); font-size: 10px; text-decoration: none; cursor: pointer; }
.status-pill { display: inline-flex !important; width: auto; margin-top: 8px !important; padding: 3px 7px; border-radius: 999px; color: var(--lime) !important; background: rgba(182,220,56,.08); text-transform: uppercase; letter-spacing: .08em; }

dialog { width: min(460px, calc(100% - 28px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 22px; color: var(--ink); background: transparent; }
dialog::backdrop { background: rgba(0, 8, 10, .72); backdrop-filter: blur(8px); }
.dialog-card { position: relative; padding: 30px; border-radius: 20px; }
.dialog-close { position: absolute; top: 13px; right: 13px; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.profile-dialog { width: min(650px, calc(100% - 28px)); }
.profile-dialog-card { max-height: calc(100vh - 32px); overflow-y: auto; }
.profile-dialog-intro { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; padding-right: 42px; }
.profile-dialog-intro .profile-avatar { width: 52px; height: 52px; border-radius: 15px; font-size: 13px; }
.profile-dialog-intro .card-kicker { margin-bottom: 6px; }
.profile-dialog-intro h2 { margin-bottom: 4px; }
.profile-dialog-intro p:last-child { margin: 0; color: var(--muted); font-size: 10px; }
.profile-dialog-card input[readonly] { color: #8ca0a4; background: rgba(4,14,17,.4); cursor: not-allowed; }
.profile-dialog-divider { display: flex; align-items: center; gap: 10px; margin: 24px 0 18px; color: #70858a; font: 700 9px Sora,sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.profile-dialog-divider::after { flex: 1; height: 1px; background: var(--line); content: ''; }
.wide-dialog { width: min(920px, calc(100% - 28px)); }
.dialog-description { margin: -2px 40px 18px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.activity-dialog-card { max-height: calc(100vh - 32px); overflow: auto; }
.activity-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 0 0 16px; }
.activity-metrics .manager-metric { padding: 11px 14px; border-radius: 12px; background: linear-gradient(145deg,rgba(17,39,43,.58),rgba(7,21,24,.58)); }
.activity-metrics .manager-metric strong { font-size: 19px; }
.activity-metrics .manager-metric span { font-size: 8px; }
.activity-workspace { display: grid; grid-template-columns: minmax(290px,.68fr) minmax(0,1.32fr); gap: 16px; align-items: start; }
.activity-conversation-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: rgba(4,15,18,.46); }
.activity-conversation-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 13px 15px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); }
.activity-conversation-panel > header .card-kicker { margin-bottom: 4px; }
.activity-conversation-panel > header h4 { margin: 0; font: 650 14px Sora,sans-serif; }
.activity-conversation-panel > header > span { min-width: 27px; padding: 5px 8px; border: 1px solid rgba(25,214,223,.2); border-radius: 999px; color: var(--aqua); background: rgba(25,214,223,.07); font: 700 9px Sora,sans-serif; text-align: center; }
.activity-list { display: flex; flex-direction: column; min-height: 360px; max-height: 720px; gap: 3px; padding: 7px; overflow-y: auto; }
.activity-row { position: relative; display: grid; width: 100%; gap: 10px; padding: 12px 11px; overflow: hidden; border: 1px solid transparent; border-radius: 12px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.activity-row::before { position: absolute; top: 11px; bottom: 11px; left: 0; width: 2px; border-radius: 2px; background: transparent; content: ''; }
.activity-row:hover, .activity-row:focus-visible { border-color: rgba(25,214,223,.24); background: rgba(25,214,223,.045); outline: none; }
.activity-row.active { border-color: rgba(25,214,223,.32); background: linear-gradient(110deg,rgba(25,214,223,.105),rgba(182,220,56,.025)); }
.activity-row.active::before { background: var(--aqua); box-shadow: 0 0 12px rgba(25,214,223,.45); }
.activity-row-heading { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; gap: 9px; align-items: center; min-width: 0; }
.activity-channel-mark { display: grid; width: 31px; height: 31px; border: 1px solid rgba(25,214,223,.18); border-radius: 9px; color: #7fd9dd; background: rgba(25,214,223,.055); font: 600 12px Sora,sans-serif; font-style: normal; place-items: center; }
.activity-row.active .activity-channel-mark { border-color: rgba(25,214,223,.32); color: var(--aqua); background: rgba(25,214,223,.1); }
.activity-row-copy { min-width: 0; }
.activity-row-copy strong, .activity-row-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-row-copy strong { color: #e1ebec; font: 600 11px Sora,sans-serif; }
.activity-row-copy span { margin-top: 3px; color: #71878a; font-size: 8.5px; }
.activity-row-time { align-self: start; color: #819397; font-size: 8px; white-space: nowrap; }
.activity-row-meta { display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: 40px; }
.activity-row-meta > span { overflow: hidden; color: #728589; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.activity-row-meta > span + span::before { margin-right: 6px; color: #40565a; content: '·'; }
.activity-row-meta .activity-model-pill { color: #98adb0; }
.activity-row-meta .activity-turn-count { margin-left: auto; color: #6d8589; }
.activity-empty { padding: 22px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.activity-list > .activity-empty { margin: 6px; }
.activity-transcript { min-width: 0; min-height: 520px; padding: clamp(18px,2.4vw,26px); border: 1px solid rgba(25,214,223,.2); border-radius: 17px; background: linear-gradient(145deg,rgba(15,36,40,.88),rgba(5,17,20,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.02); }
.activity-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.activity-detail-header h4 { margin: 0; font: 700 18px Sora,sans-serif; letter-spacing: -.02em; }
.activity-detail-header p:not(.card-kicker) { max-width: 560px; margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.activity-session-status { flex: none; padding: 6px 9px; border: 1px solid rgba(182,220,56,.23); border-radius: 999px; color: var(--lime); background: rgba(182,220,56,.07); font: 700 8px Sora,sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.activity-session-meta { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 14px 0 18px; border-bottom: 1px solid var(--line); }
.activity-meta-card { display: grid; min-width: 0; gap: 4px; padding: 11px; border: 1px solid rgba(190,229,230,.1); border-radius: 11px; background: rgba(255,255,255,.018); }
.activity-meta-card > span { color: #647b7f; font: 700 7.5px Sora,sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.activity-meta-card strong, .activity-meta-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-meta-card strong { color: #d7e4e5; font: 600 9.5px Sora,sans-serif; }
.activity-meta-card small { color: #6f8387; font-size: 7.5px; }
.activity-thread-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding-top: 18px; }
.activity-thread-heading h5 { margin: 0; font: 650 13px Sora,sans-serif; }
.activity-thread-heading > span { padding: 4px 7px; border-radius: 999px; color: #789095; background: rgba(255,255,255,.04); font-size: 8px; }
.activity-transcript-loading { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 210px; color: #74898d; font-size: 10px; }
.activity-transcript-loading i { width: 14px; height: 14px; border: 2px solid rgba(25,214,223,.16); border-top-color: var(--aqua); border-radius: 50%; animation: activity-loading .8s linear infinite; }
.activity-detail-empty { display: grid; min-height: 470px; color: #71878a; text-align: center; place-content: center; justify-items: center; }
.activity-detail-empty i { display: grid; width: 45px; height: 45px; margin-bottom: 12px; border: 1px solid rgba(25,214,223,.2); border-radius: 14px; color: var(--aqua); background: rgba(25,214,223,.06); font-style: normal; place-items: center; }
.activity-detail-empty h4 { margin: 0; color: #c8d6d8; font: 650 14px Sora,sans-serif; }
.activity-detail-empty p { max-width: 330px; margin: 7px 0 0; font-size: 9px; line-height: 1.6; }
.transcript-thread { display: flex; flex-direction: column; gap: 9px; max-height: 560px; padding: 15px 3px 2px 0; overflow-y: auto; }
.transcript-message { position: relative; max-width: min(84%,620px); padding: 11px 13px; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.035); }
.transcript-message.visitor { align-self: flex-end; border-color: rgba(182,220,56,.17); border-radius: 14px 14px 4px 14px; background: rgba(182,220,56,.06); }
.transcript-message strong { color: var(--aqua); font: 600 9px Sora,sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.transcript-message.visitor strong { color: var(--lime); }
.transcript-message p { margin: 5px 0 3px; color: #d6e3e4; font-size: 11px; line-height: 1.62; white-space: pre-wrap; }
.transcript-message time { color: #657a7d; font-size: 8px; }
@keyframes activity-loading { to { transform: rotate(360deg); } }

/*
 * Product UI direction: a token-led, shadcn-style light shell inspired by the
 * restrained navigation, borders, density, and whitespace in the references.
 * Runtime stages keep their own scene colors; management surfaces use these
 * neutral application tokens so the eventual React/shadcn port is mechanical.
 */
body.studio-product-ui {
  --ink: var(--foreground);
  --muted: var(--muted-foreground);
  --line: var(--border);
  --panel: var(--card);
  --panel-strong: var(--secondary);
  --bg: var(--background);
  --aqua: var(--brand);
  --aqua-deep: #115e59;
  --lime: #4d7c0f;
  --danger: #dc2626;
  color-scheme: light;
  color: var(--foreground);
  background: var(--background);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.studio-product-ui .studio-topbar {
  min-height: 56px;
  padding: 7px 18px;
  border-color: var(--border);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
}
body.studio-product-ui .studio-brand { gap: 9px; }
body.studio-product-ui .studio-brand strong { color: var(--foreground); font-size: 15px; }
body.studio-product-ui .studio-brand small { margin-top: 2px; color: var(--muted-foreground); font-size: 8px; }
body.studio-product-ui .studio-orb { width: 30px; height: 30px; box-shadow: 0 4px 14px rgba(15,118,110,.15); }
body.studio-product-ui .studio-orb i { top: 10px; width: 4px; height: 8px; }
body.studio-product-ui .studio-orb i:first-child { left: 8px; }
body.studio-product-ui .studio-orb i:last-child { right: 8px; }
body.studio-product-ui .studio-shell { grid-template-columns: minmax(0,1fr); min-height: calc(100vh - 56px); }
body.studio-product-ui .studio-sidebar {
  top: 56px;
  height: calc(100vh - 56px);
  padding: 20px 14px;
  border-color: var(--border);
  background: #fafafa;
}
body.studio-product-ui .context-picker { padding: 0 0 18px; border-color: var(--border); }
body.studio-product-ui .section-label { color: var(--muted-foreground); font-size: 8px; letter-spacing: .12em; }
body.studio-product-ui .context-select::before { background: var(--brand); box-shadow: 0 0 0 3px rgba(15,118,110,.08); }
body.studio-product-ui .context-select::after { color: #a1a1aa; }
body.studio-product-ui .context-select select {
  min-height: 40px;
  border-color: var(--input);
  border-radius: var(--radius);
  color: var(--foreground);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(24,24,27,.03);
}
body.studio-product-ui .studio-nav { gap: 3px; padding-top: 18px; }
body.studio-product-ui .studio-nav button { padding: 10px 11px; border-radius: 8px; color: #71717a; font-weight: 500; }
body.studio-product-ui .studio-nav button span { color: var(--muted-foreground); }
body.studio-product-ui .studio-nav button:hover { color: var(--foreground); background: #f0f0f1; }
body.studio-product-ui .studio-nav button.active { color: var(--foreground); background: #e9e9eb; }
body.studio-product-ui .studio-nav button.active span { color: var(--brand); }
body.studio-product-ui .studio-content { padding: 36px clamp(20px,3vw,48px) 80px; }
body.studio-product-ui .content-status-strip { margin-top: -25px; }
body.studio-product-ui .global-status { border-color: var(--border); color: var(--muted-foreground); background: var(--card); }
body.studio-product-ui .studio-panel { max-width: 1480px; }
body.studio-product-ui .agent-editor-panel { max-width: 1320px; }
body.studio-product-ui :is(.panel-heading h2,.agent-editor-heading h2,.agent-section-heading h3,.editor-card h3,.link-library h3) { color: var(--foreground); }
body.studio-product-ui :is(.panel-heading p,.agent-editor-heading p:not(.card-kicker),.agent-section-heading p:not(.card-kicker)) { color: var(--muted-foreground); }
body.studio-product-ui .card-kicker { margin-bottom: 8px; color: var(--brand); font-size: 9px; letter-spacing: .14em; }

body.studio-product-ui .profile-menu > summary { color: var(--foreground); }
body.studio-product-ui .profile-menu > summary:hover,
body.studio-product-ui .profile-menu[open] > summary { border-color: var(--border); background: var(--secondary); }
body.studio-product-ui .profile-chevron { color: var(--muted-foreground); }
body.studio-product-ui .profile-popover {
  border-color: var(--border);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 16px 40px rgba(24,24,27,.12);
}
body.studio-product-ui :is(.profile-popover-heading strong,.profile-team-list > button.active) { color: var(--foreground); }
body.studio-product-ui :is(.profile-popover-heading small,.profile-team-list .team-copy small,.profile-menu-actions small) { color: var(--muted-foreground); }
body.studio-product-ui .profile-team-list > button { color: #52525b; }
body.studio-product-ui .profile-team-list > button:hover,
body.studio-product-ui .profile-team-list > button.active { color: var(--foreground); background: var(--secondary); }
body.studio-product-ui .profile-team-list .team-mark,
body.studio-product-ui .profile-menu-actions button > span:first-child { border-color: var(--border); color: #71717a; background: #fafafa; }
body.studio-product-ui .profile-menu-actions button { color: #3f3f46; }
body.studio-product-ui .profile-menu-actions button:hover { color: var(--foreground); background: var(--secondary); }
body.studio-product-ui .knowledge-source-options > button { border-color: var(--border); background: var(--card); }
body.studio-product-ui .knowledge-source-options > button:hover { border-color: #5eead4; background: #f0fdfa; box-shadow: 0 8px 24px rgba(13,148,136,.1); }
body.studio-product-ui .knowledge-source-options > button > i { border-color: #ccfbf1; color: var(--brand); background: #f0fdfa; }

body.studio-product-ui :is(input,select,textarea) {
  border-color: var(--input);
  border-radius: var(--radius);
  color: var(--foreground);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(24,24,27,.025);
}
body.studio-product-ui :is(input,select,textarea):focus { border-color: var(--ring); box-shadow: 0 0 0 3px rgba(15,118,110,.1); }
body.studio-product-ui :is(input,textarea)::placeholder { color: var(--muted-foreground); opacity: 1; }
body.studio-product-ui label { color: #3f3f46; }
body.studio-product-ui select:not(#workspaceSelect) {
  padding-right: 38px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  cursor: pointer;
}
body.studio-product-ui select option { color: var(--foreground); background: var(--card); }
body.studio-product-ui :is(input,select,textarea):disabled {
  color: #a1a1aa;
  background-color: #f4f4f5;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}
body.studio-product-ui input[type="color"] {
  min-height: 43px;
  padding: 4px;
  background: var(--card);
  cursor: pointer;
}
body.studio-product-ui input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
body.studio-product-ui input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
body.studio-product-ui input[type="color"]::-moz-color-swatch { border: 0; border-radius: 6px; }
body.studio-product-ui input[type="range"] {
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
body.studio-product-ui input[type="range"]:focus { border: 0; box-shadow: none; }
body.studio-product-ui input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: #e4e4e7; }
body.studio-product-ui input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  appearance: none;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 1px 3px rgba(24,24,27,.16);
}
body.studio-product-ui input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: #e4e4e7; }
body.studio-product-ui input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--brand); }
body.studio-product-ui input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 2px solid white; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 1px var(--brand),0 1px 3px rgba(24,24,27,.16); }
body.studio-product-ui :is(.check-row,.tool-grid label,.experience-widget-grid label,.environment-toggle-grid label) > input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  min-height: 17px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 1px solid #d4d4d8;
  border-radius: 5px;
  background-color: var(--card);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  box-shadow: 0 1px 2px rgba(24,24,27,.05);
  cursor: pointer;
}
body.studio-product-ui :is(.check-row,.tool-grid label,.experience-widget-grid label,.environment-toggle-grid label) > input[type="checkbox"]:checked {
  border-color: var(--brand);
  background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m2.5 6.2 2.1 2.1 4.9-5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.studio-product-ui :is(.check-row,.tool-grid label,.experience-widget-grid label,.environment-toggle-grid label) > input[type="checkbox"]:focus-visible {
  border-color: var(--ring);
  outline: none;
  box-shadow: 0 0 0 3px rgba(15,118,110,.14);
}
body.studio-product-ui :is(.check-row,.tool-grid label,.experience-widget-grid label,.environment-toggle-grid label) > input[type="checkbox"]:disabled { border-color: #e4e4e7; background-color: #f4f4f5; cursor: not-allowed; }
body.studio-product-ui :is(.tool-grid label,.experience-widget-grid label,.environment-toggle-grid label):has(> input:checked) { border-color: #99f6e4; background: #f0fdfa; }
body.studio-product-ui :is(.agent-type-grid,.engagement-toggle-grid,.environment-preset-grid,.avatar-type-grid) input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
body.studio-product-ui .primary-button {
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  color: var(--primary-foreground);
  background: var(--primary);
  box-shadow: 0 1px 2px rgba(24,24,27,.08);
}
body.studio-product-ui .primary-button:hover { filter: none; background: #27272a; transform: none; }
body.studio-product-ui :is(.quiet-button,.secondary-button) {
  border-color: var(--border);
  border-radius: var(--radius);
  color: #3f3f46;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(24,24,27,.025);
}
body.studio-product-ui :is(.quiet-button,.secondary-button):hover { border-color: #d4d4d8; color: var(--foreground); background: var(--secondary); }
body.studio-product-ui :is(.panel-heading,.agent-section-heading,.widget-editor-empty) [data-new] {
  border-color: #99f6e4;
  color: #115e59;
  background: linear-gradient(180deg,#fff 0%,#f0fdfa 100%);
  box-shadow: 0 1px 2px rgba(24,24,27,.04),0 6px 18px rgba(13,148,136,.08);
}
body.studio-product-ui :is(.panel-heading,.agent-section-heading,.widget-editor-empty) [data-new]::before {
  background-color: #0f766e;
}
body.studio-product-ui :is(.panel-heading,.agent-section-heading,.widget-editor-empty) [data-new]:hover {
  border-color: #5eead4;
  color: #134e4a;
  background: #f0fdfa;
  box-shadow: 0 2px 3px rgba(24,24,27,.05),0 9px 22px rgba(13,148,136,.12);
  transform: translateY(-1px);
}
body.studio-product-ui .danger-button { border-color: #fecaca; color: #b91c1c; background: #fff; }
body.studio-product-ui .danger-button:hover { background: #fef2f2; }

body.studio-product-ui :is(.auth-card,.editor-card,.link-library,.dialog-card) {
  border-color: var(--border);
  color: var(--card-foreground);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(24,24,27,.025);
}
body.studio-product-ui .editor-card { border-radius: 12px; }
body.studio-product-ui .agent-detail-nav { gap: 3px; padding: 4px; border-color: var(--border); border-radius: 10px; background: var(--secondary); }
body.studio-product-ui .agent-detail-nav button { min-height: 34px; border-radius: 7px; color: #71717a; font-weight: 500; }
body.studio-product-ui .agent-detail-nav button:hover { color: var(--foreground); background: rgba(255,255,255,.72); }
body.studio-product-ui .agent-detail-nav button.active { color: var(--foreground); background: var(--card); box-shadow: 0 1px 3px rgba(24,24,27,.09); }
body.studio-product-ui .agent-detail-nav span { color: #71717a; background: #e4e4e7; }
body.studio-product-ui .agent-detail-nav button.active span { color: var(--brand); background: #f0fdfa; }
body.studio-product-ui #agentEditorTitle::after { color: #a1a1aa; }
body.studio-product-ui #agentEditorTitle[contenteditable="true"] { background: #f0fdfa; box-shadow: 0 0 0 2px var(--ring),0 0 0 5px rgba(15,118,110,.08); }
body.studio-product-ui .agent-form-section h3 { color: var(--foreground); }
body.studio-product-ui :is(.agent-form-section-heading p,.agent-form-section > summary p) { color: var(--muted-foreground); }
body.studio-product-ui :is(.agent-form-section-heading > span,.agent-form-section > summary > span) { border-color: #ccfbf1; color: var(--brand); background: #f0fdfa; }
body.studio-product-ui .agent-type-grid label > span { background: var(--card); }
body.studio-product-ui .agent-type-grid input:checked + span { border-color: #5eead4; background: #f0fdfa; box-shadow: inset 0 0 0 1px #ccfbf1; }
body.studio-product-ui .agent-type-grid i { border-color: #ccfbf1; color: var(--brand); background: #f0fdfa; }
body.studio-product-ui summary { color: var(--foreground); }
body.studio-product-ui :is(.agent-runtime-summary,.avatar-runtime-config) { border-color: var(--border); background: #fafafa; }
body.studio-product-ui .agent-runtime-summary b,
body.studio-product-ui .avatar-runtime-heading h4 { color: var(--foreground); }
body.studio-product-ui :is(.agent-runtime-summary small,.agent-runtime-summary em,.avatar-runtime-heading > small,.avatar-runtime-config label > small) { color: var(--muted-foreground); }
body.studio-product-ui .avatar-runtime-heading span { border-color: #99f6e4; color: var(--brand); background: #f0fdfa; }
body.studio-product-ui .avatar-anam-runtime { border-color: #fde68a; background: #fffbeb; }

body.studio-product-ui .manager-metric { border-color: var(--border); border-radius: 10px; background: var(--card); box-shadow: 0 1px 2px rgba(24,24,27,.02); }
body.studio-product-ui .manager-metric strong { color: var(--foreground); }
body.studio-product-ui .agent-card { border-color: var(--border); border-radius: 12px; background: var(--card); box-shadow: 0 1px 2px rgba(24,24,27,.03); }
body.studio-product-ui .agent-card:hover,
body.studio-product-ui .agent-card.active { border-color: #a1a1aa; box-shadow: 0 8px 24px rgba(24,24,27,.07); transform: translateY(-1px); }
body.studio-product-ui .agent-card-title strong { color: var(--foreground); }
body.studio-product-ui .agent-card-description { color: #71717a; }
body.studio-product-ui .agent-card-stats span { border-color: var(--border); color: #71717a; background: #fafafa; }
body.studio-product-ui .agent-card-stats b { color: var(--foreground); }
body.studio-product-ui .agent-status { color: #3f6212; }
body.studio-product-ui .agent-status.disabled { color: #a1a1aa; }
body.studio-product-ui .agent-action-menu > summary { border-color: var(--border); color: #71717a; background: var(--card); }
body.studio-product-ui .agent-action-popover { border-color: var(--border); background: var(--card); box-shadow: 0 12px 30px rgba(24,24,27,.12); }
body.studio-product-ui .agent-action-popover button { color: #3f3f46; }
body.studio-product-ui .agent-action-popover button:hover { color: var(--foreground); background: var(--secondary); }

body.studio-product-ui :is(.record-button,.link-record,.widget-record,.config-row,.tool-grid label,.experience-widget-grid label,.environment-preset-grid label > span,.avatar-type-grid label > span) { border-color: var(--border); color: var(--foreground); background: var(--card); }
body.studio-product-ui :is(.record-button,.widget-record,.knowledge-record):hover,
body.studio-product-ui :is(.record-button,.widget-record,.knowledge-record).active { border-color: #99f6e4; background: #f0fdfa; }
body.studio-product-ui :is(.record-button span,.widget-record-main span,.knowledge-record-main small,.knowledge-record-main em) { color: #71717a; }
body.studio-product-ui .widget-toggle span { color: #52525b; }
body.studio-product-ui .widget-toggle i { background: #d4d4d8; }
body.studio-product-ui .widget-toggle i::after { background: #fafafa; }
body.studio-product-ui .widget-toggle input:checked + i { background: #0f766e; }
body.studio-product-ui .widget-toggle input:checked + i::after { background: white; }
body.studio-product-ui .widget-toggle input:focus-visible + i { outline: 2px solid var(--ring); outline-offset: 2px; }
body.studio-product-ui .widget-toggle:has(input:disabled) { cursor: not-allowed; opacity: .55; }
body.studio-product-ui :is(.knowledge-library-summary article,.knowledge-library-toolbar,.knowledge-results-panel,.widget-config-builder,.avatar-option-fields > section,.environment-media-picker,.website-companion-settings,.knowledge-source-picker,.knowledge-website-form,.website-page-catalog) { border-color: var(--border); background: var(--card); }
body.studio-product-ui .website-companion-settings > header h4 { color: var(--foreground); }
body.studio-product-ui .website-companion-settings > header p { color: var(--muted-foreground); }
body.studio-product-ui .knowledge-library-summary strong { color: var(--foreground); }
body.studio-product-ui .knowledge-library-summary span { color: #3f3f46; }
body.studio-product-ui :is(.knowledge-library-summary small,.knowledge-results-panel > header small) { color: #71717a; }
body.studio-product-ui :is(.knowledge-library-toolbar label > span,.knowledge-pagination span) { color: var(--muted-foreground); }
body.studio-product-ui .knowledge-record-main > i { border-color: #ccfbf1; color: var(--brand); background: #f0fdfa; }
body.studio-product-ui .widget-type-step { border-color: #ccfbf1; background: #f0fdfa; }
body.studio-product-ui .widget-step-number { border-color: #99f6e4; color: var(--brand); background: white; }
body.studio-product-ui :is(.widget-type-step p,.field-note,.widget-builder-heading p,.widget-config-prompt p,.experience-widget-grid small) { color: #71717a; }
body.studio-product-ui :is(.widget-config-prompt h4,.config-row-header strong,.experience-widget-grid strong) { color: var(--foreground); }
body.studio-product-ui .legacy-upgrade-note { border-color: #fde68a; color: #92400e; background: #fffbeb; }
body.studio-product-ui .config-remove,
body.studio-product-ui .config-add { border-color: var(--border); color: #3f3f46; background: white; }
body.studio-product-ui .agent-avatar-builder-meta { border-color: var(--border); background: #fafafa; }
body.studio-product-ui .avatar-type-grid input:checked + span { border-color: #5eead4; color: var(--foreground); background: #f0fdfa; }
body.studio-product-ui .avatar-type-grid small { color: var(--muted-foreground); }
body.studio-product-ui .environment-media-preview { border-color: var(--border); color: #71717a; background-color: #fafafa; }
body.studio-product-ui .environment-media-preview b { color: #3f3f46; }
body.studio-product-ui .environment-media-preview small { color: var(--muted-foreground); }
body.studio-product-ui .environment-media-heading strong { color: #3f3f46; }
body.studio-product-ui .environment-media-heading small { color: #71717a; }
body.studio-product-ui :is(.environment-media-clear,.environment-media-url) { color: var(--muted-foreground); }
body.studio-product-ui .environment-toggle-grid span { color: #52525b; }
body.studio-product-ui .environment-preset-grid input:checked + span { border-color: #5eead4; background: #f0fdfa; }
body.studio-product-ui .engagement-toggle-grid label > span { border-color: var(--border); background: var(--card); }
body.studio-product-ui .engagement-toggle-grid input:checked + span { border-color: #5eead4; background: #f0fdfa; box-shadow: inset 0 0 0 1px #ccfbf1; }
body.studio-product-ui .engagement-toggle-grid b { color: var(--foreground); }
body.studio-product-ui .engagement-toggle-grid small { color: #71717a; }
body.studio-product-ui #websiteCrawlBadge { border-color: var(--border); color: #71717a; background: #fafafa; }
body.studio-product-ui .link-record :is(button,a) { border-color: var(--border); color: #3f3f46; background: white; }
body.studio-product-ui .profile-dialog-card input[readonly] { color: #71717a; background: #fafafa; }
body.studio-product-ui :is(#websitePageInspectorDescription,#websitePageInspectorMetadata dd,.knowledge-open-page) { color: #52525b; }
body.studio-product-ui #websitePageInspectorMetadata dt { color: #71717a; background: #fafafa; }
body.studio-product-ui .preview-toolbar > div:first-child { padding: 10px 12px; border: 1px solid #d9f99d; border-radius: 10px; background: #f7fee7; }
body.studio-product-ui .preview-state-dot { background: #4d7c0f; box-shadow: 0 0 0 3px rgba(77,124,15,.1); }
body.studio-product-ui .preview-toolbar strong { color: #365314; }
body.studio-product-ui .preview-toolbar small { color: #52525b; }
body.studio-product-ui .embed-install-card { border-color: var(--border); border-radius: 12px; background: #fafafa; }
body.studio-product-ui .embed-install-card h4 { color: var(--foreground); }
body.studio-product-ui .embed-install-card p:not(.card-kicker) { color: #71717a; }
body.studio-product-ui .embed-code-block { border-color: #d4d4d8; background: var(--card); }
body.studio-product-ui .embed-code-block span { color: #71717a; }
body.studio-product-ui .embed-code-block code,
body.studio-product-ui .publication-preview code { color: #27272a; }
body.studio-product-ui .publication-preview { border-color: var(--border); color: #71717a; background: #fafafa; }
body.studio-product-ui .status-pill { color: #3f6212 !important; background: #f7fee7; }

body.studio-product-ui .activity-metrics .manager-metric { background: var(--card); }
body.studio-product-ui .activity-conversation-panel { border-color: var(--border); border-radius: 12px; background: var(--card); }
body.studio-product-ui .activity-conversation-panel > header { border-color: var(--border); background: #fafafa; }
body.studio-product-ui .activity-conversation-panel > header > span { border-color: #ccfbf1; color: var(--brand); background: #f0fdfa; }
body.studio-product-ui .activity-row:hover,
body.studio-product-ui .activity-row:focus-visible { border-color: #ccfbf1; background: #f8fffe; }
body.studio-product-ui .activity-row.active { border-color: #99f6e4; background: #f0fdfa; }
body.studio-product-ui .activity-row.active::before { background: var(--brand); box-shadow: none; }
body.studio-product-ui .activity-channel-mark { border-color: var(--border); color: #71717a; background: #fafafa; }
body.studio-product-ui .activity-row.active .activity-channel-mark { border-color: #99f6e4; color: var(--brand); background: white; }
body.studio-product-ui .activity-row-copy strong { color: var(--foreground); }
body.studio-product-ui :is(.activity-row-copy span,.activity-row-time,.activity-row-meta > span) { color: #71717a; }
body.studio-product-ui .activity-row-meta > span + span::before { color: #d4d4d8; }
body.studio-product-ui .activity-transcript { border-color: var(--border); border-radius: 12px; background: var(--card); box-shadow: none; }
body.studio-product-ui .activity-detail-header h4 { color: var(--foreground); }
body.studio-product-ui .activity-detail-header p:not(.card-kicker) { color: #71717a; }
body.studio-product-ui .activity-session-status { border-color: #d9f99d; color: #3f6212; background: #f7fee7; }
body.studio-product-ui .activity-meta-card { border-color: var(--border); background: #fafafa; }
body.studio-product-ui .activity-meta-card > span { color: var(--muted-foreground); }
body.studio-product-ui .activity-meta-card strong { color: var(--foreground); }
body.studio-product-ui .activity-meta-card small { color: #71717a; }
body.studio-product-ui .activity-thread-heading h5 { color: var(--foreground); }
body.studio-product-ui .activity-thread-heading > span { color: #71717a; background: #f4f4f5; }
body.studio-product-ui .transcript-message { border-color: var(--border); color: var(--foreground); background: #f4f4f5; }
body.studio-product-ui .transcript-message.visitor { border-color: #d9f99d; background: #f7fee7; }
body.studio-product-ui .transcript-message p { color: #27272a; }
body.studio-product-ui .transcript-message time { color: var(--muted-foreground); }
body.studio-product-ui .activity-detail-empty h4 { color: #3f3f46; }
body.studio-product-ui .activity-detail-empty i { border-color: #ccfbf1; color: var(--brand); background: #f0fdfa; }
body.studio-product-ui .activity-empty { border-color: var(--border); color: #71717a; }
body.studio-product-ui :is(button,a,summary,[tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
body.studio-product-ui .dialog-close:hover { border-color: #d4d4d8; color: var(--foreground); background: var(--secondary); }
body.studio-product-ui dialog::backdrop { background: rgba(24,24,27,.32); }

@media (max-width: 980px) {
  .auth-shell { grid-template-columns: 1fr; width: min(680px, calc(100% - 34px)); }
  .auth-story h1 { font-size: clamp(40px, 10vw, 66px); }
  .studio-shell { grid-template-columns: 1fr; }
  .studio-sidebar { position: static; display: grid; grid-template-columns: minmax(220px, .7fr) 1fr; gap: 18px; height: auto; padding: 16px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .context-picker { padding: 0; border: 0; }
  .studio-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .editor-layout, .abm-layout { grid-template-columns: 1fr; }
  .knowledge-library-layout { grid-template-columns: 1fr; }
  .knowledge-library-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .agent-editor-heading { grid-template-columns: 1fr; gap: 16px; }
  .editor-save-button { width: fit-content; }
  .environment-builder-layout { grid-template-columns: 1fr; }
  .environment-stage { position: relative; top: auto; min-height: 580px; }
  .preview-control-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .embed-install-card { grid-template-columns: 1fr; }
  .activity-workspace { grid-template-columns: 1fr; }
  .activity-list { min-height: 0; max-height: 370px; }
  .activity-transcript { min-height: 470px; }
  .activity-session-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .record-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.studio-product-ui .studio-sidebar { top: auto; height: auto; }
}

@media (max-width: 640px) {
  .studio-topbar { padding: 6px 12px; }
  .profile-menu > summary { min-width: 0; padding: 5px; }
  .profile-summary-copy { display: none; }
  .profile-chevron { margin-right: 3px; }
  .profile-popover { position: fixed; top: 58px; right: 10px; width: min(330px,calc(100vw - 20px)); }
  .auth-shell { padding: 38px 0; }
  .architecture-line { display: none; }
  .auth-card { padding: 24px; }
  .studio-sidebar { grid-template-columns: 1fr; padding: 14px; }
  .studio-nav { display: flex; flex-direction: row; overflow-x: auto; }
  .studio-nav button { flex: 0 0 auto; }
  .studio-content { padding: 24px 14px 60px; }
  .panel-heading { align-items: flex-start; }
  .global-status { display: none; }
  .record-list { grid-template-columns: 1fr; }
  .agent-grid, .manager-summary, .activity-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.two, .form-grid.three, .prompt-grid, .tool-grid, .experience-widget-grid, .widget-common-fields, .avatar-type-grid, .avatar-editor-layout, .agent-type-grid, .engagement-toggle-grid, .website-style-grid { grid-template-columns: 1fr; }
  .editor-card { padding: 19px; }
  .agent-editor-page { padding: 22px 18px; }
  .agent-section-heading { flex-direction: column; }
  .agent-detail-nav { margin-right: -14px; margin-left: -14px; border-right: 0; border-left: 0; border-radius: 0; }
  .agent-form-actions { align-items: stretch; flex-wrap: wrap; }
  .agent-form-actions .inline-status { flex-basis: 100%; }
  .agent-runtime-summary,.avatar-runtime-heading { align-items: stretch; flex-direction: column; }
  .avatar-runtime-heading > small { max-width: none; text-align: left; }
  .widget-form-heading { flex-direction: column; }
  .widget-type-step { grid-template-columns: 1fr; padding-left: 56px; }
  .widget-type-step label { grid-row: auto; }
  .widget-type-step p { max-width: none; }
  .knowledge-library-toolbar { grid-template-columns: 1fr; }
  .knowledge-library-summary { grid-template-columns: 1fr 1fr; }
  .knowledge-record-list { max-height: 540px; }
  .knowledge-pagination { flex-wrap: wrap; }
  .activity-row-meta { padding-left: 40px; }
  .activity-session-meta { grid-template-columns: 1fr; }
  .activity-detail-header { align-items: flex-start; }
  .activity-detail-header p:not(.card-kicker) { max-width: 260px; }
  .transcript-message { max-width: 92%; }
  .agent-avatar-builder-meta,.preview-toolbar { align-items: flex-start; flex-direction: column; }
  .preview-control-grid,.preview-host-row,.environment-preset-grid,.environment-toggle-grid { grid-template-columns: 1fr; }
  .website-frame { min-height: 500px; }
  .website-frame-viewport { height: 462px; }
  .website-frame-page { min-height: 462px; }
  .website-frame-hero { width: 76%; padding-top: 42px; }
  .environment-stage { min-height: 500px; }
  .environment-media-heading { align-items: flex-start; flex-direction: column; }
  .profile-dialog-card { padding: 24px 18px; }
  body.studio-product-ui .studio-topbar { padding: 6px 12px; }
  body.studio-product-ui .studio-content { padding: 30px 14px 60px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}