@font-face {
  font-family: "Bot Demo Inter";
  src: url("/static/fonts/bot-demo/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Isolated browser demo, ported from the desktop renderer's dark theme and layout. */
.abot-playground {
  padding-top: 36px;
  padding-bottom: 36px;
  scroll-margin-top: 24px;
}
.bot-app {
  position: relative;
  --app-bg: oklch(0.145 0 0);
  --app-card: oklch(0.205 0 0);
  --app-primary: oklch(0.72 0.26 324.591);
  --app-muted: oklch(0.708 0 0);
  --app-border: oklch(1 0 0 / 10%);
  /* The rewritten desktop renderer's chat palette: cool-tinted surfaces, amber while running, green when done. */
  --app-running: oklch(0.84 0.1 60);
  --app-done: oklch(0.87 0.12 150);
  --chat-surface: oklch(0.255 0.004 286);
  --chat-surface-2: oklch(0.225 0.004 286);
  --chat-inset: oklch(0.18 0.003 286);
  --app-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  height: 730px;
  min-height: 0;
  background: var(--app-bg);
  color: #fafafa;
  border: 1px solid #3d3748;
  border-radius: 16px;
  overflow: hidden;
  font-family:
    "Bot Demo Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: 0 20px 70px -35px #2b124f88;
  isolation: isolate;
}
.bot-app *,
.bot-app *::before,
.bot-app *::after {
  box-sizing: border-box;
}
.bot-app [hidden] {
  display: none !important;
}
.bot-app h3,
.bot-app h4,
.bot-app p,
.bot-app label,
.bot-app strong {
  font-family: inherit;
  color: inherit;
}
.bot-app h3 {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}
.bot-app h4 {
  font-size: 15px;
  font-weight: 600;
  margin: 24px 0 10px;
}
.bot-app p {
  margin: 8px 0;
}
.bot-app button,
.bot-app input,
.bot-app select,
.bot-app textarea {
  font: inherit;
}
.bot-app button {
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--app-border);
  background: var(--app-card);
  border-radius: 7px;
  padding: 7px 10px;
  text-align: left;
  line-height: 1.4;
  box-shadow: none;
}
.bot-app button:hover {
  border-color: color-mix(in srgb, var(--app-primary) 45%, transparent);
  background: #29252d;
}
.bot-app button:disabled {
  cursor: default;
  opacity: 0.45;
}
.bot-app button:focus-visible,
.bot-app input:focus-visible,
.bot-app textarea:focus-visible,
.bot-app select:focus-visible,
.bot-app summary:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: 2px;
}
.bot-app svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  vertical-align: middle;
}
.bot-app input:not([type="checkbox"]),
.bot-app textarea,
.bot-app select {
  width: 100%;
  border: 1px solid #3d3d3d;
  border-radius: 7px;
  padding: 9px 11px;
  background: #202020;
  color: #f5f5f5;
  outline-offset: 2px;
}
.bot-app textarea {
  resize: vertical;
}
.bot-app input::placeholder,
.bot-app textarea::placeholder {
  color: #969696;
  opacity: 1;
}
.bot-app input[type="checkbox"] {
  accent-color: var(--app-primary);
  width: 16px;
  height: 16px;
}
.bot-app label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
}
.bot-app label > input,
.bot-app label > textarea,
.bot-app label > select {
  margin-top: 6px;
}
.bot-app .bot-app-primary {
  background: linear-gradient(var(--app-primary), #6d10e4);
  color: white;
  font-weight: 600;
  border: 0;
  text-align: center;
}
.bot-app .bot-app-muted {
  color: var(--app-muted);
}
.bot-app .bot-app-small {
  font-size: 10px;
  color: var(--app-muted);
}
.bot-app-sidebar {
  background: #252527;
  border-right: 1px solid var(--app-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bot-app-brand {
  height: 48px;
  min-height: 48px;
  border-bottom: 1px solid var(--app-border);
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.bot-app-brand img {
  border-radius: 5px;
}
.bot-app-brand b {
  font-weight: 400;
}
.bot-app-brand button {
  margin-left: auto;
}
.bot-app-brand button,
.bot-app-topbar button {
  border: 0;
  padding: 3px;
  background: none;
  color: #aaa;
}
.bot-app-trees {
  padding: 10px 7px;
  flex: 1;
  overflow: auto;
  min-height: 0;
}
.bot-app-tree {
  margin-bottom: 14px;
}
.bot-app-tree-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bot-app-tree-heading button {
  border: 0;
  background: none;
  color: #aeaeae;
  display: flex;
  align-items: center;
  gap: 9px;
}
.bot-app-tree-heading [data-tree-toggle] {
  flex: 1;
  min-width: 0;
  text-align: left;
}
.bot-app-tree-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}
.bot-app-tree-chevron svg {
  width: 14px;
  height: 14px;
}
.bot-app-tree-heading [aria-expanded="false"] .bot-app-tree-chevron {
  transform: rotate(-90deg);
}
.bot-app-tree-heading small {
  color: #737373;
}
.bot-app .bot-app-tree-item {
  background: none;
  border: 0;
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
}
.bot-app-tree-item span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.bot-app .bot-app-tree-item.is-selected {
  background: #3a333f;
}
.bot-app-avatar {
  display: inline-flex;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  border-radius: 7px;
  align-items: center;
  justify-content: center;
  object-fit: contain;
  color: white;
  font-style: normal;
  font-size: 20px;
}
.bot-app-sidebar-bottom > button {
  display: flex;
  align-items: center;
  width: calc(100% - 14px);
  gap: 10px;
  margin: 2px 7px;
  border: 0;
  background: none;
  padding: 9px;
}
.bot-app-account {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--app-border);
  padding: 12px 9px;
  gap: 7px;
}
.bot-app-account-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid #474747;
  border-radius: 50%;
  color: #aaa;
}
.bot-app-account strong {
  font-size: 11px;
  display: block;
  font-weight: 500;
}
.bot-app-account small {
  display: block;
  color: #929292;
  font-size: 9px;
}
.bot-app-account button {
  border: 0;
  background: none;
  padding: 4px;
  margin-left: auto;
}
.bot-app-workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
}
.bot-app-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--app-border);
}
.bot-app-topbar > span:first-of-type {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-app-topbar-actions {
  display: flex;
  gap: 14px;
  margin-left: auto;
}
.bot-app-sidebar-reopen {
  display: none;
}
.bot-app-body {
  flex: 1;
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.bot-app-main {
  flex: 1;
  min-width: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.bot-app-page {
  min-height: 100%;
}
.bot-app-focused {
  padding: 30px clamp(18px, 3vw, 44px);
}
.bot-app-session {
  display: flex;
  padding: 32px 28px;
  align-items: center;
  justify-content: center;
}
.bot-app-session-welcome {
  width: 100%;
  max-width: 720px;
  text-align: center;
}
.bot-app-welcome-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: 15px;
  color: var(--app-primary);
  margin: 0 auto 20px;
}
.bot-app-welcome-icon svg {
  width: 27px;
  height: 27px;
}
.bot-app-session-welcome h3 {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.bot-app .bot-app-workspace-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
}
.bot-app-session-welcome > p {
  font-size: 10px;
  margin: 10px 0 28px;
}
.bot-app-starters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  text-align: left;
}
.bot-app-starters > button,
.bot-app-template-grid > button {
  padding: 14px;
  border-radius: 15px;
  min-height: 135px;
  background: #171717;
  /* Buttons centre their content vertically; stack from the top so titles line up across a row. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.bot-app-starters > button > span,
.bot-app-template-grid > button > span {
  display: flex;
  align-items: center;
  gap: 9px;
}
/* Icon tiles only — never the parts of a drawn face inside a card. */
.bot-app-starters > button > span > i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: #252525;
  color: var(--app-primary);
  border-radius: 8px;
  flex-shrink: 0;
}
.bot-app-starters strong,
.bot-app-template-grid strong {
  font-size: 12px;
  font-weight: 600;
}
.bot-app-starters p,
.bot-app-template-grid p {
  color: #aaa;
  font-size: 11px;
  line-height: 1.45;
  margin: 12px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bot-app-composer {
  padding: 12px 14px 9px;
  margin: 0;
  border-top: 1px solid #171717;
}
.bot-app-composer-input {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bot-app-composer-input > button {
  background: none;
  padding: 5px;
  border: 0;
}
.bot-app-composer textarea {
  min-height: 42px;
  max-height: 105px;
  border-radius: 22px;
  resize: none;
  background: #171717;
  padding: 11px 14px;
  font-size: 12px;
}
.bot-app-composer .bot-app-send {
  background: var(--app-primary);
  border-radius: 50%;
  padding: 7px;
  color: #16091b;
}
.bot-app-composer-options {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
/* The access select and the model button are one pair: same height, type, hover and chevron. */
.bot-app-composer-options select,
.bot-app-composer-options button {
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: #e5e5e5;
  font-size: 11px;
  line-height: 26px;
}
.bot-app-composer-options select {
  width: auto;
  max-width: 155px;
  padding-right: 24px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5e5e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 12px 12px;
}
.bot-app-composer-options select:hover,
.bot-app-composer-options button:hover {
  background-color: #202020;
}
.bot-app-composer-options small {
  color: #a3a3a3;
  font-size: 9px;
}
.bot-app-composer-options button {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Dropdown caret: the chevron icon, centred on the text rather than a glyph on its baseline. */
.bot-app-caret {
  display: inline-flex;
  align-items: center;
}
.bot-app-caret svg {
  width: 12px;
  height: 12px;
}
.bot-app-bots-home {
  padding: 32px 24px;
  text-align: center;
}
.bot-app-face {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: #a855f7;
  border-radius: 50%;
  color: #321451;
  font-size: 35px;
  margin: 0 auto 15px;
}
.bot-app-bots-home h3 {
  font-size: 29px;
  margin: 0 0 10px;
}
.bot-app-bots-home em {
  color: var(--app-primary);
  font-style: normal;
}
.bot-app-bots-home > p {
  margin: 0 0 22px;
  font-size: 13px;
}
.bot-app-bots-home form {
  max-width: 440px;
  margin: auto;
}
.bot-app-name-input {
  position: relative;
}
.bot-app-name-input svg {
  position: absolute;
  top: 19px;
  left: 14px;
  color: var(--app-primary);
}
.bot-app-name-input input {
  padding: 13px 12px 13px 40px !important;
}
.bot-app-bots-home form > button {
  width: 80%;
  padding: 13px;
  border-radius: 10px;
}
.bot-app-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 440px;
  margin: 26px auto 18px;
  font-size: 12px;
  color: var(--app-muted);
}
.bot-app-divider::before,
.bot-app-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--app-border);
}
.bot-app-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 20px;
}
.bot-app-categories button {
  font-size: 10px;
  padding: 7px 9px;
}
.bot-app-categories [aria-selected="true"] {
  background: var(--app-primary);
  color: white;
}
.bot-app-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
}
.bot-app-template-grid i {
  color: white;
}
.bot-app-page-lead {
  display: flex;
  align-items: start;
  gap: 15px;
  margin-bottom: 20px;
}
.bot-app-page-lead p {
  color: var(--app-muted);
  margin: 0;
  flex: 1;
}
.bot-app-page-lead button {
  white-space: nowrap;
}
.bot-app-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.bot-app-stats > div {
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 13px;
  color: var(--app-muted);
}
.bot-app-stats strong {
  display: block;
  color: white;
  font-size: 24px;
}
.bot-app-stats > div:first-child strong {
  color: var(--app-primary);
}
.bot-app-routine-card {
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 14px;
}
.bot-app-routine-card > div:first-child {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.bot-app-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: #27272b;
  color: #ddd;
}
.bot-app-routine-actions {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 4px;
}
.bot-app-routine-actions > button {
  border: 0;
  background: none;
  padding: 5px;
}
.bot-app-routine-card p {
  font-size: 11px;
  color: var(--app-muted);
}
.bot-app-routine-card summary {
  cursor: pointer;
  color: #aaa;
}
.bot-app .bot-app-switch {
  width: 32px;
  height: 19px;
  padding: 2px;
  border: 0;
  border-radius: 20px;
  background: #424242;
  flex-shrink: 0;
}
.bot-app-switch span {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: white;
}
.bot-app-switch[aria-checked="true"] {
  background: var(--app-primary);
}
.bot-app-switch[aria-checked="true"] span {
  margin-left: 13px;
}
.bot-app-routine-templates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.bot-app-routine-templates button {
  background: none;
  padding: 13px;
  border-radius: 9px;
}
.bot-app-routine-templates strong {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 500;
}
.bot-app-routine-templates p {
  color: #aaa;
  font-size: 11px;
}
.bot-app-cap-tabs {
  border-bottom: 1px solid var(--app-border);
  padding: 8px 15px;
  display: flex;
  gap: 4px;
}
.bot-app-cap-tabs button {
  border: 0;
  background: none;
  color: #999;
}
.bot-app-cap-tabs [aria-selected="true"] {
  background: #252525;
  color: #eee;
}
.bot-app-search {
  position: relative;
  margin-bottom: 25px !important;
  max-width: 460px;
}
.bot-app-search svg {
  position: absolute;
  top: 14px;
  left: 12px;
  color: #999;
}
.bot-app-search input {
  margin: 0 !important;
  padding-left: 37px !important;
}
.bot-app-connectors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bot-app-connector {
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 13px;
  background: #111;
  border: 1px solid var(--app-border);
  border-radius: 10px;
}
.bot-app-connector > div {
  flex: 1;
  min-width: 0;
}
.bot-app-service-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #252525;
  font-size: 19px;
  font-weight: 700;
  flex-shrink: 0;
}
.bot-app-service-icon img {
  width: 23px;
  height: 23px;
  object-fit: contain;
}
.bot-app-connector p {
  font-size: 10px;
  color: #999;
  line-height: 1.4;
  margin-bottom: 0;
}
.bot-app-connector > button {
  background: var(--app-primary);
  padding: 5px 7px;
  font-size: 10px;
  border: 0;
}
.bot-app-connector > button[aria-pressed="true"] {
  background: #203b2a;
  color: #8ce5a8;
}
.bot-app-capability {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 18px 0;
  border-bottom: 1px solid var(--app-border);
}
.bot-app-capability p {
  color: #999;
}
.bot-app-artifact-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  margin-bottom: 8px;
}
.bot-app-artifact-list small {
  display: block;
  font-size: 10px;
  color: #999;
}
.bot-app-artifact-list button > span:last-child {
  margin-left: auto;
}
.bot-app-invite-progress {
  border: 1px solid var(--app-border);
  border-radius: 10px;
  padding: 14px;
  margin: 20px 0;
}
.bot-app-invite-progress progress {
  width: 100%;
  height: 7px;
  display: block;
  margin: 12px 0;
  accent-color: var(--app-primary);
}
.bot-app-invite-progress progress::-webkit-progress-bar {
  background: #282828;
  border-radius: 6px;
}
.bot-app-invite-progress progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--app-primary), #6d28d9);
  border-radius: 6px;
}
.bot-app-invite-progress p {
  color: #aaa;
  font-size: 11px;
}
.bot-app-contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bot-app-contacts label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--app-border);
  border-radius: 8px;
}
.bot-app-contacts small {
  display: block;
  color: #aaa;
  font-size: 10px;
}
.bot-app-invite-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.bot-app-chat {
  padding: 28px;
}
.bot-app-chat-inner {
  max-width: 700px;
  margin: auto;
}
.bot-app-chat-inner.is-free > :not(.bot-app-turn) {
  display: none;
}
.bot-app-turn {
  margin-top: 28px;
}
.bot-app-chat-inner.is-free > .bot-app-turn:first-child {
  margin-top: 0;
}
.bot-app-turn-reply {
  margin: 0;
  line-height: 1.6;
  min-height: 1.6em;
}
.bot-app-user-message {
  max-width: 85%;
  margin: 0 0 28px auto;
  background: #28282c;
  border-radius: 16px;
  padding: 13px 17px;
  white-space: pre-wrap;
}
.bot-app-agent-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}
.bot-app-agent-heading > span {
  color: #a2a2a2;
  font-size: 10px;
  margin-left: auto;
}
.bot-app-tool {
  padding: 8px 0;
  color: #aaa;
}
.bot-app-tool summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
}
.bot-app-tool summary > span {
  color: #777;
  width: 16px;
}
.bot-app-tool.is-working summary > span {
  color: var(--app-primary);
}
.bot-app-tool.is-done summary > span {
  color: #68bd8b;
}
.bot-app-tool p {
  border-left: 1px solid #343434;
  padding-left: 16px;
  margin-left: 8px;
  font-size: 10px;
}
.bot-app-result {
  padding-top: 8px;
}
.bot-app-result h4 {
  font-size: 18px;
  margin: 14px 0;
}
.bot-app-result p {
  color: #ccc;
}
.bot-app-result dl {
  margin: 20px 0;
  border: 1px solid #333;
  border-radius: 8px;
  overflow: hidden;
}
.bot-app-result dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 10px;
  border-bottom: 1px solid #292929;
}
.bot-app-result dt {
  color: #ddd;
  font-weight: 500;
}
.bot-app-result dd {
  margin: 0;
  color: #aaa;
}
.bot-app-result pre,
.bot-app-inspector pre {
  background: #1e1e1e;
  color: #9fe5b7;
  border: 1px solid #363636;
  padding: 15px;
  white-space: pre-wrap;
  font-size: 11px;
  border-radius: 7px;
}
.bot-app-result > button {
  margin-top: 12px;
  color: #e0baef;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bot-app-chat-controls {
  display: flex;
  gap: 8px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.bot-app-chat-controls button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  font-size: 11px;
}
.bot-app-chat-controls svg {
  width: 13px;
  height: 13px;
}
.bot-app-inspector {
  width: 34%;
  min-width: 230px;
  border-left: 1px solid var(--app-border);
  background: #111;
  overflow: auto;
}
.bot-app-inspector-tabs {
  display: flex;
  align-items: center;
  padding: 7px;
  border-bottom: 1px solid var(--app-border);
  gap: 3px;
}
.bot-app-inspector-tabs button {
  font-size: 10px;
  border: 0;
  background: none;
  padding: 5px;
}
.bot-app-inspector-tabs button:last-child {
  margin-left: auto;
}
.bot-app-inspector [data-inspector-content] {
  padding: 15px;
  font-size: 11px;
  overflow-wrap: anywhere;
}
.bot-app-inspector dl > div {
  padding: 10px 0;
  border-bottom: 1px solid #333;
}
.bot-app-inspector dd {
  margin: 3px 0;
  color: #aaa;
}
.bot-app-inspector button {
  margin-top: 8px;
  max-width: 100%;
}
.bot-app-toast {
  position: absolute;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  padding: 11px 17px;
  background: #302735;
  border: 1px solid #775584;
  border-radius: 9px;
  box-shadow: 0 6px 20px #0008;
  z-index: 5;
  font-size: 11px;
}
.bot-app-modal-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #000b;
  backdrop-filter: blur(3px);
}
.bot-app-dialog {
  position: relative;
  margin: auto;
  width: 440px;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  background: #171717;
  color: #f5f5f5;
  padding: 26px;
  border: 1px solid #353535;
  border-radius: 15px;
}
.bot-app-dialog h3 {
  font-size: 21px;
}
.bot-app-dialog p {
  color: #aaa;
  font-size: 12px;
}
.bot-app-dialog-icon {
  color: var(--app-primary);
  text-align: center;
  margin-bottom: 16px;
}
.bot-app-dialog-icon svg {
  width: 28px;
  height: 28px;
}
.bot-app-dialog-icon + h3 {
  text-align: center;
}
.bot-app-dialog-actions {
  position: sticky;
  bottom: -26px;
  padding: 14px 0;
  background: #171717;
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-top: 25px;
}
.bot-app .bot-app-check {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.bot-app-check small {
  display: block;
  color: #999;
  font-size: 11px;
}
.bot-app-model-dialog > button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 14px;
  margin-top: 6px;
}
.bot-app.is-sidebar-hidden {
  grid-template-columns: minmax(0, 1fr);
}
.bot-app.is-sidebar-hidden .bot-app-sidebar {
  display: none;
}
.bot-app.is-sidebar-hidden .bot-app-sidebar-reopen {
  display: block;
}
@media (max-width: 1000px) {
  .bot-app {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .bot-app-brand {
    font-size: 12px;
    padding: 0 9px;
    gap: 5px;
  }
  .bot-app-starters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bot-app-connectors-grid {
    grid-template-columns: 1fr;
  }
  .bot-app-inspector {
    width: 45%;
    min-width: 200px;
  }
}
@media (max-width: 650px) {
  .abot-playground {
    padding-inline: 16px;
  }
  .bot-app {
    grid-template-columns: 1fr;
    height: 740px;
    position: relative;
  }
  .bot-app-sidebar {
    display: none;
  }
  .bot-app-sidebar-reopen {
    display: block;
  }
  .bot-app.is-sidebar-open .bot-app-sidebar {
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 225px;
    z-index: 10;
    box-shadow: 18px 0 40px #0008;
  }
  .bot-app-session {
    padding: 24px 16px;
  }
  .bot-app-session-welcome h3 {
    font-size: 25px;
  }
  .bot-app-session-welcome > p {
    margin-bottom: 18px;
  }
  .bot-app-starters > button {
    padding: 12px;
    min-height: 130px;
  }
  .bot-app-starters strong {
    font-size: 11px;
  }
  .bot-app-starters p {
    font-size: 10px;
  }
  .bot-app-starters i {
    width: 26px;
    height: 26px;
  }
  .bot-app-focused {
    padding: 22px 16px;
  }
  .bot-app-routine-templates,
  .bot-app-contacts {
    grid-template-columns: 1fr;
  }
  .bot-app-bots-home {
    padding: 26px 14px;
  }
  .bot-app-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bot-app-template-grid > button {
    padding: 10px;
  }
  .bot-app-template-grid strong {
    font-size: 11px;
  }
  .bot-app-composer {
    padding: 9px;
  }
  .bot-app-composer-input {
    gap: 4px;
  }
  .bot-app-composer-input > button {
    padding: 3px;
  }
  .bot-app-composer-options small {
    display: none;
  }
  .bot-app-composer textarea {
    font-size: 11px;
  }
  .bot-app-chat {
    padding: 20px 14px;
  }
  .bot-app-result dl > div {
    grid-template-columns: 80px 1fr;
    gap: 8px;
  }
  .bot-app-inspector {
    position: absolute;
    inset: 48px 0 0;
    width: 100%;
    z-index: 4;
  }
  .bot-app-page-lead {
    flex-wrap: wrap;
  }
  .bot-app-page-lead p {
    flex-basis: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bot-app * {
    animation: none !important;
    transition: none !important;
  }
}
/* File chip under a sample result (nested in the cloned result, so `.bot-app-result > button` misses it). */
.bot-app-result button[data-artifact] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* "Opens" arrow on file chips and the artifact list: an icon, centred like the rest. */
.bot-app-open-arrow {
  display: inline-flex;
  align-items: center;
}
.bot-app-open-arrow svg {
  width: 13px;
  height: 13px;
}
/* ---- Run motion, after the rewritten desktop renderer: the bubble lands, the bot types, tool lines arrive
   with an amber shimmer and settle green, the answer streams in, and the bot's face reacts throughout. ---- */
.bot-app-user-message {
  background: var(--chat-surface);
  border-radius: 20px 20px 6px 20px;
}
.bot-app-chat-inner.is-entering > .bot-app-user-message {
  animation: bot-app-bubble-in 0.5s var(--ease) both;
  transform-origin: 100% 100%;
}
.bot-app-chat-inner.is-entering > .bot-app-agent-heading {
  animation: bot-app-rise 0.32s var(--ease) 0.22s both;
}
/* Busy line: a 6px amber dot, a shimmering label; a green dot once done. */
.bot-app-agent-heading [data-run-status] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
}
.bot-app-chat-inner.is-live [data-run-status]::before,
.bot-app-chat-inner.is-finished [data-run-status]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-running);
  animation: bot-app-pulse 1.2s ease-in-out infinite;
}
.bot-app-chat-inner.is-finished [data-run-status]::before {
  background: var(--app-done);
  animation: bot-app-pop 0.4s var(--ease);
}
.bot-app-chat-inner.is-live [data-run-status],
.bot-app-chat-inner.is-live .bot-app-tool.is-working summary {
  --_base: var(--app-muted);
  --_hi: #fff;
  background-image: linear-gradient(110deg, var(--_base) calc(50% - 3ch - 40px), var(--_hi) 50%, var(--_base) calc(50% + 3ch + 40px));
  background-repeat: no-repeat;
  background-size: calc(200% + 6ch + 80px) 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bot-app-shimmer 2s linear infinite;
}
.bot-app-chat-inner.is-finished [data-run-status] {
  color: var(--app-done);
}
/* The bot's face: busy while it works, a hop when it is done (the desktop's bav-busy / bav-bounce moods). */
.bot-app-chat-inner.is-live .bot-app-agent-heading .bot-app-avatar {
  animation: bot-app-busy 0.9s ease-in-out infinite;
}
.bot-app-chat-inner.is-finished .bot-app-agent-heading .bot-app-avatar {
  animation: bot-app-bounce 0.6s var(--ease);
}
.bot-app-chat-inner:not(.is-live) .bot-app-agent-heading .bot-app-avatar {
  transform-origin: 50% 100%;
}
/* Typing: three bobbing dots in a reply bubble before the first tool line. */
.bot-app-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 14px;
  margin: 2px 0 8px;
  border-radius: 20px 20px 20px 6px;
  background: var(--chat-surface);
  color: var(--app-muted);
  animation: bot-app-rise 0.2s var(--ease) both;
}
.bot-app-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: bot-app-bob 1.2s ease-in-out infinite;
}
.bot-app-typing i:nth-child(2) { animation-delay: 0.15s; }
.bot-app-typing i:nth-child(3) { animation-delay: 0.3s; }
/* Tool lines: mono rows; a rail on the left fills amber → green as they complete. */
.bot-app-toolcalls {
  position: relative;
  --progress: 1;
}
.bot-app-tool summary {
  position: relative;
  z-index: 1;
  min-height: 28px;
  font-family: var(--app-mono);
  font-size: 11px;
  transition: color 0.2s ease;
}
.bot-app-chat-inner.is-live .bot-app-toolcalls::after,
.bot-app-chat-inner.is-finished .bot-app-toolcalls::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--app-running), var(--app-done)) 0 0 / 100% calc(var(--progress) * 100%) no-repeat,
    var(--app-border);
  transition: background-size 0.6s var(--ease);
  pointer-events: none;
}
.bot-app-chat-inner.is-live .bot-app-tool:not(.is-shown) {
  display: none;
}
.bot-app-chat-inner.is-live .bot-app-tool.is-shown {
  animation: bot-app-rise 0.24s var(--ease) both;
}
.bot-app-tool summary > span {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--app-bg);
  flex: none;
}
.bot-app-tool.is-working summary > span {
  border: 2px solid color-mix(in oklab, var(--app-running) 25%, transparent);
  border-top-color: var(--app-running);
  animation: bot-app-spin 0.8s linear infinite;
}
.bot-app-tool.is-done summary > span {
  background: var(--app-done);
  color: var(--app-bg);
  font-size: 10px;
  font-weight: 700;
  animation: bot-app-pop 0.4s var(--ease);
}
.bot-app-tool.is-done summary {
  color: var(--app-muted);
}
.bot-app-tool-time {
  margin-left: auto;
  color: var(--app-muted);
  font-family: var(--app-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  animation: bot-app-fade 0.3s ease both;
}
.bot-app-tool p {
  font-family: var(--app-mono);
  background: var(--chat-inset);
  border: 0;
  border-radius: 10px;
  margin: 4px 0 6px 24px;
  padding: 8px 12px;
}
/* Streamed answer: each new word fades in; a caret rides the end; rows, code and the file chip arrive in turn. */
.bot-app-result.is-streaming .is-typing::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.12em;
  border-radius: 2px;
  background: var(--app-running);
  animation: bot-app-caret 0.8s steps(1) infinite;
}
.bot-app-result.is-streaming dl > div:not(.is-in),
.bot-app-result.is-streaming pre:not(.is-in),
.bot-app-result.is-streaming button[data-artifact]:not(.is-in),
.bot-app-result.is-streaming [data-approval]:not(.is-in) {
  opacity: 0;
  transform: translateY(6px);
}
.bot-app-result dl > div,
.bot-app-result pre,
.bot-app-result [data-approval],
.bot-app-result button[data-artifact] {
  transition: opacity 0.24s ease-out, transform 0.24s var(--ease);
}
.bot-app-result dl {
  background: var(--chat-surface-2);
  border: 0;
  border-radius: 12px;
}
.bot-app-result pre {
  background: var(--chat-inset);
  font-family: var(--app-mono);
  border-radius: 10px;
}
.bot-app-chat-inner.is-finished .bot-app-result button[data-artifact] {
  animation: bot-app-glow 1.6s ease 0.2s 2;
}
.bot-app-chat-inner.is-finished .bot-app-chat-controls {
  animation: bot-app-rise 0.32s var(--ease) both;
}
/* Page switches slide in from the right, like the desktop's drill transition. */
.bot-app-page:not([hidden]) {
  animation: bot-app-page-in 0.24s var(--ease) both;
}
.bot-app .is-pressed {
  transform: scale(0.96);
  transition: transform 0.12s ease;
}
.bot-app-starters > button,
.bot-app-tree-item,
.bot-app-template-grid > button {
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s var(--ease), box-shadow 0.16s ease;
}
.bot-app-starters > button:hover {
  transform: translateY(-2px);
}
/* Composer: the renderer's single pill — attach, mic, a borderless input and a round send button all inside it.
   Focus lights the pill, not the textarea; so does the autoplay cursor while it types. */
.bot-app-composer-input {
  min-height: 52px;
  padding: 6px 6px 6px 8px;
  gap: 4px;
  background: var(--chat-surface);
  border-radius: 999px;
  transition: box-shadow 0.24s var(--ease);
}
.bot-app-composer-input > button:not(.bot-app-send) {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--app-muted);
}
.bot-app-composer-input > button:not(.bot-app-send):hover {
  background: oklch(1 0 0 / 6%);
  color: #fff;
}
.bot-app-composer textarea {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 36px;
  padding: 9px 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  color: inherit;
  line-height: 18px;
}
.bot-app-composer textarea:focus-visible {
  outline: none;
  box-shadow: none;
}
.bot-app-composer-input:focus-within,
.bot-app-composer.is-typing .bot-app-composer-input {
  box-shadow: 0 0 0 1px var(--app-border), 0 0 0 4px oklch(1 0 0 / 6%);
}
.bot-app-composer .bot-app-send {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transition: background-color 0.16s ease, transform 0.16s var(--ease);
}
.bot-app-composer .bot-app-send svg {
  width: 16px;
  height: 16px;
}
/* Bubbles hug their text, as in the app. */
.bot-app-user-message {
  width: fit-content;
}
.bot-app-turn > .bot-app-user-message {
  animation: bot-app-bubble-in 0.5s var(--ease) both;
  transform-origin: 100% 100%;
}
.bot-app-turn > .bot-app-agent-heading {
  animation: bot-app-rise 0.32s var(--ease) 0.2s both;
}
/* A free-typed message gets a reply bubble: typing dots first, then the reply. */
.bot-app-turn-reply {
  width: fit-content;
  max-width: 85%;
  padding: 9px 14px;
  border-radius: 20px 20px 20px 6px;
  background: var(--chat-surface);
  animation: bot-app-fade 0.2s ease both;
}
.bot-app-turn-reply:empty {
  width: 62px;
  height: 34px;
  background:
    radial-gradient(circle, var(--app-muted) 60%, transparent 64%) 17px 50% / 6px 6px no-repeat,
    radial-gradient(circle, var(--app-muted) 60%, transparent 64%) 28px 50% / 6px 6px no-repeat,
    radial-gradient(circle, var(--app-muted) 60%, transparent 64%) 39px 50% / 6px 6px no-repeat,
    var(--chat-surface);
  animation: bot-app-typing-dots 1.2s ease-in-out infinite;
}
@keyframes bot-app-typing-dots {
  0%, 100% { background-position: 17px 50%, 28px 50%, 39px 50%, 0 0; }
  20% { background-position: 17px 35%, 28px 50%, 39px 50%, 0 0; }
  40% { background-position: 17px 50%, 28px 35%, 39px 50%, 0 0; }
  60% { background-position: 17px 50%, 28px 50%, 39px 35%, 0 0; }
}
.bot-app-composer.is-typing .bot-app-send {
  background: var(--app-primary);
  transform: scale(1.06);
}
/* The autoplay cursor, with the desktop tour's spotlight ring on what it clicks. */
.bot-app-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  width: 22px;
  height: 22px;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
}
.bot-app-cursor.is-shown {
  opacity: 1;
}
.bot-app-cursor svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  stroke: #111;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 45%));
}
.bot-app-cursor::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  opacity: 0;
}
.bot-app-cursor.is-click::before {
  animation: bot-app-ripple 0.55s ease-out;
}
.bot-app.is-touring .is-pressed {
  box-shadow: 0 0 0 2px var(--app-primary);
}
@keyframes bot-app-bubble-in {
  from { opacity: 0; transform: translateY(22px) scale(0.94); }
}
@keyframes bot-app-rise {
  from { opacity: 0; transform: translateY(4px); }
}
@keyframes bot-app-fade {
  from { opacity: 0; }
}
@keyframes bot-app-page-in {
  from { opacity: 0; transform: translateX(12px); }
}
@keyframes bot-app-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@keyframes bot-app-pulse {
  50% { opacity: 0.35; transform: scale(0.8); }
}
@keyframes bot-app-busy {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-6%) rotate(-4deg); }
  75% { transform: translateY(-6%) rotate(4deg); }
}
@keyframes bot-app-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-14%) scale(0.96, 1.06); }
  55% { transform: translateY(0) scale(1.06, 0.94); }
}
@keyframes bot-app-bob {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 1; }
}
@keyframes bot-app-pop {
  0% { transform: scale(0.4); }
  70% { transform: scale(1.18); }
}
@keyframes bot-app-spin {
  to { transform: rotate(360deg); }
}
@keyframes bot-app-caret {
  50% { opacity: 0; }
}
@keyframes bot-app-glow {
  50% { box-shadow: 0 0 0 3px oklch(1 0 0 / 14%), 0 0 22px oklch(1 0 0 / 12%); }
}
@keyframes bot-app-ripple {
  from { opacity: 0.9; transform: scale(0.3); }
  to { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .bot-app-cursor { display: none; }
}
/* ==== App shell, as in the rewritten desktop renderer: title bar, rail, an area sidebar on the shell surface,
   and the content pane as an inset card. Faces are drawn, not images. ==== */
.bot-app {
  --rail-w: 64px;
  --side-w: 264px;
  --shell: oklch(0.2 0 0);
  --pane: oklch(0.145 0 0);
  --accent-row: oklch(0.269 0 0);
  grid-template-columns: var(--rail-w) var(--side-w) minmax(0, 1fr);
  grid-template-rows: 44px minmax(0, 1fr);
  background: var(--shell);
  border-color: oklch(1 0 0 / 12%);
  font-size: 13px;
}
.bot-app[data-area="artifacts"],
.bot-app[data-area="library"],
.bot-app.is-sidebar-hidden {
  --side-w: 0px;
  grid-template-columns: var(--rail-w) var(--side-w) minmax(0, 1fr);
}
.bot-app .bot-app-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--app-muted);
}
.bot-app .bot-app-icon-btn:hover {
  background: oklch(1 0 0 / 7%);
  color: #fff;
}
/* Title bar */
.bot-app-titlebar {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 0 16px;
  min-width: 0;
}
.bot-app-lights {
  display: inline-flex;
  gap: 8px;
}
.bot-app-lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
}
.bot-app-lights i:nth-child(2) { background: #febc2e; }
.bot-app-lights i:nth-child(3) { background: #28c840; }
.bot-app-history {
  display: inline-flex;
  gap: 10px;
  margin-left: 10px;
  color: oklch(0.5 0 0);
}
.bot-app-history svg {
  width: 16px;
  height: 16px;
}
.bot-app-identity {
  position: absolute;
  left: max(200px, calc(var(--rail-w) + var(--side-w) + 18px));
  right: 90px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
  transition: left 0.24s var(--ease);
}
.bot-app-identity strong {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-app-title-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--app-muted);
  font-size: 12px;
  animation: bot-app-fade 0.2s ease;
}
.bot-app-title-status::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-running);
  animation: bot-app-pulse 1.2s ease-in-out infinite;
}
.bot-app-title-status.is-done::before {
  background: var(--app-done);
  animation: none;
}
.bot-app-titlebar .bot-app-topbar-actions {
  margin-left: auto;
  gap: 4px;
}
/* Rail */
.bot-app-rail {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0 12px;
  min-height: 0;
}
.bot-app .bot-app-rail > button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 56px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--app-muted);
  font-size: 10px;
  font-weight: 500;
  text-align: center;
}
.bot-app .bot-app-rail > button > svg {
  box-sizing: content-box;
  width: 19px;
  height: 19px;
  padding: 6px 9px;
  border-radius: 10px;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.bot-app .bot-app-rail > button:hover > svg {
  background: oklch(1 0 0 / 6%);
}
.bot-app .bot-app-rail > button[aria-current="page"] {
  color: #fff;
}
.bot-app .bot-app-rail > button[aria-current="page"] > svg {
  background: var(--accent-row);
}
.bot-app-rail-gap {
  flex: 1;
}
.bot-app .bot-app-rail > .bot-app-rail-me > svg {
  padding: 7px;
  border-radius: 50%;
  background: var(--accent-row);
  color: #fff;
}
/* Sidebar: one list per area, flush on the shell surface. */
.bot-app .bot-app-sidebar {
  grid-column: 2;
  grid-row: 2;
  background: none;
  border: 0;
  padding: 0 8px 10px 4px;
  overflow: hidden;
}
.bot-app[data-area="artifacts"] .bot-app-sidebar,
.bot-app[data-area="library"] .bot-app-sidebar {
  display: none;
}
.bot-app-side {
  display: none;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  animation: bot-app-page-in 0.2s var(--ease);
}
.bot-app[data-area="bots"] [data-side="bots"],
.bot-app[data-area="sessions"] [data-side="sessions"],
.bot-app[data-area="routines"] [data-side="routines"] {
  display: flex;
}
.bot-app-side-head {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding-left: 8px;
}
.bot-app-side-head strong {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}
.bot-app-side-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bot-app .bot-app-tree-item {
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 13px;
  color: oklch(0.92 0 0);
}
.bot-app .bot-app-tree-item:hover {
  background: color-mix(in oklab, var(--accent-row) 60%, transparent);
}
.bot-app .bot-app-tree-item.is-selected {
  background: var(--accent-row);
}
.bot-app .bot-app-bot-row {
  min-height: 56px;
  gap: 10px;
  border-radius: 11px;
}
.bot-app-bot-row.is-static {
  cursor: default;
  display: flex;
  align-items: center;
}
.bot-app-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 1px;
}
.bot-app-row-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.bot-app-row-line > span {
  flex: 1;
  font-weight: 500;
}
.bot-app-row-line small {
  flex: none;
  color: var(--app-muted);
  font-size: 11px;
}
.bot-app .bot-app-row-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--app-muted);
  font-size: 12px;
}
.bot-app-unread {
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: #e879f9;
}
.bot-app-side-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 14px 8px 4px !important;
  color: var(--app-muted);
  font-size: 12px;
}
.bot-app-side-label:first-child {
  margin-top: 4px !important;
}
.bot-app-side-label svg {
  width: 15px;
  height: 15px;
}
.bot-app-side-label small {
  margin-left: auto;
  font-size: 11px;
}
.bot-app .bot-app-nested {
  padding-left: 30px;
}
.bot-app-session-dot {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--app-done);
  flex: none;
}
.bot-app .bot-app-side-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--app-muted);
}
.bot-app .bot-app-side-foot.is-filled {
  background: color-mix(in oklab, var(--accent-row) 70%, transparent);
  color: #fff;
}
.bot-app .bot-app-side-foot:hover {
  background: var(--accent-row);
  color: #fff;
}
.bot-app .bot-app-side-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px;
  padding: 0 12px;
  height: 34px;
  border-radius: 10px;
  background: var(--accent-row);
  color: var(--app-muted);
}
.bot-app .bot-app-side-search input {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
}
.bot-app .bot-app-side-stats {
  display: flex;
  gap: 14px;
  margin: 0 8px 10px;
  color: var(--app-muted);
  font-size: 12px;
}
.bot-app-side-stats b {
  color: #fff;
  font-weight: 600;
}
.bot-app-state {
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: oklch(0.5 0 0);
}
.bot-app-state.is-done { background: var(--app-done); }
.bot-app-state.is-running { background: var(--app-running); animation: bot-app-pulse 1.2s ease-in-out infinite; }
.bot-app-state.is-failed { background: oklch(0.7 0.19 22); }
.bot-app-channel {
  border-radius: 5px;
  margin-left: auto;
}
/* The pane */
.bot-app .bot-app-workspace {
  grid-column: 3;
  grid-row: 2;
  margin: 0 8px 8px 0;
  border-radius: 12px;
  background: var(--pane);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 6%);
  overflow: hidden;
}
.bot-app[data-area="artifacts"] .bot-app-workspace,
.bot-app[data-area="library"] .bot-app-workspace,
.bot-app.is-sidebar-hidden .bot-app-workspace {
  grid-column: 2 / -1;
}
.bot-app .bot-app-composer {
  border-top: 0;
}
/* Drawn faces: a glossy blob, two blinking eyes, a small mouth and cheeks (the app's bav avatar). */
.bav {
  --s: 36px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--s);
  height: var(--s);
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
  background:
    radial-gradient(120% 120% at 30% 25%, rgb(255 255 255 / 55%), transparent 45%),
    radial-gradient(circle at 24% 62%, rgb(255 143 171 / 50%) 0 7%, transparent 8%),
    radial-gradient(circle at 76% 62%, rgb(255 143 171 / 50%) 0 7%, transparent 8%),
    var(--bav-color, #a1a1aa);
  box-shadow:
    inset 0 calc(var(--s) * -0.06) calc(var(--s) * 0.12) rgb(0 0 0 / 18%),
    0 calc(var(--s) * 0.04) calc(var(--s) * 0.12) color-mix(in oklab, var(--bav-color, #a1a1aa) 40%, transparent);
  animation: bav-blob 9s ease-in-out infinite;
}
.bav[hidden] {
  display: none;
}
.bav-sm { --s: 22px; }
.bav-lg { --s: 52px; animation: bav-blob 9s ease-in-out infinite, bav-float 3s ease-in-out infinite; }
.bot-app-agent-heading .bav { --s: 26px; }
.bav-face {
  position: absolute;
  inset: 0;
}
.bav-face::before {
  content: "";
  position: absolute;
  left: 33%;
  top: 40%;
  width: 11%;
  height: 13%;
  border-radius: 50%;
  background: #17171a;
  box-shadow: calc(var(--s) * 0.23) 0 0 #17171a;
  transform-origin: 50% 50%;
  animation: bav-blink 4.2s infinite;
}
.bav-face::after {
  content: "";
  position: absolute;
  left: 43%;
  top: 59%;
  width: 15%;
  height: 7%;
  border-radius: 0 0 99px 99px;
  background: #17171a;
}
.bav.is-asleep {
  filter: saturate(0.55) brightness(0.85);
}
.bav.is-asleep .bav-face::before {
  height: 4%;
  top: 46%;
  animation: none;
}
/* Moods: busy while a run works, a hop when it lands. */
.bot-app:has(.bot-app-chat-inner.is-live) [data-title-avatar],
.bot-app-chat-inner.is-live [data-agent-avatar] {
  animation: bav-blob 9s ease-in-out infinite, bav-busy 0.9s ease-in-out infinite;
}
.bot-app:has(.bot-app-chat-inner.is-live) [data-title-avatar] .bav-face::before {
  animation: bav-dart 1.6s ease-in-out infinite;
}
.bot-app:has(.bot-app-chat-inner.is-finished) [data-title-avatar] {
  animation: bav-blob 9s ease-in-out infinite, bav-bounce 0.6s var(--ease);
}
@keyframes bav-blob {
  0%, 100% { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; }
  33% { border-radius: 56% 44% 42% 58% / 44% 58% 42% 56%; }
  66% { border-radius: 42% 58% 56% 44% / 58% 44% 52% 48%; }
}
@keyframes bav-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}
@keyframes bav-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-4%) rotate(1.5deg); }
}
@keyframes bav-busy {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-3%) rotate(-2deg); }
  75% { transform: translateY(-3%) rotate(2deg); }
}
@keyframes bav-dart {
  0%, 100% { translate: 0 0; }
  20% { translate: -14% -6%; }
  45% { translate: 14% -4%; }
  70% { translate: -6% 8%; }
}
@keyframes bav-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(-10%) scale(0.96, 1.06); }
  55% { transform: translateY(0) scale(1.06, 0.94); }
}
/* Bot chats: accent-coloured user bubbles, the reply in surface bubbles, "On it." first, the live step as a busy line. */
.bot-app-ack-bubble {
  display: none;
}
.bot-app[data-skin="bot"] .bot-app-agent-heading {
  display: none;
}
.bot-app[data-skin="bot"] .bot-app-user-message {
  background: var(--bot-accent);
  color: oklch(0.2 0.03 150);
  border-radius: 20px 20px 6px 20px;
  font-weight: 500;
}
.bot-app[data-skin="bot"] .bot-app-ack-bubble,
.bot-app[data-skin="bot"] [data-sample-result] > h4,
.bot-app[data-skin="bot"] [data-sample-result] > p,
.bot-app[data-skin="bot"] .bot-app-turn-reply {
  display: block;
  width: fit-content;
  max-width: 85%;
  margin: 0 0 6px;
  padding: 9px 14px;
  border-radius: 20px 20px 20px 6px;
  background: var(--chat-surface);
  color: #fafafa;
  font-size: 13px;
  line-height: 1.5;
}
.bot-app[data-skin="bot"] [data-sample-result] > h4 {
  font-weight: 600;
}
.bot-app[data-skin="bot"] .bot-app-chat-inner.is-entering .bot-app-ack-bubble {
  animation: bot-app-rise 0.3s var(--ease) 0.45s both;
}
.bot-app[data-skin="bot"] .bot-app-toolcalls::after,
.bot-app[data-skin="bot"] .bot-app-tool {
  display: none !important;
}
.bot-app[data-skin="bot"] .bot-app-chat-inner.is-live .bot-app-tool.is-working {
  display: block !important;
  padding: 2px 0 8px;
}
.bot-app[data-skin="bot"] .bot-app-tool.is-working summary {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
}
.bot-app[data-skin="bot"] .bot-app-tool.is-working summary > span {
  width: 6px;
  height: 6px;
  border: 0;
  background: var(--app-running);
  animation: bot-app-pulse 1.2s ease-in-out infinite;
}
.bot-app[data-skin="bot"] [data-sample-result] > dl {
  max-width: 85%;
  margin: 2px 0 8px;
  border-radius: 16px;
  background: var(--chat-surface-2);
}
.bot-app[data-skin="bot"] .bot-app-result button[data-artifact] {
  display: flex;
  gap: 12px;
  width: fit-content;
  min-width: 240px;
  margin: 2px 0 10px;
  padding: 9px 16px 9px 9px;
  border: 0;
  border-radius: 14px;
  background: var(--chat-surface);
  font-size: 13px;
  font-weight: 600;
}
.bot-app[data-skin="bot"] .bot-app-result button[data-artifact] > svg {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 9px;
  border-radius: 9px;
  background: #3b82f6;
  color: #fff;
}
.bot-app[data-skin="bot"] .bot-app-send {
  background: var(--bot-accent);
  color: oklch(0.2 0.03 150);
}
/* Approval card: the draft, and Send / Edit / Discard — nothing goes out without a yes. */
.bot-app-approval {
  max-width: 85%;
  margin: 6px 0 4px;
  padding: 16px;
  border-radius: 20px;
  background: var(--chat-surface);
  transition: opacity 0.3s ease;
}
.bot-app-approval-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bot-app-approval-head img {
  border-radius: 5px;
}
.bot-app-approval-head strong {
  font-size: 13px;
  font-weight: 600;
}
.bot-app-approval-head small {
  margin-left: auto;
  color: var(--app-muted);
  font-size: 11px;
}
.bot-app .bot-app-approval-body {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--chat-inset);
  color: #e5e5e5;
  outline: none;
}
.bot-app .bot-app-approval-body[contenteditable="true"] {
  box-shadow: 0 0 0 1px oklch(1 0 0 / 18%);
}
.bot-app-approval-actions {
  display: flex;
  gap: 8px;
}
.bot-app .bot-app-pill {
  height: 32px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-row);
  font-size: 12px;
  font-weight: 500;
}
.bot-app .bot-app-pill.is-primary {
  background: #fafafa;
  color: #111;
}
.bot-app .bot-app-pill.is-ghost {
  background: none;
}
.bot-app .bot-app-pill:hover {
  filter: brightness(1.15);
}
.bot-app-approval-done {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  color: var(--app-done);
  font-size: 12px;
  animation: bot-app-rise 0.25s var(--ease);
}
.bot-app-approval-done::before {
  content: "✓";
}
.bot-app-approval.is-discarded {
  opacity: 0.55;
}
.bot-app-approval.is-discarded .bot-app-approval-done {
  color: var(--app-muted);
}
/* Routine detail */
.bot-app-routine-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bot-app-routine-head > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.bot-app .bot-app-routine-head h3 {
  margin: 0 0 2px;
  font-size: 21px;
}
.bot-app .bot-app-routine-head p {
  margin: 0;
  font-size: 12px;
}
.bot-app .bot-app-routine-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bot-app .bot-app-routine-actions > button:not(.bot-app-switch) {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: var(--accent-row);
  font-size: 12px;
}
.bot-app-routine-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 18px;
}
.bot-app-routine-cards > div {
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--chat-surface-2);
}
.bot-app-routine-cards small {
  display: block;
  color: var(--app-muted);
  font-size: 11px;
}
.bot-app-routine-cards strong {
  font-size: 13px;
  font-weight: 600;
}
.bot-app .bot-app-routine-label {
  margin: 0 0 8px;
  color: var(--app-muted);
  font-size: 12px;
}
.bot-app-routine-label b {
  color: #fff;
  margin-right: 6px;
}
.bot-app .bot-app-routine-instruction {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--chat-surface-2);
  line-height: 1.6;
}
.bot-app-runs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bot-app-run,
.bot-app [data-run-history] > button {
  display: grid;
  grid-template-columns: 100px 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 !important;
  padding: 10px 14px;
  border: 0;
  border-radius: 11px;
  background: none;
  font-size: 12px;
}
.bot-app-run.is-empty {
  display: block;
  color: var(--app-muted);
}
.bot-app [data-run-history] > button {
  display: flex;
  background: var(--chat-surface-2);
  color: var(--app-done);
  animation: bot-app-rise 0.3s var(--ease);
}
.bot-app [data-run-history] > button::before,
.bot-app-run-state::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
}
.bot-app-run.is-done .bot-app-run-state { color: var(--app-done); }
.bot-app-run.is-failed .bot-app-run-state { color: oklch(0.7 0.19 22); }
.bot-app-run > span:nth-child(2) { color: var(--app-muted); }
.bot-app-run small { color: var(--app-muted); }
/* Create-routine sheet: segmented schedule, inline time, run-by and folder side by side, delivery toggle. */
.bot-app .bot-app-sheet {
  width: 580px;
  padding: 22px 24px;
  border: 0;
  border-radius: 20px;
  background: oklch(0.205 0 0);
  box-shadow: 0 30px 80px rgb(0 0 0 / 55%);
  animation: bot-app-rise 0.24s var(--ease);
}
.bot-app-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.bot-app .bot-app-sheet-head h3 {
  margin: 0;
  font-size: 17px;
}
.bot-app .bot-app-sheet input:not([type="checkbox"]):not([type="radio"]),
.bot-app .bot-app-sheet textarea,
.bot-app .bot-app-sheet select {
  border: 0;
  border-radius: 11px;
  background: var(--chat-surface-2);
}
.bot-app .bot-app-segmented {
  display: flex;
  gap: 2px;
  margin: 0 0 12px;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: var(--chat-surface-2);
}
.bot-app .bot-app-segmented label {
  flex: 1;
  margin: 0;
  cursor: pointer;
}
.bot-app .bot-app-segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bot-app-segmented span {
  display: block;
  padding: 7px 4px;
  border-radius: 9px;
  color: var(--app-muted);
  font-size: 12px;
  text-align: center;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.bot-app-segmented input:checked + span {
  background: oklch(0.32 0 0);
  color: #fff;
  font-weight: 500;
}
.bot-app-segmented input:focus-visible + span {
  outline: 2px solid var(--app-primary);
}
.bot-app-sheet-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.bot-app .bot-app-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.bot-app .bot-app-inline input {
  width: auto !important;
  margin: 0 !important;
}
.bot-app .bot-app-sheet-row p {
  margin: 0;
}
.bot-app-sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bot-app .bot-app-deliver {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--chat-surface-2);
}
.bot-app-deliver img {
  border-radius: 5px;
}
.bot-app .bot-app-runonce {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.bot-app-sheet-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.bot-app .bot-app-sheet-foot p {
  flex: 1;
  margin: 0;
  line-height: 1.6;
}
.bot-app .bot-app-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--app-muted);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-color: oklch(1 0 0 / 25%);
  text-underline-offset: 3px;
}
.bot-app .bot-app-link:hover {
  color: #fff;
}
.bot-app .bot-app-sheet-foot > button:not(.bot-app-link) {
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
}
.bot-app .bot-app-sheet-foot .bot-app-primary {
  background: #fafafa;
  color: #111;
}
@media (max-width: 1000px) {
  .bot-app {
    --side-w: 220px;
  }
  .bot-app-history {
    display: none;
  }
}
@media (max-width: 650px) {
  .bot-app,
  .bot-app[data-area] {
    --rail-w: 0px;
    --side-w: 0px;
    grid-template-columns: 0 0 minmax(0, 1fr);
  }
  .bot-app .bot-app-rail {
    display: none;
  }
  .bot-app .bot-app-workspace {
    grid-column: 1 / -1;
    margin: 0;
    border-radius: 0;
  }
  .bot-app-identity {
    left: 104px;
    right: 70px;
  }
  .bot-app.is-sidebar-open .bot-app-rail {
    display: flex;
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 0;
    width: 64px;
    z-index: 11;
    background: var(--shell);
  }
  .bot-app.is-sidebar-open .bot-app-sidebar {
    display: flex;
    left: 64px;
    top: 44px;
    width: 240px;
    background: var(--shell);
  }
  .bot-app-routine-cards {
    grid-template-columns: 1fr;
  }
  .bot-app-run {
    grid-template-columns: 90px minmax(0, 1fr);
  }
  .bot-app-run > :nth-child(2),
  .bot-app-run small {
    display: none;
  }
  .bot-app-segmented {
    flex-wrap: wrap;
  }
  .bot-app-sheet-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bav,
  .bav-face::before {
    animation: none !important;
  }
}
/* ==== App screens: title-bar brand, Settings (General, Connectors), Bots home, the centred new-session composer,
   the session composer card and context strip, run lines ("done" / "runs"), busy line, changes card. ==== */
.bot-app .bot-app-brandname {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.bot-app.is-sidebar-hidden .bot-app-brandname,
.bot-app[data-area="artifacts"] .bot-app-brandname,
.bot-app[data-area="library"] .bot-app-brandname {
  display: none;
}
.bot-app-crumb {
  color: var(--app-muted);
  font-size: 13px;
}
.bot-app-crumb[hidden] {
  display: none;
}
.bot-app[data-area="settings"] [data-side="settings"] {
  display: flex;
}
.bot-app [data-side="settings"] .bot-app-tree-item {
  min-height: 34px;
  padding: 7px 10px;
}
.bot-app [data-side="settings"] .bot-app-side-label {
  margin-top: 16px !important;
}
.bot-app .bot-app-tree-item.is-selected {
  background: var(--accent-row);
}
/* Settings pages: a centred column of grouped cards. */
.bot-app .bot-app-settings {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 32px 48px;
}
.bot-app .bot-app-settings h3 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bot-app .bot-app-set-lead {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
}
.bot-app .bot-app-set-label {
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 600;
}
.bot-app-set-card {
  border-radius: 16px;
  background: var(--chat-surface-2);
  overflow: hidden;
}
.bot-app-settings h3 + .bot-app-set-card {
  margin-top: 22px;
}
.bot-app .bot-app-set-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  margin: 0;
  padding: 12px 18px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
}
.bot-app .bot-app-set-row + .bot-app-set-row {
  border-top: 1px solid oklch(1 0 0 / 6%);
}
.bot-app-set-row > div {
  flex: 1;
  min-width: 0;
}
.bot-app-set-row strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.bot-app-set-row small {
  display: block;
  margin-top: 2px;
  color: var(--app-muted);
  font-size: 12px;
}
.bot-app .bot-app-set-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--accent-row);
  font-size: 13px;
}
.bot-app .bot-app-set-select svg {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}
.bot-app .bot-app-mode-row:hover {
  background: oklch(1 0 0 / 3%);
}
.bot-app-mode-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px oklch(1 0 0 / 25%);
}
.bot-app-mode-row[aria-checked="true"] .bot-app-mode-check {
  box-shadow: inset 0 0 0 5px var(--app-done);
}
.bot-app .bot-app-switch[aria-checked="true"] {
  background: var(--app-done);
}
/* Connectors */
.bot-app .bot-app-cap-tabs {
  display: none;
}
.bot-app .bot-app-settings .bot-app-search {
  margin: 0 0 14px;
}
.bot-app-conn-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bot-app .bot-app-conn-cats button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--chat-surface-2);
  color: var(--app-muted);
  font-size: 13px;
}
.bot-app .bot-app-conn-cats button[aria-selected="true"] {
  background: var(--accent-row);
  color: #fff;
  font-weight: 500;
}
.bot-app .bot-app-connector {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 0;
  border-radius: 0;
  background: none;
}
.bot-app [data-connected-list] .bot-app-connector + .bot-app-connector {
  border-top: 1px solid oklch(1 0 0 / 6%);
}
.bot-app-connector.is-new {
  animation: bot-app-rise 0.35s var(--ease);
}
.bot-app .bot-app-connector > img {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 7px;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
}
.bot-app-connector > div {
  flex: 1;
  min-width: 0;
}
.bot-app .bot-app-connector strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.bot-app .bot-app-connector p {
  margin: 1px 0 0;
  color: var(--app-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-app-conn-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--app-done);
  font-size: 12px;
  white-space: nowrap;
}
.bot-app-conn-state::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.bot-app-connector.is-reconnect .bot-app-conn-state {
  color: var(--app-running);
}
.bot-app-conn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bot-app .bot-app-conn-grid .bot-app-connector {
  border-radius: 14px;
  background: var(--chat-surface-2);
}
.bot-app .bot-app-conn-grid .bot-app-connector[hidden] {
  display: none;
}
/* Faces: sizes and shapes. */
.bav-xs { --s: 22px; }
.bav-xl { --s: 112px; }
.bav.is-round { border-radius: 50%; animation: none; }
.bav.is-squircle { border-radius: 32%; animation: none; }
.bav.is-cloud { border-radius: 48% 52% 50% 50% / 60% 60% 40% 40%; animation: none; }
.bav.is-star { border-radius: 0; animation: none; clip-path: polygon(50% 2%, 63% 34%, 98% 36%, 71% 58%, 80% 94%, 50% 75%, 20% 94%, 29% 58%, 2% 36%, 37% 34%); }
.bav.is-heart { border-radius: 0; animation: none; clip-path: polygon(50% 95%, 8% 55%, 2% 32%, 12% 12%, 32% 6%, 50% 22%, 68% 6%, 88% 12%, 98% 32%, 92% 55%); }
.bav.is-flower { border-radius: 0; animation: none; clip-path: polygon(50% 0, 64% 18%, 86% 14%, 82% 36%, 100% 50%, 82% 64%, 86% 86%, 64% 82%, 50% 100%, 36% 82%, 14% 86%, 18% 64%, 0 50%, 18% 36%, 14% 14%, 36% 18%); }
.bav.is-diamond { border-radius: 0; animation: none; clip-path: polygon(50% 100%, 0 38%, 20% 8%, 80% 8%, 100% 38%); }
/* Bots home */
.bot-app .bot-app-bots-home {
  max-width: 820px;
  margin: 0 auto;
  padding: 34px 28px 40px;
  text-align: center;
}
.bot-app-hero-face {
  position: relative;
  display: inline-block;
  margin-bottom: 22px;
}
.bot-app-hero-face .bav {
  transition: border-radius 0.3s var(--ease), clip-path 0.3s var(--ease), background-color 0.3s ease;
}
.bot-app-sparkle {
  position: absolute;
  top: -4px;
  right: -16px;
  width: 20px;
  height: 20px;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: bot-app-twinkle 2.4s ease-in-out infinite;
}
@keyframes bot-app-twinkle {
  50% { transform: scale(0.6) rotate(45deg); opacity: 0.6; }
}
.bot-app-shapes {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}
.bot-app .bot-app-shapes button {
  padding: 4px;
  border: 0;
  border-radius: 10px;
  background: none;
}
.bot-app-shapes .bav {
  --bav-color: #71717a;
}
.bot-app .bot-app-shapes button[aria-checked="true"] {
  background: var(--accent-row);
}
.bot-app-shapes button[aria-checked="true"] .bav {
  --bav-color: #c084fc;
}
.bot-app .bot-app-name-pill {
  display: flex;
  align-items: center;
  max-width: 520px;
  margin: 0 auto 36px;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  background: var(--chat-surface);
}
.bot-app .bot-app-name-pill input {
  flex: 1;
  margin: 0;
  padding: 8px 0;
  border: 0;
  background: none;
  text-align: center;
  font-size: 15px;
}
.bot-app .bot-app-name-pill .bot-app-send {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--app-primary);
  color: #1b0820;
}
.bot-app-templates-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  text-align: left;
  color: var(--app-muted);
  font-size: 13px;
}
.bot-app .bot-app-templates-head .bot-app-categories {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 4px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--chat-surface-2);
  scrollbar-width: none;
}
.bot-app .bot-app-templates-head .bot-app-categories button {
  flex: none;
  height: 30px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--app-muted);
  font-size: 12px;
  white-space: nowrap;
}
.bot-app .bot-app-templates-head .bot-app-categories button[aria-selected="true"] {
  background: var(--accent-row);
  color: #fff;
}
.bot-app .bot-app-template-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  text-align: left;
}
.bot-app .bot-app-template-grid > button {
  min-height: 0;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  background: var(--chat-surface-2);
  transition: background-color 0.16s ease, transform 0.16s var(--ease);
}
.bot-app .bot-app-template-grid > button:hover {
  background: var(--chat-surface);
  transform: translateY(-2px);
}
.bot-app .bot-app-template-grid > button > span {
  gap: 10px;
}
.bot-app .bot-app-template-grid strong {
  font-size: 14px;
}
.bot-app .bot-app-template-grid p {
  margin-top: 10px;
  font-size: 12px;
  -webkit-line-clamp: 2;
}
.bot-app-template-tools {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--app-muted);
  font-size: 11px;
}
.bot-app-template-tools i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.bot-app-template-tools i + i {
  margin-right: 3px;
}
/* New session: heading, the composer centred under it, starters below. */
.bot-app .bot-app-session {
  align-items: flex-start;
  padding: 72px 28px 32px;
}
.bot-app .bot-app-session-welcome h3 {
  margin: 0 0 24px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.bot-app-composer-slot .bot-app-composer {
  padding: 0;
  text-align: left;
}
.bot-app-starters-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 30px 0 10px;
  color: var(--app-muted);
  font-size: 12px;
}
.bot-app .bot-app-starters > button {
  min-height: 0;
  padding: 14px;
  border: 0;
  border-radius: 14px;
  background: var(--chat-surface-2);
}
.bot-app .bot-app-starters i {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--tile);
  color: oklch(0.2 0 0);
}
.bot-app .bot-app-starters i svg {
  width: 14px;
  height: 14px;
}
.bot-app .bot-app-starters p {
  margin-top: 8px;
  -webkit-line-clamp: 2;
}
/* Composer card: the prompt on top, then + · mode on the left and model · mic · send on the right; a context strip under it.
   In a bot chat it folds into a one-line pill: + · prompt · send. */
.bot-app .bot-app-composer {
  padding: 0 22px 16px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.bot-app-composer-box {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto auto;
  grid-template-areas:
    "text text text text text text text"
    "add mode note . model mic send";
  align-items: center;
  gap: 6px;
  padding: 12px 10px 10px 14px;
  border-radius: 22px;
  background: var(--chat-surface);
  transition: box-shadow 0.24s var(--ease);
}
.bot-app-composer-box:focus-within,
.bot-app-composer.is-typing .bot-app-composer-box {
  box-shadow: 0 0 0 1px var(--app-border), 0 0 0 4px oklch(1 0 0 / 5%);
}
.bot-app .bot-app-composer-box textarea {
  grid-area: text;
  min-height: 40px;
  height: auto;
  max-height: 120px;
  padding: 2px 4px 10px;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  outline: none;
  box-shadow: none;
}
.bot-app .bot-app-composer-box > button {
  display: inline-grid;
  place-items: center;
  height: 34px;
  min-width: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--app-muted);
  font-size: 12px;
}
.bot-app .bot-app-composer-box > button:hover {
  background: oklch(1 0 0 / 7%);
  color: #fff;
}
.bot-app-c-add { grid-area: add; }
.bot-app-c-note { grid-area: note; color: var(--app-muted); font-size: 11px; }
.bot-app-c-model { grid-area: model; color: #fff !important; }
.bot-app-c-mic { grid-area: mic; }
.bot-app .bot-app-composer-box .bot-app-send {
  grid-area: send;
  width: 34px;
  padding: 0;
  background: #fafafa;
  color: #111;
}
.bot-app .bot-app-c-mode {
  grid-area: mode;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--app-running);
  font-size: 12px;
}
.bot-app .bot-app-c-mode svg {
  width: 14px;
  height: 14px;
}
.bot-app .bot-app-c-mode select {
  width: auto;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
}
.bot-app-context {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: -12px 14px 0;
  padding: 18px 14px 8px;
  border-radius: 0 0 14px 14px;
  background: var(--chat-surface-2);
  color: oklch(0.85 0 0);
  font-size: 12px;
}
.bot-app-context > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bot-app-context svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.bot-app .bot-app-context-end {
  margin-left: auto;
  color: var(--app-muted);
}
.bot-app[data-skin="bot"] .bot-app-composer-box {
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "add text send";
  padding: 6px;
  border-radius: 999px;
}
.bot-app[data-skin="bot"] .bot-app-composer-box textarea {
  min-height: 0;
  padding: 7px 4px;
}
.bot-app[data-skin="bot"] .bot-app-c-mode,
.bot-app[data-skin="bot"] .bot-app-c-note,
.bot-app[data-skin="bot"] .bot-app-c-model,
.bot-app[data-skin="bot"] .bot-app-c-mic,
.bot-app[data-skin="bot"] .bot-app-context {
  display: none;
}
.bot-app[data-skin="bot"] .bot-app-composer-box .bot-app-send {
  background: var(--bot-accent);
  color: oklch(0.2 0.03 150);
}
/* A live session: the send button becomes a stop square. */
.bot-app[data-page="chat"]:has(.bot-app-chat-inner.is-live)[data-skin="session"] .bot-app-composer-box .bot-app-send svg {
  display: none;
}
.bot-app[data-page="chat"]:has(.bot-app-chat-inner.is-live)[data-skin="session"] .bot-app-composer-box .bot-app-send::after {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #111;
}
/* Session runs: plain prose, mono lines led by "done" / "runs", a busy line with a clock, and a changes card. */
.bot-app[data-skin="session"] .bot-app-agent-heading {
  display: none;
}
.bot-app[data-skin="session"] .bot-app-toolcalls::after {
  display: none !important;
}
.bot-app[data-skin="session"] .bot-app-tool {
  padding: 4px 0;
}
.bot-app[data-skin="session"] .bot-app-tool summary {
  min-height: 24px;
  color: oklch(0.85 0 0);
}
.bot-app[data-skin="session"] .bot-app-tool summary > span,
.bot-app[data-skin="session"] .bot-app-tool.is-working summary > span,
.bot-app[data-skin="session"] .bot-app-tool.is-done summary > span {
  display: inline;
  width: auto;
  min-width: 38px;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 11px;
  font-weight: 500;
  animation: none;
}
.bot-app[data-skin="session"] .bot-app-tool.is-done summary > span { color: var(--app-done); }
.bot-app[data-skin="session"] .bot-app-tool.is-working summary > span { color: var(--app-running); }
.bot-app-busy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0 !important;
  color: var(--app-muted);
  font-size: 13px;
  font-weight: 500;
}
.bot-app-busy[hidden] {
  display: none;
}
.bot-app-busy i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-running);
  animation: bot-app-pulse 1.2s ease-in-out infinite;
}
.bot-app-busy small {
  font-family: var(--app-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.bot-app[data-skin="bot"] .bot-app-busy {
  display: none;
}
.bot-app-diffcard {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 8px;
  padding: 10px 10px 10px 16px;
  border-radius: 14px;
  background: var(--chat-surface-2);
}
.bot-app-diffcard strong {
  font-size: 13px;
}
.bot-app-diffcard .is-add { color: var(--chat-diff-add-fg, oklch(0.88 0.12 150)); font-family: var(--app-mono); font-size: 12px; }
.bot-app-diffcard .is-del { color: oklch(0.8 0.11 20); font-family: var(--app-mono); font-size: 12px; }
.bot-app .bot-app-diffcard .bot-app-pill {
  margin-left: auto;
}
/* Model picker: a popover above the composer, not a modal. */
.bot-app .bot-app-popover {
  width: 320px;
  padding: 8px;
  border: 1px solid oklch(1 0 0 / 8%);
  border-radius: 14px;
  background: var(--chat-surface);
  box-shadow: 0 20px 50px rgb(0 0 0 / 50%);
}
.bot-app .bot-app-popover > button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 13px;
}
.bot-app .bot-app-popover > button:hover {
  background: var(--accent-row);
}
.bot-app .bot-app-popover small {
  color: var(--app-muted);
}
.bot-app .bot-app-popover .bot-app-side-search {
  margin: 0 0 4px;
}
.bot-app .bot-app-popover > p.bot-app-small {
  margin: 8px 10px 4px;
}
.bot-app-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
@media (max-width: 650px) {
  .bot-app .bot-app-template-grid,
  .bot-app-conn-grid {
    grid-template-columns: 1fr;
  }
  .bot-app-templates-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .bot-app .bot-app-settings {
    padding: 24px 16px;
  }
  .bot-app-context .bot-app-context-end {
    display: none;
  }
}
/* Faces inside template cards and starters: the older icon-tile rule must not paint over the face. */
.bot-app .bot-app-template-grid i.bav-face {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
}
/* Templates header on one line: the label, then the category pills scroll sideways instead of wrapping. */
.bot-app-templates-head > span {
  flex: none;
}
.bot-app .bot-app-templates-head .bot-app-categories {
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
}
.bot-app .bot-app-templates-head .bot-app-categories::-webkit-scrollbar {
  display: none;
}
.bot-app .bot-app-templates-head .bot-app-categories {
  justify-content: flex-start;
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}
/* Bot chats show the live step as a plain amber dot: the "runs" / "done" word is for session runs only. */
.bot-app[data-skin="bot"] .bot-app-tool summary > span {
  flex: none;
  overflow: hidden;
  font-size: 0;
  color: transparent;
}
/* While a bot's answer streams in, bubbles appear as their text starts — no empty placeholders. */
.bot-app[data-skin="bot"] .bot-app-result.is-streaming [data-sample-result] > h4:empty,
.bot-app[data-skin="bot"] .bot-app-result.is-streaming [data-sample-result] > p:empty,
.bot-app[data-skin="bot"] .bot-app-result.is-streaming [data-sample-result] > dl:not(:has(> div.is-in)) {
  display: none;
}
/* Create-routine sheet, corrected: a label above the schedule pills (no fieldset/legend), toggle rows, a left-aligned
   run-once check. */
.bot-app .bot-app-field-label {
  margin: 4px 0 6px;
  font-size: 12px;
}
.bot-app .bot-app-sheet .bot-app-segmented {
  display: flex;
  flex-wrap: nowrap;
}
.bot-app .bot-app-sheet .bot-app-segmented label {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.bot-app-segmented span {
  white-space: nowrap;
}
.bot-app .bot-app-deliver {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--chat-surface-2);
  text-align: left;
}
.bot-app .bot-app-deliver > strong,
.bot-app .bot-app-deliver > span {
  flex: 1;
  min-width: 0;
}
.bot-app .bot-app-deliver strong {
  font-size: 13px;
  font-weight: 500;
}
.bot-app .bot-app-deliver small {
  display: block;
  color: var(--app-muted);
  font-size: 11px;
}
/* A checkbox drawn as the app's green switch. */
.bot-app input.bot-app-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 38px;
  height: 22px;
  margin: 0;
  border-radius: 999px;
  background: oklch(0.38 0 0);
  cursor: pointer;
  transition: background-color 0.16s ease;
}
.bot-app input.bot-app-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.16s var(--ease);
}
.bot-app input.bot-app-toggle:checked {
  background: var(--app-done);
}
.bot-app input.bot-app-toggle:checked::after {
  transform: translateX(16px);
}
.bot-app .bot-app-sheet .bot-app-runonce {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  margin: 4px 0 12px;
  text-align: left;
}
.bot-app .bot-app-sheet .bot-app-runonce input {
  flex: none;
  margin-top: 2px;
}
.bot-app .bot-app-sheet .bot-app-runonce strong {
  font-size: 13px;
  font-weight: 500;
}
@media (max-width: 650px) {
  .bot-app .bot-app-sheet .bot-app-segmented {
    flex-wrap: wrap;
  }
  .bot-app .bot-app-sheet .bot-app-segmented label {
    flex: 1 0 30%;
  }
}
/* Dialogs scroll only vertically, with a quiet scrollbar — no white scrollbar corner. */
.bot-app .bot-app-dialog {
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: oklch(1 0 0 / 18%) transparent;
}
.bot-app .bot-app-dialog::-webkit-scrollbar {
  width: 8px;
}
.bot-app .bot-app-dialog::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: oklch(1 0 0 / 18%);
}
.bot-app .bot-app-dialog::-webkit-scrollbar-track,
.bot-app .bot-app-dialog::-webkit-scrollbar-corner {
  background: transparent;
}
.bot-app .bot-app-dialog textarea {
  resize: none;
}
/* ==================================================================================================================
   Exact port of the desktop app designs (AbacusAI Bot App Shell): tokens, shell, faces, chats, composer, Bots home,
   New bot, Settings. Values are copied from the design files; this block is authoritative over the rules above.
   ================================================================================================================== */
.bot-app {
  --shell: #1c1c1e;
  --pane: #131314;
  --ink: #f2f2f3;
  --app-muted: #8e8e93;
  --soft: #d4d4d8;
  --field: #242427;
  --card: #1b1b1d;
  --card-2: #1e1e21;
  --raise: #36363b;
  --accent-row: #303034;
  --seg-on: #3f3f46;
  --app-done: #86efac;
  --app-running: #fdba74;
  --app-error: #fca5a5;
  --app-primary: #e879f9;
  --chat-surface: #242427;
  --chat-surface-2: #1b1b1d;
  --chat-inset: #131314;
  --app-mono: "JetBrains Mono", ui-monospace, monospace;
  --rail-w: 56px;
  --side-w: 280px;
  grid-template-rows: 40px minmax(0, 1fr);
  background: var(--shell);
  color: var(--ink);
  font-family: Inter, "Bot Demo Inter", system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
/* Top bar */
.bot-app .bot-app-titlebar {
  gap: 2px;
  padding: 0 8px 0 16px;
  color: var(--app-muted);
  font-size: 13px;
}
.bot-app .bot-app-lights {
  width: 64px;
}
.bot-app .bot-app-history {
  gap: 2px;
  margin: 0;
}
.bot-app .bot-app-history svg {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 6px;
}
.bot-app .bot-app-titlebar .bot-app-icon-btn {
  width: 28px;
  height: 28px;
}
.bot-app .bot-app-brandname {
  padding-left: 8px;
  color: var(--ink);
  font-weight: 600;
}
.bot-app .bot-app-identity strong {
  font-weight: 500;
}
/* Rail */
.bot-app .bot-app-rail {
  gap: 4px;
  padding: 4px 0 12px;
}
.bot-app .bot-app-rail > button[data-rail] {
  width: 48px;
  height: 48px;
  justify-content: center;
  gap: 3px;
  color: var(--app-muted);
}
.bot-app .bot-app-rail > button[data-rail] > svg {
  width: 20px;
  height: 20px;
  padding: 5px 8px;
  border-radius: 10px;
}
.bot-app .bot-app-rail > button[aria-current="page"] {
  color: var(--ink);
}
.bot-app .bot-app-rail > button[aria-current="page"] > svg {
  background: var(--accent-row);
}
.bot-app .bot-app-rail > .bot-app-rail-small {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
}
.bot-app .bot-app-rail > .bot-app-rail-small > svg {
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
}
.bot-app .bot-app-rail > .bot-app-rail-me {
  width: 30px;
  height: 30px;
  margin-top: 6px;
}
.bot-app .bot-app-rail > .bot-app-rail-me > svg {
  width: 16px;
  height: 16px;
  padding: 7px;
  background: #3a3a3e;
}
/* Sidebar */
.bot-app .bot-app-sidebar {
  padding: 0 0 8px;
}
.bot-app .bot-app-side {
  padding: 0 8px;
}
.bot-app .bot-app-side-head {
  height: 36px;
  padding: 0 4px 0 8px;
}
.bot-app .bot-app-side-head strong {
  font-size: 15px;
}
.bot-app .bot-app-side-head .bot-app-icon-btn {
  width: 28px;
  height: 28px;
}
.bot-app .bot-app-side-list {
  gap: 2px;
  padding-top: 8px;
}
.bot-app .bot-app-tree-item {
  color: var(--ink);
}
.bot-app .bot-app-tree-item.is-selected,
.bot-app .bot-app-tree-item:hover {
  background: var(--accent-row);
}
.bot-app .bot-app-bot-row {
  height: 56px;
  min-height: 56px;
  padding: 0 8px;
  border-radius: 10px;
  gap: 10px;
}
.bot-app .bot-app-row-line {
  align-items: center;
  gap: 6px;
}
.bot-app .bot-app-row-line > span {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-app .bot-app-row-line small {
  font-size: 11px;
}
.bot-app .bot-app-row-sub {
  font-size: 12px;
  line-height: 16px;
}
.bot-app .bot-app-row-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bot-app .bot-app-unread {
  width: 8px;
  height: 8px;
}
/* Pane */
.bot-app .bot-app-workspace {
  margin: 0 8px 8px 8px;
  border-radius: 12px;
  background: var(--pane);
  box-shadow: none;
}
.bot-app[data-area="artifacts"] .bot-app-workspace,
.bot-app[data-area="library"] .bot-app-workspace,
.bot-app.is-sidebar-hidden .bot-app-workspace {
  margin-left: 8px;
}
/* ---- Faces (the app's Bot avatar) ---- */
@keyframes av-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-4%) rotate(1.5deg); } }
@keyframes av-blob { 0%, 100% { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; } 33% { border-radius: 56% 44% 42% 58% / 44% 58% 42% 56%; } 66% { border-radius: 42% 58% 56% 44% / 58% 44% 52% 48%; } }
@keyframes av-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
@keyframes av-talk { 0%, 100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.25); } }
@keyframes av-ring { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes av-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-10%) scale(0.96, 1.06); } 55% { transform: translateY(0) scale(1.06, 0.94); } }
@keyframes av-spark { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 40% { transform: scale(1) rotate(20deg); opacity: 1; } }
@keyframes av-zz { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(40%, -90%); opacity: 0; } }
@keyframes av-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.97); } }
@keyframes av-squash { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, 0.97); } }
@keyframes av-dart { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-14%, -6%); } 45% { transform: translate(14%, -4%); } 70% { transform: translate(-6%, 8%); } }
@keyframes av-busy { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-3%) rotate(-2deg); } 75% { transform: translateY(-3%) rotate(2deg); } }
@keyframes av-lookup { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10%); } }
@keyframes av-brow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14%); } }
@keyframes av-sweat { 0% { transform: translateY(-20%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(60%); opacity: 0; } }
.bot-app .av {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.bot-app .av[hidden] {
  display: none;
}
.bot-app .av i {
  font-style: normal;
}
.bot-app .av-body {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 30% 25%, rgb(255 255 255 / 55%), rgb(255 255 255 / 0%) 45%), var(--c);
  box-shadow: inset 0 -0.06em 0.12em rgb(0 0 0 / 18%), 0 0.04em 0.12em var(--glow);
}
.bot-app .av-svg {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  overflow: visible;
  filter: drop-shadow(0 0.04em 0.1em var(--glow));
}
.bot-app .av-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9%;
}
.bot-app .av-eyes {
  display: flex;
  gap: 18%;
  width: 56%;
  justify-content: center;
  align-items: center;
}
.bot-app .av-eye {
  display: block;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #17171a;
  animation: av-blink 4.2s infinite;
  transform-origin: center;
}
.bot-app .av-mouth {
  display: block;
  width: 22%;
  height: 8%;
  border-radius: 0 0 999px 999px;
  background: #17171a;
  transform-origin: top;
}
.bot-app .av-cheeks {
  position: absolute;
  top: 52%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 14%;
}
.bot-app .av-cheeks i {
  display: block;
  width: 16%;
  aspect-ratio: 1.6;
  border-radius: 999px;
  background: #ff8fab;
  opacity: 0.55;
  filter: blur(1px);
}
.bot-app .av-acc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.bot-app .av-idle { animation: av-float 5s ease-in-out infinite; }
.bot-app .av-idle .av-face { animation: av-squash 5s ease-in-out infinite; }
.bot-app .av-idle .av-body.blob,
.bot-app .av-working .av-body.blob,
.bot-app .av-waiting .av-body.blob { animation: av-blob 9s ease-in-out infinite; }
.bot-app .av-talking .av-mouth { width: 26%; height: 16%; border-radius: 999px; animation: av-talk 0.45s ease-in-out infinite; }
.bot-app .av-listening .av-body, .bot-app .av-listening .av-svg { animation: av-breathe 1.6s ease-in-out infinite; }
.bot-app .av-ring { position: absolute; inset: -6%; border-radius: 50%; border: 2px solid var(--c); animation: av-ring 1.6s ease-out infinite; }
.bot-app .av-happy { animation: av-bounce 1.6s ease-in-out infinite; }
.bot-app .av-happy .av-eye { height: 9%; aspect-ratio: auto; width: 16%; border-radius: 999px 999px 0 0; background: none; border: 0.05em solid #17171a; border-bottom: 0; box-sizing: border-box; animation: none; }
.bot-app .av-happy .av-mouth { width: 30%; height: 14%; }
.bot-app .av-asleep .av-eye { height: 6%; aspect-ratio: auto; width: 16%; animation: none; }
.bot-app .av-asleep .av-mouth { width: 10%; height: 5%; border-radius: 999px; }
.bot-app .av-asleep .av-body, .bot-app .av-asleep .av-svg { filter: saturate(0.55) brightness(0.85); }
.bot-app .av-working { animation: av-busy 0.9s ease-in-out infinite; }
.bot-app .av-working .av-eyes { animation: av-dart 1.6s ease-in-out infinite; }
.bot-app .av-working .av-mouth { width: 16%; height: 5%; border-radius: 999px; }
.bot-app .av-waiting .av-eyes { animation: av-lookup 2.4s ease-in-out infinite; }
.bot-app .av-waiting .av-eye { width: 17%; }
.bot-app .av-waiting .av-mouth { width: 14%; height: 6%; border-radius: 999px; }
.bot-app .av-brows { display: flex; gap: 26%; width: 56%; justify-content: center; position: absolute; top: 26%; animation: av-brow 2.4s ease-in-out infinite; }
.bot-app .av-brows i { display: block; width: 16%; height: 5%; min-height: 1px; border-radius: 999px; background: #17171a; }
.bot-app .av-blocked .av-eye { height: 8%; aspect-ratio: auto; width: 16%; animation: none; transform: rotate(12deg); }
.bot-app .av-blocked .av-eye:last-child { transform: rotate(-12deg); }
.bot-app .av-blocked .av-mouth { width: 20%; height: 5%; border-radius: 999px; }
.bot-app .av-blocked .av-body, .bot-app .av-blocked .av-svg { filter: saturate(0.7); }
.bot-app .av-sweat { position: absolute; top: 18%; right: 8%; width: 12%; aspect-ratio: 0.7; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #93c5fd; animation: av-sweat 1.6s ease-in infinite; }
.bot-app .av-spark { position: absolute; top: -8%; right: -10%; width: 26%; height: auto; aspect-ratio: 1; color: #fff; animation: av-spark 1.6s ease-in-out infinite; }
.bot-app .av-zz { position: absolute; top: -4%; right: -6%; font: 700 28% Inter, system-ui, sans-serif; color: var(--ink); animation: av-zz 2.4s ease-out infinite; }
.bot-app .av-zz.b { animation-delay: 1.2s; right: 0; }
.bot-app .bot-app-side .av-idle,
.bot-app .bot-app-template-grid .av-idle,
.bot-app .bot-app-shapes .av,
.bot-app .bot-app-newbot-shapes .av {
  animation: none;
}
/* ---- Bot chat ---- */
.bot-app-bot-identity,
.bot-app-day {
  display: none;
}
.bot-app[data-skin="bot"] .bot-app-bot-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0 8px;
}
.bot-app .bot-app-bot-identity strong {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}
.bot-app .bot-app-identity-status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 16px;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 16px;
}
.bot-app .bot-app-identity-status:not(:empty)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--app-done);
}
.bot-app[data-skin="bot"] .bot-app-day {
  display: block;
  align-self: center;
  width: fit-content;
  margin: 8px auto 4px !important;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--app-muted);
  font-size: 12px;
  line-height: 16px;
}
.bot-app[data-skin="bot"] .bot-app-chat-inner {
  max-width: 680px;
}
.bot-app[data-skin="bot"] .bot-app-user-message {
  max-width: 520px;
  margin: 8px 0 12px auto;
  padding: 8px 12px;
  border-radius: 20px 20px 6px 20px;
  color: #0b1f12;
  font-weight: 400;
}
.bot-app[data-skin="bot"] .bot-app-ack-bubble,
.bot-app[data-skin="bot"] [data-sample-result] > h4,
.bot-app[data-skin="bot"] [data-sample-result] > p,
.bot-app[data-skin="bot"] .bot-app-turn-reply {
  max-width: 520px;
  margin: 0 0 4px;
  padding: 8px 12px;
  border-radius: 6px 20px 20px 6px;
  background: var(--field);
  font-size: 14px;
  line-height: 20px;
}
.bot-app[data-skin="bot"] .bot-app-ack-bubble {
  border-radius: 20px 20px 20px 6px;
}
.bot-app[data-skin="bot"] [data-sample-result] > h4 {
  font-weight: 500;
}
.bot-app[data-skin="bot"] .bot-app-result button[data-artifact] {
  width: 256px;
  min-width: 0;
  height: 56px;
  padding: 0 12px 0 8px;
  border-radius: 12px;
  background: var(--card-2);
  font-weight: 500;
  font-size: 14px;
}
.bot-app[data-skin="bot"] .bot-app-result button[data-artifact] > svg {
  width: 20px;
  height: 20px;
  padding: 10px;
  border-radius: 8px;
  background: #3b82f6;
}
.bot-app[data-skin="bot"] .bot-app-result button[data-artifact] .bot-app-open-arrow {
  margin-left: auto;
  color: var(--app-muted);
}
.bot-app .bot-app-approval {
  width: 520px;
  max-width: 100%;
  margin: 12px 0 4px;
  padding: 14px;
  border-radius: 16px;
  background: var(--card-2);
}
.bot-app .bot-app-approval-head img {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}
.bot-app .bot-app-approval-head strong {
  font-size: 14px;
  font-weight: 500;
}
.bot-app .bot-app-approval-body {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--pane);
  color: var(--soft);
}
.bot-app .bot-app-pill {
  height: 32px;
  padding: 0 14px;
  background: var(--raise);
  font-size: 13px;
}
.bot-app .bot-app-pill.is-primary {
  background: var(--ink);
  color: #111;
  font-weight: 500;
}
/* Bot composer: the 52px pill — attach (raised), message, mic, send in the bot's colour. */
.bot-app[data-skin="bot"] .bot-app-composer {
  max-width: 712px;
}
.bot-app[data-skin="bot"] .bot-app-composer-box {
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "add text mic send";
  height: 52px;
  padding: 0 8px;
  gap: 8px;
  border-radius: 999px;
  background: var(--field);
}
.bot-app[data-skin="bot"] .bot-app-c-mic {
  display: inline-grid !important;
}
.bot-app[data-skin="bot"] .bot-app-composer-box > .bot-app-c-add {
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--raise);
  color: var(--ink);
}
.bot-app[data-skin="bot"] .bot-app-composer-box > .bot-app-c-mic,
.bot-app[data-skin="bot"] .bot-app-composer-box > .bot-app-send {
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--ink);
}
.bot-app[data-skin="bot"] .bot-app-composer-box > .bot-app-send {
  color: #0b1f12;
}
.bot-app[data-skin="bot"] .bot-app-composer-box textarea {
  padding: 0 0 0 4px;
  font-size: 14px;
  line-height: 20px;
  align-self: center;
}
/* ---- Session ---- */
.bot-app[data-skin="session"] .bot-app-chat-inner {
  max-width: 680px;
}
.bot-app[data-skin="session"] .bot-app-user-message {
  max-width: 400px;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--field);
}
.bot-app[data-skin="session"] .bot-app-tool summary {
  min-height: 28px;
  font-family: var(--app-mono);
  font-size: 12px;
  line-height: 16px;
  color: #a1a1aa;
}
.bot-app[data-skin="session"] .bot-app-tool.is-working summary {
  color: var(--ink);
}
.bot-app[data-skin="session"] .bot-app-tool-time {
  margin-left: 0;
  color: #71717a;
  font-size: 12px;
}
.bot-app[data-skin="session"] [data-sample-result] > p,
.bot-app[data-skin="session"] [data-sample-result] > h4 {
  line-height: 1.6;
}
.bot-app .bot-app-busy {
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}
.bot-app .bot-app-busy small {
  font-weight: 400;
}
/* Session composer card */
.bot-app[data-skin="session"] .bot-app-composer,
.bot-app-composer-slot .bot-app-composer {
  max-width: 712px;
}
.bot-app[data-skin="session"] .bot-app-composer-box {
  min-height: 96px;
  padding: 14px 8px 8px 16px;
  border-radius: 20px;
  background: var(--field);
  gap: 12px;
}
.bot-app-composer-slot .bot-app-composer-box {
  min-height: 120px !important;
}
.bot-app[data-skin="session"] .bot-app-composer-box textarea {
  padding: 0;
  font-size: 14px;
}
.bot-app[data-skin="session"] .bot-app-composer-box > .bot-app-c-add {
  width: 28px;
  height: 28px;
  min-width: 28px;
  margin-left: -6px;
  padding: 0;
  color: var(--ink);
}
.bot-app .bot-app-c-mode {
  color: var(--app-running);
  font-size: 13px;
}
.bot-app .bot-app-c-mode svg {
  display: none;
}
.bot-app .bot-app-c-mode select {
  font-size: 13px;
  font-weight: 400;
}
.bot-app[data-skin="session"] .bot-app-c-model {
  color: var(--ink) !important;
  font-size: 13px;
}
.bot-app[data-skin="session"] .bot-app-composer-box > .bot-app-c-mic,
.bot-app[data-skin="session"] .bot-app-composer-box > .bot-app-send {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
}
.bot-app[data-skin="session"] .bot-app-composer-box > .bot-app-c-mic {
  color: var(--ink);
}
.bot-app .bot-app-context {
  height: 52px;
  margin: -16px 12px 0;
  padding: 16px 8px 0;
  gap: 4px;
  border-radius: 0 0 14px 14px;
  background: var(--card-2);
  color: var(--ink);
  font-size: 13px;
}
.bot-app .bot-app-context > span {
  height: 28px;
  padding: 0 8px;
}
.bot-app .bot-app-context svg {
  opacity: 1;
}
/* New session */
.bot-app .bot-app-session {
  align-items: center;
  padding: 24px 28px;
}
.bot-app .bot-app-session-welcome {
  max-width: 680px;
}
.bot-app .bot-app-session-welcome h3 {
  margin: 0 0 24px;
  font-size: 28px;
  line-height: 36px;
  font-weight: 600;
}
.bot-app .bot-app-starters-head {
  margin: 18px 0 10px;
  font-size: 12px;
  line-height: 16px;
}
.bot-app .bot-app-starters {
  gap: 8px;
}
.bot-app .bot-app-starters > button {
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
}
.bot-app .bot-app-starters i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}
.bot-app .bot-app-starters i svg {
  width: 13px;
  height: 13px;
  stroke: #0b0b0c;
  stroke-width: 2;
}
.bot-app .bot-app-starters strong {
  font-size: 14px;
  font-weight: 500;
}
.bot-app .bot-app-starters p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  color: var(--app-muted);
}
/* ---- Bots home ---- */
.bot-app .bot-app-bots-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  padding: 32px 24px 32px;
}
.bot-app .bot-app-bots-home > .av {
  margin-bottom: 16px;
}
.bot-app .bot-app-shapes {
  gap: 6px;
  margin-bottom: 16px;
}
.bot-app .bot-app-shapes button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
}
.bot-app .bot-app-shapes button[aria-checked="true"] {
  background: var(--accent-row);
}
.bot-app .bot-app-name-pill {
  width: 480px;
  max-width: 100%;
  height: 52px;
  margin: 0 0 8px;
  padding: 0 8px 0 20px;
  gap: 12px;
  background: var(--field);
}
.bot-app .bot-app-name-pill input {
  height: 36px;
  font-size: 15px;
}
.bot-app .bot-app-name-pill .bot-app-send {
  width: 36px;
  height: 36px;
  background: var(--app-primary);
  color: #111;
}
.bot-app .bot-app-templates-head {
  align-self: stretch;
  margin: 0;
  padding: 28px 0 12px;
  font-size: 13px;
  line-height: 18px;
}
.bot-app .bot-app-templates-head .bot-app-categories {
  height: 32px;
  padding: 2px;
  gap: 2px;
  background: var(--card);
  -webkit-mask-image: none;
  mask-image: none;
}
.bot-app .bot-app-templates-head .bot-app-categories button {
  height: 28px;
  padding: 0 12px;
  font-size: 13px;
}
.bot-app .bot-app-templates-head .bot-app-categories button[aria-selected="true"] {
  background: var(--accent-row);
}
.bot-app .bot-app-template-grid {
  align-self: stretch;
  gap: 8px;
}
.bot-app .bot-app-template-grid > button {
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  background: var(--card);
}
.bot-app .bot-app-template-grid > button > span {
  gap: 10px;
}
.bot-app .bot-app-template-grid strong {
  font-size: 14px;
  font-weight: 500;
}
.bot-app .bot-app-template-grid p {
  min-height: 36px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--app-muted);
}
.bot-app .bot-app-template-tools {
  gap: 6px;
  margin: 0;
  font-size: 12px;
  line-height: 16px;
}
.bot-app .bot-app-template-tools i {
  width: 12px;
  height: 12px;
}
.bot-app .bot-app-template-tools i + i {
  margin-right: 0;
}
/* ---- New bot ---- */
.bot-app .bot-app-newbot {
  height: 100%;
}
.bot-app-newbot-form {
  display: flex;
  min-height: 100%;
}
.bot-app .bot-app-newbot-face {
  width: 300px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 24px 24px;
  background: #171718;
}
.bot-app .bot-app-newbot-face > .av {
  margin-bottom: 8px;
}
.bot-app-newbot-who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
  text-align: center;
}
.bot-app-newbot-who strong {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.bot-app-newbot-who small {
  font-size: 13px;
  line-height: 18px;
  color: var(--app-muted);
}
.bot-app .bot-app-newbot-face .bot-app-field-label {
  align-self: stretch;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--app-muted);
}
.bot-app-newbot-shapes {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.bot-app .bot-app-newbot-shapes button {
  display: grid;
  place-items: center;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
}
.bot-app .bot-app-newbot-shapes button[aria-checked="true"] {
  background: var(--accent-row);
}
.bot-app-newbot-colours {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 6px;
}
.bot-app .bot-app-newbot-colours button {
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
}
.bot-app .bot-app-newbot-colours button[aria-checked="true"] {
  box-shadow: 0 0 0 2px #1b1b1d, 0 0 0 4px var(--ink);
}
.bot-app-newbot-acc {
  align-self: stretch;
  display: flex;
  gap: 4px;
}
.bot-app .bot-app-newbot-acc button {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #1f1f22;
  color: var(--app-muted);
  font-size: 12px;
}
.bot-app .bot-app-newbot-acc button[aria-checked="true"] {
  background: var(--accent-row);
  color: var(--ink);
}
.bot-app-newbot-greet {
  align-self: stretch;
  margin-top: auto;
  padding-top: 24px;
}
.bot-app .bot-app-newbot-greet p {
  width: fit-content;
  max-width: 230px;
  margin: 0 0 4px;
  padding: 8px 12px;
  border-radius: 20px 20px 20px 6px;
  background: var(--field);
  font-size: 13px;
  line-height: 18px;
}
.bot-app-newbot-greet small {
  padding-left: 4px;
  font-size: 12px;
  color: var(--app-muted);
}
.bot-app .bot-app-newbot-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 40px 0;
}
.bot-app .bot-app-newbot-fields label,
.bot-app .bot-app-newbot-fields .bot-app-field-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 16px;
}
.bot-app .bot-app-newbot-fields input,
.bot-app .bot-app-newbot-fields select,
.bot-app .bot-app-newbot-fields textarea {
  height: 40px;
  margin: 0 !important;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  font-size: 14px;
}
.bot-app .bot-app-newbot-fields textarea {
  height: 96px;
  padding: 10px 12px;
  line-height: 20px;
  resize: none;
}
.bot-app-newbot-row {
  display: flex;
  gap: 12px;
}
.bot-app-newbot-row > label {
  flex: 1;
}
.bot-app .bot-app-newbot-row > .bot-app-newbot-at {
  flex: 0 0 120px;
}
.bot-app .bot-app-checks {
  height: 40px;
  margin: -8px 0 0;
  padding: 4px;
  border-radius: 10px;
  background: var(--field);
}
.bot-app .bot-app-checks label {
  flex: 1 1 0;
  display: block;
  margin: 0;
}
.bot-app .bot-app-checks span {
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 13px;
}
.bot-app .bot-app-checks input:checked + span {
  background: var(--seg-on);
}
.bot-app .bot-app-newbot-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 0 24px;
}
.bot-app-newbot-foot small {
  flex: 1;
  font-size: 12px;
  line-height: 16px;
  color: var(--app-muted);
}
.bot-app .bot-app-ghost {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-size: 14px;
}
.bot-app .bot-app-create {
  height: 36px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: #4ade80;
  color: #0b1f12;
  font-size: 14px;
  font-weight: 600;
}
/* ---- Settings ---- */
.bot-app [data-side="settings"] {
  padding: 0 0 0 0;
}
.bot-app [data-side="settings"] .bot-app-side-search {
  height: 32px;
  margin: 0 0 8px 8px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--field);
  font-size: 13px;
}
.bot-app [data-side="settings"] .bot-app-side-list {
  gap: 1px;
  padding: 0;
}
.bot-app [data-side="settings"] .bot-app-side-label {
  margin: 0 !important;
  padding: 10px 8px 4px 16px;
  font-size: 12px;
}
.bot-app [data-side="settings"] .bot-app-tree-item {
  height: 32px;
  min-height: 32px;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--soft);
  font-size: 13px;
}
.bot-app [data-side="settings"] .bot-app-tree-item.is-selected {
  background: var(--accent-row);
  color: var(--ink);
}
.bot-app .bot-app-settings {
  max-width: 680px;
  padding: 40px 0 32px;
}
.bot-app .bot-app-settings h3 {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}
.bot-app .bot-app-set-lead {
  margin: 0;
  padding: 4px 0 24px;
  font-size: 13px;
  line-height: 18px;
}
.bot-app-settings h3 + .bot-app-set-card {
  margin-top: 28px;
}
.bot-app .bot-app-set-card {
  padding: 0 4px;
  border-radius: 14px;
  background: var(--card);
}
.bot-app .bot-app-set-row,
.bot-app [data-connected-list] .bot-app-connector {
  min-height: 52px;
  padding: 8px 12px;
  gap: 12px;
}
.bot-app .bot-app-set-row + .bot-app-set-row,
.bot-app [data-connected-list] .bot-app-connector + .bot-app-connector {
  border-top: 1px solid var(--field);
}
.bot-app .bot-app-set-row strong {
  font-size: 14px;
  font-weight: 500;
}
.bot-app .bot-app-set-row small {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
}
.bot-app .bot-app-set-select {
  height: 30px;
  padding: 0 10px;
  gap: 6px;
  border-radius: 8px;
  background: var(--field);
}
.bot-app .bot-app-settings .bot-app-switch {
  width: 34px;
  height: 20px;
}
.bot-app .bot-app-settings .bot-app-switch[aria-checked="true"] {
  background: #4ade80;
}
.bot-app .bot-app-set-label {
  margin: 0;
  padding: 24px 0 8px;
  font-size: 13px;
  font-weight: 600;
}
.bot-app .bot-app-conn-cats {
  gap: 8px;
  padding-bottom: 16px;
}
.bot-app .bot-app-conn-cats button {
  height: 30px;
  padding: 0 12px;
  background: var(--card);
  font-size: 13px;
}
.bot-app .bot-app-conn-cats button[aria-selected="true"] {
  background: var(--accent-row);
}
.bot-app .bot-app-settings .bot-app-conn-cats + .bot-app-set-label {
  padding-top: 0;
}
.bot-app .bot-app-connector > img {
  width: 20px;
  height: 20px;
  padding: 4px;
  border-radius: 8px;
}
.bot-app .bot-app-connector strong {
  font-size: 14px;
  font-weight: 500;
}
.bot-app .bot-app-conn-grid {
  gap: 8px;
}
.bot-app .bot-app-conn-grid .bot-app-connector {
  min-height: 60px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--card);
}
.bot-app .bot-app-settings .bot-app-pill {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
}
.bot-app .bot-app-settings .bot-app-pill.is-primary {
  background: var(--ink);
}
@media (max-width: 650px) {
  .bot-app-newbot-form {
    flex-direction: column;
  }
  .bot-app .bot-app-newbot-face {
    width: auto;
  }
  .bot-app .bot-app-newbot-fields {
    padding: 20px 16px 0;
  }
  .bot-app .bot-app-name-pill {
    width: 100%;
  }
}